/* ========================================
    🎨 Catalyst Design System
    Professional & Elegant
    ======================================== */

/* ========================================
   📝 Typography - Catalyst Font System
   ======================================== */

:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Font Family - Professional Stack */
    --catalyst-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --catalyst-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Font Sizes - Modular Scale */
    --catalyst-font-size-xs: 0.75rem;
    --catalyst-font-size-sm: 0.875rem;
    --catalyst-font-size-base: 1rem;
    --catalyst-font-size-lg: 1.125rem;
    --catalyst-font-size-xl: 1.25rem;
    --catalyst-font-size-2xl: 1.5rem;
    --catalyst-font-size-3xl: 1.875rem;
    
    /* Font Weights */
    --catalyst-font-weight-light: 300;
    --catalyst-font-weight-normal: 400;
    --catalyst-font-weight-medium: 500;
    --catalyst-font-weight-semibold: 550;
    --catalyst-font-weight-bold: 700;
    
    /* Line Heights */
    --catalyst-line-height-tight: 1.25;
    --catalyst-line-height-snug: 1.375;
    --catalyst-line-height-normal: 1.5;
    --catalyst-line-height-relaxed: 1.625;
    --catalyst-line-height-loose: 2;
    /* Color Palette - Zinc & Semantic */
    --catalyst-zinc-50: #fafafa;
    --catalyst-zinc-100: #f4f4f5;
    --catalyst-zinc-200: #e4e4e7;
    --catalyst-zinc-300: #d4d4d8;
    --catalyst-zinc-400: #a1a1a6;
    --catalyst-zinc-500: #71717a;
    --catalyst-zinc-600: #52525b;
    --catalyst-zinc-700: #3f3f46;
    --catalyst-zinc-800: #27272a;
    --catalyst-zinc-900: #18181b;

    /* Semantic Colors */
    --catalyst-red-50: #fef2f2;
    --catalyst-red-200: #fecaca;
    --catalyst-red-500: #ef4444;
    --catalyst-red-600: #dc2626;
    --catalyst-red-700: #b91c1c;
    --catalyst-red-800: #7f1d1d;

    --catalyst-green-50: #f0fdf4;
    --catalyst-green-200: #dcfce7;
    --catalyst-green-600: #16a34a;
    --catalyst-green-700: #15803d;
    --catalyst-green-800: #166534;

    --catalyst-blue-50: #eff6ff;
    --catalyst-blue-100: #dbeafe;
    --catalyst-blue-500: #3b82f6;
    --catalyst-blue-600: #2563eb;
    --catalyst-blue-700: #1d4ed8;

    /* Couleurs de marque issues de la maquette */
    --catalyst-violet-50: #f5f3ff;
    --catalyst-violet-100: #ede9fe;
    --catalyst-violet-500: #8b5cf6;
    --catalyst-violet-600: #7c3aed;
    --catalyst-violet-700: #6d28d9;
    --catalyst-violet-800: #5b21b6;

    --catalyst-magenta-50: #fdf2f8;
    --catalyst-magenta-100: #fce7f3;
    --catalyst-magenta-500: #ec4899;
    --catalyst-magenta-600: #db2777;
    --catalyst-magenta-700: #be185d;

    /* Roles : les composants pointent ici, jamais sur une teinte brute.
       Le primaire est bleu et porte les actions (boutons, liens, focus) ;
       le magenta est l'accent de marque et porte les etats de navigation. */
    --catalyst-primary-50: var(--catalyst-blue-50);
    --catalyst-primary-100: var(--catalyst-blue-100);
    --catalyst-primary-500: var(--catalyst-blue-500);
    --catalyst-primary-600: var(--catalyst-blue-600);
    --catalyst-primary-700: var(--catalyst-blue-700);
    --catalyst-accent-500: var(--catalyst-magenta-500);
    --catalyst-accent-600: var(--catalyst-magenta-600);
    --catalyst-accent-700: var(--catalyst-magenta-700);

    --catalyst-amber-50: #fffbeb;
    --catalyst-amber-200: #fde68a;
    --catalyst-amber-500: #f59e0b;
    --catalyst-amber-800: #78350f;

    --catalyst-sky-50: #f0f9ff;
    --catalyst-sky-200: #bae6fd;
    --catalyst-sky-500: #0ea5e9;
    --catalyst-sky-700: #0369a1;
    --catalyst-sky-800: #0c4a6e;

    /* Texte des alertes : en clair on prend le ton -700, franchement colore, car les -800
       sont assombris au point de tirer vers le brun. En sombre ce sont les -800 qui servent,
       la palette les inversant en teintes claires. */
    --catalyst-alert-success-text: var(--catalyst-green-700);
    --catalyst-alert-danger-text: var(--catalyst-red-700);
    --catalyst-alert-info-text: var(--catalyst-sky-700);
    --catalyst-alert-warning-text: var(--catalyst-amber-800);

    /* Event Colors - Light */
    --event-staff-leave-bg: #def7ec;
    --event-staff-leave-text: #03543f;
    --event-staff-leave-border: #bcdecb;

    --event-staff-leave-request-bg: #fef3c7;
    --event-staff-leave-request-text: #92400e;
    --event-staff-leave-request-border: #fde68a;

    --event-holiday-bg: #fde8e8;
    --event-holiday-text: #9b1c1c;
    --event-holiday-border: #f8b4b4;

    --event-absence-bg: #e5edff;
    --event-absence-text: #1e429f;
    --event-absence-border: #c3ddfd;

    --event-recovery-bg: #f3f4f6;
    --event-recovery-text: #374151;
    --event-recovery-border: #d1d5db;

    --event-sick-leave-bg: #fde8e8;
    --event-sick-leave-text: #9b1c1c;
    --event-sick-leave-border: #f8b4b4;

    --event-training-bg: #e1effe;
    --event-training-text: #1a56db;
    --event-training-border: #bfd3f8;

    --event-staff-meeting-bg: #f5f3ff;
    --event-staff-meeting-text: #6d28d9;
    --event-staff-meeting-border: #ddd6fe;

    /* Light Mode */
    --catalyst-body-color: #111827;
    --catalyst-body-bg: #ffffff;
    --catalyst-text-secondary: #6b7280;
    --catalyst-text-muted: #9ca3af;
    --catalyst-border-color: #e5e7eb;
    --catalyst-divider: #f3f4f6;
    --catalyst-surface-bg: #ffffff;
    --catalyst-surface-subtle-bg: #f8fafc;
    --catalyst-hover-bg: #f3f7fc;
    /* Navigation : teintes de l'accent magenta, distinctes du primaire bleu des actions */
    --catalyst-nav-hover-bg: rgba(219, 39, 119, 0.06);
    --catalyst-nav-active-bg: rgba(219, 39, 119, 0.10);
    --catalyst-nav-active-color: #be185d;
    --phoenix-navbar-vertical-link-hover-bg: var(--catalyst-nav-hover-bg);
    --phoenix-navbar-vertical-link-hover-color: var(--catalyst-nav-active-color);
    --phoenix-navbar-vertical-link-active-color: var(--catalyst-nav-active-color);
    --catalyst-inset-highlight: rgba(255, 255, 255, 0.85);
    --catalyst-inset-shade: rgba(0, 0, 0, 0.05);
    --catalyst-input-bg: #ffffff;
    --catalyst-code-bg: var(--catalyst-zinc-900);
    --catalyst-code-color: #e5e7eb;
    --catalyst-code-inline-color: var(--catalyst-red-600);
    --catalyst-link-color: var(--catalyst-primary-600);
    --catalyst-link-hover-color: var(--catalyst-primary-700);

    /* Sizing */
    --catalyst-radius-md: 0.5rem;
    --catalyst-radius-lg: 0.75rem;
    --catalyst-radius-xl: 1rem;

    /* Shadows */
    --catalyst-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --catalyst-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --catalyst-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --catalyst-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --catalyst-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --catalyst-transition-fast: 100ms;
    --catalyst-transition-base: 150ms;
    --catalyst-transition-slow: 200ms;
    --catalyst-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Bootstrap Bridge */
    --bs-body-color: var(--catalyst-body-color);
    --bs-body-bg: var(--catalyst-body-bg);
    --bs-secondary-color: var(--catalyst-text-secondary);
    --bs-secondary-bg: var(--catalyst-divider);
    --bs-tertiary-bg: var(--catalyst-zinc-100);
    --bs-border-color: var(--catalyst-border-color);
    --bs-primary: var(--catalyst-primary-600);
    --bs-primary-rgb: 37, 99, 235;
    --bs-success: var(--catalyst-green-600);
    --bs-danger: var(--catalyst-red-600);
    --bs-warning: var(--catalyst-amber-500);
    --bs-info: var(--catalyst-sky-500);
    --phoenix-body-color: var(--catalyst-body-color);
    --phoenix-body-bg: var(--catalyst-body-bg);
    --phoenix-secondary-color: var(--catalyst-text-secondary);
    --phoenix-gray-100: var(--catalyst-zinc-100);
    --phoenix-gray-200: var(--catalyst-zinc-200);
    --phoenix-gray-300: var(--catalyst-zinc-300);
    --phoenix-primary: var(--catalyst-primary-600);
    --phoenix-primary-rgb: 37, 99, 235;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --catalyst-body-color: #e6edf3;
    --catalyst-body-bg: #131820;
    --catalyst-text-secondary: #a3aebc;
    --catalyst-text-muted: #788493;
    --catalyst-border-color: #3a424e;
    --catalyst-divider: #272e39;
    --catalyst-surface-bg: #1c222c;
    --catalyst-surface-subtle-bg: #232a35;
    --catalyst-hover-bg: #2b333f;
    /* Navigation : teintes de l'accent magenta, distinctes du primaire bleu des actions */
    --catalyst-nav-hover-bg: rgba(232, 52, 142, 0.12);
    --catalyst-nav-active-bg: rgba(232, 52, 142, 0.20);
    --catalyst-nav-active-color: #f08cba;
    --phoenix-navbar-vertical-link-hover-bg: var(--catalyst-nav-hover-bg);
    --phoenix-navbar-vertical-link-hover-color: var(--catalyst-nav-active-color);
    --phoenix-navbar-vertical-link-active-color: var(--catalyst-nav-active-color);
    --catalyst-inset-highlight: rgba(255, 255, 255, 0.06);
    --catalyst-inset-shade: rgba(255, 255, 255, 0.08);
    /* Les champs sont plus sombres que la carte pour rester identifiables comme zones de saisie */
    --catalyst-input-bg: #131820;
    --catalyst-zinc-100: #232a35;
    --catalyst-zinc-200: #3a424e;
    --catalyst-zinc-300: #4d5666;
    --catalyst-zinc-400: #7e8a9c;
    --catalyst-zinc-500: #a8b3c1;
    --catalyst-zinc-600: #cdd9e5;
    --catalyst-zinc-700: #e6edf3;
    --catalyst-zinc-800: #f0f6fc;
    --catalyst-zinc-900: #ffffff;
    --catalyst-code-bg: var(--catalyst-surface-subtle-bg);
    --catalyst-code-color: #e5e7eb;
    --catalyst-code-inline-color: #ff9492;
    --catalyst-link-color: #58a6ff;
    --catalyst-link-hover-color: #85bfff;

    /* Teintes sémantiques inversées : -50/-200 deviennent fond/bordure sombres, -800 devient le texte clair */
    --catalyst-red-50: #2d1618;
    --catalyst-red-200: #5c2427;
    --catalyst-red-500: #f85149;
    --catalyst-red-800: #ffb4ab;

    --catalyst-green-50: #12261e;
    --catalyst-green-200: #1f4d35;
    --catalyst-green-800: #7ee787;

    --catalyst-blue-50: #12233d;
    --catalyst-blue-100: #1a3355;
    --catalyst-blue-500: #58a6ff;
    /* Accents desatures : les tons satures vibrent optiquement sur fond sombre (Material Design).
       Clartes calees sur le maximum garantissant 4.5:1 avec du texte blanc. */
    --catalyst-blue-600: #3776d0;
    --catalyst-blue-700: #2e63b0;

    /* Marque en dark : violet et magenta sont les teintes qui vibrent le plus sur fond sombre.
       Clartes calculees pour 4.5:1 (fond de bouton vs blanc, accent vs fond de page). */
    --catalyst-violet-50: #1e1730;
    --catalyst-violet-100: #2a2044;
    --catalyst-violet-500: #9761f2;
    --catalyst-violet-600: #8a5ed7;
    --catalyst-violet-700: #744cb8;
    --catalyst-violet-800: #5f3d99;

    --catalyst-magenta-100: #33162a;
    --catalyst-magenta-500: #e8348e;
    --catalyst-magenta-600: #cc4086;
    --catalyst-magenta-700: #ab356f;

    --catalyst-green-600: #2d8652;
    --catalyst-green-700: #256f45;

    --catalyst-red-600: #c6504c;
    --catalyst-red-700: #a94340;

    --catalyst-amber-50: #2e2410;
    --catalyst-amber-200: #5c4813;
    --catalyst-amber-500: #e3b341;
    --catalyst-amber-800: #f2cc60;

    --catalyst-sky-50: #10273a;
    --catalyst-sky-200: #1f4b6b;
    --catalyst-sky-500: #56c9e8;
    --catalyst-sky-800: #9fdcf5;

    /* Sur fond sombre seuls les -800 (teintes claires) restent lisibles */
    --catalyst-alert-success-text: var(--catalyst-green-800);
    --catalyst-alert-danger-text: var(--catalyst-red-800);
    --catalyst-alert-info-text: var(--catalyst-sky-800);
    --catalyst-alert-warning-text: var(--catalyst-amber-800);
    /* En dark l'élévation vient du halo de bordure, l'ombre noire seule étant invisible */
    --catalyst-shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --catalyst-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --catalyst-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --catalyst-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --catalyst-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --bs-body-color: var(--catalyst-body-color);
    --bs-body-bg: var(--catalyst-body-bg);
    --bs-body-bg-rgb: 19, 24, 32;
    --bs-primary-rgb: 55, 118, 208;
    --bs-emphasis-bg: var(--catalyst-surface-bg);
    --bs-emphasis-bg-rgb: 28, 34, 44;
    --bs-secondary-color: var(--catalyst-text-secondary);
    --bs-tertiary-color: var(--catalyst-text-muted);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: var(--catalyst-divider);
    --bs-tertiary-bg: var(--catalyst-surface-subtle-bg);
    --bs-border-color: var(--catalyst-border-color);
    --bs-border-color-translucent: rgba(58, 66, 78, 0.72);
    --phoenix-body-color: var(--catalyst-body-color);
    --phoenix-body-bg: var(--catalyst-body-bg);
    --phoenix-body-bg-rgb: 19, 24, 32;
    --phoenix-primary-rgb: 55, 118, 208;
    --phoenix-secondary-color: var(--catalyst-text-secondary);
    --phoenix-tertiary-color: var(--catalyst-text-muted);
    --phoenix-emphasis-color: #ffffff;
    --phoenix-form-invalid-color: #ff4d57;
    --phoenix-border-color: var(--catalyst-border-color);
    --phoenix-border-color-rgb: 58, 66, 78;
    --phoenix-border-color-translucent: rgba(58, 66, 78, 0.72);
    --phoenix-border-color-translucent-rgb: 58, 66, 78;

    /* L'echelle grise Phoenix est inversee en dark (50 = le plus sombre) et pilote la quasi-totalite des composants */
    --phoenix-gray-50: #131820;
    --phoenix-gray-100: #1c222c;
    --phoenix-gray-200: #272e39;
    --phoenix-gray-300: #3a424e;
    --phoenix-gray-400: #4d5666;
    --phoenix-gray-500: #5d6878;
    --phoenix-gray-600: #6b7688;
    --phoenix-gray-700: #7e8a9c;
    --phoenix-gray-800: #98a3b3;
    --phoenix-gray-900: #a8b3c1;
    --phoenix-gray-1000: #cdd9e5;
    --phoenix-gray-1100: #e6edf3;
    --phoenix-gray-50-rgb: 19, 24, 32;
    --phoenix-gray-100-rgb: 28, 34, 44;
    --phoenix-gray-200-rgb: 39, 46, 57;
    --phoenix-gray-300-rgb: 58, 66, 78;
    --phoenix-gray-400-rgb: 77, 86, 102;
    --phoenix-gray-500-rgb: 93, 104, 120;
    --phoenix-gray-600-rgb: 107, 118, 136;
    --phoenix-gray-700-rgb: 126, 138, 156;
    --phoenix-gray-800-rgb: 152, 163, 179;
    --phoenix-gray-900-rgb: 168, 179, 193;
    --phoenix-gray-1000-rgb: 205, 217, 229;
    --phoenix-gray-1100-rgb: 230, 237, 243;
    --phoenix-light-border-subtle: var(--catalyst-border-color);
    --phoenix-secondary-border-subtle: var(--catalyst-border-color);
    --phoenix-emphasis-bg: var(--catalyst-surface-bg);
    --phoenix-emphasis-bg-rgb: 28, 34, 44;
    --phoenix-tertiary-bg: var(--catalyst-surface-subtle-bg);
    --phoenix-tertiary-bg-rgb: 35, 42, 53;
    --phoenix-body-highlight-bg: var(--catalyst-surface-subtle-bg);
    --phoenix-body-highlight-bg-rgb: 35, 42, 53;
    --phoenix-navbar-vertical-bg-color: var(--catalyst-surface-bg);
    --phoenix-link-color: var(--catalyst-link-color);
    --phoenix-link-color-rgb: 88, 166, 255;
    --phoenix-link-hover-color: var(--catalyst-link-hover-color);
    --phoenix-link-hover-color-rgb: 121, 192, 255;
    --phoenix-heading-color: var(--catalyst-body-color);
    --phoenix-highlight-bg: #3d2f14;

    /* Event Colors - Dark */
    --event-staff-leave-bg: #123127;
    --event-staff-leave-text: #a7f3d0;
    --event-staff-leave-border: #1f5b47;

    --event-staff-leave-request-bg: #3d2f14;
    --event-staff-leave-request-text: #fde68a;
    --event-staff-leave-request-border: #6d4f1f;

    --event-holiday-bg: #3d1f23;
    --event-holiday-text: #fecaca;
    --event-holiday-border: #7f3139;

    --event-absence-bg: #1a2a45;
    --event-absence-text: #bfdbfe;
    --event-absence-border: #2f4f7a;

    --event-recovery-bg: #262c36;
    --event-recovery-text: #e5e7eb;
    --event-recovery-border: #444c56;

    --event-sick-leave-bg: #3d1f23;
    --event-sick-leave-text: #fecaca;
    --event-sick-leave-border: #7f3139;

    --event-training-bg: #1b3048;
    --event-training-text: #bfdbfe;
    --event-training-border: #325680;

    --event-staff-meeting-bg: #312246;
    --event-staff-meeting-text: #ddd6fe;
    --event-staff-meeting-border: #5a3b7f;
}

