/* Metallic gray header bar */
.header-metallic {
	background: linear-gradient(180deg, #f2f2f2 0%, #d9d9d9 40%, #bfbfbf 70%, #a6a6a6 100%);
	color: #1f1f1f;
	border-radius: 0.5rem;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
							inset 0 -1px 0 rgba(0,0,0,0.2),
							0 4px 10px rgba(0,0,0,0.1);
	border: 1px solid #9e9e9e;
}

.header-metallic h6,
.header-metallic .text-white {
	color: #222 !important;
}

/* Global macOS-like monochrome UI overrides moved from _Host.cshtml */
:root{--mac-bg:#f5f5f7;--mac-surface:#fff;--mac-border:#e5e5ea;--mac-text:#111;--mac-subtext:#6e6e73;--mac-primary:#111;--mac-hover:#f2f2f7;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  /* Theming tokens — overridden per [data-theme]; defaults keep the monochrome "graphite" look */
  --mac-accent:#1a1a1a;--mac-accent-contrast:#fff;
  --mac-btn-primary-bg:#fff;--mac-btn-primary-fg:#000;--mac-btn-primary-border:#000;--mac-btn-primary-hover:#f2f2f7}
html,body{background:var(--mac-bg);color:var(--mac-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif}
.nav,.navbar,.border-bottom{border-color:var(--mac-border)!important}
.navbar,.nav-pills{background:var(--mac-surface)!important}
.nav-pills .nav-link{color:var(--mac-text);border-radius:var(--radius-sm);font-weight:600;padding:.45rem .9rem;border:1px solid transparent}
.nav-pills .nav-link.active{background:var(--mac-accent);color:var(--mac-accent-contrast)}
.nav-pills .nav-link:hover{background:var(--mac-hover)}
.card{border:1px solid var(--mac-border);border-radius:var(--radius);background:var(--mac-surface);box-shadow:var(--shadow)}
.card-header{background:linear-gradient(180deg,#fafafa,#f7f7f9);border-bottom:1px solid var(--mac-border);color:var(--mac-subtext);font-weight:600}
.btn{border-radius:var(--radius-sm);font-weight:600;border-width:1px;padding:.45rem .9rem}
/* Remove black background from primary buttons */
.btn-primary{background:var(--mac-btn-primary-bg);border-color:var(--mac-btn-primary-border);color:var(--mac-btn-primary-fg)}
.btn-primary:hover{background:var(--mac-btn-primary-hover);border-color:var(--mac-btn-primary-border);color:var(--mac-btn-primary-fg)}
.btn-outline-primary{color:#000;border-color:#000;background:#fff}
.btn-outline-primary:hover{background:var(--mac-hover);color:#000;border-color:#000}
.btn-outline-danger{background:#fff;color:#dc3545;border-color:#dc3545}
.btn-outline-danger:hover{background:#fff;color:#bb2d3b;border-color:#bb2d3b}
.btn-outline-success{background:#fff;color:#198754;border-color:#198754}
.btn-outline-success:hover{background:#fff;color:#157347;border-color:#157347}
.btn-outline-secondary{color:var(--mac-text);border-color:#c7c7cc;background:#fff}
.btn-outline-secondary:hover{background:var(--mac-hover);color:#000}
/* Use Bootstrap's standard green/red for clear Approve/Reject cues */
.btn-success{background:#198754;border-color:#198754;color:#fff}
.btn-success:hover{background:#157347;border-color:#146c43;color:#fff}
.btn-danger{background:#dc3545;border-color:#dc3545;color:#fff}
.btn-danger:hover{background:#bb2d3b;border-color:#b02a37;color:#fff}
.form-control,.form-select{border-radius:var(--radius-sm);border-color:#d1d1d6;background:#fff}
.form-control:focus,.form-select:focus{border-color:#bcbcc0;box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.form-label{color:var(--mac-subtext);font-weight:600}
.table{--bs-table-color:var(--mac-text)}
.table thead th{background:#fafafa;color:var(--mac-subtext);font-weight:600;border-bottom-color:var(--mac-border)}
.table tbody tr:hover{background:var(--mac-hover)}
.table>:not(caption)>*>*{border-color:var(--mac-border)}
.badge{border-radius:999px;font-weight:600}
.alert{border-radius:var(--radius-sm);border-color:var(--mac-border)}
.alert-danger{background:#fff;color:#000;border-left:4px solid #000}
.alert-success{background:#fff;color:#111;border-left:4px solid #2f2f2f}
.alert-info{background:#fff;color:#111;border-left:4px solid #6e6e73}
.modal.show .modal-dialog{filter:drop-shadow(0 12px 36px rgba(0,0,0,.12))}
.modal-content{border-radius:var(--radius);border-color:var(--mac-border)}
.small,.text-muted{color:var(--mac-subtext)!important}
tr{transition:background-color .15s ease}
.btn:focus,.form-control:focus,.form-select:focus{outline:none}

/* Make all dropdown subitems appear as dark gray */
.dropdown-menu .dropdown-item{color:#3c3c3c}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{color:#000;background-color:var(--mac-hover)}
.dropdown-menu .dropdown-item.active{color:#fff;background-color:#000}

/* Reports page clickable hover and cell link styles */
.clickable-row:hover td { background: var(--mac-hover); }
.clickable-cell { color: #0d6efd; }
.clickable-cell:hover { text-decoration: underline; }

/* Pagination Prev/Next: the soft-ui theme renders every .page-link as a small
   circle, so the "Previous"/"Next" word labels overflow and look bad. Replace
   the labels with chevron arrows on the first/last page items (always Prev/Next).
   font-size:0 hides the text visually but keeps it in the accessibility tree,
   so screen readers still announce "Previous"/"Next". */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link { font-size: 0; }
.pagination .page-item:first-child .page-link::before,
.pagination .page-item:last-child .page-link::before { font-size: 1.1rem; line-height: 1; font-weight: 600; }
.pagination .page-item:first-child .page-link::before { content: "\276E"; } /* ❮ */
.pagination .page-item:last-child .page-link::before { content: "\276F"; }  /* ❯ */

/* Sticky bottom action bar: keeps the primary actions (Save / Approve / Reject) reachable
   on long pages instead of stranded below a tall form or table. The markup only adds this
   class to the existing button row; no behavior changes. */
.sticky-action-bar{position:sticky;bottom:0;z-index:5;pointer-events:auto;background:var(--mac-surface);padding:.6rem 0;border-top:1px solid var(--mac-border)}

/* Sticky table header for long data grids: column labels stay visible while the body
   scrolls. Pair with a max-height scroll container so the table body scrolls internally. */
.sticky-table thead th{position:sticky;top:0;z-index:2}

/* ===== Shared page header (title + subtitle on the left, actions on the right) ===== */
.page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.6rem 1rem;margin:.25rem 0 1.25rem}
.page-header .page-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin:0;color:var(--mac-text)}
.page-header .page-subtitle{margin:.2rem 0 0;color:var(--mac-subtext);font-size:.9rem;max-width:62ch}
.page-header .page-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto}
@media (max-width:575.98px){.page-header .page-header-actions{margin-left:0;width:100%}}

/* ===========================================================================
   Collapsible left sidebar navigation
   Additive only — reuses the existing --mac-* theme tokens. The collapsed
   (icon-rail) state is driven by `body.sidebar-collapsed`, toggled from JS so
   Blazor re-renders never reset it.
   =========================================================================== */
.app-shell{display:flex;align-items:stretch;min-height:100vh;background:var(--mac-bg)}

/* --- Sidebar shell --- */
.app-sidebar{flex:0 0 240px;width:240px;background:var(--mac-surface);border-right:1px solid var(--mac-border);display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start;height:100vh;z-index:1030;transition:width .15s ease}
.app-sidebar-brand{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;border-bottom:1px solid var(--mac-border);min-height:57px}
.app-sidebar-brand .brand-link{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--mac-text);font-weight:700;overflow:hidden;white-space:nowrap;min-width:0}
.app-sidebar-brand img{width:28px;height:28px;border-radius:6px;border:1px solid var(--mac-border);object-fit:contain;background:#fff;flex:0 0 auto}
.sidebar-collapse-btn{margin-left:auto;border:1px solid transparent;background:transparent;color:var(--mac-subtext);border-radius:var(--radius-sm);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.sidebar-collapse-btn:hover{background:var(--mac-hover);color:var(--mac-text)}

/* --- Scroll region --- */
.app-sidebar-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:.4rem .5rem 1rem}
.sidebar-nav{list-style:none;margin:0;padding:0}
.sidebar-nav li{list-style:none}
.sidebar-section{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mac-subtext);padding:.7rem .65rem .25rem;margin:0}

/* --- Links --- */
.sidebar-link{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:var(--radius-sm);color:var(--mac-text);text-decoration:none;font-weight:600;font-size:.9rem;white-space:nowrap;border:1px solid transparent;cursor:pointer}
.sidebar-link:hover{background:var(--mac-hover);color:var(--mac-text)}
.sidebar-link.active{background:var(--mac-hover);color:var(--mac-text);font-weight:700;box-shadow:inset 3px 0 0 var(--mac-accent)}
.sidebar-link.active:hover{background:var(--mac-hover);color:var(--mac-text)}
.sidebar-link>i.bi{font-size:1rem;width:1.2rem;text-align:center;flex:0 0 auto}
.sidebar-link .caret{margin-left:auto;font-size:.75rem;width:auto;transition:transform .15s ease}
.sidebar-group.open>.sidebar-link .caret{transform:rotate(180deg)}

/* --- Submenu --- */
.sidebar-submenu{list-style:none;margin:.05rem 0 .2rem;padding:0;display:none}
.sidebar-submenu.show{display:block}
.sidebar-sublink{display:block;padding:.38rem .65rem .38rem 2.25rem;border-radius:var(--radius-sm);color:var(--mac-subtext);text-decoration:none;font-weight:600;font-size:.85rem;white-space:nowrap}
.sidebar-sublink:hover{background:var(--mac-hover);color:var(--mac-text)}
.sidebar-sublink.active{color:var(--mac-text);background:var(--mac-hover);box-shadow:inset 3px 0 0 var(--mac-accent)}

/* --- Footer (user / logout) --- */
.app-sidebar-footer{border-top:1px solid var(--mac-border);padding:.45rem .5rem .6rem}
.sidebar-user{display:flex;align-items:center;gap:.6rem;padding:.4rem .65rem;color:var(--mac-text);overflow:hidden}
.sidebar-user>i.bi{font-size:1.5rem;color:var(--mac-subtext);flex:0 0 auto}
.sidebar-user .user-name{display:block;font-weight:700;font-size:.88rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user .user-role{display:block;font-size:.72rem;color:var(--mac-subtext);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Account menu (user name -> Change Password / Change Theme / Logout) --- */
.sidebar-user-menu{list-style:none;margin:0;padding:0}
.sidebar-user-menu .sidebar-group{display:flex;flex-direction:column-reverse}
.sidebar-user-toggle{cursor:pointer}
.sidebar-user-toggle>i.bi:first-child{font-size:1.4rem;color:var(--mac-subtext);flex:0 0 auto}
.sidebar-user-toggle .user-name{display:block;font-weight:700;font-size:.88rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-toggle .user-role{display:block;font-size:.72rem;color:var(--mac-subtext);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-menu .sidebar-theme-row{padding:0}
.sidebar-user-menu .sidebar-theme-row .theme-swatches{padding:.35rem .65rem .5rem 2.25rem}

/* --- Content area --- */
.app-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.app-content>main{flex:1 1 auto}
.app-content .content{padding:1.25rem 1.5rem}
.app-footer{padding:.75rem 1.5rem 1rem;text-align:center;color:var(--mac-subtext);font-size:.8rem;margin-top:auto}

/* --- Collapsed (icon rail) --- */
body.sidebar-collapsed .app-sidebar{width:66px;flex-basis:66px}
body.sidebar-collapsed .app-sidebar .nav-label{display:none}
body.sidebar-collapsed .app-sidebar .sidebar-submenu{display:none!important}
body.sidebar-collapsed .app-sidebar .sidebar-section{height:1px;padding:0;margin:.55rem .6rem;background:var(--mac-border);overflow:hidden}
body.sidebar-collapsed .sidebar-link{justify-content:center;padding:.55rem 0}
body.sidebar-collapsed .sidebar-link>i.bi{width:auto}
body.sidebar-collapsed .sidebar-link .caret{display:none}
body.sidebar-collapsed .app-sidebar-brand{justify-content:center;padding:.7rem 0}
body.sidebar-collapsed .app-sidebar-brand .brand-link{display:none}
body.sidebar-collapsed .sidebar-collapse-btn{margin:0}
body.sidebar-collapsed .sidebar-user{justify-content:center;padding:.4rem 0}

/* --- Mobile top bar + off-canvas (hidden on desktop) --- */
.app-mobile-topbar{display:none}
.sidebar-backdrop{display:none}
@media (max-width:991.98px){
  .app-mobile-topbar{display:flex;align-items:center;gap:.6rem;position:fixed;top:0;left:0;right:0;height:52px;padding:0 .8rem;background:var(--mac-surface);border-bottom:1px solid var(--mac-border);z-index:1040}
  .app-mobile-burger{border:1px solid var(--mac-border);background:transparent;border-radius:var(--radius-sm);width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;color:var(--mac-text)}
  .app-mobile-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--mac-text);font-weight:700}
  .app-mobile-brand img{width:26px;height:26px;border-radius:6px;border:1px solid var(--mac-border);object-fit:contain;background:#fff}
  .app-sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}
  .app-sidebar.mobile-open{transform:translateX(0)}
  body.sidebar-collapsed .app-sidebar{width:240px;flex-basis:240px}
  body.sidebar-collapsed .app-sidebar .nav-label{display:inline}
  body.sidebar-collapsed .app-sidebar .sidebar-submenu.show{display:block!important}
  .sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1035}
  .app-content{padding-top:52px}
}

/* Date inputs don't need to span a full grid column. */
.date-field{max-width:220px}

/* ===== SearchableSelect (type-to-filter single select) ===== */
.mhrc-ss{position:relative}
.mhrc-ss-input{cursor:text;padding-left:2rem;padding-right:2rem}
.mhrc-ss-icon{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--mac-subtext);pointer-events:none}
.mhrc-ss-search{left:.65rem;font-size:.9rem}
.mhrc-ss-chevron{right:.65rem;font-size:.8rem}
.mhrc-ss-clear{right:.4rem;border:0;background:transparent;cursor:pointer;pointer-events:auto;padding:.15rem .3rem;border-radius:var(--radius-sm);font-size:.78rem;color:var(--mac-subtext)}
.mhrc-ss-clear:hover{background:var(--mac-hover);color:#000}
.mhrc-ss-menu{position:absolute;z-index:1056;top:calc(100% + 2px);left:0;right:0;max-height:280px;overflow-y:auto;background:var(--mac-surface);border:1px solid var(--mac-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:.25rem}
.mhrc-ss-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:.35rem .6rem;border-radius:var(--radius-sm);font-size:.875rem;color:var(--mac-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhrc-ss-item:hover,.mhrc-ss-item.kbd{background:var(--mac-hover);color:#000}
.mhrc-ss-item.active{font-weight:600}
.mhrc-ss-item strong{font-weight:700}
.mhrc-ss-empty{padding:.4rem .6rem;color:var(--mac-subtext);font-size:.85rem}

/* Soft UI adds `margin-bottom:1rem` to every .btn, which rides buttons up out of
   alignment in flex/grid rows (under align-items:center/end). Buttons here space
   themselves via gaps/utilities, so neutralize that default globally. */
.btn{margin-bottom:0}

/* On/Offboarding control row: keep all inputs the same height and vertically aligned */
.onoff-controls .form-control,
.onoff-controls .form-select,
.onoff-controls .btn-group,
.onoff-controls .btn{height:40px}
.onoff-controls .btn{display:flex;align-items:center;justify-content:center;white-space:nowrap;margin-bottom:0}

/* =========================================================================
   Selectable themes — applied via <html data-theme="..."> (set early in
   _Host + the sidebar swatch picker). Each theme just re-tints the existing
   --mac-* tokens; "graphite" (default) keeps the original monochrome look.
   ========================================================================= */
[data-theme="ocean"]{
  --mac-accent:#2563eb;--mac-accent-contrast:#fff;--mac-bg:#f3f6fc;--mac-hover:#e9f0fc;
  --mac-btn-primary-bg:#2563eb;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#2563eb;--mac-btn-primary-hover:#1d4fd0}
[data-theme="emerald"]{
  --mac-accent:#0e9f6e;--mac-accent-contrast:#fff;--mac-bg:#f1f8f4;--mac-hover:#e6f5ec;
  --mac-btn-primary-bg:#0e9f6e;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#0e9f6e;--mac-btn-primary-hover:#0c8a5f}
[data-theme="violet"]{
  --mac-accent:#7c3aed;--mac-accent-contrast:#fff;--mac-bg:#f6f3fd;--mac-hover:#efeafc;
  --mac-btn-primary-bg:#7c3aed;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#7c3aed;--mac-btn-primary-hover:#6d2fd6}
[data-theme="rose"]{
  --mac-accent:#e11d48;--mac-accent-contrast:#fff;--mac-bg:#fdf2f5;--mac-hover:#fbe7ee;
  --mac-btn-primary-bg:#e11d48;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#e11d48;--mac-btn-primary-hover:#c01840}
[data-theme="amber"]{
  --mac-accent:#b45309;--mac-accent-contrast:#fff;--mac-bg:#fdf8f0;--mac-hover:#fbefdd;
  --mac-btn-primary-bg:#d97706;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#d97706;--mac-btn-primary-hover:#b86305}
[data-theme="teal"]{
  --mac-accent:#0d9488;--mac-accent-contrast:#fff;--mac-bg:#f0faf8;--mac-hover:#e1f5f1;
  --mac-btn-primary-bg:#0d9488;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#0d9488;--mac-btn-primary-hover:#0b7d72}
[data-theme="dark"]{
  --mac-bg:#161618;--mac-surface:#1f1f23;--mac-border:#34343b;--mac-text:#f2f2f4;--mac-subtext:#a1a1ab;--mac-hover:#2a2a30;
  --mac-accent:#3b82f6;--mac-accent-contrast:#fff;
  --mac-btn-primary-bg:#3b82f6;--mac-btn-primary-fg:#fff;--mac-btn-primary-border:#3b82f6;--mac-btn-primary-hover:#2f6fd6;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45)}

/* Dark-mode surface fixes for elements with hardcoded light colors */
[data-theme="dark"] .card-header{background:#26262c;color:var(--mac-subtext);border-bottom-color:var(--mac-border)}
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select{background:#26262c;color:var(--mac-text);border-color:#3a3a42}
[data-theme="dark"] .form-control::placeholder{color:#80808a}
[data-theme="dark"] .table{--bs-table-color:var(--mac-text);--bs-table-bg:transparent}
[data-theme="dark"] .table thead th{background:#26262c;color:var(--mac-subtext)}
[data-theme="dark"] .table-light,[data-theme="dark"] .table-light>*{--bs-table-bg:#26262c;--bs-table-color:var(--mac-subtext)}
[data-theme="dark"] .btn-outline-secondary{background:transparent;color:var(--mac-text);border-color:#4a4a54}
[data-theme="dark"] .btn-outline-secondary:hover{background:var(--mac-hover);color:#fff}
[data-theme="dark"] .btn-outline-primary{background:transparent;color:#9ec1ff;border-color:#3b82f6}
[data-theme="dark"] .alert{background:#26262c;color:var(--mac-text)}
[data-theme="dark"] .dropdown-menu{background:var(--mac-surface);border-color:var(--mac-border)}
[data-theme="dark"] .dropdown-menu .dropdown-item{color:#d4d4da}
[data-theme="dark"] .dropdown-menu .dropdown-item:hover,[data-theme="dark"] .dropdown-menu .dropdown-item:focus{background:var(--mac-hover);color:#fff}
[data-theme="dark"] .modal-content{background:var(--mac-surface);color:var(--mac-text)}
[data-theme="dark"] .bg-light,[data-theme="dark"] .badge.bg-light{background:#26262c!important}
[data-theme="dark"] .badge.bg-light,[data-theme="dark"] .badge.bg-secondary-subtle{color:#e4e4ea!important;background:#2a2a30!important}
[data-theme="dark"] .text-dark{color:var(--mac-text)!important}
[data-theme="dark"] .border,[data-theme="dark"] .border-top,[data-theme="dark"] .border-bottom{border-color:var(--mac-border)!important}
[data-theme="dark"] .list-group-item{background:var(--mac-surface);color:var(--mac-text);border-color:var(--mac-border)}
[data-theme="dark"] .list-group-item-action:hover,[data-theme="dark"] .list-group-item-action:focus{background:var(--mac-hover);color:var(--mac-text)}
[data-theme="dark"] .nav-tabs{border-bottom-color:var(--mac-border)}
[data-theme="dark"] .nav-tabs .nav-link{color:var(--mac-subtext)}
[data-theme="dark"] .nav-tabs .nav-link:hover{border-color:var(--mac-border)}
[data-theme="dark"] .nav-tabs .nav-link.active{background:var(--mac-surface);color:var(--mac-text);border-color:var(--mac-border) var(--mac-border) var(--mac-surface)}
[data-theme="dark"] .accordion-item{background:var(--mac-surface);color:var(--mac-text);border-color:var(--mac-border)}
[data-theme="dark"] .accordion-button{background:var(--mac-surface);color:var(--mac-text)}
[data-theme="dark"] .accordion-button:not(.collapsed){background:var(--mac-hover);color:var(--mac-text);box-shadow:none}
[data-theme="dark"] .accordion-button::after{filter:invert(1) grayscale(1) brightness(1.6)}
[data-theme="dark"] .btn-light{background:var(--mac-hover);color:var(--mac-text);border-color:var(--mac-border)}
[data-theme="dark"] .input-group-text{background:#26262c;color:var(--mac-text);border-color:#3a3a42}
[data-theme="dark"] hr{border-color:var(--mac-border);opacity:.5}
[data-theme="dark"] code:not(pre code),[data-theme="dark"] pre{background:#26262c;color:#e4e4ea}
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:#202024;color:var(--mac-text)}
[data-theme="dark"] .table-hover>tbody>tr:hover>*{--bs-table-bg-state:var(--mac-hover)}
[data-theme="dark"] .ss-reorder-row{background:var(--mac-surface);border-color:var(--mac-border)}
[data-theme="dark"] .mhrc-ss-menu{background:var(--mac-surface);border-color:var(--mac-border)}
[data-theme="dark"] .mhrc-ss-item{color:var(--mac-text)}
[data-theme="dark"] .modal-header,[data-theme="dark"] .modal-footer{border-color:var(--mac-border)}
[data-theme="dark"] .dashboard-card{border-color:var(--mac-border);box-shadow:none}
[data-theme="dark"] .dashboard-bar-track{background:#2a2a30}
[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(1.6)}
/* flatpickr calendar in dark */
[data-theme="dark"] .flatpickr-calendar{background:var(--mac-surface);color:var(--mac-text);box-shadow:var(--shadow);border:1px solid var(--mac-border)}
[data-theme="dark"] .flatpickr-months .flatpickr-month,[data-theme="dark"] .flatpickr-weekday{color:var(--mac-subtext);fill:var(--mac-subtext)}
[data-theme="dark"] .flatpickr-day{color:var(--mac-text)}
[data-theme="dark"] .flatpickr-day:hover{background:var(--mac-hover)}
[data-theme="dark"] .flatpickr-day.selected{background:var(--mac-accent);border-color:var(--mac-accent)}

/* Sidebar theme-swatch picker */
.theme-swatches{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.45rem .65rem}
.theme-swatches-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mac-subtext);width:100%;margin-bottom:.1rem}
.theme-swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--mac-border);cursor:pointer;padding:0;outline:none;transition:transform .12s ease}
.theme-swatch:hover{transform:scale(1.12)}
html[data-theme="graphite"] .theme-swatch[data-theme="graphite"],
html[data-theme="ocean"] .theme-swatch[data-theme="ocean"],
html[data-theme="emerald"] .theme-swatch[data-theme="emerald"],
html[data-theme="violet"] .theme-swatch[data-theme="violet"],
html[data-theme="rose"] .theme-swatch[data-theme="rose"],
html[data-theme="amber"] .theme-swatch[data-theme="amber"],
html[data-theme="teal"] .theme-swatch[data-theme="teal"],
html[data-theme="dark"] .theme-swatch[data-theme="dark"]{box-shadow:0 0 0 2px var(--mac-surface),0 0 0 4px var(--mac-accent)}
/* Keep the picker visible even when the rail is collapsed (compact grid) */
body.sidebar-collapsed .theme-swatches{gap:.3rem;padding:.4rem .2rem;justify-content:center}
body.sidebar-collapsed .theme-swatches-label{display:none}
body.sidebar-collapsed .theme-swatch{width:15px;height:15px;border-width:1px}