/* ============================================================
   THÈME — Variables sémantiques (sombre par défaut)
   ============================================================
   Usage : ne jamais écrire de couleur en dur dans les templates.
   Toujours utiliser var(--...).
   ============================================================ */

:root,
[data-theme="dark"] {
    /* ---- Fonds ---- */
    --bg-page:          #1F2937;
    --bg-main:          #2E2E2E;
    --bg-surface:       #3B3B3B;
    --bg-elevated:      #374151;
    --bg-button:        #0a3883;
    --bg-button-hover:  #0c4a99;
    --bg-hover:         #4B5563;

    /* ---- Textes ---- */
    --text-primary:     #AECBD6;
    --text-secondary:   #9CA3AF;
    --text-muted:       #6B7280;
    --text-inverse:     #FFFFFF;
    --text-heading:     #22d3ee;

    /* ---- Bordures ---- */
    --border-default:   #4B5563;
    --border-subtle:    #374151;
    --border-strong:    #6B7280;

    /* ---- Accents ---- */
    --accent-primary:   #22d3ee;
    --accent-success:   #10b981;
    --accent-green:     #2B9C62;
    --accent-blue:      #0a3883;
    --accent-blue-dark: #08275a;
    --accent-green-dark:#107C41;
    --accent-warning:   #f59e0b;
    --accent-danger:    #ef4444;
    --accent-info:      #3b82f6;

    /* ---- Ombres ---- */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.4);

    /* ---- Composants ---- */
    --navbar-bg:        #1F2937;
    --footer-bg:        #1F2937;
    --modal-overlay:    rgba(0, 0, 0, 0.4);
    --modal-bg:         #2E2E2E;

    /* ---- Tables ---- */
    --table-header-bg:  #374151;
    --table-row-hover:  #3B3B3B;
    --table-border:     #4B5563;

    /* ---- Formulaires ---- */
    --input-bg:         rgba(30, 30, 30, 0.8);
    --input-border:     rgba(75, 85, 99, 0.5);
    --input-text:       #FFFFFF;
    --input-placeholder:#6B7280;
    --input-focus:      #2B9C62;

    /* ---- Scrollbar ---- */
    --scrollbar-track:  #1F2937;
    --scrollbar-thumb:  #4B5563;
}

/* ============================================================
   THÈME CLAIR
   ============================================================ */
[data-theme="light"] {
    /* ---- Fonds ---- */
    --bg-page:          #F5F6F8;
    --bg-main:          #FFFFFF;
    --bg-surface:       #FFFFFF;
    --bg-elevated:      #F2F3F5;
    --bg-hover:         #E8EAED;

    /* ---- Textes ---- */
    --text-primary:     #1F2023;
    --text-secondary:   #54585C;
    --text-muted:       #8A8E92;
    --text-inverse:     #FFFFFF;
    --text-heading:     #0e7490;

    /* ---- Bordures ---- */
    --border-default:   #D4D6D8;
    --border-subtle:    #E5E7EA;
    --border-strong:    #8A8E92;

    /* ---- Accents ---- */
    --accent-primary:   #0ea5e9;
    --accent-success:   #059669;
    --accent-green:     #2B9C62;
    --accent-green-dark:#107C41;
    --accent-warning:   #d97706;
    --accent-danger:    #dc2626;
    --accent-info:      #0284c7;

    /* ---- Ombres ---- */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Composants ---- */
    --navbar-bg:        #FFFFFF;
    --footer-bg:        #F2F3F5;
    --modal-overlay:    rgba(0, 0, 0, 0.4);
    --modal-bg:         #FFFFFF;

    /* ---- Tables ---- */
    --table-header-bg:  #F2F3F5;
    --table-row-hover:  #F5F6F8;
    --table-border:     #E5E7EA;

    /* ---- Formulaires ---- */
    --input-bg:         #FFFFFF;
    --input-border:     #D4D6D8;
    --input-text:       #1F2023;
    --input-placeholder:#8A8E92;
    --input-focus:      #2B9C62;

    /* ---- Scrollbar ---- */
    --scrollbar-track:  #E5E7EA;
    --scrollbar-thumb:  #8A8E92;
    /* ---- Modales ---- */
    --modal-overlay: rgba(15, 23, 42, 0.5);
}

/* ============================================================
   BASE — Applique les variables aux éléments globaux
   ============================================================ */
body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Scrollbar globale */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-green);
}

main.app-main {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

/* ============================================================
   COMPOSANTS COMMUNS
   ============================================================ */
.app-navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
}

.app-navbar-item {
    transition: background-color 0.15s ease;
}
.app-navbar-item:hover {
    background-color: var(--bg-hover);
}

.app-navbar-username {
    color: var(--accent-green);
}

.app-footer {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--border-default);
    color: var(--text-muted);
}

/* ============================================================
   MESSAGES FLASH
   ============================================================ */
.message-success {
    background-color: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-success);
    color: var(--accent-success);
}
.message-error {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}
.message-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: var(--accent-warning);
    color: var(--accent-warning);
}
.message-info,
.message-debug {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-info);
    color: var(--accent-info);
}
.message-item:not([class*="message-"]) {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-info);
    color: var(--accent-info);
}

