@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap');

:root {
    --ari-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ari-code-font: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
    --ari-bg-layout: #f6f8fb;
    --ari-sider-bg: #ffffff;
    --ari-card-bg: #ffffff;
    --ari-card-border: #eaedf2;
    --ari-primary: #1890ff;
    --ari-primary-hover: #40a9ff;
    --ari-text-main: #262626;
    --ari-text-secondary: #656d76;

    /* Semantic Color Tokens (Ant Design Aligned) */
    --ari-danger: var(--ant-error-color, #ff4d4f);
    --ari-danger-hover: var(--ant-error-color-hover, #ff7875);
    --ari-warning: var(--ant-warning-color, #faad14);
    --ari-success: var(--ant-success-color, #52c41a);

    /* ── Ari Prime Unified Border Radius Design Tokens ── */
    --ari-radius-xs: 3px;
    --ari-radius-sm: 4px;
    --ari-radius-md: 6px;
    --ari-radius-lg: 8px;
    --ari-radius-xl: 10px;
    --ari-radius-2xl: 12px;
    --ari-radius-full: 9999px;

    /* Semantic Aliases */
    --ari-control-radius: var(--ari-radius-md);    /* 6px - Buttons, Inputs, Selects, Dropdown items, Pagination */
    --ari-card-radius: var(--ari-radius-xl);        /* 10px - Cards, HUD, Stat Cards, Panels */
    --ari-modal-radius: var(--ari-radius-2xl);      /* 12px - Modals, Dialogs */
    --ari-popup-radius: var(--ari-radius-lg);       /* 8px - Popovers, Tooltips, Dropdown menus, DatePickers */
    --ari-tag-radius: var(--ari-radius-sm);         /* 4px - Tags, Checkboxes */
}

[data-theme="dark"],
.dark,
.ari-dark-theme {
    --ari-bg-layout: #0b1329;
    --ari-sider-bg: #0f172a;
    --ari-card-bg: #111a36;
    --ari-card-border: #1e294b;
    --ari-text-main: #f3f4f6;
    --ari-text-secondary: #94a3b8;
    --ari-danger: var(--ant-error-color, #ff4d4f);
    --ari-warning: var(--ant-warning-color, #faad14);
    --ari-success: var(--ant-success-color, #52c41a);
}

/* AntDesign Menu Item Danger / Warning System Support */
.ant-dropdown-menu-item.ant-menu-item-danger,
.ant-menu-item.ant-menu-item-danger,
.ant-dropdown-menu-item-danger {
    color: var(--ari-danger) !important;
}

.ant-dropdown-menu-item.ant-menu-item-danger:hover,
.ant-menu-item.ant-menu-item-danger:hover,
.ant-dropdown-menu-item-danger:hover {
    color: var(--ari-danger-hover) !important;
    background-color: rgba(255, 77, 79, 0.08) !important;
}

.ant-dropdown-menu-item.ant-menu-item-warning,
.ant-menu-item.ant-menu-item-warning {
    color: var(--ari-warning) !important;
}

*, *::before, *::after {
    font-family: inherit;
}

html, body {
    font-family: var(--ari-font-family) !important;
    background-color: var(--ari-bg-layout);
    color: var(--ari-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL UNIFIED DESIGN SYSTEM: BORDER RADIUS & COMPONENT HARMONY
   ═══════════════════════════════════════════════════════════════════ */

/* 1. BUTTONS — GLOBAL ENTERPRISE DESIGN SYSTEM */
.ant-btn {
    font-family: var(--ari-font-family) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border-radius: var(--ari-control-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    vertical-align: middle !important;
    outline: none !important;
}

.ant-btn .anticon {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 13px !important;
    transition: color 0.15s ease !important;
}

.ant-btn > span {
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Default / Secondary Button */
.ant-btn-default {
    background: var(--ari-card-bg) !important;
    border: 1px solid var(--ari-card-border) !important;
    color: var(--ari-text-main) !important;
}

.ant-btn-default:hover,
.ant-btn-default:focus {
    border-color: var(--ari-primary) !important;
    color: var(--ari-primary) !important;
    background: var(--ari-card-bg) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.ant-btn-default:hover .anticon {
    color: var(--ari-primary) !important;
}

.ant-btn:active {
    transform: translateY(1px) !important;
}

/* Primary Button */
.ant-btn-primary {
    background: var(--ari-primary) !important;
    border-color: var(--ari-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(24, 144, 255, 0.3) !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
    background: var(--ari-primary-hover, #40a9ff) !important;
    border-color: var(--ari-primary-hover, #40a9ff) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(24, 144, 255, 0.4) !important;
}

.ant-btn-primary .anticon {
    color: #ffffff !important;
}

/* Dashed Button */
.ant-btn-dashed {
    background: var(--ari-card-bg) !important;
    border: 1px dashed var(--ari-card-border) !important;
    color: var(--ari-text-main) !important;
}

.ant-btn-dashed:hover {
    border-color: var(--ari-primary) !important;
    color: var(--ari-primary) !important;
}

/* Text & Link Buttons */
.ant-btn-text,
.ant-btn-link {
    box-shadow: none !important;
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 8px !important;
}

.ant-btn-link {
    color: var(--ari-primary) !important;
}

.ant-btn-link:hover {
    color: var(--ari-primary-hover, #40a9ff) !important;
    background: rgba(24, 144, 255, 0.06) !important;
}

.ant-btn-text {
    color: var(--ari-text-secondary) !important;
}

.ant-btn-text:hover {
    color: var(--ari-text-main) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .ant-btn-text:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Danger Buttons (Default / Outline style) */
.ant-btn-dangerous:not(.ant-btn-text):not(.ant-btn-link),
.ant-btn-danger:not(.ant-btn-text):not(.ant-btn-link) {
    border-color: rgba(255, 77, 79, 0.35) !important;
    color: var(--ari-danger) !important;
}

.ant-btn-dangerous:not(.ant-btn-text):not(.ant-btn-link):hover,
.ant-btn-danger:not(.ant-btn-text):not(.ant-btn-link):hover {
    border-color: var(--ari-danger) !important;
    color: var(--ari-danger) !important;
    background: rgba(255, 77, 79, 0.08) !important;
}

/* Danger Text & Link Buttons (No border when idle or hover) */
.ant-btn-text.ant-btn-dangerous,
.ant-btn-text.ant-btn-danger,
.ant-btn-link.ant-btn-dangerous,
.ant-btn-link.ant-btn-danger {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ari-danger) !important;
}

.ant-btn-text.ant-btn-dangerous:hover,
.ant-btn-text.ant-btn-danger:hover {
    border-color: transparent !important;
    background: rgba(255, 77, 79, 0.08) !important;
    color: var(--ari-danger) !important;
}

.ant-btn-primary.ant-btn-dangerous,
.ant-btn-primary.ant-btn-danger {
    background: var(--ari-danger) !important;
    border-color: var(--ari-danger) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(255, 77, 79, 0.35) !important;
}

.ant-btn-primary.ant-btn-dangerous:hover,
.ant-btn-primary.ant-btn-danger:hover {
    background: var(--ari-danger-hover, #ff7875) !important;
    border-color: var(--ari-danger-hover, #ff7875) !important;
}

/* Button Sizes */
/* Small (sm) - 28px height, perfectly balanced for compact toolbars, tables, widgets */
.ant-btn-sm {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: var(--ari-control-radius) !important;
}

.ant-btn-sm .anticon {
    font-size: 12px !important;
}

/* Default / Middle (md) - 32px height */
.ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: var(--ari-control-radius) !important;
}

.ant-btn:not(.ant-btn-sm):not(.ant-btn-lg) .anticon {
    font-size: 13px !important;
}

/* Large (lg) - 38px height */
.ant-btn-lg {
    height: 38px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    border-radius: var(--ari-radius-lg) !important;
}

.ant-btn-lg .anticon {
    font-size: 15px !important;
}

/* Icon-Only Buttons */
.ant-btn-icon-only {
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

.ant-btn-sm.ant-btn-icon-only {
    width: 28px !important;
    height: 28px !important;
}

.ant-btn-lg.ant-btn-icon-only {
    width: 38px !important;
    height: 38px !important;
}

.ant-btn-circle.ant-btn-icon-only {
    border-radius: var(--ari-radius-full) !important;
}

/* Button Groups */
.ant-btn-group > .ant-btn:first-child:not(:last-child) {
    border-top-left-radius: var(--ari-control-radius) !important;
    border-bottom-left-radius: var(--ari-control-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ant-btn-group > .ant-btn:last-child:not(:first-child) {
    border-top-right-radius: var(--ari-control-radius) !important;
    border-bottom-right-radius: var(--ari-control-radius) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.ant-btn-group > .ant-btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* 2. FORM INPUTS, SELECTS & PICKERS */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-input-number-input,
.ant-input-password,
.ant-select-selector,
.ant-picker,
.ant-cascader-picker,
.ant-tree-select .ant-select-selector {
    border-radius: var(--ari-control-radius) !important;
}

/* Input Groups & Search Bars */
.ant-input-group > .ant-input:first-child,
.ant-input-group-addon:first-child,
.ant-input-search > .ant-input-group > .ant-input:first-child,
.ant-input-search > .ant-input-group > .ant-input-affix-wrapper:first-child {
    border-top-left-radius: var(--ari-control-radius) !important;
    border-bottom-left-radius: var(--ari-control-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ant-input-group > .ant-input:last-child,
.ant-input-group-addon:last-child,
.ant-input-search > .ant-input-group > .ant-input-group-addon:last-child .ant-btn {
    border-top-right-radius: var(--ari-control-radius) !important;
    border-bottom-right-radius: var(--ari-control-radius) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* 3. DROPDOWNS, MENUS & POPUPS */
.ant-select-dropdown,
.ant-dropdown-menu,
.ant-picker-dropdown,
.ant-picker-dropdown .ant-picker-panel-container,
.ant-cascader-menus,
.ant-popover-inner,
.ant-tooltip-inner {
    border-radius: var(--ari-popup-radius) !important;
}

.ant-select-item,
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
    border-radius: var(--ari-radius-sm) !important;
}

/* 4. MODALS & DRAWERS */
.ant-modal-content {
    border-radius: var(--ari-modal-radius) !important;
    overflow: hidden !important;
}

.ant-modal-header {
    border-top-left-radius: var(--ari-modal-radius) !important;
    border-top-right-radius: var(--ari-modal-radius) !important;
}

.ant-drawer-content {
    border-radius: var(--ari-card-radius) 0 0 var(--ari-card-radius) !important;
}

/* 5. CARDS & CONTAINERS */
.ant-card,
.ant-card-bordered {
    border-radius: var(--ari-card-radius) !important;
}

/* 6. TAGS, BADGES, ALERTS & NOTIFICATIONS */
.ant-tag {
    border-radius: var(--ari-tag-radius) !important;
}

.ant-badge-count,
.ant-badge-dot {
    border-radius: var(--ari-radius-full) !important;
}

.ant-alert {
    border-radius: var(--ari-popup-radius) !important;
}

.ant-message-notice-content {
    border-radius: var(--ari-popup-radius) !important;
}

.ant-notification-notice {
    border-radius: var(--ari-card-radius) !important;
}

/* 7. SELECTION CONTROLS (CHECKBOX, RADIO, SWITCH) */
.ant-checkbox-inner {
    border-radius: var(--ari-radius-sm) !important;
}

/* Global Segmented / Radio Button Capsule System */
.ant-radio-group-solid,
.ant-radio-group {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.04) !important;
    padding: 2px !important;
    border-radius: 7px !important;
    border: 1px solid var(--ari-card-border) !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .ant-radio-group-solid,
[data-theme="dark"] .ant-radio-group {
    background: rgba(255, 255, 255, 0.06) !important;
}

.ant-radio-button-wrapper {
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 11px !important;
    font-family: var(--ari-font-family) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ari-text-secondary) !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: none !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.ant-radio-button-wrapper-sm {
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    border-radius: 5px !important;
}

.ant-radio-button-wrapper:not(:first-child)::before {
    display: none !important; /* Remove harsh divider lines */
}

.ant-radio-button-wrapper:hover {
    color: var(--ari-text-main) !important;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    background: var(--ari-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(24, 144, 255, 0.35) !important;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    color: #ffffff !important;
}

.ant-radio-button-wrapper .anticon {
    font-size: 13px !important;
    line-height: 1 !important;
}

.ant-switch {
    border-radius: var(--ari-radius-full) !important;
}

.ant-switch-handle::before {
    border-radius: var(--ari-radius-full) !important;
}

/* 8. TABS, SEGMENTED & TABLES */
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
    border-top-left-radius: var(--ari-control-radius) !important;
    border-top-right-radius: var(--ari-control-radius) !important;
}

.ant-segmented {
    border-radius: var(--ari-popup-radius) !important;
}

.ant-segmented-item,
.ant-segmented-thumb {
    border-radius: var(--ari-control-radius) !important;
}

.ant-table-container {
    border-top-left-radius: var(--ari-popup-radius) !important;
    border-top-right-radius: var(--ari-popup-radius) !important;
}

/* 9. ARI CUSTOM CONTROLS */
.ari-search-input,
.ari-search-input input,
.ari-sider-search-input,
.ari-sider-search-input input,
.ari-sider-collapse-btn,
.ari-action-icon-btn {
    border-radius: var(--ari-control-radius) !important;
}

.ari-topbar-action-group,
.ari-tenant-selector-wrap,
.ari-lang-selector-btn,
.ari-assistant-highlight-btn {
    border-radius: var(--ari-popup-radius) !important;
}

.ari-stat-card-v2,
.ari-hud-card,
.ari-launch-tile {
    border-radius: var(--ari-card-radius) !important;
}

.ari-stat-chip,
.ari-brand-badge {
    border-radius: var(--ari-radius-full) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL MODERN MINIMALIST SCROLLBAR SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* Firefox standard scrollbar properties */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* WebKit (Chrome, Edge, Safari, Opera) scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

::-webkit-scrollbar-thumb:active {
    background-color: #64748b;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── Global Typography & Ant Design / Bootstrap Font Inheritance ── */
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
.ant-typography,
.ant-btn,
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select,
.ant-select-dropdown,
.ant-table,
.ant-table-wrapper,
.ant-menu,
.ant-dropdown,
.ant-dropdown-menu,
.ant-modal,
.ant-modal-title,
.ant-modal-content,
.ant-drawer,
.ant-drawer-title,
.ant-drawer-content,
.ant-tabs,
.ant-tabs-tab,
.ant-card,
.ant-tag,
.ant-badge,
.ant-form,
.ant-form-item-label > label,
.ant-pagination,
.ant-descriptions,
.ant-list,
.ant-alert,
.ant-message,
.ant-notification,
.ant-popover,
.ant-popconfirm,
.ant-tooltip,
.ant-tree,
.ant-picker,
.ant-radio-wrapper,
.ant-checkbox-wrapper,
.ant-collapse,
.ant-steps,
.ant-statistic,
.ari-header-title,
.ari-stat-value,
.ari-stat-title {
    font-family: var(--ari-font-family) !important;
}

code, kbd, samp, pre, .font-mono, .mono-code {
    font-family: var(--ari-code-font) !important;
}

/* ── Modern Financial / Banking Tabular Figures for clean numbers ── */
.ant-table-tbody > tr > td,
.ari-stat-value,
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ── Modern Card Styling ── */
.ant-card {
    border-radius: var(--ari-card-radius) !important;
    border-color: var(--ari-card-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: 100%;
    min-width: 0;
}

.ant-card-bordered {
    border: 1px solid var(--ari-card-border) !important;
}

.ant-card-head {
    border-bottom: 1px solid var(--ari-card-border) !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    width: 100% !important;
}

.ant-card-head-wrapper {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ant-card-head-title {
    font-family: var(--ari-font-family) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--ari-text-main) !important;
    padding: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.ant-card-extra {
    margin-left: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ant-card-head-title .ari-stat-chip,
.ant-card-head-title .ant-tag {
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.ant-card-body {
    padding: 16px !important;
}

/* ── Modern Enterprise Table Styling ── */
.ant-table-wrapper {
    background: #ffffff !important;
    border-radius: var(--ari-card-radius) !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.ant-table-wrapper .ant-table {
    border-radius: var(--ari-card-radius) !important;
    background: transparent !important;
}

.ant-table-content,
.ant-table-body {
    overflow-x: auto !important;
    max-width: 100% !important;
}

.ant-table thead > tr > th {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.ant-table-tbody > tr > td {
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    padding: 12px 16px !important;
    transition: background-color 0.15s ease !important;
}

.ant-table-tbody > tr:hover > td {
    background-color: #f8faff !important;
}

/* ── Full Pagination Styling (Enterprise Rounded Harmonious) ── */
.ant-table-pagination.ant-pagination {
    margin: 16px 0 8px 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.ant-pagination-total-text {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-right: auto !important;
}

.ant-pagination-item {
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    transition: all 0.2s ease !important;
}

.ant-pagination-item-active {
    background-color: #1677ff !important;
    border-color: #1677ff !important;
}

.ant-pagination-item-active a {
    color: #ffffff !important;
}

.ant-pagination-prev,
.ant-pagination-next {
    border-radius: 6px !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
}

.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    transition: all 0.2s ease !important;
}

.ant-pagination-prev:hover:not(.ant-pagination-disabled) .ant-pagination-item-link,
.ant-pagination-next:hover:not(.ant-pagination-disabled) .ant-pagination-item-link {
    border-color: #1677ff !important;
    color: #1677ff !important;
}

.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-prev.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-next.ant-pagination-disabled .ant-pagination-item-link {
    border-color: #e2e8f0 !important;
    color: #cbd5e1 !important;
    background-color: #f8fafc !important;
    cursor: not-allowed !important;
}

.ant-pagination-options {
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.ant-pagination-options-size-changer.ant-select {
    height: 32px !important;
}

.ant-pagination-options-size-changer .ant-select-selector {
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    height: 32px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.ant-pagination-options-size-changer.ant-select-focused .ant-select-selector,
.ant-pagination-options-size-changer:hover .ant-select-selector {
    border-color: #1677ff !important;
}

.ant-pagination-options-quick-jumper {
    font-size: 13px !important;
    color: #64748b !important;
}

.ant-pagination-options-quick-jumper input {
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    height: 32px !important;
    margin: 0 6px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

/* ── Standard Toolbar ── */
.ari-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 40px;
    margin-bottom: 4px;
}

.ari-toolbar-spacer {
    flex: 1 1 auto;
}

/* ── KPI Stat Cards ── */
.ari-stat-card {
    background: #ffffff;
    border-radius: var(--ari-card-radius);
    border: 1px solid var(--ari-card-border);
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ari-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.ari-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.ari-stat-card.blue::before { background: linear-gradient(90deg, #1890ff, #69c0ff); }
.ari-stat-card.green::before { background: linear-gradient(90deg, #52c41a, #95de64); }
.ari-stat-card.purple::before { background: linear-gradient(90deg, #722ed1, #b37feb); }
.ari-stat-card.orange::before { background: linear-gradient(90deg, #fa8c16, #ffd591); }
.ari-stat-card.cyan::before { background: linear-gradient(90deg, #13c2c2, #87e8de); }

.ari-stat-title {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ari-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ari-stat-icon-wrapper {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ari-stat-card.blue .ari-stat-icon-wrapper { background: rgba(24, 144, 255, 0.12); color: var(--ari-primary, #1890ff); }
.ari-stat-card.green .ari-stat-icon-wrapper { background: rgba(82, 196, 26, 0.12); color: var(--ari-success, #52c41a); }
.ari-stat-card.purple .ari-stat-icon-wrapper { background: rgba(114, 46, 209, 0.12); color: #722ed1; }
.ari-stat-card.orange .ari-stat-icon-wrapper { background: rgba(250, 140, 22, 0.12); color: var(--ari-warning, #fa8c16); }
.ari-stat-card.cyan .ari-stat-icon-wrapper { background: rgba(19, 194, 194, 0.12); color: #13c2c2; }

/* ── Universal Layout & Utility Classes ── */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.align-center, .align-items-center { align-items: center !important; }
.align-start, .align-items-start { align-items: flex-start !important; }
.align-end, .align-items-end { align-items: flex-end !important; }

.justify-center, .justify-content-center { justify-content: center !important; }
.justify-start, .justify-content-start { justify-content: flex-start !important; }
.justify-end, .justify-content-end { justify-content: flex-end !important; }
.justify-space-between, .justify-content-between { justify-content: space-between !important; }
.justify-space-around, .justify-content-around { justify-content: space-around !important; }

.pa-0 { padding: 0 !important; }
.pa-1 { padding: 4px !important; }
.pa-2 { padding: 8px !important; }
.pa-3 { padding: 12px !important; }
.pa-4 { padding: 16px !important; }
.pa-5 { padding: 20px !important; }
.pa-6 { padding: 24px !important; }
.pa-8 { padding: 32px !important; }

.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }

.ma-0 { margin: 0 !important; }
.ma-1 { margin: 4px !important; }
.ma-2 { margin: 8px !important; }
.ma-3 { margin: 12px !important; }
.ma-4 { margin: 16px !important; }
.ma-auto { margin: auto !important; }

.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }
.mr-4 { margin-right: 16px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }
.ml-4 { margin-left: 16px !important; }

.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.border { border: 1px solid #e8ecf1 !important; }
.border-bottom { border-bottom: 1px solid #e8ecf1 !important; }
.rounded { border-radius: 6px !important; }
.rounded-lg { border-radius: 10px !important; }
.rounded-full { border-radius: 9999px !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-muted { color: #8c8c8c !important; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important; }

/* ── Sidebar & Menu Styling (Matching Target Mockup) ── */
.ari-sider-container {
    background-color: #ffffff !important;
    border-right: 1px solid #eaedf2 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 100 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

.ari-sider-container.ant-layout-sider,
.ari-sider-container.ant-layout-sider-has-trigger,
.ant-layout-sider.ant-layout-sider-has-trigger {
    padding-bottom: 0 !important;
}

.ari-sider-container .ant-layout-sider-children {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Hide Ant Design Default Sider Trigger (Custom button in footer is used) ── */
.ant-layout-sider-trigger,
.ari-sider-container .ant-layout-sider-trigger {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure menu item names and icons are completely visible in full size */
.ari-sider-container:not(.ant-layout-sider-collapsed) .ari-sider-menu .ant-menu-item > span,
.ari-sider-container:not(.ant-layout-sider-collapsed) .ari-sider-menu .ant-menu-submenu-title span {
    display: inline !important;
    opacity: 1 !important;
    max-width: none !important;
    visibility: visible !important;
}

/* When collapsed, hide text labels and submenu arrows while keeping icons visible */
.ari-sider-container.ant-layout-sider-collapsed .ari-sider-menu .ant-menu-item > span:not(.anticon),
.ari-sider-container.ant-layout-sider-collapsed .ari-sider-menu .ant-menu-submenu-title span.ant-menu-title-content > span:not(.anticon),
.ari-sider-container.ant-layout-sider-collapsed .ari-sider-menu .ant-menu-submenu-arrow {
    display: none !important;
    opacity: 0 !important;
}

.ari-sider-container.ant-layout-sider-collapsed .ari-sider-menu .ant-menu-submenu-title span.ant-menu-title-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ari-sider-container.ant-layout-sider-collapsed .ari-sider-menu .ant-menu-submenu-title .anticon {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* ── Sidebar Navigation Scrollbar (Seamless Light Enterprise Theme) ── */
.ari-sider-nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 6px 6px 4px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 213, 225, 0.5) transparent;
}

.ari-sider-nav-scroll::-webkit-scrollbar {
    width: 5px;
}

.ari-sider-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.ari-sider-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.6);
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.ari-sider-container:hover .ari-sider-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
}

.ari-sider-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ari-primary, #1890ff) !important;
}

.ari-sider-search-box {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--ari-card-border, #eaedf2) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.ari-sider-search-input {
    background-color: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    height: 36px !important;
    width: 100% !important;
}

.ari-sider-search-input input {
    background-color: transparent !important;
}

.ari-sider-menu,
.ari-sider-menu * {
    text-decoration: none !important;
}

.ari-sider-menu a,
.ari-sider-menu a:hover,
.ari-sider-menu a:focus,
.ari-sider-menu a:active,
.ari-sider-menu .ant-menu-item a,
.ari-sider-menu .ant-menu-item a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

.ari-sider-menu {
    border-right: none !important;
    font-size: 13.5px !important;
}

.ari-sider-menu .ant-menu-item,
.ari-sider-menu .ant-menu-submenu-title {
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    border-radius: 8px !important;
    height: 38px !important;
    line-height: 38px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Shift Level 1 to the left (10px padding instead of 24px) */
.ari-sider-container:not(.ant-layout-sider-collapsed) .ari-sider-menu > .ant-menu-item,
.ari-sider-container:not(.ant-layout-sider-collapsed) .ari-sider-menu > .ant-menu-submenu > .ant-menu-submenu-title {
    padding-left: 10px !important;
    padding-right: 24px !important;
}

.ari-sider-menu .ant-menu-item:hover,
.ari-sider-menu .ant-menu-submenu-title:hover {
    color: #1677ff !important;
    background-color: #f1f5f9 !important;
}

.ari-sider-menu .ant-menu-item .anticon,
.ari-sider-menu .ant-menu-submenu-title .anticon {
    font-size: 17px !important;
    color: #475569 !important;
    margin-right: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ari-sider-menu .ant-menu-item:hover .anticon,
.ari-sider-menu .ant-menu-submenu-title:hover .anticon {
    color: #1677ff !important;
    transform: scale(1.08);
}

/* Submenu Arrow closer to the right edge to give maximum room for text */
.ari-sider-menu .ant-menu-submenu-arrow {
    color: #94a3b8 !important;
    right: 10px !important;
    transition: transform 0.2s ease !important;
}

/* Level 2 Submenu Items: Indent less (20px instead of 48px) */
.ari-sider-container:not(.ant-layout-sider-collapsed) .ari-sider-menu .ant-menu-sub .ant-menu-item {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    height: 36px !important;
    line-height: 36px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
}

.ari-sider-menu .ant-menu-sub .ant-menu-item .anticon {
    font-size: 14px !important;
    color: #64748b !important;
    margin-right: 8px !important;
}

.ari-sider-menu .ant-menu-item-selected {
    background: linear-gradient(90deg, #e6f4ff 0%, #f0f7ff 100%) !important;
    color: #1677ff !important;
    font-weight: 600 !important;
}

.ari-sider-menu .ant-menu-item-selected .anticon {
    color: #1677ff !important;
}

/* ── Sidebar Footer & Collapse Toggle ── */
.ari-sider-footer {
    border-top: 1px solid #eaedf2 !important;
    background: #ffffff !important;
    padding: 8px 12px 6px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
}

.ari-sider-container.ant-layout-sider-collapsed .ari-sider-footer {
    justify-content: center !important;
    padding: 8px 0 6px 0 !important;
}

.ari-sider-copyright {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    text-align: center !important;
    width: 100% !important;
    user-select: none !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    padding: 0 0 2px 0 !important;
}

.ari-sider-collapse-btn {
    width: 100%;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ari-sider-container.ant-layout-sider-collapsed .ari-sider-collapse-btn {
    width: 36px;
    height: 36px;
}

.ari-sider-collapse-btn:hover {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}


/* ── Top Header & Page Header Badge ── */
.ari-top-header {
    background: #ffffff !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #eaedf2 !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

.ari-header-badge {
    background-color: #eef3fe;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.ari-header-badge-icon {
    font-size: 18px;
    color: #2f54eb;
}

.ari-header-title {
    font-weight: 700;
    font-size: 15.5px;
    color: #1f2937;
    line-height: 1.2;
}

.ari-header-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 650px;
}

/* ── Pill Filter Tags (Matching Target Mockup) ── */
.ari-pill-tag {
    border-radius: 999px !important;
    padding: 2px 14px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 22px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ari-pill-tag-active {
    background-color: #1d39c4 !important;
    border-color: #1d39c4 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.ari-pill-tag-default {
    background-color: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    color: #595959 !important;
}

.ari-pill-tag-default:hover {
    border-color: var(--ari-primary, #1890ff) !important;
    color: var(--ari-primary, #1890ff) !important;
}

.ari-pill-tag-teal {
    background-color: #e6fffb !important;
    border: 1px solid #b5f5ec !important;
    color: #13c2c2 !important;
    font-weight: 500 !important;
}

.ari-pill-tag-blue {
    background-color: #f0f5ff !important;
    border: 1px solid #d6e4ff !important;
    color: #2f54eb !important;
    font-weight: 500 !important;
}

.ari-filter-label-pink {
    color: #eb2f96 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    min-width: 95px !important;
}

/* ── Modern Premium Card Table & Toolbar ── */
.ari-card-table-wrapper {
    background: var(--ari-card-bg, #ffffff);
    border: 1px solid var(--ari-card-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ari-card-table-wrapper .ant-tabs-nav {
    margin-bottom: 0 !important;
    padding: 0 16px !important;
    background: var(--ari-card-bg, #ffffff);
    border-bottom: 1px solid var(--ari-card-border, #f1f5f9);
}

.ari-card-table-wrapper .ant-tabs-nav-list {
    gap: 4px;
}

.ari-card-table-wrapper .ant-tabs-tab {
    padding: 12px 16px !important;
    margin: 0 !important;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ari-text-secondary, #64748b);
    transition: all 0.2s ease;
}

.ari-card-table-wrapper .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: var(--ari-primary, #1890ff) !important;
    font-weight: 600;
}

.ari-toolbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    box-sizing: border-box;
}

.ari-toolbar-input.ant-input-affix-wrapper {
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 6px !important;
    padding: 4px 11px !important;
    box-sizing: border-box !important;
}

.ari-segmented-group {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 6px;
    gap: 2px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
}

.ari-segmented-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease-in-out;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
}

.ari-segmented-item:hover:not(.ari-segmented-active) {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.6);
}

.ari-segmented-item.ari-segmented-active {
    background: #ffffff;
    color: #0f172a;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.ari-segmented-count {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font-weight: 600;
    line-height: 1.2;
}

.ari-segmented-item.ari-segmented-active .ari-segmented-count {
    background: #f1f5f9;
    color: #334155;
}

.ari-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ari-status-dot-active {
    background-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.ari-status-dot-inactive {
    background-color: #94a3b8;
}

.ari-toolbar-select .ant-select-selector {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: var(--ari-control-radius) !important;
    display: flex !important;
    align-items: center !important;
    font-family: var(--ari-font-family) !important;
    font-size: 12.5px !important;
    border-color: var(--ari-card-border) !important;
}

.ari-toolbar-btn {
    height: 32px !important;
    border-radius: var(--ari-control-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: var(--ari-font-family) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ari-toolbar-btn .anticon {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.ari-toolbar-btn span {
    line-height: 1 !important;
}

/* ── Table Cell Action Buttons Modernization ── */
.ant-table-cell .ant-btn {
    font-size: 12px !important;
    gap: 4px !important;
}

.ant-table-cell .ant-btn-text,
.ant-table-cell .ant-btn-link {
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

.ant-table-cell .ant-btn-icon-only {
    width: 26px !important;
    height: 26px !important;
    border-radius: 5px !important;
}

/* ── Modal & Drawer Footer Buttons Modernization ── */
.ant-modal-footer,
.ant-drawer-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.ant-modal-footer .ant-btn,
.ant-drawer-footer .ant-btn {
    min-width: 80px !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ARI PRIME WEB MODE ENTERPRISE DESIGN SYSTEM (V3.0)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Brand Header (Top of Sidebar) ── */
.ari-brand-header {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #eaedf2 !important;
    background: #ffffff;
    box-sizing: border-box !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.ari-brand-logo-container {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ari-brand-header:hover .ari-brand-logo-container {
    transform: scale(1.05);
}

.ari-brand-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    overflow: hidden;
}

.ari-brand-title {
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: -0.02em;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ari-brand-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 1px 5px;
    border-radius: 4px;
    display: inline-block;
}

.ari-brand-sub {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.02em;
    margin-top: 1px;
}

/* ── Topbar Select & Language Dropdown Controls ── */
.ari-tenant-selector-wrap {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 4px 0 10px;
    height: 36px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.ari-tenant-selector-wrap:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.ari-lang-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    height: 36px;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
    outline: none;
}

.ari-lang-selector-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ari-lang-selector-btn:active {
    background: #e2e8f0;
    transform: translateY(1px);
}

/* ── Topbar User Profile Chip ── */
.ari-user-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    height: 36px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    cursor: default;
    user-select: none;
}

.ari-user-profile-chip:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.ari-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
    flex-shrink: 0;
}

.ari-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

.ari-user-role-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 1px 7px;
    border-radius: 9999px;
    line-height: 1.3;
}

/* ── Topbar Action Controls Pill Group ── */
.ari-topbar-action-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px;
    border-radius: 8px;
    height: 36px;
    box-sizing: border-box;
}

.ari-action-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
}

.ari-action-icon-btn:hover {
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ari-action-icon-btn.logout:hover {
    color: #ef4444;
    background: #fef2f2;
}

.ari-assistant-highlight-btn {
    height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    border: 1px solid #bfdbfe;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}

.ari-assistant-highlight-btn:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.ari-sparkle-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2563eb;
    box-shadow: 0 0 6px #3b82f6;
    animation: ariPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ariPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

/* ── KPI Stat Cards (Enterprise v2 — Modern SaaS Design) ── */
.ari-stat-card-v2 {
    background: var(--ari-card-bg);
    border: 1px solid var(--ari-card-border);
    border-radius: var(--ari-card-radius);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 124px;
}

.ari-stat-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--ari-primary);
}

.ari-stat-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ari-stat-title-v2 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ari-text-secondary);
}

.ari-stat-icon-v2 {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ari-stat-card-v2.blue .ari-stat-icon-v2 { background: rgba(24, 144, 255, 0.1); color: var(--ari-primary); }
.ari-stat-card-v2.green .ari-stat-icon-v2 { background: rgba(82, 196, 26, 0.1); color: var(--ari-success); }
.ari-stat-card-v2.purple .ari-stat-icon-v2 { background: rgba(114, 46, 209, 0.1); color: #722ed1; }
.ari-stat-card-v2.amber .ari-stat-icon-v2 { background: rgba(250, 173, 20, 0.1); color: var(--ari-warning); }

[data-theme="dark"] .ari-stat-card-v2.blue .ari-stat-icon-v2 { background: rgba(23, 125, 220, 0.2); color: #40a9ff; }
[data-theme="dark"] .ari-stat-card-v2.green .ari-stat-icon-v2 { background: rgba(73, 170, 25, 0.2); color: #73d13d; }
[data-theme="dark"] .ari-stat-card-v2.purple .ari-stat-icon-v2 { background: rgba(146, 84, 222, 0.2); color: #b37feb; }
[data-theme="dark"] .ari-stat-card-v2.amber .ari-stat-icon-v2 { background: rgba(216, 150, 20, 0.2); color: #ffc53d; }

.ari-stat-body-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ari-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ari-stat-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ari-stat-chip.green {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.ari-stat-chip.blue {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.ari-stat-chip.purple {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.ari-stat-chip.amber {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

/* ── Interactive Launch Tiles (Quick Management) ── */
.ari-launch-tile {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.ari-launch-tile:hover {
    background: #f8faff;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}

.ari-launch-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ari-launch-tile:hover .ari-launch-tile-icon {
    transform: scale(1.08);
}

.ari-launch-tile-text {
    flex: 1;
    min-width: 0;
}

.ari-launch-tile-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ari-launch-tile-desc {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ari-launch-tile-arrow {
    color: #94a3b8;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ari-launch-tile:hover .ari-launch-tile-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #2563eb;
}

/* ── Infrastructure Mission Control HUD ── */
.ari-hud-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.ari-hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ari-card-border);
    transition: background 0.15s ease;
}

.ari-hud-row:last-child {
    border-bottom: none;
}

.ari-hud-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .ari-hud-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ari-hud-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ari-text-main);
}

.ari-hud-label-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.ari-hud-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ari-hud-badge.green {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.ari-hud-badge.blue {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.ari-hud-badge.amber {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.ari-hud-badge.purple {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.ari-radar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.ari-radar-dot.green { background: #10b981; }
.ari-radar-dot.blue { background: #3b82f6; }
.ari-radar-dot.amber { background: #f59e0b; }
.ari-radar-dot.purple { background: #8b5cf6; }

.ari-radar-dot.pulse::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 1px solid inherit;
    animation: ariPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   ARI PRIME DARK MODE SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"],
body.ari-dark-theme {
    --ari-bg-layout: #0b0f19;
    --ari-sider-bg: #111827;
    --ari-card-bg: #111827;
    --ari-card-border: #1f2937;
    --ari-text-main: #f3f4f6;
    --ari-text-secondary: #9ca3af;
    color-scheme: dark;
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    color: #f3f4f6 !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
body.ari-dark-theme {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
}

/* Dark Mode Layout & Container Backgrounds */
[data-theme="dark"] .ant-layout {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
}

[data-theme="dark"] .ant-layout-content {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    color: #f3f4f6 !important;
}

[data-theme="dark"] .ant-layout-sider {
    background-color: #111827 !important;
    background: #111827 !important;
}

[data-theme="dark"] .ari-sider-container {
    background-color: #111827 !important;
    background: #111827 !important;
    border-right: 1px solid #1f2937 !important;
}

/* Dark Mode Scrollbars */
[data-theme="dark"] * {
    scrollbar-color: #374151 transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #374151;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #4b5563;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background-color: #6b7280;
}

/* Dark Mode Sider & Navigation */
[data-theme="dark"] .ari-sider-container {
    background: #111827 !important;
    border-right: 1px solid #1f2937 !important;
}

[data-theme="dark"] .ari-brand-header {
    background: #111827 !important;
    border-bottom: 1px solid #1f2937 !important;
}

[data-theme="dark"] .ari-brand-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .ari-brand-sub {
    color: #94a3b8 !important;
}

[data-theme="dark"] .ari-brand-badge {
    color: #60a5fa !important;
    background: #1e3a8a !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] .ari-sider-search-box {
    border-bottom: 1px solid #1f2937 !important;
}

[data-theme="dark"] .ari-sider-search-input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .ari-sider-search-input input {
    background: transparent !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .ari-sider-footer {
    border-top: 1px solid #1f2937 !important;
    background: #111827 !important;
}

[data-theme="dark"] .ari-sider-collapse-btn {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .ari-sider-collapse-btn:hover {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .ari-sider-copyright {
    color: #64748b !important;
}

/* Dark Mode Sider Menu overrides */
[data-theme="dark"] .ari-sider-menu {
    background: transparent !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-item,
[data-theme="dark"] .ari-sider-menu .ant-menu-submenu-title {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-item:hover,
[data-theme="dark"] .ari-sider-menu .ant-menu-submenu-title:hover {
    color: #60a5fa !important;
    background-color: #1e293b !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-item .anticon,
[data-theme="dark"] .ari-sider-menu .ant-menu-submenu-title .anticon {
    color: #94a3b8 !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-item:hover .anticon,
[data-theme="dark"] .ari-sider-menu .ant-menu-submenu-title:hover .anticon {
    color: #60a5fa !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-sub .ant-menu-item {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-sub .ant-menu-item:hover {
    color: #60a5fa !important;
    background-color: #1e293b !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-sub .ant-menu-item .anticon {
    color: #94a3b8 !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-item-selected {
    background: linear-gradient(90deg, #1e3a8a 0%, #172554 100%) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-item-selected .anticon {
    color: #93c5fd !important;
}

[data-theme="dark"] .ari-sider-menu .ant-menu-sub {
    background: #0f172a !important;
}

[data-theme="dark"] .ari-sider-nav-scroll::-webkit-scrollbar-thumb {
    background: #374151 !important;
}

[data-theme="dark"] .ari-sider-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: #60a5fa !important;
}

/* Dark Mode Dropdowns & Selects */
[data-theme="dark"] .ant-dropdown-menu {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

[data-theme="dark"] .ant-dropdown-menu-item {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .ant-dropdown-menu-item:hover {
    background-color: #374151 !important;
}

[data-theme="dark"] .ant-select-dropdown {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

[data-theme="dark"] .ant-select-item {
    color: #f3f4f6 !important;
}

[data-theme="dark"] .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: #1e3a8a !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: #374151 !important;
}

/* Dark Mode Top Header */
[data-theme="dark"] .ari-top-header {
    background: #111827 !important;
    border-bottom: 1px solid #1f2937 !important;
}
[data-theme="dark"] .ari-header-title {
    color: #f3f4f6 !important;
}
[data-theme="dark"] .ari-header-desc {
    color: #9ca3af !important;
}
[data-theme="dark"] .ari-header-badge {
    background-color: #1e293b !important;
}

/* Dark Mode Topbar Controls */
[data-theme="dark"] .ari-user-profile-chip {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .ari-user-profile-chip:hover {
    background: #334155;
    border-color: #475569;
}
[data-theme="dark"] .ari-user-name {
    color: #f1f5f9;
}
[data-theme="dark"] .ari-user-role-badge {
    background: #1e1b4b;
    border-color: #312e81;
    color: #818cf8;
}

[data-theme="dark"] .ari-tenant-selector-wrap,
[data-theme="dark"] .ari-lang-selector-btn {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .ari-tenant-selector-wrap:hover,
[data-theme="dark"] .ari-lang-selector-btn:hover {
    background: #334155;
    border-color: #475569;
}
[data-theme="dark"] .ari-lang-selector-btn span {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .ari-topbar-action-group {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .ari-action-icon-btn {
    color: #94a3b8;
}
[data-theme="dark"] .ari-action-icon-btn:hover {
    color: #f8fafc;
    background: #334155;
}
[data-theme="dark"] .ari-action-icon-btn.active {
    color: #f59e0b;
    background: #334155;
}
[data-theme="dark"] .ari-action-icon-btn.logout:hover {
    color: #f87171;
    background: #450a0a;
}

[data-theme="dark"] .ari-assistant-highlight-btn {
    background: linear-gradient(135deg, #1e293b 0%, #312e81 100%);
    border-color: #4338ca;
    color: #a5b4fc;
}
[data-theme="dark"] .ari-assistant-highlight-btn:hover {
    background: linear-gradient(135deg, #2e3856 0%, #3730a3 100%);
    border-color: #6366f1;
    color: #c7d2fe;
}

/* Dark Mode KPI Stat Cards (Enterprise v2) */
[data-theme="dark"] .ari-stat-card-v2 {
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .ari-stat-card-v2:hover {
    border-color: #374151 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .ari-stat-title-v2 {
    color: #9ca3af !important;
}

[data-theme="dark"] .ari-stat-num {
    color: #f8fafc !important;
}

[data-theme="dark"] .ari-stat-card-v2.blue .ari-stat-icon-v2 { background: #1e3a8a !important; color: #60a5fa !important; }
[data-theme="dark"] .ari-stat-card-v2.green .ari-stat-icon-v2 { background: #064e3b !important; color: #34d399 !important; }
[data-theme="dark"] .ari-stat-card-v2.purple .ari-stat-icon-v2 { background: #4c1d95 !important; color: #c084fc !important; }
[data-theme="dark"] .ari-stat-card-v2.amber .ari-stat-icon-v2 { background: #78350f !important; color: #fbbf24 !important; }

[data-theme="dark"] .ari-stat-chip.green {
    background: #064e3b !important;
    color: #34d399 !important;
    border-color: #059669 !important;
}

[data-theme="dark"] .ari-stat-chip.blue {
    background: #1e3a8a !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] .ari-stat-chip.purple {
    background: #4c1d95 !important;
    color: #c084fc !important;
    border-color: #7c3aed !important;
}

[data-theme="dark"] .ari-stat-chip.amber {
    background: #78350f !important;
    color: #fbbf24 !important;
    border-color: #d97706 !important;
}

/* Dark Mode Cards, Tables & Toolbar */
[data-theme="dark"] .ant-card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #f3f4f6 !important;
}
[data-theme="dark"] .ant-card-head {
    background: #111827 !important;
    border-bottom-color: #1f2937 !important;
    color: #f3f4f6 !important;
}
[data-theme="dark"] .ant-card-head-title {
    color: #f3f4f6 !important;
}
[data-theme="dark"] .ant-card-body {
    background: #111827 !important;
}

[data-theme="dark"] .ari-card-table-wrapper {
    background: #111827;
    border-color: #1f2937;
}
[data-theme="dark"] .ari-card-table-wrapper .ant-tabs-nav {
    background: #111827;
    border-bottom-color: #1f2937;
}
[data-theme="dark"] .ari-toolbar-container {
    background: #111827;
    border-bottom-color: #1f2937;
}
[data-theme="dark"] .ari-segmented-group {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .ari-segmented-item {
    color: #94a3b8;
}
[data-theme="dark"] .ari-segmented-item:hover:not(.ari-segmented-active) {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .ari-segmented-item.ari-segmented-active {
    background: #334155;
    color: #f8fafc;
}
[data-theme="dark"] .ari-segmented-item.ari-segmented-active .ari-segmented-count {
    background: #1e293b;
    color: #94a3b8;
}

/* Dark Mode Tables */
[data-theme="dark"] .ant-table-wrapper {
    background: #111827 !important;
}

[data-theme="dark"] .ant-layout.ant-layout-has-sider {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
}

[data-theme="dark"] .ant-table-wrapper,
.dark .ant-table-wrapper {
    background: #111a36 !important;
}

[data-theme="dark"] .ant-table,
[data-theme="dark"] .ant-table-container,
[data-theme="dark"] .ant-table-content,
.dark .ant-table,
.dark .ant-table-container,
.dark .ant-table-content {
    background: #111a36 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .ant-table thead > tr > th,
[data-theme="dark"] .ant-table-thead > tr > th,
.dark .ant-table thead > tr > th,
.dark .ant-table-thead > tr > th {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #1e294b !important;
}

[data-theme="dark"] .ant-table-tbody > tr > td,
.dark .ant-table-tbody > tr > td {
    background: #111a36 !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid #141f36 !important;
}

[data-theme="dark"] .ant-table-tbody > tr:hover > td,
.dark .ant-table-tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Raw HTML tables in Dark Mode */
[data-theme="dark"] table.table,
.dark table.table {
    color: #e2e8f0 !important;
    background: transparent !important;
}
[data-theme="dark"] table.table thead,
[data-theme="dark"] table.table thead th,
.dark table.table thead,
.dark table.table thead th {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #1e294b !important;
}
[data-theme="dark"] table.table tbody tr,
[data-theme="dark"] table.table tbody td,
.dark table.table tbody tr,
.dark table.table tbody td {
    border-bottom: 1px solid #141f36 !important;
    color: #cbd5e1 !important;
}

/* AntDesign Tabs in Dark Mode (Global Defense-in-depth) */
[data-theme="dark"] .ant-tabs > .ant-tabs-nav,
.dark .ant-tabs > .ant-tabs-nav {
    background: #080e1e !important;
    border-bottom: 1px solid #1a2542 !important;
}
[data-theme="dark"] .ant-tabs .ant-tabs-tab,
.dark .ant-tabs .ant-tabs-tab {
    color: #94a3b8 !important;
    transition: all 0.15s ease;
}
[data-theme="dark"] .ant-tabs .ant-tabs-tab:hover,
.dark .ant-tabs .ant-tabs-tab:hover {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .ant-tabs .ant-tabs-tab.ant-tabs-tab-active,
.dark .ant-tabs .ant-tabs-tab.ant-tabs-tab-active {
    color: #ffffff !important;
}
[data-theme="dark"] .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.dark .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #ffffff !important;
    font-weight: 600;
}
[data-theme="dark"] .ant-tabs .ant-tabs-ink-bar,
.dark .ant-tabs .ant-tabs-ink-bar {
    background: #38bdf8 !important;
}

/* Dark Mode Pagination (Consistent 6px Rounded Styling) */
[data-theme="dark"] .ant-pagination-total-text {
    color: #94a3b8 !important;
}

[data-theme="dark"] .ant-pagination-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .ant-pagination-item a {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .ant-pagination-item:hover {
    border-color: #3b82f6 !important;
}
[data-theme="dark"] .ant-pagination-item:hover a {
    color: #60a5fa !important;
}

[data-theme="dark"] .ant-pagination-item-active {
    background: #2563eb !important;
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .ant-pagination-item-active a {
    color: #ffffff !important;
}

[data-theme="dark"] .ant-pagination-prev .ant-pagination-item-link,
[data-theme="dark"] .ant-pagination-next .ant-pagination-item-link {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .ant-pagination-prev:hover:not(.ant-pagination-disabled) .ant-pagination-item-link,
[data-theme="dark"] .ant-pagination-next:hover:not(.ant-pagination-disabled) .ant-pagination-item-link {
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .ant-pagination-disabled .ant-pagination-item-link,
[data-theme="dark"] .ant-pagination-prev.ant-pagination-disabled .ant-pagination-item-link,
[data-theme="dark"] .ant-pagination-next.ant-pagination-disabled .ant-pagination-item-link {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #475569 !important;
}

[data-theme="dark"] .ant-pagination-options-size-changer .ant-select-selector {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .ant-pagination-options-size-changer:hover .ant-select-selector {
    border-color: #3b82f6 !important;
}

[data-theme="dark"] .ant-pagination-options-quick-jumper {
    color: #94a3b8 !important;
}

[data-theme="dark"] .ant-pagination-options-quick-jumper input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}


/* Dark Mode HUD & Launch Tiles */
[data-theme="dark"] .ari-hud-card {
    background: #111827;
    border-color: #1f2937;
}
[data-theme="dark"] .ari-hud-row {
    border-bottom-color: #1f2937;
}
[data-theme="dark"] .ari-hud-row:hover {
    background: #1a2234;
}
[data-theme="dark"] .ari-hud-label {
    color: #f1f5f9;
}
[data-theme="dark"] .ari-launch-tile {
    background: #111827;
    border-color: #1f2937;
}
[data-theme="dark"] .ari-launch-tile:hover {
    background: #1a2234;
    border-color: #374151;
}
[data-theme="dark"] .ari-launch-tile-title {
    color: #f1f5f9;
}
[data-theme="dark"] .ari-launch-tile-desc {
    color: #94a3b8;
}
[data-theme="dark"] .ari-stat-card {
    background: #111827;
    border-color: #1f2937;
}
[data-theme="dark"] .ari-stat-title {
    color: #9ca3af;
}
[data-theme="dark"] .ari-stat-value {
    color: #f3f4f6;
}

/* ═══════════════════════════════════════════════════════════════════
   CIRCULAR RIPPLE THEME TRANSITION (View Transitions API)
   ═══════════════════════════════════════════════════════════════════ */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 999999;
}

/* Smooth background transition fallback when view transitions are not supported */
body,
.ari-top-header,
.ari-sider-container,
.ari-sider-footer,
.ari-brand-header,
.ant-card,
.ari-stat-card-v2,
.ari-launch-tile,
.ari-hud-card {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme Toggle Button Micro-Animation */
.ari-action-icon-btn.theme-toggle {
    position: relative;
    overflow: hidden;
}

.ari-action-icon-btn.theme-toggle .anticon.ari-theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.ari-action-icon-btn.theme-toggle:hover .anticon.ari-theme-icon {
    transform: rotate(20deg) scale(1.18);
}

.ari-action-icon-btn.theme-toggle.active .anticon.ari-theme-icon {
    animation: ariBulbSpring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ariBulbSpring {
    0% { transform: rotate(-35deg) scale(0.7); }
    50% { transform: rotate(18deg) scale(1.3); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   SYNCHRONIZED GLOWING WAVE AURA (FEATHERED SOFT THEME TRANSITION)
   ═══════════════════════════════════════════════════════════════════ */

.ari-theme-glow-wave {
    position: fixed;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999999;
    border-style: solid;
    filter: blur(8px);
}

.ari-theme-glow-wave.to-dark {
    border-color: rgba(99, 102, 241, 0.7);
    box-shadow: 
        0 0 60px 25px rgba(59, 130, 246, 0.45),
        inset 0 0 50px 20px rgba(99, 102, 241, 0.5);
}

.ari-theme-glow-wave.to-light {
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 
        0 0 60px 25px rgba(251, 191, 36, 0.45),
        inset 0 0 50px 20px rgba(245, 158, 11, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   ARI PRIME ENTERPRISE MODULAR DASHBOARD SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Operations Command Strip (Unified Single-Tier) */
.ari-dashboard-command-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px;
    background: var(--ari-card-bg);
    border: 1px solid var(--ari-card-border);
    border-radius: var(--ari-card-radius);
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ari-dashboard-tabs-segmented {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--ari-card-border);
    flex-wrap: wrap;
}

[data-theme="dark"] .ari-dashboard-tabs-segmented {
    background: rgba(255, 255, 255, 0.05);
}

.ari-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ari-text-secondary);
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    line-height: 1.3;
}

.ari-tab-pill:hover {
    color: var(--ari-text-main);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .ari-tab-pill:hover {
    background: rgba(255, 255, 255, 0.07);
}

.ari-tab-pill.active {
    background: var(--ari-card-bg);
    color: var(--ari-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .ari-tab-pill.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.ari-command-strip-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Operational Controls Cluster Refinement ── */
.ari-command-strip-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 1. Database Ping Chip */
.ari-command-strip-right .ari-stat-chip {
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* 2. Radio Group (Today | 7D | 30D) Segmented Control */
.ari-command-strip-right .ant-radio-group {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.04) !important;
    padding: 2px !important;
    border-radius: 7px !important;
    border: 1px solid var(--ari-card-border) !important;
    height: 28px !important;
}

[data-theme="dark"] .ari-command-strip-right .ant-radio-group {
    background: rgba(255, 255, 255, 0.06) !important;
}

.ari-command-strip-right .ant-radio-button-wrapper {
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 9px !important;
    font-family: 'Plus Jakarta Sans', var(--ari-font-family, sans-serif) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ari-text-secondary) !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

.ari-command-strip-right .ant-radio-button-wrapper:not(:first-child)::before {
    display: none !important; /* Remove harsh divider lines */
}

.ari-command-strip-right .ant-radio-button-wrapper:hover {
    color: var(--ari-text-main) !important;
}

.ari-command-strip-right .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    background: var(--ari-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(24, 144, 255, 0.35) !important;
}

/* 3. Auto-Refresh Select Dropdown */
.ari-command-strip-right .ant-select {
    height: 28px !important;
    font-family: 'Plus Jakarta Sans', var(--ari-font-family, sans-serif) !important;
    font-size: 12px !important;
}

.ari-command-strip-right .ant-select-selector {
    height: 28px !important;
    border-radius: 6px !important;
    border-color: var(--ari-card-border) !important;
    background: var(--ari-card-bg) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.15s ease !important;
}

.ari-command-strip-right .ant-select-selection-item {
    line-height: 26px !important;
    font-weight: 500 !important;
    color: var(--ari-text-main) !important;
}

/* 4. Action Buttons (Edit Layout, Customize, Refresh) */
.ari-command-strip-right .ant-btn {
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid var(--ari-card-border) !important;
    background: var(--ari-card-bg) !important;
    color: var(--ari-text-main) !important;
    font-family: 'Plus Jakarta Sans', var(--ari-font-family, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ari-command-strip-right .ant-btn .anticon {
    font-size: 12.5px !important;
    margin: 0 !important;
    color: var(--ari-text-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}

.ari-command-strip-right .ant-btn span {
    line-height: 1 !important;
    display: inline-block !important;
}

.ari-command-strip-right .ant-btn:hover {
    border-color: var(--ari-primary) !important;
    color: var(--ari-primary) !important;
    background: var(--ari-card-bg) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
}

.ari-command-strip-right .ant-btn:hover .anticon {
    color: var(--ari-primary) !important;
}

.ari-command-strip-right .ant-btn:active {
    transform: translateY(1px) !important;
}

/* Primary Button in Edit Mode (Save) */
.ari-command-strip-right .ant-btn-primary {
    background: var(--ari-primary) !important;
    border-color: var(--ari-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(24, 144, 255, 0.35) !important;
}

.ari-command-strip-right .ant-btn-primary .anticon {
    color: #ffffff !important;
}

.ari-command-strip-right .ant-btn-primary:hover {
    background: var(--ari-primary-hover, #40a9ff) !important;
    border-color: var(--ari-primary-hover, #40a9ff) !important;
    color: #ffffff !important;
}

.ari-stat-footer-sub {
    font-size: 11.5px;
    color: var(--ari-text-secondary);
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--ari-card-border);
}

/* 2. Strict 4-Column Dashboard CSS Grid System */
#ari-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch;
    width: 100%;
}

@media (max-width: 1200px) {
    #ari-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    #ari-dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ColSpan mapping in 4-column system (1, 2, 3, 4) */
.ari-grid-col-1 { grid-column: span 1 !important; }
.ari-grid-col-2 { grid-column: span 2 !important; }
.ari-grid-col-3 { grid-column: span 3 !important; }
.ari-grid-col-4 { grid-column: span 4 !important; }

@media (max-width: 1200px) {
    .ari-grid-col-3 { grid-column: span 2 !important; }
    .ari-grid-col-4 { grid-column: span 2 !important; }
}

@media (max-width: 768px) {
    .ari-grid-col-1,
    .ari-grid-col-2,
    .ari-grid-col-3,
    .ari-grid-col-4 { grid-column: span 1 !important; }
}

/* Universal Standard Widget Container & Card Shell */
.ari-widget-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0 !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    min-width: 0; /* Prevent flex overflow */
}

/* Standardize card borders, backgrounds, radius and equal height */
.ari-widget-container .ant-card {
    height: 100% !important;
    border-radius: 12px !important;
    border: 1px solid var(--ari-card-border) !important;
    background: var(--ari-card-bg) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.ari-widget-container .ant-card-head {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--ari-card-border) !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    width: 100% !important;
}

.ari-widget-container .ant-card-head-wrapper {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ari-widget-container .ant-card-head-title {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: var(--ari-text-main) !important;
    padding: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.ari-widget-container .ant-card-extra {
    margin-left: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ari-widget-container .ant-card-head-title .ari-stat-chip,
.ari-widget-container .ant-card-head-title .ant-tag {
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.ari-widget-container .ant-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 18px !important; /* Uniform 18px on all 4 edges: top, right, bottom, left */
}

.ari-widget-dragging {
    opacity: 0.35 !important;
    transform: scale(0.98);
}

.ari-edit-mode-active .ari-widget-container {
    border: 1.5px dashed var(--ari-primary);
    border-radius: var(--ari-card-radius);
    padding: 4px;
    background: rgba(24, 144, 255, 0.02);
}

.ari-widget-edit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: var(--ari-card-bg);
    border: 1px solid var(--ari-card-border);
    border-radius: var(--ari-control-radius);
    margin-bottom: 6px;
    font-size: 12px;
    user-select: none;
}

.ari-widget-drag-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--ari-text-main);
}

.ari-widget-drag-handle:active {
    cursor: grabbing;
}

.ari-widget-resize-handle {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 22px;
    height: 22px;
    cursor: nwse-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ari-primary);
    background: var(--ari-card-bg);
    border: 1px solid var(--ari-card-border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 10;
    user-select: none;
}

.ari-widget-resize-handle:hover {
    background: var(--ari-primary);
    color: #ffffff;
}

/* 3. Dashboard Tab Bar */
.ari-dashboard-tab-bar {
    margin-bottom: 16px;
}

.ari-dashboard-tab-bar .ant-tabs-nav {
    margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE TABLE BLEEDING, SELECT DROPDOWN & BUTTON SPACING GUARDRAILS
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Flush Table-in-Card Bleeding (Tables Bleed to Card Edges) */
.ari-table-card > .ant-card-body,
.ari-widget-container .ari-table-card > .ant-card-body,
.ant-card-body:has(> .ant-table-wrapper),
.ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper),
.ari-widget-container .ant-card-body:has(> .ant-table-wrapper),
.ari-widget-container .ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) {
    padding: 0 !important;
}

.ari-table-card > .ant-card-head + .ant-card-body .ant-table-wrapper,
.ari-table-card > .ant-card-head + .ant-card-body .ant-table,
.ari-table-card > .ant-card-head + .ant-card-body .ant-table-container,
.ant-card-head + .ant-card-body:has(> .ant-table-wrapper) .ant-table-wrapper,
.ant-card-head + .ant-card-body:has(> .ant-table-wrapper) .ant-table,
.ant-card-head + .ant-card-body:has(> .ant-table-wrapper) .ant-table-container,
.ant-card-head + .ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table-wrapper,
.ant-card-head + .ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table,
.ant-card-head + .ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table-container {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-radius: 0 0 var(--ari-card-radius) var(--ari-card-radius) !important;
}

.ari-table-card .ant-table thead > tr > th:first-child,
.ari-table-card .ant-table tbody > tr > td:first-child,
.ant-card-body:has(> .ant-table-wrapper) .ant-table thead > tr > th:first-child,
.ant-card-body:has(> .ant-table-wrapper) .ant-table tbody > tr > td:first-child,
.ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table thead > tr > th:first-child,
.ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table tbody > tr > td:first-child {
    padding-left: 18px !important;
}

.ari-table-card .ant-table thead > tr > th:last-child,
.ari-table-card .ant-table tbody > tr > td:last-child,
.ant-card-body:has(> .ant-table-wrapper) .ant-table thead > tr > th:last-child,
.ant-card-body:has(> .ant-table-wrapper) .ant-table tbody > tr > td:last-child,
.ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table thead > tr > th:last-child,
.ant-card-body:has(> .ant-spin-nested-loading > .ant-spin-container > .ant-table-wrapper) .ant-table tbody > tr > td:last-child {
    padding-right: 18px !important;
}

.ant-card .ant-table-pagination.ant-pagination,
.ari-table-card .ant-table-pagination.ant-pagination {
    margin: 12px 18px !important;
    padding: 0 !important;
}

/* 2. Prevent <Select> Dropdown Options from Being Cut Off / Truncated */
.ant-select-dropdown {
    width: auto !important;
    min-width: 180px !important;
    max-width: 480px !important;
}

.ant-select-item-option-content {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-right: 12px !important;
}

/* 3. Prevent Adjacent Buttons from Sticking Together */
.ari-btn-group-gap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ant-card-extra > .ant-btn + .ant-btn,
.ant-table-cell > .ant-btn + .ant-btn,
.ant-modal-footer > .ant-btn + .ant-btn,
.ant-drawer-footer > .ant-btn + .ant-btn,
:not(.ant-btn-group):not(.d-flex):not(.d-inline-flex):not(.ari-toolbar):not(.ari-command-strip-right):not(.ari-btn-group-gap) > .ant-btn + .ant-btn {
    margin-left: 8px !important;
}

/* 4. Table Width, Cell Max-Width & Ellipsis Guardrails */
.ant-table table {
    width: 100% !important;
}

.ant-table-tbody > tr > td {
    max-width: 320px;
}

.ari-cell-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ari-cell-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word;
}

.ant-table-tbody .ant-tag {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}



/* ═══════════════════════════════════════════════════════════════════
   VIBERCALL CONTROL CENTER — MOBILE-RESPONSIVE & TOUCH OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

.vc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vc-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vc-split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

.vc-mobile-nav {
    display: none;
}

.vc-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

@media (max-width: 1024px) {
    .vc-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vc-desktop-sider {
        display: none !important;
    }

    .vc-mobile-nav {
        display: flex !important;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        padding: 8px 12px;
        background: var(--ari-sider-bg);
        border-bottom: 1px solid var(--ari-card-border);
        -webkit-overflow-scrolling: touch;
    }

    .vc-mobile-nav .ant-btn {
        min-height: 38px !important;
        padding: 0 12px !important;
        flex-shrink: 0;
    }

    .ari-top-header {
        padding: 0 12px !important;
        height: 56px !important;
    }

    .vc-hide-mobile {
        display: none !important;
    }

    .vc-kpi-grid,
    .vc-grid-2,
    .vc-grid-3,
    .vc-grid-4,
    .vc-split-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .vc-step-row {
        flex-wrap: wrap;
    }

    .ant-modal {
        max-width: 96vw !important;
        margin: 8px auto !important;
        top: 12px !important;
    }

    .ant-modal-body {
        padding: 14px !important;
        max-height: 78vh;
        overflow-y: auto;
    }

    .ant-card-head {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        min-height: 44px !important;
    }

    .ant-card-body {
        padding: 12px !important;
    }

    .ant-input,
    .ant-input-password,
    .ant-input-number,
    .ant-select-selector {
        min-height: 40px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   ROUND 12: SPACIOUS MULTI-LINE STEP EDITOR, DELAY PILLS & MODAL DIALOG
   ═══════════════════════════════════════════════════════════════════ */

.vc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vc-modal-dialog {
    width: 95vw;
    max-width: 1040px;
    max-height: 92vh;
    background: var(--ari-card-bg);
    border: 1px solid var(--ari-card-border);
    border-radius: var(--ari-modal-radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vc-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ari-card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ari-sider-bg);
}

.vc-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vc-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--ari-card-border);
    background: var(--ari-sider-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.vc-step-card {
    width: 100%;
    padding: 14px;
    border-radius: var(--ari-popup-radius);
    border: 1px solid var(--ari-card-border);
    background: var(--ari-card-bg);
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.vc-step-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.vc-textarea {
    width: 100% !important;
    min-height: 84px;
    font-family: var(--ari-font-family) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding: 10px 12px !important;
    border-radius: var(--ari-control-radius) !important;
    border: 1px solid var(--ari-card-border) !important;
    background: var(--ari-card-bg) !important;
    color: var(--ari-text-main) !important;
    resize: vertical;
    box-sizing: border-box;
}

.vc-textarea:focus {
    border-color: var(--ari-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.16) !important;
}

.vc-delay-pill-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vc-delay-pill {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--ari-control-radius);
    border: 1px solid var(--ari-card-border);
    background: var(--ari-card-bg);
    color: var(--ari-text-main);
    font-family: var(--ari-font-family);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vc-delay-pill:hover {
    border-color: var(--ari-primary);
    color: var(--ari-primary);
}

.vc-delay-pill.active {
    background: var(--ari-primary);
    border-color: var(--ari-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.32);
}

@media (max-width: 768px) {
    .vc-modal-backdrop {
        padding: 6px;
    }

    .vc-modal-dialog {
        width: 98vw;
        max-height: 95vh;
    }

    .vc-modal-header,
    .vc-modal-body,
    .vc-modal-footer {
        padding: 12px;
    }

    .vc-delay-pill {
        height: 36px;
        padding: 0 10px;
    }
}