/* QuiEstLa - feuille de styles
 * Contenu a deplacer ici : tout ce qui se trouve entre <style> et </style>
 * dans index.html (sans les balises elles-memes).
 * Rappel : dans index.html, remplacer le bloc <style>...</style> par :
 *   <link rel="stylesheet" href="styles.css">
 */
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f4f6f9; margin: 0; padding: 1.5rem; color: #1f2933; }
    .container { max-width: 960px; margin: 0 auto; }
    header { margin-bottom: 1.5rem; position: relative; }
    header h1 { margin: 0 0 .25rem; }
    header p { margin: 0; color: #536577; }
    [hidden] { display: none !important; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
    .card { background: #fff; border-radius: 10px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    label { display: block; margin-top: .75rem; font-weight: 600; font-size: .9rem; }
    input { width: 100%; padding: .55rem .65rem; margin-top: .3rem; border: 1px solid #cbd5e0; border-radius: 6px; box-sizing: border-box; font-size: 1rem; }
    input[readonly] { background: #eef2f7; color: #536577; cursor: not-allowed; }
    button { margin-top: 1rem; padding: .6rem 1.1rem; border: none; border-radius: 6px; background: #2f6feb; color: #fff; font-weight: 600; cursor: pointer; font-size: .95rem; }
    button:disabled { opacity: .6; cursor: not-allowed; }
    .install-button { background: #6c3fc9; margin-left: .75rem; }
    .error { color: #b23b3b; margin-top: .75rem; }
    .muted { color: #536577; }
    .invite-notice { margin-top: .75rem; padding: .6rem .9rem; background: #e8f0fe; border-radius: 6px; color: #1f4788; font-size: .9rem; }
    .presence { margin-top: 1.5rem; }
    .presence-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; }
    .presence-header h2 { margin: 0; }
    .header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .header-actions button { margin-top: 0; }
    .btn-secondary { background: #5a6b7f; }
    .btn-device { background: #6c3fc9; }
    .presence-list { list-style: none; padding: 0; margin: 1rem 0 0; }
    .presence-list li { display: flex; justify-content: space-between; align-items: center; padding: .75rem .5rem; border-bottom: 1px solid #e2e8f0; border-radius: 6px; }
    .presence-list li.me { background: #eef2fb; }
    .presence-group-title { margin: 1.25rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #718096; }
    .badge { border-radius: 999px; padding: .25rem .6rem; font-size: .8rem; font-weight: 700; }
    .badge.present { background: #d6f5df; color: #1d6b37; }
    .badge.absent { background: #fde2e2; color: #9b2c2c; }
    .maison-info { margin-top: .75rem; padding: .75rem 1rem; background: #eef2f7; border-radius: 8px; }
    .maison-info strong { color: #1f2933; }
    .maison-info .access-code { font-size: 1.05rem; }
    .maison-info button { margin-top: 0; }

    .action-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
    .action-buttons button { margin-top: 0; }
    .btn-arrive { background: #2f8f4e; }
    .btn-depart { background: #b23b3b; }

    /* Bloc technique en pied de page : regroupe l'horodatage du dernier
       rafraichissement et le numero de version. Volontairement discret
       (petite taille, gris clair) pour bien marquer que ce ne sont pas des
       informations metier, contrairement au contenu de la carte blanche. */
    .tech-footer { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; color: #9aa7b5; font-size: .75rem; }
    .tech-footer span:empty { display: none; }
    .tech-footer span#last-refresh:not([hidden])::after { content: ''; }
    .tech-footer span#last-refresh:not([hidden]) + span#app-version::before { content: '·'; margin-right: .5rem; }

    .praticien-name.me { font-weight: 700; }
    .restoring { margin-top: 1rem; color: #536577; }
    .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 32, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
    .modal { background: #fff; border-radius: 10px; padding: 1.5rem; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
    .modal h3 { margin: 0 0 .5rem; }
    .modal p { margin: 0 0 1rem; color: #536577; font-size: .9rem; }
    .qr-canvas-wrapper { display: flex; justify-content: center; min-height: 200px; align-items: center; }

    .qr-loopback-warning { margin: 0 0 .75rem; padding: .6rem .75rem; border-radius: 6px; background: #fff8e1; border: 1px solid #f0c36d; color: #7a4f01; font-size: .85rem; line-height: 1.4; text-align: left; }

    .menu-wrapper { position: absolute; top: 0; right: 0; }
    .menu-button { margin-top: 0; padding: 0; background: transparent; color: #536577; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .menu-button svg { fill: currentColor; }
    .menu-button:hover, .menu-button[aria-expanded="true"] { background: #eef2f7; color: #1f2933; }
    .menu-button:focus-visible { outline: 2px solid #2f6feb; outline-offset: 2px; }
    .menu-dropdown { position: absolute; right: 0; left: auto; top: calc(100% + .3rem); background: #1f2933; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); list-style: none; margin: 0; padding: .4rem; min-width: 240px; max-width: calc(100vw - 2rem); z-index: 30; }
    .menu-dropdown li { margin: 0; }
    .menu-dropdown button { display: block; width: 100%; text-align: left; margin: 0; min-height: 44px; padding: .55rem .75rem; background: transparent; color: #fff; font-weight: 500; border-radius: 6px; }
    .menu-dropdown button:hover:not(:disabled) { background: rgba(255,255,255,.08); }
    .menu-dropdown button:focus-visible { outline: 2px solid #7fb3ff; outline-offset: -2px; }
    .menu-dropdown li + li { margin-top: .2rem; }

    .admin-toggle-item { padding: 0; }
    .admin-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; padding: .55rem .75rem; margin: 0; box-sizing: border-box; color: #fff; font-weight: 500; font-size: .95rem; border-radius: 6px; cursor: pointer; user-select: none; }
    .admin-toggle:hover { background: rgba(255,255,255,.08); }
    .admin-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
    .admin-toggle:has(input:focus-visible) { outline: 2px solid #7fb3ff; outline-offset: -2px; }
    .admin-toggle-text { flex: 1; }
    .admin-toggle-state { font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #b7c3d1; }
    .admin-toggle input:checked ~ .admin-toggle-state { background: #16a34a; color: #fff; }

    .praticien-actions { display: flex; align-items: center; gap: .6rem; }
    .btn-delete-praticien { margin-top: 0; padding: .3rem .55rem; background: transparent; color: #9b2c2c; font-size: 1rem; line-height: 1; border-radius: 6px; }
    .btn-delete-praticien:hover:not(:disabled) { background: #fde2e2; }
    .btn-delete-praticien:focus-visible { outline: 2px solid #b23b3b; outline-offset: 2px; }

    .undo-banner { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 2rem); padding: .75rem 1rem; background: #1f2933; color: #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: .9rem; }
    .undo-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .undo-banner button { margin-top: 0; padding: .35rem .8rem; background: transparent; color: #7fb3ff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
    .undo-banner button:hover { background: rgba(127, 179, 255, .15); }

    .modal-help { max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; text-align: left; }
    .faq-content { overflow-y: auto; margin-bottom: 1rem; }
    .faq-content h4 { margin: 1rem 0 .4rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: #536577; }
    .faq-content h4:first-child { margin-top: 0; }
    .faq-item { border: 1px solid #e2e8f0; border-radius: 6px; padding: .5rem .75rem; margin-bottom: .5rem; }
    .faq-item summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
    .faq-item p { margin: .5rem 0 0; font-size: .88rem; color: #1f2933; }

    @media (max-width: 560px) { body { padding: 1rem; } .presence-header { align-items: flex-start; flex-direction: column; } .install-button { margin-left: 0; } .undo-banner { left: 1rem; right: 1rem; transform: none; max-width: none; } }

/* Menu radial d'humeur
 * ------------------------------------------------------------------
 * Declenche par un appui long (~500 ms) sur #btn-arrive (voir ui.js,
 * initMoodMenu / openMoodMenu). Les boutons sont crees dynamiquement
 * par openMoodMenu() et inseres dans #mood-menu-list. Chaque bouton
 * porte la classe .mood-emoji-btn et l'attribut data-mood="<emoji>".
 *
 * Disposition : #mood-menu est un point fixe 0x0 ancre en haut a
 * gauche du viewport ; il ne capture aucun clic (pointer-events: none).
 * #mood-menu-list est place en absolu a 0,0 dans ce conteneur, et
 * chaque bouton est lui-meme en absolu avec left/top calcules par
 * openMoodMenu() en fonction de getBoundingClientRect() de
 * #btn-arrive, plus un translate(-50%,-50%) pour centrer le bouton
 * sur sa coordonnee. Cela permet aux boutons de "flotter" autour du
 * bouton "Je suis la", independamment du scroll ou du layout de la
 * page.
 *
 * Hierarchie des z-index deja definis ci-dessus :
 *   .menu-dropdown     -> 30
 *   .undo-banner       -> 40
 *   .modal-backdrop    -> 50
 * Le menu d'humeur doit etre visible au-dessus du bandeau d'annulation
 * et des modales => z-index 60.
 */
#mood-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 60;
    pointer-events: none;
}
#mood-menu-list {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    max-width: calc(100vw - 16px);
}
#mood-menu-list button {
    position: absolute;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1f2933;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    transition: background-color .15s ease, transform .15s ease;
}
#mood-menu-list button:hover {
    background: #2f6feb;
    transform: translate(-50%, -50%) scale(1.08);
}
#mood-menu-list button:focus-visible {
    outline: 2px solid #7fb3ff;
    outline-offset: 2px;
}
#mood-menu-list button:active {
    background: #2f6feb;
    transform: translate(-50%, -50%) scale(.95);
}

/* Appui long sur "Je suis la" : pas de selection ni de menu contextuel. */
#btn-arrive {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

@media (max-width: 560px) {
    #mood-menu-list button {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* Menu ⋮ (.menu-wrapper) : il est en position absolue en haut a droite de
 * .presence-header, donc hors du flux. On reserve sa place a droite de
 * l'en-tete pour que le bouton "← Liste des maisons" (et tout autre bouton
 * d'en-tete) ne passe jamais dessous, quelle que soit la largeur d'ecran.
 * 44px de bouton + marge => 3.5rem. */
.presence-header:has(> .menu-wrapper),
.presence-header:has(.menu-wrapper) { padding-right: 3.5rem; }
.superadmin-back-button { margin-top: 0; white-space: nowrap; }

/* ==========================================================================
 * Theme clair / sombre (#86)
 * Ce bloc est volontairement en fin de fichier : a specificite egale, il
 * l'emporte sur les regles de base ci-dessus. Il ne modifie pas le mode clair.
 * Le mode est pose par theme.js via <html data-theme="light|dark">.
 * ========================================================================== */
:root {
  --theme-bg: #f4f6f9;
  --theme-surface: #fff;
  --theme-border: #cbd5e0;
  --theme-text: #1f2933;
  --theme-muted: #536577;
  --theme-accent: #2f6feb;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --theme-bg: #0d1117;
  --theme-surface: #161b22;
  --theme-surface-alt: #21262d;
  --theme-border: #30363d;
  --theme-text: #e6edf3;
  --theme-muted: #8b949e;
  --theme-accent: #2f81f7;
  color-scheme: dark;
}

:root[data-theme="dark"] body { background: var(--theme-bg); color: var(--theme-text); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal { background: var(--theme-surface); border: 1px solid var(--theme-border); }
:root[data-theme="dark"] input { background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-border); }
:root[data-theme="dark"] input[readonly],
:root[data-theme="dark"] .maison-info { background: var(--theme-surface-alt); color: var(--theme-text); }
:root[data-theme="dark"] .maison-info strong,
:root[data-theme="dark"] .faq-item p { color: var(--theme-text); }
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] header p,
:root[data-theme="dark"] .restoring,
:root[data-theme="dark"] .modal p,
:root[data-theme="dark"] .faq-content h4,
:root[data-theme="dark"] .presence-group-title { color: var(--theme-muted); }
:root[data-theme="dark"] .presence-list li { border-color: var(--theme-border); }
:root[data-theme="dark"] .presence-list li.me { background: #1c2430; }
:root[data-theme="dark"] .faq-item { border-color: var(--theme-border); }
:root[data-theme="dark"] .invite-notice { background: #16263f; color: #a9c7f5; }
:root[data-theme="dark"] .badge.present { background: #12361f; color: #7ee2a0; }
:root[data-theme="dark"] .badge.absent { background: #3d1a1a; color: #f2a0a0; }
:root[data-theme="dark"] .btn-delete-praticien { color: #f2a0a0; }
:root[data-theme="dark"] .btn-delete-praticien:hover:not(:disabled) { background: #3d1a1a; }
:root[data-theme="dark"] .tech-footer { color: var(--theme-muted); }

/* Bouton ⋮ : bien visible au repos en mode sombre (bordure + texte clair),
 * sans toucher a sa position (reglee plus haut). */
:root[data-theme="dark"] .menu-button { color: var(--theme-text); border: 1px solid var(--theme-border); background: var(--theme-surface); }
:root[data-theme="dark"] .menu-button:hover,
:root[data-theme="dark"] .menu-button[aria-expanded="true"] { background: var(--theme-surface-alt); color: var(--theme-text); }

/* ==========================================================================
 * Menu ⋮ : clair par defaut (mode clair), sombre en mode sombre.
 * Les regles de base plus haut donnent un fond sombre au menu ; on les
 * surcharge ici (fin de fichier) pour le mode clair, puis on rebascule en
 * sombre via :root[data-theme="dark"].
 * ========================================================================== */
.menu-dropdown { background: #fff; border: 1px solid #cbd5e0; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.menu-dropdown button { color: #1f2933; }
.menu-dropdown button:hover:not(:disabled) { background: #eef2f7; }
.menu-dropdown button:focus-visible { outline-color: #2f6feb; }
.admin-toggle { color: #1f2933; }
.admin-toggle:hover { background: #eef2f7; }
.admin-toggle:has(input:focus-visible) { outline-color: #2f6feb; }
.admin-toggle-state { background: #e2e8f0; color: #536577; }
.admin-toggle input:checked ~ .admin-toggle-state { background: #16a34a; color: #fff; }

:root[data-theme="dark"] .menu-dropdown { background: var(--theme-surface-alt); border-color: var(--theme-border); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
:root[data-theme="dark"] .menu-dropdown button { color: var(--theme-text); }
:root[data-theme="dark"] .menu-dropdown button:hover:not(:disabled) { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .menu-dropdown button:focus-visible { outline-color: #7fb3ff; }
:root[data-theme="dark"] .admin-toggle { color: var(--theme-text); }
:root[data-theme="dark"] .admin-toggle:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .admin-toggle:has(input:focus-visible) { outline-color: #7fb3ff; }
:root[data-theme="dark"] .admin-toggle-state { background: rgba(255,255,255,.12); color: #b7c3d1; }
:root[data-theme="dark"] .admin-toggle input:checked ~ .admin-toggle-state { background: #16a34a; color: #fff; }

/* Sous-menu "Apparence" (drilldown) : la liste principale est masquee par
 * ui.js via la classe .menu-drilldown-hidden pendant que le panneau
 * #menu-appearance-panel est affiche. */
.menu-drilldown-hidden { display: none !important; }
.menu-dropdown .menu-drilldown-hidden { display: none; }
#appearance-button { display: flex; justify-content: space-between; align-items: center; }
.menu-appearance-panel { margin: 0; }
.menu-appearance-panel .theme-selector-buttons { display: grid; gap: .15rem; margin-top: .2rem; }
.menu-dropdown .menu-appearance-panel button[role="menuitemradio"] { min-height: 40px; }
.menu-dropdown #appearance-back-button { font-weight: 600; border-bottom: 1px solid #e2e8f0; border-radius: 6px 6px 0 0; }
:root[data-theme="dark"] .menu-dropdown #appearance-back-button { border-bottom-color: var(--theme-border); }

/* Option d'apparence selectionnee (placee apres les :hover pour l'emporter) */
.menu-dropdown button[role="menuitemradio"][aria-checked="true"] { background: rgba(47,111,235,.14); font-weight: 700; }
.menu-dropdown button[role="menuitemradio"][aria-checked="true"]::before { content: '✓ '; }
:root[data-theme="dark"] .menu-dropdown button[role="menuitemradio"][aria-checked="true"] { background: rgba(47,129,247,.25); }

/* QR codes (#97) : cadre blanc fixe (zone de silence) autour du QR, pour qu'il
 * reste lisible en theme sombre. Meme rendu en theme clair et sombre. */
#qr-canvas, #invite-qr-canvas { background: #fff; padding: 16px; border-radius: 8px; box-sizing: content-box; line-height: 0; }