/* ============================================================
   layout.css — Main app structure: sidebar, topbar, content
   ============================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

button, input, select, textarea {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── App container ────────────────────────────────────────── */
.app {
  display: flex;
  height: 100vh;
  /* On mobile, dvh accounts for the dynamic toolbar (address bar
     show/hide) so content doesn't get cropped at the bottom. */
  height: 100dvh;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  /* v1.2.29 — Transitions étendues pour permettre l'animation slide.
     Avant : seulement `transform` (pour le slide-in mobile).
     Maintenant : width + min-width + opacity + transform pour gérer
     le collapse desktop avec animation douce.
     overflow:hidden évite que le contenu déborde pendant l'animation
     quand width passe à 0. */
  overflow: hidden;
  transition: width .25s ease, min-width .25s ease, opacity .2s ease, transform .25s ease;
}

/* ──────────────────────────────────────────────────────────────
   v1.2.28 — User preference: hide sidebar on desktop
   v1.2.29 — Animation slide douce (au lieu de display:none sec)
   ──────────────────────────────────────────────────────────────
   The burger button ☰ in the topbar is now ALWAYS visible (desktop +
   mobile — see .burger rule below). Clicking it toggles the sidebar
   AND saves the new state as the user's preference.

   When body has `.sidebar-collapsed`, the sidebar collapses to 0 width
   with a smooth slide animation (no more `display: none` jump cut).
   The content slides naturally to fill the freed space because the
   flex layout adapts to width change. */
body.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  opacity: 0;
  /* On garde transform pour fluidifier le mouvement perçu : la
     sidebar semble glisser légèrement vers la gauche en même temps
     qu'elle se rétrécit, ce qui donne une sensation plus naturelle. */
  transform: translateX(-20px);
  /* IMPORTANT : pas de display:none, sinon pas d'animation possible.
     border-right disparaît visuellement parce qu'on va à width=0. */
  border-right: none;
}
/* Évite que le contenu interne reste cliquable / accessible au tab
   pendant que la sidebar est repliée (sinon clavier-only users peuvent
   focuser des éléments invisibles). */
body.sidebar-collapsed .sidebar > * {
  pointer-events: none;
}

.ovl {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 199;
}
.ovl.show { display: block; }

.logo {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.logo-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}
.logo-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal), #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.logo-sub {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.tnt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--text2);
}
.tdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 2s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
}
.ni {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text2);
  font-size: 13.5px;
  transition: all .12s;
  position: relative;
  user-select: none;
  margin-bottom: 2px;
}
.ni:hover { background: var(--surface); color: var(--text); }
.ni.on {
  background: var(--surface);
  color: var(--teal);
  font-weight: 500;
}
.ni.on::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2.5px;
  background: var(--teal);
  border-radius: 0 2px 2px 0;
}
.ni-ico {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.nbadge {
  margin-left: auto;
  background: rgba(45, 212, 191, .15);
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
}
.ndiv { height: 1px; background: var(--border); margin: 8px 4px; }

.sf {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r);
  background: var(--surface);
}

/* User menu dropdown (3-dots) */
.user-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  left: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh2);
  padding: 6px 0;
  z-index: 100;
  min-width: 180px;
}
.user-menu .um-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text3);
  padding: 6px 12px 4px;
  font-weight: 600;
}
.user-menu .um-item {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.user-menu .um-item:hover { background: var(--surface); }
.user-menu .um-active { color: var(--primary); font-weight: 500; }
.user-menu .um-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Main panel ───────────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 50px;
}

