@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ui-sidebar.css — OSM in the COD Calling app's admin look (2026-10-12).
   Light ground, navy sidebar, blue brand, Inter. Loaded after app.css and only
   on the Mac branch feature/ui-sidebar. Palette copied from the calling app's
   uibuild/base.css so the two products read as one family. */

:root, [data-theme="light"] {
  --bg-page:      #f4f5fa;
  --bg-canvas:    #ffffff;
  --bg-elevated:  #ffffff;
  --bg-highest:   #ffffff;
  --bg-subtle:    #fafbfe;
  --bg-muted:     #f1f3f9;

  --border:        #e8e9f2;
  --border-soft:   #eef0f6;
  --border-strong: #d5d9e6;
  --border-accent: rgba(37, 99, 235, 0.35);

  --text:       #1b1f2a;
  --text-2:     #4b5262;
  --text-muted: #5a6274;
  --text-soft:  #7a8294;

  --brand:        #2563eb;
  --brand-hover:  #1d4fd8;
  --brand-soft:   #e8efff;
  --brand-softer: #f2f6ff;
  --brand-glow:   rgba(37, 99, 235, 0.18);
  --brand-line:   rgba(37, 99, 235, 0.55);

  --success:      #0f9d6e;
  --success-soft: #e6f6f0;
  --warning:      #c77700;
  --warning-soft: #fdf3e2;
  --danger:       #d63a3f;
  --danger-soft:  #fdeded;
  --info:         #2563eb;
  --info-soft:    #e8efff;

  --nav:     #16233d;
  --nav-ink: #a8b6d1;

  --radius-sm: 8px;
  --radius:    10px;
  --radius-md: 12px;
  --radius-lg: 14px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.12);
  --shadow-glow: 0 0 0 3px var(--brand-glow);

  --gradient-card: none;
  --gradient-hero: none;
  --gradient-success: none;
  --gradient-warning: none;
  --gradient-danger: none;
}


html, body { background: var(--bg-page); color: var(--text); }
body::before { display: none; }

/* ── sidebar ─────────────────────────────────────────────────────── */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 244px; background: var(--nav);
  display: flex; flex-direction: column; z-index: 50; }
