:root {
    /* HRIS palette — same orange as HMS, per the "base HRIS on HMS's theme" instruction */
    --hris-orange: #e6802e;       /* primary brand orange */
    --hris-orange-dark: #c2661f;  /* hover / active / gradient end */
    --hris-orange-light: #f4a968; /* tints, badges, subtle accents */
    --hris-cream: #fff6ec;        /* soft warm background tint */
    --hris-charcoal: #2e2620;     /* warm dark neutral for body text */
    /* Inter renders noticeably crisper than the system-UI default at small
       dashboard sizes; the stack falls back gracefully if the CDN is unreachable. */
    --hris-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Content background behind the white cards; each user can pick another
       tone from the navbar account menu (data-hris-theme on <html>, see header.php). */
    --hris-page-bg: #e6e9ee;
}

/* Content background themes — keep these in step with $hrisThemes in header.php
   ("brand" is set inline there, since it's derived from the company Theme Color). */
[data-hris-theme="light"] { --hris-page-bg: #f4f6f9; }
[data-hris-theme="slate"] { --hris-page-bg: #d8dde4; }
[data-hris-theme="sand"]  { --hris-page-bg: #efe6da; }
[data-hris-theme="sage"]  { --hris-page-bg: #dfe8e0; }
[data-hris-theme="mist"]  { --hris-page-bg: #dde6f1; }
[data-hris-theme="lilac"] { --hris-page-bg: #e7e2ef; }

body {
    background-color: var(--hris-page-bg);
    font-family: var(--hris-font);
    color: var(--hris-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .stat-value, .card-title, .btn {
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--hris-charcoal);
}

/* ---------- Typography ----------
   Same scale as MCMS (sizes/weights only; colours stay HRIS orange).
   Print documents are excluded so their pt-based sizing is untouched. */
body { font-size: 1rem; }
@media screen {
    .table:not(.print-doc .table) thead th { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
    .table:not(.print-doc .table) tbody td { font-size: 1rem; font-weight: 500; }
    .badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
}
.form-control, .form-select { font-size: 1rem; font-weight: 500; }
select option { font-weight: 500; }
.form-label { font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; }
.btn { font-size: 0.95rem; font-weight: 600; }
.btn-sm { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; }
/* One standard button height app-wide (38px = a default .form-control), whatever
   the size class or font size: fixed line box + fixed vertical padding + 1px borders.
   .btn-sm / .btn-group-sm keep their smaller text and horizontal padding only. */
.btn, .btn-sm, .btn-lg,
.btn-group-sm > .btn, .btn-group-lg > .btn {
    --bs-btn-line-height: 1.5rem;
    --bs-btn-padding-y: 0.375rem;
}
/* Small input groups (e.g. a year field + Go) set padding directly, so pull their
   buttons and fields up to the same 38px. */
.form-control-sm,
.form-select-sm,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    line-height: 1.5rem;
}
/* Icon-only row actions (script.js adds .btn-icon): a compact 32px square with
   the icon dead centre, so the space around it is equal on all four sides.
   Fixed width/height and zero padding override the 38px standard above. */
.btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
}
.btn.btn-icon i { line-height: 1; }
.btn.btn-icon i[class*="me-"] { margin-right: 0 !important; }
.dropdown-menu { font-size: 0.95rem; }
.dropdown-item { font-size: 0.95rem; font-weight: 500; }
.nav-tabs .nav-link { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }
.alert { font-size: 0.95rem; }
.modal-title { font-size: 1.1rem; font-weight: 700; }
.hris-content .small, .hris-content small { font-size: 0.9em; }

@media (max-width: 767.98px) {
    .form-control, .form-select, .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: 1rem; }
}

/* Hyperlinks are never underlined anywhere in the app (overrides Bootstrap's default), matching DCMS. */
a, a:hover, a:focus,
.btn-link, .btn-link:hover, .btn-link:focus {
    text-decoration: none;
}

/* Keyboard-focus indicator for plain links (e.g. "Forgot password?") — a soft
   brand ring instead of an underline, so focus stays visible for keyboard
   navigation while links are never underlined. */
a:focus-visible {
    outline: 2px solid var(--hris-orange-light);
    outline-offset: 2px;
    border-radius: 0.2rem;
}

/* ---------- Login screen ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Brand-tinted overlay on the payroll photo (Unsplash License, Sasun Bughdaryan). */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--hris-orange) 82%, transparent) 0%,
            color-mix(in srgb, var(--hris-orange-dark) 90%, transparent) 100%),
        url("../images/login-bg.jpg") center / cover no-repeat,
        var(--hris-orange-dark);
}

.login-forgot-link {
    position: absolute;
    top: 0;
    right: 0;
}
.login-forgot-link:focus-visible { outline-offset: 0; }

.login-card {
    width: 100%;
    max-width: 380px;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.login-logo {
    width: auto;
    height: 80px;
    max-width: 220px;
}

.login-logo-fallback {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--hris-cream);
    color: var(--hris-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
}

.navbar-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #fff;
}

/* ---------- Top navbar ---------- */
.hris-navbar {
    background-color: var(--hris-orange);
}

.hris-navbar .nav-branch-select {
    width: auto;
    max-width: 200px;
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.75);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.hris-navbar .nav-branch-select option {
    color: #212529;
}

.hris-navbar .navbar-brand {
    font-weight: 700;
    color: #fff !important;
    letter-spacing: 0.02em;
}

.hris-navbar .navbar-brand small {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--hris-cream);
    letter-spacing: 0.08em;
}

