/*
 * CreaSlot — Design System
 * Source de vérité : docs/design-tokens.md
 * Préfixe systématique : cs- pour toutes les classes custom
 */

/* ============================================================
   1. VARIABLES CSS (Design Tokens)
   ============================================================ */

:root {
    /* Couleurs principales CreaSlot */
    --cs-blue-primary:   #1F4E79;
    --cs-blue-secondary: #2E75B6;
    --cs-blue-light:     #A5C8FF;
    --cs-blue-admin:     #0F3556;

    /* Couleurs types de RDV */
    --cs-green-presentiel: #28A745;
    --cs-orange-visio:     #FD7E14;
    --cs-blue-telephone:   #007BFF;

    /* Couleurs sémantiques */
    --cs-success: #28A745;
    --cs-danger:  #DC3545;
    --cs-warning: #FD7E14;
    --cs-info:    #17A2B8;

    /* Fonds */
    --cs-bg-page:   #F8F9FA;
    --cs-bg-card:   #FFFFFF;
    --cs-bg-subtle: #F1F3F5;
    --cs-bg-admin:  #0F3556;

    /* Textes */
    --cs-text-primary:   #1E1E1E;
    --cs-text-secondary: #6C757D;
    --cs-text-light:     #FFFFFF;
    --cs-text-disabled:  #ADB5BD;

    /* Bordures */
    --cs-border:       #DEE2E6;
    --cs-border-input: #CED4DA;
    --cs-border-focus: #1F4E79;

    /* Typographie */
    --cs-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --cs-fs-tiny:     0.75rem;   /* 12px */
    --cs-fs-small:    0.875rem;  /* 14px */
    --cs-fs-base:     1rem;      /* 16px */
    --cs-fs-h4:       1.125rem;  /* 18px */
    --cs-fs-h3:       1.25rem;   /* 20px */
    --cs-fs-h2:       1.5rem;    /* 24px */
    --cs-fs-h1:       1.875rem;  /* 30px */
    --cs-fw-normal:   400;
    --cs-fw-medium:   500;
    --cs-fw-semibold: 600;
    --cs-fw-bold:     700;

    /* Espacements (échelle xs → xxl) */
    --cs-space-xs:  4px;
    --cs-space-sm:  8px;
    --cs-space-md:  16px;
    --cs-space-lg:  24px;
    --cs-space-xl:  32px;
    --cs-space-xxl: 48px;

    /* Rayons de bordure */
    --cs-radius-sm: 4px;
    --cs-radius-md: 6px;
    --cs-radius-lg: 8px;
    --cs-radius-xl: 12px;

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

    /* Surcharges Bootstrap 5 */
    --bs-primary:        #1F4E79;
    --bs-success:        #28A745;
    --bs-warning:        #FD7E14;
    --bs-danger:         #DC3545;
    --bs-info:           #17A2B8;
    --bs-body-bg:        #F8F9FA;
    --bs-body-color:     #1E1E1E;
    --bs-border-color:   #DEE2E6;
    --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
    --bs-border-radius:  var(--cs-radius-md);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

.cs-body {
    font-family: var(--cs-font-family);
    background-color: var(--cs-bg-page);
    color: var(--cs-text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

:focus-visible {
    outline: 2px solid var(--cs-blue-primary);
    outline-offset: 2px;
    border-radius: var(--cs-radius-sm);
}

/* ============================================================
   3. LAYOUT
   ============================================================ */

.cs-main {
    flex: 1;
    padding: var(--cs-space-xl) 0;
}

.cs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--cs-space-lg);
}

/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */

.cs-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--cs-shadow-sm);
}

.cs-nav {
    background-color: var(--cs-blue-primary);
    min-height: 60px;
}

.cs-navbar-brand {
    color: var(--cs-text-light) !important;
    font-weight: var(--cs-fw-bold);
    font-size: var(--cs-fs-h4);
    text-decoration: none;
    letter-spacing: -0.3px;
}

.cs-navbar-brand:hover {
    color: var(--cs-blue-light) !important;
}

.cs-nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: var(--cs-fs-small);
    font-weight: var(--cs-fw-medium);
    padding: var(--cs-space-sm) var(--cs-space-md) !important;
    border-radius: var(--cs-radius-md);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cs-nav-link:hover,
.cs-nav-link.active {
    color: var(--cs-text-light) !important;
    background-color: rgba(255, 255, 255, 0.12);
}

