.grid-page-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--canvas-border);
}

.grid-page-header-icon {
    width: 52px;
    height: 52px;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-400);
    flex-shrink: 0;
    box-shadow: var(--sh-sm), 0 0 0 1px rgba(139,92,246,0.08);
    position: relative;
    overflow: hidden;
}

.grid-page-header-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.grid-page-title {
    font-size: clamp(22px, 2.8vw, 28px);
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--canvas-text);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.grid-page-sub {
    font-size: 14px;
    color: var(--canvas-muted);
    margin: 0;
    line-height: 1.5;
}

.users-page-wrapper,
.roles-page-wrapper,
.applications-page-wrapper { padding: 4px 0; }

.users-title,
.roles-title,
.applications-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--canvas-text);
    margin: 0 0 20px 0;
}

#DataGridUsers,
#DataGridRoles,
#DataGridApplications {
    border-radius: var(--r-xl) !important;
    overflow: hidden;
    border: 1px solid var(--canvas-border) !important;
    box-shadow: var(--sh-lg), 0 0 0 1px rgba(139,92,246,0.04) !important;
}

#DataGridRedirectUri,
#DataGridPermissions,
#DataGridRequirements,
#DataGridPostLogoutRedirectUri {
    border-radius: var(--r-xl) !important;
    overflow: hidden;
    border: 1px solid var(--canvas-border) !important;
    box-shadow: var(--sh-lg), 0 0 0 1px rgba(139,92,246,0.04) !important;
    background: var(--canvas-surface) !important;
    color: var(--canvas-text) !important;
}

#DataGridRedirectUri .dx-datagrid-header-panel,
#DataGridPermissions .dx-datagrid-header-panel,
#DataGridRequirements .dx-datagrid-header-panel,
#DataGridPostLogoutRedirectUri .dx-datagrid-header-panel {
    background: var(--canvas-surface) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
}

#DataGridRedirectUri .dx-datagrid-headers,
#DataGridPermissions .dx-datagrid-headers,
#DataGridRequirements .dx-datagrid-headers,
#DataGridPostLogoutRedirectUri .dx-datagrid-headers {
    background: var(--canvas-raised) !important;
    border-bottom: 2px solid var(--canvas-border-2) !important;
}

#DataGridRedirectUri .dx-header-row > td,
#DataGridPermissions .dx-header-row > td,
#DataGridRequirements .dx-header-row > td,
#DataGridPostLogoutRedirectUri .dx-header-row > td {
    background: transparent !important;
    color: var(--canvas-subtle) !important;
}

#DataGridRedirectUri .dx-data-row > td,
#DataGridPermissions .dx-data-row > td,
#DataGridRequirements .dx-data-row > td,
#DataGridPostLogoutRedirectUri .dx-data-row > td {
    background: var(--canvas-surface) !important;
    color: var(--canvas-text) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
}

#DataGridRedirectUri .dx-data-row.dx-row-alt > td,
#DataGridPermissions .dx-data-row.dx-row-alt > td,
#DataGridRequirements .dx-data-row.dx-row-alt > td,
#DataGridPostLogoutRedirectUri .dx-data-row.dx-row-alt > td {
    background: var(--canvas-raised) !important;
}

#DataGridRedirectUri .dx-datagrid-rowsview,
#DataGridPermissions .dx-datagrid-rowsview,
#DataGridRequirements .dx-datagrid-rowsview,
#DataGridPostLogoutRedirectUri .dx-datagrid-rowsview {
    background: var(--canvas-surface) !important;
}

#DataGridRedirectUri .dx-datagrid-pager,
#DataGridPermissions .dx-datagrid-pager,
#DataGridRequirements .dx-datagrid-pager,
#DataGridPostLogoutRedirectUri .dx-datagrid-pager {
    background: var(--canvas-raised) !important;
    border-top: 1px solid var(--canvas-border) !important;
    color: var(--canvas-muted) !important;
}

