/* =====================================================================
   Centre Médical Ghemning — File d'attente
   Design aligné sur le site vitrine : palette médicale cyan/teal claire,
   typographies Figtree (titres) + Noto Sans (corps).
   ===================================================================== */

/* ---------- Design tokens (repris du site vitrine) ---------- */
:root{
  --color-primary:#0891B2;
  --color-primary-dark:#0E7490;
  --color-on-primary:#FFFFFF;
  --color-secondary:#22D3EE;
  --color-accent:#059669;
  --color-accent-dark:#047857;
  --color-background:#FFFFFF;
  --color-surface:#ECFEFF;
  --color-foreground:#164E63;
  --color-text:#1E3A47;
  --color-text-muted:#4B6573;
  --color-muted:#E8F1F6;
  --color-border:#CDE9F0;
  --color-destructive:#DC2626;
  --color-destructive-dark:#B91C1C;
  --color-warning:#D97706;
  --color-ring:#0891B2;

  --font-heading:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;

  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px;

  --shadow-sm:0 1px 2px rgba(22,78,99,.06);
  --shadow-md:0 4px 16px rgba(22,78,99,.08);
  --shadow-lg:0 16px 40px rgba(22,78,99,.14);
  --shadow-primary:0 10px 28px rgba(8,145,178,.30);
  --shadow-accent:0 10px 28px rgba(5,150,105,.28);

  --transition-fast:150ms ease-out;
  --transition-base:250ms ease-out;
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--color-text);
  background:
    radial-gradient(1100px 560px at 50% -12%, var(--color-surface), transparent 70%),
    linear-gradient(180deg,#F7FEFF 0%, #FFFFFF 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
h1,h2,h3{font-family:var(--font-heading);color:var(--color-foreground);line-height:1.2;margin:0}
a{color:var(--color-primary-dark);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- Layout ---------- */
.container{max-width:1000px;margin:0 auto;padding:var(--space-8) var(--space-4)}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;text-align:center;gap:var(--space-8);padding:var(--space-6)}
.row{display:flex;align-items:center;gap:var(--space-4)}
.between{justify-content:space-between}
.brand{font-family:var(--font-heading);font-weight:800;letter-spacing:-.01em;margin:0;color:var(--color-foreground)}
.hint{color:var(--color-text-muted);margin:0;font-size:1.05rem}
.links{display:flex;gap:var(--space-3);color:var(--color-text-muted)}

/* ---------- Boutons ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:var(--color-on-primary);
  border:none;border-radius:var(--radius-md);
  padding:.85rem 1.4rem;
  font-family:var(--font-heading);font-size:1rem;font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-primary);
  transition:transform var(--transition-fast),box-shadow var(--transition-base),filter var(--transition-base);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(8,145,178,.36)}
.cta:active{transform:translateY(0)}
.cta:disabled{filter:grayscale(.4);opacity:.6;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}
.cta.large{font-size:1.25rem;padding:1.1rem 1.8rem;border-radius:var(--radius-lg)}
.cta.huge{
  font-size:2rem;padding:0;border-radius:var(--radius-xl);
  min-width:300px;min-height:300px;width:min(80vw,360px);height:min(80vw,360px);
  flex-direction:column;gap:var(--space-3);
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));
  box-shadow:var(--shadow-accent);letter-spacing:-.01em;
}
.cta.huge:hover{box-shadow:0 20px 48px rgba(5,150,105,.4)}

/* ---------- Indicateurs flottants ---------- */
.sync-indicator,.printer-indicator{
  position:fixed;bottom:14px;padding:8px 14px;border-radius:var(--radius-full);
  font-size:.8rem;font-weight:700;
  background:#fff;color:var(--color-text-muted);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:8px;
}
.sync-indicator{right:14px}
.printer-indicator{left:14px}
html[data-sync="online"] .sync-indicator{color:var(--color-accent-dark);background:#ECFDF5;border-color:#A7F3D0}
html[data-sync="offline"] .sync-indicator{color:var(--color-destructive-dark);background:#FEF2F2;border-color:#FECACA}
.printer-indicator.connected{color:var(--color-accent-dark);background:#ECFDF5;border-color:#A7F3D0}
.printer-indicator.simulation{color:var(--color-warning);background:#FFFBEB;border-color:#FDE68A}

/* =====================================================================
   BORNE
   ===================================================================== */
.page-borne .brand{font-size:clamp(1.8rem,4vw,2.6rem)}
.exit-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-6);color:var(--color-text-muted)}
.exit-indicator .arrow{font-size:44px;line-height:1;color:var(--color-primary);animation:bob 1.8s ease-in-out infinite}
.exit-indicator .exit-text{font-weight:600}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* =====================================================================
   TV — affichage public salle d'attente
   ===================================================================== */
.tv-container{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;padding:clamp(20px,3vw,40px);gap:clamp(20px,3vw,40px)}
.tv-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.tv-header h1{font-size:clamp(1.4rem,3vw,2.2rem)}
.clock{font-variant-numeric:tabular-nums;color:var(--color-text-muted);font-size:clamp(1.1rem,2.4vw,1.8rem);font-weight:700}
.now-calling{
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52vh;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.now-calling::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 50% -20%,var(--color-surface),transparent 70%);pointer-events:none}
.label{color:var(--color-text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.8rem,1.6vw,1.1rem);margin-bottom:var(--space-4)}
.current-number{
  font-family:var(--font-heading);font-size:18vw;line-height:.95;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--color-primary-dark);
  position:relative;
}
.previous{display:flex;flex-direction:column;gap:var(--space-3)}
.previous-list{display:flex;gap:var(--space-3);flex-wrap:wrap}
.badge{
  background:#fff;border:1px solid var(--color-border);color:var(--color-foreground);
  padding:.5rem .9rem;border-radius:var(--radius-md);font-size:clamp(1.2rem,2.6vw,1.8rem);
  font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm);
}