/* Ces classes Phoenix resolvent des variables globales (white/dark) qu'on ne peut pas remapper sans casser bg-dark/btn-dark */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--catalyst-surface-bg) !important;
    color: var(--catalyst-body-color) !important;
}

/* Phoenix code ces deux teintes en dur, aucune variable ne permet de les surcharger */
[data-bs-theme="dark"] .dark__bg-gray-1200 {
    background-color: var(--catalyst-body-bg) !important;
}

[data-bs-theme="dark"] .dark__bg-gray-1100 {
    background-color: var(--catalyst-surface-subtle-bg) !important;
}

/* Les variantes btn-phoenix figent leur fond et leur bordure en bleu-violet */
[data-bs-theme="dark"] .btn-phoenix-primary,
[data-bs-theme="dark"] .btn-phoenix-secondary,
[data-bs-theme="dark"] .btn-phoenix-success,
[data-bs-theme="dark"] .btn-phoenix-danger,
[data-bs-theme="dark"] .btn-phoenix-warning,
[data-bs-theme="dark"] .btn-phoenix-info {
    --phoenix-btn-bg: var(--catalyst-surface-bg);
    --phoenix-btn-border-color: var(--catalyst-border-color);
    --phoenix-btn-hover-bg: var(--catalyst-hover-bg);
    --phoenix-btn-active-bg: var(--catalyst-hover-bg);
    --phoenix-btn-hover-border-color: var(--catalyst-zinc-300);
    --phoenix-btn-active-border-color: var(--catalyst-zinc-300);
}

