@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Vazirmatn:wght@400;500;600&display=swap');
/* ============================================
   CORE ENGINE STYLESHEET
   Advantage Design System
   ============================================ */
/* Import all component stylesheets */
/* ============================================
   ADVANTAGE DESIGN SYSTEM
   Extracted from Flutter app for consistency
   ============================================ */
:root {
  /* ========== LIGHT THEME (default) ========== */
  
  /* Primary - Advantage Green */
  --color-primary-main: #37DB12;
  --color-primary-hover: #32C510;
  --color-primary-outlined-hover-bg: rgba(55, 219, 18, 0.08);
  --color-primary-outlined-resting-bg: rgba(55, 219, 18, 0.50);
  --color-primary-custom-bg: #EBFBE7;
  --color-primary-contrast: #000000;
  
  /* Secondary - Advantage Dark Purple */
  --color-secondary-main: #0D003F;
  --color-secondary-hover: #0C0039;
  --color-secondary-outlined-hover-bg: rgba(13, 0, 63, 0.08);
  --color-secondary-outlined-resting-bg: rgba(13, 0, 63, 0.50);
  --color-secondary-custom-bg: #E7E6EC;
  --color-secondary-contrast: #FFFFFF;
  
  /* Info */
  --color-info-main: #32BAFF;
  --color-info-hover: #139CE0;
  --color-info-outlined-hover-bg: rgba(50, 186, 255, 0.08);
  --color-info-outlined-resting-bg: rgba(50, 186, 255, 0.50);
  --color-info-custom-bg: #E4F2FE;
  --color-info-contrast: #FFFFFF;
  
  /* Success */
  --color-success-main: #6AD01F;
  --color-success-hover: #4CB200;
  --color-success-outlined-hover-bg: rgba(106, 208, 31, 0.08);
  --color-success-outlined-resting-bg: rgba(106, 208, 31, 0.50);
  --color-success-custom-bg: #EAF5EA;
  --color-success-contrast: #FFFFFF;
  
  /* Warning */
  --color-warning-main: #FFB547;
  --color-warning-hover: #E09E00;
  --color-warning-outlined-hover-bg: rgba(255, 181, 71, 0.08);
  --color-warning-outlined-resting-bg: rgba(255, 181, 71, 0.50);
  --color-warning-custom-bg: #FDEDE1;
  --color-warning-contrast: #FFFFFF;
  
  /* Error */
  --color-error-main: #FF6166;
  --color-error-hover: #E04347;
  --color-error-outlined-hover-bg: rgba(255, 97, 102, 0.08);
  --color-error-outlined-resting-bg: rgba(255, 97, 102, 0.50);
  --color-error-custom-bg: #FEE8E7;
  --color-error-contrast: #FFFFFF;
  
  /* Link */
  --color-link-main: #007AFF;
  --color-link-hover: #0077ED;
  --color-link-outlined-hover-bg: rgba(0, 122, 255, 0.08);
  --color-link-outlined-resting-bg: rgba(0, 122, 255, 0.50);
  --color-link-custom-bg: #DBECFE;
  --color-link-contrast: #FFFFFF;

  /* Purple - Chart accent */
  --color-purple-main: #9155FD;
  --color-purple-hover: #804BDB;
  --color-purple-outlined-hover-bg: rgba(145, 85, 253, 0.08);
  --color-purple-outlined-resting-bg: rgba(145, 85, 253, 0.50);
  --color-purple-custom-bg: #F1EAFE;
  --color-purple-contrast: #FFFFFF;

  /* Teal - Chart accent */
  --color-teal-main: #00CFE8;
  --color-teal-hover: #00B3C9;
  --color-teal-outlined-hover-bg: rgba(0, 207, 232, 0.08);
  --color-teal-outlined-resting-bg: rgba(0, 207, 232, 0.50);
  --color-teal-custom-bg: #E0F7FA;
  --color-teal-contrast: #FFFFFF;

  /* Pink - Chart accent */
  --color-pink-main: #EC4899;
  --color-pink-hover: #DB2777;
  --color-pink-outlined-hover-bg: rgba(236, 72, 153, 0.08);
  --color-pink-custom-bg: #FDF2F8;
  --color-pink-contrast: #FFFFFF;

  /* Indigo - Chart accent */
  --color-indigo-main: #6366F1;
  --color-indigo-hover: #4F46E5;
  --color-indigo-outlined-hover-bg: rgba(99, 102, 241, 0.08);
  --color-indigo-custom-bg: #EEF2FF;
  --color-indigo-contrast: #FFFFFF;

  /* Text Colors (base: #3A3541) */
  --color-text-primary: rgba(58, 53, 65, 0.87);
  --color-text-secondary: rgba(58, 53, 65, 0.60);
  --color-text-disabled: rgba(58, 53, 65, 0.30);
  
  /* Action Colors (base: #3A3541) */
  --color-action-active: rgba(58, 53, 65, 0.54);
  --color-action-hover: rgba(58, 53, 65, 0.04);
  --color-action-selected: rgba(58, 53, 65, 0.08);
  --color-action-disabled: rgba(58, 53, 65, 0.26);
  --color-action-disabled-bg: rgba(58, 53, 65, 0.12);
  --color-action-focus: rgba(58, 53, 65, 0.12);
  
  /* Backgrounds */
  --color-bg-body: #F4F5FA;
  --color-bg-paper: #FFFFFF;
  --color-bg-page-header: #F9FAFC;
  --color-bg-extra: #F9F8F9;
  --color-bg-sidebar: #0D003F;
  --color-bg-menu: #0D003F;
  --color-bg-chip: rgba(58, 53, 65, 0.08);
  --color-bg-filled-input: rgba(58, 53, 65, 0.04);
  
  /* Borders & Dividers */
  --color-divider: rgba(58, 53, 65, 0.12);
  --color-outline-border: rgba(58, 53, 65, 0.23);
  --color-input-line: #D4D3D5;
  --color-border: rgba(58, 53, 65, 0.30);
  
  /* Other */
  --color-overlay: #9C9AA0;
  --color-rating-active: #FFB400;
  --color-snackbar-bg: #212121;
  
  /* Active Menu Gradient */
  --color-active-menu-start: #A3EE92;
  --color-active-menu-end: #37DB12;
}
/* ========== DARK THEME ========== */
[data-theme="dark"] {
  /* Primary - Lighter green for dark mode */
  --color-primary-main: #A4ED8C;
  --color-primary-hover: #94D57E;
  --color-primary-outlined-hover-bg: rgba(164, 237, 140, 0.08);
  --color-primary-outlined-resting-bg: rgba(164, 237, 140, 0.50);
  --color-primary-custom-bg: #3E493B;
  --color-primary-contrast: #000000;
  
  /* Secondary */
  --color-secondary-main: #B4B0C3;
  --color-secondary-hover: #DBD9E2;
  --color-secondary-outlined-hover-bg: rgba(180, 176, 195, 0.08);
  --color-secondary-outlined-resting-bg: rgba(180, 176, 195, 0.50);
  --color-secondary-custom-bg: #494753;
  --color-secondary-contrast: #000000;
  
  /* Info */
  --color-info-main: #0E71A3;
  --color-info-hover: #139CE0;
  --color-info-outlined-hover-bg: rgba(14, 113, 163, 0.08);
  --color-info-outlined-resting-bg: rgba(14, 113, 163, 0.50);
  --color-info-custom-bg: #2F3A5F;
  --color-info-contrast: #FFFFFF;
  
  /* Success */
  --color-success-main: #378100;
  --color-success-hover: #4CB200;
  --color-success-outlined-hover-bg: rgba(55, 129, 0, 0.08);
  --color-success-outlined-resting-bg: rgba(55, 129, 0, 0.50);
  --color-success-custom-bg: #343D4C;
  --color-success-contrast: #FFFFFF;
  
  /* Warning */
  --color-warning-main: #A37300;
  --color-warning-hover: #E09E00;
  --color-warning-outlined-hover-bg: rgba(163, 115, 0, 0.08);
  --color-warning-outlined-resting-bg: rgba(163, 115, 0, 0.50);
  --color-warning-custom-bg: #4A3D42;
  --color-warning-contrast: #FFFFFF;
  
  /* Error */
  --color-error-main: #A33134;
  --color-error-hover: #E04347;
  --color-error-outlined-hover-bg: rgba(163, 49, 52, 0.08);
  --color-error-outlined-resting-bg: rgba(163, 49, 52, 0.50);
  --color-error-custom-bg: #483048;
  --color-error-contrast: #FFFFFF;
  
  /* Link */
  --color-link-main: #0A84FF;
  --color-link-hover: #007AFF;
  --color-link-outlined-hover-bg: rgba(10, 132, 255, 0.08);
  --color-link-outlined-resting-bg: rgba(10, 132, 255, 0.50);
  --color-link-custom-bg: #2E3945;
  --color-link-contrast: #FFFFFF;

  /* Purple */
  --color-purple-main: #A678FF;
  --color-purple-hover: #9155FD;
  --color-purple-outlined-hover-bg: rgba(166, 120, 255, 0.08);
  --color-purple-outlined-resting-bg: rgba(166, 120, 255, 0.50);
  --color-purple-custom-bg: #3D3558;
  --color-purple-contrast: #000000;

  /* Teal */
  --color-teal-main: #1AD8F2;
  --color-teal-hover: #00CFE8;
  --color-teal-outlined-hover-bg: rgba(26, 216, 242, 0.08);
  --color-teal-outlined-resting-bg: rgba(26, 216, 242, 0.50);
  --color-teal-custom-bg: #2E3F4A;
  --color-teal-contrast: #000000;

  /* Pink */
  --color-pink-main: #F472B6;
  --color-pink-hover: #EC4899;
  --color-pink-outlined-hover-bg: rgba(244, 114, 182, 0.08);
  --color-pink-custom-bg: #4A2E3F;
  --color-pink-contrast: #000000;

  /* Indigo */
  --color-indigo-main: #818CF8;
  --color-indigo-hover: #6366F1;
  --color-indigo-outlined-hover-bg: rgba(129, 140, 248, 0.08);
  --color-indigo-custom-bg: #353558;
  --color-indigo-contrast: #000000;

  /* Text Colors (base: #E7E3FC) */
  --color-text-primary: rgba(231, 227, 252, 0.87);
  --color-text-secondary: rgba(231, 227, 252, 0.60);
  --color-text-disabled: rgba(231, 227, 252, 0.30);
  
  /* Action Colors (base: #E7E3FC) */
  --color-action-active: rgba(231, 227, 252, 0.54);
  --color-action-hover: rgba(231, 227, 252, 0.04);
  --color-action-selected: rgba(231, 227, 252, 0.08);
  --color-action-disabled: rgba(231, 227, 252, 0.26);
  --color-action-disabled-bg: rgba(231, 227, 252, 0.12);
  --color-action-focus: rgba(231, 227, 252, 0.12);
  
  /* Backgrounds */
  --color-bg-body: #28243D;
  --color-bg-paper: #312D4B;
  --color-bg-page-header: #3D3759;
  --color-bg-extra: #373452;
  --color-bg-sidebar: #0D003F;
  --color-bg-menu: #1C1841;
  --color-bg-chip: rgba(231, 227, 252, 0.08);
  --color-bg-filled-input: rgba(231, 227, 252, 0.04);
  
  /* Borders & Dividers */
  --color-divider: rgba(231, 227, 252, 0.12);
  --color-outline-border: rgba(231, 227, 252, 0.23);
  --color-input-line: rgba(231, 227, 252, 0.22);
  --color-border: rgba(231, 227, 252, 0.30);
  
  /* Other */
  --color-overlay: rgba(44, 41, 66, 0.87);
  --color-snackbar-bg: #FFFFFF;
  
  /* Active Menu Gradient (reversed for dark) */
  --color-active-menu-start: #37DB12;
  --color-active-menu-end: #A3EE92;
}
/* ============================================
   TYPOGRAPHY SYSTEM
   EN: Poppins  |  AR: Vazirmatn  (Google Fonts)
   ============================================ */
:root {
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}
[dir="rtl"] {
  --font-family: 'Vazirmatn', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Base Typography */
body {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-primary);
}
/* Heading Styles */
.text-h1, h1 {
  font-family: var(--font-family);
  font-size: 96px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -1.5px;
  line-height: 1.17;
  color: var(--color-text-primary);
}
.text-h2, h2 {
  font-family: var(--font-family);
  font-size: 60px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.text-h3, h3 {
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.17;
  color: var(--color-text-primary);
}
.text-h4, h4 {
  font-family: var(--font-family);
  font-size: 34px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.25px;
  line-height: 1.24;
  color: var(--color-text-primary);
}
.text-h5, h5 {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.33;
  color: var(--color-text-primary);
}
.text-h6, h6 {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15px;
  line-height: 1.6;
  color: var(--color-text-primary);
}
/* Body Styles */
.text-body1 {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  line-height: 1.5;
}
.text-body1-semibold {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.15px;
  line-height: 1.5;
}
.text-body2 {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  line-height: 1.5;
}
.text-body2-semibold {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.15px;
  line-height: 1.43;
}
/* Subtitle Styles */
.text-subtitle1 {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  line-height: 1.75;
}
.text-subtitle2 {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1px;
  line-height: 1.5;
}
/* Button Text Styles */
.text-button-large {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.2px;
  line-height: 1.73;
}
.text-button-medium {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1.2px;
  line-height: 1.71;
}
.text-button-small {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.46px;
  line-height: 1.69;
}
/* Input & Form Styles */
.text-input-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  line-height: 1;
}
.text-input-text {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  line-height: 1.5;
}
.text-helper-text {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.4px;
  line-height: 1.67;
}
/* Other Text Styles */
.text-caption {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.4px;
  line-height: 1.17;
}
.text-overline {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 1px;
  line-height: 1.17;
  text-transform: uppercase;
}
.text-chip {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.16px;
  line-height: 1.38;
}
.text-tooltip {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1.27;
}
.text-alert-title {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15px;
  line-height: 1.5;
}
.text-table-header {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.17px;
  line-height: 2;
}
.text-badge-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14px;
  line-height: 1.67;
}
.text-avatar-initials {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.14px;
  line-height: 1.11;
}
.text-toast {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.14px;
  line-height: 1.25;
}
/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled { color: var(--color-text-disabled); }
.text-success { color: var(--color-success-main); }
.text-error { color: var(--color-error-main); }
.text-warning { color: var(--color-warning-main); }
.text-info { color: var(--color-info-main); }
.text-link { color: var(--color-link-main); }
/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Font Weight Utilities */
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
/* ============================================
   SHADOW SYSTEM
   ============================================ */
:root {
  /* Button Shadow */
  --shadow-button: 
    0 4px 8px -4px rgba(58, 53, 65, 0.16),
    0 6px 10px -4px rgba(58, 53, 65, 0.08),
    0 4px 6px -4px rgba(58, 53, 65, 0.10);
  
  /* Container/Card Shadow */
  --shadow-container: 
    0 6px 16px -4px rgba(58, 53, 65, 0.10),
    0 2px 12px -4px rgba(58, 53, 65, 0.08),
    0 2px 12px -4px rgba(58, 53, 65, 0.10);
  
  /* Icon Shadow */
  --shadow-icon: 
    0 1px 3px rgba(58, 53, 65, 0.12),
    0 1px 1px rgba(58, 53, 65, 0.14),
    0 2px 1px -1px rgba(58, 53, 65, 0.20);
  
  /* Elevation levels (Material-like) */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(58, 53, 65, 0.06);
  --shadow-sm: 0 1px 3px rgba(58, 53, 65, 0.12), 0 1px 2px rgba(58, 53, 65, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(58, 53, 65, 0.10), 0 2px 4px -1px rgba(58, 53, 65, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(58, 53, 65, 0.10), 0 4px 6px -2px rgba(58, 53, 65, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(58, 53, 65, 0.10), 0 10px 10px -5px rgba(58, 53, 65, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(58, 53, 65, 0.25);
  
  /* Focus Ring */
  --shadow-focus-primary: 0 0 0 3px var(--color-primary-outlined-hover-bg);
  --shadow-focus-error: 0 0 0 3px var(--color-error-outlined-hover-bg);
  --shadow-focus-success: 0 0 0 3px var(--color-success-outlined-hover-bg);
  
  /* Border Radius */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
}
/* Dark theme shadows */
[data-theme="dark"] {
  --shadow-button: 
    0 4px 8px -4px rgba(0, 0, 0, 0.32),
    0 6px 10px -4px rgba(0, 0, 0, 0.16),
    0 4px 6px -4px rgba(0, 0, 0, 0.20);
  
  --shadow-container: 
    0 6px 16px -4px rgba(0, 0, 0, 0.20),
    0 2px 12px -4px rgba(0, 0, 0, 0.16),
    0 2px 12px -4px rgba(0, 0, 0, 0.20);
  
  --shadow-icon: 
    0 1px 3px rgba(0, 0, 0, 0.24),
    0 1px 1px rgba(0, 0, 0, 0.28),
    0 2px 1px -1px rgba(0, 0, 0, 0.40);
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.20), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.20), 0 4px 6px -2px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.20), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
}
/* Shadow Utility Classes */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-button { box-shadow: var(--shadow-button); }
.shadow-container { box-shadow: var(--shadow-container); }
.shadow-icon { box-shadow: var(--shadow-icon); }
/* Border Radius Utility Classes */
.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }
/* ============================================
   COMPONENT STYLES
   Using design tokens from _variables.css
   ============================================ */
