@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);
}

/* === 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;
}

@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;
    }
}