/**
 * dist/css/hr-ui.css -- MIEDECO HR visual system (loaded LAST, after adminlte / custom / theme-miedc / ios-theme).
 *
 * One place for: design tokens, page header + breadcrumb, cards, tables, status badges, forms, modals, the grouped
 * sidebar, the mobile bottom bar, the dashboard and empty/error states. It builds on the existing brand layer
 * (theme-miedc.css tokens --miedc-*) and on Bootstrap 4 / AdminLTE 3 classes -- it does not replace them.
 *
 * Light theme is the default. Dark mode (body.dark-mode, AdminLTE's own switch) is supported through the same tokens.
 * Print output (DTR, certificates, reports) lives in standalone documents and is not styled here.
 */

/* =========================================================== 1. Tokens */
:root {
  --hr-bg:        #f4f6f9;
  --hr-surface:   #ffffff;
  --hr-surface-2: #f8fafc;
  --hr-border:    #e3e8ee;
  --hr-text:      #1f2a37;
  --hr-muted:     #637083;
  --hr-radius:    10px;
  --hr-radius-sm: 6px;
  --hr-shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --hr-shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);
  --hr-accent:    var(--miedc-orange, #E8720C);
  --hr-accent-dk: var(--miedc-orange-dark, #B85700);
  --hr-accent-bg: #fff3e6;
  --hr-nav-bg:    #0f2438;
  --hr-nav-text:  #c9d4e0;
  /* status palette (text on tinted background; all pairs >= 4.5:1) */
  --st-ok-bg:   #e3f5ec; --st-ok-fg:   #11633f;
  --st-warn-bg: #fff2d6; --st-warn-fg: #8a5300;
  --st-bad-bg:  #fde8ea; --st-bad-fg:  #a4152a;
  --st-info-bg: #e2f0fb; --st-info-fg: #0b5394;
  --st-mute-bg: #eceff3; --st-mute-fg: #4a5565;
  /* page chrome from the legacy brand layer now follows the neutral tokens */
  --miedc-bg:     var(--hr-bg);
  --miedc-text:   var(--hr-text);
  --miedc-border: var(--hr-border);
}
body.dark-mode {
  --hr-bg: #2b3138; --hr-surface: #343a42; --hr-surface-2: #3b424b; --hr-border: #4a525c;
  --hr-text: #e9ecef; --hr-muted: #aab3bd; --hr-accent-bg: #4a3a28;
  --hr-nav-bg: #1d2630;
  --st-ok-bg:   #1d4a35; --st-ok-fg:   #8fe0b6;
  --st-warn-bg: #5a4310; --st-warn-fg: #ffd98a;
  --st-bad-bg:  #5c2229; --st-bad-fg:  #ffb3bd;
  --st-info-bg: #1d3f5e; --st-info-fg: #a9d4f5;
  --st-mute-bg: #444c56; --st-mute-fg: #cdd5dd;
}
body { -webkit-font-smoothing: antialiased; }
.content-wrapper { background-color: var(--hr-bg) !important; }
body.dark-mode .content-wrapper { background-color: var(--hr-bg) !important; }

/* ===================================================== 2. Page header */
/* Used by hr_page_header() (admin/inc/ui_helpers.php) and, for pages not migrated yet, by the legacy .content-header. */
.page-header, .content-header { padding: 0 0 .25rem; }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin: 0 0 1rem; }
.page-header .page-titles { min-width: 0; }
.page-header h1, .content-header h1 {
  margin: 0; font-size: 1.4rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; color: var(--hr-text);
}
.page-header .page-subtitle { margin: .2rem 0 0; color: var(--hr-muted); font-size: .86rem; max-width: 70ch; }
.page-header .page-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.hr-breadcrumb { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .35rem; padding: 0; list-style: none; font-size: .75rem; color: var(--hr-muted); }
.hr-breadcrumb li + li::before { content: "/"; margin-right: .25rem; opacity: .6; }
.hr-breadcrumb a { color: var(--hr-muted); text-decoration: none; }
.hr-breadcrumb a:hover { color: var(--hr-accent-dk); text-decoration: underline; }
.hr-breadcrumb li:last-child { color: var(--hr-text); font-weight: 600; }
/* legacy header rows (h1 + buttons side by side) keep a consistent rhythm */
.content-header.d-flex { margin-bottom: .75rem; gap: .5rem; }
.content-header { margin-bottom: .75rem; }
h1, h2, h3, h4, h5, h6 { color: var(--hr-text); }
.card-title { color: var(--hr-text); font-weight: 650; }
body.dark-mode .card-title, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--hr-text); }

