/* =============================================================================
   radzen-grid.css — Radzen DataGrid restyle, written against the ACTUAL rendered
   DOM (from DevTools), not assumed structure.

   WHY THE PREVIOUS ATTEMPT FAILED, and how this fixes it:
   Radzen ships its own theme CSS (material-base.css) with hardcoded colors on
   high-specificity selectors, and — critically — the text color lives on INNER
   spans (.rz-cell-data, .rz-column-title-content), not on the <td>/<th>. Styling
   the cell elements did nothing because the inner span kept Radzen's own color.
   This version:
     1. Targets the real inner elements the DOM actually uses.
     2. Scopes every selector under .rz-data-grid and, for dark mode, under
        [data-bs-theme="dark"] — raising specificity enough to win over Radzen's
        base theme WITHOUT needing !important everywhere (used only where Metronic's
        own utilities otherwise tie).
     3. Does NOT rely on --bs-* variables flowing through Radzen (they don't). Dark
        colors are set explicitly under [data-bs-theme="dark"], matching Metronic's
        near-black surface.

   RTL note: Radzen emits a physical .rz-text-align-left class on headers. To keep
   headers on the correct side in Arabic, [dir="rtl"] flips it to right-align.
   ============================================================================= */

/* =========================================================================
   LIGHT (default) — also the base both themes share for layout/spacing
   ========================================================================= */
/* Make Radzen HtmlEditor follow Bootstrap variables */
/*.rz-html-editor,
.rz-html-editor .rz-toolbar,
.rz-html-editor-content {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}*/

[data-bs-theme="dark"] .rz-form-field:hover .rz-form-field-content, [data-bs-theme="dark"] .rz-autocomplete:hover:not(.rz-state-disabled), [data-bs-theme="dark"] .rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-colorpicker:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-lookup-search-input-container input:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-numeric:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-multiselect:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .mask:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-textarea:not(:disabled):not(.rz-state-disabled):hover, [data-bs-theme="dark"] .rz-textbox:not(:disabled):not(.rz-state-disabled):hover {
    background-color: #1b1c22;
}

[data-bs-theme="dark"] .rz-spreadsheet-highlight-popup, [data-bs-theme="dark"] .rz-splitbutton-menu, [data-bs-theme="dark"] .rz-autocomplete-panel, [data-bs-theme="dark"] .rz-multiselect-panel, [data-bs-theme="dark"] .rz-dropdown-panel {
    background-color: #1b1c22;
}

[data-bs-theme="dark"] .rz-form-field.rz-state-focused .rz-form-field-content, [data-bs-theme="dark"] .rz-numeric:focus-within:not(.rz-state-disabled), [data-bs-theme="dark"] .rz-autocomplete:focus-within:not(.rz-state-disabled), [data-bs-theme="dark"] .rz-timespanpicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-lookup-search-input-container input:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .mask:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, [data-bs-theme="dark"] .rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    box-shadow: var(--rz-input-focus-shadow);
    background-color: #1b1c22;
    border-block-end: var(--rz-input-focus-border-block-end);
    outline: var(--rz-input-focus-outline);
    outline-offset: var(--rz-input-focus-outline-offset);
}


/* Was #1b1c22 on both — the exact color of the panel itself, so a hovered row
   was invisible in dark mode (same bg, and --rz-dropdown-item-hover-color is
   never re-themed by Radzen for dark either). Use a bg that's actually
   distinct from the panel, and force a readable text color to match. */
[data-bs-theme="dark"] .rz-menuitem:hover, [data-bs-theme="dark"] .rz-autocomplete-list-item:hover, [data-bs-theme="dark"] .rz-multiselect-item:hover, [data-bs-theme="dark"] .rz-autocomplete-items li:hover, [data-bs-theme="dark"] .rz-dropdown-items li:hover, [data-bs-theme="dark"] .rz-multiselect-items li:hover, [data-bs-theme="dark"] .rz-dropdown-item:hover {
    background-color: var(--bs-gray-200) !important;
    color: var(--bs-body-color) !important;
    border-radius: 0;
}

.rz-multiselect-trigger .rzi-chevron-down:before, .rz-dropdown-trigger .rzi-chevron-down:before
{
    content: "";
}


.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
    background-color: #9a9aa11f;
    color: #949ba4;
    box-shadow: var(--rz-dropdown-item-selected-shadow);
    border-radius: 0;
}

