/* SnowFlare Channel Hub — app-scoped polish on top of the shared NOVYA Glass design system (which
   is read-only here). Only layout/spacing/legibility rules the shared CSS does not cover. */

/* ---------- topbar: the kit's 3-column grid strands the actions mid-bar when the mobile-menu button is
   hidden; a flex row pins them to the inline-end edge in LTR and RTL at every width ---------- */
.topbar{display:flex;align-items:center}
.topbar__location{flex:1 1 auto;min-width:0}
.topbar__actions{flex:0 0 auto;margin-inline-start:auto}
/* theme toggle and sign-out stay reachable on phone / tablet portrait (the kit hides them <900px) */
@media(max-width:900px){
  .topbar__actions #logout-btn,.topbar__actions [data-theme-toggle]{display:grid}
}
@media(max-width:480px){
  .topbar__actions{gap:4px}
  .topbar__loc-text #loc-sub{display:none}
}

/* ---------- sign-in ---------- */
.admin-login{overflow:auto}
.admin-login__card{position:relative}
.admin-login .lang-toggle{width:auto;min-width:44px;min-height:44px;margin:0;background:transparent;border-color:rgba(255,255,255,.4);color:#fff;
  position:absolute;top:16px;inset-inline-end:16px}
.admin-login .lang-toggle:hover{background:rgba(255,255,255,.14)}
.admin-login__card>img{margin-top:10px}
.login-users button{margin:0}
/* role names wrap instead of ellipsising (same rule as orders/catalog/branchcash/finance) */
.login-users button strong,.login-users button small{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.login-users{max-height:min(62vh,520px);padding-bottom:18px;margin-bottom:6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}
.nav-empty{margin:0;padding:14px 16px;color:#a8b7ca;font-size:11px;line-height:1.5}

/* ---------- blocks inside a panel: one rhythm between kv grids, tables and sub-sections ---------- */
.panel__body>.kv+.kv,.panel__body>.kv+.data-wrap,.panel__body>.data-wrap+.kv,.panel__body>.data-wrap+.subhead,.panel__body>.kv+.subhead{margin-top:16px}
.panel__body>.data-wrap{border-radius:var(--radius)}
.subhead{margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- tables ---------- */
.data-table .nowrap,.data-table td.nowrap{white-space:nowrap}
[data-table="messages"]{table-layout:auto}
[data-table="messages"] th,[data-table="messages"] td{padding-inline:8px}
[data-table="messages"] td .code{overflow-wrap:break-word}
[data-table="capabilities"] .status{white-space:normal;text-align:start}
.state-cell{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
tr[data-open-message]{cursor:pointer}
tr[data-open-message]:hover td{background:rgba(226,235,246,.45)}
.row-link{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:start}
.row-link:hover .code{color:var(--navy);text-decoration:underline}
.row-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:3px}
/* scroll affordance: a soft shadow on whichever edge still has content to scroll to */
.panel .data-wrap{background:
  linear-gradient(to right,var(--surface) 30%,transparent) left center/40px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 30%,transparent) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(26,47,76,.22),transparent) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(26,47,76,.22),transparent) right center/12px 100% no-repeat scroll}

/* ---------- dead-letter partition cards ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.cards-grid>.panel{margin:0}

/* ---------- raw payload ---------- */
.raw-entry+.raw-entry{margin-top:20px}
.raw-payload{margin:12px 0 0;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;text-align:left;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}

/* ---------- dark theme: chips whose design-system colour (navy) vanishes on the dark blue fill ---------- */
body[data-theme="dark"] .status--superseded,body[data-theme="dark"] .status--na{color:#c1d8f1}
body[data-theme="dark"] .panel .data-wrap{background:
  linear-gradient(to right,var(--surface) 30%,transparent) left center/40px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 30%,transparent) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),transparent) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),transparent) right center/12px 100% no-repeat scroll}
body[data-theme="dark"] tr[data-open-message]:hover td{background:rgba(255,255,255,.06)}

/* ---------- touch targets (>=44px) on tablet/phone ---------- */
@media (max-width:1024px),(pointer:coarse){
  .icon-button,.button,.lang-toggle,.nav-item,.field input,.field select,.field textarea,.login-users button{min-height:44px}
  .icon-button,.lang-toggle{min-width:44px}
  .row-link{min-height:44px;display:inline-flex;align-items:center}
}
#raw-section{margin-top:20px}