/* ============================================
   BQ Explorer - Dark Theme Database IDE
   ============================================ */

/* Admin-only elements: hidden by default; revealed when body has .admin-mode.
   Set via JS after /api/admin/verify succeeds against localStorage token. */
body:not(.admin-mode) [data-admin-only] { display: none !important; }

/* --- CSS Variables --- */
:root {
  --bg: #0d0d12;
  --bg-deep: #09090d;
  --surface: #16161e;
  --surface-2: #1e1e28;
  --hover: #1c1c2a;
  --active: #262636;
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.10);
  --text: #b8bcc8;
  --text-bright: #e4e6ed;
  --muted: #5c6070;
  --muted-2: #3e4250;
  --accent: #7c8fff;
  --accent-hover: #9aa5ff;
  --accent-dim: rgba(124, 143, 255, 0.12);
  --green: #a6e3a1;
  --green-dim: rgba(166, 227, 161, 0.15);
  --red: #f38ba8;
  --red-dim: rgba(243, 139, 168, 0.15);
  --yellow: #f9e2af;
  --yellow-dim: rgba(249, 226, 175, 0.15);
  --purple: #cba6f7;
  --purple-dim: rgba(203, 166, 247, 0.15);
  --orange: #fab387;
  --teal: #94e2d5;

  /* Chart.js theming — text/grid contrast tuned per theme so light-mode
     charts (manager timeseries, sales horizontal bars 등)도 가독성 확보. */
  --chart-text:        #c6cad8;
  --chart-text-strong: #e9ebf3;
  --chart-grid:        rgba(108, 112, 134, 0.18);

  --font-ui: 'Inter', 'Pretendard Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --sidebar-width: 280px;
  --topbar-height: 48px; /* fixed topbar — reserve flow space */
  --history-height: 0px;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --transition: 150ms ease;

  /* YoY/Channel/Manager dashboard — refined editorial tokens */
  --yoy-bg:            #1b1b27;
  --yoy-card-bg:       #23232f;
  --yoy-card-bg-2:     #2a2a38;
  --yoy-border:        #33334a;
  --yoy-border-strong: #41415c;

  --yoy-fg:        #e6e7ee;
  --yoy-fg-strong: #f3f4f9;
  --yoy-fg-muted:  #9ca0b3;
  --yoy-fg-faint:  #6c7086;

  --yoy-pos:    #7fc69a;
  --yoy-pos-bg: rgba(127,198,154,.10);
  --yoy-neg:    #d97a8e;
  --yoy-neg-bg: rgba(217,122,142,.10);
  --yoy-flat:   #9ca0b3;
  --yoy-accent: #e9a37a;
  --yoy-track:  #2f2f42;

  --yoy-font-num: 'Inter', 'Pretendard Variable', 'Segoe UI', system-ui, sans-serif;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

::selection {
  background: var(--accent-dim);
  color: var(--text-bright);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--muted-2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

/* --- Top Bar (fixed, always visible) --- */
.topbar {
  height: 48px;
  background: rgba(9, 9, 13, 0.75);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 12px;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.topbar-hover-zone { display: none; }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.topbar-brand:hover { background: var(--hover); }

.brand-icon { color: var(--accent); width: 20px; height: 20px; }
.brand-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.3px;
}

.topbar-center { flex: 1; display: flex; justify-content: center; overflow: hidden; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* --- Tab Bar --- */
.tab-bar {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-family: var(--font-ui);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
}

.tab-btn svg { width: 14px; height: 14px; }

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

.tab-btn.active {
  color: var(--accent);
  background: rgba(124, 143, 255, 0.12);
  font-weight: 600;
}

/* --- Topbar tab-bar (left side, next to brand) --- */
.topbar-tab-bar { margin-left: 6px; }
.topbar-tab-bar .tab-btn { padding: 5px 10px; font-size: 12px; }
.topbar-tab-bar .tab-btn svg { width: 13px; height: 13px; }

/* --- Topbar preset nav (center) --- */
.topbar-preset-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.topbar-preset-nav .preset-quick-link {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.topbar-preset-nav .preset-quick-link svg { width: 13px; height: 13px; }
.topbar-preset-nav .preset-quick-link.is-active {
  background: rgba(250,179,135,0.14);
  border-color: var(--orange);
  color: var(--text-bright);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn svg { width: 14px; height: 14px; }

.btn-primary {
  background: var(--accent);
  color: var(--bg-deep);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger {
  background: var(--red);
  color: var(--bg-deep);
  border-color: var(--red);
}
.btn-danger:hover { opacity: 0.85; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--hover); border-color: var(--border-light); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.btn-icon:hover { background: var(--hover); color: var(--text); }
.btn-icon svg { width: 16px; height: 16px; }

.btn-xs { padding: 3px 8px; font-size: 11px; }
.btn-xs svg { width: 12px; height: 12px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-full { width: 100%; justify-content: center; }

.btn:disabled, .btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- App Layout --- */
.app-body {
  display: flex;
  height: calc(100vh - var(--topbar-height) - var(--history-height));
  margin-top: calc(var(--topbar-height) + var(--history-height));
  overflow: hidden;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 200ms ease, min-width 200ms ease, opacity 200ms ease;
}

.sidebar.collapsed {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

.sidebar-search {
  padding: 0 10px 8px;
  position: relative;
}

.sidebar-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.sidebar-search input {
  width: 100%;
  padding: 6px 10px 6px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--transition);
}

.sidebar-search input:focus { border-color: var(--accent); }
.sidebar-search input::placeholder { color: var(--muted-2); }

.sidebar-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 12px;
}

.tree-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px;
  color: var(--muted);
  font-size: 12px;
}

/* --- Tree View --- */
.tree-section {
  margin-bottom: 4px;
}

.tree-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  user-select: none;
}

.tree-section-header:hover { background: var(--hover); color: var(--text); }
.tree-section-header svg { width: 12px; height: 12px; transition: transform var(--transition); }
.tree-section-header.collapsed svg.tree-arrow { transform: rotate(-90deg); }

.tree-section-items { padding-left: 4px; }
.tree-section-header.collapsed + .tree-section-items { display: none; }

.tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 16px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  user-select: none;
  transition: background var(--transition);
  position: relative;
}

.tree-node:hover { background: var(--hover); }
.tree-node.active { background: var(--accent-dim); color: var(--accent); }

.tree-node svg { width: 14px; height: 14px; flex-shrink: 0; }

.tree-node .node-icon { color: var(--accent); }
.tree-node .node-icon.cloud { color: var(--muted); }
.tree-node .sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.tree-node .node-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-node .node-count {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}

/* BQ dataset node */
.tree-dataset {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  user-select: none;
}

.tree-dataset:hover { background: var(--hover); color: var(--text); }
.tree-dataset svg { width: 13px; height: 13px; transition: transform var(--transition); }
.tree-dataset.collapsed svg.tree-arrow { transform: rotate(-90deg); }
.tree-dataset-items { padding-left: 8px; }
.tree-dataset.collapsed + .tree-dataset-items { display: none; }

/* BQ tree-node styling */
.tree-node-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.tree-node-name { flex: 1; min-width: 0; word-break: break-all; line-height: 1.3; }
.tree-node-count { font-size: 10px; color: var(--muted-2); flex-shrink: 0; font-family: var(--font-mono); }
.tree-node-bq { padding-left: 28px; }
.tree-node-bq.synced .tree-node-name { color: var(--green); }
.tree-ds-header { padding-left: 12px; }
.tree-subsection { }
.tree-badge { font-size: 10px; color: var(--muted); background: var(--surface-2); padding: 1px 5px; border-radius: 8px; margin-left: auto; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.spinner-sm { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }

/* --- Main Content --- */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* --- Tab History (MRU strip below topbar) --- */
.tab-history {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  height: var(--history-height);
  min-height: 0;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 90;
  overflow: hidden;
}
.tab-history[hidden] { display: none; }
.tab-history-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted-2);
  flex-shrink: 0;
}
.tab-history-label svg { width: 13px; height: 13px; }
.tab-history-chips {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-history-chips::-webkit-scrollbar { display: none; }
.tab-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  font-family: var(--font-ui);
  font-size: 11.5px;
  user-select: none;
}
.tab-history-chip > svg { width: 11px; height: 11px; }
.tab-history-chip:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border-light);
}
.tab-history-chip.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.tab-history-chip.dragging { opacity: 0.4; }
.tab-history-chip.drop-before { box-shadow: -2px 0 0 0 var(--orange); }
.tab-history-chip.drop-after  { box-shadow:  2px 0 0 0 var(--orange); }
.tab-history-close {
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  padding: 1px 3px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  margin-left: 1px;
}
.tab-history-close:hover { color: var(--red); background: rgba(243,139,168,0.15); }
.tab-history-close svg { width: 10px; height: 10px; }
.tab-history-clear {
  background: none;
  border: 1px solid transparent;
  color: var(--muted-2);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tab-history-clear:hover { color: var(--red); border-color: var(--border); }
.tab-history-clear svg { width: 12px; height: 12px; }

/* Explorer sub-tab bar — visually fused with the panel-header below
   (browser-tab style: sits above, active tab seamlessly connects to the panel) */
.explorer-subtabs {
  flex-shrink: 0;
  padding: 6px 12px 0;
  background: var(--bg-deep);
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.explorer-subtabs .sd-segmented {
  width: auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
.explorer-subtabs .sd-seg {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.explorer-subtabs .sd-seg + .sd-seg { border-left: 1px solid transparent; }
.explorer-subtabs .sd-seg:hover:not(.active) { background: var(--hover); color: var(--text); }
.explorer-subtabs .sd-seg.active {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
  font-weight: 600;
}
.explorer-subtabs .sd-seg svg { width: 14px; height: 14px; }
/* Fuse: panel-header sits flush below sub-tabs, no double border */
.explorer-subtabs + .tab-panel.active > .panel-header,
.explorer-subtabs ~ .tab-panel.active > .panel-header {
  border-top: 1px solid var(--border);
}

.tab-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.tab-panel.active { display: flex; }

/* --- Panel Header --- */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  flex-shrink: 0;
  gap: 12px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}

.panel-title svg { width: 15px; height: 15px; color: var(--accent); }

.panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Explorer Tab --- */
.explorer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}

.explorer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.explorer-schema {
  flex: 0 0 auto;
  max-height: 45%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.schema-table-wrap {
  flex: 1;
  overflow: auto;
}

.explorer-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 200px;
}

.preview-table-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
}

.resize-handle {
  height: 4px;
  background: var(--border);
  cursor: ns-resize;
  flex-shrink: 0;
  transition: background var(--transition);
}

.resize-handle:hover { background: var(--accent); }

/* Collapsible explorer panels — header만 남기고 body 숨김 */
.panel-toggle {
  margin-right: 4px;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.panel-toggle svg { width: 14px !important; height: 14px !important; color: var(--muted) !important; }
.explorer-schema.collapsed { max-height: none; flex: 0 0 auto; }
.explorer-schema.collapsed .schema-table-wrap,
.explorer-schema.collapsed .meta-info-bar { display: none !important; }
.explorer-preview.collapsed { flex: 0 0 auto; min-height: 0; }
.explorer-preview.collapsed .preview-table-wrap { display: none !important; }
.explorer-schema.collapsed .panel-toggle svg,
.explorer-preview.collapsed .panel-toggle svg { transform: rotate(180deg); }
/* 한쪽이 접히면 반대쪽이 남은 공간 흡수, 리사이즈 핸들 숨김 */
.explorer-content:has(.explorer-schema.collapsed) .resize-handle,
.explorer-content:has(.explorer-preview.collapsed) .resize-handle { display: none; }
.explorer-content:has(.explorer-preview.collapsed) .explorer-schema:not(.collapsed) {
  max-height: none; flex: 1;
}

/* --- Data Tables --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  z-index: 2;
  user-select: none;
}

.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th .sort-icon { display: inline-block; margin-left: 4px; opacity: 0.4; }
.data-table th.sorted .sort-icon { opacity: 1; color: var(--accent); }

.data-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.data-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
.data-table tr:hover td { background: var(--hover); }

.data-table .null-val { color: var(--muted-2); font-style: italic; }

/* Preview / Results tables */
.preview-table td, .results-table td {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* Schema table */
.schema-table .col-type {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
}

.type-int { background: var(--accent-dim); color: var(--accent); }
.type-float { background: var(--purple-dim); color: var(--purple); }
.type-text { background: var(--green-dim); color: var(--green); }
.type-date { background: var(--yellow-dim); color: var(--yellow); }
.type-bool { background: var(--red-dim); color: var(--red); }
.type-other { background: var(--surface-2); color: var(--muted); }

/* --- SQL Editor --- */
.sql-editor-area {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: 50%;
  min-height: 150px;
}

.sql-textarea-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  min-height: 120px;
}

#sqlEditorContainer {
  flex: 1;
  width: 100%;
  height: 100%;
}

.sql-results-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 180px;
}

.results-table-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
}

.results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px;
  color: var(--muted);
}

.results-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  font-size: 12px;
  color: var(--muted);
}

.pagination-btns { display: flex; gap: 4px; }

/* --- Loading --- */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 46, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10;
  color: var(--muted);
  font-size: 12px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; transform-origin: center; }

/* --- Badge / Pill --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
}

.badge-green { background: var(--green-dim); color: var(--green); }
.badge-red { background: var(--red-dim); color: var(--red); }
.badge-blue { background: var(--accent-dim); color: var(--accent); }
.badge-beta {
  background: var(--yellow-dim);
  color: var(--yellow);
  border: 1px dashed var(--yellow);
  letter-spacing: .04em;
}

/* --- History --- */
.history-table-wrap {
  flex: 1;
  overflow: auto;
}

.history-table .star-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-2);
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}

.history-table .star-btn:hover { color: var(--yellow); }
.history-table .star-btn.active { color: var(--yellow); }
.history-table .star-btn svg { width: 16px; height: 16px; }

.history-table .sql-cell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.history-table .sql-cell:hover { color: var(--accent); }

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.search-input-wrap input {
  padding: 5px 10px 5px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-ui);
  outline: none;
  width: 200px;
  transition: border-color var(--transition);
}

.search-input-wrap input:focus { border-color: var(--accent); }
.search-input-wrap input::placeholder { color: var(--muted-2); }

/* --- Views --- */
.view-form {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.views-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.view-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color var(--transition);
}

