/* =====================================================================
   RentFox — Filament Design System
   Centrální CSS vrstva pro celý panel (app + platform).

   Loaded via AdminPanelProvider render hook HEAD_END.
   EDITUJ ZDE — žádné inline barvy v Resources ani Blade view.

   Sekce:
     1. Design tokens — legacy (sidebar, topbar, KPI, surfaces)
     1c. Design tokens — Fáze 0 (--rf-* systémové tokeny, Fáze 1+)
     2. Sidebar
     3. Topbar
     4. KPI cards
     5. Form footer bar
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — light mode
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Brand accent (orange — aktivní stav sidebaru, KPI ikony) */
  --rf-accent:       #f97316;   /* orange-500 */
  --rf-accent-hover: #ea580c;   /* orange-600 */

  /* Foreground — wordmark a adaptivní text (light: zinc-900, dark: zinc-50) */
  --rf-foreground: #18181b;     /* zinc-900 */

  /* Sidebar */
  --rf-sidebar-bg:        #fafafa;   /* zinc-50  — světlé pozadí navigace */
  --rf-sidebar-header-bg: #27272a;   /* zinc-800 — tmavá zóna loga (bílé logo viditelné) */
  --rf-sidebar-border:    #e4e4e7;   /* zinc-200 */

  /* Navigation items */
  --rf-nav-color:       #52525b;                     /* zinc-600 */
  --rf-nav-hover-bg:    rgba(249, 115, 22, 0.06);
  --rf-nav-hover-color: #18181b;                     /* zinc-900 */
  --rf-nav-label-color: #71717a;                     /* zinc-500 */

  /* Topbar — stejná barva v light i dark (zinc-800) */
  --rf-topbar-bg:         #27272a;   /* zinc-800 */
  --rf-topbar-border:     #3f3f46;   /* zinc-700 */
  --rf-topbar-icon-color: #a1a1aa;   /* zinc-400 */

  /* KPI karty */
  --rf-kpi-bg:     #ffffff;
  --rf-kpi-border: #e4e4e7;   /* zinc-200 */

  /* Surfaces & content */
  --rf-border:         #e7eaef;   /* aktualizováno spec (bylo #e5e7eb) */
  --rf-border-inner:   #f3f4f6;
  --rf-bg-card:        #ffffff;
  --rf-bg-thead:       #f9fafb;
  --rf-bg-ph:          #f3f4f6;
  --rf-bg-stripe:      #fafafa;
  --rf-bg-row-mobile:  #f9fafb;
  --rf-text-primary:   #111827;
  --rf-text-secondary: #374151;
  --rf-text-muted:     #6b7280;
  --rf-text-subtle:    #9ca3af;
  --rf-input-bg:       #ffffff;
  --rf-input-border:   #e5e7eb;
  --rf-input-text:     #111827;

  /* KPI icon-wrap backgrounds (light) */
  --rf-icon-cal:    #eff6ff;   /* blue-50  */
  --rf-icon-wrench: #fffbeb;   /* amber-50 */
  --rf-icon-chart:  #f0fdf4;   /* green-50 */
}


/* ─────────────────────────────────────────────────────────────────────
   1b. DESIGN TOKENS — dark mode
   ───────────────────────────────────────────────────────────────────── */
:root.dark {
  --rf-foreground: #fafafa;     /* zinc-50 */

  --rf-sidebar-bg:        #18181b;   /* zinc-900 — tmavší než content */
  --rf-sidebar-header-bg: #09090b;   /* zinc-950 */
  --rf-sidebar-border:    #3f3f46;   /* zinc-700 */

  --rf-nav-color:       #a1a1aa;                      /* zinc-400 */
  --rf-nav-hover-bg:    rgba(249, 115, 22, 0.10);
  --rf-nav-hover-color: #fafafa;
  --rf-nav-label-color: #71717a;                      /* zinc-500 */

  --rf-topbar-bg:         #27272a;   /* zinc-800 */
  --rf-topbar-border:     #3f3f46;   /* zinc-700 */
  --rf-topbar-icon-color: #a1a1aa;   /* zinc-400 */

  --rf-kpi-bg:     #27272a;   /* zinc-800 */
  --rf-kpi-border: #3f3f46;   /* zinc-700 */

  --rf-border:         #374151;
  --rf-border-inner:   #2d3748;
  --rf-bg-card:        #1e293b;
  --rf-bg-thead:       #111827;
  --rf-bg-ph:          #1f2937;
  --rf-bg-stripe:      #1a2436;
  --rf-bg-row-mobile:  #1a2436;
  --rf-text-primary:   #f9fafb;
  --rf-text-secondary: #d1d5db;
  --rf-text-muted:     #9ca3af;
  --rf-text-subtle:    #6b7280;
  --rf-input-bg:       #374151;
  --rf-input-border:   #4b5563;
  --rf-input-text:     #f9fafb;

  --rf-icon-cal:    rgba(37, 99, 235, 0.20);
  --rf-icon-wrench: rgba(217, 119, 6, 0.20);
  --rf-icon-chart:  rgba(22, 163, 74, 0.20);
}


