/**
 * mpms/dist/css/theme-miedc.css
 *
 * Visual identity: warm orange + yellow palette, replacing the previous
 * green-primary / gold-accent scheme (and, before that, stock AdminLTE
 * blue). Reds keep their semantic meaning (danger/destructive actions) --
 * everything that used to be blue OR green is now orange, and everything
 * that used to be gold is now yellow.
 *
 * Scope: COLOR AND TYPE ONLY. No layout, markup, or behavior changes --
 * every selector below targets classes that already exist in
 * admin/inc/header.php, inc/header.php (login shell), admin/inc/navigation.php,
 * admin/index.php's shared modals, and the AdminLTE/Bootstrap components
 * already in use (bg-primary, btn-primary, card-outline, modal-header,
 * badges, etc.). Nothing here touches dist/css/custom.css, adminlte.css, or
 * any plugin CSS -- this file loads after all of them and only overrides
 * the color layer.
 *
 * This also closes several spots that stayed stock-Bootstrap-blue under the
 * previous version of this file because nothing had overridden them yet:
 * badges, pagination active state, checkbox/switch checked state, and the
 * default focus ring. Search this codebase for "#007bff" or "#3c8dbc" in
 * dist/css/adminlte.css if a new component ever shows blue again -- that's
 * where it's coming from, and the fix is another targeted override below,
 * not editing the vendor file.
 *
 * Semantic status colors are intentionally left alone: badge/info-box
 * success/danger/warning/info keep their Bootstrap meaning (Active/Denied/
 * Pending/etc.).
 *
 * ---------------------------------------------------------------------
 * TOKENS (the whole palette lives here -- change once, cascades everywhere)
 * ---------------------------------------------------------------------
 */
:root {
  --miedc-orange:      #E8720C;  /* primary action color -- buttons, links, active states */
  --miedc-orange-dark: #B85700;  /* headings, sidebar brand, hover/pressed */
  --miedc-orange-tint: #FDEEDF;  /* faint orange wash for subtle highlight backgrounds */
  --miedc-red:         #C8102E;  /* destructive/danger actions -- unchanged, stays distinct */
  --miedc-red-dark:    #9E0D24;  /* hover / pressed state for red actions */
  --miedc-yellow:      #FFC400;  /* accent -- dividers, active-state edge, focus ring */
  --miedc-yellow-dark: #D9A600;  /* darker yellow for small text-adjacent accents where needed */
  --miedc-bg:          #FFF8F0;  /* page background -- warm off-white with a hint of orange */
  --miedc-text:        #2B1D0E;  /* body text -- warm near-black, not pure gray */
  --miedc-border:      #F0DCC4;  /* soft warm border, replaces stock Bootstrap gray borders */
}

/* ---------------------------------------------------------------------
 * Page background + base type
 * --------------------------------------------------------------------- */
body,
.content-wrapper {
  background-color: var(--miedc-bg) !important;
  color: var(--miedc-text);
}

/* ---------------------------------------------------------------------
 * Dark mode (2026-08-30) -- restores AdminLTE's own built-in dark-mode
 * colors on the two rules above, which otherwise beat them outright: both
 * use !important, and body.dark-mode's higher selector specificity is what
 * lets this block win the tie. Everything else (sidebar, navbar, cards,
 * tables, badges, focus rings) already gets correct dark styling straight
 * from dist/css/adminlte.css's own ~190 .dark-mode rules -- this file only
 * needed to get out of the way for those two.
 * --------------------------------------------------------------------- */
body.dark-mode,
body.dark-mode .content-wrapper {
  background-color: #454d55 !important;
  color: #e9ecef;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .card-title {
  color: var(--miedc-yellow);
}
body.dark-mode a { color: var(--miedc-orange-tint); }
body.dark-mode a:hover { color: var(--miedc-yellow); }

h1, h2, h3, h4, h5, h6,
.card-title {
  color: var(--miedc-orange-dark);
  font-weight: 600;
}

a {
  color: var(--miedc-orange);
}
a:hover {
  color: var(--miedc-orange-dark);
}

