/* ════════════════════════════════════════════════════════════════════
   📁 wwwroot/css/site-globals.css
   🌐 MEWHR — Global Fonts, Sidebar, DataTables & Grids
   
   📋 Sections:
   1. Cairo Font Loading
   2. Sidebar Menu Readability
   3. Dark Mode Sidebar
   4. Form Labels
   5. DataTables Text Colors
   6. DataTables ColVis Dropdown
   7. Employee Raise Grid Tokens
   8. Unified Grid Styling
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   1️⃣ CAIRO FONT - Fixed paths
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1️⃣ CAIRO FONT - From Google Fonts CDN
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* Force Cairo everywhere except icon fonts */
html,
body,
body *,
button,
input,
select,
textarea,
table,
.dataTable,
.dt-button,
.dropdown-menu,
.modal,
.offcanvas,
.tooltip,
.popover,
.select2-container,
.select2-dropdown,
.select2-results__option,
.swal2-popup,
.swal2-popup * {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', 'Tahoma', sans-serif !important;
}

/* Don't override icon fonts */
.bx,
[class*=" bx-"],
[class^="bx-"],
.bxs,
.bxl,
.fa,
[class*=" fa-"],
[class^="fa-"],
.bi,
[class*=" bi-"],
[class^="bi-"],
.material-icons,
.material-symbols-outlined {
    font-family: inherit !important;
}

/* Set the right family back on icon-specific fonts */
.bx,
[class*=" bx-"],
[class^="bx-"] {
    font-family: 'boxicons' !important;
}

.fa,
[class*=" fa-"],
[class^="fa-"],
.fas,
.far,
.fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

/* Font rendering improvements */
html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ════════════════════════════════════════════════════════════════════
   2️⃣ SIDEBAR MENU READABILITY
   ════════════════════════════════════════════════════════════════════ */

.layout-menu .menu-link {
    color: #2f2f2f !important;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.layout-menu .menu-sub .menu-link {
    color: #444 !important;
    font-weight: 400;
}

.layout-menu .menu-item.active > .menu-link,
.layout-menu .menu-item.open > .menu-link {
    color: #111827 !important;
    font-weight: 600;
}

.layout-menu .menu-icon {
    color: #1f2937 !important;
}

.layout-menu .menu-link:hover {
    color: #1f4e79 !important;
}

/* Menu titles / subtitles */
.menu-title {
    color: #0f172a;
    font-weight: 800;
}

.menu-subtitle {
    color: #1f2937;
    font-weight: 700;
}

.menu-item.active > .menu-link .menu-title,
.menu-item.open > .menu-link .menu-title {
    color: #0f172a;
    font-weight: 900;
}

.menu-vertical .menu-icon {
    color: #0f172a !important;
}


/* ════════════════════════════════════════════════════════════════════
   3️⃣ DARK MODE - Sidebar
   ════════════════════════════════════════════════════════════════════ */

.dark-style .menu-title,
html[data-theme="dark"] .menu-title {
    color: #ffffff;
    font-weight: 800;
}

.dark-style .menu-subtitle,
html[data-theme="dark"] .menu-subtitle {
    color: #ffffff;
    font-weight: 700;
}

.dark-style .menu-item.active > .menu-link .menu-title,
html[data-theme="dark"] .menu-item.active > .menu-link .menu-title {
    color: #ffffff;
    font-weight: 900;
}

.dark-style .menu-vertical .menu-icon,
html[data-theme="dark"] .menu-vertical .menu-icon {
    color: #ffffff !important;
}


/* ════════════════════════════════════════════════════════════════════
   4️⃣ FORM LABELS - Small Size Readability
   ════════════════════════════════════════════════════════════════════ */

.form-label.small {
    color: #1f2937 !important;
}

.dark-style .form-label.small,
html[data-theme="dark"] .form-label.small {
    color: #e2e8f0 !important;
}


/* ════════════════════════════════════════════════════════════════════
   5️⃣ DATATABLES - Text Color
   ════════════════════════════════════════════════════════════════════ */

table.dataTable {
    --bs-table-color: #1f2937;
    --bs-table-striped-color: #1f2937;
}

.dark-style table.dataTable,
html[data-theme="dark"] table.dataTable {
    --bs-table-color: #e2e8f0;
    --bs-table-striped-color: #e2e8f0;
}

table.dataTable thead th,
table.dataTable tbody td,
table.dataTable .text-primary,
table.dataTable .text-muted {
    color: var(--bs-table-color) !important;
}


/* ════════════════════════════════════════════════════════════════════
   6️⃣ DATATABLES - ColVis Dropdown
   ════════════════════════════════════════════════════════════════════ */

.dt-button-collection {
    min-width: 300px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

    .dt-button-collection.two-column {
        min-width: 500px !important;
        transform: translateX(-50%) !important;
    }

        .dt-button-collection.two-column .dt-button {
            width: 48% !important;
            float: left !important;
            margin: 1% !important;
            clear: none !important;
        }

    .dt-button-collection .dt-button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        margin: 4px 0 !important;
        border-radius: 6px !important;
        border: 1px solid transparent !important;
        background: #f8f9fa !important;
        color: #495057 !important;
        text-align: right !important;
        font-family: 'Cairo', sans-serif !important;
        font-size: 0.813rem !important;
        transition: all 0.18s ease !important;
    }

        .dt-button-collection .dt-button:hover {
            background: #e9ecef !important;
            border-color: #cbd5e1 !important;
        }

        .dt-button-collection .dt-button.active {
            background: #e6edf5 !important;
            border-color: #1f4e79 !important;
            color: #1f4e79 !important;
            font-weight: 600 !important;
        }

            .dt-button-collection .dt-button.active::before {
                content: "✓ " !important;
                margin-left: 8px !important;
                font-weight: bold !important;
            }

        .dt-button-collection .dt-button:not(.active)::before {
            content: "✗ " !important;
            margin-left: 8px !important;
            opacity: 0.6 !important;
        }

    .dt-button-collection .dt-button-collection-title {
        font-family: 'Cairo', sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.813rem !important;
        color: #1f2937 !important;
        padding: 10px 0 !important;
        margin-bottom: 10px !important;
        border-bottom: 2px solid #e2e8f0 !important;
        text-align: center !important;
    }