[data-bs-theme="dark"] .btn-phoenix-primary {
    --phoenix-btn-color: var(--catalyst-link-color);
    --phoenix-btn-hover-color: var(--catalyst-link-hover-color);
    --phoenix-btn-active-color: var(--catalyst-link-hover-color);
}

[data-bs-theme="dark"] .btn-phoenix-secondary {
    --phoenix-btn-color: var(--catalyst-text-secondary);
    --phoenix-btn-hover-color: var(--catalyst-body-color);
    --phoenix-btn-active-color: var(--catalyst-body-color);
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .bg-hover-100:hover {
    background-color: var(--catalyst-surface-subtle-bg) !important;
    color: var(--catalyst-body-color) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--catalyst-body-color) !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--catalyst-text-secondary) !important;
}

[data-bs-theme="dark"] #v-pills-impact-other-pro-activity {
    background-color: var(--catalyst-amber-50) !important;
    border-color: var(--catalyst-amber-200) !important;
}

[data-bs-theme="dark"] #v-pills-impact-additional-pro-activity {
    background-color: var(--catalyst-red-50) !important;
    border-color: var(--catalyst-red-200) !important;
}

[data-bs-theme="dark"] #v-pills-availability {
    background-color: #9f1239 !important;
    border-color: #9f1239 !important;
}

