/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button:focus, button:focus-visible,
select:focus, select:focus-visible,
[tabindex]:focus, [tabindex]:focus-visible { outline: none; }

:root {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eceef3;
  --border: #dde1e9;
  --accent: #A856F7;
  --accent-dim: rgba(168,86,247,0.08);
  --text: #1a1730;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --success: #16a34a;
  --sidebar-width: 168px;
  --sidebar-collapsed: 0px;
  --header-h: 52px;
  --radius: 8px;
  --radius-sm: 5px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout shell ───────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  gap: 12px;
}

.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 12px; }

.logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.store-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* Hamburger button */
.sidebar-toggle {
  width: 32px; height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.sidebar-toggle:hover { background: var(--surface-3); color: var(--text); }
.sidebar-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: opacity 0.15s;
}

/* Body layout */
.app-body {
  display: flex;
  margin-top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
  border-right-width: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 2px;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font);
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.12s, color 0.12s;
  position: relative;
  width: 100%;
  text-align: left;
  outline: none;
}
.nav-tab:focus, .nav-tab:focus-visible { outline: none; }

.nav-tab:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-tab.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.nav-tab.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.tab-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

.tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
}

.sidebar.collapsed .tab-label {
  opacity: 0;
  pointer-events: none;
}

/* ── Main content ───────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Tab panels — constrained to viewport, internal scroll per-section */
.tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  position: relative;
}
.tab-panel.active { display: flex; }

.panel-header {
  padding: 28px 28px 16px;
  border-bottom: 1px solid var(--border);
}

.panel-header h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.panel-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* ── Upload grid ────────────────────────────────────────────── */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(231px, 1fr));
  gap: 10px;
  padding: 0 28px 0;
}

.upload-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  height: 66px;
  box-sizing: border-box;
}

.upload-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.upload-card.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.upload-card.loaded {
  border-color: var(--success);
}

.upload-card-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.upload-card-inner svg {
  width: 20px; height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.upload-card.loaded .upload-card-inner svg {
  color: var(--success);
}

.upload-title {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text);
}

.upload-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.upload-badge {
  margin-left: auto;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.upload-card.loaded .upload-badge {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

/* Right-side stack: badge on top, Remove pill underneath when loaded. */
.upload-card-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.upload-remove-btn {
  display: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  /* Sit above the file-input absolute overlay so clicks land on us, not the picker. */
  position: relative;
  z-index: 2;
  pointer-events: auto;
  transition: color 0.12s, background 0.12s;
}
.upload-remove-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.10);
}
/* Show only when the card has a successfully uploaded CSV. Don't show
   when the CSV slot is greyed-out by an active API connection — the
   API connection itself should be the disconnect path in that case. */
.upload-card.loaded:not(.api-connected) .upload-remove-btn {
  display: inline-flex;
  align-items: center;
}

/* When an API connection takes over a source, its CSV upload card is
   disabled — visually greyed out and non-interactive. CSV content was
   already wiped from the DB by the connect Edge Function; this state
   just reflects that on the upload tab. */
.upload-card.api-connected {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
  background: var(--surface);
}
.upload-card.api-connected:hover {
  border-color: var(--border);
  background: var(--surface);
}
.upload-card.api-connected .upload-card-inner svg { color: var(--text-muted); }
.upload-card.api-connected .upload-badge {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}

.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.manual-card .file-input { display: none; }

/* ── Raw data mode toggle ────────────────────────────────────── */
.raw-mode-bar {
  padding: 20px 28px 16px;
  display: flex;
  align-items: center;
}

/* ── API connection grid ─────────────────────────────────────── */
.api-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(231px, 1fr));
  gap: 10px;
  padding: 0 28px 0;
}
.api-grid.visible { display: grid; }

.api-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
  height: 66px;
  box-sizing: border-box;
  overflow: hidden;
}
.api-card.connected { border-color: var(--success); }

/* "Coming soon" state — integration not yet built (currently TikTok).
   Visually muted; Connect button is non-interactive. */
.api-card.api-card-coming-soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
  background: var(--surface);
}
.api-card.api-card-coming-soon:hover {
  border-color: var(--border);
  background: var(--surface);
}
.api-card.api-card-coming-soon .api-card-inner svg { color: var(--text-muted); }
.api-card.api-card-coming-soon .api-badge {
  background: var(--surface-3);
  color: var(--text-muted);
}

.api-card-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 100%;
  box-sizing: border-box;
}
.api-card-inner svg {
  width: 20px; height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.api-card.connected .api-card-inner svg { color: var(--success); }

.api-title {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text);
}
.api-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.api-badge {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.api-card.connected .api-badge {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

.api-connect-btn {
  flex-shrink: 0;
  margin-left: 0;
  height: 22px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--font);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.12s;
}
.api-connect-btn:hover { opacity: 0.85; }
.api-card.connected .api-connect-btn {
  background: var(--surface-3);
  color: var(--text-muted);
}


.api-card-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.btn-secondary {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--accent); }

/* ── Data source bar ────────────────────────────────────────── */
.data-source-bar {
  display: flex;
  gap: 2px;
  padding: 16px 28px 0;
  border-bottom: 1px solid var(--border);
}

.source-tab {
  padding: 7px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12.5px;
  font-family: var(--font);
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}

.source-tab:hover { color: var(--text); }

.source-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Spreadsheet table ──────────────────────────────────────── */
.table-wrapper {
  flex: 1;
  overflow: auto;
  position: relative;
}

.table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  min-height: 260px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
}

.table-empty svg {
  width: 48px; height: 48px;
  opacity: 0.2;
}

.table-empty p { font-size: 13px; }

/* ── Shopify instructions empty state ───────────────────────── */
.table-empty:has(.empty-instructions) {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 28px 32px;
}

.empty-instructions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 520px;
  text-align: left;
}

.empty-instructions-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: steps;
}

.empty-instructions-steps li {
  counter-increment: steps;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

.empty-instructions-steps li::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--accent-dim);
  border: 1px solid rgba(168, 86, 247, 0.3);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.empty-instructions-cols {
  display: flex;
  gap: 40px;
}

.empty-instructions-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent);
}

.empty-instructions-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.empty-instructions-section li {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 12px;
  position: relative;
}

.empty-instructions-section li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

.empty-instructions-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.empty-guide-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent);
}

