/* Orion shared SHELL — design tokens + premium topbar chrome. Include in ANY interface
 * (platform-admin, tenant/ops, dealer/control-room). Adopted from the monitoring-central look so
 * every Orion surface shares one polished shell. Phase 1 = topbar + tokens + in-flow tz band.
 * Class names are `orion-`/`operator-` prefixed to avoid collision with a host shell's own CSS. */
:root {
  --orion-accent: #7170ff; --orion-accent2: #5e6ad2; --orion-purple: #a78bfa;
  --orion-bg: #070809; --orion-panel: #0f1011; --orion-topbar: rgba(15, 16, 17, .86);
  --orion-surface-chip: rgba(255, 255, 255, .035); --orion-surface-hover: rgba(255, 255, 255, .07);
  --orion-surface-active: rgba(113, 112, 255, .15);
  --orion-line: rgba(255, 255, 255, .10); --orion-line2: rgba(255, 255, 255, .06);
  --orion-text: #f7f8f8; --orion-muted: #9aa1ac; --orion-muted2: #707782;
  --orion-radius: 6px; --orion-radius-sm: 4px; --orion-topbar-h: 64px;
}

/* floating, rounded, blurred topbar — a header that GROWS in-flow when the tz band opens */
.orion-topbar {
  border: 1px solid var(--orion-line); border-radius: 14px; background: var(--orion-topbar);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 10px 14px; margin: 10px 14px 0;
}
.orion-topbar-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.orion-topbar-main > nav { display: flex; align-items: stretch; min-width: 0; flex: 1; }

