/* Global UI design system and cross-page polish layer.
 *
 * WHERE THIS LOADS: only templates/base_auth.html (sign-in, activation,
 * password reset) and templates/landing_page.html. Every signed-in page
 * goes through base.html, which loads summit_theme.css instead.
 *
 * THEMING: the names below are this file's own, older vocabulary. Each one
 * is now an ALIAS of the matching --c-* token from summit_theme.css, with
 * the value it used to hold as the fallback. So:
 *   • on the auth/landing pages, where summit_theme.css is not loaded, the
 *     --c-* tokens are undefined and every fallback applies — the pages
 *     render exactly as they did before, dark;
 *   • anywhere both stylesheets load, these follow the active theme instead
 *     of fighting it with a second, hardcoded dark palette.
 * Add new colors as --c-* tokens, not as new names here.
 */

:root{
  --bg-app:var(--c-bg-app, #111315);
  --surface-1:var(--c-surface-0, #1A1D21);
  --surface-2:var(--c-surface-1, #1E2227);
  --surface-3:var(--c-surface-2, #22272E);
  --border-subtle:var(--c-border, #31363D);
  --text-primary:var(--c-text, #F3F4F6);
  --text-secondary:var(--c-muted, rgba(243,244,246,0.60));
  /* Named "blue" from an older palette; it has been the copper accent for
     a long time. Kept under the old name so page CSS keeps working. */
  --accent-blue:var(--c-accent, #C97A32);
  --accent-blue-2:var(--c-accent-2, #E29A52);
  --on-accent:var(--c-on-accent, #0e0a06);
  --success:var(--c-success, #22c55e);
  /* Subtle "lift" overlay: white on dark, near-black on light. */
  --tint-rgb:var(--c-tint-rgb, 255, 255, 255);
  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-soft:var(--shadow-md, 0 10px 30px rgba(0,0,0,0.28));
  /* NOTE: --shadow-focus is deliberately NOT defined here. summit_theme.css
     owns that name; redefining it would silently overwrite the themed value
     whenever both stylesheets load. The one use site below carries the old
     value as its fallback instead. */
}

html, body{
  background:var(--bg-app);
  color:var(--text-primary);
}

body{
  font-family: "Segoe UI", "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

h1, .main-title{
  font-size:clamp(1.5rem, 2vw, 2rem);
  line-height:1.2;
  letter-spacing:0.01em;
  margin:0 0 16px;
  font-weight:700;
  color:var(--text-primary);
}

h2, h3, .section-title, .panel-title, .widget-card-title{
  color:var(--text-primary);
  font-weight:650;
}

label, .label, .subtitle, .sidebar-sub, .help, .muted, .main-sub, .count{
  color:var(--text-secondary) !important;
}

.workspace,
.auth-card,
.main,
.sidebar,
.modal,
.panel,
.card,
[class$="-card"],
[class*="-card "],
[class$="-panel"],
[class*="-panel "]{
  background:linear-gradient(180deg, var(--surface-1), var(--surface-2)) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:8px !important;
  box-shadow:var(--shadow-soft) !important;
}

.workspace{
  padding:24px !important;
}

.widget-card-head,
.panel-top,
.modal-header,
.top-row{
  border-bottom:1px solid var(--border-subtle);
  padding-bottom:12px;
  margin-bottom:12px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.input,
.widget-filter-select{
  background:rgba(var(--tint-rgb),0.03) !important;
  border:1px solid var(--border-subtle) !important;
  color:var(--text-primary) !important;
  border-radius:5px !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.widget-filter-select:focus{
  outline:none;
  border-color:var(--c-accent, rgba(77,163,255,0.68)) !important;
  box-shadow:var(--shadow-focus, 0 0 0 3px rgba(201,122,50,0.28)) !important;
}

/* ── Buttons ─────────────────────────────────────────────────
   Bare .btn is the PRIMARY action style (Summit orange).
   Variants opt out of it: .btn-secondary, .btn-ghost, .btn-red,
   .btn-outline, .btn-link, .btn-disabled.
   :where() keeps specificity at a plain class level so a page's
   own stylesheet can still override these without !important. */

.btn,
button,
input[type="button"],
input[type="submit"],
a.btn,
.link-btn{
  border:1px solid var(--border-subtle);
  border-radius:5px;
  font-weight:600;
  letter-spacing:0.01em;
  transition:transform .14s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

a.btn{ text-decoration:none; }

/* Primary */
.btn:where(:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-red):not(.btn-link):not(.btn-disabled)),
.btn-blue,
.btn-green,
.btn-primary,
button:where([type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link)),
input[type="submit"]{
  background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
  border-color:var(--c-accent-border, rgba(201,122,50,0.50));
  color:var(--on-accent);
}

.btn:where(:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-red):not(.btn-link):not(.btn-disabled)):hover,
.btn-blue:hover,
.btn-green:hover,
.btn-primary:hover,
button:where([type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link)):hover,
input[type="submit"]:hover{
  background:var(--accent-blue-2);
  border-color:var(--c-accent-border, rgba(226,154,82,0.70));
}

/* Secondary */
.btn-secondary{
  background:rgba(var(--tint-rgb),0.06);
  border-color:var(--border-subtle);
  color:var(--text-primary);
}

.btn-secondary:hover{
  background:rgba(var(--tint-rgb),0.10);
  border-color:rgba(var(--tint-rgb),0.16);
}

/* Ghost */
.btn-ghost,
.link-btn{
  background:transparent;
  border-color:transparent;
  color:var(--text-secondary);
}

.btn-ghost:hover,
.link-btn:hover{
  background:rgba(var(--tint-rgb),0.06);
  color:var(--text-primary);
  border-color:var(--border-subtle);
}

/* Danger */
.btn-red{
  background:var(--c-danger-bg, rgba(239,68,68,0.14));
  border-color:var(--c-danger-border, rgba(239,68,68,0.32));
  color:var(--c-danger-text, #fecaca);
}

.btn-red:hover{
  background:var(--c-danger-bg-strong, rgba(239,68,68,0.22));
}

/* Hover lift */
.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover,
.link-btn:hover{
  transform:translateY(-1px);
}

.nav-link{
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:5px !important;
  color:var(--text-secondary) !important;
  font-weight:600 !important;
}

.nav-link:hover{
  background:rgba(var(--tint-rgb),0.04) !important;
  color:var(--text-primary) !important;
  border-color:var(--border-subtle) !important;
}

.nav-link.active{
  color:var(--text-primary) !important;
  background:var(--c-accent-subtle, rgba(201,122,50,0.12)) !important;
  border-color:var(--c-accent-border, rgba(201,122,50,0.40)) !important;
  box-shadow:none !important;
}

table{
  width:100%;
  border-collapse:collapse;
  background:transparent !important;
}

thead th{
  color:var(--text-secondary);
  font-weight:600;
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  background:rgba(var(--tint-rgb),0.02) !important;
}

tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(var(--tint-rgb),0.06);
}

tbody tr{
  background:transparent !important;
}

tbody tr:hover{
  background:rgba(var(--tint-rgb),0.03) !important;
}

[class*="table"],
[class*="grid"] table,
.package-table-shell,
.map-wrap iframe,
.viewer-frame{
  background:transparent !important;
}

[class*="pill"],
[class*="badge"],
[class*="status"]{
  border-radius:999px !important;
  border:1px solid var(--border-subtle) !important;
  padding:6px 10px !important;
  font-weight:600 !important;
}

.status-approved,
.status-complete,
.status-success,
.status-done,
.status-active{
  background:var(--c-success-bg, rgba(34,197,94,0.16)) !important;
  border-color:var(--c-success-border, rgba(34,197,94,0.46)) !important;
  color:var(--c-success-text, #d5f9e4) !important;
}

[class*="count-pill"],
[class*="count_badge"],
[class*="widget-count-pill"]{
  background:rgba(var(--tint-rgb),0.06) !important;
  border-color:var(--border-subtle) !important;
  color:var(--text-secondary) !important;
}

.widget-canvas{
  border:1px solid var(--border-subtle) !important;
  background:rgba(var(--tint-rgb),0.01) !important;
}

.flash-banner.success{
  background:var(--c-success-bg, rgba(34,197,94,0.14)) !important;
  border-color:var(--c-success-border, rgba(34,197,94,0.35)) !important;
}

/* Reference-inspired dashboard polish layer */

/* A third palette, from an earlier dashboard pass. Same treatment as the
   set at the top of this file: every color is an alias of the matching
   --c-* token with its old value as the fallback, so the forced card
   backgrounds below follow the theme instead of pinning everything dark. */
:root{
  --ref-bg-0:var(--c-bg-base, #111315);
  --ref-bg-1:var(--c-bg-app, #111315);
  --ref-surface-0:var(--c-surface-0, #1A1D21);
  --ref-surface-1:var(--c-surface-1, #1E2227);
  --ref-surface-2:var(--c-surface-2, #22272E);
  --ref-line:var(--c-border, #31363D);
  --ref-line-strong:var(--c-border-strong, #3D444D);
  --ref-copy:var(--c-text, #F3F4F6);
  --ref-copy-soft:var(--c-muted, rgba(243,244,246,.60));
  --ref-accent:var(--c-accent, #C97A32);
  --ref-accent-soft:var(--c-accent-subtle, rgba(201,122,50,.12));
  --ref-accent-cool:var(--c-accent-2, #E29A52);
  --ref-success:var(--c-success, #67d3c2);
  --ref-warn:var(--c-warning, #b7c8da);
  --ref-danger:var(--c-danger, #d07a88);
  --ref-radius-card:8px;
  --ref-radius-soft:8px;
  --ref-shadow:var(--shadow-lg, 0 24px 80px rgba(0,0,0,.34));
}

body{
  color:var(--ref-copy);
}

.main-title,
.page-title,
.settings-title,
.production-title,
.calendar-heading,
.sidebar-title{
  letter-spacing:-0.03em !important;
}

.main-sub,
.page-subtitle,
.settings-sub,
.modal-sub,
.help,
.empty-copy,
.package-meta,
.job-big-sub2,
.loc-big-sub2,
.prod-workflow-meta,
.card-copy,
.release-notes{
  color:var(--ref-copy-soft) !important;
}

.workspace,
.settings-card,
.calendar-card,
.calendar-header-card,
.logs-workspace,
.license-card,
.plugin-card,
.release-row,
.log-card,
.empty-card,
.section,
.setting-row,
.detail-block,
.info-block,
.prod-card,
.prod-setting-card,
.widget-manager-item,
.widget-add-option{
  border-color:var(--ref-line) !important;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb),.04), transparent 18%),
    linear-gradient(180deg, var(--ref-surface-0), var(--ref-surface-1)) !important;
  box-shadow:var(--ref-shadow) !important;
}

.page-top,
.top-row,
.production-hero,
.license-hero,
.plugin-hero,
.settings-head{
  align-items:center !important;
}

.nav-link.active,
.tab-active,
.management-nav-btn.active,
.permission-title-btn.active,
.widget-manager-tab.active,
.today-pill,
.calendar-day.is-today,
.overview-scrubber-thumb,
.widget-count-pill,
.widget-active-pill,
.prod-count-pill,
.prod-package-pill,
.prod-step-pill,
.management-title-chip{
  background:linear-gradient(135deg, rgba(var(--tint-rgb),.14), rgba(var(--tint-rgb),.10)) !important;
  border-color:var(--ref-line-strong) !important;
  color:var(--ref-copy) !important;
  box-shadow:0 0 0 1px rgba(var(--tint-rgb),.10) inset !important;
}

.widget-canvas,
.prod-board-surface{
  border-color:rgba(var(--tint-rgb),.10) !important;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb),.04), rgba(var(--tint-rgb),.06)),
    var(--ref-surface-2) !important;
}

.overview-widget,
.job-big-card,
.loc-big-card,
.prod-package-card,
.package-card,
.production-log-entry,
.release-row,
.log-card,
.calendar-day,
.weekday-cell{
  border-color:rgba(var(--tint-rgb),.10) !important;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb),.04), transparent 24%),
    linear-gradient(180deg, var(--ref-surface-0), var(--ref-surface-1)) !important;
  box-shadow:var(--shadow-md, 0 18px 44px rgba(0,0,0,.22)) !important;
}

.job-big-card,
.loc-big-card{
  border-radius:8px !important;
}

.job-preview,
.loc-preview,
.map-wrap,
.prod-package-progress-inner{
  border:1px solid rgba(var(--tint-rgb),.08) !important;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb),.04), rgba(var(--tint-rgb),.06)),
    var(--ref-surface-2) !important;
}

.panel,
.tabs,
.panel-wrap,
.package-table-shell,
.logs-scroll,
.release-scroll,
.prod-package-viewport,
.prod-step-dropzone,
.prod-step-dropzone-active,
.production-log-shell{
  background:transparent !important;
}

.prod-step-dropzone,
.prod-step-dropzone-active{
  border-color:rgba(var(--tint-rgb),.10) !important;
}

.modal,
.widget-manager-modal,
.prod-modal{
  border-radius:8px !important;
  border-color:rgba(var(--tint-rgb),.10) !important;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb),.04), transparent 18%),
    linear-gradient(180deg, var(--ref-surface-0), var(--ref-surface-1)) !important;
  box-shadow:var(--shadow-panel, 0 34px 90px rgba(0,0,0,.48)) !important;
  backdrop-filter:blur(18px);
}

.backdrop,
.prod-backdrop,
.widget-manager-backdrop{
  background:var(--c-backdrop, rgba(4,8,14,.62)) !important;
  backdrop-filter:blur(10px) !important;
}

.field input,
.field select,
.field textarea,
.input,
.prod-filter-select,
.prod-form input[type="text"],
.widget-filter-select{
  border-radius:6px !important;
  border-color:var(--ref-line) !important;
  background:rgba(var(--tint-rgb),.04) !important;
  color:var(--ref-copy) !important;
}

.switch-track,
.permission-switch-track{
  border-color:var(--c-danger-border, rgba(239,107,115,.30)) !important;
  background:var(--c-danger-bg, rgba(239,107,115,.22)) !important;
}

.switch input:checked + .switch-track,
.permission-toggle:checked + .permission-switch-track{
  background:rgba(var(--tint-rgb),.22) !important;
  border-color:var(--ref-line-strong) !important;
}

.section-label-inline,
.eyebrow,
.overview-eyebrow,
.prod-kicker,
.card-label,
.info-label,
.detail-label,
.prod-filter-label,
.widget-filter-label{
  color:var(--c-dim, rgba(222,228,241,.56)) !important;
  letter-spacing:.18em !important;
}

.status-approved,
.status-complete,
.status-success,
.status-done,
.status-active,
.status-delivered,
.status-shipped,
.tone-active,
.package-status.status-approved,
.package-status.status-in_production,
.package-status-pill.status-in_production{
  background:var(--c-success-bg, rgba(103,211,194,.14)) !important;
  border-color:var(--c-success-border, rgba(103,211,194,.28)) !important;
  color:var(--c-success-text, #e5fffa) !important;
}

.package-status.status-pending,
.package-status.status-in_review,
.package-status-pill.status-in_review,
.status-pill-warn,
.tone-paused{
  background:var(--c-warning-bg, rgba(183,200,218,.14)) !important;
  border-color:var(--c-warning-border, rgba(183,200,218,.28)) !important;
  color:var(--c-warning-text, #edf4fb) !important;
}

.status-rejected,
.status-failed,
.tone-revoked{
  background:var(--c-danger-bg, rgba(239,107,115,.14)) !important;
  border-color:var(--c-danger-border, rgba(239,107,115,.28)) !important;
  color:var(--c-danger-text, #ffe4e7) !important;
}

.scrubber,
.prod-scrubber{
  accent-color:var(--ref-accent) !important;
}