/* ============================================================
   AURORA — chart-engine tokens & styles for AS-Stats
   ------------------------------------------------------------
   The dashboard chrome is now Tailwind utilities (see func.inc).
   This file keeps ONLY what JavaScript owns or what utilities
   can't reach:
     · the --asg-* chart tokens read by assets/asgraph.js
     · the .asg-* styles for the SVG markup asgraph.js injects
     · the bootstrap3-typeahead dropdown (JS-generated, ix.php)
   ============================================================ */

:root {
  /* chart structural colors (read by asgraph.js) */
  --asg-grid: #18202f;
  --asg-grid-strong: #243042;
  --asg-axis: #64748b;
  --asg-text: #7c8aa0;
  --asg-zero: #3a4a5e;
  --asg-p95: #f43f5e;
  --asg-crosshair: #94a3b8;
  --asg-surface: #0e1424;

  --good: #22c55e;
  --good-dim: rgba(34,197,94,.14);
  --warn: #f59e0b;
  --warn-dim: rgba(245,158,11,.14);
}

[data-theme="light"] {
  --asg-grid: #eef2f7;
  --asg-grid-strong: #dbe3ec;
  --asg-axis: #94a3b8;
  --asg-text: #64748b;
  --asg-zero: #b8c2cf;
  --asg-p95: #e11d48;
  --asg-crosshair: #64748b;
  --asg-surface: #ffffff;

  --good: #16a34a;
  --good-dim: rgba(22,163,74,.12);
  --warn: #d97706;
  --warn-dim: rgba(217,119,6,.12);
}

/* ============================================================
   ASGraph engine styles (markup injected by asgraph.js)
   ============================================================ */
.asg { width: 100%; }
.asg-svg { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.asg-tick { font-family: var(--mono); font-size: 10.5px; }
.asg-area { transition: fill-opacity var(--transition); }

.asg-tooltip {
  position: absolute; z-index: 30; pointer-events: none; min-width: 210px; max-width: 280px;
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  border: 1px solid var(--border-light); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 9px 11px; backdrop-filter: blur(10px);
  font-size: .76rem; color: var(--text-primary);
}
.asg-tt-head { font-family: var(--mono); font-size: .72rem; color: var(--text-secondary); margin-bottom: 6px; }
.asg-tt-sum { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-weight: 700; font-size: .78rem; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.asg-tt-sum .asg-tt-dn { color: var(--good); } .asg-tt-sum .asg-tt-up { color: var(--warn); }
.asg-tt-rows { display: flex; flex-direction: column; gap: 3px; }
.asg-tt-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 7px; }
.asg-tt-dot { width: 9px; height: 9px; border-radius: 2px; }
.asg-tt-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.asg-tt-v { font-family: var(--mono); font-size: .72rem; text-align: right; }
.asg-tt-v.dn { color: var(--good); } .asg-tt-v.up { color: var(--warn); }
.asg-tt-more { margin-top: 5px; font-size: .68rem; color: var(--text-muted); text-align: center; }

.asg-spark { display: block; width: 100%; height: 100%; overflow: visible; }

/* loading / empty states */
.asg-loading { position: relative; min-height: 120px; border-radius: var(--r-sm);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%) var(--bg-input);
  background-size: 220% 100%; animation: asgshimmer 1.3s ease-in-out infinite; }
[data-theme="light"] .asg-loading { background-image: linear-gradient(100deg, transparent 30%, rgba(15,23,42,.04) 50%, transparent 70%); }
@keyframes asgshimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.asg-msg { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--text-muted); font-size: .85rem; }

/* ============================================================
   Bootstrap3-typeahead dropdown (JS-generated — ix.php search)
   ============================================================ */
.typeahead.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 4px !important;
  list-style: none;
}
.typeahead.dropdown-menu li > a {
  padding: 8px 14px !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
  display: block !important;
}
.typeahead.dropdown-menu li.active > a,
.typeahead.dropdown-menu li > a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .typeahead.dropdown-menu li.active > a,
[data-theme="light"] .typeahead.dropdown-menu li > a:hover {
  background: rgba(15,23,42,0.05) !important;
}