/* ========== BUTTONS (from Flutter AppButton) ========== */
/* Types: CONTAINED, OUTLINE, TEXT */
/* Sizes: LARGE (42px), MEDIUM (38px), SMALL (30px) */
/* Colors: PRIMARY, SECONDARY, ERROR, WARNING, INFO, SUCCESS, LINK */
/* Base Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  border-radius: 5px;
  cursor: pointer;
  transition: all 350ms ease;
  text-decoration: none;
  white-space: nowrap;
}
/* Ensure SVG icons in buttons are proper flex items */
.btn svg {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.btn:focus {
  outline: none;
}
/* ===== BUTTON SIZES ===== */
/* Large Button (default) - Height: 42px */
.btn-lg, .btn {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
  letter-spacing: 0.46px;
}
/* Medium Button - Height: 38px */
.btn-md {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
  letter-spacing: 0.4px;
}
/* Small Button - Height: 30px */
.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  letter-spacing: 0.46px;
}
/* ===== CONTAINED BUTTONS ===== */
/* Primary Contained */
.btn-primary, .btn-contained-primary {
  color: var(--color-primary-contrast);
  background-color: var(--color-primary-main);
  border: none;
}
.btn-primary:hover, .btn-contained-primary:hover {
  background-color: var(--color-primary-hover);
}
/* Secondary Contained */
.btn-secondary, .btn-contained-secondary {
  color: var(--color-secondary-contrast);
  background-color: var(--color-secondary-main);
  border: none;
}
.btn-secondary:hover, .btn-contained-secondary:hover {
  background-color: var(--color-secondary-hover);
}
/* Success Contained */
.btn-success, .btn-contained-success {
  color: var(--color-success-contrast);
  background-color: var(--color-success-main);
  border: none;
}
.btn-success:hover, .btn-contained-success:hover {
  background-color: var(--color-success-hover);
}
/* Error/Danger Contained */
.btn-error, .btn-danger, .btn-contained-error {
  color: var(--color-error-contrast);
  background-color: var(--color-error-main);
  border: none;
}
.btn-error:hover, .btn-danger:hover, .btn-contained-error:hover {
  background-color: var(--color-error-hover);
}
/* Warning Contained */
.btn-warning, .btn-contained-warning {
  color: var(--color-warning-contrast);
  background-color: var(--color-warning-main);
  border: none;
}
.btn-warning:hover, .btn-contained-warning:hover {
  background-color: var(--color-warning-hover);
}
/* Info Contained */
.btn-info, .btn-contained-info {
  color: var(--color-info-contrast);
  background-color: var(--color-info-main);
  border: none;
}
.btn-info:hover, .btn-contained-info:hover {
  background-color: var(--color-info-hover);
}
/* Link Contained */
.btn-link, .btn-contained-link {
  color: var(--color-link-contrast);
  background-color: var(--color-link-main);
  border: none;
}
.btn-link:hover, .btn-contained-link:hover {
  background-color: var(--color-link-hover);
}
/* ===== OUTLINED BUTTONS ===== */
.btn-outline-primary {
  color: var(--color-primary-main);
  background-color: transparent;
  border: 1px solid var(--color-primary-main);
}
.btn-outline-primary:hover {
  background-color: var(--color-primary-outlined-hover-bg);
}
.btn-outline-secondary {
  color: var(--color-secondary-main);
  background-color: transparent;
  border: 1px solid var(--color-secondary-main);
}
.btn-outline-secondary:hover {
  background-color: var(--color-secondary-outlined-hover-bg);
}
.btn-outline-success {
  color: var(--color-success-main);
  background-color: transparent;
  border: 1px solid var(--color-success-main);
}
.btn-outline-success:hover {
  background-color: var(--color-success-outlined-hover-bg);
}
.btn-outline-error, .btn-outline-danger {
  color: var(--color-error-main);
  background-color: transparent;
  border: 1px solid var(--color-error-main);
}
.btn-outline-error:hover, .btn-outline-danger:hover {
  background-color: var(--color-error-outlined-hover-bg);
}
.btn-outline-warning {
  color: var(--color-warning-main);
  background-color: transparent;
  border: 1px solid var(--color-warning-main);
}
.btn-outline-warning:hover {
  background-color: var(--color-warning-outlined-hover-bg);
}
.btn-outline-info {
  color: var(--color-info-main);
  background-color: transparent;
  border: 1px solid var(--color-info-main);
}
.btn-outline-info:hover {
  background-color: var(--color-info-outlined-hover-bg);
}
.btn-outline-link {
  color: var(--color-link-main);
  background-color: transparent;
  border: 1px solid var(--color-link-main);
}
.btn-outline-link:hover {
  background-color: var(--color-link-outlined-hover-bg);
}
/* ===== TEXT BUTTONS ===== */
.btn-text-primary {
  color: var(--color-primary-main);
  background-color: transparent;
  border: none;
}
.btn-text-primary:hover {
  background-color: var(--color-primary-outlined-hover-bg);
}
.btn-text-secondary {
  color: var(--color-secondary-main);
  background-color: transparent;
  border: none;
}
.btn-text-secondary:hover {
  background-color: var(--color-secondary-outlined-hover-bg);
}
.btn-text-error, .btn-text-danger {
  color: var(--color-error-main);
  background-color: transparent;
  border: none;
}
.btn-text-error:hover, .btn-text-danger:hover {
  background-color: var(--color-error-outlined-hover-bg);
}
.btn-text-link {
  color: var(--color-link-main);
  background-color: transparent;
  border: none;
}
.btn-text-link:hover {
  background-color: var(--color-link-outlined-hover-bg);
}
/* ===== DISABLED STATE (all buttons) ===== */
.btn:disabled, .btn.disabled {
  color: var(--color-action-disabled);
  background-color: var(--color-action-disabled-bg);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}
/* Icon-only buttons/links rendered disabled for read-only (viewer) users */
.btn-icon-xs:disabled, .btn-icon-xs.disabled,
.btn-icon:disabled, .btn-icon.disabled {
  color: var(--color-action-disabled);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.45;
}
/* Outlined disabled */
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled,
.btn-outline-success:disabled,
.btn-outline-error:disabled,
.btn-outline-warning:disabled,
.btn-outline-info:disabled {
  background-color: transparent;
  border-color: var(--color-action-disabled-bg);
}
/* Text disabled */
.btn-text-primary:disabled,
.btn-text-secondary:disabled,
.btn-text-error:disabled {
  background-color: transparent;
}
/* ===== LOADING STATE ===== */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
/* ===== FULL WIDTH ===== */
.btn-block {
  width: 100%;
}
/* ===== ICON BUTTON UTILITIES ===== */
/* Use these for buttons with icons - they work correctly in both LTR and RTL */
/* Icon at start of reading direction (left in LTR, right in RTL) */
.btn-icon-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Icon at end of reading direction (right in LTR, left in RTL) */
/* Use for "Next →" style buttons */
.btn-icon-end {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
/* Icon-only button (no text) */
.btn-icon-only {
  padding: 0;
  width: 42px;
  justify-content: center;
}
.btn-icon-only.btn-lg { width: 42px; }
.btn-icon-only.btn-md { width: 38px; }
.btn-icon-only.btn-sm { width: 30px; }
/* Button icon sizing */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-icon svg {
  width: 18px;
  height: 18px;
}
.btn-sm .btn-icon svg {
  width: 14px;
  height: 14px;
}
.btn-lg .btn-icon svg {
  width: 20px;
  height: 20px;
}
/* Button text */
.btn-text {
  flex: 0 0 auto;
}
/* Uppercase button text */
.btn-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.46px;
}
/* QR size preset buttons */
.qr-size-group {
  display: flex;
  gap: var(--spacing-2, 8px);
  align-items: center;
}
.qr-size-btn {
  min-width: 48px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-paper);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.qr-size-btn:hover {
  border-color: var(--color-primary-main);
  color: var(--color-primary-main);
}
.qr-size-btn.active {
  background-color: var(--color-primary-main);
  border-color: var(--color-primary-main);
  color: #fff;
}
/* ========== UPLOAD ZONE ========== */
/* Centered file upload container with dropzone, meta row */
.upload-zone {
  width: 100%;
  max-width: 502px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
}
.upload-label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.5;
  letter-spacing: 0.15px;
  margin: 0;
}
/* Dashed drop area */
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-lg, 24px);
  border: 1px dashed var(--color-outline-border);
  border-radius: var(--radius-mlg, 10px);
  text-align: center;
  gap: 8px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}
.upload-dropzone.dragover {
  border-color: var(--color-primary-main);
  background-color: var(--color-action-hover);
}
.upload-icon {
  color: var(--color-text-secondary);
}
.upload-text {
  font-size: 16px;
  color: var(--color-text-primary);
  margin: 0;
}
/* OR divider inside dropzone */
.upload-or {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.upload-or-line {
  flex: 1;
  height: 1px;
  background-color: var(--color-divider);
}
.upload-or-text {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Browse files button */
.upload-browse {
  text-transform: uppercase;
}
/* Meta row: hint + action link */
.upload-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
}
/* Template download / action link inside upload zone */
.upload-template-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-link-main);
  text-decoration: none;
}
.upload-template-link:hover {
  text-decoration: underline;
}
.upload-template-link svg {
  width: 18px;
  height: 18px;
}
/* Disabled dropzone (shown during uploading/complete states) */
.upload-dropzone--disabled {
  opacity: 0.45;
  pointer-events: none;
  background-color: var(--color-bg-chip, #f5f5f5);
}
.upload-dropzone--disabled .btn {
  pointer-events: none;
}
/* ---- Uploading progress card ---- */
.upload-progress-card {
  width: 100%;
  max-width: 502px;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-paper);
  margin-top: 8px;
}
.upload-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-progress-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}
.upload-progress-detail {
  font-size: 12px;
  color: var(--color-link-main, #1976D2);
  font-weight: var(--font-weight-medium, 500);
}
.upload-progress-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.upload-progress-action {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-action-active);
  transition: opacity 0.15s ease;
  opacity: 0.7;
}
.upload-progress-action:hover {
  opacity: 1;
}
.upload-progress-bar-track {
  width: 100%;
  height: 4px;
  background: var(--color-bg-chip, #e0e0e0);
  border-radius: 2px;
  overflow: hidden;
}
.upload-progress-bar-fill {
  height: 100%;
  background: var(--color-link-main, #1976D2);
  border-radius: 2px;
  transition: width 0.15s ease;
}
/* ---- Complete file card ---- */
.upload-file-card {
  width: 100%;
  max-width: 502px;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-paper);
  margin-top: 8px;
}
.upload-file-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-file-icon img {
  display: block;
}
.upload-file-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-file-name {
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-file-size {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.upload-file-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-action-active);
  transition: opacity 0.15s ease;
  opacity: 0.7;
}
.upload-file-remove:hover {
  opacity: 1;
}
/* Input row with separator character (e.g., = sign between fields) */
.input-row-separated {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.input-row-separator {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 24px;
  font-weight: var(--font-weight-medium);
}
/* Circle add-row button */
.btn-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-inline-start: 20px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1px;
}
.btn-add-row:hover {
  color: var(--color-text-primary);
}
.btn-add-row-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-success-custom-bg);
  border-radius: 50%;
  color: var(--color-success-main);
}
.btn-add-row-icon svg {
  width: 20px;
  height: 20px;
}
/* Form layout helpers */
.form-section {
  margin-bottom: var(--spacing-5, 20px);
  padding-bottom: var(--spacing-4, 16px);
  border-bottom: 1px solid var(--color-divider);
}
.form-section:last-child {
  border-bottom: none;
}
.form-section h4 {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3, 12px);
}
.form-row {
  display: flex;
  gap: var(--spacing-3, 12px);
}
.form-row .form-group {
  flex: 1;
}
.form-actions {
  display: flex;
  gap: var(--spacing-2, 8px);
  padding-top: var(--spacing-4, 16px);
}
.tab-panel {
  padding: var(--spacing-4, 16px);
}
/* Destination row */
.destination-row {
  padding: var(--spacing-2, 8px) 0;
  border-bottom: 1px solid var(--color-divider);
}
.destination-row:last-child {
  border-bottom: none;
}
/* Dashboard stats row */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-3, 12px);
  margin-bottom: var(--spacing-4, 16px);
}
/* Error page */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.error-page-content h1 {
  font-size: 72px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-disabled);
  margin-bottom: var(--spacing-2, 8px);
}
.error-page-content h2 {
  font-size: 24px;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3, 12px);
}
.error-page-content p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-4, 16px);
}
/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Bare icon button — no background, border, or padding. Inherits color from parent. */
.btn-icon-bare {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
/* ========== FORM INPUTS ========== */
.form-input {
  width: 100%;
  padding: 15px 11px 15px 16px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  color: var(--color-text-primary);
  background-color: transparent;
  border: 1px solid var(--color-outline-border);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.form-input::-moz-placeholder {
  color: var(--color-text-disabled);
}
.form-input::placeholder {
  color: var(--color-text-disabled);
}
.form-input:hover {
  border-color: var(--color-outline-border);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 3px var(--color-primary-outlined-hover-bg);
}
.form-input:disabled {
  background-color: var(--color-action-disabled-bg);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.form-input.error {
  border-color: var(--color-error-main);
}
.form-input.error:focus {
  box-shadow: 0 0 0 3px var(--color-error-outlined-hover-bg);
}
/* Form Label */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
/* Form Helper Text */
.form-helper {
  margin: 0 14px;
  margin-top: 4px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 1.667;
  color: var(--color-text-secondary);
  letter-spacing: 0.4px;
}
.form-helper.error {
  color: var(--color-error-main);
}
/* Form Group */
.form-group {
  flex-grow: 1;
  min-width: 0;
}
/* Remove bottom margin inside section blocks (Figma: gap handles spacing) */
.section-block .form-group {
  margin-bottom: 0;
}
/* Two-column input row (equal width, 20px gap) */
.input-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
/* Ensure all direct children in input-row get equal width */
.input-row > * {
  flex: 1 1 0;
  min-width: 0;
}
/* Wrapping 2-column grid for device-type inputs */
.input-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .input-row,
  .input-row-2col {
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* Form Select */
.form-select {
  width: 100%;
  padding: 15px 40px 15px 16px;
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-paper);
  border: 1px solid var(--color-outline-border);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  box-sizing: border-box;
  color-scheme: light dark;
}
/* Dark mode: use light arrow SVG and dark color scheme for native dropdowns */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' fill-opacity='0.54' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  color-scheme: dark;
}
/* Dark mode: native dropdowns and inputs respect dark theme */
[data-theme="dark"] .form-input {
  color-scheme: dark;
}
html[dir="rtl"] .form-select {
  padding: 15px 16px 15px 40px;
  background-position: left 14px center;
}
html[dir="rtl"] .form-input {
  text-align: right;
  direction: rtl;
  padding: 15px 16px 15px 11px;
}
/* URL/email inputs stay LTR (URLs are always English) but
   right-align the placeholder text in RTL layouts. */
html[dir="rtl"] .form-input[type="url"],
html[dir="rtl"] .form-input[type="email"] {
  direction: ltr;
  text-align: right;
}
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 3px var(--color-primary-outlined-hover-bg);
}
/* Checkbox & Radio (legacy) */
.form-checkbox,
.form-radio,
.feature-include-check {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary-main);
  cursor: pointer;
}
/* ========== CHECKBOX COMPONENT ========== */
/* Wrapper */
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* Touch target — invisible hit area around the box */
.form-check__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border: 2px solid var(--color-outline-border);
  border-radius: 4px;
  background-color: var(--color-bg-paper);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
