/* ==========================================================================
   Uhaus Minimalist Global Design System for Uhaus HRM
   Applies across ALL Inner Blades, Modules, Forms, Tables, and Buttons
   Excludes the authentication login page (.uh-login-page)
   ========================================================================== */

:root {
    --wd-bg: #F8FAFC;
    --wd-surface: #FFFFFF;
    --wd-border: #E2E8F0;
    --wd-border-light: #F1F5F9;
    --wd-border-hover: #CBD5E1;
    --wd-navy: #0F172A;
    --wd-navy-subtle: #1E293B;
    --wd-text: #0F172A;
    --wd-text-secondary: #475569;
    --wd-text-muted: #64748B;
    --wd-blue: #0284C7;
    --wd-blue-soft: #F0F9FF;
    --wd-emerald: #059669;
    --wd-emerald-soft: #ECFDF5;
    --wd-amber: #D97706;
    --wd-amber-soft: #FFFBEB;
    --wd-red: #DC2626;
    --wd-red-soft: #FEF2F2;
    --wd-radius: 8px;
    --wd-radius-sm: 6px;
    --wd-radius-lg: 12px;
}

/* Base Body & Reset (Excluding login page) */
body:not(.login-body) {
    background-color: var(--wd-bg) !important;
    color: var(--wd-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    -webkit-font-smoothing: antialiased;
}

body:not(:has(.uh-login-page)) h1, 
body:not(:has(.uh-login-page)) h2, 
body:not(:has(.uh-login-page)) h3, 
body:not(:has(.uh-login-page)) h4, 
body:not(:has(.uh-login-page)) h5, 
body:not(:has(.uh-login-page)) h6 {
    color: var(--wd-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

body:not(:has(.uh-login-page)) h1 { font-size: 17px !important; }
body:not(:has(.uh-login-page)) h2 { font-size: 15px !important; }
body:not(:has(.uh-login-page)) h3 { font-size: 13.5px !important; }
body:not(:has(.uh-login-page)) h4 { font-size: 12.5px !important; }
body:not(:has(.uh-login-page)) h5, 
body:not(:has(.uh-login-page)) h6 { font-size: 12px !important; }

/* Top Navigation Bar */
.main-nav--bg {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--wd-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    padding: 6px 18px !important;
}

.main-title, .main-top-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--wd-navy) !important;
    margin: 0 !important;
}

.main-title span, .main-top-title span {
    color: var(--wd-navy) !important;
}

/* Cards & Container Surfaces (Inner modules) */
body:not(:has(.uh-login-page)) .card, 
body:not(:has(.uh-login-page)) .white-block, 
body:not(:has(.uh-login-page)) .stat-card, 
body:not(:has(.uh-login-page)) .chart-card, 
body:not(:has(.uh-login-page)) .users-table-card, 
body:not(:has(.uh-login-page)) .adm-card, 
body:not(:has(.uh-login-page)) .box {
    background: var(--wd-surface) !important;
    border: 1px solid var(--wd-border) !important;
    border-radius: var(--wd-radius) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
}

.card-header, .stat-card__title, .white-block__title, .box-header {
    background: transparent;
    border-bottom: 1px solid var(--wd-border-light);
    font-size: 13px;
    font-weight: 700;
    color: var(--wd-navy);
}

hr {
    border: 0 !important;
    border-top: 1px solid var(--wd-border-light) !important;
    margin: 14px 0 !important;
    opacity: 1 !important;
}

/* Inner Action Buttons (Excluding login page) */
body:not(:has(.uh-login-page)) .btn:not(.uh-btn-submit):not(.uh-pwd-toggle), 
body:not(:has(.uh-login-page)) button.btn:not(.uh-btn-submit):not(.uh-pwd-toggle), 
body:not(:has(.uh-login-page)) a.btn, 
body:not(:has(.uh-login-page)) input[type="submit"].btn {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    height: auto !important;
    min-height: 30px !important;
    border-radius: var(--wd-radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Refined Dark Slate Buttons */
.btn-primary:not(.uh-btn-submit), .btn-dark:not(.uh-btn-submit), #payroll_excel_export, .adm-hbtn.adm-add {
    background-color: var(--wd-navy) !important;
    border: 1px solid var(--wd-navy) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover:not(.uh-btn-submit), .btn-dark:hover:not(.uh-btn-submit) {
    background-color: var(--wd-navy-subtle) !important;
    border-color: var(--wd-navy-subtle) !important;
    color: #FFFFFF !important;
}

/* Subtle Secondary / Outline / Reset Buttons */
.btn-secondary, .btn-outline-secondary, .btn-light, #clearFilters, .adm-hbtn.adm-view {
    background-color: #FFFFFF !important;
    border: 1px solid var(--wd-border) !important;
    color: var(--wd-text-secondary) !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, #clearFilters:hover {
    background-color: #F1F5F9 !important;
    border-color: var(--wd-border-hover) !important;
    color: var(--wd-text) !important;
}

/* Refined Action State Buttons */
.btn-warning, #generate_payroll {
    background-color: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    color: #92400E !important;
}
.btn-warning:hover, #generate_payroll:hover {
    background-color: #FDE68A !important;
    color: #78350F !important;
}

