.hidden {
    display: none !important;
}

.menu-fav {
    margin-inline-start: 0.75rem;
}

/* Role Permission Layout Styles - Maximum Specificity to Override Core CSS */

/* Critical styles - loaded first to prevent FOUC */
.permission-checkboxes {
    visibility: hidden;
}

.permission-checkboxes.loaded {
    visibility: visible;
}

/* Base Table Styling */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table th,
.table td {
    vertical-align: middle;
    padding: 12px 8px;
    word-wrap: break-word;
    word-break: break-word;
}

.table-bordered th,
.table-bordered td {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* Permission Group Name Column */
.permission-group-name {
    font-weight: 600;
    color: var(--bs-heading-color);
    min-width: 120px;
    width: 20%;
    white-space: normal;
    word-wrap: break-word;
    vertical-align: top;
}

/* Permission Checkboxes Container */
.permission-cell {
    width: 80%;
    vertical-align: top;
}

.permission-checkboxes {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Base Form Check Styling - Maximum Specificity for Override */
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check,
.card .table-responsive .permission-checkboxes .form-check {
    display: flex !important;
    align-items: center !important;
    margin: 2px !important;
    padding: 8px 6px !important;
    border: var(--bs-border-width) solid var(--bs-gray-200) !important;
    border-radius: var(--bs-border-radius) !important;
    background-color: var(--bs-light-bg-subtle) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-input,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-input,
.card .table-responsive .permission-checkboxes .form-check .form-check-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-label,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-label,
.card .table-responsive .permission-checkboxes .form-check .form-check-label {
    flex: 1 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    word-break: normal !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Desktop: 5 permissions per row - Equal width table cells - Maximum Specificity */
@media (min-width: 769px) {

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes,
    .card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes,
    .card .table-responsive .permission-checkboxes {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
    }

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check,
    .card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check,
    .card .table-responsive .permission-checkboxes .form-check {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 2px !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobile: 1 permission per row - Single column grid - Maximum Specificity */
@media (max-width: 768px) {

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table tbody tr td.permission-group-name,
    .card .card-header .table-responsive .table tbody tr td.permission-group-name,
    .card .table-responsive .permission-group-name {
        width: 30% !important;
        font-size: 0.85rem !important;
    }

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table tbody tr td.permission-cell,
    .card .card-header .table-responsive .table tbody tr td.permission-cell,
    .card .table-responsive .permission-cell {
        width: 70% !important;
    }

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes,
    .card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes,
    .card .table-responsive .permission-checkboxes {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        width: 100% !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
    }

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check,
    .card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check,
    .card .table-responsive .permission-checkboxes .form-check {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-input,
    .card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-input,
    .card .table-responsive .permission-checkboxes .form-check .form-check-input {
        width: 18px !important;
        height: 18px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-label,
    .card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check .form-check-label,
    .card .table-responsive .permission-checkboxes .form-check .form-check-label {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* Checkbox State Styling - Using CSS Variables for Theme Support */

/* Checked State - Success Background */
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check input[type="checkbox"]:checked+.form-check-label,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check input[type="checkbox"]:checked+.form-check-label,
.card .table-responsive .permission-checkboxes .form-check input[type="checkbox"]:checked+.form-check-label,
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check:has(input[type="checkbox"]:checked),
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check:has(input[type="checkbox"]:checked),
.card .table-responsive .permission-checkboxes .form-check:has(input[type="checkbox"]:checked) {
    background-color: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success-border-subtle) !important;
    color: var(--bs-success) !important;
    font-weight: 500 !important;
}

/* Unchecked State - No Background */
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check input[type="checkbox"]:not(:checked)+.form-check-label,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check input[type="checkbox"]:not(:checked)+.form-check-label,
.card .table-responsive .permission-checkboxes .form-check input[type="checkbox"]:not(:checked)+.form-check-label,
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check:has(input[type="checkbox"]:not(:checked)),
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check:has(input[type="checkbox"]:not(:checked)),
.card .table-responsive .permission-checkboxes .form-check:has(input[type="checkbox"]:not(:checked)) {
    background-color: transparent !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-body-color) !important;
    font-weight: normal !important;
}

/* Hover Effects - Using Theme Variables */
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check:hover,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check:hover,
.card .table-responsive .permission-checkboxes .form-check:hover {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-gray-300) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--bs-box-shadow-sm) !important;
    transition: all 0.2s ease !important;
}

/* Hover Effects for Checked Items */
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check:has(input[type="checkbox"]:checked):hover,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check:has(input[type="checkbox"]:checked):hover,
.card .table-responsive .permission-checkboxes .form-check:has(input[type="checkbox"]:checked):hover {
    background-color: var(--bs-success-border-subtle) !important;
    border-color: var(--bs-success) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--bs-box-shadow) !important;
    color: var(--bs-success-text-emphasis) !important;
}

/* Fallback for browsers that don't support :has() - Using CSS Variables */
body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check.checked,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check.checked,
.card .table-responsive .permission-checkboxes .form-check.checked {
    background-color: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success-border-subtle) !important;
    color: var(--bs-success) !important;
    font-weight: 500 !important;
}

body .row .col-12 .card .card-header form .col-12 .table-responsive .table .table tbody tr td.permission-cell .permission-checkboxes .form-check.checked:hover,
.card .card-header .table-responsive .table tbody tr td.permission-cell .permission-checkboxes .form-check.checked:hover,
.card .table-responsive .permission-checkboxes .form-check.checked:hover {
    background-color: var(--bs-success-border-subtle) !important;
    border-color: var(--bs-success) !important;
    color: var(--bs-success-text-emphasis) !important;
}

/* System Role Readonly Styling */
.form-control[readonly] {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
    /*  cursor: not-allowed !important; */
}

.text-muted {
    color: var(--bs-secondary-color) !important;
    font-size: 0.8125rem !important;
}

.flatpickr-calendar {
    z-index: 2500 !important;
}

.flatpickr-input {
    z-index: 2500 !important;
}

.w-180 {
    width: 180px;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUS TABS — Pill-style with strong visual difference
   ═══════════════════════════════════════════════════════════════════ */
#statusTabs.nav-tabs {
    border-bottom: 0 !important;
    gap: 0.375rem;
    padding: 0;
    display: inline-flex;
    background-color: var(--erp-bg-muted, #e8e6f0);
    border-radius: 0.5rem;
    padding: 0.25rem;
}

#statusTabs .nav-item {
    margin: 0;
}

#statusTabs .nav-link {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0.375rem;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--erp-text-faint, #8895aa);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.4;
}

#statusTabs .nav-link:hover {
    color: var(--erp-text-secondary, #3e4a65);
}

/* Active tab — green pill with dot */
#statusTabs .nav-link[data-status="active"].active {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
}

#statusTabs .nav-link[data-status="active"].active::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10b981;
    flex-shrink: 0;
}

/* Inactive tab — red pill with dot */
#statusTabs .nav-link[data-status="inactive"].active {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.15) !important;
}

#statusTabs .nav-link[data-status="inactive"].active::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ef4444;
    flex-shrink: 0;
}

/* Fallback for tabs without data-status (generic active) */
#statusTabs .nav-link.active:not([data-status]) {
    background-color: var(--erp-bg, #faf9fc) !important;
    color: var(--erp-primary, #3D52A0) !important;
    box-shadow: var(--erp-shadow-sm) !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] #statusTabs.nav-tabs {
    background-color: var(--erp-bg-muted);
}

[data-bs-theme="dark"] #statusTabs .nav-link[data-status="active"].active {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
}

[data-bs-theme="dark"] #statusTabs .nav-link[data-status="active"].active::before {
    background-color: #34d399;
}

[data-bs-theme="dark"] #statusTabs .nav-link[data-status="inactive"].active {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

[data-bs-theme="dark"] #statusTabs .nav-link[data-status="inactive"].active::before {
    background-color: #f87171;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTER FORM — Compact inline strip, space-saving
   ═══════════════════════════════════════════════════════════════════ */
.erp-filter-card .card-body {
    padding: 0.75rem 1rem !important;
}

.erp-filter-card .form-label {
    display: none;
}

.erp-filter-card .form-select,
.erp-filter-card .form-control {
    height: 34px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--erp-border, #d8dfe8);
}

.erp-filter-card .select2-container--default .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 0.375rem !important;
}

.erp-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    font-size: 0.8125rem !important;
    padding-left: 0.625rem;
}

.erp-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

.erp-filter-card .row.align-items-end {
    align-items: center !important;
}

.erp-filter-card .mb-1 {
    margin-bottom: 0 !important;
}

.erp-filter-card .col-12.col-md-3.col-lg-3,
.erp-filter-card .col-12.col-md-4.col-lg-3 {
    padding-top: 0;
    padding-bottom: 0;
}

/* Filter action buttons (search/reset/export) — compact */
.erp-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.erp-filter-actions .btn-erp-outline,
.erp-filter-actions button {
    height: 34px;
    width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px solid var(--erp-border, #d8dfe8);
    background: var(--erp-bg, #faf9fc);
    color: var(--erp-text-faint, #8895aa);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
}

.erp-filter-actions .search:hover {
    background: var(--erp-primary, #3D52A0);
    border-color: var(--erp-primary, #3D52A0);
    color: #fff;
}

.erp-filter-actions .export:hover {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.erp-filter-actions .reset:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* ── Combined filter + tabs bar ──────────────────────────────────── */
.erp-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.erp-list-toolbar #statusTabs {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MULTI-STATUS TABS — Colored pill buttons (Task, Order status etc.)
   ═══════════════════════════════════════════════════════════════════ */
.erp-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.erp-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    color: var(--erp-text-faint, #8895aa);
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.erp-status-tab:hover {
    background: var(--erp-bg-muted, #e8e6f0);
    color: var(--erp-text-secondary, #3e4a65);
}

.erp-status-tab.active {
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.erp-status-tab i {
    font-size: 0.5625rem;
}

/* Dark mode */
[data-bs-theme="dark"] .erp-status-tab:hover {
    background: var(--erp-bg-muted);
}

/* Remove old nav-pills status styling that conflicts */
.status-tab-pills {
    display: none !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: white !important;
}

.toast-close-button {
    color: white !important;
}

/* Menu active color - ERP theme #3D52A0 */
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
    background-color: #3D52A0 !important;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(270deg, rgba(61, 82, 160, 0.7) 0%, #3D52A0 100%) !important;
    box-shadow: 0px 2px 6px 0px rgba(61, 82, 160, 0.3) !important;
    color: #fff !important;
}

.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    background: linear-gradient(270deg, rgba(61, 82, 160, 0.7) 0%, #3D52A0 100%) !important;
    box-shadow: 0px 2px 6px 0px rgba(61, 82, 160, 0.3) !important;
    color: #fff !important;
}

.bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
    background: rgba(61, 82, 160, 0.12) !important;
    color: #3D52A0 !important;
}

/* ============================================
   DataTable scroll header / body alignment
   ============================================
   When scrollX/scrollY are on, DataTables splits the
   head into .dataTables_scrollHead (its own <table>)
   and the body into .dataTables_scrollBody (with a
   duplicate hidden <thead> above the real tbody).

   Column widths are synced by DataTables' own JS,
   which measures the widths of the hidden duplicate
   <th>s and writes them as inline style= on the
   visible head cells. The hidden duplicate <thead>
   therefore MUST keep the same padding / border /
   box-sizing as the visible one, or the two tables
   drift by a few pixels per column.

   The safest way to hide it is the way DataTables
   itself does: visibility:collapse on the <tr> +
   blank the sort arrows via the rules already in
   datatables.bootstrap5.css. We add only:
   - height/line-height/font-size 0 (defense against
     browsers that treat collapse as hidden)
   - color: transparent so no text leaks through

   DO NOT touch padding, border, box-sizing, margins,
   or border-collapse — DataTables + Bootstrap are
   already consistent; forcing them causes drift.
   ============================================ */
div.dataTables_scrollBody > table > thead > tr {
    visibility: collapse !important;
}

div.dataTables_scrollBody > table > thead > tr > th,
div.dataTables_scrollBody > table > thead > tr > td {
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
}

div.dataTables_scroll {
    margin-bottom: 0 !important;
    clear: both;
}

div.dataTables_scrollHead {
    overflow: hidden !important;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper .dataTables_filter {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* DataTable - fix overlapping text in dataTables_length select */
div.dataTables_wrapper div.dataTables_length select {
    width: auto !important;
    min-width: 4rem;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.75rem 0.75rem;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Menu - bigger font and icon size */
.menu-inner .menu-item > .menu-link {
    font-size: 0.9875rem !important;
}

.menu-inner .menu-item > .menu-link .menu-icon {
    font-size: 1.5rem !important;
    block-size: 1.5rem !important;
    inline-size: 1.5rem !important;
}

.menu-inner .menu-sub .menu-item > .menu-link {
    font-size: 0.925rem !important;
}

/* Year/Language selector buttons in navbar */
.erp-selector-btn {
    height: 32px;
    padding: 0 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid #3D52A0;
    background-color: rgba(61, 82, 160, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3D52A0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.erp-selector-btn:hover {
    background-color: var(--erp-bg-muted, #e8e6f0);
    border-color: var(--erp-border-strong, #bcc5d4);
}

.erp-selector-dropdown {
    background-color: var(--erp-bg, #faf9fc);
    border: 1px solid var(--erp-border, #d8dfe8);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(61, 82, 160, 0.04), 0 8px 16px rgba(61, 82, 160, 0.04);
}

.erp-selector-dropdown .dropdown-item {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    color: var(--erp-text-secondary, #3e4a65);
    border-radius: 0.25rem;
}

.erp-selector-dropdown .dropdown-item:hover,
.erp-selector-dropdown .dropdown-item.active {
    background-color: var(--erp-bg-muted, #e8e6f0);
    color: var(--erp-primary, #3D52A0);
}

/* ── ERP Navbar Styles (moved from navbar-vertical.blade.php) ──── */

/* ERP Header Overrides */
#layout-navbar.erp-top-navbar {
    background-color: var(--erp-bg, #faf9fc) !important;
    border-bottom: 1px solid var(--erp-border, #d8dfe8);
    box-shadow: none !important;
}

#layout-navbar.erp-top-navbar .navbar-nav-right {
    gap: 0.5rem;
}

/* Search button in header */
.erp-header-search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--erp-border, #d8dfe8);
    background-color: var(--erp-bg-page, #f0eff6);
    font-size: 0.875rem;
    color: var(--erp-text-faint, #8895aa);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.erp-header-search:hover {
    background-color: var(--erp-bg-muted, #e8e6f0);
    border-color: var(--erp-border-strong, #bcc5d4);
    color: var(--erp-text-secondary, #3e4a65);
}

.erp-header-search kbd {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid var(--erp-border-strong, #bcc5d4);
    background-color: var(--erp-bg, #faf9fc);
    color: var(--erp-text-faint, #8895aa);
    font-family: monospace;
    margin-left: 0.5rem;
}

/* Header icon buttons */
.erp-nav-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--erp-text-faint, #8895aa);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.erp-nav-icon-btn:hover {
    background-color: var(--erp-bg-muted, #e8e6f0);
    color: var(--erp-text-secondary, #3e4a65);
}

.erp-nav-icon-btn .notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
}

/* Notification dropdown */
.erp-notif-dropdown-menu {
    width: 320px;
    max-width: calc(100vw - 1rem);
    background-color: var(--erp-bg, #faf9fc);
    border: 1px solid var(--erp-border, #d8dfe8);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(61, 82, 160, 0.04), 0 8px 16px rgba(61, 82, 160, 0.04);
    padding: 0;
}

/* User dropdown styling */
.erp-user-dropdown .dropdown-menu {
    min-width: 200px;
    background-color: var(--erp-bg, #faf9fc);
    border: 1px solid var(--erp-border, #d8dfe8);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(61, 82, 160, 0.04), 0 8px 16px rgba(61, 82, 160, 0.04);
    padding: 0.5rem;
}

.erp-user-dropdown .dropdown-item {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--erp-text-secondary, #3e4a65);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.erp-user-dropdown .dropdown-item:hover {
    background-color: var(--erp-bg-muted, #e8e6f0);
    color: var(--erp-text, #2a2d45);
}

.erp-user-dropdown .dropdown-item i {
    width: 1rem;
    text-align: center;
    color: var(--erp-text-faint, #8895aa);
    font-size: 0.75rem;
}

.erp-user-dropdown .dropdown-item.text-danger {
    color: #ef4444;
}

.erp-user-dropdown .dropdown-item.text-danger:hover {
    background-color: #fef2f2;
}

.erp-user-dropdown .dropdown-item.text-danger i {
    color: #fca5a5;
}

/* User avatar in header */
.erp-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--erp-bg-muted, #e8e6f0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.erp-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.erp-user-avatar i {
    color: var(--erp-text-faint, #8895aa);
    font-size: 0.75rem;
}

/* ── ERP Utility Classes (extracted from inline styles) ────────── */

/* Icon sizes */
.erp-icon-xs {
    font-size: 0.625rem;
}

.erp-icon-sm {
    font-size: 0.75rem;
}

.erp-icon-base {
    font-size: 0.875rem;
}

/* Text utilities */
.erp-text-dark {
    color: var(--erp-text, #2a2d45);
}

.erp-text-secondary {
    color: var(--erp-text-secondary, #3e4a65);
}

.erp-text-faint {
    color: var(--erp-text-faint, #8895aa);
}

.erp-text-sm {
    font-size: 0.8125rem;
}

.erp-text-xs {
    font-size: 0.75rem;
}

.erp-text-base {
    font-size: 0.875rem;
}

.erp-text-base-dark {
    font-size: 0.875rem;
    color: var(--erp-text, #2a2d45);
}

.erp-text-hint {
    font-size: 0.75rem;
    color: var(--erp-text-faint, #8895aa);
}

.erp-text-label {
    font-size: 0.6875rem;
    color: var(--erp-text-faint, #8895aa);
}

/* Navbar selector dropdown toggle */
.erp-selector-toggle {
    border-left: none;
    padding: 0 0.375rem;
}

/* Scrollable dropdown */
.erp-dropdown-scroll {
    overflow-y: auto;
    max-height: 200px;
}

/* Disabled button state */
.erp-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chart containers */
.erp-chart-lg {
    min-height: 320px;
}

.erp-chart-md {
    min-height: 300px;
}

/* Filter input */
.erp-filter-input {
    width: 140px;
    height: 34px;
    font-size: 0.8125rem;
}

/* Icon container (detail/show pages) */
.erp-icon-container-lg {
    width: 120px;
    height: 120px;
    font-size: 2.5rem;
}

/* Z-index for input group icons */
.erp-z-input {
    z-index: 1;
}

/* Dropdown divider */
.erp-dropdown-divider {
    border-color: var(--erp-border-row, #edf0f5);
    margin: 0.25rem 0;
}

/* Scrollable tab content */
.erp-scrollable-lg {
    height: 700px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TABLE RESPONSIVENESS
   Adds horizontal scroll to all tables across the app without
   requiring every blade template to add `.table-responsive`.

   Uses descendant-`:has(table)` (not child-`:has(> table)`) because
   DataTables injects `.dataTables_wrapper` between the outer div and
   the <table> at runtime, so direct-child selectors stop matching
   after init and the table bleeds past the card edge.
   ═══════════════════════════════════════════════════════════════════ */

/* Clip the card so nothing can visually bleed past its right edge */
.card:has(table) {
    overflow-x: hidden;
    max-width: 100%;
}

/* Outer containers must NOT scroll horizontally — otherwise the search
   box, length selector, info text, and pagination (all siblings of the
   <table> inside .dataTables_wrapper) would scroll along with the table.
   The horizontal scroll is delegated to .dt-scroll-wrapper (added by
   datatable-helper.js around the <table> only). */
.card-body:has(table),
.text-nowrap:has(table),
.card-datatable:has(table),
div.dataTables_wrapper {
    overflow-x: hidden;
    max-width: 100%;
}

/* The dedicated table-only scroll container. Wraps <table> directly so
   only the table area can scroll horizontally; the .dataTables_wrapper
   row above (length + search) and below (info + pagination) stay put. */
.dt-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Tables themselves must not force the parent wider than 100% —
   they keep their natural width (so columns don't squish) but
   the wrapper above scrolls. */
.table {
    max-width: none;
}

/* Fix flex/grid parents that propagate min-width: auto and let the
   table push the card wider than its column. */
.card,
.card-body,
.row > [class*="col-"] {
    min-width: 0;
}

/* DataTables' own scroll split (scrollHead/scrollBody) continues to
   work — we only constrain outer width, not its internal scroll. */
div.dataTables_scroll,
div.dataTables_scrollHead,
div.dataTables_scrollBody {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPACT ACTION BUTTONS IN TABLES
   The shared action partial (resources/views/layouts/action.blade.php)
   emits `.btn.btn-sm.btn-label-*` buttons. In a DataTable row these
   should be small icon-buttons, not full-size btn-sm pills.
   ═══════════════════════════════════════════════════════════════════ */
.table tbody td .btn-sm,
table.dataTable tbody td .btn-sm {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1;
    min-width: 0;
}

.table tbody td .btn-sm + .btn-sm,
table.dataTable tbody td .btn-sm + .btn-sm {
    margin-left: 0.15rem;
}

.table tbody td .btn-sm > i,
.table tbody td .btn-sm > .fa,
.table tbody td .btn-sm > .fas,
.table tbody td .btn-sm > .ti,
table.dataTable tbody td .btn-sm > i,
table.dataTable tbody td .btn-sm > .fa,
table.dataTable tbody td .btn-sm > .fas,
table.dataTable tbody td .btn-sm > .ti {
    font-size: 0.75rem;
    line-height: 1;
}

/* Keep the action column from growing tall when buttons wrap */
.table tbody td:has(> .btn-sm),
table.dataTable tbody td:has(> .btn-sm) {
    white-space: nowrap;
    vertical-align: middle;
}

/* ==========================================================================
   Time Sheet (AttendanceTimeSheet module)
   ========================================================================== */

.timesheet-wrap {
    position: relative;
    min-height: 220px;
    /* Contain the wide table so only the DataTables scroll area scrolls
       horizontally — search box, pagination, and info row stay put. */
    max-width: 100%;
    overflow-x: hidden;
}

.timesheet-wrap .dataTables_wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

/* The length/search row at the top and the info/pagination row at the
   bottom must never inherit horizontal scroll from the table. */
.timesheet-wrap .dataTables_wrapper > .row {
    overflow-x: hidden;
    flex-wrap: wrap;
}

.timesheet-wrap .dataTables_length,
.timesheet-wrap .dataTables_filter,
.timesheet-wrap .dataTables_info,
.timesheet-wrap .dataTables_paginate {
    white-space: normal;
}

.timesheet-wrap table.dataTable thead th.sorting::before,
.timesheet-wrap table.dataTable thead th.sorting::after {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

.timesheet-wrap table.dataTable thead th.sorting:hover::before,
.timesheet-wrap table.dataTable thead th.sorting:hover::after {
    opacity: 0.6 !important;
}

.timesheet-wrap table.dataTable thead th.sorting_asc::before,
.timesheet-wrap table.dataTable thead th.sorting_asc::after,
.timesheet-wrap table.dataTable thead th.sorting_desc::before,
.timesheet-wrap table.dataTable thead th.sorting_desc::after {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease;
}

.timesheet-wrap table.dataTable thead th.sorting_asc:hover::before,
.timesheet-wrap table.dataTable thead th.sorting_asc:hover::after,
.timesheet-wrap table.dataTable thead th.sorting_desc:hover::before,
.timesheet-wrap table.dataTable thead th.sorting_desc:hover::after {
    opacity: 1 !important;
}

.timesheet-wrap table.dataTable thead th.sorting,
.timesheet-wrap table.dataTable thead th.sorting_asc,
.timesheet-wrap table.dataTable thead th.sorting_desc {
    cursor: pointer;
}

/* Center-align the date columns (header + cell) so the attendance badges
   line up with their day labels instead of drifting to the left edge. */
.timesheet-wrap table.dataTable thead th.timesheet-date-col,
.timesheet-wrap table.dataTable tbody td.timesheet-date-col {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    min-width: 70px;
}

/* Keep header + body column widths in sync when DataTables splits the
   table into separate scrollX header/body tables. Without these rules,
   long tbody text (e.g. "Shanti Foods India") makes the body columns
   wider than the short headers, which pushes the date columns out of
   alignment with their day labels. */
.timesheet-wrap table.dataTable,
.timesheet-wrap .dataTables_scrollHead table.dataTable,
.timesheet-wrap .dataTables_scrollBody table.dataTable {
    border-collapse: collapse !important;
}

.timesheet-wrap table.dataTable thead th,
.timesheet-wrap table.dataTable tbody td {
    white-space: nowrap;
    vertical-align: middle;
}

.timesheet-wrap .dataTables_scrollHead,
.timesheet-wrap .dataTables_scrollBody {
    overflow-x: auto;
}

.timesheet-wrap .dataTables_scrollBody thead tr {
    /* DataTables renders an invisible header inside the scroll body to
       measure widths; keep it hidden so it can't shift row alignment. */
    height: 0 !important;
    visibility: hidden;
}

.timesheet-wrap .dataTables_scrollBody thead tr th {
    height: 0 !important;
    line-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}

/* Custom horizontal scrollbar for the timesheet scroll body:
   slightly larger than the browser default with a strong dark/light
   contrast so the thumb is easy to spot against the track. */
.timesheet-wrap .dataTables_scrollBody,
.timesheet-wrap .dataTables_scrollHead {
    scrollbar-width: auto;                 /* Firefox: default/"auto" is thicker than "thin" */
    scrollbar-color: #ffffff #1e1e2d;      /* Firefox: thumb (white) / track (near-black) */
}

.timesheet-wrap .dataTables_scrollBody::-webkit-scrollbar,
.timesheet-wrap .dataTables_scrollHead::-webkit-scrollbar {
    height: 14px;                          /* horizontal scrollbar thickness */
    width: 14px;
}

.timesheet-wrap .dataTables_scrollBody::-webkit-scrollbar-track,
.timesheet-wrap .dataTables_scrollHead::-webkit-scrollbar-track {
    background: #1e1e2d;                   /* near-black track */
    border-radius: 8px;
}

.timesheet-wrap .dataTables_scrollBody::-webkit-scrollbar-thumb,
.timesheet-wrap .dataTables_scrollHead::-webkit-scrollbar-thumb {
    background: #ffffff;                   /* white thumb (maximum contrast) */
    border-radius: 8px;
    border: 2px solid #1e1e2d;             /* keeps the white thumb visually inset from the dark track */
}

.timesheet-wrap .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.timesheet-wrap .dataTables_scrollHead::-webkit-scrollbar-thumb:hover {
    background: #7367f0;                   /* primary purple on hover for extra feedback */
}

.timesheet-wrap .dataTables_scrollBody::-webkit-scrollbar-corner,
.timesheet-wrap .dataTables_scrollHead::-webkit-scrollbar-corner {
    background: #1e1e2d;
}

.timesheet-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 10;
}

.timesheet-loader.is-visible {
    display: flex;
}

.timesheet-loader .spinner-border {
    width: 2.2rem;
    height: 2.2rem;
}

.timesheet-month-picker {
    width: 150px;
}

/* Legend buttons above the time sheet */
.timesheet-legend-btn {
    border: 1px solid transparent;
    background: #ffffff;
}

.timesheet-legend-btn.legend-wo {
    border-color: #28c76f;
    color: #28c76f;
}

.timesheet-legend-btn.legend-wop {
    border-color: #ff9f43;
    color: #ff9f43;
}

.timesheet-legend-btn.legend-l {
    border-color: #7367f0;
    color: #7367f0;
}

.timesheet-legend-btn.legend-wf,
.timesheet-legend-btn.legend-hd {
    border-color: #ffc107;
    background: #ffc107;
    color: #333;
}

.timesheet-legend-btn.legend-lwp {
    border-color: #ea5455;
    color: #ea5455;
}

.timesheet-legend-btn.legend-hl {
    border-color: #00cfe8;
    color: #00cfe8;
}

.timesheet-legend-btn.legend-p {
    border-color: #d0d0d0;
    color: #333;
}

/* Attendance code badges rendered inside timesheet cells */
.attendance-code {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: #ffffff;
    color: #333;
}

.attendance-code.att-al {
    padding: 0;
    border: 0;
    background: transparent;
    color: #28c76f;
    font-weight: 500;
}

.attendance-code.att-ho,
.attendance-code.att-hd {
    background-color: #ffc107;
    color: #333;
    border-color: #ffc107;
}

.attendance-code.att-wo {
    border-color: #28c76f;
    color: #28c76f;
}

.attendance-code.att-wop {
    border-color: #ff9f43;
    color: #ff9f43;
    font-weight: 600;
}

.attendance-code.att-l {
    border-color: #7367f0;
    color: #7367f0;
}

.attendance-code.att-lwp {
    border-color: #ea5455;
    color: #ea5455;
}

.attendance-code.att-hl {
    border-color: #00cfe8;
    color: #00cfe8;
}

.attendance-code.att-ns {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Employee list: row tint by status (left accent + light cell bg; Vuexy-style colours) */
#table tr.thr-employee-status-pending > td:first-child {
    box-shadow: inset 4px 0 0 #ff9f43;
}

#table tr.thr-employee-status-pending > td {
    background-color: #fff8ec !important;
}

#table tr.thr-employee-status-draft > td:first-child {
    box-shadow: inset 4px 0 0 #82868b;
}

#table tr.thr-employee-status-draft > td {
    background-color: #f4f5f6 !important;
}

#table tr.thr-employee-status-inactive > td:first-child {
    box-shadow: inset 4px 0 0 #ea5455;
}

#table tr.thr-employee-status-inactive > td {
    background-color: #fff0f0 !important;
}

#table tr.thr-employee-status-active > td:first-child {
    box-shadow: inset 4px 0 0 #28c76f;
}

#table tr.thr-employee-status-active > td {
    background-color: #e9faf0 !important;
}

#table tr.thr-employee-status-other > td:first-child {
    box-shadow: inset 4px 0 0 #7367f0;
}

#table tr.thr-employee-status-other > td {
    background-color: #f3f2ff !important;
}