/* ==========================================================================
   UAE Driving Trainer — admin portal
   Same tokens as the Android app's Color.kt, so the portal and the product
   look like one thing.
   ========================================================================== */

:root {
  --teal-950:#0B1418; --teal-900:#0F3440; --teal-800:#142227;
  --teal-700:#1B2E35; --teal-600:#1D4C5C; --teal-400:#6BA6B8;
  --brass-300:#E3BC93; --brass:#C1885A; --brass-700:#A8703F;
  --red:#C4212B; --red-soft:#E66B77;
  --amber:#E0A80C; --amber-soft:#DFA544;
  --green:#118A3E; --green-soft:#4FBB85;
  --text:#E4EDF0; --text-2:#9DB2B9;
  --glass-1:rgba(255,255,255,.14); --glass-2:rgba(255,255,255,.055);
  --glass-border:rgba(255,255,255,.22); --hair:rgba(255,255,255,.12);
  --radius:16px; --radius-sm:10px;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0; min-height:100vh; color:var(--text);
  font:15px/1.6 var(--sans);
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(29,76,92,.55), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(193,136,90,.14), transparent 58%),
    var(--teal-950);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--brass-300); text-decoration:none; }
a:hover { text-decoration:underline; }

h1,h2,h3 { font-family:var(--display); font-weight:600; letter-spacing:-.01em; margin:0; }
h1 { font-size:26px; } h2 { font-size:19px; } h3 { font-size:16px; }

.muted { color:var(--text-2); }
.small { font-size:13px; }
.mono  { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.nowrap{ white-space:nowrap; }
.right { text-align:right; }

/* ---- shell ------------------------------------------------------------- */
.shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }

.side {
  border-right:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:22px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand { display:flex; align-items:center; gap:10px; padding:0 8px 22px; }
.brand-mark {
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--brass-300),var(--brass-700));
  color:var(--teal-950); font-family:var(--display); font-weight:700; font-size:15px;
}
.brand-name { font-family:var(--display); font-weight:600; font-size:15px; line-height:1.25; }
.brand-name span { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); font-weight:500; }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav-label { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-2); padding:16px 10px 6px; }
.nav a {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:var(--radius-sm); color:var(--text);
  font-size:14px; text-decoration:none; transition:background .12s ease;
}
.nav a:hover { background:var(--glass-2); text-decoration:none; }
.nav a.on { background:var(--glass-1); box-shadow:inset 0 0 0 1px var(--glass-border); }
.nav .count { font-size:11px; color:var(--text-2); font-family:var(--mono); }

.main { padding:26px 30px 72px; max-width:1240px; }

.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.topbar p { margin:5px 0 0; color:var(--text-2); font-size:14px; max-width:70ch; }
.topbar-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---- surfaces ---------------------------------------------------------- */
.card {
  background:linear-gradient(160deg,var(--glass-1),var(--glass-2));
  border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:18px; margin-bottom:16px;
}
.card > h2, .card > h3 { margin-bottom:12px; }
.card-flush { padding:0; overflow:hidden; }

.grid { display:grid; gap:14px; }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }

.stat .k { font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-2); }
.stat .v { font-family:var(--display); font-size:32px; font-weight:600; line-height:1.15; margin-top:4px; font-variant-numeric:tabular-nums; }
.stat .n { font-size:12.5px; color:var(--text-2); margin-top:2px; }

/* ---- tables ------------------------------------------------------------ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th {
  text-align:left; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-2); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.03); position:sticky; top:0; backdrop-filter:blur(8px);
}
td { padding:12px 14px; border-bottom:1px solid var(--hair); vertical-align:top; }
tbody tr:hover { background:rgba(255,255,255,.028); }
tbody tr:last-child td { border-bottom:none; }
td .id { font-family:var(--mono); font-size:11.5px; color:var(--text-2); display:block; margin-top:3px; }

/* ---- chips ------------------------------------------------------------- */
.chip {
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  border:1px solid transparent;
}
.chip-a       { background:rgba(79,187,133,.16); color:var(--green-soft); border-color:rgba(79,187,133,.32); }
.chip-b       { background:rgba(224,168,12,.15);  color:var(--amber-soft); border-color:rgba(224,168,12,.34); }
.chip-blocked { background:rgba(196,33,43,.17);   color:var(--red-soft);   border-color:rgba(196,33,43,.38); }
.chip-live    { background:rgba(107,166,184,.15); color:var(--teal-400);   border-color:rgba(107,166,184,.34); }
.chip-draft   { background:var(--glass-2);        color:var(--text-2);     border-color:var(--hair); }
.chip-brass   { background:rgba(193,136,90,.16);  color:var(--brass-300);  border-color:rgba(193,136,90,.36); }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius-sm); border:1px solid var(--glass-border);
  background:var(--glass-2); color:var(--text); font:600 14px/1 var(--sans);
  cursor:pointer; text-decoration:none; transition:transform .08s ease, background .12s ease;
}
.btn:hover { background:var(--glass-1); text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary {
  background:linear-gradient(145deg,var(--brass-300),var(--brass-700));
  color:#20140B; border-color:rgba(255,255,255,.34);
}
.btn-primary:hover { filter:brightness(1.06); }
.btn-danger  { background:rgba(196,33,43,.18); border-color:rgba(196,33,43,.44); color:var(--red-soft); }
.btn-sm { padding:6px 11px; font-size:12.5px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---- forms ------------------------------------------------------------- */
.field { margin-bottom:15px; }
label { display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); margin-bottom:6px; font-weight:600; }
input[type=text], input[type=email], input[type=search], input[type=number], select, textarea {
  width:100%; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--glass-border); background:rgba(0,0,0,.26); color:var(--text);
  font:15px/1.5 var(--sans); transition:border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height:92px; resize:vertical; }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(193,136,90,.2);
}
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
.hint { font-size:12.5px; color:var(--text-2); margin-top:5px; text-transform:none; letter-spacing:0; font-weight:400; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > * { flex:1 1 180px; }
.row > .flex-none { flex:none; }

.check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); text-transform:none; letter-spacing:0; margin:0; }
.check input { width:17px; height:17px; accent-color:var(--brass); flex:none; }