[data-bs-theme="dark"] .rz-state-highlight.rz-menuitem, [data-bs-theme="dark"] .rz-state-highlight.rz-autocomplete-list-item, [data-bs-theme="dark"] .rz-state-highlight.rz-multiselect-item, [data-bs-theme="dark"] .rz-autocomplete-items li.rz-state-highlight, [data-bs-theme="dark"] .rz-dropdown-items li.rz-state-highlight, [data-bs-theme="dark"] .rz-multiselect-items li.rz-state-highlight, [data-bs-theme="dark"] .rz-dropdown-item.rz-state-highlight {
    background-color: #8080911f;
    color: #cecddf;
    box-shadow: var(--rz-dropdown-item-selected-shadow);
    border-radius: 0;
}
.rz-html-editor, .rz-html-editor .rz-toolbar, .rz-html-editor-content {
    background-color: #f9f9f9 !important;
    color: #26272f !important;
    border-color: #f9f9f9 !important;
}

    /* toolbar buttons */
    .rz-html-editor .rz-button {
        background-color: transparent !important;
        color: var(--bs-body-color) !important;
        border-color: transparent !important;
    }

        /* hovered/active toolbar */
        .rz-html-editor .rz-button:hover,
        .rz-html-editor .rz-button:active {
            background-color: rgba(255,255,255,0.04) !important;
        }

.rz-html-editor-content {
    padding: 0.75rem;
    min-height: 200px;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
}