.subgrid-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--p-50);
    border: 1px solid var(--p-200);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.subgrid-info-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--p-100);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
}
.subgrid-info-body strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #6d28d9;
    margin-bottom: 2px;
}
.subgrid-info-body p {
    font-size: 12px;
    color: var(--canvas-subtle);
    margin: 0;
    line-height: 1.5;
}

.app-form-banner {
    background: var(--canvas-raised);
    border: 1px solid var(--canvas-border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    margin-bottom: 4px;
}
.app-form-banner strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--canvas-text);
    margin-bottom: 3px;
}
.app-form-banner p {
    font-size: 12px;
    color: var(--canvas-subtle);
    margin: 0;
    line-height: 1.5;
}

.dx-datagrid {
    background: var(--canvas-surface) !important;
    color: var(--canvas-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    border: none !important;
}

.dx-datagrid .dx-datagrid-header-panel {
    background: var(--canvas-surface) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    padding: 10px 14px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
}

.dx-datagrid .dx-toolbar {
    background: transparent !important;
    padding: 0 !important;
}

.dx-datagrid .dx-searchbox,
.dx-datagrid .dx-datagrid-header-panel .dx-texteditor {
    background: var(--canvas-raised) !important;
    border: 1.5px solid var(--canvas-border) !important;
    border-radius: var(--r-md) !important;
    color: var(--canvas-text) !important;
    box-shadow: var(--sh-xs) !important;
}

.dx-datagrid .dx-datagrid-header-panel .dx-texteditor.dx-state-focused {
    border-color: var(--primary-dark) !important;
    box-shadow: 0 0 0 3px var(--primary-glow-2) !important;
    background: var(--canvas-surface) !important;
}

.dx-datagrid .dx-datagrid-header-panel .dx-texteditor-input {
    background: transparent !important;
    color: var(--canvas-text) !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
}

.dx-datagrid .dx-datagrid-header-panel .dx-placeholder {
    color: var(--canvas-subtle) !important;
}
.dx-datagrid .dx-datagrid-header-panel .dx-placeholder::before {
    color: var(--canvas-subtle) !important;
}

.dx-datagrid .dx-datagrid-header-panel .dx-icon-search {
    color: var(--canvas-muted) !important;
}

.btn-add-user .dx-button,
.btn-add-role .dx-button,
.btn-add-application .dx-button,
.btn-add-sub .dx-button {
    background: #7c3aed !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(124,58,237,0.28), 0 1px 2px rgba(0,0,0,0.08) !important;
    transition: all var(--t-base) !important;
    padding: 0 16px !important;
    height: 34px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: -0.1px !important;
}
.btn-add-user .dx-button:hover,
.btn-add-role .dx-button:hover,
.btn-add-application .dx-button:hover,
.btn-add-sub .dx-button:hover {
    background: #6d28d9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(109,40,217,0.38) !important;
}
.btn-add-user .dx-button .dx-icon,
.btn-add-user .dx-button .dx-button-text,
.btn-add-role .dx-button .dx-icon,
.btn-add-role .dx-button .dx-button-text,
.btn-add-application .dx-button .dx-icon,
.btn-add-application .dx-button .dx-button-text,
.btn-add-sub .dx-button .dx-icon,
.btn-add-sub .dx-button .dx-button-text {
    color: #ffffff !important;
}

.dx-datagrid .dx-toolbar-after .dx-button {
    background: transparent !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--r-md) !important;
    color: var(--canvas-muted) !important;
    height: 34px !important;
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all var(--t-fast) !important;
}
.dx-datagrid .dx-toolbar-after .dx-button .dx-icon {
    color: var(--canvas-subtle) !important;
    font-size: 15px !important;
}
.dx-datagrid .dx-toolbar-after .dx-button:hover {
    background: var(--p-50) !important;
    border-color: var(--p-300) !important;
    transform: translateY(-1px) !important;
}
.dx-datagrid .dx-toolbar-after .dx-button:hover .dx-icon {
    color: #7c3aed !important;
}

.dx-datagrid .dx-datagrid-headers {
    background: var(--canvas-raised) !important;
    border-bottom: 2px solid var(--canvas-border-2) !important;
}

