/* =========================================================
   sares-grid.css — SARES skin for Radzen DataGrid.

   Consumed by Shared/SaresDataGrid.razor and pages that wrap it.
   Customizes Radzen's default theme: header, row hover, pager,
   density, alignment hooks. Reads tokens from sares-tokens.css.

   Global (non-scoped) so these rules reliably override the global
   `.rz-button { ... !important }` declaration in component.css
   without fighting Blazor scoped CSS + ::deep specificity quirks.
   ========================================================= */

/* ── Toolbar layout ── */
.sares-grid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.sares-grid-toolbar-left,
.sares-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.sares-grid-toolbar-left {
    flex: 1 1 auto;
}

.sares-grid-toolbar-right {
    flex: 0 0 auto;
    margin-left: auto;
}*/

/* ── Toolbar buttons (Export / Import / Filter) ── */
.sares-grid-toolbar .sares-grid-toolbar-btn.rz-button,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-button,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-splitbutton-button,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-splitbutton-menubutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 32px;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--sares-surface, #fff) !important;
    border: 1px solid var(--sares-line, #E2E8E5) !important;
    color: var(--sares-ink-2, #3D4B44) !important;
    box-shadow: none !important;
    border-radius: 8px;
}

.sares-grid-toolbar .sares-grid-toolbar-btn .rz-button-text,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-splitbutton-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.sares-grid-toolbar .sares-grid-toolbar-btn .rz-button-icon,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-splitbutton-button .rz-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.sares-grid-toolbar .sares-grid-toolbar-btn.rz-button:hover,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-button:hover,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-splitbutton-button:hover,
.sares-grid-toolbar .sares-grid-toolbar-btn .rz-splitbutton-menubutton:hover {
    background: var(--sares-green-soft, #EEF2DC) !important;
    border-color: var(--sares-green, #7A8C2E) !important;
    color: var(--sares-green-deep, #4E2310) !important;
}*/

/* Split button halves join seamlessly */
/*.sares-grid-toolbar .sares-grid-export.rz-splitbutton {
    display: inline-flex;
    align-items: stretch;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
}

.sares-grid-toolbar .sares-grid-export .rz-splitbutton-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sares-grid-toolbar .sares-grid-export .rz-splitbutton-menubutton {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-width: 32px;
    padding-left: 8px;
    padding-right: 8px;
}*/

/* Filter toggle: show icon-only compactly but preserve icon visibility */
/*.sares-grid-toolbar .sares-grid-filter-toggle.rz-button {
    min-width: 32px;
    padding-left: 8px;
    padding-right: 8px;
}*/

/* Search input */
/*.sares-grid-toolbar .sares-grid-toolbar-search.rz-textbox,
.sares-grid-toolbar-right .rz-textbox {
    width: min(500px, 100%) !important;
}*/

/* Wrapper for a grid row's actions cell — paired with
   @onclick:stopPropagation="true" so clicks inside the cell never bubble
   to the row's RowClick handler. */
/*.sares-grid-row-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}*/

/* ── Row action buttons inside SaresDataGrid ── */
.sares-grid-row-action.rz-button,
.rz-data-grid .sares-grid-row-action.rz-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sares-ink-2, #3D4B44) !important;
}

.sares-grid-row-action.rz-button .rz-button-text {
    display: none !important;
}

.sares-grid-row-action.rz-button .rz-button-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
}

.sares-grid-row-action.rz-button:hover,
.sares-grid-row-action.rz-button:focus-visible {
    background: rgba(122,140,46,.12) !important;
    border-color: transparent !important;
    color: var(--sares-green-deep, #4E2310) !important;
}*/

/* ── Frozen action column (sticky-right) ──
   Sticky cells sit above scrolling content, so they must be opaque;
   otherwise other rows show through and the column looks "transparent"
   on row hover. Keep the background synchronized with the row state. */
/*.rz-data-grid .rz-datatable-tbody > tr > td.rz-frozen-cell,
.rz-datatable .rz-datatable-tbody > tr > td.rz-frozen-cell {
    background: #fff !important;
    z-index: 1;
}

.rz-data-grid .rz-datatable-tbody > tr.rz-datatable-odd > td.rz-frozen-cell,
.rz-datatable .rz-datatable-tbody > tr.rz-datatable-odd > td.rz-frozen-cell {
    background: #fafbfc !important;
    z-index: 3;
}

.rz-data-grid .rz-datatable-tbody > tr:hover > td.rz-frozen-cell,
.rz-datatable .rz-datatable-tbody > tr:hover > td.rz-frozen-cell,
.sares-grid-has-rowclick .rz-datatable-tbody > tr:hover > td.rz-frozen-cell,
.sares-grid-has-rowclick tbody > tr:hover > td.rz-frozen-cell,
.sares-grid-has-rowclick tbody > tr:hover > td.rz-frozen-cell.rz-frozen-cell-right {
    background: #eaf0d4 !important;*/ /* opaque equivalent of rgba(122,140,46,.12) on white */
/*}*/

/* Soft left shadow so the frozen column reads as a pinned edge */
/*.rz-data-grid .rz-datatable-tbody > tr > td.rz-frozen-cell:first-of-type,
.rz-data-grid .rz-datatable-thead > tr > th,
.rz-datatable .rz-datatable-thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;*/ /* was likely auto or higher — cap it here */
/*}*/

/* ── Filter panel ── */
.filter-panel {
    background: var(--sares-surface, #fff);
    border: 1px solid var(--sares-line, #E2E8E5);
    border-left: 3px solid var(--sares-green, #7A8C2E);
    border-radius: var(--radius-sm, 8px);
    padding: 14px 18px;
    margin-top: 6px;
    margin-bottom: 6px;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.04));
    animation: filterPanelIn 200ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes filterPanelIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.filter-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.filter-field > label {
    font-family: var(--font-body, "Inter", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sares-muted, #6B7B74);
}

.filter-actions {
    justify-content: flex-end;
}

/* ── Responsive breakpoints ── */
@media (max-width: 768px) {
    .sares-grid-toolbar {
        align-items: stretch;
    }

    .sares-grid-toolbar-left,
    .sares-grid-toolbar-right {
        width: 100%;
    }

    .sares-grid-toolbar-right {
        margin-left: 0;
    }

    .sares-grid-toolbar .sares-grid-toolbar-search.rz-textbox,
    .sares-grid-toolbar-right .rz-textbox {
        width: 100% !important;
    }

    .filter-panel-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .filter-panel-grid {
        grid-template-columns: 1fr;
    }
}*/
/* =============================================================
   Activity Monitoring — SaresDataGrid + SaresGridHeader styles
   Follows the SARES design token system (--sares-* variables)
   ============================================================= */

/* ── Wrapper ─────────────────────────────────────────────────── */
#activityTableWrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sares-line, #E2E8E5);
    box-shadow: 0 2px 12px rgba(78, 35, 16, 0.06);
    background: var(--sares-surface, #fff);
}

    /* ── Radzen grid base reset ──────────────────────────────────── */
    #activityTableWrapper .rz-data-grid,
    #activityTableWrapper .rz-datatable {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-family: var(--font-body, "Inter", system-ui, sans-serif);
        font-size: 0.85rem;
    }

    /* ── Header row ──────────────────────────────────────────────── */
    #activityTableWrapper .rz-datatable-thead > tr > th,
    #activityTableWrapper .rz-data-grid-header th {
        background: var(--sares-green-soft, #EEF2DC) !important;
        color: var(--sares-green-dark, #4a5e1a) !important;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 11px 14px;
        border-bottom: 2px solid var(--sares-green, #7A8C2E) !important;
        border-right: 1px solid color-mix(in srgb, var(--sares-green) 20%, transparent) !important;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 2;
    }

        #activityTableWrapper .rz-datatable-thead > tr > th:last-child {
            border-right: none !important;
        }

    /* Sort icon colour */
    #activityTableWrapper th .rz-sortable-column-header-icon {
        color: var(--sares-green, #7A8C2E) !important;
    }

    /* ── Body rows ───────────────────────────────────────────────── */
    #activityTableWrapper .rz-datatable-tbody > tr > td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--sares-line, #E2E8E5) !important;
        border-right: 1px solid color-mix(in srgb, var(--sares-line) 60%, transparent) !important;
        color: var(--sares-ink-2, #3D4B44);
        vertical-align: middle;
        transition: background 0.12s ease;
    }

        #activityTableWrapper .rz-datatable-tbody > tr > td:last-child {
            border-right: none !important;
        }

    /* Alternating rows */
    #activityTableWrapper .rz-datatable-tbody > tr:nth-child(even) > td {
        background: color-mix(in srgb, var(--sares-green-soft, #EEF2DC) 30%, #fff) !important;
    }

    #activityTableWrapper .rz-datatable-tbody > tr:nth-child(odd) > td {
        background: var(--sares-surface, #fff) !important;
    }

    /* Row hover */
    #activityTableWrapper .rz-datatable-tbody > tr:hover > td {
        background: color-mix(in srgb, var(--sares-green-soft, #EEF2DC) 70%, #fff) !important;
        cursor: pointer;
    }

    /* Last row — no bottom border to avoid double-line with footer */
    #activityTableWrapper .rz-datatable-tbody > tr:last-child > td {
        border-bottom: none !important;
    }

    /* ── Frozen / sticky action column ───────────────────────────── */
    #activityTableWrapper .rz-datatable-tbody > tr > td.rz-frozen-cell,
    #activityTableWrapper .rz-datatable .rz-datatable-tbody > tr > td.rz-frozen-cell {
        background: var(--sares-surface, #fff) !important;
        z-index: 1;
        box-shadow: -4px 0 8px -4px rgba(78, 35, 16, 0.10);
        border-left: 1px solid var(--sares-line, #E2E8E5) !important;
    }

    #activityTableWrapper .rz-datatable-tbody > tr:nth-child(even) > td.rz-frozen-cell {
        background: color-mix(in srgb, var(--sares-green-soft, #EEF2DC) 30%, #fff) !important;
    }

    #activityTableWrapper .rz-datatable-tbody > tr:hover > td.rz-frozen-cell {
        background: color-mix(in srgb, var(--sares-green-soft, #EEF2DC) 70%, #fff) !important;
    }

    /* Frozen header cell */
    #activityTableWrapper .rz-datatable-thead > tr > th.rz-frozen-cell {
        background: var(--sares-green-soft, #EEF2DC) !important;
        box-shadow: -4px 0 8px -4px rgba(78, 35, 16, 0.10);
        border-left: 1px solid color-mix(in srgb, var(--sares-green) 25%, transparent) !important;
        z-index: 3;
    }

    /* ── Pagination footer ───────────────────────────────────────── */
    #activityTableWrapper .rz-paginator,
    #activityTableWrapper .rz-data-grid-footer {
        background: var(--sares-green-soft, #EEF2DC) !important;
        border-top: 1px solid var(--sares-line, #E2E8E5) !important;
        padding: 8px 14px;
        font-size: 0.8rem;
        color: var(--sares-ink-2, #3D4B44);
    }

        #activityTableWrapper .rz-paginator .rz-button,
        #activityTableWrapper .rz-data-grid-footer .rz-button {
            background: transparent !important;
            border: 1px solid var(--sares-line, #E2E8E5) !important;
            color: var(--sares-ink-2, #3D4B44) !important;
            border-radius: 6px;
            min-width: 30px;
            height: 30px;
        }

            #activityTableWrapper .rz-paginator .rz-button:hover,
            #activityTableWrapper .rz-data-grid-footer .rz-button:hover {
                background: var(--sares-surface, #fff) !important;
                border-color: var(--sares-green, #7A8C2E) !important;
                color: var(--sares-green-dark, #4a5e1a) !important;
            }

        #activityTableWrapper .rz-paginator .rz-state-active,
        #activityTableWrapper .rz-data-grid-footer .rz-state-active {
            background: var(--sares-green, #7A8C2E) !important;
            border-color: var(--sares-green, #7A8C2E) !important;
            color: #fff !important;
        }

    /* ── Column picker / filter bar ──────────────────────────────── */
    #activityTableWrapper .rz-column-picker-trigger,
    #activityTableWrapper .rz-grid-filter {
        color: var(--sares-green, #7A8C2E) !important;
    }

    /* ── Empty / loading state ───────────────────────────────────── */
    #activityTableWrapper .rz-datatable-emptymessage td {
        text-align: center;
        color: var(--sares-muted, #6B7B74);
        padding: 40px 0;
        font-size: 0.9rem;
        border: none !important;
        background: var(--sares-surface, #fff) !important;
    }

/* ── Add-new button in toolbar ───────────────────────────────── */
.sares-grid-toolbar .add-new.rz-button,
.sares-grid-toolbar .add-new {
    background: var(--sares-green, #7A8C2E) !important;
    border-color: var(--sares-green, #7A8C2E) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0 14px;
    min-height: 32px;
    gap: 5px;
}

    .sares-grid-toolbar .add-new.rz-button:hover {
        background: var(--sares-green-dark, #4a5e1a) !important;
        border-color: var(--sares-green-dark, #4a5e1a) !important;
    }

    .sares-grid-toolbar .add-new.rz-button:disabled {
        background: var(--sares-line, #E2E8E5) !important;
        border-color: var(--sares-line, #E2E8E5) !important;
        color: var(--sares-muted, #6B7B74) !important;
        cursor: not-allowed;
    }

/* ── Scrollbar inside grid ───────────────────────────────────── */
#activityTableWrapper ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

#activityTableWrapper ::-webkit-scrollbar-track {
    background: var(--sares-green-soft, #EEF2DC);
}

#activityTableWrapper ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sares-green) 50%, transparent);
    border-radius: 999px;
}

    #activityTableWrapper ::-webkit-scrollbar-thumb:hover {
        background: var(--sares-green, #7A8C2E);
    }