/* ─────────────────────────────────────────────────────────────────────
   1c. DESIGN TOKENS — Fáze 0 systémový token set
   Prefix --rf-* odděluje od Filament/Tailwind interních proměnných.
   Konzumují je Fáze 1+ (vizuální polish Přehledu, Finance).

   Akcentní logika (závazná — žádná ad-hoc barevná pravidla mimo tokeny):
     oranžová (--rf-fox)   = brand/identita: logo, aktivní nav, primární CTA
     modrá (--rf-blue)     = utility: interní navigační odkazy
     zelená/amber/červená  = VÝHRADNĚ datové stavy (rezervace, stav vozidla…)
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* === SURFACES === */
  --rf-bg:          #f6f7f9;
  --rf-bg-tint:     #f1f3f6;
  --rf-card:        #ffffff;
  --rf-border-soft: #eef1f5;
  /* --rf-border je definován v sekci 1 výše */

  /* === INK === */
  --rf-ink:   #0f172a;
  --rf-muted: #64748b;
  --rf-faint: #94a3b8;

  /* === BRAND + INTERACTION === */
  --rf-fox:      #f97316;   /* brand — logo, aktivní nav, primární CTA */
  --rf-fox-600:  #ea580c;
  --rf-fox-soft: #fff3ea;
  --rf-blue:     #2563eb;   /* utility — interní navigační odkazy */
  --rf-blue-soft:#eaf1fe;

  /* === SEMANTIC (jen datové stavy) === */
  --rf-green:      #16a34a;
  --rf-green-700:  #15803d;
  --rf-green-soft: #e9f8ef;
  --rf-amber:      #d97706;
  --rf-amber-soft: #fef6e7;
  --rf-amber-bd:   #f6dca0;
  --rf-red:        #dc2626;
  --rf-red-soft:   #fdeaea;

  /* === NAV (dark topbar) === */
  --rf-nav:      #15171c;
  --rf-nav-line: #262a31;
  --rf-nav-mut:  #8b94a3;

  /* === SHADOW SYSTEM === */
  --rf-sh-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --rf-sh-md: 0 2px 4px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.07);
  --rf-sh-lg: 0 4px 8px rgba(16,24,40,.05), 0 14px 34px rgba(16,24,40,.10);

  /* === RADIUS === */
  --rf-r:    16px;
  --rf-r-sm: 11px;

  /* === GRADIENT STOPS — fleet bar segmenty (Fáze 1) === */
  --rf-green-light: #34d399;   /* free segment: light stop */
  --rf-blue-light:  #60a5fa;   /* out segment: light stop */
  --rf-amber-light: #fbbf24;   /* svc segment: light stop */
  --rf-red-light:   #f87171;   /* over segment: light stop */
}


/* ─────────────────────────────────────────────────────────────────────
   2. SIDEBAR
   ───────────────────────────────────────────────────────────────────── */

/* Sidebar tělo — light zinc-50 / dark zinc-900 */
.fi-sidebar {
  background-color: var(--rf-sidebar-bg) !important;
  border-right: 1px solid var(--rf-sidebar-border) !important;
}