.empty-guide-steps {
  list-style: none;
  counter-reset: guide;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.empty-guide-steps li {
  counter-increment: guide;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.empty-guide-steps li::before {
  content: counter(guide);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.empty-guide-steps li strong {
  color: var(--text);
  font-weight: 500;
}

.empty-instructions-video {
  font-size: 12px;
  color: var(--text-dim);
}


.video-link-placeholder {
  color: var(--accent);
  opacity: 0.6;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 13px;
  display: none;
}

.data-table.visible { display: table; }

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  font-weight: 500;
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  user-select: none;
}

.data-table th:first-child {
  background: var(--surface-3);
  color: var(--text-dim);
  width: 48px;
  text-align: center;
}

.data-table td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  white-space: nowrap;
  color: var(--text);
  font-weight: 400;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table td:first-child {
  background: var(--surface-2);
  color: var(--text-dim);
  text-align: center;
  font-size: 11px;
  border-right: 2px solid var(--border);
  user-select: none;
}

.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table tbody tr:hover td:first-child { background: var(--surface-3); }

/* Hybrid source coloring for the Shopify Orders raw-data table.
   See _loadShopifyOrdersFromApi: when both a CSV overlay and live API
   data are present, each row is tagged with `source = 'csv' | 'api'`
   and the renderer applies one of these classes to the <tr>. Hover
   styles above keep precedence via :hover specificity. */
/* Data cells only — the leftmost row-number column (td:first-child)
   keeps its own --surface-2 styling, matching the spend tabs. Without
   the :not() exclusion these rules would override the row-number
   column's background and break visual consistency across tabs. */
.data-table tbody tr.row-csv td:not(:first-child) { background: var(--surface-2); }
.data-table tbody tr.row-api td:not(:first-child) { background: #fff8dc; }

/* ── Ad Spend Split bar ──────────────────────────────────────── */
.ad-split-bar {
  display: none;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ad-split-bar.visible { display: flex; }
.ad-split-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.ad-split-fields {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ad-split-label {
  font-size: 13px;
  color: var(--text-muted);
}
.ad-split-input {
  width: 48px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font);
  font-size: 13px;
  line-height: 26px;
  color: var(--text);
  padding: 0 6px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ad-split-input::-webkit-outer-spin-button,
.ad-split-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ad-split-input:focus { outline: none; border-color: var(--accent); }
.ad-split-input::placeholder { color: var(--text-muted); text-align: center; }
.ad-split-ret {
  font-size: 13px;
  color: var(--text-muted);
}
.ad-split-currency-group {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.currency-select-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.currency-select-input { display: none; }

/* ── Manual Inputs inline panel ─────────────────────────────── */
.manual-inline {
  display: none;
  flex-direction: column;
  height: 100%;
}

.manual-inline.visible { display: flex; }

/* Blocked state — matches the ad-spend tabs' empty-state look:
   left-aligned dash-bullet line at the top of the panel. */
.manual-blocked {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  padding: 28px 32px;
}

.blocked-hint {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* Active grid */
.manual-grid-wrap {
  display: none;
  flex: 1;
  overflow: auto;
}

.manual-inline-grid {
  display: grid;
  grid-template-columns: 160px repeat(6, minmax(150px, 1fr));
  width: 100%;
}

/* Sticky header row */
.manual-inline-grid .grid-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  user-select: none;
}

.manual-inline-grid .grid-header:first-child {
  background: var(--surface-3);
  color: var(--text-dim);
}

/* Month label cells */
.manual-inline-grid .grid-month {
  background: var(--surface-2);
  border-right: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* Input cells */
.manual-inline-grid input[type="text"] {
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  width: 100%;
  outline: none;
  transition: background 0.12s;
  cursor: default;
}

.manual-inline-grid input[type="text"]:focus {
  background: var(--surface-3);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
  cursor: text;
}

.manual-inline-grid input[type="text"].cell-selected {
  background: rgba(168, 86, 247, 0.22);
  box-shadow: inset 0 0 0 1px rgba(168, 86, 247, 0.5);
}

.manual-inline-grid input[type="text"].cell-selected:focus {
  background: rgba(168, 86, 247, 0.18);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.manual-inline-grid input[type="text"]::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

/* ── P&L Breakdown ──────────────────────────────────────────── */
.pnl-filters {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 16px 28px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.pnl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pnl-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pnl-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pnl-date-sep {
  font-size: 12px;
  color: var(--text-dim);
}

.pnl-date-field {
  position: relative;
  display: flex;
  align-items: center;
}
.pnl-date-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 7px 32px 7px 10px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  width: 126px;
}
/* Both :focus and .open trigger the purple border. The JS now blurs the input on
   calClose() and removes .open from any previously-open input on calOpen(), so the
   border clears cleanly on every device — desktop and mobile — when the calendar
   closes or when the user switches to a different date input. */
.pnl-date-input:focus, .pnl-date-input.open { border-color: var(--accent); }
.pnl-date-cal-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.pnl-date-cal-btn svg { width: 14px; height: 14px; }
.pnl-date-cal-btn:hover { color: var(--text-muted); }

/* ── Custom calendar popup ──────────────────────────────────────── */
.pnl-cal {
  position: absolute;
  top: 0;
  left: 0;
  width: 252px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 14px 16px 10px;
  font-family: var(--font);
}
.pnl-cal.open { display: flex; }

.pnl-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pnl-cal-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.pnl-cal-nav {
  display: flex;
  gap: 2px;
}
.pnl-cal-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 3px 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: background 0.1s, color 0.1s;
}
.pnl-cal-nav-btn svg { width: 14px; height: 14px; }
.pnl-cal-nav-btn:hover { background: var(--surface-2); color: var(--text); }

.pnl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px 0;
  margin-bottom: 8px;
}
.pnl-cal-dh {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  padding-bottom: 6px;
}
.pnl-cal-day {
  font-size: 12.5px;
  color: var(--text);
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.pnl-cal-day:hover { background: var(--accent-dim); color: var(--accent); }
.pnl-cal-day.pnl-cal-other { color: var(--text-dim); }
.pnl-cal-day.pnl-cal-today { color: var(--accent); font-weight: 600; }
.pnl-cal-day.pnl-cal-selected {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.pnl-cal-day.pnl-cal-selected:hover { background: var(--accent); color: #fff; }

.pnl-cal-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.pnl-cal-foot-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s;
}
.pnl-cal-foot-btn:hover { color: var(--text); }
.pnl-cal-foot-today { color: var(--accent); }
.pnl-cal-foot-today:hover { color: var(--accent); opacity: 0.8; }
/* Calendar popup is scaled to 85% on mobile so it fits comfortably alongside the
   compact date inputs — matches the surge-digital mobile sizing exactly.
   Desktop is unchanged. */
@media (max-width: 768px) { .pnl-cal { transform: scale(0.85); transform-origin: top left; } }
.pnl-filters *:focus { outline: none; }
.pnl-filters *:focus-visible { outline: none; }

.pnl-seg {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* No overflow:hidden — the active button's 1px box-shadow needs to paint over
     the container's grey border, which lives outside the children's content box. */
}

.seg-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  height: auto;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
/* Keep the 1px right-border on every state so all tabs occupy the exact same
   width — only its colour changes. Last-child and active just make it invisible. */
.seg-btn:last-child { border-right-color: transparent; }
/* First/last children need their own border-radius now that the container no longer
   clips them via overflow:hidden — match the container's inner curve. */
.seg-btn:first-child {
  border-top-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
}
.seg-btn:last-child {
  border-top-right-radius: calc(var(--radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}
.seg-btn:hover { background: var(--surface-3); color: var(--text); }
.seg-btn.active {
  background: var(--accent);
  color: #fff;
  border-right-color: transparent;
  /* 1px purple outline that visually consumes the container's grey border on every
     side this active button is touching, so the selection reads as uniform purple
     all the way out to the rounded edge of the pill. */
  box-shadow: 0 0 0 1px var(--accent);
  position: relative;
  z-index: 1;
}


/* ── Customise button ────────────────────────────────────────── */
.pnl-customise-btn {
  flex-shrink: 0;
  margin-left: 8px;
  height: auto;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.pnl-customise-btn:hover,
.pnl-customise-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ── Customise drawer ────────────────────────────────────────── */
.pnl-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 30;
  box-shadow: -4px 0 16px rgba(0,0,0,0.06);
}
.pnl-drawer.open {
  transform: translateX(0);
}

.pnl-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pnl-drawer-search-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.pnl-drawer-search {
  width: 100%;
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.pnl-drawer-search::placeholder { color: var(--text-dim); }
.pnl-drawer-search:focus { border-color: var(--accent); background: var(--surface); }
.pnl-drawer-search-clear {
  display: none;
  position: absolute;
  right: 7px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: var(--surface-3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.pnl-drawer-search-clear:hover { background: var(--border); color: var(--text); }
.pnl-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s;
}
.pnl-drawer-close:hover { color: var(--text); }

.pnl-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 8px;
}


.pnl-drawer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  transition: background 0.1s;
}
.pnl-drawer-row:hover { background: var(--surface-2); }
.pnl-drawer-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.pnl-drawer-row .pnl-drawer-scale-check {
  accent-color: #8264d2;
}
.pnl-drawer-row-label {
  flex: 1;
  cursor: pointer;
  user-select: none;
}

.pnl-drawer-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 16px;
}
.pnl-drawer-no-results {
  padding: 20px 16px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
}

/* Make the P&L tab relative so drawer can position inside it */
#tab-pnl { position: relative; }

/* Suppress empty-state placeholders on analytics tabs — the brief flash
   before data hydrates from Supabase was visually distracting. The tab
   stays blank until the chart/table populates. */
.pnl-empty {
  display: none !important;
}

/* P&L tab: constrain to viewport so table-wrap is the scroll container */
#tab-pnl {
  height: 100%;
  min-height: 0;
}

.pnl-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
  scrollbar-width: none; /* Firefox */
  outline: none;
}
.pnl-table-wrap::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.pnl-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-family: var(--font);
  width: max-content;
}

.pnl-th-period,
.pnl-td:not(.pnl-td-metric) {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

/* Sticky header cells */
.pnl-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 8px 14px;
  text-align: center;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Date column-header shading driven by the current cell selection
   (pnlUpdateColumnHeaders). Spreadsheet-style: the header above a selected
   column darkens so it's clear which periods the selection spans.
   • grey    — normal cell-comparison selection (Compare OFF)
   • current — Compare ON, the CURRENT (blue) period, matched to .pnl-cell-selected
   • past    — Compare ON, the PAST (grey) period, matched to .pnl-cell-selected-2 */
.pnl-th-period.pnl-th-sel-grey    { background: var(--surface-3) !important; color: var(--text); }
.pnl-th-period.pnl-th-sel-current { background: rgba(59, 130, 246, 0.22) !important; color: var(--text); }
.pnl-th-period.pnl-th-sel-past    { background: rgba(100, 116, 139, 0.24) !important; color: var(--text); }

/* Sticky metric column — both th (corner) and td (data rows) */
.pnl-th-metric,
.pnl-td-metric {
  position: sticky !important;
  left: 0 !important;
  width: 1%;
  white-space: nowrap;
  /* Shadow on right edge to separate from scrolling columns */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.07);
  clip-path: inset(0 -10px 0 0); /* let shadow escape clipping */
}

/* Top-left corner: sticky both axes */
.pnl-th-metric {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  background: var(--surface-2) !important;
  z-index: 50 !important;
  text-align: left;
}

/* Metric data cells */
.pnl-td-metric {
  z-index: 20 !important;
  background: var(--surface) !important;
  text-align: left;
  color: var(--text);
  font-weight: 400;
  padding-left: 16px;
}

.pnl-th-total {
  background: var(--surface-3);
  color: var(--text);
  border-left: 2px solid var(--border);
}

.pnl-table td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  text-align: center;
  white-space: nowrap;
  color: var(--text-muted);
}

.pnl-td-metric {
  text-align: left;
  color: var(--text);
  font-weight: 400;
  padding-left: 16px;
}

.pnl-td-total {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  font-weight: 500;
  border-left: 2px solid var(--border);
}

/* Separator rows */
.pnl-sep td {
  padding: 0;
  height: 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.pnl-sep .pnl-td-metric { background: var(--surface-2); }

/* Row styles */
.pnl-row-subtotal td { color: var(--text); font-weight: 600; }

.pnl-row-strong td { color: var(--text); font-weight: 600; }

.pnl-row-metric td { color: var(--text-muted); font-size: 12px; }
.pnl-row-metric .pnl-td-metric { color: var(--text-muted); }

.pnl-row-net td {
  color: var(--text);
  font-weight: 600;
}

.pnl-negative { color: #f87171 !important; }
.pnl-positive { color: var(--success) !important; }

/* ── P&L cell selection ─────────────────────────────────────── */
.pnl-selectable {
  cursor: default;
  user-select: none;
}
.pnl-cell-selected {
  background: rgba(59, 130, 246, 0.13) !important;
  outline: 1px solid rgba(59, 130, 246, 0.35);
  outline-offset: -1px;
}
/* Second-set selection in compare mode. Cmd/Ctrl-drag creates this
   slate-grey set (the PAST period) alongside the blue primary set
   (CURRENT period) so the two periods stay visually and logically
   isolated even when their cells are adjacent. Grey reads as the
   neutral / historical comparison baseline, blue as the active /
   current selection. */
.pnl-cell-selected-2 {
  background: rgba(100, 116, 139, 0.16) !important;
  outline: 1px solid rgba(100, 116, 139, 0.45);
  outline-offset: -1px;
}

/* ── P&L status bar ─────────────────────────────────────────── */
.pnl-statusbar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
  flex: 1;
  padding: 0 24px;
}
.pnl-statusbar.has-data {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
#funTable .fun-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}
.filter-right {
  display: flex;
  align-items: flex-end;
  border-left: 1px solid var(--border);
  padding-left: 24px;
  gap: 24px;
}
.filter-right .pnl-customise-btn {
  margin-left: 0;
}
/* Remove divider between inputs and Customise/Glossary button on PNL and summary pages */
#tab-pnl .filter-right,
#tab-client-report .filter-right {
  border-left: none;
  padding-left: 0;
}
.filter-right .pnl-statusbar {
  flex: none;
  justify-content: flex-start;
  padding-right: 0;
}
.filter-right .pnl-statusbar.has-data {
  border-right: none;
}
.pnl-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.pnl-status-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pnl-status-value {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}
/* Compare-mode "Change" colouring — green when the move is good for the
   selected metric, red when bad (inverted for CAC/CPA). Mirrors the P&L
   Tracker chart cards' change-pill colours. Applied via
   _pnlChangeColorClass on the value span only. */
.pnl-status-value.pnl-status-change-up   { color: #10b981; font-weight: 600; }
.pnl-status-value.pnl-status-change-down { color: #ef4444; font-weight: 600; }
/* Secondary number rendered alongside the main value (used in Compare mode to
   show each group's cell count so the user can quickly verify two groups have
   the same number of cells). Untitled, deliberately understated. */
.pnl-status-sub {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
}
/* Horizontal wrapper that places .pnl-status-sub on the LEFT of .pnl-status-value
   on the same line. align-items: baseline lines the two different font-sizes up
   along their text baselines so they read cleanly as one unit. */
.pnl-status-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

/* ── Auth overlay ───────────────────────────────────────────── */

/* ── Changes / Planner ──────────────────────────────────────── */
.planner-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.planner-sidebar {
  width: 520px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.planner-sidebar-btns {
  display: flex;
  gap: 6px;
  padding: 14px 14px 10px;
  justify-content: space-between;
}

.planner-new-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  text-align: center;
  white-space: nowrap;
}
.planner-new-btn:hover { opacity: 0.85; }

.planner-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 16px;
}

.planner-list-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 12px;
}

.planner-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  border: 1px solid transparent;
  position: relative;
}
.planner-item:hover { background: var(--surface-2); }
.planner-item.active {
  background: var(--accent-dim);
  border-color: rgba(168, 86, 247, 0.2);
}

.planner-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.planner-item-date {
  font-size: 11px;
  color: var(--text-muted);
}

.planner-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 500;
}
.planner-badge.change  { background: rgba(168, 86, 247, 0.15); color: var(--accent); }
.planner-badge.planned { background: rgba(22, 163, 74, 0.12); color: var(--success); }

.planner-item.planned { background: rgba(22, 163, 74, 0.05); border-color: rgba(22, 163, 74, 0.18); }
.planner-item.planned:hover { background: rgba(22, 163, 74, 0.09); }
.planner-item.planned.active { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.35); }

.planner-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.planner-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
}

.planner-form {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 28px 36px;
  gap: 0;
  overflow-y: auto;
}
.planner-form.visible { display: flex; }

.planner-form-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.planner-kebab-wrap {
  position: relative;
  flex-shrink: 0;
}
.planner-kebab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  letter-spacing: 1px;
}
.planner-kebab-btn:hover { background: var(--surface-2); }
.planner-kebab-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 200;
  min-width: 140px;
  padding: 4px 0;
}
.planner-kebab-menu.open { display: block; }
.planner-kebab-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.planner-kebab-item:hover { background: var(--surface-2); }
.planner-kebab-delete { color: #f87171; }
.planner-kebab-delete:hover { background: rgba(248,113,113,0.08); }

.planner-form-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.planner-title-input {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  outline: none;
  width: 100%;
}
.planner-title-input::placeholder { color: var(--text-dim); }

.planner-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.planner-meta select { display: none; }

.planner-meta .cr-mob-select-wrap { margin-bottom: 0; }

.planner-body-input {
  flex: 1;
  min-height: 280px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.75;
  outline: none;
  resize: none;
}
.planner-body-input::placeholder { color: var(--text-dim); }

.planner-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  margin-top: auto;
}

