/* =========================================================
   DSB V74 — GLOBAL SKIN ENGINE / ALL DIVISIONS
   Header family follows the Integrated Control Center hero.
   One key: html[data-dsb-skin="blue|clean|dark|teal"]
   ========================================================= */

html[data-dsb-skin="blue"]{
  --dsb-page-bg:radial-gradient(circle at 8% 0,#dbeaf5 0,transparent 28%),linear-gradient(180deg,#eaf2f7 0%,#f7fafc 56%,#edf3f7 100%);
  --dsb-page-text:#10283e;--dsb-page-muted:#6a8295;--dsb-surface:#fff;--dsb-surface-2:#f7fbfe;--dsb-border:#d7e3eb;--dsb-soft:#edf5fa;
  --dsb-header-bg:linear-gradient(125deg,#082d4c 0%,#0b5476 58%,#0b7b7a 100%);--dsb-header-text:#fff;--dsb-header-muted:#d4e8f2;--dsb-header-kicker:#b9dce9;
  --dsb-header-border:rgba(255,255,255,.14);--dsb-header-shadow:0 20px 48px rgba(7,35,57,.18);--dsb-header-glass:rgba(255,255,255,.10);--dsb-header-glass-hover:rgba(255,255,255,.18);
  --dsb-hero-bg:linear-gradient(125deg,#082d4c 0%,#0b5476 58%,#0b7b7a 100%);--dsb-accent:#0b6694;
}
html[data-dsb-skin="clean"]{
  --dsb-page-bg:linear-gradient(180deg,#f5f8fb 0%,#fff 48%,#f4f7fa 100%);
  --dsb-page-text:#10283e;--dsb-page-muted:#6d8294;--dsb-surface:#fff;--dsb-surface-2:#f8fbfd;--dsb-border:#d8e3eb;--dsb-soft:#f1f6f9;
  --dsb-header-bg:linear-gradient(180deg,#ffffff 0%,#f6fafc 100%);--dsb-header-text:#123d5a;--dsb-header-muted:#6b8395;--dsb-header-kicker:#50738b;
  --dsb-header-border:#d6e2eb;--dsb-header-shadow:0 14px 34px rgba(13,48,72,.08);--dsb-header-glass:#f3f8fb;--dsb-header-glass-hover:#eaf3f8;
  --dsb-hero-bg:linear-gradient(135deg,#e9f3fa 0%,#f8fbfd 58%,#e9f7f5 100%);--dsb-accent:#0b6097;
}
html[data-dsb-skin="teal"]{
  --dsb-page-bg:radial-gradient(circle at 8% 0,#d8efec 0,transparent 28%),linear-gradient(180deg,#e8f5f4 0%,#f8fbfb 58%,#edf7f6 100%);
  --dsb-page-text:#11363d;--dsb-page-muted:#64858a;--dsb-surface:#fff;--dsb-surface-2:#f4fbfa;--dsb-border:#cfe3df;--dsb-soft:#e9f6f4;
  --dsb-header-bg:linear-gradient(125deg,#073b4b 0%,#0a6d72 58%,#0d9287 100%);--dsb-header-text:#fff;--dsb-header-muted:#d4efec;--dsb-header-kicker:#b9e4df;
  --dsb-header-border:rgba(255,255,255,.15);--dsb-header-shadow:0 20px 48px rgba(5,63,66,.18);--dsb-header-glass:rgba(255,255,255,.10);--dsb-header-glass-hover:rgba(255,255,255,.18);
  --dsb-hero-bg:linear-gradient(125deg,#073b4b 0%,#0a6d72 58%,#0d9287 100%);--dsb-accent:#0a7774;
}
html[data-dsb-skin="dark"]{
  --dsb-page-bg:radial-gradient(circle at 10% 0,#102b3e 0,transparent 31%),linear-gradient(180deg,#07131e 0%,#0a1722 55%,#08121c 100%);
  --dsb-page-text:#e8f2f8;--dsb-page-muted:#9eb4c3;--dsb-surface:#0e2231;--dsb-surface-2:#112939;--dsb-border:#294556;--dsb-soft:#173345;
  --dsb-header-bg:linear-gradient(125deg,#06121d 0%,#0a2638 58%,#0c4d55 100%);--dsb-header-text:#f5fbff;--dsb-header-muted:#b9cfdb;--dsb-header-kicker:#96bdc9;
  --dsb-header-border:#294a5c;--dsb-header-shadow:0 20px 52px rgba(0,0,0,.32);--dsb-header-glass:rgba(255,255,255,.08);--dsb-header-glass-hover:rgba(255,255,255,.14);
  --dsb-hero-bg:linear-gradient(125deg,#06121d 0%,#0a2638 58%,#0c4d55 100%);--dsb-accent:#39a7b0;
}

/* whole application shell follows the same skin */
html[data-dsb-skin] body{background:var(--dsb-page-bg)!important;color:var(--dsb-page-text)!important;transition:background .18s ease,color .18s ease}
html[data-dsb-skin] .wrap,html[data-dsb-skin] .v38-launch-shell,html[data-dsb-skin] .r30-shell,html[data-dsb-skin] .fo-shell{color:var(--dsb-page-text)!important}
html[data-dsb-skin] .v38-launch-shell{background:transparent!important}

/* one visual family for every division header */
html[data-dsb-skin] .top,
html[data-dsb-skin] .v38-launch-head,
html[data-dsb-skin] .v50-head,
html[data-dsb-skin] .fo-head,
html[data-dsb-skin] .r30-header,
html[data-dsb-skin] .r71-viewer-header,
html[data-dsb-skin] .header{
  background:var(--dsb-header-bg)!important;
  color:var(--dsb-header-text)!important;
  border:1px solid var(--dsb-header-border)!important;
  box-shadow:var(--dsb-header-shadow)!important;
  border-radius:26px!important;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
html[data-dsb-skin] .top:before,
html[data-dsb-skin] .v38-launch-head:before,
html[data-dsb-skin] .fo-head:before,
html[data-dsb-skin] .r30-header:before,
html[data-dsb-skin] .header:before{
  content:"";position:absolute;right:-90px;top:-170px;width:360px;height:360px;border-radius:50%;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.055);box-shadow:0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012)
}
html[data-dsb-skin="clean"] .top:before,html[data-dsb-skin="clean"] .v38-launch-head:before,html[data-dsb-skin="clean"] .fo-head:before,html[data-dsb-skin="clean"] .r30-header:before,html[data-dsb-skin="clean"] .header:before{background:rgba(11,96,151,.035);box-shadow:0 0 0 55px rgba(11,96,151,.015),0 0 0 110px rgba(11,96,151,.009)}

/* header typography */
html[data-dsb-skin] .top .title b,
html[data-dsb-skin] .top .title span,
html[data-dsb-skin] .top .header-eyebrow,
html[data-dsb-skin] .v67-launch-title h1,
html[data-dsb-skin] .v67-launch-title p,
html[data-dsb-skin] .v38-eyebrow,
html[data-dsb-skin] .v50-brand h1,
html[data-dsb-skin] .v50-brand p,
html[data-dsb-skin] .v50-brand span,
html[data-dsb-skin] .fo-head h1,
html[data-dsb-skin] .fo-head p,
html[data-dsb-skin] .fo-head .eyebrow,
html[data-dsb-skin] .r30-brand h1,
html[data-dsb-skin] .r30-brand p,
html[data-dsb-skin] .r67-eyebrow,
html[data-dsb-skin] .r71-viewer-copy h1,
html[data-dsb-skin] .r71-viewer-copy p,
html[data-dsb-skin] .r71-viewer-kicker,
html[data-dsb-skin] .header h1,
html[data-dsb-skin] .header p,
html[data-dsb-skin] .header .brand-eyebrow{color:var(--dsb-header-text)!important}
html[data-dsb-skin] .top .title span,
html[data-dsb-skin] .top .header-eyebrow,
html[data-dsb-skin] .v67-launch-title p,
html[data-dsb-skin] .v38-eyebrow,
html[data-dsb-skin] .v50-brand p,
html[data-dsb-skin] .v50-brand span,
html[data-dsb-skin] .fo-head p,
html[data-dsb-skin] .fo-head .eyebrow,
html[data-dsb-skin] .r30-brand p,
html[data-dsb-skin] .r67-eyebrow,
html[data-dsb-skin] .r71-viewer-copy p,
html[data-dsb-skin] .r71-viewer-kicker,
html[data-dsb-skin] .header p,
html[data-dsb-skin] .header .brand-eyebrow{color:var(--dsb-header-muted)!important}

/* logos remain crisp on the hero header */
html[data-dsb-skin] .top .logo,
html[data-dsb-skin] .v38-launch-brand img,
html[data-dsb-skin] .v50-brand img,
html[data-dsb-skin] .fo-head img,
html[data-dsb-skin] .r30-brand img,
html[data-dsb-skin] .r71-viewer-logo-box,
html[data-dsb-skin] .header .brand-logo{
  background:#fff!important;border-color:rgba(255,255,255,.48)!important;box-shadow:0 10px 28px rgba(3,16,35,.16)!important
}

/* glass controls: Kalender / Skin / About / account all follow active skin */
html[data-dsb-skin] .top .chip,
html[data-dsb-skin] .v67-system-row>*,html[data-dsb-skin] .v67-account-row>*,
html[data-dsb-skin] .fo-user>*,html[data-dsb-skin] .fo-syncbar>*,
html[data-dsb-skin] .r67-bod-system-row>*,html[data-dsb-skin] .r67-bod-account-row>*,
html[data-dsb-skin] .r71-toolbar-actions>*,html[data-dsb-skin] .r71-toolbar-user>*{
  background:var(--dsb-header-glass)!important;color:var(--dsb-header-text)!important;border-color:var(--dsb-header-border)!important;box-shadow:none!important
}
html[data-dsb-skin] .top .chip:hover,
html[data-dsb-skin] .v67-system-row>*:hover,html[data-dsb-skin] .v67-account-row>*:hover,
html[data-dsb-skin] .fo-user>*:hover,html[data-dsb-skin] .fo-syncbar>*:hover,
html[data-dsb-skin] .r67-bod-system-row>*:hover,html[data-dsb-skin] .r67-bod-account-row>*:hover{background:var(--dsb-header-glass-hover)!important}
html[data-dsb-skin] .top .logout,html[data-dsb-skin] .v67-logout{background:#fff!important;color:#123d5a!important;border-color:#fff!important;font-weight:900!important}
html[data-dsb-skin="clean"] .top .logout,html[data-dsb-skin="clean"] .v67-logout{background:#173f5d!important;color:#fff!important;border-color:#173f5d!important}
html[data-dsb-skin] .v67-system-row .v38-online,html[data-dsb-skin] .fo-user .online{background:rgba(44,209,137,.16)!important;color:#bff6da!important;border-color:rgba(92,228,161,.28)!important}
html[data-dsb-skin="clean"] .v67-system-row .v38-online,html[data-dsb-skin="clean"] .fo-user .online{background:#edf9f3!important;color:#147451!important;border-color:#cee6da!important}

/* role / division navigation follows the selected skin */
html[data-dsb-skin] .role-nav,html[data-dsb-skin] .fo-nav{background:color-mix(in srgb,var(--dsb-surface) 94%,transparent)!important;border-color:var(--dsb-border)!important;color:var(--dsb-page-text)!important}
html[data-dsb-skin] .role-nav a,html[data-dsb-skin] .fo-nav a{background:var(--dsb-soft)!important;color:var(--dsb-page-text)!important;border-color:var(--dsb-border)!important}
html[data-dsb-skin] .role-nav a.active,html[data-dsb-skin] .role-nav a:hover,html[data-dsb-skin] .fo-nav a.active,html[data-dsb-skin] .fo-nav a:hover{background:var(--dsb-accent)!important;color:#fff!important;border-color:var(--dsb-accent)!important}

/* the Control Center hero changes with the same skin (reference requested by user) */
html[data-dsb-skin] .v38-welcome,html[data-dsb-skin] .v50-dashboard,html[data-dsb-skin] .hero{background:var(--dsb-hero-bg)!important;color:var(--dsb-header-text)!important;border-color:var(--dsb-header-border)!important}
html[data-dsb-skin] .v38-welcome p,html[data-dsb-skin] .v38-welcome span,html[data-dsb-skin] .v50-dashboard p,html[data-dsb-skin] .hero p{color:var(--dsb-header-muted)!important}
html[data-dsb-skin="clean"] .v38-welcome,html[data-dsb-skin="clean"] .v50-dashboard,html[data-dsb-skin="clean"] .hero{color:#123d5a!important;border:1px solid #d6e2eb!important}
html[data-dsb-skin="clean"] .v38-welcome p,html[data-dsb-skin="clean"] .v38-welcome span,html[data-dsb-skin="clean"] .v50-dashboard p,html[data-dsb-skin="clean"] .hero p{color:#617f91!important}

/* major surfaces so switching skin is visible in every dashboard division */
html[data-dsb-skin] .card,html[data-dsb-skin] .stat,html[data-dsb-skin] .panel,
html[data-dsb-skin] .v38-launch-card,html[data-dsb-skin] .r30-panel,
html[data-dsb-skin] .r63-material-panel,html[data-dsb-skin] .r62-invoice-live{
  background:var(--dsb-surface)!important;border-color:var(--dsb-border)!important;color:var(--dsb-page-text)!important
}
html[data-dsb-skin] .sub,html[data-dsb-skin] .v38-launch-copy small,html[data-dsb-skin] .panel>p{color:var(--dsb-page-muted)!important}
html[data-dsb-skin="dark"] .field input,html[data-dsb-skin="dark"] .field select,html[data-dsb-skin="dark"] .field textarea,
html[data-dsb-skin="dark"] .form-grid input,html[data-dsb-skin="dark"] .form-grid select,html[data-dsb-skin="dark"] .form-grid textarea{background:#102838!important;color:#edf6fb!important;border-color:#315165!important}

/* shared modal chrome also reflects skin */
html[data-dsb-skin="dark"] .dsb-calendar-card,html[data-dsb-skin="dark"] .dsb-skin-card,html[data-dsb-skin="dark"] .dsb-detail-card{background:#0f2636!important;border-color:#315165!important;color:#eaf4f9!important}
html[data-dsb-skin="dark"] .dsb-cal-head h3,html[data-dsb-skin="dark"] .dsb-modal-head h3,html[data-dsb-skin="dark"] .dsb-skin-option b,html[data-dsb-skin="dark"] .dsb-detail-title{color:#eef7fb!important}
html[data-dsb-skin="dark"] .dsb-skin-option,html[data-dsb-skin="dark"] .dsb-cal-day,html[data-dsb-skin="dark"] .dsb-detail-meta{background:#142e40!important;border-color:#315165!important;color:#dceaf1!important}

/* mobile keeps the same hero character without horizontal overflow */
@media(max-width:760px){
  html[data-dsb-skin] .top,html[data-dsb-skin] .v38-launch-head,html[data-dsb-skin] .v50-head,html[data-dsb-skin] .fo-head,html[data-dsb-skin] .r30-header,html[data-dsb-skin] .r71-viewer-header,html[data-dsb-skin] .header{border-radius:18px!important}
}

/* Dark mode keeps dense operational cards readable while the shell/header stays NOC dark. */
html[data-dsb-skin="dark"] .card,html[data-dsb-skin="dark"] .stat,html[data-dsb-skin="dark"] .panel,
html[data-dsb-skin="dark"] .r30-panel,html[data-dsb-skin="dark"] .r63-material-panel,html[data-dsb-skin="dark"] .r62-invoice-live{
  background:#f8fbfd!important;color:#10283e!important;border-color:#355063!important
}
html[data-dsb-skin="dark"] .card h2,html[data-dsb-skin="dark"] .card h3,html[data-dsb-skin="dark"] .panel h2,html[data-dsb-skin="dark"] .panel h3,
html[data-dsb-skin="dark"] .r30-panel h2,html[data-dsb-skin="dark"] .r30-panel h3,html[data-dsb-skin="dark"] .r30-panel-head h2{color:#153e5b!important}
html[data-dsb-skin="dark"] .card .sub,html[data-dsb-skin="dark"] .panel>p,html[data-dsb-skin="dark"] .r30-panel-head p{color:#6c8294!important}

/* =========================================================
   V75 HOTFIX — DSB BLUE / GLOBAL HEADER MUST FOLLOW SKIN
   Fix conflict from earlier white preview-header styles.
   ========================================================= */
html[data-dsb-skin] .v38-launch-head,
html[data-dsb-skin] .v50-head,
html[data-dsb-skin] .fo-head,
html[data-dsb-skin] .top,
html[data-dsb-skin] .r71-viewer-header{
  background:var(--dsb-header-bg)!important;
  color:var(--dsb-header-text)!important;
  border:1px solid var(--dsb-header-border)!important;
  box-shadow:var(--dsb-header-shadow)!important;
}
html[data-dsb-skin] .v38-launch-brand h1,
html[data-dsb-skin] .v50-brand h1,
html[data-dsb-skin] .r30-brand h1,
html[data-dsb-skin] .top .title b,
html[data-dsb-skin] .r71-viewer-copy h1{
  color:var(--dsb-header-text)!important;
}
html[data-dsb-skin] .v38-launch-brand p,
html[data-dsb-skin] .v38-eyebrow,
html[data-dsb-skin] .v50-brand p,
html[data-dsb-skin] .v50-brand span,
html[data-dsb-skin] .r67-eyebrow,
html[data-dsb-skin] .r30-brand p,
html[data-dsb-skin] .top .title span,
html[data-dsb-skin] .top .header-eyebrow,
html[data-dsb-skin] .r71-viewer-copy p,
html[data-dsb-skin] .r71-viewer-eyebrow{
  color:var(--dsb-header-muted)!important;
}
html[data-dsb-skin] .v38-launch-user b,
html[data-dsb-skin] .v38-launch-user small,
html[data-dsb-skin] .v38-launch-user a,
html[data-dsb-skin] .v38-launch-user button,
html[data-dsb-skin] .v38-online,
html[data-dsb-skin] .v50-head-status > *,
html[data-dsb-skin] .userbar .chip,
html[data-dsb-skin] .userbar .logout{
  border-color:var(--dsb-header-border)!important;
}
html[data-dsb-skin] .v38-launch-user b,
html[data-dsb-skin] .v38-launch-user small,
html[data-dsb-skin] .v38-launch-user a:not(.v67-logout),
html[data-dsb-skin] .v38-launch-user button,
html[data-dsb-skin] .v50-head-status > *{
  background:var(--dsb-header-glass)!important;
  color:var(--dsb-header-text)!important;
}
html[data-dsb-skin] .v38-online{
  background:rgba(44,209,137,.16)!important;
  color:#c9f5dd!important;
}
html[data-dsb-skin="clean"] .v38-online{
  background:#edf9f3!important;
  color:#147451!important;
}
html[data-dsb-skin] .v38-launch-user a.v67-logout,
html[data-dsb-skin] .userbar .logout,
html[data-dsb-skin] .v50-head-status .logout{
  background:#fff!important;
  color:#123d5a!important;
  border-color:#fff!important;
}
html[data-dsb-skin="clean"] .v38-launch-user a.v67-logout,
html[data-dsb-skin="clean"] .userbar .logout,
html[data-dsb-skin="clean"] .v50-head-status .logout{
  background:#173f5d!important;
  color:#fff!important;
  border-color:#173f5d!important;
}