/* ============================================================
   VARIABLES & BASE
   ============================================================ */
:root {
    --bg-main: #f8fafc;
    --sidebar-width: 288px;
    --shadow-soft: 0 10px 25px -3px rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: radial-gradient(at 0% 0%, #eff6ff 0px, transparent 50%), 
                radial-gradient(at 100% 0%, #f1f5f9 0px, transparent 50%);
    background-color: var(--bg-main);
    min-height: 100vh;
    color: #1e293b;
}

/* ── main : plus de zoom fixe, on laisse le responsive gérer ── */
main {
    zoom: 0.70;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-item {
    cursor: pointer;
    transition: 0.2s;
    color: #94a3b8;
    font-weight: 700;
    border-right: 4px solid transparent;
}
.active-tab {
    background: #eff6ff;
    color: #2563eb !important;
    border-right-color: #2563eb;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   INPUTS
   ============================================================ */
input, select {
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s !important;
}
input:focus, select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
    background-color: white !important;
    outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="time"]::-webkit-calendar-picker-indicator { background: none; display: none; -webkit-appearance: none; }
.hour-input, .staff-input { appearance: none; -webkit-appearance: none; -moz-appearance: textfield; }

/* ============================================================
   COLOR PICKER
   ============================================================ */
.color-circle {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}
.color-circle::-webkit-color-swatch { border-radius: 50%; border: 2px solid #f1f5f9; }
.color-circle::-moz-color-swatch    { border-radius: 50%; border: 2px solid #f1f5f9; }

/* ============================================================
   GRILLES HORAIRES (settings)
   ============================================================ */
.bornes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1280px) { .bornes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bornes-grid { grid-template-columns: 1fr; } }

.borne-card:last-child { grid-column: auto; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%        { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.2s ease-in-out 0s 2; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reservation-card { animation: slideUp 0.4s ease-out forwards; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.reservation-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); z-index: 50 !important; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-section { animation: fadeUp 0.5s ease-out forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes resourceEntry {
    0%   { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-resource-entry { animation: resourceEntry 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* ============================================================
   CARTES PLANNING
   ============================================================ */
.planning-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
.planning-card:hover { transform: translateX(4px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }

/* Fond tiroir planning */
#planning-drawer { background-color: #f8fafc; }
#live-planning-preview { padding: 20px; background-color: #f8fafc; }

/* ============================================================
   CALENDRIER — ÉTATS JOURS
   ============================================================ */
/* Plage temporairement fermée : inputs grisés non-éditables */
.range-row--temp-closed input[type="time"] {
    pointer-events: none;
    user-select: none;
}

/* ── ÉTATS DES JOURS ──────────────────────────────────────── */

/* ── ÉTATS DES JOURS ──────────────────────────────────────── */

.day-card-container.is-disabled { 
    position: relative; 
    overflow: hidden; 
    /* Réduit un peu pour un look plus compact */
    min-height: 140px; 
}

.day-card-container.is-disabled .disabled-overlay {
    position: absolute;
    /* Ajusté pour équilibrer l'espace haut/bas sous le header */
    top: 52px; 
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 10;
}

.day-card-container.is-disabled .watermark-text {
    font-size: 2.2rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.25);
    line-height: 0.8;
}

.day-closed-label--disabled {
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f87171;
    white-space: nowrap;
    margin-top: 2px;
}

.day-card-container.is-disabled .content-to-hide {
    opacity: 0.1; 
    filter: blur(1px); 
    pointer-events: none;
}

.day-closed-label--scheduled { display: block; }
.day-closed-label--scheduled.hidden,
.day-closed-label--disabled.hidden { display: none; }

.day-card-container.is-scheduled {
    border-color: #fed7aa !important;
    background-color: #fff7ed !important;
}
.day-card-container.is-scheduled .day-label {
    background-color: #ffedd5 !important;
    color: #c2410c !important;
}

/* Fermeture dans la semaine courante → rouge (urgent) */
.day-card-container.is-scheduled--urgent {
    border-color: #fecaca !important;
    background-color: #fff1f2 !important;
}
.day-card-container.is-scheduled--urgent .day-label {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

.day-cell-edit { position: relative; }
.day-cell-edit.is-full::before {
    content: "Complet";
    position: absolute;
    top: 55%; left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(244, 63, 94, 0.4);
    pointer-events: none; z-index: 10;
}
.day-cell-edit.is-full { color: transparent !important; }
.day-cell-edit.is-full .badge-count { display: none !important; }

.day-is-past { opacity: 0.4 !important; background: transparent !important; color: #94a3b8 !important; border: 1px solid transparent !important; cursor: default !important; }

.day-is-closed-calendar {
    position: relative; overflow: hidden;
    background-color: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    transition: all 0.3s ease;
    color: transparent !important;
    font-size: 1rem;
}
.day-is-closed-calendar::before {
    content: "FERMÉ";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 1em; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.6);
    white-space: nowrap; pointer-events: none; z-index: 5;
}
.day-is-closed-calendar * { display: none !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: #f97316; color: white;
    font-size: 9px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 10;
}

/* ============================================================
   CLIENTS TABLE
   ============================================================ */
.sticky-letter { position: sticky; top: 0; z-index: 20; background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(8px); transition: background-color 0.3s; }
.client-row.is-hidden { display: none; opacity: 0; transform: translateY(-10px); }
.client-row.is-visible { display: table-row !important; animation: fadeInSlide 0.3s ease forwards; }
.presta-container.hidden-presta { display: none; opacity: 0; transform: translateY(-10px); }

/* ============================================================
   SECTION LOCKED / ACTIVE
   ============================================================ */
.section-locked { pointer-events: none; user-select: none; filter: blur(2px) grayscale(30%); opacity: 0.6; transition: all 0.4s ease; }

@keyframes blur-focus-out {
    0%   { filter: blur(2px) grayscale(30%); opacity: 0.6; transform: scale(1); }
    30%  { filter: blur(8px) grayscale(10%); opacity: 0.8; transform: scale(1.02); }
    100% { filter: blur(0px) grayscale(0%); opacity: 1; transform: scale(1); }
}
.section-active { pointer-events: auto !important; user-select: auto !important; animation: blur-focus-out 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.locked { position: relative; pointer-events: none !important; filter: grayscale(1); opacity: 0.65; overflow: visible !important; }
.locked, .locked * { color: #94a3b8 !important; }
.locked::before {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; top: 0; right: 0;
    transform: translate(35%, -35%);
    z-index: 100;
    width: clamp(24px, 10%, 48px);
    aspect-ratio: 1 / 1;
    font-size: calc(clamp(24px, 10%, 48px) * 0.45);
    background: white; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid #f1f5f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ============================================================
   NOTIFICATIONS — PANEL / TOGGLES DÉSACTIVÉS
   ============================================================ */
.comm-disabled {
    opacity: 0.3;
    filter: grayscale(1);
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity 0.3s, filter 0.3s, transform 0.3s;
}
.notif-type-disabled {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ============================================================
   SWEETALERT BOUTONS DYNAMIQUES
   ============================================================ */
/* ============================================================
   RDV IMPACTÉS — segmented control compact (remplace les selects
   texte + les 3 boutons "Appliquer à tous" collés)
   ============================================================ */
.rdv-seg-hidden-select { display:none; }

.rdv-seg-control {
    display:inline-flex;
    align-items:center;
    background:#f1f5f9;
    border-radius:10px;
    padding:2px;
    gap:2px;
    flex-shrink:0;
}
.rdv-seg-btn {
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    border:none; background:transparent; border-radius:8px;
    color:#94a3b8; font-size:11px; cursor:pointer;
    transition:background .15s, color .15s;
}
.rdv-seg-btn:hover:not(:disabled) { color:#475569; }
.rdv-seg-btn.is-active {
    background:var(--seg-color);
    color:#fff;
    box-shadow:0 2px 6px -1px color-mix(in srgb, var(--seg-color), transparent 55%);
}
.rdv-seg-btn:disabled { opacity:.25; cursor:not-allowed; }

.rdv-bulk-bar {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center;
    margin:10px 0 8px;
}
.rdv-bulk-label { font-size:9px; font-weight:700; color:#64748b; }
.rdv-bulk-btn {
    display:inline-flex; align-items:center; gap:5px;
    font-size:9px; font-weight:800; padding:5px 10px; border-radius:8px;
    border:1px solid color-mix(in srgb, var(--seg-color), white 70%);
    background:color-mix(in srgb, var(--seg-color), white 92%);
    color:var(--seg-color);
    cursor:pointer;
    transition:all .15s;
}
.rdv-bulk-btn:hover { background:var(--seg-color); color:#fff; }

.btnConfirmDynamique { background-color: var(--color-bouton) !important; border: none !important; box-shadow: none !important; transition: all 0.2s ease-in-out !important; }
.btnConfirmDynamique:hover { background-color: color-mix(in srgb, var(--color-bouton), black 25%) !important; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important; transform: translateY(-2px) !important; }
.btnCancelDynamique { background-color: color-mix(in srgb, var(--color-bouton), white 90%) !important; color: var(--color-bouton) !important; border: none !important; font-weight: bold !important; transition: all 0.2s ease-in-out !important; }
.btnCancelDynamique:hover { background-color: color-mix(in srgb, var(--color-bouton), white 80%) !important; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important; transform: translateY(-1px) !important; }

/* Bouton déclencheur au survol */
.rdv-trigger-btn:hover {
    background: var(--seg-color) !important;
    color: #ffffff !important;
}

/* Éléments du menu déroulant */
.rdv-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: #475569;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.rdv-dropdown-item i {
    color: var(--seg-color);
    width: 16px;
    text-align: center;
}

.rdv-dropdown-item:hover:not([disabled]) {
    background: #f8fafc;
}

.rdv-dropdown-item[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rdv-dropdown-item.is-active {
    background: #f1f5f9;
    font-weight: 600;
}
/* ============================================================
   RESPONSIVE — MOBILE FIRST OVERRIDES
   ============================================================ */

/* Titres : réduire sur très petits écrans */
@media (max-width: 480px) {
    h1.text-3xl { font-size: 1.35rem !important; }
    .text-5xl   { font-size: 2.25rem !important; }
}

/* Planning : liste RDV — cards moins larges sur mobile */
@media (max-width: 640px) {
    #rdv-list-container .grid.grid-cols-\[100px_1fr\] {
        grid-template-columns: 60px 1fr;
    }
    #rdv-list-container .min-w-\[300px\] {
        min-width: 240px;
    }
    /* Stats cards : 2 colonnes sur mobile */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* La 3e carte prend toute la largeur */
    .grid.grid-cols-1.md\:grid-cols-3 > :last-child {
        grid-column: 1 / -1;
    }
}

/* Analytics KPI : 2 colonnes sur mobile */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Add-RDV : calendrier + créneaux pleine largeur sur mobile */
@media (max-width: 1024px) {
    #addRdv-calendar-slots-container {
        width: 100% !important;
    }
}

/* Planning drawer : pleine largeur sur mobile */
@media (max-width: 640px) {
    #planning-drawer {
        max-width: 100vw !important;
        width: 100vw !important;
    }
}

/* Slots créneaux : 3 colonnes sur petits écrans */
@media (max-width: 480px) {
    #admin-slots-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Header section : stack vertical sur mobile */
@media (max-width: 640px) {
    .flex.justify-between.items-center.mb-10 {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .flex.justify-between.items-center.mb-10 > button,
    .flex.justify-between.items-center.mb-10 > .relative.group {
        align-self: flex-start;
    }
}

/* Section analytics : sélecteur mois — dropdown à gauche sur mobile */
@media (max-width: 768px) {
    .flex.flex-col.md\:flex-row.md\:items-center.justify-between.gap-4 {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Dropdown calendrier analytique : repositionner */
    .absolute.right-0.pt-4.z-50 {
        right: auto;
        left: 0;
    }
}

/* Settings : tab navigation horizontale scrollable sur mobile */
@media (max-width: 640px) {
    .settings-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .settings-tabs-nav > * {
        flex-shrink: 0;
    }
}

/* Table clients : masquer colonnes secondaires sur mobile */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

/* Modals Swal : padding réduit sur mobile */
@media (max-width: 480px) {
    .swal2-popup { padding: 1.25rem !important; }
    .swal2-title { font-size: 1.1rem !important; }
}
/* Fix : SweetAlert2 injecte padding-right + overflow:hidden sur body/html,
   ce qui fait "rétrécir" la sidebar fixed et coupe sa hauteur.
   On force la sidebar à rester ancrée au viewport quoi qu'il arrive. */
body.swal2-shown > #main-sidebar,
html.swal2-shown #main-sidebar {
    height: 100dvh !important;
    height: 100vh !important;
}

body.swal2-shown,
html.swal2-shown {
    padding-right: 0 !important;
}