.view-card:hover { border-color: var(--border-light); }

.view-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.view-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-bright);
}

.view-card-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.view-card-sql {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}

.view-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.view-card-title { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.view-card-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.view-sql-details { margin-bottom: 8px; }
.view-sql-details summary { cursor: pointer; padding: 4px 0; user-select: none; }
.view-sql-details summary:hover { color: var(--text-bright); }
.view-sql-details .view-sql {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 6px;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
}

.view-preview {
  margin: 10px 0 8px;
  padding: 10px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.view-preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.view-preview-types { display: flex; gap: 2px; }
.view-preview-types .btn.active {
  background: var(--accent);
  color: var(--bg-deep);
}
.view-preview-chart-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  margin-bottom: 8px;
}
.view-preview-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}
.view-preview-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}
.view-preview-table th,
.view-preview-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-preview-table th { color: var(--muted); font-weight: 600; }

/* --- Charts --- */
.chart-builder {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-config {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 50%;
}

.chart-type-btns {
  display: flex;
  gap: 4px;
}

.chart-type-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
}

.chart-type-btn svg { width: 16px; height: 16px; }
.chart-type-btn:hover { border-color: var(--border-light); color: var(--text); }
.chart-type-btn.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.chart-preview-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  min-height: 250px;
}

.chart-preview-area canvas {
  max-width: 100%;
  max-height: 100%;
}

.chart-empty {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.saved-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
  padding: 16px;
}

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

.saved-chart-card canvas { width: 100% !important; height: 200px !important; }
.saved-chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.saved-chart-card-name { font-weight: 600; font-size: 14px; }

/* --- Dashboards --- */
.dashboard-form {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.dashboards-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.dashboard-card-name { font-weight: 600; font-size: 15px; }

/* --- Gridstack dashboard tiles --- */
.grid-stack {
  background: transparent;
  min-height: 200px;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dash-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dash-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.dash-tile-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-tile-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.dash-tile-body canvas {
  width: 100% !important;
  height: 100% !important;
}

.dash-tile-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Edit-mode header */
.dashboard-edit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dashboard-name-input {
  flex: 1;
  min-width: 200px;
}

.dashboard-edit-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.add-chart-wrap { position: relative; }

.add-chart-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  padding: 4px;
}

.add-chart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.add-chart-item:hover { background: var(--bg-deep); }
.add-chart-empty { padding: 8px 10px; }

/* Display-view header */
.dashboard-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.dashboard-view-header h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
}

.chart-suggestion-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
}
.chart-suggestion-banner > i { color: var(--accent); flex: 0 0 auto; }
.chart-suggestion-banner .suggestion-text { flex: 1; }
.chart-suggestion-banner > button { flex: 0 0 auto; }

.chart-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
}

.chart-selector-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition);
}

.chart-selector-item:hover { border-color: var(--border-light); }
.chart-selector-item.selected { border-color: var(--accent); background: var(--accent-dim); }
.chart-selector-item input { display: none; }

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  animation: modalIn 200ms ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright);
}

.modal-header h3 svg { width: 18px; height: 18px; color: var(--accent); }

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.modal-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12.5px;
  cursor: pointer;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
}

.modal-tab svg { width: 15px; height: 15px; }
.modal-tab:hover { color: var(--text); background: var(--hover); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}

.sync-panel { display: none; }
.sync-panel.active { display: block; }

.modal-progress {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 300ms ease;
}

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

/* --- Upload Zone --- */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.upload-zone:hover { border-color: var(--accent); background: var(--accent-dim); }
.upload-zone.dragover { border-color: var(--accent); background: var(--accent-dim); }

.upload-file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-top: 8px;
}

/* --- Checkbox List --- */
.checkbox-list {
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  padding: 8px;
  border: 1px solid var(--border);
}

.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  transition: background var(--transition);
}

.checkbox-list label:hover { background: var(--hover); }

.checkbox-list input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.checkbox-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* --- Context Menu --- */
.context-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 2000;
  min-width: 180px;
  padding: 6px;
  animation: contextIn 100ms ease;
}

@keyframes contextIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--transition);
}

.context-item svg { width: 14px; height: 14px; color: var(--muted); }
.context-item:hover { background: var(--hover); }
.context-danger { color: var(--red); }
.context-danger svg { color: var(--red); }
.context-danger:hover { background: var(--red-dim); }
.context-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* --- Toast --- */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  color: var(--text);
  pointer-events: auto;
  animation: toastIn 300ms ease;
  min-width: 280px;
  max-width: 420px;
}

.toast.out { animation: toastOut 300ms ease forwards; }

.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.toast-success { border-left: 3px solid var(--green); }
.toast.toast-success svg { color: var(--green); }
.toast.toast-error { border-left: 3px solid var(--red); }
.toast.toast-error svg { color: var(--red); }
.toast.toast-warning { border-left: 3px solid var(--yellow); }
.toast.toast-warning svg { color: var(--yellow); }
.toast.toast-info { border-left: 3px solid var(--accent); }
.toast.toast-info svg { color: var(--accent); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* --- Forms --- */
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--muted-2); }
.form-textarea { resize: vertical; min-height: 60px; }
.sql-mono { font-family: var(--font-mono); font-size: 12.5px; }

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c7086' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.form-select option { background: var(--surface); color: var(--text); }

.input-sm {
  padding: 4px 8px;
  font-size: 11.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-ui);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236c7086' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
  cursor: pointer;
}

.input-sm option { background: var(--surface); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 150px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* --- Utilities --- */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-xs { font-size: 11px; }
.mt-1 { margin-top: 8px; }
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: var(--shadow);
  }
  .sidebar.collapsed {
    transform: translateX(-100%);
  }
  .tab-btn span { display: none; }
  .tab-btn { padding: 6px 10px; }
}

@media (max-width: 640px) {
  :root { --sidebar-width: 260px; }
  .modal { width: 95vw; }
  .form-grid { grid-template-columns: 1fr; }
  .brand-text { display: none; }
}

/* --- Metadata Info Bar --- */
.meta-info-bar {
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.meta-value {
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.meta-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.meta-tag.freq-daily { background: var(--green-dim); color: var(--green); }
.meta-tag.freq-weekly { background: var(--accent-dim); color: var(--accent); }
.meta-tag.freq-monthly { background: var(--yellow-dim); color: var(--yellow); }
.meta-tag.freq-static { background: var(--surface-2); color: var(--muted); }
.meta-tag.freq-dead { background: var(--red-dim); color: var(--red); }

.meta-tag.priority-high { background: var(--green-dim); color: var(--green); }
.meta-tag.priority-medium { background: var(--accent-dim); color: var(--accent); }
.meta-tag.priority-low { background: var(--surface-2); color: var(--muted); }
.meta-tag.priority-dead { background: var(--red-dim); color: var(--red); }

.meta-tag.cat-tag { background: var(--purple-dim); color: var(--purple); }

.badge-ko {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 500;
}

/* --- Data Profile Panel --- */
.profile-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.profile-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.profile-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}

.profile-stat .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.profile-stat .stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.profile-columns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-col-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.profile-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.profile-col-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}

.profile-col-type {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
}

.profile-col-desc {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 6px;
}

.profile-col-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
}

.profile-col-stat {
  display: flex;
  gap: 4px;
}

.profile-col-stat .label { color: var(--muted); }
.profile-col-stat .value { color: var(--text); font-family: var(--font-mono); }

.null-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  margin-top: 6px;
  overflow: hidden;
}

.null-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 300ms ease;
}

.null-bar-fill.low { background: var(--green); }
.null-bar-fill.medium { background: var(--yellow); }
.null-bar-fill.high { background: var(--red); }