/* Sizes — touch target / box */
.form-check--sm .form-check__input {
  width: 20px;
  height: 20px;
  padding: 9px;  /* (38 - 20) / 2 for touch target */
  margin: -9px;
  clip-path: none;
}
.form-check--md .form-check__input {
  width: 24px;
  height: 24px;
  padding: 9px;  /* (42 - 24) / 2 */
  margin: -9px;
}
.form-check--lg .form-check__input {
  width: 28px;
  height: 28px;
  padding: 9px;  /* (46 - 28) / 2 */
  margin: -9px;
}
/* Touch target via transparent outline for accessibility hit area */
.form-check--sm .form-check__input { outline: 9px solid transparent; }
.form-check--md .form-check__input { outline: 9px solid transparent; }
.form-check--lg .form-check__input { outline: 9px solid transparent; }
/* Hover — subtle background circle */
.form-check__input:hover {
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 8px var(--color-action-hover);
}
/* Checkmark via ::after */
.form-check__input::after {
  content: '';
  display: block;
  position: absolute;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* Checkmark positioning per size */
.form-check--sm .form-check__input::after {
  width: 5px;
  height: 10px;
  top: 3px;
  inset-inline-start: 6px;
}
.form-check--md .form-check__input::after {
  width: 6px;
  height: 12px;
  top: 3px;
  inset-inline-start: 7px;
}
.form-check--lg .form-check__input::after {
  width: 7px;
  height: 14px;
  top: 4px;
  inset-inline-start: 8px;
}
/* Checked state — default (primary) */
.form-check__input:checked {
  background-color: var(--color-primary-main);
  border-color: var(--color-primary-main);
}
.form-check__input:checked::after {
  opacity: 1;
}
.form-check__input:checked:hover {
  box-shadow: 0 0 0 8px var(--color-primary-outlined-hover-bg);
}
/* Color variants — checked bg + border + hover ring */
.form-check--secondary .form-check__input:checked {
  background-color: var(--color-secondary-main);
  border-color: var(--color-secondary-main);
}
.form-check--secondary .form-check__input:hover { border-color: var(--color-secondary-main); }
.form-check--secondary .form-check__input:checked:hover { box-shadow: 0 0 0 8px var(--color-secondary-custom-bg); }
.form-check--error .form-check__input:checked {
  background-color: var(--color-error-main);
  border-color: var(--color-error-main);
}
.form-check--error .form-check__input:hover { border-color: var(--color-error-main); }
.form-check--error .form-check__input:checked:hover { box-shadow: 0 0 0 8px var(--color-error-outlined-hover-bg); }
.form-check--warning .form-check__input:checked {
  background-color: var(--color-warning-main);
  border-color: var(--color-warning-main);
}
.form-check--warning .form-check__input:hover { border-color: var(--color-warning-main); }
.form-check--warning .form-check__input:checked:hover { box-shadow: 0 0 0 8px var(--color-warning-outlined-hover-bg); }
.form-check--info .form-check__input:checked {
  background-color: var(--color-info-main);
  border-color: var(--color-info-main);
}
.form-check--info .form-check__input:hover { border-color: var(--color-info-main); }
.form-check--info .form-check__input:checked:hover { box-shadow: 0 0 0 8px var(--color-info-outlined-hover-bg); }
.form-check--success .form-check__input:checked {
  background-color: var(--color-success-main);
  border-color: var(--color-success-main);
}
.form-check--success .form-check__input:hover { border-color: var(--color-success-main); }
.form-check--success .form-check__input:checked:hover { box-shadow: 0 0 0 8px var(--color-success-outlined-hover-bg); }
/* Disabled state */
.form-check__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-check__input:disabled:hover {
  box-shadow: none;
  border-color: var(--color-outline-border);
}
.form-check__input:disabled + .form-check__label {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Label */
.form-check__label {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1.4;
}
/* ========== AUTO-FIT FORM GRID ========== */
.form-grid-auto {
  display: grid;
  gap: var(--spacing-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* ========== CARDS ========== */
.card {
  background-color: var(--color-bg-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-container);
}
.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-divider);
}
.card-header-title {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}
.card-body {
  padding: 24px;
}
.card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-divider);
}
/* Card close button */
.btn-close-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
}
.btn-close-card:hover {
  color: var(--color-text-primary);
  background-color: var(--color-action-hover);
}
/* Card toolbar — used above data tables inside cards */
.card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}
/* Card Variants */
.card-flat {
  box-shadow: none;
}
.card-elevated {
  box-shadow: var(--shadow-lg);
}
/* ========== STAT CARD ========== */
.stat-card {
  background-color: var(--color-bg-paper);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-divider);
  transition: box-shadow 0.2s ease;
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
}
/* Stat card variants */
.stat-card-success {
  border-color: var(--color-success-main);
  background-color: var(--color-success-custom-bg);
}
.stat-card-warning {
  border-color: var(--color-warning-main);
  background-color: var(--color-warning-custom-bg);
}
.stat-card-error {
  border-color: var(--color-error-main);
  background-color: var(--color-error-custom-bg);
}
/* Stat card icon */
.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}
.stat-card-icon-blue { background-color: var(--color-primary-main); }
.stat-card-icon-green { background-color: var(--color-success-main); }
.stat-card-icon-purple { background-color: var(--color-purple-main); }
.stat-card-icon-orange { background-color: var(--color-warning-main); }
.stat-card-icon-red { background-color: var(--color-error-main); }
.stat-card-icon-teal { background-color: var(--color-teal-main); }
.stat-card-icon-pink { background-color: var(--color-pink-main); }
.stat-card-icon-indigo { background-color: var(--color-indigo-main); }
/* Stat card content */
.stat-card-content {
  flex: 1;
  min-width: 0;
}
.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.stat-card-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}
.stat-card-period {
  font-size: 12px;
  color: var(--color-text-disabled);
  margin: 0;
}
.stat-card-value {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 4px 0 0 0;
  line-height: 1.2;
}
/* Text-based stat values (URLs, names) — uses body2 sizing */
.stat-card-value.stat-card-value-text {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.43;
  word-break: break-all;
}
.stat-card-sparkline {
  margin-top: 8px;
  height: 32px;
}
/* Stat card sub-metrics row */
.stat-card-sub-metrics {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.stat-card-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-card-sub-value {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-card-sub-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.stat-card-subtext {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.stat-card-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-divider);
}
.stat-card-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-card-breakdown-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.stat-card-breakdown-value {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}
/* ========== DASHBOARD WIDGET ========== */
.dashboard-widget {
  background-color: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dashboard-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
  gap: 8px;
}
.dashboard-widget-title {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}
.dashboard-widget-subtitle {
  font-size: 12px;
  color: var(--color-text-disabled);
  margin: 2px 0 0 0;
}
.dashboard-widget-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dashboard-widget-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider);
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}
.dashboard-widget-toggle:hover {
  background-color: var(--color-action-hover);
}
.dashboard-widget-toggle.active {
  background-color: var(--color-bg-extra);
  color: var(--color-text-primary);
  border-color: var(--color-outline-border);
}
.dashboard-widget-toggle svg {
  width: 16px;
  height: 16px;
}
.dashboard-widget-body {
  padding: 24px;
}
/* Dashboard widget empty state */
.dashboard-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.dashboard-widget-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: var(--color-text-disabled);
}
.dashboard-widget-empty-icon svg {
  width: 48px;
  height: 48px;
}
.dashboard-widget-empty-title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}
.dashboard-widget-empty-message {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}
/* Success state card ("All set!") */
.success-card {
  text-align: center;
  padding: var(--spacing-6, 24px) var(--spacing-4, 16px);
}
.success-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-success-light, rgba(76, 175, 80, 0.1));
  color: var(--color-success-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3, 12px);
}
.success-card-icon svg {
  width: 32px;
  height: 32px;
}
.success-card-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2, 8px);
}
.success-card-url {
  font-size: 16px;
  font-family: var(--font-family-mono, monospace);
  color: var(--color-link);
  margin-bottom: var(--spacing-4, 16px);
  word-break: break-all;
}
.success-card-actions {
  display: flex;
  gap: var(--spacing-2, 8px);
  justify-content: center;
  flex-wrap: wrap;
}
/* Link create/edit success view ("All set!") — Figma 2172:39148 / 2172:41169.
   Rendered inside the shared card body, so it inherits the white card box. */
.link-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.link-success-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.link-success-title {
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}
.link-success-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  letter-spacing: 0.15px;
  margin: 0;
  max-width: 600px;
}
.link-success-panel {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.link-success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.link-success-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: start;
}
.link-success-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
.link-success-thumb-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-bg-chip);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.link-success-thumb-placeholder svg {
  width: 18px;
  height: 18px;
}
.link-success-text {
  min-width: 0;
}
.link-success-name {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.57;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-success-short {
  font-size: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 0.4px;
  line-height: 1.66;
}
.link-success-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.link-success-actions .btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.link-success-url,
.link-success-utm {
  font-size: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 0.4px;
  line-height: 1.66;
  text-align: start;
  word-break: break-all;
  margin: 0;
}
.link-success-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
/* Link detail grid */
.link-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4, 16px);
}
@media (max-width: 768px) {
  .link-detail-grid {
    grid-template-columns: 1fr;
  }
}
.link-detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-2, 8px) 0;
  border-bottom: 1px solid var(--color-divider);
}
.link-detail-row .label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}
.link-detail-row .value {
  font-size: 14px;
  color: var(--color-text-primary);
}
/* Domain detail grid — two-column layout (sidebar 33% + main 67%) */
.domain-detail-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 768px) {
  .domain-detail-grid {
    grid-template-columns: 1fr;
  }
}
/* OG preview */
.og-preview-image {
  width: 100%;
  max-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  margin-bottom: var(--spacing-3, 12px);
}
/* ========== CARD TABBED LAYOUT ========== */
/* Two-column layout: sidebar tabs on one side, content on the other */
.card-tabbed-layout {
  display: flex;
  align-items: stretch;
}
.card-tabbed-sidebar {
  flex-shrink: 0;
  width: 131px;
  border-inline-end: 1px solid var(--color-divider);
}
.card-tabbed-sidebar .vertical-icon-tabs {
  border-inline-end: none;
}
.card-tabbed-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-paper);
}
/* ========== SECTION BLOCK ========== */
/* Padded content section with vertical gap between children */
.section-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
/* Title + description group (6px gap) */
.section-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.section-title {
  color: var(--color-text-secondary);
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: 1.333;
  letter-spacing: 0;
  margin: 0;
}
.section-desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.15px;
  margin: 0;
}
/* Action buttons row (space-between, padded) */
.section-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
}
.section-actions .btn {
  text-transform: uppercase;
}
/* ========== ALERTS ========== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 14px;
}
.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.alert-content {
  flex: 1;
}
.alert-title {
  font-weight: var(--font-weight-medium);
  margin-bottom: 4px;
}
.alert-success {
  background-color: var(--color-success-custom-bg);
  color: var(--color-success-main);
  border: 1px solid var(--color-success-main);
}
.alert-error {
  background-color: var(--color-error-custom-bg);
  color: var(--color-error-main);
  border: 1px solid var(--color-error-main);
}
.alert-warning {
  background-color: var(--color-warning-custom-bg);
  color: var(--color-warning-main);
  border: 1px solid var(--color-warning-main);
}
.alert-info {
  background-color: var(--color-info-custom-bg);
  color: var(--color-info-main);
  border: 1px solid var(--color-info-main);
}
/* Alert with left border */
.alert-border-left {
  border-left-width: 4px;
}
/* ========== BADGES ========== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14px;
  border-radius: var(--radius-full);
}
.badge-primary {
  background-color: var(--color-primary-custom-bg);
  color: var(--color-primary-main);
}
.badge-secondary {
  background-color: var(--color-secondary-custom-bg);
  color: var(--color-secondary-main);
}
.badge-success {
  background-color: var(--color-success-custom-bg);
  color: var(--color-success-main);
}
.badge-error {
  background-color: var(--color-error-custom-bg);
  color: var(--color-error-main);
}
.badge-warning {
  background-color: var(--color-warning-custom-bg);
  color: var(--color-warning-main);
}
.badge-info {
  background-color: var(--color-info-custom-bg);
  color: var(--color-info-main);
}
/* Solid Badge Variants */
.badge-solid-primary {
  background-color: var(--color-primary-main);
  color: var(--color-primary-contrast);
}
.badge-solid-secondary {
  background-color: var(--color-secondary-main);
  color: var(--color-secondary-contrast);
}
.badge-solid-success {
  background-color: var(--color-success-main);
  color: var(--color-success-contrast);
}
.badge-solid-error {
  background-color: var(--color-error-main);
  color: var(--color-error-contrast);
}
.badge-solid-warning {
  background-color: var(--color-warning-main);
  color: var(--color-warning-contrast, #fff);
}
.badge-solid-info {
  background-color: var(--color-info-main);
  color: var(--color-info-contrast, #fff);
}
.badge-sm {
  padding: 2px 8px;
  font-size: 11px;
}
.badge-default {
  background-color: var(--color-bg-chip, rgba(58,53,65,0.08));
  color: var(--color-text-secondary);
}
/* ========== CHIPS ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.16px;
  border-radius: var(--radius-full);
  line-height: 1;
}
/* Filled (default) */
.chip-filled {
  background-color: var(--color-bg-chip);
  color: var(--color-text-primary);
}
/* Outlined */
.chip-outlined {
  background-color: transparent;
  border: 1px solid var(--color-divider, rgba(58,53,65,0.12));
  color: var(--color-text-primary);
}
/* Color variants — filled */
.chip-filled.chip-primary { background-color: var(--color-primary-custom-bg); color: var(--color-primary-main); }
.chip-filled.chip-secondary { background-color: var(--color-secondary-custom-bg); color: var(--color-secondary-main); }
.chip-filled.chip-success { background-color: var(--color-success-custom-bg); color: var(--color-success-main); }
.chip-filled.chip-error { background-color: var(--color-error-custom-bg); color: var(--color-error-main); }
.chip-filled.chip-warning { background-color: var(--color-warning-custom-bg); color: var(--color-warning-main); }
.chip-filled.chip-info { background-color: var(--color-info-custom-bg); color: var(--color-info-main); }
/* Color variants — outlined */
.chip-outlined.chip-primary { border-color: var(--color-primary-main); color: var(--color-primary-main); }
.chip-outlined.chip-secondary { border-color: var(--color-secondary-main); color: var(--color-secondary-main); }
.chip-outlined.chip-success { border-color: var(--color-success-main); color: var(--color-success-main); }
.chip-outlined.chip-error { border-color: var(--color-error-main); color: var(--color-error-main); }
.chip-outlined.chip-warning { border-color: var(--color-warning-main); color: var(--color-warning-main); }
.chip-outlined.chip-info { border-color: var(--color-info-main); color: var(--color-info-main); }
/* Sizes */
.chip-sm {
  padding: 2px 8px;
  font-size: 12px;
  gap: 4px;
}
/* Thumbnail */
.chip-thumbnail {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.chip-sm .chip-thumbnail {
  width: 18px;
  height: 18px;
}
/* Delete button */
.chip-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.chip-delete:hover { opacity: 1; }
.chip-sm .chip-delete { width: 14px; height: 14px; }
/* ========== TREND BADGE ========== */
.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.trend-badge-sm { font-size: 12px; }
.trend-badge-md { font-size: 13px; }
.trend-badge-lg { font-size: 14px; }
.trend-up {
  color: var(--color-success-main);
}
.trend-down {
  color: var(--color-error-main);
}
.trend-neutral {
  color: var(--color-text-disabled);
}
.trend-badge svg {
  width: 14px;
  height: 14px;
}
.trend-badge-sm svg {
  width: 12px;
  height: 12px;
}
/* ========== SWITCH ========== */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--color-text-disabled);
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}
.switch-knob {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: inset-inline-start 0.25s ease;
}
.switch-input:checked ~ .switch-track .switch-knob {
  inset-inline-start: 22px;
}
.switch-label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}
/* Color variants (checked state) */
.switch-primary .switch-input:checked ~ .switch-track { background-color: var(--color-primary-main); }
.switch-secondary .switch-input:checked ~ .switch-track { background-color: var(--color-secondary-main); }
.switch-error .switch-input:checked ~ .switch-track { background-color: var(--color-error-main); }
.switch-warning .switch-input:checked ~ .switch-track { background-color: var(--color-warning-main); }
.switch-info .switch-input:checked ~ .switch-track { background-color: var(--color-info-main); }
.switch-success .switch-input:checked ~ .switch-track { background-color: var(--color-success-main); }
/* Small size */
.switch-sm .switch-track { width: 34px; height: 18px; border-radius: 9px; }
.switch-sm .switch-knob { width: 14px; height: 14px; }
.switch-sm .switch-input:checked ~ .switch-track .switch-knob { inset-inline-start: 18px; }
.switch-sm .switch-label { font-size: 13px; }
/* Disabled state */
.switch-disabled { cursor: not-allowed; opacity: 0.5; }
.switch-disabled .switch-input { pointer-events: none; }
/* Hover */
.switch:not(.switch-disabled):hover .switch-track {
  filter: brightness(1.1);
}
/* Dark mode */
[data-theme="dark"] .switch-knob { background: #e0e0e0; }
[data-theme="dark"] .switch-track { background-color: rgba(255,255,255,0.2); }
/* ========== SWITCH SECTION ========== */
.switch-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}
.switch-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-start: 9px;
}
.switch-section-header .switch-label {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
}
.switch-section-description {
  font-size: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 0.4px;
  line-height: 1.167;
  margin: 0;
}
.switch-section-description a {
  color: var(--color-link-main);
}
/* ========== PLATFORM ICON ========== */
.platform-icon {
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
}
/* ========== OG IMAGE PLACEHOLDER ========== */
.og-placeholder {
  width: 40px;
  height: 40px;
}
.og-placeholder-lg {
  width: 48px;
  height: 48px;
}
/* ========== ERROR PAGE ========== */
.error-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
/* ========== CLIPBOARD SUCCESS STATE ========== */
.clipboard-icon { display: inline-flex; }
.clipboard-success { display: none; }
.clipboard-copied .clipboard-icon { display: none; }
.clipboard-copied .clipboard-success { display: inline-flex; }
.clipboard-copied { color: var(--color-primary-main); }
/* ========== QR THUMBNAIL ========== */
.qr-thumbnail {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm, 4px);
}
/* ========== LINKS ========== */
.link {
  color: var(--color-link-main);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
/* ========== DIVIDERS ========== */
.divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 16px 0;
}
.divider-vertical {
  border: none;
  border-left: 1px solid var(--color-divider);
  height: 100%;
  margin: 0 16px;
}
/* ========== DROPDOWN MENU ========== */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  z-index: 1000;
  min-width: 160px;
  padding: 6px 0;
  background-color: var(--color-bg-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
}
.dropdown-menu.show {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: start;
}
.dropdown-item:hover {
  background-color: var(--color-action-hover);
  text-decoration: none;
}
.dropdown-item.text-danger {
  color: var(--color-error-main);
}
.dropdown-item-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dropdown-item-icon svg {
  width: 18px;
  height: 18px;
}
.dropdown-divider {
  height: 0;
  margin: 4px 0;
  border-top: 1px solid var(--color-divider);
}
/* button_to forms inside dropdown should be inline */
.dropdown-menu form {
  display: contents;
}
/* ========== TABLES ========== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family);
}
.table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.17px;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-page-header);
  border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-divider);
}
.table tr:hover {
  background-color: var(--color-action-hover);
}
.table td a {
  color: inherit;
  text-decoration: none;
}
.table td a:visited {
  color: inherit;
}
.table td a:hover {
  text-decoration: underline;
}
/* Link cell — composite cell with favicon + name + short URL + destination */
.link-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.link-cell-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: 14px;
}
.link-cell-url {
  font-size: 13px;
  color: var(--color-link);
  font-family: var(--font-family-mono, monospace);
}
.link-cell-destination {
  font-size: 12px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}