.planner-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.planner-save-btn:hover:not(:disabled) { opacity: 0.85; }
.planner-save-btn:disabled {
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: not-allowed;
}

.planner-delete-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 22px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.planner-delete-btn:hover { border-color: #f87171; color: #f87171; }

.planner-save-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Budget Tracker ─────────────────────────────────────────── */
.bud-today-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 32px;
}

.bud-budget-field {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 32px;
  transition: border-color 0.15s;
}
.bud-budget-field:focus-within { border-color: var(--accent); }

.bud-currency-sym {
  padding: 0 8px;
  font-size: 13px;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  line-height: 1;
  flex-shrink: 0;
}

.bud-budget-input {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  padding: 0 10px;
  width: 120px;
  height: 100%;
}
.bud-budget-input::placeholder { color: var(--text-dim); }
.bud-budget-input::-webkit-inner-spin-button,
.bud-budget-input::-webkit-outer-spin-button,
.bud-campaign-amount::-webkit-inner-spin-button,
.bud-campaign-amount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bud-budget-input, .bud-campaign-amount { -moz-appearance: textfield; }

.bud-body {
  padding: 24px 32px 40px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}

.bud-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bud-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bud-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
  margin: 0;
}

.bud-add-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.bud-add-btn:hover { border-color: var(--accent); color: var(--accent); }

.bud-table {
  width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}
.bud-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
}
.bud-table th:first-child { padding-left: 0; }
.bud-table th:last-child { width: 32px; }

.bud-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.bud-table td:first-child { padding-left: 0; }

.bud-table tbody tr:last-child td { border-bottom: none; }

.bud-table-total td {
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding-top: 10px;
  font-weight: 600;
}

.bud-campaign-name {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  width: 200px;
  padding: 3px 0;
  transition: border-color 0.15s;
}
.bud-campaign-name:focus { border-bottom-color: var(--accent); }
.bud-campaign-name::placeholder { color: var(--text-dim); }

.bud-campaign-amount-cell {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 30px;
  width: 140px;
  transition: border-color 0.15s;
}
.bud-campaign-amount-cell:focus-within { border-color: var(--accent); }
.bud-campaign-amount-cell .bud-currency-sym { border-right: 1px solid var(--border); }

.bud-campaign-amount {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  padding: 0 8px;
  width: 100%;
  height: 100%;
}
.bud-campaign-amount::placeholder { color: var(--text-dim); }

.bud-platform-select { display: none; }

/* Give the platform cell a positioning context for the dropdown */
#budCampaignBody td:nth-child(2) { position: relative; }

/* Align platform dropdown to match campaign name + amount cell height */
#budCampaignBody .cr-mob-select-wrap    { margin-bottom: 0; }
#budCampaignBody .cr-mob-select-trigger {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
}

/* Align th label above platform dropdown with the others */
#budCampaignBody td { vertical-align: middle; }

