:root{
    --ink:#122019; --paper:#f6f4ee; --panel:#ffffff;
    --forest:#1f4d3d; --forest-dark:#123326; --forest-light:#e7f0ea;
    --gold:#c68a2e; --gold-light:#f6e9d2;
    --red:#a5372a; --red-light:#f7e3df;
    --blue:#3a3f8a; --blue-light:#e3e6f7;
    --line:#dcd6c8; --muted:#6b7268; --radius:10px;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--paper); color:var(--ink); font-size:14px; line-height:1.45;}
  .mono{font-family:'Consolas','Courier New',monospace; letter-spacing:.02em;}
  #loginScreen{min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(160deg, var(--forest-dark) 0%, var(--forest) 55%, #2c6b52 100%);}
  .loginCard{background:var(--panel); width:380px; max-width:92vw; border-radius:var(--radius);
    padding:32px 30px; box-shadow:0 20px 60px rgba(0,0,0,.35); position:relative;}
  .loginCard h1{font-size:19px; margin:0 0 2px; color:var(--forest-dark);}
  .loginCard .tag{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); font-weight:700; margin-bottom:18px;}
  .loginThemeToggle{position:absolute; top:20px; right:20px; border-color:var(--line); color:var(--ink);}
  .loginThemeToggle:hover{border-color:var(--forest); color:var(--forest);}

  /* Splash screen shown briefly between a successful sign-in and the app
     appearing - a spinning ring around the EFB mark, so the transition feels
     deliberate instead of an instant jump-cut into the dashboard. */
  #splashScreen{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:22px;
    background: linear-gradient(160deg, var(--forest-dark) 0%, var(--forest) 55%, #2c6b52 100%);
  }
  .splashRing{
    position:relative; width:132px; height:132px;
    display:flex; align-items:center; justify-content:center;
  }
  .splashRing::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:5px solid rgba(255,255,255,.18);
  }
  .splashRing::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:5px solid transparent; border-top-color:var(--gold); border-right-color:var(--gold);
    animation: splashSpin 1.1s linear infinite;
  }
  .splashLogo{
    width:66px; height:66px; object-fit:contain; border-radius:16px;
    background:#fff; padding:10px; box-shadow:0 6px 20px rgba(0,0,0,.25);
    animation: splashPulse 1.8s ease-in-out infinite;
  }
  .splashText{
    color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
    opacity:.9;
  }
  @keyframes splashSpin{ to{ transform:rotate(360deg); } }
  @keyframes splashPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
  #splashScreen.fadeOut{ animation: splashFade .35s ease forwards; }
  @keyframes splashFade{ to{ opacity:0; } }

  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600;}
  .field input, .field select, .field textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; font-size:14px; background:#fff; color:var(--ink);}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--forest); outline-offset:1px;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:7px; border:1px solid transparent; cursor:pointer; font-size:13.5px; font-weight:600; transition:.15s;}
  .btn-primary{background:var(--forest); color:#fff;} .btn-primary:hover{background:var(--forest-dark);}
  .btn-gold{background:var(--gold); color:#3a2606;} .btn-gold:hover{background:#b17c26;}
  .btn-outline{background:#fff; border-color:var(--line); color:var(--ink);} .btn-outline:hover{border-color:var(--forest); color:var(--forest);}
  .btn-danger{background:var(--red); color:#fff;} .btn-danger:hover{background:#832c21;}
  .btn-block{width:100%;} .btn:disabled{opacity:.5; cursor:not-allowed;} .btn-sm{padding:5px 10px; font-size:12px;}
  #loginError{color:var(--red); font-size:12.5px; margin-top:8px; min-height:16px;}
  .loginHint{font-size:11.5px; color:var(--muted); margin-top:16px; border-top:1px dashed var(--line); padding-top:12px;}
  #appShell{display:none; min-height:100vh; flex-direction:column;}
  header.topbar{background:var(--forest-dark); color:#fff; padding:12px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand h1{font-size:15px; margin:0; font-weight:700;}
  .brand .sub{font-size:11px; color:#bcd3c6; margin-top:1px;}
  nav.tabs{display:flex; gap:4px; flex-wrap:wrap;}
  nav.tabs button{background:transparent; border:1px solid transparent; color:#dce8e1; padding:8px 13px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:600;}
  nav.tabs button.active{background:var(--gold); color:#3a2606;}
  nav.tabs button:hover:not(.active){background:rgba(255,255,255,.1);}
  .userbox{display:flex; align-items:center; gap:10px; font-size:12.5px; color:#dce8e1;}
  .userbox .who{text-align:right;} .userbox .who b{color:#fff; display:block; font-size:13px;}
  main{flex:1; padding:22px; max-width:1400px; width:100%; margin:0 auto;}
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px;}
  .panel h2{margin:0 0 4px; font-size:16px; color:var(--forest-dark);}
  .panel .desc{font-size:12.5px; color:var(--muted); margin-bottom:16px;}
  .row{display:flex; gap:14px; flex-wrap:wrap;} .row > *{flex:1; min-width:160px;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
  @media(max-width:900px){.grid2,.grid3,.grid4,.grid5{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.grid2,.grid3,.grid4,.grid5{grid-template-columns:1fr;}}
  .teamGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  @media(max-width:760px){.teamGrid{grid-template-columns:1fr 1fr;}}
  .teamCard{border:2px solid var(--line); border-radius:var(--radius); padding:16px; cursor:pointer; background:#fff; text-align:left; transition:.15s;}
  .teamCard:hover{border-color:var(--gold);} .teamCard.sel{border-color:var(--forest); background:var(--forest-light);}
  .teamCard .tlabel{font-weight:700; font-size:14px; color:var(--forest-dark);}
  .teamCard .tcount{font-size:11.5px; color:var(--muted); margin-top:3px;}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  /* Wide report tables (many columns) scroll horizontally within their
     own panel instead of visually overflowing past the panel's border. */
  #reportTableHost{overflow-x:auto;}
  #reportTableHost table{width:max-content; min-width:100%;}
  th{text-align:left; padding:9px 10px; background:var(--forest-light); color:var(--forest-dark); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--line);}
  td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
  tr:hover td{background:#fbfaf6;}
  .pill{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700;}
  .pill-pass{background:var(--forest-light); color:var(--forest-dark);} .pill-fail{background:var(--red-light); color:var(--red);}
  .pill-cat{background:#eee; color:#555; margin-right:4px;}
  .cat-EC{background:var(--red-light); color:var(--red);} .cat-BC{background:var(--gold-light); color:#8a5f14;}
  .cat-COMP{background:var(--blue-light); color:var(--blue);} .cat-NC{background:var(--forest-light); color:var(--forest-dark);}
  .qRow{border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:10px; background:#fff;}
  .qRow .qtop{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
  .qRow .qpoint{font-weight:700; font-size:13.5px;}
  .qRow .qdefn{font-size:12px; color:var(--muted); margin-top:3px; max-width:640px;}
  .qRow select{padding:7px 10px; border-radius:6px; border:1px solid var(--line); font-weight:700; font-size:13px;}
  .qRow select.v-Yes{background:var(--forest-light); color:var(--forest-dark);}
  .qRow select.v-No{background:var(--red-light); color:var(--red);}
  .qRow select.v-N\/A{background:#eee; color:#666;}
  .qRow textarea{width:100%; margin-top:8px; min-height:44px; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:12.5px; font-family:inherit;}
  .scoreBar{position:sticky; bottom:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; box-shadow:0 -6px 18px rgba(0,0,0,.06);}
  .scoreBar .figs{display:flex; gap:22px; flex-wrap:wrap;}
  .scoreBar .fig .n{font-size:20px; font-weight:800;} .scoreBar .fig .l{font-size:10.5px; text-transform:uppercase; color:var(--muted); letter-spacing:.05em;}
  .kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:18px;}
  @media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:600px){.kpis{grid-template-columns:1fr 1fr;}}
  .kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
  .kpi .v{font-size:23px; font-weight:800; color:var(--forest-dark);}
  .kpi .l{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}
  .chartWrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px;}
  .chartWrap h3{margin:0 0 10px; font-size:13.5px; color:var(--forest-dark);}
  canvas{max-height:280px;}
  .modalBg{position:fixed; inset:0; background:rgba(10,20,15,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal{background:#fff; border-radius:var(--radius); max-width:760px; width:100%; max-height:88vh; overflow:auto; padding:22px 24px; position:relative;}
  .modal h3{margin-top:0;}
  .closeX{position:absolute; top:14px; right:16px; cursor:pointer; font-size:20px; color:var(--muted); background:none; border:none;}
  .toast{position:fixed; top:18px; right:18px; background:var(--forest-dark); color:#fff; padding:12px 18px; border-radius:8px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:200; max-width:320px;}
  .toast.err{background:var(--red);}
  .empty{text-align:center; padding:40px 20px; color:var(--muted); font-size:13px;}
  .badge-role{font-size:10px; padding:2px 7px; border-radius:99px; background:var(--gold-light); color:#8a5f14; font-weight:700; text-transform:uppercase;}
  .filterBar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
  .filterBar select, .filterBar input{padding:7px 10px; border:1px solid var(--line); border-radius:7px; font-size:12.5px;}
  a.linklike{color:var(--forest); cursor:pointer; text-decoration:underline; font-size:12.5px;}
  .subtle{color:var(--muted); font-size:12px;}
  .divider{border:none; border-top:1px solid var(--line); margin:16px 0;}
  .flexend{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
  .subnav{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
  .subnav button{background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:99px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink);}
  .subnav button.active{background:var(--forest); border-color:var(--forest); color:#fff;}
  .treeCard{border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:8px; background:#fff; display:flex; justify-content:space-between; align-items:center;}
  /* Multi-select checkbox grid (Master Data: Manager/Team Leader locations,
     Users: Additional Accounts) - selectable "chip" cards instead of
     bare checkboxes, so a large list stays easy to scan and click. */
  .chkGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; border:1px solid var(--line); border-radius:10px; padding:12px; max-height:340px; overflow-y:auto; background:var(--paper);}
  .chkGrid label{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); font-size:12.5px; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; user-select:none;}
  .chkGrid label:hover{border-color:var(--forest);}
  .chkGrid label:has(input:checked){background:var(--forest-light); border-color:var(--forest); color:var(--forest-dark); font-weight:700;}
  .chkGrid input[type="checkbox"]{width:16px; height:16px; accent-color:var(--forest); cursor:pointer; flex-shrink:0;}
  .treeCard .path{font-size:11px; color:var(--muted);}
  .permsList{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
  .permsList span{background:var(--forest-light); color:var(--forest-dark); font-size:10.5px; padding:2px 8px; border-radius:99px;}
  @media print{
    body *{visibility:hidden;}
    .printable, .printable *{visibility:visible;}
    .printable{position:absolute; top:0; left:0; width:100%;}
  }

  /* ---- status workflow pills ---- */
  .st-Draft{background:#eee; color:#666;}
  .st-Submitted{background:var(--gold-light); color:#8a5f14;}
  .st-Reviewed{background:var(--blue-light); color:var(--blue);}
  .st-Approved{background:var(--forest-light); color:var(--forest-dark);}
  .st-Rejected{background:var(--red-light); color:var(--red);}

  /* ---- dark mode ---- */
  [data-theme="dark"]{
    --ink:#e9efe9; --paper:#0f1613; --panel:#182420;
    --forest-light:#1d3129; --line:#2b3a34; --muted:#93a39a;
  }
  [data-theme="dark"] header.topbar{background:#0a1210;}
  [data-theme="dark"] .teamCard, [data-theme="dark"] .qRow, [data-theme="dark"] .treeCard{background:var(--panel);}
  [data-theme="dark"] .qRow select.v-N\/A{background:#25322c; color:#aab8b0;}
  [data-theme="dark"] th{background:#1d2f28;}
  [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea{background:#101d18; color:var(--ink); border-color:var(--line);}
  [data-theme="dark"] .subnav button{background:#101d18; color:var(--ink);}
  .themeToggle{background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:99px; width:32px; height:32px; cursor:pointer; font-size:15px;}

  /* ---- notification bell ---- */
  .bellWrap{position:relative;}
  .bellBtn{background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:99px; width:32px; height:32px; cursor:pointer; font-size:14px; position:relative;}
  .bellBadge{position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:9.5px; font-weight:800; border-radius:99px; padding:1px 5px; min-width:16px; text-align:center;}
  .notifDrop{position:absolute; top:40px; right:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; width:340px; max-height:420px; overflow:auto; box-shadow:0 12px 30px rgba(0,0,0,.25); z-index:150; padding:8px;}
  .notifItem{padding:9px 10px; border-radius:7px; font-size:12.5px; margin-bottom:4px; cursor:pointer;}
  .notifItem:hover{background:var(--forest-light);}
  .notifItem .t{font-weight:700; display:block;}

  /* ---- heatmap ---- */
  .heatCell{display:flex; align-items:center; justify-content:center; height:44px; border-radius:6px; font-size:12px; font-weight:700; color:#fff;}

/* ============================================================
   V2 UI / GLASS NAV
   ============================================================ */
:root{
  --glass-bg:rgba(255,255,255,.54);
  --glass-border:rgba(255,255,255,.72);
  --glass-shadow:0 18px 45px rgba(50,60,90,.16);
}
body{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,154,185,.24), transparent 32%),
    radial-gradient(circle at 85% 22%, rgba(126,188,255,.25), transparent 34%),
    linear-gradient(135deg,#f8f7fb 0%,#f7f2ef 48%,#f3f7fb 100%);
}
header.topbar{
  background:transparent;
  color:var(--ink);
  padding:18px 24px 10px;
  position:sticky;
  top:0;
  z-index:80;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
header.topbar .brand{color:var(--ink);}
header.topbar .brand .sub{color:var(--muted);}
nav.tabs{
  display:flex;
  align-items:center;
  gap:2px;
  padding:5px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:linear-gradient(110deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  overflow-x:auto;
  scrollbar-width:none;
  max-width:min(72vw,980px);
}
nav.tabs::-webkit-scrollbar{display:none;}
nav.tabs button{
  background:transparent;
  border:1px solid transparent;
  color:#4b4d55;
  padding:9px 15px;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  transition:.2s ease;
}
nav.tabs button.active{
  background:rgba(255,255,255,.82);
  color:#252633;
  border-color:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(40,45,70,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
nav.tabs button:hover:not(.active){background:rgba(255,255,255,.35);}
.userbox{color:#4b4d55;}
.userbox .who b{color:#252633;}
.themeToggle,.bellBtn{
  background:rgba(255,255,255,.42);
  color:#343640;
  border-color:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.glassPanel{
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 36px rgba(40,50,80,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.required::after{content:' *';color:var(--red);}
.readonly-field{background:rgba(240,242,246,.75)!important;color:#59606a!important;}
.callPicker{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px;}
.callPicker .btn{min-width:115px;}
.callMeta{
  margin-top:8px;padding:10px 12px;border-radius:9px;
  background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.72);
  font-size:12px;color:var(--muted);
}
.dataStat{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0;
}
@media(max-width:900px){.dataStat{grid-template-columns:repeat(2,1fr)}nav.tabs{max-width:100%;order:3;width:100%}header.topbar{gap:8px}}
@media(max-width:560px){.dataStat{grid-template-columns:1fr}}
.calibMode{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.calibMode button.active{background:var(--forest);color:#fff;border-color:var(--forest);}
.mistakeTable td:first-child{font-weight:700;}
[data-theme="dark"] body{
  background:radial-gradient(circle at 15% 20%,rgba(255,120,160,.08),transparent 32%),
             radial-gradient(circle at 85% 22%,rgba(90,150,255,.09),transparent 34%),
             #0f1613;
}
[data-theme="dark"] header.topbar{background:rgba(15,22,19,.35);}
[data-theme="dark"] nav.tabs{background:rgba(30,40,36,.55);border-color:rgba(255,255,255,.14);}
[data-theme="dark"] nav.tabs button{color:#d8dfda;}
[data-theme="dark"] nav.tabs button.active{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.22);}
[data-theme="dark"] .userbox .who b{color:#fff;}



/* ============================================================
   V3 UI — PREMIUM LEFT SIDEBAR / LIQUID GLASS
   ============================================================ */
#appShell{
  display:none;
  min-height:100vh;
  flex-direction:row;
  background:
    radial-gradient(circle at 80% 10%,rgba(115,160,255,.10),transparent 28%),
    radial-gradient(circle at 15% 85%,rgba(255,130,170,.08),transparent 30%),
    var(--paper);
}
header.topbar.sidebarNav{
  width:272px; min-width:272px; height:100vh;
  position:sticky; top:0; z-index:50;
  padding:20px 14px 14px;
  display:flex; flex-direction:column; align-items:stretch;
  justify-content:flex-start; flex-wrap:nowrap; gap:0;
  color:#eef7f2;
  background:
    linear-gradient(180deg,rgba(18,55,43,.96),rgba(15,46,36,.94));
  border-right:1px solid rgba(255,255,255,.12);
  box-shadow:12px 0 38px rgba(14,37,29,.12);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
header.topbar.sidebarNav .brand{
  display:flex; align-items:center; gap:11px;
  padding:5px 9px 20px;
  color:#fff;
}
header.topbar.sidebarNav .brand img{height:38px!important;}
header.topbar.sidebarNav .brand h1{font-size:15px;line-height:1.15;margin:0;color:#fff;}
header.topbar.sidebarNav .brand .sub{font-size:10px;margin-top:5px;color:rgba(255,255,255,.62);}
.sidebarSectionTitle{
  margin:8px 8px 8px; padding:9px 9px 6px;
  font-size:10px; letter-spacing:.16em; font-weight:800;
  color:rgba(255,255,255,.46);
}
nav.tabs{
  width:100%; max-width:none; overflow:visible;
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:5px;
  padding:0 2px; margin:0;
  background:transparent!important; border:0!important;
  box-shadow:none!important; backdrop-filter:none!important;
}
nav.tabs button{
  width:100%; min-height:44px;
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  border:1px solid transparent; border-radius:12px;
  padding:10px 12px;
  color:rgba(239,248,243,.72);
  background:transparent;
  font-size:13px; font-weight:650; text-align:left;
  white-space:nowrap; cursor:pointer;
  transition:all .18s ease;
}
nav.tabs button .navIcon{
  width:27px; height:27px; display:grid; place-items:center;
  border-radius:9px; flex:0 0 27px;
  font-size:15px; color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
}
nav.tabs button:hover:not(.active){
  background:rgba(255,255,255,.075);
  color:#fff; transform:translateX(2px);
}
nav.tabs button.active{
  color:#173c2e;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(236,248,242,.82));
  border-color:rgba(255,255,255,.92);
  box-shadow:0 10px 25px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.95);
}
nav.tabs button.active .navIcon{
  color:#1b5a44; background:rgba(31,77,61,.09); border-color:rgba(31,77,61,.08);
}
.sidebarSpacer{flex:1;}
header.topbar.sidebarNav .userbox{
  width:100%; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:8px; padding:10px 8px 5px;
  border-top:1px solid rgba(255,255,255,.10);
}
header.topbar.sidebarNav .userbox .who{min-width:0; display:flex; flex-direction:column;}
header.topbar.sidebarNav .userbox .who b{color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
header.topbar.sidebarNav .userbox .who span{color:rgba(255,255,255,.52);font-size:10px;}
header.topbar.sidebarNav .bellBtn,
header.topbar.sidebarNav .themeToggle{width:34px;height:34px;padding:0;border-radius:10px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}
header.topbar.sidebarNav .btn-outline{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);padding:7px 9px;font-size:11px;}
.appContent{
  flex:1; min-width:0; width:calc(100% - 272px);
  padding:26px 30px 40px;
  overflow:auto;
}
.appContent > .panel, .appContent > .kpis, .appContent > .scoreBar{max-width:1500px;margin-left:auto;margin-right:auto;}
[data-theme="dark"] #appShell{background:#0d1411;}
[data-theme="dark"] header.topbar.sidebarNav{background:rgba(9,28,22,.96);}
[data-theme="dark"] nav.tabs button{color:rgba(239,248,243,.72);}
[data-theme="dark"] nav.tabs button.active{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);}
@media(max-width:900px){
  #appShell{flex-direction:column;}
  header.topbar.sidebarNav{width:100%;min-width:0;height:auto;position:sticky;top:0;padding:10px 12px;}
  header.topbar.sidebarNav .brand{padding:4px 6px 10px;}
  .sidebarSectionTitle{display:none;}
  nav.tabs{flex-direction:row;overflow-x:auto;padding:2px 0 4px;}
  nav.tabs button{width:auto;min-width:max-content;min-height:40px;}
  .sidebarSpacer{display:none;}
  header.topbar.sidebarNav .userbox{border-top:0;padding-top:8px;}
  .appContent{width:100%;padding:18px 14px 30px;}
}




:root{
  --v4-primary:#0b5d4b;
  --v4-primary-dark:#073b32;
  --v4-primary-soft:#e8f4ef;
  --v4-accent:#7bc67b;
  --v4-gold:#e2b24b;
  --v4-danger:#d9534f;
  --v4-bg:#f4f7f6;
  --v4-card:#ffffff;
  --v4-text:#17332d;
  --v4-muted:#71807a;
  --v4-line:#dfe8e4;
}

body{
  background:
    radial-gradient(circle at 78% 6%, rgba(123,198,123,.10), transparent 24%),
    radial-gradient(circle at 15% 90%, rgba(11,93,75,.07), transparent 28%),
    var(--v4-bg);
  color:var(--v4-text);
}

#appShell{
  min-height:100vh;
  display:flex;
  background:var(--v4-bg);
}

/* Premium sidebar */
header.topbar.sidebarNav{
  width:272px;
  min-width:272px;
  height:100vh;
  position:sticky;
  top:0;
  padding:18px 13px 13px;
  background:
    linear-gradient(180deg,#083f34 0%,#0a4e40 52%,#07382f 100%);
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:10px 0 36px rgba(6,50,40,.13);
  overflow:visible;
  transition:width .24s ease,min-width .24s ease;
}

header.topbar.sidebarNav .brand{
  position:relative;
  padding:6px 9px 18px;
  margin-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

header.topbar.sidebarNav .brand h1{
  font-size:14px;
  letter-spacing:.01em;
}

header.topbar.sidebarNav .brand .sub{
  color:rgba(255,255,255,.55);
}

.navGroupTitle{
  margin:15px 9px 7px;
  color:rgba(255,255,255,.42);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.17em;
  line-height:1;
}

nav.tabs{
  gap:3px;
  padding:0 1px;
}

nav.tabs button{
  min-height:43px;
  border-radius:11px;
  padding:8px 10px;
  color:rgba(245,251,248,.70);
  background:transparent;
  border:1px solid transparent;
  font-size:12.8px;
  font-weight:650;
  transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}

nav.tabs button .navIcon{
  width:29px;
  height:29px;
  border-radius:9px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.76);
  font-size:15px;
}

nav.tabs button:hover:not(.active){
  background:rgba(255,255,255,.075);
  color:#fff;
  transform:translateX(2px);
}

nav.tabs button.active{
  color:#0a4739;
  background:linear-gradient(135deg,#ffffff 0%,#e8f5ef 100%);
  border-color:rgba(255,255,255,.92);
  box-shadow:0 9px 22px rgba(0,0,0,.14);
  position:relative;
}

nav.tabs button.active:before{
  content:"";
  position:absolute;
  left:-13px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:99px;
  background:var(--v4-accent);
}

nav.tabs button.active .navIcon{
  color:#0b5d4b;
  background:#e4f3ed;
  border-color:#d3e9e0;
}

/* Sidebar bottom area */
header.topbar.sidebarNav .userbox{
  grid-template-columns:auto 1fr auto;
  padding:11px 6px 4px;
  border-top:1px solid rgba(255,255,255,.10);
}

header.topbar.sidebarNav .bellWrap{
  position:relative;
}

header.topbar.sidebarNav .bellBtn,
header.topbar.sidebarNav .themeToggle{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  font-size:16px;
  transition:.16s ease;
}

header.topbar.sidebarNav .bellBtn:hover,
header.topbar.sidebarNav .themeToggle:hover{
  background:rgba(255,255,255,.15);
  transform:translateY(-1px);
}

.bellBadge{
  background:var(--v4-danger)!important;
  color:#fff!important;
  border:2px solid #0a4e40;
  min-width:19px!important;
  height:19px;
  line-height:15px;
  padding:0 5px!important;
  font-size:10px!important;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}

header.topbar.sidebarNav .userbox .who b{color:#fff;font-size:12px;}
header.topbar.sidebarNav .userbox .who span{color:rgba(255,255,255,.55);font-size:10px;}

header.topbar.sidebarNav .btn-outline{
  color:#fff;
  border-color:rgba(255,255,255,.17);
  background:rgba(255,255,255,.07);
}

/* Readable notifications */
.notifDrop{
  position:absolute!important;
  left:calc(100% + 12px)!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  width:370px!important;
  max-width:calc(100vw - 30px);
  max-height:480px!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #d9e4df!important;
  border-radius:16px!important;
  box-shadow:0 22px 60px rgba(9,52,42,.22)!important;
  color:#17332d!important;
}

.notifDrop:before{
  content:none;
}
.notifHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 17px 12px;
  color:#0b5d4b;
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid #e7eeeb;
}
.notifHeader a.linklike{ font-size:11px; text-transform:none; letter-spacing:0; font-weight:700; }
.notifTime{ color:#6f7e78; font-weight:600; font-size:11px; text-transform:none; letter-spacing:0; }
[data-theme="dark"] .notifHeader{ color:#bcd3c6; border-color:#2b3a34; }
[data-theme="dark"] .notifTime{ color:#93a39a; }

.notifItem{
  padding:12px 14px!important;
  margin:0!important;
  border-bottom:1px solid #edf2ef;
  border-radius:0!important;
  color:#17332d!important;
  background:#fff!important;
}

.notifItem:hover{
  background:#f0f8f4!important;
}

.notifItem .t{
  color:#17332d!important;
  font-size:12.5px;
  line-height:1.45;
}

.notifItem:has(.t)::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;
  background:var(--v4-gold);
  vertical-align:middle;
}

.notifDrop .empty{
  color:#6f7e78!important;
  background:#fff!important;
}

/* Content / cards */
.appContent{
  width:auto;
  flex:1;
  min-width:0;
  padding:28px 32px 42px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.40),transparent 220px);
}

.panel{
  background:rgba(255,255,255,.96);
  border:1px solid var(--v4-line);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(26,61,50,.055);
}

.panel h2{color:var(--v4-primary-dark);}

.btn-primary{
  background:var(--v4-primary)!important;
  border-color:var(--v4-primary)!important;
}

.btn-primary:hover{
  background:#084a3d!important;
}

input:focus,select:focus,textarea:focus{
  border-color:#69a994!important;
  box-shadow:0 0 0 3px rgba(11,93,75,.10)!important;
  outline:none;
}

/* Collapse control */
#sidebarCollapse{
  position:absolute;
  right:-13px;
  top:22px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:#0b5d4b;
  color:#fff;
  box-shadow:0 5px 15px rgba(0,0,0,.20);
  cursor:pointer;
  z-index:20;
  font-size:15px;
  line-height:1;
}

#sidebarCollapse:hover{
  background:#11725c;
}

#appShell.sidebar-collapsed header.topbar.sidebarNav{
  width:84px;
  min-width:84px;
  padding-left:10px;
  padding-right:10px;
}

#appShell.sidebar-collapsed header.topbar.sidebarNav .brand{
  justify-content:center;
  padding-left:2px;
  padding-right:2px;
}

#appShell.sidebar-collapsed header.topbar.sidebarNav .brand img{
  height:34px!important;
}

#appShell.sidebar-collapsed header.topbar.sidebarNav .brand > div{
  display:none;
}

#appShell.sidebar-collapsed .navGroupTitle,
#appShell.sidebar-collapsed .navText,
#appShell.sidebar-collapsed .userbox .who,
#appShell.sidebar-collapsed .userbox .btn-outline{
  display:none!important;
}

#appShell.sidebar-collapsed nav.tabs button{
  justify-content:center;
  padding:7px;
}

#appShell.sidebar-collapsed nav.tabs button .navIcon{
  margin:0;
}

#appShell.sidebar-collapsed nav.tabs button.active:before{
  left:-10px;
}

#appShell.sidebar-collapsed .userbox{
  grid-template-columns:1fr 1fr;
  justify-items:center;
}

#appShell.sidebar-collapsed .bellWrap,
#appShell.sidebar-collapsed .themeToggle{
  display:block;
}

#appShell.sidebar-collapsed .notifDrop{
  left:calc(100% + 12px)!important;
}

/* dark mode */
[data-theme="dark"] body,
[data-theme="dark"] #appShell{
  background:#0d1713;
  color:#e7f0eb;
}

[data-theme="dark"] .appContent{
  background:#0d1713;
}

[data-theme="dark"] .panel{
  background:#13221c;
  border-color:#244238;
  color:#e5eee9;
}

[data-theme="dark"] .panel h2{
  color:#d9eee5;
}

[data-theme="dark"] .notifDrop{
  background:#15251f!important;
  border-color:#2a483d!important;
  color:#e8f2ed!important;
}

[data-theme="dark"] .notifDrop:before{
  color:#91d6b9;
  border-color:#2a483d;
}

[data-theme="dark"] .notifItem{
  background:#15251f!important;
  color:#e8f2ed!important;
  border-color:#263f36;
}

[data-theme="dark"] .notifItem .t{
  color:#e8f2ed!important;
}

@media(max-width:900px){
  header.topbar.sidebarNav{
    width:100%;
    min-width:0;
    height:auto;
    position:sticky;
    padding:10px 12px;
  }
  #sidebarCollapse{display:none;}
  .navGroupTitle{display:none;}
  nav.tabs{flex-direction:row;overflow-x:auto;}
  nav.tabs button{width:auto;min-width:max-content;}
  .appContent{width:100%;padding:18px 14px 30px;}
  .notifDrop{
    left:auto!important;
    right:0!important;
    bottom:auto!important;
    top:46px!important;
  }
}



.notifItem{display:flex;align-items:flex-start;gap:9px;}
.notifDot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 8px;background:#2d8f74;}
.notifItem.notif-critical .notifDot{background:#d9534f;box-shadow:0 0 0 3px rgba(217,83,79,.12);}
.notifItem.notif-warning .notifDot{background:#e2b24b;box-shadow:0 0 0 3px rgba(226,178,75,.14);}
.notifItem.notif-info .notifDot{background:#3b82a0;box-shadow:0 0 0 3px rgba(59,130,160,.12);}
.notifItem.notif-critical .t{color:#9f2f2b!important;}
.notifItem.notif-warning .t{color:#805d13!important;}
.notifItem.notif-info .t{color:#245f73!important;}
[data-theme="dark"] .notifItem.notif-critical .t{color:#ffaaa6!important;}
[data-theme="dark"] .notifItem.notif-warning .t{color:#f5d27d!important;}
[data-theme="dark"] .notifItem.notif-info .t{color:#91d6eb!important;}
.notifDrop:before{content:none;}



:root{
  --kc-primary:#0B5D3B;
  --kc-primary-dark:#073E28;
  --kc-primary-light:#E7F0EA;
  --kc-leaf:#5FA83D;
  --kc-gold:#C68A2E;
  --kc-bg:#F6F8F3;
  --kc-surface:#FFFFFF;
  --kc-surface-2:#F1F5F0;
  --kc-border:#DCE5DD;
  --kc-text:#15221B;
  --kc-muted:#6C786F;
  --kc-danger:#A5372A;
  --kc-danger-light:#F7E3DF;
  --kc-shadow:0 8px 24px rgba(23,55,39,.06);
  --kc-radius:12px;
}
body{
  background:radial-gradient(circle at 82% 8%,rgba(95,168,61,.08),transparent 27%),linear-gradient(180deg,#F8FAF7 0%,#F3F6F1 100%);
  color:var(--kc-text);
}
#appShell{display:none;min-height:100vh;flex-direction:row;background:var(--kc-bg);}
#qmsMobileMenuBackdrop{display:none;}
.qms-sidebar{
  width:272px;min-width:272px;height:100vh;position:sticky;left:0;top:0;z-index:90;
  display:flex;flex-direction:column;background:var(--kc-surface);border-right:1px solid var(--kc-border);
  box-shadow:4px 0 22px rgba(25,60,40,.035);transition:width .22s ease,min-width .22s ease;
}
.qms-sidebar-brand{height:74px;padding:0 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--kc-border);}
.qms-sidebar-brand .brand-full{width:112px;height:auto;object-fit:contain;}
.qms-sidebar-brand .brand-mark{display:none;width:30px;height:30px;object-fit:contain;}
.qms-sidebar-brand .plat-name{font-size:12.5px;font-weight:800;line-height:1.25;color:var(--kc-primary-dark);}
.qms-sidebar-brand .plat-name small{display:block;font-size:9.5px;font-weight:500;color:var(--kc-muted);margin-top:3px;}
.qms-sidebar-nav{flex:1;overflow-y:auto;padding:14px 12px 18px;}
.qms-nav-section{margin:12px 8px 7px;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:#9AA59D;}
.qms-nav-item{
  width:100%;display:flex;align-items:center;gap:11px;min-height:43px;padding:9px 11px;margin-bottom:3px;
  border:0;border-radius:10px;background:transparent;color:#536158;text-align:left;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .12s ease;position:relative;
}
.qms-nav-item i{width:21px;font-size:18px;color:#89958D;flex:0 0 21px;text-align:center;transition:.18s ease;}
.qms-nav-item:hover{background:var(--kc-surface-2);color:var(--kc-primary-dark);transform:translateX(2px);}
.qms-nav-item:hover i{color:var(--kc-primary);transform:scale(1.05);}
.qms-nav-item.active{background:var(--kc-primary-light);color:var(--kc-primary-dark);}
.qms-nav-item.active i{color:var(--kc-primary);}
.qms-nav-item.active:before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;background:var(--kc-primary);border-radius:0 4px 4px 0;}
.qms-sidebar-footer{position:relative;padding:12px;border-top:1px solid var(--kc-border);}
.qms-user-mini{display:flex;align-items:center;gap:9px;padding:4px 3px 10px;}
.qms-user-copy{min-width:0;display:flex;flex-direction:column;}
.qms-user-copy b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qms-user-copy span{font-size:9.5px;color:var(--kc-muted);margin-top:2px;}
.qms-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--kc-primary);color:#fff;font-size:11px;font-weight:800;flex:0 0 31px;}
.qms-avatar.small{width:32px;height:32px;flex-basis:32px;}
.qms-footer-actions{display:flex;align-items:center;gap:6px;}
.qms-icon-btn,.qms-top-icon{position:relative;width:34px;height:34px;border-radius:9px;border:1px solid var(--kc-border);background:var(--kc-surface);color:#68766D;display:grid;place-items:center;cursor:pointer;}
.qms-icon-btn:hover,.qms-top-icon:hover{background:var(--kc-primary-light);color:var(--kc-primary);}
.qms-signout{height:34px;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #E4C7C1;border-radius:9px;background:#FFF9F8;color:var(--kc-danger);font-size:11px;font-weight:700;cursor:pointer;}
.qms-signout:hover{background:var(--kc-danger-light);}
.qms-collapse{
  position:static;width:100%;height:36px;border-radius:9px;border:1px solid var(--kc-border);
  background:var(--kc-surface);color:var(--kc-primary);box-shadow:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;
}
.qms-collapse-label{white-space:nowrap;}
#appShell.qms-collapsed .qms-collapse-label{display:none;}
#appShell.qms-collapsed .qms-collapse{width:36px;padding:0;}
.qms-collapse:hover{background:var(--kc-primary-light);}
.qms-main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.qms-topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 28px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--kc-border);position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);}

/* EFB Topbar Menu Toggle: fully show/hide the sidebar (independent of the existing collapse button) */
#appShell.qms-menu-hidden .qms-sidebar{display:none!important;}
#qmsSidebarToggle{flex:0 0 auto;}
#qmsSidebarToggle i{transition:transform .18s ease;}
#appShell.qms-menu-hidden #qmsSidebarToggle i{transform:rotate(180deg);}
.qms-page-heading{display:flex;flex-direction:column;gap:2px;}
.qms-eyebrow{font-size:8.5px;letter-spacing:.15em;color:var(--kc-leaf);font-weight:800;}
.qms-page-heading strong{font-size:17px;color:var(--kc-primary-dark);}
.qms-top-actions{display:flex;align-items:center;gap:8px;}
.qms-status{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #D7E7DA;background:#F2F8F1;border-radius:99px;color:#4B6656;font-size:10px;font-weight:700;}
.qms-status span{width:7px;height:7px;border-radius:50%;background:#5FA83D;box-shadow:0 0 0 3px rgba(95,168,61,.12);}
.qms-top-user{display:flex;align-items:center;gap:8px;padding-left:6px;}
.qms-top-user b{display:block;font-size:11px;}
.qms-top-user span{display:block;color:var(--kc-muted);font-size:9px;margin-top:1px;}
.topBellBadge,.bellBadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#D9534F;color:#fff;border:2px solid #fff;font-size:8px;font-weight:800;text-align:center;line-height:12px;}
.qms-notif-drop{position:absolute;left:14px;bottom:58px;right:auto;width:350px;max-height:430px;overflow:auto;padding:8px;background:#fff;border:1px solid var(--kc-border);border-radius:12px;box-shadow:0 18px 50px rgba(20,50,35,.18);z-index:160;}
.qms-notif-drop:before{content:none;}
.appContent{flex:1;min-width:0;width:100%;padding:26px 30px 40px;overflow:auto;background:transparent;}
.appContent>.panel,.appContent>.kpis,.appContent>.scoreBar{max-width:1500px;margin-left:auto;margin-right:auto;}
.panel,.chartWrap,.kpi,.qRow,.teamCard,.treeCard{box-shadow:var(--kc-shadow);}
.panel{border-color:var(--kc-border);}
.btn-primary{background:var(--kc-primary)!important;border-color:var(--kc-primary)!important;}
.btn-primary:hover{background:var(--kc-primary-dark)!important;}
.subnav button.active{background:var(--kc-primary)!important;border-color:var(--kc-primary)!important;}
[data-theme="dark"] #appShell{background:#101815;}
[data-theme="dark"] .qms-sidebar{background:#15211B;border-color:#2B3B33;}
[data-theme="dark"] .qms-sidebar-brand{border-color:#2B3B33;}
[data-theme="dark"] .qms-sidebar-brand .plat-name{color:#DCEBE2;}
[data-theme="dark"] .qms-nav-item{color:#AAB8B0;}
[data-theme="dark"] .qms-nav-item:hover{background:#1D2D25;color:#E5F0EA;}
[data-theme="dark"] .qms-nav-item.active{background:#20372C;color:#DDF1E6;}
[data-theme="dark"] .qms-topbar{background:rgba(16,25,21,.94);border-color:#2B3B33;}
[data-theme="dark"] .qms-page-heading strong{color:#DDECE4;}
[data-theme="dark"] .qms-top-icon,.qms-icon-btn{background:#17261F;border-color:#304239;color:#AAB8B0;}
[data-theme="dark"] .qms-notif-drop{background:#17261F;border-color:#304239;color:#E5F0EA;}
[data-theme="dark"] .qms-notif-drop:before{border-color:#304239;color:#8CC9AA;}
[data-theme="dark"] .qms-signout{background:#2A1C1A;border-color:#583A35;}
#appShell.qms-collapsed .qms-sidebar{width:76px;min-width:76px;}
#appShell.qms-collapsed .qms-sidebar-brand{justify-content:center;padding:0 8px;}
#appShell.qms-collapsed .qms-sidebar-brand .brand-full,.qms-collapsed .qms-sidebar-brand .plat-name{display:none;}
#appShell.qms-collapsed .qms-sidebar-brand .brand-mark{display:block;}
#appShell.qms-collapsed .qms-nav-section,#appShell.qms-collapsed .qms-nav-item span,#appShell.qms-collapsed .qms-user-copy,#appShell.qms-collapsed .qms-signout span{display:none;}
#appShell.qms-collapsed .qms-nav-item{justify-content:center;padding:10px 0;}
#appShell.qms-collapsed .qms-nav-item i{width:auto;font-size:19px;}
#appShell.qms-collapsed .qms-nav-item.active:before{left:0;top:9px;bottom:9px;}
#appShell.qms-collapsed .qms-sidebar-footer{padding:10px 8px;}
#appShell.qms-collapsed .qms-user-mini{justify-content:center;}
#appShell.qms-collapsed .qms-footer-actions{justify-content:center;flex-wrap:wrap;}
#appShell.qms-collapsed .qms-signout{width:34px;flex:0 0 34px;padding:0;}
#appShell.qms-collapsed .qms-signout i{margin:0;}
@media(max-width:900px){
  #appShell{flex-direction:column;}
  /* White topbar is pinned to the very top of the screen and stays
     there no matter how far the page is scrolled. */
  .qms-topbar{position:fixed;top:0;left:0;right:0;width:100%;height:60px;padding:0 14px;z-index:300;}
  .qms-main-col{padding-top:60px;}
  /* The sidebar becomes a dropdown menu anchored just under the
     fixed topbar. It is closed by default and only appears when
     #appShell has the qms-mobile-menu-open class (toggled by
     #qmsSidebarToggle in assets/js/topbar-menu-toggle.js). */
  .qms-sidebar{
    position:fixed;top:60px;left:0;right:0;width:100%;min-width:0;
    max-height:0;height:auto;overflow:hidden;
    border-right:0;border-bottom:1px solid var(--kc-border);
    box-shadow:0 16px 32px rgba(10,30,20,.18);
    z-index:290;opacity:0;pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .16s ease,transform .16s ease,max-height .16s ease;
  }
  #appShell.qms-mobile-menu-open .qms-sidebar{
    max-height:calc(100vh - 60px);opacity:1;pointer-events:auto;transform:translateY(0);
  }
  .qms-sidebar-brand{height:58px;padding:0 14px;}
  .qms-sidebar-brand .brand-full{width:100px;}
  .qms-sidebar-nav{display:flex;flex-direction:column;padding:8px;gap:4px;max-height:calc(100vh - 168px);overflow-y:auto;}
  .qms-nav-item{width:100%;min-width:0;margin:0 0 3px;}
  .qms-sidebar-footer{display:block;border-top:1px solid var(--kc-border);padding:8px 14px;}
  .qms-eyebrow{display:none;}
  .qms-status{display:none;}
  .appContent{padding:18px 14px 30px;}
  /* Tapping anywhere outside the open menu closes it. */
  #qmsMobileMenuBackdrop{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(8,20,14,.32);z-index:280;}
  #appShell.qms-mobile-menu-open #qmsMobileMenuBackdrop{display:block;}
}



/* V8: harden sidebar rendering and notification positioning */
.qms-sidebar-nav{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-height:0!important;
  padding:14px 12px 18px!important;
  visibility:visible!important;
  opacity:1!important;
}
.qms-nav-section{
  display:block!important;
  flex:0 0 auto!important;
  visibility:visible!important;
  opacity:1!important;
}
.qms-nav-item{
  display:flex!important;
  align-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 auto!important;
  position:relative!important;
  width:100%!important;
  min-height:43px!important;
  margin-bottom:4px!important;
  color:#536158!important;
  background:transparent!important;
}
.qms-nav-item i{display:block!important;visibility:visible!important;opacity:1!important;}
.qms-nav-item span{display:block!important;visibility:visible!important;opacity:1!important;}
.qms-nav-item.active{background:#EAF5EE!important;color:#0B5D3B!important;}
.qms-nav-item.active i{color:#0B5D3B!important;}
.qms-nav-item:hover{background:#F1F7F3!important;color:#0B5D3B!important;}

/* Collapsed mode: icons only */
#appShell.qms-collapsed .qms-sidebar-nav{padding:14px 8px!important;}
#appShell.qms-collapsed .qms-nav-section{display:none!important;}
#appShell.qms-collapsed .qms-nav-item{justify-content:center!important;padding:10px 0!important;min-height:43px!important;}
#appShell.qms-collapsed .qms-nav-item span{display:none!important;}
#appShell.qms-collapsed .qms-nav-item i{display:block!important;width:auto!important;font-size:19px!important;}
#appShell.qms-collapsed .qms-nav-item.active:before{left:0!important;top:8px!important;bottom:8px!important;}

/* Notifications: directly under the bell in the top bar */
.qms-top-actions{position:relative!important;}
.qms-notif-drop{
  position:fixed!important;
  left:auto!important;
  bottom:auto!important;
  width:380px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:460px!important;
  overflow:auto!important;
  padding:8px!important;
  background:#fff!important;
  border:1px solid #DCE7E1!important;
  border-radius:14px!important;
  box-shadow:0 18px 55px rgba(20,50,35,.20)!important;
  z-index:99999!important;
}
.qms-notif-drop:before{
  content:none!important;
  letter-spacing:.12em!important;
  color:#0B5D3B!important;
  font-weight:800!important;
  border-bottom:1px solid #E5ECE8!important;
  margin-bottom:5px!important;
}
.qms-notif-drop .notifItem{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  padding:11px 10px!important;
  margin-bottom:4px!important;
  border-radius:9px!important;
  color:#17332D!important;
  background:#fff!important;
}
.qms-notif-drop .notifItem:hover{background:#F1F7F3!important;}
.qms-notif-drop .notifItem .t{color:#17332D!important;font-weight:700!important;line-height:1.45!important;}
.qms-notif-drop .notifItem.notif-critical .t{color:#A9322C!important;}
.qms-notif-drop .notifItem.notif-warning .t{color:#7A5B16!important;}
.qms-notif-drop .notifItem.notif-info .t{color:#245F73!important;}
[data-theme="dark"] .qms-notif-drop{background:#17261F!important;border-color:#304239!important;}
[data-theme="dark"] .qms-notif-drop:before{color:#8CC9AA!important;border-color:#304239!important;}
[data-theme="dark"] .qms-notif-drop .notifItem{background:#17261F!important;color:#E8F2ED!important;}
[data-theme="dark"] .qms-notif-drop .notifItem .t{color:#E8F2ED!important;}
[data-theme="dark"] .qms-notif-drop .notifItem.notif-critical .t{color:#FFAAA6!important;}
[data-theme="dark"] .qms-notif-drop .notifItem.notif-warning .t{color:#F5D27D!important;}
[data-theme="dark"] .qms-notif-drop .notifItem.notif-info .t{color:#91D6EB!important;}
@media(max-width:900px){
  .qms-sidebar-nav{flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;}
  .qms-nav-section{display:none!important;}
  .qms-nav-item{width:auto!important;min-width:max-content!important;}
}



/* V9: clean navigation + viewport anchored notifications */
#appShell .qms-sidebar-nav{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow-y:auto!important;
}
#appShell .qms-nav-section{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#appShell .qms-nav-item{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.qms-notif-drop{
  position:fixed!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  bottom:auto!important;
  width:380px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:430px!important;
  overflow:auto!important;
  z-index:99999!important;
}
.qms-notif-drop:before{
  content:none!important;
}
.qms-top-actions{position:relative!important;}
@media(max-width:900px){
  .qms-notif-drop{
    width:min(380px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }
}



  /* Calibration category score columns */
  .calib-table-wrap{width:100%;overflow-x:auto;border-radius:10px;}
  .calib-table-wrap table{min-width:1180px;}
  .calib-table-wrap th{white-space:nowrap;font-size:11px;}
  .calib-table-wrap td{white-space:nowrap;}
  .cal-score-cell{font-weight:800;text-align:center;}



/* V5 Sidebar: clean icon + label navigation, stronger collapsed state */
header.topbar.sidebarNav{background:linear-gradient(180deg,#073b32 0%,#0b5d4b 54%,#062f29 100%)!important;}
#appShell.sidebar-collapsed header.topbar.sidebarNav{background:linear-gradient(180deg,#071f2b 0%,#0a3441 52%,#061d28 100%)!important;}
#appShell.sidebar-collapsed header.topbar.sidebarNav .navGroupTitle{display:none!important;}
#appShell.sidebar-collapsed nav.tabs button{height:47px!important;min-height:47px!important;width:54px!important;margin:4px auto!important;justify-content:center!important;border-radius:13px!important;}
#appShell.sidebar-collapsed nav.tabs button .navIcon{width:34px!important;height:34px!important;font-size:17px!important;}
#appShell.sidebar-collapsed nav.tabs button.active{background:linear-gradient(135deg,#ffffff,#dff4e9)!important;color:#073b32!important;}
#appShell.sidebar-collapsed nav.tabs button.active:before{left:-9px!important;background:#a5df7d!important;}
#appShell.sidebar-collapsed header.topbar.sidebarNav .brand{border-bottom-color:rgba(255,255,255,.08)!important;}
.navGroupTitle{font-size:9px!important;color:rgba(255,255,255,.48)!important;margin-top:17px!important;}
nav.tabs button{display:flex!important;align-items:center!important;gap:10px!important;}
nav.tabs button .navIcon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 30px!important;}

/* Account -> evaluation type panel */
.evalTypeCard{margin-top:14px;padding:13px 14px;border:1px solid #dce9e4;border-radius:13px;background:linear-gradient(135deg,#f7fbf9,#eef7f3);display:flex;align-items:center;gap:14px;}
.evalTypeCard .evalTypeIcon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#dcefe7;color:#0b5d4b;font-weight:800;}
.evalTypeCard .evalTypeText{flex:1;min-width:180px;}
.evalTypeCard .evalTypeText b{display:block;color:#073b32;font-size:12px;}
.evalTypeCard .evalTypeText span{display:block;color:#71807a;font-size:10px;margin-top:3px;}
.evalTypeCard select{min-width:280px;max-width:420px;}
.evalTypeEmpty{color:#8b5b1b;background:#fff7e5;border-color:#efd69b;}
[data-theme="dark"] .evalTypeCard{background:#15251f;border-color:#2a483d;}
[data-theme="dark"] .evalTypeCard .evalTypeText b{color:#d9eee5;}
[data-theme="dark"] .evalTypeCard .evalTypeText span{color:#9db0a8;}

.accountScopeHint{margin-top:8px;padding:9px 11px;border-radius:10px;background:#f1f7f4;color:#557068;font-size:10.5px;border:1px solid #e1ebe7;}
[data-theme="dark"] .accountScopeHint{background:#13221c;border-color:#2a483d;color:#a8bbb3;}



/* FINAL NAV FIX: SESSION is a top-level lexical variable, not window.SESSION. */
#appShell .qms-sidebar-nav{display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important;overflow-y:auto!important;min-height:0!important;}
#appShell .qms-nav-section{display:block!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important;}
#appShell .qms-nav-item{display:flex!important;align-items:center!important;visibility:visible!important;opacity:1!important;flex:0 0 auto!important;width:100%!important;min-height:43px!important;}
#appShell .qms-nav-item i,#appShell .qms-nav-item span{display:block!important;visibility:visible!important;opacity:1!important;}



/* ============================================================
   V10 UI FIX
   - Notifications sit directly under the bell
   - Notification cards can be marked read by clicking
   - Better Sign Out button
   - Session survives browser refresh
   ============================================================ */

/* Header actions */
.qms-top-actions{
  position:relative!important;
  align-items:center!important;
  gap:9px!important;
}

.qms-top-icon{
  width:38px!important;
  height:38px!important;
  border-radius:11px!important;
  background:#ffffff!important;
  border:1px solid #D9E5DE!important;
  color:#0B5D3B!important;
  box-shadow:0 3px 12px rgba(18,72,48,.08)!important;
  transition:all .18s ease!important;
}
.qms-top-icon:hover{
  transform:translateY(-1px)!important;
  background:#EEF7F2!important;
  border-color:#BFD8CA!important;
  box-shadow:0 7px 18px rgba(18,72,48,.13)!important;
}
.qms-top-signout{
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 13px!important;
  border:1px solid #E8C9C4!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#FFF9F8,#FFF3F1)!important;
  color:#B4473E!important;
  font-size:11px!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:0 3px 12px rgba(180,71,62,.07)!important;
  transition:all .18s ease!important;
}
.qms-top-signout i{
  font-size:16px!important;
}
.qms-top-signout:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg,#FFF2F0,#FFEAE7)!important;
  border-color:#DFA9A2!important;
  box-shadow:0 7px 18px rgba(180,71,62,.14)!important;
}
.qms-top-signout:active{
  transform:translateY(0)!important;
}

/* Notification panel: always positioned from the actual bell coordinates by JS */
.qms-notif-drop{
  position:fixed!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:380px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:460px!important;
  overflow:auto!important;
  padding:0!important;
  background:#ffffff!important;
  border:1px solid #D8E5DE!important;
  border-radius:15px!important;
  box-shadow:0 20px 55px rgba(12,48,35,.20)!important;
  z-index:999999!important;
}
.qms-notif-drop:before{
  content:none!important;
}
.qms-notif-drop .empty{
  margin:0!important;
  padding:22px 16px!important;
  color:#71807A!important;
  background:#fff!important;
}
.qms-notif-drop .notifItem{
  position:relative!important;
  display:block!important;
  margin:0!important;
  padding:13px 16px 13px 39px!important;
  border-radius:0!important;
  border-bottom:1px solid #EEF3F0!important;
  background:#fff!important;
  color:#254239!important;
  cursor:pointer!important;
  transition:background .15s ease!important;
}
.qms-notif-drop .notifItem:last-child{
  border-bottom:0!important;
}
.qms-notif-drop .notifItem:hover{
  background:#F5FAF7!important;
}
.qms-notif-drop .notifItem .t{
  display:block!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:700!important;
  color:#244238!important;
}
.qms-notif-drop .notifItem.is-read{
  opacity:.58!important;
  background:#FAFCFB!important;
}
.qms-notif-drop .notifItem.is-read .t{
  font-weight:600!important;
}
.qms-notif-drop .notifItem .notifDot{
  position:absolute!important;
  left:17px!important;
  top:18px!important;
  width:9px!important;
  height:9px!important;
  border-radius:50%!important;
  background:#3E9A68!important;
  box-shadow:0 0 0 4px rgba(62,154,104,.10)!important;
}
.qms-notif-drop .notifItem.is-read .notifDot{
  width:7px!important;
  height:7px!important;
  top:19px!important;
  background:#AAB8B1!important;
  box-shadow:none!important;
}
.qms-notif-drop .notifItem .readMark{
  float:right!important;
  margin-left:8px!important;
  font-size:9px!important;
  color:#7A8982!important;
  font-weight:700!important;
}

/* Dark mode */
[data-theme="dark"] .qms-top-icon{
  background:#17261F!important;
  border-color:#304239!important;
  color:#A7D7BF!important;
}
[data-theme="dark"] .qms-top-signout{
  background:#2A1C1A!important;
  border-color:#65413A!important;
  color:#FFB2AA!important;
}
[data-theme="dark"] .qms-top-signout:hover{
  background:#39221F!important;
}
[data-theme="dark"] .qms-notif-drop{
  background:#17261F!important;
  border-color:#304239!important;
}
[data-theme="dark"] .qms-notif-drop:before{
  color:#8CC9AA!important;
  border-color:#304239!important;
}
[data-theme="dark"] .qms-notif-drop .notifItem{
  background:#17261F!important;
  border-color:#263A32!important;
  color:#E5F0EA!important;
}
[data-theme="dark"] .qms-notif-drop .notifItem:hover{
  background:#1D3027!important;
}
[data-theme="dark"] .qms-notif-drop .notifItem .t{
  color:#E5F0EA!important;
}
[data-theme="dark"] .qms-notif-drop .notifItem.is-read{
  background:#14201B!important;
}
[data-theme="dark"] .qms-notif-drop .empty{
  background:#17261F!important;
  color:#AAB8B0!important;
}

@media(max-width:900px){
  .qms-top-actions{
    gap:6px!important;
  }
  .qms-status,
  .qms-top-user > div:not(.qms-avatar){
    display:none!important;
  }
  .qms-top-signout{
    width:38px!important;
    padding:0!important;
  }
  .qms-top-signout span{
    display:none!important;
  }
}



  .qms-notif-drop{
    position:fixed!important;
    width:min(390px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    max-height:min(500px,calc(100vh - 90px))!important;
    overflow:auto!important;
    z-index:999999!important;
  }
  .qms-notif-drop .notifItem{
    position:relative;
    cursor:pointer;
    padding:12px 12px 10px!important;
    transition:background .15s ease,opacity .15s ease,transform .15s ease;
  }
  .qms-notif-drop .notifItem:hover{transform:translateY(-1px);}
  .qms-notif-drop .notifItem .readMark{display:none!important;}
  .qms-notif-drop .notifItem.is-read{display:none!important;}
  .qms-notif-drop .notifItem .t{flex:1;min-width:0;}
  .qms-notif-drop .empty{padding:30px 18px!important;}
  @media(max-width:600px){
    .qms-notif-drop{
      width:calc(100vw - 16px)!important;
      max-width:calc(100vw - 16px)!important;
      max-height:calc(100vh - 78px)!important;
      border-radius:14px!important;
    }
    .qms-notif-drop:before{padding:12px 13px!important;}
    .qms-notif-drop .notifItem{padding:13px!important;}
    .qms-topbar{padding-left:10px!important;padding-right:10px!important;}
    .qms-top-actions{gap:5px!important;}
  }
  @media(min-width:901px){
    .qms-notif-drop{min-width:350px!important;}
  }



/* V12: Multi-select filters + corrected notification placement + calibration modes */
.filterBar .multiFilter{
  min-width:170px;
  max-width:230px;
}
.filterBar select.multiFilter{
  min-height:40px;
  max-height:120px;
  padding:6px 8px;
  background:#fff;
}
.filterBar select.multiFilter option{
  padding:5px 7px;
}
.filterBar select.multiFilter option:checked{
  background:#e8f4ef linear-gradient(0deg,#e8f4ef,#e8f4ef);
  color:#073E28;
  font-weight:700;
}
.multiFilterHint{
  display:block;
  font-size:10px;
  color:#71807a;
  margin-top:2px;
}
.calibMode .btn.active{background:var(--v4-primary,#0b5d4b)!important;color:#fff!important;border-color:var(--v4-primary,#0b5d4b)!important;}
.calibTargetBox{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0;
}
.calibTargetBox .field{margin-bottom:0;}
.calibTargetBox select{width:100%;min-height:42px;}
.calib-role{font-size:10px;padding:2px 6px;border-radius:99px;background:#eef4f1;color:#456257;font-weight:700;}
.calib-role.qa{background:#e8f4ef;color:#0b5d4b;}
.calib-role.trainer{background:#fff4dc;color:#805d13;}
.calib-role.tl{background:#e9effb;color:#38558b;}
.calib-benchmark{background:#e8f4ef!important;}
@media(max-width:700px){
  .calibTargetBox{grid-template-columns:1fr;}
  .filterBar select.multiFilter{max-width:none;width:100%;}
}



/* V13: unified premium checkbox dropdowns for every filter */
.filterBar .v13-filter-wrap{position:relative;display:inline-block;min-width:170px;vertical-align:middle;}
.filterBar .v13-filter-select{display:none!important;}
.v13-filter-btn{
  width:100%;min-width:170px;height:40px;padding:0 34px 0 12px;border:1px solid var(--line,#d7dfda);
  border-radius:8px;background:#fff;color:#18352a;font:inherit;font-size:12.5px;text-align:left;cursor:pointer;
  position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v13-filter-btn:after{content:'⌄';position:absolute;right:12px;top:9px;font-size:16px;color:#587066;line-height:20px;}
.v13-filter-btn:hover{border-color:#9bb8aa;background:#fbfdfc;}
.v13-filter-wrap.open .v13-filter-btn{border-color:#0b5d4b;box-shadow:0 0 0 3px rgba(11,93,75,.08);}
.v13-filter-wrap.open .v13-filter-btn:after{content:'⌃';}
.v13-filter-menu{
  position:absolute;z-index:1000000;top:calc(100% + 6px);left:0;width:100%;min-width:220px;max-height:320px;overflow:auto;
  background:#fff;border:1px solid #d8e1dc;border-radius:10px;box-shadow:0 14px 35px rgba(24,53,42,.16);padding:6px;
}
.v13-filter-menu[hidden]{display:none!important;}
.v13-filter-option{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:7px;cursor:pointer;color:#243a31;font-size:12.5px;line-height:18px;user-select:none;}
.v13-filter-option:hover{background:#f1f7f4;}
.v13-filter-option input{appearance:none;-webkit-appearance:none;width:16px;height:16px;min-width:16px;border:1.5px solid #9aaca4;border-radius:4px;background:#fff;position:relative;margin:0;cursor:pointer;}
.v13-filter-option input:checked{background:#0b5d4b;border-color:#0b5d4b;}
.v13-filter-option input:checked:after{content:'✓';position:absolute;left:2px;top:-2px;color:#fff;font-size:13px;font-weight:800;}
.v13-filter-option.all{border-bottom:1px solid #e6ece8;margin-bottom:4px;font-weight:700;color:#0b5d4b;}
.v13-filter-option .v13-count{margin-left:auto;color:#7a8982;font-size:10px;}
.v13-filter-wrap.v13-disabled{opacity:.55;pointer-events:none;}
.v13-filter-wrap.has-selection .v13-filter-btn{border-color:#8eb8a5;}
.v13-filter-wrap.has-selection .v13-filter-btn:before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:#0b5d4b;}
.v13-search-btn{
  height:40px;min-width:92px;padding:0 18px;border:1px solid #0b5d4b;border-radius:8px;
  background:#0b5d4b;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(11,93,75,.14);transition:background .15s ease,transform .05s ease;
}
.v13-search-btn:hover{background:#084c3e;}
.v13-search-btn:active{transform:translateY(1px);}
.v13-search-btn:focus-visible{outline:3px solid rgba(11,93,75,.18);outline-offset:2px;}
.v13-search-btn .ti{margin-right:6px;vertical-align:-1px;}
@media(max-width:700px){
  .filterBar .v13-filter-wrap{width:100%;min-width:0;}
  .v13-filter-btn{width:100%;min-width:0;}
  .v13-filter-menu{position:fixed;left:12px!important;right:12px;width:auto!important;max-height:55vh;}
}



  /* Notifications are ALWAYS below the entire white topbar. Never place the
     dropdown above the bar and never anchor it vertically to the bell. */
  #notifDrop.qms-notif-drop,
  #notifDrop.notifDrop{
    position:fixed !important;
    z-index:2147483647 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:auto !important;
  }



/* FINAL ROOT FIX: notification menu is anchored to the topbar itself.
   It can never overlap the bell because its top is 100% + gap.
   (position:sticky already establishes a positioning context for the
   absolutely-positioned dropdown below, same as position:relative would -
   using sticky here keeps the topbar pinned to the top of the screen while
   scrolling, instead of scrolling away with the rest of the page.) */
.qms-topbar{position:sticky !important; top:0 !important; z-index:150 !important;}
.qms-topbar > #notifDrop,
.qms-topbar .qms-notif-drop#notifDrop,
.qms-topbar .notifDrop#notifDrop{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  bottom:auto !important;
  left:auto !important;
  right:12px !important;
  transform:none !important;
  margin:0 !important;
  z-index:2147483647 !important;
  width:390px !important;
  max-width:calc(100vw - 24px) !important;
  max-height:calc(100vh - 90px) !important;
  overflow:auto !important;
}
@media(max-width:600px){
  .qms-topbar > #notifDrop,
  .qms-topbar .qms-notif-drop#notifDrop,
  .qms-topbar .notifDrop#notifDrop{
    right:8px !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
}

/* V14: premium filter dropdown polish */
.v13-filter-menu{
  min-width:270px;
  max-width:360px;
  max-height:390px;
  padding:8px;
  border:1px solid rgba(11,93,75,.14);
  border-radius:14px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 50px rgba(18,45,35,.18),0 2px 8px rgba(18,45,35,.08);
  backdrop-filter:blur(14px);
  animation:v13FilterIn .16s ease-out;
}
@keyframes v13FilterIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.v13-filter-head{display:flex;align-items:center;justify-content:space-between;padding:6px 7px 8px;gap:10px}
.v13-filter-title{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#315247}
.v13-filter-count{font-size:10px;font-weight:700;color:#0b5d4b;background:#e9f5f0;padding:4px 7px;border-radius:999px}
.v13-filter-search{display:flex;align-items:center;gap:7px;height:36px;margin:0 0 7px;padding:0 10px;border:1px solid #dce6e1;border-radius:9px;background:#f8fbfa}
.v13-filter-search:focus-within{border-color:#8bb5a3;background:#fff;box-shadow:0 0 0 3px rgba(11,93,75,.07)}
.v13-filter-search input{border:0!important;outline:0!important;background:transparent!important;width:100%!important;padding:0!important;margin:0!important;box-shadow:none!important;font-size:12px!important;color:#18352a!important}
.v13-search-icon{font-size:18px;color:#6d8077;line-height:1}
.v13-filter-list{max-height:220px;overflow:auto;padding-right:2px}
.v13-filter-list::-webkit-scrollbar,.v13-filter-menu::-webkit-scrollbar{width:6px}
.v13-filter-list::-webkit-scrollbar-thumb,.v13-filter-menu::-webkit-scrollbar-thumb{background:#cbd8d2;border-radius:99px}
.v13-filter-option{transition:background .12s ease,transform .08s ease}
.v13-filter-option:hover{background:#edf6f2;transform:translateX(1px)}
.v13-filter-option.all{margin-bottom:5px;padding:9px;border:1px solid #e2ebe7;border-radius:9px;background:#f7faf9}
.v13-filter-option.all:hover{background:#eef6f2}
.v13-filter-option .v13-count{margin-left:auto;min-width:22px;text-align:center;padding:2px 6px;border-radius:999px;background:#eef3f0;color:#708078}
.v13-filter-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;padding:7px 2px 1px;border-top:1px solid #e8eeeb}
.v13-clear-btn{border:0;background:transparent;color:#a14d4d;font-size:11px;font-weight:800;padding:6px 8px;border-radius:7px;cursor:pointer}
.v13-clear-btn:hover{background:#fff0f0}
.v13-footer-status{font-size:10px;color:#7a8982;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v13-filter-btn{height:42px!important;border-radius:10px!important;box-shadow:0 2px 7px rgba(24,53,42,.04);transition:border-color .15s,box-shadow .15s,transform .1s}
.v13-filter-btn:hover{box-shadow:0 5px 15px rgba(24,53,42,.08);transform:translateY(-1px)}
.v13-filter-wrap.has-selection .v13-filter-btn{font-weight:700;background:#fbfefc}
.v13-filter-wrap.has-selection .v13-filter-btn:before{width:4px;top:8px;bottom:8px}
@media(max-width:700px){
  .v13-filter-menu{min-width:0;max-width:none;border-radius:16px;padding:10px;box-shadow:0 20px 55px rgba(18,45,35,.22)}
  .v13-filter-list{max-height:45vh}
}
[data-theme="dark"] .v13-filter-menu{background:#101d18;border-color:#294238;box-shadow:0 20px 55px rgba(0,0,0,.45)}
[data-theme="dark"] .v13-filter-head,.dark .v13-filter-head{color:#d9e7e1}
[data-theme="dark"] .v13-filter-title{color:#b9d0c6}
[data-theme="dark"] .v13-filter-count{background:#183b30;color:#9ed1bc}
[data-theme="dark"] .v13-filter-search{background:#14251f;border-color:#304940}
[data-theme="dark"] .v13-filter-search input{color:#e3eee9!important}
[data-theme="dark"] .v13-filter-option{color:#d6e4de}
[data-theme="dark"] .v13-filter-option:hover{background:#19342b}
[data-theme="dark"] .v13-filter-option.all{background:#14251f;border-color:#304940}
[data-theme="dark"] .v13-filter-option .v13-count{background:#24372f;color:#9fb0a8}
[data-theme="dark"] .v13-filter-footer{border-color:#294238}

/* V14: premium filter dropdown polish */
.v13-filter-menu{min-width:270px;max-width:360px;max-height:390px;padding:8px;border:1px solid rgba(11,93,75,.14);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 18px 50px rgba(18,45,35,.18),0 2px 8px rgba(18,45,35,.08);backdrop-filter:blur(14px);animation:v13FilterIn .16s ease-out}
@keyframes v13FilterIn{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.v13-filter-head{display:flex;align-items:center;justify-content:space-between;padding:6px 7px 8px;gap:10px}.v13-filter-title{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#315247}.v13-filter-count{font-size:10px;font-weight:700;color:#0b5d4b;background:#e9f5f0;padding:4px 7px;border-radius:999px}
.v13-filter-search{display:flex;align-items:center;gap:7px;height:36px;margin:0 0 7px;padding:0 10px;border:1px solid #dce6e1;border-radius:9px;background:#f8fbfa}.v13-filter-search:focus-within{border-color:#8bb5a3;background:#fff;box-shadow:0 0 0 3px rgba(11,93,75,.07)}.v13-filter-search input{border:0!important;outline:0!important;background:transparent!important;width:100%!important;padding:0!important;margin:0!important;box-shadow:none!important;font-size:12px!important;color:#18352a!important}.v13-search-icon{font-size:18px;color:#6d8077;line-height:1}
.v13-filter-list{max-height:220px;overflow:auto;padding-right:2px}.v13-filter-list::-webkit-scrollbar{width:6px}.v13-filter-list::-webkit-scrollbar-thumb{background:#cbd8d2;border-radius:99px}.v13-filter-option{transition:background .12s ease,transform .08s ease}.v13-filter-option:hover{background:#edf6f2;transform:translateX(1px)}.v13-filter-option.all{margin-bottom:5px;padding:9px;border:1px solid #e2ebe7;border-radius:9px;background:#f7faf9}.v13-filter-option.all:hover{background:#eef6f2}.v13-filter-option .v13-count{margin-left:auto;min-width:22px;text-align:center;padding:2px 6px;border-radius:999px;background:#eef3f0;color:#708078}
.v13-filter-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;padding:7px 2px 1px;border-top:1px solid #e8eeeb}.v13-clear-btn{border:0;background:transparent;color:#a14d4d;font-size:11px;font-weight:800;padding:6px 8px;border-radius:7px;cursor:pointer}.v13-clear-btn:hover{background:#fff0f0}.v13-footer-status{font-size:10px;color:#7a8982;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v13-filter-btn{height:42px!important;border-radius:10px!important;box-shadow:0 2px 7px rgba(24,53,42,.04);transition:border-color .15s,box-shadow .15s,transform .1s}.v13-filter-btn:hover{box-shadow:0 5px 15px rgba(24,53,42,.08);transform:translateY(-1px)}.v13-filter-wrap.has-selection .v13-filter-btn{font-weight:700;background:#fbfefc}.v13-filter-wrap.has-selection .v13-filter-btn:before{width:4px;top:8px;bottom:8px}
@media(max-width:700px){.v13-filter-menu{min-width:0;max-width:none;border-radius:16px;padding:10px;box-shadow:0 20px 55px rgba(18,45,35,.22)}.v13-filter-list{max-height:45vh}}
[data-theme="dark"] .v13-filter-menu{background:#101d18;border-color:#294238;box-shadow:0 20px 55px rgba(0,0,0,.45)}[data-theme="dark"] .v13-filter-title{color:#b9d0c6}[data-theme="dark"] .v13-filter-count{background:#183b30;color:#9ed1bc}[data-theme="dark"] .v13-filter-search{background:#14251f;border-color:#304940}[data-theme="dark"] .v13-filter-search input{color:#e3eee9!important}[data-theme="dark"] .v13-filter-option{color:#d6e4de}[data-theme="dark"] .v13-filter-option:hover{background:#19342b}[data-theme="dark"] .v13-filter-option.all{background:#14251f;border-color:#304940}[data-theme="dark"] .v13-filter-option .v13-count{background:#24372f;color:#9fb0a8}[data-theme="dark"] .v13-filter-footer{border-color:#294238}

/* Premium call selection history */
.callHistory{margin-top:12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.035);padding:10px 12px}
.callHistoryList{display:grid;gap:8px;max-height:180px;overflow:auto;padding-right:2px}
.callHistoryItem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.callHistoryItem .subtle{font-size:11px;text-align:right}
.pill-success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:#15803d}
.pill-gold{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.28);color:#9a6b00}


/* ============================================================
   QMS FINAL DARK MODE CONTRAST PASS
   Stronger hierarchy, clearer controls and accessible contrast.
   ============================================================ */
[data-theme="dark"]{
  --ink:#F1F7F3;
  --paper:#0A120F;
  --panel:#16231D;
  --line:#3A5147;
  --muted:#AABBB2;
  --forest-light:#204436;
  --forest-dark:#CDEBDD;
  --kc-bg:#0A120F;
  --kc-surface:#16231D;
  --kc-surface-2:#1D3028;
  --kc-text:#F1F7F3;
  --kc-muted:#AABBB2;
  --kc-border:#3A5147;
}
[data-theme="dark"] body,
[data-theme="dark"] #appShell{
  background:#09110E!important;
  color:#F1F7F3!important;
}
[data-theme="dark"] .appContent{background:#09110E!important;color:#F1F7F3!important;}
[data-theme="dark"] .panel,
[data-theme="dark"] .chartWrap,
[data-theme="dark"] .kpi,
[data-theme="dark"] .teamCard,
[data-theme="dark"] .treeCard,
[data-theme="dark"] .qRow{
  background:#16231D!important;
  color:#F1F7F3!important;
  border-color:#3A5147!important;
}
[data-theme="dark"] .panel h2,
[data-theme="dark"] .chartWrap h3,
[data-theme="dark"] .kpi .v,
[data-theme="dark"] .qms-page-heading strong{
  color:#F1F7F3!important;
}
[data-theme="dark"] .subtle,
[data-theme="dark"] .desc,
[data-theme="dark"] .qms-top-user span,
[data-theme="dark"] .kpi .l,
[data-theme="dark"] .field small,
[data-theme="dark"] .muted{
  color:#AABBB2!important;
}
[data-theme="dark"] table{color:#EEF6F1!important;border-color:#3A5147!important;}
[data-theme="dark"] th{
  background:#20372D!important;
  color:#EAF7F0!important;
  border-color:#3A5147!important;
}
[data-theme="dark"] td{border-color:#2D443A!important;color:#E5EFEA!important;}
[data-theme="dark"] tbody tr:hover{background:#1D3028!important;}
[data-theme="dark"] .field label{color:#DCEBE3!important;}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:#0F1B16!important;
  color:#F3F8F5!important;
  border-color:#466156!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:#83978D!important;opacity:1;}
[data-theme="dark"] select option{background:#0F1B16;color:#F3F8F5;}
[data-theme="dark"] .btn,
[data-theme="dark"] button:not(.qms-nav-item):not(.qms-top-icon):not(.qms-top-signout){
  color:#F3F8F5;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-gold{
  box-shadow:0 5px 16px rgba(0,0,0,.28);
}
[data-theme="dark"] .qms-sidebar{background:#111D17!important;border-color:#3A5147!important;}
[data-theme="dark"] .qms-sidebar-brand{border-color:#3A5147!important;}
[data-theme="dark"] .qms-nav-section{color:#8FA69B!important;}
[data-theme="dark"] .qms-nav-item{color:#C3D1CA!important;}
[data-theme="dark"] .qms-nav-item:hover{background:#20372D!important;color:#FFFFFF!important;}
[data-theme="dark"] .qms-nav-item.active{background:#285441!important;color:#FFFFFF!important;box-shadow:inset 3px 0 #7FD3A7;}
[data-theme="dark"] .qms-topbar{background:#111D17!important;border-color:#3A5147!important;}
[data-theme="dark"] .qms-top-icon,
[data-theme="dark"] .qms-icon-btn{
  background:#1B2B23!important;
  color:#EAF6F0!important;
  border-color:#466156!important;
}
[data-theme="dark"] .qms-top-icon:hover,
[data-theme="dark"] .qms-icon-btn:hover{background:#294238!important;color:#FFFFFF!important;}
[data-theme="dark"] .qms-top-signout{background:#432622!important;color:#FFD8D2!important;border-color:#70423A!important;}
[data-theme="dark"] .qms-top-signout:hover{background:#59302A!important;}
[data-theme="dark"] .badge-role,
[data-theme="dark"] .pill,
[data-theme="dark"] .cat-EC,
[data-theme="dark"] .cat-BC,
[data-theme="dark"] .cat-COMP,
[data-theme="dark"] .cat-NC{
  filter:none;
}
[data-theme="dark"] .v13-filter-menu{background:#111E18!important;border-color:#466156!important;box-shadow:0 24px 60px rgba(0,0,0,.6)!important;}
[data-theme="dark"] .v13-filter-head{color:#EEF7F2!important;}
[data-theme="dark"] .v13-filter-title{color:#DDEBE4!important;}
[data-theme="dark"] .v13-filter-count{background:#285441!important;color:#BEEFD2!important;}
[data-theme="dark"] .v13-filter-search{background:#172820!important;border-color:#466156!important;}
[data-theme="dark"] .v13-filter-search input{background:transparent!important;color:#F3F8F5!important;border:0!important;box-shadow:none!important;}
[data-theme="dark"] .v13-filter-option{color:#E1ECE6!important;}
[data-theme="dark"] .v13-filter-option:hover{background:#20372D!important;}
[data-theme="dark"] .v13-filter-option.all{background:#172820!important;border-color:#3A5147!important;}
[data-theme="dark"] .v13-filter-option .v13-count{background:#263D33!important;color:#B6C8BF!important;}
[data-theme="dark"] .v13-filter-footer{border-color:#3A5147!important;}
[data-theme="dark"] .empty{color:#9FB2A8!important;}
[data-theme="dark"] .linklike{color:#7FD3A7!important;}
[data-theme="dark"] ::selection{background:#3B765A;color:#FFFFFF;}

/* ============================================================
   QMS DARK MODE v2 - FULL UI REWORK
   Unified contrast system for every surface/control.
   ============================================================ */
[data-theme="dark"]{
  color-scheme:dark;
  --dm-bg:#08110D;
  --dm-surface:#101C17;
  --dm-surface-2:#16251E;
  --dm-surface-3:#1D3027;
  --dm-input:#0C1712;
  --dm-border:#385246;
  --dm-border-strong:#506D5E;
  --dm-text:#F5FAF7;
  --dm-text-2:#D6E4DD;
  --dm-text-3:#AFC1B8;
  --dm-placeholder:#8FA49A;
  --dm-accent:#79D8A7;
  --dm-accent-strong:#A5F0C7;
  --dm-danger:#FF9D92;
  --dm-warning:#FFD27A;
  --dm-info:#8CCBFF;
}

[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #appShell,
[data-theme="dark"] .app,
[data-theme="dark"] .appContent,
[data-theme="dark"] main,
[data-theme="dark"] .page,
[data-theme="dark"] .content,
[data-theme="dark"] .qms-main{
  background:var(--dm-bg)!important;
  color:var(--dm-text)!important;
}

/* Generic text and containers */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,
[data-theme="dark"] strong,[data-theme="dark"] b,
[data-theme="dark"] .title,[data-theme="dark"] .heading,
[data-theme="dark"] .section-title,[data-theme="dark"] .card-title{
  color:var(--dm-text)!important;
}
[data-theme="dark"] p,[data-theme="dark"] span,[data-theme="dark"] label,
[data-theme="dark"] .text,[data-theme="dark"] .description,[data-theme="dark"] .desc,
[data-theme="dark"] .subtle,[data-theme="dark"] .muted,[data-theme="dark"] small{
  color:var(--dm-text-2)!important;
}
[data-theme="dark"] .muted,[data-theme="dark"] .subtle,[data-theme="dark"] .field small{
  color:var(--dm-text-3)!important;
}

/* Cards / panels / sections */
[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .chartWrap,
[data-theme="dark"] .kpi,
[data-theme="dark"] .teamCard,
[data-theme="dark"] .treeCard,
[data-theme="dark"] .qRow,
[data-theme="dark"] .scorecard,
[data-theme="dark"] .score-card,
[data-theme="dark"] .evaluation-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .data-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu,
[data-theme="dark"] .popover{
  background:var(--dm-surface)!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.28)!important;
}

/* Form fields: force text visibility, including dynamically generated fields */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea{
  background:var(--dm-input)!important;
  color:var(--dm-text)!important;
  -webkit-text-fill-color:var(--dm-text)!important;
  border:1px solid var(--dm-border-strong)!important;
  caret-color:var(--dm-accent)!important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{
  color:var(--dm-placeholder)!important;
  -webkit-text-fill-color:var(--dm-placeholder)!important;
  opacity:1!important;
}
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] input[readonly],
[data-theme="dark"] select[readonly],
[data-theme="dark"] textarea[readonly]{
  background:#14221C!important;
  color:#DCEAE3!important;
  -webkit-text-fill-color:#DCEAE3!important;
  opacity:1!important;
}
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup{
  background:#101C17!important;
  color:#F5FAF7!important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus{
  outline:none!important;
  border-color:var(--dm-accent)!important;
  box-shadow:0 0 0 3px rgba(121,216,167,.13)!important;
}
[data-theme="dark"] .field label,
[data-theme="dark"] .form-label,
[data-theme="dark"] label.field-label{
  color:var(--dm-text)!important;
}

/* Checkboxes / radios */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"]{
  accent-color:var(--dm-accent)!important;
}

/* Tables */
[data-theme="dark"] table,
[data-theme="dark"] .data-table,
[data-theme="dark"] .table{
  background:var(--dm-surface)!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}
[data-theme="dark"] thead,
[data-theme="dark"] th{
  background:#1A2B23!important;
  color:#F5FAF7!important;
  border-color:var(--dm-border-strong)!important;
}
[data-theme="dark"] td{
  background:transparent!important;
  color:#DCEAE3!important;
  border-color:#30483C!important;
}
[data-theme="dark"] tbody tr:nth-child(even){background:#122019!important;}
[data-theme="dark"] tbody tr:hover{background:#20372B!important;}

/* Buttons */
[data-theme="dark"] button,
[data-theme="dark"] .btn{
  color:var(--dm-text)!important;
  border-color:var(--dm-border-strong)!important;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.btn-primary{
  background:#2B7655!important;
  color:#FFFFFF!important;
  border-color:#5EBF91!important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button.btn-primary:hover{
  background:#368D66!important;
}
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-light{
  background:#182920!important;
  color:#EAF5EF!important;
  border-color:#506D5E!important;
}
[data-theme="dark"] .btn-danger{background:#632E2A!important;color:#FFF0ED!important;border-color:#A85A51!important;}
[data-theme="dark"] .btn-success{background:#216744!important;color:#F2FFF8!important;border-color:#55B786!important;}

/* Sidebar / topbar */
[data-theme="dark"] .qms-sidebar,
[data-theme="dark"] .sidebar{
  background:#0E1914!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}
[data-theme="dark"] .qms-sidebar-brand{border-color:var(--dm-border)!important;color:var(--dm-text)!important;}
[data-theme="dark"] .qms-nav-section{color:#9DB2A7!important;}
[data-theme="dark"] .qms-nav-item{color:#CFE0D8!important;}
[data-theme="dark"] .qms-nav-item i{color:#AFC5BA!important;}
[data-theme="dark"] .qms-nav-item:hover{background:#1A3025!important;color:#FFFFFF!important;}
[data-theme="dark"] .qms-nav-item.active{background:#24543E!important;color:#FFFFFF!important;box-shadow:inset 3px 0 var(--dm-accent)!important;}
[data-theme="dark"] .qms-topbar{
  background:#0F1B16!important;
  color:var(--dm-text)!important;
  border-color:var(--dm-border)!important;
}
[data-theme="dark"] .qms-top-user,
[data-theme="dark"] .qms-top-user strong{color:var(--dm-text)!important;}
[data-theme="dark"] .qms-top-icon,
[data-theme="dark"] .qms-icon-btn{
  background:#182820!important;color:#EDF7F2!important;border-color:#506D5E!important;
}
[data-theme="dark"] .qms-top-icon:hover,
[data-theme="dark"] .qms-icon-btn:hover{background:#294438!important;color:#FFFFFF!important;}

/* Premium filters and dropdowns */
[data-theme="dark"] .v13-filter-menu,
[data-theme="dark"] .v13-filter-dropdown,
[data-theme="dark"] .filter-menu,
[data-theme="dark"] .custom-select-menu{
  background:#101C17!important;
  color:#F5FAF7!important;
  border:1px solid #506D5E!important;
  box-shadow:0 24px 60px rgba(0,0,0,.65)!important;
}
[data-theme="dark"] .v13-filter-head,
[data-theme="dark"] .v13-filter-title{color:#F5FAF7!important;}
[data-theme="dark"] .v13-filter-search{background:#0C1712!important;border-color:#506D5E!important;}
[data-theme="dark"] .v13-filter-search input{color:#F5FAF7!important;-webkit-text-fill-color:#F5FAF7!important;}
[data-theme="dark"] .v13-filter-option{color:#E6F1EB!important;}
[data-theme="dark"] .v13-filter-option:hover{background:#1E362A!important;}
[data-theme="dark"] .v13-filter-option.all{background:#172820!important;border-color:#405B4E!important;}
[data-theme="dark"] .v13-filter-option .v13-count{background:#294438!important;color:#C9DAD2!important;}
[data-theme="dark"] .v13-filter-footer{border-color:#385246!important;color:#D6E4DD!important;}

/* Modal / overlays / notifications */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .overlay{color:var(--dm-text)!important;}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .notification-panel,
[data-theme="dark"] .notifications-panel,
[data-theme="dark"] .toast{
  background:#101C17!important;
  color:#F5FAF7!important;
  border-color:#506D5E!important;
}
[data-theme="dark"] .notification-item,
[data-theme="dark"] .notif-item{background:#16251E!important;color:#EAF4EF!important;border-color:#30483C!important;}
[data-theme="dark"] .notification-item:hover,
[data-theme="dark"] .notif-item:hover{background:#20372B!important;}

/* Scorecard-specific surfaces */
[data-theme="dark"] .scorecard-header,
[data-theme="dark"] .scorecard-section,
[data-theme="dark"] .score-item,
[data-theme="dark"] .question,
[data-theme="dark"] .question-card,
[data-theme="dark"] .criteria-card{
  background:#14221C!important;
  color:#F5FAF7!important;
  border-color:#385246!important;
}
[data-theme="dark"] .question-title,
[data-theme="dark"] .question-text,
[data-theme="dark"] .criteria-title{color:#F5FAF7!important;}
[data-theme="dark"] .question-description,
[data-theme="dark"] .criteria-description{color:#BFD0C7!important;}

/* Badges / status / chips */
[data-theme="dark"] .badge,
[data-theme="dark"] .pill,
[data-theme="dark"] .badge-role{
  color:#F4FBF7!important;
  border-color:#506D5E!important;
}
[data-theme="dark"] .linklike,[data-theme="dark"] a{color:#83E0AF!important;}
[data-theme="dark"] a:hover{color:#B3F4CF!important;}
[data-theme="dark"] .empty{color:#AFC1B8!important;}

/* Scrollbars */
[data-theme="dark"] *{scrollbar-color:#49675A #0C1712;}
[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px;}
[data-theme="dark"] ::-webkit-scrollbar-track{background:#0C1712;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#49675A;border-radius:10px;border:2px solid #0C1712;}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#628575;}

/* Date/time controls and browser-native text */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"]{
  color-scheme:dark;
  color:#F5FAF7!important;
  -webkit-text-fill-color:#F5FAF7!important;
}
[data-theme="dark"] ::selection{background:#2E7455!important;color:#FFFFFF!important;}

/* ============================================================
   QMS DARK MODE - WHITE SURFACES TEXT FIX
   Keep existing white backgrounds exactly as they are.
   Only switch readable text to black on those white surfaces.
   Icons are intentionally excluded and are NOT recolored.
   ============================================================ */
[data-theme="dark"] :is(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background:#FFF"],
  [style*="background: #FFF"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background:#FFFFFF"],
  [style*="background: #FFFFFF"],
  [style*="background:white"],
  [style*="background: white"],
  .bg-white
) :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,.text,.title,.heading,.description,.desc,.subtle,.muted),
[data-theme="dark"] :is(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background:#FFF"],
  [style*="background: #FFF"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background:#FFFFFF"],
  [style*="background: #FFFFFF"],
  [style*="background:white"],
  [style*="background: white"],
  .bg-white
) > :is(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,b,.text,.title,.heading,.description,.desc,.subtle,.muted) {
  color:#111111!important;
  -webkit-text-fill-color:#111111!important;
}

/* Native text fields that remain white: text becomes black,
   calendar/time icons keep their existing appearance. */
[data-theme="dark"] :is(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"]
)[style*="background"] {
  color:#111111!important;
  -webkit-text-fill-color:#111111!important;
}

/* Known legacy white UI surfaces. Do not touch their icons. */
[data-theme="dark"] .qms-collapse,
[data-theme="dark"] .qms-notif-drop,
[data-theme="dark"] .subnav button,
[data-theme="dark"] .evalTypeEmpty,
[data-theme="dark"] .calib-role.trainer {
  color:#111111!important;
}
[data-theme="dark"] .qms-collapse :is(i,svg,.icon,[class*="icon"]),
[data-theme="dark"] .qms-notif-drop :is(i,svg,.icon,[class*="icon"]),
[data-theme="dark"] .subnav button :is(i,svg,.icon,[class*="icon"]) {
  color:inherit;
}


/* FINAL DARK-MODE WHITE FILTER SURFACE FIX
   Keep the white filter buttons white in dark mode.
   Only their readable text changes to black. The dropdown arrow/icon keeps its existing color. */
[data-theme="dark"] .v13-filter-btn{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}
[data-theme="dark"] .v13-filter-btn:hover{
  background:#fbfdfc!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}
[data-theme="dark"] .v13-filter-wrap.has-selection .v13-filter-btn{
  background:#fbfefc!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}
[data-theme="dark"] .v13-filter-btn:after{
  color:#587066!important;
  -webkit-text-fill-color:#587066!important;
}

/* FINAL: sidebar collapse/expand button in dark mode.
   An older rule (search "Known legacy white UI surfaces" above) assumed
   .qms-collapse still had a white background from an earlier design and
   force-colored its text/icon near-black to stay readable on white. This
   button's background is now the sidebar's own dark surface color, so that
   old rule was putting black-on-black (icon unreadable) or, on hover,
   pairing a near-white hover background with text that other rules had
   already pushed toward white too (text disappearing into the hover fill).
   This is the single source of truth for the button's dark-mode colors. */
[data-theme="dark"] .qms-collapse{
  background:#16231D!important;
  border-color:#3A5147!important;
  color:#CFE0D8!important;
  -webkit-text-fill-color:#CFE0D8!important;
}
[data-theme="dark"] .qms-collapse:hover{
  background:#1A3025!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
[data-theme="dark"] .qms-collapse :is(i,svg,.qms-collapse-label){
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}