/* Answer options: the correct one is visibly the correct one. */
.option-row {
  display:flex; align-items:flex-start; gap:11px; padding:11px;
  border:1px solid var(--hair); border-radius:var(--radius-sm); margin-bottom:8px;
  background:rgba(0,0,0,.16); transition:border-color .12s ease, background .12s ease;
}
.option-row.is-correct { border-color:rgba(79,187,133,.5); background:rgba(79,187,133,.09); }
.option-row input[type=radio] { margin-top:11px; accent-color:var(--green-soft); width:18px; height:18px; flex:none; }
.option-row input[type=text] { flex:1; }
.option-letter { font-family:var(--mono); color:var(--text-2); width:18px; padding-top:11px; flex:none; }

/* ---- notices ----------------------------------------------------------- */
.notice {
  padding:12px 15px; border-radius:var(--radius-sm); margin-bottom:16px;
  border:1px solid var(--glass-border); background:var(--glass-2); font-size:14px;
}
.notice-ok    { border-color:rgba(79,187,133,.42); background:rgba(79,187,133,.11); }
.notice-warn  { border-color:rgba(224,168,12,.42); background:rgba(224,168,12,.1); }
.notice-error { border-color:rgba(196,33,43,.46);  background:rgba(196,33,43,.12); }
.notice strong { display:block; margin-bottom:3px; }

/* ---- filters / pagination ---------------------------------------------- */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.filters .field { margin:0; min-width:150px; }
.filters .field-wide { flex:1 1 260px; }

.pager { display:flex; gap:6px; align-items:center; justify-content:space-between; padding:14px; flex-wrap:wrap; }
.pager-links { display:flex; gap:6px; }

/* ---- media ------------------------------------------------------------- */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; }
.media-tile { border:1px solid var(--hair); border-radius:var(--radius-sm); overflow:hidden; background:rgba(0,0,0,.24); }
.media-tile img { width:100%; height:112px; object-fit:contain; display:block; background:#fff; padding:6px; }
.media-tile .meta { padding:8px 9px; font-size:11.5px; color:var(--text-2); }
.media-tile .meta b { display:block; color:var(--text); font-size:12.5px; font-weight:600; margin-bottom:2px; word-break:break-word; }

/* ---- auth screen ------------------------------------------------------- */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:100%; max-width:400px; }
.auth-card .card { padding:30px; }
.auth-head { text-align:center; margin-bottom:24px; }
.auth-head .brand-mark { width:52px; height:52px; font-size:21px; border-radius:14px; margin:0 auto 14px; }
.auth-head p { color:var(--text-2); font-size:14px; margin:6px 0 0; }
.divider { display:flex; align-items:center; gap:12px; color:var(--text-2); font-size:12px; margin:20px 0; }
.divider::before,.divider::after { content:""; height:1px; background:var(--hair); flex:1; }
.btn-google { width:100%; background:#fff; color:#1F1F1F; border-color:#fff; }
.btn-google:hover { background:#F1F3F4; }
.code-input { text-align:center; font-family:var(--mono); font-size:26px; letter-spacing:.3em; }

/* ---- misc -------------------------------------------------------------- */
.empty { padding:46px 20px; text-align:center; color:var(--text-2); }
.empty h3 { color:var(--text); margin-bottom:6px; }
.bar { height:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:6px; }
.bar > i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--brass-700),var(--brass-300)); }
.bar.danger > i { background:linear-gradient(90deg,#8E1620,var(--red-soft)); }
.inline-form { display:inline; }

@media (max-width:960px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; border-right:none; border-bottom:1px solid var(--hair); }
  .side .nav { flex-direction:row; flex-wrap:wrap; }
  .nav-label { display:none; }
  .main { padding:20px 16px 60px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .grid-4 { grid-template-columns:1fr; }
}