.bud-remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.bud-remove-btn:hover { color: #f87171; background: rgba(248,113,113,0.08); }

.bud-section-breakdown {
  flex: none;
  width: 480px;
}

.bud-section-campaigns {
  flex-shrink: 0;
}

.bud-breakdown-wrap {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.bud-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  flex: 1;
}

.bud-breakdown-ad-panel {
  background: var(--surface);
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  gap: 12px;
}

.bud-ad-panel-top,
.bud-ad-panel-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bud-ad-panel-divider {
  height: 1px;
  background: var(--border);
}

.bud-platform-split {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}

.bud-plat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.bud-plat-name {
  color: var(--text-muted);
}

.bud-plat-pct {
  color: var(--text);
  font-weight: 500;
}

.bud-breakdown-item {
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Allow this grid cell to shrink below the natural width of its content
     when sibling columns demand more space (e.g. "+$50,000.00/day" in the
     "Spend increase" cell pushes other columns to compress). Without this,
     `1fr` columns enforce a min-width = max content, which then squeezes
     other cells' labels into wrapping. */
  min-width: 0;
}

.bud-breakdown-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Labels are short single-line strings — never wrap them. Prevents
     "Total days" / "Days left" / "Pacing for" from breaking to 2 lines
     when their column gets compressed. */
  white-space: nowrap;
}

.bud-breakdown-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.5px;
}
.bud-breakdown-value.bud-positive { color: #4ade80; }
.bud-breakdown-value.bud-negative { color: #f87171; }

.bud-val-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-left: 2px;
  vertical-align: baseline;
}

/* ── Cohort Analysis ─────────────────────────────────────────── */

.cohort-controls {
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  /* Fixed floor so the bar's height never changes when the comparison
     status bar appears/disappears on cell selection. Without this the
     taller stacked status item grew the bar by a few px, pushing the
     whole table down and making the page "jump". The value matches the
     Table tab's filter bar height so the spacing above the table is
     consistent across tabs. Content stays vertically centred. */
  min-height: 91px;
}

.cohort-ctrl-divider {
  display: none;
}

.cohort-controls .pnl-customise-btn {
  margin-left: 0;
}

.cohort-controls .pnl-statusbar {
  flex: none;
  justify-content: flex-start;
  padding: 0;
}

.cohort-controls .pnl-statusbar.has-data {
  border-left: 1px solid var(--border);
  border-right: none;
  padding-left: 24px;
}

.pnl-drawer-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Cohort drawer — no divider, X pushed to right, tighter body gap */
#cohortDrawer .pnl-drawer-header {
  border-bottom: none;
  justify-content: space-between;
  padding-bottom: 4px;
}

#cohortDrawer .pnl-drawer-body { padding-top: 4px; }

.cohort-wrap {
  overflow-x: auto;
  overflow-y: auto;
  padding: 0 32px 40px;
  max-height: calc(100vh - 100px);
  scrollbar-width: none;
}

.cohort-wrap::-webkit-scrollbar { display: none; }

.co-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-family: var(--font);
  white-space: nowrap;
}


.co-th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.co-th.co-fix {
  z-index: 30;
}

.co-mth {
  min-width: 52px;
}

.co-td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.co-fix {
  position: sticky;
  background: var(--surface);
  z-index: 5;
}

.co-th.co-fix { background: var(--surface-2); z-index: 30; }

.co-fix-last {
  box-shadow: 3px 0 8px rgba(0,0,0,0.08);
  clip-path: inset(0 -12px 0 0);
}

.co-label {
  text-align: center;
  color: var(--text-muted);
  font-weight: 400;
  background: var(--surface);
}

/* Cohort selection shading for the month-number headers (top) and the
   cohort month labels (left). Driven by cohortUpdateHeaders on cell
   selection — spreadsheet-style, single grey shade matching the Table
   tab's normal-selection header shade (--surface-3). */
.co-mth.co-sel-head,
.co-label.co-sel-head {
  background: var(--surface-3) !important;
  color: var(--text);
}

.co-meta {
  background: var(--bg);
}

.co-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 7px 8px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  background: var(--bg);
  color: var(--text-muted);
}

.co-cell.co-cell-empty {
  border: none;
  background: var(--bg);
}


.cohort-empty {
  padding: 48px 32px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Forecasting Tab ─────────────────────────────────────────── */

#tab-forecasting .pnl-filters {
  border-bottom: none;
}

.fcast-body {
  display: flex;
  flex-direction: row;
  gap: 28px;
  padding: 0 32px 40px;
}

