@import url("../Base/ui-icons.css?v=11cafb29082a");

/* === VARIABLES GLOBALES D'APPARENCE === */
:root {
    --primary-color: #4F46E5;
    --primary-color-dark: #4338CA;
    --primary-color-light: #EEF2FF;
    --on-primary-color: #ffffff;
    --base-font-size: 16px;
    --spacing-multiplier: 1;
    --ui-hairline: rgba(148, 163, 184, 0.12);
    --ui-hairline-strong: rgba(148, 163, 184, 0.2);
    --ui-control-bg: rgba(148, 163, 184, 0.1);
    --ui-control-bg-hover: rgba(148, 163, 184, 0.16);
}

/* Opaque primary variants. Gradient references use their average visible color. */
:root,
:root[data-theme="dark"] {
    --primary-variant-important: var(--primary-color);
    --primary-variant-secondary: color-mix(in srgb, #ffffff 4.5%, color-mix(in srgb, var(--primary-color) 12%, #191924));
    --primary-variant-bg-1: color-mix(in srgb, var(--primary-color) 16%, #191924);
    --primary-variant-bg-2: color-mix(in srgb, #ffffff 3.25%, var(--primary-variant-bg-1));
    --primary-variant-bg-3: color-mix(in srgb, var(--primary-color) 31.25%, #191924);
    --primary-variant-bg-4: color-mix(in srgb, #000000 8%, var(--primary-variant-bg-1));
    --primary-variant-bg-5: color-mix(in srgb, #ffffff 7%, var(--primary-variant-bg-2));
}

:root[data-theme="light"] {
    --primary-variant-secondary: color-mix(in srgb, var(--primary-color) 0.32%, #f8fafc);
    --primary-variant-bg-1: color-mix(in srgb, var(--primary-color) 7%, #ffffff);
    --primary-variant-bg-2: color-mix(in srgb, var(--primary-color) 0.56%, #ffffff);
    --primary-variant-bg-3: color-mix(in srgb, var(--primary-color) 6%, #ffffff);
    --primary-variant-bg-4: color-mix(in srgb, #000000 3%, var(--primary-variant-bg-1));
    --primary-variant-bg-5: color-mix(in srgb, #ffffff 70%, var(--primary-variant-bg-2));
}

/* === TAILLE DE POLICE === */
html {
    font-size: var(--base-font-size, 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 1rem;
}

h1 {
    font-size: calc(var(--base-font-size, 16px) * 2);
}

h2 {
    font-size: calc(var(--base-font-size, 16px) * 1.75);
}

h3 {
    font-size: calc(var(--base-font-size, 16px) * 1.5);
}

h4 {
    font-size: calc(var(--base-font-size, 16px) * 1.25);
}

p, label, input, button, select, textarea, li, td, th {
    font-size: 1rem;
}

/* === DENSITÉ (ESPACEMENT) === */
[data-density="compact"] {
    --workspace-content-padding: 6px;
    --workspace-fragment-padding: clamp(8px, 1vw, 14px);
    --workspace-fragment-gap: 10px;
    --workspace-mailbox-padding: 0.6rem;
    --workspace-mailbox-gap: 0.65rem;
}

[data-density="compact"] .email-list-item,
[data-density="compact"] .category-item {
    padding: calc(0.75rem * var(--spacing-multiplier, 0.75));
}

[data-density="comfortable"] {
    --workspace-content-padding: 10px;
    --workspace-fragment-padding: clamp(14px, 1.6vw, 22px);
    --workspace-fragment-gap: clamp(14px, 1.7vw, 22px);
    --workspace-mailbox-padding: 0.82rem;
    --workspace-mailbox-gap: 0.85rem;
}

[data-density="comfortable"] .email-list-item,
[data-density="comfortable"] .category-item {
    padding: calc(2rem * var(--spacing-multiplier, 1.25));
}

[data-density="compact"] .main-content,
[data-density="comfortable"] .main-content {
    padding: 0;
}

[data-density="compact"] .content-area,
[data-density="comfortable"] .content-area {
    padding: var(--workspace-content-padding);
}

[data-density="compact"] .content-area:has(.welcome-container),
[data-density="comfortable"] .content-area:has(.welcome-container) {
    padding: 0 !important;
}

[data-density="compact"] .content-area:has(> .app-page),
[data-density="comfortable"] .content-area:has(> .app-page),
[data-density="compact"] .content-area:has(> .mailbox-container),
[data-density="comfortable"] .content-area:has(> .mailbox-container),
[data-density="compact"] .content-area:has(> .workspace-view-root > .app-page),
[data-density="comfortable"] .content-area:has(> .workspace-view-root > .app-page),
[data-density="compact"] .content-area:has(> .workspace-view-root > .mailbox-container),
[data-density="comfortable"] .content-area:has(> .workspace-view-root > .mailbox-container) {
    padding: 0 !important;
}

/* Espacement des boutons */
[data-density="compact"] .btn:not(.btn-sync-folders):not(.icon-btn),
[data-density="compact"] button:not(.btn-sync-folders):not(.icon-btn):not(:has(svg)) {
    padding: 0.4rem 0.8rem;
}

[data-density="comfortable"] .btn:not(.btn-sync-folders):not(.icon-btn),
[data-density="comfortable"] button:not(.btn-sync-folders):not(.icon-btn):not(:has(svg)) {
    padding: 0.8rem 1.6rem;
}

/* === COULEUR PRIMAIRE === */
.btn-primary,
.btn-save,
.save-btn,
.submit-btn,
button.primary,
button[type="submit"],
input[type="submit"] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-save:hover,
.save-btn:hover,
.submit-btn:hover,
button.primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
}

/* Liens avec couleur primaire */
a.primary,
.link-primary,
a:not(.btn):not(.menu-item) {
    color: var(--primary-color) !important;
}

a.primary:hover,
.link-primary:hover,
a:not(.btn):not(.menu-item):hover {
    color: var(--primary-color-dark) !important;
}

/* Bordures avec couleur primaire */
.border-primary {
    border-color: var(--primary-color) !important;
}

/* Backgrounds avec couleur primaire */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-light {
    background-color: var(--primary-color-light) !important;
}

/* Texte avec couleur primaire */
.text-primary {
    color: var(--primary-color) !important;
}

/* Éléments sélectionnés */
input[type="radio"]:checked ~ label,
input[type="checkbox"]:checked ~ label,
.selected {
    border-color: var(--primary-color) !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color, #4F46E5) 78%, white 22%);
    outline-offset: 3px;
}

/* Cartes et sections avec bordure primaire quand active */
.theme-card:has(input[type="radio"]:checked),
.density-card:has(input[type="radio"]:checked),
.color-option:has(input[type="radio"]:checked) {
    border-color: var(--primary-color) !important;
}

/* Background avec opacité pour light theme - meilleur contraste */
.main-content[data-theme="light"] .theme-card:has(input[type="radio"]:checked),
.main-content[data-theme="light"] .density-card:has(input[type="radio"]:checked),
.main-content[data-theme="light"] .color-option:has(input[type="radio"]:checked) {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Background avec opacité pour dark theme */
.main-content[data-theme="dark"] .theme-card:has(input[type="radio"]:checked),
.main-content[data-theme="dark"] .density-card:has(input[type="radio"]:checked),
.main-content[data-theme="dark"] .color-option:has(input[type="radio"]:checked) {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Barres de progression et chargement */
.progress-bar-fill,
.loading-bar-fill,
.progress-fill {
    background-color: var(--primary-color) !important;
}

/* Spinners */
.spinner,
.loader {
    border-top-color: var(--primary-color) !important;
}

/* Badges et tags primaires */
.badge-primary,
.tag-primary {
    background-color: var(--primary-color) !important;
    color: var(--on-primary-color, #ffffff) !important;
}

/* Active menu items */
.menu-item.active,
.nav-item.active {
    color: var(--primary-color) !important;
    border-left-color: var(--primary-color) !important;
}

.main-content:not([data-theme="high-contrast"]) {
    --app-page-border: var(--ui-hairline-strong);
    --mb-border: var(--ui-hairline);
    --mb-accent-border: color-mix(in srgb, var(--primary-color, #4F46E5) 24%, transparent);
    --settings-panel-border: var(--ui-hairline-strong);
    --settings-row-border: transparent;
    --appearance-card-border: var(--ui-hairline);
}

.main-content[data-theme="light"] {
    --ui-hairline: rgba(100, 116, 139, 0.12);
    --ui-hairline-strong: rgba(100, 116, 139, 0.18);
    --ui-control-bg: rgba(15, 23, 42, 0.045);
    --ui-control-bg-hover: rgba(15, 23, 42, 0.075);
}


/* === TRANSITIONS FLUIDES === */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html[data-theme-switching] body *,
html[data-theme-switching] body *::before,
html[data-theme-switching] body *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

html[data-theme-switching] .workspace-theme-slider {
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

html[data-theme-switching] .workspace-theme-slider::before {
    transition: left 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}

html[data-theme-transition]::view-transition-old(root),
html[data-theme-transition]::view-transition-new(root) {
    animation-duration: 0.18s;
    animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}