.actions-cell {
  display: flex;
  gap: 4px;
  align-items: center;
}
/* ========== TOOLTIPS ========== */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip-content {
  position: absolute;
  z-index: 1000;
  padding: 6px 10px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-contrast);
  background-color: var(--color-secondary-main);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}
/* ========== LOADING SPINNER ========== */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-divider);
  border-top-color: var(--color-primary-main);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 4px; }
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}
/* ========== EMPTY STATE ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: var(--color-text-disabled);
}
.empty-state-icon svg {
  width: 100%;
  height: 100%;
}
.empty-state-title {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.empty-state-description {
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 320px;
}
/* ========== GRID SYSTEM ========== */
.grid {
  display: grid;
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
/* Dashboard grid layouts */
.dashboard-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.dashboard-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.dashboard-grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}
@media (max-width: 1024px) {
  .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4,
  .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(1, 1fr); }
  .dashboard-grid-2, .dashboard-grid-2-1, .dashboard-grid-1-2 {
    grid-template-columns: 1fr;
  }
}
/* ========== PAGE LAYOUT UTILITIES ========== */
.show-page-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}
.content-narrow {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* ========== STATS GRID ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
}
/* ========== HORIZONTAL BAR LIST ========== */
.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hbar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hbar-index {
  font-size: 12px;
  color: var(--color-text-disabled);
  min-width: 20px;
  text-align: end;
}
.hbar-flag,
.hbar-icon {
  flex-shrink: 0;
  font-size: 16px;
  width: 22px;
  text-align: center;
}
.hbar-label {
  font-size: 14px;
  color: var(--color-text-primary);
  min-width: 140px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar-track {
  flex: 1;
  height: 24px;
  background-color: var(--color-bg-extra);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 80px;
}
.hbar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-main);
  transition: width 0.3s ease;
  min-width: 2px;
}
.hbar-value {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 80px;
  text-align: end;
  white-space: nowrap;
}
/* ========== METRIC STRIP ========== */
.metric-strip {
  display: flex;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-paper);
  overflow: hidden;
  margin-bottom: 24px;
}
.metric-strip-item {
  flex: 1;
  padding: 16px 20px;
  border-inline-end: 1px solid var(--color-divider);
  min-width: 0;
}
.metric-strip-item:last-child {
  border-inline-end: none;
}
.metric-strip-label {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-strip-period {
  font-size: 11px;
  color: var(--color-text-disabled);
  margin: 0 0 8px 0;
}
.metric-strip-value {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}
.metric-strip-comparison {
  font-size: 11px;
  color: var(--color-text-disabled);
  margin: 4px 0 0 0;
}
@media (max-width: 768px) {
  .metric-strip {
    flex-wrap: wrap;
  }
  .metric-strip-item {
    flex: 0 0 50%;
    border-bottom: 1px solid var(--color-divider);
  }
}
/* ========== DETAIL LIST ========== */
.detail-list {
  display: flex;
  flex-direction: column;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  gap: 16px;
}
.detail-row:last-child {
  border-bottom: none;
}
.detail-label {
  font-size: 14px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.detail-value {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: end;
  min-width: 0;
  word-break: break-word;
}
/* 2-column detail grid — compact key-value layout */
.detail-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
}
.detail-grid-2col .detail-row {
  padding: 10px 0;
}
@media (max-width: 768px) {
  .detail-grid-2col {
    grid-template-columns: 1fr;
  }
}
/* ========== PROGRESS BAR ========== */
.progress-bar-track {
  width: 100%;
  height: 8px;
  background-color: var(--color-bg-extra);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-main);
  transition: width 0.3s ease;
}
.progress-bar-success .progress-bar-fill,
.progress-bar-fill.progress-bar-success {
  background-color: var(--color-success-main);
}
.progress-bar-warning .progress-bar-fill,
.progress-bar-fill.progress-bar-warning {
  background-color: var(--color-warning-main);
}
.progress-bar-error .progress-bar-fill,
.progress-bar-fill.progress-bar-error {
  background-color: var(--color-error-main);
}
/* ========== MULTI-RING CHART ========== */
.multi-ring-chart {
  display: flex;
  align-items: center;
  gap: 24px;
}
.multi-ring-canvas {
  flex-shrink: 0;
}
.multi-ring-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.multi-ring-legend-title {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.multi-ring-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.multi-ring-legend-color {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.multi-ring-legend-label {
  color: var(--color-text-secondary);
  flex: 1;
}
.multi-ring-legend-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
/* ========== GAUGE CHART ========== */
.gauge-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gauge-svg {
  width: 100%;
}
.gauge-center {
  position: absolute;
  bottom: 12px;
  text-align: center;
}
.gauge-number {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.gauge-label {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.gauge-value-arc {
  transition: stroke-dashoffset 0.6s ease;
}
/* ========== STAT WITH CHART ========== */
.stat-with-chart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.swc-text {
  flex: 1;
  min-width: 0;
}
.swc-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 4px 0;
}
.swc-value {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}
.swc-chart {
  flex-shrink: 0;
  width: 100px;
  height: 64px;
}
/* ========== HEATMAP CHART ========== */
.heatmap-container {
  overflow-x: auto;
}
.heatmap-grid {
  display: grid;
  gap: 2px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.heatmap-corner {
  /* Empty top-left corner cell */
}
.heatmap-x-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  padding: 0 2px 6px;
  white-space: nowrap;
}
.heatmap-y-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: right;
  padding-right: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
.heatmap-cell {
  aspect-ratio: 1;
  min-width: 24px;
  min-height: 24px;
  border-radius: var(--radius-xs, 3px);
  background-color: var(--color-bg-extra);
  cursor: default;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.heatmap-cell:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--color-primary-main);
  z-index: 1;
  position: relative;
}
/* RTL support */
[dir="rtl"] .heatmap-grid {
  direction: rtl;
}
[dir="rtl"] .heatmap-y-label {
  text-align: left;
  padding-right: 0;
  padding-left: 8px;
  justify-content: flex-start;
}
/* Mobile: make cells smaller */
@media (max-width: 768px) {
  .heatmap-cell {
    min-width: 16px;
    min-height: 16px;
  }
  .heatmap-x-label,
  .heatmap-y-label {
    font-size: 9px;
  }
}
/* ========== GRIDSTACK OVERRIDES ========== */
.grid-stack {
  min-height: 200px;
}
.grid-stack-item-content {
  background: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.grid-stack-item-content .widget-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
}
.grid-stack > .grid-stack-item > .ui-resizable-se {
  background: none;
}
.grid-stack > .grid-stack-item > .ui-resizable-se::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-text-disabled);
  border-bottom: 2px solid var(--color-text-disabled);
  border-radius: 0 0 2px 0;
}
.grid-stack-item-content .dashboard-widget {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.grid-stack-item-content .dashboard-widget-body {
  flex: 1;
  min-height: 0;
}
.grid-stack-item-content .stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}
.grid-stack-placeholder > .placeholder-content {
  background: var(--color-primary-surface);
  border: 2px dashed var(--color-primary-main);
  border-radius: var(--radius-lg);
}
/* ========== RTL GRIDSTACK OVERRIDES ========== */
[dir="rtl"] .grid-stack > .grid-stack-item > .ui-resizable-se::after {
  right: auto;
  left: 4px;
  border-right: none;
  border-bottom: 2px solid var(--color-text-disabled);
  border-left: 2px solid var(--color-text-disabled);
  border-radius: 0 0 0 2px;
}
[dir="rtl"] .analytics-layout {
  flex-direction: row-reverse;
}
[dir="rtl"] .widget-palette {
  border-inline-end: 1px solid var(--color-divider);
  border-inline-start: none;
}
/* ========== CHART PALETTE (auto-assign colors by index) ========== */
/* Matches ChartConfig.tokens — single source of truth for chart colors.
   Two modes:
   1. Direct siblings (mini-bars): .chart-palette-bg elements are siblings
   2. Nested (dots in list items): .chart-palette-bg is inside a wrapper item
   Explicit item[:color] overrides via inline style take precedence. */
/* Direct sibling mode — palette elements are siblings (e.g., breakdown mini-bars) */
.chart-palette-bg:nth-child(9n+1) { background-color: var(--color-primary-main); }
.chart-palette-bg:nth-child(9n+2) { background-color: var(--color-info-main); }
.chart-palette-bg:nth-child(9n+3) { background-color: var(--color-purple-main); }
.chart-palette-bg:nth-child(9n+4) { background-color: var(--color-warning-main); }
.chart-palette-bg:nth-child(9n+5) { background-color: var(--color-error-main); }
.chart-palette-bg:nth-child(9n+6) { background-color: var(--color-teal-main); }
.chart-palette-bg:nth-child(9n+7) { background-color: var(--color-pink-main); }
.chart-palette-bg:nth-child(9n+8) { background-color: var(--color-indigo-main); }
.chart-palette-bg:nth-child(9n+9) { background-color: var(--color-success-main); }
/* Nested mode — palette element is inside a .chart-palette-item wrapper */
.chart-palette-item:nth-child(9n+1) > .chart-palette-bg { background-color: var(--color-primary-main); }
.chart-palette-item:nth-child(9n+2) > .chart-palette-bg { background-color: var(--color-info-main); }
.chart-palette-item:nth-child(9n+3) > .chart-palette-bg { background-color: var(--color-purple-main); }
.chart-palette-item:nth-child(9n+4) > .chart-palette-bg { background-color: var(--color-warning-main); }
.chart-palette-item:nth-child(9n+5) > .chart-palette-bg { background-color: var(--color-error-main); }
.chart-palette-item:nth-child(9n+6) > .chart-palette-bg { background-color: var(--color-teal-main); }
.chart-palette-item:nth-child(9n+7) > .chart-palette-bg { background-color: var(--color-pink-main); }
.chart-palette-item:nth-child(9n+8) > .chart-palette-bg { background-color: var(--color-indigo-main); }
.chart-palette-item:nth-child(9n+9) > .chart-palette-bg { background-color: var(--color-success-main); }
/* ========== QUOTA METER ========== */
/* Generic segmented capacity bar (shared/feedback/_quota_meter).
   Segment WIDTHS / offsets are set inline (data); all colour + spacing here.
   Positioned with logical properties so it mirrors under RTL. */
