/* Phase 9 - configurable professional portal themes */
:root {
  --portal-bg: #f3f6fa;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f7f9fc;
  --portal-text: #172033;
  --portal-muted: #66758a;
  --portal-border: #dce4ed;
  --portal-primary: #164d7d;
  --portal-primary-2: #2387b8;
  --portal-accent: #2f9ec4;
  --portal-success: #258a62;
  --portal-warning: #c98b1b;
  --portal-danger: #c95145;
  --portal-collection: #7b61b6;
  --portal-nav: #102f4f;
  --portal-nav-text: #edf5fb;
  --portal-shadow: 0 10px 32px rgba(25,55,84,.08);
  --portal-shadow-soft: 0 3px 14px rgba(25,55,84,.06);
  --portal-radius: 14px;
}

html[data-theme="skynet-light"] {
  color-scheme: light;
}

html[data-theme="control-tower"] {
  color-scheme: dark;
  --portal-bg: #0d1724;
  --portal-surface: #152334;
  --portal-surface-soft: #1a2a3d;
  --portal-text: #ecf3f9;
  --portal-muted: #9eb0c2;
  --portal-border: #2b4156;
  --portal-primary: #45a7d4;
  --portal-primary-2: #72c6e6;
  --portal-accent: #41b8cf;
  --portal-success: #4dc28b;
  --portal-warning: #e2ae48;
  --portal-danger: #ef776a;
  --portal-collection: #a893db;
  --portal-nav: #08111d;
  --portal-nav-text: #f4f8fb;
  --portal-shadow: 0 18px 42px rgba(0,0,0,.28);
  --portal-shadow-soft: 0 8px 20px rgba(0,0,0,.18);
}

html, body { background: var(--portal-bg); color: var(--portal-text); }
body { min-height:100vh; }
.page-shell { max-width: 1480px; }