/* the operator header card = live clock + user/avatar, the cluster Nathan likes */
.operator-header-card { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.operator-time {
  border: 1px solid var(--orion-line); background: linear-gradient(180deg, var(--orion-surface-chip), rgba(255, 255, 255, .02));
  color: var(--orion-text); border-radius: var(--orion-radius); padding: 7px 11px; cursor: pointer;
  display: grid; grid-template-columns: auto; row-gap: 2px; align-items: center; text-align: left; min-width: 158px;
  transition: background .2s ease, border-color .2s ease;
}
.operator-time:hover, .operator-time[aria-expanded="true"] { background: var(--orion-surface-hover); border-color: color-mix(in srgb, var(--orion-accent) 50%, var(--orion-line)); }
.operator-time .operator-date { color: var(--orion-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.operator-time .operator-now { display: flex; align-items: baseline; gap: 7px; }
.operator-time .operator-clock { font: 800 17px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--orion-text); }
.operator-time .operator-tz { color: var(--orion-accent); font: 800 10px ui-monospace, monospace; letter-spacing: .08em; }
.operator-time .operator-caret { color: var(--orion-muted); font-size: 9px; margin-left: 4px; }

.operator-profile {
  border: 1px solid var(--orion-line); background: var(--orion-surface-chip); color: var(--orion-text);
  border-radius: var(--orion-radius); padding: 6px 9px; cursor: pointer;
  display: grid; grid-template-columns: 34px minmax(80px, 1fr) auto; gap: 9px; align-items: center; text-align: left; min-width: 168px;
  transition: background .2s ease, border-color .2s ease;
}
.operator-profile:hover { background: var(--orion-surface-hover); border-color: color-mix(in srgb, var(--orion-accent) 40%, var(--orion-line)); }
.operator-avatar { width: 34px; height: 34px; border-radius: var(--orion-radius-sm); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orion-accent), var(--orion-purple)); color: #fff; font-weight: 900; letter-spacing: .02em; }
.operator-profile .operator-who strong { display: block; font-size: 13px; line-height: 1.1; }
.operator-profile .operator-who span { display: block; color: var(--orion-muted); font-size: 11px; line-height: 1.2; margin-top: 2px; text-transform: capitalize; }
.operator-profile .operator-profile-caret { color: var(--orion-muted); font-size: 10px; }

/* the IN-FLOW state-time band — a header row that pushes page content down when open (not an overlay) */
.orion-tz-band { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--orion-line2); }
.orion-tz-band[hidden] { display: none; }
.orion-tz-card { border: 1px solid var(--orion-line2); background: var(--orion-surface-chip); border-radius: var(--orion-radius); padding: 7px 9px; display: grid; gap: 2px; cursor: pointer; }
.orion-tz-card:hover { border-color: var(--orion-muted2); }
.orion-tz-card .st { color: var(--orion-muted2); font: 900 10px ui-monospace, monospace; letter-spacing: .08em; }
.orion-tz-card .tm { font: 700 13px ui-monospace, monospace; color: var(--orion-text); }
.orion-tz-card .ct { font-style: normal; color: var(--orion-muted); font-size: 10px; }
.orion-tz-card.active { border-color: color-mix(in srgb, var(--orion-accent) 55%, var(--orion-line)); background: var(--orion-surface-active); }
@media (max-width: 900px) { .orion-tz-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- platform-admin host integration (fresh-shell.js); combined-selector to beat .topbar specificity --- */
.orion-topbar.topbar { display: block; height: auto; background: var(--orion-topbar); border: 1px solid var(--orion-line); border-bottom: 1px solid var(--orion-line); border-radius: 14px; padding: 10px 14px; margin: 10px 14px 0; position: sticky; top: 8px; z-index: 30; }
.workarea { grid-template-rows: auto minmax(0, 1fr) 24px; }
.orion-topbar .operator-header-card { position: relative; }
.orion-topbar .profile-menu { position: absolute; top: calc(100% + 8px); right: 0; }

/* --- Phase 2: collapsible sidebar → a clean clipped icon rail --- */
/* !important is REQUIRED on both the grid AND the sidebar width: the base sheet ships
 * `.sidebar{width:232px!important}` and per-theme `.app-shell` grid overrides, both of which
 * outrank a plain `.app-shell.sb-collapsed`. Our higher-specificity selectors + !important win.
 * The grid-template-columns transition gives a smooth collapse/expand. */
.app-shell { transition: grid-template-columns .18s ease; }
.app-shell .sidebar { transition: width .18s ease; }                   /* rail slides in sync with the grid track */
.app-shell.sb-collapsed { grid-template-columns: 64px minmax(0, 1fr) !important; }
.app-shell.sb-collapsed .sidebar { width: 64px !important; min-width: 0 !important; max-width: 64px !important; overflow: hidden !important; }

/* hide every text element; keep the icons */
.app-shell.sb-collapsed .side-group h4,
.app-shell.sb-collapsed .side-item strong,
.app-shell.sb-collapsed .side-item b,
.app-shell.sb-collapsed .brand strong,
.app-shell.sb-collapsed .brand em,
.app-shell.sb-collapsed .runtime-card { display: none; }

/* center the icon in the 64px rail; the 3px active accent bar stays on the left edge */
.app-shell.sb-collapsed .side-item { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 0; }
.app-shell.sb-collapsed .side-group { padding: 12px 8px 0; }
.app-shell.sb-collapsed .brand { justify-content: center; gap: 8px; padding: 0; }

/* collapse/expand toggle button in the brand row */
.side-collapse {
  margin-left: auto; display: grid; place-items: center;
  width: 24px; height: 24px; flex: 0 0 auto; cursor: pointer; line-height: 1;
  background: none; border: 1px solid var(--orion-line); border-radius: var(--orion-radius-sm);
  color: var(--orion-muted2); transition: background .15s ease, color .15s ease, transform .18s ease;
}
.side-collapse:hover { background: var(--orion-surface-hover); color: var(--orion-text); }
.app-shell.sb-collapsed .side-collapse { margin: 0; transform: rotate(180deg); }

/* --- Refined top module nav: subtle icon + label, no coloured dot, crisp active accent ---
 * The active underline colour still comes from the kept `.module.active.<accent>` rule in fresh-shell.css. */
.orion-topbar nav { gap: 2px; }
.orion-topbar .module { gap: 9px; padding: 0 14px; color: var(--orion-muted); font-weight: 700; transition: color .15s ease, border-color .15s ease; }
.orion-topbar .module .module-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; opacity: .6; transition: opacity .15s ease; }
.orion-topbar .module .module-ico svg { width: 16px; height: 16px; display: block; }
.orion-topbar .module:hover { color: var(--orion-text); }
.orion-topbar .module:hover .module-ico,
.orion-topbar .module.active .module-ico { opacity: 1; }
.orion-topbar .module.active { color: var(--orion-text); }

/* --- Day (light) theme: the shared shell ships ONLY dark --orion-* tokens, so without this the
 * topbar nav, clock card and timezone band render near-white text on the light background.
 * Re-point the tokens (everything in orion-shell.css is token-driven, so this fixes them all). --- */
body[data-platform-theme="day"] {
  --orion-text: #14233b;
  --orion-muted: #475063;
  --orion-muted2: #6b7686;
  --orion-line: rgba(20, 35, 59, .14);
  --orion-line2: rgba(20, 35, 59, .08);
  --orion-surface-chip: rgba(20, 35, 59, .035);
  --orion-surface-hover: rgba(20, 35, 59, .07);
  --orion-surface-active: rgba(94, 106, 210, .14);
  --orion-topbar: rgba(255, 255, 255, .88);
  --orion-panel: #ffffff;
}
body[data-platform-theme="day"] .orion-topbar.topbar { background: rgba(255, 255, 255, .9); border-color: var(--orion-line); }