/* WhiteTrack final appearance layer 012.
   Deliberately loaded after every page stylesheet so dark/light mode wins the cascade. */

:root{
  --wt-radius:18px;
  --wt-focus:0 0 0 3px rgba(224,164,0,.24);
}

/* Appearance selector ---------------------------------------------------- */
.theme-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}
.theme-choice{
  position:relative;
  display:grid;
  grid-template-rows:96px auto auto;
  gap:9px;
  min-height:194px;
  padding:14px!important;
  text-align:left;
  border-radius:16px!important;
  border:1px solid var(--line)!important;
  background:var(--panel2)!important;
  color:var(--text)!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.theme-choice:hover{transform:translateY(-2px);border-color:rgba(224,164,0,.5)!important}
.theme-choice:focus-visible{outline:0;box-shadow:var(--wt-focus)!important}
.theme-choice.is-selected{
  border-color:#e0a400!important;
  box-shadow:0 0 0 2px rgba(224,164,0,.18),0 15px 34px rgba(0,0,0,.12)!important;
}
.theme-choice.is-selected::after{
  content:"✓";
  position:absolute;
  top:9px;right:9px;
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:#e0a400;color:#111;font-weight:900;
}
.theme-choice strong{font-size:1rem;color:var(--text)!important}
.theme-choice small{line-height:1.45;color:var(--muted)!important}
.theme-choice-preview{
  position:relative;overflow:hidden;display:block;
  border-radius:11px;border:1px solid rgba(127,127,127,.25);
  background:#080b09;
}
.theme-choice-preview::before{content:"";position:absolute;inset:0 auto 0 0;width:27%;background:#141816;border-right:1px solid #333}
.theme-choice-preview i{position:absolute;left:34%;top:18%;right:9%;height:19%;border-radius:6px;background:#262c29}
.theme-choice-preview b{position:absolute;left:34%;top:48%;right:9%;bottom:13%;border-radius:7px;background:#1b201e}
.theme-choice[data-theme-choice="light"] .theme-choice-preview{background:#f1f4f2}
.theme-choice[data-theme-choice="light"] .theme-choice-preview::before{background:#fff;border-right-color:#d8dfda}
.theme-choice[data-theme-choice="light"] .theme-choice-preview i{background:#dce3de}
.theme-choice[data-theme-choice="light"] .theme-choice-preview b{background:#fff;border:1px solid #d8dfda}
.theme-choice[data-theme-choice="system"] .theme-choice-preview{background:linear-gradient(90deg,#080b09 0 50%,#f1f4f2 50%)}
.theme-status{display:inline-flex;margin-top:14px;padding:7px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--panel2);font-size:.82rem}

/* Global controls -------------------------------------------------------- */
html[data-theme="dark"] :is(button,.btn,.sp-button,.sp-icon-button,.late-button,.exception-button){text-shadow:none}
html[data-theme="light"] body{color:#17201b!important}
html[data-theme="light"] :is(h1,h2,h3,h4,h5,h6,strong,label,legend){color:#17201b}
html[data-theme="light"] :is(p,small,.muted,.subtle,.help-text,.hint){color:#5f6b64}
html[data-theme="light"] :is(button,.btn,.sp-button,.sp-icon-button,.late-button,.exception-button){font-weight:700}
html[data-theme="light"] :is(button,.btn,.sp-button,.sp-icon-button,.late-button,.exception-button):not(.primary):not(.danger):not(.is-active){
  background:#f2f5f3!important;color:#1b2720!important;border-color:#cfd8d2!important;
}
html[data-theme="light"] :is(button,.btn,.sp-button,.sp-icon-button,.late-button,.exception-button):not(.primary):not(.danger):not(.is-active):hover{
  background:#e6ece8!important;color:#111b15!important;border-color:#b9c6be!important;
}
html[data-theme="light"] :is(.primary,.btn.primary,.sp-button.primary){background:#17201b!important;color:#fff!important;border-color:#17201b!important}
html[data-theme="light"] :is(input,select,textarea){color:#152019!important;background:#fff!important}
html[data-theme="light"] :is(input,select,textarea):focus{outline:none;border-color:#b7780b!important;box-shadow:var(--wt-focus)!important}
html[data-theme="light"] option{background:#fff;color:#152019}

/* On-Time Performance ---------------------------------------------------- */
html[data-theme="light"] .sp-shell{color:#17201b}
html[data-theme="light"] :is(.sp-hero,.sp-panel,.sp-kpi,.sp-filter-bar,.sp-weekly-insight,.sp-comparison-row){
  background:#fff!important;border-color:#d5ddd8!important;box-shadow:0 15px 40px rgba(25,45,32,.08)!important;
}
html[data-theme="light"] :is(.sp-hero h1,.sp-hero h2,.sp-panel h2,.sp-panel h3,.sp-kpi strong,.sp-score-foot strong,.sp-comparison-row strong,.sp-table td strong){color:#142019!important}
html[data-theme="light"] :is(.sp-hero p,.sp-hero-meta,.sp-score-foot,.sp-kpi small,.sp-panel-head p,.sp-table-summary,.sp-comparison-row small,.sp-field label,.sp-weekly-insight){color:#5f6c64!important}
html[data-theme="light"] .sp-hero-score>strong{color:#17201b!important}
html[data-theme="light"] .sp-filter-bar :is(input,select){background:#fff!important;color:#17201b!important;border-color:#cbd5cf!important}
html[data-theme="light"] .sp-period-toggle{background:#edf2ef!important;border-color:#d2dad5!important}
html[data-theme="light"] .sp-period-toggle button{color:#37453d!important;background:transparent!important;border-color:transparent!important}
html[data-theme="light"] .sp-period-toggle button.is-active{background:#17201b!important;color:#fff!important}
html[data-theme="light"] .sp-table-wrap{background:#fff!important;border-color:#d5ddd8!important}
html[data-theme="light"] .sp-table thead th{background:#edf2ef!important;color:#334139!important;border-color:#d5ddd8!important}
html[data-theme="light"] .sp-table tbody td{color:#243129!important;border-color:#e1e7e3!important;background:#fff!important}
html[data-theme="light"] .sp-table tbody tr:hover td{background:#f3f7f4!important}
html[data-theme="light"] .sp-mini-bar{background:#e3e9e5!important}
html[data-theme="light"] .sp-chart-shell{background:linear-gradient(180deg,#fff,#f7faf8)!important;border-color:#d5ddd8!important}
html[data-theme="light"] .sp-section-nav a{background:#f0f4f1!important;color:#26342c!important;border-color:#d5ddd8!important}
html[data-theme="light"] .sp-section-nav a:hover{background:#e4ebe6!important}

/* Delivery Tracking ------------------------------------------------------ */
html[data-theme="light"] :is(.delivery-card,.delivery-intelligence-card,.delivery-destination,.delivery-driver,.manifest-stop,.journey-summary,.delivery-panel){color:#17201b}
html[data-theme="light"] :is(.delivery-destination,.delivery-driver,.delivery-card-section,.journey-summary,.manifest-stop){background:#f7f9f7!important;border-color:#d6ddd8!important}
html[data-theme="light"] :is(.delivery-card p,.delivery-card small,.delivery-destination small,.delivery-driver small,.manifest-stop small,.journey-summary small){color:#607068!important}

/* Late Deliveries / Exceptions ------------------------------------------ */
html[data-theme="light"] :is(.late-shell,.exception-shell,.late-card,.late-response-desk,.exception-workbench,.exception-card,.response-desk){color:#17201b}
html[data-theme="light"] :is(.late-card,.late-response-desk,.exception-card,.exception-workbench,.response-desk){background:#fff!important;border-color:#d5ddd8!important}
html[data-theme="light"] :is(.late-card small,.late-response-desk small,.exception-card small,.exception-workbench small,.response-desk small){color:#607068!important}

/* Admin, workspace access, settings and generic cards -------------------- */
html[data-theme="light"] :is(.workspace-card,.workspace-panel,.admin-card,.settings-card,.form-card,.auth-card){background:#fff!important;color:#17201b!important;border-color:#d5ddd8!important}
html[data-theme="light"] :is(.workspace-card p,.workspace-panel p,.admin-card p,.settings-card p,.form-card p,.auth-card p){color:#607068!important}
html[data-theme="light"] .theme-choice{background:#f7f9f7!important}
html[data-theme="light"] .theme-choice.is-selected{background:#fffaf0!important}

/* Dark-mode consistency -------------------------------------------------- */
html[data-theme="dark"] :is(.sp-filter-bar input,.sp-filter-bar select,.sp-table-wrap,.sp-panel,.sp-kpi,.theme-choice){color:#f1f5f2}
html[data-theme="dark"] .theme-choice{background:linear-gradient(180deg,#202522,#171b19)!important;border-color:#343b37!important}
html[data-theme="dark"] .theme-choice.is-selected{border-color:#e0a400!important}

@media (max-width:900px){.theme-choice-grid{grid-template-columns:1fr}.theme-choice{grid-template-rows:80px auto auto;min-height:166px}}