/* ── Remove Bootstrap card-body padding on pure-grid pages (those that already use px-0) ── */
.card-body.px-0:has(.dx-datagrid),
.card-body.px-0:has(.dx-treelist) {
    padding: 0 !important;
}

/* ── Grid inside padded card-body (p-4): extend horizontally to card edges ── */
.card-body.p-4 .dx-datagrid,
.card-body.p-4 .dx-treelist {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

/* Strip outer side-borders so the full-width grid blends into the card */
.card-body.p-4 .dx-datagrid-borders > .dx-datagrid-headers,
.card-body.p-4 .dx-datagrid-borders > .dx-datagrid-rowsview,
.card-body.p-4 .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-left: none !important;
    border-right: none !important;
}

/* ── CSS Variables ── */
:root {
    --accent: #4a7c9e;
    --accent-hover: #3b6a8a;
    --accent-light: #edf4f8;
    --header-bg: #e8eef4;
    --header-text: #3a4f65;
    --surface: #ffffff;
    --bg: #f5f7fa;
    --border: #dfe4ea;
    --text: #2d3748;
    --muted: #718096;
    --row-alt: #f9fafb;
    --row-hover: #f0f5fa;
    --danger: #e25c5c;
    --warn: #d4952a;
    --success: #48a868;
    --radius: 10px;
    --shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --font: 'Baloo Bhaijaan 2', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --mono: 'JetBrains Mono', 'Consolas', monospace;
}

