/* U Mobile Intelligence Console - cards, stats, tables, badges, charts, banners. */

/* ---------- Card ---------- */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.card__head {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-md); border-bottom: 1px solid var(--border);
}
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.card__sub { font-size: 12px; color: var(--text-tertiary); }
.card__spacer { flex: 1; }
.card__body { padding: var(--sp-md); }
.card__foot {
  padding: 10px var(--sp-md); border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-tertiary); background: var(--bg-sunk);
}

/* ---------- Stat tile ---------- */
.stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-md);
}
.stat__label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.stat__value {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; margin: 6px 0 2px;
}
.stat__delta { font-size: 11px; color: var(--text-tertiary); }
.delta-up   { color: var(--success); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--text-tertiary); }
.stat--accent .stat__value { color: var(--accent); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid transparent;
  white-space: nowrap;
}
.badge svg { width: 11px; height: 11px; }
.badge--observed  { color: var(--prov-observed);  border-color: rgba(34,197,94,.4);  background: rgba(34,197,94,.12); }
.badge--official  { color: var(--prov-official);  border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.12); }
.badge--simulated { color: var(--prov-simulated); border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.12); }
.badge--accent    { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.badge--grey      { color: var(--text-tertiary); border-color: var(--border-light); }
.badge--green { color: var(--success); border-color: rgba(34,197,94,.4);  background: var(--success-dim); }
.badge--amber { color: var(--warning); border-color: rgba(245,158,11,.4); background: var(--warning-dim); }
.badge--red   { color: var(--danger);  border-color: rgba(255,90,90,.4);  background: var(--danger-dim); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: var(--font-body);
}
.btn svg { width: 15px; height: 15px; }
/* Near-black on orange: white on this accent is only 2.73:1 and must not be used. */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-hover); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Segmented control ---------- */
.segmented {
  display: inline-flex; background: var(--bg-sunk);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; gap: 2px;
}
.segmented button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary); font-family: var(--font-body);
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 6px;
  white-space: nowrap;
}
.segmented button:hover { color: var(--text); background: var(--bg-hover); }
.segmented button.active { background: var(--accent); color: var(--on-accent); }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-lg); align-items: center;
  padding: 12px var(--sp-md);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.toolbar__group { display: flex; align-items: center; gap: var(--sp-sm); min-width: 0; }
.toolbar__label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  flex: 0 0 auto;
}
/* A select will not shrink below its longest option without this, and the
   outlet names are long enough to push the toolbar off a phone screen. */
.toolbar__group select, .toolbar__group input { min-width: 0; }
/* Grid, not flex, below 700px. A <select> is sized by its longest option, and
   with flex the child's basis resolves against a parent the child is itself
   sizing - so the group inflates to the option width and overflows the page.
   minmax(0, 1fr) breaks that loop; min-width:0 alone does not. */
@media (max-width: 700px) {
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
  .toolbar__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
  .toolbar__group select,
  .toolbar__group input { width: 100%; max-width: 100% !important; }
  .segmented { justify-content: stretch; }
  .segmented button { flex: 1 1 0; }
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border-light); color: var(--text-tertiary);
  border-radius: var(--r-pill); padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip--on { border-color: var(--border-strong); color: var(--text); background: var(--bg-elevated); }
.chip__swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
.chip--off .chip__swatch { opacity: .3; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600;
  padding: 10px var(--sp-md); border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: 10px var(--sp-md); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:hover { background: var(--bg-hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
.row-self { background: var(--accent-dim); }
.row-self:hover { background: rgba(255,115,0,.22) !important; }

/* ---------- Provenance banner ---------- */
.prov-banner {
  display: flex; gap: var(--sp-md); align-items: flex-start;
  border-radius: var(--r-lg); padding: var(--sp-md);
  margin-bottom: var(--sp-lg); border: 1px solid;
}
.prov-banner svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.prov-banner__title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.prov-banner__body { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.prov-banner--simulated { border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.08); }
.prov-banner--simulated svg, .prov-banner--simulated .prov-banner__title { color: var(--prov-simulated); }
.prov-banner--official { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.07); }
.prov-banner--official svg, .prov-banner--official .prov-banner__title { color: var(--prov-official); }
.prov-banner--observed { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.07); }
.prov-banner--observed svg, .prov-banner--observed .prov-banner__title { color: var(--prov-observed); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); padding: var(--sp-xl); margin-bottom: var(--sp-lg);
}
.hero .label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: var(--sp-sm);
}
.hero h1 { font-size: 30px; margin-bottom: var(--sp-md); }
.hero p { color: var(--text-secondary); max-width: 74ch; }