.fcast-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Table wrapper — fixed to match table width ── */
.fcast-wrap {
  width: 241px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ── Table fixed layout — columns never shift with value changes ── */
.fcast-table {
  width: 241px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-family: var(--font);
}

.fcast-td-lbl {
  width: 125px;
  padding: 9px 16px;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.fcast-td-val {
  width: 114px;
  padding: 9px 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  white-space: nowrap;
}

.fcast-table tr:last-child .fcast-td-lbl,
.fcast-table tr:last-child .fcast-td-val {
  border-bottom: none;
}

/* ── Header ── */
.fcast-th-color {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 9px 16px;
  text-align: center;
  border-bottom: 2px solid var(--border);
}

/* Separator rows */
.fcast-sep td {
  padding: 0;
  height: 5px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

/* Profit % cell colours */
.fcast-val-green { background: rgba(74, 222, 128, 0.12) !important; color: #16a34a !important; }
.fcast-val-red   { background: rgba(248, 113, 113, 0.12) !important; color: #dc2626 !important; }

/* Hidden first row that locks column widths for table-layout: fixed */
.fcast-col-sizer th {
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.fcast-th-sizer-lbl { width: 125px; }
.fcast-th-sizer-val { width: 116px; }

/* ── Input cells ── */
.fcast-td-val--inp {
  padding: 0 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.fcast-input-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 10px;
}

.fcast-inp-pre,
.fcast-inp-suf {
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
}

.fcast-inp {
  width: 52px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  text-align: center;
  padding: 3px 2px;
  outline: none;
  -moz-appearance: textfield;
}

.fcast-inp::-webkit-inner-spin-button,
.fcast-inp::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fcast-inp::placeholder { color: var(--text-dim); }

/* ── Scrollbars ─────────────────────────────────────────────── */
/* Horizontal scrollbar only — vertical bars hidden throughout */
::-webkit-scrollbar { width: 0; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Raw Data table — persistent custom vertical scrollbar.
   The native macOS overlay bar fades on idle no matter what CSS we
   throw at it (because of the user's "Show scrollbars: When scrolling"
   system setting), so we hide it entirely on .table-wrapper and render
   our own indicator + thumb via JS. The thumb always shows when content
   overflows; the host hides itself when the Manual Inputs panel is on. */

/* Host that holds the scroll-wrapper + the custom bar, side by side. */
.table-scroll-host {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}
.table-scroll-host > .table-wrapper {
  flex: 1;
  min-height: 0;
}
/* Native bar stays hidden (covered by global ::-webkit-scrollbar width: 0). */

.custom-vbar {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  width: 6px;
  /* Sticky <thead> sits at z-index 10 — keep the bar above it so it isn't
     hidden behind the header row when the table is scrolled to the top. */
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.custom-vbar.visible { opacity: 1; }

.custom-vbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--text-muted);
  border-radius: 4px;
  min-height: 24px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.12s ease;
}
.custom-vbar-thumb:hover,
.custom-vbar-thumb.dragging { background: var(--text); }

/* Hide the bar entirely on the Manual Inputs panel — it's not scrolled. */
.table-scroll-host:has(.manual-inline.visible) .custom-vbar { display: none; }

/* ── Client Report ───────────────────────────────────────────── */
.cr-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 10% 16px 28px;
}

.cr-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px 10px;
}

/* Header row inside each chart card: metric dropdown on the left, the
   period total/average summary on the right. Mirrors the total-vs-average
   rule used by the P&L table's Compare mode (rates/ratios → average,
   everything else → total) so the headline number is consistent with
   how that metric reads when compared. */
.cr-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
/* Dropdown sits inside the head row — strip the wrap's own bottom margin
   so the head's margin-bottom is the only spacing below it. */
.cr-chart-head .cr-mob-select-wrap { margin-bottom: 0; }

.cr-chart-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -0.1px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
/* Period-over-period % change pill on the left of the headline value.
   Coloured green for positive moves and red for negative; hidden when
   no Compare mode is active or when the comparison period is zero. */
.cr-chart-change {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.cr-chart-change-up   { color: #10b981; }
.cr-chart-change-down { color: #ef4444; }
.cr-chart-change-flat { color: var(--text-dim); }

/* Native select hidden — replaced by custom dropdown everywhere */
.cr-metric-select { display: none !important; }

/* ── Custom metric dropdown ─────────────────────────────────── */
.cr-mob-select-wrap {
  position: relative;
  margin-bottom: 10px;
}

.cr-mob-select-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 8px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: border-color 0.15s;
}

/* Hover state only on devices that actually have hover (mice). On iOS the :hover
   state sticks after a tap, which would leave the purple border visible even after
   the dropdown closes. Wrapping in @media (hover: hover) excludes touch devices. */
@media (hover: hover) { .cr-mob-select-trigger:hover { border-color: var(--accent); } }
/* Purple border tied to the actual open/closed state of the dropdown so it appears
   when the menu is open and disappears the moment it's closed — on every device. */
.cr-mob-select-trigger.open { border-color: var(--accent); }

.cr-mob-select-trigger svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.cr-mob-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  z-index: 300;
  /* Sized to match the surge-digital analytics-tool .at-sel-list so the
     dropdowns visually match across both apps (cells, container width,
     and scroll threshold are now identical). */
  min-width: 190px;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cr-mob-select-list.open { display: block; }

.cr-mob-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
  display: flex;
  align-items: center;
}

.cr-mob-search {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 6px 28px 6px 10px;
  outline: none;
  transition: border-color 0.15s;
}

.cr-mob-search:focus { border-color: var(--accent); background: var(--surface); }
.cr-mob-search::placeholder { color: var(--text-dim); }

.cr-mob-search-clear {
  display: none;
  position: absolute;
  right: 17px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: var(--surface-3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}

.cr-mob-search-clear.visible { display: flex; }
.cr-mob-search-clear:hover { background: var(--border); color: var(--text); }

.cr-mob-select-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}

.cr-mob-select-item:last-child { border-bottom: none; }
.cr-mob-select-item:hover { background: var(--surface-2); }

.cr-mob-select-item.selected {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-dim);
}

.cr-mob-select-item.hidden { display: none; }

/* Quick-range dropdown that sits inline in the P&L date row. Reuses
   the .cr-mob-select-* skin but resets vertical margins and aligns
   trigger height with the adjacent date inputs. Sized snugly around
   the longest preset label ("Last 30 days" / "This quarter"). */
.pnl-quick-range-native { display: none !important; }
.pnl-date-row .pnl-quick-range-wrap { margin-bottom: 0; margin-left: 4px; }
.pnl-date-row .pnl-quick-range-wrap .cr-mob-select-trigger {
  padding: 7px 10px;
  font-size: 12.5px;
  /* Width pinned to fit the longest preset label ("This quarter") so the
     trigger doesn't visibly resize as the user cycles presets. */
  width: 125px;
  justify-content: space-between;
}
/* Quick Range + Compare dropdown lists in the date row are constrained
   to match the TRIGGER button's width — `width: 100%` of the wrap, which
   is sized by the trigger inside it. This means the list's right edge
   lines up cleanly with the trigger's right edge instead of extending
   past it (which is what the base 190px min-width would otherwise do). */
.pnl-date-row .pnl-quick-range-wrap .cr-mob-select-list {
  min-width: 100%;
  width: 100%;
}

/* Same width-match treatment applied to three more custom dropdowns:
     • Currency dropdown on Raw Data → Manual Input page
     • Category dropdown in the Changes / Planner section
     • Platform dropdown (Google / Meta / TikTok) in the Budget Tracker
   First, force the WRAP to size to its content (the trigger) — without
   this, the wrap can stretch to its parent's full width (especially the
   budget platform wrap which lives inside a <td>), and then the list at
   100% would also stretch. Then constrain the list to 100% of the wrap
   so its right edge aligns with the trigger. */
.currency-select-wrap,
.planner-meta .cr-mob-select-wrap,
.bud-platform-wrap {
  width: fit-content;
}
.currency-select-wrap .cr-mob-select-list,
.planner-meta .cr-mob-select-list,
.bud-platform-wrap .cr-mob-select-list {
  min-width: 100%;
  width: 100%;
}

/* Quick Range / Compare dropdown items inherit the base `.cr-mob-select-item`
   sizing (padding 9px 14px / font 12.5px) so they match the chart-card
   metric dropdowns. Previously had a tighter `padding: 8px 12px` override
   here — removed so cell sizing is consistent across all custom dropdowns. */

/* Compare dropdown sits to the right of Quick Range. Trigger needs more
   width because the longest label is "Compare: Previous period". */
.pnl-date-row .pnl-compare-range-wrap .cr-mob-select-trigger {
  width: 195px;
}

.cr-chart-wrap {
  position: relative;
  height: 160px;
}
.cr-chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── Summary page Glossary modal ────────────────────────────────────────── */
.cr-glos-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 24px;
}
.cr-glos-overlay.open { display: flex; }
.cr-glos-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  width: 100%; max-width: 860px;
  /* vh fallback for older browsers; dvh re-measures live as Safari iOS
     shows/hides the URL bar so the modal always fits the visible area. */
  height: 88vh; max-height: 88vh;
  height: 88dvh; max-height: 88dvh;
  display: flex; flex-direction: column;
}
.cr-glos-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cr-glos-head-left { display: flex; flex-direction: column; gap: 2px; }
.cr-glos-head-title { font-size: 14px; font-weight: 700; color: var(--text); }
.cr-glos-head-sub { font-size: 11.5px; color: var(--text-dim); }
.cr-glos-close {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 4px;
  transition: color .12s; flex-shrink: 0;
}
.cr-glos-close:hover { color: var(--text-muted); }
.cr-glos-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.cr-glos-left {
  width: 172px; flex-shrink: 0; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.cr-glos-search-wrap {
  padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  position: relative; display: flex; align-items: center;
}
.cr-glos-search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); width: 13px; height: 13px; pointer-events: none; flex-shrink: 0;
}
.cr-glos-search {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 26px 6px 30px; font-family: var(--font); font-size: 12.5px;
  outline: none; color: var(--text);
}
.cr-glos-search::placeholder { color: var(--text-dim); }
.cr-glos-search:focus { border-color: var(--accent); }
.cr-glos-search-clear {
  display: none; position: absolute; right: 17px; width: 15px; height: 15px;
  background: var(--border); border: none; border-radius: 50%;
  font-size: 8px; color: var(--text-muted); cursor: pointer;
  align-items: center; justify-content: center; transition: background .1s;
}
.cr-glos-search-clear.visible { display: flex; }
.cr-glos-search-clear:hover { background: var(--surface-3); }
.cr-glos-items {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cr-glos-items::-webkit-scrollbar { display: none; }
.cr-glos-metric-item {
  display: block; width: 100%; padding: 9px 14px;
  border-bottom: 1px solid var(--surface-3);
  font-size: 12.5px; color: var(--text-muted); font-weight: 500;
  cursor: pointer; background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; transition: background .1s, color .1s;
}
.cr-glos-metric-item:last-child { border-bottom: none; }
/* Hover state only on devices with an actual pointer (mice). On touch
   devices :hover sticks after a tap, causing the grey state to linger
   while the user scrolls. Wrapping in `hover: hover` confines the rule
   to desktop, so mobile tap-and-scroll never shows the grey background. */
@media (hover: hover) {
  .cr-glos-metric-item:hover { background: var(--surface-2); color: var(--text); }
}
/* Suppress the iOS / Android tap-highlight flash too. */
.cr-glos-metric-item { -webkit-tap-highlight-color: transparent; }
.cr-glos-metric-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.cr-glos-right { flex: 1; overflow-y: auto; padding: 28px 30px; min-width: 0; }
.cr-glos-metric-label { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cr-glos-metric-category {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent); background: var(--accent-dim);
  padding: 2px 9px; border-radius: 100px; margin-bottom: 18px;
}
.cr-glos-metric-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 18px; }
.cr-glos-metric-formula {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 11px 14px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6;
}
.cr-glos-metric-formula strong { color: var(--text); font-weight: 600; }
.cr-glos-metric-tip {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(168,86,247,.06); border: 1px solid rgba(168,86,247,.2);
  border-radius: 6px; padding: 11px 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.7;
}
.cr-glos-metric-tip svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); width: 14px; height: 14px; }
.cr-glos-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; color: var(--text-dim); gap: 12px; padding: 40px 24px;
}
.cr-glos-empty svg { width: 40px; height: 40px; opacity: .3; }
.cr-glos-empty p { font-size: 13px; max-width: 240px; line-height: 1.6; }
.cr-glos-empty-mobile { display: none; }

/* ── Summary page: remove filter bar divider and match PNL gap on desktop ── */
@media (min-width: 769px) {
  #crFilters.pnl-filters { border-bottom: none; }
  .cr-chart-grid { padding-top: 0; }
}

