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

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

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