/*
 * FlexCC design language, copied verbatim from:
 *   flexcc/resources/css/design/tokens.css
 *
 * Kept byte-identical so it can be re-synced with a plain file copy.
 * MainCRM-specific mapping onto Bootstrap/OneUI lives in flx-theme.css.
 */
/* flx design language core */
:root {
    --flx-font-family-base:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    --flx-font-size-xs: 0.75rem;
    --flx-font-size-sm: 0.875rem;
    --flx-font-size-base: 1rem;
    --flx-font-size-lg: 1.125rem;
    --flx-font-size-xl: 1.25rem;
    --flx-font-size-2xl: 1.5rem;
    --flx-font-size-3xl: 1.875rem;
    --flx-line-height-tight: 1.2;
    --flx-line-height-snug: 1.35;
    --flx-line-height-normal: 1.5;
    --flx-space-1-5: 0.375rem;
    --flx-space-2-5: 0.625rem;
    --flx-space-3-5: 0.875rem;
    --flx-space-4-5: 1.125rem;
    --flx-space-5-5: 1.375rem;
    --flx-space-6-5: 1.625rem;
    --flx-space-18: 4.5rem;
    --flx-bg-page: #f4f7fb;
    --flx-bg-surface: #ffffff;
    --flx-bg-subtle: #f9fbfd;
    --flx-text-primary: #0f172a;
    --flx-text-secondary: #334155;
    --flx-text-muted: #64748b;
    --flx-border: #e2e8f0;
    --flx-border-strong: #cbd5e1;
    --flx-primary-50: #ebf5ff;
    --flx-primary-100: #d6eafe;
    --flx-primary-200: #add5fe;
    --flx-primary-300: #85c1fd;
    --flx-primary-400: #4ca4fc;
    --flx-primary-500: #248ffc;
    --flx-primary-600: #007dfb;
    --flx-primary-700: #0b66c9;
    --flx-primary-800: #0a5cb8;
    --flx-primary-900: #0854a8;
    --flx-success-50: #ecfdf3;
    --flx-success-100: #dcfce7;
    --flx-success-200: #bbf7d0;
    --flx-success-300: #86efac;
    --flx-success-400: #4ade80;
    --flx-success-500: #22c55e;
    --flx-success-600: #16a34a;
    --flx-success-700: #166534;
    --flx-success-800: #14532d;
    --flx-success-900: #052e16;
    --flx-warning-50: #fffbeb;
    --flx-warning-100: #fef3c7;
    --flx-warning-200: #fde68a;
    --flx-warning-300: #fcd34d;
    --flx-warning-400: #fbbf24;
    --flx-warning-500: #f59e0b;
    --flx-warning-600: #d97706;
    --flx-warning-700: #92400e;
    --flx-warning-800: #78350f;
    --flx-warning-900: #451a03;
    --flx-danger-50: #fef2f2;
    --flx-danger-100: #fee2e2;
    --flx-danger-200: #fecaca;
    --flx-danger-300: #fca5a5;
    --flx-danger-400: #f87171;
    --flx-danger-500: #ef4444;
    --flx-danger-600: #dc2626;
    --flx-danger-700: #b91c1c;
    --flx-danger-800: #991b1b;
    --flx-danger-900: #7f1d1d;
    --flx-info-50: #f0fdfa;
    --flx-info-100: #ccfbf1;
    --flx-info-200: #99f6e4;
    --flx-info-300: #5eead4;
    --flx-info-400: #2dd4bf;
    --flx-info-500: #14b8a6;
    --flx-info-600: #0d9488;
    --flx-info-700: #0f766e;
    --flx-info-800: #115e59;
    --flx-info-900: #134e4a;
    /* Semantic aliases — prefer these over raw ramp steps in components */
    --flx-primary: var(--flx-primary-600);
    --flx-primary-hover: var(--flx-primary-700);
    --flx-primary-active: var(--flx-primary-800);
    --flx-on-primary: #ffffff;
    --flx-primary-container: var(--flx-bg-surface);
    --flx-on-primary-container: var(--flx-primary-700);
    --flx-success: var(--flx-success-600);
    --flx-warning: var(--flx-warning-600);
    --flx-danger: var(--flx-danger-600);
    --flx-info: var(--flx-info-600);
    --flx-on-status: #ffffff;
    /* UI boundaries that must be perceivable on their own (WCAG 1.4.11: ≥3:1 vs surface) */
    --flx-outline: #7c8ba1;
    --flx-outline-strong: #5b6b83;
    --flx-focus-ring: 0 0 0 0.2rem rgba(0, 125, 251, 0.28);
    /* Agent / call state vocabulary — the single source for presence dots, status pills, boards */
    --flx-state-ready: var(--flx-success);
    --flx-state-on-call: var(--flx-primary);
    --flx-state-ringing: var(--flx-primary);
    --flx-state-wrap-up: var(--flx-warning);
    --flx-state-paused: var(--flx-warning);
    --flx-state-not-ready: var(--flx-danger);
    --flx-state-offline: var(--flx-outline);
    --flx-state-error: var(--flx-danger);
    /* Data-viz series, in order of use */
    --flx-chart-1: #007dfb;
    --flx-chart-2: #0d9488;
    --flx-chart-3: #d97706;
    --flx-chart-4: #0854a8;
    --flx-chart-5: #dc2626;
    --flx-chart-6: #16a34a;
    --flx-chart-7: #85c1fd;
    --flx-chart-8: #64748b;
    --flx-chart-grid: rgba(100, 116, 139, 0.18);
    /* Public cloud-site campaign palette and spectral accents. */
    --flx-cloud-ink: #071938;
    --flx-cloud-deep: #0a3566;
    --flx-cloud-brand: #007dfb;
    --flx-cloud-brand-bright: #248ffc;
    --flx-cloud-logo-blue: #00a1e4;
    --flx-cloud-accent: #85c1fd;
    --flx-cloud-accent-soft: #f1f7ff;
    --flx-cloud-accent-border: #add5fe;
    --flx-cloud-cyan: var(--flx-cloud-logo-blue);
    --flx-cloud-white: #fffffe;
    --flx-cloud-copy: #52657e;
    --flx-cloud-gradient: linear-gradient(125deg, var(--flx-cloud-brand), var(--flx-cloud-brand-bright));
    --flx-cloud-border-gradient: linear-gradient(135deg, var(--flx-cloud-accent), var(--flx-cloud-brand) 46%, var(--flx-cloud-cyan));
    --flx-cloud-spectrum: linear-gradient(90deg, var(--flx-cloud-brand), var(--flx-cloud-brand-bright), var(--flx-cloud-accent), var(--flx-cloud-cyan));
    --flx-radius-sm: 6px;
    --flx-radius-md: 8px;
    --flx-radius-lg: 12px;
    --flx-radius-xl: 16px;
    --flx-radius-pill: 999px;
    --flx-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.08);
    --flx-shadow-2: 0 10px 24px rgba(15, 23, 42, 0.04);
    --flx-shadow-overlay: 0 18px 48px rgba(15, 23, 42, 0.18);
    --flx-overlay-soft: rgba(248, 250, 252, 0.96);
    --flx-overlay-strong: rgba(15, 23, 42, 0.72);
    --flx-z-sticky: 30;
    --flx-z-navbar: 1040;
    --flx-z-dropdown: 1100;
    --flx-z-overlay: 1200;
    --flx-z-modal: 2000;
    --flx-z-loader: 9999;
    --flx-breakpoint-xs: 576px;
    --flx-breakpoint-sm: 768px;
    --flx-breakpoint-md: 992px;
    --flx-breakpoint-lg: 1200px;
    --flx-breakpoint-xl: 1360px;
    --flx-duration-fast: 140ms;
    --flx-duration-base: 160ms;
    --flx-duration-slow: 240ms;
    --flx-agent-topbar-height: 68px;
    --flx-agent-sidebar-width: 76px;
    --flx-agent-phone-panel-width: clamp(18rem, 24vw, 24rem);
    --flx-agent-shell-gap: 12px;
    --flx-agent-panel-gap: 12px;
    --flx-agent-shell-padding: 0px;
    --flx-agent-shell-padding-mobile: 0px;
    --flx-agent-z-sidebar: 20;
    --flx-agent-z-topbar: 30;
    --flx-agent-z-phone: 25;
    --flx-dropdown-bg: var(--flx-bg-surface);
    --flx-dropdown-border: var(--flx-border);
    --flx-dropdown-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    --flx-dropdown-item-color: #0f172a;
    --flx-dropdown-item-hover-bg: var(--flx-bg-subtle);
    --flx-dropdown-item-hover-color: var(--flx-primary-700);
    --flx-dropdown-item-active-bg: var(--flx-bg-surface);
    --flx-dropdown-item-active-color: var(--flx-primary);
}

