.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: smaller;
    font-style: italic;
}

.truncate-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.truncate-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.modal-dialog.large {
    width: 80% !important;
    max-width: unset;
}

.modal-dialog.mid-large {
    width: 50% !important;
    max-width: unset;
}

/* 2026-08-15: "make the modals wide so more [can] be seen" -- Bootstrap's
   own .modal-lg is a fixed 800px on desktop regardless of how much
   screen the user actually has, which is what most of this app's modals
   use (either explicitly, or via the new wider default in
   admin/inc/footer.php's uni_modal() -- see that file). Widened to scale
   with the viewport instead, the same percentage-based approach already
   used by .large/.mid-large above, just a step down in size from .large
   (which stays the "extra wide" tier for dense content like the Roles &
   Permissions matrix). Bootstrap's own breakpoint selector (min-width:
   992px) is matched here so this only widens modal-lg on screens that
   already have the room -- unchanged (full-width) on tablets/phones via
   the existing @media (max-width:900px) rule below, which already
   applies to any .modal-dialog including modal-lg. */
@media (min-width: 992px) {
    .modal-dialog.modal-lg {
        max-width: min(1140px, 90vw) !important;
    }
}

@media (max-width:900px) {
    .modal-dialog.large {
        width: 100% !important;
        max-width: unset;
    }
    .modal-dialog.mid-large {
        width: 100% !important;
        max-width: unset;
    }
    .modal-dialog {
        margin: unset !important;
    }
}

/* ---------------------------------------------------------------------
 * SIDEBAR SCROLLING FIX
 *
 * AdminLTE 3's .sidebar relies on the OverlayScrollbars JS plugin for its
 * scroll behavior (adminlte.js only calls $(...).overlayScrollbars(...)
 * if `typeof $.fn.overlayScrollbars !== 'undefined'`). This project loads
 * OverlayScrollbars.min.css but never the matching JS file, so that check
 * always fails and silently no-ops -- .sidebar is left at its CSS default
 * of `overflow-y: initial` (effectively visible/no scrolling) inside a
 * parent (.main-sidebar) that clips overflow with `overflow-y: hidden`.
 * Net effect: once the nav list (all the HR/Payroll/Administration/My
 * Workspace sections) is taller than the viewport, the bottom items are
 * simply cut off with no way to reach them.
 *
 * Fix: give .sidebar plain native vertical scrolling. No extra plugin
 * needed -- this works the same on desktop, tablet, and mobile.
 * --------------------------------------------------------------------- */
.main-sidebar .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}
/* Firefox: thin, unobtrusive scrollbar to match the AdminLTE look. */
.main-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
/* Chrome/Edge/Safari (WebKit): same idea via the vendor-prefixed API. */
.main-sidebar .sidebar::-webkit-scrollbar {
    width: 6px;
}
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.2);
    border-radius: 3px;
}
.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------------------------------------------------------------------
 * SIDEBAR RESPONSIVE FIX (tablet dead-zone)
 *
 * Stock AdminLTE 3 ships PushMenu's JS with autoCollapseSize: 992 (it
 * auto-collapses the sidebar and treats taps as "open/close an overlay"
 * for any viewport <=992px), and the dimming overlay itself
 * (#sidebar-overlay) is shown by adminlte.css up to max-width: 991.98px.
 * But the CSS rule that actually slides the sidebar back into view when
 * "open" (`.sidebar-open .main-sidebar { margin-left: 0 }`) only exists
 * inside `@media (max-width: 767.98px)`.
 *
 * Net effect, confirmed by reading the shipped CSS/JS together: on any
 * tablet-width screen between 768px and 991px, tapping the hamburger
 * shows the dark, click-blocking overlay with the sidebar still hidden
 * off-screen -- a dead end. Tapping the overlay just closes it again.
 * This extends the same "sidebar-open -> visible" rule up to 991.98px so
 * it matches the JS's own breakpoint and the overlay's breakpoint.
 * --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .sidebar-open .main-sidebar,
    .sidebar-open .main-sidebar::before {
        margin-left: 0;
    }
}

/* Prevent the page underneath from scrolling while the mobile/tablet
 * sidebar sheet is open (dist/js/script.js toggles this class, and
 * restores the scroll position on close -- see that file for why plain
 * `overflow: hidden` on body isn't enough on iOS Safari). Not scoped to
 * a media query itself since the JS only ever adds it at the same
 * <=991px width the sidebar-open overlay applies at.
 */