.btn-success, #submit_payroll {
    background-color: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #065F46 !important;
}
.btn-success:hover, #submit_payroll:hover {
    background-color: #A7F3D0 !important;
    color: #064E3B !important;
}

.btn-danger, #revoke_payroll {
    background-color: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #991B1B !important;
}
.btn-danger:hover, #revoke_payroll:hover {
    background-color: #FECACA !important;
    color: #7F1D1D !important;
}

.btn-info, #hold_payroll {
    background-color: #F0F9FF !important;
    border: 1px solid #BAE6FD !important;
    color: #075985 !important;
}
.btn-info:hover, #hold_payroll:hover {
    background-color: #BAE6FD !important;
    color: #0369A1 !important;
}

#submit_payslip {
    background-color: #0F172A !important;
    border: 1px solid #0F172A !important;
    color: #FFFFFF !important;
}

/* Punch In / Out Action Buttons */
.btn-punch-in,
.btn-punch-in *,
.btn-punch-in span,
.btn-punch-in i,
button.btn-punch-in,
a.btn-punch-in {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.btn-punch-out,
.btn-punch-out *,
.btn-punch-out span,
.btn-punch-out i,
button.btn-punch-out,
a.btn-punch-out {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* Form Controls & Dropdown Filters (Excluding login page inputs) */
body:not(:has(.uh-login-page)) .form-control, 
body:not(:has(.uh-login-page)) .form-select, 
body:not(:has(.uh-login-page)) .form-control-sm, 
body:not(:has(.uh-login-page)) .form-select-sm, 
body:not(:has(.uh-login-page)) input[type="text"]:not(.uh-input-field), 
body:not(:has(.uh-login-page)) input[type="email"]:not(.uh-input-field), 
body:not(:has(.uh-login-page)) input[type="password"]:not(.uh-input-field), 
body:not(:has(.uh-login-page)) input[type="date"], 
body:not(:has(.uh-login-page)) input[type="number"], 
body:not(:has(.uh-login-page)) select, 
body:not(:has(.uh-login-page)) textarea {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--wd-border) !important;
    border-radius: var(--wd-radius-sm) !important;
    background-color: #FFFFFF !important;
    color: var(--wd-text) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(:has(.uh-login-page)) .form-control:focus, 
body:not(:has(.uh-login-page)) .form-select:focus, 
body:not(:has(.uh-login-page)) input:focus:not(.uh-input-field), 
body:not(:has(.uh-login-page)) select:focus, 
body:not(:has(.uh-login-page)) textarea:focus {
    border-color: var(--wd-navy) !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
    outline: none !important;
}

body:not(:has(.uh-login-page)) .form-label, 
body:not(:has(.uh-login-page)) label:not(.uh-input-label):not(.uh-check-label) {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--wd-text-secondary) !important;
    margin-bottom: 3px !important;
}

/* Navigation Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--wd-border) !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
}

.nav-tabs .nav-link, .nav-tabs .nav-item .nav-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wd-text-secondary) !important;
    padding: 8px 14px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

.nav-tabs .nav-link:hover {
    color: var(--wd-navy) !important;
    border-bottom-color: var(--wd-border-hover) !important;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item .nav-link.active {
    color: var(--wd-navy) !important;
    border-bottom: 2px solid var(--wd-navy) !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* Data Tables */
table, .table, .dataTable, .table-responsive table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 12px !important;
}