.rz-data-grid,
.rz-data-grid .rz-grid-table {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

.rz-data-grid {
    border: 0px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

    /* ---- Header cells ---- */
    .rz-data-grid .rz-grid-table thead th {
        background-color: var(--bs-body-bg);
        border-bottom: 1px solid var(--bs-border-color);
        padding-block: 0.85rem;
        padding-inline: 0.75rem;
    }

        /* Header TEXT lives on this inner span — this is the element that must be
recolored and bolded (the previous attempt missed it). */
        .rz-data-grid .rz-grid-table thead th .rz-column-title-content {
            color: var(--bs-body-color);
            font-weight: 700;
            font-size: 0.8125rem;
        }

    /* ---- Body rows ---- */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td {
        border-bottom: 1px solid var(--bs-border-color);
        padding-block: 0.75rem;
        padding-inline: 0.75rem;
        height: 64px;
        vertical-align: middle;
        background-color: var(--bs-body-bg);
    }

        /* Cell TEXT lives on .rz-cell-data — the actual element carrying Radzen's color.
This is the fix for "text stays black in dark mode". */
        .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td .rz-cell-data {
            color: var(--bs-body-color);
        }

    /* Zebra striping — light mode: subtle stripe on even rows. */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row:nth-child(even) > td {
        background-color: var(--bs-tertiary-bg);
    }

    .rz-data-grid .rz-grid-table tbody tr.rz-data-row:hover > td {
        background-color: var(--bs-secondary-bg);
    }

/* ---- Thumbnail (already present in your markup as .grid-thumb) ---- */
.grid-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    display: block;
}

/* ---- Pager — separated buttons (per target): plain borderless numbers with
   spacing, ONLY the active page is a filled blue rounded square. Group is
   START-aligned (left in LTR, right in RTL), all side by side, no space-between.
   Structure confirmed from real DOM:
   nav.rz-pager > ul.rz-pager-pages > li.rz-pager-item > button.rz-pager-element ---- */
.rz-data-grid .rz-pager {
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start !important; /* start-aligned; beats rz-align-justify */
}

    .rz-data-grid .rz-pager .rz-pager-pages {
        display: flex;
        gap: 0.25rem; /* small even spacing between buttons */
        justify-content: flex-start !important;
        width: auto !important; /* stop it stretching full-width (Radzen default) */
        flex: 0 0 auto !important; /* don't let rz-align-justify grow it to fill the nav */
        margin: 0;
        padding: 0;
    }

    .rz-data-grid .rz-pager .rz-pager-item {
        flex: 0 0 auto;
    }

/* Each button: plain, borderless, no fill (active is the exception below) */
.rz-data-grid .rz-pager-element {
    background-color: transparent;
    color: var(--bs-body-color);
    border: none;
    border-radius: 0.375rem;
    min-width: 34px;
    height: 34px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .rz-data-grid .rz-pager-element:hover {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }

/* Active page — the only filled one: blue rounded square, white text */
.rz-data-grid .rz-pager-page.rz-state-active {
    background-color: var(--bs-primary);
    color: #fff;
}

    .rz-data-grid .rz-pager-page.rz-state-active:hover {
        background-color: var(--bs-primary);
        color: #fff;
    }

.rz-data-grid .rz-pager-element.rz-state-disabled {
    color: var(--bs-secondary-color);
    background-color: transparent;
    opacity: 0.65;
    cursor: default;
}

.rz-data-grid .rz-pager-element.rz-state-focused {
    box-shadow: none;
    outline: none;
}

.rz-datatable-emptymessage {
    text-align: center;
    height: 50px;
}


/* =========================================================================
   DARK — explicit overrides (do NOT depend on --bs-* alone; scoped under
   [data-bs-theme="dark"] for the specificity needed to beat Radzen's theme).
   Colors chosen to match Metronic's near-black dark surface.
   ========================================================================= */
[data-bs-theme="dark"] .rz-data-grid,
[data-bs-theme="dark"] .rz-data-grid .rz-grid-table {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}



[data-bs-theme="dark"] .rz-html-editor, [data-bs-theme="dark"] .rz-html-editor .rz-toolbar, [data-bs-theme="dark"] .rz-html-editor-content {
    background-color: #1b1c22 !important;
    border-color: #15171c !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .rz-datatable-emptymessage {
    --bs-bg-rgb-color: var(--bs-light-rgb);
    background-color: var(--bs-light) #1B1C22 !important;
}


/* Header cells + text in dark */
[data-bs-theme="dark"] .rz-data-grid .rz-grid-table thead th {
    background-color: var(--bs-body-bg);
    border-bottom-color: var(--bs-border-color);
}

    [data-bs-theme="dark"] .rz-data-grid .rz-grid-table thead th .rz-column-title-content {
        color: var(--bs-body-color); /* light text on dark — the header fix */
    }

/* Body cells + text in dark. Near-uniform rows (target: dark has minimal zebra) */
[data-bs-theme="dark"] .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td {
    background-color: var(--bs-body-bg);
    border-bottom-color: var(--bs-border-color);
}

    [data-bs-theme="dark"] .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td .rz-cell-data {
        color: var(--bs-body-color); /* light cell text — the main reported bug */
    }

/* Dark zebra: barely-there, per target (near-uniform). Using secondary-bg for a
   whisper of separation rather than the stronger tertiary used in light. */
[data-bs-theme="dark"] .rz-data-grid .rz-grid-table tbody tr.rz-data-row:nth-child(even) > td {
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .rz-data-grid .rz-grid-table tbody tr.rz-data-row:hover > td {
    background-color: var(--bs-tertiary-bg);
}

/* Pager in dark */
[data-bs-theme="dark"] .rz-data-grid .rz-pager {
    background-color: var(--bs-body-bg);
    border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .rz-data-grid .rz-pager-element {
    background-color: transparent;
    color: var(--bs-body-color);
}

    [data-bs-theme="dark"] .rz-data-grid .rz-pager-element:hover {
        background-color: var(--bs-tertiary-bg);
    }

    [data-bs-theme="dark"] .rz-data-grid .rz-pager-element.rz-state-disabled {
        background-color: transparent;
        color: var(--bs-secondary-color);
    }

/* Active page stays blue+white in both themes */
[data-bs-theme="dark"] .rz-data-grid .rz-pager-page.rz-state-active {
    background-color: var(--bs-primary);
    color: #fff;
}

/* =========================================================================
   RTL — Radzen emits physical .rz-text-align-left on headers; flip in RTL.
   ========================================================================= */
[dir="rtl"] .rz-data-grid .rz-grid-table thead th.rz-text-align-left {
    text-align: right;
}

/* ============================================================================
   AppDatePicker (RadzenDatePicker) — matched EXACTLY to .form-control.form-control-solid
   (see assets/css/style.bundle.css): same padding/font-size/line-height (so the
   same computed height), same gray-100/gray-300 surface tokens (theme-aware —
   Metronic redefines --bs-gray-* per [data-bs-theme]), same focus behavior.
   One place to restyle.
   ============================================================================ */
.app-datepicker.rz-datepicker {
    width: 100%;
    display: block;
}

.app-datepicker .rz-inputtext,
.app-datepicker input.rz-inputtext {
    background-color: var(--bs-gray-100) !important;
    border: 1px solid var(--bs-gray-100) !important;
    border-radius: 0.475rem !important;
    color: var(--bs-gray-700) !important;
    padding: 0.775rem 1rem !important;
    font-size: 1.1rem !important;
    font-weight: 500;
    line-height: 1.5 !important;
    height: auto !important;
    box-shadow: none !important;
    transition: color 0.2s ease, border-color 0.15s ease-in-out;
}

.app-datepicker .rz-inputtext::placeholder {
    color: var(--bs-gray-500) !important;
}

/* The trigger is an icon FLOATING inside the input (absolutely positioned by
   Radzen at inset-inline-end), not a separate segmented button — giving it its
   own background/border/padding (as a first attempt did) squeezes the glyph
   into that small fixed box and clips it. Just recolor the icon in place. */
.app-datepicker .rz-datepicker-trigger,
.app-datepicker button.rz-datepicker-trigger {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
}

/* Focus — mirrors the solid input's gray-200 state, primary-tinted border. */
.app-datepicker.rz-datepicker:focus-within .rz-inputtext {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: none !important;
}

/* Calendar popup — Radzen (material theme) drives every colour through CSS
   custom properties consumed by .rz-calendar-view td .rz-state-active /
   .rz-calendar-today; overriding the variables (rather than guessing selector
   names) is what actually reaches the selected-day circle and the today ring
   in both themes, since --bs-primary itself already flips light/dark. */
.rz-datepicker-popup-container,
.rz-calendar {
    --rz-datepicker-calendar-selected-color: var(--bs-primary-inverse);
    --rz-datepicker-calendar-selected-background-color: var(--bs-primary);
    --rz-datepicker-calendar-selected-hover-color: var(--bs-primary-inverse);
    --rz-datepicker-calendar-selected-hover-background-color: var(--bs-primary-active);
    --rz-datepicker-calendar-hover-color: var(--bs-primary);
    --rz-datepicker-calendar-hover-background-color: var(--bs-primary-light);
    --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--bs-primary);
    --rz-datepicker-calendar-color: var(--bs-body-color);
    --rz-datepicker-calendar-header-color: var(--bs-secondary-color);
    --rz-datepicker-header-background-color: var(--bs-body-bg);
    --rz-datepicker-header-color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Month/year dropdowns in the calendar header — these are their own nested
   RadzenDropDown components rendered inside the popup, so they don't inherit
   the variable overrides above; they paint themselves with Radzen's raw
   --rz-white token regardless of theme, which is exactly the still-white
   boxes reported in dark mode. Force them onto the theme tokens directly. */
.rz-calendar-title .rz-dropdown,
.rz-calendar-title .rz-dropdown .rz-inputtext,
.rz-calendar-title .rz-dropdown.rz-dropdown-open {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.475rem !important;
}

.rz-calendar-title .rz-dropdown .rz-dropdown-trigger-icon,
.rz-calendar-title .rz-dropdown .rzi {
    color: var(--bs-secondary-color) !important;
}

.rz-calendar-prev,
.rz-calendar-next {
    color: var(--bs-body-color) !important;
}

/* The dropdown's own open panel (the scrollable year/month list) is a portal
   too — same fix. */
.rz-dropdown-panel {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}

/* RTL: the trigger is centered on the icon itself, nothing to flip. */

/* Dark mode: the popup surface follows --bs-body-bg above automatically;
   only the drop-shadow/border need a theme-aware nudge here. */
[data-bs-theme="dark"] .rz-datepicker-popup-container {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
    border: 1px solid var(--bs-border-color);
}

/* ============================================================================
   AppSelect (RadzenDropDown) — matched EXACTLY to .form-select.form-select-solid
   (same padding/font-size/line-height as .form-control, confirmed identical in
   style.bundle.css). Radzen wires .rz-dropdown's box (bg/border/radius/height/
   padding/text-color) entirely off --rz-input-* custom properties (shared with
   every other Radzen input), so overriding THOSE — scoped to .app-select, on
   the same element — reaches the real box without fighting specificity, and
   flips automatically with the brand's gray tokens in dark mode.
   The open panel (.rz-dropdown-panel / .rz-dropdown-item) is already themed
   globally above/below (shared by the grid's own filter dropdowns), so an
   AppSelect's popup inherits that for free.
   ============================================================================ */
.app-select.rz-dropdown {
    width: 100%;
    display: flex;
    --rz-input-background-color: var(--bs-gray-100);
    --rz-input-border: 1px solid var(--bs-gray-100);
    --rz-input-border-radius: 0.475rem;
    --rz-input-value-color: var(--bs-gray-700);
    --rz-input-height: auto;
    --rz-input-padding-block: 0.775rem;
    --rz-input-padding-inline: 1rem;
    --rz-input-font-size: 1.1rem;
    --rz-input-line-height: 1.5;
    --rz-dropdown-open-background-color: var(--bs-gray-200);
    --rz-dropdown-open-border: 1px solid var(--bs-primary);
    /* The material theme paints a separate bottom "underline" accent via this
       var, independent of --rz-input-border above — that's the stray line
       under the box. Solid fields don't have one. */
    --rz-input-border-block-end: 1px solid var(--bs-gray-100);
}

.app-select .rz-dropdown-trigger .rzi,
.app-select .rz-dropdown-clear-icon {
    color: var(--bs-gray-500) !important;
}

.app-select.rz-dropdown:not(.rz-state-disabled):hover {
    background-color: var(--bs-gray-100) !important;
}