/* SRG Reviews Dashboard — Workbench (macOS-inspired) */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --divider: #d2d2d7;
  --divider-soft: #e8e8ed;
  --accent: #0071e3;
  --red: #ff453a;
  --green: #30d158;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --purple: #bf5af2;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv01", "tnum";
  line-height: 1.47;
  letter-spacing: -0.01em;
  font-size: 14px;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }

.open-mode-banner { background: rgba(255,69,58,0.10); color: #c4291c; border-bottom: 1px solid rgba(255,69,58,0.25); padding: 8px 20px; font-size: 12.5px; text-align: center; }
.open-mode-banner strong { font-weight: 600; margin-right: 6px; }
.open-mode-banner code { background: rgba(255,69,58,0.15); padding: 1px 6px; border-radius: 4px; font-size: 11px; font-family: ui-monospace, "SF Mono", monospace; }

/* Login (kept simple) */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); padding: 20px; }
.login-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 18px; padding: 36px 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.login-brand-line { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); font-weight: 600; }
.login-brand-title { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin-top: 4px; }
.login-sub { font-size: 15px; color: var(--text-secondary); margin: 14px 0 22px; line-height: 1.5; }
.login-note { font-size: 12px; color: var(--text-tertiary); margin-top: 20px; line-height: 1.55; }
.login-error { background: rgba(255,69,58,0.10); color: #c4291c; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 14px; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 20px; background: var(--text); color: var(--surface); text-decoration: none; border: none; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background 0.15s; }
.google-btn:hover { background: #000; }

/* App shell */
.app-shell { display: grid; grid-template-columns: 248px 1fr; height: 100vh; }

/* Sidebar */
.sidebar {
  background: rgba(245,245,247,0.85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-right: 1px solid var(--divider-soft);
  padding: 20px 12px 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-search-wrap { position: relative; margin-bottom: 16px; padding: 0 4px; }
.sidebar-search-wrap::before { content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 15px; pointer-events: none; }
.sidebar-search { width: 100%; padding: 6px 10px 6px 28px; font-size: 13px; border: none; background: rgba(0,0,0,0.06); border-radius: 7px; color: var(--text); outline: none; }
.sidebar-search::placeholder { color: var(--text-tertiary); }
.sidebar-search:focus { background: rgba(0,0,0,0.08); box-shadow: 0 0 0 2px rgba(0,113,227,0.3); }
.sidebar-section { display: none; }
.sidebar-section-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); padding: 10px 8px 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); user-select: none; }
.nav-item:hover { background: rgba(0,0,0,0.04); }
.nav-item.active { background: rgba(0,113,227,0.12); color: var(--accent); font-weight: 500; }
.nav-item .badge { margin-left: auto; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.nav-item.active .badge { color: var(--accent); }
.brand-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.brand-dot.sorrentinos { background: var(--red); }
.brand-dot.buco { background: var(--orange); }
.brand-dot.argos { background: var(--purple); }
.sidebar-footer { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--divider-soft); }
.sidebar-signout { width: 100%; padding: 6px 10px; font-size: 12px; color: var(--text-secondary); background: transparent; border: 1px solid var(--divider); border-radius: 7px; }
.sidebar-signout:hover { background: rgba(0,0,0,0.04); }
.sidebar-user { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; padding: 0 4px; word-break: break-all; }

/* Main */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.toolbar {
  padding: 12px 28px;
  border-bottom: 1px solid var(--divider-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tab-strip { display: flex; gap: 2px; background: rgba(0,0,0,0.05); padding: 2px; border-radius: 8px; }
.tab { padding: 5px 14px; font-size: 13px; border-radius: 6px; color: var(--text-secondary); background: transparent; border: none; }
.tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); font-weight: 500; }
.toolbar-actions { display: flex; gap: 6px; }
.icon-btn { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.icon-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* Content */
.content { padding: 32px; overflow-y: auto; flex: 1; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 4px; }
.page-meta { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 28px; }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.kpi { background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 12px; padding: 16px 18px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 500; }
.kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -0.022em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.kpi-sub.up { color: #0a7f2e; }
.kpi-sub.down { color: #c4291c; }

/* Filter chip row — OpenTable-style multi-select chips */
.filter-chip-row { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.filter-chip-wrap { position: relative; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--divider); border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; line-height: 1.2; transition: border-color 0.12s, background 0.12s; }
.filter-chip:hover { background: rgba(0,0,0,0.02); border-color: var(--text-tertiary); }
.filter-chip.open { border-color: var(--text-secondary); background: rgba(0,0,0,0.02); }
.filter-chip-label { color: var(--text); font-weight: 500; }
.filter-chip-value { color: var(--text); font-weight: 400; }
.filter-chip-arrow { display: inline-block; font-size: 10px; opacity: 0.55; margin-left: 2px; transition: transform 0.15s; }
.filter-chip.open .filter-chip-arrow { transform: rotate(180deg); opacity: 0.85; }

.filter-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 10px; padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.05); z-index: 50; max-height: 360px; overflow-y: auto; }
.filter-panel-wide { min-width: 300px; }
.filter-search-wrap { padding: 4px 4px 6px; position: sticky; top: -6px; background: var(--surface); }
.filter-search-input { width: 100%; padding: 6px 10px 6px 30px; border: 1px solid var(--divider-soft); border-radius: 6px; font-size: 13px; outline: none; background-color: rgba(0,0,0,0.03); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2386868b'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 9px center; background-size: 13px; font-family: inherit; }
.filter-search-input:focus { border-color: var(--accent); background-color: var(--surface); }

.filter-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text); }
.filter-option:hover { background: rgba(0,0,0,0.04); }
.filter-option input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; flex-shrink: 0; }
.filter-option-text { flex: 1; }
.filter-option-count { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.filter-option-divider { height: 1px; background: var(--divider-soft); margin: 4px 8px; }
.filter-option-all { font-weight: 500; }
.filter-empty { padding: 12px 10px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
.filter-option input[type="radio"] { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; flex-shrink: 0; }

/* Search keyword row beneath the filter chips */
.search-row { display: flex; gap: 8px; margin-bottom: 22px; }
.search-keyword-input { flex: 1; padding: 9px 12px 9px 36px; border: 1px solid var(--divider); border-radius: 8px; font-size: 14px; outline: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2386868b'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center; background-size: 14px; font-family: inherit; color: var(--text); }
.search-keyword-input:focus { border-color: var(--accent); }

/* Legacy channel-filter styles, kept inert in case any other view still uses them */
.channel-filter { display: none; }

/* SRG Scoreboard internal toggle (Dine-In / Delivery) */
.scoreboard-toggle-row { display: inline-flex; gap: 2px; padding: 2px; background: rgba(0,0,0,0.05); border-radius: 8px; margin-bottom: 22px; }
.scoreboard-toggle { padding: 6px 16px; font-size: 13px; border-radius: 6px; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; font-weight: 500; }
.scoreboard-toggle.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Legacy chan-pill kept for any future reuse */
.chan-pill { padding: 5px 12px; font-size: 13px; border-radius: 7px; color: var(--text-secondary); background: transparent; border: none; display: inline-flex; align-items: center; gap: 6px; }
.chan-pill.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.05); font-weight: 500; }
.chan-pill .count { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.chan-pill.active .count { color: var(--accent); }

/* Section title */
.section-title { font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; }
.section-title .pill { font-size: 11px; background: rgba(0,0,0,0.05); color: var(--text-secondary); padding: 1px 8px; border-radius: 999px; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Locations grid */
.locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 28px; }
.location-card { background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 12px; padding: 14px 16px; }
.loc-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.loc-brand { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.loc-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.loc-stat strong { color: var(--text); font-weight: 600; }
.loc-stars { color: #c98810; font-weight: 600; }

/* Review list (workbench style: hairline rules in a single rounded surface) */
.review-list { background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.review-card { padding: 18px 22px; border-bottom: 1px solid var(--divider-soft); transition: background 0.12s; scroll-margin-top: 80px; }
.review-card:last-child { border-bottom: none; }
.review-card.delivery { background: linear-gradient(180deg, rgba(255,159,10,0.04), rgba(255,159,10,0.02)); }
.review-card.posted { opacity: 0.55; }
.review-card.retention { box-shadow: inset 3px 0 0 var(--red); }
.review-card.highlight { background: rgba(0,113,227,0.06); }
.review-anchor { display: inline-block; font-size: 11px; color: var(--text-tertiary); text-decoration: none; margin-left: 8px; font-family: ui-monospace, "SF Mono", monospace; }
.review-anchor:hover { color: var(--accent); }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.platform-badge {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); background: rgba(0,0,0,0.05);
}
.platform-OpenTable { color: #c4291c; background: rgba(255,69,58,0.10); }
.platform-Google { color: #1a4ec4; background: rgba(66,133,244,0.10); }
.platform-Yelp { color: #b81f1f; background: rgba(216,35,35,0.10); }
.platform-TripAdvisor { color: #0a7f2e; background: rgba(48,209,88,0.10); }
.platform-Facebook { color: #134eb1; background: rgba(24,119,242,0.10); }
.platform-Skip { color: #b06c00; background: rgba(255,159,10,0.12); }
.platform-DoorDash { color: #c92012; background: rgba(239,42,42,0.10); }
.platform-UberEats { color: #0a7f2e; background: rgba(6,193,103,0.10); }

.reviewer { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.review-loc { color: var(--text-secondary); font-size: 12.5px; }
.review-date { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.review-stars { color: #c98810; font-size: 13px; letter-spacing: 1px; }
.review-thumbs-up { color: #0a7f2e; font-size: 17px; }
.review-thumbs-down { color: var(--red); font-size: 17px; }
.review-status { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; }
.status-auto { background: rgba(48,209,88,0.15); color: #0a7f2e; }
.status-pending { background: rgba(255,159,10,0.15); color: #b06c00; }
.status-risk { background: rgba(255,69,58,0.15); color: #c4291c; font-weight: 600; }
.status-rating-only { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
.status-posted { background: #0a7f2e; color: white; }
.status-auto-replied { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
.status-skip-portal { background: rgba(255,159,10,0.15); color: #b06c00; }

.review-subscores { display: flex; gap: 14px; font-size: 12px; color: var(--text-tertiary); margin: 6px 0 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.review-subscores strong { color: var(--text); font-weight: 600; }
.review-tags { font-size: 11px; color: var(--text-tertiary); margin-bottom: 8px; }
.review-body { font-size: 14px; color: var(--text); line-height: 1.5; padding: 10px 14px; background: rgba(0,0,0,0.025); border-radius: 8px; margin: 8px 0 10px; max-width: 820px; }
.review-private { font-size: 12.5px; color: var(--text-secondary); padding: 8px 12px; background: rgba(255,159,10,0.06); border-radius: 8px; margin-bottom: 10px; }
.review-private-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; margin-bottom: 4px; }
.no-text-marker { font-size: 12.5px; color: var(--text-tertiary); font-style: italic; padding: 8px 12px; background: rgba(0,0,0,0.025); border-radius: 8px; margin-bottom: 10px; }

.order-context { font-size: 12px; padding: 8px 12px; background: rgba(255,159,10,0.07); border-radius: 8px; margin-bottom: 10px; color: #6b4a0a; }
.order-context-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #b06c00; font-weight: 600; margin-bottom: 3px; }
.skip-portal-notice { font-size: 12.5px; padding: 10px 14px; background: rgba(255,159,10,0.08); border-radius: 8px; margin-bottom: 10px; color: #6b4a0a; }
.skip-portal-notice strong { color: #b06c00; font-weight: 600; }

/* Responses */
.responses { margin-top: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--divider); border-radius: 12px; }
.responses-title { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.responses-title .picker { display: flex; gap: 2px; background: rgba(0,0,0,0.04); padding: 2px; border-radius: 7px; }
.opt-tab { padding: 4px 10px; font-size: 11px; font-weight: 500; background: transparent; color: var(--text-secondary); border: none; border-radius: 5px; text-transform: none; letter-spacing: 0; }
.opt-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.05); font-weight: 600; }
.opt-body { white-space: pre-wrap; font-size: 14px; line-height: 1.55; padding: 14px 18px; background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 10px; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "New York", Georgia, serif; min-height: 80px; cursor: text; transition: border-color 0.12s, box-shadow 0.12s; }
.opt-body:hover { border-color: var(--divider); }
.opt-body:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.14); }

.draft-private { margin-top: 12px; padding: 14px 16px; background: rgba(255,159,10,0.06); border: 1px solid rgba(255,159,10,0.18); border-radius: 10px; }
.draft-private-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #b06c00; font-weight: 600; margin-bottom: 6px; }
.draft-private-body { white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, "New York", Georgia, serif; font-size: 13.5px; line-height: 1.55; color: var(--text); }

.action-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.btn { padding: 6px 14px; font-size: 13px; font-weight: 500; border-radius: 7px; border: 1px solid var(--divider); background: var(--surface); color: var(--text); }
.btn:hover { background: rgba(0,0,0,0.03); }
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: #0058b8; border-color: #0058b8; }
.btn-success { background: #0a7f2e; color: white; border-color: #0a7f2e; }
.btn-success:hover { background: #086a25; border-color: #086a25; }
.btn-secondary { background: rgba(0,0,0,0.04); border-color: transparent; }
.btn-secondary:hover { background: rgba(0,0,0,0.08); }

.internal-notes { margin-top: 12px; padding: 10px 14px; background: rgba(0,0,0,0.025); border-radius: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.internal-notes-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; margin-bottom: 4px; }

/* State / loading / empty */
.state { text-align: center; padding: 80px 20px; color: var(--text-tertiary); }
.state-title { font-size: 18px; color: var(--text); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.state-sub { font-size: 13.5px; color: var(--text-secondary); max-width: 480px; margin: 0 auto; line-height: 1.5; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--divider); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.toast.visible { opacity: 1; }

/* Settings */
.settings { background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; }
.settings h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.settings-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--divider-soft); font-size: 13px; }
.settings-row:last-child { border-bottom: none; }
.settings-label { color: var(--text-secondary); font-weight: 500; }
.settings-value { color: var(--text); }

/* Score leaderboard */
.leaderboard { background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leaderboard-table thead th { text-align: left; padding: 12px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--divider-soft); white-space: nowrap; }
.leaderboard-table thead th.lb-sortable { cursor: pointer; user-select: none; transition: background 0.12s, color 0.12s; }
.leaderboard-table thead th.lb-sortable:hover { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
.leaderboard-table thead th.lb-sortable.lb-sorted { color: var(--accent); background: rgba(0,113,227,0.05); }
.leaderboard-table thead th .sort-arrow { display: inline-block; margin-left: 5px; font-size: 9px; opacity: 0.35; vertical-align: middle; }
.leaderboard-table thead th.lb-sortable.lb-sorted .sort-arrow { opacity: 1; color: var(--accent); }
.leaderboard-table thead th.lb-score, .leaderboard-table thead th.lb-platform { text-align: center; }
.leaderboard-table thead th.lb-count { text-align: right; }
.leaderboard-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--divider-soft); vertical-align: top; }
.leaderboard-table tbody tr:last-child td { border-bottom: none; }
.leaderboard-table tbody tr:hover { background: rgba(0,0,0,0.015); }
.leaderboard-table .lb-rank { width: 36px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-weight: 600; }
.leaderboard-table .lb-loc { min-width: 200px; }
.leaderboard-table .lb-loc .lb-name { font-weight: 600; letter-spacing: -0.01em; margin-left: 8px; }
.leaderboard-table .lb-loc .brand-dot { vertical-align: middle; }
.leaderboard-table .lb-score, .leaderboard-table .lb-platform { text-align: center; font-variant-numeric: tabular-nums; }
.leaderboard-table .lb-platform-count { display: block; font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.leaderboard-table .lb-count { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.leaderboard-table .lb-trend { font-size: 12px; font-variant-numeric: tabular-nums; }
.leaderboard-table .lb-source { font-size: 11px; }
.leaderboard-table tr.lb-me td { background: rgba(0,113,227,0.06); }
.leaderboard-table tr.lb-me .lb-name { color: var(--accent); }
.you-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; background: var(--accent); color: white; padding: 1px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }

.score-pill { display: inline-block; min-width: 52px; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.score-pill.score-good { background: rgba(48,209,88,0.14); color: #0a7f2e; }
.score-pill.score-ok { background: rgba(255,159,10,0.14); color: #b06c00; }
.score-pill.score-low { background: rgba(255,69,58,0.12); color: #c4291c; }
.score-pill.score-na { background: rgba(0,0,0,0.04); color: var(--text-tertiary); font-weight: 500; }

.trend-up { color: #0a7f2e; font-weight: 600; }
.trend-down { color: #c4291c; font-weight: 600; }
.trend-flat { color: var(--text-tertiary); }

.source-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; }
.source-tag.source-calc { background: rgba(0,113,227,0.12); color: var(--accent); }
.source-tag.source-snapshot { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
.source-tag.source-none { background: transparent; color: var(--text-tertiary); }

.leaderboard-footnote { font-size: 12px; color: var(--text-secondary); padding: 14px 18px; background: rgba(0,0,0,0.02); border: 1px solid var(--divider-soft); border-radius: 10px; line-height: 1.55; max-width: 920px; }
.leaderboard-footnote strong { color: var(--text); font-weight: 600; }

/* Mobile */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; height: auto; }
  .sidebar { display: none; }
  .toolbar { padding: 10px 16px; }
  .content { padding: 20px 16px; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .leaderboard { overflow-x: auto; }
  .leaderboard-table { min-width: 720px; }
}

/* Ingestion freshness banner */
.freshness-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 28px; background: rgba(255,255,255,0.7); border-bottom: 1px solid var(--divider-soft); font-size: 12.5px; }
.freshness-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; }
.freshness-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.freshness-label { color: var(--text); font-weight: 500; }
.freshness-when { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.freshness-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.freshness-good { background: var(--green); }
.freshness-ok { background: var(--orange); }
.freshness-low { background: var(--red); }
@media (max-width: 900px) { .freshness-bar { padding: 8px 16px; gap: 12px; } }


/* Source filter group headers (Dine-In / Delivery) — added 2026-06-04 */
.filter-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 8px 10px 3px; }
.filter-group-label ~ .filter-option { padding-left: 22px; }

/* Delivery metadata — tags chips, customer badges, reply deadline, review title (2026-06-04) */
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.tag-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,0.05); color: var(--text); border: 1px solid var(--divider-soft); }
.cust-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.cust-new { background: #e8f1fd; color: #1d4ed8; }
.cust-returning { background: #ede9fe; color: #6d28d9; }
.cust-orders { font-size: 12px; color: var(--text-secondary); }
.reply-deadline { font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; margin-right: 8px; }
.reply-deadline.urgent { color: #c62828; font-weight: 600; }
.reply-deadline.closed { color: var(--text-tertiary); }
.review-title { font-weight: 600; font-size: 14.5px; margin: 10px 0 2px; }


/* >>> SRG_SCOREBOARD_COMPACT — Scoreboard tab, "Compact" design (Oct 2026) */
.sb-compact { --sb-ink: #11161b; --sb-bar-muted: #9aa6b1; --sb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --sb-teal: #007a83; display: flex; flex-direction: column; gap: 12px; }
.sb-compact .sb-bar { background: var(--sb-ink); color: #f1f4f6; border-radius: 10px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.sb-compact .sb-bar .page-title { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: #f1f4f6; }
.sb-compact .sb-bar .page-meta { font-size: 12px; color: var(--sb-bar-muted); margin: 2px 0 0; }
.sb-compact .scoreboard-toggle-row { margin: 0; background: transparent; padding: 0; gap: 6px; flex-wrap: wrap; align-items: center; display: flex; }
.sb-compact .scoreboard-toggle { border: 1px solid #3a4651; border-radius: 5px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-bar-muted); background: transparent; box-shadow: none; }
.sb-compact .scoreboard-toggle.active { background: #f1f4f6; color: var(--sb-ink); border-color: #f1f4f6; box-shadow: none; }
.sb-compact .sb-bar .filter-chip { background: transparent; border-color: #3a4651; color: #f1f4f6; padding: 5px 10px; font-size: 12.5px; border-radius: 5px; }
.sb-compact .sb-bar .filter-chip:hover, .sb-compact .sb-bar .filter-chip.open { background: rgba(255,255,255,0.06); border-color: #6b7884; }
.sb-compact .sb-bar .filter-chip-label { color: var(--sb-bar-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-compact .sb-bar .filter-chip-value { color: #f1f4f6; }
.sb-compact .sb-bar .filter-chip-arrow { color: var(--sb-bar-muted); }
.sb-compact .sb-bar .filter-panel { color: var(--text); }

.sb-compact .sb-top { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.sb-compact .kpi-strip { display: grid; grid-template-columns: minmax(170px, 220px); grid-auto-rows: 1fr; gap: 12px; margin: 0; }
.sb-compact .kpi-strip:has(.kpi:nth-child(3)) { grid-template-columns: repeat(2, minmax(150px, 200px)); }
.sb-compact .kpi { border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
.sb-compact .kpi-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.sb-compact .kpi-value { font-family: var(--sb-mono); font-weight: 500; font-size: 30px; letter-spacing: -0.03em; }
.sb-compact .kpi-sub { font-family: var(--sb-mono); font-size: 11.5px; }

.sb-compact .sb-trend { background: var(--surface); border: 1px solid var(--divider-soft); border-radius: 8px; padding: 10px 12px 6px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-compact .sb-trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sb-compact .sb-trend-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); }
.sb-compact .sb-trend-sub { font-family: var(--sb-mono); font-size: 11px; color: var(--text-tertiary); }
.sb-compact .sb-trend-plot { position: relative; min-height: 120px; }
.sb-compact .sb-trend-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.sb-compact .sb-trend-empty { padding: 36px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.sb-compact .sbt-grid { stroke: var(--divider-soft); stroke-dasharray: 1 3; }
.sb-compact .sbt-ax { fill: var(--text-tertiary); font: 10px var(--sb-mono); }
.sb-compact .sbt-std { stroke: var(--text-tertiary); stroke-dasharray: 4 3; opacity: 0.8; }
.sb-compact .sbt-stdl { fill: var(--text-tertiary); font: 10px var(--sb-mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.sb-compact .sbt-area { fill: rgba(0,122,131,0.10); }
.sb-compact .sbt-line { fill: none; stroke: var(--sb-teal); stroke-width: 2; stroke-linejoin: round; }
.sb-compact .sbt-pt { fill: var(--sb-teal); stroke: var(--surface); stroke-width: 1.5; }
.sb-compact .sbt-pt.few { fill: var(--surface); stroke: var(--sb-teal); stroke-width: 1.5; }
.sb-compact .sbt-cross { stroke: var(--text-tertiary); stroke-dasharray: 2 2; }
.sb-compact .sbt-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; background: var(--sb-ink); color: #fff; border-radius: 4px; padding: 6px 9px; font: 11.5px var(--sb-mono); white-space: nowrap; }
.sb-compact .sbt-tip b { display: block; font-size: 13px; }

.sb-compact .leaderboard { border-radius: 8px; margin: 0; overflow-x: auto; }
.sb-compact .leaderboard-table { min-width: 860px; }
.sb-compact .leaderboard-table thead th { padding: 8px 12px; font-size: 10.5px; letter-spacing: 0.07em; background: #f2f4f6; }
.sb-compact .leaderboard-table tbody td { padding: 7px 12px; vertical-align: middle; font-family: var(--sb-mono); font-size: 13px; white-space: nowrap; }
.sb-compact .leaderboard-table tbody tr:nth-child(even) td { background: #f7f8fa; }
.sb-compact .leaderboard-table tr.lb-me td { background: rgba(0,113,227,0.07); }
.sb-compact .leaderboard-table .lb-loc { font-family: inherit; }
.sb-compact .leaderboard-table .lb-loc .lb-name { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 600; }
.sb-compact .leaderboard-table .lb-platform-count { display: inline-block; margin-left: 6px; margin-top: 0; font-size: 11px; min-width: 30px; text-align: left; }
.sb-compact .leaderboard-table thead th.lb-reply, .sb-compact .leaderboard-table td.lb-reply { text-align: right; }
.sb-compact .lb-reply-val { color: var(--text); font-weight: 500; }
.sb-compact .lb-reply-na { color: var(--text-tertiary); }
.sb-compact .score-pill { min-width: 48px; padding: 2px 6px; border-radius: 3px; font-family: var(--sb-mono); font-size: 12.5px; }
.sb-compact .lb-score .score-pill { font-size: 13.5px; min-width: 56px; }
.sb-compact .leaderboard-footnote { font-size: 11.5px; }
@media (max-width: 1000px) { .sb-compact .sb-top { grid-template-columns: 1fr; } .sb-compact .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* <<< SRG_SCOREBOARD_COMPACT */