/* Diaporama de veille (plein écran, après inactivité) */
.idle-screen{
  position:fixed;inset:0;z-index:50;background:#000;
  opacity:0;visibility:hidden;transition:opacity 600ms ease;
}
.idle-screen.show{opacity:1;visibility:visible}
.idle-layer{position:absolute;inset:0;opacity:0;transition:opacity 800ms ease}
.idle-layer.active{opacity:1}
.idle-media{
  position:absolute;inset:0;width:100%;height:100%;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  object-fit:cover;
}

/* =====================================================================
   CARTES (médecin + admin partagent .control-card etc.)
   ===================================================================== */
.control-card,.room-card,.history-card,.logs-card{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-md);
}
.card-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);color:var(--color-primary-dark)}
.card-header i{font-size:1.1rem}
.card-header h2{font-size:1.15rem;font-weight:700;color:var(--color-foreground);flex:1}

/* ---------- Bandeau d'en-tête (médecin / admin) ---------- */
.doctor-header,.admin-header{
  border-radius:var(--radius-xl);padding:var(--space-6) var(--space-8);margin-bottom:var(--space-8);
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  box-shadow:var(--shadow-primary);
}
.admin-header{background:linear-gradient(135deg,var(--color-foreground),#0B3B4C)}
.header-content{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.brand-section{display:flex;align-items:center;gap:var(--space-4)}
.doctor-header h1,.admin-header h1{color:#fff;font-size:1.5rem}
.doctor-header .subtitle,.admin-header .subtitle{color:rgba(255,255,255,.82);margin:.25rem 0 0;font-size:.9rem;font-weight:600}
.header-icon{
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;
  border-radius:var(--radius-md);background:rgba(255,255,255,.18);color:#fff;font-size:1.5rem;
  -webkit-text-fill-color:#fff;
}
.queue-badge,.status-badge{
  display:flex;align-items:center;gap:var(--space-2);padding:.7rem 1.1rem;border-radius:var(--radius-md);
  font-weight:700;font-size:.95rem;
}
.queue-badge{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
.queue-badge strong{font-variant-numeric:tabular-nums}
.status-badge{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* =====================================================================
   MÉDECIN
   ===================================================================== */
.main-controls,.room-selection,.quick-stats{margin-bottom:var(--space-8)}
.next-btn{
  width:100%;font-size:1.4rem;padding:1.25rem;
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));
  box-shadow:var(--shadow-accent);
}
.next-btn:hover{box-shadow:0 16px 38px rgba(5,150,105,.4)}
.next-btn.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:var(--shadow-accent)}50%{box-shadow:0 0 0 6px rgba(5,150,105,.16),var(--shadow-accent)}}
.last-called,.last-called-info{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);margin-top:var(--space-4);font-size:.95rem}
.last-called-info strong{color:var(--color-foreground);font-variant-numeric:tabular-nums}

.room-options{display:flex;gap:var(--space-4);flex-wrap:wrap}
.room-option{cursor:pointer;flex:1;min-width:120px}
.room-option input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.room-button{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:56px;padding:1rem 1.25rem;
  background:var(--color-muted);border:2px solid var(--color-border);border-radius:var(--radius-md);
  font-family:var(--font-heading);font-weight:700;color:var(--color-foreground);
  transition:all var(--transition-fast);cursor:pointer;
}
.room-button:hover{border-color:var(--color-primary);background:var(--color-surface)}
.room-option input[type="radio"]:focus-visible + .room-button{outline:3px solid var(--color-ring);outline-offset:2px}
.room-option input[type="radio"]:checked + .room-button{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  border-color:var(--color-primary-dark);color:#fff;box-shadow:var(--shadow-primary);
}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.stat-card{
  display:flex;align-items:center;gap:var(--space-4);
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.stat-card i{font-size:1.3rem;color:var(--color-primary);background:var(--color-surface);padding:.85rem;border-radius:var(--radius-md);width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:none}
.stat-content{display:flex;flex-direction:column;gap:var(--space-1)}
.stat-label{font-size:.8rem;color:var(--color-text-muted);font-weight:600}
.stat-value{font-family:var(--font-heading);font-size:1.6rem;font-weight:800;color:var(--color-foreground);font-variant-numeric:tabular-nums}

/* ---------- Carte d'aide / navigation ---------- */
.help-section{margin-top:var(--space-8)}
.help-card{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.help-card i{font-size:1.2rem;color:var(--color-primary);flex:none}
.help-card p{margin:0;color:var(--color-text)}
.link-btn{
  color:var(--color-primary-dark);font-weight:700;display:inline-flex;align-items:center;gap:var(--space-1);
  padding:.25rem .5rem;border-radius:var(--radius-sm);transition:background var(--transition-fast);text-decoration:none;
}
.link-btn:hover{background:#fff;text-decoration:none}

/* =====================================================================
   ADMIN
   ===================================================================== */
.admin-controls{margin-bottom:var(--space-8)}
.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}
.button-group{display:flex;flex-direction:column;gap:var(--space-3)}
.button-group .cta{width:100%}

.danger-card{border-color:#F5C2C2;background:linear-gradient(180deg,#FFF5F5,#fff)}
.danger-card .card-header{color:var(--color-destructive)}
.danger-btn{background:linear-gradient(135deg,var(--color-destructive),var(--color-destructive-dark));box-shadow:0 10px 28px rgba(220,38,38,.26)}
.danger-btn:hover{box-shadow:0 14px 34px rgba(220,38,38,.34)}

.config-options{display:flex;flex-direction:column;gap:var(--space-4)}
.config-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-weight:600;color:var(--color-text)}
.config-input{
  min-height:44px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:.5rem .75rem;color:var(--color-text);font-size:.95rem;font-family:var(--font-body);min-width:130px;
}
.config-input:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(8,145,178,.18)}

.advanced-stats{display:flex;flex-direction:column}
.stat-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}
.stat-item:last-child{border-bottom:none}
.stat-item .stat-value{font-size:1.2rem}

.history-section,.logs-section{margin-bottom:var(--space-8)}
.export-btn{
  display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:.45rem .9rem;color:var(--color-primary-dark);font-size:.85rem;font-weight:700;cursor:pointer;
  transition:all var(--transition-fast);font-family:var(--font-heading);
}
.export-btn:hover{background:var(--color-surface);border-color:var(--color-primary)}

.history-list,.logs-container{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2)}
.history-item{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:.75rem 1rem;background:var(--color-muted);border-radius:var(--radius-sm);font-size:.9rem;
}
.history-item.empty{justify-content:center;color:var(--color-text-muted);font-style:italic}
.history-time{color:var(--color-text-muted);font-size:.8rem;min-width:56px}
.history-number{font-weight:800;color:var(--color-primary-dark);font-variant-numeric:tabular-nums}
.history-room{color:var(--color-accent-dark);font-weight:700}