.dx-datagrid .dx-header-row > td {
    background: transparent !important;
    color: var(--canvas-subtle) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    padding: 12px 18px !important;
    border-right: 1px solid var(--canvas-border) !important;
    border-bottom: none !important;
    white-space: nowrap !important;
}

.dx-datagrid .dx-header-row > td:last-child { border-right: none !important; }

.dx-datagrid .dx-sort-index-icon,
.dx-datagrid .dx-sort-up,
.dx-datagrid .dx-sort-down { color: var(--primary-dark) !important; }

.dx-datagrid .dx-header-row > td.dx-state-hover {
    background: var(--p-50) !important;
    color: var(--primary-dark) !important;
}

.dx-datagrid .dx-datagrid-rowsview {
    background: var(--canvas-surface) !important;
    border: none !important;
}

.dx-datagrid .dx-data-row > td {
    background: var(--canvas-surface) !important;
    color: var(--canvas-text) !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    border-right: none !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
    transition: background var(--t-fast) !important;
    line-height: 1.5 !important;
}

.dx-datagrid .dx-data-row.dx-state-hover > td,
.dx-datagrid .dx-data-row:hover > td {
    background: var(--p-50) !important;
    color: var(--canvas-text) !important;
}

.dx-datagrid .dx-data-row.dx-row-alt > td {
    background: var(--canvas-raised) !important;
}

.dx-datagrid .dx-data-row.dx-row-alt.dx-state-hover > td,
.dx-datagrid .dx-data-row.dx-row-alt:hover > td {
    background: var(--p-50) !important;
}

.dx-datagrid .dx-selection.dx-row > td {
    background: var(--p-100) !important;
    color: var(--canvas-text) !important;
}

.dx-datagrid .dx-row-focused > td {
    background: var(--p-100) !important;
    color: var(--canvas-text) !important;
    border-bottom-color: var(--canvas-border-2) !important;
}
.dx-datagrid .dx-row-focused.dx-row-alt > td {
    background: var(--p-100) !important;
}

.dx-datagrid .dx-command-edit .dx-link {
    color: var(--canvas-muted) !important;
    font-size: 15px !important;
    transition: all var(--t-fast) !important;
    border-radius: var(--r-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid transparent !important;
    margin: 0 1px !important;
}

.dx-datagrid .dx-command-edit .dx-link-edit {
    color: var(--primary-dark) !important;
    background: var(--p-50) !important;
    border-color: var(--canvas-border) !important;
}
.dx-datagrid .dx-command-edit .dx-link-edit:hover {
    background: var(--p-100) !important;
    border-color: var(--canvas-border-2) !important;
    color: var(--primary-darker) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(109,40,217,0.15) !important;
}

.dx-datagrid .dx-command-edit .dx-link-delete {
    color: var(--canvas-subtle) !important;
    background: transparent !important;
}
.dx-datagrid .dx-command-edit .dx-link-delete:hover {
    color: var(--danger) !important;
    background: var(--danger-bg) !important;
    border-color: var(--danger-border) !important;
    transform: translateY(-1px) !important;
}

.dx-datagrid .dx-command-edit .dx-link:not(.dx-link-edit):not(.dx-link-delete) {
    color: var(--canvas-muted) !important;
    background: transparent !important;
}
.dx-datagrid .dx-command-edit .dx-link:not(.dx-link-edit):not(.dx-link-delete):hover {
    color: var(--primary-dark) !important;
    background: var(--p-50) !important;
    border-color: var(--canvas-border) !important;
    transform: translateY(-1px) !important;
}

.dx-datagrid .dx-pager,
.dx-datagrid .dx-datagrid-pager {
    background: var(--canvas-raised) !important;
    border-top: 1px solid var(--canvas-border) !important;
    padding: 10px 16px !important;
    color: var(--canvas-muted) !important;
    font-size: 13px !important;
}

.dx-datagrid .dx-pager .dx-page,
.dx-datagrid .dx-pager .dx-page-sizes .dx-page-size {
    background: var(--canvas-surface) !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--canvas-muted) !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    transition: all var(--t-fast) !important;
}

