/* ==========================================================================
   RH Couleurs Quartiers — Styles personnalisés
   Surcharge Bootstrap 5 — sidebar + responsive
   ========================================================================== */

:root {
    --sidebar-width: 250px;
    --sidebar-bg: #1a3353;
    --sidebar-hover: #243f5e;
    --sidebar-active: #2c5282;
    --topbar-height: 48px;
}

/* -- Sidebar ------------------------------------------------------------ */

.sidebar {
    width: var(--sidebar-width) !important;
    background: var(--sidebar-bg) !important;
    border-right: none !important;
}

.sidebar .offcanvas-body {
    background: var(--sidebar-bg);
}

.sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-link {
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-link:hover {
    color: #fff !important;
    background: var(--sidebar-hover);
}

.sidebar-link.active {
    color: #fff !important;
    background: var(--sidebar-active);
    font-weight: 600;
}

/* -- Main content (décalé par la sidebar en desktop) -------------------- */

@media (min-width: 992px) {
    .main-content {
        margin-left: var(--sidebar-width);
    }
}

/* -- Topbar ------------------------------------------------------------- */

.topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
}

/* -- Cards -------------------------------------------------------------- */

.card {
    border-radius: 8px;
}

.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* -- Tables ------------------------------------------------------------- */

.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

.table td {
    vertical-align: middle;
}

/* -- Badges ------------------------------------------------------------- */

.badge {
    font-weight: 500;
}

/* -- Forms -------------------------------------------------------------- */

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* -- Responsive tweaks -------------------------------------------------- */

@media (max-width: 575.98px) {
    .card-body {
        padding: 0.75rem;
    }

    h4 {
        font-size: 1.15rem;
    }
}

/* -- Calendar (leaves) -------------------------------------------------- */

.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

thead .sticky-col {
    z-index: 3;
    background: inherit;
}

@media (max-width: 767.98px) {
    .calendar-scroll {
        -webkit-overflow-scrolling: touch;
    }

    .calendar-scroll .table {
        font-size: 0.75rem;
    }
}

/* -- Alpine.js cloak (prevent flash of hidden content) ------------------ */

[x-cloak] {
    display: none !important;
}

/* -- Timeline (employee history) ---------------------------------------- */

.timeline .card {
    border-left: 3px solid #dee2e6;
}

.timeline .card:first-child {
    border-left-color: #0d6efd;
}

/* ==================================================================
   MOBILE-FIRST: Touch-friendly sizing & layout
   ================================================================== */

/* Medium screens and below (< 768px) */
@media (max-width: 767.98px) {
    /* Sidebar links: bigger tap targets */
    .sidebar-link {
        padding: 0.65rem 0.75rem !important;
        font-size: 0.95rem;
    }

    /* All small buttons: minimum touch height */
    .btn-sm {
        min-height: 36px;
        padding: 0.35rem 0.65rem;
    }

    /* Form inputs: bigger on mobile */
    .form-control-sm, .form-select-sm {
        min-height: 38px;
        font-size: 0.95rem;
    }

    /* Tables: tighter but readable */
    .table th, .table td {
        padding: 0.35rem 0.25rem;
        font-size: 0.8rem;
    }

    /* Month navigation buttons */
    .btn-month-nav {
        min-width: 36px;
        min-height: 36px;
        font-size: 1rem;
    }
}

/* Small screens (< 576px) — phones */
@media (max-width: 575.98px) {
    /* Action buttons: full width */
    .btn-mobile-block {
        display: block;
        width: 100%;
    }

    /* Stat card text centering */
    .stat-card .card-body {
        padding: 0.5rem;
    }

    /* Entry form: time slots stack vertically */
    .creneau .slot-grid .col-time {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Submit buttons full width on phone */
    .btn-submit-mobile {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}