/* Visible keyboard focus (accessibility floor) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--miedc-yellow);
  outline-offset: 1px;
}

/* Default Bootstrap focus ring on plain form controls (adminlte.css bakes
   this in as a hardcoded blue box-shadow -- override it here). */
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--miedc-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 114, 12, 0.25) !important;
}

/* ---------------------------------------------------------------------
 * Top navbar -- thin yellow rule under the header
 * --------------------------------------------------------------------- */
.main-header.navbar {
  border-bottom: 3px solid var(--miedc-yellow) !important;
  background-color: #ffffff;
}

/* ---------------------------------------------------------------------
 * Sidebar brand + nav-header labels
 * --------------------------------------------------------------------- */
.brand-link {
  background-color: var(--miedc-orange-dark) !important;
  border-bottom: 3px solid var(--miedc-yellow) !important;
}

.nav-sidebar .nav-header {
  color: var(--miedc-yellow) !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .95;
}

/* Active sidebar item: orange fill + yellow left rule instead of
   Bootstrap's stock bright-blue highlight -- reads as a clearly
   "selected" tab. */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--miedc-orange) !important;
  color: #fff !important;
  border-left: 3px solid var(--miedc-yellow);
  padding-left: calc(0.5rem - 3px);
}

/* ---------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--miedc-orange);
  border-color: var(--miedc-orange);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--miedc-orange-dark);
  border-color: var(--miedc-orange-dark);
}

.btn-warning {
  background-color: var(--miedc-yellow);
  border-color: var(--miedc-yellow);
  color: var(--miedc-text);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
  background-color: var(--miedc-yellow-dark);
  border-color: var(--miedc-yellow-dark);
  color: var(--miedc-text);
}

.btn-danger {
  background-color: var(--miedc-red);
  border-color: var(--miedc-red);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
  background-color: var(--miedc-red-dark);
  border-color: var(--miedc-red-dark);
}

/* ---------------------------------------------------------------------
 * Cards -- outline accent color.
 * --------------------------------------------------------------------- */
.card.card-outline.card-primary,
.card.card-outline.card-info,
.card.card-outline.card-success {
  border-top: 3px solid var(--miedc-orange);
}

.card.card-outline.card-danger {
  border-top: 3px solid var(--miedc-red);
}

.card.card-outline.card-warning {
  border-top: 3px solid var(--miedc-yellow);
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid var(--miedc-border);
}

/* ---------------------------------------------------------------------
 * bg-primary usages
 * --------------------------------------------------------------------- */
.bg-primary {
  background-color: var(--miedc-orange) !important;
}

.text-primary {
  color: var(--miedc-orange) !important;
}

.badge-primary {
  background-color: var(--miedc-orange) !important;
  color: #fff !important;
}
a.badge-primary:hover,
a.badge-primary:focus {
  background-color: var(--miedc-orange-dark) !important;
}

.page-item.active .page-link {
  background-color: var(--miedc-orange) !important;
  border-color: var(--miedc-orange) !important;
}
.page-link {
  color: var(--miedc-orange);
}
.page-link:hover {
  color: var(--miedc-orange-dark);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--miedc-orange) !important;
  border-color: var(--miedc-orange) !important;
}
.custom-switch.custom-switch-on-primary .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--miedc-orange) !important;
}