.dark-mode {
    --flx-bg-page: #0b1220;
    --flx-bg-surface: #121a29;
    --flx-bg-subtle: #182235;
    --flx-text-primary: #e8eef8;
    --flx-text-secondary: #c3cfdf;
    --flx-text-muted: #90a0b7;
    --flx-border: #273247;
    --flx-border-strong: #34425b;
    --flx-primary-50: #092241;
    --flx-primary-100: #092a50;
    --flx-primary-200: #07376d;
    --flx-primary-300: #06488e;
    --flx-primary-400: #035fbe;
    --flx-primary-500: #0170e1;
    --flx-primary-600: #66b1fd;
    --flx-primary-700: #99cbfd;
    --flx-primary-800: #c2e0fe;
    --flx-primary-900: #dbedfe;
    --flx-success-50: #10271c;
    --flx-success-100: #153624;
    --flx-success-200: #24523a;
    --flx-success-300: #3b7355;
    --flx-success-400: #4d8d6b;
    --flx-success-500: #5fa881;
    --flx-success-600: #71c297;
    --flx-success-700: #7fd6a7;
    --flx-success-800: #9fe0bd;
    --flx-success-900: #b9e8cf;
    --flx-warning-50: #2a2112;
    --flx-warning-100: #3a2d16;
    --flx-warning-200: #5a4520;
    --flx-warning-300: #806636;
    --flx-warning-400: #9f8048;
    --flx-warning-500: #be9b5a;
    --flx-warning-600: #ddb56c;
    --flx-warning-700: #f4c97a;
    --flx-warning-800: #f7d69b;
    --flx-warning-900: #f9e1b6;
    --flx-danger-50: #2d1518;
    --flx-danger-100: #3f1c21;
    --flx-danger-200: #613038;
    --flx-danger-300: #854c54;
    --flx-danger-400: #a1626a;
    --flx-danger-500: #be7981;
    --flx-danger-600: #db8f97;
    --flx-danger-700: #f0a0a8;
    --flx-danger-800: #f4b8be;
    --flx-danger-900: #f7cbcf;
    --flx-info-50: #0f2a27;
    --flx-info-100: #143b36;
    --flx-info-200: #1f5a52;
    --flx-info-300: #377a70;
    --flx-info-400: #4a9388;
    --flx-info-500: #5dad9f;
    --flx-info-600: #71c6b7;
    --flx-info-700: #7fd9c9;
    --flx-info-800: #9fe2d6;
    --flx-info-900: #b9eae1;
    --flx-primary: var(--flx-primary-600);
    --flx-primary-hover: var(--flx-primary-700);
    --flx-primary-active: var(--flx-primary-800);
    --flx-on-primary: #0b1220;
    --flx-primary-container: var(--flx-bg-surface);
    --flx-on-primary-container: var(--flx-primary-700);
    --flx-on-status: #0b1220;
    --flx-outline: #6f7f98;
    --flx-outline-strong: #8d9db6;
    --flx-focus-ring: 0 0 0 0.2rem rgba(102, 177, 255, 0.35);
    --flx-chart-1: #66b1fd;
    --flx-chart-2: #7fd9c9;
    --flx-chart-3: #f4c97a;
    --flx-chart-4: #dbedfe;
    --flx-chart-5: #f0a0a8;
    --flx-chart-6: #7fd6a7;
    --flx-chart-7: #035fbe;
    --flx-chart-8: #90a0b7;
    --flx-chart-grid: rgba(144, 160, 183, 0.18);
    --flx-overlay-soft: rgba(15, 23, 36, 0.92);
    --flx-overlay-strong: rgba(6, 11, 19, 0.82);
    --flx-shadow-overlay: 0 18px 48px rgba(2, 6, 23, 0.42);
    --flx-dropdown-bg: #172131;
    --flx-dropdown-border: #2a3647;
    --flx-dropdown-shadow: 0 16px 30px rgba(2, 6, 23, 0.4);
    --flx-dropdown-item-color: #d7e0eb;
    --flx-dropdown-item-hover-bg: #223047;
    --flx-dropdown-item-hover-color: #f3f6fa;
    --flx-dropdown-item-active-bg: rgba(102, 177, 255, 0.16);
    --flx-dropdown-item-active-color: #f3f6fa;
}

:root {
    --flx-input-alt-bg: #ffffff;
    --flx-input-alt-border: var(--flx-outline);
    --flx-input-alt-focus-bg: #f8fbff;
    --flx-input-alt-focus-border: var(--flx-primary-300);
    --flx-input-alt-placeholder: #7c8898;
    --flx-input-height: calc(1.5em + 0.95rem + 2px);
    --flx-input-padding-y: 0.3125rem;
    --flx-input-padding-x: 0.75rem;
    --flx-input-radius: 8px;
    --flx-input-focus-ring: var(--flx-focus-ring);
    --flx-select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.dark-mode {
    --flx-input-alt-bg: #172131;
    --flx-input-alt-border: var(--flx-outline);
    --flx-input-alt-focus-bg: #1b2940;
    --flx-input-alt-focus-border: var(--flx-primary-600);
    --flx-input-alt-placeholder: #8192a8;
}