/* =========================================================================
   MEE Mobility Tracker — SITA-inspired theme
   Palette & type mirror sita.aero: white canvas, #333 text, Saans font stack,
   SITA light-cyan (#bbe8ee) + teal accents, mono numerals for statistics.
   ========================================================================= */
:root {
  --bg: #ffffff;
  --bg-soft: #f5f6f5;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --line: #e4e4df;
  --line-strong: #d5d5cf;
  --text: #333333;
  --muted: #6b6b6b;
  --faint: #8a8a8a;

  --brand: #007a82;          /* SITA teal (actionable, white text OK) */
  --brand-strong: #00626a;   /* hover */
  --brand-soft: #e4f4f6;     /* light teal tint on white */
  --accent: #bbe8ee;         /* SITA signature light cyan */
  --slate: #404f52;          /* deep slate from sita.aero */

  --side-bg: #16292b;        /* dark teal-slate sidebar */
  --side-text: #b7d6da;
  --side-active: #0f3d42;

  --good: #1f8f4e;
  --warn: #b7791f;
  --bad: #d64545;
  --blue: #3860be;           /* accent blue from sita.aero */

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,32,.04), 0 6px 20px rgba(16,24,32,.06);

  --font-sans: Saans, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "ABCFavoritMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------- Auth screens ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--brand-soft) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(700px 500px at 100% 0%, #eef7f8 0%, rgba(255,255,255,0) 55%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 390px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 30px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 21px; margin: 0 0 4px; font-weight: 600; }
.auth-card p.sub { color: var(--muted); margin: 0 0 22px; font-size: 13.5px; }
.brandmark { display:flex; align-items:center; gap:11px; margin-bottom:20px; }
.brandmark .logo {
  width: 40px; height: 40px; border-radius: 9px; display:grid; place-items:center;
  background: var(--brand); color:#fff; font-weight:700; font-size:14px; letter-spacing:.5px;
}
.brandmark .logo-txt { font-weight: 600; letter-spacing:.2px; color: var(--text); }

