/* Loaded last so both Bootstrap and the portal's custom surfaces share a mode. */
.color-mode-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
}
.color-mode-toggle:hover { background: var(--pale); }
.color-mode-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.color-mode-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mode-sun, [data-bs-theme="dark"] .mode-moon { display: none; }
[data-bs-theme="dark"] .mode-sun { display: block; }
.portal-nav > .admin-nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.login-form-area { position: relative; }
.login-mode-toggle { position: absolute; top: 16px; right: 16px; }
.topbar .row { flex-wrap: nowrap; }
.topbar .row > * { width: auto; }
.topbar .color-mode-toggle { width: 44px; padding: 0; }

:root[data-bs-theme="dark"] {
  --green: #83d991;
  --deep: #074c34;
  --ink: #e4eee7;
  --muted: #b1c3b7;
  --line: #385044;
  --bg: #101c16;
  --pale: #263f30;
  --white: #1b2c23;
  --amber: #f2ce80;
  --red: #ffb1b1;
  --bs-body-color: #e4eee7;
  --bs-body-color-rgb: 228, 238, 231;
  --bs-body-bg: #101c16;
  --bs-body-bg-rgb: 16, 28, 22;
  --bs-secondary-color: #b1c3b7;
  --bs-secondary-color-rgb: 177, 195, 183;
  --bs-secondary-bg: #26382e;
  --bs-tertiary-bg: #22372a;
  --bs-border-color: #385044;
  --bs-emphasis-color: #f4faf6;
  --bs-link-color: #92e3a0;
  --bs-link-color-rgb: 146, 227, 160;
  --bs-link-hover-color: #b5f0bf;
  --bs-link-hover-color-rgb: 181, 240, 191;
  --bs-success-rgb: 0, 128, 0;
  --bs-focus-ring-color: rgba(131, 217, 145, .3);
}
[data-bs-theme="dark"] body { color: var(--ink); background: radial-gradient(ellipse at top left, #203b2b, transparent 60%), #101c16; }
[data-bs-theme="dark"] .portal-nav,
[data-bs-theme="dark"] .topbar { background: rgba(27, 44, 35, .95); border-color: var(--line); }
[data-bs-theme="dark"] .portal-nav .eyebrow { color: var(--green); }
[data-bs-theme="dark"] :is(.card, .credit, .panel, .stat, .admin-panel, .sidebar, .leave-history-card, dialog, .ui-toast, .login, .login-form-area, .admin-editor > .card-body, .admin-editor form .d-flex.gap-2.mt-3, dialog.leave-dialog .dialog-actions) {
  color: var(--ink);
  background: #1b2c23;
  border-color: var(--line);
}
[data-bs-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .65); }
[data-bs-theme="dark"] :is(.form-control, .form-select, #app input, #app textarea, #app select, #dialog input, #dialog textarea, #dialog select, .topbar select) {
  color: var(--ink);
  background-color: #14251d;
  border-color: #4c6857;
}
[data-bs-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e4eee7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] :is(input, textarea)::placeholder { color: #a6bbad; opacity: 1; }
[data-bs-theme="dark"] :is(.form-control, .form-select):focus { color: var(--ink); border-color: var(--green); box-shadow: 0 0 0 .2rem rgba(131, 217, 145, .2); }
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #e4eee7;
  --bs-btn-border-color: #55715f;
  --bs-btn-hover-bg: #2c4936;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #83d991;
  --bs-btn-active-bg: #2c4936;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #83d991;
  background: #1b2c23;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: #2c4936; }
[data-bs-theme="dark"] .btn-primary {
  color: #fff;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  background: linear-gradient(135deg, #008000, #006b10);
}
[data-bs-theme="dark"] .btn-primary:hover:not(:disabled) { background: #006b10; }
[data-bs-theme="dark"] .text-success { color: #83d991 !important; }
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ffb1b1;
  --bs-btn-border-color: #c47f87;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8a323e;
  --bs-btn-hover-border-color: #ffb1b1;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8a323e;
  --bs-btn-active-border-color: #ffb1b1;
  --bs-btn-disabled-color: #ffb1b1;
}
[data-bs-theme="dark"] :is(.live-admin .text-body-secondary, .live-admin .muted, .live-admin .form-text, .live-admin .field .form-text) { color: var(--muted) !important; }
[data-bs-theme="dark"] :is(.staff-credit-label, .staff-credit-meta, .admin-filters .field, .live-admin footer, .login-form > p) { color: var(--muted); }
[data-bs-theme="dark"] :is(.staff-credit-number, .stat-card .stat-value) { color: #92e3a0; -webkit-text-fill-color: #92e3a0; }
[data-bs-theme="dark"] .staff-credit-number small { color: var(--muted); -webkit-text-fill-color: var(--muted); }
[data-bs-theme="dark"] :is(.staff-credit.conditional, .staff-symbol, .profile-avatar, .leave-summary, .next-step, .login .demo-entry, .skeleton-row, .sidebar-bottom .profile, .nav-item:hover) { background: #263b2c; color: var(--ink); border-color: var(--line); }
[data-bs-theme="dark"] .progress { background: #3b5243; }
[data-bs-theme="dark"] .status-pending { background: #4a3b21; color: #f6d38d; }
[data-bs-theme="dark"] .status-approved { background: #244b33; color: #a3e5b6; }
[data-bs-theme="dark"] .status-rejected { background: #512d31; color: #ffc1c5; }
[data-bs-theme="dark"] .status-cancelled { background: #35463c; color: #cfdbd3; }
[data-bs-theme="dark"] .role-chip { background: #35463c; color: #e4eee7; }
[data-bs-theme="dark"] .role-chip.role-admin { background: #3a3155; color: #d5c6ff; }
[data-bs-theme="dark"] .role-chip.role-gm { background: #513c2c; color: #ffcca5; }
[data-bs-theme="dark"] .role-chip.role-hr { background: #244258; color: #b4e2ff; }
[data-bs-theme="dark"] .role-chip.role-head { background: #4a3b21; color: #f6d38d; }
[data-bs-theme="dark"] .role-chip.role-staff { background: #244b33; color: #a3e5b6; }
[data-bs-theme="dark"] .live-admin [role="status"][data-kind="error"] { color: #ffc1c5; background: #512d31; }
[data-bs-theme="dark"] .table { --bs-table-color: #e4eee7; --bs-table-bg: #1b2c23; --bs-table-border-color: #385044; }
[data-bs-theme="dark"] :is(.live-admin .table thead th, .live-admin #admin-table .table thead th, table th) { background: #293f30; color: #c6e8cd; border-color: var(--line); }
[data-bs-theme="dark"] .live-admin #admin-table .table > tbody > tr:nth-child(odd) > td { background: #1b2c23; border-color: var(--line); }
[data-bs-theme="dark"] .live-admin #admin-table .table > tbody > tr:nth-child(even) > td { background: #22372a; border-color: var(--line); }
[data-bs-theme="dark"] .live-admin #admin-table .table > tbody > tr:hover > td,
[data-bs-theme="dark"] .live-admin .table-hover > tbody > tr:hover > * { background: #2c4936; }
[data-bs-theme="dark"] #admin-clear { color: var(--green); }
[data-bs-theme="dark"] #admin-pager .page-link { color: var(--ink); background: #1b2c23; border-color: var(--line); }
[data-bs-theme="dark"] #admin-pager .page-item.active .page-link { background: #008000; color: #fff; }
[data-bs-theme="dark"] #admin-pager .page-item.disabled .page-link { color: var(--muted); background: #26382e; }
[data-bs-theme="dark"] .bg-light { background-color: #26382e !important; }
[data-bs-theme="dark"] .bg-light.text-dark { color: var(--ink) !important; }
[data-bs-theme="dark"] .sk { background: linear-gradient(90deg, #2c4433 25%, #3b5744 50%, #2c4433 75%); background-size: 200% 100%; }
[data-bs-theme="dark"] .login .google { color: var(--ink); background: #22372a; border-color: #55715f; }
[data-bs-theme="dark"] .login .google:hover { background: #2c4936; }
[data-bs-theme="dark"] .session-loading { background: radial-gradient(ellipse at top, #26462f, transparent 65%), #101c16; }
[data-bs-theme="dark"] .session-card { background: #1b2c23; border-color: var(--line); }
[data-bs-theme="dark"] .session-card h1 { color: var(--ink); }
[data-bs-theme="dark"] :is(.session-card h1 span, .session-eyebrow, .session-status) { color: var(--green); }
[data-bs-theme="dark"] .session-loading .session-steps li { color: var(--muted); }
[data-bs-theme="dark"] .session-loading .session-steps li:first-child,
[data-bs-theme="dark"] .session-loading[data-stage="2"] .session-steps li:nth-child(2),
[data-bs-theme="dark"] .session-loading[data-stage="3"] .session-steps li,
[data-bs-theme="dark"] .session-loading[data-stage="4"] .session-steps li { color: var(--green); }
[data-bs-theme="dark"] #session-loading .session-steps li::before { background: currentColor; }
[data-bs-theme="dark"] :is(.session-caption, .session-signature) { color: var(--muted); }
[data-bs-theme="dark"] .session-signature { border-color: var(--line); }
[data-bs-theme="dark"] .session-signature span { color: var(--green); }
[data-bs-theme="dark"] .session-progress { background: #3b5243; }
/* The green logo keeps its original light backing in both modes. */
[data-bs-theme="dark"] :is(.portal-nav .staff-brand > img, .portal-nav > div > img) { background: #f5faf2; border-radius: 6px; }
[data-bs-theme="dark"] .session-logo img { background: #f5faf2; border-radius: 10px; padding: 8px 10px; }
[data-bs-theme="dark"] .profile-nav-status:not(.visually-hidden) { background: #1b2c23; border-color: var(--line); }
[data-bs-theme="dark"] .sidebar :is(.account, .help-box) { background: #22372a; }
[data-bs-theme="dark"] .sidebar .brand { background: #f5faf2; border-radius: 6px; }
[data-bs-theme="dark"] .button { background: #008000; color: #fff; }
[data-bs-theme="dark"] .button.secondary { background: #1b2c23; color: var(--ink); }
[data-bs-theme="dark"] .button.subtle { background: #263f30; color: var(--green); }
[data-bs-theme="dark"] .button.danger { background: #512d31; color: #ffc1c5; }
[data-bs-theme="dark"] .nav-item.active { background: #008000; }
[data-bs-theme="dark"] .avatar { background: #263f30; color: #b5f0bf; }
[data-bs-theme="dark"] :is(.av, .upcoming-icon, .note) { background: #263f30; color: #b5f0bf; }

@media (max-width: 800px) {
  .topbar #demo-user { max-width: 105px; }
}

@media (max-width: 350px) {
  .staff-navbar .staff-brand > img { width: 44px; flex-basis: 44px; }
  .staff-navbar .staff-brand-copy { padding-left: 4px !important; }
  .staff-navbar .staff-brand h1 { font-size: 10px; }
}