/* ========================================
   📝 Global Typography
   ======================================== */

html, body {
    font-family: var(--catalyst-font-family-base);
    font-size: var(--catalyst-font-size-base);
    font-weight: var(--catalyst-font-weight-normal);
    line-height: var(--catalyst-line-height-normal);
    color: var(--catalyst-body-color);
    background-color: var(--catalyst-body-bg);
}

/* Headings - Consistent Sizing */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-semibold);
    line-height: var(--catalyst-line-height-snug);
    color: var(--catalyst-body-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1, .h1 {
    font-size: var(--catalyst-font-size-3xl);
    font-weight: var(--catalyst-font-weight-bold);
}

h2, .h2 {
    font-size: var(--catalyst-font-size-2xl);
    font-weight: var(--catalyst-font-weight-bold);
}

h3, .h3 {
    font-size: var(--catalyst-font-size-xl);
    font-weight: var(--catalyst-font-weight-semibold);
}

h4, .h4 {
    font-size: var(--catalyst-font-size-lg);
    font-weight: var(--catalyst-font-weight-semibold);
}

h5, .h5 {
    font-size: var(--catalyst-font-size-base);
    font-weight: var(--catalyst-font-weight-semibold);
}

h6, .h6 {
    font-size: var(--catalyst-font-size-sm);
    font-weight: var(--catalyst-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Paragraphs & Text */
p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: var(--catalyst-line-height-normal);
}

small, .small {
    font-size: var(--catalyst-font-size-sm);
    line-height: var(--catalyst-line-height-snug);
}

/* Links */
a {
    color: var(--catalyst-link-color);
    text-decoration: none;
    transition: color var(--catalyst-transition-base) var(--catalyst-easing);
}

a:hover {
    color: var(--catalyst-link-hover-color);
    text-decoration: underline;
}

/* Code & Pre */
code, pre {
    font-family: var(--catalyst-font-family-mono);
    font-size: var(--catalyst-font-size-sm);
    line-height: var(--catalyst-line-height-snug);
}

code {
    background-color: var(--catalyst-divider);
    color: var(--catalyst-code-inline-color);
    padding: 0.125rem 0.375rem;
    border-radius: var(--catalyst-radius-md);
}

pre {
    background-color: var(--catalyst-code-bg);
    color: var(--catalyst-code-color);
    padding: 1rem;
    border-radius: var(--catalyst-radius-lg);
    overflow-x: auto;
}

/* ========================================

   🎯 Buttons - Catalyst Design
   ======================================== */

.btn {
    border-radius: var(--catalyst-radius-lg);
    font-weight: var(--catalyst-font-weight-medium);
    font-size: var(--catalyst-font-size-sm);
    font-family: var(--catalyst-font-family-base);
    line-height: var(--catalyst-line-height-snug);
    transition: all var(--catalyst-transition-base) var(--catalyst-easing);
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--catalyst-shadow-md);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--catalyst-shadow-sm);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary */
.btn-primary {
    background: var(--catalyst-primary-600);
    border-color: var(--catalyst-primary-600);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.2), var(--catalyst-shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    background: var(--catalyst-primary-700);
    border-color: var(--catalyst-primary-700);
    box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.3), var(--catalyst-shadow-md);
}

/* Secondary */
.btn-secondary {
    background-color: var(--catalyst-surface-bg);
    border: 1.5px solid var(--catalyst-border-color);
    color: var(--catalyst-body-color);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--catalyst-divider);
    border-color: var(--catalyst-zinc-400);
}

/* Outline */
.btn-outline-secondary {
    border: 1.5px solid var(--catalyst-border-color);
    color: var(--catalyst-body-color);
    background-color: var(--catalyst-surface-bg);
    transition: all var(--catalyst-transition-base) var(--catalyst-easing);
}

.btn-outline-secondary:hover:not(:disabled) {
    background-color: var(--catalyst-surface-bg);
    border-color: var(--catalyst-zinc-500);
    color: var(--catalyst-body-color);
    box-shadow: var(--catalyst-shadow-sm), inset 0 0 0 2px var(--catalyst-inset-shade);
}

/* Success */
.btn-success {
    background: var(--catalyst-green-600);
    border-color: var(--catalyst-green-600);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(22, 163, 74, 0.2), var(--catalyst-shadow-sm);
}

.btn-success:hover:not(:disabled) {
    background: var(--catalyst-green-700);
    border-color: var(--catalyst-green-700);
    box-shadow: 0 4px 12px 0 rgba(22, 163, 74, 0.3), var(--catalyst-shadow-md);
}

/* Danger */
.btn-danger {
    background: var(--catalyst-red-600);
    border-color: var(--catalyst-red-600);
    color: white;
    box-shadow: 0 1px 2px 0 rgba(220, 38, 38, 0.2), var(--catalyst-shadow-sm);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--catalyst-red-700);
    background: var(--catalyst-red-700);
    border-color: var(--catalyst-red-700);
    box-shadow: 0 4px 12px 0 rgba(220, 38, 38, 0.3), var(--catalyst-shadow-md);
}

/* Link */
.btn-link {
    color: var(--catalyst-link-color);
    text-decoration: none;
    box-shadow: none;
}

.btn-link:hover:not(:disabled) {
    color: var(--catalyst-link-hover-color);
    text-decoration: underline;
}

/* ========================================
   📋 Forms - Professional
   ======================================== */