.burger {
  background: none;
  border: none;
  /* v1.2.29 — Plus contrasté (var(--text) au lieu de --text2) pour
     que le burger soit visible sur fond clair. Avant : grisé presque
     transparent → Jacob ne le voyait pas. */
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
  /* Padding élargi + border-radius pour un hover propre. */
  padding: 6px 10px;
  border-radius: 6px;
  /* v1.2.28 — Was `display: none` (only shown on mobile via @media).
     Now always visible because clicking it toggles + persists the
     sidebar visibility preference at any width. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.burger:hover {
  background: var(--bg2);
  color: var(--text);
}
.burger:active {
  background: var(--border);
}

.pg-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  flex: 1;
  color: var(--text);
}

.content {
  flex: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.content-inner {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

/* All pages share the same max content width so cards, tables and
   headers line up regardless of which view the user is on. Applied
   to the inner wrapper so the scrollbar stays on the right edge
   of the viewport rather than floating next to centered content. */
.content-inner > * {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    height: auto;
    left: 0;
    width: 240px;
    z-index: 1000;
    /* v1.4.56 — AUCUN transform / transition / animation sur mobile. Sur
       Android 16, un transform (même dans une animation d'entrée) promeut
       l'élément en couche GPU qui n'est PAS composée/peinte → sidebar
       invisible alors que l'overlay (fixed SANS transform) s'affiche, lui.
       On retire donc tout : la sidebar = simple display:flex fixe à l'écran,
       comme l'overlay. Fermée = display:none, ouverte = display:flex. */
    transform: none;
    transition: none;
    display: none;
  }
  .sidebar.open {
    display: flex;            /* flex-direction:column herite de la regle de base */
    box-shadow: var(--sh2);
    /* v1.4.58 — slide horizontal a l'ouverture. C'est une ANIMATION (keyframes)
       et non une transition, parce que App.render() recree l'element a chaque
       toggle : une transition ne se declencherait pas sur un element neuf, une
       animation si. Le transform n'etait pas la cause du bug (c'etait le collapse),
       donc on peut l'utiliser sans souci. */
    animation: smiloSlideIn .25s ease-out;
  }
  @keyframes smiloSlideIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }
  /* v1.4.57 — VRAIE CAUSE du « menu invisible sur mobile ». La preference
     desktop « menu replie » pose la classe body.sidebar-collapsed, dont la
     regle `body.sidebar-collapsed .sidebar { width:0; opacity:0; transform }`
     a une specificite (0,2,1) superieure a mes regles mobiles -> elle ecrasait
     le tiroir : width:0 + opacity:0 = sidebar invisible meme « open ». On
     annule donc cet effet collapse sur mobile (le tiroir n'a rien a voir avec
     le repli desktop). Diagnostic ?menudebug=1 : display=flex mais w=0 opacity=0. */
  body.sidebar-collapsed .sidebar {
    width: 240px;
    min-width: 240px;
    opacity: 1;
    transform: none;
    border-right: 1px solid var(--border);
  }
  body.sidebar-collapsed .sidebar > * {
    pointer-events: auto;
  }
  /* v1.2.28 — Garde inline-flex (cohérent avec la règle base ligne 255).
     Avant : `display: block` qui marchait mais perdait l'align-items
     du flex. Maintenant le burger est rendu pareil partout. */
  .burger { display: inline-flex; }
  .content-inner {
    /* Generous bottom padding so the last form row isn't clipped by
       the mobile browser toolbar or iOS home indicator. The
       safe-area-inset-bottom handles notched phones. */
    padding: 10px 12px calc(100px + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar squeeze */
  .topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .topbar-title { font-size: 15px; font-weight: 600; }
  .topbar button { padding: 7px 10px; font-size: 12px; }
  .topbar .btn { font-size: 12px; padding: 7px 10px; }

  /* v1.4.14 — Remonter les menus (prestataires/sites) sur la LIGNE du titre
     "Agenda" au lieu d'une 2e ligne quasi vide :
       1) le spacer flex:1 (qui poussait le cluster à la ligne suivante) est masqué ;
       2) les menus passent en icône + badge (label texte masqué) pour tenir. */
  .topbar-spacer { display: none !important; }
  .prov-menu-label { display: none; }
  .prov-menu > summary { padding: 7px 9px; }

  /* v1.4.17 — Sprint responsive (agenda) — itération 1.
     Le bloc d'actions était UN seul flex enfant rigide → trop large pour le
     tél, il basculait en entier à la 2e ligne ET débordait à droite (icônes
     coupées). On le DISSOUT (display:contents) : ses boutons deviennent des
     enfants directs de .topbar (qui est flex-wrap) → ils coulent à la suite
     du titre et s'enroulent proprement. Résultat : prestataires/sites montent
     sur la ligne "Agenda", et + Nouveau / Annulation / icônes restent VISIBLES
     (enroulés à la ligne suivante) au lieu d'être coupés.
     !important pour battre le display:flex inline du bloc. */
  .topbar-actions { display: contents !important; }

  /* v1.4.19 — Itération 2 : la topbar agenda prenait ~4 rangées (trop haut,
     mange l'espace vertical de l'agenda). On passe « + Nouveau RDV » et
     « Annulation urgente » en ICÔNE SEULE (texte masqué) → ~2 rangées.
     Les libellés texte sont dans .tb-label (l'icône ＋ / 🚨 reste visible). */
  .tb-label { display: none; }
  #newApptBtn, #urgentCloseBtn { padding: 7px 10px; }

  /* Bigger tap targets */
  .btn, button { min-height: 36px; }
  .fi, .fs, .fta { font-size: 15px; padding: 10px 12px; }  /* 15px prevents iOS zoom */
  .ro { padding: 8px 10px; font-size: 13px; }

  /* Overlay when sidebar is open */
  .ovl {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    display: block;
  }
}

/* ── Very small mobile (phones portrait) ──────────────────── */
@media (max-width: 480px) {
  .content-inner { padding: 8px 10px calc(100px + env(safe-area-inset-bottom, 0px)); }

  /* FullCalendar toolbar styling moved to responsive.css (single source of truth) */

  /* Hide columns less useful on small screens */
  .hide-mobile { display: none !important; }

  /* Patient cards stack vertically */
  .pcard { flex-direction: column; align-items: flex-start; }

  /* Stats cards smaller */
  .stat-card { padding: 12px; }
  .stat-card .sv { font-size: 20px; }
}