/* ── Page wrapper ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--border);
}

.page-title {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .page-title::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 24px;
        background: var(--accent);
        border-radius: 3px;
    }

/* ── Card ── */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow: hidden;
    font-family: var(--font);
}

    /* ── DevExtreme grid overrides ── */

    /* Toolbar area */
    .card .dx-datagrid-header-panel {
        background: #f8fafd !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 10px 14px !important;
    }

    /* Search panel */
    .card .dx-searchbox .dx-texteditor-input {
        font-family: var(--font) !important;
        font-size: 13px !important;
    }

    .card .dx-searchbox {
        border-radius: 8px !important;
        border-color: var(--border) !important;
    }

        .card .dx-searchbox.dx-state-focused {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px rgba(26,95,168,.12) !important;
        }

    /* ── Column headers ── */
    .card .dx-datagrid-headers {
        background: transparent !important;
        color: var(--header-text) !important;
        font-family: var(--font) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: .055em !important;
        border-bottom: none !important;
    }

        .card .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
            background: var(--header-bg) !important;
            color: var(--header-text) !important;
            border-bottom: 2px solid #d0d9e4 !important;
            padding: 10px 12px !important;
            font-weight: 600 !important;
        }

        .card .dx-datagrid-headers .dx-header-row > td:hover {
            /* background: #dce5ef !important; */
            color: var(--text) !important;
        }


    /* ── Filter row — WHITE background ── */
    .card .dx-datagrid-filter-row > td {
        background: #f5f5f5 !important;
        border-bottom: 2px solid var(--border) !important;
        padding: 5px 7px !important;
        color: #000;
    }
    /* Filter input boxes */
    .card .dx-datagrid-filter-row .dx-texteditor,
    .card .dx-datagrid-filter-row .dx-texteditor-container {
        border-radius: 6px !important;
    }

    .card .dx-datagrid-filter-row .dx-texteditor .dx-texteditor-input {
        color: var(--text) !important;
        font-family: var(--font) !important;
        font-size: 12.5px !important;
    }

        .card .dx-datagrid-filter-row .dx-texteditor.dx-state-focused {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 2px rgba(74,124,158,.15) !important;
        }
    /* Dropdown arrow in filter row */
    .card .dx-datagrid-filter-row .dx-dropdowneditor-button .dx-dropdowneditor-icon {
        color: var(--muted) !important;
    }

    /* Data rows */
    .card .dx-datagrid-rowsview .dx-row {
        font-family: var(--font) !important;
        font-size: 13.5px !important;
        color: var(--text) !important;
        border-bottom: 1px solid #e8edf3 !important;
        transition: background .12s !important;
    }

        .card .dx-datagrid-rowsview .dx-row > td {
            padding: 9px 12px !important;
            vertical-align: middle !important;
        }
    /* Alternating rows */
    .card .dx-row-alt > td {
        background-color: var(--row-alt) !important;
    }
    /* Hover */
    .card .dx-datagrid-rowsview .dx-row.dx-state-hover > td,
    .card .dx-datagrid-rowsview .dx-row.dx-state-hover > tr > td {
        background-color: var(--row-hover) !important;
    }

    /* Selected Row Styling - Soft Slate with Left Accent Indicator */
    .card .dx-datagrid-rowsview .dx-selection > td,
    .card .dx-datagrid-rowsview .dx-selection.dx-row-alt > td,
    .card .dx-datagrid-rowsview .dx-selection.dx-state-hover > td {
        background-color: #f1f5f9 !important; /* Soft slate/grey-blue */
        color: #0f172a !important; /* High contrast text */
        border-bottom: 1px solid #cbd5e1 !important;
    }
    .card .dx-datagrid-rowsview .dx-selection > td:first-child {
        box-shadow: inset 4px 0 0 0 var(--accent) !important;
    }

    /* Column: numeric — right-align, bold, mono */
    .card .dx-datagrid-rowsview .dx-datagrid-summary-item {
        font-family: var(--mono) !important;
        font-weight: 600 !important;
        color: var(--accent) !important;
    }

    /* Group rows */
    .card .dx-group-row > td {
        background: var(--accent-light) !important;
        color: var(--accent-hover) !important;
        font-weight: 600 !important;
        font-size: 12.5px !important;
        border-bottom: 1px solid #c8d8e4 !important;
        padding: 6px 14px !important;
    }

    /* ── Pager ── */
    .card .dx-datagrid-pager {
        background: #f8fafd !important;
        border-top: 1px solid var(--border) !important;
        padding: 10px 16px !important;
        font-family: var(--font) !important;
        font-size: 13px !important;
        color: var(--muted) !important;
    }

    /* Page-size selector pills */
    .card .dx-page-sizes {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: #edf2f7 !important;
        border-radius: 9px !important;
        padding: 3px 5px !important;
        border: 1px solid var(--border) !important;
    }

        .card .dx-page-sizes .dx-page-size {
            border-radius: 7px !important;
            font-family: var(--font) !important;
            font-size: 12.5px !important;
            font-weight: 500 !important;
            border: none !important;
            background: transparent !important;
            color: var(--muted) !important;
            min-width: 36px !important;
            height: 28px !important;
            line-height: 28px !important;
            text-align: center !important;
            padding: 0 8px !important;
            cursor: pointer !important;
            transition: all .14s !important;
        }

            .card .dx-page-sizes .dx-page-size:hover {
                background: #fff !important;
                color: #000 !important;
                box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
            }

            .card .dx-page-sizes .dx-page-size.dx-selection {
                background: var(--accent) !important;
                color: #fff !important;
                font-weight: 700 !important;
                box-shadow: 0 2px 6px rgba(74,124,158,.25) !important;
            }

    /* Page navigation buttons */
        .card .dx-pages .dx-page {
            border-radius: 7px !important;
            font-family: var(--font) !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            border: 1.5px solid #c8d3de !important;
            background: #fff !important;
            color: var(--text) !important;
            width: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            height: 32px !important;
            line-height: 1 !important;
            text-align: center !important;
            cursor: pointer !important;
            transition: all .14s !important;
            margin: 0 3px !important;
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
        }

            .card .dx-pages .dx-page:hover {
                border-color: var(--accent) !important;
                color: var(--accent) !important;
                background: var(--accent-light) !important;
            }

            .card .dx-pages .dx-page.dx-selection {
                background: var(--accent) !important;
                color: #fff !important;
                border-color: var(--accent) !important;
                font-weight: 700 !important;
                box-shadow: 0 2px 8px rgba(74,124,158,.30) !important;
            }

        .card .dx-pages .dx-separator {
            border: none !important;
            background: transparent !important;
            color: var(--muted) !important;
            width: 20px !important;
            height: 32px !important;
            line-height: 1 !important;
            text-align: center !important;
            cursor: default !important;
            font-size: 13px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
        }

    /* Prev / Next arrows */
    .card .dx-navigate-button,
    .card .dx-prev-button,
    .card .dx-next-button {
        border-radius: 7px !important;
        border: 1.5px solid #c8d3de !important;
        background: #fff !important;
        height: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        color: #4a5568 !important;
        cursor: pointer !important;
        transition: all .14s !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

        /* Force icon inside arrow buttons to center */
        .card .dx-navigate-button *,
        .card .dx-navigate-button .dx-button-content,
        .card .dx-navigate-button .dx-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
            font-size: 14px !important;
            position: static !important;
        }

    /* Page numbers */
    .card .dx-pages {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 8px !important;
    }

    .card .dx-navigate-button:hover:not([aria-disabled="true"]):not(.dx-button-disable),
    .card .dx-prev-button:hover,
    .card .dx-next-button:hover {
        border-color: var(--accent) !important;
        color: var(--accent) !important;
        background: var(--accent-light) !important;
    }

    .card .dx-navigate-button.dx-button-disable,
    .card .dx-navigate-button[aria-disabled="true"] {
        opacity: .38 !important;
        cursor: not-allowed !important;
        background: #f5f5f5 !important;
    }

    /* Page info text */
    .card .dx-info {
        font-family: var(--font) !important;
        font-size: 12.5px !important;
        color: var(--muted) !important;
    }

    /* Summary bar */
    .card .dx-datagrid-total-footer {
        background: #f0f6ff !important;
        border-top: 2px solid #ccdff5 !important;
        font-family: var(--mono) !important;
        font-weight: 600 !important;
        color: var(--accent) !important;
        font-size: 13px !important;
    }

        .card .dx-datagrid-total-footer > .dx-datagrid-content {
            padding: 8px 12px !important;
        }

    /* Edit/Add form */
    .card .dx-datagrid-edit-form {
        font-family: var(--font) !important;
    }

    /* Toolbar buttons */
    .card .dx-toolbar-item .dx-button {
        border-radius: 8px !important;
        font-family: var(--font) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border: 1.5px solid var(--border) !important;
        transition: all .15s !important;
    }

        .card .dx-toolbar-item .dx-button:hover {
            border-color: var(--accent) !important;
            color: var(--accent) !important;
            background: var(--accent-light) !important;
        }

        .card .dx-toolbar-item .dx-button.dx-button-success,
        .card .dx-toolbar-item .dx-button.dx-button-default {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
            color: #fff !important;
        }

            .card .dx-toolbar-item .dx-button.dx-button-success:hover,
            .card .dx-toolbar-item .dx-button.dx-button-default:hover {
                background: var(--accent-hover) !important;
            }

    /* Group panel */
    .card .dx-datagrid-group-panel {
        background: #f4f8fe !important;
        border-bottom: 1px solid var(--border) !important;
        font-family: var(--font) !important;
        font-size: 12.5px !important;
        color: var(--muted) !important;
        padding: 8px 14px !important;
    }

    .card .dx-group-panel-item {
        background: var(--accent-light) !important;
        color: var(--accent-hover) !important;
        border: 1px solid #c0d4e0 !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 3px 10px !important;
    }