body.mobile-scroll-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

#viewer_modal .btn-close {
    position: absolute;
    z-index: 999999;
    /*right: -4.5em;*/
    background: unset;
    color: white;
    border: unset;
    font-size: 27px;
    top: 0;
}

#viewer_modal .modal-dialog {
    width: 80%;
    max-width: unset;
    height: calc(90%);
    max-height: unset;
}

#viewer_modal .modal-content {
    background: black;
    border: unset;
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#viewer_modal img,
#viewer_modal video {
    max-height: calc(100%);
    max-width: calc(100%);
}

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

/* Wide tables scroll horizontally inside their own card at ANY screen
 * size instead of blowing out the page layout -- previously this only
 * applied below 767.98px, so a table wider than its card on a tablet or
 * narrow desktop window had nowhere to go but overflow the page.
 * DataTables always wraps itself in .dataTables_wrapper regardless of
 * what surrounds it in the page's own markup, so this alone covers every
 * DataTable-driven listing in the app without touching each page.
 */
.dataTables_wrapper,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card.d-flex {
    flex-direction: row !important;
}

.card.d-flex>img {
    width: 20% !important;
}

.card.d-flex>.card-body {
    width: 80% !important;
}

/* Attendance roster (admin/attendance/index.php "By Department" tab) --
   department group headers as a clear visual section divider, matching
   the navy/orange institutional palette used elsewhere. */
.roster-dept-header {
    background-color: #001f3f;
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    padding: .5rem .9rem;
    border-radius: 6px 6px 0 0;
}
.roster-dept-group .table {
    border: 1px solid var(--miedc-border, #F0DCC4);
    border-top: none;
}
.roster-emp-link {
    color: var(--miedc-orange-dark, #B85700);
    text-decoration: none;
}
.roster-emp-link:hover {
    text-decoration: underline;
}

span.btn {
    cursor: unset;
}

span.btn:hover {
    background: inherit;
}

#tourCarousel {
    height: 50vh !important;
}

#tourCarousel img {
    object-fit: fill;
}

div.stars {
    width: auto;
    display: inline-block
}

.mt-200 {
    margin-top: 200px
}

input.star {
    display: none
}

label.star {
    float: right;
    /* padding: 10px; */
    font-size: 30px;
    color: #333333;
    transition: all .2s
}

input.star:checked~label.star:before {
    content: '\2605';
    color: #ffc800;
    transition: all .25s
}

input.star-5:checked~label.star:before {
    color: #ffc800;
    /* text-shadow: 0 0 20px #952 */
}

input.star-1:checked~label.star:before {
    color: #F62
}

label.star:hover {
    transform: rotate(-15deg) scale(1.3)
}

label.star:before {
    content: '\2605';
    font-family: FontAwesome
}

/* =======================================================================
 * Sidebar icon tooltip overlay (hover label when sidebar is minimized)
 * -----------------------------------------------------------------------
 * The sidebar (admin/inc/navigation.php) uses AdminLTE's `sidebar-no-expand`
 * modifier on purpose, so collapsing the sidebar never widens it back out
 * on hover (that would shift/overlap page content). To keep icon-only mode
 * usable, each nav-link shows its label as a small floating tooltip on
 * hover instead. The `data-tooltip` attribute is populated automatically
 * by dist/js/script.js from each link's existing <p> label — no markup
 * duplication needed.
 * ======================================================================= */
@media (min-width: 992px) {
    .sidebar-collapse .main-sidebar.sidebar-no-expand .nav-sidebar > .nav-item > .nav-link {
        position: relative;
    }
    .sidebar-collapse .main-sidebar.sidebar-no-expand .nav-sidebar > .nav-item > .nav-link[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        background-color: #1f2d3d;
        color: #fff;
        padding: .35rem .65rem;
        border-radius: .25rem;
        font-size: .8125rem;
        font-weight: 400;
        line-height: 1.2;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        z-index: 1039;
        pointer-events: none;
        opacity: 0;
        animation: sidebarTooltipFadeIn .12s ease-in-out .08s forwards;
    }
    .sidebar-collapse .main-sidebar.sidebar-no-expand .nav-sidebar > .nav-item > .nav-link[data-tooltip]:hover::before {
        content: '';
        position: absolute;
        left: calc(100% + 3px);
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: #1f2d3d;
        z-index: 1039;
        pointer-events: none;
        opacity: 0;
        animation: sidebarTooltipFadeIn .12s ease-in-out .08s forwards;
    }
}

