/* Aurolab Sales Control Tower — slate/blue enterprise theme. */
:root {
  --navy-900: #09111f;
  --navy-800: #0f172a;
  --navy-700: #111827;
  --blue: #006380;
  --blue-dark: #004f66;
  --blue-50: #e3f1f3;
  --blue-100: #c7e3e8;
  --sky: #6cc9d6;
  --accent: #7c3aed;
  --teal: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --faint: #94a3b8;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, .08);
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { letter-spacing: -.015em; }
a { color: var(--blue); text-decoration: none; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s; caret-color: var(--text);
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
.rail { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%); color: #fff; display: flex; flex-direction: column; padding: 0 0 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 15px 16px 13px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.brand-logo { height: 17px; width: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.brand-sub { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.nav-section-label { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; color: rgba(255, 255, 255, .3); padding: 14px 16px 6px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin: 1px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .6); transition: background .15s, color .15s; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .92); }
.nav-item.active { background: linear-gradient(90deg, var(--blue), var(--blue-dark)); color: #fff; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 99, 128, .35); }
.ico { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-foot { margin-top: auto; padding: 12px 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.rail-unit { margin-bottom: 8px; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #1e293b, #0f172a); border: 1px solid rgba(255, 255, 255, .12); display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #94a3b8; flex: none; }
.uname { font-size: 11px; font-weight: 600; color: #f1f5f9; }
.rail select { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #e5edf9; font-size: 12px; border-radius: 7px; }
.rail select option { color: #0f172a; }
.rail .btn-out { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #d3def0; border-radius: 7px; padding: 6px; font-size: 12px; font-weight: 500; }
.rail .btn-out:hover { background: rgba(255, 255, 255, .08); }
.main { min-width: 0; }

/* ---------- topbar + filterbar ---------- */
.topbar { background: linear-gradient(90deg, #fff 0%, #fafcff 100%); padding: 11px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0, 0, 0, .03); position: sticky; top: 0; z-index: 30; }
.topbar-left { min-width: 0; }
.page-title { font-size: 16px; font-weight: 700; color: var(--navy-800); line-height: 1.2; margin: 0; }
.page-subtitle { font-size: 11px; color: var(--faint); margin-top: 1px; font-weight: 400; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.live-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.live-dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; flex: none; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 50% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); } }
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-outline { background: #fff; border: 1px solid var(--line); color: #475569; }
.btn-outline:hover { background: var(--line-soft); }
.filterbar { background: #fff; padding: 7px 24px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filterbar-label { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fg { position: relative; }
.fg label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 3px 2px; font-weight: 600; }
.fg .form-select, .fg .form-control { min-width: 150px; border-radius: 8px; border-color: var(--line); font-size: 13px; background-color: #fff; }
.fg .form-select:focus, .fg .form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 99, 128, .14); outline: none; }
.filterbar .fg label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.filterbar .fg .form-select, .filterbar .fg .form-control { height: 28px; min-width: 140px; border-radius: 6px; padding: 0 8px; font-size: 11.5px; color: #334155; background-color: #f8fafc; }
.filterbar .fg .form-select:focus, .filterbar .fg .form-control:focus { background-color: #fff; box-shadow: 0 0 0 3px rgba(0, 99, 128, .14); }
.btn-reset { height: 28px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 6px; color: var(--blue); font-size: 11.5px; font-weight: 600; background: #fff; cursor: pointer; }
.btn-reset:hover { background: var(--blue-50); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 24px 0; margin: 0; min-height: 0; }
.pills:empty { display: none; padding: 0; }
.pill, .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--line-soft); color: #40506a; border: 1px solid var(--line); }
.pill.info, .chip { background: var(--blue-50); color: #045064; border-color: var(--blue-100); }
.pill.warn { background: #fff7ed; color: #9a5b00; border-color: #fed7aa; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.content { padding: 16px 24px 56px; max-width: 1560px; }
.banner { border-radius: 10px; padding: 9px 14px; font-size: 13px; margin: 0 0 12px; border: 1px solid; }
.banner.info { background: var(--blue-50); border-color: var(--blue-100); color: #045064; }
.banner.stale { background: #fff7ed; border-color: #fed7aa; color: #9a5b00; }
.banner.error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* ---------- layout primitives ---------- */
.sec { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.sec:first-child { margin-top: 2px; }
.sec h2 { margin: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line) 0%, transparent 100%); }
.sec .tools { order: 3; display: flex; gap: 8px; align-items: center; }
.sec h2 + .tools { margin-left: auto; }
h2.section { font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin: 20px 0 10px; }
.grid { display: grid; gap: 10px; }
.g-kpi { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.g-32 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 1100px) { .g-32 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- KPI card ---------- */
.kpi { position: relative; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); border-left: 3px solid transparent; box-shadow: var(--shadow); padding: 13px 14px 11px; text-align: left; width: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
button.kpi { cursor: pointer; font: inherit; color: inherit; }
button.kpi:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.kpi-tone-blue { border-left-color: var(--blue); }
.kpi-tone-green { border-left-color: var(--teal); }
.kpi-tone-amber { border-left-color: var(--amber); }
.kpi-tone-red { border-left-color: var(--red); }
.kpi-tone-purple { border-left-color: var(--accent); }
.kpi-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kpi-label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.kpi-icon-box { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; flex: none; line-height: 1; }
.kpi-tone-blue .kpi-icon-box { background: linear-gradient(135deg, #d7edf1, #b7dde3); }
.kpi-tone-green .kpi-icon-box { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.kpi-tone-amber .kpi-icon-box { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.kpi-tone-red .kpi-icon-box { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.kpi-tone-purple .kpi-icon-box { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--navy-800); line-height: 1; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.kpi.na .kpi-value { color: var(--faint); font-weight: 700; }
.kpi-sub { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.kpi-rows { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.kpi-row-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-bottom: 3px; }
.kpi-row-sub:last-child { margin-bottom: 0; }
.kpi-row-sub .val { font-weight: 600; color: #475569; }
.tag { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 5px; letter-spacing: .04em; text-transform: uppercase; }
.tag.partial { background: #fef3c7; color: #9a5b00; }
.tag.unavailable, .tag.not_configured { background: var(--line-soft); color: var(--muted); }
.delta-up { color: var(--teal); }
.delta-down { color: var(--red); }

/* ---------- panels & charts ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 12px; min-width: 0; position: relative; overflow: hidden; transition: box-shadow .15s; }
.panel:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, .07); }
.panel::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--accent) 100%); pointer-events: none; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.panel-title { font-size: 12.5px; font-weight: 600; color: var(--navy-800); margin: 0; }
.panel-subtitle { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.panel-legend { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.panel-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #475569; font-weight: 500; }
.panel-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-box { position: relative; height: 230px; }
.chart-box.sm { height: 190px; }
.chart-empty { height: 100%; display: grid; place-items: center; color: var(--faint); font-weight: 600; }
.seg { display: inline-flex; background: var(--line-soft); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; color: var(--muted); }
.seg button.on { background: #fff; color: var(--navy-800); box-shadow: var(--shadow); }
.scope { display: flex; gap: 8px; align-items: center; }
.scope .form-select { min-width: 150px; font-size: 12.5px; border-radius: 7px; padding-top: 3px; padding-bottom: 3px; }

/* ---------- tables ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; max-height: 540px; }
.table-ct { font-size: 13px; margin: 0; border-collapse: separate; border-spacing: 0; width: 100%; --bs-table-bg: transparent; }
.table-ct th { position: sticky; top: 0; z-index: 2; background: #f8fafc; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; white-space: nowrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table-ct td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; background: transparent; }
.table-ct tbody tr:last-child td { border-bottom: 0; }
.table-ct tbody tr:hover td { background: #f8fafc; }
.table-ct th[data-sort] { cursor: pointer; }
.table-ct th[data-sort]:hover { color: var(--navy-800); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct { min-width: 168px; font-weight: 600; color: var(--navy-800); }
.acct small { display: block; font-weight: 500; color: var(--faint); font-size: 11px; }
.na-text { color: var(--faint); font-style: normal; font-weight: 500; }
.expander { cursor: pointer; }
.sub-row td { background: #f8fafc !important; }
.decl td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.badge-decl { color: var(--red); font-weight: 600; }
.cat { display: inline-block; min-width: 22px; text-align: center; border-radius: 6px; font-weight: 700; font-size: 11.5px; padding: 1px 6px; }
.cat-A { background: var(--blue-100); color: #045064; }
.cat-B { background: #dcfce7; color: #15803d; }
.cat-C { background: var(--line-soft); color: #566177; }
.cat-Unknown { background: none; color: var(--faint); font-weight: 500; }
.bd { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 9px; }
.bd-danger { background: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca; }
.bd-success { background: #dcfce7; color: #15803d; }
.bd-warn { background: #fef3c7; color: #9a5b00; }
.bd-muted { background: var(--line-soft); color: var(--muted); }
.vt { font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px; }
.vt-Planned { background: var(--blue-50); color: #045064; }
.vt-Unplanned { background: #fef3c7; color: #9a5b00; }
.ach-cell { min-width: 132px; }
.ach-line { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }
.ach-bar { height: 5px; background: var(--line-soft); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.ach-bar > span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.ach-bar.met > span { background: var(--teal); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.toolbar input { max-width: 240px; border-radius: 7px; }
.toolbar .count { color: var(--muted); font-size: 12px; }
.spinner-wrap { padding: 2.2rem; text-align: center; color: var(--faint); font-weight: 600; }
.btn-ct { border: 1px solid var(--line); background: #fff; color: var(--navy-800); border-radius: 7px; padding: 5px 12px; font-weight: 600; font-size: 12.5px; }
.btn-ct:hover { border-color: var(--sky); background: var(--blue-50); }
.btn-ct.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-ct.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.page-nav { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }

/* ---------- drawer ---------- */
.offcanvas { width: min(780px, 96vw) !important; border-left: 1px solid var(--line); }
.offcanvas-title { font-weight: 700; color: var(--navy-800); font-size: 16px; }

/* ---------- forms/cards used by setup + actions ---------- */
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 14px; }
.step-card h2.section { margin-top: 0; }
.status-pill { font-size: .66rem; border-radius: 4px; padding: 0 .35rem; }
.avail-Available, .avail-available { color: var(--teal); font-weight: 600; }
.avail-Partial, .avail-partial { color: #9a5b00; font-weight: 600; }
.avail-Unavailable, .avail-unavailable, .avail-not_configured { color: var(--red); font-weight: 600; }
.scope-box { border: 0; padding: 0; background: none; }

/* ---------- login ---------- */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 460px); }
.login-brand {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 48px; color: #fff;
  background:
    radial-gradient(900px 480px at 12% -10%, #0d5468 0%, transparent 58%),
    radial-gradient(700px 460px at 92% 108%, #060b16 0%, transparent 55%),
    linear-gradient(165deg, var(--navy-900), var(--navy-700));
}
.login-brand::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.login-brand-inner { position: relative; max-width: 460px; width: 100%; }
.login-logo { height: 24px; width: auto; display: block; margin: 0 0 40px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.login-title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px; color: #fff; }
.login-tag { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin: 0 0 28px; }
.login-feats { display: flex; gap: 9px; flex-wrap: wrap; }
.lf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #e2e8f0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 13px 6px 10px; line-height: 1; }
.lf svg { width: 14px; height: 14px; stroke: var(--sky); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-form-pane { background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 32px 24px; box-shadow: inset 1px 0 0 var(--line); }
.login-card { width: 100%; max-width: 368px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; box-shadow: 0 18px 46px rgba(0, 0, 0, .1); }
.login-card-title { font-size: 22px; font-weight: 700; color: var(--navy-800); letter-spacing: -.015em; }
.login-card-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 26px; }
.login-card .fg label { font-size: 11px; margin-bottom: 4px; }
.login-card .form-control { height: auto; padding: 9px 10px; font-size: 13.5px; min-width: 0; }
@media (max-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login-brand { padding: 34px 24px 30px; text-align: center; }
  .login-brand-inner { margin: 0 auto; }
  .login-logo { margin: 0 auto 26px; }
  .login-title { font-size: 25px; }
  .login-feats { justify-content: center; }
  .login-form-pane { padding: 26px 16px 44px; }
}
@media (max-width: 420px) { .login-title { font-size: 22px; } }

@media (max-width: 991px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; }
  .topbar { padding: 10px 16px; position: static; }
  .filterbar { padding: 7px 16px; }
  .pills { padding: 8px 16px 0; }
  .content { padding: 16px 16px 40px; }
  .fg .form-select, .fg .form-control { min-width: 120px; }
}
@media (max-width: 520px) { .kpi-value { font-size: 21px; } .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); } }

.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3f { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3f { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ref { font-size: 10px; font-weight: 600; color: var(--faint); }
.panel-title .ref { margin-left: 5px; }
.seg .ref { margin-left: 5px; font-size: 10px; }