.form-control,
.form-select {
    border: 1px solid var(--catalyst-border-color);
    border-radius: var(--catalyst-radius-lg);
    background-color: var(--catalyst-input-bg);
    color: var(--catalyst-body-color);
    font-family: var(--catalyst-font-family-base);
    font-size: var(--catalyst-font-size-sm);
    font-weight: var(--catalyst-font-weight-normal);
    line-height: var(--catalyst-line-height-snug);
    transition: all var(--catalyst-transition-base) var(--catalyst-easing);
    box-shadow: var(--catalyst-shadow-xs);
}

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--catalyst-zinc-300);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--catalyst-primary-500);
    box-shadow: var(--catalyst-shadow-xs), 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.form-control::placeholder {
    color: var(--catalyst-text-muted);
}

.form-control.is-invalid {
    border-color: var(--catalyst-red-500);
    background-image: none;
    padding-right: 0;
}

.form-control.is-invalid:focus {
    border-color: var(--catalyst-red-600);
    box-shadow: var(--catalyst-shadow-xs), 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-label {
    color: var(--catalyst-body-color);
    font-weight: var(--catalyst-font-weight-normal);
    font-size: var(--catalyst-font-size-sm);
    line-height: var(--catalyst-line-height-snug);
    margin-bottom: 0.5rem;
    font-family: var(--catalyst-font-family-base);
    text-transform: none;
    letter-spacing: normal;
}

/* ========================================
   🚨 Alerts - Modern
   ======================================== */

.alert {
    border-radius: var(--catalyst-radius-lg);
    border: 1px solid;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: slideInDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--catalyst-shadow-sm);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chaque variante porte une barre laterale dans son ton -500 : le fond seul est trop pale
   pour identifier le type. `border-inline-start` suit le sens de lecture (support RTL). */
.alert-outline-success {
    background: linear-gradient(135deg, var(--catalyst-green-50) 0%, rgba(22, 163, 74, 0.06) 100%);
    border-color: var(--catalyst-green-200);
    border-inline-start: 3px solid var(--catalyst-green-600);
    color: var(--catalyst-alert-success-text);
}

.alert-outline-danger {
    background: linear-gradient(135deg, var(--catalyst-red-50) 0%, rgba(220, 38, 38, 0.08) 100%);
    border-color: var(--catalyst-red-200);
    border-inline-start: 3px solid var(--catalyst-red-500);
    color: var(--catalyst-alert-danger-text);
}

.alert-outline-info {
    background: linear-gradient(135deg, var(--catalyst-sky-50) 0%, rgba(14, 165, 233, 0.06) 100%);
    border-color: var(--catalyst-sky-200);
    border-inline-start: 3px solid var(--catalyst-sky-500);
    color: var(--catalyst-alert-info-text);
}

.alert-outline-warning {
    background: linear-gradient(135deg, var(--catalyst-amber-50) 0%, rgba(245, 158, 11, 0.06) 100%);
    border-color: var(--catalyst-amber-200);
    border-inline-start: 3px solid var(--catalyst-amber-500);
    color: var(--catalyst-alert-warning-text);
}

/* ========================================
   📊 Cards - Elegant
   ======================================== */

.card {
    border: 1px solid var(--catalyst-border-color);
    background-color: var(--catalyst-surface-bg);
    box-shadow: var(--catalyst-shadow-sm);
    transition: all var(--catalyst-transition-base) var(--catalyst-easing);
    --phoenix-card-cap-padding-y: 1rem !important;
    --phoenix-card-cap-padding-x: 1rem !important;
    --phoenix-card-spacer-y: 1rem !important;
    --phoenix-card-spacer-x: 1rem !important;
}

.card:hover {
    box-shadow: var(--catalyst-shadow-md);
    border-color: var(--catalyst-zinc-200);
}

.card-header {
    background-color: var(--catalyst-divider);
    border-bottom: 1px solid var(--catalyst-border-color);
    border-radius: var(--catalyst-radius-xl) var(--catalyst-radius-xl) 0 0;
    font-weight: var(--catalyst-font-weight-semibold);
    font-size: var(--catalyst-font-size-sm);
    line-height: var(--catalyst-line-height-snug);
    color: var(--catalyst-body-color);
}

.card-footer {
    background-color: var(--catalyst-divider);
    border-top: 1px solid var(--catalyst-border-color);
    border-radius: 0 0 var(--catalyst-radius-xl) var(--catalyst-radius-xl);
    font-size: var(--catalyst-font-size-sm);
    line-height: var(--catalyst-line-height-snug);
}

/* Reusable CRUD header layout and visual rhythm */
.crud-header {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.crud-header-title {
    font-weight: var(--catalyst-font-weight-medium);
    letter-spacing: normal;
    color: var(--catalyst-body-color);
}

.crud-header-reference-code {
    padding: 0.08rem 0.3rem;
    border-radius: 0.3rem;
    background-color: transparent;
    /* Meme jeton que l'entree active du menu : la reference reste alignee sur la
       navigation si l'accent est retouche */
    color: var(--catalyst-nav-active-color);
}

.crud-header-subtitle {
    font-size: 0.92rem;
    font-weight: var(--catalyst-font-weight-normal);
    color: var(--catalyst-text-secondary);
}

.crud-header-description {
    max-width: 65ch;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--catalyst-text-secondary);
}

.crud-header-actions {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .crud-header-actions {
        justify-content: flex-end;
    }
}

/* Tuiles de synthese en tete de page de detail. La surface reste neutre : la teinte
   ne porte que le lisere et la pastille d'icone, sinon les tuiles ecrasent le tableau
   qui les suit. Les variantes ne definissent que deux variables, les tons -200/-800
   s'inversant deja par theme (pale/sombre en clair, sombre/clair en sombre). */
.detail-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--catalyst-border-color);
    border-inline-start: 3px solid var(--detail-tile-fg, var(--catalyst-border-color));
    border-radius: var(--catalyst-radius-md);
    background-color: var(--catalyst-surface-subtle-bg);
}

.detail-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    color: var(--detail-tile-fg, var(--catalyst-text-secondary));
    background-color: var(--detail-tile-bg, var(--catalyst-divider));
}

.detail-tile-label {
    font-size: 0.66rem;
    font-weight: var(--catalyst-font-weight-semibold);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--catalyst-text-secondary);
}

.detail-tile-value {
    margin-top: 0.15rem;
    font-size: var(--catalyst-font-size-sm);
    font-weight: var(--catalyst-font-weight-semibold);
    line-height: 1.35;
    color: var(--catalyst-body-color);
}

.detail-tile--info {
    --detail-tile-fg: var(--catalyst-sky-800);
    --detail-tile-bg: var(--catalyst-sky-200);
}

.detail-tile--warning {
    --detail-tile-fg: var(--catalyst-amber-800);
    --detail-tile-bg: var(--catalyst-amber-200);
}

.detail-tile--success {
    --detail-tile-fg: var(--catalyst-green-800);
    --detail-tile-bg: var(--catalyst-green-200);
}

/* ========================================
   � Bootstrap/Phoenix Standardization
   ======================================== */

.navbar {
    font-family: var(--catalyst-font-family-base);
}

