/* =============================================================================
   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;
}

    /* 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-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;
}

/* =========================================================================
   BRAND PALETTE
   =========================================================================

   The platform palette, applied by overriding Metronic's own variables rather
   than by restyling components one at a time.

   This file loads LAST, and every override here is a variable rather than a
   rule — so buttons, badges, links, active nav items, focus rings, Radzen's
   pager and every component that reads --bs-primary all move together. The
   alternative, hunting selectors, guarantees that some control somewhere keeps
   Metronic's default blue and nobody finds it until a screenshot.

   --bs-primary-light is a SURFACE (a tinted background behind primary text),
   not a lighter primary. It has to be near-white in light mode and near-black
   in dark, or badge backgrounds invert.
   ========================================================================= */

:root,
[data-bs-theme="light"] {
    --bs-primary: #B5179E;
    --bs-primary-rgb: 181, 23, 158;
    --bs-primary-active: #96107F;
    --bs-primary-light: #FCE9F6;
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-clarity: rgba(181, 23, 158, 0.2);
    --bs-primary-text-emphasis: #5C0B50;
    --bs-primary-bg-subtle: #FCE9F6;
    --bs-primary-border-subtle: #F0A8DC;

    /* The rest of the palette, kept as the secondary accents rather than as
       decoration: the info colour is the sky blue, and the "purple" utility is
       the palette's own purple instead of Bootstrap's. */
    --bs-info: #4895EF;
    --bs-info-rgb: 72, 149, 239;
    --bs-info-active: #2E7FDF;
    --bs-info-light: #E8F2FE;
    --bs-info-inverse: #FFFFFF;
    --bs-info-clarity: rgba(72, 149, 239, 0.2);

    --bs-purple: #7209B7;
    --bs-indigo: #3F37C9;
}

[data-bs-theme="dark"] {
    /* Deliberately NOT the same magenta. #B5179E on a near-black surface is
       legible as a fill but muddy as text and fails contrast at small sizes;
       the lifted tone reads cleanly and still reads as the same brand. */
    --bs-primary: #D93FBF;
    --bs-primary-rgb: 217, 63, 191;
    --bs-primary-active: #EE7FD3;
    --bs-primary-light: #2A0F24;
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-clarity: rgba(217, 63, 191, 0.2);
    --bs-primary-text-emphasis: #EE7FD3;
    --bs-primary-bg-subtle: #2A0F24;
    --bs-primary-border-subtle: #7A2168;

    --bs-info: #6BA9F2;
    --bs-info-rgb: 107, 169, 242;
    --bs-info-active: #8CBDF5;
    --bs-info-light: #101B2A;
    --bs-info-inverse: #FFFFFF;
    --bs-info-clarity: rgba(107, 169, 242, 0.2);

    --bs-purple: #A45BD8;
    --bs-indigo: #7C75E8;
}

/* The link colour follows the brand in both themes. Metronic sets these from
   its own scale rather than from --bs-primary, so they need saying. */
:root,
[data-bs-theme="light"] {
    --bs-link-color: #B5179E;
    --bs-link-color-rgb: 181, 23, 158;
    --bs-link-hover-color: #96107F;
    --bs-link-hover-color-rgb: 150, 16, 127;
}

[data-bs-theme="dark"] {
    --bs-link-color: #EE7FD3;
    --bs-link-color-rgb: 238, 127, 211;
    --bs-link-hover-color: #F7ACE3;
    --bs-link-hover-color-rgb: 247, 172, 227;
}

/* Radzen's own font, pointed at the same face as everything else.

   Radzen components read --rz-text-font-family, which its Material base sets to Roboto — a font
   with no Arabic at all, so every Radzen grid, dropdown and dialog fell back to whatever the
   browser picked for Arabic while the rest of the panel was in Tajawal. Two different Arabic faces
   on one screen is the mismatch this fixes.

   site.css is linked after material-base.css, so this wins. */
:root {
    --rz-text-font-family: var(--bs-body-font-family);
    --rz-body-font-family: var(--bs-body-font-family);
}

.rz-data-grid,
.rz-dialog,
.rz-dropdown,
.rz-datepicker,
.rz-html-editor {
    font-family: var(--bs-body-font-family);
}

/* The four places Metronic writes the font name instead of reading the variable.

   They are plugin widgets — the date-range picker, the Quill toolbar, chart labels and map popups —
   and each hard-codes Inter, which carries no Arabic. Left alone they are the last islands of a
   different face, and the chart one is !important, which is why this answers in kind. */
.daterangepicker,
.ql-toolbar,
.leaflet-container .leaflet-popup-content-wrapper .leaflet-popup-content {
    font-family: var(--bs-body-font-family);
}

.apexcharts-text,
.apexcharts-title-text,
.apexcharts-legend-text {
    font-family: var(--bs-body-font-family) !important;
}

/* Cards, borderless with a soft lift instead. Metronic's own .card draws a 1px solid outline
   (--bs-card-border-color) plus its own faint shadow — the outline is what read as "boxy" on a
   screen with a dozen stacked cards. This drops the border and uses Bootstrap's own .shadow-sm
   value instead of Metronic's, so every card matches the one utility class the rest of the app
   already reaches for when it wants a shadow. */
.card {
    border: 0 !important;
    box-shadow: var(--bs-box-shadow-sm, 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05)) !important;
}

/* The page-size dropdown inside a grid's own pager. Radzen renders this itself — it is never
   passed through AppSelect, so forms.css's .app-select scoping never reaches it, and it was
   left with no theming at all and Radzen's own Material sizing. Themed here to match the pager
   buttons beside it (same 34px height), and moved to the OPPOSITE end of the bar: the page
   buttons are pinned to the start (§ above), so `order` carries this past them regardless of
   where Radzen places it in the DOM, and the auto margin absorbs the rest of the bar's width. */
.rz-data-grid .rz-pager .rz-dropdown {
    order: 99;
    margin-inline-start: auto !important;
    display: flex !important;
    align-items: center;
    width: auto !important;
    min-height: 34px !important;
    height: 34px !important;
    /*padding: 0 2rem 0 0.75rem !important;*/
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
}

.rz-data-grid .rz-pager .rz-dropdown .rz-dropdown-label {
    color: inherit !important;
    background: transparent !important;
}

.rz-data-grid .rz-pager .rz-dropdown .rz-dropdown-trigger {
    width: 1.75rem;
    background-color: transparent !important;
    border: 0 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%2378829D%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 9px;
    pointer-events: none;
}

.rz-data-grid .rz-pager .rz-dropdown .rz-dropdown-trigger .rzi {
    display: none !important;
}