/* ==========================================================================
   Mon serveur et Mes serveurs > Hub digital (odesa-hub.js ; PLAN_APP_MOBILE.md).
   La page ne défile pas : les listes, les formulaires et les tableaux défilent en eux-mêmes.
   ========================================================================== */

.hb { --hb-c: #4338ca; --hb-fond: #eef2ff; display: flex; flex-direction: column; gap: 10px; height: clamp(460px, calc(100vh - 400px), 1200px); min-height: 0; }
@media (min-width: 1000px) and (min-height: 620px) { .mp.cadre .mp-ix > .hb { flex: 1 1 0; height: auto; } }
.hb .ms { flex: none; }
.hb-note { margin: 0; color: var(--doux); font-size: .82rem; }
.hb-alerte { color: #b45309; }
.hb-tete { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--hb-fond); color: var(--hb-c); flex: none; }
.hb-tete > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-tete small { color: var(--texte); font-size: .82rem; line-height: 1.4; }
.hb-apercu { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed #f59e0b; background: #fffbeb; color: #92400e; font-size: .84rem; flex: none; }

.hb-onglets { display: flex; gap: 2px; padding: 0 4px; border-bottom: 1px solid var(--bord); flex: none; overflow-x: auto; }
.hb-onglets button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--doux); font: 600 .86rem inherit; cursor: pointer; white-space: nowrap; }
.hb-onglets button.is-actif { color: var(--hb-c); border-bottom-color: var(--hb-c); }
.hb-onglets button.is-off { opacity: .55; }
.hb-corps { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }

.hb-panneau, .hb-form { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.hb-bloc { display: flex; flex-direction: column; gap: 8px; }
.hb-bloc h4, .hb-bloc h5 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .9rem; }
.hb-bloc h5 { font-size: .82rem; color: var(--doux); }
.hb-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.hb-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.hb-champ.is-large { grid-column: 1 / -1; }
.hb-champ > span { font-size: .72rem; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .02em; }
.hb-case { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.hb-cases { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hb-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.hb-actions .btn, .hb-url .btn, .hb-p-ajout .btn, .hb-vide .btn, .hb-pages .btn { display: inline-flex; align-items: center; gap: 6px; }
.hb-danger { color: #b42318; }

/* pour qui */
.hb-pour { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hb-jeton { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 999px; background: var(--hb-fond); color: var(--hb-c); font-size: .82rem; font-weight: 600; }
.hb-jeton button { display: inline-flex; padding: 2px; margin: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.hb-jeton button:hover { background: color-mix(in srgb, var(--hb-c) 15%, transparent); }
.hb-p-ajout { display: inline-flex; align-items: center; gap: 6px; }
.hb-p-ajout select { max-width: 220px; }

.hb-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hb-url code { padding: 6px 10px; border-radius: 8px; background: var(--neutre); font-size: .86rem; }
.hb-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hb-caps li { display: flex; align-items: center; gap: 8px; }
.hb-caps li.is-ok { color: #15803d; }
.hb-caps li.is-off { color: var(--doux); }
.hb-caps small { color: var(--doux); }

/* maître et détail (dépôts, boîtes) */
.hb-maitre { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: var(--carte); }
.hb-cote { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bord); }
.hb-cote-tete { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.hb-items { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.hb-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 0; border: 1px solid transparent; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.hb-item:hover { background: var(--neutre); }
.hb-item.is-actif { background: var(--hb-fond); border-color: color-mix(in srgb, var(--hb-c) 30%, transparent); color: var(--hb-c); }
.hb-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hb-item-t b, .hb-item-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-item-t small { color: var(--doux); font-size: .74rem; }
.hb-pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hb-pt.is-ok { background: #16a34a; } .hb-pt.is-off { background: #94a3b8; }
.hb-ico { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.hb-ico:hover { background: var(--neutre); color: var(--texte); }
.hb-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hb-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--doux); }
.hb-vide p { max-width: 460px; margin: 0; }
.hb-reprendre select { max-width: 360px; }
.hb-correspondance .vu-note { margin: 0 0 6px; }

/* appareils et journal */
.hb-table-cadre { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--bord); border-radius: 14px; }
.hb-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hb-table th { position: sticky; top: 0; background: var(--carte); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); font-size: .74rem; text-transform: uppercase; color: var(--doux); }
.hb-table td { padding: 8px 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.hb-pages { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; flex: none; }

@media (max-width: 760px) {
  .hb-maitre { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .hb-cote { border-right: 0; border-bottom: 1px solid var(--bord); max-height: 200px; }
}