.quota-meter {
  inline-size: 100%;
}
.quota-meter__track {
  position: relative;
  block-size: 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-chip);
  overflow: hidden;
}
/* The marker pokes above the track, so allow it to overflow vertically. */
.quota-meter:not(.is-unlimited) .quota-meter__track {
  overflow: visible;
}
.quota-meter__used,
.quota-meter__pending,
.quota-meter__over {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  block-size: 100%;
  transition: inline-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.quota-meter__used {
  background-color: var(--color-primary-main);
  border-start-start-radius: var(--radius-full);
  border-end-start-radius: var(--radius-full);
}
/* About-to-be-added (pending) — warning band with a subtle diagonal stripe so
   it reads distinctly from the solid "used" fill even in greyscale. */
.quota-meter__pending {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-warning-main),
    var(--color-warning-main) 6px,
    color-mix(in srgb, var(--color-warning-main) 60%, white) 6px,
    color-mix(in srgb, var(--color-warning-main) 60%, white) 12px
  );
}
/* The portion that overshoots the limit — error band. */
.quota-meter__over {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-error-main),
    var(--color-error-main) 6px,
    color-mix(in srgb, var(--color-error-main) 60%, white) 6px,
    color-mix(in srgb, var(--color-error-main) 60%, white) 12px
  );
  border-start-end-radius: var(--radius-full);
  border-end-end-radius: var(--radius-full);
}
/* Limit marker line + its (real, translated) label. */
.quota-meter__limit {
  position: absolute;
  inset-block: -4px;
  inline-size: 2px;
  background-color: var(--color-text-primary);
  opacity: 0.55;
  border-radius: var(--radius-sm);
  transition: inset-inline-start 0.5s ease;
}
.quota-meter__limit-label {
  position: absolute;
  inset-block-start: -16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
/* Under RTL the inline axis is flipped, so translateX must invert to keep the
   label centred on the limit marker (which is offset via inset-inline-start). */
[dir="rtl"] .quota-meter__limit-label {
  transform: translateX(50%);
}
/* Unlimited — clean subtle full bar with a centred infinity glyph. */
.quota-meter.is-unlimited .quota-meter__track {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-main) 18%, transparent),
    color-mix(in srgb, var(--color-primary-main) 8%, transparent)
  );
}
.quota-meter__infinity {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-main);
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .quota-meter__used,
  .quota-meter__pending,
  .quota-meter__over,
  .quota-meter__limit {
    transition: none;
  }
}
/* ========== DONUT WITH LEGEND ========== */
.donut-with-legend {
  display: flex;
  align-items: center;
  gap: 24px;
}
.donut-chart-container {
  flex-shrink: 0;
  position: relative;
  width: var(--donut-size, 250px);
  height: var(--donut-size, 250px);
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.donut-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.donut-legend-label {
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donut-legend-value {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .donut-with-legend {
    flex-direction: column;
  }
}
/* Donut center text overlay */
.donut-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut-center-main {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: 0.15px;
}
.donut-center-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.2;
  letter-spacing: 0.4px;
}
/* Stacked layout — chart above, dot legend below */
.donut-with-legend.donut-stacked {
  flex-direction: column;
  align-items: center;
}
.donut-stacked .donut-legend {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.donut-stacked .donut-legend-item {
  flex-direction: row;
  gap: 6px;
}
/* ═══════════════════════════════════════════
   Table Pagination (extracted from _data_table)
   ═══════════════════════════════════════════ */
.pagination-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.pagination-per-page .form-select-compact {
  width: auto;
  min-width: 60px;
}
/* ═══════════════════════════════════════════
   Filter Strip
   ═══════════════════════════════════════════ */
.filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.filter-strip-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.filter-strip-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.filter-strip-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-inline-start: auto;
}
.filter-strip-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-error-main);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.filter-strip-reset:hover {
  background-color: var(--color-error-lighter);
  color: var(--color-error-main);
}
.filter-strip-reset svg {
  width: 14px;
  height: 14px;
}
.filter-strip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  background: var(--color-error-main);
  color: #fff;
  border-radius: var(--radius-full);
}
/* Compact form variants for filter strip */
.form-select-compact {
  padding: 8px 32px 8px 10px;
  font-size: 13px;
  border: 1px solid var(--color-input-line);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-paper);
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233A3541' fill-opacity='0.54' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: var(--font-family);
  transition: border-color 0.2s ease;
}
html[dir="rtl"] .form-select-compact {
  background-position: left 10px center;
  padding: 8px 10px 8px 32px;
}
.form-select-compact:focus {
  outline: none;
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 2px var(--color-primary-outlined-hover-bg);
}
.form-input-compact {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--color-input-line);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-paper);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  transition: border-color 0.2s ease;
}
.form-input-compact::-moz-placeholder {
  color: var(--color-text-disabled);
}
.form-input-compact::placeholder {
  color: var(--color-text-disabled);
}
.form-input-compact:focus {
  outline: none;
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 2px var(--color-primary-outlined-hover-bg);
}
@media (max-width: 640px) {
  .filter-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-strip-group {
    width: 100%;
  }
  .filter-strip-actions {
    margin-inline-start: 0;
  }
}
/* ─── Data Table ─── */
.data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead {
  border-bottom: 2px solid var(--color-divider);
}
.data-table th {
  padding: 10px 14px;
  text-align: start;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background-color: var(--color-action-hover);
}
.data-table .text-end {
  text-align: end;
}
.data-table .text-nowrap {
  white-space: nowrap;
}
.data-table .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table-check {
  width: 40px;
}
/* ─── Utility Classes ─── */
.text-error { color: var(--color-error-main); font-weight: var(--font-weight-medium); }
.cell-truncate { max-width: 120px; }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { text-decoration: none; }
.card-link:hover .card { border-color: var(--color-primary-main); box-shadow: var(--shadow-sm); }
.card-link:focus-visible { outline: 2px solid var(--color-primary-main); outline-offset: 2px; border-radius: var(--radius-lg); }
/* ─── Copy Button (inline icon) ─── */
.btn-icon-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.btn-icon-xs:hover { background-color: var(--color-action-hover); color: var(--color-text-primary); }
.btn-icon-xs.btn-icon-success:hover { color: var(--color-success-main); background-color: var(--color-success-outlined-hover-bg); }
.btn-icon-xs.btn-icon-error:hover { color: var(--color-error-main); background-color: var(--color-error-outlined-hover-bg); }
.btn-icon-xs.btn-icon-warning:hover { color: var(--color-warning-main); background-color: var(--color-warning-outlined-hover-bg); }
.btn-icon-xs.copied { color: var(--color-success-main); }
.btn-icon-xs.copied svg { display: none; }
.btn-icon-xs.copied::after { content: '\2713'; font-size: 14px; }
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-inline {
  display: inline-block;
}
.cursor-pointer {
  cursor: pointer;
}
/* ─── Table Footer (Pagination) ─── */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
}
.table-footer .form-select-compact {
  margin-inline-start: 8px;
}
.table-footer-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.table-footer-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.table-footer-info {
  color: var(--color-text-secondary);
  font-size: 13px;
  white-space: nowrap;
}
.form-select-sm {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-paper);
  color: var(--color-text-primary);
}
/* ==========================================================================
   Apps Grid
   ========================================================================== */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}
@media (min-width: 640px)  { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
/* ==========================================================================
   App Card
   ========================================================================== */
.app-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.app-card-icon {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}
.app-card-info {
  flex: 1;
  min-width: 0;
}
.app-card-name {
  font-size: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.app-card-status-toggle {
  margin-inline-start: auto;
}
.app-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.app-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider, #e0e0e0);
}
.app-card-date {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-secondary);
}
.app-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
[dir="rtl"] .app-card-footer {
  flex-direction: row-reverse;
}
.btn-icon-sm {
  padding: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.btn-icon-sm:hover {
  color: var(--color-primary-main);
}
/* ==========================================================================
   Date Range Picker
   ========================================================================== */
.date-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 14px;
  font-size: 16px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
  background: var(--color-bg-paper);
  border: 1px solid var(--color-outline-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.date-picker-trigger:focus {
  outline: none;
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 3px var(--color-primary-outlined-hover-bg);
}
/* When inside a stacked form group or filter toolbar, fill the available width */
.form-group .date-picker-trigger,
.filter-toolbar-grid .date-picker-trigger {
  width: 100%;
}
.date-picker-trigger:hover {
  border-color: var(--color-primary-main);
}
.date-picker-trigger-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}
.date-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 100;
  display: none;
  background: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0px 4px 20px rgba(58, 53, 65, 0.15));
  overflow: hidden;
}
.date-picker-dropdown.open { display: flex; }
.date-picker-container { position: relative; }
/* Presets sidebar */
.date-picker-presets {
  width: 160px;
  padding: 12px 0;
  border-inline-end: 1px solid var(--color-divider);
  flex-shrink: 0;
}
.date-picker-preset {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: all 0.1s ease;
}
.date-picker-preset:hover {
  background: var(--color-action-hover);
  color: var(--color-text-primary);
}
.date-picker-preset.active {
  background: var(--color-primary-main);
  color: var(--color-primary-contrast, #fff);
  font-weight: var(--font-weight-medium, 500);
}
/* Calendar area */
.date-picker-calendars {
  display: flex;
  padding: 16px;
  gap: 24px;
}
.date-picker-calendar { width: 252px; }
.date-picker-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.date-picker-cal-title {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}
.date-picker-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background 0.1s;
}
.date-picker-cal-nav:hover {
  background: var(--color-action-hover);
}
.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  text-align: center;
  margin-bottom: 4px;
}
.date-picker-weekday {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-disabled);
  padding: 4px 0;
  font-weight: var(--font-weight-medium, 500);
}
.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 36px);
}
.date-picker-day {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-primary);
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.1s;
  position: relative;
}
.date-picker-day:hover:not(.disabled):not(.selected-start):not(.selected-end) {
  background: var(--color-action-hover);
}
.date-picker-day.other-month {
  color: var(--color-text-disabled);
}
.date-picker-day.today {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary-main);
}
.date-picker-day.disabled {
  color: var(--color-text-disabled);
  cursor: default;
  opacity: 0.4;
}
.date-picker-day.selected-start,
.date-picker-day.selected-end {
  background: var(--color-primary-main);
  color: var(--color-primary-contrast, #fff);
  font-weight: var(--font-weight-medium, 500);
}
.date-picker-day.in-range {
  background: rgba(var(--color-primary-main-rgb, 115, 103, 240), 0.12);
  border-radius: 0;
}
.date-picker-day.selected-start { border-radius: 50% 0 0 50%; }
[dir="rtl"] .date-picker-day.selected-start { border-radius: 0 50% 50% 0; }
.date-picker-day.selected-end { border-radius: 0 50% 50% 0; }
[dir="rtl"] .date-picker-day.selected-end { border-radius: 50% 0 0 50%; }
.date-picker-day.selected-start.selected-end { border-radius: 50%; }
/* Footer */
.date-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--color-divider);
}
.date-picker-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
}
.date-picker-compare select {
  font-size: var(--font-size-sm, 13px);
  padding: 2px 6px;
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-xs, 4px);
  background: var(--color-bg-paper);
  color: var(--color-text-primary);
  color-scheme: light dark;
}
.date-picker-actions {
  display: flex;
  gap: 8px;
}
/* ==========================================================================
   Explorer Widget
   ========================================================================== */
.explorer-widget {
  background: var(--color-bg-paper);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-divider);
  overflow: hidden;
}
.explorer-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.explorer-widget-label {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.explorer-widget-select {
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-paper);
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6b7b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
[dir="rtl"] .explorer-widget-select {
  background-position: left 8px center;
  padding: 4px 10px 4px 28px;
}
.explorer-widget-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}
.explorer-widget-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-divider);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.1s;
}
.explorer-widget-toggle:first-child { border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px); }
.explorer-widget-toggle:last-child { border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; }
[dir="rtl"] .explorer-widget-toggle:first-child { border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; }
[dir="rtl"] .explorer-widget-toggle:last-child { border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px); }
.explorer-widget-toggle.active {
  background: var(--color-primary-main);
  border-color: var(--color-primary-main);
  color: var(--color-primary-contrast, #fff);
}
.explorer-widget-search {
  padding: 0 20px;
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 12px;
  padding-top: 4px;
}
.explorer-widget-search .form-input {
  width: 100%;
}
.explorer-widget-body { padding: 20px; }
.explorer-widget-body::-webkit-scrollbar { width: 4px; }
.explorer-widget-body::-webkit-scrollbar-thumb { background: var(--color-text-disabled); border-radius: 2px; }
.explorer-widget-body::-webkit-scrollbar-track { background: transparent; }
.explorer-widget-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 20px 12px;
  border-top: 1px solid var(--color-divider);
}
.top-n-btn {
  padding: 4px 10px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-sm, 6px);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.1s;
  text-decoration: none;
}
.top-n-btn:hover { border-color: var(--color-primary-main); color: var(--color-primary-main); }
.top-n-btn.active {
  background: var(--color-primary-main);
  border-color: var(--color-primary-main);
  color: var(--color-primary-contrast, #fff);
}
/* ==========================================================================
   Performance Chart
   ========================================================================== */
.performance-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.performance-chart-title {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}
.granularity-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.granularity-btn {
  padding: 4px 12px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  border: none;
  border-inline-end: 1px solid var(--color-divider);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.1s;
  text-decoration: none;
}
.granularity-btn:last-child { border-inline-end: none; }
.granularity-btn:hover { background: var(--color-action-hover); }
.granularity-btn.active {
  background: var(--color-primary-main);
  color: var(--color-primary-contrast, #fff);
}
.performance-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
}
.performance-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.performance-chart-legend-item input[type="checkbox"] {
  accent-color: var(--legend-color, var(--color-primary-main));
  width: 14px;
  height: 14px;
}
.performance-chart-legend-item.disabled {
  opacity: 0.4;
}
.performance-chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* ==========================================================================
   Export Button
   ========================================================================== */
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid var(--color-outline-border);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.export-btn:hover {
  border-color: var(--color-primary-main);
  color: var(--color-primary-main);
}
.export-btn svg { width: 14px; height: 14px; }
/* ==========================================================================
   Sortable Table Headers
   ========================================================================== */
.sortable-th {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.sortable-th:hover { color: var(--color-primary-main); }
.sortable-th .sort-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-start: 4px;
  vertical-align: middle;
  opacity: 0.3;
}
.sortable-th.sort-asc .sort-icon,
.sortable-th.sort-desc .sort-icon {
  opacity: 1;
  color: var(--color-primary-main);
}
.sortable-th-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.sortable-th-link:hover {
  color: var(--color-primary-main);
}
/* ==========================================================================
   SPARKLINE CARD
   ========================================================================== */
.sparkline-card {
  background: var(--color-bg-paper);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sparkline-card-value {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.sparkline-card-chart {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.sparkline-svg {
  display: block;
}
.sparkline-card-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.3;
}
/* Gauge type */
.sparkline-gauge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(
    var(--gauge-color) calc(var(--gauge-pct) * 1%),
    var(--color-bg-body) calc(var(--gauge-pct) * 1%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sparkline-gauge::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-paper);
}
.sparkline-gauge-text {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
/* Mini donut type */
.sparkline-mini-donut {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(
    var(--donut-color) calc(var(--donut-pct) * 1%),
    var(--color-bg-body) calc(var(--donut-pct) * 1%)
  );
  position: relative;
}
.sparkline-mini-donut::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--color-bg-paper);
}
/* Grid for multiple sparkline cards */
.sparkline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .sparkline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================================
   BREAKDOWN CARD
   ========================================================================== */
.breakdown-card {
  background: var(--color-bg-paper);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--elevation-1);
}
.breakdown-card-header {
  margin-bottom: 16px;
}
.breakdown-card-title {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.15px;
}
.breakdown-card-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-divider);
}
.breakdown-card-value {
  font-size: 34px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.breakdown-card-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.breakdown-card-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 48px;
}
.breakdown-mini-bar {
  width: 8px;
  min-height: 4px;
  border-radius: 30px;
  transition: height 0.3s ease;
}
.breakdown-card-list {
  display: flex;
  flex-direction: column;
}
.breakdown-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
}
.breakdown-card-item:last-child {
  border-bottom: none;
}
.breakdown-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.breakdown-card-item-label {
  flex: 1;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}
.breakdown-card-item-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: 60px;
  text-align: end;
}
.breakdown-card-item-pct {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  text-align: end;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}
.breakdown-card-item-pct.trend-up {
  color: var(--color-primary-main);
}
.breakdown-card-item-pct.trend-down {
  color: var(--color-error-main);
}
/* ==========================================================================
   AREA CHART
   ========================================================================== */
.area-chart-container {
  position: relative;
  width: 100%;
}
.area-chart-container canvas {
  width: 100% !important;
}
/* ==========================================================================
   RADAR CHART
   ========================================================================== */
.radar-chart-container {
  position: relative;
  width: 100%;
}
.radar-chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.radar-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.radar-chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/* ==========================================================================
   PROGRESS CIRCLE
   ========================================================================== */
