/* ========= THEME TOKENS =========
   These read from your layout if present; otherwise they fall back.
   Override any of these in :root (layout) or [data-theme="dark"] etc.
*/
:root {
    /* Brand */
    /* Neutrals */
    --ink: var(--color-ink, #1f2328);
    --muted: var(--color-muted, #6b7280);
    /* Surfaces */
    --bg-app: var(--color-app, #f6f7fb);
    --bg-panel: var(--color-panel, #ffffff);
    --surface-1: var(--color-surface-1, #f9f9f9);
    --surface-2: var(--color-surface-2, #f8f9fa);
    /* Borders & shadows */
    --border-1: var(--color-border, #e5e7eb);
    --shadow-1: 0 10px 30px rgba(0,0,0,.12);
    /* Status */
    --danger: var(--color-danger, #f44336);
    --success: var(--color-success, #16a34a);
    --warning: var(--color-warn, #f59e0b);
    --info: var(--color-info, #2e62e9);
    /* Radii & motion */
    --radius: 14px;
    --radius-sm: 10px;
    --transition: 220ms cubic-bezier(.2,.7,.2,1);
    /* Existing tokens preserved */
    --btn-height: 36px;
    --btn-padding-x: 14px;
    --btn-border-width: 1px;
    --btn-border-left-width: 4px;   /* refined accent bar — was 20px */
    --btn-transition: 0.22s cubic-bezier(.2,.8,.2,1);
    --btn-bg-white: #ffffff;
    /* Function-coded accent colors — updated to match layout theme */
    --btn-color-primary: #2563eb;   /* layout blue — stronger than #dbeafe */
    --btn-color-secondary: #475569; /* slate */
    --btn-color-success: #16a34a;   /* green */
    --btn-color-danger: #dc2626;    /* red */
    --btn-color-warning: #d97706;   /* amber */
    --btn-color-edit: #ea580c;      /* orange */
    --btn-color-print: #64748b;     /* neutral gray */
    --btn-color-filter: #0d9488;    /* teal */
    --btn-color-sort: #7c3aed;      /* purple */
    --btn-color-export: #059669;    /* emerald */
    --btn-color-import: #0284c7;    /* sky blue */
    /* Per-variant hover backgrounds (light tints) */
    --btn-hover-primary: #eff6ff;
    --btn-hover-secondary: #f1f5f9;
    --btn-hover-success: #f0fdf4;
    --btn-hover-danger: #fef2f2;
    --btn-hover-warning: #fffbeb;
    --btn-hover-edit: #fff7ed;
    --btn-hover-print: #f8fafc;
    --btn-hover-filter: #f0fdfa;
    --btn-hover-sort: #faf5ff;
    --btn-hover-export: #ecfdf5;
    --btn-hover-import: #f0f9ff;
    /* Existing theme blues */
    --brand-1: var(--brand-start, #2563eb);
    --brand-2: var(--brand-end, #1d4ed8);
}

/* ========= BUTTONS ========= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px; /* modern rounded corners */
    background: var(--btn-bg-white);
    /* Animated border effect — chunky left bar */
    border-top: var(--btn-border-width) solid transparent;
    border-right: var(--btn-border-width) solid transparent;
    border-bottom: var(--btn-border-width) solid transparent;
    border-left: var(--btn-border-left-width) solid transparent;
    transition: border-left-width var(--btn-transition), background-color var(--btn-transition), border-color var(--btn-transition), color var(--btn-transition), filter var(--btn-transition);
}

    .btn i {
        font-size: 13px;
        line-height: 1;
    }

    /* Hover — collapse the chunky left bar to 1px */
    .btn:hover {
        border-left-width: var(--btn-border-width);
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
    }

    .btn:disabled,
    .btn[disabled] {
        opacity: .55;
        cursor: not-allowed;
        filter: grayscale(.2);
    }

    /* ─────────────────────────────────────────────────────────────
   VARIANT PATTERN
   Each variant only needs to set ONE color via --c.
   The shared rule below applies it to all four borders + text.
   ───────────────────────────────────────────────────────────── */

    .btn.primary,
    .btn.add-new,
    .btn.add,
    .btn-primary-icon {
        --c: var(--btn-color-primary);
    }

    .btn.secondary {
        --c: var(--btn-color-secondary);
    }

    .btn.success {
        --c: var(--btn-color-success);
    }

    .btn.approve,
    .btn.apply,
    .btn.confirm {
        --c: var(--btn-color-success);
    }

    .btn.danger,
    .btn.delete,
    .btn.cancel,
    .btn.pdf {
        --c: var(--btn-color-danger);
    }

    .btn.warning,
    .btn.on-hold {
        --c: var(--btn-color-warning);
    }

    .btn.edit {
        --c: var(--btn-color-edit);
    }

    .btn.print {
        --c: var(--btn-color-print);
    }

    .btn.filter {
        --c: var(--btn-color-filter);
    }

    .btn.sort {
        --c: var(--btn-color-sort);
    }

    .btn.export {
        --c: var(--btn-color-export);
    }

    .btn.import {
        --c: var(--btn-color-import);
    }

    /* Apply the variant color via --c to color + all 4 borders */
    .btn[class*=" "],
    .btn[class] {
        /* fallback — does nothing if --c isn't set on a variant */
    }

    .btn.primary, .btn.add-new, .btn.add, .btn-primary-icon,
    .btn.secondary,
    .btn.success, .btn.approve, .btn.apply, .btn.confirm,
    .btn.danger, .btn.delete, .btn.cancel, .btn.pdf,
    .btn.warning, .btn.on-hold,
    .btn.edit,
    .btn.print,
    .btn.filter,
    .btn.sort,
    .btn.export,
    .btn.import {
        color: var(--c);
        border-top-color: var(--c);
        border-right-color: var(--c);
        border-bottom-color: var(--c);
        border-left-color: var(--c);
    }

    /* ── Per-variant hover tints ────────────────────────────────── */
    .btn.primary:hover, .btn.add-new:hover, .btn.add:hover, .btn-primary-icon:hover {
        background: var(--btn-hover-primary);
    }

    .btn.secondary:hover {
        background: var(--btn-hover-secondary);
    }

    .btn.success:hover, .btn.approve:hover, .btn.apply:hover, .btn.confirm:hover {
        background: var(--btn-hover-success);
    }

    .btn.danger:hover, .btn.delete:hover, .btn.cancel:hover, .btn.pdf:hover {
        background: var(--btn-hover-danger);
    }

    .btn.warning:hover, .btn.on-hold:hover {
        background: var(--btn-hover-warning);
    }

    .btn.edit:hover {
        background: var(--btn-hover-edit);
    }

    .btn.print:hover {
        background: var(--btn-hover-print);
    }

    .btn.filter:hover {
        background: var(--btn-hover-filter);
    }

    .btn.sort:hover {
        background: var(--btn-hover-sort);
    }

    .btn.export:hover {
        background: var(--btn-hover-export);
    }

    .btn.import:hover {
        background: var(--btn-hover-import);
    }

    /* ── GHOST — text-only, no ribbon ───────────────────────────── */
    .btn.ghost {
        background: transparent;
        color: var(--muted, #64748b);
        border: none;
        padding: 0 10px;
        min-height: var(--btn-height);
    }

        .btn.ghost:hover {
            background: rgba(15, 23, 42, .06);
            color: var(--ink, #0f172a);
        }

        /* Ghost icon-only (close X etc.) */
        .btn.ghost.icon-only {
            min-width: 32px;
            width: 32px;
            height: 32px;
            min-height: 32px;
            padding: 0;
            font-size: 13px;
        }

            .btn.ghost.icon-only:hover {
                background: rgba(15, 23, 42, .06);
                color: var(--btn-color-danger);
            }
/* Base button */
/*.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border-radius: 0;*/ /* square corners */

    /*cursor: pointer;
    transition: border-left-width var(--btn-transition), background-color var(--btn-transition), border-color var(--btn-transition), color var(--btn-transition), filter var(--btn-transition);*/
    /* Important */
    /*background: var(--btn-bg-white);*/
    /* Animated border effect */
    /*border-top: var(--btn-border-width) solid transparent;
    border-right: var(--btn-border-width) solid transparent;
    border-bottom: var(--btn-border-width) solid transparent;
    border-left: var(--btn-border-left-width) solid transparent;
}*/

    /* Hover animation */
    /*.btn:hover {
        border-left-width: var(--btn-border-width);
    }*/

    /* ========= PRIMARY ========= */
    /*.btn.primary,
    .btn.add-new,
    .btn-primary-icon {
        background: var(--btn-bg-white);
        color: var(--brand-1);
        border-top-color: var(--brand-1);
        border-right-color: var(--brand-1);
        border-bottom-color: var(--brand-1);
        border-left-color: var(--brand-1);
    }*/

    /* ========= SECONDARY ========= */
    /*.btn.secondary,
    .btn.sort {
        background: var(--btn-bg-white);
        color: var(--brand-1);
        border-top-color: var(--brand-1);
        border-right-color: var(--brand-1);
        border-bottom-color: var(--brand-1);
        border-left-color: var(--brand-1);
    }*/

    /* ========= SUCCESS ========= */
    /*.btn.success {
        background: var(--btn-bg-white);
        color: var(--success);
        border-top-color: var(--success);
        border-right-color: var(--success);
        border-bottom-color: var(--success);
        border-left-color: var(--success);
    }*/

    /* ========= DANGER ========= */
    /*.btn.danger,
    .btn.delete {
        background: var(--btn-bg-white);
        color: var(--danger);
        border-top-color: var(--danger);
        border-right-color: var(--danger);
        border-bottom-color: var(--danger);
        border-left-color: var(--danger);
    }*/

    /* ========= WARNING ========= */
    /*.btn.warning {
        background: var(--btn-bg-white);
        color: var(--warning);
        border-top-color: var(--warning);
        border-right-color: var(--warning);
        border-bottom-color: var(--warning);
        border-left-color: var(--warning);
    }*/

    /* ========= UTILITY BUTTONS ========= */
    /*.btn.print,
    .btn.filter,
    .btn.export,
    .btn.import {
        background: var(--btn-bg-white);
        color: var(--brand-1);
        border-top-color: var(--brand-1);
        border-right-color: var(--brand-1);
        border-bottom-color: var(--brand-1);
        border-left-color: var(--brand-1);
    }*/

    /* ========= GHOST ========= */
    /*.btn.ghost {
        background: transparent;
        border: none;
        color: var(--muted);
    }

        .btn.ghost:hover {
            background: rgba(0,0,0,.05);
        }*/



/* ================================================================
   Additions for fully-Radzen ReceiveGoods page
   Append these to your existing global/shared CSS file.
   Your existing .btn styles are NOT touched.
   ================================================================ */

/* ── Search box (RadzenTextBox instead of native input) ───────── */
.search-radzen-input.rz-textbox {
    flex: 1;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px;
    color: var(--ink);
    font-family: inherit;
    height: auto !important;
    min-height: auto !important;
}

/* ── Modal header row (icon + title + close) ──────────────────── */
.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.modal-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header-icon {
    font-size: 18px;
    color: var(--brand-1);
    opacity: .85;
}

.modal-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
}

/* Ghost icon-only button (close X) */
/*.btn.ghost.icon-only {
    min-height: 30px;
    width: 30px;
    padding: 0;
    border: none !important;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    border-radius: 6px;
}

    .btn.ghost.icon-only:hover {
        background: rgba(0, 0, 0, .06);
        color: var(--danger);
    }*/

/* ── Delete confirm modal ─────────────────────────────────────── */
.modal-icon-row {
    text-align: center;
    margin-bottom: 10px;
}

    .modal-icon-row.danger i {
        font-size: 36px;
        color: var(--danger);
        opacity: .8;
    }

.modal-receipt-ref {
    text-align: center;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 6px;
}

/* ── EXPORT MODAL ─────────────────────────────────────────────── */
.modal-export-popup {
    max-width: 420px;
}

.export-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.export-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform .12s;
    background: var(--bg-panel);
}

    .export-card:hover {
        background: var(--surface-1);
        border-color: var(--brand-1);
        transform: translateX(3px);
    }

.export-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

    .export-card-icon.excel {
        background: #e6f4ea;
        color: #1a7f37;
    }

    .export-card-icon.pdf {
        background: #fde8e8;
        color: #d32f2f;
    }

.export-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .export-card-body strong {
        font-size: 13.5px;
        color: var(--ink);
        font-weight: 600;
    }

    .export-card-body span {
        font-size: 12px;
        color: var(--muted);
    }

.export-card-arrow {
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}

/* ── ADD/EDIT MODAL: form grid ────────────────────────────────── */
.tab-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding: 16px 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .form-field.full-width {
        grid-column: 1 / -1;
    }

    /* Radzen label in form */
    .form-field .rz-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    /* Radzen inputs fill the field */
    .form-field .rz-textbox,
    .form-field .rz-textarea,
    .form-field .rz-numeric,
    .form-field .rz-datepicker {
        width: 100%;
    }

/* Selected supplier badge */
.selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 10px;
    background: #e6f4ea;
    color: #1a7f37;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
}

    .selected-badge i {
        font-size: 13px;
    }

/* ── ITEMS TAB: add-item grid ─────────────────────────────────── */
.add-item-form {
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 14px;
}

.add-item-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: end;
}

.product-search-field {
    position: relative;
}

.add-item-btn-field {
    justify-content: flex-end;
}

/* ── FILTER MODAL: checkboxes ─────────────────────────────────── */
.filter-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.filter-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-1);
    background: var(--bg-panel);
    cursor: pointer;
    transition: background var(--transition);
}

    .filter-check-item:hover {
        background: var(--surface-1);
    }

    .filter-check-item .rz-label {
        font-size: 12.5px;
        color: var(--ink);
        cursor: pointer;
    }

/* ── SORT MODAL: sort rows ────────────────────────────────────── */
.sort-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.sort-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-1);
    background: var(--bg-panel);
}

.sort-label {
    flex: 1;
    font-size: 13px;
}

/* Validation message */
.validation-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 12px;
    background: #fff8e1;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    font-size: 12.5px;
    color: #92400e;
}

    .validation-message i {
        color: #f59e0b;
    }

/* ── IMPORT MODAL ─────────────────────────────────────────────── */
.import-template-section {
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.import-template-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

    .import-template-header i {
        color: var(--brand-1);
    }

.import-template-scroll {
    overflow-x: auto;
    padding: 10px 14px;
}

/* Drop zone */
.import-dropzone {
    border: 2px dashed var(--border-1);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition: border-color var(--transition), background var(--transition);
    margin-bottom: 16px;
    overflow: hidden;
}

    .import-dropzone:hover,
    .import-dropzone.has-file {
        border-color: var(--brand-1);
        background: #f0f7ff;
    }

.import-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px 20px;
    position: relative;
    cursor: pointer;
}

.import-upload-icon {
    font-size: 36px;
    color: var(--brand-1);
    opacity: .6;
}

.import-dropzone-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}

.import-file-hint {
    font-size: 11.5px;
    color: var(--muted);
}

/* Make InputFile overlay the entire drop zone inner */
.import-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.import-selected-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #e6f4ea;
    font-size: 12.5px;
    font-weight: 500;
    color: #1a7f37;
    border-top: 1px solid #c3e6cb;
}

    .import-selected-file i:first-child {
        font-size: 16px;
    }

    .import-selected-file span {
        flex: 1;
    }

.import-file-ok {
    font-size: 14px;
    color: #1a7f37;
}

/* Upload progress */
.import-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}

/* Upload result */
.upload-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

    .upload-result.success {
        background: #e6f4ea;
        color: #1a7f37;
        border: 1px solid #c3e6cb;
    }

    .upload-result.error {
        background: #fde8e8;
        color: #d32f2f;
        border: 1px solid #f5c6c6;
    }

    .upload-result i {
        font-size: 15px;
    }

/* ── Radzen tabs styling inside modal ─────────────────────────── */
.modal-form .rz-tabview .rz-tabview-panels {
    padding: 0;
}

.modal-form .rz-tabview-nav li a {
    font-size: 13px;
    font-weight: 500;
}

/* ── Dropdown in form (supplier/product results) ──────────────── */
.dropdown {
    list-style: none;
    background: var(--bg-panel);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
    position: absolute;
    z-index: 601;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
}

    .dropdown li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 12.5px;
        cursor: pointer;
        border-radius: 5px;
        transition: background var(--transition);
        color: var(--ink);
    }

        .dropdown li:hover {
            background: var(--surface-1);
            color: var(--brand-1);
        }

        .dropdown li i {
            color: var(--brand-1);
            font-size: 12px;
            opacity: .7;
        }

/* ── w-100 helper for Radzen inputs ──────────────────────────── */
.rz-textbox.w-100,
.rz-textarea.w-100,
.rz-numeric .rz-inputnumber.w-100,
.rz-datepicker.w-100 {
    width: 100% !important;
}

/* ── Grayscale line-icon action buttons (data grid rows) ── */
.grid-line-icon-btn {
    min-width: 28px !important;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: gray !important; /* slate-400 */
    box-shadow: none !important;
    transition: background .15s, color .15s;
    margin-right: 2px;
}

    .grid-line-icon-btn i {
        font-size: 13px;
        line-height: 1;
    }

    /* Hover: edit goes slightly darker gray, delete tints red */
    .grid-line-icon-btn:hover {
        background: rgba(15, 23, 42, .06) !important;
        color: #475569 !important; /* slate-600 */
    }

    .grid-line-icon-btn.delete:hover {
        background: rgba(220, 38, 38, .08) !important;
        color: #dc2626 !important; /* red-600 */
    }

.rz-button.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px !important;
    background: var(--btn-bg-white) !important;
    border-top: var(--btn-border-width) solid transparent !important;
    border-right: var(--btn-border-width) solid transparent !important;
    border-bottom: var(--btn-border-width) solid transparent !important;
    border-left: var(--btn-border-left-width) solid transparent !important;
    transition: border-left-width var(--btn-transition), background-color var(--btn-transition), border-color var(--btn-transition), color var(--btn-transition), filter var(--btn-transition);
    box-shadow: none !important;
}

    /* Hover animation */
    .rz-button.btn:hover {
        border-left-width: var(--btn-border-width) !important;
    }

    /* Export */
    .rz-button.btn.export {
        color: var(--btn-color-export) !important;
        border-top-color: var(--btn-color-export) !important;
        border-right-color: var(--btn-color-export) !important;
        border-bottom-color: var(--btn-color-export) !important;
        border-left-color: var(--btn-color-export) !important;
        background: white !important;
    }

    /* Print */
    .rz-button.btn.print {
        color: var(--btn-color-print) !important;
        border-top-color: var(--btn-color-print) !important;
        border-right-color: var(--btn-color-print) !important;
        border-bottom-color: var(--btn-color-print) !important;
        border-left-color: var(--btn-color-print) !important;
    }

    /* Filter */
    .rz-button.btn.filter {
        color: var(--btn-color-filter) !important;
        border-top-color: var(--btn-color-filter) !important;
        border-right-color: var(--btn-color-filter) !important;
        border-bottom-color: var(--btn-color-filter) !important;
        border-left-color: var(--btn-color-filter) !important;
    }

    /* Sort */
    .rz-button.btn.sort {
        color: var(--btn-color-sort) !important;
        border-top-color: var(--btn-color-sort) !important;
        border-right-color: var(--btn-color-sort) !important;
        border-bottom-color: var(--btn-color-sort) !important;
        border-left-color: var(--btn-color-sort) !important;
    }

    .rz-button.btn.import {
        color: var(--btn-color-import) !important;
        border-top-color: var(--btn-color-import) !important;
        border-right-color: var(--btn-color-import) !important;
        border-bottom-color: var(--btn-color-import) !important;
        border-left-color: var(--btn-color-import) !important;
    }

    .rz-button.btn.primary,
    .rz-button.btn.add,
    .rz-button.btn.add-new {
        color: var(--btn-color-primary) !important;
        border-top-color: var(--btn-color-primary) !important;
        border-right-color: var(--btn-color-primary) !important;
        border-bottom-color: var(--btn-color-primary) !important;
        border-left-color: var(--btn-color-primary) !important;
    }

    .rz-button.btn.success,
    .rz-button.btn.approve,
    .rz-button.btn.apply,
    .rz-button.btn.confirm {
        color: var(--btn-color-success) !important;
        border-top-color: var(--btn-color-success) !important;
        border-right-color: var(--btn-color-success) !important;
        border-bottom-color: var(--btn-color-success) !important;
        border-left-color: var(--btn-color-success) !important;
    }

    .rz-button.btn.danger,
    .rz-button.btn.delete,
    .rz-button.btn.cancel,
    .rz-button.btn.pdf {
        color: var(--btn-color-danger) !important;
        border-top-color: var(--btn-color-danger) !important;
        border-right-color: var(--btn-color-danger) !important;
        border-bottom-color: var(--btn-color-danger) !important;
        border-left-color: var(--btn-color-danger) !important;
    }

    /* ── Radzen variant hover tints ─────────────────────────────── */
    .rz-button.btn.export:hover      { background: var(--btn-hover-export)    !important; }
    .rz-button.btn.print:hover       { background: var(--btn-hover-print)     !important; }
    .rz-button.btn.filter:hover      { background: var(--btn-hover-filter)    !important; }
    .rz-button.btn.sort:hover        { background: var(--btn-hover-sort)      !important; }
    .rz-button.btn.import:hover      { background: var(--btn-hover-import)    !important; }

    .rz-button.btn.primary:hover,
    .rz-button.btn.add:hover,
    .rz-button.btn.add-new:hover     { background: var(--btn-hover-primary)   !important; }

    .rz-button.btn.success:hover,
    .rz-button.btn.approve:hover,
    .rz-button.btn.apply:hover,
    .rz-button.btn.confirm:hover     { background: var(--btn-hover-success)   !important; }

    .rz-button.btn.danger:hover,
    .rz-button.btn.delete:hover,
    .rz-button.btn.cancel:hover,
    .rz-button.btn.pdf:hover         { background: var(--btn-hover-danger)    !important; }