:root {
    /* RGAA High Contrast White Theme - DSFR inspired */
    --primary: #1d4ed8;
    --primary-hover: #1e3a8a;
    --primary-light: #eff6ff;
    --primary-rgb: 29, 78, 216;

    --bg-color: #f8fafc;
    --glass-bg: #ffffff;
    --glass-border: #94a3b8;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    --success: #15803d;
    --success-light: #dcfce7;
    --danger: #b91c1c;
    --danger-light: #fee2e2;
    --warning: #b45309;
    --warning-light: #fef3c7;
    --info: #0369a1;
    --info-light: #e0f2fe;

    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --surface: #f1f5f9;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.1);

    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Skip link for RGAA accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 10px 20px;
    z-index: 10000;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0 0 var(--radius) 0;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
}

/* Utilities */
.hidden { display: none !important; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.w-100 { width: 100%; }
.flex-1 { flex: 1; }
.border-0 { border: none; }
.bg-white { background: #ffffff; }
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-muted); font-weight: 500; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible for RGAA */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Blobs for Login BG */
.blob {
    position: absolute;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.4;
    border-radius: 50%;
}
.blob-1 { top: -100px; left: -100px; width: 500px; height: 500px; background: #bfdbfe; }
.blob-2 { bottom: -150px; right: -100px; width: 600px; height: 600px; background: #fbcfe8; }

/* Buttons */
button, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-primary, .btn-text { text-decoration: none; }
button:hover, [class*="btn-"]:hover { text-decoration: none; }
button { cursor: pointer; border: none; font-family: inherit; transition: 0.2s; }

.btn-primary {
    background: var(--primary); color: white; padding: 10px 18px;
    border-radius: 8px; font-weight: 700; font-size: 0.9rem;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
    background: #64748b; color: white; padding: 10px 20px;
    border-radius: 8px; font-weight: 600;
}
.btn-secondary:hover { background: #475569; }

.btn-outline {
    background: transparent; border: 2px solid var(--primary); color: var(--primary);
    padding: 10px 20px; border-radius: 8px; font-weight: 600;
}
.btn-outline:hover { background: var(--primary-light); border-color: var(--primary-hover); }

.btn-outline-small {
    background: transparent; border: 2px solid var(--glass-border); color: var(--text-primary);
    padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;
}
.btn-outline-small:hover { background: var(--surface); border-color: var(--text-primary); }

.btn-outline-primary {
    background: transparent; color: var(--primary); border: 1px solid var(--primary);
    padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-outline-primary:hover { background: var(--primary); color: #fff; }

.btn-text {
    background: transparent; color: var(--text-secondary); padding: 10px 20px;
    border-radius: 8px; font-weight: 600;
}
.btn-text:hover { background: var(--surface); color: var(--text-primary); }

.btn-icon {
    background: transparent; color: var(--text-secondary); width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 1.1rem;
}
.btn-icon:hover { color: var(--danger); background: #fee2e2; }

.btn-icon-soft {
    width: 36px; height: 36px; border-radius: 8px; background: var(--glass-bg); border: 2px solid var(--border);
    color: var(--text-secondary); font-size: 1.1rem; transition: 0.2s;
}
.btn-icon-soft:hover { background: var(--surface); color: var(--primary); border-color: var(--primary); }

.link-btn {
    color: var(--primary); text-decoration: none; font-size: 0.95rem; font-weight: 600;
    background: none; border: none; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; color: var(--primary-hover); }

/* Dashboard Layout */
.view { width: 100%; height: 100%; display: none; }
.view.active { display: flex; }

.glass-panel {
    background: var(--glass-bg); border: 2px solid var(--glass-border);
    border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Desktop Sidebar */
.sidebar {
    width: 260px; height: 100%; background: var(--glass-bg); border-right: 2px solid var(--border);
    display: flex; flex-direction: column; padding: 20px 16px; flex-shrink: 0;
    transition: width 0.25s ease, padding 0.25s ease;
}

.logo-icon {
    width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), #3b82f6);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: white; flex-shrink: 0; overflow: hidden;
}
.logo-icon.has-logo { background: none; }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    min-width: 0;
}

.sidebar-logo-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-logo-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sidebar-logo-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--glass-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.sidebar-toggle:hover {
    background: var(--glass-bg);
    color: var(--text-muted);
    border-color: var(--border);
}
.sidebar-logo:hover {
    opacity: 1;
    text-decoration: none;
    background: transparent;
}

/* Hamburger Button - hidden on desktop */
.hamburger-btn {
    display: none;
    width: 36px; height: 36px; border-radius: 8px;
    border: none; background: transparent; color: var(--text-primary);
    cursor: pointer; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0; transition: background 0.2s;
}
.hamburger-btn:hover { background: var(--surface); }
.hamburger-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Mobile overlay - hidden on desktop */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 999;
}
body.menu-open .sidebar-overlay { display: block; }
body.menu-open { overflow: hidden; }

.nav-links { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.nav-links li {
    padding: 10px 14px; border-radius: 8px; cursor: pointer; display: flex;
    align-items: center; gap: 10px; color: var(--text-secondary); font-weight: 600; transition: 0.2s; font-size: 0.9rem;
}
.nav-links li:hover, .nav-links li.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.nav-links li:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-links li i { width: 20px; text-align: center; }
.nav-links li.nav-separator {
    height: 0;
    padding: 0;
    margin: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: default;
    pointer-events: none;
}
.nav-links li.nav-separator:hover { background: none; }

/* Sidebar User */
.sidebar-user {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-user-info:hover {
    background: var(--surface);
}

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.sidebar-user-meta strong {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-meta span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }

.sidebar-actions {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    padding: 0 4px;
}

.sidebar-action-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
    position: relative;
}

.sidebar-action-btn:hover {
    background: var(--surface);
    color: var(--text-primary);
}

.sidebar-action-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sidebar-action-logout:hover {
    background: #fee2e2;
    color: var(--danger);
}

.notif-wrapper {
    position: relative;
    display: inline-flex;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
    pointer-events: none;
}

/* ======================== */
/* COLLAPSED SIDEBAR STATE  */
/* ======================== */
.sidebar.collapsed {
    width: 62px;
    padding: 12px 8px;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

.sidebar.collapsed .sidebar-logo {
    display: none;
}

.sidebar.collapsed .sidebar-toggle {
    width: 36px;
    height: 36px;
    margin: 0 auto;
}

.sidebar.collapsed .nav-links li span {
    display: none;
}

.sidebar.collapsed .nav-links li {
    justify-content: center;
    padding: 10px;
    width: 42px;
    height: 42px;
    margin: 2px auto;
    border-radius: 10px;
}

.sidebar.collapsed .nav-links li i {
    margin-right: 0;
    font-size: 1.15rem;
}

.sidebar.collapsed .sidebar-user-meta {
    display: none;
}

.sidebar.collapsed .sidebar-user-info {
    justify-content: center;
}

.sidebar.collapsed .sidebar-user-info .avatar-img {
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-actions {
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.sidebar.collapsed .sidebar-actions .sidebar-action-btn,
.sidebar.collapsed .sidebar-actions .notif-wrapper {
    width: 42px;
    height: 42px;
}

.sidebar.collapsed .sidebar-actions .sidebar-action-btn {
    font-size: 1.15rem;
    border-radius: 10px;
}

/* Sidebar Tooltip */
.sidebar-tooltip {
    position: fixed;
    background: #1e293b;
    color: #f8fafc;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: none;
}

.sidebar-tooltip.visible {
    display: block;
}

/* Main Content Area */
.main-content { flex: 1; height: 100%; padding: 30px 40px; overflow-y: auto; position: relative; }

/* Top header right group (status + theme) */
.top-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.sub-view { display: none; height: 100%; flex-direction: column; animation: fadeIn 0.3s ease-out forwards; }
.sub-view.active { display: flex; }

/* Top Bar */
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.top-bar h2 { font-weight: 800; color: var(--text-primary); }
.filters { display: flex; gap: 10px; align-items: center; }
.filters select, .filters input[type="date"] {
    padding: 8px 12px; border: 2px solid var(--glass-border); border-radius: 8px;
    background: var(--glass-bg); color: var(--text-primary); font-weight: 600; font-size: 0.9rem;
}

/* Search Bar */
.search-bar { position: relative; display: flex; align-items: center; }
.search-bar i { position: absolute; left: 12px; color: var(--text-secondary); }
.search-bar input {
    padding: 10px 15px 10px 38px; border: 2px solid var(--glass-border); border-radius: 8px;
    background: var(--glass-bg); color: var(--text-primary); font-weight: 500; font-size: 0.9rem; width: 250px;
}
.search-bar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1); }

/* Dashboard Headers */
.top-header { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: flex-start; margin-bottom: 25px; }
.top-header h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 5px; color: var(--text-primary); }
.top-header .subtitle { color: var(--text-secondary); font-weight: 600; font-size: 1rem; }

.status-toggle {
    display: flex; background: var(--glass-bg); padding: 6px; border-radius: 12px;
    border: 2px solid var(--border); gap: 5px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}
.status-btn {
    padding: 8px 16px; background: transparent; color: var(--text-secondary);
    font-size: 0.95rem; font-weight: 700; border-radius: 8px; display: flex; gap: 8px; align-items: center;
}
.status-btn.active { background: var(--primary); color: white; }
.status-btn:hover:not(.active) { background: var(--surface); color: var(--text-primary); }

/* ---- Bandeau haut TDB : Ma journee + occupation cote a cote ---- */
.dashboard-top-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 22px; }
.dashboard-top-row #card-occupancy { display: flex; flex-direction: column; justify-content: center; }
.dashboard-main-single { display: flex; flex-direction: column; }
.dashboard-main-single .main-column { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .dashboard-top-row { grid-template-columns: 1fr; } }

/* ---- Carte "Ma journee" (TDB) ---- */
.ma-journee { margin-bottom: 0; }
.mj-card-title { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--text-primary); }
.mj-rows { display: flex; flex-direction: column; gap: 14px; }
.mj-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mj-label { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); min-width: 86px; text-transform: uppercase; letter-spacing: 0.02em; }
.mj-poste-badge { padding: 7px 13px; font-size: 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; }
.resto-lock-note { font-size: 0.78rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.resto-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.resto-btn-none { color: var(--danger); }
.resto-btn-none:hover:not(.active) { background: var(--danger-light); color: var(--danger); }
.resto-deadline-note { font-size: 0.78rem; color: var(--info); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.resto-plan-link { font-size: 0.82rem; color: var(--info); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.resto-plan-link:hover { text-decoration: underline; }

/* ---- Badge restauration sur les cases d'agenda ---- */
.agenda-cal-resto-badge {
    margin-top: auto; flex-shrink: 0;
    font-size: 0.62rem; font-weight: 700; line-height: 1.45;
    padding: 1px 5px; border-radius: 5px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- En-tete agenda : controles sur une ligne pleine largeur sous la date ---- */
.agenda-controls-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 12px 0 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.agenda-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agenda-group-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.agenda-day-restauration { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.agenda-day-restauration .agenda-status-btn { font-size: 0.85rem; padding: 6px 12px; }
.agenda-resto-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; }

/* ---- Legende du calendrier ---- */
.agenda-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-secondary); }
.agenda-legend-title { font-weight: 700; color: var(--text-primary); }
.legend-chip { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---- Responsive mobile : carte "Ma journee" + controles agenda ---- */
@media (max-width: 768px) {
    .mj-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .mj-label { min-width: 0; }
    .mj-row .status-toggle { flex-wrap: wrap; width: 100%; }
    .mj-row .status-btn { flex: 1 1 auto; justify-content: center; }
    .resto-deadline-note, .resto-plan-link, .resto-lock-note { flex-basis: 100%; }
    .agenda-controls-row { gap: 12px; }
    .agenda-group { width: 100%; flex-wrap: wrap; }
    .agenda-day-status, .agenda-day-restauration { flex-wrap: wrap; width: 100%; }
    .agenda-day-status .agenda-status-btn, .agenda-day-restauration .agenda-status-btn { flex: 1 1 auto; justify-content: center; }
}

/* Dashboard Grids */
.dashboard-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.main-column { display: flex; flex-direction: column; gap: 20px; }
.side-column { display: flex; flex-direction: column; gap: 20px; }

.dash-card {
    background: var(--glass-bg); border: 2px solid var(--border); border-radius: 16px;
    padding: 25px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}
.card-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }

/* Quick Booking */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.card-header h3 { font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 1rem; }
.badge-outline { border: 2px solid #bfdbfe; color: var(--primary); background: var(--primary-light); padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; }

.quick-booking-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.qb-card {
    background: var(--surface); border: 2px solid var(--border); border-radius: 12px;
    padding: 20px; display: flex; align-items: center; gap: 15px; position: relative;
    transition: 0.2s; cursor: pointer;
}
.qb-card:hover { border-color: var(--primary); background: var(--glass-bg); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); transform: translateY(-2px); }
.qb-icon {
    width: 48px; height: 48px; background: var(--glass-bg); border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 1.3rem; color: var(--primary);
    flex-shrink: 0; border: 2px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.qb-info { display: flex; flex-direction: column; flex: 1; padding-right: 40px; }
.qb-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 800; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.qb-info strong { font-size: 1.05rem; margin-bottom: 2px; color: var(--text-primary); font-weight: 700; }
.qb-info span { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.btn-add {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; background: var(--primary); color: white; border-radius: 8px; font-size: 1rem; font-weight: bold; transition: 0.2s;
}
.qb-card:hover .btn-add { background: var(--primary-hover); transform: translateY(-50%) scale(1.05); }

/* Reservations Section */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-header h3 { font-weight: 800; font-size: 1.15rem; color: var(--text-primary); }
.reservation-list { display: flex; flex-direction: column; gap: 12px; }

.res-card {
    background: var(--glass-bg); border: 2px solid var(--border); border-radius: 12px;
    padding: 15px 20px; display: flex; align-items: center; gap: 20px; transition: 0.2s;
}
.res-card:hover { border-color: var(--primary); background: var(--surface); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.res-card.active-now { border-color: var(--success); background: #f0fdf4; box-shadow: 0 4px 12px rgba(21,128,61,0.1); }
.res-card.active-now .res-date { background: var(--success); border-color: var(--success); color: white; }
.res-card.active-now .res-date span, .res-card.active-now .res-date strong { color: white; }
.res-card.status-expected { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 4px 12px rgba(245,158,11,0.1); }
.res-card.status-expected .res-date { background: #f59e0b; border-color: #f59e0b; color: white; }
.res-card.status-expected .res-date span, .res-card.status-expected .res-date strong { color: white; }
.res-card.status-checked-out { border-color: var(--border); background: var(--glass-bg); opacity: 0.55; }
.res-card.status-checked-out .res-date { background: #94a3b8; border-color: #94a3b8; color: white; }
.res-card.status-checked-out .res-date span, .res-card.status-checked-out .res-date strong { color: white; }
.res-card.status-cancelled { border-color: var(--danger); background: #fef2f2; opacity: 0.4; }
.res-card.status-cancelled .res-date { background: var(--danger); border-color: var(--danger); color: white; }
.res-card.status-cancelled .res-date span, .res-card.status-cancelled .res-date strong { color: white; }

.res-date {
    background: var(--surface); border-radius: 8px; padding: 10px; text-align: center;
    min-width: 65px; display: flex; flex-direction: column; border: 2px solid var(--border);
}
.res-date span { font-size: 0.75rem; color: var(--text-secondary); font-weight: 800; text-transform: uppercase; }
.res-date strong { font-size: 1.4rem; color: var(--text-primary); font-weight: 800; line-height: 1; }
.res-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.res-info strong { font-size: 1.1rem; color: var(--text-primary); font-weight: 700; }
.res-info span { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }
.res-actions { display: flex; gap: 10px; }
.danger-action { color: var(--danger); border-color: var(--danger); background: var(--glass-bg); }
.danger-action:hover { background: #fee2e2; border-color: var(--danger); color: var(--danger); }

/* Who's In Today */
.colleagues-list { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.colleagues-list li { display: flex; align-items: center; gap: 15px; padding: 8px; }
.colleague-avatar { position: relative; width: 48px; height: 48px; }
.colleague-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.status-dot { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #ffffff; }
.status-dot.online { background: var(--success); }
.status-dot.away { background: var(--warning); }
.colleague-info { flex: 1; display: flex; flex-direction: column; }
.colleague-info strong { font-size: 1rem; color: var(--text-primary); font-weight: 700; }
.colleague-info span { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }

/* Traffic Stats */
.traffic-stats { display: flex; flex-direction: column; gap: 15px; }
.stat-header { display: flex; justify-content: space-between; align-items: flex-end; }
.stat-header span { color: var(--text-secondary); font-size: 0.95rem; font-weight: 700; }
.stat-header strong { font-size: 1.8rem; line-height: 1; color: var(--text-primary); font-weight: 800; }
.progress-bar { width: 100%; height: 8px; background: var(--surface); border-radius: 4px; position: relative; overflow: hidden; border: 1px solid var(--border); }
.progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--primary), #60a5fa); border-radius: 4px; transition: width 0.5s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* --- LOGIN VIEW --- */
.login-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 450px; margin: auto; }
.login-hero { text-align: center; margin-bottom: 30px; }
.login-hero-brand {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 10px;
}
.login-logo {
    height: 3.5rem; width: auto; border-radius: 12px; object-fit: contain; flex-shrink: 0;
}
.brand-title {
    font-size: 3.5rem; font-weight: 800;
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin: 0; line-height: 1.1;
}
.login-hero p { color: var(--text-secondary); font-size: 1.1rem; font-weight: 500; }

.auth-box {
    width: 100%; padding: 40px; border-radius: 16px; background: var(--glass-bg);
    border: 2px solid var(--border); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
}
.auth-box h2 { margin-bottom: 25px; font-weight: 800; text-align: center; color: var(--text-primary); font-size: 1.6rem; }

.sso-buttons { display: flex; flex-direction: column; gap: 12px; }
.btn-sso {
    width: 100%; background: var(--glass-bg); color: var(--text-primary); border: 2px solid var(--border);
    font-weight: 600; padding: 12px; border-radius: 8px; transition: 0.2s; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.btn-sso:hover { background: var(--surface); border-color: var(--border-hover); transform: translateY(-1px); }
.btn-sso i { font-size: 1.2rem; }
.btn-sso.lemon i { color: #84cc16; }

.divider { display: flex; align-items: center; text-align: center; margin: 25px 0; color: var(--text-secondary); }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 2px solid var(--surface); }
.divider span { padding: 0 15px; font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); }

.input-group { position: relative; margin-bottom: 20px; }
.input-group i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 1.1rem; }
.input-group input, .input-group select {
    width: 100%; padding: 14px 15px 14px 45px; background: var(--glass-bg);
    border: 2px solid var(--border); border-radius: 8px; color: var(--text-primary);
    font-weight: 500; font-size: 1rem; transition: 0.2s;
}
.input-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,78,216,0.1); }
.input-group .password-toggle-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; z-index: 1; border-radius: 6px; }
.input-group .password-toggle-btn:hover { color: var(--primary); background: rgba(29,78,216,0.08); }
.input-group input[type="password"], .input-group input[data-password-field] { padding-right: 44px; }
.code-input input { text-align: center; font-size: 2rem; letter-spacing: 5px; padding: 15px; padding-left: 15px; }

.form-error { background: #fef2f2; border: 2px solid #fecaca; color: var(--danger); padding: 10px 15px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; margin-bottom: 15px; }
.form-info { background: #eff6ff; border: 2px solid #bfdbfe; color: #1e40af; padding: 10px 15px; border-radius: 8px; font-weight: 500; font-size: 0.9rem; margin-bottom: 15px; }
.auth-link { font-weight: 500; color: var(--text-secondary); }
.auth-link a { color: var(--primary); font-weight: 700; text-decoration: none; }
.auth-link a:hover { text-decoration: underline; }

/* Form groups for admin */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); font-size: 0.9rem; }
.form-group input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.form-group select, .form-group textarea {
    width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: 8px;
    font-size: 0.95rem; color: var(--text-primary); font-weight: 500; transition: 0.2s;
    background: var(--glass-bg);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,78,216,0.1);
}

/* --- MAP --- */
.map-container {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border: 2px solid var(--glass-border); border-radius: 12px; background: var(--surface);
    max-height: 70vh;
}
.map-img-container {
    flex: 1; position: relative;
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
    border-radius: inherit; min-height: 300px;
    overflow: hidden;
}
.map-image-wrapper {
    position: absolute; top: 0; left: 0;
    background-size: 100% 100%; background-repeat: no-repeat;
}
.desk {
    position: absolute; width: var(--marker-size, 44px); height: var(--marker-size, 44px); border-radius: 50%;
    transform: translate(-50%, -50%); cursor: pointer; transition: width 0.2s, height 0.2s, 0.3s;
    border: 3px solid var(--glass-bg); display: flex; align-items: center; justify-content: center;
}
.desk::after { content: ''; width: calc(var(--marker-size, 44px) * 0.41); height: calc(var(--marker-size, 44px) * 0.41); border-radius: 50%; }
@media (max-width: 768px) {
    .desk { width: calc(var(--marker-size, 44px) * 0.5); height: calc(var(--marker-size, 44px) * 0.5); border-width: 2px; }
    .desk::after { width: calc(var(--marker-size, 44px) * 0.5 * 0.41); height: calc(var(--marker-size, 44px) * 0.5 * 0.41); }
}
.desk:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 15px var(--primary); }
.desk.desk-dragging {
    transition: none; z-index: 50; cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.desk-draggable { cursor: grab; }
.desk-draggable:active { cursor: grabbing; }
.desk-available { background: #dcfce7; border-color: #166534; }
.desk-available::after { background: var(--success); }
.desk-occupied { background: #fee2e2; border-color: #991b1b; cursor: not-allowed; }
.desk-occupied::after { background: var(--danger); }
.desk-inactive { background: #f1f5f9; border-color: #94a3b8; opacity: 0.5; }
.desk-inactive::after { background: #94a3b8; }
.desk-hot { background: #fef08a; border-color: #a16207; }
.desk-hot::after { background: var(--warning); border-radius: 4px; }
.desk-mine { background: #dbeafe; border-color: var(--primary); }
.desk-mine::after { background: var(--primary); }

/* Tooltip is rendered via JS as #desk-tooltip (position: fixed) */
#desk-tooltip {
    position: fixed; z-index: 9999; pointer-events: none;
    background: var(--text-primary); color: white; padding: 8px 12px;
    border-radius: 6px; font-size: 0.85rem; font-weight: 600;
    white-space: nowrap; border: 1px solid var(--glass-border);
    opacity: 0; transition: opacity 0.15s;
}
#desk-tooltip.visible { opacity: 1; }

/* Multi-floor "Toutes les ressources" view */
#multi-floor-container {
    display: flex; flex-direction: column; gap: 24px;
    padding: 0;
}
.floor-section {
    border: 1px solid var(--glass-border); border-radius: 12px;
    overflow: visible; background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.floor-section-title {
    margin: 0; padding: 12px 20px; font-size: 1rem; font-weight: 600;
    background: var(--bg-secondary); border-bottom: 1px solid var(--glass-border);
    color: var(--text-primary);
}
.floor-map {
    position: relative; min-height: 200px;
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
    overflow: visible;
}
.floor-map .map-image-wrapper {
    position: relative !important;
    top: auto !important; left: auto !important;
    margin: 0 auto;
    background-size: 100% 100%; background-repeat: no-repeat;
}

.booking-panel {
    position: fixed; right: 20px; top: 70px; bottom: auto; width: 360px; padding: 20px;
    max-height: calc(100vh - 80px);
    display: flex; flex-direction: column; z-index: 50; animation: slideInRight 0.3s ease-out forwards;
    background: var(--glass-bg); border: 2px solid var(--glass-border); border-radius: 12px;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    overflow-y: auto;
}
.booking-panel > #confirm-booking-btn {
    position: sticky; bottom: 0; flex-shrink: 0;
    margin-top: auto; z-index: 2;
}
.booking-panel h3 { margin-bottom: 5px; color: var(--text-primary); font-weight: 700; }
.booking-panel p { color: var(--text-secondary); margin-bottom: 15px; font-weight: 500; }
.booking-panel-equipment { font-size: 0.85rem; margin-bottom: 10px; min-height: 1em; }

/* Recurrence */
.recurrence-section { margin-bottom: 15px; }
.toggle-label {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-weight: 600; font-size: 0.95rem; color: var(--text-primary);
    padding: 10px 0;
}
.toggle-label input[type="checkbox"] {
    width: 40px; height: 22px; appearance: none; background: #cbd5e1;
    border-radius: 11px; position: relative; cursor: pointer; transition: 0.2s;
    flex-shrink: 0;
}
.toggle-label input[type="checkbox"]::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: white; border-radius: 50%; transition: 0.2s;
}
.toggle-label input[type="checkbox"]:checked { background: var(--primary); }
.toggle-label input[type="checkbox"]:checked::after { left: 20px; }
.toggle-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.recurrence-options { margin-top: 10px; }
.recurrence-options .input-group { margin-bottom: 10px; }

/* Day selector buttons */
.day-selector {
    display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.day-btn {
    width: 40px; height: 40px; border-radius: 8px;
    border: 2px solid var(--border); background: var(--glass-bg);
    color: var(--text-primary); font-weight: 700; font-size: 0.9rem;
    cursor: pointer; transition: all 0.15s; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.day-btn:hover { border-color: var(--primary); color: var(--primary); }
.day-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.day-btn[aria-pressed="true"] {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.day-btn[aria-pressed="true"]:hover {
    background: var(--primary-hover); border-color: var(--primary-hover);
}
.day-btn-disabled, .day-btn:disabled {
    opacity: 0.3; cursor: not-allowed; pointer-events: none;
    background: var(--surface); color: var(--text-muted); border-color: var(--border);
}

/* Interval row */
.recurrence-interval-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; font-size: 0.9rem; font-weight: 600;
    color: var(--text-primary);
}
.recurrence-interval-row i { color: var(--text-secondary); width: 18px; text-align: center; }
.recurrence-interval-row input[type="number"] {
    width: 56px; text-align: center; padding: 6px 4px;
    border: 2px solid var(--border); border-radius: 6px;
    font-weight: 700; font-size: 0.9rem; background: var(--glass-bg);
    color: var(--text-primary);
}
.recurrence-interval-row input[type="number"]:focus {
    border-color: var(--primary); outline: none;
}

/* End condition row */
.recurrence-end-row { margin-bottom: 12px; }
.recurrence-end-option {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: 0.9rem; font-weight: 600;
    color: var(--text-primary);
}
.recurrence-end-option input[type="radio"] {
    width: 18px; height: 18px; accent-color: var(--primary);
    cursor: pointer; flex-shrink: 0;
}
.recurrence-end-option label { cursor: pointer; white-space: nowrap; }
.recurrence-end-option input[type="number"] {
    width: 60px; text-align: center; padding: 6px 4px;
    border: 2px solid var(--border); border-radius: 6px;
    font-weight: 700; font-size: 0.9rem; background: var(--glass-bg);
    color: var(--text-primary);
}
.recurrence-end-option input[type="date"] {
    padding: 6px 8px; border: 2px solid var(--border); border-radius: 6px;
    font-weight: 600; font-size: 0.85rem; background: var(--glass-bg);
    color: var(--text-primary); max-width: 160px;
}
.recurrence-end-option input:focus {
    border-color: var(--primary); outline: none;
}
.recurrence-end-option input[type="number"]:disabled,
.recurrence-end-option input[type="date"]:disabled {
    opacity: 0.4; cursor: not-allowed;
}

/* Summary text */
.recurrence-summary {
    font-size: 0.85rem; font-weight: 600; color: var(--primary);
    background: #eff6ff; padding: 8px 12px; border-radius: 8px;
    margin-bottom: 10px; line-height: 1.4;
    border-left: 3px solid var(--primary);
}
.recurrence-summary:empty { display: none; }

.recurrence-dates-list {
    max-height: 45vh; overflow-y: auto; margin-top: 10px;
    border: 2px solid var(--border); border-radius: 8px; padding: 8px;
}
.recurrence-dates-list:empty { display: none; }
.recurrence-date-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px; font-size: 0.9rem; font-weight: 600;
    margin-bottom: 4px;
}
.recurrence-date-item:last-child { margin-bottom: 0; }
.recurrence-date-item.date-available { background: #dcfce7; color: #166534; }
.recurrence-date-item.date-conflict { background: #fee2e2; color: #991b1b; }
.recurrence-date-item.date-substituted { background: #dbeafe; color: #1e40af; }
.recurrence-date-item .date-sub-info { font-size: 0.8rem; font-weight: 600; }
.alt-resource-item:hover, .alt-resource-item:focus { border-color: var(--primary) !important; background: #f0f4ff !important; }
.recurrence-date-item.date-pending { background: #f1f5f9; color: var(--text-secondary); }
.recurrence-date-item .date-icon { width: 18px; text-align: center; }
.recurrence-date-item .date-info { flex: 1; }
.recurrence-date-item .date-conflict-info { font-size: 0.8rem; font-weight: 500; }

.suggest-link {
    background: none; border: none; color: var(--primary); font-weight: 700;
    font-size: 0.8rem; cursor: pointer; text-decoration: underline; padding: 0; margin-top: 2px;
}
.suggest-link:hover { color: var(--primary-hover); }
.suggest-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Heatmap colleague avatars on map */
.desk-colleague-avatar {
    position: absolute; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid white; background: var(--primary); color: white;
    font-size: 0.55rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
    opacity: 0.7; pointer-events: none; z-index: 5;
}
.desk-colleague-avatar:nth-child(2) { top: -8px; right: -8px; }
.desk-colleague-avatar:nth-child(3) { bottom: -8px; right: -8px; }

/* Admin Resources */
.resource-floor-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px;
    margin-top: 10px; cursor: pointer; transition: 0.2s;
    background: var(--surface);
}
.resource-floor-item:hover { border-color: var(--primary); background: #f0f4ff; }
.resource-floor-item.active { border-color: var(--primary); background: #dbeafe; }
.resource-floor-item.active-category { border-color: var(--primary); background: #dbeafe; box-shadow: 0 0 0 1px var(--primary); }
.resource-floor-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.resource-floor-info { display: flex; align-items: center; gap: 12px; }
.resource-floor-info i { font-size: 1.3rem; color: var(--primary); }
.resource-floor-info strong { display: block; font-weight: 700; color: var(--text-primary); }
.resource-floor-info .text-muted { font-size: 0.85rem; }
.resource-floor-actions { display: flex; gap: 6px; }

.resource-map-preview {
    margin-top: 15px; border: 2px solid var(--border); border-radius: 10px;
    overflow: hidden; background: var(--surface); position: relative;
}
.resource-map-preview .map-img-container { margin: 0; border: none; }
.map-no-plan {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 200px; color: var(--text-muted); gap: 8px;
}
.map-no-plan i { font-size: 2rem; opacity: 0.5; }
.map-no-plan p { margin: 0; font-weight: 600; font-size: 0.95rem; }

/* Zoom controls - floating overlay */
.map-zoom-controls {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    position: absolute; bottom: 16px; left: 16px; z-index: 20;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
    border-radius: 8px; border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.zoom-btn {
    width: 32px; height: 32px; border: 2px solid var(--border); border-radius: 6px;
    background: var(--glass-bg); color: var(--text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
    font-size: 0.85rem;
}
.zoom-btn:hover { border-color: var(--primary); color: var(--primary); }
.zoom-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.zoom-level {
    font-weight: 700; font-size: 0.85rem; color: var(--text-secondary);
    min-width: 40px; text-align: center;
}

.map-marker-controls {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    position: absolute; bottom: 16px; right: 16px; z-index: 20;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
    border-radius: 8px; border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.map-marker-controls .zoom-btn i { font-size: 0.75rem; }
.marker-size-label {
    font-weight: 700; font-size: 0.75rem; color: var(--text-secondary);
    min-width: 28px; text-align: center;
}
.marker-size-icon {
    color: var(--text-secondary); font-size: 0.85rem;
}

/* Zoom viewport */
.map-zoom-viewport {
    overflow: auto; position: relative; flex: 1; min-height: 0; z-index: 1; border-radius: inherit;
}
.map-zoom-wrapper {
    min-height: 100%;
}

/* Background image for floor maps - now handled by .map-image-wrapper */

/* Map legend - floating overlay */
.map-legend {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 10px 16px; margin-top: 8px;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
    border-radius: 8px; border: 1px solid var(--border);
    font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
    flex-wrap: wrap;
}
.map-legend-item {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.map-legend-dot {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid;
    flex-shrink: 0;
}
.map-legend-dot.dot-available { background: #dcfce7; border-color: #166534; }
.map-legend-dot.dot-occupied { background: #fee2e2; border-color: #991b1b; }
.map-legend-dot.dot-mine { background: #dbeafe; border-color: var(--primary); }
.map-legend-dot.dot-hot { background: #fef08a; border-color: #a16207; }

/* ADMIN */
.admin-container { display: flex; flex-direction: column; gap: 24px; }
.admin-header { display: flex; flex-direction: column; gap: 15px; }
.admin-header h2 { font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }

.admin-tabs {
    display: flex; gap: 5px; background: var(--surface); padding: 5px; border-radius: 10px; border: 2px solid var(--border);
    flex-wrap: wrap;
}
.admin-tab {
    padding: 8px 16px; background: transparent; color: var(--text-secondary); border-radius: 8px;
    font-weight: 600; font-size: 0.9rem; transition: 0.2s; border: none;
}
.admin-tab.active { background: var(--glass-bg); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.admin-tab:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.5); }

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; }
.admin-card {
    padding: 25px; background: var(--glass-bg); border: 2px solid var(--border); border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.admin-card h3 {
    margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
    font-weight: 700; color: var(--text-primary);
}

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; flex-wrap: wrap; }
.admin-toolbar h3 { font-weight: 800; color: var(--text-primary); }

.admin-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 15px; background: var(--surface); border-radius: 10px; border: 2px solid var(--border); }
.admin-stat-item .stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); }
.admin-stat-item .stat-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }

/* Admin table */
.admin-table-container { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--glass-bg); border-radius: 12px; overflow: hidden; border: 2px solid var(--border); }
.admin-table thead { background: var(--surface); }
.admin-table th { padding: 12px 16px; text-align: left; font-weight: 700; color: var(--text-primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border); }
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-primary); font-weight: 500; }
.admin-table tbody tr:hover { background: var(--surface); }

.filter-group select {
    padding: 8px 12px; border: 2px solid var(--border); border-radius: 8px;
    background: var(--glass-bg); color: var(--text-primary); font-weight: 600; font-size: 0.9rem;
}

/* Status badges */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-success { background: #dcfce7; color: var(--success); }
.badge-warning { background: #fef3c7; color: var(--warning); }
.badge-danger { background: #fee2e2; color: var(--danger); }
.badge-muted { background: var(--surface); color: var(--text-muted); }
.badge-visitor-expected { background: #fef3c7; color: #92400e; font-weight: 700; }
.badge-visitor-present { background: #f0fdf4; color: #15803d; border: 1.5px solid #22c55e; font-weight: 700; }
.badge-visitor-departed { background: var(--surface); color: var(--text-muted); }
.badge-visitor-cancelled { background: #fee2e2; color: #991b1b; }
.badge-visitor-no-show { background: #fef2f2; color: #991b1b; font-style: italic; }

/* Switch */
.switch-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: var(--text-primary); font-weight: 600; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: 0.3s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 26px; }
.slider.round:before { border-radius: 50%; }

/* AGENDA */
#view-schedule { height: auto; }
.agenda-layout {
    display: flex; flex-direction: column; gap: 0;
}

/* --- Calendar (full width) --- */
.agenda-calendar {
    width: 100%;
    display: flex; flex-direction: column;
}
.agenda-cal-header {
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.agenda-header-right {
    display: flex; align-items: center; gap: 14px; margin-left: auto;
}
.agenda-header-right .agenda-day-status {
    padding: 0; border-bottom: none; gap: 6px;
}
.agenda-header-right .agenda-status-btn {
    flex: none; padding: 6px 14px; font-size: 0.8rem;
}
.agenda-header-right.hidden { display: none; }
.agenda-recurrence-btn { padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; }
.recurrence-list { margin-bottom: 0; }
.recurrence-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.recurrence-item:last-child { border-bottom: none; }
.recurrence-item-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }
.recurrence-item-days { font-size: 0.88rem; }
.recurrence-item-range { font-size: 0.8rem; }
.recurrence-days-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.recurrence-day-label { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: 0.2s; user-select: none; }
.recurrence-day-label:has(input:checked) { background: var(--primary); color: white; border-color: var(--primary); }
.recurrence-day-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.btn-danger-outline { border: 2px solid var(--danger); color: var(--danger); background: none; border-radius: 8px; padding: 4px 8px; cursor: pointer; transition: 0.2s; }
.btn-danger-outline:hover { background: var(--danger); color: white; }
.agenda-header-date {
    display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.agenda-header-weekday {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary);
}
.agenda-header-day {
    font-size: 1.05rem; font-weight: 800; color: var(--text-primary);
}
.agenda-cal-nav {
    display: flex; align-items: center; gap: 10px;
}
.agenda-month-label {
    font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin: 0; margin-right: 4px;
}
.agenda-cal-nav-btns {
    display: flex; align-items: center; gap: 6px;
}
.agenda-nav-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--border);
    background: var(--glass-bg); color: var(--text-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
    font-size: 0.85rem;
}
.agenda-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.agenda-nav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.agenda-today-btn {
    font-size: 0.85rem; padding: 6px 16px; font-weight: 700;
}

/* Calendar grid */
.agenda-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.agenda-cal-weekday {
    text-align: center; font-weight: 700; padding: 10px 4px; font-size: 0.8rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
}
.agenda-cal-cell {
    min-height: 82px; border: 2px solid transparent; padding: 6px;
    border-radius: 10px; cursor: pointer; background: var(--glass-bg);
    display: flex; flex-direction: column; gap: 3px; transition: 0.15s;
    position: relative; overflow: hidden;
}
.agenda-cal-cell:hover { background: var(--surface); border-color: var(--border-hover); }
.agenda-cal-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.agenda-cal-cell--today {
    border-color: var(--primary); background: var(--primary-light);
}
.agenda-cal-cell--selected {
    border-color: var(--primary); background: #dbeafe;
    box-shadow: 0 0 0 1px var(--primary);
}
.agenda-cal-cell--weekend { background: var(--surface); opacity: 0.7; }
.agenda-cal-cell--outside { opacity: 0.1; pointer-events: none; min-height: 30px; }

.agenda-cal-day-num {
    font-weight: 700; font-size: 0.9rem; color: var(--text-primary);
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.agenda-cal-cell--today .agenda-cal-day-num {
    background: var(--primary); color: white;
}

/* Booking pills in calendar */
.agenda-cal-pills {
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
    flex: 1 1 auto; min-height: 0;
}
.agenda-cal-pill {
    font-size: 0.65rem; font-weight: 600;
    background: var(--primary-light); color: var(--primary);
    padding: 2px 5px; border-radius: 4px; border-left: 3px solid var(--primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.agenda-cal-pill--visitor {
    background: #eef2ff; color: #7c3aed;
    border-left-color: #7c3aed;
}
.agenda-cal-pill--more {
    background: var(--surface); color: var(--text-muted);
    border-left: none; text-align: center; font-weight: 700;
}

/* Status dot in calendar cell */
.agenda-cal-status-dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
}
.agenda-cal-status-icon {
    position: absolute; top: 5px; right: 6px;
    font-size: 0.85rem; line-height: 1;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.agenda-cal-status--office { color: #1e40af; background: #dbeafe; }
.agenda-cal-status--remote { color: #6d28d9; background: #ede9fe; }
.agenda-cal-status--absent { color: #b91c1c; background: #fee2e2; }

/* --- Day Detail (right) --- */
/* Day detail as centered popup overlay */
.agenda-day-detail {
    display: none; flex-direction: column;
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 480px; max-height: 80vh;
    background: var(--glass-bg); border: 2px solid var(--border);
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 500;
}
.agenda-day-detail.open { display: flex; }
.agenda-day-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.35); z-index: 499;
}
.agenda-day-overlay.open { display: block; }

.agenda-day-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 24px 12px;
}
.agenda-day-weekday {
    font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    display: block; margin-bottom: 2px;
}
.agenda-day-date {
    font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin: 0;
}
.agenda-day-close-btn {
    width: 36px; height: 36px; border-radius: 8px; border: none;
    background: var(--surface); color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
    font-size: 1rem;
}
.agenda-day-close-btn:hover { background: var(--danger-light); color: var(--danger); }
.agenda-day-close-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Status toggle */
.agenda-day-status {
    display: flex; gap: 6px; padding: 0 24px 16px;
    border-bottom: 2px solid var(--border);
}
.agenda-status-btn {
    flex: 1; padding: 8px 10px; border: 2px solid var(--border); border-radius: 8px;
    background: var(--glass-bg); color: var(--text-secondary); cursor: pointer;
    font-weight: 600; font-size: 0.8rem; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
}
.agenda-status-btn:hover { border-color: var(--primary); color: var(--primary); }
.agenda-status-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.agenda-status-btn.active {
    background: var(--primary); color: white; border-color: var(--primary);
}

/* Timeline */
.agenda-day-timeline {
    overflow-y: auto; padding: 16px 24px;
    display: flex; flex-direction: column; gap: 0;
    min-height: 80px;
}

.agenda-empty-day {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px 20px; color: var(--text-muted); text-align: center; gap: 12px;
}
.agenda-empty-day i { font-size: 2.5rem; opacity: 0.3; }
.agenda-empty-day p { font-weight: 600; font-size: 0.95rem; }

.agenda-time-block {
    display: flex; gap: 16px; padding: 12px 0;
    position: relative;
}
.agenda-time-block + .agenda-time-block {
    border-top: 1px solid var(--border);
}
.agenda-time-indicator {
    display: flex; flex-direction: column; align-items: center;
    padding-top: 4px; flex-shrink: 0; width: 12px;
}
.agenda-time-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary); border: 2px solid var(--primary-light);
    flex-shrink: 0;
}
.agenda-time-label {
    flex-shrink: 0; width: 110px; font-size: 0.8rem;
    font-weight: 700; color: var(--text-muted); padding-top: 2px;
    white-space: nowrap;
}
.agenda-booking-card {
    flex: 1; min-width: 0; background: var(--surface); border-radius: 12px;
    padding: 14px 16px; border: 2px solid var(--border);
    transition: 0.15s;
}
.agenda-booking-card:hover {
    border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.agenda-booking-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 6px;
}
.agenda-booking-name {
    font-weight: 700; font-size: 1rem; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-booking-location {
    font-size: 0.8rem; color: var(--text-secondary); font-weight: 500;
    margin-bottom: 2px;
}
.agenda-booking-location i { font-size: 0.7rem; margin-right: 2px; }
.agenda-booking-slot {
    font-size: 0.8rem; color: var(--text-muted); font-weight: 500;
}
.agenda-booking-slot i { font-size: 0.7rem; margin-right: 2px; }
.agenda-booking-actions {
    margin-top: 8px; display: flex; justify-content: flex-end;
}
.agenda-cancel-btn {
    color: var(--danger); font-size: 0.8rem;
}
.agenda-cancel-btn:hover { text-decoration: underline; }

/* Visitors section in agenda */
.agenda-visitors-section {
    margin-top: 8px; padding-top: 12px;
    border-top: 2px dashed var(--border);
}
.agenda-section-title {
    font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0 8px;
}
.agenda-section-title i { color: var(--primary); font-size: 0.85rem; }
.agenda-visitor-card {
    border-color: #c7d2fe; background: #eef2ff;
}
.agenda-visitor-card:hover { border-color: var(--primary); }
.agenda-time-dot--visitor { background: #7c3aed; border-color: #ede9fe; }
.agenda-badge--visitor { background: #dbeafe; color: var(--primary); }
.agenda-badge--cancelled { background: #fee2e2; color: var(--danger); }

/* Badges */
.agenda-badge {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px;
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0;
}
.agenda-badge--confirmed { background: #dcfce7; color: #166534; }
.agenda-badge--ongoing { background: #fef3c7; color: #b45309; }
.agenda-badge--past { background: var(--surface); color: var(--text-muted); }

/* Slot bar */
.agenda-slot-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; margin: 0;
    border-radius: 0 0 14px 14px;
    background: var(--text-primary); color: white;
}
.agenda-slot-info {
    display: flex; flex-direction: column; gap: 2px;
}
.agenda-slot-label {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; opacity: 0.7;
}
.agenda-slot-time {
    font-size: 0.95rem; font-weight: 700;
}
.agenda-slot-add-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: white; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: 0.2s;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.4);
}
.agenda-slot-add-btn:hover { background: var(--primary-hover); transform: scale(1.05); }
.agenda-slot-add-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; }

/* Agenda Inline Day Detail */
.agenda-day-inline {
    margin-top: 20px; animation: fadeIn 0.3s ease-out;
}
.agenda-day-inline.hidden { display: none; }
.agenda-day-inline-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.agenda-day-inline-header .agenda-day-weekday {
    font-size: 0.75rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px;
}
.agenda-day-inline-header .agenda-day-date {
    font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0;
}
.agenda-inline-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.agenda-inline-panel .section-header {
    margin-bottom: 12px;
}
/* Bouton d'action colle a son titre (sinon space-between le projette dans la gouttiere centrale) */
.agenda-panel-header {
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .agenda-inline-grid { grid-template-columns: 1fr; }
    .agenda-cal-cell { min-height: 56px; padding: 4px; }
    .agenda-cal-day-num { width: 24px; height: 24px; font-size: 0.8rem; }
    .agenda-cal-pill { font-size: 0.6rem; }
    .agenda-day-header { padding: 16px 16px 8px; }
    .agenda-day-status { padding: 0 16px 12px; }
    .agenda-day-timeline { padding: 12px 16px; }
    .agenda-month-label { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .agenda-cal-pills { display: none; }
    .agenda-cal-cell { min-height: 42px; }
    .agenda-status-btn span { display: none; }
    .agenda-time-label { width: 80px; font-size: 0.7rem; }
}

/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.colleague-card {
    background: var(--glass-bg); border: 2px solid var(--border); border-radius: 12px;
    padding: 20px; display: flex; align-items: center; gap: 15px; transition: 0.2s; position: relative;
}
.colleague-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.colleague-card .info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.colleague-card .info strong { color: var(--text-primary); font-weight: 700; }
.colleague-card .info span { color: var(--text-secondary); font-size: 0.85rem; }
.colleague-card .actions { display: flex; gap: 8px; }

.status-indicator { position: absolute; top: 10px; right: 10px; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.status-indicator.status-office { background: #dcfce7; color: var(--success); }
.status-indicator.status-remote { background: #dbeafe; color: var(--primary); }
.status-indicator.status-absent { background: #fee2e2; color: var(--danger); }

.team-avatar {
    width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
    background: var(--primary-light, #e0e7ff); color: var(--primary);
}

/* Roles grid */
.roles-grid, .groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.role-card, .group-card {
    background: var(--glass-bg); border: 2px solid var(--border); border-radius: 12px; padding: 20px;
    display: flex; flex-direction: column; gap: 10px; transition: 0.2s;
}
.role-card:hover, .group-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.role-card h4, .group-card h4 { font-weight: 700; color: var(--text-primary); }
.role-card p, .group-card p { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }
.role-card .role-meta, .group-card .group-meta { display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.role-card .role-actions, .group-card .group-actions { display: flex; gap: 8px; margin-top: 5px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-box { background: var(--glass-bg); border-radius: 20px; padding: 0; width: 90%; max-width: 500px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.15); border: 2px solid var(--border); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 2px solid var(--border); flex-shrink: 0; }
.modal-header h3 { font-weight: 800; color: var(--text-primary); }
.modal-close { background: none; color: var(--text-secondary); font-size: 1.2rem; padding: 5px; }
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 25px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 25px; border-top: 2px solid var(--border); flex-shrink: 0; }

/* Confirm dialog */
.confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100; animation: confirmFadeIn 0.15s ease;
}
@keyframes confirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.confirm-box {
    position: relative;
    background: var(--glass-bg); border-radius: 16px; padding: 30px 28px 24px;
    width: 90%; max-width: 380px; text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2); border: 2px solid var(--border);
    animation: confirmSlideIn 0.2s ease;
}
.confirm-close-btn {
    position: absolute; top: 10px; right: 12px;
    background: none; color: var(--text-secondary); font-size: 1.1rem; padding: 4px 6px;
    line-height: 1; border-radius: 6px;
}
.confirm-close-btn:hover { color: var(--danger); background: var(--bg-hover, #f1f5f9); }
@keyframes confirmSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px; font-size: 1.2rem;
}
.confirm-icon.confirm-danger {
    background: #fee2e2; color: var(--danger);
}
.confirm-icon.confirm-warning {
    background: #fef3c7; color: #92400e;
}
.confirm-icon.confirm-info {
    background: var(--primary-light); color: var(--primary);
}
.confirm-box h4 {
    font-weight: 800; font-size: 1.05rem; color: var(--text-primary); margin-bottom: 8px;
}
.confirm-box p {
    font-size: 0.92rem; color: var(--text-secondary); font-weight: 500; line-height: 1.5; margin-bottom: 22px;
}
.confirm-actions {
    display: flex; gap: 10px; justify-content: center;
}
.confirm-actions .btn {
    min-width: 100px; justify-content: center;
}
.btn-danger {
    background: var(--danger); color: white; border: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 700;
    font-family: inherit; font-size: 0.9rem; cursor: pointer; transition: 0.2s;
}
.btn-danger:hover {
    background: #991b1b; box-shadow: 0 4px 12px rgba(185,28,28,0.3);
}
.btn-danger:focus-visible {
    outline: 2px solid var(--danger); outline-offset: 2px;
}

/* ======================== */
/* TOAST NOTIFICATIONS      */
/* ======================== */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.88rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    pointer-events: auto;
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s;
    max-width: 420px;
    min-width: 280px;
}

.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.toast-hiding {
    transform: translateX(-120%);
    opacity: 0;
}

.toast-success {
    background: #15803d;
    color: #fff;
}

.toast-error {
    background: #b91c1c;
    color: #fff;
}

.toast-info {
    background: #1d4ed8;
    color: #fff;
}

.toast-warning {
    background: #b45309;
    color: #fff;
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    line-height: 1.3;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 2px;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #fff;
}

/* ========== BOOKING / RESERVATION PAGE ========== */

/* Search bar */
/* Week Picker */
.week-picker {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 12px; width: 100%;
    justify-content: center;
}
.week-nav {
    flex-shrink: 0; width: 38px; height: 38px;
    border: none; border-radius: 8px; background: transparent;
    color: var(--text-muted); cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.week-nav:hover, .week-nav:focus-visible { background: var(--primary-light, #eff6ff); color: var(--primary); }
.week-days {
    display: flex; gap: 6px; flex: 0 1 auto; justify-content: center;
    overflow-x: auto; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
}
.week-days::-webkit-scrollbar { display: none; }
.week-day-btn {
    flex: 1 0 0; min-width: 48px; max-width: 72px; padding: 8px 4px;
    border: 2px solid var(--border); border-radius: 12px;
    background: var(--glass-bg); cursor: pointer;
    text-align: center; transition: all 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.week-day-btn .day-label {
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em;
}
.week-day-btn .day-num {
    font-size: 1.1rem; font-weight: 700; color: var(--text-primary); line-height: 1; position: relative;
}
.week-day-btn:hover { border-color: var(--primary); background: #f0f4ff; }
.week-day-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.week-day-btn[aria-pressed="true"] {
    border-color: var(--primary); background: var(--primary);
}
.week-day-btn[aria-pressed="true"] .day-label,
.week-day-btn[aria-pressed="true"] .day-num { color: #fff; }
/* Today dot */
.week-day-btn.is-today .day-num::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}
.week-day-btn[aria-pressed="true"].is-today .day-num::after { background: #fff; }
/* Past days - greyed out */
.week-day-btn.is-past {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.week-day-btn.is-past:hover { border-color: var(--border); background: var(--glass-bg); }
/* Selected date label row */
.selected-date-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 0 4px;
}
.selected-date-label {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: capitalize;
}
.week-goto-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s;
}
.week-goto-btn:hover, .week-goto-btn:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light, #eff6ff);
}
.week-picker-hidden-date { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.week-picker.hidden { display: none; }

.booking-search-bar {
    background: var(--glass-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.booking-search-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.booking-search-field {
    flex: 1;
    min-width: 160px;
}
.booking-search-field--toggle {
    flex: 0 0 auto;
    min-width: auto;
}
.input-icon-group {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--glass-bg);
    transition: border-color 0.2s;
}
.input-icon-group:focus-within {
    border-color: var(--primary);
}
.input-icon-group i {
    color: var(--text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.input-icon-group select,
.input-icon-group input[type="date"] {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    outline: none;
    padding: 0;
    font-family: inherit;
}
.input-icon-group select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E") no-repeat right center;
    padding-right: 16px;
}
.time-separator {
    color: var(--text-muted);
    font-weight: 700;
    padding: 0 2px;
}
.booking-search-btn {
    height: 42px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 8px;
    font-weight: 700;
}
.toggle-label--compact {
    font-size: 0.85rem;
    padding: 6px 0;
    white-space: nowrap;
}
.booking-range-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* View toolbar */
.booking-view-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}
.booking-results-info {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.booking-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--surface);
    padding: 4px;
    border-radius: 8px;
    border: 2px solid var(--border);
}
.view-toggle-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.view-toggle-btn.active {
    background: var(--glass-bg);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.view-toggle-btn:hover:not(.active) {
    color: var(--text-primary);
}
.view-toggle-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Resource list */
.booking-floor-filter {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.booking-floor-filter select {
    padding: 8px 14px; border: 2px solid var(--border); border-radius: 8px;
    background: var(--glass-bg); color: var(--text-primary); font-weight: 600; font-size: 0.9rem;
}
.booking-resource-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.booking-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.booking-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}
.booking-empty-state p {
    font-weight: 600;
    font-size: 1rem;
}
.booking-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Groups */
.booking-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.booking-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 12px;
}
.booking-group-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 8px;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.booking-group-title {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.booking-group-map-btn {
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Resource cards */
.booking-card {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--glass-bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.booking-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.booking-card--unavailable {
    opacity: 0.65;
}
.booking-card--mine {
    border-color: var(--primary);
    background: var(--primary-light);
}
.booking-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.booking-card-photo {
    width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border);
}
.booking-panel-photo {
    width: 100%; max-height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; border: 2px solid var(--border);
}
.resource-photo-upload {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.resource-photo-preview {
    width: 80px; height: 60px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border);
}
.resource-photo-actions {
    display: flex; gap: 6px; align-items: center;
}
.booking-card-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid;
}
.booking-card-dot.dot-available { background: #dcfce7; border-color: #166534; }
.booking-card-dot.dot-occupied { background: #fee2e2; border-color: #991b1b; }
.booking-card-dot.dot-mine { background: #dbeafe; border-color: var(--primary); }
.booking-card-info {
    flex: 1;
    min-width: 0;
}
.booking-card-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.booking-card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}
.booking-card-meta i {
    width: 14px;
    text-align: center;
    margin-right: 4px;
}
.booking-card-cf {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
}
.booking-cf-tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-muted, #f1f5f9);
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.booking-cf-tag strong {
    color: var(--text-primary);
    font-weight: 600;
}
.booking-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.booking-card-avail {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}
.booking-card-status {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.booking-card-status--mine {
    color: var(--primary);
}
.booking-card-status--taken {
    color: var(--text-muted);
}
.booking-book-btn {
    white-space: nowrap;
}
.badge-small {
    font-size: 0.7rem;
    padding: 2px 7px;
    background: var(--surface);
    color: var(--text-muted);
    border-radius: 10px;
    font-weight: 600;
    vertical-align: middle;
}

/* Map in booking view */
.booking-map-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.booking-map-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.booking-map-toolbar select {
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Booking panel header with close button */
.booking-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.booking-panel-header h3 {
    margin-bottom: 0;
}
.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.2s;
}
.btn-icon:hover {
    border-color: var(--danger);
    color: var(--danger);
}
.btn-icon:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
    .dashboard-layout { grid-template-columns: 1fr; }
    .quick-booking-cards { grid-template-columns: 1fr 1fr; }
    .admin-grid { grid-template-columns: 1fr; }
    .main-content { padding: 20px; }
    .top-header { grid-template-columns: 1fr; gap: 15px; }
    .top-header h1 { font-size: 1.8rem; }
    .top-header-right { justify-content: flex-start; }
}

@media (max-width: 768px) {
    body { overflow: auto; }
    #app { height: auto; min-height: 100vh; flex-direction: column; }
    .view.active { flex-direction: column; }

    /* --- Mobile sidebar: sticky top bar + hamburger --- */
    .sidebar {
        position: sticky; top: 0; z-index: 1000;
        width: 100%; height: auto;
        flex-direction: column;
        padding: 0; border-right: none;
        border-bottom: 2px solid var(--border);
        overflow: visible;
    }
    .sidebar.collapsed { width: 100%; padding: 0; }

    /* Header row: logo + actions + hamburger */
    .sidebar-header {
        display: flex; align-items: center;
        padding: 10px 15px; margin-bottom: 0; gap: 8px;
    }
    .sidebar-logo { flex: 1; min-width: 0; }
    .sidebar-logo-text span { display: none; }
    .sidebar-toggle { display: none; }
    .hamburger-btn { display: flex; }

    /* User section: actions in header, profile hidden */
    .sidebar-user {
        position: absolute; top: 10px; right: 52px;
        border-top: none; padding: 0; margin: 0;
    }
    .sidebar-user-info { display: none; }
    .sidebar-actions {
        display: flex; margin-top: 0; gap: 2px;
    }

    /* Nav links: hidden by default */
    .nav-links {
        display: none;
        flex-direction: column;
        gap: 2px;
        padding: 0 12px 12px;
        border-top: 1px solid var(--border);
    }
    .nav-links li {
        padding: 12px 16px; font-size: 0.95rem; gap: 12px;
        border-radius: 10px;
    }
    .nav-links li i { width: 22px; text-align: center; }

    /* Open state */
    .sidebar.mobile-open .nav-links {
        display: flex;
    }
    /* Profile visible at bottom of open menu */
    .sidebar.mobile-open .sidebar-user {
        position: static;
        padding: 0 12px 12px;
        border-top: 1px solid var(--border);
        margin-top: 0;
    }
    .sidebar.mobile-open .sidebar-user-info {
        display: flex;
        padding: 10px 4px;
    }
    .sidebar.mobile-open .sidebar-user-meta { display: flex; }
    .sidebar.mobile-open .sidebar-actions { display: none; }
    .main-content { padding: 15px; height: auto; }
    .sub-view { height: auto; }
    .top-header { grid-template-columns: 1fr; gap: 10px; }
    .top-header h1 { font-size: 1.5rem; }
    .top-header-right { justify-content: center; }
    .status-toggle { flex: 1; justify-content: center; }
    .status-btn { font-size: 0.8rem; padding: 6px 10px; }
    .dashboard-layout { grid-template-columns: 1fr; }
    .quick-booking-cards { grid-template-columns: 1fr; }
    /* schedule-grid responsive handled above */
    .team-grid { grid-template-columns: 1fr; }
    .top-bar { flex-direction: column; gap: 10px; align-items: flex-start; }
    .filters { width: 100%; flex-wrap: wrap; }
    .search-bar { width: 100%; }
    .search-bar input { width: 100%; }
    .res-card { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 12px; }
    .res-actions { position: absolute; top: 12px; right: 12px; width: auto; gap: 6px; flex-direction: column; align-items: flex-end; }
    .map-container { min-height: 60vh; }
    .map-legend { gap: 8px; padding: 6px 10px; font-size: 0.7rem; }
    .map-zoom-controls { bottom: 10px; left: 10px; padding: 6px 8px; gap: 4px; }
    .map-marker-controls { bottom: 46px; right: 10px; padding: 6px 8px; gap: 4px; }
    .zoom-btn { width: 28px; height: 28px; font-size: 0.75rem; }
    .booking-panel {
        position: fixed; right: 0; top: auto; bottom: 0; left: 0;
        width: 100%; border-radius: 16px 16px 0 0; max-height: 60vh; overflow-y: auto;
    }
    .login-wrapper { padding: 20px; max-width: 100%; }
    .brand-title { font-size: 2.5rem; }
    .login-logo { height: 2.5rem; }
    .auth-box { padding: 25px; }
    .admin-tabs { overflow-x: auto; }
    .notif-panel { width: 100%; }
    /* Booking search responsive */
    .booking-search-row { flex-direction: column; }
    .booking-search-field { min-width: 100%; }
    .booking-search-btn { width: 100%; justify-content: center; }
    /* Week picker mobile */
    .week-day-btn { min-width: 40px; padding: 6px 2px; }
    .week-day-btn .day-num { font-size: 0.95rem; }
    .week-day-btn .day-label { font-size: 0.65rem; }
    .week-nav { width: 28px; height: 28px; font-size: 0.75rem; }
    .week-picker { gap: 2px; }
    .week-days { gap: 4px; }
    .booking-view-toolbar { flex-direction: column; align-items: stretch; }
    .booking-card-main { flex-wrap: wrap; }
    .booking-card-actions { width: 100%; justify-content: flex-end; margin-top: 8px; }
    .search-btn-text { display: inline; }
}

/* ============================================================
   Notification Panel
   ============================================================ */

/* Panel */
.notif-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: var(--surface, #fff);
    border-left: 2px solid var(--border, #e2e8f0);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.notif-panel.hidden {
    display: none;
}

.notif-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1099;
}

.notif-panel-overlay.hidden {
    display: none;
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    flex-shrink: 0;
}

.notif-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.notif-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-panel-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

.notif-panel-close:hover {
    background: var(--bg-light, #f1f5f9);
}

.notif-panel-list {
    flex: 1;
    overflow-y: auto;
}

/* Notification items */
.notif-item {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    transition: background 0.15s;
}

.notif-item:hover {
    background: var(--surface, #f8fafc);
}

.notif-item-unread {
    background: #eff6ff;
    border-left: 3px solid var(--primary, #3b82f6);
}

.notif-item-unread:hover {
    background: #dbeafe;
}

.notif-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-light, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #3b82f6);
    font-size: 0.85rem;
}

.notif-item-content {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text, #0f172a);
    margin-bottom: 2px;
}

.notif-item-message {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.notif-item-time {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 4px;
}

/* ============================================================
   Profile Page
   ============================================================ */

.profile-view {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Profile Header Banner */
.profile-header-banner {
    grid-column: 1 / -1;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.profile-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.profile-header-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.profile-header-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-header-meta {
    font-size: 0.88rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.profile-grid-user {
    display: flex;
    flex-direction: column;
}
.profile-grid-user .profile-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.profile-grid-user .profile-form-actions {
    margin-top: auto;
}
.profile-grid-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.profile-grid-full {
    grid-column: 1 / -1;
}
.profile-grid-schedule {
    align-self: stretch;
}
.profile-grid-notif-2fa {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}
.profile-grid-notif-2fa .profile-card:first-child {
    flex: 1;
}

.profile-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--border);
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.profile-avatar-wrapper:hover,
.profile-avatar-wrapper:focus-visible {
    border-color: var(--primary);
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-avatar-wrapper:hover .profile-avatar-overlay,
.profile-avatar-wrapper:focus-visible .profile-avatar-overlay {
    opacity: 1;
}

.profile-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-form .form-group {
    margin-bottom: 16px;
}

.profile-form .form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.profile-form .form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--bg-color);
    transition: border-color 0.2s;
}

.profile-form .form-group input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.profile-form-grid-single {
    grid-template-columns: 1fr;
}

.profile-form-actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Profile: Notification Preferences */
.profile-section-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.profile-notif-toggles {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.profile-notif-horizontal {
    flex-direction: row;
    gap: 16px;
}
.profile-notif-horizontal .profile-toggle-row {
    flex: 1;
    margin-bottom: 0;
}

.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.profile-toggle-row:hover {
    background: var(--surface);
    border-color: var(--primary-light);
}

.profile-toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.profile-toggle-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-toggle-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.profile-notif-events-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.profile-notif-events-hint i {
    margin-top: 2px;
    color: var(--primary);
}

/* 2FA Status Badge */
.profile-2fa-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
}
.profile-2fa-badge i {
    font-size: 1.3rem;
    flex-shrink: 0;
}
.profile-2fa-badge strong {
    display: block;
    font-size: 0.92rem;
}
.profile-2fa-badge span {
    display: block;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.profile-2fa-enabled {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.profile-2fa-enabled i,
.profile-2fa-enabled strong {
    color: #16a34a;
}
.profile-2fa-disabled {
    background: #fef3c7;
    border: 1px solid #fde68a;
}
.profile-2fa-disabled i,
.profile-2fa-disabled strong {
    color: #d97706;
}

/* 2FA Backup Codes */
.twofa-backup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0;
}
.twofa-backup-code {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-primary);
    user-select: all;
}
.twofa-backup-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.twofa-backup-warning i {
    color: #d97706;
    flex-shrink: 0;
}

/* 2FA Method Selector Cards */
.twofa-method-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}
.twofa-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    gap: 8px;
}
.twofa-method-card:hover {
    border-color: var(--primary);
}
.twofa-method-card.selected {
    border-color: var(--primary);
    background: rgba(29, 78, 216, 0.04);
}
.twofa-method-card i {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 4px;
}
.twofa-method-card strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.twofa-method-card span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}
@media (max-width: 500px) {
    .twofa-method-cards {
        grid-template-columns: 1fr;
    }
}

/* Work Schedule in Profile */
.work-schedule-days {
    display: flex;
    gap: 10px;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}
.work-day-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.work-day-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.work-day-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--glass-bg);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.work-day-toggle input:checked + .work-day-label {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.work-day-toggle input:focus-visible + .work-day-label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.work-day-toggle:hover .work-day-label {
    border-color: var(--primary);
}
.work-schedule-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.work-schedule-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.work-row-day {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 36px;
}
.work-row-start,
.work-row-end {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 120px;
}
.work-row-sep {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Sidebar: user profile link clickable */
.user-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
    border-radius: 8px;
    padding: 4px;
    transition: background 0.15s;
}

.user-profile-link:hover,
.user-profile-link:focus-visible {
    background: var(--surface);
}

/* Admin: profile action button */
.btn-action-profile {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-action-profile:hover {
    background: var(--primary);
    color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
    .profile-view {
        grid-template-columns: 1fr;
        max-width: 700px;
    }
    .profile-header-banner,
    .profile-grid-user,
    .profile-grid-right,
    .profile-grid-full,
    .profile-grid-schedule,
    .profile-grid-notif-2fa {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    .profile-card {
        padding: 20px 16px;
    }
    .profile-header-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 16px;
    }
    .profile-header-actions {
        align-self: stretch;
    }
    .profile-form-grid {
        grid-template-columns: 1fr;
    }
    .profile-avatar-wrapper {
        width: 64px;
        height: 64px;
    }
}

/* ============================================================
   MOBILE RESPONSIVE - Vues principales (smartphone)
   - Cache Paramétrage / Administration
   - Optimise Dashboard, Accueil sécurité, Agenda, Réservation, Visiteurs
   ============================================================ */

/* Cache admin / settings / separator sur mobile */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}

@media (max-width: 768px) {
    /* --- Layout général --- */
    html, body { -webkit-text-size-adjust: 100%; }
    .main-content { padding: 12px; }
    .sub-view { padding: 0; }

    /* Top header (titres) plus compact */
    .top-header { margin-bottom: 14px; grid-template-columns: 1fr; gap: 8px; }
    .top-header h1 { font-size: 1.25rem !important; line-height: 1.3; }
    .top-header .subtitle { font-size: 0.85rem; }
    .top-bar { margin-bottom: 14px; gap: 10px; }
    .top-bar h2 { font-size: 1.2rem; }

    /* Inputs tactiles plus grands */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important; /* empêche le zoom iOS */
        min-height: 40px;
    }
    .btn, button.btn, .btn-primary, .btn-outline {
        min-height: 40px;
    }

    /* Nav-links (menu ouvert) : éléments plus grands et tactiles */
    .nav-links li {
        padding: 14px 16px;
        font-size: 1rem;
    }

    /* --- Dashboard home --- */
    .dashboard-layout { gap: 14px; }
    .dash-card { padding: 16px; }
    .card-header h3 { font-size: 0.95rem; }
    .quick-booking-cards { grid-template-columns: 1fr !important; gap: 10px; }
    .status-toggle { flex-wrap: wrap; width: 100%; gap: 6px; }
    .status-btn { flex: 1 1 auto; font-size: 0.78rem !important; padding: 8px 6px !important; }
    .status-btn i { margin-right: 3px; }
    .reservation-list .reservation-item { flex-wrap: wrap; gap: 8px; padding: 12px; }
    .section-header { flex-wrap: wrap; gap: 8px; }
    .section-header h3 { font-size: 0.95rem; }

    /* --- Agenda / Mon agenda --- */
    .agenda-cal-header { gap: 8px; margin-bottom: 10px; flex-direction: column; align-items: stretch; }
    .agenda-cal-nav { flex-wrap: wrap; gap: 6px; }
    .agenda-month-label { font-size: 1.05rem !important; flex: 1; }
    .agenda-today-btn { padding: 6px 10px !important; font-size: 0.8rem !important; }
    .agenda-nav-btn { width: 32px; height: 32px; font-size: 0.8rem; }
    .agenda-header-right { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
    .agenda-header-right .agenda-day-status { width: 100%; display: flex; gap: 4px; flex-wrap: wrap; }
    .agenda-header-right .agenda-status-btn { flex: 1 1 auto; padding: 8px 6px !important; font-size: 0.72rem !important; justify-content: center; }
    .agenda-recurrence-btn { margin-left: auto; }
    .agenda-cal-grid { gap: 2px; }
    .agenda-cal-weekday { padding: 6px 2px; font-size: 0.65rem; }
    .agenda-cal-cell { min-height: 48px !important; padding: 3px !important; border-radius: 6px; }
    .agenda-cal-day-num { width: 22px !important; height: 22px !important; font-size: 0.75rem !important; }
    /* Transformer les pills en points colores sur mobile */
    .agenda-cal-pills {
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        display: flex !important;
        flex-direction: row !important;
        gap: 2px;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 90%;
        justify-content: center;
        overflow: hidden;
    }
    .agenda-cal-pill {
        width: 5px !important;
        height: 5px !important;
        min-width: 5px !important;
        min-height: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0;
        background: var(--primary) !important;
        border: none !important;
        display: inline-block !important;
    }
    .agenda-cal-pill--visitor {
        background: #f59e0b !important;
    }
    .agenda-cal-pill--more {
        background: var(--text-muted, #94a3b8) !important;
        width: 5px !important;
    }
    /* Jour selectionne garde ses pills visibles */
    .agenda-cal-cell--selected .agenda-cal-pill {
        box-shadow: 0 0 0 1px #fff;
    }
    /* Repas : pastille compacte (fourchette) ancree en bas-gauche, distincte des points centres */
    .agenda-cal-resto-badge {
        position: absolute; bottom: 2px; left: 3px; margin: 0;
        padding: 1px 3px; gap: 0; max-width: 45%;
        font-size: 0 !important; line-height: 0; border-radius: 4px;
    }
    .agenda-cal-resto-badge i { font-size: 0.6rem !important; margin: 0 !important; }
    .agenda-day-inline .agenda-inline-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .agenda-inline-panel { padding: 12px; }

    /* --- Réservation --- */
    .booking-search-bar { padding: 10px !important; }
    .booking-search-row { flex-direction: column !important; gap: 8px !important; }
    .booking-search-field { width: 100%; min-width: 0 !important; }
    .booking-search-field--toggle { align-self: flex-start; }
    .booking-search-btn { width: 100% !important; justify-content: center !important; }
    .search-btn-text { display: inline !important; }
    .week-picker { gap: 2px; }
    .week-days { gap: 3px !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .week-day-btn { min-width: 42px !important; padding: 6px 2px !important; flex-shrink: 0; }
    .week-day-btn .day-num { font-size: 0.95rem !important; }
    .week-day-btn .day-label { font-size: 0.62rem !important; }
    .week-nav { width: 30px !important; height: 30px !important; font-size: 0.75rem !important; flex-shrink: 0; }
    .selected-date-row { flex-wrap: wrap; gap: 8px; font-size: 0.85rem; }

    .booking-view-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .booking-view-toggle { width: 100%; display: flex; }
    .booking-view-toggle .view-toggle-btn { flex: 1; justify-content: center; }
    .booking-results-info { text-align: center; font-size: 0.85rem; }

    /* Liste des ressources en cartes */
    .booking-resource-list .booking-resource-card,
    .booking-resource-list .res-card {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 10px;
    }
    .booking-resource-card .res-actions,
    .res-card .res-actions {
        width: 100%;
        justify-content: stretch;
    }
    .booking-resource-card .res-actions .btn,
    .res-card .res-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* Map view : hauteur plus adaptée */
    .booking-map-view .map-container { min-height: 55vh; max-height: 70vh; }
    .map-legend {
        flex-wrap: wrap;
        gap: 6px !important;
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
        top: 6px; left: 6px; right: 6px;
    }
    .map-zoom-controls { bottom: 8px !important; left: 8px !important; padding: 4px 6px !important; }
    .map-marker-controls { bottom: 42px !important; right: 8px !important; padding: 4px 6px !important; }
    .zoom-btn { width: 32px !important; height: 32px !important; font-size: 0.75rem !important; }
    .zoom-level { font-size: 0.7rem !important; }

    /* Booking panel en bottom-sheet */
    .booking-panel {
        position: fixed !important; right: 0 !important; left: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100% !important; max-width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        padding: 18px 16px !important;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
        z-index: 1050;
    }
    .booking-panel .day-selector { flex-wrap: wrap; gap: 6px; }
    .booking-panel .day-btn { min-width: 38px; padding: 8px 4px; }
    .recurrence-end-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .recurrence-end-option { flex-wrap: wrap; gap: 6px; align-items: center; }

    /* --- Accueil / Sécurité (view-security-desk) --- */
    #view-security-desk > header.top-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #view-security-desk > header.top-header h1 { font-size: 1.15rem !important; }
    #secdesk-live-clock { font-size: 1rem !important; flex-wrap: wrap; }
    #secdesk-live-clock i { font-size: 0.95rem !important; }

    .kpi-stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    .kpi-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
    .kpi-label { font-size: 0.65rem !important; }
    .kpi-number { font-size: 1.5rem !important; margin: 2px 0 !important; }
    .kpi-sub { font-size: 0.68rem !important; }

    .visitor-top-widgets {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    /* Filtres status pills sur mobile : wrap sur plusieurs lignes (pas de scroll horizontal) */
    .secdesk-status-filters {
        width: 100%;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .secdesk-filter-btn {
        flex: 0 1 auto;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }

    /* Date filter groups */
    .filter-date-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1 1 140px;
        min-width: 0;
    }
    .filter-date-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
    }
    .filter-date-group input[type="date"] { width: 100%; min-width: 0; }

    /* --- Filter rows: mobile grid layout --- */
    /* "Liste des visiteurs du jour" : ligne 1 = search + download, ligne 2 = pills status pleine largeur */
    .secdesk-today-filters {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "search export"
            "filters filters";
        gap: 8px !important;
        align-items: center;
    }
    .secdesk-today-filters > .search-bar {
        grid-area: search;
        max-width: none !important;
        min-width: 0 !important;
        width: 100%;
    }
    .secdesk-today-filters > .secdesk-status-filters { grid-area: filters; margin: 0 !important; }
    .secdesk-today-filters > .export-dropdown { grid-area: export; margin-left: 0 !important; }

    /* "Historique visiteurs" : ligne 1 = search + download, ligne 2 = dates cote a cote, ligne 3 = statut pleine largeur */
    .secdesk-history-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "search   search   export"
            "datefrom dateto   dateto"
            "status   status   status";
        gap: 8px !important;
        align-items: end;
    }
    .secdesk-history-filters > .search-bar {
        grid-area: search;
        max-width: none !important;
        min-width: 0 !important;
        width: 100%;
    }
    .secdesk-history-filters > .filter-date-group:nth-child(2) { grid-area: datefrom; }
    .secdesk-history-filters > .filter-date-group:nth-child(3) { grid-area: dateto; }
    .secdesk-history-filters > #secdesk-history-status {
        grid-area: status;
        min-width: 0 !important;
        width: 100%;
    }
    .secdesk-history-filters > .export-dropdown {
        grid-area: export;
        margin-left: 0 !important;
        justify-self: end;
        align-self: end;
    }

    /* --- Tables responsives (visiteurs, sécurité) : mode carte --- */
    .admin-card { padding: 14px !important; border-radius: 14px; }
    .admin-card h3 { font-size: 0.95rem !important; margin-bottom: 10px !important; }
    .admin-card-header { flex-direction: column; align-items: stretch; gap: 10px; }

    .visitor-history-wrapper { overflow-x: visible; }
    .admin-table.visitor-log-table-mobile,
    #visitor-log-table,
    #secdesk-table,
    #secdesk-history-table { border: none; background: transparent; }
    #visitor-log-table thead,
    #secdesk-table thead,
    #secdesk-history-table thead { display: none; }
    #visitor-log-table tr,
    #secdesk-table tr,
    #secdesk-history-table tr {
        display: block;
        background: var(--glass-bg, #fff);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 12px;
    }
    #visitor-log-table td,
    #secdesk-table td,
    #secdesk-history-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        text-align: right;
        font-size: 0.85rem;
        /* Neutraliser les inline styles du JS (max-width/width des colonnes desktop) qui cassent le layout carte mobile */
        max-width: none !important;
        width: auto !important;
        white-space: normal !important;
        flex-wrap: wrap;
        min-width: 0;
    }
    /* Permettre au contenu enveloppe (.secdesk-visitor-cell, divs internes) de se redimensionner correctement */
    #visitor-log-table td > *,
    #secdesk-table td > *,
    #secdesk-history-table td > * { min-width: 0; max-width: 100%; }
    #visitor-log-table td .secdesk-visitor-cell,
    #secdesk-table td .secdesk-visitor-cell,
    #secdesk-history-table td .secdesk-visitor-cell {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #visitor-log-table td:last-child,
    #secdesk-table td:last-child,
    #secdesk-history-table td:last-child { border-bottom: none !important; }
    #visitor-log-table td::before,
    #secdesk-table td::before,
    #secdesk-history-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: left;
        flex-shrink: 0;
    }
    /* Quand data-label absent, masquer le ::before (cellule d'action) */
    #visitor-log-table td:not([data-label])::before,
    #secdesk-table td:not([data-label])::before,
    #secdesk-history-table td:not([data-label])::before {
        content: '';
    }

    /* Export dropdown : rester dans la viewport */
    .export-dropdown-menu { right: 0 !important; left: auto !important; }

    /* --- Visiteurs : filtres top --- */
    #view-visitors > header.top-header { flex-direction: column !important; align-items: stretch !important; }
    #view-visitors .btn-primary { width: 100%; justify-content: center; }

    /* Visitor pagination */
    .visitor-pagination { flex-wrap: wrap; gap: 4px; }
    .visitor-pagination button { min-width: 34px; min-height: 34px; padding: 4px 8px; font-size: 0.82rem; }

    /* --- Modals : largeur plein écran sur mobile --- */
    .modal-box { width: 95% !important; max-width: 95% !important; max-height: 90vh !important; border-radius: 14px !important; }
    .modal-header { padding: 14px 16px !important; }
    .modal-header h3 { font-size: 1rem !important; }
    .modal-body { padding: 16px !important; }
    .modal-footer { padding: 12px 16px !important; flex-direction: column-reverse !important; gap: 8px !important; }
    .modal-footer .btn { width: 100%; justify-content: center; }

    .confirm-box { width: 95% !important; padding: 22px 18px 16px !important; }
    .confirm-actions { flex-direction: column !important; gap: 8px !important; }
    .confirm-actions .btn { width: 100% !important; }

    /* Toasts sur mobile */
    .toast { max-width: 94% !important; }

    /* Notif panel plein écran */
    .notif-panel { width: 100% !important; }
}

/* --- Très petits écrans --- */
@media (max-width: 480px) {
    .main-content { padding: 10px; }
    .top-header h1 { font-size: 1.1rem !important; }

    /* KPI : rester sur 2 colonnes mais plus compact */
    .kpi-number { font-size: 1.35rem !important; }
    .kpi-card { padding: 10px 12px !important; }

    /* Status toggle : masquer labels, garder icônes */
    .status-btn span:not(.sr-only) { font-size: 0.72rem; }

    /* Agenda status : n'afficher que l'icône */
    .agenda-header-right .agenda-status-btn span:not(.sr-only) { display: none; }

    /* Week picker jour plus compact */
    .week-day-btn { min-width: 38px !important; }
}

/* ============================================================
   Fix: profil mobile overflow horizontal (hard reset)
   ============================================================ */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    *, *::before, *::after { box-sizing: border-box; }
    #app, .sub-view, .main-content, .profile-view {
        max-width: 100vw;
        overflow-x: hidden;
        min-width: 0;
    }
    #view-profile { overflow-x: hidden; }
    .profile-view {
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr !important;
    }
    .profile-card,
    .profile-grid-user,
    .profile-grid-right,
    .profile-grid-schedule,
    .profile-grid-notif-2fa,
    .profile-header-banner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    .profile-form-grid,
    .profile-form-grid-single {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
    .profile-form input,
    .profile-form select,
    .profile-form textarea {
        width: 100%;
        max-width: 100%;
    }

    /* Work schedule : rows en compact, time inputs flexibles */
    .work-schedule-days { gap: 6px; flex-wrap: wrap; }
    .work-day-label { width: 38px; height: 38px; font-size: 0.82rem; }
    .work-schedule-rows { width: 100%; }
    .work-schedule-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--border, #e2e8f0);
        width: 100%;
        max-width: 100%;
        align-items: center;
    }
    .work-row-day {
        min-width: 40px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    .work-row-start,
    .work-row-end {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 6px 8px !important;
        font-size: 0.88rem !important;
    }
    .work-row-sep { padding: 0 2px; flex-shrink: 0; }

    /* Notifications toggles : pas de débordement */
    .profile-toggle-row {
        display: flex;
        gap: 12px;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }
    .profile-toggle-info {
        min-width: 0;
        flex: 1 1 0;
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }
    .profile-toggle-info > div { min-width: 0; flex: 1; }
    .profile-toggle-label,
    .profile-toggle-desc {
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .toggle-switch { flex-shrink: 0; }

    /* 2FA badge : pas de débordement */
    .profile-2fa-badge {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        max-width: 100%;
    }
    .profile-2fa-badge > div {
        min-width: 0;
        flex: 1 1 0;
        word-break: break-word;
    }

    /* Section titles */
    .profile-section-title {
        font-size: 1rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .profile-section-desc {
        font-size: 0.85rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Profile header banner */
    .profile-header-banner {
        flex-wrap: wrap;
        gap: 12px;
    }
    .profile-header-identity {
        min-width: 0;
        flex: 1;
    }
    .profile-header-name,
    .profile-header-meta {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   QR - FAB (Dashboard mobile only) + scanner overlay + badges + print
   ============================================================ */

/* Floating Action Button - visible on mobile only */
.qr-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: auto;
    height: 56px;
    min-width: 56px;
    padding: 0 20px 0 18px;
    border-radius: 28px;
    background: var(--primary, #1e3a5f);
    color: #fff;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.12);
    font-weight: 700;
    font-size: 0.92rem;
    z-index: 950;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qr-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.22), 0 6px 10px rgba(0,0,0,0.14);
}
.qr-fab:focus-visible {
    outline: 3px solid var(--primary, #1e3a5f);
    outline-offset: 3px;
}
.qr-fab i { font-size: 1.2rem; }
.qr-fab-label { display: inline; }

@media (max-width: 768px) {
    .qr-fab { display: inline-flex; }
}
@media (min-width: 769px) {
    .qr-fab { display: none !important; }
}

/* Masquer le FAB Scanner sur la vue Accueil/Securite (le scanner ne sert qu'aux QR de ressources) */
body:has(#view-security-desk:not(.hidden)) .qr-fab { display: none !important; }

/* Scanner overlay - fullscreen */
.qr-scanner-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    color: #fff;
    z-index: 10000;
    display: none;
    flex-direction: column;
    padding: 0;
}
.qr-scanner-overlay.is-open { display: flex; }
.qr-scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(0,0,0,0.6);
    z-index: 3;
}
.qr-scanner-title { font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; }
.qr-scanner-close {
    background: rgba(255,255,255,0.1);
    border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 20px;
    cursor: pointer; font-size: 1rem;
}
.qr-scanner-close:hover { background: rgba(255,255,255,0.2); }
.qr-scanner-reader {
    flex: 1;
    width: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #000;
}
.qr-scanner-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.qr-scanner-viewfinder {
    position: absolute;
    top: 50%; left: 50%;
    width: min(70vw, 260px);
    height: min(70vw, 260px);
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    box-shadow: 0 0 0 99999px rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 2;
}
.qr-scanner-hint {
    text-align: center;
    padding: 12px 16px;
    font-size: 0.88rem;
    color: #e2e8f0;
    background: rgba(0,0,0,0.6);
}
.qr-scanner-error {
    margin: 12px 16px;
    padding: 12px 14px;
    background: #dc2626;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
}
body.no-scroll { overflow: hidden; }

/* Maintenance badge + action button color */
.badge-maintenance {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.btn-action.btn-action-warn {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}
.btn-action.btn-action-warn:hover {
    background: #b45309;
    border-color: #b45309;
}

/* 3-state segmented control : Actif | Maintenance | Inactif
   Replaces the legacy toggle + fa-tools button in the admin resources table */
.status-segmented {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--glass-bg, #fff);
    min-height: 34px;
}
.status-segmented .seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.status-segmented .seg-btn:last-child { border-right: none; }
.status-segmented .seg-btn:hover { background: #f1f5f9; color: var(--text-primary); }
.status-segmented .seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.status-segmented .seg-btn i { font-size: 0.85rem; }

/* Active states — color matches the mode */
.status-segmented .seg-btn.seg-active.is-active {
    background: #dcfce7;
    color: #166534;
}
.status-segmented .seg-btn.seg-maintenance.is-active {
    background: #f59e0b;
    color: #fff;
}
.status-segmented .seg-btn.seg-inactive.is-active {
    background: #475569;
    color: #fff;
}

/* On narrow columns, hide labels (icons only) */
@media (max-width: 1100px) {
    .status-segmented .seg-label { display: none; }
    .status-segmented .seg-btn { padding: 8px 10px; }
}

/* Status pills — clearly distinguish active / maintenance / inactive */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: 6px;
    vertical-align: middle;
}
.status-pill-active {
    background: #dcfce7;
    color: #166534;
}
.status-pill-active::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
}
.status-pill-maintenance {
    background: #f59e0b;
    color: #fff;
    padding: 5px 12px;
    font-size: 0.78rem;
}
.status-pill-maintenance i { font-size: 0.7rem; }
.status-pill-inactive {
    background: #e2e8f0;
    color: #475569;
}

/* Highlight maintenance/inactive rows in admin table */
.admin-table tr.row-maintenance {
    background: rgba(245, 158, 11, 0.08);
}
.admin-table tr.row-maintenance td:first-child {
    border-left: 3px solid #f59e0b;
}
.admin-table tr.row-maintenance:hover {
    background: rgba(245, 158, 11, 0.14);
}
.admin-table tr.row-inactive {
    opacity: 0.65;
}

/* Booking list : maintenance card = greyed out, non-clickable */
.booking-card.booking-card--maintenance {
    background: #fffbeb;
    border: 1px dashed #fbbf24 !important;
    opacity: 0.85;
    cursor: not-allowed;
}
.booking-card.booking-card--maintenance .booking-card-name { color: #92400e; }
.booking-card.booking-card--maintenance .booking-card-dot.dot-maintenance,
.map-legend-dot.dot-maintenance,
.booking-card-dot.dot-maintenance {
    background: #f59e0b;
    border: 2px solid #b45309;
}
.badge.badge-maintenance-pill {
    background: #f59e0b !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.booking-card-status.booking-card-status--maintenance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background: #f59e0b;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Map marker : maintenance */
.desk.desk-maintenance {
    background: #f59e0b;
    border: 2px solid #b45309;
    opacity: 0.85;
    cursor: not-allowed;
    position: relative;
}
.desk.desk-maintenance::after {
    content: '\f7d9';  /* fa-tools */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.6rem;
}

/* QR modal preview */
.qr-modal-body { text-align: center; }
.qr-modal-preview { padding: 12px 0; }
.qr-modal-preview img { max-width: 260px; width: 100%; height: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff; }
.qr-modal-url { margin: 8px 0 16px; font-family: monospace; }
.qr-modal-loading { padding: 40px 10px; color: var(--text-muted, #64748b); }

/* Quick-book page */
.quick-book-body {
    background: var(--bg, #f8fafc);
    margin: 0;
    font-family: 'Outfit', sans-serif;
    overflow-y: auto !important;
    overflow-x: hidden;
    height: auto !important;
    min-height: 100vh;
}
.quick-book-wrap { max-width: 520px; margin: 0 auto; padding: 0 14px 60px; min-height: 100vh; display: flex; flex-direction: column; }
.qb-header { display: flex; align-items: center; gap: 10px; padding: 14px 4px; }
.qb-back { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); text-decoration: none; }
.qb-title { font-size: 1.15rem; font-weight: 800; flex: 1; margin: 0; }
.qb-main { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.qb-loading { text-align: center; padding: 40px; color: var(--text-muted); }
.qb-loading i { font-size: 1.8rem; }
.qb-resource-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.qb-resource-head { display: flex; align-items: center; gap: 12px; }
.qb-resource-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--primary-light, #e0e7ff); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.qb-resource-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-resource-info strong { font-size: 1.05rem; color: var(--text-primary); }
.qb-resource-info span { font-size: 0.82rem; }
.qb-status-badge {
    padding: 4px 10px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
}
.qb-badge-ok   { background: #dcfce7; color: #15803d; }
.qb-badge-busy { background: #fee2e2; color: #991b1b; }
.qb-badge-mine { background: #dbeafe; color: #1e40af; }
.qb-badge-warn { background: #fef3c7; color: #92400e; }
.qb-date-line { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

.qb-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.qb-panel h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.qb-panel p { font-size: 0.9rem; margin: 0 0 12px; }
.qb-panel .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.qb-panel .form-group span { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.qb-panel select, .qb-panel input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 16px;
    background: var(--glass-bg, #fff);
    color: var(--text-primary);
}
.qb-cta { margin-top: 6px; min-height: 46px; font-size: 0.95rem; }
.qb-panel-maintenance { background: #fef3c7; border-color: #fde68a; color: #78350f; text-align: center; }
.qb-panel-maintenance i { font-size: 2rem; color: #b45309; }
.qb-panel-blocked { background: #fee2e2; border-color: #fecaca; color: #7f1d1d; text-align: center; }
.qb-panel-blocked i { font-size: 2rem; color: #991b1b; }
.qb-hourly-group { display: flex; flex-direction: column; gap: 10px; }
.qb-booked-by { font-size: 0.95rem; margin: 0 0 12px; }
.qb-booked-by strong { color: var(--primary); }
.qb-cession-sent { text-align: center; padding: 14px; }
.qb-cession-sent i { color: var(--success, #22c55e); font-size: 2.2rem; }

.qb-error {
    max-width: 520px; margin: 40px auto; padding: 30px 20px; text-align: center;
    background: #fff; border-radius: 16px; border: 1px solid var(--border);
}
.qb-error i { font-size: 3rem; color: #f59e0b; }
.qb-error h1 { font-size: 1.25rem; font-weight: 800; margin: 12px 0 8px; }
.qb-error p { color: var(--text-muted); margin-bottom: 20px; }

/* QR Print page (A4) */
.qr-print-body {
    background: #f8fafc;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    padding: 20px;
    overflow-y: auto !important;   /* override global body overflow:hidden */
    overflow-x: hidden;
    height: auto !important;
    min-height: 100vh;
}
html:has(body.qr-print-body) { overflow-y: auto; }
.qr-print-header {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 210mm; margin: 0 auto 16px;
    padding: 14px 18px; background: #fff;
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.qr-print-actions { display: flex; gap: 8px; }
.qr-print-grid {
    max-width: 210mm; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10mm;
}
.qr-print-grid.qr-print-grid-single {
    grid-template-columns: 1fr;
    max-width: 160mm;
}
.qr-print-grid.qr-print-grid-single .qr-print-card {
    padding: 20mm 16mm;
}
.qr-print-grid.qr-print-grid-single .qr-print-img img {
    width: 100mm;
    height: 100mm;
}
.qr-print-grid.qr-print-grid-single .qr-print-info strong {
    font-size: 22pt;
}
.qr-print-card {
    background: #fff;
    border: 2px dashed #94a3b8;
    border-radius: 14px;
    padding: 14mm 6mm 10mm;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
    display: flex; flex-direction: column; gap: 6mm; align-items: center;
}
.qr-print-brand { font-size: 10pt; font-weight: 800; color: var(--primary); letter-spacing: 0.5px; text-transform: uppercase; }
.qr-print-img img { width: 55mm; height: 55mm; }
.qr-print-info { display: flex; flex-direction: column; gap: 2mm; align-items: center; }
.qr-print-info strong { font-size: 16pt; font-weight: 800; }
.qr-print-meta { font-size: 10pt; color: var(--text-secondary); }
.qr-print-loc { font-size: 9pt; color: var(--text-muted); }
.qr-print-badge { padding: 2px 8px; border-radius: 10px; font-size: 8pt; font-weight: 700; }
.qr-print-badge-warn { background: #fef3c7; color: #92400e; }
.qr-print-hint { font-size: 8pt; color: var(--text-muted); margin-top: 2mm; }

@media print {
    .no-print, .qr-print-header { display: none !important; }
    .qr-print-body { padding: 0; background: #fff; }
    .qr-print-grid { grid-template-columns: repeat(2, 1fr); gap: 5mm; }
    .qr-print-card { border-style: dashed; border-color: #cbd5e1; box-shadow: none; }
    @page { size: A4; margin: 10mm; }
}

/* ===== Espace de gestion Restauration ===== */
.resto-tabs {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
    border-bottom: 2px solid var(--border);
}
.resto-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border: none; background: transparent;
    color: var(--text-muted); font-weight: 600; font-size: 0.92rem;
    cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
    border-radius: 8px 8px 0 0; transition: color .15s, background .15s, border-color .15s;
}
.resto-tab:hover { color: var(--text-primary); background: var(--surface); }
.resto-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.resto-panel.hidden { display: none; }

.resto-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.resto-toolbar label { font-weight: 600; font-size: 0.88rem; color: var(--text-muted); }
.resto-toolbar select, .resto-toolbar input[type="date"] {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--glass-bg); color: var(--text-primary); font-size: 0.9rem;
}

/* Hero "Aujourd'hui" */
.resto-hero {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    background: var(--glass-bg); border: 1px solid var(--border); border-radius: 14px;
    padding: 20px 24px; margin-bottom: 20px;
}
.resto-hero-num { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--primary); }
.resto-hero-label { color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.resto-hero-side { display: flex; gap: 10px; flex-wrap: wrap; }
.resto-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; background: var(--surface);
    border: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); font-weight: 600;
}
.resto-pill strong { color: var(--text-primary); }
.resto-pill-confirmed { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.resto-pill-confirmed strong { color: #14532d; }
.resto-pill-estimated { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.resto-pill-estimated strong { color: #78350f; }

/* Cartes par site (Aujourd'hui) */
.resto-site-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.resto-site-card {
    background: var(--glass-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
}
.resto-site-card.is-closed { opacity: 0.65; }
.resto-site-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.resto-site-count { font-size: 2rem; font-weight: 800; line-height: 1; }
.resto-closed-tag {
    margin-left: auto; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    color: var(--danger); background: rgba(220, 38, 38, 0.1); padding: 2px 7px; border-radius: 6px;
}
.resto-link {
    background: none; border: none; color: var(--primary); font-weight: 600; font-size: 0.84rem;
    cursor: pointer; padding: 6px 0 0; text-align: left;
}
.resto-link:hover { text-decoration: underline; }
.resto-people { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border); }
.resto-people.hidden { display: none; }
.resto-people li { font-size: 0.85rem; padding: 3px 0; color: var(--text-primary); }

/* Prevision */
.resto-forecast-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.resto-fc-card { background: var(--glass-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.resto-fc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; text-transform: capitalize; }
.resto-fc-totals { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.resto-fc-table { width: 100%; border-collapse: collapse; }
.resto-fc-table td { padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.resto-fc-table tr:last-child td { border-bottom: none; }
.resto-fc-table td:first-child { display: flex; align-items: center; gap: 7px; }
.resto-fc-table tr.is-closed { opacity: 0.55; }
.resto-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.resto-est { color: #92400e; }

/* Historique + tableaux */
.resto-table-wrap { overflow-x: auto; }
.resto-history-table td.resto-num, .resto-history-table th.resto-num { text-align: right; }

/* Fermetures */
.resto-closure-form {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
    background: var(--glass-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.resto-closure-form label { font-weight: 600; font-size: 0.88rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.resto-closure-form select, .resto-closure-form input[type="date"] {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg, #fff); color: var(--text-primary); font-size: 0.9rem;
}
.resto-del-closure {
    background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 6px;
}
.resto-del-closure:hover { color: var(--danger); background: rgba(220, 38, 38, 0.1); }

@media (max-width: 768px) {
    .resto-hero { padding: 16px; }
    .resto-hero-num { font-size: 2.1rem; }
    .resto-tab span { display: inline; }
    .resto-closure-form { flex-direction: column; align-items: stretch; }
    .resto-closure-form select, .resto-closure-form input[type="date"], .resto-closure-form button { width: 100%; }
}

/* ===== Barre de progression globale (indicateur reseau non bloquant) ===== */
.app-progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    z-index: 99999; pointer-events: none; overflow: hidden;
    opacity: 0; transition: opacity 0.2s ease;
}
.app-progress-bar.active { opacity: 1; }
.app-progress-bar.active::before {
    content: ""; position: absolute; top: 0; height: 100%;
    width: 40%; left: -40%;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    animation: app-progress-slide 1.1s ease-in-out infinite;
}
@keyframes app-progress-slide {
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
}
/* Un controle occupe par withBusy : curseur d'attente, pas de clics fantomes */
[data-busy="1"] { cursor: progress !important; pointer-events: none; opacity: 0.85; }