/* Global UI design system and cross-page polish layer. */

:root{
  --bg-app:#111315;
  --surface-1:#1A1D21;
  --surface-2:#1E2227;
  --surface-3:#22272E;
  --border-subtle:#31363D;
  --text-primary:#F3F4F6;
  --text-secondary:rgba(243,244,246,0.60);
  --accent-blue:#C97A32;
  --success:#22c55e;
  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-soft:0 10px 30px rgba(0,0,0,0.28);
  --shadow-focus:0 0 0 3px rgba(201,122,50,0.28);
}

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(255,255,255,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:rgba(77,163,255,0.68) !important;
  box-shadow:var(--shadow-focus) !important;
}

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

/* Primary */
.btn-blue,
.btn-green,
.btn-primary,
button[type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link),
input[type="submit"]{
  background:var(--accent-blue) !important;
  border-color:rgba(201,122,50,0.50) !important;
  color:#0e0a06 !important;
}

/* Secondary */
.btn,
.btn-secondary,
.btn-red{
  background:rgba(255,255,255,0.06) !important;
  border-color:var(--border-subtle) !important;
  color:var(--text-primary) !important;
}

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

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

.btn-blue:hover,
.btn-green:hover,
.btn-primary:hover,
button[type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link):hover,
input[type="submit"]:hover{
  background:#E29A52 !important;
  border-color:rgba(226,154,82,0.70) !important;
}

.btn-secondary:hover,
.btn-red:hover,
.btn:hover,
button:hover,
a.btn:hover{
  background:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.16) !important;
}

.btn-ghost:hover,
.link-btn:hover,
.icon-close:hover,
.tab:hover{
  background:rgba(255,255,255,0.04) !important;
  color:var(--text-primary) !important;
  border-color:var(--border-subtle) !important;
}

.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(255,255,255,0.04) !important;
  color:var(--text-primary) !important;
  border-color:var(--border-subtle) !important;
}

.nav-link.active{
  color:var(--text-primary) !important;
  background:rgba(201,122,50,0.12) !important;
  border-color: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(255,255,255,0.02) !important;
}

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

tbody tr{
  background:transparent !important;
}

tbody tr:hover{
  background:rgba(255,255,255,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:rgba(34,197,94,0.16) !important;
  border-color:rgba(34,197,94,0.46) !important;
  color:#d5f9e4 !important;
}

[class*="count-pill"],
[class*="count_badge"],
[class*="widget-count-pill"]{
  background:rgba(255,255,255,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(255,255,255,0.01) !important;
}

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

/* Reference-inspired dashboard polish layer */

:root{
  --ref-bg-0:#111315;
  --ref-bg-1:#111315;
  --ref-surface-0:#1A1D21;
  --ref-surface-1:#1E2227;
  --ref-surface-2:#22272E;
  --ref-line:#31363D;
  --ref-line-strong:#3D444D;
  --ref-copy:#F3F4F6;
  --ref-copy-soft:rgba(243,244,246,.60);
  --ref-accent:#C97A32;
  --ref-accent-soft:rgba(201,122,50,.12);
  --ref-accent-cool:#E29A52;
  --ref-success:#67d3c2;
  --ref-warn:#b7c8da;
  --ref-danger:#d07a88;
  --ref-radius-card:8px;
  --ref-radius-soft:8px;
  --ref-shadow: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(255,255,255,.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;
}

.btn,
button,
input[type="submit"],
.overview-manage-btn,
.overview-secondary-btn,
.empty-action,
.widget-remove-btn,
.calendar-nav-btn,
.link-btn,
.logout-btn{
  transition:transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.overview-manage-btn:hover,
.overview-secondary-btn:hover,
.empty-action:hover,
.widget-remove-btn:hover,
.calendar-nav-btn:hover,
.link-btn:hover,
.logout-btn:hover{
  transform:translateY(-1px);
}

.btn-blue,
.btn-green,
.btn-primary,
.settings-save,
button[type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link),
input[type="submit"],
.overview-manage-btn,
.empty-action{
  background:linear-gradient(135deg, var(--ref-accent), var(--ref-accent-cool)) !important;
  border-color:rgba(157,183,206,.30) !important;
  color:#0e0a06 !important;
  box-shadow:0 16px 34px rgba(157,183,206,.16) !important;
}

.btn-red{
  background:rgba(239,107,115,.14) !important;
  border-color:rgba(239,107,115,.28) !important;
  color:#ffe4e7 !important;
}

.btn-ghost,
.btn-secondary,
.btn,
.widget-remove-btn,
.calendar-nav-btn,
.tab,
.icon-close,
.management-nav-btn{
  background:rgba(255,255,255,.05) !important;
  border-color:var(--ref-line) !important;
  color:var(--ref-copy) !important;
  box-shadow:none !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(242,244,248,.14), rgba(157,183,206,.16)) !important;
  border-color:rgba(157,183,206,.28) !important;
  color:#f7f8fb !important;
  box-shadow:0 0 0 1px rgba(157,183,206,.10) inset !important;
}

.widget-canvas,
.prod-board-surface{
  border-color:rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(242,244,248,.04), rgba(157,183,206,.06)),
    rgba(20,29,43,.64) !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(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(180deg, rgba(14,21,33,.94), rgba(18,27,41,.92)) !important;
  box-shadow: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(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(242,244,248,.04), rgba(157,183,206,.06)),
    rgba(24,34,50,.56) !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(255,255,255,.10) !important;
}

.modal,
.widget-manager-modal,
.prod-modal{
  border-radius:8px !important;
  border-color:rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%),
    linear-gradient(180deg, rgba(12,18,28,.96), rgba(18,26,39,.96)) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.48) !important;
  backdrop-filter:blur(18px);
}

.backdrop,
.prod-backdrop,
.widget-manager-backdrop{
  background: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(255,255,255,.04) !important;
  color:var(--ref-copy) !important;
}

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

.switch input:checked + .switch-track,
.permission-toggle:checked + .permission-switch-track{
  background:rgba(157,183,206,.22) !important;
  border-color:rgba(157,183,206,.34) !important;
}

.section-label-inline,
.eyebrow,
.overview-eyebrow,
.prod-kicker,
.card-label,
.info-label,
.detail-label,
.prod-filter-label,
.widget-filter-label{
  color: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:rgba(103,211,194,.14) !important;
  border-color:rgba(103,211,194,.28) !important;
  color:#e5fffa !important;
}

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

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

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