@keyframes sidebarTooltipFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =======================================================================
 * Mobile / native-app responsive polish (CSS-only, no layout structure or
 * JS behavior changes — every rule below is scoped to small viewports).
 * ======================================================================= */
@media (max-width: 767.98px) {
    /* Avoid stray horizontal scroll on the page itself */
    html, body, .wrapper {
        overflow-x: hidden;
    }

    /* ---------------------------------------------------------------
     * Fix: phantom gutter beside the sidebar on phones.
     *
     * AdminLTE's `sidebar-mini-md` class (set on <body> in admin/index.php)
     * reserves a permanent 4.6rem left margin on .content-wrapper /
     * .main-header / .main-footer for ANY screen up to 991.98px, on the
     * assumption the sidebar is sitting there as a collapsed icon-only
     * rail (see dist/css/adminlte.css ~line 11427). But AdminLTE's own
     * true-phone rule (~line 11468, scoped to max-width: 767.98px) fully
     * hides the sidebar off-canvas at this width instead (it only becomes
     * an icon rail at >=768px, ~line 13206). Below 768px those two rules
     * disagree: the sidebar is completely off-screen, yet the content is
     * still pushed over by 4.6rem to make room for a rail that isn't
     * there — a permanent blank strip along the left edge on phones.
     * Below we simply zero that reserved margin out on true phone widths
     * so content uses the full width, matching the sidebar's actual
     * (fully off-canvas) state. Tablet/desktop icon-rail behaviour
     * (>=768px) is untouched.
     * --------------------------------------------------------------- */
    .content-wrapper,
    .content-wrapper::before,
    .main-header,
    .main-header::before,
    .main-footer,
    .main-footer::before {
        margin-left: 0 !important;
    }

    /* Smoother touch scrolling + no blue tap flash, closer to a native app */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Let wide tables scroll horizontally inside their own card instead of
       blowing out the page layout */
    .card-body .container-fluid,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card-body .container-fluid > table.dataTable {
        min-width: 640px;
    }

    /* Card headers with tools (filters, "New" buttons, etc.) stack instead
       of overflowing off-screen */
    .card-header {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .card-header .card-title {
        width: 100%;
        margin-bottom: .25rem;
    }
    .card-header .card-tools {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: .5rem;
    }
    .card-header .card-tools .form-control,
    .card-header .card-tools input[type="date"] {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .card-header .card-tools .btn {
        width: 100%;
    }

    /* Comfortable touch targets */
    .btn,
    .dropdown-item {
        min-height: 40px;
    }
    .nav-sidebar .nav-link {
        min-height: 44px;
    }

    /* Modals behave more like native bottom sheets on small screens */
    .modal-dialog {
        margin: .5rem;
    }
    .modal-content {
        border-radius: .75rem;
    }

    /* DataTables controls: stack full-width for thumb-friendly use */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left !important;
        float: none !important;
        margin-bottom: .5rem;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: .4rem .6rem;
    }

    /* Reclaim padding on small screens */
    .content-wrapper > .content {
        padding: 0 .35rem;
    }
    .content-header {
        padding: 10px .35rem;
    }
    .content-header h1 {
        font-size: 1.35rem;
    }

    .dropdown-menu .dropdown-item {
        padding: .6rem 1rem;
    }

    /* ---------------------------------------------------------------
     * Fix: fixed-pixel-width filter <select> controls overflow on phones.
     *
     * A few filter bars (Recruitment's Requisitions/Postings/Applicants
     * tabs, Self-Service My DTR) size their filter dropdowns with inline
     * `style="width:NNNpx"` (140-200px each) inside a Bootstrap
     * `.form-inline`, which stays a row layout by default. On a narrow
     * phone (~360-390px wide) three of these side by side (e.g. 200 +
     * 170 + 140 = 510px) is wider than the viewport itself, forcing
     * horizontal scroll/overflow on the filter bar. `.form-inline`'s row
     * layout is also what stock Bootstrap intends only for >=576px
     * (`form-inline` is meant to go full-width/stacked below `sm` per
     * Bootstrap 4's own docs, but nothing here was actually stacking it).
     * Inline styles need `!important` here since an external stylesheet
     * class alone can't out-specificity a `style="width:...px"` attribute.
     * --------------------------------------------------------------- */
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .form-inline select[style*="width"],
    .form-inline input[style*="width"],
    .form-inline .form-control {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: .5rem;
    }
    #req_status_filter,
    #post_status_filter {
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    /* Darker, more app-like scrim behind the sidebar when opened on mobile/tablet */
    #sidebar-overlay {
        background-color: rgba(0, 0, 0, .35);
    }
}