/* ============================================================ 3. Cards */
.card { border: 1px solid var(--hr-border); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); background: var(--hr-surface); }
.card-header { background: var(--hr-surface); border-bottom: 1px solid var(--hr-border); border-radius: var(--hr-radius) var(--hr-radius) 0 0; padding: .75rem 1rem; }
.card-header .card-title { font-size: .95rem; margin: 0; float: none; }
.card-body { padding: 1rem; }
.card-footer { background: var(--hr-surface-2); border-top: 1px solid var(--hr-border); border-radius: 0 0 var(--hr-radius) var(--hr-radius); }
.tab-content.bg-white { background: var(--hr-surface) !important; border-color: var(--hr-border) !important; border-radius: 0 0 var(--hr-radius) var(--hr-radius); }
body.dark-mode .tab-content.bg-white { background: var(--hr-surface) !important; }
.nav-tabs { border-bottom-color: var(--hr-border); }
.nav-tabs .nav-link { color: var(--hr-muted); font-weight: 600; border-radius: var(--hr-radius-sm) var(--hr-radius-sm) 0 0; }
.nav-tabs .nav-link:hover { color: var(--hr-text); border-color: transparent; background: var(--hr-surface-2); }
.nav-tabs .nav-link.active { color: var(--hr-accent-dk); background: var(--hr-surface); border-color: var(--hr-border) var(--hr-border) var(--hr-surface); box-shadow: inset 0 2px 0 var(--hr-accent); }
body.dark-mode .nav-tabs .nav-link.active { color: #ffb36b; }
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nav-tabs .nav-link { white-space: nowrap; }

/* =========================================================== 4. Tables */
.table { color: var(--hr-text); }
table.dataTable thead th, .table thead th {
  background: var(--hr-surface-2); color: var(--hr-muted); border-bottom: 1px solid var(--hr-border) !important; border-top: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: .6rem .75rem;
}
table.dataTable tbody td, .table tbody td { padding: .55rem .75rem; vertical-align: middle; border-top: 1px solid var(--hr-border); font-size: .86rem; }
/* no zebra: white rows + a quiet hover (the old orange striping made status colours hard to read) */
.table-striped tbody tr:nth-of-type(odd), .table.dataTable tbody tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd { background-color: transparent !important; }
table.dataTable tbody tr:hover, .table-hover tbody tr:hover { background-color: var(--hr-accent-bg) !important; }
table.dataTable { border: 1px solid var(--hr-border); border-radius: var(--hr-radius-sm); border-collapse: separate; border-spacing: 0; }
table.dataTable thead th, table.dataTable tbody td { border-right: 0; }
table.dataTable.no-footer { border-bottom: 1px solid var(--hr-border); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info { font-size: .82rem; color: var(--hr-muted); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--hr-border); border-radius: var(--hr-radius-sm); padding: .3rem .6rem; background: var(--hr-surface); color: var(--hr-text); min-height: 34px;
}
.dataTables_wrapper .dataTables_filter input { min-width: 14rem; }
.dataTables_wrapper .dataTables_processing { background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--hr-radius-sm); box-shadow: var(--hr-shadow-lg); color: var(--hr-text); }
.page-item .page-link { border-color: var(--hr-border); background: var(--hr-surface); }
.page-item.disabled .page-link { color: var(--hr-muted); background: var(--hr-surface-2); }
.page-link { min-width: 2.2rem; text-align: center; }
/* a table inside a card body should sit flush */
.card-body > .table-responsive:only-child, .card-body > .dataTables_wrapper:only-child { margin: 0; }

/* ========================================================= 5. Status badges */
/* One look for every status: pending=warning, approved/active/present/completed=success, rejected/cancelled/absent=danger,
   info=in progress / informational, secondary=inactive / draft. Existing markup keeps working: the Bootstrap
   badge-* and .status-pill classes the modules already emit are restyled here -- no module logic changes. */