.icheck-primary > input:first-child:checked + label::before {
  background-color: var(--miedc-orange) !important;
  border-color: var(--miedc-orange) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted {
  background-color: var(--miedc-orange) !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4 .select2-selection:focus {
  border-color: var(--miedc-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 114, 12, 0.25) !important;
}

/* ---------------------------------------------------------------------
 * Tables
 * --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
 * Tables -- formal/official look: solid navy header (matches the
 * sidebar's own navy so the header band reads as part of the same
 * institutional identity), bordered cells, comfortable padding, subtle
 * zebra striping. Applies everywhere a `.table` is used (DataTables-
 * driven admin listings, self-service tables, static detail tables)
 * since all of them share the base Bootstrap `.table` class -- no need
 * to restyle each page individually.
 * --------------------------------------------------------------------- */
.table thead th {
  background-color: #001f3f;
  color: #fff;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: none;
  border-color: #001f3f;
  vertical-align: middle;
  white-space: nowrap;
}
.table thead tr.bg-navy th,
.table thead tr th.bg-navy {
  border-color: var(--miedc-orange-dark);
}
/* DataTables' own sort-icon column color needs to stay legible against
   the header it actually renders on. This used to be a hardcoded #fff,
   which was correct back when .table thead th above was the only header
   style in play (navy background). Since then, dist/css/custom.css added
   a MORE SPECIFIC rule -- table.dataTable thead th { background:#f4f6f8 }
   -- that wins the cascade for every DataTables-driven table (that
   selector's specificity beats plain .table thead th regardless of load
   order), so every actual DataTable header in the system renders with
   custom.css's light-gray background, never this file's navy. The #fff
   here, however, has EVEN HIGHER specificity than custom.css's rule (an
   extra class: dataTable + sorting vs. just dataTable) and !important,
   so it kept winning for the label text/sort-arrow color alone --
   producing white text on that light-gray background: invisible. Matches
   custom.css's header text color instead, so it's legible against the
   background that's actually on screen. (Plain, non-DataTables .table
   elements are unaffected by this change and keep the navy header below
   as designed, since custom.css's more specific selector only targets
   table.dataTable.) */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  color: #495057 !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: .65;
}

.table td,
.table th {
  padding: .65rem .75rem;
  vertical-align: middle;
}
.table-sm td,
.table-sm th {
  padding: .5rem .6rem;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--miedc-border);
}

/* Zebra striping stays subtle -- a faint warm tint, not the harsh
   Bootstrap default gray, so it doesn't fight the page's own warm
   off-white background. */
.table-striped tbody tr:nth-of-type(odd),
.table.dataTable tbody tr:nth-of-type(odd) {
  background-color: var(--miedc-orange-tint);
}
.table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover {
  background-color: #FBE3C8;
}

/* Card wrapping a table reads as a formal document panel: defined edge,
   no content bleeding past the header/footer corners. */
.card > .table:first-child thead th:first-child,
.table-responsive > .table thead th:first-child {
  border-top-left-radius: 0;
}

.module-tile:hover {
  border-color: var(--miedc-orange);
}

/* ---------------------------------------------------------------------
 * Modals
 * --------------------------------------------------------------------- */
.modal-header {
  border-bottom: 1px solid var(--miedc-border);
}
.modal-title {
  color: var(--miedc-orange-dark);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Login page
 * --------------------------------------------------------------------- */
.login-page .card-outline {
  border-top: 3px solid var(--miedc-orange);
}
.login-page .login-box-msg {
  color: var(--miedc-text);
}
/* 2026-08-28: .login-title (the old centered h1 above the login box) was
   removed when admin/login.php was redesigned into the two-column
   branding+form layout (see .mie-login-* rules in custom.css for the
   layout itself). Its text-shadow treatment now applies to the new
   branding-column title and the mobile-header title that replaces it
   below the 992px breakpoint. */
.mie-login-brand-title {
  /* Was inheriting orange from the site-wide `h1, h2, h3... { color:
     var(--miedc-orange-dark) }` rule a few lines above -- this IS an h1,
     so that generic rule's element-level specificity beat the intended
     white from .mie-login-brand-inner (dist/css/custom.css) that every
     other element in this branding column correctly inherits (the
     tagline, e.g., is a <p>, untouched by the h1 rule, so it stayed
     white while the title alone went orange). Restored to the design's
     actual intent: white with a dark shadow, readable over the photo/
     gradient background rather than blending into it. --login-title-color
     is set inline by admin/login.php from Employer Data's "Login Title
     Color" field when the admin has customized it; this is just the
     fallback when they haven't. */
  color: var(--login-title-color, #fff);
  text-shadow: 1px 1px var(--miedc-orange-dark);
}
.mie-login-mobile-title {
  color: var(--miedc-orange-dark);
}
.mie-login-label {
  color: var(--miedc-orange-dark);
}
.mie-login-toggle-pw:hover,
.mie-login-toggle-pw:focus {
  color: var(--miedc-orange);
}

/* ---------------------------------------------------------------------
 * Dark mode -- plugin widgets (2026-08-30)
 * ---------------------------------------------------------------------
 * dist/css/adminlte.css's ~190 .dark-mode rules cover every native
 * Bootstrap component (cards, tables, .form-control/.custom-select,
 * modals, badges, etc.) but NOT third-party plugin CSS loaded alongside
 * it -- select2, DataTables, tempusdominus (date/time picker), summernote
 * (rich text), and SweetAlert2 all render their own markup with their own
 * light-only stylesheets that ship zero dark-mode awareness (verified:
 * grep for "dark" in each returns nothing). Without this block, those five
 * widgets stay stuck with a white background regardless of the current
 * theme -- exactly the "dark text on dark card" / "invisible border"
 * class of bug flagged for this update, just coming from the plugin layer
 * instead of Bootstrap. Colors reuse AdminLTE's own dark-mode content
 * background (#454d55) and its slightly lighter dark-mode
 * card/dropdown/input background (#3f474e / #38393f family) rather than
 * inventing a new palette, so these widgets sit visually consistent with
 * the native components right next to them.
 * --------------------------------------------------------------------- */

/* Select2 (employee/department pickers etc.) */
body.dark-mode .select2-container--bootstrap4 .select2-selection,
body.dark-mode .select2-container--bootstrap4 .select2-dropdown {
  background-color: #3f474e;
  border-color: #4b545c;
  color: #e9ecef;
}
body.dark-mode .select2-container--bootstrap4 .select2-selection__rendered,
body.dark-mode .select2-container--bootstrap4 .select2-results__option {
  color: #e9ecef;
}
body.dark-mode .select2-container--bootstrap4 .select2-search__field {
  background-color: #3f474e;
  color: #e9ecef;
  border-color: #4b545c;
}
body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--miedc-orange);
  color: #fff;
}