/* Column chooser */
.dx-column-chooser {
    font-family: var(--font) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

/* Scrollbar */
.card .dx-scrollable-content::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.card .dx-scrollable-content::-webkit-scrollbar-track {
    background: #f0f4f8;
}

.card .dx-scrollable-content::-webkit-scrollbar-thumb {
    background: #c0cad8;
    border-radius: 3px;
}

    .card .dx-scrollable-content::-webkit-scrollbar-thumb:hover {
        background: var(--accent);
    }

/* ── Attachments button ── */
.attach-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: #fff;
    font-size: 9.5px;
    padding: 1px 4px;
    border-radius: 50%;
    line-height: 1.3;
    min-width: 15px;
    text-align: center;
    font-family: var(--mono);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.btn-attachments {
    color: #0e9a94 !important;
    transition: color .15s, transform .15s !important;
}

    .btn-attachments:hover {
        color: #097a75 !important;
        transform: scale(1.15) !important;
    }

/* Action icon sizing */
.card .dx-datagrid-rowsview .dx-command-edit .dx-link {
    font-size: 15px !important;
    padding: 3px 5px !important;
    border-radius: 6px !important;
    transition: background .13s, color .13s !important;
}

/* NOTE: hover backgrounds for these links are intentionally NOT set here.
   They are set by the "Final grid action icon treatment" rules further down
   this file (per action type: edit/save/cancel/delete/view/copy/key/roles).
   Setting a generic hover background here (as this block used to do) has
   higher CSS specificity than those per-type rules for plain dx-link-edit /
   dx-link-delete (i.e. grids using DevExtreme's built-in edit/delete button,
   not the action-btn/m-action-btn custom class), which silently overrode
   them and produced a near-white background behind a white hover icon. */

/* Borders */
.card .dx-datagrid {
    border: none !important;
}

.card .dx-datagrid-borders > .dx-datagrid-headers,
.card .dx-datagrid-borders > .dx-datagrid-rowsview {
    border-left: none !important;
    border-right: none !important;
}

/* Loading spinner accent */
.card .dx-loadpanel-indicator {
    border-top-color: var(--accent) !important;
}

/* ════════════════════════════════════════════════════════════════════════════════ */
/* ─────────────────── TreeList Styles (Mirror DataGrid) ─────────────────── */
/* ════════════════════════════════════════════════════════════════════════════════ */

/* TreeList Header */
.card .dx-treelist-headers {
    background: transparent !important;
    color: var(--header-text) !important;
    font-family: var(--font) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
    border-bottom: none !important;
}

    .card .dx-treelist-headers .dx-header-row > td {
        background: var(--header-bg) !important;
        color: var(--header-text) !important;
        border-bottom: 2px solid #d0d9e4 !important;
        padding: 10px 12px !important;
        font-weight: 600 !important;
    }

        .card .dx-treelist-headers .dx-header-row > td:hover {
            background: #dce5ef !important;
            color: var(--text) !important;
        }

/* TreeList Data Rows */
.card .dx-treelist-rowsview .dx-row {
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    color: var(--text) !important;
    border-bottom: 1px solid #e8edf3 !important;
    transition: background .12s !important;
}

    .card .dx-treelist-rowsview .dx-row > td {
        padding: 9px 12px !important;
        vertical-align: middle !important;
    }

    /* Alternating rows in TreeList */
    .card .dx-treelist-rowsview .dx-row.dx-row-alt > td {
        background-color: var(--row-alt) !important;
    }

    /* Hover state in TreeList */
    .card .dx-treelist-rowsview .dx-row.dx-state-hover > td {
        background-color: var(--row-hover) !important;
    }

/* TreeList Filter Row */
.card .dx-treelist-filter-row > td {
    background: #f5f5f5 !important;
    border-bottom: 2px solid var(--border) !important;
    padding: 5px 7px !important;
    color: #000;
}

.card .dx-treelist-filter-row .dx-texteditor {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1.5px solid #d0d7e2 !important;
}

    .card .dx-treelist-filter-row .dx-texteditor .dx-texteditor-input {
        background: #ffffff !important;
        color: var(--text) !important;
        font-family: var(--font) !important;
        font-size: 12.5px !important;
    }

    .card .dx-treelist-filter-row .dx-texteditor.dx-state-focused {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 2px rgba(74,124,158,.15) !important;
    }

/* TreeList Pager */
.card .dx-treelist-pager {
    background: #f8fafd !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 16px !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    color: var(--muted) !important;
}

/* TreeList Toolbar */
.card .dx-treelist-header-panel {
    background: #f8fafd !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 14px !important;
}

/* TreeList Search Box */
.card .dx-treelist .dx-searchbox {
    border-radius: 8px !important;
    border-color: var(--border) !important;
}

    .card .dx-treelist .dx-searchbox.dx-state-focused {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px rgba(26,95,168,.12) !important;
    }

/* ══════════════════════════════════════════════════
   Shared Grid Action Icons (applies to ALL grids)
   ══════════════════════════════════════════════════ */

/* Base action button in command column */
.dx-command-edit .dx-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none !important;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
    text-decoration: none !important;
    margin: 0 2px;
}