.progress-circle-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.progress-circle-sublabel {
  margin: 4px 0 0;
}
.progress-circle-desc {
  margin: 0;
}
.progress-circle {
  border-radius: 50%;
  background: conic-gradient(
    var(--progress-color) calc(var(--progress-pct) * 1%),
    var(--color-bg-body) calc(var(--progress-pct) * 1%)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.progress-circle::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--color-bg-paper);
}
.progress-circle-text {
  position: relative;
  z-index: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
/* Sizes */
.progress-circle-sm {
  width: 24px;
  height: 24px;
}
.progress-circle-sm::after {
  inset: 3px;
}
.progress-circle-md {
  width: 40px;
  height: 40px;
}
.progress-circle-md::after {
  inset: 5px;
}
.progress-circle-md .progress-circle-text {
  font-size: 11px;
}
.progress-circle-lg {
  width: 64px;
  height: 64px;
}
.progress-circle-lg::after {
  inset: 8px;
}
.progress-circle-lg .progress-circle-text {
  font-size: 14px;
}
/* Multi-column donut legend (auto-applied when >6 items) */
.donut-legend--multi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
@media (max-width: 480px) {
  .donut-legend--multi {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   FUNNEL CHART (extracted from _funnel_chart partial)
   ========================================================================== */
.funnel-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--spacing-2, 8px) 0;
}
.funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.funnel-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
  transition: width 0.3s ease;
}
.funnel-bar-value {
  color: var(--color-primary-contrast, #fff);
  font-weight: var(--font-weight-bold, 700);
  font-size: 14px;
  white-space: nowrap;
}
.funnel-label {
  margin-top: var(--spacing-1, 4px);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: var(--font-weight-regular, 400);
  text-align: center;
}
.funnel-dropoff {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1, 4px) 0;
}
/* RTL support */
[dir="rtl"] .funnel-chart,
.funnel-chart[dir="rtl"] {
  direction: rtl;
}
/* ==========================================================================
   GROUPED BAR WITH SIDEBAR (extracted from _grouped_bar_with_sidebar partial)
   ========================================================================== */
.gbs-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 280px;
}
.gbs-chart-section {
  flex: 1 1 0%;
  min-width: 0;
  padding: 4px 0 0 0;
}
.gbs-divider {
  width: 1px;
  background: var(--color-divider, rgba(58,53,65,0.12));
  margin: 20px 0;
  flex-shrink: 0;
}
.gbs-sidebar {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
}
.gbs-sidebar-header {
  margin-bottom: 4px;
}
.gbs-sidebar-total {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-text-primary);
}
.gbs-sidebar-label {
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
}
.gbs-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gbs-sidebar-badge {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gbs-sidebar-badge-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.gbs-sidebar-item-text {
  display: flex;
  flex-direction: column;
}
.gbs-sidebar-item-value {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-primary);
}
.gbs-sidebar-item-label {
  font-size: 12px;
  line-height: 14px;
  color: var(--color-text-secondary);
}
@media (max-width: 768px) {
  .gbs-container { flex-direction: column; }
  .gbs-divider { width: 100%; height: 1px; margin: 0; }
  .gbs-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .gbs-sidebar-header { width: 100%; }
}
/* ==========================================================================
   KPI STAT CARD (extracted from _stat_with_chart partial)
   ========================================================================== */
.kpi-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  min-height: 120px;
  position: relative;
  overflow: hidden;
}
.kpi-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.kpi-stat-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.kpi-stat-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-block-start: var(--spacing-2);
}
.kpi-stat-value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-stat-mini-chart {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
/* ==========================================================================
   INLINE SPARKLINE (extracted from _inline_sparkline partial)
   ========================================================================== */
.inline-sparkline { vertical-align: middle; flex-shrink: 0; }
/* Gauge chart dynamic sizing via CSS custom properties */
.gauge-chart {
  width: var(--gauge-size, 200px);
}
/* ==========================================================================
   Horizontal bar list — ranked list mode
   ========================================================================== */
.hbar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  color: white;
  flex-shrink: 0;
}
.hbar-subtitle {
  display: block;
}
.hbar-secondary-label {
  display: block;
}
/* ==========================================================================
   Donut with sidebar — composition layout
   ========================================================================== */
.donut-sidebar {
  display: flex;
  align-items: center;
  gap: 24px;
}
.donut-sidebar-chart {
  flex-shrink: 0;
}
.donut-sidebar-panel {
  flex: 1;
  min-width: 0;
}
.donut-sidebar-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.donut-sidebar-kpi-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-chip, #f5f5f5);
  border-radius: var(--radius-sm, 5px);
  box-shadow: 0px 2px 1px 0px rgba(58,53,65,0.2), 0px 1px 1px 0px rgba(58,53,65,0.14), 0px 1px 3px 0px rgba(58,53,65,0.12);
}
.donut-sidebar-kpi-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);
}
.donut-sidebar-divider {
  height: 1px;
  background: var(--color-divider);
  margin-bottom: 16px;
}
.donut-sidebar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.donut-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.donut-sidebar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .donut-sidebar {
    flex-direction: column;
  }
  .donut-sidebar-grid {
    grid-template-columns: 1fr;
  }
}
/* Compact trend badge for KPI cards */
.trend-badge-compact {
  font-size: 11px;
  gap: 2px;
  padding: 1px 4px;
}
.trend-badge-compact svg {
  width: 12px;
  height: 12px;
}
.filter-input-inline {
  max-width: 220px;
  flex: 1;
  min-width: 140px;
}
.export-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
/* ========== FILTER TOOLBAR ========== */
.filter-toolbar-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.filter-toolbar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.filter-toolbar-grid > div {
  flex: 1 1 220px;
  min-width: 0;
}
@media (max-width: 768px) {
  .filter-toolbar-grid > div {
    flex: 1 1 100%;
  }
}
.filter-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-toolbar-actions-start {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-toolbar-export-dropdown {
  position: relative;
}
.filter-toolbar-dropdown-menu {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  margin-top: 8px;
  min-width: 200px;
  background: var(--color-bg-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-divider);
  z-index: 50;
  padding: 8px 0;
}
.filter-toolbar-dropdown-hidden {
  display: none;
}
.filter-toolbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color 0.2s;
}
.filter-toolbar-dropdown-item:hover {
  background: var(--color-bg-body);
}
.filter-toolbar-dropdown-item svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-disabled);
}
@media (max-width: 768px) {
  .filter-toolbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-toolbar-export-dropdown {
    width: 100%;
  }

  .filter-toolbar-export-dropdown > button {
    width: 100%;
    justify-content: center;
  }

  .filter-toolbar-dropdown-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
    width: 100%;
  }
}
/* ========== AUTOCOMPLETE SELECT ========== */
.autocomplete-select {
  position: relative;
  width: 100%;
}
.autocomplete-select-trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  padding: 6px 12px;
  background: var(--color-bg-paper);
  border: 1px solid var(--color-input-line);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.autocomplete-select-trigger:focus-within {
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 3px var(--color-primary-outlined-hover-bg);
}
.autocomplete-select-label {
  position: absolute;
  top: -8px;
  inset-inline-start: 10px;
  padding: 0 4px;
  background: var(--color-bg-paper);
  font-size: 12px;
  line-height: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 0.15px;
  pointer-events: none;
  z-index: 1;
}
.autocomplete-select-trigger:focus-within ~ .autocomplete-select-label,
.autocomplete-select.has-value .autocomplete-select-label {
  color: var(--color-primary-main);
}
.autocomplete-select-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.16px;
  color: var(--color-text-primary);
  border: 1px solid var(--color-outline-border);
  border-radius: 16px;
  white-space: nowrap;
  max-width: 160px;
}
.autocomplete-select-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-select-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.autocomplete-select-chip-remove:hover {
  background: var(--color-action-hover);
  color: var(--color-text-primary);
}
.autocomplete-select-input {
  flex: 1 1 80px;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: var(--color-text-primary);
  padding: 4px 0;
}
.autocomplete-select-input::-moz-placeholder {
  color: var(--color-text-disabled);
}
.autocomplete-select-input::placeholder {
  color: var(--color-text-disabled);
}
.autocomplete-select-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.autocomplete-select-clear,
.autocomplete-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 50%;
}
.autocomplete-select-clear:hover,
.autocomplete-select-arrow:hover {
  background: var(--color-action-hover);
}
.autocomplete-select-clear svg {
  width: 20px;
  height: 20px;
}
.autocomplete-select-arrow svg {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.autocomplete-select.is-open .autocomplete-select-arrow svg {
  transform: rotate(180deg);
}
.autocomplete-select-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin-top: 2px;
  background: var(--color-bg-paper);
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(58, 53, 65, 0.1);
  overflow: hidden;
  z-index: 60;
  display: none;
}
.autocomplete-select.is-open .autocomplete-select-dropdown {
  display: block;
}
.autocomplete-select-list {
  max-height: 288px;
  overflow-y: auto;
  padding: 8px 0;
}
.autocomplete-select-option {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.1s;
}
.autocomplete-select-option:hover,
.autocomplete-select-option.is-highlighted {
  background: var(--color-action-hover);
}
.autocomplete-select-option.is-selected {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-main);
}
.autocomplete-select-option mark {
  background: none;
  font-weight: var(--font-weight-bold, 700);
  color: inherit;
}
.autocomplete-select-empty {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text-disabled);
  text-align: center;
}
/* ==========================================================================
   NAVIGATION COMPONENTS
   ========================================================================== */
/* Nav Item Badge */
.nav-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background-color: var(--color-error-main);
  color: white;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  border-radius: 10px;
  margin-inline-start: auto; /* Logical property - works for both LTR and RTL */
}
/* ==========================================================================
   HEADER COMPONENTS
   ========================================================================== */
.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ==========================================================================
   AVATAR SIZES
   ========================================================================== */
.avatar-xs {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.avatar-md {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 22px;
}
.avatar-xl {
  width: 80px;
  height: 80px;
  font-size: 32px;
}
.avatar-xxl {
  width: 120px;
  height: 120px;
  font-size: 48px;
}
.avatar-circle {
  border-radius: 50%;
  overflow: hidden;
}
.avatar-square {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.avatar-primary {
  background: linear-gradient(135deg, var(--color-primary-main), var(--color-success-main));
  color: white;
}
.avatar-secondary {
  background-color: var(--color-bg-chip);
  color: var(--color-text-primary);
}
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: var(--font-weight-semibold);
}
/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 20px !important; }
.gap-6 { gap: 24px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-6 { margin-top: 24px !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-error { color: var(--color-error-main) !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.w-full { width: 100% !important; }
.flex-wrap { flex-wrap: wrap !important; }
.overflow-x-auto { overflow-x: auto !important; }
.form-contents { display: contents; }
/* ========== APP SELECTOR ========== */
/* ========== APP SELECTOR (sidebar) ========== */
.app-selector {
  position: relative;
  padding: 0 6px 8px;
  margin-top: -16px; /* pull closer to Overview nav item above */
}
.app-selector-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  padding-inline-start: 16px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  gap: 8px;
  text-align: start;
  color: inherit;
  transition: background-color 0.2s, border-color 0.2s;
}
.app-selector-trigger:hover {
  background: var(--color-action-hover);
  border-color: var(--color-text-disabled);
}
.app-selector-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.app-selector-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.app-selector-icon svg {
  color: var(--color-text-secondary);
}
.app-selector-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-selector-name {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
/* Badge inside info column renders below the name */
.app-selector-info > .badge {
  align-self: flex-start;
}
.app-selector-chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}
.app-selector.open .app-selector-chevron {
  transform: rotate(180deg);
}
.app-selector-placeholder {
  font-size: 13px;
  color: var(--color-text-secondary);
  flex: 1;
}
/* Dropdown */
.app-selector-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline-start: 6px;
  inset-inline-end: 6px;
  z-index: 100;
  background: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 320px;
  overflow-y: auto;
  margin-top: 0;
}
/* When open, connect trigger border to dropdown */
.app-selector.open .app-selector-trigger {
  border-bottom-color: transparent;
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
}
.app-selector.open .app-selector-dropdown {
  display: block;
  border-top: none;
}
.app-selector-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-inline-start: 16px;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background-color 0.15s;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
}
.app-selector-option:last-child { border-bottom: none; }
.app-selector-option:hover {
  background-color: var(--color-action-hover);
}
/* Active app indicator: green left/right bar + subtle background */
.app-selector-option.active {
  background-color: var(--color-primary-custom-bg);
}
.app-selector-option.active::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  inset-inline-start: 0;
  width: 3px;
  background-color: var(--color-primary-main);
  border-radius: 0 3px 3px 0;
}
html[dir="rtl"] .app-selector-option.active::before {
  border-radius: 3px 0 0 3px;
}
.app-selector-option.active .app-selector-name {
  color: var(--color-primary-main);
  font-weight: var(--font-weight-semibold, 600);
}
.app-selector-option .app-selector-name {
  color: var(--color-text-primary);
}
.app-selector-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
}
/* ==========================================================================
   VERTICAL ICON TABS
   ========================================================================== */
.vertical-icon-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
  border-inline-end: 1px solid var(--color-divider);
  padding-top: 24px;
}
.vertical-icon-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px 18px 12px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 0;
  position: relative;
  border-inline-end: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.vertical-icon-tab:hover {
  color: var(--color-text-primary);
}
.vertical-icon-tab:hover .vertical-icon-tab-icon {
  background-color: var(--color-action-hover);
}
.vertical-icon-tab.active {
  color: var(--color-primary-main);
  border-inline-end-color: var(--color-primary-main);
}
.vertical-icon-tab-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-bg-chip, #f0f0f0);
  transition: background-color 0.2s;
}
.vertical-icon-tab.active .vertical-icon-tab-icon {
  background-color: var(--color-primary-custom-bg, rgba(76, 175, 80, 0.12));
  color: var(--color-primary-main);
}
.vertical-icon-tab-icon svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}
/* ========== PLATFORM CARDS ========== */
.platform-cards {
  display: flex;
  gap: 12px;
}
.platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: 2px solid var(--color-divider, rgba(58,53,65,0.12));
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  text-align: center;
  min-width: 100px;
}
.platform-card:hover {
  border-color: var(--color-primary-main);
  background-color: var(--color-primary-custom-bg);
}
.platform-card.selected {
  border-color: var(--color-primary-main);
  background-color: var(--color-primary-custom-bg);
}
.platform-card .platform-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.platform-card-label {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
/* ═══════════════════════════════════════════
   Geo Demographics Widget
   ═══════════════════════════════════════════ */
.geo-demographics-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-height: 260px;
}
[dir="rtl"] .geo-demographics-layout {
  direction: rtl;
}
@media (max-width: 768px) {
  .geo-demographics-layout {
    grid-template-columns: 1fr;
  }
}
.geo-country-list {
  display: flex;
  flex-direction: column;
}
.geo-country-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.geo-country-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
}
.geo-country-row:last-child {
  border-bottom: none;
}
.geo-country-name {
  flex: 1;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.geo-country-count {
  width: 70px;
  text-align: right;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}
.geo-country-pct {
  width: 55px;
  text-align: right;
  color: var(--color-text-secondary);
}
.geo-map-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  position: relative;
}
/* ═══════════════════════════════════════════
   Dashboard Grid - 3 columns
   ═══════════════════════════════════════════ */
.dashboard-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .dashboard-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .dashboard-grid-3 {
    grid-template-columns: 1fr;
  }
}
/* ═══════════════════════════════════════════
   Choropleth Map (jsvectormap)
   ═══════════════════════════════════════════ */
.geo-map-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  min-height: 280px;
}
.geo-map-wrapper .jvm-container {
  background: transparent !important;
}
.geo-map-wrapper .jvm-zoom-btn {
  background: var(--color-bg-paper);
  border: 1px solid var(--color-divider);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
}
.geo-map-wrapper .jvm-zoom-btn:hover {
  background: var(--color-bg-default);
}
.jvm-tooltip {
  background: var(--color-bg-paper) !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--color-text-primary) !important;
  font-family: inherit !important;
  padding: 6px 10px !important;
  z-index: 100 !important;
}
/* ═══════════════════════════════════════════
   Interactive Map (Leaflet)
   ═══════════════════════════════════════════ */