/* ── Mobile — Summary page only ─────────────────────────────── */
@media (max-width: 768px) {

  /* Remove blue tap highlight on all elements */
  * { -webkit-tap-highlight-color: transparent; }

  /* Shrink the header height on mobile to save vertical space. Overriding
     --header-h here cascades to every rule that uses it (.app-header height,
     .app-body margin-top + height calc) — no need to touch each one. */
  :root { --header-h: 44px; }

  /* Header is part of normal document flow on mobile — it sits at the top of
     the page and scrolls away naturally with the rest of the content, the same
     way any other section header would. No fixed positioning, no slide-up
     animation, no body offset to manage. Desktop keeps position:fixed. */
  .app-header { position: static; padding: 0 12px; }
  .logo       { font-size: 13px; }

  /* Body flows naturally below the header — no fixed height, no internal
     scroll. The whole page scrolls via html/body, which lets iOS Safari
     handle the URL-bar collapse/expand smoothly without the 100vh / 100dvh
     mismatch we previously had to work around. */
  .app-body {
    margin-top: 0;
    height: auto;
    overflow: visible;
  }

  /* Allow body/html to scroll on mobile */
  html, body { overflow: auto; }

  /* Hide sidebar toggle + sidebar entirely */
  .sidebar-toggle { display: none !important; }
  .sidebar        { display: none !important; }

  /* Header dropdown mobile sizing lives in a separate @media block at the end of
     this file — it has to come AFTER the .header-menu-* desktop rules to win on
     the cascade. See the block near the bottom of the file. */

  /* Let main content fill the full width */
  .main-content { overflow-y: auto; }

  /* Force only the Summary tab visible */
  .tab-panel             { display: none !important; }
  #tab-client-report     { display: flex !important; height: auto; }

  /* ── Summary filters: compact, no labels ────────────────────── */
  #crFilters.pnl-filters { border-bottom: none; }
  #crFilters.pnl-filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px 0;
  }

  /* Hide all filter labels */
  #crFilters .pnl-filter-label { display: none; }

  /* Date range spans full width on its own row */
  #crFilters .pnl-filter-group:nth-child(1) { width: 100%; }

  /* Group by + Customers share the second row */
  #crFilters .pnl-filter-group:nth-child(2),
  #crFilters .pnl-filter-group:nth-child(3) { flex: 0 0 auto; }

  /* Compact date inputs. Allow wrap so the Compare dropdown can break
     to its own row below — without `flex-wrap: wrap` the wrap's
     `flex-basis: 100%` rule has nothing to wrap into and the item just
     overflows the right edge of the screen. */
  #crFilters .pnl-date-row { gap: 6px; flex-wrap: wrap; }
  #crFilters .pnl-date-input {
    font-size: 11px;
    padding: 6px 28px 6px 8px;
    width: 112px;
  }

  /* Smaller seg buttons */
  #crFilters .seg-btn {
    font-size: 11px;
    padding: 5px 9px;
  }

  /* Glossary button joins the Group by / Customers row */
  #crFilters .filter-right {
    flex: 0 0 auto;
    align-items: center;
    border-left: none;
    padding-left: 0;
  }
  #crFilters .filter-right .pnl-customise-btn {
    font-size: 11px;
    padding: 5px 9px;
  }

  /* ── Custom metric dropdown — mobile size overrides ─────────── */
  .cr-mob-select-wrap  { margin-bottom: 6px; }
  .cr-mob-select-trigger { font-size: 11px; padding: 5px 9px; }
  .cr-mob-select-trigger svg { width: 12px; height: 12px; }
  /* Mobile max-height matched to surge-digital's .at-sel-list (21.7vh) so
     the dropdown overlay sits at the same proportion of the viewport on
     both apps. */
  .cr-mob-select-list { -webkit-overflow-scrolling: touch; max-height: 21.7vh; }
  .cr-mob-search { font-size: 11px; }
  .cr-mob-select-item { font-size: 11px; }

  /* Quick-range dropdown in the P&L date row — override the desktop
     scoped rules so the trigger sits at the same height as the date
     inputs beside it. Width pinned snugly around the longest preset
     label ("This quarter") at 11px so it doesn't visibly resize. */
  .pnl-date-row .pnl-quick-range-wrap .cr-mob-select-trigger {
    font-size: 11px;
    padding: 6px 8px;
    width: 105px;
  }
  /* Quick Range list inherits the base mobile `.cr-mob-select-list`
     max-height (21.7vh) so the dropdown matches every other custom
     dropdown across the app. Previously had a `max-height: none` override
     to fit all 7 presets without scrolling — removed for visual
     consistency. If 7 presets don't fit, the dropdown scrolls
     internally (same as Compare / chart-metric on a small viewport). */
  /* Quick Range / Compare items intentionally inherit the base mobile
     `.cr-mob-select-item` sizing (padding 9px 14px from the base rule
     + font 11px from the mobile rule) so they read the same as the
     chart-card metric dropdowns. */

  /* Compare dropdown breaks onto its own row beneath the date inputs +
     Quick Range, so the date row reads cleanly on phone widths. The wrap
     is forced to 100% of the flex container; the trigger button inside
     stays a compact pill (sized to fit "Compare: Previous period" at 11px). */
  .pnl-date-row .pnl-compare-range-wrap {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
  }
  .pnl-date-row .pnl-compare-range-wrap .cr-mob-select-trigger {
    font-size: 11px;
    padding: 6px 8px;
    /* Width pinned to the natural size of "Compare: Previous period" at
       11px so the chevron sits flush against the text — matching the
       tight padding between "Last 14 days" and its chevron above. */
    width: 178px;
  }
  /* Compare LIST width pinned to the trigger (178px) rather than the
     wrap (which is 100% of the row to force the new-line break). Without
     this, the base `width: 100%` rule would stretch the dropdown across
     the entire row. */
  .pnl-date-row .pnl-compare-range-wrap .cr-mob-select-list {
    width: 178px;
    min-width: 178px;
  }
  /* Date-row dropdowns (Quick Range + Compare) are short fixed lists
     (7-8 presets, 4 compare modes) — let them render their full height
     on mobile without internal scrolling. The base mobile rule
     (max-height: 21.7vh) was forcing a scroll on Quick Range; this
     override restores natural height for both. The selector targets the
     Quick Range wrap, which also matches the Compare wrap (Compare has
     both .pnl-quick-range-wrap and .pnl-compare-range-wrap classes). */
  .pnl-date-row .pnl-quick-range-wrap .cr-mob-select-list {
    max-height: none;
    overflow-y: visible;
  }

  /* ── Summary charts: single column on mobile ─────────────────── */
  .cr-chart-grid {
    grid-template-columns: 1fr;
    padding: 10px 14px 16px;
    gap: 10px;
  }

  .cr-chart-wrap { height: 180px; }

  /* ── Glossary modal — mobile ─────────────────────────────────── */
  /* Safari iOS bug: `position: fixed; inset: 0` extends BEHIND the URL bar
     + bottom toolbar. So even if the modal is sized correctly with dvh,
     centering it within an oversized overlay puts the bottom under the
     toolbar. Constrain the overlay itself to the visible viewport with
     `dvh` so its centre lines up with the visible centre. */
  .cr-glos-overlay {
    height: 100vh;
    height: 100dvh;
    /* `flex-end` instead of `center` pins the modal to the bottom-aligned
       safe edge of the viewport — safer than centering on Safari which
       can mis-measure during URL-bar transitions. */
    align-items: center;
    /* Honour the home indicator on iPhones with safe-area. */
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  /* Modal sized to the visible viewport. `svh` (small viewport height)
     uses the SHORTEST possible viewport (URL bar visible). This guarantees
     the modal never exceeds the visible area regardless of scroll state.
     Height bumped to 75vh so the metric-explanation panel below the list
     (left has max-height: 260px) gets ~25% more room — fixes the cropping
     where users had to scroll inside the panel to see the full description. */
  .cr-glos-modal {
    height: 75vh;
    height: 75dvh;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    max-height: calc(100svh - 48px);
    border-radius: 10px;
    max-width: 100%;
  }
  /* Smooth momentum scrolling + safe-area-aware bottom padding on the
     explanation panel so the last line doesn't sit under the home indicator. */
  .cr-glos-right {
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(19px, env(safe-area-inset-bottom));
  }
  .cr-glos-body { flex-direction: column; }
  .cr-glos-left { width: 100%; flex-shrink: 0; border-right: none; border-bottom: 1px solid var(--border); max-height: 260px; }
  /* Explanation panel: padding/margins/line-heights all reduced ~20% so the content
     reads more compactly on mobile. Font-sizes preserved so readability is unchanged.
     Right panel still uses flex:1 to fill the modal — the empty state and selected
     metric content both fill the same panel, so no resize between metric clicks. */
  .cr-glos-right { flex: 1; overflow-y: auto; padding: 14px 14px 19px; min-height: 0; }
  .cr-glos-metric-label { font-size: 14px; margin-bottom: 5px; }
  .cr-glos-metric-item { font-size: 11.5px; }
  .cr-glos-search { font-size: 11.5px; }
  .cr-glos-metric-desc { font-size: 11.5px; line-height: 1.5; margin-bottom: 14px; }
  .cr-glos-metric-formula { font-size: 11.5px; padding: 9px 11px; margin-bottom: 13px; line-height: 1.3; }
  .cr-glos-metric-tip { font-size: 11.5px; padding: 9px 11px; line-height: 1.4; }
  .cr-glos-empty p { font-size: 11.5px; }
  .cr-glos-empty { padding: 24px 16px; }
  .cr-glos-empty-desktop { display: none; }
  .cr-glos-empty-mobile { display: block; }
}

