/* v2 skin for the legacy pages (2026-10-01, "the whole platform in
   the v2 layout"). Loaded by base.html in shell mode only, after
   styles.css. Two jobs:
     1. Alias every legacy design token (--av-bg-800, --av-bronze,
        --text-muted, --card-bg ...) onto the North Star tokens, so the
        inline styles inside P&L, Campaigns, Automation and the rest
        resolve to the v2 palette without touching their markup.
     2. Restyle the shared component classes (.card, .btn, forms,
        tables, badges, tabs, modals, flash) to the v2 vocabulary.
   Everything is scoped under .ns .v1-page; the native v2 pages never
   load this file. Page-local classes keep their shapes - the second
   layer (page-by-page refinement) handles those. */

.ns {
  /* v5 theme tokens -> North Star */
  --av-bg-900: var(--av-bg-deep); --av-bg-850: var(--av-bg); --av-bg-800: var(--av-shell);
  --av-bg-750: var(--av-surface); --av-bg-700: var(--av-surface-2); --av-bg-650: var(--av-surface-3);
  --av-bg-600: #1c3142; --av-bg-500: #24405a;
  --av-text-primary: var(--av-text); --av-text-secondary: var(--av-soft);
  --av-text-muted: var(--av-muted); --av-text-dim: var(--av-dim);
  --av-border-soft: var(--av-line); --av-border-medium: var(--av-line-strong);
  --av-border-warm: rgba(208,166,107,.22); --av-border-warm-soft: rgba(208,166,107,.12);
  --av-bronze: var(--av-gold); --av-bronze-dark: #b48d56;
  --av-cyan-muted: rgba(59,216,209,.55); --av-slate-accent: var(--av-blue);
  --av-good: var(--av-green); --av-good-soft: rgba(89,217,165,.14);
  --av-success: var(--av-green); --av-success-soft: rgba(89,217,165,.14);
  --av-warning: var(--av-gold); --av-warning-soft: var(--av-gold-soft);
  --av-danger: var(--av-red); --av-danger-soft: rgba(255,124,132,.14);
  --av-info: var(--av-blue); --av-info-soft: rgba(101,169,255,.14);
  --av-card: var(--av-surface); --av-border: var(--av-line-strong);
  --av-tint-text-slate: var(--av-soft); --av-tint-text-amber: var(--av-gold);
  --av-chart-grid: rgba(145,165,184,.14); --av-chart-tick: var(--av-muted); --av-chart-legend: var(--av-soft);
  --av-chart-sales: var(--av-cyan); --av-chart-spend: var(--av-gold); --av-chart-acos: var(--av-red);
  --av-chart-neutral: var(--av-muted); --av-chart-display: var(--av-text); --av-chart-amber: var(--av-gold); --av-chart-purple: var(--av-purple);
  --av-tooltip-bg: #101e2b; --av-tooltip-border: var(--av-line-strong); --av-tooltip-text: var(--av-text);
  --av-radius-sm: 6px; --av-radius-md: 8px; --av-radius-lg: var(--av-radius); --av-radius-xl: 12px;
  --av-shadow-panel: none; --av-shadow-header: none; --av-shadow-card: none;
  /* styles.css legacy aliases */
  --primary-color: var(--av-gold); --primary-hover: #dcb57e; --primary-light: var(--av-gold-soft); --primary-rgb: 208,166,107;
  --accent: var(--av-gold); --accent-color: var(--av-gold); --accent-hover: #dcb57e; --accent-bg: var(--av-gold-soft);
  --hover-bg: rgba(255,255,255,.03); --row-hover: rgba(255,255,255,.025);
  --sidebar-bg: var(--av-shell); --sidebar-hover: rgba(255,255,255,.04); --sidebar-active-bg: var(--av-gold-soft);
  --success: var(--av-green); --success-color: var(--av-green); --success-hover: #7fe3bb; --success-light: rgba(89,217,165,.14);
  --danger-color: var(--av-red); --danger-hover: #ff9aa0; --danger-light: rgba(255,124,132,.14);
  --warning-color: var(--av-gold); --warning-hover: #dcb57e; --warning-light: var(--av-gold-soft);
  --info-color: var(--av-blue); --info-light: rgba(101,169,255,.14);
  --text-color: var(--av-text); --text-primary: var(--av-text); --text-secondary: var(--av-soft); --text-muted: var(--av-muted); --text-light: var(--av-soft);
  --border-color: var(--av-line);
  --bg-light: var(--av-surface-2); --bg-secondary: var(--av-surface-2); --bg-tertiary: var(--av-surface-3);
  --bg-white: var(--av-surface); --bg-card: var(--av-surface); --card-bg: var(--av-surface);
  --glass-bg: rgba(14,27,40,.86); --glass-bg-light: rgba(255,255,255,.02); --glass-bg-strong: rgba(14,27,40,.96); --glass-border: var(--av-line);
  --shadow-sm: none; --shadow-md: 0 10px 30px rgba(0,0,0,.25); --shadow-lg: 0 18px 50px rgba(0,0,0,.35);
  --border-radius: 8px; --border-radius-lg: var(--av-radius);
  --font-family: Inter, Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Element rules below use :where(.ns .v1-page) on purpose: element
   specificity, winning over styles.css by load order only, so a page's
   own classes (.positive, .cell-num, .btn-admin-primary) stay in charge. */
/* ── Page frame ─────────────────────────────────────────────── */
.ns .main.v1-page { font-size: 13.5px; }
.ns .v1-page .container { padding: 0; }
:where(.ns .v1-page) p { margin: revert; }
:where(.ns .v1-page) h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--av-text); }
:where(.ns .v1-page) h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--av-text); }
:where(.ns .v1-page) h3 { font-size: 14px; font-weight: 700; color: var(--av-text); }
:where(.ns .v1-page) h4, :where(.ns .v1-page) h5 { color: var(--av-text); }
.ns .v1-page .text-muted { color: var(--av-muted); }
.ns .v1-page .app-banner { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 8px 14px; border: 1px solid rgba(208,166,107,.38); border-radius: 8px; background: var(--av-gold-soft); color: var(--av-text); font-size: 12.5px; }
.ns .v1-page .v1-foot { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--av-line); color: var(--av-dim); font-size: 11px; line-height: 1.7; text-align: center; }
.ns .v1-page .v1-foot a { color: var(--av-muted); text-decoration: none; }
.ns .v1-page .v1-foot a:hover { color: var(--av-text); }

