/* MSGO admin panel — compact, purpose-built for a data-dense screen
   (search box, stat cards, tables), not a copy of frontend/css/styles.css
   (that one is built for ticket cards on mobile). Same brand tokens
   (colors/fonts) as the main app so it still reads as the same product —
   see frontend/css/styles.css's own :root for where these came from. */
:root{
  --ink:#12161C;
  --paper:#EEF2F0;
  --surface:#FFFFFF;

  --route:#0C8368;
  --route-dark:#095748;
  --route-tint:#E3F3EE;

  --fare:#DB9138;
  --fare-tint:#FBF0DE;

  --line:#E1E6E3;
  --muted:#6E7B76;
  --muted-2:#98A29D;

  --danger:#C0553F;
  --danger-tint:#F7E7E2;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-sm:9px;
  --radius-md:14px;
  --radius-lg:20px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100dvh;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.4;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; }
.mono{ font-family:var(--font-mono); }
button, input{ font-family:inherit; font-size:inherit; }
a{ color:var(--route-dark); }

/* --- login screen --- */
.login-wrap{
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:360px; background:var(--surface); border-radius:var(--radius-lg);
  padding:32px 28px; box-shadow:0 20px 60px -20px rgba(18,22,28,.35);
}
.login-card h1{ font-size:22px; margin-bottom:4px; }
.login-card .sub{ color:var(--muted); font-size:13px; margin-bottom:24px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.field input{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); color:var(--ink);
}
.field input:focus{ outline:2px solid var(--route); outline-offset:-1px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:var(--radius-sm); padding:11px 18px; font-weight:600; cursor:pointer;
  font-size:13.5px;
}
.btn-primary{ background:var(--ink); color:#fff; width:100%; }
.btn-primary:disabled{ opacity:.5; cursor:default; }
.btn-outline{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn-danger{ background:var(--danger); color:#fff; }
.error-text{ color:var(--danger); font-size:12.5px; margin-top:10px; min-height:16px; }

/* --- app shell --- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:14px 24px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .brand{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.topbar .who{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); }
/* Дашборд/Водители/Пассажиры nav tabs (requested 24.08.2026) */
.topbar nav.segmented{
  display:flex; gap:2px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px;
}
.topbar nav.segmented button{
  border:none; background:transparent; padding:7px 14px; border-radius:calc(var(--radius-sm) - 2px);
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer;
}
.topbar nav.segmented button.active{ background:var(--ink); color:#fff; }
.main{ max-width:1080px; margin:0 auto; padding:24px; }

.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:28px;
}
.stat-card{
  background:var(--surface); border-radius:var(--radius-md); padding:16px; border:1px solid var(--line);
}
.stat-card .n{ font-family:var(--font-display); font-size:26px; font-weight:700; }
.stat-card .l{ font-size:12px; color:var(--muted); margin-top:2px; }
.stat-card.warn{ background:var(--fare-tint); border-color:transparent; }
.stat-card.warn .n, .stat-card.warn .l{ color:#8A5A15; }

.search-row{ display:flex; gap:10px; margin-bottom:20px; }
.search-row input{
  flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); font-family:var(--font-mono);
}
.search-row input:focus{ outline:2px solid var(--route); outline-offset:-1px; }

.card{
  background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--line);
  padding:18px; margin-bottom:16px;
}
.card .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.chip{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600;
}
.route{ font-size:15px; font-weight:600; margin:6px 0; }
.meta-row{ display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); }
.meta-row b{ color:var(--ink); }

table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius-md); overflow:hidden; }
thead th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--paper);
}
tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--paper); }

.filters{ display:flex; gap:8px; margin-bottom:14px; }
.filters select{ padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }

.empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.section-heading{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:28px 0 12px; }