:root {
  --bg: #fff;
  --fg: #0a0a0a;
  --muted: #667085;
  --card: #fff;
  --line: #e6e8ee;
  --blue: #0b66c3;
  --blue-600: #0955a3;
  --green: #0aa66c;
  --rose: #c53030;
  --shadow: 0 6px 22px rgba(16, 24, 40, 0.08);
}

/* === Dark Mode (ELMA Navy Theme) === */
:root[data-theme="dark"] {
  --bg: #0b1c2e;      /* ELMA dark navy background */
  --fg: #f0f3f8;      /* Light text */
  --muted: #9aa4b2;   /* Muted text */
  --card: #132a44;    /* Slightly lighter navy for cards/panels */
  --line: #1f3956;    /* Border lines */
  --blue: #0b66c3;    /* ELMA blue accent */
  --blue-600: #0a58a5;
  --green: #0aa66c;
  --rose: #c53030;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif}

.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:10;box-shadow:0 0 0 1px rgba(11,102,195,.15), 0 0 12px rgba(11,102,195,.2) inset}
.brand .title{font-weight:700;font-size:16px}
.spacer{flex:1}
.nav{margin-left:16px}
.nav .link{background:none;border:none;color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer}
.nav .link.active,.nav .link:hover{color:var(--fg);background:rgba(11,102,195,.08)}
.actions{display:flex;gap:8px}
.icon-btn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 8px;cursor:pointer}
.icon-btn:focus{outline:2px solid rgba(11,102,195,.35)}

.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px}
.card.narrow{max-width:420px;margin:40px auto}
.h1{margin:0 0 12px;font-size:22px}
.h2{margin:0 0 12px;font-size:18px}
.h3{margin:0 0 8px}

.lbl{display:block;margin:10px 0 6px;color:var(--muted)}
.lbl.req:after{content:" *";color:var(--rose)}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
.inp:focus{outline:2px solid rgba(11,102,195,.35)}

.row{display:flex;align-items:center}
.row.gap{gap:10px}
.row.wrap{flex-wrap:wrap}
.row.small{gap:6px}
.row.center{align-items:center}
.grow{flex:1}

.btn{border:1px solid var(--line);background:var(--card);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.03)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-600)}
.btn.ghost{background:transparent}
.btn.outline{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn.danger{background:var(--rose);border-color:var(--rose);color:#fff}
.btn.icon{padding:6px 8px}

/* --- Dark mode button adjustments --- */
[data-theme="dark"] .btn{background:var(--card);color:var(--fg);border-color:var(--line)}
[data-theme="dark"] .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
[data-theme="dark"] .btn.outline{border-color:var(--blue);color:var(--blue)}
[data-theme="dark"] .btn.danger{background:var(--rose);color:#fff}

/* Chips (Admin tabs) readable in dark */
:root[data-theme="dark"] .chip{color:var(--fg);border-color:var(--line);background:var(--card)}
:root[data-theme="dark"] .chip.on,
:root[data-theme="dark"] .chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

[data-theme="dark"] #adminTab,
[data-theme="dark"] #adminAiPanel{background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
[data-theme="dark"] pre,
[data-theme="dark"] .log{background:#0a1828;border-color:#1c314d;color:#e5e9f0}

.msg{margin-top:10px}
.msg.error{color:var(--rose)}
.msg.ok{color:var(--green)}
.hidden{display:none}

.filters{margin:12px 0 6px}
.table-box{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--card)}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl thead th{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);text-align:left;padding:10px}
.tbl tbody td{padding:10px;border-top:1px solid var(--line);vertical-align:top}
.tbl td.actions{white-space:nowrap;text-align:center}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--card);cursor:pointer}
.chip.on{border-color:var(--blue);color:var(--blue)}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid2 .col2{grid-column:1/-1}
.sub{color:var(--muted)}
.log{background:var(--bg);border:1px dashed var(--line);padding:10px;border-radius:12px;white-space:pre-wrap;max-height:300px;overflow:auto;margin-top:10px}

.modal{border:none;padding:0;background:transparent}
.modal::backdrop{background:rgba(0,0,0,.33)}
.modal .card{width:min(720px,90vw)}