/* ── Cards ──────────────────────────────────────────────────── */
.ns .v1-page .card { background: rgba(14,27,40,.72); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--av-line); border-radius: var(--av-radius); box-shadow: none; margin-bottom: 18px; }
.ns .v1-page .card-header { min-height: 44px; padding: 11px 16px; background: transparent; border-bottom: 1px solid var(--av-line); gap: 12px; }
.ns .v1-page .card-header h2, .ns .v1-page .card-header h3 { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.ns .v1-page .card-header .subtitle { color: var(--av-muted); font-size: 11.5px; }
.ns .v1-page .card-body { padding: 16px; }
.ns .v1-page .card-footer { padding: 11px 16px; background: transparent; border-top: 1px solid var(--av-line); }
.ns .v1-page .section-header h3 { color: var(--av-text); }
.ns .v1-page .section-header p { color: var(--av-muted); }

/* ── Buttons ────────────────────────────────────────────────── */
.ns .v1-page .btn { min-height: 34px; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.2; gap: 6px; transition: none; }
.ns .v1-page .btn-primary { background: var(--av-gold); border-color: var(--av-gold); color: #17130e; }
.ns .v1-page .btn-primary:hover:not(:disabled) { background: #dcb57e; border-color: #dcb57e; color: #17130e; }
.ns .v1-page .btn-secondary, .ns .v1-page .btn-outline { background: rgba(17,31,44,.8); border-color: var(--av-line-strong); color: var(--av-soft); }
.ns .v1-page .btn-secondary:hover:not(:disabled), .ns .v1-page .btn-outline:hover:not(:disabled) { background: rgba(23,42,58,.9); border-color: var(--av-gold); color: var(--av-text); }
.ns .v1-page .btn-ghost { background: transparent; border-color: transparent; color: var(--av-muted); }
.ns .v1-page .btn-ghost:hover:not(:disabled), .ns .v1-page .btn-ghost.active { background: var(--av-gold-soft); color: var(--av-gold); }
.ns .v1-page .btn-success { background: rgba(89,217,165,.14); border-color: rgba(89,217,165,.5); color: var(--av-green); }
.ns .v1-page .btn-success:hover:not(:disabled) { background: rgba(89,217,165,.24); border-color: var(--av-green); color: var(--av-green); }
.ns .v1-page .btn-danger { background: rgba(255,124,132,.14); border-color: rgba(255,124,132,.5); color: var(--av-red); }
.ns .v1-page .btn-danger:hover:not(:disabled) { background: rgba(255,124,132,.24); border-color: var(--av-red); color: var(--av-red); }
.ns .v1-page .btn-sm { min-height: 28px; padding: 4px 9px; font-size: 11.5px; }
.ns .v1-page .btn-icon { border-radius: 50%; }
.ns .v1-page .btn-locked { opacity: .5; }

/* ── Forms ──────────────────────────────────────────────────── */
:where(.ns .v1-page) label:not(:has(input)) { color: var(--av-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
:where(.ns .v1-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
:where(.ns .v1-page) select, :where(.ns .v1-page) textarea { background: rgba(12,27,40,.8); border: 1px solid var(--av-line); border-radius: 8px; color: var(--av-text); font-size: 13px; box-shadow: none; }
:where(.ns .v1-page) input:focus, :where(.ns .v1-page) select:focus, :where(.ns .v1-page) textarea:focus { outline: none; border-color: var(--av-gold); box-shadow: none; }
:where(.ns .v1-page) input::placeholder, :where(.ns .v1-page) textarea::placeholder { color: var(--av-dim); }
:where(.ns .v1-page) select:disabled, :where(.ns .v1-page) input:disabled, :where(.ns .v1-page) textarea:disabled { opacity: .55; }
.ns .v1-page .form-group { margin-bottom: 14px; }

/* ── Tables ─────────────────────────────────────────────────── */
:where(.ns .v1-page) table { font-size: 12.5px; }
:where(.ns .v1-page) th { color: var(--av-dim); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: transparent; border-bottom: 1px solid var(--av-line-strong); padding: 8px 10px; }
:where(.ns .v1-page) td { padding: 9px 10px; border-bottom: 1px solid var(--av-line); font-variant-numeric: tabular-nums; color: var(--av-soft); }
:where(.ns .v1-page) tbody tr { background: transparent; }
:where(.ns .v1-page) tbody tr:hover td { background: rgba(255,255,255,.025); }
:where(.ns .v1-page) th.sortable:hover { color: var(--av-text); }
.ns .v1-page .table-wrapper { border: 1px solid var(--av-line); border-radius: var(--av-radius); background: transparent; }
.ns .v1-page .no-data, .ns .v1-page .empty-state { color: var(--av-muted); }
.ns .v1-page .empty-state { padding: 28px 16px; border: 1px dashed var(--av-line-strong); border-radius: var(--av-radius); background: transparent; }
.ns .v1-page .empty-state h4 { color: var(--av-text); }

/* ── Badges, pills, KPI tiles ───────────────────────────────── */
.ns .v1-page .badge, .ns .v1-page .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--av-line-strong); border-radius: 999px; background: transparent; color: var(--av-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.ns .v1-page .badge-primary { color: var(--av-gold); border-color: rgba(208,166,107,.5); background: var(--av-gold-soft); }
.ns .v1-page .badge-success, .ns .v1-page .pill-success { color: var(--av-green); border-color: rgba(89,217,165,.45); background: rgba(89,217,165,.08); }
.ns .v1-page .badge-danger { color: var(--av-red); border-color: rgba(255,124,132,.45); background: rgba(255,124,132,.08); }
.ns .v1-page .badge-warning { color: var(--av-gold); border-color: rgba(208,166,107,.5); background: var(--av-gold-soft); }
.ns .v1-page .badge-info { color: var(--av-blue); border-color: rgba(101,169,255,.45); background: rgba(101,169,255,.08); }
.ns .v1-page .pill-muted { color: var(--av-dim); }
.ns .v1-page .kpi-card { background: rgba(14,27,40,.72); border: 1px solid var(--av-line); border-radius: var(--av-radius); box-shadow: none; }
.ns .v1-page .kpi-card h3 { color: var(--av-dim); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ns .v1-page .kpi-card .kpi-value, .ns .v1-page .metric-value { color: var(--av-text); font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ns .v1-page .kpi-trend-good { color: var(--av-green); }
.ns .v1-page .kpi-trend-bad { color: var(--av-red); }

/* ── Tabs ───────────────────────────────────────────────────── */
.ns .v1-page .tab-nav, .ns .v1-page .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--av-line-strong); background: transparent; padding: 0; border-radius: 0; }
.ns .v1-page .tab-nav button, .ns .v1-page .tabs .tab-link { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 9px 12px; color: var(--av-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ns .v1-page .tab-nav button:hover, .ns .v1-page .tabs .tab-link:hover { color: var(--av-text); background: transparent; }
.ns .v1-page .tab-nav button.active, .ns .v1-page .tabs .tab-link.active { color: var(--av-text); background: transparent; border-bottom-color: var(--av-gold); }

/* ── Modals ─────────────────────────────────────────────────── */
.ns .v1-page .modal-overlay { background: rgba(2,7,12,.72); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.ns .v1-page .modal-content, .ns .v1-page .modal { background: #0d1a27; border: 1px solid var(--av-line-strong); border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.48); color: var(--av-text); }
.ns .v1-page .modal-header { border-bottom: 1px solid var(--av-line-strong); background: transparent; }
.ns .v1-page .modal-footer { border-top: 1px solid var(--av-line); background: transparent; }
.ns .v1-page .modal-title { color: var(--av-text); }
.ns .v1-page .modal-subtitle { color: var(--av-muted); }
.ns .v1-page .modal-close { color: var(--av-muted); background: transparent; }

/* ── Flash messages ─────────────────────────────────────────── */
.ns .v1-page .flash-messages li { padding: 10px 14px; border: 1px solid var(--av-line-strong); border-radius: 8px; background: rgba(12,27,40,.8); color: var(--av-soft); font-size: 12.5px; }
.ns .v1-page .flash-success { border-color: rgba(89,217,165,.45); color: var(--av-green); }
.ns .v1-page .flash-error { border-color: rgba(255,124,132,.45); color: var(--av-red); }
.ns .v1-page .flash-warning { border-color: rgba(208,166,107,.5); color: var(--av-gold); }
.ns .v1-page .flash-info { border-color: rgba(101,169,255,.45); color: var(--av-blue); }

/* ── Misc shared bits ───────────────────────────────────────── */
.ns .v1-page .toggle-slider { background: var(--av-surface-3); }
.ns .v1-page .toggle-switch input:checked + .toggle-slider { background: var(--av-gold); }
.ns .v1-page .has-tooltip::after { background: #101e2b; border: 1px solid var(--av-line-strong); color: var(--av-soft); }
.ns .v1-page .positive { color: var(--av-green); }
.ns .v1-page .negative { color: var(--av-red); }
.ns .v1-page .av-panel { background: rgba(14,27,40,.72); border: 1px solid var(--av-line); border-radius: var(--av-radius); box-shadow: none; }
.ns .v1-page .av-kpi-card { background: rgba(14,27,40,.72); border: 1px solid var(--av-line); border-radius: var(--av-radius); box-shadow: none; }
.ns .v1-page .av-btn-primary { background: var(--av-gold); color: #17130e; border-color: var(--av-gold); }

/* Admin pages (not reformatted, Nick 2026-10-01): keep their own
   sidebar readable inside the shell. */
.ns .v1-page .admin-sidebar { background: rgba(14,27,40,.72); border: 1px solid var(--av-line); border-radius: var(--av-radius); }