/* =========================================================
   Recruitment Dashboard — SCOPED STYLES (Bootstrap-aware)
   ========================================================= */

/* ---------- Layout: two-column dashboard ---------- */
.recruitment-dashboard {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
}

@media (max-width: 1200px) {
    .recruitment-dashboard {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   KPI BAND
   ========================================================= */

/* KPI band as a responsive grid */
.recruitment-dashboard .kpi-band > .dxbl-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 992px) {
    .recruitment-dashboard .kpi-band > .dxbl-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .recruitment-dashboard .kpi-band > .dxbl-row {
        grid-template-columns: 1fr;
    }
}

/* Neutralize DevExpress column sizing inside kpi band */
.recruitment-dashboard .kpi-band .dxbl-fl-item.dxbl-col {
    flex: initial !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Tile look */
.recruitment-dashboard .kpi-band {
    padding-top: 15px;
}

    .recruitment-dashboard .kpi-band,
    .recruitment-dashboard .kpi-band > .dxbl-row,
    .recruitment-dashboard .kpi-band .dxbl-fl-item {
        overflow: visible !important;
    }

.recruitment-dashboard .kpi {
    border-radius: 14px;
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.07));
    box-shadow: 0 6px 14px rgba(0,0,0,.05);
    background: var(--bs-card-bg, #fff);
    padding: 16px 20px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* Caption */
    .recruitment-dashboard .kpi .dxbl-fl-cpt {
        display: block;
        margin-bottom: 8px;
        opacity: .75;
        font-size: .85rem;
        font-weight: 500;
        color: var(--bs-secondary-color, #6c757d);
        text-align: left;
    }

    /* Flatten editors & remove buttons */
    .recruitment-dashboard .kpi .dxbl-text-edit,
    .recruitment-dashboard .kpi .dxbl-editor,
    .recruitment-dashboard .kpi dxbl-spinedit,
    .recruitment-dashboard .kpi dxbl-date-edit {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100%;
    }

    .recruitment-dashboard .kpi .dxbl-spin-btns,
    .recruitment-dashboard .kpi .dxbl-number-box .dxbl-spin-button,
    .recruitment-dashboard .kpi .dxbl-btn-group-right,
    .recruitment-dashboard .kpi .dxbl-edit-btn-dropdown,
    .recruitment-dashboard .kpi .dxbl-editor-buttons,
    .recruitment-dashboard .kpi .dxbl-btn-group {
        display: none !important;
    }

    /* Value row + text */
    .recruitment-dashboard .kpi .dxbl-fl-ctrl {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        min-height: 34px;
        width: 100% !important;
    }

    .recruitment-dashboard .kpi .dxbl-text-edit-input,
    .recruitment-dashboard .kpi input[disabled],
    .recruitment-dashboard .kpi .dxbl-text-edit-input:disabled {
        color: var(--bs-emphasis-color, var(--bs-body-color, #212529)) !important;
        -webkit-text-fill-color: currentColor;
        opacity: 1 !important;
        font: 700 1.6rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        text-align: left;
        width: 100% !important;
        min-height: 2rem;
        font-variant-numeric: tabular-nums;
    }

/* Optional status badges (now Bootstrap colors) */
.recruitment-dashboard .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.recruitment-dashboard .badge-pending {
    background: var(--bs-warning-bg-subtle, #fff6d9);
    border-color: var(--bs-warning-border-subtle, #f6e7aa);
    color: var(--bs-warning-text-emphasis, #8a6d3b);
}

.recruitment-dashboard .badge-approved {
    background: var(--bs-success-bg-subtle, #e9f7ef);
    border-color: var(--bs-success-border-subtle, #cfe8da);
    color: var(--bs-success-text-emphasis, #1f6036);
}

.recruitment-dashboard .badge-rejected {
    background: var(--bs-danger-bg-subtle, #fdecee);
    border-color: var(--bs-danger-border-subtle, #f8cbd1);
    color: var(--bs-danger-text-emphasis, #7e1c28);
}

/* =========================================================
   GRIDS
   ========================================================= */

/* Kill wrapper backgrounds around grids (DashboardView nesting) */
.recruitment-dashboard .dxbl-fl-item,
.recruitment-dashboard .dxbl-fl-ctrl,
.recruitment-dashboard .dxbl-fl-ctrl .nested-frame,
.recruitment-dashboard .dxbl-fl-ctrl .nested-frame .nested-content,
.recruitment-dashboard .dxbl-fl-ctrl .nested-frame .nested-content .grid-content {
    background: transparent !important;
}

/* Grid card chrome + hard clip so rounded corners always show */
.recruitment-dashboard .dxbl-grid {
    --rd: 14px;
    position: relative;
    display: flex; /* equal-height support */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 340px; /* tweak to taste */
    border-radius: var(--rd);
    border: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    overflow: hidden;
    clip-path: inset(0 round var(--rd));
    -webkit-clip-path: inset(0 round var(--rd));
    isolation: isolate;
}

    /* Make all internal layers transparent (no inner fills) */
    .recruitment-dashboard .dxbl-grid .dxbl-grid-top-panel,
    .recruitment-dashboard .dxbl-grid .dxbl-scroll-viewer,
    .recruitment-dashboard .dxbl-grid .dxbl-scroll-viewer-content,
    .recruitment-dashboard .dxbl-grid .dxbl-grid-table,
    .recruitment-dashboard .dxbl-grid .dxbl-grid-bottom-panel,
    .recruitment-dashboard .dxbl-grid .dxbl-pager-container,
    .recruitment-dashboard .dxbl-grid .dxbl-grid-table thead,
    .recruitment-dashboard .dxbl-grid .dxbl-grid-table tbody,
    .recruitment-dashboard .dxbl-grid .dxbl-grid-table tfoot,
    .recruitment-dashboard .dxbl-grid .dxbl-scroll-viewer-hor-scroll-bar,
    .recruitment-dashboard .dxbl-grid .dxbl-scroll-viewer-vert-scroll-bar {
        background: transparent !important;
        border: 0 !important;
    }
        /* Remove theme pseudo-layers */
        .recruitment-dashboard .dxbl-grid::before,
        .recruitment-dashboard .dxbl-grid::after,
        .recruitment-dashboard .dxbl-grid .dxbl-grid-table::before,
        .recruitment-dashboard .dxbl-grid .dxbl-grid-table::after {
            content: none !important;
        }

        /* Basic table spacing + header */
        .recruitment-dashboard .dxbl-grid .dxbl-grid-table th,
        .recruitment-dashboard .dxbl-grid .dxbl-grid-table td {
            padding: 8px 12px !important;
        }

    .recruitment-dashboard .dxbl-grid .dxbl-grid-header-row th {
        font-weight: 600;
        color: var(--bs-body-color, #2b2b2b);
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
    }

    /* Column resize indicators */
    .recruitment-dashboard .dxbl-grid .dxbl-grid-column-resize-anchor div,
    .recruitment-dashboard .dxbl-grid .dxbl-grid-columns-separator div {
        background-color: var(--bs-border-color-translucent, rgba(0,0,0,.06)) !important;
    }

    /* Zebra + hover (very subtle, works in light/dark) */
    .recruitment-dashboard .dxbl-grid .dxbl-grid-table tbody tr:nth-child(even) td {
        background: color-mix(in srgb, var(--bs-body-color, #000) 2%, transparent);
    }

    .recruitment-dashboard .dxbl-grid .dxbl-grid-table tbody tr:hover td {
        background: color-mix(in srgb, var(--bs-body-color, #000) 4%, transparent);
    }

    /* Group rows */
    .recruitment-dashboard .dxbl-grid .dxbl-grid-group-row td {
        border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
        font-weight: 600;
    }

    /* Empty state */
    .recruitment-dashboard .dxbl-grid .dxbl-grid-empty-data-area,
    .recruitment-dashboard .dxbl-grid .xaf-empty-data-text {
        color: var(--bs-secondary-color, rgba(0,0,0,.45));
        font-style: italic;
        padding: 20px 0;
    }

    /* Pager / bottom panel */
    .recruitment-dashboard .dxbl-grid .dxbl-pager-container {
        border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.06));
        background: transparent !important;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    .recruitment-dashboard .dxbl-grid .dxbl-pager .dxbl-btn {
        border-radius: 10px;
        min-width: 36px;
        height: 32px;
        line-height: 30px;
    }

    .recruitment-dashboard .dxbl-grid .dxbl-pager .dxbl-pager-active-page-btn {
        border-color: var(--bs-border-color, rgba(0,0,0,.15));
        box-shadow: inset 0 2px 6px rgba(0,0,0,.06);
    }

    /* Filter funnels – lighter look */
    .recruitment-dashboard .dxbl-grid .dxbl-grid-filter-menu-funnel-btn {
        border-color: var(--bs-border-color, rgba(0,0,0,.12));
        opacity: .75;
    }

        .recruitment-dashboard .dxbl-grid .dxbl-grid-filter-menu-funnel-btn:hover {
            opacity: 1;
        }

    /* Checkbox display centering */
    .recruitment-dashboard .dxbl-grid .dxbl-checkbox-display-view-checked,
    .recruitment-dashboard .dxbl-grid .dxbl-checkbox-display-view-unchecked {
        margin: 0 auto;
    }

    /* Page Size combobox — single rounded pill */
    .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-text-edit {
        display: flex !important;
        align-items: center;
        min-width: 150px;
        height: 40px;
        border: 1px solid var(--bs-border-color, rgba(0,0,0,.14)) !important;
        border-radius: 18px !important;
        background: var(--bs-body-bg, #fff) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-text-edit-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 100% !important;
        line-height: 40px !important;
        padding: 0 14px !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--bs-body-color, #212529);
    }

    .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-btn-group-right {
        flex: 0 0 42px !important;
        height: 100% !important;
        background: transparent !important;
    }

    .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-edit-btn-dropdown {
        height: 100% !important;
        border: 0 !important;
        border-left: 1px solid var(--bs-border-color, rgba(0,0,0,.12)) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

        .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-edit-btn-dropdown:hover,
        .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-edit-btn-dropdown:focus {
            background: color-mix(in srgb, var(--bs-body-color, #000) 4%, transparent) !important;
        }

/* Helper classes */
.recruitment-dashboard .col-tight {
    width: 120px;
    white-space: nowrap;
}

.recruitment-dashboard .col-date {
    width: 140px;
    white-space: nowrap;
}

.recruitment-dashboard .col-status {
    width: 120px;
    white-space: nowrap;
    text-align: center;
}

/* Optional density switch */
.recruitment-dashboard .grid-compact .dxbl-grid .dxbl-grid-table th,
.recruitment-dashboard .grid-compact .dxbl-grid .dxbl-grid-table td {
    padding: 6px 8px !important;
}

/* =========================================================
   EQUAL HEIGHT GRIDS (per row)
   ========================================================= */
.recruitment-dashboard .dxbl-row {
    align-items: stretch;
}

.recruitment-dashboard .dxbl-fl-item {
    display: flex;
    flex-direction: column;
}

    .recruitment-dashboard .dxbl-fl-item > .dxbl-fl-ctrl {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

.recruitment-dashboard .dxbl-grid .dxbl-scroll-viewer {
    flex: 1 1 auto;
    min-height: 0;
}

.recruitment-dashboard .dxbl-grid .dxbl-pager-container,
.recruitment-dashboard .dxbl-grid .dxbl-grid-bottom-panel {
    flex: 0 0 auto;
}

/* KPI: stack caption above value (override DevExpress horizontal layout) */
.recruitment-dashboard .kpi-band .dxbl-fl-item.dxbl-fl-item-horizontal {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.recruitment-dashboard .kpi-band .dxbl-fl-item .dxbl-fl-cpt {
    width: 100%;
    margin-bottom: 8px;
}

.recruitment-dashboard .kpi-band .dxbl-fl-item .dxbl-fl-ctrl {
    width: 100%;
    display: flex !important;
    align-items: center;
    min-height: 34px;
}

/* Unify card shadow for KPI tiles and grids */
.recruitment-dashboard {
    --card-shadow: 0 6px 14px rgba(0,0,0,.05);
}

    .recruitment-dashboard .kpi,
    .recruitment-dashboard .dxbl-grid {
        box-shadow: var(--card-shadow) !important;
    }

        /* Make grid section titles match KPI titles */
        .recruitment-dashboard .kpi .dxbl-fl-cpt,
        .recruitment-dashboard .dxbl-fl-item > .dxbl-fl-cpt {
            display: block;
            margin: 0 0 8px;
            opacity: .75;
            font-size: .85rem;
            font-weight: 500;
            color: var(--bs-secondary-color, #6c757d);
            text-align: left;
        }

/* =========================================
   Pill-shaped titles for grid sections only
   ========================================= */
.recruitment-dashboard {
    --grid-title-bg: var(--bs-tertiary-bg, #f1f5f9);
    --grid-title-fg: var(--bs-body-color, #0f172a);
    --grid-title-border: var(--bs-border-color, rgba(0,0,0,.12));
}

    .recruitment-dashboard .dxbl-fl-item:has(.dxbl-grid) > .dxbl-fl-cpt {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 10px;
        padding: 6px 12px;
        line-height: 1;
        font-size: .85rem;
        font-weight: 600;
        color: var(--grid-title-fg);
        border: 1px solid var(--grid-title-border);
        border-radius: 9999px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04) inset, 0 1px 2px rgba(0,0,0,.04);
        opacity: 1;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
        /* Accent dot uses Bootstrap primary color */
        .recruitment-dashboard .dxbl-fl-item:has(.dxbl-grid) > .dxbl-fl-cpt::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(var(--bs-primary-rgb, 13,110,253), .9), rgba(var(--bs-primary-rgb, 13,110,253), 1));
            box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13,110,253), .15);
        }

    /* Optional color variants (work with Bootstrap subtle vars, too) */
    .recruitment-dashboard .dxbl-fl-item.grid-title-green > .dxbl-fl-cpt {
        --grid-title-bg: var(--bs-success-bg-subtle, #ecfdf5);
        --grid-title-fg: var(--bs-success-text-emphasis, #064e3b);
        --grid-title-border: var(--bs-success-border-subtle, #a7f3d0);
    }

    .recruitment-dashboard .dxbl-fl-item.grid-title-amber > .dxbl-fl-cpt {
        --grid-title-bg: var(--bs-warning-bg-subtle, #fffbeb);
        --grid-title-fg: var(--bs-warning-text-emphasis, #78350f);
        --grid-title-border: var(--bs-warning-border-subtle, #fde68a);
    }

    .recruitment-dashboard .dxbl-fl-item.grid-title-rose > .dxbl-fl-cpt {
        --grid-title-bg: var(--bs-danger-bg-subtle, #fff1f2);
        --grid-title-fg: var(--bs-danger-text-emphasis, #881337);
        --grid-title-border: var(--bs-danger-border-subtle, #fecdd3);
    }
/* ================================================
   Dark-mode catch-all (Bootstrap + DevExpress)
   Put at the END of recruitment-dashboard.css
   ================================================ */
:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html[class*="dxbl"] .dxbl-fluent-dark, html.dxbl-fluent-dark, html.dx-theme-dark, body.dx-theme-dark ) .recruitment-dashboard {
    --card-bg: var(--bs-card-bg, #1f2226);
    --card-text: var(--bs-body-color, #e8e8e8);
    --card-border: var(--bs-border-color, rgba(255,255,255,.14));
    --muted: var(--bs-secondary-color, #b7bcc3);
    --shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* Cards (KPI + Grid) */
:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard :is(.kpi, .dxbl-grid) {
    background: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--shadow) !important;
}

/* KPI: kill any inner white editor chrome */
:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .kpi
:is(.dxbl-text-edit, .dxbl-editor, .dxbl-number-box, .dxbl-date-edit, .dxbl-text-edit-input, .dxbl-editor-container, .dxbl-btn-group, .dxbl-spin-btns) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Grid internals transparent + readable */
:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid
:is(.dxbl-grid-top-panel, .dxbl-scroll-viewer, .dxbl-scroll-viewer-content, .dxbl-grid-table, .dxbl-grid-bottom-panel, .dxbl-pager-container, .dxbl-scroll-viewer-hor-scroll-bar, .dxbl-scroll-viewer-vert-scroll-bar) {
    background: transparent !important;
    border-color: transparent !important;
}

:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid .dxbl-grid-table th {
    color: var(--card-text) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid .dxbl-grid-table td {
    color: var(--card-text) !important;
    background: transparent !important;
    border-color: var(--card-border) !important;
}

/* Zebra + hover (subtle on dark) */
:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid .dxbl-grid-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--card-bg) 88%, var(--card-text)) !important;
}

:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid .dxbl-grid-table tbody tr:hover td {
    background: color-mix(in srgb, var(--card-bg) 82%, var(--card-text)) !important;
}

/* Pager pill on dark */
:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-text-edit {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

:is( [data-bs-theme="dark"], html[class*="dark"], body[class*="dark"], html.dx-theme-dark, body.dx-theme-dark, html.dxbl-fluent-dark ) .recruitment-dashboard .dxbl-grid .dxbl-pager-container .dxbl-edit-btn-dropdown {
    border-left: 1px solid var(--card-border) !important;
}
/* Kill zebra banding inside grids (it clashes in dark themes) */
.recruitment-dashboard .dxbl-grid .dxbl-grid-table tbody tr:nth-child(even) td {
    background: transparent !important;
}

/* Group rows: subtle, theme-friendly strip */
.recruitment-dashboard .dxbl-grid .dxbl-grid-group-row td {
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.12)) !important;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.12)) !important;
}