.navbar-top-light {
    --phoenix-navbar-top-bg-color: var(--catalyst-surface-bg);
    --phoenix-navbar-top-border-color: var(--catalyst-border-color);
    --phoenix-navbar-top-link-color: var(--catalyst-body-color);
    --phoenix-navbar-top-dropdown-color: var(--catalyst-body-color);
    --phoenix-nav-link-color: var(--catalyst-body-color);
    background-color: var(--catalyst-surface-bg) !important;
    border-bottom-color: var(--catalyst-border-color) !important;
    color: var(--catalyst-body-color);
}

.navbar-brand {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-semibold);
    font-size: var(--catalyst-font-size-lg);
}

.nav-link {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal);
    font-size: var(--catalyst-font-size-sm) !important;
    color: var(--catalyst-body-color);
}

/* Sidebar : seuls les etats hover/actif portent la couleur, le fond reste neutre.
   Les couleurs de lien passent par les variables Phoenix ; seul le fond actif n'en a pas. */
.navbar-vertical .nav-link {
    border-radius: var(--catalyst-radius-md);
    transition: background-color var(--catalyst-transition-base) var(--catalyst-easing),
                color var(--catalyst-transition-base) var(--catalyst-easing);
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:hover,
.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:focus-visible {
    background-color: var(--catalyst-nav-hover-bg);
    color: var(--catalyst-nav-active-color);
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active {
    background-color: var(--catalyst-nav-active-bg);
    font-weight: var(--catalyst-font-weight-semibold);
    box-shadow: inset 3px 0 0 var(--catalyst-accent-600);
}

/* Phoenix retrait les entrees de premier niveau de 1.75rem ; on resserre a 0.75rem.
   Meme selecteur et meme media query que le theme, pour ne toucher que ce palier ;
   `padding-inline-start` couvre le LTR et le RTL, que le theme gere en deux fichiers. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-link {
        padding-inline-start: 0.75rem;
    }
}

.nav-underline-regular .nav-link {
    font-weight: var(--catalyst-font-weight-normal) !important;
    color: var(--catalyst-text-secondary) !important;
}

.nav-underline-regular .nav-link:hover,
.nav-underline-regular .nav-link:focus {
    color: var(--catalyst-body-color) !important;
}

.nav-underline-regular .nav-link.active {
    font-weight: var(--catalyst-font-weight-normal) !important;
    color: var(--catalyst-body-color) !important;
    border-bottom-color: var(--catalyst-primary-600) !important;
}

:root:not([data-bs-theme="dark"]) .nav-underline-regular .nav-link,
[data-bs-theme="light"] .nav-underline-regular .nav-link {
    color: var(--catalyst-text-secondary) !important;
}

:root:not([data-bs-theme="dark"]) .nav-underline-regular .nav-link:hover,
:root:not([data-bs-theme="dark"]) .nav-underline-regular .nav-link:focus,
[data-bs-theme="light"] .nav-underline-regular .nav-link:hover,
[data-bs-theme="light"] .nav-underline-regular .nav-link:focus {
    color: var(--catalyst-primary-600) !important;
}

:root:not([data-bs-theme="dark"]) .nav-underline-regular .nav-link.active,
[data-bs-theme="light"] .nav-underline-regular .nav-link.active {
    color: var(--catalyst-primary-700) !important;
}

.dropdown-menu {
    font-family: var(--catalyst-font-family-base);
    font-size: var(--catalyst-font-size-sm);
}

.dropdown-item {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal);
    font-size: var(--catalyst-font-size-sm);
    color: var(--catalyst-body-color);
}

.dropdown-profile .nav .nav-link {
    font-weight: var(--catalyst-font-weight-normal) !important;
}

/* Sidebar/List Groups */
.list-group-item {
    font-family: var(--catalyst-font-family-base);
    font-size: var(--catalyst-font-size-sm);
    color: var(--catalyst-body-color);
}

.sidebar-menu li a {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal);
    font-size: var(--catalyst-font-size-sm);
    color: var(--catalyst-body-color);
}

.sidebar-menu li a strong,
.sidebar-menu li .heading {
    font-weight: var(--catalyst-font-weight-semibold);
    font-size: var(--catalyst-font-size-sm);
}

/* Modals */
.modal-header {
    font-family: var(--catalyst-font-family-base);
    border-bottom: 1px solid var(--catalyst-border-color);
}

.modal-title {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-semibold);
    font-size: var(--catalyst-font-size-lg);
    color: var(--catalyst-body-color);
}

/* ========================================
   �📋 Tables - Clean
   ======================================== */

.table {
    color: var(--catalyst-body-color);
    font-size: var(--catalyst-font-size-sm);
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal);
    line-height: var(--catalyst-line-height-snug);
}

.table > :not(caption) > * > * {
    border-left-width: var(--phoenix-border-width);
    border-top-width: var(--phoenix-border-width);
}

.table > :not(caption) > * > *:last-child {
    border-right-width: var(--phoenix-border-width);
}

.table > thead > tr > th,
.table > thead > tr > th:last-child {
    border-left-width: 0;
    border-right-width: 0;
}

.table thead th {
    background-color: var(--catalyst-divider);
    color: var(--catalyst-body-color);
    font-weight: var(--catalyst-font-weight-semibold);
    font-size: var(--catalyst-font-size-sm);
    font-family: var(--catalyst-font-family-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: var(--catalyst-line-height-snug);
    border-bottom: 2px solid var(--catalyst-border-color);
    padding: 1rem;
}

.table tbody td {
    vertical-align: middle;
}

/* Les regles .table ci-dessus reintroduisent des bordures laterales/hautes que
   .table-borderless de Bootstrap ne remet pas a zero : on les neutralise ici. */
.table.table-borderless > :not(caption) > * > *,
.table.table-borderless > :not(caption) > * > *:last-child,
.table.table-borderless thead th {
    border-width: 0;
}

.table.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

.listing-table {
    border-collapse: separate;
    border-spacing: 0;
}

.listing-table thead th {
    vertical-align: middle;
}

.listing-table tbody tr {
    transition: background-color var(--catalyst-transition-fast) var(--catalyst-easing), box-shadow var(--catalyst-transition-fast) var(--catalyst-easing);
}

.listing-table tbody tr:hover {
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04);
}

.listing-actions-column {
    width: 1%;
    white-space: nowrap;
}

.listing-actions .btn {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.listing-actions .btn i {
    font-size: 0.85rem;
    line-height: 1;
}

/* Global listing tables style (shared pattern across components) */
.table.listing-table-ui {
    border-collapse: separate;
    border-spacing: 0;
}

.table.listing-table-ui.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
}

.table.listing-table-ui thead th {
    font-weight: var(--catalyst-font-weight-normal);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

.table.listing-table-ui tbody td {
    text-align: left;
    padding: 5px 1rem;
}

.table > tbody > tr > td:first-child {
    text-align: left;
    padding: 5px 1rem;
}

.table.listing-table-ui thead th:first-child {
    border-top-left-radius: var(--catalyst-radius-lg);
}

.table.listing-table-ui thead th:last-child {
    border-top-right-radius: var(--catalyst-radius-lg);
    white-space: nowrap;
}

.table.listing-table-ui tbody td:last-child {
    white-space: nowrap;
}

.table.listing-table-ui tbody td .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
}