.dx-datagrid .dx-pager .dx-page.dx-selection,
.dx-datagrid .dx-pager .dx-page-sizes .dx-page-size.dx-selection {
    background: var(--p-100) !important;
    border-color: var(--p-300) !important;
    color: #6d28d9 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.dx-datagrid .dx-pager .dx-page:hover,
.dx-datagrid .dx-pager .dx-page-sizes .dx-page-size:hover {
    background: var(--p-50) !important;
    border-color: var(--p-200) !important;
    color: #7c3aed !important;
}

.dx-datagrid .dx-pager .dx-navigate-button { color: var(--canvas-subtle) !important; }
.dx-datagrid .dx-pager .dx-navigate-button:hover { color: #7c3aed !important; }
.dx-datagrid .dx-pager .dx-info { color: var(--canvas-subtle) !important; }

.dx-datagrid .dx-datagrid-nodata {
    color: var(--canvas-muted) !important;
    font-size: 14px !important;
}

.dx-popup-wrapper .dx-overlay-content {
    background: var(--canvas-surface) !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--sh-2xl) !important;
    color: var(--canvas-text) !important;
    overflow: hidden !important;
}

.dx-popup-wrapper .dx-popup-title,
.dx-overlay-wrapper .dx-popup-title {
    background: var(--canvas-surface) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    color: var(--canvas-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 16px 20px !important;
    border-radius: 0 !important;
    position: relative !important;
}

.dx-popup-wrapper .dx-popup-title::before,
.dx-overlay-wrapper .dx-popup-title::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--grad-brand);
    position: absolute;
    top: 0; left: 0; right: 0;
}

.dx-popup-wrapper .dx-closebutton .dx-icon,
.dx-overlay-wrapper .dx-closebutton .dx-icon { color: var(--canvas-muted) !important; }
.dx-popup-wrapper .dx-closebutton:hover .dx-icon,
.dx-overlay-wrapper .dx-closebutton:hover .dx-icon { color: var(--canvas-text) !important; }

.dx-popup-wrapper .dx-popup-content {
    padding: 20px 18px !important;
    background: transparent !important;
    color: var(--canvas-text) !important;
}

.dx-popup-wrapper .dx-toolbar.dx-popup-bottom {
    background: var(--canvas-raised) !important;
    border-top: 1px solid var(--canvas-border) !important;
    padding: 10px 18px !important;
    border-radius: 0 !important;
}

.dx-popup-wrapper .dx-popup-bottom .dx-button.dx-button-success {
    background: var(--grad-brand) !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: var(--sh-brand) !important;
    height: 38px !important;
    padding: 0 18px !important;
}

.dx-popup-wrapper .dx-popup-bottom .dx-button.dx-button-success:hover {
    background: var(--grad-brand-h) !important;
    box-shadow: var(--sh-brand-lg) !important;
}

.dx-popup-wrapper .dx-form .dx-field-item-label-text {
    color: var(--canvas-subtle) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.dx-popup-wrapper .dx-form .dx-texteditor {
    background: var(--canvas-surface) !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-xs) !important;
}

.dx-popup-wrapper .dx-form .dx-texteditor.dx-state-focused {
    border-color: var(--primary-dark) !important;
    box-shadow: 0 0 0 3px var(--primary-glow-2) !important;
}