/* ── Auth overlay (login screen) ────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.auth-overlay.hidden { display: none; }

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.08);
  font-family: var(--font);
}

.auth-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.auth-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 20px;
}

.auth-form { display: flex; flex-direction: column; gap: 6px; }

.auth-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.auth-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: var(--text-dim); }

.auth-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 8px;
}
.auth-submit:hover:not(:disabled) { opacity: 0.9; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }


/* Mobile: bring auth input + button + title + subtitle to the app-wide mobile size */
@media (max-width: 768px) {
  .auth-input    { font-size: 11px; }
  .auth-submit   { font-size: 11px; }
  .auth-title    { font-size: 14px; }
  .auth-subtitle { font-size: 11px; }
}

.auth-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
  padding: 2px 0;
  text-align: center;
  margin-top: 0;
}
.auth-link:hover { text-decoration: underline; }

/* Inline row that pairs "Resend code" / "use different email" on a single
   line with a grey "or" connector that matches the subtitle's colour. */
.auth-link-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}
.auth-link-sep {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Mobile-only size override for the bottom-row links. Placed AFTER the
   base .auth-link / .auth-link-sep rules so the cascade order (equal
   specificity → later rule wins) lets these 11px values take effect
   inside the media query. */
@media (max-width: 768px) {
  .auth-link     { font-size: 11px; }
  .auth-link-sep { font-size: 11px; }
}

.auth-error {
  color: #ef4444;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
/* Only reserve vertical space when there's actually an error to show, so the
   bottom whitespace inside the card matches the top whitespace when the form
   is in its resting state. */
.auth-error:not(:empty) { margin-top: 14px; }

/* ── Header dropdowns (client switcher + user menu) ─────────── */
.header-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.header-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  max-width: 240px;
}

@media (hover: hover) {
  .header-menu-trigger:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}

.header-menu-trigger.open {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* Solo-client mode — client-role users with access to exactly one
   client. The trigger renders as a static card (no chevron, no hover/
   focus state, no click effect) since there's nothing to switch to. */
.header-menu-trigger.single-client { cursor: default; }
.header-menu-trigger.single-client .header-menu-chevron { display: none; }
@media (hover: hover) {
  .header-menu-trigger.single-client:hover {
    border-color: var(--border);
    color: var(--text-muted);
    background: var(--surface-2);
  }
}

/* ── Client-role read-only restrictions ─────────────────────────
   Applied to <body> when the signed-in user has role !== 'admin'.
   Hides every tab except P&L Tracker + Changes/Planner, and locks
   the planner to view-only: no new/save/delete buttons, no drag
   reorder, no date editing, no category swap. */
body.role-client .nav-tab[data-tab="pnl"],
body.role-client .nav-tab[data-tab="budget"],
body.role-client .nav-tab[data-tab="cohort"],
body.role-client .nav-tab[data-tab="forecasting"],
body.role-client .nav-tab[data-tab="raw-data"] {
  display: none;
}

/* Planner action buttons + kebab (delete menu) — fully removed. */
body.role-client #plannerNewBtn,
body.role-client #plannerSaveBtn,
body.role-client .planner-sidebar-btns,
body.role-client .planner-kebab-wrap {
  display: none;
}

/* Planner date pickers — block clicks so the calendar can't be opened.
   Inputs are already readonly in markup; pointer-events stops the calendar
   trigger entirely. */
body.role-client #plannerForm .pnl-date-input,
body.role-client #plannerForm .pnl-date-cal-btn {
  pointer-events: none;
}

/* Category select — pointer-events blocks clicking, and the JS already
   applies the `disabled` attribute so keyboard navigation can't change it. */
body.role-client #plannerCategoryInput,
body.role-client .planner-meta .cr-mob-select-trigger,
body.role-client .planner-meta .cr-mob-select-list {
  pointer-events: none;
}

/* Visual cue that title/body inputs are read-only — no purple focus border
   when tabbed-into, no caret jump. */
body.role-client #plannerTitleInput,
body.role-client #plannerBodyInput {
  cursor: default;
}

.header-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.header-menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  /* Container sized to match `.cr-mob-select-list` + surge-digital's
     `.at-sel-list` so every dropdown in the app shares the same width,
     radius, shadow, and scroll threshold. */
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  z-index: 300;
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}
.header-menu-list.open { display: block; }

.header-menu-item,
.header-menu-action {
  display: block;
  width: 100%;
  /* Padding/font matched to the chart-card metric dropdowns
     (.cr-mob-select-item) so the Client picker and three-dots menu have
     the same row sizing as every other custom dropdown in the app. */
  padding: 9px 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .header-menu-item,
  .header-menu-action {
    /* Mirrors the mobile `.cr-mob-select-item` font-size override so the
       header dropdown rows match the chart-card dropdown rows on phones. */
    font-size: 11px;
  }
  /* Header menu list (Client picker, three-dots) capped at the same
     viewport proportion as the other custom dropdowns on mobile so it
     doesn't push past the bottom of the screen on small viewports. */
  .header-menu-list {
    max-height: 21.7vh;
  }
}
.header-menu-item:hover,
.header-menu-action:hover {
  background: var(--surface-2);
  color: var(--text);
}
.header-menu-item.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-dim);
}

.header-menu-action {
  color: var(--accent);
  font-weight: 500;
}

/* Muted variant — used by "Sign Out". Matches the email row's colour
   (var(--text-dim)) so the bottom of the dropdown reads as quieter
   utility text. */
.header-menu-action-muted { color: var(--text-dim); }
.header-menu-action-muted:hover { color: var(--text); }

/* Destructive action — red text for "Delete client". Hover deepens the
   red and tints the background so it's clear the click is dangerous. */
.header-menu-action-danger { color: #ef4444; }
.header-menu-action-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

/* Icon-only trigger variant (used by the three-dots user menu). No
   surrounding chip/border — just the dots sitting naturally in the header.
   Hover/open states tint the dots themselves instead of the box. */
.header-menu-trigger-icon {
  background: none;
  border: 1px solid transparent;
  padding: 6px;
  gap: 0;
  color: var(--text-muted);
}
@media (hover: hover) {
  .header-menu-trigger-icon:hover {
    background: none;
    border-color: transparent;
    color: var(--accent);
  }
}
.header-menu-trigger-icon.open {
  background: none;
  border-color: transparent;
  color: var(--accent);
}
.header-menu-dots {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header-menu-empty,
.header-menu-info {
  display: block;
  width: 100%;
  padding: 5px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-dim);
  box-sizing: border-box;
}
.header-menu-empty { font-style: italic; }
.header-menu-info  { font-weight: 500; }

.header-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Mobile overrides — must come AFTER the desktop rules above to win on cascade
   (the earlier mobile rules inside @media at line ~2719 are overridden by the
   header-menu desktop rules that appear after them in the file). */
@media (max-width: 768px) {
  .header-right { gap: 8px; }
  .header-menu-trigger {
    font-size: 11px;
    padding: 5px 9px;
    gap: 4px;
  }
  .header-menu-label { max-width: 90px; }
  /* Compact cell sizing on mobile, matching desktop's borderless look —
     the dropdown reads as a single grouped list rather than a stack of
     bordered rows. */
  .header-menu-list { min-width: 160px; padding: 4px 0; }
  .header-menu-item,
  .header-menu-action,
  .header-menu-info,
  .header-menu-empty {
    font-size: 11px;
    padding: 5px 12px;
    line-height: 1.4;
  }

  /* Three-dots icon trigger sized down for mobile to match the rest of
     the header chips. */
  .header-menu-trigger-icon { padding: 4px; }
  .header-menu-dots { width: 14px; height: 14px; }
}

/* ── Generic modal pattern (used for Create New Client + future modals) ─────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10000;
}
.modal-overlay.open { display: flex; }

/* New-client modal can be triggered from inside the Manage Clients
   modal as well as the header dropdown, so bump its z-index above the
   default modal stacking order to guarantee it sits on top. */
#newClientModal { z-index: 10010; }

/* Lock the underlying page scroll while any modal is open. Uses :has()
   to reactively toggle when an overlay gets the .open class — no JS
   needed. Falls back gracefully in older browsers (page just scrolls
   as before, which is the previous behaviour). */
html:has(.modal-overlay.open),
html:has(.cr-glos-overlay.open),
body:has(.modal-overlay.open),
body:has(.cr-glos-overlay.open) {
  overflow: hidden;
}

/* Prevent scroll chaining inside any modal — when the user reaches the
   top/bottom of a scrollable region inside the modal, the scroll stops
   there rather than bleeding through to the body underneath. */
.modal-overlay,
.cr-glos-overlay { overscroll-behavior: contain; }
.users-pane,
.cr-glos-right,
.cr-glos-items { overscroll-behavior: contain; }

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  font-family: var(--font);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.2px;
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s;
}
.modal-close:hover { color: var(--text-muted); }