.table.listing-table-ui tbody td .btn.btn-sm + .btn.btn-sm {
    margin-left: 0.25rem;
}

.btn-icon-action {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 0.65rem;
    border-width: 1px;
    border-style: solid;
    box-shadow: inset 0 1px 0 var(--catalyst-inset-highlight);
    transform: none;
    transition: transform var(--catalyst-transition-fast) var(--catalyst-easing),
        box-shadow var(--catalyst-transition-fast) var(--catalyst-easing),
        border-color var(--catalyst-transition-fast) var(--catalyst-easing),
        background-color var(--catalyst-transition-fast) var(--catalyst-easing),
        color var(--catalyst-transition-fast) var(--catalyst-easing);
}

.btn-icon-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--catalyst-shadow-xs), inset 0 1px 0 var(--catalyst-inset-highlight);
}

.btn-icon-action:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-icon-action i {
    font-size: 0.82rem;
}

.btn-icon-action--show {
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.35);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.95) 0%, rgba(219, 234, 254, 0.85) 100%);
}

.btn-icon-action--show:hover:not(:disabled) {
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.5);
    background: linear-gradient(180deg, rgba(219, 234, 254, 1) 0%, rgba(191, 219, 254, 0.95) 100%);
}

.btn-icon-action--edit {
    color: #9a3412;
    border-color: rgba(251, 146, 60, 0.42);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(254, 215, 170, 0.82) 100%);
}

.btn-icon-action--edit:hover:not(:disabled) {
    color: #c2410c;
    border-color: rgba(249, 115, 22, 0.55);
    background: linear-gradient(180deg, rgba(255, 237, 213, 1) 0%, rgba(253, 186, 116, 0.9) 100%);
}

[data-bs-theme="dark"] .btn-icon-action--show {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(37, 99, 235, 0.16);
}

[data-bs-theme="dark"] .btn-icon-action--show:hover:not(:disabled) {
    color: #bfdbfe;
    border-color: rgba(147, 197, 253, 0.55);
    background: rgba(37, 99, 235, 0.24);
}

[data-bs-theme="dark"] .btn-icon-action--edit {
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.42);
    background: rgba(249, 115, 22, 0.16);
}

[data-bs-theme="dark"] .btn-icon-action--edit:hover:not(:disabled) {
    color: #fed7aa;
    border-color: rgba(253, 186, 116, 0.55);
    background: rgba(249, 115, 22, 0.24);
}

.btn-icon-action--add {
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.4);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.96) 0%, rgba(187, 247, 208, 0.85) 100%);
}

.btn-icon-action--add:hover:not(:disabled) {
    color: #166534;
    border-color: rgba(22, 163, 74, 0.55);
    background: linear-gradient(180deg, rgba(220, 252, 231, 1) 0%, rgba(134, 239, 172, 0.9) 100%);
}

[data-bs-theme="dark"] .btn-icon-action--add {
    color: #7ee787;
    border-color: rgba(34, 197, 94, 0.42);
    background: rgba(34, 197, 94, 0.16);
}

[data-bs-theme="dark"] .btn-icon-action--add:hover:not(:disabled) {
    color: #a7f3d0;
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.24);
}

.btn-icon-action--activate {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.35);
    background-color: rgba(34, 197, 94, 0.08);
}

.btn-icon-action--activate:hover:not(:disabled) {
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.5);
    background-color: rgba(34, 197, 94, 0.14);
}

.btn-icon-action--deactivate {
    color: #9f1239;
    border-color: rgba(244, 63, 94, 0.35);
    background-color: rgba(244, 63, 94, 0.08);
}

.btn-icon-action--deactivate:hover:not(:disabled) {
    color: #be123c;
    border-color: rgba(244, 63, 94, 0.5);
    background-color: rgba(244, 63, 94, 0.14);
}

[data-bs-theme="dark"] .btn-icon-action--activate {
    color: #7ee787;
    border-color: rgba(34, 197, 94, 0.42);
    background-color: rgba(34, 197, 94, 0.16);
}

[data-bs-theme="dark"] .btn-icon-action--activate:hover:not(:disabled) {
    color: #a7f3d0;
    border-color: rgba(34, 197, 94, 0.55);
    background-color: rgba(34, 197, 94, 0.24);
}

[data-bs-theme="dark"] .btn-icon-action--deactivate {
    color: #ff9fb2;
    border-color: rgba(244, 63, 94, 0.42);
    background-color: rgba(244, 63, 94, 0.16);
}

[data-bs-theme="dark"] .btn-icon-action--deactivate:hover:not(:disabled) {
    color: #ffc9d4;
    border-color: rgba(244, 63, 94, 0.55);
    background-color: rgba(244, 63, 94, 0.24);
}

.table.listing-table-ui tbody td .btn.btn-sm.text-secondary,
.table.listing-table-ui tbody td .btn.btn-sm.text-primary {
    border: 1.5px solid var(--catalyst-border-color);
    background-color: var(--catalyst-surface-bg);
    border-radius: var(--catalyst-radius-lg);
    box-shadow: var(--catalyst-shadow-sm);
}

.table.listing-table-ui tbody td .btn.btn-sm.text-secondary:hover,
.table.listing-table-ui tbody td .btn.btn-sm.text-primary:hover {
    border-color: var(--catalyst-zinc-500);
    background-color: var(--catalyst-surface-bg);
    box-shadow: var(--catalyst-shadow-sm), inset 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.listing-table-staff thead th {
    font-weight: var(--catalyst-font-weight-normal);
    text-transform: none;
    letter-spacing: normal;
}

.listing-table-staff thead th:first-child {
    border-top-left-radius: var(--catalyst-radius-lg);
}

.listing-table-staff thead th:last-child {
    border-top-right-radius: var(--catalyst-radius-lg);
}

.listing-table-staff .listing-actions-column {
    width: auto;
    min-width: 14rem;
}

.listing-table-staff .listing-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
}

/* ========================================
   ✨ Focus States
   ======================================== */

:focus-visible {
    outline: 2px solid var(--catalyst-primary-500);
    outline-offset: 2px;
}

/* ========================================
   📱 Responsive
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   🔧 PROJECT SPECIFIC STYLES
   ======================================== */

.icon-badge-lg {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.icon-badge-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.dashboard-audit-log-icon {
    background-color: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.28) !important;
}

.modal {
    --phoenix-modal-width: 800px !important;
}

.fc .fc-h-event .fc-event-main::after, .fc .fc-daygrid-event .fc-event-main::after {
    display: none !important;
}

.fc .fc-h-event .fc-event-main, .fc .fc-daygrid-event .fc-event-main {
    padding-left: 0px !important;
}

.fc .fc-timeGridDay-view .fc-v-event .fc-event-main:after, .fc .fc-timeGridWeek-view .fc-v-event .fc-event-main:after {
    display: none !important;
}