.dx-popup-wrapper .dx-form .dx-texteditor-input {
    background: transparent !important;
    color: var(--canvas-text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
}

.dx-popup-wrapper .dx-checkbox-checked .dx-checkbox-icon,
.dx-list .dx-checkbox-checked .dx-checkbox-icon {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.dx-list .dx-checkbox-icon {
    border: 2px solid var(--canvas-border-2) !important;
    border-radius: var(--r-xs) !important;
    background: var(--canvas-surface) !important;
}

.dx-list {
    background: var(--canvas-surface) !important;
    color: var(--canvas-text) !important;
    border: none !important;
}

.dx-list .dx-list-item {
    border-bottom: 1px solid var(--canvas-border) !important;
    color: var(--canvas-muted) !important;
    transition: background var(--t-fast) !important;
}

.dx-list .dx-list-item:hover,
.dx-list .dx-list-item.dx-state-hover {
    background: var(--p-50) !important;
    color: var(--canvas-text) !important;
}

.dx-list .dx-list-item.dx-list-item-selected {
    background: var(--p-100) !important;
    color: var(--primary-dark) !important;
}

.dx-datagrid .dx-group-row > td {
    background: var(--canvas-raised) !important;
    color: var(--canvas-subtle) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    border-top: 1px solid var(--canvas-border) !important;
}

.dx-scrollable-scrollbar .dx-scrollable-scroll-content {
    background: rgba(139,92,246,0.25) !important;
    border-radius: 3px !important;
}

.dx-dropdownlist-popup-wrapper .dx-overlay-content,
.dx-selectbox-popup-wrapper .dx-overlay-content {
    background: var(--canvas-surface) !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-xl) !important;
}

.dx-dropdownlist-popup-wrapper .dx-list-item,
.dx-selectbox-popup-wrapper .dx-list-item {
    color: var(--canvas-text) !important;
}

.dx-dropdownlist-popup-wrapper .dx-list-item.dx-state-hover,
.dx-selectbox-popup-wrapper .dx-list-item.dx-state-hover {
    background: var(--p-50) !important;
}

.dx-dropdownlist-popup-wrapper .dx-list-item.dx-list-item-selected,
.dx-selectbox-popup-wrapper .dx-list-item.dx-list-item-selected {
    background: var(--p-100) !important;
    color: var(--primary-dark) !important;
}

.dx-datagrid .dx-loadindicator-icon .dx-loadindicator-segment-inner {
    background-color: var(--primary) !important;
}

@media (max-width: 768px) {

    .grid-page-header { gap: 12px; margin-bottom: 18px; padding-bottom: 14px; }
    .grid-page-header-icon { width: 44px; height: 44px; }
    .grid-page-title { font-size: 19px !important; }
    .grid-page-sub { font-size: 12.5px; }

    .users-title, .roles-title, .applications-title { font-size: 20px; }

    #DataGridUsers, #DataGridRoles, #DataGridApplications {
        border-radius: var(--r-lg) !important;
    }

    .dx-datagrid .dx-datagrid-header-panel {
        padding: 0 8px !important;
        min-height: 52px !important;
    }
    .dx-datagrid .dx-toolbar-items-container {
        min-height: 52px !important;
    }
    .dx-datagrid .dx-toolbar .dx-button-text { display: none !important; }
    .btn-add-user .dx-button,
    .btn-add-role .dx-button,
    .btn-add-application .dx-button {
        min-width: 36px !important;
        width: 36px !important;
        padding: 0 !important;
        border-radius: var(--r-md) !important;
    }
    .dx-datagrid .dx-toolbar-after .dx-button {
        width: 36px !important;
        min-width: 36px !important;
        flex-shrink: 0 !important;
    }
    .dx-datagrid .dx-toolbar-after {
        left: 50px !important;
        right: 4px !important;
        position: absolute !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .dx-datagrid .dx-datagrid-search-panel {
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .dx-datagrid .dx-searchbox {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dx-datagrid .dx-header-row > td {
        padding: 8px 10px !important;
        font-size: 9.5px !important;
        letter-spacing: 0.05em !important;
    }

    .dx-datagrid .dx-data-row > td {
        padding: 10px 10px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .dx-datagrid .dx-command-edit .dx-link {
        width: 38px !important;
        height: 38px !important;
        font-size: 17px !important;
        margin: 0 2px !important;
        border-radius: var(--r-md) !important;
    }

    .dx-datagrid .dx-pager,
    .dx-datagrid .dx-datagrid-pager {
        padding: 8px 12px !important;
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .dx-datagrid .dx-pager .dx-page,
    .dx-datagrid .dx-pager .dx-page-sizes .dx-page-size {
        padding: 4px 9px !important;
        font-size: 12px !important;
    }

    .dx-datagrid .dx-command-adaptive {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    .dx-datagrid .dx-command-adaptive .dx-datagrid-adaptive-more {
        color: var(--primary-dark) !important;
        font-size: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: var(--r-sm) !important;
        transition: all var(--t-fast) !important;
        background: var(--p-50) !important;
        border: 1px solid var(--canvas-border) !important;
    }
    .dx-datagrid .dx-command-adaptive .dx-datagrid-adaptive-more:hover {
        background: var(--p-100) !important;
        border-color: var(--canvas-border-2) !important;
    }

    .dx-datagrid .dx-adaptive-detail-row > td {
        background: var(--canvas-raised) !important;
        border-bottom: 2px solid var(--canvas-border-2) !important;
        padding: 10px 12px !important;
    }
    .dx-datagrid .dx-adaptive-detail-row .dx-field-item-label-text {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.07em !important;
        color: var(--canvas-subtle) !important;
    }
    .dx-datagrid .dx-adaptive-detail-row .dx-field-item-content {
        font-size: 13.5px !important;
        color: var(--canvas-text) !important;
        font-weight: 500 !important;
    }
}

.dx-datagrid .dx-data-row.dx-state-focused > td {
    background: var(--p-50) !important;
}

.dx-datagrid .dx-command-select .dx-checkbox-icon {
    border: 2px solid var(--canvas-border-2) !important;
    border-radius: var(--r-xs) !important;
}
.dx-datagrid .dx-command-select .dx-checkbox-checked .dx-checkbox-icon {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.dx-datagrid .dx-datagrid-nodata {
    color: var(--canvas-muted) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    padding: 48px 20px !important;
}

.dx-datagrid .dx-datagrid-content-fixed td.dx-pointer-events-none {
    border-right: 2px solid var(--canvas-border-2) !important;
}

.dx-datagrid .dx-datagrid-search-panel {
    margin: 0 !important;
}

.dx-datagrid .dx-datagrid-filter-row > td {
    background: var(--chrome-surface) !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--chrome-border) !important;
}

@media (max-width: 600px) {
    .dx-popup-wrapper .dx-overlay-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .dx-popup-wrapper .dx-popup-title {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .dx-popup-wrapper .dx-popup-content {
        padding: 14px 16px !important;
        overflow-y: auto !important;
    }

    .dx-popup-wrapper .dx-toolbar.dx-popup-bottom {
        padding: 10px 16px !important;
    }

    #DataGridUsers .dx-command-edit,
    #DataGridRoles .dx-command-edit,
    #DataGridApplications .dx-command-edit {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    #DataGridUsers .dx-datagrid-content-fixed,
    #DataGridRoles .dx-datagrid-content-fixed,
    #DataGridApplications .dx-datagrid-content-fixed {
        display: none !important;
    }
}

.dx-fa-button.dx-fa-button-main .dx-fa-button-content {
    background: var(--grad-brand) !important;
    box-shadow: var(--sh-brand-lg) !important;
    border: none !important;
}
.dx-fa-button.dx-fa-button-main .dx-fa-button-content .dx-icon {
    color: #ffffff !important;
}
.dx-fa-button.dx-fa-button-main .dx-fa-button-content:hover {
    background: var(--grad-brand-h) !important;
}

.dx-fa-button:not(.dx-fa-button-main) .dx-fa-button-content {
    background: var(--canvas-surface) !important;
    border: 1px solid var(--canvas-border) !important;
    box-shadow: var(--sh-md) !important;
}
.dx-fa-button:not(.dx-fa-button-main) .dx-fa-button-content .dx-icon {
    color: var(--primary-dark) !important;
}
.dx-fa-button:not(.dx-fa-button-main) .dx-fa-button-content:hover {
    background: var(--p-50) !important;
    border-color: var(--canvas-border-2) !important;
}

.dx-fa-button-label {
    background: var(--chrome) !important;
    color: var(--chrome-text) !important;
    border-radius: var(--r-md) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    box-shadow: var(--sh-sm) !important;
    white-space: nowrap !important;
}