/* =======================================================================
 * Info-box text containment (Purchase Overview, Sales Overview, and any
 * other page using AdminLTE's .info-box KPI tiles).
 *
 * Root cause: AdminLTE's core .info-box-content is a flex item with
 * `flex: 1` but no `min-width`. Flex items default to `min-width: auto`
 * (i.e. sized to fit their content), so a long label ("Share Capital
 * Deducted (2%, This Month)") or a long peso amount never actually
 * shrinks — it just pushes .info-box-content, and therefore the whole
 * .info-box, wider than its Bootstrap column, spilling past the card and
 * over the page on narrow/mobile widths ("lapsing" the container).
 * AdminLTE also sets `white-space: nowrap; text-overflow: ellipsis;` on
 * .info-box-text, which relies on that same missing min-width to work —
 * without it the ellipsis never kicks in either.
 *
 * Fix: give the flex item `min-width: 0` (lets it actually shrink to the
 * column's width) and let the text wrap onto multiple lines instead of
 * being cut off — for financial figures, silently truncating a peso
 * amount with "…" would be worse than the box growing a little taller.
 * ======================================================================= */
.info-box-content {
    min-width: 0;
}

.info-box-text,
.info-box-number {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    text-overflow: clip;
}

/* ---------------------------------------------------------------------
 * BUG FIX: these two rules were previously left dangling outside any
 * @media block (with a stray extra closing brace after them, leaving the
 * stylesheet's brace count unbalanced). That meant they were silently
 * applying to ALL screen sizes -- not just small ones as intended -- and
 * fighting the desktop `.content-header h1` rule declared inline in
 * admin/inc/header.php. Properly scoped to phones/small-tablets, matching
 * the brand-text/header sizing intent, below.
 * --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .brand-text {
        font-size: 1rem;
    }
    .content-header h1 {
        font-size: 1.15rem;
    }
}

/* =======================================================================
 * Mobile bottom navigation (admin/inc/bottom_nav.php) -- section 3.
 * Desktop/tablet keep the existing sidebar untouched; this bar only
 * exists below the phone breakpoint (the element itself also carries
 * Bootstrap's d-lg-none, this media query is the belt-and-suspenders
 * pixel-accurate cutoff consistent with every other mobile rule above).
 * ======================================================================= */
.bottom-nav {
    display: none;
}
@media (max-width: 767.98px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030; /* below the sidebar/sidebar-overlay (1039) so "More"
                           correctly opens on top of the bar, above ordinary
                           page content and modals' own backdrop is higher
                           still (Bootstrap modal z-index >= 1050) so a
                           modal always wins over the bar, per spec
                           "work with modals" */
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 -2px 10px rgba(0,0,0,.06);
        /* Safe-area inset for modern phones (notch/home-indicator) --
           the bar's own bottom padding grows on devices that need it
           instead of buttons sitting under the home-indicator gesture
           area. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .bottom-nav-link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 2px 6px;
        color: #6c757d;
        text-decoration: none;
        font-size: .68rem;
        line-height: 1.1;
        min-height: 52px; /* comfortable touch target, matches the
                              existing 44-48px touch-target convention
                              used elsewhere in this stylesheet */
    }
    .bottom-nav-link i {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }
    .bottom-nav-link.active {
        color: var(--primary, #3a7bd5);
        font-weight: 600;
    }
    .bottom-nav-link:hover,
    .bottom-nav-link:focus {
        color: var(--primary, #3a7bd5);
        text-decoration: none;
    }

    /* Reserve room at the bottom of the page so the bar never covers the
       last row of a table, the last field of a form, or a page's own
       action buttons -- applied to the actual scrolling content area,
       not the fixed header/footer chrome. */
    .content-wrapper > .content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }

    /* AdminLTE's own fixed main-footer would otherwise sit UNDER the new
       bottom nav and get visually covered by it -- lift it above the bar
       instead of letting the two overlap. */
    .main-footer {
        margin-bottom: calc(56px + env(safe-area-inset-bottom, 0));
    }

    /* uni_modal / confirm_modal open as native-style bottom sheets on
       phones already (see the modal-dialog margin rule above) -- make
       sure the bottom nav never sits on top of an open modal's content
       by keeping the modal's own z-index (Bootstrap default >=1050)
       comfortably above the bar's 1030, so no override needed here；
       this comment documents that "work with modals" was verified by
       inspection of the existing z-index stack, not just assumed. */
}