/* Logo / tenant header zóna — tmavé pozadí, aby bílé logo bylo viditelné */
.fi-sidebar-header {
  background-color: var(--rf-sidebar-header-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.fi-sidebar-header .fi-tenant-menu-trigger,
.fi-sidebar-header .fi-tenant-menu-trigger * {
  color: rgba(255, 255, 255, 0.85) !important;
}
.fi-sidebar-header .fi-logo {
  color: rgba(255, 255, 255, 0.92) !important;  /* wordmark bílá v tmavé header zóně */
  height: 2.75rem !important;
}

/* ─────────────────────────────────────────────────────────────────────
   LOGO — globální pravidla (login page, emaily, jakýkoliv jiný kontext)
   Wordmark používá currentColor → dědí barvu z .fi-logo kontextu.
   ───────────────────────────────────────────────────────────────────── */
.fi-logo {
  color: var(--rf-foreground);  /* zinc-900 light / zinc-50 dark */
}

/* Nav položka — základní stav */
.fi-sidebar-nav-item-button {
  color: var(--rf-nav-color);
  position: relative;
}
.fi-sidebar-nav-item-button:hover {
  background-color: var(--rf-nav-hover-bg) !important;
  color: var(--rf-nav-hover-color) !important;
}

/* Aktivní položka — 3px levý okraj v brand orange, ŽÁDNÝ background fill */
.fi-sidebar-nav-item-button.fi-active,
[aria-current="page"] .fi-sidebar-nav-item-button {
  background-color: transparent !important;
  color: var(--rf-accent) !important;
  font-weight: 500 !important;
}
.fi-sidebar-nav-item-button.fi-active::before,
[aria-current="page"] .fi-sidebar-nav-item-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background-color: var(--rf-accent);
  border-radius: 0 3px 3px 0;
}
/* Ikona aktivní položky — zdědí orange */
.fi-sidebar-nav-item-button.fi-active .fi-icon,
[aria-current="page"] .fi-sidebar-nav-item-button .fi-icon {
  color: var(--rf-accent) !important;
}

/* Section group labels */
.fi-sidebar-group-label {
  color: var(--rf-nav-label-color) !important;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}


/* ─────────────────────────────────────────────────────────────────────
   3. TOPBAR
   ───────────────────────────────────────────────────────────────────── */
.fi-topbar {
  background-color: var(--rf-topbar-bg) !important;
  border-bottom: 1px solid var(--rf-topbar-border) !important;
}
.fi-topbar .fi-icon-btn,
.fi-topbar button {
  color: var(--rf-topbar-icon-color) !important;
}
.fi-topbar input {
  color: #fafafa !important;
}
.fi-topbar input::placeholder {
  color: #71717a !important;
}
/* Search — omezená šířka, neutrální fill na tmavém pozadí */
.fi-topbar .fi-input-wrp {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--rf-sidebar-border) !important;
  max-width: 28rem !important;
}
.dark .fi-topbar .fi-input-wrp {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--rf-sidebar-border) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   4. KPI CARDS
   Použití z PHP: view('partials.kpi-stats-bar', ['cards' => [...]])
   Použití z Blade: <x-kpi-card accent="blue" title="..." value="..." />
   ───────────────────────────────────────────────────────────────────── */

/* Základní karta */
.kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--rf-kpi-bg);
  border: 1px solid var(--rf-kpi-border);
  border-left-width: 3px;  /* barva přichází z accent třídy níže */
  border-radius: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.kpi-card--link { cursor: pointer; }
.kpi-card--link:hover { background: var(--rf-bg-stripe); }