table th, .table th, .dataTable th, thead th {
    background: #F8FAFC !important;
    color: var(--wd-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--wd-border) !important;
    border-top: none !important;
}

table td, .table td, .dataTable td, tbody td {
    padding: 9px 12px !important;
    color: var(--wd-text) !important;
    border-bottom: 1px solid var(--wd-border-light) !important;
    vertical-align: middle !important;
}

table tbody tr:hover, .table tbody tr:hover {
    background-color: #F8FAFC !important;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: transparent !important;
}

/* ==========================================================================
   DataTables Controls & Pagination
   ========================================================================== */
.dataTables_wrapper {
    position: relative;
    clear: both;
    width: 100% !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dataTables_wrapper .dataTables_length {
    float: left !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
}

/* Length Select Box - Never cut off text or arrow */
.dataTables_wrapper .dataTables_length select {
    min-width: 68px !important;
    width: auto !important;
    height: 34px !important;
    padding: 4px 24px 4px 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px 8px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Search Input Box */
.dataTables_wrapper .dataTables_filter input {
    height: 34px !important;
    min-width: 170px !important;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    margin-left: 0 !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Bottom Controls: Info & Pagination */
.dataTables_wrapper .dataTables_info {
    float: left !important;
    padding-top: 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748B !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px !important;
    height: 32px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #334155 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0F172A !important;
    border-color: #0F172A !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #94A3B8 !important;
}

/* Badges & Status Pills */
.badge, .adm-pill, .badge-success, .badge-primary, .badge-danger, .badge-warning {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 3px 7px !important;
    border-radius: 4px !important;
    border: none !important;
}

.badge-success, .badge.bg-success, .adm-present {
    background-color: var(--wd-emerald-soft) !important;
    color: var(--wd-emerald) !important;
}

.badge-danger, .badge.bg-danger, .adm-absent {
    background-color: var(--wd-red-soft) !important;
    color: var(--wd-red) !important;
}

.badge-warning, .badge.bg-warning, .adm-leave {
    background-color: var(--wd-amber-soft) !important;
    color: var(--wd-amber) !important;
}

.badge-info, .badge.bg-info, .badge.bg-primary {
    background-color: var(--wd-blue-soft) !important;
    color: var(--wd-blue) !important;
}

/* Modals */
.modal-content {
    background: #FFFFFF !important;
    border: 1px solid var(--wd-border) !important;
    border-radius: var(--wd-radius-lg) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important;
}

.modal-header {
    border-bottom: 1px solid var(--wd-border-light) !important;
    padding: 12px 18px !important;
}

.modal-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.modal-footer {
    border-top: 1px solid var(--wd-border-light) !important;
    padding: 10px 18px !important;
}

/* ==========================================================================
   Mobile & WebView App Optimizations
   ========================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.main-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px !important;
}

@media (max-width: 768px) {
    .main-nav--bg {
        padding: 8px 12px !important;
    }

    .main-content, .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 10px !important;
    }

    body:not(:has(.uh-login-page)) .card, 
    body:not(:has(.uh-login-page)) .white-block, 
    body:not(:has(.uh-login-page)) .stat-card, 
    body:not(:has(.uh-login-page)) .adm-card, 
    body:not(:has(.uh-login-page)) .box {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
        border-radius: var(--wd-radius-sm) !important;
    }

    .nav-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 6px 10px !important;
        font-size: 11.5px !important;
    }

    table th, .table th, .dataTable th, thead th {
        padding: 7px 8px !important;
        font-size: 10px !important;
    }

    table td, .table td, .dataTable td, tbody td {
        padding: 7px 8px !important;
        font-size: 11.5px !important;
    }
}

/* Layout rules consolidated in bottom section */

/* ==========================================================================
   Sidebar Menu & Compact Submenu Design
   ========================================================================== */
.sidebar-body-menu > li > a {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    color: #94A3B8 !important;
    line-height: 1.35 !important;
    transition: all 0.15s ease !important;
}

.sidebar-body-menu > li > a span:not(.category__btn):not(.sr-only) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.sidebar-body-menu > li > a .category__btn {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    color: #64748B !important;
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}

.sidebar-body-menu > li > a .category__btn.rotated {
    transform: rotate(180deg) !important;
    color: #38BDF8 !important;
}

.cat-sub-menu {
    list-style: none !important;
    padding: 3px 0 3px 10px !important;
    margin: 2px 10px 4px 18px !important;
    border-left: 1.5px solid #334155 !important;
}

.cat-sub-menu.visible {
    display: block !important;
    height: auto !important;
}

.cat-sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 4.5px 8px !important;
    font-size: 11.5px !important;
    gap: 8px !important;
    border-radius: 6px !important;
    margin: 1px 0 !important;
    color: #94A3B8 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.15s ease !important;
}

.cat-sub-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
}

.cat-sub-menu > li > a.active {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------
   Relaxed Density Spacing (Toggled via header button)
   ---------------------------------------------------- */
.sidebar-relaxed .sidebar-body {
    padding: 14px 0 32px 0 !important;
}

.sidebar-relaxed .sidebar-body-menu > li {
    margin: 3px 0 !important;
}

.sidebar-relaxed .sidebar-body-menu > li > a {
    padding: 9.5px 14px !important;
    font-size: 13.5px !important;
    margin: 2px 8px !important;
    line-height: 1.42 !important;
    gap: 11px !important;
}

.sidebar-relaxed .sidebar-nav-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 15px !important;
}

.sidebar-relaxed .cat-sub-menu {
    padding: 5px 0 6px 12px !important;
    margin: 4px 10px 6px 18px !important;
    border-left: 2px solid #334155 !important;
}

.sidebar-relaxed .cat-sub-menu > li {
    margin: 2.5px 0 !important;
}

.sidebar-relaxed .cat-sub-menu > li > a {
    padding: 6.5px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    gap: 9px !important;
}

.sidebar-relaxed .sidebar-sub-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 12px !important;
}

.sidebar-relaxed .system-menu__title {
    padding: 16px 14px 6px 14px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

/* ----------------------------------------------------
   Full Height Layout & Natural Window Scrolling
   ---------------------------------------------------- */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.page-flex {
    display: flex !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: #F8FAFC !important;
    position: relative !important;
}

/* ==========================================================================
   Desktop Sidebar: Fixed/Locked on Left, Content Scrolls on Right
   ========================================================================== */
@media (min-width: 992px) {
    .sidebar,
    .sidebar.hidden {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        background: #0F172A !important;
        border-right: 1px solid #1E293B !important;
        display: block !important;
        z-index: 1020 !important;
    }

    .sidebar::-webkit-scrollbar,
    .sidebar.hidden::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    .sidebar.hidden .sidebar-body-menu span {
        display: inline !important;
    }
    .sidebar.hidden .sidebar-head .logo-wrapper {
        display: flex !important;
    }

    .main-wrapper {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        background: #F8FAFC !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }
}

.sidebar-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
}

.main-app-content {
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------
   Global Clean Footer: Left & Right Balanced
   ---------------------------------------------------- */
.footer {
    margin-top: auto !important;
    width: 100% !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
    padding: 12px 24px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.footer .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Mobile Layout: No Sidebar Displacement, Zero Overflow, Locked Bottom Nav
   ========================================================================== */
@media (max-width: 991.98px) {
    .page-flex {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .main-app-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-bottom: 85px !important;
    }

    /* Prevent header from overflowing on mobile */
    .main-nav,
    .main-nav--bg {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    .main-nav .container-fluid {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Drawer Sidebar */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -290px !important;
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1050 !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), left 0.28s ease !important;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.5) !important;
    }

    .sidebar.visible,
    .sidebar.show,
    body.sidebar-open .sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
    }

    /* Backdrop overlay when sidebar is open on mobile */
    .layer {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 1040;
        transition: opacity 0.2s ease;
    }

    .layer.active,
    body.sidebar-open .layer {
        display: block !important;
    }

    /* Employer and Employee Dashboard Shells - Zero Overflow */
    .emp-shell,
    .adm-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px 85px 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 auto !important;
    }

    /* Card Containers & Grids strictly fitting screen width */
    .emp-shift-card,
    .adm-exec-card,
    .emp-qa-grid-4,
    .adm-qa-grid-4,
    .emp-widgets-grid,
    .adm-modules-grid,
    .emp-card,
    .adm-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .emp-qa-grid-4,
    .adm-qa-grid-4 {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .emp-qa-tile,
    .adm-qa-tile {
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px 1px !important;
        box-sizing: border-box !important;
    }

    .emp-qa-icon-box,
    .adm-qa-icon-box {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }

    .emp-qa-label,
    .adm-qa-label {
        font-size: 8.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        line-height: 1.1 !important;
        padding: 0 1px !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Bottom mobile navigation menu locked firmly to viewport bottom */
    .mob-menu {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #FFFFFF !important;
        border-top: 1px solid #E2E8F0 !important;
        z-index: 999999 !important;
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.08) !important;
        padding: 5px 0 calc(6px + env(safe-area-inset-bottom, 0px)) 0 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        will-change: transform !important;
        pointer-events: auto !important;
    }

    .mob-menu a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #64748B !important;
        text-decoration: none !important;
        text-align: center !important;
        gap: 3px !important;
        min-height: 42px !important;
        touch-action: manipulation !important;
    }

    .mob-menu a i {
        font-size: 16px !important;
        color: #64748B !important;
    }

    .mob-menu a.active-tab {
        color: #2563EB !important;
    }

    .mob-menu a.active-tab i {
        color: #2563EB !important;
    }

    .footer {
        padding-bottom: 85px !important;
    }
}

/* Fluid responsive table handling */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 8px !important;
    }

    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: visible !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 10px !important;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 200px !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding-top: 8px !important;
    }

    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
        white-space: nowrap !important;
        padding: 9px 12px !important;
        font-size: 12px !important;
    }

    table:not(.ui-datepicker-calendar) {
        max-width: 100% !important;
    }

    /* Responsive grid wrapping for Quick Actions and stats */
    .wd-qa-grid,
    .emp-qa-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .emp-3col-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stats-row,
    .stat-row {
        flex-direction: column !important;
    }

    /* Responsive adjustments for filters and headers */
    .filter-bar,
    .uh-filter-shell,
    .new-top-h {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .new-top-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* Responsive nav tabs */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 1px solid #E2E8F0 !important;
        padding-bottom: 2px !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Modals on Mobile & AppView */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
}

@media (max-width: 575.98px) {
    .wd-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .wd-qa-grid,
    .emp-qa-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .emp-3col-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .footer .container-fluid {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .footer .container-fluid div {
        text-align: center !important;
    }

    /* Input and Select responsive scaling */
    .form-control, .form-select, input, select {
        font-size: 13px !important;
    }
}