.badge, .status-pill {
  display: inline-block; padding: .28em .65em; border-radius: 999px; font-size: .72rem; font-weight: 650; letter-spacing: .02em; line-height: 1.25; text-transform: none; vertical-align: middle;
}
.badge.badge-success,   .status-pill.badge-success   { background: var(--st-ok-bg)   !important; color: var(--st-ok-fg)   !important; }
.badge.badge-warning,   .status-pill.badge-warning   { background: var(--st-warn-bg) !important; color: var(--st-warn-fg) !important; }
.badge.badge-danger,    .status-pill.badge-danger    { background: var(--st-bad-bg)  !important; color: var(--st-bad-fg)  !important; }
.badge.badge-info,      .status-pill.badge-info      { background: var(--st-info-bg) !important; color: var(--st-info-fg) !important; }
.badge.badge-primary,   .status-pill.badge-primary   { background: var(--st-info-bg) !important; color: var(--st-info-fg) !important; }
.badge.badge-secondary, .status-pill.badge-secondary,
.badge.badge-light,     .badge.badge-dark            { background: var(--st-mute-bg) !important; color: var(--st-mute-fg) !important; }
.navbar-badge.badge-danger { background: #c8102e !important; color: #fff !important; }
.account-toggle .badge-secondary { background: var(--st-mute-bg) !important; color: var(--st-mute-fg) !important; }
/* explicit helpers for new code */
.st-pending { background: var(--st-warn-bg); color: var(--st-warn-fg); } .st-approved, .st-active, .st-completed { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.st-rejected, .st-cancelled { background: var(--st-bad-bg); color: var(--st-bad-fg); } .st-inactive { background: var(--st-mute-bg); color: var(--st-mute-fg); }
.st-pending, .st-approved, .st-active, .st-completed, .st-rejected, .st-cancelled, .st-inactive { display: inline-block; padding: .28em .65em; border-radius: 999px; font-size: .72rem; font-weight: 650; }

/* ============================================================== 6. Buttons */
.btn { border-radius: var(--hr-radius-sm); font-weight: 600; }
.btn-sm { padding: .3rem .7rem; }
.btn-outline-secondary { border-color: var(--hr-border); color: var(--hr-text); background: var(--hr-surface); }
.btn-outline-secondary:hover { background: var(--hr-surface-2); color: var(--hr-text); border-color: var(--hr-muted); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }
.btn.is-busy { position: relative; pointer-events: none; opacity: .75; }
.btn.is-busy::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .5em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hr-spin .7s linear infinite; }
@keyframes hr-spin { to { transform: rotate(360deg); } }
.btn-touch { min-height: 44px; }

/* =============================================================== 7. Forms */
.form-control, .custom-select { border: 1px solid var(--hr-border); border-radius: var(--hr-radius-sm); background-color: var(--hr-surface); color: var(--hr-text); }
.form-control { min-height: calc(1.5em + .75rem + 2px); }
.form-control-sm, .custom-select-sm { min-height: 32px; }
.form-control::placeholder { color: #8895a5; }
.form-control:disabled, .form-control[readonly] { background-color: var(--hr-surface-2); }
.form-control.is-invalid { border-color: #c8102e; }
label { font-weight: 600; color: var(--hr-text); margin-bottom: .3rem; }
label.small, .small label { font-weight: 600; }
/* required marker: <label class="required"> or any label that already carries a red asterisk keeps working */
label.required::after, .form-group.required > label::after { content: " *"; color: #c8102e; font-weight: 700; }
.invalid-feedback, .field-error { color: #b4152b; font-size: .8rem; }
.form-section { margin: 1.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--hr-border); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hr-muted); }
.form-section:first-child { margin-top: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding-top: .75rem; margin-top: 1rem; border-top: 1px solid var(--hr-border); }
.select2-container--bootstrap4 .select2-selection { border-color: var(--hr-border); border-radius: var(--hr-radius-sm); background: var(--hr-surface); }
/* filter bars above tables */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.filter-bar .form-control, .filter-bar .custom-select { width: auto; flex: 1 1 11rem; max-width: 100%; }

/* ======================================================== 8. Modals (any depth) */
.modal-content { border: 0; border-radius: 12px; box-shadow: var(--hr-shadow-lg); background: var(--hr-surface); color: var(--hr-text); }
.modal-header { border-bottom: 1px solid var(--hr-border); padding: .85rem 1.1rem; }
.modal-title { font-size: 1.05rem; font-weight: 650; color: var(--hr-text); }
.modal-footer { border-top: 1px solid var(--hr-border); }
.modal-body { padding: 1.1rem; max-width: 100%; overflow-wrap: anywhere; }
/* Stacking: the confirm dialog and the document previewer must always open ABOVE a form modal that launched them. */
#uni_modal { z-index: 1050; } #uni_modal ~ .modal-backdrop { z-index: 1040; }
#doc_preview_modal, #viewer_modal { z-index: 1060; }
#confirm_modal { z-index: 1070; }
.modal-backdrop { z-index: 1040; }
.modal-backdrop.show ~ .modal-backdrop.show { z-index: 1065; }
.modal.show { overflow-y: auto; }
body.modal-open { padding-right: 0 !important; }
.modal-dialog { max-width: calc(100vw - 1rem); }
.modal-dialog.modal-xl { max-width: min(1140px, calc(100vw - 1rem)); }
.modal-dialog.modal-lg { max-width: min(800px, calc(100vw - 1rem)); }
.modal-body table { max-width: 100%; }
.swal2-popup { border-radius: 12px; font-size: .95rem; }

/* ======================================================= 9. Empty / error states */
.empty-state, .error-state { text-align: center; padding: 2rem 1rem; color: var(--hr-muted); }
.empty-state i, .error-state i { display: block; font-size: 1.8rem; margin-bottom: .5rem; opacity: .6; }
.error-state { color: var(--st-bad-fg); }
.empty-state .empty-title, .error-state .empty-title { font-weight: 650; color: var(--hr-text); margin-bottom: .15rem; }
.error-state .empty-title { color: var(--st-bad-fg); }

/* ================================================== 10. Sidebar (grouped menu) */
.main-sidebar { background: var(--hr-nav-bg) !important; }
.main-sidebar .sidebar { padding-bottom: 5rem; }
.nav-sidebar .nav-link { color: var(--hr-nav-text); border-radius: 8px; margin: 1px 6px; width: auto; }
.nav-sidebar .nav-link .nav-icon { width: 1.4rem; margin-right: .5rem; text-align: center; font-size: .95rem; }
.nav-sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-sidebar .nav-link .nav-icon { color: #9fb3c8; }
.nav-sidebar .nav-link:hover .nav-icon, .nav-sidebar .nav-link.active .nav-icon { color: #fff; }
.nav-sidebar > .nav-item > .nav-link.active, .nav-sidebar .nav-group-items .nav-link.active {
  background: var(--hr-accent) !important; color: #fff !important; border-left: 0; padding-left: .5rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.nav-group { margin-top: 2px; }
.nav-group-toggle {
  display: flex; align-items: center; width: calc(100% - 12px); margin: 1px 6px; padding: .5rem .5rem; border: 0; background: transparent; color: #e4ebf3; text-align: left;
  font-size: .82rem; font-weight: 650; letter-spacing: .01em; border-radius: 8px; cursor: pointer; white-space: normal; line-height: 1.25;
}
.nav-group-toggle:hover { background: rgba(255, 255, 255, .07); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--miedc-yellow, #FFC400); outline-offset: -2px; }
.nav-group-toggle .nav-icon { width: 1.4rem; margin-right: .5rem; text-align: center; font-size: .95rem; color: #9fb3c8; flex: 0 0 auto; }
.nav-group.has-active > .nav-group-toggle .nav-icon { color: var(--miedc-yellow, #FFC400); }
.nav-group-label { flex: 1 1 auto; min-width: 0; }
.nav-group-caret { flex: 0 0 auto; margin-left: .4rem; font-size: .62rem; opacity: .7; transition: transform .2s ease; }
.nav-group:not(.nav-group-open) > .nav-group-toggle .nav-group-caret { transform: rotate(-90deg); }
.nav-group-items { display: none; margin: 2px 0 6px; padding-left: .55rem; border-left: 1px solid rgba(255, 255, 255, .1); margin-left: 1.15rem; }
.nav-group.nav-group-open > .nav-group-items { display: block; }
.nav-group-items .nav-link { font-size: .82rem; padding: .38rem .5rem; margin: 1px 4px; }
.nav-sidebar .nav-group-items .nav-link p { margin: 0; display: block; white-space: normal !important; overflow: visible; text-overflow: clip; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.nav-sidebar .nav-group-items .nav-link { display: flex; align-items: flex-start; flex-wrap: nowrap; }
.nav-sidebar .nav-group-items .nav-link .nav-icon { margin-top: .12rem; }
.nav-group-items .nav-link .nav-icon { font-size: .8rem; opacity: .85; }
.nav-home-item { margin-bottom: 2px; }
/* Long website names must not push the sidebar brand out of its box. */
.main-sidebar .brand-link { display: flex; align-items: center; overflow: hidden; }
.main-sidebar .brand-link .brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* collapsed sidebar (desktop icon rail): every link stays reachable as an icon; labels become hover tooltips.
   Every row in the rail -- Dashboard, section icon, page links -- is the SAME box (full width, icon centred), so all
   icons sit on one vertical line. The rules are deliberately specific: they have to beat AdminLTE's own collapsed
   rules, the active-item rules (orange fill + left rule) and the hover-to-widen rules. */
@media (min-width: 992px) {
  body.sidebar-collapse .main-sidebar .brand-link,
  body.sidebar-collapse .main-sidebar:hover .brand-link { width: 100%; padding: 0; justify-content: center; }
  body.sidebar-collapse .main-sidebar .brand-link .brand-image { margin: 0; float: none; }
  body.sidebar-collapse .main-sidebar .brand-link .brand-text,
  body.sidebar-collapse .main-sidebar:hover .brand-link .brand-text { display: none !important; }

  body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link,
  body.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
  body.sidebar-collapse .main-sidebar .nav-sidebar .nav-group-items .nav-link,
  body.sidebar-collapse .main-sidebar .nav-sidebar .nav-group-items .nav-link.active,
  body.sidebar-collapse .main-sidebar .nav-group-toggle {
    display: flex; align-items: center; justify-content: center;
    width: calc(100% - 16px); margin: 2px 8px; padding: .55rem 0; border-left: 0;
  }
  body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link .nav-icon,
  body.sidebar-collapse .main-sidebar .nav-sidebar .nav-group-items .nav-link .nav-icon,
  body.sidebar-collapse .main-sidebar .nav-group-toggle .nav-icon {
    width: auto; margin: 0; flex: 0 0 auto; font-size: 1rem; opacity: 1;
  }
  body.sidebar-collapse .main-sidebar .nav-group-toggle .nav-icon { color: var(--miedc-yellow, #FFC400); }
  body.sidebar-collapse .main-sidebar .nav-group-toggle .nav-group-label,
  body.sidebar-collapse .main-sidebar .nav-group-toggle .nav-group-caret { display: none; }
  /* labels never show in the rail -- not even while the pointer hovers it (AdminLTE would otherwise print them
     into the 4.6rem strip); the hover tooltip from hr-nav.js names each icon instead */
  body.sidebar-collapse .main-sidebar .nav-link p,
  body.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p { display: none !important; }
  .sidebar-collapse .nav-group-items { display: block !important; margin: 0 0 4px; padding-left: 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .sidebar-collapse .nav-group:not(.nav-group-open) > .nav-group-items { display: block !important; }
}
/* Tooltip for the collapsed icon rail: one fixed element positioned by dist/js/hr-nav.js (a pseudo-element would be
   clipped by the sidebar's overflow). */
#hr-nav-tip { position: fixed; z-index: 1100; transform: translateY(-50%); white-space: nowrap; pointer-events: none; display: none;
  background: #1b2b3d; color: #fff; padding: .35rem .65rem; border-radius: 6px; font-size: .8rem; font-weight: 500; box-shadow: var(--hr-shadow-lg); }
#hr-nav-tip::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #1b2b3d; }

/* ============================================ 11. Mobile bottom bar + chrome */
.bottom-nav-link.active, .bottom-nav-link:hover, .bottom-nav-link:focus { color: var(--hr-accent-dk) !important; }
.bottom-nav-link.active { font-weight: 700; box-shadow: inset 0 2px 0 var(--hr-accent); }
body.dark-mode .bottom-nav-link.active, body.dark-mode .bottom-nav-link:hover { color: #ffb36b !important; }
.main-header.navbar { box-shadow: var(--hr-shadow); }
.main-footer { background: var(--hr-surface); border-top: 1px solid var(--hr-border); color: var(--hr-muted); }

/* =========================================================== 12. Dashboard */
.dash-grid { display: grid; gap: .85rem; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); margin-bottom: 1rem; }
.kpi-card {
  display: flex; flex-direction: column; gap: .15rem; position: relative; padding: .95rem 1rem; text-decoration: none !important; color: var(--hr-text) !important;
  background: var(--hr-surface); border: 1px solid var(--hr-border); border-radius: var(--hr-radius); box-shadow: var(--hr-shadow); border-left: 4px solid var(--kpi, var(--hr-accent));
  transition: box-shadow .15s ease, transform .15s ease;
}
a.kpi-card:hover { box-shadow: var(--hr-shadow-lg); transform: translateY(-1px); }
a.kpi-card:focus-visible { outline: 3px solid var(--miedc-yellow, #FFC400); outline-offset: 2px; }
.kpi-card .kpi-label { padding-right: 1.6rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hr-muted); }
.kpi-card .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--hr-text); }
.kpi-card .kpi-sub { font-size: .8rem; color: var(--hr-muted); }
.kpi-card .kpi-icon { position: absolute; right: .8rem; top: .8rem; font-size: 1.05rem; color: var(--kpi, var(--hr-accent)); opacity: .85; }
.kpi-card .kpi-go { margin-top: .25rem; font-size: .75rem; font-weight: 600; color: var(--hr-accent-dk); }
body.dark-mode .kpi-card .kpi-go { color: #ffb36b; }
.kpi-ok { --kpi: #1e8e5a; } .kpi-warn { --kpi: #d68a00; } .kpi-bad { --kpi: #c8102e; } .kpi-info { --kpi: #1b6ec2; } .kpi-brand { --kpi: var(--hr-accent); }
.dash-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 1rem; align-items: stretch; }
.dash-col-4 { grid-column: span 4; } .dash-col-5 { grid-column: span 5; } .dash-col-6 { grid-column: span 6; } .dash-col-7 { grid-column: span 7; } .dash-col-8 { grid-column: span 8; } .dash-col-12 { grid-column: span 12; }
.dash-card { margin: 0; height: 100%; display: flex; flex-direction: column; }
.dash-card .card-body { flex: 1 1 auto; min-width: 0; }
.chart-box { position: relative; height: 260px; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--hr-border); font-size: .86rem; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list .dl-main { min-width: 0; overflow-wrap: anywhere; } .dash-list .dl-meta { color: var(--hr-muted); font-size: .78rem; white-space: nowrap; }
.quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.quick-actions .btn { display: inline-flex; align-items: center; gap: .45rem; }
.mini-stat { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px dashed var(--hr-border); font-size: .86rem; }
.mini-stat:last-child { border-bottom: 0; } .mini-stat b { font-variant-numeric: tabular-nums; }
.dash-note { font-size: .75rem; color: var(--hr-muted); }

/* ============================================================ 13. Responsive */
@media (max-width: 1199.98px) { .dash-col-4, .dash-col-5, .dash-col-7, .dash-col-8 { grid-column: span 6; } .dash-col-8 { grid-column: span 12; } }
@media (max-width: 767.98px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .dash-col-4, .dash-col-5, .dash-col-6, .dash-col-7, .dash-col-8, .dash-col-12 { grid-column: span 1; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kpi-card { padding: .75rem .8rem; } .kpi-card .kpi-value { font-size: 1.5rem; } .kpi-card .kpi-icon { display: none; }
  .page-header { margin-bottom: .75rem; } .page-header .page-actions { width: 100%; } .page-header .page-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .page-header h1, .content-header h1 { font-size: 1.2rem; }
  .content-header.d-flex .btn { min-height: 40px; }
  .btn { min-height: 38px; } .btn-sm { min-height: 36px; }
  .form-control, .custom-select { font-size: 16px; }   /* stops iOS zoom-on-focus */
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left; }
  .filter-bar .form-control, .filter-bar .custom-select { flex: 1 1 100%; }
  .modal-dialog { margin: .5rem; }
}
@media (max-width: 575.98px) { .kpi-card .kpi-sub { display: none; } .card-body { padding: .85rem; } .main-footer { font-size: .75rem; } }
@media (min-width: 768px) and (max-width: 991.98px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .kpi-card, .nav-group-caret, .btn.is-busy::after { transition: none; animation: none; } }
@media print { .main-sidebar, .main-header, .bottom-nav, .main-footer, .page-actions, .hr-breadcrumb { display: none !important; } .card { box-shadow: none; } }

/* ==========================================================================================================
   Responsive tables (all DataTables; see "Responsive tables" in dist/js/datatables-defaults.js)
   - desktop/tablet: normal table, scrolls sideways inside its card when it does not fit (never the whole page)
   - phone/tablet (<= 991px): each row becomes a card (two per row on tablets), every value prefixed with its column title
   ========================================================================================================== */
.table-responsive { -webkit-overflow-scrolling: touch; }
table.dataTable { width: 100% !important; }
table.dataTable thead th, table.dataTable tbody td { vertical-align: middle; }
@media (max-width: 991.98px) {
  .dataTables_wrapper .row:first-child, .dataTables_wrapper .row:last-child { row-gap: .4rem; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { text-align: left; float: none; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
  .dataTables_wrapper .dataTables_paginate { margin-top: .4rem; }
  .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start; }
}
@media screen and (max-width: 991.98px) {
  table.dataTable.hr-cards, table.dataTable.hr-cards tbody, table.dataTable.hr-cards tr, table.dataTable.hr-cards td { display: block; width: 100% !important; }
  table.dataTable.hr-cards { border: 0; min-width: 0; }
  table.dataTable.hr-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* hidden visually, kept for screen readers */
  table.dataTable.hr-cards tbody tr { margin: 0 0 .7rem; padding: .35rem .85rem; border: 1px solid var(--hr-border, rgba(0, 0, 0, .12)); border-radius: 10px; background: var(--hr-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
  table.dataTable.hr-cards tbody td { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .35rem 0 !important; border: 0 !important; text-align: right; font-size: .85rem; word-break: break-word; }
  table.dataTable.hr-cards tbody td::before { content: attr(data-label); flex: 0 0 36%; max-width: 36%; text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--hr-muted, #6c757d); }
  table.dataTable.hr-cards tbody td[data-label=""]::before, table.dataTable.hr-cards tbody td.dataTables_empty::before { content: none; }
  table.dataTable.hr-cards tbody td:first-child { font-weight: 600; border-bottom: 1px solid var(--hr-border, rgba(0, 0, 0, .1)) !important; padding-bottom: .5rem !important; margin-bottom: .2rem; }
  table.dataTable.hr-cards tbody td[data-label=""] { justify-content: flex-end; padding-top: .5rem !important; }
  table.dataTable.hr-cards tbody td:empty { display: none; }
  table.dataTable.hr-cards tbody td.dataTables_empty { display: block; text-align: center; }
  table.dataTable.hr-cards tbody tr:hover { background: var(--hr-surface, #fff); }
  .table-responsive:has(> table.hr-cards), .hr-table-scroll:has(> table.hr-cards) { overflow: visible; }
  .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { width: 100%; }
}
@media screen and (min-width: 576px) and (max-width: 991.98px) {   /* tablets: two cards per row */
  table.dataTable.hr-cards tbody { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  table.dataTable.hr-cards tbody tr { margin: 0; }
  table.dataTable.hr-cards tbody tr:has(td.dataTables_empty) { grid-column: 1 / -1; }
}
body.dark-mode table.dataTable.hr-cards tbody tr { --hr-surface: #343a40; --hr-border: rgba(255, 255, 255, .14); --hr-muted: #adb5bd; }
@media print { table.dataTable.hr-cards thead { position: static; width: auto; height: auto; clip: auto; } }

/* ==========================================================================================================
   Table alignment (all DataTables): one header/cell rhythm, one sort indicator, tidy toolbar, centred Actions
   ========================================================================================================== */
table.dataTable thead th, table.dataTable tbody td, table.dataTable tfoot th { padding: .65rem .8rem; text-align: left; vertical-align: middle; }
table.dataTable thead th.text-center, table.dataTable tbody td.text-center { text-align: center; }
table.dataTable thead th.text-right, table.dataTable tbody td.text-right { text-align: right; }
table.dataTable thead th.dt-body-right, table.dataTable tbody td.dt-body-right { text-align: right; }
/* one sort indicator, same place in every header (replaces the two stacked arrows that landed differently per column) */
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { position: relative; padding-right: 1.9rem; cursor: pointer; }
table.dataTable thead th.sorting::before, table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_desc::before { content: none !important; display: none !important; }
table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after {
  content: "\f0dc"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .68rem; line-height: 1; opacity: .3;
  position: absolute; right: .7rem; top: 0; bottom: 0; margin: auto 0; height: 1em; transform: none; display: block;
}
table.dataTable thead th.sorting_asc::after { content: "\f0d8"; font-size: .8rem; opacity: .9; color: var(--hr-accent, #e8710a); }
table.dataTable thead th.sorting_desc::after { content: "\f0d7"; font-size: .8rem; opacity: .9; color: var(--hr-accent, #e8710a); }
table.dataTable thead th.sorting_disabled { padding-right: .8rem; }
/* Actions column */
table.dataTable thead th.hr-col-actions, table.dataTable tbody td.hr-col-actions { width: 1%; white-space: nowrap; text-align: center !important; padding-left: .5rem; padding-right: .5rem; }
table.dataTable td.hr-col-actions .dropdown, table.dataTable td.hr-col-actions .btn-group { display: inline-block; }
/* toolbar: "Show N entries" and the search box share one baseline; info/paging line up under the table edges */
.dataTables_wrapper > .row { align-items: center; margin-bottom: .5rem; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 500; }
.dataTables_wrapper .dataTables_length select { width: auto; min-width: 4.2rem; height: 34px; padding: 0 1.6rem 0 .6rem; }
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter input { margin: 0; }
.dataTables_wrapper .dataTables_info { padding-top: 0; }
.dataTables_wrapper .dataTables_paginate { padding-top: 0; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; justify-content: flex-end; }
@media (max-width: 991.98px) { .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_paginate .pagination { text-align: left; justify-content: flex-start; } .dataTables_wrapper .dataTables_filter label { width: 100%; } .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; } }

/* ==========================================================================================================
   Modals: Close button at the bottom (added by dist/js/hr-ui.js when a modal has no dismiss button in its footer)
   ========================================================================================================== */
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.modal-footer > .btn { margin: 0; min-width: 6.2rem; }
.modal-content > .modal-footer { position: sticky; bottom: 0; background: var(--hr-surface, #fff); border-top: 1px solid var(--hr-border, #e3e8ee); border-radius: 0 0 var(--hr-radius, .5rem) var(--hr-radius, .5rem); }
@media (max-width: 575.98px) { .modal-footer > .btn { flex: 1 1 calc(50% - .5rem); } }
/* the Cancel/Save row that forms keep at the end of their body: same look as a modal footer, always right-aligned */
.modal-body form > .text-right:has(> .btn[data-dismiss="modal"]), .modal-body > .text-right:has(> .btn[data-dismiss="modal"]) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding-top: .85rem; margin-top: .5rem; border-top: 1px solid var(--hr-border, #e3e8ee); }
.modal-body .text-right > .btn[data-dismiss="modal"] { min-width: 6.2rem; margin: 0; }

/* Attendance Log modal grid: light borders, no wrapped dates, room for every column (scrolls sideways inside its box on small screens) */
#period_table { width: 100%; min-width: 900px; table-layout: auto; border-collapse: separate; border-spacing: 0; border: 1px solid #dee2e6; }
#period_table th, #period_table td { border: 0 !important; border-right: 1px solid #e9ecef !important; border-bottom: 1px solid #e9ecef !important; vertical-align: middle; padding: .4rem .5rem; }
#period_table th:last-child, #period_table td:last-child { border-right: 0 !important; }
#period_table thead th { background: #f4f6f8; color: #495057; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; text-align: center; white-space: nowrap; position: sticky; top: 0; z-index: 2; }
#period_table thead tr:nth-child(2) th { top: 1.95rem; }
#period_table tbody td:first-child { white-space: nowrap; min-width: 7.8rem; }
#period_table tbody td input[type=time] { min-width: 6.9rem; padding-left:.35rem; padding-right:.2rem; }
#period_table tbody td select { min-width: 5.8rem; }
#period_table tbody td input[type=number] { min-width: 4.8rem; }
#period_table tbody td:last-child input { min-width: 8rem; width:100%; }
#period_table tbody td:nth-child(7) { text-align: center; }