/**
 * Nom du fichier : shared.styles.css
 * Description : Styles CSS partagés entre tous les layouts.
 *               Variables CSS custom, reset complémentaire à Tailwind,
 *               utilitaires réutilisables, transitions, scrollbar, etc.
 *               Charte couleur harmonisée : #0E7490 (turquoise Reserva) partout.
 * Module : Core / UI
 * Auteur : Reserva
 * Date de création : 12/04/2026
 * Dernière modification : 14/04/2026
 */

/* ==========================================================================
   1. Variables CSS custom — Palette de couleurs Reserva
   Inspirée de Djibouti : bleu océan (turquoise), sable doré, vert oasis
   ========================================================================== */
:root {
    /* Couleurs primaires — Turquoise océan (#0E7490) */
    --reserva-primary: #0E7490;
    --reserva-primary-light: #22D3EE;
    --reserva-primary-dark: #0C4A6E;
    --reserva-primary-50: #ECFEFF;
    --reserva-primary-100: #CFFAFE;
    --reserva-primary-600: #0891B2;
    --reserva-primary-700: #0E7490;
    --reserva-primary-800: #155E75;
    --reserva-primary-900: #164E63;

    /* Couleurs secondaires — Sable doré */
    --reserva-secondary: #D97706;
    --reserva-secondary-light: #FBBF24;
    --reserva-secondary-dark: #92400E;

    /* Couleurs d'accent — Vert oasis */
    --reserva-accent: #059669;
    --reserva-accent-light: #34D399;
    --reserva-accent-dark: #065F46;

    /* Couleurs sémantiques */
    --reserva-success: #16A34A;
    --reserva-warning: #EAB308;
    --reserva-danger: #DC2626;
    --reserva-info: #2563EB;

    /* Couleurs de texte */
    --reserva-text: #1E293B;
    --reserva-text-light: #64748B;
    --reserva-text-muted: #94A3B8;

    /* Couleurs de fond */
    --reserva-bg: #F8FAFC;
    --reserva-bg-card: #FFFFFF;
    --reserva-bg-sidebar: #0F172A;

    /* Bordures */
    --reserva-border: #E2E8F0;
    --reserva-border-focus: #0E7490;

    /* Variable focus utilisée par accessibility.styles.css */
    --focus-color: #0E7490;

    /* Ombres */
    --reserva-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --reserva-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --reserva-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --reserva-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Rayons de bordure */
    --reserva-radius-sm: 0.375rem;
    --reserva-radius: 0.5rem;
    --reserva-radius-lg: 0.75rem;
    --reserva-radius-xl: 1rem;

    /* Transitions */
    --reserva-transition: all 0.2s ease-in-out;
    --reserva-transition-slow: all 0.3s ease-in-out;

    /* Largeurs de sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;

    /* Hauteur du header */
    --header-height: 64px;
}

/* ==========================================================================
   2. Mode sombre — Variables overridées
   ========================================================================== */

/* ==========================================================================
   3. Reset et base
   ========================================================================== */

/* Scrollbar personnalisée (Webkit) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--reserva-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--reserva-text-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--reserva-text-light);
}

/* Sélection de texte */
::selection {
    background-color: var(--reserva-primary-100);
    color: var(--reserva-primary-900);
}


/* Transitions douces sur tous les éléments interactifs */
a, button, input, select, textarea {
    transition: var(--reserva-transition);
}

/* Focus visible pour l'accessibilité */
*:focus-visible {
    outline: 2px solid var(--reserva-border-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   4. Utilitaires custom
   ========================================================================== */

/* Conteneur principal avec sidebar */
.reserva-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--reserva-bg);
    color: var(--reserva-text);
}

/* Zone de contenu principal */
.reserva-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding-top: var(--header-height);
    transition: margin-left 0.3s ease;
}

/* Quand la sidebar est réduite */
.sidebar-collapsed .reserva-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Sidebar de navigation */
.reserva-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--reserva-bg-sidebar);
    color: #E2E8F0;
    overflow-y: auto;
    transition: width 0.3s ease;
    z-index: 40;
}

.sidebar-collapsed .reserva-sidebar {
    width: var(--sidebar-collapsed-width);
}

/* Header fixe */
.reserva-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background-color: var(--reserva-bg-card);
    border-bottom: 1px solid var(--reserva-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    z-index: 30;
    transition: left 0.3s ease;
    box-shadow: var(--reserva-shadow-sm);
}

.sidebar-collapsed .reserva-header {
    left: var(--sidebar-collapsed-width);
}

/* Carte/Panneau standard */
.reserva-card {
    background-color: var(--reserva-bg-card);
    border: 1px solid var(--reserva-border);
    border-radius: var(--reserva-radius-lg);
    box-shadow: var(--reserva-shadow-sm);
    padding: 1.5rem;
}

/* Badge/Étiquette */
.reserva-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}

/* ==========================================================================
   5. Animations
   ========================================================================== */

/* Fade in pour les pages */
@keyframes reserva-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reserva-animate-in {
    animation: reserva-fade-in 0.3s ease-out forwards;
}

/* Pulse pour les notifications */
@keyframes reserva-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.reserva-pulse {
    animation: reserva-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Slide pour le menu mobile */
@keyframes reserva-slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.reserva-slide-in {
    animation: reserva-slide-in 0.3s ease-out forwards;
}

/* ==========================================================================
   6. Responsive — Mobile first
   ========================================================================== */

/* Mobile : pas de sidebar fixe, header plein écran */
@media (max-width: 1023px) {
    .reserva-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    .reserva-sidebar.open {
        transform: translateX(0);
    }

    .reserva-content {
        margin-left: 0;
    }

    .reserva-header {
        left: 0;
    }

    /* Overlay quand sidebar ouverte sur mobile */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 35;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

/* ==========================================================================
   7. Impression
   ========================================================================== */
@media print {
    .reserva-sidebar,
    .reserva-header,
    .no-print {
        display: none !important;
    }

    .reserva-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    .reserva-card {
        border: 1px solid #ddd;
        box-shadow: none;
        break-inside: avoid;
    }
}