.geo-interactive-map {
  height: 280px;
  border-radius: var(--radius-md);
  background: var(--color-bg-default);
}
[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: var(--color-bg-paper);
  color: var(--color-text-primary);
}
[data-theme="dark"] .leaflet-popup-tip {
  background: var(--color-bg-paper);
}
/* ═══════════════════════════════════════════
   Map Toggle Content
   ═══════════════════════════════════════════ */
.geo-map-toggle-content [data-chart-view] {
  display: none;
}
.geo-map-toggle-content [data-chart-view].active {
  display: block;
}
/* ── Timeline Component ── */
.timeline {
  position: relative;
}
.timeline-item {
  display: flex;
  gap: 0;
  min-height: 60px;
}
.timeline-left {
  flex-shrink: 0;
  width: 72px;
  padding-top: 8px;
  text-align: right;
  padding-inline-end: 12px;
}
.timeline-timestamp {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.timeline-track {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full, 50%);
  flex-shrink: 0;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
/* Filled variant — solid dot with outer glow */
.timeline-dot-filled {
  box-shadow: 0 0 0 3px var(--color-bg-paper);
}
.timeline-dot-filled.timeline-dot-standard { background: var(--color-action-active); box-shadow: 0 0 0 3px rgba(189, 189, 189, 0.2); }
.timeline-dot-filled.timeline-dot-primary { background: var(--color-primary-main); box-shadow: 0 0 0 3px var(--color-primary-outlined-hover-bg); }
.timeline-dot-filled.timeline-dot-secondary { background: var(--color-secondary-main); box-shadow: 0 0 0 3px var(--color-secondary-outlined-hover-bg); }
.timeline-dot-filled.timeline-dot-error { background: var(--color-error-main); box-shadow: 0 0 0 3px var(--color-error-outlined-hover-bg); }
.timeline-dot-filled.timeline-dot-warning { background: var(--color-warning-main); box-shadow: 0 0 0 3px var(--color-warning-outlined-hover-bg); }
.timeline-dot-filled.timeline-dot-info { background: var(--color-info-main); box-shadow: 0 0 0 3px var(--color-info-outlined-hover-bg); }
.timeline-dot-filled.timeline-dot-success { background: var(--color-success-main); box-shadow: 0 0 0 3px var(--color-success-outlined-hover-bg); }
/* Outlined variant — hollow dot */
.timeline-dot-outlined {
  background: var(--color-bg-paper);
}
.timeline-dot-outlined.timeline-dot-standard { border: 2px solid var(--color-action-active); }
.timeline-dot-outlined.timeline-dot-primary { border: 2px solid var(--color-primary-main); }
.timeline-dot-outlined.timeline-dot-secondary { border: 2px solid var(--color-secondary-main); }
.timeline-dot-outlined.timeline-dot-error { border: 2px solid var(--color-error-main); }
.timeline-dot-outlined.timeline-dot-warning { border: 2px solid var(--color-warning-main); }
.timeline-dot-outlined.timeline-dot-info { border: 2px solid var(--color-info-main); }
.timeline-dot-outlined.timeline-dot-success { border: 2px solid var(--color-success-main); }
.timeline-connector {
  width: 1px;
  flex: 1;
  background: var(--color-divider);
  min-height: 24px;
}
.timeline-content {
  flex: 1;
  padding: 6px 0 20px 12px;
}
.timeline-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.timeline-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.timeline-details {
  margin-top: 8px;
}
.timeline-details-toggle {
  font-size: 12px;
  color: var(--color-link-main);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.timeline-details-toggle:hover {
  text-decoration: underline;
}
.timeline-params {
  margin-top: 6px;
  background: var(--color-bg-extra);
  border-radius: var(--radius-sm, 4px);
  padding: 8px 12px;
}
.timeline-param {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
}
.timeline-param-key {
  color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace);
}
.timeline-param-value {
  color: var(--color-text-primary);
  font-family: var(--font-mono, monospace);
  text-align: right;
  word-break: break-all;
}
/* RTL support */
[dir="rtl"] .timeline-left {
  text-align: left;
}
[dir="rtl"] .timeline-content {
  padding: 6px 12px 20px 0;
}
/* ── Session Accordion ── */
.session-accordion {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 12px;
  overflow: hidden;
}
.session-accordion[open] {
  border-color: var(--color-primary-outlined-resting-bg);
}
.session-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--color-bg-extra);
  gap: 12px;
  list-style: none;
}
.session-accordion-header::-webkit-details-marker {
  display: none;
}
.session-accordion-header::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid var(--color-text-secondary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.session-accordion[open] > .session-accordion-header::before {
  transform: rotate(90deg);
}
.session-accordion-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.session-accordion-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.session-accordion-body {
  padding: 16px;
  border-top: 1px solid var(--color-divider);
}
/* ========== MODALS ========== */
/* Overlay backdrop */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}
.modal.show {
  display: flex;
}
/* Dialog container */
.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 1.75rem auto;
  pointer-events: none;
}
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}
/* Content card */
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--color-bg-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  outline: 0;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-divider);
}
.modal-title {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 24px;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--color-divider);
  gap: 8px;
}
/* Close button */
.btn-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-action-active);
  opacity: 0.7;
  font-size: 20px;
  line-height: 1;
}
.btn-close::before {
  content: '\00D7';
}
.btn-close:hover {
  opacity: 1;
}
/* ========== QR MODAL ========== */
.qr-modal-content {
  padding: 25px 24px;
  border: none;
}
.qr-modal-close-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.qr-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qr-modal-preview {
  display: flex;
  justify-content: center;
}
.qr-modal-image {
  width: 128px;
  height: 128px;
}
.qr-modal-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 233px;
  text-align: center;
}
.qr-modal-sizes {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
}
.qr-modal-sizes .chip {
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.qr-modal-sizes .chip:hover {
  opacity: 0.8;
}
.qr-modal-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 367px;
}
.qr-modal-custom .form-group {
  margin-bottom: 0;
}
.qr-modal-generate {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;
}
/* ========== HORIZONTAL STEPPER ========== */
.stepper {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 32px;
}
.stepper-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.stepper-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-outline-border);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.stepper-circle.active {
  border-color: var(--color-primary-main);
  color: var(--color-primary-main);
}
.stepper-circle.completed {
  background: var(--color-primary-main);
  border-color: var(--color-primary-main);
  color: #fff;
}
.stepper-circle.completed svg {
  width: 18px;
  height: 18px;
}
.stepper-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stepper-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.4;
}
.stepper-subtitle {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.stepper-step.upcoming .stepper-title,
.stepper-step.upcoming .stepper-subtitle {
  color: var(--color-text-secondary);
}
.stepper-line {
  flex-grow: 1;
  height: 2px;
  background: var(--color-outline-border);
  margin-inline: 16px;
  min-width: 40px;
}
.stepper-line.completed {
  background: var(--color-primary-main);
}
/* Stepper Actions */
.stepper-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}
.stepper-actions-end {
  display: flex;
  gap: 12px;
  margin-inline-start: auto;
}
/* Responsive */
@media (max-width: 768px) {
  .stepper {
    gap: 8px;
  }

  .stepper-info {
    display: none;
  }

  .stepper-line {
    margin-inline: 8px;
    min-width: 20px;
  }
}
/* ========== SUBSCRIPTION ========== */
/* --- Engine Usage Card (borderless — sits inside a dashboard-widget) --- */
.engine-card {
  padding: 0;
}
.engine-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.engine-card-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.engine-card-header-name {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.engine-card-body {
  padding: 14px 0 4px;
}
.engine-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  text-align: center;
}
/* Big infinity icon for unlimited access */
.engine-card-infinity-icon {
  color: var(--color-success-main);
  opacity: 0.6;
}
.engine-card-unlimited-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-success-main);
}
/* Feature list */
.engine-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.engine-feature-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.engine-feature-label {
  flex-shrink: 0;
  width: 110px;
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir="rtl"] .engine-feature-label {
  text-align: right;
}
.engine-feature-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-extra, rgba(58, 53, 65, 0.06));
  border-radius: var(--radius-full);
  overflow: hidden;
}
.engine-feature-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary-main);
  transition: width 0.3s ease;
}
.engine-feature-bar-fill--warning {
  background: var(--color-warning-main);
}
.engine-feature-bar-fill--danger {
  background: var(--color-error-main);
}
.engine-feature-bar-fill--full {
  background: var(--color-success-main);
}
.engine-feature-value {
  flex-shrink: 0;
  min-width: 80px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: end;
  white-space: nowrap;
}
.engine-feature-value--warning {
  color: var(--color-warning-main);
}
/* Disabled feature */
.engine-feature-row--disabled {
  opacity: 0.4;
}
.engine-feature-row--disabled .engine-feature-value {
  color: var(--color-text-disabled);
}
/* Unlimited feature */
.engine-feature-value--unlimited {
  color: var(--color-success-main);
}
/* Boolean enabled */
.engine-feature-value--enabled {
  color: var(--color-success-main);
}
/* No access card state */
.engine-card--no-access {
  opacity: 0.6;
}
/* --- Plan Summary Card --- */
.plan-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.plan-summary-name {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
.plan-summary-name-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.plan-summary-progress {
  margin-top: 16px;
}
.plan-summary-progress-dates {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.plan-summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
}
@media (max-width: 640px) {
  .plan-summary-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan-summary-actions {
    flex-direction: column;
  }

  .plan-summary-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/* ========== CHECKOUT PAGE ========== */
.checkout-page {
  max-width: 1080px;
  margin: 0 auto;
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
/* --- Left: Plan Details --- */
.checkout-plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.checkout-plan-name {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
/* Engine rows */
.checkout-engine-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
}
.checkout-engine-row--border {
  border-top: 1px solid var(--color-divider);
}
.checkout-engine-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 140px;
}
.checkout-engine-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
[dir="rtl"] .checkout-engine-features {
  justify-content: flex-start;
}
.checkout-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-bg-chip);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.checkout-feature-chip strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
/* Billing info grid */
.checkout-billing-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.checkout-billing-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* --- Right: Summary Sidebar (Sticky) --- */
.checkout-sidebar {
  position: sticky;
  top: 24px;
}
.checkout-summary-card {
  border: 2px solid var(--color-primary-main);
}
/* Line items */
.checkout-line-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkout-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-text-primary);
}
.checkout-line-item--sm {
  font-size: 13px;
}
.checkout-line-item--credit {
  color: var(--color-success-main);
}
.checkout-divider {
  height: 1px;
  background: var(--color-divider);
  margin: 12px 0;
}
/* Total */
.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.checkout-total-amount {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-main);
}
/* Secure note */
.checkout-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-disabled);
}
.checkout-policy-note {
  font-size: 11px;
  color: var(--color-text-disabled);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}
/* --- Embedded Payment Form (shared component) --- */
.embedded-payment-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  text-align: center;
}
/* --- Pending Payment Page --- */
.checkout-pending-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
}
.checkout-pending-container {
  max-width: 480px;
  width: 100%;
}
.checkout-pending-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
}
/* --- Responsive --- */
@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-sidebar {
    position: static;
  }

  .checkout-engine-row {
    flex-direction: column;
    gap: 8px;
  }

  .checkout-engine-features {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .checkout-billing-info {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ========== PRICING PAGE ========== */
/* --- Page Header --- */
.pricing-page-header {
  text-align: center;
  margin-bottom: 32px;
}
.pricing-page-header__title {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.pricing-page-header__subtitle {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0;
}
/* --- Billing Cycle Toggle --- */
.pricing-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.pricing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--color-bg-chip);
  border-radius: var(--radius-full);
  gap: 4px;
}
.pricing-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}
.pricing-toggle__btn:hover {
  color: var(--color-text-primary);
}
.pricing-toggle__btn--active {
  background: var(--color-bg-paper);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}
.pricing-toggle__save-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-primary-custom-bg);
  color: var(--color-primary-main);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
}
/* --- Pricing Grid --- */
.pricing-grid {
  display: grid;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.pricing-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}
.pricing-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
}
.pricing-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 1024px) {
  .pricing-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .pricing-grid--2,
  .pricing-grid--3,
  .pricing-grid--auto {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}
/* --- Pricing Card --- */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.pricing-card:hover {
  box-shadow: var(--shadow-md);
}
.pricing-card--popular {
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 1px var(--color-primary-main);
}
.pricing-card--popular:hover {
  box-shadow: 0 0 0 1px var(--color-primary-main), var(--shadow-md);
}
.pricing-card--current {
  border-color: var(--color-success-main);
  background: var(--color-success-custom-bg);
}
/* Ribbon / Badge */
.pricing-card__ribbon {
  position: absolute;
  top: -1px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-primary-main);
  color: var(--color-primary-contrast);
}
[dir="rtl"] .pricing-card__ribbon {
  transform: translateX(50%);
}
.pricing-card__ribbon--current {
  background: var(--color-success-main);
  color: #fff;
}
/* Header */
.pricing-card__header {
  margin-bottom: 20px;
}
.pricing-card__name {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.pricing-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
/* Price */
.pricing-card__price {
  margin-bottom: 24px;
}
.pricing-card__amount-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pricing-card__currency {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.pricing-card__amount {
  font-size: 40px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -1px;
}
.pricing-card__cycle {
  display: block;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.pricing-card__trial-note {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
/* Proration & Credit */
.pricing-card__proration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--color-info-custom-bg);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 13px;
}
.pricing-card__proration-label {
  color: var(--color-text-secondary);
}
.pricing-card__proration-amount {
  font-weight: var(--font-weight-semibold);
  color: var(--color-info-main);
}
.pricing-card__credit {
  font-size: 13px;
  color: var(--color-success-main);
  margin-bottom: 16px;
}
/* CTA */
.pricing-card__cta {
  margin-bottom: 24px;
}
.pricing-card__cta .w-full {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Divider */
.pricing-card__divider {
  height: 1px;
  background: var(--color-divider);
  margin-bottom: 24px;
}
/* Features */
.pricing-card__features {
  flex: 1;
}
.pricing-card__features-title {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
}
.pricing-card__engine-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 8px;
  margin-top: 12px;
}
.pricing-card__engine-header:first-child {
  margin-top: 0;
}
.pricing-card__feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.pricing-card__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.pricing-card__feature-item strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
.pricing-card__check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-main);
}
/* --- Pricing Footer --- */
.pricing-footer {
  text-align: center;
  margin-top: 48px;
  padding-top: 24px;
}
.pricing-footer__text {
  font-size: 14px;
  color: var(--color-text-secondary);
}
/* ========== CONFIRMATION DIALOG ========== */
.confirmation-dialog {
  max-width: 548px;
}
.confirmation-dialog .modal-content {
  position: relative;
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}
.confirmation-dialog__close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 1;
}
.confirmation-dialog__close:hover {
  background: var(--color-bg-chip);
  color: var(--color-text-primary);
}
.confirmation-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0 24px;
}
.confirmation-dialog__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.confirmation-dialog__icon--success {
  background: var(--color-success-custom-bg);
  color: var(--color-success-main);
}
.confirmation-dialog__icon--warning {
  background: var(--color-warning-custom-bg);
  color: var(--color-warning-main);
}
.confirmation-dialog__icon--error {
  background: var(--color-error-custom-bg);
  color: var(--color-error-main);
}
.confirmation-dialog__title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.confirmation-dialog__message {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 420px;
}
.confirmation-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}
/* ========== ENGINE TAB DASHBOARD ========== */
.engine-tab-panel {
  min-height: 200px;
}
/* ========== UNDERLINE TABS (base styles) ========== */
.underline-tabs-container {
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 24px;
}
.underline-tabs {
  display: flex;
  gap: 0;
}
.underline-tab-item {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  top: 1px;
}
.underline-tab-item:hover {
  color: var(--color-text-primary);
}
.underline-tab-item.underline-tab-active {
  color: var(--color-success-main);
  border-bottom-color: var(--color-success-main);
}
/* Underline tabs within card — override margins for card context */
.card > .underline-tabs-container {
  padding-inline: 24px;
}
.card > .underline-tabs-container .underline-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ========== PRICING ENGINE SECTIONS ========== */
.pricing-engine-section {
  margin-bottom: 40px;
}
/* Radio in plan card */
.pricing-card__radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary-main);
  cursor: pointer;
}
/* Selected card highlight */
.pricing-card--selected {
  border-color: var(--color-primary-main);
  box-shadow: 0 0 0 1px var(--color-primary-main);
}
/* ========== FLOATING CHECKOUT BAR ========== */
.pricing-checkout-bar {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 50;
  background: var(--color-bg-paper);
  border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  padding: 12px 24px;
}
.pricing-checkout-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px;
}
.pricing-checkout-bar__summary {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pricing-checkout-bar__count {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.pricing-checkout-bar__total {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
@media (max-width: 640px) {
  .pricing-checkout-bar__inner {
    flex-direction: column;
    gap: 8px;
  }

  .pricing-checkout-bar__inner .btn {
    width: 100%;
    justify-content: center;
  }
}
/* ========== CHECKOUT CART ITEM ========== */
.checkout-cart-item {
  transition: opacity 0.2s ease;
}
.checkout-remove-btn {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  padding: 4px;
}
.checkout-remove-btn:hover {
  color: var(--color-error-main);
}
/* Feature Gating — locked feature UI */
.feature-locked {
  opacity: 0.6;
}
.feature-locked .text-link {
  pointer-events: auto;
  opacity: 1;
}
.feature-locked-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.feature-locked-toggle {
  width: 34px;
  height: 14px;
  border-radius: 10px;
  background: var(--color-action-disabled-bg, rgba(0,0,0,0.12));
  flex-shrink: 0;
}
.feature-locked-title {
  color: var(--color-text-disabled);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
}
.feature-locked-desc {
  padding-inline-start: 42px;
  margin-top: 0;
}
/* Change plan page */
.current-plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.current-plan-banner__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.current-plan-banner__info h3 {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.change-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
@media (max-width: 768px) {
  .change-plan-grid {
    grid-template-columns: 1fr;
  }
}
.addon-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--color-info-main);
}
.addon-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}
/* ========== BULK IMPORT PREVIEW ========== */
/* Layout/spacing specific to the bulk-link-import preview body
   (shortlink/links/forms/_bulk_upload_results). All COLOURS, typography, and
   component styling come from existing component classes + design tokens — this
   file only owns the preview's section framing and the loading placeholder.
   Logical properties throughout so it mirrors under RTL; dark theme inherits
   via the same tokens. NO re-declared palette / fonts. */
/* Quota + by-domain sections share a light framed-card treatment so each reads
   as a distinct block without introducing a new card component. */
.bulk-import-quota,
.bulk-import-domains {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding-block: 1rem;
  padding-inline: 1.125rem;
}
/* Footer actions: re-upload (start) pushes the primary import to the end. */
.bulk-import-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bulk-import-actions .btn-outline-secondary {
  margin-inline-end: auto;
}
/* Loading placeholder — centered spinner + status text. Visibility is owned by
   the [hidden] attribute (toggled by the Stimulus controller in D3); we only
   define the layout here. */
.bulk-import-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-block: 3rem;
  padding-inline: 1rem;
  text-align: center;
}
.bulk-import-loading[hidden] {
  display: none;
}
/* Honour reduced-motion: the shared .spinner animation is the only motion here;
   suppress it for users who opt out. */