.dx-command-edit .dx-link:hover {
    transform: translateY(-1px);
}

/* Edit  */
.dx-command-edit .dx-link-edit,
.dx-command-edit .dx-link.action-btn.edit,
.dx-command-edit .dx-link.m-action-btn.edit {
    background: rgba(74,124,158,.1);
    color: var(--accent) !important;
}
.dx-command-edit .dx-link-edit:hover,
.dx-command-edit .dx-link.action-btn.edit:hover,
.dx-command-edit .dx-link.m-action-btn.edit:hover {
    background: var(--accent);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(74,124,158,.3);
}

/* Save (inline edit) */
.dx-command-edit .dx-link-save {
    background: rgba(72,168,104,.1);
    color: var(--success) !important;
}
.dx-command-edit .dx-link-save:hover {
    background: var(--success);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(72,168,104,.3);
}

/* Cancel (inline edit) */
.dx-command-edit .dx-link-cancel {
    background: rgba(113,128,150,.1);
    color: var(--muted) !important;
}
.dx-command-edit .dx-link-cancel:hover {
    background: var(--muted);
    color: #fff !important;
}

/* Delete  */
.dx-command-edit .dx-link-delete,
.dx-command-edit .dx-link.action-btn.delete,
.dx-command-edit .dx-link.m-action-btn.delete {
    background: rgba(226,92,92,.1);
    color: var(--danger) !important;
}
.dx-command-edit .dx-link-delete:hover,
.dx-command-edit .dx-link.action-btn.delete:hover,
.dx-command-edit .dx-link.m-action-btn.delete:hover {
    background: var(--danger);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(226,92,92,.3);
}