/* DataTables (search box, length select, pagination -- the table body
   itself already inherits AdminLTE's .dark-mode .table rules). */
body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter {
  color: #e9ecef;
}
body.dark-mode .dataTables_wrapper .paginate_button {
  color: #e9ecef !important;
}
body.dark-mode .dataTables_wrapper .paginate_button.disabled {
  color: #6c757d !important;
}
body.dark-mode .dataTables_wrapper .paginate_button.current {
  background: var(--miedc-orange) !important;
  border-color: var(--miedc-orange) !important;
  color: #fff !important;
}

/* Tempusdominus date/time picker popup */
body.dark-mode .bootstrap-datetimepicker-widget {
  background-color: #3f474e;
  color: #e9ecef;
}
body.dark-mode .bootstrap-datetimepicker-widget table td,
body.dark-mode .bootstrap-datetimepicker-widget table th {
  color: #e9ecef;
}
body.dark-mode .bootstrap-datetimepicker-widget table td.day:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.hour:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.minute:hover {
  background-color: var(--miedc-orange-tint);
  color: var(--miedc-text);
}
body.dark-mode .bootstrap-datetimepicker-widget table td.active {
  background-color: var(--miedc-orange) !important;
  color: #fff !important;
}
body.dark-mode .bootstrap-datetimepicker-widget .picker-switch,
body.dark-mode .bootstrap-datetimepicker-widget table th {
  color: #e9ecef;
}

/* Summernote rich text editor (memoranda/policies body, etc.) */
body.dark-mode .note-editor.note-frame {
  background-color: #3f474e;
  border-color: #4b545c;
}
body.dark-mode .note-editor .note-toolbar,
body.dark-mode .note-editor .note-statusbar {
  background-color: #454d55;
  border-color: #4b545c;
}
body.dark-mode .note-editor .note-editable {
  background-color: #3f474e;
  color: #e9ecef;
}
body.dark-mode .note-toolbar .note-btn {
  background-color: #3f474e;
  color: #e9ecef;
  border-color: #4b545c;
}

/* SweetAlert2 confirmation dialogs (used throughout for delete/archive/void confirmations) */
body.dark-mode .swal2-popup {
  background-color: #3f474e;
  color: #e9ecef;
}
body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
  color: #e9ecef;
}

/* Toastr notifications keep their semantic colors (success/error/etc.
   already have sufficient contrast against both themes as-is) -- only the
   default/info toast's near-black-on-dark-gray text needed a nudge. */
body.dark-mode #toast-container > .toast-info {
  color: #fff;
}