@media (prefers-reduced-motion: reduce) {
  .bulk-import-loading .spinner {
    animation: none;
  }
}
/* ==========================================================================
   Money value + Saudi Riyal (SAR) symbol
   Rendered by the `money()` helper. The symbol uses currentColor and em units
   so it inherits the surrounding text color/size, and always sits to the LEFT
   of the number (dir="ltr" on the wrapper) per the official symbol usage rules.
   ========================================================================== */
.money {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}
.money__amount {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sar-symbol {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  fill: currentColor;
  /* Optical alignment against the digits */
  position: relative;
  top: 0.02em;
}
/* ========== AVATAR (from Flutter AppUserAvatar) ========== */
/* Supports: circle, square, initials, image, availability indicator */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.14px;
  color: #FFFFFF;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Circle Avatar (default) */
.avatar-circle {
  border-radius: var(--radius-full);
}
/* Square Avatar */
.avatar-square {
  border-radius: 4px;
}
/* Avatar Sizes (based on radius * 2) */
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar, .avatar-md { width: 44px; height: 44px; font-size: 16px; }
/* default radius: 22 */
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-xl { width: 80px; height: 80px; font-size: 28px; }
.avatar-xxl { width: 120px; height: 120px; font-size: 40px; }
/* square profile */
/* Avatar Image */
.avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Avatar Initials */
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}
/* Availability Indicator */
.avatar-availability {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-availability::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-success-main);
}
.avatar-availability.offline::after {
  background-color: var(--color-text-disabled);
}
.avatar-availability.busy::after {
  background-color: var(--color-error-main);
}
.avatar-availability.away::after {
  background-color: var(--color-warning-main);
}
/* Avatar Group */
.avatar-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--color-bg-paper);
}
.avatar-group .avatar:last-child {
  margin-left: 0;
}
/* Avatar with generated background color (JS helper needed) */
/* Colors are generated from user's name hash in Flutter */
/* Default fallback colors for CSS-only implementation */
.avatar-primary { background-color: var(--color-primary-main); }
.avatar-secondary { background-color: var(--color-secondary-main); }
.avatar-success { background-color: var(--color-success-main); }
.avatar-error { background-color: var(--color-error-main); }
.avatar-warning { background-color: var(--color-warning-main); }
.avatar-info { background-color: var(--color-info-main); }
/* Generated color classes (for backend to assign based on name hash) */
.avatar-color-0 { background-color: #F44336; }
.avatar-color-1 { background-color: #E91E63; }
.avatar-color-2 { background-color: #9C27B0; }
.avatar-color-3 { background-color: #673AB7; }
.avatar-color-4 { background-color: #3F51B5; }
.avatar-color-5 { background-color: #2196F3; }
.avatar-color-6 { background-color: #03A9F4; }
.avatar-color-7 { background-color: #00BCD4; }
.avatar-color-8 { background-color: #009688; }
.avatar-color-9 { background-color: #4CAF50; }
.avatar-color-10 { background-color: #8BC34A; }
.avatar-color-11 { background-color: #CDDC39; }
.avatar-color-12 { background-color: #FFC107; }
.avatar-color-13 { background-color: #FF9800; }
.avatar-color-14 { background-color: #FF5722; }
.avatar-color-15 { background-color: #795548; }
/**
 * Form Validation Styles
 * Styles for inline validation errors
 */
/* Error state for inputs */
.input-error {
  border-color: var(--color-error-main) !important;
  background-color: var(--color-error-light, rgba(211, 47, 47, 0.05)) !important;
}
.input-error:focus {
  border-color: var(--color-error-main) !important;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1) !important;
}
/* Error message */
.form-error {
  color: var(--color-error-main);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.form-error::before {
  content: "⚠";
  flex-shrink: 0;
  font-size: 13px;
}
/* Checkbox error state */
input[type="checkbox"].input-error {
  outline: 2px solid var(--color-error-main);
  outline-offset: 2px;
}
/* Error animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.input-error {
  animation: shake 0.4s ease-in-out;
}
/* Success state (optional - for when field becomes valid) */
.input-success {
  border-color: var(--color-success-main) !important;
}
/* Form group spacing with errors */
.form-group:has(.form-error) {
  margin-bottom: 20px;
}
/* RTL support */
html[dir="rtl"] .form-error::before {
  order: 1;
}
/* ============================================
   RTL (Right-to-Left) SUPPORT
   For Arabic and other RTL languages

   IMPORTANT: Use CSS Logical Properties instead of physical properties!
   - margin-inline-start/end instead of margin-left/right
   - padding-inline-start/end instead of padding-left/right
   - inset-inline-start/end instead of left/right
   - text-align: start/end instead of text-align: left/right
   - border-inline-start/end instead of border-left/right

   See _utilities.css for .ms-*, .me-*, .ps-*, .pe-*, .text-start, .text-end utilities
   ============================================ */
/* Base RTL Support - Set direction on html and body */
html[dir="rtl"] {
  direction: rtl !important;
}
html[dir="rtl"] body {
  direction: rtl !important;
  text-align: right !important;
}
/* RTL for all page content areas */
html[dir="rtl"] .page-content,
html[dir="rtl"] .main-content,
html[dir="rtl"] .content-area,
html[dir="rtl"] main {
  direction: rtl !important;
  text-align: right !important;
}
/* RTL for form elements */
html[dir="rtl"] .form-container,
html[dir="rtl"] form {
  direction: rtl !important;
  text-align: right !important;
}
/* RTL for grid layouts */
html[dir="rtl"] .grid {
  direction: rtl !important;
}
/* ==========================================================================
   SPECIAL INPUT HANDLING
   Keep technical inputs LTR (emails, URLs, phone numbers)
   ========================================================================== */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr !important;
  text-align: left !important;
}
/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
/* Form select dropdown arrow - move to left side in RTL */
html[dir="rtl"] .form-select {
  background-position: left 14px center !important;
  padding-right: 14px !important;
  padding-left: 40px !important;
}
/* Password toggle button - move to left side in RTL */
html[dir="rtl"] .password-toggle {
  right: auto !important;
  left: 0 !important;
}
/* ==========================================================================
   LEGACY PHYSICAL PROPERTY OVERRIDES
   NOTE: Prefer using logical properties (ms-*, me-*, ps-*, pe-*) in new code.
   These overrides exist for backward compatibility with existing code using
   physical margin/padding classes.
   ========================================================================== */
/* RTL Text Alignment (for legacy .text-left/.text-right classes) */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
/* RTL Borders (for legacy border-l/border-r classes) */
html[dir="rtl"] .border-l { border-left: 0 !important; border-right: 1px solid !important; }
html[dir="rtl"] .border-r { border-right: 0 !important; border-left: 1px solid !important; }
html[dir="rtl"] .border-l-2 { border-left-width: 0 !important; border-right-width: 2px !important; }
html[dir="rtl"] .border-r-2 { border-right-width: 0 !important; border-left-width: 2px !important; }
html[dir="rtl"] .border-l-4 { border-left-width: 0 !important; border-right-width: 4px !important; }
html[dir="rtl"] .border-r-4 { border-right-width: 0 !important; border-left-width: 4px !important; }
/* RTL Positioning (for legacy left-* and right-* classes) */
html[dir="rtl"] .left-0 { left: auto !important; right: 0 !important; }
html[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; }
html[dir="rtl"] .left-4 { left: auto !important; right: 1rem !important; }
html[dir="rtl"] .right-4 { right: auto !important; left: 1rem !important; }
/* RTL Spacing (for Tailwind-style space-x-* utilities) */
html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}
html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-right: 0.75rem !important;
  margin-left: 0 !important;
}
html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}
/* RTL Margins (legacy - prefer ms-* and me-* utilities) */
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .ml-6 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .mr-6 { margin-right: 0 !important; margin-left: 1.5rem !important; }
/* RTL Padding (legacy - prefer ps-* and pe-* utilities) */
html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; }
/* ==========================================================================
   COMPONENT-SPECIFIC RTL RULES
   ========================================================================== */
/* Button with icon in RTL - flex items should flow right-to-left
   When direction:rtl is set on a flex container, flex-direction:row flows items from right to left.
   LTR default: [icon][Text] (icon on left)
   RTL with direction:rtl: [Text][icon] (icon on right, because items start from right)
*/
html[dir="rtl"] .btn {
  direction: rtl !important;
}
/* Page actions - keep natural flow (no reversal needed, flexbox handles it) */
html[dir="rtl"] .page-actions {
  flex-direction: row;
}
/* Alert with left border - swap to right border in RTL */
html[dir="rtl"] .alert-border-left {
  border-left-width: 1px !important;
  border-right-width: 4px !important;
}
/* Avatar availability indicator - reposition for RTL */
html[dir="rtl"] .avatar-availability {
  right: auto !important;
  left: 0 !important;
}
/* Avatar group - adjust stacking margins */
html[dir="rtl"] .avatar-group {
  flex-direction: row !important;
}
html[dir="rtl"] .avatar-group .avatar {
  margin-left: 0 !important;
  margin-right: -8px !important;
}
html[dir="rtl"] .avatar-group .avatar:last-child {
  margin-right: 0 !important;
}
/* Table text alignment */
html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
  text-align: right !important;
}
/* ==========================================================================
   EXPLICIT RTL REVERSE UTILITY
   Use .rtl-reverse when you explicitly need to reverse flex direction in RTL
   ========================================================================== */
.rtl-reverse {
  display: flex;
  align-items: center;
}
html[dir="rtl"] .rtl-reverse {
  flex-direction: row-reverse !important;
}
/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */
html[dir="rtl"] .welcome-section {
  text-align: right !important;
}
html[dir="rtl"] .rtl-content {
  direction: rtl !important;
  text-align: right !important;
}
/* ========== BASE STYLES ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-body);
}
/* ========== UTILITY CLASSES ========== */
/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
/* Flex */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
/* Justify */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }
/* Align */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }
/* Gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
/* Margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 0.75rem !important; }
.m-4 { margin: 1rem !important; }
.m-6 { margin: 1.5rem !important; }
.m-8 { margin: 2rem !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-6 { margin-left: 1.5rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-6 { margin-right: 1.5rem !important; }
.mr-auto { margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 0.75rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-6 { padding-left: 1.5rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 0.75rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-6 { padding-right: 1.5rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
/* Width */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-1\/2 { width: 50% !important; }
.w-1\/3 { width: 33.333333% !important; }
.w-2\/3 { width: 66.666667% !important; }
.w-1\/4 { width: 25% !important; }
.w-3\/4 { width: 75% !important; }
.min-w-0 { min-width: 0 !important; }
.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-full { max-width: 100% !important; }
/* Height */
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-auto { height: auto !important; }
.min-h-screen { min-height: 100vh !important; }
/* Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.top-0 { top: 0 !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-default { cursor: default !important; }
/* User Select */
.select-none { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; }
.select-text { -webkit-user-select: text !important; -moz-user-select: text !important; user-select: text !important; }
.select-all { -webkit-user-select: all !important; -moz-user-select: all !important; user-select: all !important; }
/* Whitespace */
.whitespace-normal { white-space: normal !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre { white-space: pre !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }
/* Word Break */
.break-words { word-wrap: break-word !important; overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Background Colors */
.bg-body { background-color: var(--color-bg-body) !important; }
.bg-paper { background-color: var(--color-bg-paper) !important; }
.bg-primary { background-color: var(--color-primary-main) !important; }
.bg-secondary { background-color: var(--color-secondary-main) !important; }
.bg-success { background-color: var(--color-success-main) !important; }
.bg-error { background-color: var(--color-error-main) !important; }
.bg-warning { background-color: var(--color-warning-main) !important; }
.bg-info { background-color: var(--color-info-main) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-chip { background-color: var(--color-bg-chip) !important; }
/* Border Colors */
.border-primary { border-color: var(--color-primary-main) !important; }
.border-secondary { border-color: var(--color-secondary-main) !important; }
.border-success { border-color: var(--color-success-main) !important; }
.border-error { border-color: var(--color-error-main) !important; }
.border-warning { border-color: var(--color-warning-main) !important; }
.border-info { border-color: var(--color-info-main) !important; }
.border-divider { border-color: var(--color-divider) !important; }
/* Border Width */
.border { border-width: 1px !important; border-style: solid !important; border-color: var(--color-border) !important; }
.border-0 { border-width: 0 !important; }
.border-2 { border-width: 2px !important; }
.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-l { border-left-width: 1px !important; border-left-style: solid !important; }
.border-r { border-right-width: 1px !important; border-right-style: solid !important; }
/* Dividers */
.divider-horizontal {
  height: 1px;
  flex-shrink: 0;
  background-color: var(--color-divider);
}
.divider-horizontal-inset {
  height: 1px;
  flex-shrink: 0;
  background-color: var(--color-divider);
  margin-inline: 24px;
}
/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }
/* Transition */
.transition { transition: all 0.2s ease !important; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; }
.transition-opacity { transition: opacity 0.2s ease !important; }
.transition-transform { transition: transform 0.2s ease !important; }
/* Transform */
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.-rotate-90 { transform: rotate(-90deg) !important; }
/* Pointer Events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }
/* Screen Reader Only */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}