/* =========================================================
   MOLECULAR DESIGN LAB — SHARED THEME
   PHASE 20B
   ========================================================= */

:root{
  --mdl-navy:#0B1626;
  --mdl-deep-navy:#06101C;
  --mdl-cyan:#20B8C5;
  --mdl-teal:#0B7480;
  --mdl-teal-hover:#095F68;

  --mdl-white:#FFFFFF;
  --mdl-fog:#F4F7F8;

  --mdl-graphite:#364553;
  --mdl-muted:#5C6B7A;
  --mdl-divider:#D9E2E8;
  --mdl-control-border:#768797;

  --mdl-dark-surface:#122236;
  --mdl-dark-secondary:#B6C6D6;
  --mdl-dark-border:#657C93;

  --mdl-success:#2E7D5B;
  --mdl-warning:#B7791F;
  --mdl-error:#B42318;
  --mdl-info:#0B7480;

  --mdl-radius-sm:8px;
  --mdl-radius-md:10px;
  --mdl-radius-lg:12px;

  --mdl-shadow-soft:
    0 8px 24px rgba(11,22,38,.08);

  --mdl-font:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --mdl-mono:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    "Liberation Mono",
    monospace;
}


/* ---------- Base ---------- */

html{
  color-scheme:light;
}

body{
  font-family:var(--mdl-font);
  color:var(--mdl-navy);
}


/* ---------- Text ---------- */

.mdl-text-muted{
  color:var(--mdl-muted);
}

.mdl-sequence,
.mdl-mono{
  font-family:var(--mdl-mono);
}


/* ---------- Buttons ---------- */