/* Avatar initiales */
.cs-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--cs-blue-secondary);
    color: var(--cs-text-light);
    font-size: var(--cs-fs-tiny);
    font-weight: var(--cs-fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

/* ============================================================
   5. BANDEAU ENVIRONNEMENT
   ============================================================ */

.cs-env-banner {
    padding: 6px var(--cs-space-md);
    font-weight: var(--cs-fw-bold);
    font-size: var(--cs-fs-tiny);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.cs-env-banner--preprod {
    background: var(--cs-warning);
    color: var(--cs-text-light);
}

.cs-env-banner--dev {
    background: var(--cs-info);
    color: var(--cs-text-light);
}

/* Différenciation visuelle preprod : fine barre orange persistante sur le header */
.cs-env-preprod .cs-header {
    border-top: 3px solid var(--cs-warning);
}

/* Production : aucun style particulier (état nominal) */
.cs-env-prod {
    /* état nominal */
}

/* ============================================================
   6. FOOTER
   ============================================================ */

.cs-footer {
    background-color: var(--cs-blue-primary);
    color: rgba(255, 255, 255, 0.75);
    padding: var(--cs-space-xxl) 0 var(--cs-space-lg);
    margin-top: auto;
}

.cs-footer-title {
    color: var(--cs-text-light);
    font-weight: var(--cs-fw-bold);
    font-size: var(--cs-fs-h4);
    margin-bottom: var(--cs-space-sm);
}

.cs-footer-link {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: var(--cs-fs-small);
    display: inline-block;
    margin-bottom: var(--cs-space-xs);
    transition: color 0.15s ease;
}

.cs-footer-link:hover {
    color: var(--cs-text-light);
    text-decoration: underline;
}

.cs-footer-divider {
    border-color: rgba(255, 255, 255, 0.15);
    margin: var(--cs-space-lg) 0 var(--cs-space-md);
}

.cs-footer-copyright {
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--cs-fs-tiny);
}

/* ============================================================
   7. CARTES
   ============================================================ */

.cs-card {
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
    transition: box-shadow 0.15s ease;
}

.cs-card:hover {
    box-shadow: var(--cs-shadow-md);
}

.cs-card-header {
    padding: var(--cs-space-md) var(--cs-space-lg);
    border-bottom: 1px solid var(--cs-border);
    font-weight: var(--cs-fw-semibold);
    background-color: var(--cs-bg-subtle);
    border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
}

.cs-card-body {
    padding: var(--cs-space-lg);
}

/* Carte créneau (usage US-2.x) */
.cs-slot-card {
    border-left: 4px solid var(--cs-blue-primary);
    padding: var(--cs-space-md);
    border-radius: var(--cs-radius-md);
    background: var(--cs-bg-card);
    box-shadow: var(--cs-shadow-sm);
}

/* ============================================================
   8. BOUTONS
   ============================================================ */

.cs-btn-primary {
    background-color: var(--cs-blue-primary);
    border-color: var(--cs-blue-primary);
    color: var(--cs-text-light);
    font-weight: var(--cs-fw-semibold);
    border-radius: var(--cs-radius-md);
    padding: 10px var(--cs-space-lg);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-btn-primary:hover,
.cs-btn-primary:focus {
    background-color: var(--cs-blue-secondary);
    border-color: var(--cs-blue-secondary);
    color: var(--cs-text-light);
}

.cs-btn-secondary {
    background-color: transparent;
    border-color: var(--cs-blue-primary);
    color: var(--cs-blue-primary);
    font-weight: var(--cs-fw-semibold);
    border-radius: var(--cs-radius-md);
    padding: 10px var(--cs-space-lg);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cs-btn-secondary:hover,
.cs-btn-secondary:focus {
    background-color: var(--cs-blue-primary);
    color: var(--cs-text-light);
}

/* ============================================================
   9. BADGES TYPES DE RDV
   ============================================================ */

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-xs);
    padding: 3px 10px;
    border-radius: 100px;
    font-size: var(--cs-fs-tiny);
    font-weight: var(--cs-fw-semibold);
}

.cs-badge-presentiel {
    background-color: rgba(40, 167, 69, 0.12);
    color: #1A6E2E;
}

.cs-badge-visio {
    background-color: rgba(253, 126, 20, 0.12);
    color: #A85200;
}

.cs-badge-telephone {
    background-color: rgba(0, 123, 255, 0.12);
    color: #004A99;
}

/* ============================================================
   10. FORMULAIRES
   ============================================================ */

.form-label {
    font-size: var(--cs-fs-small);
    font-weight: var(--cs-fw-semibold);
    color: var(--cs-text-primary);
    margin-bottom: 4px;
}

.form-control,
.form-select {
    border-color: var(--cs-border-input);
    border-radius: var(--cs-radius-md);
    font-family: var(--cs-font-family);
    font-size: var(--cs-fs-base);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cs-border-focus);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.15);
}