/* ---------------------------------------------------------------------
 * Dark mode fixes, round 2 (2026-08-30 PM) -- two concrete bugs reported
 * from screenshots:
 * ---------------------------------------------------------------------
 * 1) Table zebra striping/hover used a fixed near-white peach tint
 *    (--miedc-orange-tint / #FBE3C8) with no dark-mode variant. AdminLTE's
 *    own .dark-mode .table already sets row text to a light color for
 *    contrast against ITS dark row background -- but this rule's near-
 *    white tint sat on top of that same light text, producing
 *    light-on-near-white "ghost" rows (every other row, and any hovered
 *    row, in the Employees/DataTables screenshot). Overridden below to a
 *    translucent dark orange instead of an opaque light one, so it reads
 *    as a subtle highlight against the dark table rather than erasing the
 *    text sitting on it.
 * 2) The navbar user/notification dropdown stayed translucent white in
 *    dark mode -- not from a missing dark-mode rule (adminlte.css DOES
 *    style .dark-mode .dropdown-menu correctly), but from ios-theme.css's
 *    .main-header .dropdown-menu rule, which loads AFTER theme-miedc.css
 *    in inc/header.php and has equal selector specificity, so it won the
 *    cascade tie by load order regardless of dark-mode. Fixed the same way
 *    as the body/.content-wrapper collision fixed earlier in this file:
 *    add a body.dark-mode-prefixed rule, which has strictly higher
 *    specificity than ios-theme.css's version and so wins regardless of
 *    which file loads last.
 * --------------------------------------------------------------------- */
body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body.dark-mode .table.dataTable tbody tr:nth-of-type(odd) {
  background-color: rgba(232, 114, 12, 0.14);
}
body.dark-mode .table-hover tbody tr:hover,
body.dark-mode table.dataTable.table-hover tbody tr:hover {
  background-color: rgba(232, 114, 12, 0.24);
}

