/* Reference-era compatibility skin. Phone previews keep their own customer-facing
 * styles; design-system.css is authoritative for shared shell/theme computation. */
:root {
  --reference-blue:#315eea;
  --reference-blue-soft:#edf4ff;
  --reference-sidebar:#f7f8fa;
  --reference-canvas:#f3f5f7;
  --reference-border:#e1e6eb;
  --reference-ink:#17212b;
  --reference-muted:#6b7580;
  --sidebar-width:190px;
  --control-height:36px;
  --color-background:var(--reference-canvas);
  --color-surface:#fff;
  --color-surface-subtle:#f8f9fb;
  --color-text:var(--reference-ink);
  --color-text-muted:var(--reference-muted);
  --color-border:var(--reference-border);
  --color-border-soft:#edf0f3;
  --color-hover:#f5f8fc;
  --color-row-hover:#f8fafc;
  --color-accent:var(--reference-blue);
  --color-accent-strong:#1d4ed8;
  --color-accent-soft:var(--reference-blue-soft);
  --color-secondary:#315eea;
  --color-secondary-soft:#edf4ff;
  --teal:var(--reference-blue);
  --teal-soft:var(--reference-blue-soft);
}

:root[data-theme="dark"] {
  --reference-sidebar:#171b21;
  --reference-canvas:#11151a;
  --reference-border:#303740;
  --reference-ink:#edf2f7;
  --reference-muted:#9ca8b5;
  --color-background:var(--reference-canvas);
  --color-surface:#1b2027;
  --color-surface-subtle:#20262e;
  --color-surface-raised:#242b34;
  --color-text:var(--reference-ink);
  --color-text-muted:var(--reference-muted);
  --color-border:var(--reference-border);
  --color-border-soft:#282f38;
  --color-hover:#232a33;
  --color-row-hover:#20262e;
  --color-input:#1c222a;
  --color-accent:#6ea0ff;
  --color-accent-strong:#8bb3ff;
  --color-accent-soft:#243552;
  --color-secondary:#6ea0ff;
  --color-secondary-soft:#243552;
  --teal:#6ea0ff;
  --teal-soft:#243552;
}

body { background:var(--reference-canvas); }

