/* Coquille : rail à gauche (tablette, PC) ou barre du bas (téléphone) avec les 5 espaces ; en haut, les onglets des
   sociétés, la cloche et la photo ; puis le grand titre, le sélecteur de l'espace, la recherche.
   Couleurs : uniquement les variables de base.css ; --c = couleur de la société. */

/* ---------- rail (tablette, PC) ---------- */
.side.rail { align-items: center; }
.side.rail .logo { justify-content: center; padding: 0; height: 64px; }
.side.rail nav { padding: 4px 8px 12px; gap: 6px; align-items: stretch; width: 100%; }
.side.rail nav a { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 2px 8px; min-height: 64px; border-radius: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-align: center; color: var(--muted); }
.side.rail nav a svg.i { width: 26px; height: 26px; color: var(--muted); stroke-width: 1.8; }
.side.rail nav a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.side.rail nav a.on svg.i { color: var(--accent-text); stroke-width: 2.2; }
/* [GPT 2026-10-26] Secondary shortcuts stay inside the five-space rail and never duplicate the mobile main nav. */
.side-shortcuts{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.side.rail nav .side-shortcuts a{font-size:10px;min-height:54px;padding:7px 2px}.side.rail nav .side-shortcuts svg.i{width:21px;height:21px}
.side.rail nav a .badge { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; padding: 0 5px; min-width: 18px; height: 18px; justify-content: center; background: var(--red); color: #fff; font-size: 12px; }
.side.rail nav a.on .badge { background: var(--red); }
/* Une seule page (cuisine) ou un seul espace : ni rail, ni barre du bas. */
.solo .side { display: none; }
.solo .main { margin-left: 0; padding-bottom: 0; }
.solo .bottom { display: none !important; }

/* ---------- barre du haut : onglets des sociétés · cloche · photo ---------- */
.app-top { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
.app-top .top-row { position: relative; height: 60px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctabs-slot { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
.ctabs-slot::-webkit-scrollbar { display: none; }
.app-top .live { display: none; }
.app-top .live.off { display: inline-flex; }
.app-top .ntf-bell { flex: none; }
.me { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.me .avatar { width: 36px; height: 36px; font-size: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); }
.me:active .avatar { transform: scale(.94); }
.app-top .btn.back { flex: none; }
@media (max-width: 640px) {
  .app-top .top-row { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .me { order: -1; }
  .app-top.has-back .me { display: none; }
  .app-top .live span { display: none; }
}

/* ---------- onglets : contrôle segmenté avec logos ---------- */
.ctabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: var(--fill); flex: none; }
.ctab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 10px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--text); white-space: nowrap;
  transition: background .2s, box-shadow .2s, color .2s; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ctab.all { padding: 0 16px; }
.ctab .blogo { transition: transform .25s var(--spring); }
.ctab:active .blogo { transform: scale(.92); }
.ctab.on { background: var(--surface); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
:root[data-theme="dark"] .ctab.on { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ctab.on { background: #636366; } }
.ctabs.multi .ctab.on:not(.more)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--c); }
.ctab.more { padding: 0 11px; color: var(--accent-text); gap: 4px; }
.ctab.more.on { color: var(--text); }
.ctab-n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .ctab:not(.on):hover { background: var(--hover); } }
.ctab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Les sociétés non choisies n'affichent que leur logo (le nom de la société choisie reste écrit). */
.ctab:not(.on):not(.all):not(.more) { padding: 0 8px; }
.ctab:not(.on):not(.all):not(.more) .ctab-l { display: none; }
.ctabs.multi .ctab:not(.all):not(.more) { padding: 0 8px; }
.ctabs.multi .ctab:not(.all):not(.more) .ctab-l { display: none; }
@media (min-width: 1280px) { .ctab:not(.on):not(.all):not(.more) { padding: 0 14px 0 6px; } .ctab:not(.on):not(.all):not(.more) .ctab-l { display: inline; } }
@media (max-width: 640px) { .ctab { height: 36px; } .ctab .blogo { --s: 22px !important; } .ctab.all { padding: 0 12px; } .ctab:not(.on):not(.all):not(.more) { padding: 0 6px; } }

/* Appareil verrouillé : à la place des onglets, la société de l'appareil (logo, nom, cadenas). */
.clock-badge { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 12px; background: var(--fill); font-size: 15px; font-weight: 600; max-width: 280px; color: var(--text); }
.clock-badge svg.i { color: var(--muted); }

/* ---------- grand titre, sélecteur de l'espace, recherche ---------- */
.ltitle { gap: 14px; padding-top: 6px; }
.ltitle .lt-row { align-items: center; min-height: 44px; }
.ltitle #top-actions { gap: 4px; flex: none; }
.ltitle #top-actions:empty { display: none; }
.ltitle #top-actions .btn.ghost { min-height: 44px; min-width: 44px; font-size: 17px; }
.ltitle #top-actions .btn.ghost svg.i { width: 24px; height: 24px; }
/* [Claude 2026-11-03] Tablet widths too: labelled actions that don't fit beside the heading move to the next line
   instead of covering it (Caisse on an 800 px tablet hid « Vendre » under « Opérations de caisse »). */
.ltitle .lt-row { flex-wrap: wrap; }
.ltitle .lt-row h1.lt { flex: 1 0 auto; }
.ltitle #top-actions { margin-left: auto; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
/* [GPT 2026-10-27] Labelled actions wrap below the phone heading rather than squeezing its words between buttons. */
@media (max-width: 600px) {
     .ltitle .lt-row { flex-wrap: wrap; }
     .ltitle .lt-row h1.lt { flex: 1 0 100%; }
     .ltitle #top-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}
#lt-seg:empty, #lt-seg[hidden] { display: none; }
.space-seg { max-width: 640px; }
/* [GPT 2026-11-11] Direct tabs stay in view at narrow widths as well as on the desktop. */
.space-seg.workspace-tabs { max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
.space-seg.workspace-tabs button { flex: 0 0 auto; }
.space-seg button { min-height: 36px; font-size: 15px; padding: 4px 10px; gap: 6px; }
.seg-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ltitle .lt-sub { display: none !important; }
@media (max-width: 640px) { .space-seg button { font-size: 13px; padding: 4px 6px; min-height: 32px; } }

/* ---------- logos ---------- */
.blogo { --s: 28px; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .234); overflow: hidden; line-height: 0; }
.blogo svg { display: block; width: 100%; height: 100%; }
.blogo.img img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.blogo.img.tile { background: #fff; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.blogo.img.tile img { width: 92%; height: 92%; }
.blogo.img.wide { width: auto; min-width: var(--s); max-width: calc(var(--s) * 3.2); padding: 0 calc(var(--s) * .12); }
.blogo.img.wide img { width: auto; max-width: 100%; height: 82%; }
.btag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--muted); }
.list > .item:has(> .blogo:first-child) { --sep-left: 58px; }

/* ---------- feuilles : cases à cocher rondes (choix de plusieurs sociétés) ---------- */
.cs-box { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; flex: none; color: #fff; transition: background .2s; }
.cs-box.on { background: var(--accent); box-shadow: none; }
.cs-box svg.i { stroke-width: 3; }
.cs-check { color: var(--accent-text); flex: none; }

/* Écran de connexion d'un appareil verrouillé : le logo de la société à la place de « W ». */
.login-logo { display: grid; place-items: center; margin: 0 auto 6px; }
.login-logo .blogo { box-shadow: 0 6px 20px rgba(0,0,0,.12); }

/* Réglages → Société : aperçu des logos */
.set-logo { padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.set-logo-row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.set-wm { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.list > .item.set-id > .blogo:first-child { margin: -2px 0; }
.list > .item.set-id:has(> .blogo:first-child) { --sep-left: 84px; }
.ntf-scope { text-align: center; padding: 2px 8px 0; }

/* Tablette (800 px) : cellules plus hautes, plus faciles à toucher. */
@media (min-width: 641px) and (max-width: 1279px) {
  .list > .item { min-height: 56px; }
  .btn { min-height: 48px; }
}

/* [GPT 2026-10-27] The persistent corner has a readable label before any optional grid stylesheet loads. */
.action-corner-trigger{gap:5px!important}.action-corner-trigger span{font-size:13px}@media(max-width:600px){.action-corner-trigger .i{display:none}}
/* [Claude 2026-11-06] FE-15: touch screens: 44 px space segments (the bar grows, the type does not). */
@media (pointer: coarse) { .space-seg button { min-height: 44px; } }
/* [Claude 2026-11-07] UX w0: phones get one labelled company button (« Flower Lab ▾ ») instead of a strip of tiny logos */
.ctab-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 0 12px 0 8px; border-radius: 12px; background: var(--fill); color: inherit; font-size: 15px; font-weight: 600; border: 0; flex: none; }
.ctab-switch .ctab-switch-l { min-width: 0; max-width: 46vw; }
.ctab-switch .ctab-switch-all { width: 26px; height: 26px; }
.ctab-switch:active { transform: scale(.98); }
.cs-row { min-height: 52px; }

/* [GPT 2026-11-10] Give the company, utility controls and master scanner a single shared toolbar on wide screens. */
:root { --app-bar-h: calc(105px + env(safe-area-inset-top)); }
.app-top { background: var(--bg); border-bottom-color: var(--line); padding-bottom: 6px; }
.app-top .top-row { gap: 4px; }
.app-top .top-row > .desk-global { min-width: 44px; min-height: 44px; border-radius: 12px; }
.app-top .action-corner-trigger { width: auto; flex: none; min-height: 44px; background: var(--surface); padding-inline: 12px; font-weight: 650; }
.app-top .top-row > .global-search { padding-inline: 9px; }
.app-top .master-scan-row { margin: 0 auto; width: 100%; max-width: none; }
.app-top .master-scan-button { min-height: 44px; padding: 8px 16px; gap: 8px; border-radius: 12px; font: 650 16px/1.1 var(--font); box-shadow: none; }
.app-top .master-scan-button svg { width: 21px; height: 21px; }
.main > .ltitle { padding-top: 16px; }
.ltitle .searchbar { border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ltitle .searchbar:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.side.rail nav a.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); }
@media (min-width: 741px) {
  :root { --app-bar-h: 66px; }
  .app-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-bottom: 0; min-height: var(--app-bar-h); }
  .app-top .top-row { height: 65px; }
  .app-top .master-scan-row { min-width: 105px; justify-self: end; }
  .app-top .action-corner-trigger { min-height: 48px; }
  .app-top .master-scan-button { min-height: 48px; }
}
@media (max-width: 640px) {
  :root { --app-bar-h: calc(107px + env(safe-area-inset-top)); }
  .app-top { padding-top: 0; }
  .app-top .top-row { gap: 1px; }
  .app-top .top-row > .global-search { padding-inline: 6px; }
  .main > .ltitle { padding-top: 13px; }
}