body.dark-mode .main-header .dropdown-menu {
  background-color: rgba(52, 58, 64, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
body.dark-mode .main-header .dropdown-menu .dropdown-item {
  color: #e9ecef;
}
body.dark-mode .main-header .dropdown-menu .dropdown-item:active,
body.dark-mode .main-header .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .main-header .dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .main-header .dropdown-item-text {
  color: #e9ecef;
}

/* The per-row "..." actions kebab button (dt-actions-toggle, seen in the
   Actions column of most list tables) and its dropdown menu -- same
   always-white styling with no dark-mode variant, same fix pattern. */
body.dark-mode .dt-actions-toggle {
  color: #e9ecef;
  border-color: #4b545c;
  background-color: #3f474e;
}
body.dark-mode .dt-actions-toggle:hover,
body.dark-mode .dt-actions-toggle:focus,
body.dark-mode .dt-actions-toggle[aria-expanded="true"] {
  background-color: #4b545c;
  color: #fff;
}
body.dark-mode .dt-actions-dropdown .dropdown-menu {
  background-color: #343a40;
  border-color: #4b545c;
}
body.dark-mode .dt-actions-dropdown .dropdown-menu .dropdown-item {
  color: #e9ecef;
}
body.dark-mode .dt-actions-dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #3f474e;
}

/* ---------------------------------------------------------------------
 * Dark mode fixes, round 3 (2026-08-30, later) -- reported from 8
 * screenshots: card panels and tab content across Departments/Divisions/
 * Positions, Recruitment/ATS, Payroll Processing, Benefits, HR Requests &
 * Calendar, Talent Management, HR Analytics Dashboard, and Government
 * Contribution Tables all stayed white/near-white in dark mode. Two
 * distinct causes, both the same shape of bug as the earlier
 * body/.content-wrapper and dropdown-menu collisions:
 *
 * 1) .card-header { background-color: #fff; } a few dozen lines up in
 *    this same file is unconditional -- and AdminLTE's own dark-mode
 *    CSS never styles .card-header at all (only .card itself), so there
 *    was no dark-mode rule for this file's override to lose a
 *    specificity fight against; it simply always won. Every card's
 *    header bar (including the ones holding chart titles, toggle
 *    switches, tab-adjacent headers) stayed white with whatever text
 *    color happened to inherit, in both themes -- invisible or
 *    near-invisible depending on the text underneath.
 * 2) Departments/Divisions/Positions, Recruitment/ATS, Benefits, HR
 *    Requests & Calendar, and Talent Management all wrap their tab
 *    content in a raw `bg-white` utility class instead of a `.card`
 *    (`<div class="tab-content border border-top-0 p-3 bg-white">`) --
 *    Bootstrap's `.bg-white` is `background-color: #fff !important`,
 *    which is never touched by `.dark-mode .card` because it isn't a
 *    `.card` in the first place.
 * --------------------------------------------------------------------- */
body.dark-mode .card-header {
  background-color: #343a40;
  color: #fff;
  border-bottom-color: #4b545c;
}
body.dark-mode .tab-content.bg-white,
body.dark-mode .bg-white {
  background-color: #343a40 !important;
  color: #e9ecef;
}

/* ---------------------------------------------------------------------
 * Dark mode fixes, round 4 (2026-08-30, later still) -- HR Calendar and
 * Company Holidays (plain, non-DataTable, non-striped <table>s -- just
 * `class="table table-sm"`, JS-rendered rows) still read as washed-out,
 * low-contrast text even after round 3's .bg-white/.card-header fix
 * (their container background IS correctly dark now). The badges inside
 * those same rows (Birthday/Anniversary/Leave pills) are fully legible --
 * only the plain, unstyled <td> text is faint, which narrows it to the
 * text color specifically, not a container/opacity issue.
 *
 * These plain tables have no .table-striped/.dataTable class, so round
 * 3's zebra-tint rule never touched them, and their cells never got an
 * explicit color of their own -- they were relying on inheriting it from
 * .bg-white's container, several DOM levels up. That inheritance chain
 * is fragile (any intermediate element with its own color rule breaks
 * it silently), so cells get their own direct rule here instead of
 * counting on it to survive every possible page structure.
 * --------------------------------------------------------------------- */
body.dark-mode .table td,
body.dark-mode .table th {
  color: #e9ecef;
}

/* ---------------------------------------------------------------------
 * Dark mode fixes, round 5 (2026-08-30) -- mobile screenshot showed the
 * DataTables header bar and the bottom mobile nav bar both stuck white.
 * --------------------------------------------------------------------- */

/* table.dataTable thead th's light-gray background + dark text
   (dist/css/custom.css) is MORE SPECIFIC than AdminLTE's own
   .dark-mode .table thead th (which only sets border-bottom-color, never
   background/text color -- see the earlier comment on the .sorting/
   .sorting_asc/.sorting_desc rules just above in this file, which
   already had to work around the same specificity gap for the sort-icon
   color alone). This is universal, not mobile-only -- every DataTable
   header across the whole app was affected -- but it's what's directly
   visible in the mobile screenshot since the header bar dominates a
   phone-width table. */
body.dark-mode table.dataTable thead th {
  background-color: #343a40 !important;
  color: #e9ecef !important;
  border-bottom-color: #4b545c !important;
}
body.dark-mode table.dataTable tbody tr:hover {
  background-color: #3a4047;
}
body.dark-mode table.dataTable,
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable tfoot th,
body.dark-mode table.dataTable tbody td {
  border-color: #4b545c;
}

/* Mobile bottom nav bar (dist/css/custom.css's .bottom-nav) is white
   with no dark-mode variant -- same unconditional-background pattern as
   every other fix in this section. */
body.dark-mode .bottom-nav {
  background: #343a40;
  border-top-color: #4b545c;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .3);
}
body.dark-mode .bottom-nav-link {
  color: #adb5bd;
}
body.dark-mode .bottom-nav-link.active,
body.dark-mode .bottom-nav-link:hover,
body.dark-mode .bottom-nav-link:focus {
  color: var(--miedc-yellow);
}

/* Copyright footer: visible on desktop/tablet, hidden on phones (the
   bottom-nav bar already occupies that space and shows the same
   "MIEDECO" branding via the sidebar/header, so the footer text is
   redundant there and was the last strip of content pushed below the
   fixed bottom-nav bar in the screenshot). main-footer already has no
   fixed height/margin dependency elsewhere, so display:none leaves no
   gap. */
@media (max-width: 767.98px) {
  .main-footer {
    display: none !important;
  }
}