/* View / Eye icon */
.dx-command-edit .dx-link[aria-label="View"],
.dx-command-edit .dx-link .dx-icon-eyeopen {
    color: #4a9ea0;
}
.dx-command-edit .dx-link[aria-label="View"] {
    background: rgba(74,158,160,.1);
    color: #4a9ea0 !important;
}
.dx-command-edit .dx-link[aria-label="View"]:hover {
    background: #4a9ea0;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(74,158,160,.3);
}

/* Key / Password */
.dx-command-edit .dx-link.action-btn.key,
.dx-command-edit .dx-link.m-action-btn.key {
    background: rgba(212,149,42,.1);
    color: var(--warn) !important;
}
.dx-command-edit .dx-link.action-btn.key:hover,
.dx-command-edit .dx-link.m-action-btn.key:hover {
    background: var(--warn);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(212,149,42,.3);
}

/* Roles / Preferences */
.dx-command-edit .dx-link.action-btn.roles {
    background: rgba(139,92,246,.1);
    color: #8B5CF6 !important;
}
.dx-command-edit .dx-link.action-btn.roles:hover {
    background: #8B5CF6;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(139,92,246,.3);
}

/* Attachments */
.attachments-btn {
    background: rgba(74,158,160,.06);
    color: #4a9ea0;
}
.attachments-btn:hover {
    background: rgba(74,158,160,.14) !important;
}
.attach-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
}

/* ── Shared Stat Cards (reusable across all pages) ── */
.stat-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
}

.stat-card.total::before  { background: var(--accent); }
.stat-card.active::before { background: var(--success); }
.stat-card.inactive::before { background: var(--danger); }

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-card.total .stat-icon    { background: rgba(74,124,158,.1);  color: var(--accent);  }
.stat-card.active .stat-icon   { background: rgba(72,168,104,.1);  color: var(--success); }
.stat-card.inactive .stat-icon { background: rgba(226,92,92,.1);   color: var(--danger);  }

.stat-details { flex-grow: 1; }

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 4px;
}

/* ── Shared Status Badges ── */
.m-status-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.m-status-badge.active,
.status-badge.active  { background: rgba(72,168,104,.1);  color: var(--success); }
.m-status-badge.inactive,
.status-badge.inactive { background: rgba(226,92,92,.1);  color: var(--danger);  }

.m-status-badge .dot,
.status-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    display: block; flex-shrink: 0; align-self: center;
}
.m-status-badge.active .dot,
.status-badge.active .dot  { background: var(--success); }
.m-status-badge.inactive .dot,
.status-badge.inactive .dot { background: var(--danger); }

/* ── Shared Role Badges ── */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}
.role-badge i {
    line-height: 1;
    flex-shrink: 0;
    font-size: .7rem;
}
.role-badge.client   { background: rgba(74,124,158,.1);  color: var(--accent);   }
.role-badge.admin    { background: rgba(139,92,246,.1);  color: #8B5CF6;         }
.role-badge.readonly { background: rgba(113,128,150,.1); color: var(--muted);    }

/* ── Shared User Avatar ── */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    margin-right: 12px;
}
[dir="rtl"] .user-avatar {
    margin-right: 0;
    margin-left: 12px;
}
.user-name-cell {
    display: flex;
    align-items: center;
}