.form-text {
    font-size: var(--cs-fs-tiny);
    color: var(--cs-text-secondary);
}

/* Page d'auth (inscription, connexion) */
.cs-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cs-space-lg);
    background-color: var(--cs-bg-page);
}

.cs-auth-card {
    width: 100%;
    max-width: 520px;
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    padding: var(--cs-space-xl);
    box-shadow: var(--cs-shadow-md);
}

/* Override Bootstrap .btn-primary avec la couleur CreaSlot */
.btn-primary {
    --bs-btn-bg:           var(--cs-blue-primary);
    --bs-btn-border-color: var(--cs-blue-primary);
    --bs-btn-hover-bg:           var(--cs-blue-secondary);
    --bs-btn-hover-border-color: var(--cs-blue-secondary);
    --bs-btn-active-bg:          var(--cs-blue-admin);
    font-weight: var(--cs-fw-semibold);
    border-radius: var(--cs-radius-md);
}

/* Classes spécifiques aux pages d'authentification */
.cs-auth-logo {
    font-size: 1.5rem;
    font-weight: var(--cs-fw-bold);
    color: var(--cs-blue-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.cs-auth-title {
    font-size: var(--cs-fs-h2);
    font-weight: var(--cs-fw-bold);
    color: var(--cs-text-primary);
    margin-bottom: var(--cs-space-xs);
}

.cs-auth-subtitle {
    font-size: var(--cs-fs-small);
    color: var(--cs-text-secondary);
    margin-bottom: var(--cs-space-lg);
}

.cs-auth-footer {
    text-align: center;
    margin-top: var(--cs-space-lg);
    font-size: var(--cs-fs-small);
    color: var(--cs-text-secondary);
}

.cs-auth-footer a {
    color: var(--cs-blue-primary);
    font-weight: var(--cs-fw-semibold);
    text-decoration: none;
}

.cs-auth-footer a:hover {
    text-decoration: underline;
}

/* ============================================================
   11. ALERTES / FLASH MESSAGES
   ============================================================ */

.cs-alert {
    border-radius: var(--cs-radius-md);
    border: none;
    padding: var(--cs-space-md) var(--cs-space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--cs-space-sm);
    font-size: var(--cs-fs-small);
}

/* ============================================================
   12. PAGES D'ERREUR
   ============================================================ */

.cs-error-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--cs-space-xxl) var(--cs-space-lg);
}

.cs-error-code {
    font-size: 6rem;
    font-weight: var(--cs-fw-bold);
    color: var(--cs-blue-primary);
    line-height: 1;
    opacity: 0.15;
}

.cs-error-icon {
    font-size: 4rem;
    color: var(--cs-blue-primary);
    opacity: 0.4;
    margin-bottom: var(--cs-space-md);
}

/* ============================================================
   13. FullCalendar — agenda personnel (contraste RGAA)
   ============================================================ */

.cs-agenda-page .fc-v-event.cs-fc-creneau,
.cs-agenda-page .fc-v-event.cs-fc-creneau .fc-event-main,
.cs-agenda-page .fc-v-event.cs-fc-creneau .fc-event-main-frame,
.cs-agenda-page .fc-v-event.cs-fc-creneau .fc-event-title,
.cs-agenda-page .fc-v-event.cs-fc-creneau .fc-event-time {
    color: #1a1a1a !important;
}

.cs-agenda-page .fc-v-event.cs-fc-creneau .cs-fc-line-time {
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.2;
}

.cs-agenda-page .fc-v-event.cs-fc-creneau .cs-fc-line-type {
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.15;
}

.cs-agenda-page .fc-v-event.cs-fc-creneau .cs-fc-line-etat {
    font-weight: 600;
    font-size: 0.65rem;
    line-height: 1.15;
    opacity: 0.92;
}

.cs-agenda-page .fc-v-event.cs-fc-creneau.fc-event-passe,
.cs-agenda-page .fc-v-event.cs-fc-creneau.fc-event-past {
    opacity: 0.62 !important;
    filter: grayscale(0.08);
}

.cs-agenda-page .fc-v-event.cs-fc-creneau.fc-event-reservee.creneau-reserve {
    box-shadow: inset 4px 0 0 0 var(--cs-blue-primary);
}

.cs-agenda-page .fc-v-event.cs-fc-creneau.fc-event-reservee .cs-fc-line-etat {
    font-weight: 700;
}

/* ============================================================
   13b. FullCalendar — occupation globale Super-admin (US-5.7)
   Pastille au rendu IDENTIQUE à l'agenda (même typo, même troncature).
   Bloc dupliqué à dessein, sans toucher l'agenda livré (cf. DT-16,
   extraction d'un rendu d'event partagé en itération 6). Seule différence :
   une ligne « personnel » (l'agenda ne l'affiche pas) et l'état Occupé/Libre.
   ============================================================ */