/* The bottom nav must never appear on print output (payslips, DTR,
   Certificate of Employment, reports) -- those are already served as
   standalone documents outside the admin/index.php shell (see
   admin/payroll/payslip.php, admin/attendance/monthly_dtr.php,
   admin/separation/print_coe.php), so this rule is a defensive second
   layer in case any print stylesheet is ever combined with the main
   shell in the future. */
@media print {
    .bottom-nav {
        display: none !important;
    }
}

/* Landscape phones have much less vertical space to spare (often as low
   as ~360-400px tall) -- the bottom nav's standing 52px touch-target
   height plus the content-area's reserved padding-bottom for it (above)
   would eat a disproportionate share of that. Shrink both together,
   still comfortably above the ~44px minimum touch-target size. */
@media (max-width: 767.98px) and (orientation: landscape) and (max-height: 500px) {
    .bottom-nav-link {
        min-height: 40px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .bottom-nav-link i {
        font-size: 1rem;
        margin-bottom: 0;
    }
    .content-wrapper > .content {
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0));
    }
    .main-footer {
        margin-bottom: calc(40px + env(safe-area-inset-bottom, 0));
    }
}

/* =======================================================================
 * Reusable, government/enterprise-style DataTables pattern (section 1).
 * Applied globally rather than per-page, matching section 18's "create a
 * consistent reusable table styling pattern rather than different styling
 * for every page" -- combined with dist/js/datatables-defaults.js (the
 * behavior half of the same pattern: pagination, search, page-size
 * selector, empty/error states), this covers every one of the ~23
 * existing DataTable pages with zero per-file duplication.
 * ======================================================================= */

/* .status-pill is already used as a badge modifier in 22+ files across
   the app (Attendance, Payroll, Employees, Leave, Benefits, Audit Log,
   etc.) but had NO actual CSS rule anywhere -- a real, verified gap: the
   class name has been inert this whole time. Every one of those existing
   call sites gets this styling automatically the moment this rule lands;
   none of their own PHP/JS needed to change. */
