/* ============================================================
   Garáže Milovice — motiv portálu (drop-in)
   Namapuje značku design systému na proměnné stávajícího portálu.
   Načtěte AŽ ZA /assets/style.css. Nepřepisuje žádné PHP.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Schibsted+Grotesk:wght@500;600;700;800&display=swap');

/* --- Mapování tokenů značky na kontrakt portálu --- */
:root {
  /* Plochy */
  --color-bg:         #f6f8fa;   /* chladná bílá (gray-50) */
  --color-surface:    #ffffff;
  --color-line:       #dce3eb;   /* hairline (gray-200) */
  --color-line-soft:  #eef1f5;   /* gray-100 */

  /* Text */
  --color-ink:        #1b2733;   /* chladná téměř-černá */
  --color-ink-soft:   #45525f;   /* gray-700/600 */
  --color-muted:      #6b7c8d;   /* gray-500 */

  /* Značka — civilní modrá */
  --color-accent:      #1e5baa;  /* blue-600 (primární) */
  --color-accent-soft: #eef4fb;  /* blue-50 */

  /* Stavy */
  --color-success: #176f49;      /* green-600 */
  --color-warn:    #b27514;      /* amber-600 */
  --color-error:   #a22b27;      /* red-600 */

  /* Tvar & stín — jemné, civilní */
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(19,26,31,.08), 0 1px 2px rgba(19,26,31,.05);
  --shadow-md: 0 4px 12px rgba(19,26,31,.08), 0 2px 4px rgba(19,26,31,.05);

  /* Typografie */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --letter-spacing-heading: -0.02em;
  --line-height-heading: 1.12;
}

/* --- Drobné dotažení komponent na styl design systému --- */

/* Nadpisy v hluboké civilní modři (charakter značky) */
h1, h2, h3, h4 { color: #122f54; }

/* Logo dlaždice (textová varianta „GM") — měkčí roh, blue-600 */
.brand-mark {
  background: var(--color-accent);
  border-radius: 8px;
  font-weight: 800;
}

/* Skutečné logo (obrázek) + stohovaný nápis — odpovídá lockupu DS */
.brand-logo {
  display: block;
  width: 40px; height: 40px;
  border-radius: 9px;
  flex: none;
}
.brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.04;
  font-family: var(--font-display);
}
.brand .brand-text b {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: #122f54;
}
.brand .brand-text i {
  font-style: normal;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

/* Primární tlačítko ztmavne o krok (blue-700) místo do černé */
.btn-primary:hover {
  background: #184a8a;
  border-color: #184a8a;
  color: #fff;
}

/* Aktivní stání / vlastní karta — měkký modrý nádech */
.stani-card.muj {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.stani-card .stani-cislo { color: #122f54; }

/* Tabulkové hlavičky — výraznější tracking, chladný podklad */
table.data th {
  background: var(--color-bg);
  color: var(--color-ink-soft);
  letter-spacing: 0.06em;
}

/* Odznaky — sjednotit s paletou stavů DS */
.badge-success { background: #def0e6; color: var(--color-success); }
.badge-warn    { background: #fbeccd; color: var(--color-warn); }
.badge-accent  { background: var(--color-accent-soft); color: var(--color-accent); }

/* Číslice peněz/VS v tabulkách — tabulkové číslice */
table.data td { font-variant-numeric: tabular-nums; }

/* Fokus — modrá svatozář DS */
input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(84,141,206,.35);
}

/* Lockup nad přihlašovacím formulářem (login.php) */
.login-logo {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 1.25rem;
}
.login-logo img { border-radius: 11px; }
.login-lockup { display: flex; flex-direction: column; line-height: 1.04; font-family: var(--font-display); }
.login-lockup b { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; color: #122f54; }
.login-lockup i { font-style: normal; font-weight: 600; font-size: 1.15rem; color: var(--color-accent); }

/* Wordmark v hlavičce — čitelnost na tmavých/barevných hlavičkách
   ostatních témat (dark, neon, aurora, amber). Bílý nápis. */
body.tema-dark   .brand .brand-text b, body.tema-dark   .brand .brand-text i,
body.tema-neon   .brand .brand-text b, body.tema-neon   .brand .brand-text i,
body.tema-aurora .brand .brand-text b, body.tema-aurora .brand .brand-text i,
body.tema-amber  .brand .brand-text b, body.tema-amber  .brand .brand-text i {
  color: #fff;
}

/* Mazací tlačítko (.btn-danger) — barva dle DS (klidově red-500, hover red-600)
   + KOMPLETNÍ sjednocení rozměru se .btn-primary/.btn-secondary.
   Portál .btn-danger nesdílí základní pravidlo tlačítek, proto mu chybělo
   display / font-family / line-height → <button> Smazat měl jinou výšku
   než sousední bílá tlačítka (Upravit, Stáhnout). */
.btn-danger {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: var(--line-height-body);
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  background: #c53b36;
}
.btn-danger:hover { background: #a22b27; }

/* Malá varianta tlačítka — jednotná velikost místo dřívějších inline přepisů.
   Vyšší specificita (a.../button...), aby přebila i sdílené pravidlo button.btn-primary. */
.btn-sm, a.btn-sm, button.btn-sm, input.btn-sm, summary.btn-sm {
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
}

/* ============================================================
   Lucide ikony — centrální styl (Lucide se načítá v patičce, footer.php)
   ============================================================ */
/* Hlavní horní menu — ikona dědí barvu odkazu (aktivní = modrá, jinak tmavá) */
.main-nav a { display: inline-flex; align-items: center; }
.main-nav a svg { width: 16px; height: 16px; stroke-width: 1.75; flex: 0 0 auto; margin-right: var(--space-2); }
/* „Přihlásit" v menu: .main-nav a (0,1,1) jinak přebíjí bílý text .btn-primary → vynutit bílou */
.main-nav a.btn-primary { color: #fff; }
.main-nav a.btn-primary:hover { color: #fff; }

/* Admin levé menu (Správa) */
.admin-nav a { display: flex; align-items: center; gap: var(--space-2); }
.admin-nav a svg { width: 18px; height: 18px; stroke-width: 1.75; color: #184a8a; flex: 0 0 auto; }

/* Rychlá navigace na finance stránce */
.finance-nav a { display: inline-flex; align-items: center; gap: var(--space-2); }
.finance-nav a svg { width: 18px; height: 18px; stroke-width: 1.75; color: #184a8a; flex: 0 0 auto; }

/* Drobná i normální tlačítka s ikonou (Upomínka, ← Přehled…) — ikona škáluje s textem */
.icon-btn { display: inline-flex; align-items: center; gap: var(--space-1); }
.icon-btn svg { width: 1.1em; height: 1.1em; stroke-width: 1.75; color: #184a8a; flex: 0 0 auto; }

/* ============================================================
   Akční buňky a sekundární tlačítka
   ============================================================ */
/* DS: secondary = bílá výplň + tenký okraj (portál měl transparent → na řádku
   tabulky splývalo s textem). Bílé pozadí = jasně čitelné jako tlačítko. */
.btn-secondary { background: var(--color-surface); }

/* V tabulce je .actions přímo <td>. display:flex z něj dělá ne-buňku → nenatáhne
   se na výšku řádku a při hoveru zůstane vpravo dole bílý blok. Vrátíme mu chování
   běžné buňky; tlačítka vedle sebe inline. (div.actions mimo tabulku zůstává flex.) */
td.actions { display: table-cell; white-space: nowrap; vertical-align: middle; }
td.actions > * + * { margin-left: var(--space-2); }