.dt-button-background {
    display: none !important;
}

/* ColVis Dark Mode */
.dark-style .dt-button-collection,
html[data-theme="dark"] .dt-button-collection {
    background: #1e293b !important;
    border-color: #334155 !important;
}

    .dark-style .dt-button-collection .dt-button,
    html[data-theme="dark"] .dt-button-collection .dt-button {
        background: #243247 !important;
        color: #cbd5e1 !important;
        border-color: #334155 !important;
    }

        .dark-style .dt-button-collection .dt-button:hover,
        html[data-theme="dark"] .dt-button-collection .dt-button:hover {
            background: #293951 !important;
        }

        .dark-style .dt-button-collection .dt-button.active,
        html[data-theme="dark"] .dt-button-collection .dt-button.active {
            background: #1c3a5e !important;
            color: #7db7e8 !important;
            border-color: #7db7e8 !important;
        }

    .dark-style .dt-button-collection .dt-button-collection-title,
    html[data-theme="dark"] .dt-button-collection .dt-button-collection-title {
        color: #f8f9fa !important;
        border-color: #334155 !important;
    }


/* ════════════════════════════════════════════════════════════════════
   7️⃣ EMPLOYEE RAISE GRID - Color Tokens
   ════════════════════════════════════════════════════════════════════ */

:root {
    --civil-bg: #f0f7ff;
    --civil-border: #b7d8ff;
    --local-bg: #f6fff3;
    --local-border: #c9edc1;
    --neutral-bg: #ffffff;
    --table-head-bg: #f1f3f5;
    --table-border: #dee2e6;
    --text-primary: #1f2937;
    --text-muted: #6b7280;
    --row-hover: brightness(0.97);
}

html.dark-style {
    --civil-bg: #1f2a3a;
    --civil-border: #2f3f57;
    --local-bg: #1e2f26;
    --local-border: #2f4f3a;
    --neutral-bg: #1b1f2a;
    --table-head-bg: #23283b;
    --table-border: #2f344a;
    --text-primary: #e4e6eb;
    --text-muted: #9ca3af;
    --row-hover: brightness(1.08);
}

/* Civil columns */
#employeeRaiseGrid th.col-civil,
#employeeRaiseGrid td.col-civil {
    background-color: var(--civil-bg) !important;
    border-right: 1px solid var(--civil-border) !important;
}

/* Local columns */
#employeeRaiseGrid th.col-local,
#employeeRaiseGrid td.col-local {
    background-color: var(--local-bg) !important;
    border-right: 1px solid var(--local-border) !important;
}

/* Neutral columns */
#employeeRaiseGrid th.col-neutral,
#employeeRaiseGrid td.col-neutral {
    background-color: var(--neutral-bg) !important;
}

/* Base grid styling */
#employeeRaiseGrid th,
#employeeRaiseGrid td {
    color: var(--text-primary) !important;
    border-color: var(--table-border) !important;
}

#employeeRaiseGrid thead th {
    background-color: var(--table-head-bg) !important;
    color: var(--text-primary) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--table-border);
}

html.dark-style #employeeRaiseGrid thead th {
    color: #e4e6eb !important;
}

/* Row hover */
#employeeRaiseGrid tbody tr:hover td {
    filter: var(--row-hover);
    transition: filter 0.2s ease-in-out;
}

/* Selected row */
#employeeRaiseGrid tbody tr.row-selected td {
    background: linear-gradient(180deg, #fffbe6 0%, #fff4c4 100%) !important;
}

#employeeRaiseGrid tbody tr.row-selected:hover td {
    filter: brightness(0.98);
}

/* Employee name link */
.employee-name-link {
    color: #1f4e79;
}

html.dark-style .employee-name-link {
    color: #8ea2ff;
}

.employee-eye {
    color: var(--text-muted);
}

.employee-name-link:hover .employee-eye {
    color: #1f4e79;
}

.row-select:checked {
    accent-color: #1f4e79;
}


/* ════════════════════════════════════════════════════════════════════
   8️⃣ FILTER TAGS
   ════════════════════════════════════════════════════════════════════ */

#activeFilterTags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.filter-tag {
    background-color: #f8f9fa !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.813rem;
}

    .filter-tag .btn-close {
        font-size: 0.813rem;
    }


/* ════════════════════════════════════════════════════════════════════
   9️⃣ ACTION COLUMN & UNIFIED GRID
   ════════════════════════════════════════════════════════════════════ */

.actions-col {
    white-space: nowrap;
    min-width: 160px;
    overflow: visible;
}

#employeeRaiseGrid .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    #employeeRaiseGrid .btn-icon i {
        font-size: 0.813rem;
        line-height: 1;
    }

/* Unified Grid */
#UnifiedGrid {
    font-size: 0.813rem;
}

    #UnifiedGrid th {
        font-weight: 600;
    }

    #UnifiedGrid .btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #UnifiedGrid .btn-warning {
        background-color: #f59e0b;
        border-color: #f59e0b;
    }

    #UnifiedGrid .btn-info {
        background-color: #06b6d4;
        border-color: #06b6d4;
    }