/* ---------- Sidebar ----------
   Same look as MCMS: brand + toggle row on top, folds to icons on a desktop. */
.hris-sidebar {
    width: max-content;
    min-width: 280px;
    max-width: min(360px, 40vw);
    min-height: calc(100vh - 56px);
    background-color: #fff;
    border-right: 1px solid #e3e6ea;
    flex-shrink: 0;
    position: relative;
    transition: width 0.15s ease;
}

/* Desktop (lg+): the sidebar stays on screen and scrolls on its own, so a link far
   down the menu is still in view after its page loads (see sidebar.php). */
@media (min-width: 992px) {
    .hris-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

.hris-sidebar .nav-link {
    color: #33404d;
    border-radius: 0.375rem;
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hris-sidebar .nav-link.active {
    background-color: var(--hris-orange);
    color: #fff !important;
}

.hris-sidebar .nav-link:hover:not(.active) {
    background-color: var(--hris-cream);
}

.hris-sidebar .sidebar-section {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #9aa5b1;
    margin: 0.9rem 0.9rem 0.3rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Collapsible menu groups (wrapped by the script in sidebar.php). */
.hris-sidebar .sidebar-section[role="button"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.6rem 0 0.15rem;
    padding: 0.3rem 0.9rem;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
}

.hris-sidebar .sidebar-section[role="button"]:hover {
    background-color: #f4f6f9;
    color: var(--hris-charcoal);
}

.hris-sidebar .sidebar-section[role="button"]:focus-visible {
    outline: 2px solid var(--hris-orange-light);
    outline-offset: -2px;
}

.sidebar-section-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.sidebar-section.is-closed .sidebar-section-chevron {
    transform: rotate(-90deg);
}

/* grid-rows 1fr -> 0fr animates to the group's natural height, no fixed max-height. */
.sidebar-group {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.2s ease;
}

.sidebar-group.is-closed {
    grid-template-rows: 0fr;
}

.sidebar-group.no-anim {
    transition: none;
}

.sidebar-group-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Sidebar toggle row ----------
   Logo (or icon) and the system's short name, with the fold button on the right. */
.sidebar-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.25rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding-left: 0.65rem;
    color: var(--hris-orange);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sidebar-brand:hover {
    color: var(--hris-orange-dark);
}

.sidebar-brand i {
    font-size: 1.35rem;
    line-height: 1;
}

.sidebar-brand img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.sidebar-collapse-btn {
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #6c757d;
    font-size: 1.25rem;
    line-height: 1;
}

.sidebar-collapse-btn:hover {
    background-color: var(--hris-cream);
    color: var(--hris-charcoal);
}

/* Icon-rail collapse (same chevron button as DCMS) runs from desktop width up; below lg (phones and portrait tablets) the sidebar is a drawer (see Responsive). */
@media (min-width: 992px) {
    .hris-sidebar.collapsed {
        width: 64px;
        min-width: 64px; /* override the expanded min-width, or the rail stays 280px wide */
    }

    .hris-sidebar.collapsed .sidebar-toggle-row {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .hris-sidebar.collapsed .nav-label,
    .hris-sidebar.collapsed .sidebar-brand,
    .hris-sidebar.collapsed .sidebar-section-chevron {
        display: none;
    }

    /* A section title becomes a rule between the groups of icons. */
    .hris-sidebar.collapsed .sidebar-section,
    .hris-sidebar.collapsed .sidebar-section[role="button"] {
        height: 0;
        margin: 0.5rem;
        padding: 0;
        border-top: 1px solid #e3e6ea;
        border-radius: 0;
        font-size: 0;
        pointer-events: none;
    }

    .hris-sidebar.collapsed .nav-link {
        text-align: center;
        padding: 0.55rem 0;
    }

    .hris-sidebar.collapsed .nav-link i {
        margin-right: 0 !important;
        font-size: 1.05rem;
    }

    /* Icon-only sidebar has no headings to click, so every group stays open there. */
    .hris-sidebar.collapsed .sidebar-group.is-closed {
        grid-template-rows: 1fr;
    }
}

.hris-content {
    flex-grow: 1;
    padding: 1rem 1.75rem 1.75rem;
    min-width: 0; /* let a collapsed sidebar actually free up space instead of the flex item refusing to shrink/grow */
}

/* Account menu theme picker: a swatch of each content background, ticked when current. */
.theme-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: -0.15em;
}
.theme-option .theme-check { visibility: hidden; color: var(--hris-orange); }
.theme-option.active { background-color: var(--hris-cream); color: var(--hris-charcoal); }
.theme-option.active .theme-check { visibility: visible; }

/* Header bell dropdown: 320px, but never wider than a phone screen. */
.notif-menu {
    min-width: min(320px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    white-space: normal;
}

/* Page heading rows (title + action buttons) wrap instead of overflowing on narrow screens. */
.hris-content > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Sortable table headings (script.js): pointer, and a faint up/down arrow that
   firms up to the current direction once the column is sorted. */
.th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.th-sortable::after {
    content: "\F127"; /* bi-arrow-down-up */
    font-family: "bootstrap-icons";
    font-size: 0.7em;
    margin-left: 0.35rem;
    opacity: 0.3;
    vertical-align: 0.05em;
}
.th-sortable[aria-sort="ascending"]::after  { content: "\F148"; opacity: 0.9; } /* bi-arrow-up */
.th-sortable[aria-sort="descending"]::after { content: "\F128"; opacity: 0.9; } /* bi-arrow-down */
.th-sortable:hover::after { opacity: 0.7; }
.th-sortable:focus-visible { outline: 2px solid var(--hris-orange-light); outline-offset: -2px; }
@media print { .th-sortable::after { display: none; } }

/* ---------- List tables ----------
   Cleaner data-grid look for on-screen tables: tinted heading band, muted heading
   text, hairline row rules and a warm hover. Printable documents are untouched. */
@media screen {
    .hris-content .table:not(.print-doc .table):not(.table-borderless) {
        --bs-table-hover-bg: var(--hris-cream);
        --bs-table-border-color: #eceef1;
    }
    .hris-content .table:not(.print-doc .table):not(.table-borderless) > thead > tr > th {
        background-color: #f7f8fa;
        color: #6b6259;
        border-bottom: 1px solid #e3e6ea;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        vertical-align: middle;
    }
    .hris-content .table:not(.print-doc .table):not(.table-borderless) > thead > tr > th:first-child { border-top-left-radius: 0.4rem; }
    .hris-content .table:not(.print-doc .table):not(.table-borderless) > thead > tr > th:last-child  { border-top-right-radius: 0.4rem; }
    .hris-content .table:not(.print-doc .table) > tbody > tr:last-child > * { border-bottom-width: 0; }
    /* Breathing room at the row edges so text and action buttons don't touch the
       tinted heading band or the hover highlight. */
    .hris-content .table:not(.print-doc .table):not(.table-borderless) > * > tr > :first-child { padding-left: 0.85rem; }
    .hris-content .table:not(.print-doc .table):not(.table-borderless) > * > tr > :last-child  { padding-right: 0.85rem; }
    .th-sortable:hover { color: var(--hris-charcoal) !important; }
}

/* Paged tables (script.js): footer with "Show N entries" + info on the left, page links on the right. */
.dt-footer { font-size: 0.9rem; color: #6b6259; }
.dt-length .form-select { width: auto; min-width: 4.75rem; }
.dt-footer { border-top: 1px solid #eceef1; padding-top: 0.75rem; }
/* Pager: a joined segmented group matching the outline-dark filter button groups
   (e.g. pay_structure.php sector filter): dark outline, current page solid dark. */
.dt-footer .pagination { flex-wrap: wrap; gap: 0; }
.dt-footer .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2rem;
    padding: 0 0.65rem;
    border: 1px solid #ced4da;
    margin-left: -1px;
    border-radius: 0 !important;
    background: #fff;
    color: #212529;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dt-footer .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }
.dt-footer .page-item:last-child .page-link { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
.dt-footer a.page-link:hover { background: #212529; color: #fff; }
.dt-footer .page-link:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--hris-orange-light); outline-offset: 1px; box-shadow: none; }
.dt-footer .page-item.active .page-link { background: #212529; border-color: #212529; color: #fff; }
.dt-footer .page-item.disabled .page-link { background: #fff; border-color: #ced4da; color: #adb5bd; }
.dt-footer .page-link i { font-size: 0.75rem; }
@media (max-width: 575.98px) {
    .dt-footer { justify-content: center !important; }
}
@media print { .dt-footer { display: none !important; } .hris-content table tr[hidden] { display: table-row !important; } }

/* Status filter tabs (e.g. leave/index.php): a segmented control on a soft
   track; the open tab is raised on white, and each
   tab carries a count tinted in its status colour. */
.status-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
    background: #eef0f3;
    border: 1px solid #e3e6ea;
    border-radius: 0.6rem;
}
.status-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.45rem;
    color: #5f6b76;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.status-tab i { font-size: 1rem; opacity: 0.8; }
.status-tab:hover { color: var(--hris-charcoal); background: rgba(255, 255, 255, 0.6); }
.status-tab:focus-visible { outline: 2px solid var(--hris-orange-light); outline-offset: 1px; }
.status-tab.active {
    background: #fff;
    color: var(--hris-charcoal);
    box-shadow: 0 1px 3px rgba(46, 38, 32, 0.12);
}
.status-tab.active i { opacity: 1; }
.status-tab-count {
    min-width: 1.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #dfe3e8;
    color: #5f6b76;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
.status-tab-warning.active i   { color: var(--bs-warning-text-emphasis); }
.status-tab-success.active i   { color: var(--bs-success); }
.status-tab-danger.active i    { color: var(--bs-danger); }
.status-tab-secondary.active i { color: var(--hris-orange); }
.status-tab-warning .status-tab-count { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.status-tab-success .status-tab-count { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.status-tab-danger .status-tab-count  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }

/* Page heading buttons look like the dashboard summary cards: soft tint,
   coloured border, darker text. script.js gives each neutral button in a row
   its own tone (btn-tint-*); a coloured button (e.g. red Delete) keeps its colour. */
[class*="btn-tint-"] {
    --bs-btn-border-width: 2px;
    --bs-btn-padding-y: calc(0.375rem - 1px); /* thicker border, same 38px height */
    --bs-btn-color: var(--tint-text);
    --bs-btn-bg: var(--tint-bg);
    --bs-btn-border-color: var(--tint-border);
    --bs-btn-hover-color: var(--tint-text);
    --bs-btn-hover-bg: var(--tint-border);
    --bs-btn-hover-border-color: var(--tint-border);
    --bs-btn-active-color: var(--tint-text);
    --bs-btn-active-bg: var(--tint-border);
    --bs-btn-active-border-color: var(--tint-text);
}
.btn-tint-primary   { --tint-bg: var(--bs-primary-bg-subtle); --tint-border: var(--bs-primary-border-subtle); --tint-text: var(--bs-primary-text-emphasis); }
.btn-tint-success   { --tint-bg: var(--bs-success-bg-subtle); --tint-border: var(--bs-success-border-subtle); --tint-text: var(--bs-success-text-emphasis); }
.btn-tint-info      { --tint-bg: var(--bs-info-bg-subtle); --tint-border: var(--bs-info-border-subtle); --tint-text: var(--bs-info-text-emphasis); }
.btn-tint-warning   { --tint-bg: var(--bs-warning-bg-subtle); --tint-border: var(--bs-warning-border-subtle); --tint-text: var(--bs-warning-text-emphasis); }
.btn-tint-secondary { --tint-bg: var(--bs-secondary-bg-subtle); --tint-border: var(--bs-secondary-border-subtle); --tint-text: var(--bs-secondary-text-emphasis); }
.btn-tint-danger    { --tint-bg: var(--bs-danger-bg-subtle); --tint-border: var(--bs-danger-border-subtle); --tint-text: var(--bs-danger-text-emphasis); }

/* ---------- Responsive: phone + portrait tablet (< 992px) — sidebar drawer ----------
   The sidebar turns into an off-canvas drawer opened by the navbar's
   hamburger (#sidebarToggleBtn); script.js toggles .show / body.sidebar-open. */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .hris-navbar {
        flex-wrap: nowrap;
    }

    .hris-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        width: max-content;
        min-width: min(280px, 85vw);
        max-width: 85vw;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform 0.2s ease, visibility 0s linear 0.2s; /* hide only after sliding out */
        visibility: hidden;
    }

    .hris-sidebar.show {
        transform: none;
        visibility: visible;
        transition: transform 0.2s ease;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.4);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .hris-content {
        padding: 1rem 1.25rem 1.5rem;
    }
}

/* ---------- Responsive: landscape tablet / small laptop (992px – 1199px) ----------
   The sidebar stays pinned but narrower, leaving more room for tables. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hris-sidebar {
        min-width: 240px;
        max-width: 260px;
    }

    .hris-content {
        padding: 1rem 1.25rem 1.5rem;
    }
}

/* ---------- Responsive: phone (< 768px) ---------- */
@media (max-width: 767.98px) {
    .hris-navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .hris-navbar .navbar-brand {
        margin-right: 0.5rem;
    }

    .hris-navbar .navbar-brand small {
        display: none;
    }

    .hris-navbar .nav-branch-select {
        max-width: 120px;
    }

    .hris-content {
        padding: 0.75rem 0.75rem 1.25rem;
    }

    .table-responsive-card {
        padding: 0.9rem;
    }

    .stat-card .stat-value {
        font-size: 1.4rem;
    }

    /* Tab strips scroll sideways instead of wrapping into several rows. */
    .hris-content .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    /* Action-button clusters in a page heading wrap onto a new line instead of
       running past the screen edge. */
    .hris-content > .d-flex.justify-content-between > .d-flex {
        flex-wrap: wrap;
    }

    /* Modal action rows: buttons wrap rather than squeeze. */
    .modal-footer {
        flex-wrap: wrap;
    }

    /* Fixed-size payslip previews scroll instead of pushing the page wider. */
    .print-doc {
        padding: 1rem;
    }

    .sheet-single, .sheet-4up {
        overflow-x: auto;
    }

    .login-wrapper {
        padding: 1rem;
    }
}

/* ---------- Reusable bits ---------- */
.stat-card {
    border: 2px solid var(--bs-border-color);
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.08);
    height: 100%;
}

.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
}

/* Dashboard cards that drill down to their list page */
a.stat-card {
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.stat-card:hover,
a.stat-card:focus-visible {
    box-shadow: 0 0.35rem 1rem rgba(46, 38, 32, 0.16);
    transform: translateY(-2px);
}

/* The card for the filter currently applied (e.g. DTR Logs' selected source). */
a.stat-card[aria-current="true"] {
    border-width: 2px;
    box-shadow: 0 0.25rem 0.75rem rgba(46, 38, 32, 0.14);
}

.stat-card .stat-icon {
    font-size: 1.4rem;
    opacity: 0.8;
}

.stat-icon-badge {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    font-size: 1.15rem;
}

/* Dashboard summary cards: the card is tinted in its tone; the icon badge sits
   on white so it still stands out against the tint. */
.stat-card-primary   { background-color: var(--bs-primary-bg-subtle); }
.stat-card-secondary { background-color: #efebfa; } /* soft violet, not Bootstrap's grey secondary */
.stat-card-success   { background-color: var(--bs-success-bg-subtle); }
.stat-card-info      { background-color: var(--bs-info-bg-subtle); }
.stat-card-warning   { background-color: var(--bs-warning-bg-subtle); }
.stat-card-danger    { background-color: var(--bs-danger-bg-subtle); }
.stat-card-brand     { background-color: var(--hris-cream); }
.stat-card-brand .stat-icon-badge { color: var(--hris-orange); }

/* Border in the card's own tone, one step darker than its tint. */
.stat-card-primary   { border-color: var(--bs-primary-border-subtle); }
.stat-card-secondary { border-color: #d3c8f2; }
.stat-card-secondary .stat-icon-badge { color: #6f42c1 !important; } /* beats the pages' .text-secondary */
.stat-card-success   { border-color: var(--bs-success-border-subtle); }
.stat-card-info      { border-color: var(--bs-info-border-subtle); }
.stat-card-warning   { border-color: var(--bs-warning-border-subtle); }
.stat-card-danger    { border-color: var(--bs-danger-border-subtle); }
.stat-card-brand     { border-color: var(--hris-orange-light); }

[class*="stat-card-"] .stat-icon-badge {
    background-color: var(--bs-body-bg);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Leave calendar (leave/calendar.php): a Sun–Sat month grid; chips are tinted
   per leave type (lc-tone-*), weekends sit on a soft grey, today is ringed. */
.lc-month-title { min-width: 10rem; text-align: center; }
.lc-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid #e3e6ea;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #e3e6ea;
    gap: 1px;
}
.lc-weekday {
    background: #f7f8fa;
    color: #6b6259;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0.5rem 0;
}
.lc-day {
    background: #fff;
    min-height: 7.25rem;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.lc-day.lc-weekend { background: #fafbfc; }
.lc-day.lc-outside { background: #f7f8fa; }
.lc-day.lc-outside .lc-date { color: #c3c9cf; }
.lc-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hris-charcoal);
}
.lc-today { background: var(--hris-cream) !important; box-shadow: inset 0 0 0 2px var(--hris-orange-light); }
.lc-today .lc-date { background: var(--hris-orange); color: #fff; }
.lc-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b6259;
    background: #eef0f3;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}
.lc-chip, .lc-holiday {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.15rem 0.4rem;
    border-radius: 0.3rem;
    border-left: 3px solid var(--lc-accent);
    background: var(--lc-bg);
    color: var(--lc-text);
}
.lc-holiday { --lc-accent: var(--hris-orange); --lc-bg: var(--hris-cream); --lc-text: var(--hris-orange-dark); }
/* Leave names: plain text links in the type's colour (no fill/border); click opens the details modal. */
.lc-chip {
    display: block;
    border-left: 0;
    background: none;
    padding: 0.05rem 0.1rem;
    text-decoration: none;
}
.lc-chip:hover, .lc-chip:focus-visible { color: var(--lc-accent); }
.lc-more { font-size: 0.75rem; font-weight: 600; color: #6b6259; padding: 0 0.4rem; cursor: default; }
.lc-tone-primary   { --lc-accent: var(--bs-primary);   --lc-bg: var(--bs-primary-bg-subtle);   --lc-text: var(--bs-primary-text-emphasis); }
.lc-tone-success   { --lc-accent: var(--bs-success);   --lc-bg: var(--bs-success-bg-subtle);   --lc-text: var(--bs-success-text-emphasis); }
.lc-tone-warning   { --lc-accent: var(--bs-warning);   --lc-bg: var(--bs-warning-bg-subtle);   --lc-text: var(--bs-warning-text-emphasis); }
.lc-tone-info      { --lc-accent: var(--bs-info);      --lc-bg: var(--bs-info-bg-subtle);      --lc-text: var(--bs-info-text-emphasis); }
.lc-tone-danger    { --lc-accent: var(--bs-danger);    --lc-bg: var(--bs-danger-bg-subtle);    --lc-text: var(--bs-danger-text-emphasis); }
.lc-tone-secondary { --lc-accent: var(--bs-secondary); --lc-bg: var(--bs-secondary-bg-subtle); --lc-text: var(--bs-secondary-text-emphasis); }
.lc-legend { display: inline-flex; align-items: center; gap: 0.35rem; color: #5f6b76; font-weight: 600; }
.lc-dot { width: 0.65rem; height: 0.65rem; border-radius: 999px; flex-shrink: 0; background: var(--lc-accent); }
.lc-dot-holiday { --lc-accent: var(--hris-orange); }
.lc-list-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid #eceef1; }
.lc-list-item:last-child { border-bottom: 0; }
.lc-list-item .lc-dot { margin-top: 0.4rem; }
/* Holiday Calendar (settings/holidays.php): a "+" on each day to add a holiday there; shown on hover/focus, always on touch screens. */
.hc-add { border: 0; background: transparent; color: #8a939c; padding: 0 0.2rem; line-height: 1; border-radius: 0.25rem; opacity: 0; }
.lc-day:hover .hc-add, .hc-add:focus-visible { opacity: 1; }
.hc-add:hover { color: var(--hris-orange); background: var(--hris-cream); }
@media (hover: none) { .hc-add { opacity: 1; } }
/* Phones: cells shrink, chips become coloured bars without names. */
@media (max-width: 575.98px) {
    .lc-day { min-height: 4.5rem; padding: 0.25rem; }
    .lc-weekday { font-size: 0.65rem; }
    .lc-chip, .lc-holiday { font-size: 0; height: 0.35rem; padding: 0; border-left: 0; background: var(--lc-accent); }
    .lc-count, .lc-more { display: none; }
}

/* Feature Modules (settings/modules.php): the whole card is the toggle's label;
   enabled = brand tint, disabled = grey with a faded icon. */
.module-card { cursor: pointer; margin-bottom: 0; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.module-card:hover { box-shadow: 0 0.35rem 1rem rgba(46, 38, 32, 0.16); }
.module-card.module-off { background-color: #f7f8fa; }
.module-card.module-off .stat-icon-badge { background: #eef0f3; color: #9aa3ab; }
.module-card .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.module-card .form-check-input:checked { background-color: var(--hris-orange); border-color: var(--hris-orange); }

/* System Settings tiles: dashboard card look, one fixed height so a two-line
   title doesn't make its row taller than the rest. */
.stat-card.settings-tile {
    height: 8rem;
}

.settings-tile .stat-label {
    line-height: 1.25;
}

.min-w-0 {
    min-width: 0;
}

.table-responsive-card {
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.06);
    padding: 1.25rem;
}

/* ---------- Access Rights permission matrix (users/permissions.php) ---------- */
.menu-section-card {
    border-color: #e3e6ea !important;
    overflow: hidden;
}

.menu-section-header {
    background-color: var(--hris-cream);
    border-bottom: 1px solid #e3e6ea;
}

.menu-section-table thead th {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    border-bottom-width: 1px;
}

.menu-section-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #f0f1f3;
}

.menu-section-table .menu-action-checkbox:disabled {
    opacity: 0.3;
}

/* ---------- Password field with an inline show/hide toggle ---------- */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 2.75rem;
}

.password-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--hris-charcoal);
}

.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Employee profile ---------- */
.profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--hris-cream);
}

.profile-photo-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--hris-cream);
    color: var(--hris-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

/* Large portrait for profile summary cards: fills the column (up to 240px) as a
   rounded square with a white mat and soft shadow, like an ID photo. */
.profile-photo.profile-photo-xl,
.profile-photo-placeholder.profile-photo-xl {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #e3e6ea, 0 0.5rem 1.25rem rgba(46, 38, 32, 0.12);
}

.profile-photo-placeholder.profile-photo-xl {
    display: flex;
    font-size: 5rem;
}

/* Change / Remove photo buttons under the portrait: one 38px height, and the
   icon-only Remove button a matching 38px square (overrides the 32px .btn-icon). */
.photo-action-btn.btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    border-radius: 0.5rem;
}
.photo-action-btn.btn.btn-icon {
    justify-content: center;
    width: 38px;
    font-size: 1rem;
}

/* Labelled values: small muted caption above the value. */
.profile-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.1rem;
}

.profile-value {
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}

.profile-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* One row of tabs; scrolls sideways rather than wrapping when the column is narrow. */
.profile-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Underline tabs: muted labels, the open tab marked by a brand-colored bar. */
.profile-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
    letter-spacing: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.profile-tabs .nav-link i {
    font-size: 1.1rem;
    margin-right: 0 !important;
    opacity: 0.85;
}

.profile-tabs .nav-link:hover {
    color: var(--hris-charcoal);
    border-bottom-color: var(--bs-border-color);
}

.profile-tabs .nav-link.active,
.profile-tabs .nav-link.active:hover {
    color: var(--hris-charcoal);
    font-weight: 600;
    background: transparent;
    border-bottom-color: var(--hris-orange);
}

.profile-tabs .nav-link.active i {
    color: var(--hris-orange);
    opacity: 1;
}

.profile-tabs .tab-count {
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.profile-tabs .nav-link.active .tab-count {
    background: var(--hris-cream);
    color: var(--hris-orange-dark);
}

.profile-facts li {
    font-size: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.4rem 0;
}

.profile-facts li + li {
    border-top: 1px dashed var(--bs-border-color-translucent);
}

.profile-facts li > i {
    color: var(--hris-orange);
    margin-top: 0.15rem;
}

.timeline {
    border-left: 2px solid var(--hris-orange-light);
    margin-left: 0.5rem;
    padding-left: 1.25rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.56rem;
    top: 0.2rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hris-orange);
}

/* ---------- Printable documents (payslips, certificates) ---------- */
@media print {
    .hris-navbar, .hris-sidebar, .no-print { display: none !important; }
    .hris-content { padding: 0; }
    .table-responsive-card { box-shadow: none; padding: 0; margin-bottom: 1rem !important; }
}

/* Printable reports (reports/*.php, reportPrintHeader()): letterhead on paper only;
   cards keep their tint, charts and cards don't split across pages, and long
   tables repeat their heading row on every page. */
.report-print-header { display: none; }
@media print {
    @page { margin: 12mm; }
    .report-print-header {
        display: block;
        border-bottom: 2px solid var(--hris-charcoal);
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }
    .report-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-page .stat-card { box-shadow: none; break-inside: avoid; }
    .report-page .table-responsive-card:has(canvas) { break-inside: avoid; }
    .report-page canvas { max-width: 100% !important; height: auto !important; }
    .report-page .table-responsive { overflow: visible; }
    .report-page thead { display: table-header-group; }
    .report-page tr { break-inside: avoid; }
}

.print-doc {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    padding: 2rem;
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.08);
}

/* Full-width document (e.g. the Employee Ledger's wide tables) — no 720px cap on screen or paper. */
.print-doc.print-doc-wide { max-width: none; }

.print-doc .print-doc-total {
    border-top: 2px solid var(--hris-charcoal);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Quarter of a long bond sheet (8.5 x 13 in -> 4.25 x 6.5 in); the screen view previews the printed size.
   --fit is set by assets/js/payslip-print.js to shrink long payslips onto a single quarter. */
.print-doc.print-quarter {
    width: 4.25in;
    max-width: none;
    height: 6.5in;
    padding: 0.2in;
    overflow: hidden;
    border-radius: 0;
    font-size: 7pt;
    line-height: 1.25;
}
.print-doc.print-quarter .print-doc-inner { zoom: var(--fit, 1); }
.print-doc.print-quarter h5 { font-size: 9pt; }
.print-doc.print-quarter h6 { font-size: 6.5pt; margin-bottom: 0.1rem; }
.print-doc.print-quarter .small, .print-doc.print-quarter small { font-size: 6.5pt; }
.print-doc.print-quarter hr { margin: 0.25rem 0; }
.print-doc.print-quarter .mb-3 { margin-bottom: 0.3rem !important; }
.print-doc.print-quarter .row { --bs-gutter-x: 0.4rem; --bs-gutter-y: 0; }
.print-doc.print-quarter .row.g-4 { --bs-gutter-x: 0.6rem; }
.print-doc.print-quarter .row > .col-md-6,
.print-doc.print-quarter .row > .col-md { flex: 0 0 auto; width: 50%; }
.print-doc.print-quarter .table { font-size: 7pt; }
.print-doc.print-quarter .table-sm > :not(caption) > * > * { padding: 0.05rem 0.1rem; }
.print-doc.print-quarter .ps-4 { padding-left: 0.6rem !important; }
.print-doc.print-quarter .print-doc-total { font-size: 8.5pt; }

/* Batch printing (payroll/print_payslips.php): one payslip per page, or four per long bond sheet. */
.sheet-single .payslip-sheet { display: contents; }
.sheet-single .print-doc { margin-bottom: 1rem; }
.sheet-4up .payslip-sheet {
    display: grid;
    grid-template-columns: repeat(2, 4.25in);
    grid-template-rows: repeat(2, 6.5in);
    width: 8.5in;
    margin: 0 auto 1rem;
    background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(46, 38, 32, 0.08);
}
.sheet-4up .print-doc { margin: 0; box-shadow: none; outline: 1px dashed #bbb; outline-offset: -1px; }

@media print {
    .print-doc { box-shadow: none; }
    .print-doc.print-quarter { margin: 0; height: 6.45in; }
    .sheet-single .print-doc { break-after: page; margin: 0 auto; }
    .sheet-single .payslip-sheet:last-child .print-doc:last-child { break-after: auto; }
    .sheet-4up .payslip-sheet { grid-template-rows: repeat(2, 6.48in); margin: 0; box-shadow: none; break-after: page; }
    .sheet-4up .payslip-sheet:last-child { break-after: auto; }
    .sheet-4up .print-doc.print-quarter { height: 100%; }
}

/* Right-aligned amounts (app-wide rule: money columns use .text-end) — equal-width digits so they line up. */
td.text-end, th.text-end { font-variant-numeric: tabular-nums; }