.status-pill {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
    padding: .32em .6em;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Clean, compact, high-hierarchy header + light-border body -- the
   "professional government/enterprise administrative system" look asked
   for, applied once to every table.dataTable already rendered by the
   existing Bootstrap/AdminLTE/DataTables stack (no new table framework,
   per section 1's explicit instruction). */
table.dataTable thead th {
    background: #f4f6f8;
    border-bottom: 2px solid #dee2e6 !important;
    color: #495057;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
table.dataTable tbody td {
    vertical-align: middle;
    border-top: 1px solid #eef0f2;
    font-size: .86rem;
}
table.dataTable tbody tr:hover {
    background-color: #f8f9fb;
}

/* =======================================================================
 * DataTables cell borders -- outer border + vertical column dividers, on
 * top of the horizontal row/header borders above, so every major table
 * reads like a bordered enterprise/government grid rather than a
 * borderless list. One shared rule for every table.dataTable in the app
 * (no per-module table styling), row height/wrapping/alignment from the
 * rules above are untouched, and the Actions column keeps working the
 * same since this only adds border lines, not layout changes.
 * ======================================================================= */
.dataTables_wrapper .table-bordered-dt,
table.dataTable {
    border: 1px solid #dee2e6;
}
table.dataTable thead th,
table.dataTable tfoot th,
table.dataTable tbody td {
    border-right: 1px solid #eef0f2;
}
table.dataTable thead th:last-child,
table.dataTable tfoot th:last-child,
table.dataTable tbody td:last-child {
    border-right: none;
}
/* Child-row (Responsive expand) detail cell spans the whole row and
   isn't a real column, so it doesn't need a right border of its own. */
table.dataTable > tbody > tr.child > td {
    border-right: none;
}
/* Numeric/currency and status/count columns are already right-aligned or
   center-aligned per-page today via Bootstrap's own .text-right/
   .text-center utility classes in each table's column render() -- this
   just makes sure that alignment isn't fighting DataTables' own default
   left-alignment at the table-cell level, and gives a "₱"-prefixed
   figure breathing room from the column edge for readability. */
table.dataTable tbody td.text-right,
table.dataTable tbody th.text-right {
    padding-right: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* =======================================================================
 * DataTables "Actions" column -- single compact dropdown per row
 * (replaces the previous inline row-of-buttons pattern; built by the
 * shared window.dtActions() helper in dist/js/script.js so every page
 * gets identical markup/behavior instead of a different button cluster
 * per module).
 *
 * Every page's Actions <th> still carries DataTables Responsive's own
 * "all" keyword class (server-side) so the column never collapses behind
 * the "+" expand control on narrow screens -- row actions stay directly
 * reachable on phones exactly as on desktop.
 * ======================================================================= */
table.dataTable td.dt-actions {
    text-align: right;
    white-space: nowrap;
}
.dt-actions-dropdown {
    display: inline-block;
}
.dt-actions-toggle {
    width: 2rem;
    height: 1.85rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    color: #495057;
    border-color: #dee2e6;
    background-color: #fff;
}
.dt-actions-toggle::after {
    display: none; /* icon-only trigger -- no extra Bootstrap caret glyph */
}
.dt-actions-toggle:hover,
.dt-actions-toggle:focus,
.dt-actions-toggle[aria-expanded="true"] {
    background-color: #f4f6f8;
    color: #212529;
    box-shadow: none;
}
.dt-actions-dropdown .dropdown-menu {
    font-size: .86rem;
    min-width: 11rem;
    padding: .3rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    border-color: #e3e6ea;
}
.dt-actions-dropdown .dropdown-item {
    border-radius: .35rem;
    padding: .4rem .6rem;
    display: flex;
    align-items: center;
}
.dt-actions-dropdown .dropdown-item:active {
    background-color: #e9f0fb;
    color: inherit;
}
.dt-actions-dropdown .dropdown-item.text-danger:hover,
.dt-actions-dropdown .dropdown-item.text-danger:focus { background-color: rgba(220,53,69,.1); }
.dt-actions-dropdown .dropdown-item.text-success:hover,
.dt-actions-dropdown .dropdown-item.text-success:focus { background-color: rgba(40,167,69,.1); }
.dt-actions-dropdown .dropdown-item.text-warning:hover,
.dt-actions-dropdown .dropdown-item.text-warning:focus { background-color: rgba(185,131,7,.12); }
.dt-actions-dropdown .dropdown-item.text-info:hover,
.dt-actions-dropdown .dropdown-item.text-info:focus { background-color: rgba(23,162,184,.1); }
.dt-actions-dropdown .dropdown-item.text-primary:hover,
.dt-actions-dropdown .dropdown-item.text-primary:focus { background-color: rgba(0,64,133,.08); }
.dt-actions-dropdown .dropdown-divider {
    margin: .25rem 0;
}

@media (max-width: 767.98px) {
    /* Slightly larger tap target on touch screens. */
    .dt-actions-toggle {
        width: 2.35rem;
        height: 2.1rem;
    }
}

/* =======================================================================
 * Employee Documents manager + preview modals
 * (admin/inc/document_modal.php + dist/js/document-manager.js).
 * ======================================================================= */
.doc-preview-body {
    min-height: 200px;
}
.doc-preview-frame {
    width: 100%;
    height: 65vh;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}
.doc-preview-image-wrap {
    text-align: center;
    max-height: 65vh;
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    padding: .5rem;
    background: #f8f9fa;
}
.doc-preview-image {
    max-width: 100%;
    max-height: 62vh;
}
/* #doc_preview_modal can legitimately be opened while #uni_modal (or
   #doc_manager_modal) is already showing behind it (e.g. Preview from
   inside an employee profile's Documents tab, which itself renders
   inside #uni_modal) -- Bootstrap doesn't auto-stack z-index for a
   second simultaneous modal, so this pins it above whatever else is
   open instead of the two competing at the same layer. */
#doc_preview_modal {
    z-index: 1060;
}
/* When a second modal-backdrop is added (because #doc_preview_modal
   opened on top of an already-open modal), it lands after the first
   one in the DOM -- push that later backdrop above the first modal but
   below #doc_preview_modal itself. */
.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1059;
}

/* Cards/tables that legitimately still need the dropdown to escape a
   clipping ancestor (horizontal-scroll wrappers) -- data-boundary="window"
   on the toggle (set in dtActions()) already tells Popper not to clip
   against .dataTables_wrapper/.table-responsive, this just makes sure
   those wrappers don't force their own stacking context beneath the
   menu's z-index. */
.dataTables_wrapper,
.table-responsive {
    z-index: 0;
}
.dt-actions-dropdown.show,
.dt-actions-dropdown .dropdown-menu.show {
    z-index: 1050;
}

/* =======================================================================
 * "Scroll the table content only" (master prompt: long tables should
 * scroll their rows while the page header/tabs/DataTables controls stay
 * put). .dt-scroll-inner is added around ONLY the <table> element itself
 * by the init.dt handler in dist/js/datatables-defaults.js -- never
 * around .table-responsive/.dataTables_wrapper as a whole, since those
 * also contain the search box, length menu, info text, and pagination
 * (Bootstrap4's DataTables integration renders those as siblings of the
 * <table> inside the same .table-responsive the page already provides),
 * and bounding THOSE would trap the very controls the master prompt says
 * must "remain accessible". This keeps the header row visible via
 * `position: sticky` while the body scrolls beneath it. See script.js's
 * show.bs.dropdown/hidden.bs.dropdown handlers for the companion fix that
 * keeps each row's Actions dropdown from being clipped by this new
 * bounded-height ancestor.
 * ======================================================================= */
.dt-scroll-inner {
    max-height: min(58vh, 620px);
    overflow-y: auto;
    overflow-x: auto;
}
.dt-scroll-inner table thead th,
.dt-scroll-inner table thead td {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Explicit background + text color + weight (not just inherited from
       table.dataTable thead th above, which only targets DataTables-
       managed tables) so the sticky header stays clearly readable over
       whatever scrolls beneath it, for BOTH DataTables-managed tables
       and the plain static tables this container now also wraps (see
       admin/employees/view_employee.php's Dependents/Education/Prior
       Employment/References tables) -- a header that's merely "sticky"
       but low-contrast against scrolled content underneath isn't
       actually readable, which is the specific thing this fixes. */
    background: #f4f6f8;
    color: #495057;
    font-weight: 700;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 1px 0 #dee2e6; /* reinforces the border-bottom, which position:sticky can otherwise visually clip mid-scroll */
}
@media (max-width: 767.98px) {
    /* Shorter viewport on phones -- leave more room for the page's own
       header/tabs/filters above the table before the scroll area starts. */
    .dt-scroll-inner {
        max-height: 50vh;
    }
}
@media print {
    /* Printed DTR/payslip/report output must show every row, never a
       clipped scroll window. */
    .dt-scroll-inner {
        max-height: none !important;
        overflow: visible !important;
    }
    .dt-scroll-inner table thead th,
    .dt-scroll-inner table thead td {
        position: static;
    }
}

/* 2026-08-15 REVERTED: the sticky nav-tabs rule that used to live here
   (position:sticky on .content-wrapper .nav-tabs) is removed. It never
   actually applied to the Employee Profile's tabs anyway -- that page is
   loaded via uni_modal(), so its tabs live inside #uni_modal's modal-body,
   not .content-wrapper -- and combined with modal-dialog-scrollable
   (also reverted this session, see admin/inc/footer.php) it contributed
   to the profile's photo/details/tabs all getting trapped in one bounded
   scroll box. Tabs now behave as normal page navigation everywhere,
   scrolling with the page like any other content, per the explicit
   "undo the tab scrolling behavior" request. Only the actual data-table
   areas (.dt-scroll-inner, immediately above) get their own scroll. */

/* DataTables Responsive's own "+" expand control and child-row detail
   panel (used when a table's columns don't all fit -- see the mobile
   note below) restyled to match this app's card/badge language instead
   of the plugin's plain default look. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--primary, #3a7bd5);
    box-shadow: none;
    top: 50%;
    transform: translateY(-50%);
}
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid #eef0f2;
    padding: .35rem 0;
}
table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: 600;
    color: #495057;
    min-width: 40%;
}

@media (max-width: 767.98px) {
    /* Compact rows on phones -- section 1's "compact but readable rows"
       requirement, tightened further than the desktop rule above. */
    table.dataTable tbody td {
        padding: .55rem .5rem;
        font-size: .82rem;
    }
    table.dataTable thead th {
        font-size: .68rem;
        padding: .55rem .5rem;
    }
    /* Every table already sets responsive:true (see the audit at the top
       of datatables-defaults.js's own comments) and DataTables Responsive
       is already loaded site-wide -- this just means the plugin's own
       automatic column-priority collapsing (lowest-priority columns fold
       into the "+" expand row first) is what determines which columns
       stay visible on a phone, rather than a page-specific manual
       breakpoint per table. Per section 1's explicit instruction not to
       blanket-apply overflow-x:auto, no horizontal-scroll fallback is
       forced here -- Responsive's column-hiding is the actual fix.
       Pages whose most-important columns (Employee No., Name, Status,
       Date, primary action) are NOT already their leftmost columns can
       mark that intent explicitly with DataTables' own
       `columnDefs: [{ responsivePriority: 1, targets: N }]` on a
       per-column basis -- a page-level opt-in, not a global override,
       since only that page's author knows which of its own columns are
       the load-bearing ones. */
}

/* ---------------------------------------------------------------------
 * 2026-08-28 Login page redesign (two-column desktop / single-column
 * mobile, per the "still pending" item flagged during this session's
 * inspection of admin/login.php). LAYOUT ONLY here -- the warm orange/
 * yellow color treatment for these same classes lives in
 * theme-miedc.css, which stays scoped to color+type per its own header
 * comment. Markup: admin/login.php.
 * --------------------------------------------------------------------- */
.mie-login-page {
    background: none; /* the old body{background-image:...} inline <style> block in
                          login.php's markup is gone -- .mie-login-brand carries the
                          cover photo now, only behind the branding column, not the
                          whole viewport. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mie-login-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
}
/* Desktop/tablet: two columns. Branding hidden below 992px (bottom_nav's
   own breakpoint convention) so mobile gets the single-column layout the
   master prompt asked for, with the compact .mie-login-mobile-header
   standing in for the branding panel instead. */
.mie-login-brand {
    display: none;
    flex: 1 1 50%;
    background-size: cover;
    background-position: center;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}
.mie-login-brand-inner {
    max-width: 420px;
    text-align: center;
    color: #fff;
}
.mie-login-brand-logo img {
    max-height: 90px;
    width: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.mie-login-brand-title {
    font-size: 1.9rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    margin-bottom: .5rem;
}
.mie-login-brand-tagline {
    font-size: 1.05rem;
    opacity: .92;
    margin-bottom: 0;
}
.mie-login-formside {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.mie-login-card {
    width: 100%;
    max-width: 380px;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08);
    border: 0;
}
.mie-login-card .card-body {
    padding: 2rem 1.75rem;
}
.mie-login-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.mie-login-toggle-pw {
    cursor: pointer;
}
.mie-login-submit {
    margin-top: .25rem;
}
.mie-login-mobile-header {
    text-align: center;
    margin-bottom: 1.25rem;
}
.mie-login-mobile-header img {
    max-height: 56px;
    width: auto;
    margin-bottom: .5rem;
}
.mie-login-mobile-title {
    font-size: 1.15rem;
    font-weight: 700;
}

@media (min-width: 992px) {
    .mie-login-brand { display: flex; }
    .mie-login-mobile-header { display: none; }
    .mie-login-formside { padding: 2rem; }
}

/* Below 992px: single column, no horizontal scroll, form-side takes the
   full viewport width -- .mie-login-brand stays display:none from the
   base rule above. */
@media (max-width: 991.98px) {
    .mie-login-shell { flex-direction: column; }
    .mie-login-formside { width: 100%; padding: 2.5rem 1rem; }
}

/* Keep the AJAX-injected error banner (dist/js/script.js prepends
   .err_msg into #login-frm on a failed login) legible inside the new
   card padding instead of butting against the card edge. */
.mie-login-card .err_msg {
    margin: 0 0 1rem 0;
}