/* ═══════════════════════════════════════════════════════════════════════
   Topbar (.topbar / .menu-toggle / .topbar-title / .tb-* / .tb-notif-*)
   Extrait de css/hostome-ui.css lors de la Phase 5
   (SEPARATE_AND_ORCHESTRATE_APPLICATION_SHELL) : bloc "Shell partage"
   (ajoute 2026-07-27) + bloc "Topbar : recherche / actions / CTA (.tb-*)"
   (ajoute 2026-07-30) + les deux regles structurelles .tb-notif-btn/
   .tb-notif-badge (bouton cloche seulement - le panneau .notif-panel* qui
   affiche du contenu métier reste dans css/hostome-ui.css, hors périmètre
   shell). Declarations deplacees a l'identique. Les media queries qui
   couplaient a l'origine `.sidebar` et `.topbar`/`.menu-toggle` ont été
   rejouées ici avec uniquement la part topbar (voir css/shell/sidebar.css
   pour la part sidebar de ces mêmes media queries, dans le même ordre
   relatif que le fichier source).
   ═══════════════════════════════════════════════════════════════════════ */

.topbar {
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 200;
}

/* Mission CANONICALIZE_SHARED_TOPBAR_STRUCTURE_STYLES_AND_NOTIFICATIONS_
   ACROSS_ALL_AUTHENTICATED_PAGES (2026-07-30) : effet givre manquant de ce
   bloc partage - present uniquement dans la copie locale de calendar.css
   (et 9 autres feuilles de page), absent d'ici. Recupere a l'identique. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  [data-theme="dark"] .topbar {
    background: rgba(22, 22, 26, 0.72);
  }
}

.menu-toggle {
  border: 0;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--t2);
  cursor: pointer;
  padding: 6px 10px;
}

.topbar-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t1);
  margin-right: auto;
  letter-spacing: -0.01em;
}

@media (max-width: 860px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
  }
}

.topbar {
  gap: 16px;
  padding: 0 22px;
}

@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 860px) {
  .topbar {
    padding: 0 14px;
    gap: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Topbar : recherche / actions / CTA (.tb-*) - complement au shell
   Ajoute le 2026-07-27 (mission ELIMINATE_APP_CSS_DEPENDENCY_FROM_ALL_PRODUCTION_PAGES),
   apres regression reelle detectee empiriquement sur inbox.html mobile
   (run 20260727-171001-visual-parity-local, 6 tests) : le shell initial
   (extrait de help.css, dont le topbar ne comporte ni recherche ni CTA)
   ne couvrait pas .tb-search/.tb-actions/.tb-cta/.tb-theme-btn/.tb-iconbtn/
   .tb-crumbs/.tb-kbd/.tb-dot - absents de help.css car help.html ne les
   utilise pas. Diagnostic empirique (comparaison des hauteurs calculees
   des enfants de .topbar avant/apres) : .tb-search restait visible sur
   mobile (hauteur 19px au lieu de 0), la regle qui le masque
   (@media (max-width:860px){.tb-search{display:none}}) manquait.

   Source : app.css L11223-11305 (regles de base) + L12085-12096
   (masquage mobile + thème sombre du bouton thème), copie verbatim.
   ═══════════════════════════════════════════════════════════════════════ */

.tb-left { min-width: 0; }
.tb-crumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t1);
}
.tb-crumb-muted { color: var(--t3); font-weight: 500; }
.tb-search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--t3);
}
.tb-search:focus-within {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(12,12,16,0.04);
}
.tb-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--t1); font-family: inherit;
}
.tb-search input::placeholder { color: var(--t3); }
.tb-kbd {
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--t3);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.tb-actions { display: flex; align-items: center; gap: 8px; }
.tb-iconbtn {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t2);
  display: grid; place-items: center;
  transition: background 0.15s, color 0.15s;
  font-size: 14px;
}
.tb-iconbtn:hover { background: var(--surface-3); color: var(--t1); }
.tb-dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 7px; height: 7px;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 50%;
}
.tb-cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: var(--t1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 14px -6px rgba(12,12,16,0.5);
  text-decoration: none;
  white-space: nowrap;
}
.tb-cta:hover { background: #1c1c22; }

[data-theme="dark"] .tb-cta {
  background: var(--surface-3);
  color: var(--t1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 10px -4px rgba(0,0,0,0.5);
}
[data-theme="dark"] .tb-cta:hover { background: #2c2c33; }
[data-theme="dark"] .tb-kbd { background: var(--surface); border-color: var(--line-strong); }

/* ─── Topbar theme toggle SVG ─── */
.tb-theme-btn { color: var(--t2); }
.tb-theme-btn svg { display: block; }
[data-theme="dark"] .tb-theme-btn { color: var(--t2); }

/* ─── Mobile: cache la recherche dans la topbar ─── */
@media (max-width: 860px) {
  .tb-search { display: none; }
  .topbar { padding: 0 14px; gap: 10px; }
  .tb-cta { display: none; }
}

/* Cloche + badge (bouton, structure uniquement) - le contenu du panneau
   deroulant (.notif-panel*) reste dans css/hostome-ui.css : il affiche des
   donnees metier (reservations/cautions), rendues par bindNotifPanel()/
   updateNotifBadge() dans auth.js, jamais par ce module shell. */
.tb-notif-btn { position: relative; }
.tb-notif-badge {
  position: absolute;
  top: 1px; right: 0;
  background: var(--accent);
  color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 999px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
  border: 2px solid var(--bg);
}