/* EMC Employee Hub: dark mode (the default). Light mode = html[data-theme="light"]. */
html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #E6EDF3; --blue: #1F6FB2; --blue-dark: #7CC4F7; --ink: #E6EDF3;
  --muted: #9AA8B6; --line: #243344; --bg: #0E151D; --card: #16212C; --panel: #16212C; --panel2: #121B25;
  --error: #FF9A90; --error-bg: #3D1A1A; --ok: #6FDCA3; --hr: #2A2410; --hr-line: #5A4A1A;
}
html[data-theme="dark"] body { background: #0E151D; color: #E6EDF3; }
html[data-theme="dark"] a { color: #7CC4F7; }
html[data-theme="dark"] a:hover { color: #A9D8FA; }

/* surfaces */
html[data-theme="dark"] header.bar, html[data-theme="dark"] .side, html[data-theme="dark"] .topbar { background: #121B25; box-shadow: none; }
html[data-theme="dark"] header.bar { border-bottom-color: #1F6FB2; }
html[data-theme="dark"] header.bar img, html[data-theme="dark"] .brand img, html[data-theme="dark"] .center-box img { background: #fff; border-radius: 8px; padding: 4px 8px; }
html[data-theme="dark"] header.bar button, html[data-theme="dark"] .usermenu > button, html[data-theme="dark"] .iconbtn { background: #16212C; color: #E6EDF3; border-color: #2A3A4C; }
html[data-theme="dark"] .usermenu .menu { background: #16212C; border-color: #2A3A4C; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
html[data-theme="dark"] .usermenu .menu a, html[data-theme="dark"] .usermenu .menu button { color: #E6EDF3; }
html[data-theme="dark"] .usermenu .menu a:hover, html[data-theme="dark"] .usermenu .menu button:hover { background: #1C2B3B; }
html[data-theme="dark"] .card, html[data-theme="dark"] .sec, html[data-theme="dark"] table.t, html[data-theme="dark"] .center-box,
html[data-theme="dark"] .modal, html[data-theme="dark"] .notif, html[data-theme="dark"] fieldset, html[data-theme="dark"] ol.steps,
html[data-theme="dark"] .course, html[data-theme="dark"] .welcome, html[data-theme="dark"] .tile { background: #16212C; border-color: #243344; }
html[data-theme="dark"] .center-box, html[data-theme="dark"] .modal { box-shadow: 0 10px 40px rgba(0,0,0,.6); }
html[data-theme="dark"] .overlay { background: rgba(3,8,14,.72); }
html[data-theme="dark"] table.t th { background: #1A2633; color: #9AA8B6; }
html[data-theme="dark"] table.t td { border-top-color: #1E2B39; }
html[data-theme="dark"] table.t tr.click:hover td { background: #1C2B3B; }
html[data-theme="dark"] .card .big { color: #E6EDF3; }
html[data-theme="dark"] .card.alert-c .big { color: #F2C66D; }
html[data-theme="dark"] .notif.unread { background: #13283A; }
html[data-theme="dark"] .doc, html[data-theme="dark"] .mono, html[data-theme="dark"] .calc, html[data-theme="dark"] .path { background: #121B25; border-color: #2A3A4C; }

/* form controls */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=url], html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #0F1720; color: #E6EDF3; border-color: #2A3A4C;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6E7E8E; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { outline-color: #4FB3F6; }

/* buttons */
html[data-theme="dark"] .btn2 { background: #1F6FB2; color: #fff; }
html[data-theme="dark"] .btn2:hover { background: #2A82CC; }
html[data-theme="dark"] .btn2.ghost, html[data-theme="dark"] .modal .plain, html[data-theme="dark"] button.back,
html[data-theme="dark"] .course .cfoot button, html[data-theme="dark"] button.secondary { background: transparent; color: #E6EDF3; border: 1px solid #33465A; }
html[data-theme="dark"] .btn2.ghost:hover, html[data-theme="dark"] button.back:hover { background: #1C2B3B; }
html[data-theme="dark"] .btn2.red { background: #C2412F; }
html[data-theme="dark"] button.primary, html[data-theme="dark"] .course .cfoot button.go, html[data-theme="dark"] .modal a.btn { background: #1F6FB2; border-color: #1F6FB2; color: #fff; }
html[data-theme="dark"] button.primary:hover { background: #2A82CC; }
html[data-theme="dark"] .toast { background: #1F6FB2; color: #fff; }
html[data-theme="dark"] .gbtn { background: #fff; color: #1f2937; }

/* chips and status */
html[data-theme="dark"] .chip.g { background: #123526; color: #6FDCA3; }
html[data-theme="dark"] .chip.y { background: #3A2E10; color: #F2C66D; }
html[data-theme="dark"] .chip.r { background: #3D1A1A; color: #FF9A90; }
html[data-theme="dark"] .chip.n { background: #1F2B38; color: #B8C4D0; }
html[data-theme="dark"] .chip.b { background: #10304A; color: #7CC4F7; }
html[data-theme="dark"] .steps2 .st.now { background: #2A2410; border-color: #B8860B; }
html[data-theme="dark"] .steps2 .st.done { border-color: #1E7A4F; }
html[data-theme="dark"] .flow .fs { background: #16212C; border-color: #243344; color: #9AA8B6; }
html[data-theme="dark"] .flow .fs .n { background: #1F2B38; color: #B8C4D0; }
html[data-theme="dark"] .flow .fs.done { background: #123526; border-color: #1E7A4F; color: #6FDCA3; }
html[data-theme="dark"] .flow .fs.done .n { background: #1E7A4F; color: #fff; }
html[data-theme="dark"] .ok-box { background: #123526 !important; border-color: #1E7A4F !important; color: #E6EDF3 !important; }
html[data-theme="dark"] .alert { background: #3D1A1A; color: #FFD9D4; border-left-color: #FF9A90; }
html[data-theme="dark"] .errors { background: #3D1A1A; border-color: #6B2A24; color: #FFB4AA; }
html[data-theme="dark"] .intro { background: #10283A; border-left-color: #4FB3F6; }
html[data-theme="dark"] .done-pill { background: #123526; color: #6FDCA3; border-color: #1E7A4F; }

/* new-hire paperwork screens */
html[data-theme="dark"] ol.steps li { border-right-color: #243344; }
html[data-theme="dark"] ol.steps li.active { background: #1C2B3B; color: #fff; }
html[data-theme="dark"] ol.steps .num { background: #121B25; border-color: #33465A; }
html[data-theme="dark"] ol.steps li.hrstep.active { background: #2A2410; }
html[data-theme="dark"] fieldset.hr { background: #2A2410; border-color: #5A4A1A; }
html[data-theme="dark"] h3 { border-bottom-color: #243344; }
html[data-theme="dark"] .welcome .hero { background: linear-gradient(135deg, #16212C, #10304A); }
html[data-theme="dark"] .welcome .bring { background: #2A2410; }
html[data-theme="dark"] .welcome ol.preview li { background: #121B25; }
html[data-theme="dark"] .emp { border-color: #33465A; }

/* course player */
html[data-theme="dark"] .course .chead { background: #1C2B3B; }
html[data-theme="dark"] .course .bar { background: #223041; }
html[data-theme="dark"] .course .cfoot { background: #121B25; border-top-color: #243344; }
html[data-theme="dark"] .course .box.ok, html[data-theme="dark"] .q.right { background: #123526; }
html[data-theme="dark"] .course .box.no, html[data-theme="dark"] .q.wrong { background: #3D1A1A; }
html[data-theme="dark"] .course .box.call { background: #2A2410; }
html[data-theme="dark"] .course .tag { background: #3D1A1A; color: #FFB4AA; border-color: #6B2A24; }
html[data-theme="dark"] .q { border-color: #2A3A4C; }
html[data-theme="dark"] .opt2.sel { background: #10283A; border-color: #4FB3F6; }

html[data-theme="dark"] .privacy { background: #121B25; border-color: #2A3A4C; }
html[data-theme="dark"] fieldset.certify { border-color: #1F6FB2; }
html[data-theme="dark"] .welcome .hero img { background: #fff; }
html[data-theme="dark"] a.btn[style*="background:#fff"], html[data-theme="dark"] li[style*="background:#fff"] { background: #16212C !important; color: #E6EDF3 !important; border-color: #2A3A4C !important; }
html[data-theme="dark"] .modal .btn[style*="background:#fff"] { background: transparent !important; }
html[data-theme="dark"] #themeToggle { background: #16212C; color: #E6EDF3; border-color: #2A3A4C; }

/* paper look stays light: signature pads and the insurance form */
html[data-theme="dark"] .sig .pad { background: #fff; }
html[data-theme="dark"] .sig .row .hint { color: #9AA8B6; }
html[data-theme="dark"] .modal.ocform { color-scheme: light; --ink: #222b35; --muted: #5d6b7a; --line: #d5dde6; --navy: #1f2d3d; --bg: #f4f7fa; --blue: #2a8fd6; background: #fff; color: #222b35; }
html[data-theme="dark"] .modal.ocform input[type=text], html[data-theme="dark"] .modal.ocform input[type=date] { background: transparent; color: #0b1f6b; }
html[data-theme="dark"] .ocfoot { background: #fff; }