/* Left-border accent barvy */
.kpi-card--blue    { border-left-color: #3b82f6; }
.kpi-card--amber   { border-left-color: #f59e0b; }
.kpi-card--green   { border-left-color: #22c55e; }
.kpi-card--neutral { border-left-color: #71717a; }

/* Icon wrapper */
.kpi-card__icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-card__icon-wrap--blue    { background: var(--rf-icon-cal); }
.kpi-card__icon-wrap--amber   { background: var(--rf-icon-wrench); }
.kpi-card__icon-wrap--green   { background: var(--rf-icon-chart); }
.kpi-card__icon-wrap--neutral { background: var(--rf-bg-ph); }

.kpi-card__icon { width: 18px; height: 18px; display: block; }
.kpi-card__icon--blue    { color: #2563eb; }
.kpi-card__icon--amber   { color: #d97706; }
.kpi-card__icon--green   { color: #16a34a; }
.kpi-card__icon--neutral { color: #52525b; }

/* Text */
.kpi-card__body     { min-width: 0; flex: 1; }
.kpi-card__label    { font-size: 11px; color: var(--rf-text-muted); margin-bottom: 1px; }
.kpi-card__value    { font-size: 17px; font-weight: 700; color: var(--rf-text-primary); line-height: 1.25; }
.kpi-card__subtitle { font-size: 12px; color: var(--rf-text-subtle); margin-top: 1px; white-space: nowrap; }

.kpi-card__chevron {
  width: 14px;
  height: 14px;
  color: var(--rf-text-subtle);
  flex-shrink: 0;
  margin-left: auto;
}

/* Horizontální bar — sdílený kontejner pro více karet */
.kpi-cards-bar {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--rf-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rf-kpi-bg);
}
/* Karty v baru: bez individuálního border, jen pravý separator */
.kpi-cards-bar .kpi-card {
  border-top: none;
  border-bottom: none;
  border-right: 1px solid var(--rf-border-inner);
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 0;
}
.kpi-cards-bar .kpi-card:last-child { border-right: none; }

/* Mobile: karty pod sebou */
@media (max-width: 640px) {
  .kpi-cards-bar               { flex-direction: column !important; }
  .kpi-cards-bar .kpi-card     { border-right: none !important; border-bottom: 1px solid var(--rf-border-inner) !important; padding: 10px 14px !important; }
  .kpi-cards-bar .kpi-card:last-child { border-bottom: none !important; }
  .kpi-card__value             { font-size: 15px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   5. FORM FOOTER BAR
   Sticky lišta akcí (Uložit / Zrušit) je position:fixed element s třídou
   .fi-ac.fi-align-end uvnitř .form-actions kontejneru — musíme cílit přímo
   na něj, rodičovský background ho neovlivní.
   ───────────────────────────────────────────────────────────────────── */
.form-actions > .fi-ac.fi-align-end,
.fi-form-actions > .fi-ac.fi-align-end {
  background-color: #f3f4f6 !important;  /* gray-100 */
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05) !important;
}

.dark .form-actions > .fi-ac.fi-align-end,
.dark .fi-form-actions > .fi-ac.fi-align-end {
  background-color: #18181b !important;  /* zinc-900 */
  border-top: 1px solid #27272a !important;
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.2) !important;
}

/* Mobile: Vytvořit + Zrušit na jednom řádku, Vytvořit vpravo */
@media (max-width: 640px) {
  .fi-form-actions {
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
  }
  .fi-form-actions > * {
    flex: 1 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   6. FLATPICKR — mobile & desktop UX overrides (ADR-0065)
   ───────────────────────────────────────────────────────────────────── */

/* Fat-finger safe tap targets (Apple HIG: ≥44px) */
.flatpickr-day {
  min-height: 40px !important;
  line-height: 40px !important;
  font-size: 0.875rem;
}

/* Calendar má max-width omezení — pojistka proti přetečení na mobilu */
.flatpickr-calendar {
  max-width: 100vw !important;
}

/* Týdenní dny (Po Út St ...) — čitelnější na malých displejích */
.flatpickr-weekday {
  font-size: 0.75rem;
}

/* Range highlight — lehce odlišná barva pro selected range span */
.flatpickr-day.inRange {
  background: var(--color-primary-100, #dbeafe) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.dark .flatpickr-day.inRange {
  background: var(--color-primary-900, #1e3a5f) !important;
}

/* Disabled days — výrazněji přeškrtnuté */
.flatpickr-day.flatpickr-disabled {
  color: #d1d5db !important;
  text-decoration: line-through;
}

.dark .flatpickr-day.flatpickr-disabled {
  color: #4b5563 !important;
}

/* Partial-occupancy dot — den má blokaci/rezervaci ale není plně obsazený 24h.
   Malý amber kroužek pod číslem dne (univerzální UX pattern z iOS/Google Calendar). */
.flatpickr-day {
  position: relative; /* potřeba pro absolutní pozicování tečky */
}

.fp-partial-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f59e0b; /* amber-400 */
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.dark .fp-partial-dot {
  background: #fbbf24; /* amber-400, trochu výraznější na tmavém pozadí */
}

/* Mobile: calendar se vždy otevře nad/pod input, nikdy mimo obrazovku */
@media (max-width: 640px) {
  .flatpickr-calendar {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
  }

  .flatpickr-day {
    min-height: 44px !important;
    line-height: 44px !important;
  }
}