.mdl-button-primary{
  background:var(--mdl-cyan);
  color:var(--mdl-navy);
  border:1px solid var(--mdl-cyan);
  border-radius:var(--mdl-radius-sm);
  min-height:42px;
  padding:0 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.mdl-button-primary:hover{
  background:#1AA9B5;
}

.mdl-button-secondary{
  background:transparent;
  color:var(--mdl-navy);
  border:1px solid var(--mdl-control-border);
  border-radius:var(--mdl-radius-sm);
  min-height:42px;
  padding:0 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}


/* ---------- Inputs ---------- */

.mdl-input,
.mdl-select,
.mdl-textarea{
  border:1px solid var(--mdl-control-border);
  border-radius:var(--mdl-radius-sm);
  background:var(--mdl-white);
  color:var(--mdl-navy);
  font:inherit;
}

.mdl-input:focus,
.mdl-select:focus,
.mdl-textarea:focus{
  outline:2px solid rgba(32,184,197,.28);
  outline-offset:1px;
  border-color:var(--mdl-teal);
}


/* ---------- Scientific status ---------- */

.mdl-status-success{
  color:var(--mdl-success);
}

.mdl-status-warning{
  color:var(--mdl-warning);
}

.mdl-status-error{
  color:var(--mdl-error);
}

.mdl-status-info{
  color:var(--mdl-info);
}


/* ---------- Shared surfaces ---------- */

.mdl-surface{
  background:var(--mdl-white);
  border:1px solid var(--mdl-divider);
  border-radius:var(--mdl-radius-md);
}

.mdl-surface-muted{
  background:var(--mdl-fog);
  border:1px solid var(--mdl-divider);
  border-radius:var(--mdl-radius-md);
}


/* ---------- Accessibility ---------- */

:focus-visible{
  outline:2px solid var(--mdl-cyan);
  outline-offset:2px;
}

/* =========================================================
   PHASE 20B — MDL WORKSPACE SHELL
   Header + Sidebar visual alignment
   ========================================================= */

:root{
  --mdl-bg:#F4F7F8;
  --mdl-surface:#FFFFFF;
  --mdl-text:#0B1626;
  --mdl-muted:#5C6B7A;
  --mdl-line:#D9E2E8;

  --mdl-accent:#0B7480;
  --mdl-accent-2:#20B8C5;
  --mdl-accent-soft:rgba(32,184,197,.12);

  --mdl-master-sbg:#FFFFFF;
  --mdl-master-text:#0B1626;
  --mdl-master-muted:#5C6B7A;
  --mdl-master-line:#D9E2E8;
}


/* ---------- Workspace header ---------- */

.app-header,
.mdl-app-header{
  background:#0B1626 !important;
  color:#FFFFFF !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}


/* Header text */

.app-header .brand-title,
.app-header .brand-text,
.app-header .brand-tag,
.app-header .mdl-brand-title,
.app-header .mdl-brand-tag{
  color:#FFFFFF !important;
}


/* Header controls */

.app-header .icon-btn,
.app-header .learn-switch,
.app-header .avatar{
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.22) !important;
}


/* ---------- Sidebar ---------- */

.mdl-sidebar{
  background:#FFFFFF !important;
  color:#0B1626 !important;
  border-right:1px solid #D9E2E8 !important;
}


/* Normal navigation item */

.mdl-navbtn{
  color:#364553 !important;
}


/* Hover */

.mdl-navbtn:hover{
  background:#F4F7F8 !important;
  color:#0B1626 !important;
}


/* Active tool */

.mdl-navbtn.active{
  background:rgba(32,184,197,.12) !important;
  color:#0B7480 !important;
  border-left:3px solid #20B8C5 !important;
  font-weight:700 !important;
}


/* Sidebar separators */

.mdl-sidebar-foot,
.mdl-sidebar-section{
  border-color:#D9E2E8 !important;
}
/* =========================================================
   PHASE 20B — SIDEBAR COLOR FIX
   ========================================================= */

.sidebar,
.mdl-sidebar{
  background:#FFFFFF !important;
  color:#0B1626 !important;
  border-right:1px solid #D9E2E8 !important;
}

.navbtn,
.mdl-navbtn{
  color:#364553 !important;
}

.navbtn svg,
.mdl-navbtn svg{
  color:#5C6B7A !important;
}

.navbtn:hover,
.mdl-navbtn:hover{
  background:#F4F7F8 !important;
  color:#0B1626 !important;
}

.navbtn.active,
.mdl-navbtn.active{
  background:rgba(32,184,197,.12) !important;
  color:#0B7480 !important;
  border-left:3px solid #20B8C5 !important;
  font-weight:700 !important;
}

.navbtn.active svg,.mdl-navbtn.active svg{
  color:#0B7480 !important;
}

.nav-label,
.mdl-nav-label{
  color:#5C6B7A !important;
}
/* =========================================================
   PHASE 20B — WORKSPACE SHELL FINAL OVERRIDE
   ========================================================= */

/* Header */
html body .app-header,
html body .mdl-app-header{
  background:#0B1626 !important;
  color:#FFFFFF !important;
  border-bottom:2px solid #20B8C5 !important;
  box-shadow:none !important;
}


/* Active sidebar item */
html body .sidebar .navbtn.active,
html body .sidebar .mdl-navbtn.active,
html body .mdl-sidebar .navbtn.active,
html body .mdl-sidebar .mdl-navbtn.active{
  background:rgba(32,184,197,.14) !important;
  color:#0B7480 !important;
  border-left:3px solid #20B8C5 !important;
  box-shadow:none !important;
}


/* Active sidebar icon */
html body .sidebar .navbtn.active svg,
html body .sidebar .mdl-navbtn.active svg,
html body .mdl-sidebar .navbtn.active svg,
html body .mdl-sidebar .mdl-navbtn.active svg{
  color:#0B7480 !important;
  stroke:currentColor !important;
}


/* Header controls */
html body .app-header .icon-btn,
html body .app-header .avatar,
html body .app-header .account-link{
  border-color:rgba(255,255,255,.22) !important;
}


/* Learning-mode switch */
html body .app-header .learn-switch .track{
  background:#364553 !important;
}

html body .app-header .learn-switch input:checked + .track{
  background:#20B8C5 !important;
}