/* ── Unified Grid Action Buttons ── */
/* Replicates the 'attachments' icon premium style for all default & custom DevExtreme action buttons */
.dx-datagrid-content .dx-command-edit .dx-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    margin: 0 4px;
    color: var(--muted) !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    background: transparent;
}

/* Base hover state */
.dx-datagrid-content .dx-command-edit .dx-link:hover {
    color: var(--text) !important;
    background: rgba(100, 116, 139, 0.1); 
}

/* Edit / Save Action */
.dx-datagrid-content .dx-command-edit .dx-link-edit:hover,
.dx-datagrid-content .dx-command-edit .dx-link-save:hover,
.dx-datagrid-content .dx-command-edit .dx-icon-edit:hover,
.dx-datagrid-content .dx-command-edit .dx-icon-save:hover {
    background: rgba(17, 102, 166, 0.1);
    color: var(--accent) !important;
}

/* Delete / Cancel Action */
.dx-datagrid-content .dx-command-edit .dx-link-delete:hover,
.dx-datagrid-content .dx-command-edit .dx-link-cancel:hover,
.dx-datagrid-content .dx-command-edit .dx-icon-trash:hover,
.dx-datagrid-content .dx-command-edit .dx-icon-revert:hover {
    background: rgba(220, 38, 38, 0.1);
    color: var(--danger) !important;
}

/* Specific Custom Actions (View, Copy) */
.dx-datagrid-content .dx-command-edit .dx-link.dx-icon-eyeopen:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.dx-icon-copy:hover {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b !important;
}

/* Final grid action icon treatment: DeepSea-style compact command buttons. */
.dx-datagrid-content .dx-command-edit,
.dx-command-edit {
    text-align: center;
    white-space: nowrap;
}

.dx-datagrid-content .dx-command-edit .dx-link,
.dx-command-edit .dx-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 3px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.dx-datagrid-content .dx-command-edit .dx-link::before,
.dx-command-edit .dx-link::before,
.dx-datagrid-content .dx-command-edit .dx-link .dx-icon,
.dx-command-edit .dx-link .dx-icon {
    color: inherit !important;
    font-size: 15px !important;
}

.dx-datagrid-content .dx-command-edit .dx-link:hover,
.dx-command-edit .dx-link:hover {
    transform: translateY(-1px);
}

