/* ============================================================
   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;
    height: 100%;
    transform: translateX(-100%);
    z-index: 100;
    width: 240px;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--sh2);
  }
  /* 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; }

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