.profile-samples {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sample-chip {
  padding: 2px 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-chip .sample-count {
  color: var(--muted);
  font-size: 10px;
  margin-left: 4px;
}

/* --- Sidebar Tree Improvements --- */
.tree-node .freq-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.freq-dot.daily { background: var(--green); }
.freq-dot.weekly { background: var(--accent); }
.freq-dot.monthly { background: var(--yellow); }
.freq-dot.static { background: var(--muted-2); }
.freq-dot.dead { background: var(--red); opacity: 0.5; }

.tree-node-ko {
  display: none;
}

.tree-section-header .section-subtitle {
  font-size: 10px;
  color: var(--muted-2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Tree group by category */
.tree-category-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 12px;
  font-size: 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

.tree-node.dead-table {
  opacity: 0.4;
}

.tree-node.dead-table:hover {
  opacity: 0.7;
}

/* ═══════════════════════════════════════════
   Insight Tab — Visual Data Exploration
   ═══════════════════════════════════════════ */

/* Landing — Table Cards */
.insight-landing {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.insight-header {
  margin-bottom: 24px;
}

.insight-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 6px;
}

.insight-header h2 svg { width: 22px; height: 22px; color: var(--yellow); }

.insight-header p { font-size: 13px; }

.insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.insight-category-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.insight-card:hover {
  border-color: var(--accent);
  background: var(--hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.insight-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.insight-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}

.insight-card-subtitle {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.insight-card-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

.insight-card-stats {
  display: flex;
  gap: 16px;
  font-size: 11px;
}

.insight-card-stat .label { color: var(--muted); }
.insight-card-stat .value { color: var(--text); font-weight: 600; font-family: var(--font-mono); }

.insight-card .freq-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

/* Analysis View */
.insight-analysis {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Toolbar */
.insight-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.insight-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.breadcrumb-home {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: none;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-ui);
}

.breadcrumb-home:hover { background: var(--hover); }
.breadcrumb-home svg { width: 14px; height: 14px; }

.breadcrumb-sep {
  color: var(--muted-2);
  font-size: 14px;
}

.breadcrumb-table {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}

.insight-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(137,180,250,0.3);
  border-radius: 16px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.filter-chip-label { color: var(--muted); margin-right: 2px; }

.filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(137,180,250,0.2);
  color: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.filter-chip-remove:hover { background: rgba(137,180,250,0.4); }

.insight-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.insight-date-range {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.date-btn {
  padding: 4px 10px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.date-btn:hover { color: var(--text); background: var(--hover); }
.date-btn.active { color: var(--accent); background: var(--bg); }

.insight-metric-select, .insight-agg-select {
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  outline: none;
}

.insight-metric-select:focus, .insight-agg-select:focus { border-color: var(--accent); }

/* KPI Cards */
.insight-kpis {
  display: flex;
  gap: 12px;
  padding: 16px;
  overflow-x: auto;
  flex-shrink: 0;
}

.insight-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  min-width: 150px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition);
}

.insight-kpi:hover { border-color: var(--accent); background: var(--hover); }
.insight-kpi.active { border-color: var(--accent); background: var(--accent-dim); }

.insight-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-bright);
  font-family: var(--font-mono);
  line-height: 1.2;
}

.insight-kpi-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.insight-kpi-sub {
  font-size: 10px;
  color: var(--muted-2);
  margin-top: 2px;
  font-family: var(--font-mono);
}

/* Charts Grid */
.insight-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 16px 16px;
}

.insight-chart-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.insight-chart-panel.full-width {
  grid-column: 1 / -1;
}

.insight-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-chart-title svg { width: 14px; height: 14px; color: var(--accent); }

.insight-chart-wrap {
  flex: 1;
  position: relative;
  min-height: 250px;
}

.insight-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* Data Table Section */
.insight-data-section {
  margin: 0 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.insight-data-table-wrap {
  max-height: 400px;
  overflow: auto;
}

/* Responsive */
@media (max-width: 900px) {
  .insight-charts-grid {
    grid-template-columns: 1fr;
  }
  .insight-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Auto Summary Card ─────────────────────────────────────── */
.summary-card {
  flex: 0 0 auto;
  margin: 10px 12px 0;
  padding: 10px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 40vh;
  overflow: auto;
}
.summary-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 10px;
}
.summary-card-header svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.summary-loading {
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spinner-sm {
  width: 10px;
  height: 10px;
  border-width: 2px;
}
.summary-card-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.summary-block {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 0;
}
.summary-block-full {
  grid-column: 1 / -1;
}
.summary-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.summary-block-title svg {
  width: 12px;
  height: 12px;
}
.summary-block-title .muted { color: var(--muted-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.summary-block-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.summary-error {
  padding: 8px 12px;
  color: var(--red);
  font-size: 12px;
}
.summary-empty {
  padding: 4px 8px;
  font-size: 12px;
}

/* Sparkline bars */
.spark-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
}
.spark-bar {
  flex: 1;
  min-width: 3px;
  background: linear-gradient(to top, var(--accent-dim), var(--accent));
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
}
.spark-bar:hover { opacity: 0.7; }

/* Categorical rows */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.cat-label {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}
.cat-bar-fill.null-low { background: var(--green); }
.cat-bar-fill.null-medium { background: var(--yellow); }
.cat-bar-fill.null-high { background: var(--red); }
.cat-count {
  text-align: right;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* Preset question chips */
.preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.preset-chip:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text-bright);
}
.preset-chip:active { transform: scale(0.97); }
.preset-chip svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

/* ── Schema row clickable ─────────────────────────────────── */
.schema-row.clickable-col {
  cursor: pointer;
  transition: background 0.12s;
}
.schema-row.clickable-col:hover {
  background: var(--hover);
}
.schema-row.clickable-col:hover td:last-child i {
  opacity: 1 !important;
  color: var(--accent);
}

/* ── Field action menu ─────────────────────────────────────── */
.field-menu {
  min-width: 220px;
  padding: 4px;
}
.field-menu .context-header {
  padding: 6px 10px 4px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Guide samples (empty states) ──────────────────────────── */
.guide-samples {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  max-width: 460px;
  width: 100%;
}
.guide-samples-title {
  font-size: 11px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-align: left;
}
.guide-sample-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.guide-sample-btn:hover {
  background: var(--hover);
  border-color: var(--accent);
}
.guide-sample-btn code {
  background: var(--bg-deep);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}
.guide-sample-btn .muted {
  color: var(--muted);
  font-size: 11.5px;
}

/* ── AI Assistant (FAB + Drawer) ───────────────────────────── */
.ai-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(137, 180, 250, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.ai-fab:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(137, 180, 250, 0.55); }
.ai-fab:active { transform: scale(0.95); }
.ai-fab svg { width: 22px; height: 22px; }
.ai-fab.hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }

.ai-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.22s ease-out;
  z-index: 950;
}
.ai-drawer.open { transform: translateX(0); }

.ai-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ai-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-bright);
}
.ai-drawer-title svg { width: 16px; height: 16px; color: var(--purple); }
.ai-context { color: var(--muted); font-size: 11px; font-weight: 400; }

.ai-drawer-intro {
  padding: 18px 16px 8px;
}
.ai-examples {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-example {
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ai-example:hover { background: var(--hover); border-color: var(--accent); }

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.ai-msg-user {
  align-self: flex-end;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--text-bright);
  white-space: pre-wrap;
}
.ai-msg-assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.ai-answer { margin-bottom: 8px; }
.ai-error { color: var(--red); font-size: 12px; }

.ai-sql-block {
  margin-top: 4px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ai-sql-code {
  margin: 0;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-bright);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}
.ai-sql-actions {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.ai-sql-actions .btn { flex-shrink: 0; }

.ai-dash-picker {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 10px;
}
.ai-dash-picker-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.ai-dash-picker-list {
  display: flex; flex-direction: column; gap: 4px;
}
.ai-dash-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.ai-dash-item:hover { border-color: var(--accent); }
.ai-dash-item span:nth-child(2) { flex: 1; }
.ai-dash-item .badge { font-size: 10px; }

.ai-dash-new-row {
  display: flex; gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.ai-dash-new-row input { flex: 1; min-width: 0; }
.ai-dash-done {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
}

.ai-input-area {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  align-items: flex-end;
}
.ai-cmd-trigger { padding: 8px 8px; align-self: flex-end; }
.ai-cmd-trigger svg { width: 14px; height: 14px; }
.ai-cmd-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 12px;
  right: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 951;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
}
.ai-cmd-item {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  flex-wrap: wrap;
}
.ai-cmd-item:last-child { border-bottom: none; }
.ai-cmd-item:hover,
.ai-cmd-item.active { background: var(--bg-deep); }
.ai-cmd-name {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.ai-cmd-args {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 11.5px;
}
.ai-cmd-desc {
  color: var(--text);
  font-size: 12px;
  flex: 1;
  min-width: 100%;
}
.ai-input {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
}
.ai-input:focus { border-color: var(--accent); }
#aiSendBtn { align-self: flex-end; padding: 8px 12px; }
#aiSendBtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Mobile optimization (consolidated) ───────────────────── */

/* Sidebar backdrop (mobile drawer dim) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: var(--topbar-height) 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 49; /* sidebar is 50 */
  opacity: 0;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

@media (max-width: 900px) {
  /* AI drawer fills the screen on tablet+ */
  .ai-drawer { width: 100vw; max-width: 100vw; border-left: none; }
  /* Single-column dashboard / insight grids */
  .dashboard-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .summary-card-body { grid-template-columns: 1fr; }
  /* Modal nearly full-width on tablet */
  .modal { width: 92vw; max-height: 85vh; }
  /* Insight toolbar wraps */
  .insight-toolbar { flex-wrap: wrap; gap: 8px; }

  /* Topbar — let preset nav scroll horizontally instead of clipping */
  .topbar-center {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .topbar-center::-webkit-scrollbar { display: none; }
  .tab-bar { flex-shrink: 0; }
  .topbar-preset-nav { flex-shrink: 0; }
  /* Collapse left tab-bar labels — icons only — to free up space for brand + center nav */
  .topbar-tab-bar .tab-btn span { display: none; }
  .topbar-tab-bar .tab-btn { padding: 5px 8px; }
  .brand-text { display: none; }
}

@media (max-width: 640px) {
  /* Tab history strip is hidden on small screens to save vertical space —
     desktop users still get the MRU bar; mobile relies on browser back. */
  :root { --history-height: 0px !important; }
  .tab-history { display: none !important; }
  /* Topbar — always visible on mobile (matches desktop fixed behavior). */
  .topbar-hover-zone { display: none; }

  /* Touch targets ≥ 40px for primary controls */
  .btn { min-height: 40px; padding: 10px 14px; font-size: 13px; }
  .btn-icon { width: 40px; height: 40px; }
  .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 12.5px; }
  .btn-xs { min-height: 32px; padding: 6px 10px; font-size: 12px; }
  .tab-btn { min-height: 40px; padding: 8px 10px; }
  .modal-tab { min-height: 44px; padding: 12px 8px; font-size: 13px; }

  /* Form inputs ≥16px font-size to prevent iOS auto-zoom on focus */
  .form-input,
  .form-select,
  .form-textarea,
  .sidebar-search input,
  .ai-input {
    font-size: 16px;
    padding: 12px 12px;
  }
  .form-textarea { min-height: 80px; }
  .sidebar-search input { padding: 12px 12px 12px 36px; }

  /* Tree nodes — fatter for finger taps */
  .tree-node { padding: 12px 10px; gap: 10px; min-height: 44px; }
  .tree-section-header { padding: 10px 8px; min-height: 36px; }
  .tree-node-bq { padding-left: 28px; }

  /* Sidebar full-width drawer */
  :root { --sidebar-width: 86vw; }
  .sidebar { width: 86vw; min-width: 86vw; max-width: 340px; }

  /* Topbar — slim down, hide non-essential buttons */
  .topbar { padding: 0 8px; gap: 6px; height: 52px; }
  :root { --topbar-height: 52px; }
  .topbar-brand { gap: 4px; }
  .brand-text { display: none; }
  .topbar-right .btn-icon[title*="Rill"],
  .topbar-right .btn-icon[onclick*="loadTables"] { display: none; }
  .topbar-right { gap: 2px; }

  /* Panel header / actions — wrap & scroll instead of clip */
  .panel-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    align-items: stretch;
  }
  .panel-title { flex: 1 1 100%; font-size: 14px; }
  .panel-actions {
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .panel-actions::-webkit-scrollbar { display: none; }
  .panel-actions .btn { flex-shrink: 0; }

  /* History — drop secondary search refresh button */
  .search-input-wrap { flex: 1 1 100%; }
  .search-input-wrap input { width: 100%; }

  /* Insight cards — single column on phone */
  .insight-cards { grid-template-columns: 1fr; gap: 10px; }
  .insight-charts-grid { grid-template-columns: 1fr !important; }
  .insight-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  .insight-date-range { flex: 1 1 100%; overflow-x: auto; }

  /* Chart builder — type buttons wrap */
  .chart-type-btns { flex-wrap: wrap; gap: 6px; }
  .form-row { flex-direction: column; align-items: stretch; gap: 8px; }

  /* Modal full-width on phone — dvh handles iOS Safari toolbar collapse */
  .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .modal-overlay { backdrop-filter: blur(2px); }
  .modal-header { padding: 14px 16px; }
  .modal-body { padding: 14px; }
  .modal-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* AI FAB sits above iOS home indicator — keep z-index high so always tappable */
  .ai-fab {
    bottom: max(20px, env(safe-area-inset-bottom, 16px));
    right: 16px;
    width: 60px;
    height: 60px;
    z-index: 940; /* above backdrop(49)/sidebar(50)/topbar(100) — only drawer(950)/modal-overlay sits higher */
    touch-action: manipulation;
  }
  .ai-fab svg { width: 26px; height: 26px; }

  /* Charts — smaller heights so card/legend fit */
  .dashboard-chart-cell canvas { height: 220px !important; }
  .chart-preview-area { min-height: 280px; }
  .chart-preview-area canvas { max-height: 320px; }

  /* Meta info bar wraps so tags don't overflow */
  .meta-info-bar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .meta-item { flex-basis: 100%; }

  /* Explorer schema/preview — give preview more room */
  .explorer-schema { max-height: 50%; }

  /* Tables — guarantee horizontal scroll on every wrapper */
  .schema-table-wrap,
  .preview-table-wrap,
  .results-table-wrap,
  .history-table-wrap,
  .insight-data-table-wrap,
  .table-scroll-wrap,
  .modal-body table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 6px 8px; white-space: nowrap; }

  /* AI input area — bigger send button */
  .ai-input-area { padding: 10px; }
  #aiSendBtn { min-height: 44px; padding: 10px 16px; }

  /* Resize handles irrelevant on touch — hide */
  .resize-handle { display: none; }

  /* Chart selector chips taller */
  .chart-selector-item { padding: 10px 14px; font-size: 13px; }

  /* Insight controls full-width */
  .insight-metric-select, .insight-agg-select { width: 100%; min-height: 40px; font-size: 14px; }

  /* Saved charts grid single column */
  .saved-charts-grid { grid-template-columns: 1fr !important; }

  /* Views / dashboard list cards full-width */
  .views-list, .dashboards-list { padding: 10px; gap: 10px; }

  /* Form grid stacks */
  .form-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* Views card — vertical layout, hide button labels */
  .view-card { padding: 12px; }
  .view-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .view-card-actions { justify-content: flex-end; }
  .view-card-actions .hide-mobile { display: none; }
  .view-card-actions .btn { min-height: 36px; padding: 6px 10px; }
  .view-preview-chart-wrap { height: 200px; }
  .view-preview-table { font-size: 10.5px; }
  .view-preview-table th, .view-preview-table td { padding: 4px 6px; max-width: 140px; }
}

/* Smooth scroll snap for any horizontal table/scroll containers */
.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ================================================================
   Sales Dashboard (preset)
   ================================================================ */

/* Dashboard list view scroll container (preset cards + saved list).
   Parent .tab-panel is overflow:hidden, so the inner list must scroll. */
#dashboardListView {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

/* Preset section in dashboard list */
.preset-dashboards {
  padding: 16px 16px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.preset-section-title {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 -4px;
}
.preset-section-title svg { width: 14px; height: 14px; color: var(--orange); }

.preset-quick-links {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 4px;
}
.preset-quick-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 500;
  color: var(--text); text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .12s, border-color .12s, color .12s;
}
.preset-quick-link svg { width: 12px; height: 12px; color: var(--orange); }
.preset-quick-link:hover {
  background: var(--hover);
  border-color: var(--orange);
  color: var(--text-bright);
}

.dashboard-card.preset-card {
  cursor: pointer;
  margin-bottom: 0;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.dashboard-card.preset-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--preset-tint, linear-gradient(135deg, rgba(250,179,135,0.08), transparent 60%));
  pointer-events: none;
  opacity: 0.85;
}
.dashboard-card.preset-card:hover {
  transform: translateY(-2px);
  border-color: var(--preset-accent, var(--orange));
  box-shadow: 0 6px 22px var(--preset-glow, rgba(250,179,135,0.12));
}

/* Header: icon tile + title + badge */
.dashboard-card.preset-card .dashboard-card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-bottom: none;
  z-index: 1;
}
.dashboard-card.preset-card .dashboard-card-header > svg {
  width: 20px;
  height: 20px;
  padding: 8px;
  background: var(--preset-tile-bg, rgba(250,179,135,0.18));
  color: var(--preset-accent, var(--orange));
  border-radius: 8px;
  box-sizing: content-box;
  flex-shrink: 0;
}
.dashboard-card.preset-card strong {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

/* Description + meta — no left padding (icon already establishes column) */
.preset-card-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
.preset-card-meta {
  position: relative;
  z-index: 1;
  padding: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
  line-height: 1.45;
}
.preset-card-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.dashboard-card.preset-card .badge.badge-orange {
  background: var(--preset-tile-bg, rgba(250,179,135,0.18));
  color: var(--preset-accent, var(--orange));
}

/* Per-type theming via CSS vars on the card root */
.dashboard-card.preset-card.sales-preset {
  --preset-accent: var(--orange);
  --preset-tile-bg: rgba(250,179,135,0.18);
  --preset-tint: linear-gradient(135deg, rgba(250,179,135,0.10), transparent 65%);
  --preset-glow: rgba(250,179,135,0.18);
}
.dashboard-card.preset-card.yoy-preset {
  --preset-accent: var(--green);
  --preset-tile-bg: rgba(166,227,161,0.18);
  --preset-tint: linear-gradient(135deg, rgba(166,227,161,0.10), transparent 65%);
  --preset-glow: rgba(166,227,161,0.16);
}
.dashboard-card.preset-card.channel-preset {
  --preset-accent: var(--accent);
  --preset-tile-bg: rgba(137,180,250,0.18);
  --preset-tint: linear-gradient(135deg, rgba(137,180,250,0.10), transparent 65%);
  --preset-glow: rgba(137,180,250,0.18);
}
.dashboard-card.preset-card.manager-preset {
  --preset-accent: #cba6f7;
  --preset-tile-bg: rgba(203,166,247,0.18);
  --preset-tint: linear-gradient(135deg, rgba(203,166,247,0.10), transparent 65%);
  --preset-glow: rgba(203,166,247,0.18);
}
.dashboard-card.preset-card.product-preset {
  --preset-accent: #f9e2af;
  --preset-tile-bg: rgba(249,226,175,0.18);
  --preset-tint: linear-gradient(135deg, rgba(249,226,175,0.10), transparent 65%);
  --preset-glow: rgba(249,226,175,0.18);
}

/* Manager dashboard rows */
#mgrBreakdownTable tbody tr[data-mgr-drill] { cursor: pointer; }
#mgrBreakdownTable tbody tr[data-mgr-drill]:hover { background: var(--bg-hover); }
#mgrBreakdownTable tr.mgr-unassigned td,
#mgrBdSpecial tr.mgr-unassigned td { opacity: 0.65; font-style: italic; }
#mgrBdSpecial tr.mgr-others td { background: rgba(147,153,178,0.06); font-style: italic; }
#mgrDrillTable tr[data-mgr-drill-ch] { cursor: pointer; }
#mgrDrillTable tr[data-mgr-drill-ch]:hover { background: var(--bg-hover); }
#mgrDrillTable tr.mgr-current td { background: rgba(203,166,247,0.12); font-weight: 600; }

/* Achievement rate badges in matrix cells (reuse .ch-mx-pct base) */
.ch-mx-cell .ch-mx-pct.rate-up { color: var(--green, #a6e3a1); }
.ch-mx-cell .ch-mx-pct.rate-down { color: var(--red, #f38ba8); }

@media (max-width: 540px) {
  .preset-dashboards { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .dashboard-card.preset-card { padding: 12px; }
}
.badge.badge-orange {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(250,179,135,0.18);
  color: var(--orange);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 4px;
}

/* Sales Dashboard root view */
#salesDashboardView {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg-deep);
}

.sd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 12px;
  flex-wrap: wrap;
}
.sd-header-left { display: flex; align-items: center; gap: 12px; }
.sd-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-header-extras {
  flex-basis: 100%;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.sd-search-inline { display: inline-flex; align-items: center; gap: 4px; }
.sd-search-input { width: 220px; max-width: 100%; }
.sd-search-btn { padding: 4px 8px; }
.form-input.form-input-sm,
.form-select.form-input-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.sd-header-collapse { display: inline-flex; padding: 4px 8px; }
.sd-header-collapse svg { transition: transform 0.18s ease; }
.sd-header.sd-collapsed .sd-header-collapse svg { transform: rotate(-90deg); }
.sd-header.sd-collapsed .sd-header-right { display: none; }
.sd-header.sd-collapsed .sd-header-extras { display: none; }
.sd-title { display: flex; align-items: center; gap: 8px; }
.sd-title h3 { margin: 0; font-size: 16px; }
.sd-title svg { color: var(--orange); width: 18px; height: 18px; }
.sd-active-filters { display: flex; flex-wrap: wrap; gap: 4px; max-width: 60vw; }
.sd-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text);
}
.sd-chip button {
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; padding: 0 4px; font-size: 13px; line-height: 1;
  border-radius: 50%;
}
.sd-chip button:hover { color: var(--red); background: var(--hover); }

/* Body layout */
.sd-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.sd-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 14px;
  transition: width 0.18s ease, padding 0.18s ease, opacity 0.18s ease;
}
.sd-sidebar.collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  border-right: none;
}
/* PC에서는 사이드바 토글 버튼을 숨기고 사이드바를 항상 펼친 상태로 고정 */
@media (min-width: 769px) {
  #sdSidebarToggle { display: none !important; }
  .sd-sidebar.collapsed { width: 260px; padding: 14px 10px; opacity: 1; overflow-y: auto; border-right: 1px solid var(--border); }
}
.sd-main {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}

/* Filter groups */
.sd-filter-group { display: flex; flex-direction: column; gap: 6px; }
.sd-filter-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sd-mgr-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.sd-mgr-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 8px;
  margin-bottom: -1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color var(--transition), border-color var(--transition);
}
.sd-mgr-tab:hover { color: var(--text); }
.sd-mgr-tab.is-active {
  color: var(--text-bright);
  border-bottom-color: var(--orange);
}
.sd-mgr-tab-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.sd-date-row {
  display: flex; align-items: center; gap: 6px;
}
.sd-date-row .form-input { flex: 1; min-width: 0; }
.sd-quick-range { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: background .12s;
}
.chip:hover { background: var(--hover); border-color: var(--orange); }

.sd-segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  width: 100%;
}
.sd-seg {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.sd-seg + .sd-seg { border-left: 1px solid var(--border); }
.sd-seg.active { background: var(--orange); color: #1e1e2e; font-weight: 700; }
.sd-seg.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.sd-seg:hover:not(.active):not(.disabled) { background: var(--hover); }

/* Month range slider — dual-handle, shared by YoY & sales-dashboard filters */
.month-range-slider {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 30px;
  margin: 0 6px;
  --slider-accent: #89b4fa;
}
.month-range-slider-track {
  position: absolute;
  top: 12px;
  left: 8px;
  right: 8px;
  height: 4px;
  background: #313244;
  border-radius: 2px;
}
.month-range-slider-range {
  position: absolute;
  top: 12px;
  height: 4px;
  background: var(--slider-accent);
  border-radius: 2px;
  pointer-events: none;
  left: calc(8px + var(--from-pct, 0) * (100% - 16px));
  width: calc((var(--to-pct, 1) - var(--from-pct, 0)) * (100% - 16px));
}
.month-range-slider input[type=range] {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.month-range-slider input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--slider-accent);
  border: 2px solid #1e1e2e;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.month-range-slider input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; }
.month-range-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  background: var(--slider-accent);
  border: 2px solid #1e1e2e;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.month-range-slider input[type=range]::-moz-range-track { background: none; border: 0; }
.month-range-slider-ticks {
  position: absolute;
  top: 20px;
  left: 4px;
  right: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #6c7086;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.month-range-slider-ticks span { width: 1ch; text-align: center; }
.month-range-slider-label { display: none; }
.month-range-slider.is-active { --slider-accent: #f9e2af; }

.sd-segmented-sm { width: auto; }
.sd-segmented-sm .sd-seg { padding: 2px 8px; font-size: 11px; }

.sd-subtabs { margin: 12px 0 8px; }
.sd-subtabs .sd-segmented { width: auto; min-width: 220px; }
.sd-subtabs .sd-seg { padding: 6px 14px; font-size: 12px; font-weight: 500; white-space: nowrap; }

/* 카테고리 × 채널 매출 매트릭스 */
.sd-matrix { width: 100%; overflow-x: auto; }
.sd-matrix-cards { display: none; }
.sd-matrix-table { border-collapse: collapse; font-size: 11px; width: 100%; }
.sd-matrix-table th, .sd-matrix-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: right;
  white-space: nowrap;
}
.sd-matrix-table thead th { background: var(--surface); color: var(--text); font-weight: 500; text-align: center; }
.sd-matrix-table tbody th { background: var(--surface); color: var(--text); text-align: left; font-weight: 500; }
.sd-matrix-table .sd-matrix-total { background: rgba(250,179,135,0.12); font-weight: 600; }
.sd-matrix-table .sd-matrix-total-row td,
.sd-matrix-table .sd-matrix-total-row th { background: rgba(250,179,135,0.12); font-weight: 600; }

/* 헤더 팝오버 (기간/검색/집계) */
.sd-popover-host { position: relative; display: inline-block; }
.sd-pop-btn.active { background: var(--hover); color: var(--orange); }
.sd-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 1000;
}
.sd-popover.show { display: block; }
/* Hover-reveal: opening the date popover by hovering the calendar button.
   The ::before bridge bridges the 6px gap between button and popover so the
   :hover state on the host stays alive while the cursor crosses it. */
.sd-popover-host:hover .sd-popover,
.sd-popover-host:focus-within .sd-popover { display: block; }
.sd-popover::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.sd-popover-wide { min-width: 380px; }
.sd-popover .sd-date-row { display: flex; gap: 6px; align-items: center; }
.sd-popover .sd-date-row .form-input { flex: 1; min-width: 0; }
.sd-popover .sd-quick-range { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.sd-popover .sd-date-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.sd-popover .sd-date-actions .btn { display: inline-flex; align-items: center; gap: 4px; }
.sd-popover .sd-date-actions .btn i { width: 14px; height: 14px; }
.sd-pop-btn.sd-pop-dirty {
  position: relative;
  color: var(--orange);
}
.sd-pop-btn.sd-pop-dirty::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* 클릭복사 셀 + 토스트 */
td.sd-copyable { cursor: copy; }
td.sd-copyable:hover { background: rgba(250,179,135,0.10); }
.sd-copy-toast {
  position: fixed;
  z-index: 9999;
  padding: 4px 10px;
  background: rgba(250,179,135,0.95);
  color: #1e1e2e;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.sd-copy-toast.show { opacity: 1; }

/* 매트릭스: 균등 너비 + 말줄임 */
.sd-matrix-table { table-layout: fixed; }
.sd-matrix-table th, .sd-matrix-table td { overflow: hidden; text-overflow: ellipsis; }
.sd-matrix-th-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* 인포 아이콘 (헤더에 마우스오버 툴팁용) */
.sd-info-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--text-muted, #9399b2);
  cursor: help;
}
.sd-info-icon svg { width: 12px; height: 12px; }
.sd-info-icon:hover { color: var(--orange, #fab387); }

/* 성장률 색상 */
.sd-growth-pos { color: #a6e3a1; font-weight: 600; }
.sd-growth-neg { color: #f38ba8; font-weight: 600; }
#sdGrowthTable { width: 100%; font-size: 11px; }
#sdGrowthTable th { color: var(--text-muted); font-weight: 500; padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
#sdGrowthTable td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
#sdGrowthTable .text-right { text-align: right; }

.sd-checkbox {
  display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px;
  color: var(--text);
  margin-top: 6px;
}

/* Multi-select filter */
.sd-multi {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px;
}
.sd-multi-search { width: 100%; }
.sd-multi-clear {
  border: none;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.sd-multi-list {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.sd-multi-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.sd-multi-item:hover { background: var(--hover); }
.sd-multi-item.is-selected { background: rgba(250,179,135,0.10); }
/* 교차필터로 들어온 항목: 좌측에 가는 강조 막대 + "교차" 배지 */
.sd-multi-item.is-spotlight { box-shadow: inset 3px 0 0 var(--orange); background: rgba(250,179,135,0.16); }
.sd-multi-spot-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  letter-spacing: 0.02em;
}
/* 헤더 검색어와 라벨이 일치하는 항목: 좌측에 작은 도트로만 표시 (강제 체크 X) */
.sd-multi-item.is-search-match:not(.is-selected) .sd-multi-text {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.sd-multi-item input { flex-shrink: 0; accent-color: var(--orange); }
.sd-multi-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.sd-multi-more { padding: 4px 4px 0; }

/* KPI strip */
.sd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.sd-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 72px;
}
.sd-kpi-primary {
  background: linear-gradient(135deg, rgba(250,179,135,0.18), rgba(243,139,168,0.05));
  border-color: rgba(250,179,135,0.35);
}
.sd-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sd-kpi-value { font-size: 20px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.sd-kpi-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sd-kpi-delta {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 11px;
}
.sd-kpi-delta.up { background: var(--green-dim); color: var(--green); }
.sd-kpi-delta.down { background: var(--red-dim); color: var(--red); }
.sd-kpi-loading { justify-content: center; align-items: center; }

/* Charts grid */
.sd-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.sd-card-wide { grid-column: 1 / -1; }
.sd-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.sd-card-head h4 {
  margin: 0; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.sd-card-head svg { width: 14px; height: 14px; color: var(--orange); }
.sd-card-actions { display: flex; align-items: center; gap: 6px; }
.sd-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px 12px; flex-wrap: wrap; }
.sd-pager .btn[disabled] { opacity: 0.4; pointer-events: none; }
.sd-pager-info { font-size: 12px; color: var(--muted); padding: 0 4px; min-width: 64px; text-align: center; }
.sd-pager-footer {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.sd-pager-footer .btn[disabled] { opacity: 0.4; pointer-events: none; }
/* Horizontal-bar wrappers that grow to fit all items (overrides chart max-height cap) */
.sd-chart-wrap.sd-bar-grow { min-height: 220px; }
.sd-chart-wrap.sd-bar-grow canvas { max-height: none !important; }
.sd-chart-wrap {
  padding: 8px 12px 10px;
  position: relative;
  min-height: 240px;
  flex: 1;
}
.sd-chart-wrap canvas { max-height: 280px; }
.sd-card-wide .sd-chart-wrap { min-height: 280px; }
.sd-card-wide .sd-chart-wrap canvas { max-height: 280px; }
.sd-scroll {
  overflow-y: auto;
  max-height: 360px;
  padding: 0;
}

/* Tables (top products, low stock, details) */
.sd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sd-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.sd-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.sd-table tbody tr {
  cursor: pointer;
  transition: background .1s;
}
.sd-table tbody tr:hover { background: var(--hover); }
.sd-table .text-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-table tfoot.sd-tfoot-total td,
.sd-table tfoot tr.sd-tfoot-total td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--surface-2);
  border-top: 2px solid var(--border-strong, var(--border));
  box-shadow: 0 -1px 0 var(--border) inset;
  font-weight: 700;
  color: var(--text-bright);
  padding-top: 10px; padding-bottom: 10px;
}
.sd-table tfoot tr.sd-tfoot-total td.text-muted { color: var(--text-muted); font-weight: 500; }
.sd-rank {
  width: 32px; text-align: center; color: var(--orange); font-weight: 700;
}
.sd-prod-name { color: var(--text-bright); font-weight: 500; }
.sd-prod-meta { font-family: var(--font-mono); }
.sd-sku-copy {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 -3px;
  transition: background 0.12s, color 0.12s;
}
.sd-sku-copy:hover { background: var(--hover); color: var(--orange); }
.sd-prod-mgr {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--orange);
  background: rgba(250, 179, 135, 0.10);
  border: 1px solid rgba(250, 179, 135, 0.28);
  border-radius: 10px;
  vertical-align: 1px;
  white-space: nowrap;
}
.sd-stock-low { color: var(--red); font-weight: 600; }

.sd-table-stock tr.sd-sev-high td:first-child { border-left: 3px solid var(--red); }
.sd-table-stock tr.sd-sev-mid td:first-child { border-left: 3px solid var(--orange); }
.sd-table-stock tr.sd-sev-low td:first-child { border-left: 3px solid var(--yellow); }

.sd-table-details td { font-family: var(--font-mono); font-size: 11px; }
.sd-table-details td:nth-child(4),
.sd-table-details td:nth-child(2) { font-family: var(--font-ui); }

/* 상세 거래내역: 세로 길이 제한 해제 — 페이지 스크롤로 보도록 */
.sd-chart-wrap.sd-scroll:has(.sd-table-details) {
  max-height: none;
  overflow-y: visible;
}

/* ── YoY 로딩 스켈레톤 ─────────────────────────────── */
@keyframes yoy-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.yoy-skeleton-tile {
  height: 78px;
  background: linear-gradient(90deg,
    rgba(148,163,184,0.06) 25%,
    rgba(148,163,184,0.14) 50%,
    rgba(148,163,184,0.06) 75%);
  background-size: 200% 100%;
  animation: yoy-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ── YoY 드릴다운 스켈레톤 ─────────────────────────── */
.yoy-drill-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.yoy-drill-skeleton-row {
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(148,163,184,0.05) 25%,
    rgba(148,163,184,0.12) 50%,
    rgba(148,163,184,0.05) 75%);
  background-size: 200% 100%;
  animation: yoy-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ── YoY 에러 상태 ───────────────────────────────────── */
.yoy-error-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.yoy-error-msg { color: var(--red, #f38ba8); font-size: 12.5px; }
.yoy-error-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.yoy-error-retry:hover { border-color: var(--orange, #fab387); color: var(--orange, #fab387); }
.yoy-error-retry i { width: 14px; height: 14px; }

/* ── YoY 연간 목표 추적 패널 ───────────────────────── */
.yoy-annual-card { padding: 0; }
.yoy-annual-card > .yoy-card-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  flex-wrap: nowrap;
  min-width: 0;
}
.yoy-annual-card > .yoy-card-head strong { flex: 0 0 auto; }
.yoy-annual-card > .yoy-card-head #yoyAnnualMeta {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yoy-scope-note {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  background: rgba(250, 179, 135, 0.12);
  color: #fab387;
  font-size: 11px;
  cursor: help;
  vertical-align: middle;
}
.yoy-scope-note i { width: 11px; height: 11px; }
.yoy-scope-note.yoy-scope-note-range {
  background: rgba(137, 180, 250, 0.12);
  color: #89b4fa;
}
.yoy-annual-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.yoy-annual-bdays {
  position: relative;
  height: 6px;
  background: var(--surface-1, rgba(255,255,255,0.04));
  border-radius: 3px;
  overflow: hidden;
}
.yoy-annual-bdays-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue, #89b4fa), var(--green, #a6e3a1));
  transition: width 200ms ease;
}
.yoy-annual-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.yoy-annual-kpi {
  background: var(--card-bg, var(--surface, #1e1e2e));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.yoy-annual-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.yoy-annual-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; line-height: 1.15; }
.yoy-annual-kpi-sub { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.yoy-annual-kpi-sub strong { font-weight: 600; }
.yoy-annual-kpi-primary { border-left: 3px solid var(--blue, #89b4fa); }
.yoy-annual-kpi-accent .yoy-annual-kpi-value { color: var(--green, #a6e3a1); }

.yoy-annual-table { margin-top: 2px; }
.yoy-annual-table tbody tr { cursor: default; }
.yoy-annual-table tbody tr:hover { background: var(--hover); }
.yoy-annual-table tbody td { padding: 5px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.yoy-annual-half td {
  font-weight: 600;
  background: rgba(137, 180, 250, 0.08);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.yoy-annual-current td { background: rgba(250, 179, 135, 0.08); }
.yoy-rate-up { color: var(--green, #a6e3a1); font-weight: 600; }
.yoy-rate-mid { color: var(--yellow, #f9e2af); font-weight: 600; }
.yoy-rate-down { color: var(--red, #f38ba8); font-weight: 600; }
@media (max-width: 900px) {
  .yoy-annual-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .yoy-annual-kpis { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 1100px) {
  .sd-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .sd-charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Stays a row layout; sidebar slides in over the main pane on demand. */
  .sd-body { flex-direction: row; position: relative; }
  .sd-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: 86vw;
    max-width: 340px;
    max-height: none;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.45);
    padding: 16px 14px;
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sd-sidebar.open { transform: translateX(0); }
  /* Desktop "collapsed" persisted state must not bleed into mobile drawer. */
  .sd-sidebar.collapsed:not(.open) { transform: translateX(-100%); width: 86vw; padding: 16px 14px; }
  .sd-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 70;
  }
  .sd-sidebar-backdrop.show { display: block; }
  .sd-main { padding: 12px; gap: 12px; }
  .sd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Collapsible header: show toggle, allow .sd-collapsed to hide controls.
     .sd-header-hidden slides the bar up off-screen on scroll-down — content
     stays intact, only the bar's position translates. */
  .sd-header {
    flex-wrap: wrap; padding: 8px 12px;
    transition: transform 0.22s ease;
    will-change: transform;
  }
  .sd-header.sd-header-hidden {
    transform: translateY(-100%);
  }
  .sd-header-collapse { display: inline-flex; margin-left: auto; }
  .sd-header.sd-collapsed .sd-header-right { display: none; }
  .sd-header.sd-collapsed .sd-header-extras { display: none; }
  .sd-header-right { flex-basis: 100%; gap: 6px; }
  .sd-header-extras { gap: 8px; padding-top: 6px; }
  .sd-search-input { width: 100%; flex: 1; min-width: 140px; }
  .sd-search-inline { flex: 1; min-width: 160px; }

  /* KPIs go single-column once finger width dictates layout. */
  .sd-kpi-strip { grid-template-columns: 1fr; gap: 8px; }
  .sd-kpi-card { min-height: 70px; padding: 10px 12px; }

  /* Subtab pills span the row, full-width buttons. */
  .sd-subtabs { margin: 8px 0 6px; }
  .sd-subtabs .sd-segmented { width: 100%; min-width: 0; }
  .sd-subtabs .sd-seg { padding: 10px 6px; font-size: 12px; min-height: 40px; }

  /* Header segmented (일/주/월, 매출/수량) — bigger taps. */
  .sd-segmented-sm .sd-seg { padding: 8px 12px; font-size: 12px; min-height: 36px; }

  /* Pager + card-action buttons must clear 44px touch targets. */
  .sd-pager .btn,
  .sd-pager-footer .btn,
  .sd-card-actions .btn,
  .sd-card-actions .btn-xs { min-height: 44px; min-width: 44px; padding: 10px 14px; font-size: 13px; }
  .sd-card-actions { flex-wrap: wrap; gap: 8px; }
  /* Bottom pager only on mobile — saves a scroll-back-up after reading rows. */
  .sd-pager-footer { display: flex; }
  .sd-card-head { flex-wrap: wrap; padding: 10px 12px 6px; gap: 8px; }
  .sd-card-head h4 { font-size: 12px; }

  /* Chart cards breathe a bit less so 2 cards fit a typical phone screen. */
  .sd-chart-wrap { padding: 8px 10px 10px; min-height: 200px; }
  .sd-chart-wrap canvas { max-height: 240px; }
  .sd-card-wide .sd-chart-wrap { min-height: 240px; }
  .sd-card-wide .sd-chart-wrap canvas { max-height: 260px; }

  /* sd-scroll wraps tables (TOP 상품, 거래내역 12-col) — must scroll horizontally. */
  .sd-scroll {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 55vh;
  }
  .sd-table { font-size: 11px; }
  .sd-table thead th, .sd-table tbody td { padding: 8px 10px; white-space: nowrap; }
  /* 거래내역(12컬럼)만 가로 스크롤 강제 — 4~5컬럼 표(성장률, TOP 상품 등)는 자연 폭으로 viewport에 맞춤. */
  .sd-table-details { min-width: 720px; }
  .sd-table-details td { font-size: 10.5px; }

  /* 카테고리 × 채널 매트릭스: 모바일에선 표 대신 카드 스택으로 전환.
     카테고리 1개 = 카드 1개, 채널은 가로 막대로 정렬. 좌우 스크롤 없음. */
  .sd-matrix { overflow: visible; border: none; }
  .sd-matrix-table { display: none; }
  .sd-matrix-cards { display: flex; flex-direction: column; gap: 10px; }
  .sd-matrix-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--surface);
  }
  .sd-matrix-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .sd-matrix-card-head .cat-name { font-size: 13px; font-weight: 600; color: var(--text); }
  .sd-matrix-card-head .cat-total { font-size: 13px; font-weight: 600; color: var(--text); }
  .sd-matrix-card-head .cat-share { font-size: 11px; color: var(--muted); margin-left: 4px; font-weight: 400; }
  .sd-matrix-ch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .sd-matrix-ch-list li { display: flex; flex-direction: column; gap: 3px; }
  .sd-matrix-ch-list .ch-row1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
  .sd-matrix-ch-list .ch-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-matrix-ch-list .ch-amt { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .sd-matrix-ch-list .ch-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
  .sd-matrix-ch-list .ch-bar-fill { height: 100%; background: rgba(250,179,135,0.85); border-radius: 3px; }
  .sd-matrix-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
  .sd-matrix-more {
    margin-top: 8px;
    padding: 6px 10px;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    min-height: 36px;
  }
  .sd-matrix-more:active { background: var(--surface); }

  /* 기간/검색 popover → 폰에서는 풀폭 bottom-sheet (오른쪽 잘림 방지). */
  .sd-popover {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.55);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
  }
  .sd-popover-wide { min-width: 0; }
  .sd-popover .sd-date-row { flex-wrap: wrap; gap: 8px; }
  .sd-popover .sd-date-row .form-input { font-size: 16px; padding: 10px 12px; flex: 1 1 140px; }
  .sd-popover .sd-quick-range { gap: 8px; margin-top: 8px; }
  .sd-popover .chip { padding: 8px 14px; font-size: 13px; min-height: 36px; border-radius: 18px; }
  .sd-popover .form-input { font-size: 16px; }

  /* 필터 사이드바: 다중선택 항목 터치 친화적으로 키움. */
  .sd-sidebar { padding: 18px 14px; gap: 16px; }
  .sd-filter-label { font-size: 12px; }
  .sd-multi { max-height: none; padding: 8px; }
  .sd-multi-list { max-height: 240px; }
  .sd-multi-search input,
  .sd-multi input[type="text"],
  .sd-multi input[type="search"] { font-size: 16px; padding: 10px 12px; }
  .sd-multi-item { padding: 10px 8px; font-size: 13px; min-height: 40px; gap: 10px; }
  .sd-multi-item input[type="checkbox"] { width: 18px; height: 18px; }
  .sd-multi-clear { padding: 8px 10px; font-size: 12px; }
  .sd-multi-more .btn { min-height: 36px; padding: 8px 12px; }
}

/* ── Sidebar collapse: header actions + floating expand handle ── */
.sidebar-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sidebar-expand {
  position: fixed;
  top: calc(var(--topbar-height) + 12px);
  left: 8px;
  z-index: 60;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: color .12s, background .12s;
}
.sidebar-expand:hover { color: var(--orange); background: var(--bg-deep); }
.sidebar-expand i, .sidebar-expand svg { width: 18px; height: 18px; }

/* ── Sales dashboard: spotlight (visual cross-filter) ── */
.sd-spotlight-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 139, 168, 0.12);
  border: 1px solid rgba(243, 139, 168, 0.35);
  color: var(--text-bright);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sd-spotlight-btn:hover {
  background: rgba(243, 139, 168, 0.22);
  border-color: rgba(243, 139, 168, 0.55);
}
.sd-spotlight-btn i, .sd-spotlight-btn svg {
  width: 14px; height: 14px; color: var(--orange);
}
.sd-spotlight-btn .sd-spotlight-x,
.sd-spotlight-btn .sd-spotlight-x svg {
  width: 12px; height: 12px; color: var(--text-muted); margin-left: 2px;
}
.sd-spotlight-btn:hover .sd-spotlight-x,
.sd-spotlight-btn:hover .sd-spotlight-x svg {
  color: var(--text-bright);
}
.sd-spotlight-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-table tr.is-dim { opacity: 0.30; transition: opacity .15s; }
.sd-table tr.is-spot {
  background: rgba(250, 179, 135, 0.08);
  box-shadow: inset 3px 0 0 var(--orange);
}
.sd-table tr.is-spot:hover { background: rgba(250, 179, 135, 0.14); }

/* ── Sales dashboard: multi-select layout (clear-wrap + more) ── */
.sd-multi-clear-wrap { min-height: 0; }
.sd-multi-clear-wrap:empty { display: none; }
.sd-multi-more:empty { display: none; }

/* ─────────────────────────────────────────────────────────────
   YoY 비교 대시보드
   ───────────────────────────────────────────────────────────── */
#yoyDashboardView,
#channelDashboardView,
#managerDashboardView,
#productDashboardView,
#stockDashboardView,
#discountDashboardView {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.yoy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.yoy-header-left { display: flex; align-items: center; gap: 12px; }
.yoy-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.yoy-header-right .sd-segmented { width: auto; flex-wrap: nowrap; height: 30px; }
.yoy-header-right .sd-seg { flex: 0 0 auto; white-space: nowrap; padding: 0 12px; font-size: 12px; display: inline-flex; align-items: center; }
.yoy-header-right .btn-sm { height: 30px; padding: 0 12px; }
.yoy-header-right .btn-sm svg { width: 14px; height: 14px; }
.yoy-title { display: flex; align-items: center; gap: 8px; }
.yoy-title h3 { margin: 0; font-size: 16px; font-weight: 600; }
.yoy-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yoy-body > * { flex-shrink: 0; }
.yoy-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.yoy-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yoy-kpi-clickable { cursor: pointer; transition: border-color .12s, background .12s; }
.yoy-kpi-clickable:hover { border-color: var(--orange); background: var(--hover); }
.yoy-kpi-label { font-size: 11px; color: var(--muted); }
.yoy-kpi-value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.yoy-kpi-sub { font-size: 11px; color: var(--muted); }
.yoy-kpi-growth {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.yoy-kpi-growth.up   { color: var(--green); }
.yoy-kpi-growth.down { color: var(--red); }
.yoy-kpi-growth.flat { color: var(--muted); }
.yoy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.yoy-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.yoy-card-head strong { font-size: 14px; font-weight: 600; }

/* Chart card head with grain segment on the right */
.yoy-chart-head { align-items: center; }
.yoy-chart-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yoy-grain-seg { flex: 0 0 auto; }

/* Chart wrap heights — desktop defaults, tightened on small screens via media query */
.yoy-main-chart-wrap { height: 300px; }
.yoy-cum-chart-wrap  { height: 240px; }
#yoyDataTable .up,
#yoyBreakdownTable .up,
.yoy-drill-table .up,
.sd-table .up   { color: var(--green); font-weight: 600; }
#yoyDataTable .down,
#yoyBreakdownTable .down,
.yoy-drill-table .down,
.sd-table .down { color: var(--red); font-weight: 600; }
#yoyDataTable .flat,
#yoyBreakdownTable .flat { color: var(--muted); }

.yoy-kpi-growth-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.yoy-kpi-growth-row .yoy-kpi-growth { margin-top: 0; }

.yoy-row-partial td {
  background: rgba(250,179,135,0.08);
  border-top: 1px dashed rgba(250,179,135,0.35);
  border-bottom: 1px dashed rgba(250,179,135,0.35);
}

/* Drilldown 행 성장/역성장 색 구분 — 좌측 강조선 + 살짝 깔리는 배경 */
.yoy-drill-table tr.yoy-row-up td:first-child {
  box-shadow: inset 3px 0 0 var(--green);
}
.yoy-drill-table tr.yoy-row-down td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}
.yoy-drill-table tr.yoy-row-up:hover td   { background: rgba(166, 227, 161, 0.06); }
.yoy-drill-table tr.yoy-row-down:hover td { background: rgba(243, 139, 168, 0.06); }

/* Breakdown card head — desktop: title left, controls right; mobile: stacked, full-width segs */
.yoy-bd-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Standalone .yoy-bd-head used as card header inside .sd-card — mimic .sd-card-head */
.sd-card > .yoy-bd-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.yoy-bd-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.yoy-bd-title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.yoy-bd-title h4 svg,
.yoy-bd-title h4 [data-lucide] {
  width: 14px; height: 14px;
  color: var(--orange);
  flex: 0 0 auto;
}
.yoy-bd-controls {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.yoy-bd-controls .yoy-bd-seg { flex: 0 0 auto; }

@media (max-width: 720px) {
  .yoy-bd-head { flex-direction: column; align-items: stretch; }
  .yoy-bd-controls {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .yoy-bd-controls .yoy-bd-seg {
    width: 100%;
    display: flex;
  }
  .yoy-bd-controls .yoy-bd-seg .sd-seg {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 4px;
    font-size: 12px;
    min-height: 38px;
    white-space: nowrap;
  }
}
.yoy-bd-others td { background: rgba(148,163,184,0.05); font-style: italic; }
.yoy-bd-drillable { cursor: pointer; transition: background 120ms; }
.yoy-bd-drillable:hover td { background: rgba(250,179,135,0.10); }
.yoy-bd-chev {
  width: 12px; height: 12px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.45;
  transition: opacity 120ms, transform 120ms;
}
.yoy-bd-drillable:hover .yoy-bd-chev { opacity: 1; transform: translateX(2px); }
.yoy-drill-modal { width: min(960px, 95vw); max-height: 88vh; }
/* Mobile: drill modal goes full-screen (overrides .yoy-drill-modal width above
   which would otherwise beat the generic .modal mobile rule by source order). */
@media (max-width: 640px) {
  .yoy-drill-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .yoy-drill-modal .modal-header { padding: 12px 14px; }
  .yoy-drill-modal .modal-header h3 { font-size: 13px; }
  .yoy-drill-modal .modal-body { padding: 12px 14px 14px; }
  /* Manager drill modal: keep KPI cards single-column on phone (inline 4-col
     override was removed; respect responsive yoy-kpi-grid breakpoints). */
  #mgrDrillBody .yoy-kpi-grid { grid-template-columns: 1fr; gap: 8px; }
  #mgrDrillBody .yoy-kpi { padding: 8px 10px; }
  /* Manager drill detail card / table — let wide tables scroll horizontally */
  #mgrDrillBody .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #mgrDrillBody .sd-table { min-width: 560px; }
}
.yoy-drill-summary {
  padding: 12px 14px;
  background: var(--hover);
  border-radius: 6px;
  margin-bottom: 12px;
}
.yoy-drill-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.yoy-drill-summary-row .up   { color: #16a34a; font-weight: 600; }
.yoy-drill-summary-row .down { color: #dc2626; font-weight: 600; }
.yoy-drill-summary-row .flat { color: var(--muted); }
.yoy-drill-table { font-size: 12.5px; }
.yoy-drill-main {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  display: inline;
}
.yoy-drill-desc {
  margin-top: 3px;
  line-height: 1.3;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.yoy-bd-section { margin-top: 14px; }
.yoy-bd-section-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.yoy-bd-section-head i { width: 14px; height: 14px; }
.yoy-bd-special { margin-top: 4px; }
.yoy-bd-discontinued td { background: rgba(239,68,68,0.04); opacity: 0.85; }

@media (max-width: 1100px) {
  .yoy-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .yoy-main-chart-wrap { height: 320px; }
  .yoy-cum-chart-wrap  { height: 280px; }
}

/* Tablet — header wraps, chart head can stack grain segment */
@media (max-width: 760px) {
  .yoy-chart-head { align-items: stretch; }
  .yoy-grain-seg  { width: 100%; display: flex; }
  .yoy-grain-seg .sd-seg { flex: 1 1 0; text-align: center; min-height: 38px; padding: 9px 6px; }
  .yoy-main-chart-wrap { height: 280px; }
  .yoy-cum-chart-wrap  { height: 240px; }
  .yoy-data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Mobile — single column, finger-sized targets, tighter spacing */
@media (max-width: 640px) {
  .yoy-header { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .yoy-title  { flex-wrap: wrap; gap: 6px; }
  .yoy-title h3 { font-size: 15px; }
  .yoy-body { padding: 12px; gap: 12px; }

  .yoy-kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .yoy-kpi { padding: 10px 12px; }
  .yoy-kpi-value { font-size: 18px; }
  .yoy-kpi-growth-row { font-size: 11px; gap: 8px; }

  .yoy-card { padding: 10px 12px; }
  .yoy-card-head { margin-bottom: 8px; }
  .yoy-card-head strong { font-size: 13px; }

  .yoy-main-chart-wrap { height: 260px; }
  .yoy-cum-chart-wrap  { height: 220px; }

  /* Tables: horizontal scroll on narrow viewports — sd-scroll already exists */
  #yoyDataTable, #yoyBreakdownTable { font-size: 11.5px; }
  #yoyDataTable thead th, #yoyDataTable tbody td,
  #yoyBreakdownTable thead th, #yoyBreakdownTable tbody td { padding: 7px 8px; white-space: nowrap; }

  /* Annual card mobile tweaks (KPI sub line stays visible, table denser) */
  .yoy-annual-body { gap: 10px; padding: 10px 12px 12px; }
  .yoy-annual-kpi { padding: 10px 12px; }
  .yoy-annual-kpi-value { font-size: 18px; }
  .yoy-annual-table tbody td { padding: 6px 8px; font-size: 11.5px; }
  .yoy-annual-table thead th { padding: 6px 8px; font-size: 11px; }

  /* Apple HIG 44px tap targets for segmented controls */
  .yoy-grain-seg .sd-seg,
  .yoy-bd-controls .yoy-bd-seg .sd-seg {
    min-height: 44px;
    padding: 11px 6px;
  }
}

/* Mobile horizontal-scroll affordance — fade gradients reveal hidden columns */
@media (max-width: 760px) {
  .yoy-card .sd-scroll,
  .yoy-data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface) 20%, rgba(30,30,46,0) 60%) 0 0 / 24px 100% no-repeat,
      linear-gradient(to left, var(--surface) 20%, rgba(30,30,46,0) 60%) 100% 0 / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0)) 0 0 / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0)) 100% 0 / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Very narrow phones — prevent annual table overflow, denser meta line */
@media (max-width: 480px) {
  .yoy-annual-card > .yoy-card-head {
    flex-wrap: wrap;
    gap: 4px;
  }
  .yoy-annual-card > .yoy-card-head #yoyAnnualMeta {
    flex: 1 1 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.4;
  }
  /* Annual table: horizontal scroll on the wrapper (keeps thead/tbody aligned) */
  .yoy-annual-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .yoy-annual-table { min-width: 360px; }
  .yoy-annual-table tbody td, .yoy-annual-table thead th { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════
   채널 대시보드 (Channel Dashboard)
   ═══════════════════════════════════════════════════════════════ */
/* Channel timeseries chart */
.ch-ts-wrap {
  position: relative;
  height: 280px;
  width: 100%;
  padding: 10px 14px 14px;
  box-sizing: border-box;
}
.ch-ts-wrap > canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 700px) { .ch-ts-wrap { height: 240px; } }

/* Channel drilldown timeseries */
.ch-drill-ts { margin: 12px 0 16px; }
.ch-drill-ts-head {
  padding: 0 2px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ch-drill-ts-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ch-ts-mode-btn {
  background: transparent;
  color: var(--text-muted, #a6adc8);
  border: 0;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1.4;
}
.ch-ts-mode-btn + .ch-ts-mode-btn { border-left: 1px solid var(--border); }
.ch-ts-mode-btn:hover { background: rgba(250, 179, 135, 0.08); }
.ch-ts-mode-btn.is-active {
  background: rgba(250, 179, 135, 0.18);
  color: var(--text, #cdd6f4);
  font-weight: 600;
}
.ch-drill-ts-wrap { position: relative; height: 240px; width: 100%; }
.ch-drill-ts-wrap > canvas { width: 100% !important; height: 100% !important; }

.yoy-drill-childdim-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0 6px;
}

/* Cross-filter: clickable category rows + active filter chip */
tr.ch-drill-row-clickable { cursor: pointer; }
tr.ch-drill-row-clickable:hover td { background: rgba(250, 179, 135, 0.07); }
tr.ch-drill-row-clickable .yoy-bd-chev {
  width: 12px; height: 12px;
  color: var(--muted);
  vertical-align: middle;
  margin-left: 2px;
  opacity: 0.6;
}
tr.ch-drill-row-clickable:hover .yoy-bd-chev { color: var(--orange); opacity: 1; }
tr.ch-drill-row-active td { background: rgba(250, 179, 135, 0.14); font-weight: 600; }

.pr-drill-product-info {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(137, 180, 250, 0.04);
}
.pr-drill-pi-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text); margin-bottom: 8px;
}
.pr-drill-pi-head [data-lucide] { width: 14px; height: 14px; color: var(--blue, #89b4fa); }
.pr-drill-pi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 14px;
}
.pr-drill-pi-cell {
  display: flex; flex-direction: column;
  min-width: 0;
}
.pr-drill-pi-val {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-drill-pi-catpath { margin-top: 6px; }
@media (max-width: 640px) {
  .pr-drill-pi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ch-drill-filter-chip + .ch-drill-filter-chip { margin-left: 6px; }
.ch-drill-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 6px 4px 10px;
  background: rgba(250, 179, 135, 0.12);
  border: 1px solid rgba(250, 179, 135, 0.4);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
}
.ch-drill-filter-chip svg { width: 12px; height: 12px; color: var(--orange); }
.ch-drill-filter-clear {
  background: transparent;
  border: 0;
  border-radius: 50%;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
}
.ch-drill-filter-clear:hover { background: rgba(243, 139, 168, 0.18); color: var(--red); }
.ch-drill-filter-clear svg { width: 12px; height: 12px; }

/* Channel × Category matrix */
.ch-matrix-wrap { overflow-x: auto; width: 100%; padding: 8px 0 10px 12px; box-sizing: border-box; }
.ch-mx-table {
  font-size: 11px;
  width: 100%;
  min-width: max-content;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.ch-mx-table th, .ch-mx-table td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 96px;
  min-width: 96px;
  box-sizing: border-box;
}
.ch-mx-table thead th:first-child,
.ch-mx-table tbody tr > *:first-child,
.ch-mx-table .ch-mx-totals > *:first-child {
  border-left: 1px solid var(--border);
}
.ch-mx-table thead th {
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.ch-mx-row-label {
  background: var(--surface);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.ch-mx-mgr-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: rgba(250, 179, 135, 0.10);
  border: 1px solid rgba(250, 179, 135, 0.25);
  border-radius: 8px;
  vertical-align: middle;
}
.ch-mx-mgr-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-mx-mgr-sub-inline {
  display: inline-block;
  margin-top: 0;
  margin-left: 10px;
  vertical-align: middle;
}
.mgr-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: help;
  color: var(--muted);
  outline: none;
}
.mgr-help-ico {
  width: 16px;
  height: 16px;
}
.mgr-help-wrap:hover,
.mgr-help-wrap:focus {
  color: var(--orange);
}
.mgr-help-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 360px;
  max-width: 520px;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  white-space: normal;
  display: none;
}
.mgr-help-wrap:hover .mgr-help-pop,
.mgr-help-wrap:focus .mgr-help-pop,
.mgr-help-wrap:focus-within .mgr-help-pop {
  display: block;
}
.mgr-help-pop-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.mgr-help-pop ul {
  margin: 0;
  padding-left: 16px;
}
.mgr-help-pop li {
  margin-bottom: 4px;
}
.mgr-help-pop code {
  background: rgba(250,179,135,0.10);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
}
.mgr-help-sec {
  margin-bottom: 8px;
}
.mgr-help-sec:last-child {
  margin-bottom: 0;
}
.mgr-help-sec-title {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  margin-bottom: 2px;
}
.mgr-help-sec p {
  margin: 0;
  color: var(--muted);
}
.mgr-help-sec-foot p {
  color: var(--muted);
  font-style: italic;
}
.mgr-help-link {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px dotted var(--orange);
}
.mgr-help-link:hover {
  text-decoration: none;
  border-bottom-style: solid;
}
.ch-mx-cell {
  text-align: right;
  transition: background .12s, outline-color .12s;
}
.ch-mx-clickable { cursor: pointer; }
.ch-mx-clickable:hover {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}
.ch-mx-amt { font-weight: 600; color: var(--text); }
.ch-mx-pct { color: var(--muted); font-size: 10px; margin-top: 1px; }
.ch-mx-rowtotal {
  font-weight: 700;
  background-color: var(--surface);
  background-image: linear-gradient(rgba(250,179,135,0.10), rgba(250,179,135,0.10));
}
.ch-mx-totals th, .ch-mx-totals td {
  background: var(--surface);
  font-weight: 700;
  border-top: 2px solid var(--border);
}
/* Freeze rightmost 합계 column. Force fully opaque background so horizontally
   scrolled cells underneath don't bleed through the sticky column. */
.ch-mx-table thead th:last-child,
.ch-mx-table tbody td:last-child,
.ch-mx-table .ch-mx-totals > *:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 6px -4px rgba(0,0,0,0.35);
  background-color: var(--surface);
}
.ch-mx-table thead th:last-child { background-color: var(--yoy-card-bg-2); }
.ch-mx-table thead th:last-child,
.ch-mx-table .ch-mx-totals > *:last-child {
  z-index: 3;
}
.ch-mx-table tbody td.ch-mx-rowtotal {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(250,179,135,0.18), rgba(250,179,135,0.18));
}
/* Keep sticky behavior on hover for rowtotal */
.ch-mx-rowtotal.ch-mx-clickable:hover {
  position: sticky;
  z-index: 2;
}

@media (max-width: 720px) {
  .ch-mx-table { font-size: 10px; }
  .ch-mx-table th, .ch-mx-table td {
    padding: 4px 6px;
    width: 80px;
    min-width: 80px;
    max-width: 80px;
  }
  .ch-mx-row-label { font-size: 10px; }
  .ch-mx-pct { display: none; }
}

/* ================================================================
   YoY / Channel / Manager dashboard — refined editorial overlay
   Source-order override of earlier .yoy-* rules. Scoped to the three
   dashboard views so other parts of the app are untouched.
   ================================================================ */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) {
  font-feature-settings: 'tnum','ss01','cv11';
  letter-spacing: -0.005em;
}

/* Header */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-header {
  background: var(--yoy-card-bg);
  border-bottom: 1px solid var(--yoy-border);
  padding: 12px 18px;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-title h3 {
  font-size: 17px; font-weight: 600;
  color: var(--yoy-fg-strong);
  letter-spacing: -0.01em;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-title [data-lucide] {
  color: var(--yoy-accent);
  width: 18px; height: 18px;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-body {
  padding: 14px 18px 24px;
  gap: 14px;
  background: var(--yoy-bg);
}

/* Header lives inside .yoy-body so it scrolls away with content.
   Pull it to body edges (negate body padding) so it spans full width. */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-body > .yoy-header:first-child {
  margin: -14px -18px 0 -18px;
}
@media (max-width: 640px) {
  :where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-body > .yoy-header:first-child {
    margin: -12px -12px 0 -12px;
  }
}

/* KPI grid */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-grid {
  gap: 12px;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi {
  background: var(--yoy-card-bg);
  border: 1px solid var(--yoy-border);
  border-radius: 10px;
  padding: 14px 16px 12px;
  gap: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-clickable:hover {
  border-color: var(--yoy-accent);
  background: rgba(233,163,122,.05);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-label {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yoy-fg-faint);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-value {
  font: 650 26px/1.08 var(--yoy-font-num);
  color: var(--yoy-fg-strong);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  letter-spacing: -0.015em;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-sub {
  font-size: 11.5px;
  color: var(--yoy-fg-muted);
  line-height: 1.5;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-growth {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-growth.up   { color: var(--yoy-pos); }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-growth.down { color: var(--yoy-neg); }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-growth.flat { color: var(--yoy-flat); font-weight: 500; }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-kpi-growth-row {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--yoy-border);
  font-size: 11.5px;
  color: var(--yoy-fg-muted);
  gap: 14px;
}

/* Card container — padding moves to head/body so rounded corners hold tables */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card {
  background: var(--yoy-card-bg);
  border: 1px solid var(--yoy-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card > .yoy-card-head,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card > .yoy-card-head,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card > .yoy-bd-head,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card > .yoy-bd-head {
  padding: 13px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--yoy-border);
  background: transparent;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card-head strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yoy-fg-strong);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card-head .text-xs,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-bd-head .text-xs {
  color: var(--yoy-fg-muted);
  font-size: 11.5px;
}
/* Inner padding for chart/table inside card */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card > .sd-chart-wrap,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card > .sd-chart-wrap,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card > .ch-ts-wrap,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card > .ch-ts-wrap {
  padding: 10px 14px 14px;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card > .table-scroll-wrap,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card > .table-scroll-wrap,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card > .ch-matrix-wrap,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card > .ch-matrix-wrap {
  padding: 0;
}

/* Title typography */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-bd-title h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--yoy-fg-strong);
  letter-spacing: -0.005em;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-bd-title h4 [data-lucide] {
  color: var(--yoy-accent);
}

/* Tables (scoped — global .sd-table untouched) */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table {
  font-size: 12px;
  line-height: 1.45;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table thead th,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--yoy-card-bg-2);
  color: var(--yoy-fg-faint);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 14px;
  border-bottom: 1px solid var(--yoy-border-strong);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--yoy-border);
  color: var(--yoy-fg);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody tr:nth-child(even) td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.012);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody tr:hover td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody tr:hover td {
  background: rgba(233,163,122,.06);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody tr:last-child td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody tr:last-child td {
  border-bottom: 0;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table .text-right,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table .text-right {
  font-family: var(--yoy-font-num);
  font-variant-numeric: tabular-nums;
}
/* Up/Down/Flat tones inside scoped tables */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table .up,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table .up { color: var(--yoy-pos); }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table .down,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table .down { color: var(--yoy-neg); }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table .flat,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table .flat { color: var(--yoy-flat); }

/* Mobile: bare <table.sd-table> instances (no .table-scroll-wrap parent) need a
   scrolling ancestor since their card has overflow:hidden. Give the closest semantic
   containers overflow-x:auto so wide tables become horizontally scrollable. */
@media (max-width: 760px) {
  :where(#productDashboardView) .pr-msrp-col,
  :where(#productDashboardView) .pr-msrp-wrap,
  :where(#productDashboardView) .pr-life-wrap,
  :where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-bd-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .yoy-drill-modal .modal-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Sticky thead has no effect once an ancestor scrolls horizontally — relax it so
     the header doesn't jump on horizontal scroll inside a narrow modal/card. */
  :where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table thead th,
  :where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table thead th {
    position: static;
  }
}

/* Segmented controls — fill → underline accent (less aggressive) */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-segmented {
  background: transparent;
  border: 1px solid var(--yoy-border);
  border-radius: 7px;
  overflow: hidden;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-seg {
  color: var(--yoy-fg-muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  background: transparent;
  transition: color .12s, background .12s, box-shadow .12s;
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-seg + .sd-seg {
  border-left-color: var(--yoy-border);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-seg:hover:not(.active) {
  background: rgba(255,255,255,.025);
  color: var(--yoy-fg);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-seg.active {
  background: var(--yoy-card-bg-2);
  color: var(--yoy-fg-strong);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--yoy-accent);
}

/* Chart head spacing */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-chart-head {
  align-items: center;
  padding: 13px 16px;
}

/* Drill-down modal */
.yoy-drill-modal {
  background: var(--yoy-card-bg);
  border: 1px solid var(--yoy-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.yoy-drill-modal .modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--yoy-border);
  flex-shrink: 0;
}
.mgr-drill-actions { display: flex; gap: 6px; align-items: center; }
.mgr-drill-actions .btn [data-lucide] { width: 14px; height: 14px; }
.mgr-drill-dim-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 10px;
  margin-left: 4px;
  background: var(--accent-dim, rgba(137,180,250,0.15));
  color: var(--accent, #89b4fa);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.mgr-drill-dim-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  border: 0;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.mgr-drill-dim-clear:hover { background: rgba(0, 0, 0, 0.45); }
#mgrDrillDetailTable tbody tr[data-mgr-drill-sku]:hover { background: rgba(137, 180, 250, 0.08); }
.yoy-drill-modal .modal-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--yoy-fg-strong);
  display: flex; align-items: center; gap: 8px;
}
.yoy-drill-modal .modal-header h3 [data-lucide] {
  width: 16px; height: 16px;
  color: var(--yoy-accent);
}
.yoy-drill-modal .modal-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.yoy-drill-summary {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--yoy-border);
  border-radius: 8px;
  margin-bottom: 14px;
}

/* Annual card — table density + in-cell rate bar */
:where(#yoyDashboardView) .yoy-annual-card {
  background: var(--yoy-card-bg);
  border-color: var(--yoy-border);
}
:where(#yoyDashboardView) .yoy-annual-card > .yoy-card-head {
  padding: 13px 16px;
}
:where(#yoyDashboardView) .yoy-annual-bdays {
  background: var(--yoy-track);
  height: 4px;
  border-radius: 2px;
}
:where(#yoyDashboardView) .yoy-annual-bdays-fill {
  background: var(--yoy-accent);
}
:where(#yoyDashboardView) .yoy-annual-kpi {
  background: var(--yoy-card-bg);
  border: 1px solid var(--yoy-border);
  border-radius: 10px;
  padding: 14px 16px;
}
:where(#yoyDashboardView) .yoy-annual-kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yoy-fg-faint);
  font-weight: 500;
}
:where(#yoyDashboardView) .yoy-annual-kpi-value {
  font: 650 24px/1.1 var(--yoy-font-num);
  color: var(--yoy-fg-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
:where(#yoyDashboardView) .yoy-annual-kpi-sub {
  color: var(--yoy-fg-muted);
  font-size: 11.5px;
}
:where(#yoyDashboardView) .yoy-annual-kpi-primary { border-left: 2px solid var(--yoy-accent); }
:where(#yoyDashboardView) .yoy-annual-kpi-accent .yoy-annual-kpi-value { color: var(--yoy-pos); }

:where(#yoyDashboardView) .yoy-annual-table thead th {
  background: var(--yoy-card-bg-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yoy-fg-faint);
  padding: 9px 14px;
}
:where(#yoyDashboardView) .yoy-annual-table tbody td {
  padding: 7px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--yoy-border);
}
:where(#yoyDashboardView) .yoy-annual-half td {
  background: rgba(137,180,250,.06);
  font-weight: 600;
  color: var(--yoy-fg-strong);
}
:where(#yoyDashboardView) .yoy-annual-current td {
  background: rgba(233,163,122,.07);
  box-shadow: inset 2px 0 0 var(--yoy-accent);
}

/* In-cell horizontal achievement bar */
.yoy-rate-bar {
  position: relative;
  display: inline-block;
  min-width: 84px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--yoy-rate-color, var(--yoy-pos-bg)) calc(min(var(--rate, 0), 100) * 1%),
    transparent calc(min(var(--rate, 0), 100) * 1%)
  );
}
.yoy-rate-bar > span { position: relative; z-index: 1; }
.yoy-rate-bar.yoy-rate-up   { --yoy-rate-color: var(--yoy-pos-bg); color: var(--yoy-pos); }
.yoy-rate-bar.yoy-rate-mid  { --yoy-rate-color: rgba(249,226,175,.18); color: #d4b878; }
.yoy-rate-bar.yoy-rate-down { --yoy-rate-color: var(--yoy-neg-bg); color: var(--yoy-neg); }

/* Refine .yoy-rate-* (text-only fallback for cells without bar) */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-rate-up   { color: var(--yoy-pos); }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-rate-down { color: var(--yoy-neg); }
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-rate-mid  { color: #d4b878; }

/* Skeleton loading rows */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-skeleton-row td {
  color: var(--yoy-fg-faint);
}

/* Breakdown drillable hover and chevron */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-bd-drillable:hover td {
  background: rgba(233,163,122,.07);
}

/* Channel-specific tweaks */
:where(#channelDashboardView) .ch-ts-mode-btn {
  background: transparent;
  color: var(--yoy-fg-muted);
  border: 1px solid var(--yoy-border);
  border-radius: 6px;
  font-size: 11.5px;
  padding: 4px 10px;
  font-weight: 500;
  transition: color .12s, background .12s, border-color .12s;
}
:where(#channelDashboardView) .ch-ts-mode-btn:hover { color: var(--yoy-fg); }
:where(#channelDashboardView) .ch-ts-mode-btn.is-active {
  background: var(--yoy-card-bg-2);
  color: var(--yoy-fg-strong);
  border-color: var(--yoy-border-strong);
  box-shadow: inset 0 -2px 0 var(--yoy-accent);
}

/* Semantic row state restoration — must come after generic tbody td rules.
   Specificity bumped to .yoy-card .sd-table tbody tr.X td (0,3,2) to win
   over the new zebra/border rules at .yoy-card .sd-table tbody td (0,2,1)
   and tbody tr:nth-child(even) td (0,2,2). */
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody tr.yoy-row-partial td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody tr.yoy-row-partial td,
.yoy-card .sd-table tbody tr.yoy-row-partial td {
  background: rgba(250,179,135,0.08);
  border-top: 1px dashed rgba(250,179,135,0.55);
  border-bottom: 1px dashed rgba(250,179,135,0.55);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody tr.yoy-bd-others td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody tr.yoy-bd-others td,
.yoy-card .sd-table tbody tr.yoy-bd-others td {
  background: rgba(148,163,184,0.05);
  font-style: italic;
  color: var(--yoy-fg-muted);
}
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .yoy-card .sd-table tbody tr.yoy-bd-discontinued td,
:where(#yoyDashboardView, #channelDashboardView, #managerDashboardView, #productDashboardView) .sd-card .sd-table tbody tr.yoy-bd-discontinued td,
.yoy-card .sd-table tbody tr.yoy-bd-discontinued td {
  background: rgba(217,122,142,0.06);
  box-shadow: inset 2px 0 0 var(--yoy-neg);
  opacity: 0.85;
}
.yoy-drill-table tr.yoy-row-up:hover td {
  background: rgba(127,198,154,0.10);
}
.yoy-drill-table tr.yoy-row-down:hover td {
  background: rgba(217,122,142,0.10);
}
.yoy-drill-modal .yoy-drill-table tr.yoy-row-up:hover td {
  background: rgba(127,198,154,0.10);
}
.yoy-drill-modal .yoy-drill-table tr.yoy-row-down:hover td {
  background: rgba(217,122,142,0.10);
}

/* Channel matrix sticky-right corner cell must stay above the sticky-right
   tbody column (z-index:2). Re-bump after the overlay's thead rule reset z to 1. */
:where(#channelDashboardView) .yoy-card .ch-mx-table thead th:last-child,
:where(#channelDashboardView) .sd-card .ch-mx-table thead th:last-child,
.yoy-card .ch-mx-table thead th:last-child {
  z-index: 3;
  background: var(--yoy-card-bg-2);
}

/* ─────────────────────────────────────────────────────────────
   Product dashboard — MSRP & lifecycle panels
   ───────────────────────────────────────────────────────────── */
:where(#productDashboardView) .pr-msrp-wrap,
:where(#productDashboardView) .pr-life-wrap {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:where(#productDashboardView) .pr-msrp-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
:where(#productDashboardView) .pr-msrp-stat {
  flex: 1 1 200px;
  min-width: 180px;
  background: var(--yoy-card-bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:where(#productDashboardView) .pr-msrp-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
:where(#productDashboardView) .pr-msrp-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
:where(#productDashboardView) .pr-msrp-stat-sub {
  font-size: 11px;
  color: var(--muted);
}
:where(#productDashboardView) .pr-msrp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  :where(#productDashboardView) .pr-msrp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
:where(#productDashboardView) .pr-msrp-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
:where(#productDashboardView) .pr-msrp-col .sd-table {
  font-size: 12px;
}

/* 페이지 헤더 — 현재 적용된 필터 스코프 칩 */
.pr-header-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: rgba(250, 179, 135, 0.12);
  border: 1px solid rgba(250, 179, 135, 0.40);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text);
  margin-left: 8px;
}
.pr-header-scope-chip i {
  width: 12px;
  height: 12px;
  color: var(--orange);
}
.pr-header-scope-chip > span {
  font-weight: 600;
}
.pr-header-scope-sep {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 2px;
}
.pr-header-scope-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(250, 179, 135, 0.20);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
}
.pr-header-scope-clear:hover {
  background: rgba(250, 179, 135, 0.35);
}
.pr-header-scope-clear i {
  width: 11px;
  height: 11px;
}

/* MSRP 인라인 카드 (월별 추이 + 4탭) */
.pr-msrp-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pr-msrp-detail-chart-wrap {
  position: relative;
  height: 240px;
  margin: 14px 0 16px;
  padding: 8px 4px;
  background: var(--yoy-card-bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pr-msrp-tab-seg {
  margin: 14px 0 8px;
}
.pr-msrp-detail-tab-body .sd-table {
  font-size: 12px;
}
.pr-msrp-sku-sort {
  margin-bottom: 8px;
  display: inline-flex;
}
.pr-msrp-sku-sort .sd-seg {
  font-size: 11px;
}
@media (max-width: 768px) {
  .pr-msrp-detail-chart-wrap { height: 200px; }
}
:where(#productDashboardView) .yoy-pct-down {
  color: var(--yoy-neg);
  font-weight: 600;
}
:where(#productDashboardView) .pr-life-bar {
  height: 8px;
  width: var(--w, 0%);
  background: var(--c, #fab387);
  border-radius: 4px;
  min-width: 2px;
  opacity: 0.85;
}
:where(#productDashboardView) .pr-life-clickable,
:where(#productDashboardView) .pr-life-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
:where(#productDashboardView) .pr-life-clickable:hover {
  background: rgba(250, 179, 135, 0.08);
}
:where(#productDashboardView) tr.pr-life-row:hover {
  background: rgba(250, 179, 135, 0.06);
}

/* Header search */
:where(#productDashboardView, #stockDashboardView) .pr-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
:where(#productDashboardView, #stockDashboardView) .form-input.pr-search-input {
  width: 280px;
  padding-left: 28px;
  padding-right: 24px;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted);
  pointer-events: none;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-clear:hover { color: var(--text); background: var(--surface-2, rgba(0,0,0,0.04)); }
:where(#productDashboardView, #stockDashboardView) .pr-search-clear i { width: 12px; height: 12px; }

:where(#productDashboardView, #stockDashboardView) .pr-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 480px;
  max-height: 520px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 60;
  padding: 4px;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-section + .pr-search-section { margin-top: 6px; }
:where(#productDashboardView, #stockDashboardView) .pr-search-section-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 8px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-section-head i { width: 12px; height: 12px; }
:where(#productDashboardView, #stockDashboardView) .pr-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  cursor: pointer;
  border-radius: 5px;
  min-width: 0;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-item:hover,
:where(#productDashboardView, #stockDashboardView) .pr-search-item:focus {
  background: var(--yoy-card-bg-2);
  outline: none;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-item-main {
  flex: 1 1 auto;
  min-width: 0;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-item-label {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-item-meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(#productDashboardView, #stockDashboardView) .pr-search-item-amt {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Mobile: search dropdown anchored to viewport so it doesn't overflow right edge */
@media (max-width: 768px) {
  :where(#productDashboardView, #stockDashboardView) .pr-search-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 60vh;
  }
}

/* Modal-internal row filter */
.yoy-drill-modal .pr-drill-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px;
  margin-top: 4px;
  position: relative;
}
.yoy-drill-modal .pr-drill-filter-icon {
  width: 14px; height: 14px;
  color: var(--muted);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  pointer-events: none;
}
.yoy-drill-modal .pr-drill-filter-input {
  flex: 1 1 auto;
  padding-left: 30px;
  max-width: 360px;
}
.yoy-drill-modal .pr-drill-filter-count {
  font-variant-numeric: tabular-nums;
}

/* --- Sales verification indicator (topbar) --- */
/* Topbar info chip — stock latest-date badge next to the verify dot.
   Compact pill: icon + "재고 ≤ M/D". Hidden until stock state is known. */
.topbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--muted);
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.topbar-chip i {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}
.topbar-chip[data-stale="true"] {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 35%, var(--border));
}
.topbar-chip[data-stale="error"] {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, var(--border));
}
@media (max-width: 720px) {
  .topbar-chip .topbar-chip-label { display: none; }
  .topbar-chip { padding: 4px 6px; }
}

/* Sales verify indicator — uses the same chip pill base as .topbar-chip
   so the 재고/매출 badges are visually aligned. Only difference is the
   leading dot (status) instead of an icon, and clickability for the modal. */
.sales-verify-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--muted);
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
}
.sales-verify-label {
  font-size: 11px;
  color: inherit;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sales-verify-label { display: none; }
  .sales-verify-indicator { padding: 4px 6px; }
}
.sales-verify-indicator--idle {
  cursor: default;
}
.sales-verify-indicator:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 25%, var(--border));
}
.sales-verify-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: background var(--transition), box-shadow var(--transition);
}
.sales-verify-dot[data-status="ok"] {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}
.sales-verify-dot[data-status="mismatch"] {
  background: #f87171;
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.7);
  animation: sv-pulse 1.6s ease-in-out infinite;
}
.sales-verify-dot[data-status="error"] {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.sales-verify-dot[data-status="running"] {
  background: #60a5fa;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.7);
  animation: sv-pulse 1.0s ease-in-out infinite;
}
@keyframes sv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
}

/* --- Sales verify modal body --- */
.sv-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.sv-summary-cell {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.sv-summary-cell .lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.sv-summary-cell .val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.sv-summary-cell .val.bad { color: #f87171; }
.sv-summary-cell .val.ok  { color: #4ade80; }
.sv-summary-cell .val.warn { color: #fbbf24; }
.sv-mismatch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.sv-mismatch-table th,
.sv-mismatch-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sv-mismatch-table th:first-child,
.sv-mismatch-table td:first-child { text-align: left; }
.sv-mismatch-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sv-mismatch-table td.diff-neg { color: #f87171; }
.sv-mismatch-table td.diff-pos { color: #4ade80; }
.sv-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
}
.sv-error-box {
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 12.5px;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

/* --- Product dashboard SKU leaderboard filters --- */
.pr-sku-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 4px 12px;
}
.pr-sku-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.pr-sku-filter-field select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12.5px;
  max-width: 280px;
  cursor: pointer;
}
.pr-sku-filter-field select:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
.pr-sku-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  background: rgba(250, 179, 135, 0.12);
  border: 1px solid rgba(250, 179, 135, 0.4);
  color: var(--text);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  height: 28px;
}
.pr-sku-filter-clear:hover {
  background: rgba(243, 139, 168, 0.18);
  border-color: rgba(243, 139, 168, 0.5);
  color: var(--red);
}
.pr-sku-filter-clear i {
  width: 12px;
  height: 12px;
  color: var(--orange);
}
.pr-sku-filter-clear .pr-sku-filter-clear-x {
  color: var(--muted);
  margin-left: 2px;
}
.pr-sku-filter-clear:hover i { color: var(--red); }

.pr-sku-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: rgba(249, 226, 175, 0.05);
  border: 1px solid rgba(249, 226, 175, 0.12);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.pr-sku-summary .pr-sku-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.pr-sku-summary .pr-sku-summary-item .lbl {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pr-sku-summary .pr-sku-summary-item .val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pr-sku-summary .pr-sku-summary-item .val strong {
  color: var(--text-bright);
}
.pr-sku-summary .pr-sku-noise-note {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

/* ================================================================
   SKU chip filter bar — above leaderboard table
   ================================================================ */
.pr-sku-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.pr-sku-chips:empty { display: none; }
.pr-chip-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 0;
}
.pr-chip-row + .pr-chip-row {
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.pr-chip-row-actions { justify-content: flex-end; }
.pr-chip-label {
  flex: 0 0 48px;
  padding-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.pr-chip-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-chip:hover {
  background: rgba(249, 226, 175, 0.1);
  border-color: rgba(249, 226, 175, 0.35);
  color: var(--text-bright);
}
.pr-chip:active { transform: translateY(1px); }
.pr-chip.is-active {
  background: rgba(250, 179, 135, 0.22);
  border-color: var(--orange);
  color: var(--text-bright);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.25);
}
.pr-chip-x {
  width: 11px;
  height: 11px;
  color: var(--orange);
}
.pr-chip-more {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 11px;
  padding: 3px 8px;
}
.pr-chip-more:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: transparent;
}
.pr-chip-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.pr-chip-clear-all:hover {
  border-color: var(--red);
  color: var(--red);
}
.pr-chip-clear-all i { width: 11px; height: 11px; }

/* ================================================================
   SKU pager — below leaderboard table
   ================================================================ */
.pr-sku-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 0;
}
.pr-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pr-pager-btn:hover:not([disabled]) {
  background: rgba(249, 226, 175, 0.1);
  border-color: rgba(249, 226, 175, 0.3);
  color: var(--text-bright);
}
.pr-pager-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.pr-pager-btn i { width: 14px; height: 14px; }
.pr-pager-info {
  margin: 0 10px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* SKU row meta — small category/model line under SKU label */
.pr-sku-row-meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.1px;
}
.pr-sku-row-meta .pr-sku-meta-sep {
  margin: 0 4px;
  opacity: 0.5;
}

/* ================================================================
   Stock drill modal — chart card + status pills + row affordance
   ================================================================ */
.st-drill-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.st-drill-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.st-drill-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.st-drill-chart-title strong { font-weight: 600; color: var(--text); }
.st-drill-chart-title [data-lucide] { width: 16px; height: 16px; color: var(--orange); }
.st-drill-chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-drill-days-seg { height: 26px; }
.st-drill-days-seg .sd-seg {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  min-width: 38px;
}
.st-drill-chart-wrap {
  position: relative;
  height: 220px;
}

/* Status pill emphasis for the in-modal filter row */
.st-pill {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.st-pill:hover { background: var(--hover); }
.st-pill.yoy-kpi-active {
  background: var(--hover);
  border-color: var(--border);
  font-weight: 600;
}

/* SKU rows: stronger hover + active selection */
.st-drill-table tbody tr.ch-drill-row-clickable { cursor: pointer; }
.st-drill-table tbody tr.ch-drill-row-active td {
  background: color-mix(in srgb, var(--orange) 14%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--orange);
}
.st-drill-table tbody tr.ch-drill-row-clickable:hover td {
  background: var(--hover);
}

/* Stock dashboard list: row affordance polish */
#stockDashboardView .ch-drill-row-clickable td { transition: background 0.1s ease; }
#stockDashboardView .ch-drill-row-active td {
  background: color-mix(in srgb, var(--orange) 12%, transparent) !important;
}

/* Stock dashboard: explicit drill button (split from row click) */
.st-drill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.st-drill-btn:hover {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
  color: var(--orange);
}
.st-drill-btn i { width: 14px; height: 14px; }

/* Product dashboard: MSRP + Lifecycle 2-col grid (stacks on narrow viewports) */
#productDashboardView .pr-msrp-life-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1280px) {
  #productDashboardView .pr-msrp-life-grid { grid-template-columns: 1fr; }
}
#productDashboardView .pr-msrp-life-grid > .sd-card { min-width: 0; }

/* MSRP pager */
#productDashboardView .pr-msrp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0 4px;
}
#productDashboardView .pr-msrp-pager-info {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 140px;
  text-align: center;
}
#productDashboardView .pr-msrp-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#productDashboardView .pr-msrp-pager-btn:hover:not([disabled]) {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
  color: var(--orange);
}
#productDashboardView .pr-msrp-pager-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
#productDashboardView .pr-msrp-pager-btn i { width: 14px; height: 14px; }

/* ============================================
   Light Theme — [data-theme="light"] overrides on <html>
   Charts (Chart.js) keep their hardcoded palette for now;
   only HTML/CSS chrome (topbar, sidebar, panels, dashboard cards) re-themes.
   ============================================ */
[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0f4;
  --hover: #ebebf0;
  --active: #dedee5;
  --border: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.12);
  --text: #2a2d3a;
  --text-bright: #0a0c14;
  --muted: #6a6f80;
  --muted-2: #9da2b3;
  --accent: #4f5bd5;
  --accent-hover: #3a45b8;
  --accent-dim: rgba(79, 91, 213, 0.10);
  --green: #2f9c5a;
  --green-dim: rgba(47, 156, 90, 0.12);
  --red: #d23f5e;
  --red-dim: rgba(210, 63, 94, 0.12);
  --yellow: #b78a1a;
  --yellow-dim: rgba(183, 138, 26, 0.12);
  --purple: #7a4cc7;
  --purple-dim: rgba(122, 76, 199, 0.12);
  --orange: #d97a2a;
  --teal: #1d8f80;

  --shadow: 0 8px 32px rgba(20, 22, 38, 0.10);
  --shadow-sm: 0 2px 12px rgba(20, 22, 38, 0.06);

  /* YoY/Channel/Manager dashboard tokens */
  --yoy-bg:            #f0f0f4;
  --yoy-card-bg:       #ffffff;
  --yoy-card-bg-2:     #f7f7fa;
  --yoy-border:        #d6d8e0;
  --yoy-border-strong: #c0c3cd;

  --yoy-fg:        #1a1d28;
  --yoy-fg-strong: #0a0c14;
  --yoy-fg-muted:  #5c6178;
  --yoy-fg-faint:  #8b91a3;

  --yoy-pos:    #2f9c5a;
  --yoy-pos-bg: rgba(47, 156, 90, .10);
  --yoy-neg:    #d23f5e;
  --yoy-neg-bg: rgba(210, 63, 94, .10);
  --yoy-flat:   #8b91a3;
  --yoy-accent: #d97a2a;
  --yoy-track:  #e4e6ee;

  /* 라이트 모드 차트 가독성: 진한 텍스트 + 적당히 진한 그리드 (alpha 0.16). */
  --chart-text:        #2a2e3d;
  --chart-text-strong: #0f1220;
  --chart-grid:        rgba(60, 64, 80, 0.16);
}

/* Topbar uses hardcoded rgba — re-skin for light mode */
[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Inline rgba(255,255,255,...) overlays that turn invisible on light bg */
[data-theme="light"] .data-table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); }

/* Theme toggle button (sun/moon swap) */
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: inline-flex; }
[data-theme="light"] .theme-toggle .theme-icon-sun { display: inline-flex; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }