/**
 * MATRIX COSEC SYSTEM — ENTERPRISE GLASSMORPHISM DESIGN SYSTEM
 * Pure Dual-Engine (Dark & Light) Frosted Glass UI
 * Inspired by modern macOS, Linear, Stripe & Apple Enterprise surfaces
 */

:root {
    --ip-accent:          #4f7cb0;
    --ip-accent-dark:     #33506e;
    --ip-accent-soft:     rgba(79, 124, 176, 0.18);
    --glass-blur:         18px;
    --glass-radius-lg:    1rem;
    --glass-radius-xl:    1.25rem;
}

/* =========================================================================
   1. AMBIENT BACKDROP SCENE & MESH LIGHTING
   ========================================================================= */
.ip-scene,
.glass-viewport {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

html.dark .ip-scene,
html.dark .glass-viewport,
html.dark body {
    background: 
        radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.15), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(56, 189, 248, 0.10), transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(139, 92, 246, 0.08), transparent 50%),
        #090d16 !important;
    background-color: #090d16 !important;
    background-attachment: fixed !important;
}

html.light .ip-scene,
html.light .glass-viewport,
html.light body {
    background: linear-gradient(180deg, rgb(250, 248, 255) 0%, rgba(250, 248, 255, 0.70) 25%, #ffffff 75%, #ffffff 100%) !important;
    background-color: #ffffff !important;
    background-attachment: fixed !important;
}

/* =========================================================================
   2. GLASS SURFACES & PANELS (CARDS)
   ========================================================================= */
.ip-glass,
.glass-card,
.glass-panel,
.section-panel {
    position: relative;
    border-radius: var(--glass-radius-lg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .ip-glass,
html.dark .glass-card,
html.dark .glass-panel,
html.dark .section-panel,
html.dark .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(20, 27, 45, 0.65) 100%) !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    box-shadow: 
        0 16px 36px -8px rgba(0, 0, 0, 0.6),
        0 2px 8px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4) !important;
}

html.light .ip-glass,
html.light .glass-card,
html.light .glass-panel,
html.light .section-panel,
html.light .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 40%, rgba(245, 248, 255, 0.18) 100%) !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.90) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.50) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.50) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    box-shadow: 
        0 14px 34px -6px rgba(79, 124, 176, 0.15),
        0 2px 6px 0 rgba(0, 0, 0, 0.03),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Specular Top Bevel Highlight (Polished Acrylic Edge) */
html.light .ip-glass::before,
html.light .glass-card::before,
html.light .glass-panel::before,
html.light .section-panel::before,
html.light .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.4) 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
    display: block !important;
}

html.dark .ip-glass::before,
html.dark .glass-card::before,
html.dark .glass-panel::before,
html.dark .section-panel::before,
html.dark .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
    display: block !important;
}

.glass-card--hover:hover,
.card:hover {
    transform: translateY(-2px);
}
html.dark .glass-card--hover:hover,
html.dark .card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 40%, rgba(30, 41, 65, 0.75) 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 24px 48px -10px rgba(0, 0, 0, 0.75),
        0 4px 12px 0 rgba(0, 0, 0, 0.5),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.5) !important;
}
html.light .glass-card--hover:hover,
html.light .card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.22) 40%, rgba(245, 248, 255, 0.30) 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 
        0 22px 45px -8px rgba(79, 124, 176, 0.22),
        0 4px 10px 0 rgba(0, 0, 0, 0.05),
        inset 0 2px 1.5px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Card Header on Glass */
.card-header,
.glass-card__header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.1rem 1.4rem !important;
}
html.light .card-header,
html.light .glass-card__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* =========================================================================
   3. TEXT CONTRAST ON GLASS
   ========================================================================= */
