/* 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; }

    /* Avertissement affiche quand la page est ouverte depuis localhost :
       le lien et le QR code ne sont alors pas partageables. */
    .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 ⋮ (regroupe mode admin + lien permanent + deconnexion) ---------- */
    /* Bouton rond et discret (ghost) plutot qu'un pave gris plein : il se
       fond dans l'entete tant qu'il n'est pas survole/ouvert. */
    .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; }
    /* Ancre sur .presence-header (position: relative) : le bouton reste
       toujours aligne avec le titre de la maison, meme si .header-actions
       se retrouve reduit par le flex-wrap sur mobile. */
    .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; }

    /* Item "Mode administrateur" : meme gabarit que les boutons du menu, mais
       porte par un <label> pour englober la checkbox reelle (accessibilite
       clavier/lecteur d'ecran) sans reintroduire le switch pleine largeur
       affiche precedemment dans le corps de l'ecran. */
    .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; }

    /* ---------- Suppression d'un praticien (admin) ---------- */
    /* Le badge de statut n'est plus le dernier element de la ligne quand le
       bouton est present : on regroupe badge + bouton a droite pour conserver
       l'alignement d'origine (nom a gauche, reste a droite). */
    .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; }

    /* Bandeau d'annulation : fixe en bas d'ecran, au-dessus du contenu mais
       sous les modales (z-index 50) pour ne pas masquer un QR code ouvert. */
    .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); }

    @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; } }