.sidebar .brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 18px; }
.sidebar .brand .mark { width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, #3b82f6, #1d4fd8); display: flex; align-items: center; justify-content: center; }
.sidebar .brand b { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.sidebar .navwrap { flex: 1; overflow-y: auto; padding: 0 12px 10px; }
.sidebar .navwrap::-webkit-scrollbar { width: 6px; }
.sidebar .navwrap::-webkit-scrollbar-thumb { background: #2a3a5c; border-radius: 3px; }
.sidebar .navgrp { color: #6d7fa3; font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 15px 10px 6px; }
.sidebar a.nav { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  color: var(--nav-ink); text-decoration: none; font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
  transition: background .12s, color .12s; }
.sidebar a.nav:hover { background: #22314f; color: #fff; }
.sidebar a.nav.on { background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); }
.sidebar a.nav .ic { width: 18px; height: 18px; flex: none; display: inline-flex; }
.sidebar a.nav .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.sidebar .whoami { border-top: 1px solid #243a5e; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.sidebar .whoami .av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.sidebar .whoami .nm { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
.sidebar .whoami .rl { display: inline-block; background: #22314f; color: #9fb0cd; font-size: 9px; font-weight: 700;
  letter-spacing: .07em; padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
.sidebar .whoami a { margin-left: auto; color: #8ea2c2; font-size: 12px; text-decoration: none; }
.sidebar .whoami a:hover { color: #fff; }

/* ── page frame ──────────────────────────────────────────────────── */
.main { margin-left: 244px; min-height: 100vh; min-width: 0; }
.main > .container { max-width: 1440px; margin: 0 auto; padding: 28px 30px 60px; }

@media (max-width: 900px) {
  .sidebar { position: static; width: auto; }
  .sidebar .navwrap { display: flex; flex-wrap: wrap; gap: 2px; overflow: visible; }
  .sidebar .navgrp { width: 100%; padding: 8px 10px 2px; }
  .main { margin-left: 0; }
  .main > .container { padding: 20px 16px 48px; }
}

/* ── type ────────────────────────────────────────────────────────── */
html, body, button, input, select, textarea { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1 { font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
h2, h3 { font-weight: 700; color: var(--text); }

/* Big numbers: Inter extra-bold like the calling app, not monospace. */
.kpi-value, .mega-kpi-value, .alert-card-count, .alert-hero-count, .zone-card-value,
.lt-hero-value, .lifecycle-num, .lifecycle-bucket-num, .funnel-bar-count, .tm-zone-num {
  font-family: Inter, -apple-system, sans-serif !important;
  font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  background: none !important; -webkit-text-fill-color: currentColor !important;
}

/* ── surfaces ────────────────────────────────────────────────────── */
.card, .kpi-cell, .mega-kpi, .alert-card, .zone-card {
  background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.kpi-cell::before, .mega-kpi::before, .mega-kpi::after { display: none !important; }
.kpi-cell:hover, .mega-kpi:hover, .alert-card:hover { box-shadow: var(--shadow-md); }

/* ── tables ──────────────────────────────────────────────────────── */
table thead th, table.data thead th, .dashboard-table thead th {
  background: #f7f8fc; color: var(--text-2); font-weight: 700; border-bottom: 1px solid var(--border);
}
table tbody td { border-color: var(--border-soft); }
table tbody tr:hover td { background: var(--brand-softer); }

/* ── controls ────────────────────────────────────────────────────── */
input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="password"],
input:not([type]), select, textarea {
  background: #fff; color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-glow); }
.btn-primary, button.primary, .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, button.primary:hover, .btn.primary:hover { background: var(--brand-hover); }

::selection { background: #cfe0ff; }

/* ── dark-era colours that app.css applies regardless of theme ───── */
.alert-card-delta { border-radius: 8px; font-weight: 600; }
.alert-card-delta.delta-up   { color: #b42318; background: #fdeded; }
.alert-card-delta.delta-down { color: #0b7a55; background: #e6f6f0; }
.alert-card-delta.delta-flat { color: var(--text-muted); background: #f1f3f9; }
.alert-card-delta.delta-ref  { color: #1d4fd8; background: #eef3ff; }
.alert-card-delta.delta-ref b { color: #1b1f2a; }
.tat-matrix .tm-hot   { background: #fdeded; color: #b42318; }
.tat-matrix .tm-grand { background: #fbdcdc; color: #8f1d1d; }
.hero-filter-badge.hero-filter-zone { background: #e6f6f0; color: #0b7a55; border-color: #9ed9c1; }
.lt-pill.warn, .pipe-flag { background: #fdf3e2; color: #9a5800; }
.btn-cancel-row:hover { background: #fdeded; color: #b42318; }
.lifecycle-custom-row .lifecycle-bucket-label { background: #fdf3e2; color: #9a5800; }
.nc-row-btn:hover { background: #fdf3e2; color: #9a5800; }
.delta-good, .zone-stat-good { color: #0b7a55; }
.delta-bad,  .zone-stat-bad  { color: #b42318; }
.delta-pill .delta-prev { color: var(--text-muted); opacity: 1; }
.lt-hero-delta.down, .pipe-stage-delta.down { color: #0b7a55; }
.lt-hero-delta.up,   .pipe-stage-delta.up   { color: #b42318; }
.lt-pill.warn  { color: #9a5800; }
.lt-pill.bad, .stage-read.bad   { color: #b42318; }
.lt-pill.good, .stage-read.good { color: #0b7a55; }
.o2p-pay-btn.active, .scope-btn.active { background: var(--brand-soft); color: var(--brand-ink, #1d4fd8); }
.cancel-modal-error { color: #b42318; }
.btn-cancel-row { color: #b42318; }
.nc-row-btn { color: #9a5800; }

/* ── Style D: gradient sidebar (teal → violet), violet brand (Shrey 2026-10-12) ── */
:root, [data-theme="light"] {
  --brand: #7c3aed; --brand-hover: #6d28d9; --brand-ink: #6d28d9;
  --brand-soft: #f1eafe; --brand-softer: #f8f5ff; --brand-glow: rgba(124, 58, 237, 0.22);
  --brand-line: rgba(124, 58, 237, 0.55); --border-accent: rgba(124, 58, 237, 0.35);
  --info: #7c3aed; --info-soft: #f1eafe;
  --bg-page: #f6f5fb;
}
.sidebar { background: linear-gradient(180deg, #0f766e 0%, #3b2a8c 60%, #4c1d95 100%); }
.sidebar a.nav { color: #e0e7ff; }
.sidebar a.nav:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.sidebar a.nav.on { background: #ffffff; color: #4c1d95; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.sidebar .navgrp { color: rgba(255, 255, 255, 0.6); }
.sidebar .navwrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
.sidebar .whoami { border-top-color: rgba(255, 255, 255, 0.15); }
.sidebar .whoami .rl { background: rgba(255, 255, 255, 0.15); color: #fff; }
.sidebar .whoami .av { background: #fff; color: #4c1d95; }
.sidebar .whoami a { color: rgba(255, 255, 255, 0.75); }
.sidebar .brand .mark { background: rgba(255, 255, 255, 0.18); }
.card, .kpi-cell, .mega-kpi, .alert-card, .zone-card {
  border: 0; box-shadow: 0 2px 8px rgba(76, 29, 149, 0.06), 0 12px 32px rgba(76, 29, 149, 0.06);
}
.alert-card-delta.delta-ref { color: #6d28d9; background: #f3eefe; }
::selection { background: #e4d7fd; }
:root, [data-theme="light"] { --accent: var(--brand); }
.ov-search button { background: var(--brand); color: #fff; }
.ov-search button:hover { background: var(--brand-hover); filter: none; }

/* ── Main area in the sidebar's teal → violet shades (option 4, 2026-10-12) ── */
html, body { background: linear-gradient(135deg, #bfe5df 0%, #cfd0f5 50%, #dcc8f6 100%) fixed; }
.alert-card, .mega-kpi, .kpi-cell, .card {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 28px rgba(59, 42, 140, 0.12);
}
.alert-card::before, .mega-kpi::before, .kpi-cell::before {
  content: ""; display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, #0f766e, #3b2a8c 60%, #7c3aed); opacity: 1;
}
#ship-scroll-body { background: #ffffff; }
#ship-scroll-top { background: transparent !important; }