/* ============================================================
   Požarne — design system (CGP: navy #063055 / ink #051725 / red #a31d20)
   Tailwind (CDN) handles utilities; this file owns the bespoke,
   "next-level SaaS" component layer + brand background.
   Theming: semantic vars flip between dark (default) and html.light.
   ============================================================ */
:root {
  /* brand (constant across themes) */
  --ink: #051725; --navy: #063055; --navy-700: #0a3d68;
  --red: #a31d20; --red-bright: #ef5350; --ember: #ff5a2c; --steel: #929497;
  --nav-w: 256px;

  /* semantic — DARK (default) */
  --bg: #051725;
  --bg-grad:
    radial-gradient(1100px 600px at 82% -8%, rgba(163, 29, 32, 0.16), transparent 60%),
    radial-gradient(900px 700px at -6% 4%, rgba(6, 48, 85, 0.55), transparent 55%);
  --text: #e7ecf2;
  --text-muted: #929497;
  --nav-text: #b9c4d0;
  --line: rgba(203, 210, 218, 0.10);
  --line-soft: rgba(203, 210, 218, 0.06);
  --card: rgba(255, 255, 255, 0.035);
  --card-2: rgba(255, 255, 255, 0.06);
  --surface-bg: rgba(5, 23, 37, 0.55);  /* inputs */
  --sidebar-bg: rgba(5, 23, 37, 0.80);
  --header-bg: rgba(5, 23, 37, 0.70);
  --row-hover: rgba(255, 255, 255, 0.025);
  --scroll: rgba(203, 210, 218, 0.14);
  --scroll-hover: rgba(203, 210, 218, 0.26);
  --shadow-card: 0 18px 50px -24px rgba(163, 29, 32, 0.55);
}

html.light {
  --bg: #eef1f5;
  --bg-grad:
    radial-gradient(1100px 600px at 85% -10%, rgba(163, 29, 32, 0.08), transparent 60%),
    radial-gradient(900px 700px at -6% 2%, rgba(6, 48, 85, 0.10), transparent 55%);
  --text: #0d2336;
  --text-muted: #5b6b7a;
  --nav-text: #41566a;
  --line: rgba(6, 48, 85, 0.14);
  --line-soft: rgba(6, 48, 85, 0.08);
  --card: rgba(255, 255, 255, 0.86);
  --card-2: rgba(6, 48, 85, 0.05);
  --surface-bg: #ffffff;
  --sidebar-bg: rgba(255, 255, 255, 0.88);
  --header-bg: rgba(255, 255, 255, 0.82);
  --row-hover: rgba(6, 48, 85, 0.035);
  --scroll: rgba(6, 48, 85, 0.18);
  --scroll-hover: rgba(6, 48, 85, 0.30);
  --shadow-card: 0 18px 50px -28px rgba(6, 48, 85, 0.30);
}

html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }

/* Ambient brand background */
body {
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

/* App surfaces (replace hardcoded bg-ink utilities so they flip with the theme) */
.app-sidebar { background: var(--sidebar-bg); }
.app-header { background: var(--header-bg); }

/* ---- Reusable component layer ---- */
.brandbar { height: 3px; background: linear-gradient(90deg, var(--navy), var(--red)); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(10px); }
.card-hover { transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.card-hover:hover { transform: translateY(-3px); border-color: rgba(239,83,83,.35); box-shadow: var(--shadow-card); }

.stat-value { font-weight: 800; letter-spacing: -.02em; line-height: 1; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:12px;
  padding:.6rem 1rem; transition:.18s; border:1px solid transparent; cursor:pointer; font-size:.9rem; }
.btn-primary { background: linear-gradient(135deg, var(--navy), var(--red)); color:#fff; box-shadow: 0 10px 30px -12px rgba(163,29,32,.6); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { background: var(--card-2); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: rgba(239,83,83,.4); }
.btn-danger { background: rgba(163,29,32,.16); border-color: rgba(239,83,83,.4); color:#c0341f; }
html:not(.light) .btn-danger { color:#ffb4b4; }
.btn-sm { padding:.4rem .7rem; font-size:.8rem; border-radius:10px; }

/* Inputs */
.field { width:100%; background: var(--surface-bg); border:1px solid var(--line); border-radius:12px;
  padding:.65rem .85rem; color: var(--text); transition:.18s; font-size:.92rem; }
.field:focus { outline:none; border-color: var(--red-bright); box-shadow: 0 0 0 3px rgba(239,83,83,.18); }
.field::placeholder { color: var(--text-muted); opacity:.65; }
.label { font-size:.8rem; font-weight:600; color: var(--text-muted); margin-bottom:.35rem; display:block; }

/* Badges / pills */
.pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  padding:.18rem .55rem; border-radius:99px; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.04em; }
.pill-amber { background: rgba(196,138,0,.14); color:#9a6a00; border-color: rgba(196,138,0,.3); }
.pill-green { background: rgba(22,140,75,.14); color:#10703c; border-color: rgba(22,140,75,.3); }
.pill-red { background: rgba(163,29,32,.14); color:#a31d20; border-color: rgba(163,29,32,.3); }
.pill-blue { background: rgba(6,48,85,.10); color:#0a3d68; border-color: rgba(6,48,85,.25); }
.pill-grey { background: rgba(146,148,151,.16); color:#566472; }
/* dark-theme pill text (brighter on dark) */
html:not(.light) .pill-amber { color:#ffd27a; }
html:not(.light) .pill-green { color:#84e1ac; }
html:not(.light) .pill-red { color:#ff9a9a; border-color: rgba(239,83,83,.35); }
html:not(.light) .pill-blue { color:#bcd0e6; border-color: rgba(90,117,147,.4); }
html:not(.light) .pill-grey { color:#cbd2da; }

/* Sidebar nav */
.nav-link { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:12px;
  color: var(--nav-text); font-weight:500; font-size:.92rem; transition:.15s; position:relative; }
.nav-link:hover { background: var(--card-2); color: var(--text); }
.nav-link.active { background: linear-gradient(135deg, rgba(6,48,85,.8), rgba(163,29,32,.35)); color:#fff; }
html.light .nav-link.active { background: linear-gradient(135deg, var(--navy), var(--red)); color:#fff; }
.nav-link.active::before { content:''; position:absolute; left:-12px; top:18%; bottom:18%; width:3px;
  border-radius:99px; background: var(--red-bright); }
.nav-link svg { width:18px; height:18px; flex:none; opacity:.85; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  padding:.6rem .75rem; border-bottom:1px solid var(--line); font-weight:700; }
.tbl td { padding:.7rem .75rem; border-bottom:1px solid var(--line-soft); }
.tbl tr:hover td { background: var(--row-hover); }

/* Fade-in on load */
@keyframes rise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.rise { animation: rise .5s cubic-bezier(.16,1,.3,1) both; }
.rise-2 { animation-delay:.06s; } .rise-3 { animation-delay:.12s; } .rise-4 { animation-delay:.18s; }

/* Legacy text mark (fallback) */
.logo-mark { background: linear-gradient(135deg, var(--navy), var(--red)); border-radius:12px;
  display:grid; place-items:center; color:#fff; font-weight:800; box-shadow: 0 8px 24px -10px rgba(163,29,32,.7); }

/* Real brand SVG shown directly (no chip background). */
.logo-chip { display:inline-flex; align-items:center; justify-content:center;
  flex:none; box-sizing:border-box; }
/* Size the logo relative to the chip itself. A % padding here resolved against
   the containing block's width (huge on the login panel) and collapsed the img
   to 0×0 — sizing the img by % avoids that and scales at every chip size. */
.logo-chip img { width:100%; height:100%; object-fit:contain; display:block; }

/* Theme toggle button */
.theme-toggle { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background: var(--card-2); color: var(--text-muted); cursor:pointer; transition:.15s; }
.theme-toggle:hover { color: var(--text); border-color: rgba(239,83,83,.4); }
.theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; }
html.light .theme-toggle .sun { display:block; } html.light .theme-toggle .moon { display:none; }