: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;
}

body {
    background-color: #f4f6f9;
    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);
}

/* Keyboard-focus indicator for plain links (e.g. "Forgot password?") —
   replaces the browser's default focus rectangle with just an underline
   (overriding .text-decoration-none), so focus is still visible for
   keyboard/accessibility navigation without drawing a box around the link. */
a:focus-visible {
    outline: none;
    text-decoration: underline;
}

/* ---------- Login screen ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hris-orange) 0%, var(--hris-orange-dark) 100%);
}

.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: 96px;
    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 ---------- */
.hris-sidebar {
    width: 260px;
    min-height: calc(100vh - 56px);
    background-color: #fff;
    border-right: 1px solid #e3e6ea;
    flex-shrink: 0;
    position: relative;
    transition: width 0.15s ease;
}

.hris-sidebar .nav-link {
    color: #33404d;
    border-radius: 0.375rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    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.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa5b1;
    margin: 0.9rem 0.9rem 0.3rem;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- Sidebar collapse toggle ----------
   A small tab pinned to the sidebar's own right edge, half-overlapping the
   content area — since sidebar.php is one shared include but every page's
   own heading row is duplicated per-file, this is what makes the button
   read as "top-left of the page" on every single page without touching
   each one individually. Position is relative to the sidebar itself, so
   it automatically follows the sidebar's edge whether expanded or collapsed. */
.sidebar-collapse-btn {
    position: absolute;
    top: 1.5rem;
    right: -14px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e6ea;
    border-radius: 50%;
    background: #fff;
    color: #6c757d;
    box-shadow: 0 0.125rem 0.35rem rgba(46, 38, 32, 0.15);
    z-index: 5;
}

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

/* Icon-rail collapse is a desktop-only mode; below lg the sidebar is a drawer (see Responsive). */
@media (min-width: 992px) {
    .hris-sidebar.collapsed {
        width: 64px;
    }

    .hris-sidebar.collapsed .nav-label,
    .hris-sidebar.collapsed .sidebar-section {
        display: 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;
    }
}

.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 */
}

/* 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;
}

/* ---------- Responsive: tablet & phone (< 992px) ----------
   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;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    .hris-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        width: 280px;
        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: 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;
    }

    /* 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: none;
    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.7rem;
    font-weight: 700;
}

.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;
}

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

.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;
}

.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; }
}

.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; }