[data-theme="light"] .message-success { background-color: rgba(16, 185, 129, 0.12); color: #065f46; }
[data-theme="light"] .message-error   { background-color: rgba(239, 68, 68, 0.12);  color: #991b1b; }
[data-theme="light"] .message-warning { background-color: rgba(245, 158, 11, 0.12); color: #92400e; }
[data-theme="light"] .message-info,
[data-theme="light"] .message-debug   { background-color: rgba(59, 130, 246, 0.12); color: #1e40af; }

/* ============================================================
   COMPOSANTS RÉUTILISABLES
   ============================================================ */
.app-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

.app-input {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.app-input::placeholder { color: var(--input-placeholder); }
.app-input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(43, 156, 98, 0.15);
}
.app-input-error { border-color: var(--accent-danger) !important; }

.app-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--accent-green);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background-color 0.15s, opacity 0.15s;
}
.app-btn-primary:hover {
    background-color: var(--accent-green-dark);
    opacity: 0.95;
}

.app-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s;
}
.app-btn-secondary:hover {
    background-color: var(--bg-hover);
}

.app-alert {
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5rem;
}
.app-alert-error   { background-color: rgba(239, 68, 68, 0.15);  border-color: var(--accent-danger);  color: var(--accent-danger); }
.app-alert-success { background-color: rgba(16, 185, 129, 0.15); border-color: var(--accent-success); color: var(--accent-success); }
.app-alert-warning { background-color: rgba(245, 158, 11, 0.15); border-color: var(--accent-warning); color: var(--accent-warning); }
.app-alert-info    { background-color: rgba(59, 130, 246, 0.15); border-color: var(--accent-info);    color: var(--accent-info); }

.app-btn-pagination {
    padding: 0.25rem 0.75rem;
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    cursor: pointer;
}
.app-btn-pagination:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-primary);
}

.app-pagination-current {
    padding: 0.25rem 0.75rem;
    background-color: var(--accent-primary);
    color: #0f172a;
    border-radius: 0.375rem;
    font-weight: 600;
}

.modal-close-btn { color: var(--text-muted); }
.modal-close-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* ============================================================
   SURCHARGES TAILWIND → VARIABLES DE THÈME
   ============================================================
   Permet aux classes Tailwind en dur (bg-gray-800, text-white,
   border-gray-700, etc.) de réagir au changement de thème,
   sans avoir à modifier tous les templates.
   À retirer au fur et à mesure de la migration des templates.
   ============================================================ */

/* ---- Fonds sombres → variables (thème clair) ---- */
[data-theme="light"] .bg-gray-900 {
    background-color: var(--bg-page) !important;
}
[data-theme="light"] .bg-gray-800 {
    background-color: var(--bg-surface) !important;
}
[data-theme="light"] .bg-gray-700 {
    background-color: var(--bg-elevated) !important;
}
[data-theme="light"] .bg-gray-600 {
    background-color: var(--bg-hover) !important;
}

/* Couleurs fixes hexadécimales courantes */
[data-theme="light"] .bg-\[\#2E2E2E\] {
    background-color: var(--bg-main) !important;
}
[data-theme="light"] .bg-\[\#525252\] {
    background-color: var(--bg-page) !important;
}
[data-theme="light"] .bg-\[\#3B3B3B\] {
    background-color: var(--bg-surface) !important;
}
[data-theme="light"] .bg-\[\#1F2937\] {
    background-color: var(--bg-page) !important;
}

/* ---- Textes clairs → variables (thème clair) ---- */
[data-theme="light"] .text-white {
    color: var(--text-primary) !important;
}
[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200 {
    color: var(--text-primary) !important;
}
[data-theme="light"] .text-gray-300 {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500 {
    color: var(--text-muted) !important;
}

/* ---- Bordures ---- */
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-600,
[data-theme="light"] .border-gray-500 {
    border-color: var(--border-default) !important;
}
[data-theme="light"] .divide-gray-700 > * + *,
[data-theme="light"] .divide-gray-800 > * + *,
[data-theme="light"] .divide-green-800 > * + * {
    border-color: var(--border-default) !important;
}

/* ---- Inputs Tailwind ---- */
[data-theme="light"] input.bg-gray-700,
[data-theme="light"] input.bg-gray-600,
[data-theme="light"] textarea.bg-gray-700,
[data-theme="light"] textarea.bg-gray-600,
[data-theme="light"] select.bg-gray-700,
[data-theme="light"] select.bg-gray-600 {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--input-placeholder) !important;
}

/* ---- Hover ---- */
[data-theme="light"] .hover\:bg-gray-700:hover,
[data-theme="light"] .hover\:bg-gray-600:hover,
[data-theme="light"] .hover\:bg-gray-800:hover {
    background-color: var(--bg-hover) !important;
}
[data-theme="light"] .hover\:text-white:hover {
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   5. NOTIFICATIONS (TOASTS)
   ══════════════════════════════════════════════════════════════ */

.toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 280px;
    max-width: 420px;

    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg), 0 12px 40px rgba(0, 0, 0, 0.25);

    animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    overflow: hidden;
    pointer-events: auto;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
}

.toast i {
    font-size: 20px;
    flex-shrink: 0;
}

.toast .toast-message {
    flex: 1;
}

.toast .toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s, background-color 0.15s;
    flex-shrink: 0;
}
.toast .toast-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* Types : barre latérale + icône */
.toast.toast-success::before  { background: var(--accent-green); }
.toast.toast-success i        { color: var(--accent-green); }

.toast.toast-error::before    { background: var(--accent-danger); }
.toast.toast-error i          { color: var(--accent-danger); }

.toast.toast-warning::before  { background: var(--accent-warning); }
.toast.toast-warning i        { color: var(--accent-warning); }

.toast.toast-info::before     { background: var(--accent-info); }
.toast.toast-info i           { color: var(--accent-info); }

/* Animation de sortie */
.toast.toast-hiding {
    animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(120%);
    }
}

@media (max-width: 640px) {
    .toast {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
}