.log-entry{display:flex;gap:var(--space-3);padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:.8rem;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.log-entry.log-info{background:var(--color-surface);color:var(--color-primary-dark)}
.log-entry.log-warning{background:#FFFBEB;color:var(--color-warning)}
.log-entry.log-error{background:#FEF2F2;color:var(--color-destructive-dark)}
.log-time{color:var(--color-text-muted);min-width:60px}
.log-message{flex:1}

/* ---------- Modal ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(22,78,99,.55);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:var(--space-4)}
.modal-content{background:#fff;border-radius:var(--radius-xl);padding:var(--space-8);max-width:420px;width:100%;border:1px solid var(--color-border);box-shadow:var(--shadow-lg);animation:modal-in var(--transition-base)}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);color:var(--color-destructive)}
.modal-header i{font-size:1.3rem}
.modal-header h3{font-size:1.2rem;font-weight:700;color:var(--color-foreground)}
.modal-body{margin-bottom:var(--space-6)}
.modal-body p{margin:0;color:var(--color-text-muted);line-height:1.6}
.modal-footer{display:flex;gap:var(--space-3);justify-content:flex-end}
.modal-footer .cta{padding:.7rem 1.3rem;font-size:.95rem}
#modal-cancel{background:#fff;color:var(--color-text);border:1px solid var(--color-border);box-shadow:none}
#modal-cancel:hover{background:var(--color-muted);transform:translateY(-1px)}

/* ---------- Notification d'impression ---------- */
.print-notification{position:fixed;top:20px;right:20px;background:#fff;border:1px solid #A7F3D0;color:var(--color-accent-dark);padding:1rem 1.25rem;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;transform:translateX(120%);transition:transform var(--transition-base);max-width:320px}
.print-notification.show{transform:translateX(0)}
.print-content{display:flex;align-items:center;gap:var(--space-3)}
.print-content i{font-size:1.25rem;color:var(--color-accent)}
.print-content div{display:flex;flex-direction:column;gap:2px}
.print-content strong{font-weight:700;font-size:.9rem;color:var(--color-foreground)}
.print-content span{font-size:.8rem;color:var(--color-text-muted)}

/* ---------- Ticket imprimé (caché à l'écran) ---------- */
.ticket-root{width:300px;margin:0 auto;padding:12px 16px;font-family:var(--font-body);color:#000}
.ticket-header{display:flex;align-items:flex-start;justify-content:space-between}
.ticket-title{font-weight:800}
.ticket-number{font-size:72px;font-weight:900;text-align:center;margin:12px 0}
.ticket-meta{font-size:12px;color:#333}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .header-content{flex-direction:column;text-align:center}
  .room-options{flex-direction:column}
  .stats-grid,.control-grid{grid-template-columns:1fr}
  .config-item{flex-direction:column;align-items:flex-start}
  .current-number{font-size:30vw}
}

/* ---------- Mouvement réduit (accessibilité) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}