/* ---------- Charts ---------- */
.chart { width: 100%; }
/* overflow:hidden, not visible. Direct labels are drawn just outside the last
   mark, and on a narrow viewport that spilled past the SVG box and pushed the
   whole page into a horizontal scroll. Charts reserve their own right padding
   for labels instead. */
.chart svg { display: block; width: 100%; height: auto; overflow: hidden; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-md); font-size: 11px; color: var(--text-secondary); margin-top: var(--sp-sm); }
.chart-legend__item { display: flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.bar-track { height: 7px; background: var(--bg-elevated); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; }
.bar-fill  { height: 100%; border-radius: var(--r-pill); background: var(--accent); }

/* ---------- Map ---------- */
.map-wrap { height: 560px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
#map { width: 100%; height: 100%; background: var(--bg-elevated); }
/* Leaflet ships light chrome; bring it onto the dark surface. */
.leaflet-container { background: #0d0d10; font-family: var(--font-body); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-elevated); color: var(--text); }
.leaflet-popup-content-wrapper { border-radius: var(--r-md); }
.leaflet-bar a { background: var(--bg-elevated); color: var(--text); border-color: var(--border); }
.leaflet-bar a:hover { background: var(--bg-hover); color: var(--text); }
.leaflet-control-attribution {
  background: rgba(10,10,10,.7) !important; color: var(--text-dim) !important; font-size: 10px;
}
.leaflet-control-attribution a { color: var(--text-tertiary) !important; }
.leaflet-tooltip {
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 11.5px; box-shadow: var(--shadow-md);
}
.leaflet-tooltip-top::before { border-top-color: var(--border-strong); }

/* The drilldown panel sits beside the map on wide screens and under it below. */
@media (max-width: 1100px) {
  #mapRow { grid-template-columns: 1fr !important; }
  #mapRow .card { max-height: none !important; }
  .map-wrap { height: 420px; }
}

/* ---------- Ask / chat ---------- */
.ask-log { display: flex; flex-direction: column; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.msg { display: flex; gap: 10px; }
.msg__avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.msg--user .msg__avatar { background: var(--bg-elevated); color: var(--text-secondary); }
.msg--ai   .msg__avatar { background: var(--accent); color: var(--on-accent); }
.msg__body { flex: 1; min-width: 0; }
.msg__body p:last-child { margin-bottom: 0; }
.sql-block {
  background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px var(--sp-md); font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-secondary); overflow-x: auto; margin: var(--sp-sm) 0; white-space: pre;
}
.ask-form { display: flex; gap: var(--sp-sm); }
.ask-input {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px var(--sp-md); color: var(--text);
  font-family: var(--font-body); font-size: 14px;
}
.ask-input:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; border-color: var(--accent); }
.suggest { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.suggest button {
  background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text-secondary);
  border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; cursor: pointer;
  font-family: var(--font-body); text-align: left;
}
.suggest button:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-lg); }
.login-card {
  width: 100%; max-width: 400px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-xl);
}
.field { margin-bottom: var(--sp-md); }
.field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.field input {
  width: 100%; background: var(--bg-sunk); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px var(--sp-md); color: var(--text); font-size: 14px;
  font-family: var(--font-body);
}
.field input:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; border-color: var(--accent); }
.alert { border-radius: var(--r-md); padding: 10px var(--sp-md); font-size: 13px; margin-bottom: var(--sp-md); }
.alert--error { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(255,90,90,.35); }
.alert--info  { background: var(--info-dim);  color: var(--info);  border: 1px solid rgba(56,189,248,.35); }

/* ---------- Misc ---------- */
.spinner {
  width: 15px; height: 15px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: var(--sp-2xl); text-align: center; color: var(--text-tertiary); font-size: 13px; }
.src-note { font-size: 11px; color: var(--text-dim); margin-top: var(--sp-sm); }