/* ---------- Forms ---------- */
label.field { display:block; margin-bottom:15px; }
label.field span { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; background: #fff; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,122,130,.14); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 15px; border-radius: 8px; border: 1px solid transparent;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 14px;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--brand-strong); }
.btn.block { width: 100%; }
.btn.ghost { background: #fff; border-color: var(--line-strong); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand-strong); }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: #b83a3a; }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.err { color: var(--bad); font-size: 13px; margin-top: 8px; min-height: 18px; }
.ok  { color: var(--good); font-size: 13px; margin-top: 8px; }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side {
  background: var(--side-bg); color: var(--side-text);
  padding: 18px 14px; display:flex; flex-direction:column; gap: 4px;
}
.side .brandmark { padding: 2px 6px 14px; }
.side .brandmark .logo { background: var(--accent); color: #0b2a2c; }
.side .brandmark .logo-txt { color: #ffffff; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 8px;
  color: var(--side-text); font-weight: 500; font-size: 14px; border:1px solid transparent;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--side-active); color: #fff; }
.nav-item .ic { width:18px; text-align:center; opacity:.9; }
.side .spacer { flex: 1; }
.side .who { font-size:12px; color:var(--side-text); padding: 10px; border-top:1px solid rgba(255,255,255,.12); }
.side .who b { color: #fff; display:block; font-size:13px; }
.badge-role { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  padding: 2px 8px; border-radius: 999px; background: rgba(187,232,238,.16); color: var(--accent); margin-top:5px; }

.main { padding: 24px 28px 60px; overflow: auto; background: var(--bg); }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; gap:12px; flex-wrap:wrap; }
.page-head h2 { margin:0; font-size: 22px; font-weight: 600; }
.page-head .tools { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- KPI cards ---------- */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--accent); }
.kpi .label { font-size:11.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.kpi .value { font-family: var(--font-mono); font-size: 30px; font-weight: 500; margin-top: 8px; color: var(--slate); letter-spacing:-.01em; }
.kpi .value small { font-size: 14px; color: var(--muted); font-weight:500; }
.kpi.kpi-ring { display:flex; align-items:center; gap:14px; }
.kpi.kpi-ring .label { margin-bottom:2px; }
.kpi .kpi-sub { font-family: var(--font-mono); font-size: 14px; color: var(--slate); margin-top:4px; font-weight:500; }

/* ---------- Dashboard sections ---------- */
.dash-lead { margin: -4px 0 18px; padding: 11px 14px; font-size: 13px; color: var(--muted);
  background: var(--brand-soft); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; }
.dash-lead b { color: var(--text); }
.dash-section { display:grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }

/* Budget vs Cost card */
.budget-card { margin-bottom:16px; }
.budget-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.budget-tools { display:flex; gap:8px; flex-wrap:wrap; }
.budget-figs { display:flex; gap:28px; flex-wrap:wrap; margin:10px 0 14px; }
.budget-figs > div { display:flex; flex-direction:column; }
.bf-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.bf-val { font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--slate); margin-top:3px; }
.budget-track { height:14px; background:var(--surface-2); border-radius:8px; overflow:hidden; }
.budget-fill { height:100%; border-radius:8px; transition:width .5s ease; }
.budget-note { margin-top:10px; font-size:12.5px; color:var(--muted); }
.budget-card.budget-over { border-color:var(--bad); border-left:3px solid var(--bad); }
.budget-alert { border-radius:8px; padding:10px 13px; font-size:12.5px; line-height:1.5; margin:2px 0 14px; }
.budget-alert.bad { background:rgba(214,69,69,.10); color:#b83a3a; border:1px solid rgba(214,69,69,.32); }
.budget-alert.bad b { color:#a32f2f; }
.budget-alert.warn { background:rgba(183,121,31,.12); color:#8a5d16; border:1px solid rgba(183,121,31,.32); }

/* Rollout funnel */
.funnel { display:flex; flex-direction:column; gap:10px; }
.funnel-row { display:grid; grid-template-columns: 108px 1fr 46px; align-items:center; gap:10px; }
.funnel-label { font-size:13px; font-weight:600; color: var(--text); }
.funnel-bar { background: var(--surface-2); border-radius:7px; height: 30px; overflow:hidden; }
.funnel-fill { height:100%; border-radius:7px; display:flex; align-items:center; justify-content:flex-end; min-width: 34px; transition: width .5s ease; }
.funnel-count { color:#fff; font-size:12.5px; font-weight:700; padding-right:10px; font-family: var(--font-mono); }
.funnel-pct { text-align:right; font-size:13px; color: var(--muted); font-family: var(--font-mono); }
.funnel-note { margin-top:12px; font-size:12px; color: var(--faint); }

/* Distribution-by-region grid (shared bar-track width so bars are comparable) */
.geo-grid { display:grid; grid-template-columns: 54px 1fr 42px 46px 82px; gap:12px; align-items:center; margin-bottom:9px; }
.geo-grid .geo-name { font-weight:600; font-size:13px; }
.geo-grid .num { text-align:right; font-family:var(--font-mono); font-size:12.5px; color:var(--slate); font-variant-numeric:tabular-nums; }
.geo-head { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:11px; }
.geo-head .num { font-family:inherit; color:var(--muted); }
.geo-head span:nth-child(2) { font-size:10.5px; letter-spacing:.4px; }

/* Regional readiness matrix */
table.matrix th, table.matrix td { text-align:center; }
table.matrix td:first-child, table.matrix th:first-child { text-align:left; }
td.mono { font-family: var(--font-mono); color: var(--slate); }
td.heat { font-family: var(--font-mono); font-weight:600; }
td.heat small { display:block; font-size:9.5px; opacity:.8; font-weight:400; margin-top:1px; }

/* ---------- Cards / charts ---------- */
.cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; }
.card {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.legend { display:flex; flex-direction:column; gap: 9px; margin-top: 6px; }
.legend .row { display:flex; align-items:center; gap:10px; font-size:13px; }
.legend .dot { width:11px; height:11px; border-radius:3px; flex: none; }
.legend .name { flex:1; color: var(--text); }
.legend .cnt { color: var(--muted); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.bar-track { height: 7px; background: var(--surface-2); border-radius: 999px; overflow:hidden; flex:1; }
.bar-fill { height:100%; border-radius:999px; transition: width .5s ease; }

/* Live auto-refresh badge */
.live-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600; padding:0 4px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(31,143,78,.5); animation:livepulse 1.9s infinite; }
.live-time { color:var(--faint); font-weight:500; }
@keyframes livepulse {
  0%   { box-shadow:0 0 0 0 rgba(31,143,78,.5); }
  70%  { box-shadow:0 0 0 6px rgba(31,143,78,0); }
  100% { box-shadow:0 0 0 0 rgba(31,143,78,0); }
}

/* ---------- Table ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align:left; padding: 11px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight:600;
  text-transform: uppercase; font-size: 11px; letter-spacing:.5px; z-index: 1; }
tbody tr:hover td { background: var(--brand-soft); }
td.actions { text-align:right; }
.pill { display:inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight:600; }
.pill.green { background: rgba(31,143,78,.12); color: #1a7a43; }
.pill.blue  { background: rgba(56,96,190,.12); color: #33559f; }
.pill.teal  { background: var(--brand-soft); color: var(--brand-strong); }
.pill.amber { background: rgba(183,121,31,.14); color: #96631a; }
.pill.gray  { background: rgba(107,107,107,.12); color: var(--muted); }
.pill.red   { background: rgba(214,69,69,.12); color: #b83a3a; }

.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom: 14px; }
.toolbar input, .toolbar select { width:auto; min-width: 150px; height: 40px; }
.search { min-width: 230px !important; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--font-mono); }
.col-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; }
.col-toggle { display:flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer; color: var(--text); }
.col-toggle input { width:auto; margin:0; }

/* sortable headers */
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color: var(--text); }
.sort-ind { opacity:.3; font-size:10px; margin-left:3px; }
.sort-ind.active { opacity:1; color: var(--brand); }
/* per-column filter row */
tr.filter-row th { top: 38px; background: var(--surface); padding: 6px 8px; z-index: 1; }
.filter-row select, .filter-row input { width:100%; min-width:0; height:32px; padding:4px 8px; font-size:12.5px; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.tab { padding: 10px 15px; color: var(--muted); font-weight:600; font-size:14px; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-strong); border-bottom-color: var(--brand); }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset:0; background: rgba(22,41,43,.42); display:grid; place-items:center; padding:20px; z-index: 50; }
.modal { width: 100%; max-width: 560px; background: var(--surface); border:1px solid var(--line);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(16,24,32,.28); max-height: 88vh; display:flex; flex-direction:column; }
.modal header { padding: 16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal header h3 { margin:0; font-size:16px; font-weight:600; }
.modal .body { padding: 18px 20px; overflow:auto; }
.modal .foot { padding: 14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; align-items:center; }
.x { background:none; border:none; color:var(--muted); font-size:22px; line-height:1; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.toast { position: fixed; right: 18px; bottom: 18px; background: var(--slate); color:#fff; border:1px solid rgba(0,0,0,.1);
  padding: 12px 16px; border-radius: 9px; box-shadow: var(--shadow); font-size: 13.5px; z-index: 80; opacity:0; transform: translateY(8px); transition:.2s; }
.toast.show { opacity:1; transform:none; }
.toast.bad { background: var(--bad); }
/* ---------- Updates feed ---------- */
.feed { display:flex; flex-direction:column; gap:14px; }
.upd { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
.upd-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.upd-date { color:var(--faint); font-size:12px; }
.upd-actions { margin-left:auto; display:flex; gap:6px; }
.pin { font-size:11.5px; color:var(--brand-strong); font-weight:600; }
.upd-title { margin:2px 0 8px; font-size:16px; font-weight:600; }
.upd-body { color:var(--text); font-size:13.5px; line-height:1.6; }
/* dashboard latest-update banner */
.news-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer;
  background:var(--brand-soft); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.news-banner:hover { border-color:var(--brand); }
.news-banner b { color:var(--text); font-size:14px; }
.news-date { color:var(--faint); font-size:12px; }
.news-more { margin-left:auto; color:var(--brand-strong); font-weight:600; font-size:12.5px; }

.empty { color: var(--muted); padding: 30px; text-align:center; }
.muted { color: var(--muted); }
.hidden { display:none !important; }

@media (max-width: 820px){
  .shell { grid-template-columns: 1fr; }
  .side { flex-direction: row; overflow-x:auto; }
  .side .brandmark, .side .who, .side .spacer { display:none; }
}