/* IT Assistant additions on top of the USB app design system (app.css). */
.brand .logo { background: #fff; object-fit: contain; }
.brand-hero img { max-width: 320px; width: 100%; border-radius: 12px; background: #fff; padding: 8px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-3); }
.status-dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.status-dot.off { background: var(--err); }
.status-dot.manual { background: transparent; border: 2px solid var(--text-3); width: 9px; height: 9px; }
.mini-bar { display: inline-flex; align-items: center; gap: 6px; min-width: 90px; }
.mini-bar .track { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 44px; }
.mini-bar .track > div { height: 100%; background: var(--accent); }
.mini-bar.warn .track > div { background: var(--warn); } .mini-bar.err .track > div { background: var(--err); }
.mini-bar span { font-size: 12px; color: var(--text-2); min-width: 34px; text-align: right; }
.terminal { background: #0b0e14; color: #d6deeb; border-radius: var(--radius); border: 1px solid var(--border); font: 12.5px/1.5 var(--mono); padding: 12px; min-height: 160px; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.terminal .cmd { color: #7fdbca; } .terminal .err { color: #ff8b8b; } .terminal .meta { color: #637777; }
textarea.code, .code-input { font: 12.5px/1.5 var(--mono); min-height: 120px; }
.line-chart { width: 100%; height: 160px; display: block; }
.line-chart .grid-line { stroke: var(--border); stroke-width: 1; }
.line-chart .series { fill: none; stroke-width: 2; }
.line-chart text { fill: var(--text-3); font: 11px var(--font); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.copy-box { display: flex; gap: 6px; align-items: stretch; }
.copy-box code, .copy-box input { flex: 1; min-width: 0; font: 12px var(--mono); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; overflow-x: auto; white-space: nowrap; color: var(--text); }
.steps { margin: 0; padding-left: 20px; line-height: 1.7; }
.nav-toggle { display: none; }
.role-chip { text-transform: capitalize; }
@media (max-width: 860px) {
  body { overflow: auto; }
  .shell { grid-template-columns: 1fr; grid-template-rows: 52px 1fr; height: auto; min-height: 100vh; }
  .sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-100%); transition: transform .18s var(--ease); box-shadow: var(--shadow); }
  .shell.nav-open .sidebar { transform: none; }
  .nav-toggle { display: inline-flex; }
  .topbar { grid-column: 1; padding: 0 10px; gap: 6px; }
  .topbar .searchbox .ph, .topbar .searchbox kbd, .topbar .hide-sm { display: none; }
  .main { overflow: visible; }
  .page { padding: 16px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head .actions { flex-wrap: wrap; }
  .modal { width: calc(100vw - 24px) !important; max-width: none; }
}

.span-all { grid-column: 1 / -1; }