.modal-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Labels visually belong to the input directly UNDERNEATH them. The
     parent .modal-body has gap:6, so margin-top here adds breathing
     room above the label (separating it from the previous input) while
     margin-bottom stays 0 so the label hugs its own input. Net effect:
     ~14px gap above label, ~6px below. */
  margin-top: 8px;
  margin-bottom: 0;
}
/* First label in any modal sits flush against the modal head — no
   extra top margin needed since modal-body's padding already provides
   breathing room. */
.modal-body > .modal-label:first-of-type {
  margin-top: 0;
}
.modal-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.modal-input:focus { border-color: var(--accent); }
.modal-input::placeholder { color: var(--text-dim); }

.modal-error {
  color: #ef4444;
  font-size: 12.5px;
  line-height: 1.5;
}
.modal-error:empty { display: none; }
.modal-error:not(:empty) { margin-top: 8px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.modal-btn-cancel,
.modal-btn-submit {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.modal-btn-cancel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.modal-btn-cancel:hover { border-color: var(--accent); color: var(--accent); }
.modal-btn-submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.modal-btn-submit:hover:not(:disabled) { opacity: 0.9; }
.modal-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Destructive variant of modal submit (used by Delete client). */
.modal-btn-danger {
  background: #ef4444;
  border-color: #ef4444;
}
.modal-btn-danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; opacity: 1; }

/* Plain body paragraph used in confirmation-only modals. */
.modal-body-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

/* ── Connect Shopify Orders via OAuth — install link modal ──── */
.oauth-intro-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.oauth-label-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.oauth-link-result {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}
.oauth-success-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  margin: 0 0 8px;
}
.oauth-link-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.oauth-link-input {
  flex: 1;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
}
.oauth-copy-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.oauth-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.oauth-copy-btn.copied { border-color: var(--success); color: var(--success); }
.oauth-link-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.oauth-fallback-hint {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}
.oauth-fallback-hint code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--text);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.oauth-fallback-hint a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.oauth-fallback-hint a:hover { text-decoration: underline; }

/* Confirm Client Removal modal — balance the top padding (divider → text)
   with the bottom spacing (text → Confirm button = gap 6 + margin-top 8
   = 14px) so the prompt sits visually centred between the two edges. */
#removeMembershipModal .modal-body { padding-top: 14px; }

/* Sign Out + Remove CSV + generic confirm modals — stripped-down,
   no heading/divider. Card width pulled in close around the prompt
   text. Prompt + action buttons centred for a balanced compact dialog. */
#signOutModal .modal-card   { max-width: 290px; }
#removeCsvModal .modal-card { max-width: 330px; }  /* longer prompt — extra room to stay on one line */
#confirmModal .modal-card   { max-width: 360px; }  /* widest variant — fits any 1-line prompt */
#signOutModal .modal-body,
#removeCsvModal .modal-body,
#confirmModal .modal-body { padding: 18px; }
#signOutModal .modal-body-text,
#removeCsvModal .modal-body-text,
#confirmModal .modal-body-text { text-align: center; }
#signOutModal .modal-actions,
#removeCsvModal .modal-actions,
#confirmModal .modal-actions { justify-content: center; }


/* ── Manage Users modal ───────────────────────────────────────── */
.modal-card-wide { max-width: 560px; }
.modal-body-padded { padding: 0 22px 22px; gap: 0; }

/* Manage Clients body has no tab bar to provide spacing between the
   modal divider and the first row card, so add it here directly. Top
   and bottom paddings both 16px so cards sit symmetrically between the
   modal-head divider and the create-button divider. */
#manageClientsModal .modal-body-padded { padding-top: 16px; }
#manageClientsModal .users-invite-section { margin-top: 16px; }

.users-tab-bar {
  display: flex;
  gap: 4px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.users-tab {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.users-tab:hover { background: var(--surface-2); color: var(--text); }
.users-tab.active { background: var(--surface-2); color: var(--text); }

.users-pane { min-height: 80px; max-height: 360px; overflow-y: auto; }
.users-pane-empty {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 28px 8px;
}

.users-list { display: flex; flex-direction: column; gap: 6px; }

/* Single user row */
.users-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.users-row-main { flex: 1; min-width: 0; }
.users-row-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* Name + pencil edit button live on the same baseline. */
.users-row-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.users-row-edit {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.users-row-edit svg { width: 12px; height: 12px; }
.users-row-edit:hover {
  color: var(--accent);
  background: var(--surface-3);
}

/* Read-only mode (client users) hides the edit pencil too. */
.users-read-only .users-row-edit { display: none; }
.users-row-email {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.users-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.users-row-role-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.users-row-role-chip.operator {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.users-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 4px 2px 8px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.users-client-chip-x {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 8px;
}
.users-client-chip-x:hover { color: #ef4444; }

.users-add-client-wrap { position: relative; }
.users-add-client-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.users-add-client-btn:hover { border-color: var(--accent); color: var(--accent); }
.users-add-client-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 160px;
  z-index: 10;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
.users-add-client-menu.open { display: block; }
.users-add-client-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
}
.users-add-client-item:hover { background: var(--surface-2); }
.users-add-client-empty {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 10px;
}

.users-row-remove {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.users-row-remove:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
}

/* Invite form section */
.users-invite-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.users-invite-toggle {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.users-invite-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.users-invite-form { display: flex; flex-direction: column; gap: 10px; }
.users-invite-row { display: flex; flex-direction: column; gap: 4px; }
.users-invite-optional {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin-left: 4px;
}
.users-invite-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-height: 38px;
}
.users-invite-client-chip {
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.users-invite-client-chip:hover { border-color: var(--accent); }
.users-invite-client-chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.users-invite-role { display: flex; gap: 6px; }
.users-invite-role-chip {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* ── Manage Users / Manage Clients — mobile sizing ─────────────── */
@media (max-width: 768px) {
  /* Tab bar (Active users / Pending invites) */
  .users-tab-bar { padding: 10px 0 8px; margin-bottom: 10px; }
  .users-tab    { font-size: 11px; padding: 5px 8px; }

  /* Pane / list container — let it grow taller relative to viewport
     since modals on mobile take over most of the screen anyway. */
  .users-pane     { max-height: 55vh; }
  .users-pane-empty { font-size: 11px; padding: 18px 8px; }
  .users-list     { gap: 4px; }

  /* Row cards */
  .users-row      { padding: 7px 10px; gap: 8px; }
  .users-row-name { font-size: 11.5px; }
  .users-row-email { font-size: 10.5px; }
  .users-row-meta { gap: 4px; margin-top: 4px; }

  /* Edit pencil */
  .users-row-edit svg { width: 11px; height: 11px; }

  /* Chips inside the row */
  .users-row-role-chip { font-size: 9px; padding: 1px 6px; }
  .users-client-chip { font-size: 10px; padding: 1px 3px 1px 7px; }
  .users-client-chip-x { font-size: 12px; padding: 0 3px; }

  /* "+ Add client" pill */
  .users-add-client-btn { font-size: 10px; padding: 1px 7px; }
  .users-add-client-menu { min-width: 140px; }
  .users-add-client-item { font-size: 10.5px; padding: 5px 9px; }

  /* Right-side Remove / Delete / Revoke button */
  .users-row-remove { font-size: 10.5px; padding: 3px 7px; }

  /* Invite form section (bottom) */
  .users-invite-section { margin-top: 12px; padding-top: 10px; }
  .users-invite-toggle  { font-size: 11px; padding: 6px 10px; }
  .users-invite-client-chip { font-size: 10.5px; padding: 3px 9px; }
  .users-invite-role-chip   { font-size: 10.5px; padding: 4px 12px; }

  /* Tighten the Manage Clients body padding too so it doesn't feel
     spread out at mobile widths. */
  #manageClientsModal .modal-body-padded   { padding-top: 12px; }
  #manageClientsModal .users-invite-section { margin-top: 12px; }
}
.users-invite-role-chip:hover { border-color: var(--accent); }
.users-invite-role-chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.users-invite-role-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ── Pixel snippet display (Connect Sessions modal) ────────── */
.pixel-snippet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  margin-bottom: 6px;
}
.pixel-snippet-copy {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.pixel-snippet-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pixel-snippet-copy.copied {
  border-color: var(--success);
  color: var(--success);
}
.pixel-snippet-code {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 280px;
  margin: 0;
}

.connect-help-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
}

/* ── Connect Shopify modal — help block ───────────────────── */
.connect-help {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.connect-help-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.connect-help-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}
.connect-help-steps li { margin-bottom: 6px; }
.connect-help-steps li:last-child { margin-bottom: 0; }
.connect-help-steps code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
}
.connect-help-steps em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

/* Read-only mode: hide everything operators-only */
.users-read-only .users-invite-section { display: none; }
.users-read-only .users-row-remove,
.users-read-only .users-add-client-btn,
.users-read-only .users-client-chip-x { display: none; }
/* Non-admins don't see the activity tab either */
.users-read-only .users-tab[data-tab="activity"] { display: none; }


/* Mobile sizing — align with the rest of the app's mobile text scale */
@media (max-width: 768px) {
  .modal-input,
  .modal-btn-cancel,
  .modal-btn-submit { font-size: 11px; }
  .modal-card { max-width: 100%; }
}