.shell { grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.sidebar {
  padding:0;
  border-right:1px solid var(--reference-border);
  background:var(--reference-sidebar);
}
.brand {
  min-height:64px;
  margin:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  padding:8px 18px 7px;
  border-bottom:1px solid var(--reference-border);
  color:var(--reference-ink);
}
.brand-logo {
  display:block;
  width:108px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:left center;
}
:root[data-theme="dark"] .brand-logo { filter:invert(1); }
.brand-mark {
  width:32px;
  height:32px;
  border-radius:4px;
  color:#fff;
  background:var(--reference-blue);
}
.brand strong { color:var(--reference-ink); font-size:14px; }
.brand span { color:var(--reference-muted); font-size:10px; }
.nav { padding:12px 8px; }
.nav-group + .nav-group { margin-top:7px; }
.nav-group-toggle {
  min-height:30px;
  padding:0 9px;
  color:var(--reference-muted);
  font-size:11px;
  font-weight:650;
}
.nav-group-toggle:hover { color:var(--reference-ink); }
.nav-group-pages { gap:1px; margin-top:2px; }
.nav-item {
  grid-template-columns:6px minmax(0,1fr);
  gap:7px;
  min-height:34px;
  border-radius:4px;
  padding:7px 9px;
  color:#4e5a66;
  font-size:12px;
  font-weight:550;
}
.nav-item-marker { width:3px; height:3px; background:#a9b2bc; }
.nav-item:hover { color:var(--reference-ink); background:#eef1f5; }
.nav-item.active { color:var(--reference-blue); background:#e8f0ff; }
.nav-item.active .nav-item-marker { background:var(--reference-blue); box-shadow:none; }
.sidebar-footer {
  margin:8px 12px 0;
  padding:14px 6px;
  border-color:var(--reference-border);
  color:var(--reference-muted);
}
:root[data-theme="dark"] .sidebar { background:var(--reference-sidebar); }
:root[data-theme="dark"] .nav-item { color:#bcc5cf; }
:root[data-theme="dark"] .nav-item:hover { background:#232a32; }
:root[data-theme="dark"] .nav-item.active { color:#8bb3ff; background:#263650; }
:root[data-theme="dark"] .sidebar-footer { border-color:var(--reference-border); }

.topbar {
  min-height:64px;
  padding:10px 24px;
  border-bottom:1px solid var(--reference-border);
  background:color-mix(in srgb,var(--color-surface) 97%,transparent);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
.breadcrumb { margin-bottom:3px; font-size:10px; }
.topbar h1 { font-size:17px; font-weight:700; }
.icon-button,.utility-button,.profile-trigger {
  border-color:var(--reference-border);
  border-radius:4px;
  box-shadow:none;
}
.utility-button,.profile-trigger { font-size:11px; }
.profile-trigger { min-width:126px; }
.primary-button,.secondary-button {
  min-height:36px;
  border-radius:4px;
  font-size:12px;
}
.primary-button { background:var(--reference-blue); }
.primary-button:hover { background:#1d4ed8; }

#section-tabs {
  position:sticky;
  z-index:15;
  top:64px;
  padding:0 24px;
  border-bottom:1px solid var(--reference-border);
  background:var(--color-surface);
}
#section-tabs[hidden] { display:none; }
.section-tabs { display:flex; min-height:44px; gap:24px; align-items:stretch; overflow-x:auto; }
.section-tabs button {
  flex:0 0 auto;
  border:0;
  border-bottom:2px solid transparent;
  padding:0 1px;
  color:var(--reference-muted);
  background:transparent;
  font-size:12px;
  font-weight:650;
}
.section-tabs button:hover { color:var(--reference-ink); }
.section-tabs button.active { border-bottom-color:var(--reference-blue); color:var(--reference-blue); }

/* Peer admin sections share one compact segmented rail. */
.section-tabs--segmented {
  width:max-content;
  max-width:100%;
  min-height:auto;
  align-items:center;
  gap:2px;
  margin:5px 0;
  padding:3px;
  border:1px solid color-mix(in srgb,var(--reference-border) 86%,var(--reference-ink) 14%);
  border-radius:6px;
  background:color-mix(in srgb,var(--color-surface-subtle) 92%,var(--reference-border) 8%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
  scrollbar-width:none;
}
.section-tabs--segmented::-webkit-scrollbar { display:none; }
.section-tabs--segmented button {
  min-height:34px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:4px;
  color:color-mix(in srgb,var(--reference-muted) 88%,var(--reference-ink) 12%);
  font-size:12px;
  font-weight:620;
  letter-spacing:.01em;
  transition:color 140ms ease,background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
  touch-action:manipulation;
}
.section-tabs--segmented button:hover {
  color:var(--reference-ink);
  background:color-mix(in srgb,var(--color-surface) 74%,transparent);
}
.section-tabs--segmented button:focus-visible {
  outline:2px solid color-mix(in srgb,var(--reference-blue) 42%,transparent);
  outline-offset:2px;
}
.section-tabs--segmented button.active {
  border-color:color-mix(in srgb,var(--reference-blue) 16%,var(--reference-border));
  color:var(--reference-blue);
  background:color-mix(in srgb,var(--color-surface) 96%,var(--reference-blue) 4%);
  box-shadow:0 1px 2px rgba(23,33,43,.08),inset 0 1px 0 rgba(255,255,255,.84);
  font-weight:700;
}
:root[data-theme="dark"] .section-tabs--segmented {
  border-color:var(--reference-border);
  background:var(--reference-canvas);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="dark"] .section-tabs--segmented button:hover { background:var(--color-hover); }
:root[data-theme="dark"] .section-tabs--segmented button.active {
  border-color:color-mix(in srgb,var(--color-accent) 28%,var(--reference-border));
  color:var(--color-accent-strong);
  background:color-mix(in srgb,var(--color-surface) 82%,var(--color-accent-soft) 18%);
  box-shadow:none;
}

@media (prefers-reduced-motion:reduce) {
  .section-tabs--segmented button { transition:none; }
}

#view { max-width:1540px; padding:20px 24px 48px; }
.panel,.workbench-section,.dashboard-panel,.dashboard-quick,.help-card,.detail-panel,
.customer-tag-settings,.product-filters,.media-card,.settings-fieldset,.compact-panel {
  border-color:var(--reference-border);
  border-radius:5px;
  box-shadow:none;
}
.panel { padding:18px; }
.toolbar,.media-filters {
  min-height:54px;
  margin:0 0 12px;
  border:1px solid var(--reference-border);
  border-radius:5px;
  padding:8px 10px;
  background:var(--color-surface);
}
.search,.select,input,select,textarea {
  border-color:var(--reference-border) !important;
  border-radius:4px !important;
  color:var(--reference-ink);
  background:var(--color-input,var(--color-surface)) !important;
  box-shadow:none !important;
}
.search:focus,input:focus,select:focus,textarea:focus {
  border-color:var(--reference-blue) !important;
  outline:2px solid color-mix(in srgb,var(--reference-blue) 15%,transparent);
  outline-offset:0;
}
.table-wrap { border-color:var(--reference-border); border-radius:5px; }
.table th,.table td { height:46px; border-color:var(--color-border-soft); padding:8px 12px; }
.table thead th,.table thead th:last-child { color:var(--reference-muted); background:var(--color-surface-subtle); }
.table th:last-child,.table td:last-child { box-shadow:-1px 0 0 var(--reference-border); }
.table tbody tr:hover td { background:var(--color-row-hover); }
.tag,.status,.status-pill { border-radius:3px; }
.pagination { min-height:42px; margin-top:0; border:1px solid var(--reference-border); border-top:0; padding:7px 10px; background:var(--color-surface); }

.dashboard-hero {
  min-height:148px;
  border:1px solid #dce5f2;
  color:#17212b;
  background:#edf4ff;
}
.dashboard-hero>div>span,.dashboard-section-head span { color:#687a91; }
.dashboard-hero p,.dashboard-approval small { color:#627086; }
.dashboard-approval { border-color:#cddbef; color:#17212b; background:rgba(255,255,255,.56); }
:root[data-theme="dark"] .dashboard-hero { border-color:#31445e; color:#edf2f7; background:#1d2a3d; }
:root[data-theme="dark"] .dashboard-hero p,
:root[data-theme="dark"] .dashboard-approval small { color:#aab8ca; }
:root[data-theme="dark"] .dashboard-approval { border-color:#40516a; color:#edf2f7; background:rgba(255,255,255,.035); }

.dialog { border:0; border-radius:6px; box-shadow:0 24px 70px rgba(25,35,45,.24); }
.dialog::backdrop { background:rgba(27,35,44,.42); backdrop-filter:blur(2px); }
.dialog header,.dialog footer { border-color:var(--reference-border); background:var(--color-surface); }

.shell.designer-mode .topbar { min-height:64px; }
.shell.designer-mode #section-tabs { display:none; }
.shell.designer-mode #view { padding:0 20px 20px; }

@media (max-width:980px) {
  :root { --sidebar-width:176px; }
  #view { padding-right:18px; padding-left:18px; }
  #section-tabs { padding:0 18px; }
}

@media (max-width:820px) {
  .sidebar { width:min(var(--sidebar-width),86vw); }
  #section-tabs { top:78px; }
}

@media (max-width:560px) {
  .section-tabs--segmented {
    width:100%;
    max-width:calc(100vw - 36px);
  }
  .section-tabs--segmented button {
    min-height:38px;
    padding:0 13px;
  }
  .profile-trigger {
    min-width:var(--control-height);
    width:var(--control-height);
    padding:0;
    place-items:center;
  }
}