/* USM app shell in the HOS design system (xentros-hos DESIGN.md v2).
   Tokens: hos-tokens.css only. Every class has the hos- prefix and lives under
   .hos-ui. The page components (buttons, tables, tabs, panels, step lists…)
   come from the HOS component library in the React bundle (ui/usm-ui.css,
   sources in frontend/src/hos/); this file is only the frame around them. */

@font-face { font-family: Geist; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.hos-ui { font-family: var(--hos-font-sans); font-size: 13px; line-height: 1.45; color: var(--hos-text); font-variant-numeric: tabular-nums; }
.hos-ui :focus-visible { outline: 2px solid var(--hos-focus); outline-offset: 2px; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.hos-ui.hos-shell { display: flex; min-height: 100vh; background: var(--hos-bg-app); }
.hos-ui .hos-sidebar { width: 228px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.hos-ui .hos-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 44px; }
.hos-ui .hos-logo { width: 26px; height: 26px; border-radius: 6px; background: var(--hos-primary-bg); color: var(--hos-primary-fg); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.hos-ui .hos-brand-name { display: block; font-weight: 600; }
.hos-ui .hos-brand-sub { display: block; font-size: 12px; color: var(--hos-text-muted); }
.hos-ui .hos-nav { display: flex; flex-direction: column; gap: 1px; }
.hos-ui .hos-nav-title { padding: 4px 8px; font-size: 11px; font-weight: 500; color: var(--hos-text-faint); }
.hos-ui .hos-nav-item { text-decoration: none; display: flex; align-items: center; gap: 9px; padding: 0 8px; min-height: 32px; border-radius: 6px; color: var(--hos-text-2); }
.hos-ui .hos-nav-item:hover { background: var(--hos-bg-row-hover); color: var(--hos-text); }
.hos-ui .hos-nav-item.active { background: var(--hos-bg-active); color: var(--hos-text); font-weight: 500; }
.hos-ui .hos-nav-item svg { flex: none; }
.hos-ui .hos-nav-label { flex: 1; }
.hos-ui .hos-nav-count { font-size: 12px; color: var(--hos-text-faint); }
.hos-ui .hos-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 8px; }
.hos-ui .hos-me-text { flex: 1; min-width: 0; }
.hos-ui .hos-me-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hos-ui .hos-me-role { display: block; font-size: 12px; color: var(--hos-text-muted); }
.hos-ui .hos-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--hos-bg-active); color: var(--hos-text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: none; }

.hos-ui .hos-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--hos-bg-surface); border-left: 1px solid var(--hos-line); }
.hos-ui .hos-topbar { position: sticky; top: 0; z-index: 20; height: 48px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--hos-line); background: var(--hos-bg-surface); }
.hos-ui .hos-crumb { flex: 1; min-width: 0; color: var(--hos-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hos-ui .hos-crumb a { color: var(--hos-text-muted); text-decoration: none; }
.hos-ui .hos-crumb a:hover { color: var(--hos-text); }
.hos-ui .hos-crumb b { color: var(--hos-text); font-weight: 500; }
.hos-ui .hos-search { width: 260px; height: 32px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--hos-line); border-radius: 6px; background: var(--hos-bg-app); color: var(--hos-text-muted); }
.hos-ui .hos-search:focus-within { border-color: var(--hos-focus); }
.hos-ui .hos-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--hos-text); font: inherit; }
.hos-ui .hos-search kbd { font-family: var(--hos-font-mono); font-size: 11px; color: var(--hos-text-faint); }
.hos-ui .hos-timer { font-family: var(--hos-font-mono); font-size: 12px; color: var(--hos-text-muted); }
.hos-ui .hos-timer.warning { color: var(--hos-warn-fg); }
.hos-ui .hos-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* A React view fills the content area; its own page sets padding. */
.hos-ui .hos-body { flex: 1; display: flex; min-height: 0; }

@media (max-width: 1024px) {
  .hos-ui .hos-sidebar { width: 64px; padding: 10px 6px; }
  /* Collapsed: avatar and sign-out stack, so nothing overflows the narrow rail. */
  .hos-ui .hos-me { flex-direction: column; gap: 6px; padding: 6px 0; }
  .hos-ui .hos-brand-text, .hos-ui .hos-nav-label, .hos-ui .hos-nav-count, .hos-ui .hos-nav-title, .hos-ui .hos-me-text { display: none; }
  .hos-ui .hos-search { width: 180px; }
}