/* Brand / navigation */
.portal-nav { background: linear-gradient(135deg,var(--portal-nav),color-mix(in srgb,var(--portal-nav) 76%,var(--portal-primary-2))); box-shadow:0 2px 16px rgba(10,30,50,.16); padding:.7rem 1.6rem; }
.brand.brand-lockup { display:flex; align-items:center; gap:.72rem; min-width:280px; }
.brand-logo { width:128px; height:auto; filter:brightness(0) invert(1); }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:.95rem; letter-spacing:.01em; }
.brand-copy small { font-size:.63rem; opacity:.72; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:.22rem; }
.portal-nav .nav-link,.portal-nav .nav-dropdown-toggle { color:var(--portal-nav-text); opacity:.9; }
.portal-nav .nav-link:hover,.portal-nav .nav-dropdown-toggle:hover { opacity:1; background:rgba(255,255,255,.08); border-radius:8px; }
.nav-dropdown-menu { background:var(--portal-surface)!important; border-color:var(--portal-border)!important; box-shadow:var(--portal-shadow)!important; }
.nav-dropdown-menu a { color:var(--portal-text)!important; }
.nav-dropdown-menu a:hover { background:var(--portal-surface-soft)!important; }
.nav-menu-group strong { color:var(--portal-muted)!important; }
.nav-user { gap:.55rem!important; }
.nav-user-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.appearance-wrap { position:relative; }
.appearance-toggle { margin:0; padding:.42rem .65rem; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:white; border-radius:8px; font-size:.82rem; }
.appearance-menu { display:none; position:absolute; z-index:1200; right:0; top:calc(100% + .55rem); width:245px; background:var(--portal-surface); color:var(--portal-text); border:1px solid var(--portal-border); border-radius:12px; box-shadow:var(--portal-shadow); padding:.75rem; }
.appearance-wrap.open .appearance-menu { display:block; }
.appearance-menu .appearance-title { font-size:.72rem; color:var(--portal-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; margin:.1rem .25rem .55rem; }
.theme-choice { width:100%; margin:.25rem 0; display:flex; align-items:center; justify-content:space-between; padding:.7rem .75rem; background:var(--portal-surface-soft); color:var(--portal-text); border:1px solid var(--portal-border); border-radius:9px; text-align:left; }
.theme-choice.active { border-color:var(--portal-primary-2); box-shadow:0 0 0 2px color-mix(in srgb,var(--portal-primary-2) 20%,transparent); }
.theme-swatch { display:flex; gap:4px; }
.theme-swatch i { width:10px; height:10px; border-radius:50%; display:block; }

/* Global surfaces */
.panel,.card,.table-shell,.login-panel,.result-panel,.control-filter-panel,.control-kpis>article,.executive-kpis>.kpi-static,.kpi-link>article { background:var(--portal-surface)!important; color:var(--portal-text); border-color:var(--portal-border)!important; box-shadow:var(--portal-shadow-soft)!important; }
.panel,.card,.table-shell,.control-filter-panel,.control-kpis>article,.executive-kpis>.kpi-static,.kpi-link>article { border-radius:var(--portal-radius)!important; }
.control-kpis>article,.executive-kpis>.kpi-static,.kpi-link>article,.kpi-card { border-left:4px solid var(--kpi-accent,#2c7da0)!important; }
.muted,.field-help,.metric-definition,.panel p,.panel small,.control-kpis small { color:var(--portal-muted)!important; }
.control-hero { background:linear-gradient(135deg,color-mix(in srgb,var(--portal-primary) 94%,#07111b),color-mix(in srgb,var(--portal-primary-2) 78%,#13283d))!important; box-shadow:var(--portal-shadow); border-radius:18px!important; }
.panel-kicker { color:var(--portal-accent)!important; }
.panel-title-row h2,.page-heading h1,.page-heading-row h2,.control-kpis strong,.mini-stat strong,.trend-column strong,.account-name-cell,.health-ring strong { color:var(--portal-text)!important; }

/* Forms */
input,select,textarea { background:var(--portal-surface-soft)!important; color:var(--portal-text)!important; border-color:var(--portal-border)!important; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--portal-primary-2)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--portal-primary-2) 18%,transparent); }
button,.primary-link { background:var(--portal-primary)!important; }
button:hover,.primary-link:hover { filter:brightness(1.08); }
.secondary-button,.button-secondary { background:transparent!important; color:var(--portal-primary-2)!important; border-color:var(--portal-border)!important; }

/* Tables */
table { color:var(--portal-text); }
th { background:var(--portal-surface-soft)!important; color:var(--portal-muted)!important; border-color:var(--portal-border)!important; }
td { border-color:var(--portal-border)!important; }
.performance-table tbody tr:hover,.shipment-table tbody tr:hover,tbody tr:hover { background:color-mix(in srgb,var(--portal-primary-2) 7%,var(--portal-surface))!important; }

/* Charts and cards */
.metric-bar i,.status-progress>i,.ratio-card>i,.track,.tracking-progress-bar { background:color-mix(in srgb,var(--portal-border) 70%,transparent)!important; }
.metric-bar b,.status-progress>i b { background:var(--portal-primary-2)!important; }
.account-bar b { background:linear-gradient(90deg,var(--portal-primary),var(--portal-primary-2))!important; }
.health-ring { background:conic-gradient(var(--portal-success) calc(var(--pct)*1%),color-mix(in srgb,var(--portal-border) 65%,transparent) 0)!important; }
.health-ring>div { background:var(--portal-surface)!important; }
.metric-definition { background:var(--portal-surface-soft)!important; border:1px solid var(--portal-border); }
.notice.success { background:color-mix(in srgb,var(--portal-success) 16%,var(--portal-surface))!important; color:var(--portal-success)!important; }
.notice.error { background:color-mix(in srgb,var(--portal-danger) 16%,var(--portal-surface))!important; color:var(--portal-danger)!important; }

/* Theme 2 gets slightly denser, sharper control-tower styling */
html[data-theme="control-tower"] .page-shell { max-width:1540px; }
html[data-theme="control-tower"] .panel,
html[data-theme="control-tower"] .card,
html[data-theme="control-tower"] .control-kpis>article,
html[data-theme="control-tower"] .executive-kpis>.kpi-static,
html[data-theme="control-tower"] .kpi-link>article { border:1px solid var(--portal-border); }
html[data-theme="control-tower"] .control-kpis>article,
html[data-theme="control-tower"] .executive-kpis>.kpi-static,
html[data-theme="control-tower"] .kpi-link>article,
html[data-theme="control-tower"] .kpi-card { border-left:4px solid var(--kpi-accent,#2c7da0)!important; }
html[data-theme="control-tower"] .control-hero { border:1px solid #28435d; }
html[data-theme="control-tower"] .status-label { color:#0a1520; }
html[data-theme="control-tower"] .status-label.delivered { background:var(--portal-success); }
html[data-theme="control-tower"] .status-label.delayed { background:var(--portal-danger); }
html[data-theme="control-tower"] .status-label.pending { background:var(--portal-warning); }
html[data-theme="control-tower"] .status-label.readyforcollection { background:var(--portal-collection); }
html[data-theme="control-tower"] .status-label.ontime { background:var(--portal-accent); }

@media(max-width:1050px){
  .brand.brand-lockup{min-width:0}.brand-logo{width:112px}.brand-copy{display:none}.appearance-menu{right:auto;left:0}
}

/* Phase 9.1 - SkyNet corporate header refinement */
.portal-nav {
  min-height: 82px;
  padding: .8rem 2.4rem;
  background: #202c39;
  box-shadow: 0 2px 16px rgba(5,15,25,.20);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.portal-nav-left { gap: 1.15rem; }
.brand.brand-lockup {
  min-width: 390px;
  gap: 1.2rem;
  padding-right: 1.3rem;
  margin-right: .35rem;
  border-right: 1px solid rgba(255,255,255,.12);
}
.brand-logo {
  width: 208px;
  max-height: 62px;
  object-fit: contain;
  filter: none;
}
.brand-copy { min-width: 150px; }
.brand-copy strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
}
.portal-nav .nav-link,
.portal-nav .nav-dropdown-toggle {
  color: #d2d9e2;
  font-weight: 600;
  padding: .7rem .82rem;
}
.portal-nav .nav-link:hover,
.portal-nav .nav-dropdown-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
}
.appearance-toggle {
  background: transparent;
  border-color: #597084;
  color: #f7f9fb;
  font-weight: 600;
  padding: .62rem .82rem;
}
.portal-hero .eyebrow {
  color: #ef2a23;
  letter-spacing: .12em;
}
.portal-hero h1 { letter-spacing: -.02em; }

html[data-theme="control-tower"] .portal-nav { background:#0d1722; }

@media(max-width:1200px){
  .brand.brand-lockup{min-width:315px}.brand-logo{width:175px}.brand-copy strong{font-size:.92rem}
}
@media(max-width:1050px){
  .portal-nav{padding:.7rem 1rem}.brand.brand-lockup{width:auto;min-width:0;border-right:0;padding-right:.5rem;margin-right:0}.brand-logo{width:165px}.brand-copy{display:flex}.portal-nav-left{gap:.4rem}
}
@media(max-width:760px){
  .brand-copy{display:none}.brand-logo{width:170px}.portal-nav{min-height:auto}.brand.brand-lockup{width:100%}
}

/* Phase 9.66 Fix 1: make hero navigation actions clearly actionable. */
.control-hero .hero-actions .button,
.control-hero .hero-actions .button-secondary {
    background:var(--portal-primary-2)!important;
    color:#fff!important;
    border:1px solid color-mix(in srgb,#fff 30%,var(--portal-primary-2))!important;
    box-shadow:0 3px 10px rgba(0,0,0,.14);
    font-weight:600;
    opacity:1!important;
}
.control-hero .hero-actions .button:hover,
.control-hero .hero-actions .button-secondary:hover {
    filter:brightness(1.12);
    transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.control-hero .hero-actions .button:focus-visible,
.control-hero .hero-actions .button-secondary:focus-visible {
    outline:2px solid #fff;
    outline-offset:2px;
}