.dx-datagrid-content .dx-command-edit .dx-link-edit,
.dx-command-edit .dx-link-edit,
.dx-datagrid-content .dx-command-edit .dx-link.action-btn.edit,
.dx-command-edit .dx-link.action-btn.edit,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.edit,
.dx-command-edit .dx-link.m-action-btn.edit {
    color: #1166a6 !important;
    background: #eff6ff !important;
    border-color: #dbeafe !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-edit:hover,
.dx-command-edit .dx-link-edit:hover,
.dx-datagrid-content .dx-command-edit .dx-link.action-btn.edit:hover,
.dx-command-edit .dx-link.action-btn.edit:hover,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.edit:hover,
.dx-command-edit .dx-link.m-action-btn.edit:hover {
    color: #fff !important;
    background: #1166a6 !important;
    border-color: #1166a6 !important;
    box-shadow: 0 4px 12px rgba(17, 102, 166, .2) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-save,
.dx-command-edit .dx-link-save {
    color: #16a34a !important;
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-save:hover,
.dx-command-edit .dx-link-save:hover {
    color: #fff !important;
    background: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .2) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-delete,
.dx-command-edit .dx-link-delete,
.dx-datagrid-content .dx-command-edit .dx-link.action-btn.delete,
.dx-command-edit .dx-link.action-btn.delete,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.delete,
.dx-command-edit .dx-link.m-action-btn.delete {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-color: #fee2e2 !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-delete:hover,
.dx-command-edit .dx-link-delete:hover,
.dx-datagrid-content .dx-command-edit .dx-link.action-btn.delete:hover,
.dx-command-edit .dx-link.action-btn.delete:hover,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.delete:hover,
.dx-command-edit .dx-link.m-action-btn.delete:hover {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .2) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-cancel,
.dx-command-edit .dx-link-cancel {
    color: #64748b !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

.dx-datagrid-content .dx-command-edit .dx-link-cancel:hover,
.dx-command-edit .dx-link-cancel:hover {
    color: #fff !important;
    background: #64748b !important;
    border-color: #64748b !important;
    box-shadow: 0 4px 12px rgba(100, 116, 139, .18) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link[aria-label="View"],
.dx-command-edit .dx-link[aria-label="View"],
.dx-datagrid-content .dx-command-edit .dx-link.dx-icon-eyeopen,
.dx-command-edit .dx-link.dx-icon-eyeopen {
    color: #0d9488 !important;
    background: #f0fdfa !important;
    border-color: #ccfbf1 !important;
}

.dx-datagrid-content .dx-command-edit .dx-link[aria-label="View"]:hover,
.dx-command-edit .dx-link[aria-label="View"]:hover,
.dx-datagrid-content .dx-command-edit .dx-link.dx-icon-eyeopen:hover,
.dx-command-edit .dx-link.dx-icon-eyeopen:hover {
    color: #fff !important;
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, .2) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.dx-icon-copy,
.dx-command-edit .dx-link.dx-icon-copy {
    color: #d97706 !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.dx-icon-copy:hover,
.dx-command-edit .dx-link.dx-icon-copy:hover {
    color: #fff !important;
    background: #d97706 !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, .2) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.action-btn.key,
.dx-command-edit .dx-link.action-btn.key,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.key,
.dx-command-edit .dx-link.m-action-btn.key {
    color: #ca8a04 !important;
    background: #fefce8 !important;
    border-color: #fef08a !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.action-btn.key:hover,
.dx-command-edit .dx-link.action-btn.key:hover,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.key:hover,
.dx-command-edit .dx-link.m-action-btn.key:hover {
    color: #fff !important;
    background: #ca8a04 !important;
    border-color: #ca8a04 !important;
    box-shadow: 0 4px 12px rgba(202, 138, 4, .2) !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.action-btn.roles,
.dx-command-edit .dx-link.action-btn.roles,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.roles,
.dx-command-edit .dx-link.m-action-btn.roles {
    color: #7c3aed !important;
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
}

.dx-datagrid-content .dx-command-edit .dx-link.action-btn.roles:hover,
.dx-command-edit .dx-link.action-btn.roles:hover,
.dx-datagrid-content .dx-command-edit .dx-link.m-action-btn.roles:hover,
.dx-command-edit .dx-link.m-action-btn.roles:hover {
    color: #fff !important;
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, .2) !important;
}

.dx-command-edit .invoice-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0 3px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
    background: #f8fafc;
    color: #64748b;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dx-command-edit .invoice-grid-action i,
.dx-command-edit .invoice-grid-action .dx-icon {
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.dx-command-edit .invoice-grid-action:hover {
    transform: translateY(-1px);
}

.dx-command-edit .invoice-grid-action-attachment {
    color: #0d9488;
    background: #f0fdfa;
    border-color: #ccfbf1;
}

.dx-command-edit .invoice-grid-action-attachment:hover {
    color: #fff;
    background: #0d9488;
    border-color: #0d9488;
    box-shadow: 0 4px 12px rgba(13, 148, 136, .2);
}

.dx-command-edit .invoice-grid-action-einvoice {
    color: var(--invoice-action-color, #0d9488);
    background: var(--invoice-action-bg, #f0fdfa);
    border-color: transparent;
}

.dx-command-edit .invoice-grid-action-einvoice:hover {
    color: #fff;
    background: var(--invoice-action-color, #0d9488);
    border-color: var(--invoice-action-color, #0d9488);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
}

.dx-command-edit .invoice-grid-action-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(239, 68, 68, .25);
}

[dir="rtl"] .dx-command-edit .invoice-grid-action-badge {
    right: auto;
    left: -7px;
}

.dx-command-edit .attachments-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 3px !important;
    padding: 0 !important;
    border: 1px solid #ccfbf1 !important;
    border-radius: 6px !important;
    cursor: pointer;
    line-height: 1 !important;
    vertical-align: middle !important;
    color: #0d9488 !important;
    background: #f0fdfa !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.dx-command-edit .attachments-btn .dx-icon,
.dx-command-edit .attachments-btn i {
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.dx-command-edit .attachments-btn:hover {
    color: #fff !important;
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, .2) !important;
    transform: translateY(-1px);
}

.dx-command-edit .attachments-btn .attach-badge {
    top: -7px !important;
    right: -7px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    border: 2px solid #fff !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, .25) !important;
}

[dir="rtl"] .dx-command-edit .attachments-btn .attach-badge {
    right: auto !important;
    left: -7px !important;
}