html.dark  .ip-text,
html.dark  .text-primary,
html.dark  .card-title,
html.dark  .section-panel__title { color: #f1f5f9 !important; }

html.dark  .ip-text-muted,
html.dark  .text-secondary,
html.dark  .text-muted { color: #94a3b8 !important; }

html.dark  .ip-text-faint,
html.dark  .text-dim { color: #64748b !important; }

html.light .ip-text,
html.light .text-primary,
html.light .card-title,
html.light .section-panel__title { color: #0f172a !important; }

html.light .ip-text-muted,
html.light .text-secondary,
html.light .text-muted { color: #475569 !important; }

html.light .ip-text-faint,
html.light .text-dim { color: #94a3b8 !important; }

/* =========================================================================
   4. GLASS FORM CONTROLS & INPUTS
   ========================================================================= */
.ip-field,
.glass-field {
    display: flex;
    align-items: stretch;
    border-radius: 0.75rem;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.2s ease;
}

html.dark .ip-field,
html.dark .glass-field,
html.dark .form-control,
html.dark .glass-input,
html.dark select.form-control {
    background: rgba(15, 23, 42, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

html.light .ip-field,
html.light .glass-field,
html.light .form-control,
html.light .glass-input,
html.light select.form-control {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.dark .ip-field:focus-within,
html.dark .form-control:focus,
html.dark .glass-input:focus {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

html.light .ip-field:focus-within,
html.light .form-control:focus,
html.light .glass-input:focus {
    background: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18) !important;
}

.ip-field.is-invalid,
.form-control.is-invalid {
    border-color: #f43f5e !important;
}

.ip-field__icon {
    flex: 0 0 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    pointer-events: none;
}
html.dark  .ip-field__icon { color: #94a3b8; }
html.light .ip-field__icon { color: #64748b; }

.ip-field .ip-field__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 0;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 0.875rem;
    font-family: inherit;
}
html.dark  .ip-field .ip-field__input { color: #f1f4f8 !important; }
html.light .ip-field .ip-field__input { color: #0f172a !important; }
html.dark  .ip-field .ip-field__input::placeholder { color: #64748b; }
html.light .ip-field .ip-field__input::placeholder { color: #94a3b8; }

.ip-field__btn {
    flex: 0 0 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
}
html.dark  .ip-field__btn { color: #94a3b8; }
html.dark  .ip-field__btn:hover { color: #f1f4f8; }
html.light .ip-field__btn { color: #64748b; }
html.light .ip-field__btn:hover { color: #0f172a; }

/* Webkit autofill fix */
html.dark .ip-field .ip-field__input:-webkit-autofill {
    -webkit-text-fill-color: #f1f4f8 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.9) inset !important;
}
html.light .ip-field .ip-field__input:-webkit-autofill {
    -webkit-text-fill-color: #0f172a !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.95) inset !important;
}

/* =========================================================================
   5. GLASS BUTTONS
   ========================================================================= */
.btn-glass-primary,
.ip-btn-primary {
    padding: 0.65rem 1.25rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    box-shadow: 0 4px 15px -3px rgba(79, 70, 229, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    text-decoration: none !important;
}
.btn-glass-primary:hover,
.ip-btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -3px rgba(79, 70, 229, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

.btn-glass-ghost {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.65rem;
    font-size: 0.813rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
html.dark .btn-glass-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0 !important;
}
html.dark .btn-glass-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}
html.light .btn-glass-ghost {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #cbd5e1;
    color: #334155 !important;
}
html.light .btn-glass-ghost:hover {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f172a !important;
}

/* =========================================================================
   6. GLASS STATUS PILLS & BADGES
   ========================================================================= */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid transparent;
}

.pill__dot,
.pulse-beacon {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    display: inline-block;
}

/* Emerald Pill */
html.dark .pill--emerald {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}
html.dark .pill--emerald .pill__dot,
html.dark .pill--emerald .pulse-beacon { background: #34d399; box-shadow: 0 0 8px #34d399; }

html.light .pill--emerald {
    background: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;
}
html.light .pill--emerald .pill__dot,
html.light .pill--emerald .pulse-beacon { background: #10b981; }

/* Amber Pill */
html.dark .pill--amber {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}
html.dark .pill--amber .pill__dot,
html.dark .pill--amber .pulse-beacon { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }

html.light .pill--amber {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}
html.light .pill--amber .pill__dot,
html.light .pill--amber .pulse-beacon { background: #f59e0b; }

/* Rose Pill */
html.dark .pill--rose {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fb7185;
}
html.dark .pill--rose .pill__dot,
html.dark .pill--rose .pulse-beacon { background: #fb7185; box-shadow: 0 0 8px #fb7185; }

html.light .pill--rose {
    background: #ffe4e6;
    border-color: #fecdd3;
    color: #9f1239;
}
html.light .pill--rose .pill__dot,
html.light .pill--rose .pulse-beacon { background: #f43f5e; }

/* Indigo / Violet Pill */
html.dark .pill--indigo {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}
html.dark .pill--indigo .pill__dot,
html.dark .pill--indigo .pulse-beacon { background: #818cf8; box-shadow: 0 0 8px #818cf8; }

html.light .pill--indigo {
    background: #e0e7ff;
    border-color: #c7d2fe;
    color: #3730a3;
}
html.light .pill--indigo .pill__dot,
html.light .pill--indigo .pulse-beacon { background: #6366f1; }

/* =========================================================================
   7. GLASS DATATABLES & DATA GRIDS
   ========================================================================= */
.table-glass,
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

table.dataTable thead th,
table.glass-table thead th {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html.dark table.dataTable thead th,
html.dark table.glass-table thead th {
    background: rgba(15, 23, 42, 0.75) !important;
    color: #94a3b8 !important;
}
html.light table.dataTable thead th,
html.light table.glass-table thead th {
    background: rgba(241, 245, 249, 0.85) !important;
    border-bottom-color: #e2e8f0 !important;
    color: #475569 !important;
}

table.dataTable tbody td {
    padding: 0.85rem 1rem !important;
    font-size: 0.825rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    vertical-align: middle !important;
}
html.light table.dataTable tbody td {
    border-bottom-color: rgba(0, 0, 0, 0.05) !important;
}

/* DataTables and Standard Tables Base Styling */
table.dataTable tbody tr,
table.glass-table tbody tr,
.table tbody tr {
    transition: background-color 0.15s ease !important;
}

/* DARK THEME: Pure Glass Rows, Zero White Background Bleed */
html.dark table.dataTable,
html.dark table.glass-table,
html.dark .table,
html.dark table.dataTable tbody,
html.dark table.glass-table tbody,
html.dark .table tbody {
    background: transparent !important;
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

html.dark table.dataTable tbody tr,
html.dark table.glass-table tbody tr,
html.dark .table tbody tr,
html.dark table.dataTable.display tbody tr,
html.dark table.dataTable.stripe tbody tr,
html.dark table.dataTable.display tbody tr.odd,
html.dark table.dataTable.display tbody tr.even,
html.dark table.dataTable.stripe tbody tr.odd,
html.dark table.dataTable.stripe tbody tr.even,
html.dark .table-striped tbody tr:nth-of-type(odd),
html.dark .table-striped tbody tr:nth-of-type(even) {
    background: transparent !important;
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

html.dark table.dataTable tbody td,
html.dark table.glass-table tbody td,
html.dark .table tbody td,
html.dark table.dataTable.display tbody tr.odd > .sorting_1,
html.dark table.dataTable.display tbody tr.even > .sorting_1,
html.dark table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
html.dark table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
html.dark table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
html.dark table.dataTable.order-column.stripe tbody tr.even > .sorting_2,
html.dark table.dataTable.order-column.stripe tbody tr.odd > .sorting_3,
html.dark table.dataTable.order-column.stripe tbody tr.even > .sorting_3,
html.dark table.dataTable.display tbody tr.odd > .sorting_2,
html.dark table.dataTable.display tbody tr.even > .sorting_2,
html.dark table.dataTable.display tbody tr.odd > .sorting_3,
html.dark table.dataTable.display tbody tr.even > .sorting_3 {
    background: transparent !important;
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html.dark table.dataTable tbody tr:hover,
html.dark table.glass-table tbody tr:hover,
html.dark .table tbody tr:hover,
html.dark table.dataTable tbody tr:hover td,
html.dark table.glass-table tbody tr:hover td,
html.dark .table tbody tr:hover td,
html.dark table.dataTable.display tbody tr:hover > .sorting_1,
html.dark table.dataTable.display tbody tr:hover > .sorting_2,
html.dark table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark table.dataTable tbody tr.selected,
html.dark table.glass-table tbody tr.selected,
html.dark table.dataTable tbody tr.selected td,
html.dark table.glass-table tbody tr.selected td,
html.dark table.dataTable tbody tr.selected > .sorting_1 {
    background: rgba(99, 102, 241, 0.18) !important;
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
}

html.dark table.dataTable tbody td.select-checkbox:before {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(15, 23, 42, 0.6) !important;
}

html.dark table.dataTable tr.selected td.select-checkbox:before {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

/* LIGHT THEME: Pristine and Untouched */
html.light table.dataTable,
html.light table.glass-table,
html.light .table,
html.light table.dataTable tbody,
html.light table.glass-table tbody,
html.light .table tbody {
    background: transparent !important;
    background-color: transparent !important;
}

html.light table.dataTable tbody tr,
html.light table.glass-table tbody tr,
html.light .table tbody tr {
    background: transparent !important;
    background-color: transparent !important;
    color: #1e293b !important;
}

html.light table.dataTable tbody td,
html.light table.glass-table tbody td,
html.light .table tbody td {
    background: transparent !important;
    background-color: transparent !important;
    color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html.light table.dataTable tbody tr:hover,
html.light table.glass-table tbody tr:hover,
html.light .table tbody tr:hover,
html.light table.dataTable tbody tr:hover td,
html.light table.glass-table tbody tr:hover td,
html.light .table tbody tr:hover td {
    background: rgba(241, 245, 249, 0.6) !important;
    background-color: rgba(241, 245, 249, 0.6) !important;
}

html.light table.dataTable tbody tr.selected,
html.light table.glass-table tbody tr.selected,
html.light table.dataTable tbody tr.selected td,
html.light table.glass-table tbody tr.selected td {
    background: rgba(99, 102, 241, 0.08) !important;
    background-color: rgba(99, 102, 241, 0.08) !important;
    color: #1e293b !important;
}

/* =========================================================================
   8. GLASS MODALS & OVERLAYS
   ========================================================================= */
.modal-backdrop {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background-color: rgba(11, 15, 23, 0.75) !important;
}

.modal-content {
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-radius: var(--glass-radius-xl) !important;
}
html.dark .modal-content {
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8) !important;
}
html.light .modal-content {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 25px 60px -15px rgba(30, 41, 59, 0.18) !important;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.25rem 1.5rem !important;
}
html.light .modal-header {
    border-bottom-color: #e2e8f0 !important;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.5rem !important;
}
html.light .modal-footer {
    border-top-color: #e2e8f0 !important;
}

/* =========================================================================
   9. LOGO BADGE & THEME TOGGLE
   ========================================================================= */
.ip-logo-badge {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.6rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
html.dark .ip-logo-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
html.light .ip-logo-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}
.ip-logo-badge img { width: 100%; height: 100%; object-fit: contain; }

.theme-toggle-btn {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
html.dark .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fbbf24;
}
html.dark .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fef08a;
}
html.light .theme-toggle-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
html.light .theme-toggle-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* =========================================================================
   10. UTILITY HELPERS & METER BARS
   ========================================================================= */
.bg-surface {
    background-color: var(--bg-surface, rgba(255, 255, 255, 0.85)) !important;
}
html.dark .bg-surface {
    background-color: rgba(15, 23, 42, 0.75) !important;
}

.bg-surface-elevated {
    background-color: var(--bg-surface-elevated, #ffffff) !important;
}
html.dark .bg-surface-elevated {
    background-color: rgba(30, 41, 59, 0.75) !important;
}

.border-glass {
    border-color: var(--border-glass, #e2e8f0) !important;
}
html.dark .border-glass {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.border-subtle {
    border-color: var(--border-subtle, #f1f5f9) !important;
}
html.dark .border-subtle {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Stat meters */
.stat-meter-track {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    overflow: hidden;
}
html.dark .stat-meter-track {
    background: rgba(255, 255, 255, 0.08);
}
.stat-meter-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-meter-fill--indigo  { background: linear-gradient(90deg, #4f46e5, #6366f1); }
.stat-meter-fill--emerald { background: linear-gradient(90deg, #059669, #10b981); }
.stat-meter-fill--amber   { background: linear-gradient(90deg, #d97706, #f59e0b); }
.stat-meter-fill--rose    { background: linear-gradient(90deg, #e11d48, #f43f5e); }
.stat-meter-fill--blue    { background: linear-gradient(90deg, #2563eb, #3b82f6); }

/* =========================================================================
   11. CARD STACKING CONTEXT & BOOTSTRAP DATETIMEPICKER POLISH
   ========================================================================= */

/* Elevation for filter cards and active dropdowns */
.card-filter {
    position: relative !important;
    z-index: 30 !important;
}

.card,
.glass-card {
    position: relative;
    z-index: 10;
}

.card:focus-within,
.card:hover,
.glass-card:focus-within,
.glass-card:hover {
    z-index: 30;
}

.card:has(.select2-container--open),
.card:has(.bootstrap-datetimepicker-widget:not([style*="display: none"])),
.glass-card:has(.select2-container--open),
.glass-card:has(.bootstrap-datetimepicker-widget:not([style*="display: none"])) {
    z-index: 1000 !important;
}

/* Input with inline icon padding */
input.date,
input.datetime,
.input-with-icon,
.date-input {
    padding-left: 2.75rem !important;
    padding-right: 0.75rem !important;
}

/* Bootstrap DateTimePicker Widget */
.bootstrap-datetimepicker-widget {
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px -6px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
    padding: 14px 16px 16px 16px !important;
    width: 300px !important;
    max-width: none !important;
    height: auto !important;
    margin-top: 6px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    overflow: visible !important;
}

html.dark .bootstrap-datetimepicker-widget {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.bootstrap-datetimepicker-widget::before,
.bootstrap-datetimepicker-widget::after {
    display: none !important;
}

.bootstrap-datetimepicker-widget .datepicker,
.bootstrap-datetimepicker-widget .datepicker-days {
    overflow: visible !important;
    display: block !important;
}

.bootstrap-datetimepicker-widget table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.bootstrap-datetimepicker-widget table th {
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
}

html.dark .bootstrap-datetimepicker-widget table th {
    color: #94a3b8 !important;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

html.dark .bootstrap-datetimepicker-widget table th.picker-switch {
    color: #f8fafc !important;
}

.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next {
    font-size: 0.80rem !important;
    color: #4f46e5 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    transition: all 0.15s ease !important;
}

html.dark .bootstrap-datetimepicker-widget table th.prev,
html.dark .bootstrap-datetimepicker-widget table th.next {
    color: #a5b4fc !important;
}

.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table th.picker-switch:hover {
    background-color: #f1f5f9 !important;
    color: #4f46e5 !important;
}

html.dark .bootstrap-datetimepicker-widget table th.prev:hover,
html.dark .bootstrap-datetimepicker-widget table th.next:hover,
html.dark .bootstrap-datetimepicker-widget table th.picker-switch:hover {
    background-color: #334155 !important;
    color: #818cf8 !important;
}

.bootstrap-datetimepicker-widget table td {
    height: 30px !important;
    width: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
}

html.dark .bootstrap-datetimepicker-widget table td {
    color: #e2e8f0 !important;
}

.bootstrap-datetimepicker-widget table td.day:hover {
    background-color: #f1f5f9 !important;
    color: #4f46e5 !important;
}

html.dark .bootstrap-datetimepicker-widget table td.day:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35) !important;
}

.bootstrap-datetimepicker-widget table td.today {
    position: relative !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    border: 1.5px solid #4f46e5 !important;
    background: transparent !important;
}

html.dark .bootstrap-datetimepicker-widget table td.today {
    color: #818cf8 !important;
    border-color: #818cf8 !important;
}

.bootstrap-datetimepicker-widget table td.today.active {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border: none !important;
}

.bootstrap-datetimepicker-widget table td.today:before {
    display: none !important;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #cbd5e1 !important;
    opacity: 0.5 !important;
}

html.dark .bootstrap-datetimepicker-widget table td.old,
html.dark .bootstrap-datetimepicker-widget table td.new {
    color: #475569 !important;
}

.bootstrap-datetimepicker-widget table td span {
    display: inline-block !important;
    width: 56px !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: 2px !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    font-size: 0.80rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    transition: all 0.15s ease !important;
}

html.dark .bootstrap-datetimepicker-widget table td span {
    color: #e2e8f0 !important;
}

.bootstrap-datetimepicker-widget table td span:hover {
    background-color: #f1f5f9 !important;
    color: #4f46e5 !important;
}

html.dark .bootstrap-datetimepicker-widget table td span:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td span.active:hover {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35) !important;
}

.bootstrap-datetimepicker-widget table td span.old,
.bootstrap-datetimepicker-widget table td span.new {
    color: #cbd5e1 !important;
    opacity: 0.5 !important;
}

html.dark .bootstrap-datetimepicker-widget table td span.old,
html.dark .bootstrap-datetimepicker-widget table td span.new {
    color: #475569 !important;
}

/* =========================================================================
   12. SELECT2 DROPDOWN ARROW & POSITIONING
   ========================================================================= */
.select2-container--default .select2-selection--single {
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    position: relative !important;
    display: block !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

html.dark .select2-container--default .select2-selection--single {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 36px !important;
    padding-left: 0.85rem !important;
    padding-right: 2.25rem !important;
    display: block !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8fafc !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    position: absolute !important;
    top: 1px !important;
    right: 0.75rem !important;
    width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    position: static !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.2s ease !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
}

html.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%23818cf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
}

/* =========================================================================
   13. GLOBAL Z-INDEX ELEVATION — PREVENT POPUP / MODAL / DATEPICKER OVERLAP
   ========================================================================= */

/* Ensure wrapper never traps modals/popups in a lower stacking context */
.c-wrapper {
    position: static;
    z-index: auto;
}

/* Modals & Backdrops above all Sidebars (1020) and Headers (1010) */
.modal-backdrop,
.custom-modal-backdrop {
    z-index: 1050 !important;
}

.modal,
.custom-modal,
#kpiEmployeeModal {
    z-index: 1060 !important;
}

/* Datepicker & Timepicker widgets must be above everything including modals */
.bootstrap-datetimepicker-widget,
.flatpickr-calendar,
.daterangepicker,
.datepicker,
.ui-datepicker,
.pika-single {
    z-index: 999999 !important;
}

/* Select2 Dropdowns */
.select2-container--open,
.select2-container--open .select2-dropdown,
.select2-dropdown {
    z-index: 999999 !important;
}

/* Tooltips, Popovers & Alert Dialogs */
.tooltip,
.popover,
.swal2-container {
    z-index: 9999999 !important;
}

/* =========================================================================
   14. UNIFIED SEARCH BOX ARCHITECTURE & SEARCH ICON FIX
   ========================================================================= */

/* Any container with search input & icon */
.search-box-wrapper,
.search-wrapper,
.relative:has(> i[class*="fa-search"]),
.relative:has(> i.fa-search),
.relative:has(> input#kpiModalSearch),
.relative:has(> input#rosterSearchInput) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Position search icon nicely centered vertically on left */
.search-box-wrapper > i,
.search-wrapper > i,
.relative > i.fa-search,
.relative > i[class*="fa-search"],
.input-icon-left {
    position: absolute !important;
    left: 0.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    pointer-events: none !important;
    z-index: 10 !important;
    margin: 0 !important;
}

/* Ensure ALL search inputs have ample left padding for the icon (never overlapping) */
input.search-input,
input.app-search-input,
input#kpiModalSearch,
input#rosterSearchInput,
.search-box-wrapper input,
.search-wrapper input,
.relative:has(> i.fa-search) input,
.relative:has(> i[class*="fa-search"]) input,
div.dataTables_wrapper div.dataTables_filter input {
    padding-left: 2.35rem !important;
    padding-right: 0.95rem !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    border-radius: 9999px !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html.dark input.search-input,
html.dark input.app-search-input,
html.dark input#kpiModalSearch,
html.dark input#rosterSearchInput,
html.dark .search-box-wrapper input,
html.dark .search-wrapper input,
html.dark .relative:has(> i.fa-search) input,
html.dark .relative:has(> i[class*="fa-search"]) input,
html.dark div.dataTables_wrapper div.dataTables_filter input {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

input.search-input:focus,
input.app-search-input:focus,
input#kpiModalSearch:focus,
input#rosterSearchInput:focus,
.search-box-wrapper input:focus,
.search-wrapper input:focus,
.relative:has(> i.fa-search) input:focus,
.relative:has(> i[class*="fa-search"]) input:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    outline: none !important;
}

div.dataTables_wrapper div.dataTables_filter {
    margin-bottom: 0.75rem !important;
}
div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}
html.dark div.dataTables_wrapper div.dataTables_filter label {
    color: #94a3b8 !important;
}
div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0 !important;
    width: 220px !important;
}

/* =========================================================================
   15. COLLAPSIBLE SLIM / MINI SIDEBAR & FLOATING HOVER TOOLTIPS
   ========================================================================= */

/* Minimized Sidebar Container Overflow */
.c-sidebar.c-sidebar-minimized,
html body .c-sidebar.c-sidebar-minimized,
html body .c-sidebar.c-sidebar-fixed.c-sidebar-minimized {
    width: 68px !important;
    min-width: 68px !important;
    overflow: visible !important;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (min-width: 992px) {
    .c-sidebar.c-sidebar-fixed.c-sidebar-minimized ~ .c-wrapper {
        margin-left: 68px !important;
        transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* Brand Section in Minimized Mode */
.c-sidebar.c-sidebar-minimized .c-sidebar-brand {
    padding: 0.9rem 0 !important;
    justify-content: center !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-brand .flex.flex-col,
.c-sidebar.c-sidebar-minimized .c-sidebar-brand-name,
.c-sidebar.c-sidebar-minimized .c-sidebar-brand-sub {
    display: none !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-brand a {
    justify-content: center !important;
    gap: 0 !important;
}

/* Navigation list in Minimized Mode */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav {
    padding: 0.75rem 0.4rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-title {
    display: none !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-link,
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-toggle {
    justify-content: center !important;
    padding: 0.65rem 0 !important;
    margin: 4px 0 !important;
    position: relative !important;
    font-size: 0 !important;
    border-radius: 12px !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-icon,
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon {
    margin: 0 !important;
    font-size: 1.05rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-toggle::after {
    display: none !important;
}

/* Dropdown Parent in Minimized Mode */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown {
    position: relative !important;
}

/* Minimized Mode Flyout Submenu Panel */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items {
    display: none !important;
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 0 !important;
    min-width: 230px !important;
    max-width: 320px !important;
    width: max-content !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.3) !important;
    padding: 0.45rem !important;
    margin: 0 !important;
    z-index: 9999999 !important;
    pointer-events: auto !important;
    border-left: none !important;
}

/* Invisible Bridge to maintain hover across spacing */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items::before {
    content: '' !important;
    position: absolute !important;
    left: -12px !important;
    top: 0 !important;
    width: 14px !important;
    height: 100% !important;
    background: transparent !important;
}

/* Light Theme Submenu Panel */
html.light .c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown > .c-sidebar-nav-dropdown-items {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.18), 0 6px 14px -2px rgba(15, 23, 42, 0.08) !important;
    border-left: none !important;
}

/* Show Submenu on Hover, on JS hover-intent, or when clicked open.
   .c-flyout-hover is toggled by JS with a small close delay so moving the
   cursor across the gap (scrollbar rail / margin) toward the flyout does not
   drop the menu -- pure CSS :hover breaks the instant the cursor leaves the
   icon because the gap is not a descendant of the dropdown. */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown:hover > .c-sidebar-nav-dropdown-items,
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown.c-flyout-hover > .c-sidebar-nav-dropdown-items,
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown.c-flyout-open > .c-sidebar-nav-dropdown-items {
    display: block !important;
    animation: sidebarFlyoutIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Keep the perfect-scrollbar rail out of the flyout's hover path when
   minimized -- it sits in the gap and steals the hover mid-transit. */
.c-sidebar.c-sidebar-minimized .ps__rail-y,
.c-sidebar.c-sidebar-minimized .ps__rail-x {
    display: none !important;
}

/* Submenu Flyout Header Title - Hidden in normal expanded sidebar, only visible in minimized flyouts */
.c-sidebar-flyout-header {
    display: none !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-flyout-header {
    display: flex !important;
    align-items: center !important;
    padding: 0.45rem 0.75rem !important;
    margin-bottom: 0.35rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
}

html.light .c-sidebar.c-sidebar-minimized .c-sidebar-flyout-header {
    border-bottom: 1px solid #f1f5f9 !important;
    color: #64748b !important;
}

/* Submenu Items & Links styling in Minimized Flyout */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-item {
    display: block !important;
    margin: 1px 0 !important;
    width: 100% !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-link {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
    margin: 1px 0 !important;
    border-radius: 8px !important;
    transition: all 0.12s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    width: 100% !important;
    line-height: 1.35 !important;
    background: transparent !important;
}

html.light .c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-link {
    color: #334155 !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

html.light .c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-link:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-link.c-active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items .c-sidebar-nav-icon {
    font-size: 0.85rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 0.65rem 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Hide duplicate tooltips on dropdown items in minimized mode */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown > [data-sidebar-tooltip]:hover::after,
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-dropdown-items [data-sidebar-tooltip]:hover::after {
    display: none !important;
}

/* Floating Tooltip on Hover for Single Items in Minimized Mode */
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item > [data-sidebar-tooltip] {
    position: relative !important;
}

.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item > [data-sidebar-tooltip]:hover::after {
    content: attr(data-sidebar-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999999 !important;
    opacity: 1;
    animation: sidebarTooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

html.light .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item > [data-sidebar-tooltip]:hover::after {
    background: #1e293b;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
}

@keyframes sidebarTooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes sidebarFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================================
   PAGINATION — DARK & LIGHT THEME (highest specificity, loaded last)
   Covers: Bootstrap 4 DataTables ul.pagination, plain paginate_button <a>
   ========================================================================= */

/* ---- BASE / LIGHT THEME ---- */
.dataTables_paginate .paginate_button,
.dataTables_paginate ul.pagination .page-item .page-link,
.dataTables_paginate ul.pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.dataTables_paginate .paginate_button:not(.disabled):not(.current):hover,
.dataTables_paginate ul.pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background: #f1f5f9 !important;
    color: #4f46e5 !important;
    border-color: #cbd5e1 !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover,
.dataTables_paginate ul.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(79,70,229,0.35) !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background: #f8fafc !important;
    border-color: #f1f5f9 !important;
    color: #cbd5e1 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ---- DARK THEME ---- */
html.dark .dataTables_paginate .paginate_button,
html.dark .dataTables_paginate ul.pagination .page-item .page-link,
html.dark .dataTables_paginate ul.pagination .page-link {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

html.dark .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover,
html.dark .dataTables_paginate ul.pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background: rgba(51, 65, 85, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html.dark .dataTables_paginate .paginate_button.current,
html.dark .dataTables_paginate .paginate_button.current:hover,
html.dark .dataTables_paginate ul.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45) !important;
}

html.dark .dataTables_paginate .paginate_button.disabled,
html.dark .dataTables_paginate .paginate_button.disabled:hover,
html.dark .dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(148, 163, 184, 0.35) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* DataTables info text ("Showing 1 to X of Y entries") */
html.dark .dataTables_info {
    color: #64748b !important;
    font-size: 0.8rem !important;
}
html.light .dataTables_info {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
}

/* DataTables length select & search input */
html.dark .dataTables_length select,
html.dark .dataTables_filter input {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.65rem !important;
}
html.dark .dataTables_length label,
html.dark .dataTables_filter label {
    color: #64748b !important;
}

/* =========================================================================
   MODAL DIALOGS & POPUPS (GLASS-UI DUAL ENGINE)
   ========================================================================= */

/* Backdrop */
.modal-backdrop.show {
    opacity: 0.75 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
html.dark .modal-backdrop.show {
    background-color: #020617 !important;
}

/* Modal Dialog Shell & Container */
#kpiEmployeeModal #kpiModalDialog,
.modal-dialog .modal-content,
.modal-content {
    border-radius: 1.25rem !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

html.dark #kpiEmployeeModal #kpiModalDialog,
html.dark .modal-dialog .modal-content,
html.dark .modal-content {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

html.light #kpiEmployeeModal #kpiModalDialog,
html.light .modal-dialog .modal-content,
html.light .modal-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

/* Modal Header & Footer Bars */
#kpiEmployeeModal #kpiModalDialog > div:first-child,
.modal-header {
    padding: 1.1rem 1.5rem !important;
    align-items: center !important;
}

html.dark #kpiEmployeeModal #kpiModalDialog > div:first-child,
html.dark .modal-header {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.light #kpiEmployeeModal #kpiModalDialog > div:first-child,
html.light .modal-header {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#kpiEmployeeModal #kpiModalDialog > div:last-child,
.modal-footer {
    padding: 0.9rem 1.5rem !important;
}

html.dark #kpiEmployeeModal #kpiModalDialog > div:last-child,
html.dark .modal-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.light #kpiEmployeeModal #kpiModalDialog > div:last-child,
html.light .modal-footer {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Modal Table Content */
#kpiEmployeeModal table,
.modal table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

html.dark #kpiEmployeeModal table thead th,
html.dark .modal table thead th {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.light #kpiEmployeeModal table thead th,
html.light .modal table thead th {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* =========================================================================
   KPI DRILL-DOWN MODAL FIXES (Always on top of sidebar & header)
   ========================================================================= */
#kpiEmployeeModal {
    z-index: 99999 !important;
    position: fixed !important;
}

html.dark #kpiEmployeeModal table tbody td,
html.dark .modal table tbody td {
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
    background: transparent !important;
}

html.light #kpiEmployeeModal table tbody td,
html.light .modal table tbody td {
    padding: 0.75rem 0.85rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    background: transparent !important;
}

html.dark #kpiEmployeeModal table tbody tr:hover td,
html.dark .modal table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

html.light #kpiEmployeeModal table tbody tr:hover td,
html.light .modal table tbody tr:hover td {
    background: #f8fafc !important;
}