.fc .fc-timeGridDay-view .fc-v-event .fc-event-main, .fc .fc-timeGridWeek-view .fc-v-event .fc-event-main {
    padding-left: 0px !important;
}

.fc-daygrid, .fc-timegrid {
    --phoenix-calendar-bg: var(--catalyst-surface-bg) !important;
}

[data-calendar-component] .calendar-outline {
    border: 1px solid var(--catalyst-border-color);
    border-radius: var(--catalyst-radius-lg);
    background-color: var(--catalyst-surface-bg);
    overflow: hidden;
}

[data-calendar-component] .fc {
    --fc-border-color: var(--catalyst-border-color);
    --fc-page-bg-color: var(--catalyst-surface-bg);
    --fc-neutral-bg-color: var(--catalyst-surface-subtle-bg);
    --fc-today-bg-color: rgba(59, 130, 246, 0.08);
    font-family: var(--catalyst-font-family-base);
    font-size: var(--catalyst-font-size-sm);
    color: var(--catalyst-body-color);
}

[data-calendar-component] .fc-theme-standard .fc-scrollgrid,
[data-calendar-component] .fc-theme-standard td,
[data-calendar-component] .fc-theme-standard th {
    border-color: var(--catalyst-border-color);
}

[data-calendar-component] .fc-col-header-cell-cushion,
[data-calendar-component] .fc-timegrid-axis-cushion,
[data-calendar-component] .fc-timegrid-slot-label-cushion,
[data-calendar-component] .fc-daygrid-day-number {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal);
    color: var(--catalyst-body-color);
}

[data-calendar-component] .fc .fc-event {
    border-radius: 0.55rem;
    border-width: 1px;
    box-shadow: none;
}

[data-calendar-component] .fc .fc-daygrid-event {
    margin: 2px 4px 0;
}

[data-calendar-component] .fc .fc-daygrid-event .fc-event-main,
[data-calendar-component] .fc .fc-timegrid-event .fc-event-main {
    padding: 0.22rem 0.45rem !important;
}

[data-calendar-component] .fc .fc-event-title {
    font-family: var(--catalyst-font-family-base);
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 200 !important;
}

[data-calendar-component] .fc .fc-event-time {
    font-size: 0.74rem;
    font-weight: var(--catalyst-font-weight-semibold);
    line-height: 1.2;
}

[data-calendar-component] .fc .fc-daygrid-day-frame,
[data-calendar-component] .fc .fc-timegrid-col-frame {
    cursor: pointer;
}

.calendar-expected-users-panel {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-bs-theme="dark"] .calendar-expected-users-panel {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.calendar-expected-users-label {
    font-size: .7rem;
    letter-spacing: .02em;
}

.calendar-expected-users-loading {
    font-size: .68rem;
}

.calendar-expected-users-loading-spinner {
    width: .75rem;
    height: .75rem;
}

.calendar-expected-users-chip {
    cursor: pointer;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.55;
    border: 1px solid var(--catalyst-border-color);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.calendar-expected-users-chip:hover {
    background-color: var(--catalyst-hover-bg);
    border-color: var(--catalyst-border-color);
    transform: translateY(-1px);
}

.calendar-expected-users-action {
    font-size: .68rem;
    line-height: 1.55;
    min-width: 5.75rem;
}

.calendar-expected-users-action-spinner {
    width: .7rem;
    height: .7rem;
}

.calendar-expected-users-select-icon {
    color: #28a745;
}

.calendar-expected-users-clear-icon {
    color: #dc3545;
}

[data-bs-theme="dark"] .calendar-expected-users-select-icon {
    color: var(--catalyst-green-800);
}

[data-bs-theme="dark"] .calendar-expected-users-clear-icon {
    color: var(--catalyst-red-800);
}

.capacity-skill-row-handle-cell {
    width: 1px;
    vertical-align: middle;
}

.capacity-skill-drag-handle {
    cursor: grab;
    touch-action: none;
    width: 28px;
    height: 28px;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.capacity-skill-drag-handle:active {
    cursor: grabbing;
}

.capacity-skill-drag-icon {
    width: 12px;
    height: 18px;
}

.capacity-skill-input-shell {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.capacity-skill-row-actions-cell {
    width: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.capacity-skill-action-btn {
    width: 30px;
    height: 30px;
}

.capacity-skill-dropzone {
    min-height: 5rem;
    border: 2px dashed #ced4da;
    border-radius: .375rem;
    padding: .25rem;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.capacity-skill-form [data-dnd-item] {
    transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

.capacity-skill-form [data-dnd-item].is-dragging {
    opacity: .65;
    transform: scale(.995);
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
}

.capacity-skill-form [data-dnd-category-value].is-dnd-ready {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .05);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .25);
}

.capacity-skill-form [data-dnd-category-value].is-dnd-active {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .12);
    box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .35);
}

.tree-connector {
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.2rem;
    margin-left: 10px;
    border-left: 2px solid #d0d5dd;
    border-bottom: 2px solid #d0d5dd;
    align-self: flex-end;
    margin-bottom: 2px;
    border-radius: 0 0 0 3px;
}

.tree-spacer {
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
}

.tree-indent {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-manager-sidebar .treeview-list-item,
.file-manager-sidebar .treeview-list-item a,
.file-manager-sidebar .treeview-text {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal) !important;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--catalyst-body-color);
}

.file-manager-sidebar,
.file-manager-content {
    font-family: var(--catalyst-font-family-base);
}

.file-manager-sidebar h5,
.file-manager-sidebar h6,
.file-manager-content h5,
.file-manager-content h6 {
    font-family: var(--catalyst-font-family-base);
    font-weight: var(--catalyst-font-weight-normal);
    font-size: var(--catalyst-font-size-sm);
    line-height: var(--catalyst-line-height-snug);
    text-transform: none;
    letter-spacing: normal;
}

.file-manager-sidebar-panel {
    background-color: transparent !important;
}

.file-manager-storage-toggle {
    width: 100%;
    margin-top: 0.85rem !important;
    padding: 0.55rem 0.7rem !important;
    border: 1px solid var(--catalyst-border-color);
    border-radius: 0.65rem;
    background-color: var(--catalyst-surface-bg);
    color: var(--catalyst-body-color);
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.file-manager-storage-toggle:hover {
    background-color: var(--catalyst-hover-bg);
    border-color: var(--catalyst-zinc-300);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.file-manager-storage-toggle:focus-visible {
    outline: 2px solid var(--catalyst-primary-500);
    outline-offset: 1px;
}

.file-manager-storage-toggle .toggle-icon {
    transition: transform .18s ease;
}

.file-manager-storage-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
}

.setting-toggle {
    right: -25px;
}


.content {
    min-height: 100vh;
    padding: calc(var(--phoenix-navbar-top-height) + 2rem) 1.5rem 6.375rem 1.5rem;
    position: relative;
    padding-bottom: 6rem;
}