.cs-occupation-page .fc-v-event.cs-fc-creneau,
.cs-occupation-page .fc-v-event.cs-fc-creneau .fc-event-main,
.cs-occupation-page .fc-v-event.cs-fc-creneau .fc-event-main-frame,
.cs-occupation-page .fc-v-event.cs-fc-creneau .fc-event-title,
.cs-occupation-page .fc-v-event.cs-fc-creneau .fc-event-time {
    color: #1a1a1a !important;
}

/* L'occupation affiche 4 lignes (horaire + personnel + type + état) là où
   l'agenda en a 3 : on resserre légèrement typo, interligne et padding vertical
   pour que tout TIENNE dans une pastille d'1 h, sans changer le style (horaire en
   gras, etc.). overflow caché en filet de sécurité contre tout débordement. */
.cs-occupation-page .fc-v-event.cs-fc-creneau .fc-event-main-frame.cs-fc-lines {
    overflow: hidden;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.cs-occupation-page .fc-v-event.cs-fc-creneau .cs-fc-line-time {
    font-weight: 700;
    font-size: 0.66rem;
    line-height: 1.1;
}

.cs-occupation-page .fc-v-event.cs-fc-creneau .cs-fc-line-personnel {
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 1.05;
}

.cs-occupation-page .fc-v-event.cs-fc-creneau .cs-fc-line-type {
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 1.05;
}

.cs-occupation-page .fc-v-event.cs-fc-creneau .cs-fc-line-etat {
    font-weight: 600;
    font-size: 0.62rem;
    line-height: 1.05;
    opacity: 0.92;
}

.cs-occupation-page .fc-v-event.cs-fc-creneau.fc-event-passe,
.cs-occupation-page .fc-v-event.cs-fc-creneau.fc-event-past {
    opacity: 0.62 !important;
    filter: grayscale(0.08);
}

.cs-occupation-page .fc-v-event.cs-fc-creneau.fc-event-occupe .cs-fc-line-etat {
    font-weight: 700;
}

/* Toolbar : prev | titre | next sur UNE seule ligne, flèches collées au titre.
   Règles identiques au <style> de personnel/creneau/agenda.html.twig (scope
   .cs-agenda-page) : sans elles, le titre h2 (bloc) empile prev/titre/next. */
.cs-occupation-page .fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--cs-space-md);
    margin-bottom: var(--cs-space-md);
}
.cs-occupation-page .fc .fc-toolbar-chunk {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: var(--cs-space-xs);
}
.cs-occupation-page .fc .fc-toolbar-chunk:nth-child(2) {
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: var(--cs-space-sm);
}
.cs-occupation-page .fc .fc-toolbar-chunk:nth-child(2) .fc-button-group {
    flex-direction: row !important;
    gap: var(--cs-space-xs);
}
.cs-occupation-page .fc .fc-toolbar-chunk:nth-child(2) .fc-prev-button,
.cs-occupation-page .fc .fc-toolbar-chunk:nth-child(2) .fc-next-button {
    flex: 0 0 auto !important;
}
.cs-occupation-page .fc .fc-toolbar-title {
    margin: 0 !important;
    padding: 0 var(--cs-space-xs);
    white-space: nowrap;
    line-height: 1.25;
    display: inline-block;
}
.cs-occupation-page .fc .fc-toolbar-chunk:first-child .fc-button-group {
    gap: 0;
}
.cs-occupation-page .fc .fc-button {
    border-radius: var(--cs-radius-md) !important;
    font-weight: var(--cs-fw-medium);
}
.cs-occupation-page .fc .fc-button-primary:not(:disabled):not(.fc-button-active),
.cs-occupation-page .fc .fc-button:not(.fc-button-active):not(:disabled) {
    background-color: var(--cs-bg-subtle);
    border-color: var(--cs-border);
    color: var(--cs-text-primary);
}
.cs-occupation-page .fc .fc-button-primary:not(:disabled).fc-button-active,
.cs-occupation-page .fc .fc-button-primary:not(:disabled):hover,
.cs-occupation-page .fc .fc-button:not(.fc-button-active):not(:disabled):hover {
    background-color: var(--cs-blue-primary) !important;
    border-color: var(--cs-blue-primary) !important;
    color: var(--cs-text-light) !important;
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .cs-main {
        padding: var(--cs-space-lg) 0;
    }

    .cs-auth-card {
        padding: var(--cs-space-lg);
    }

    .cs-error-code {
        font-size: 4rem;
    }
}