/* Unrote Assist - the company server's pages: the console (/admin), sign-in (/login, /app/login), the entry page (/)
   and the invitation page (/connect). Style "Depth" of the design system (design/system, copied to ../system/ by
   sync.py): every colour, font and radius comes from its --u-* tokens (system/tokens.css), the light theme by
   default and the dark one by the system setting. Navy is the brand (the console's side column, the mark tiles),
   the vivid blue only acts (the main button, the active item, focus, links). IBM Plex Sans for text, Plex Mono
   uppercase for field labels, table headers, statuses and times. Vanilla CSS, no build step. Icons are CSS masks
   (admin-public.css). */

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--u-bg); color: var(--u-fg); font: 400 var(--u-fs)/1.5 var(--u-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.005em; }
h1 { font-size: 22px; font-weight: 600; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--u-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
code, .mono { font-family: var(--u-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--u-muted); }
.small { font-size: var(--u-fs-sm); }
.nowrap { white-space: nowrap; }
.good { color: var(--u-good); } .bad { color: var(--u-bad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack { display: grid; gap: 12px; align-content: start; }
.stack-lg { display: grid; gap: 18px; align-content: start; }
/* the small mono caption above a title: "ADMIN CONSOLE", "INVITATION FROM ..." */
.kicker { font: 500 var(--u-fs-xs)/1.4 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); }

/* ---------- console layout: the navy side column + the light main area ---------- */
.app { --side-w: 280px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--u-brand-bg) calc(var(--side-w) - 1px), var(--u-brand-line) calc(var(--side-w) - 1px), var(--u-brand-line) var(--side-w), transparent var(--side-w)); }
/* the column scrolls up and down only (2026-10-25: shifted sideways it cut the icons and the group titles): nothing in it
   may be wider than it, long text wraps, and its scrollbar is a thin navy one instead of a light grey strip */
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 12px 10px; overflow: hidden auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--u-brand-line) transparent; color: var(--u-brand-fg); }
.side > * { flex-shrink: 0; min-width: 0; max-width: 100%; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--u-fg); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.brand small { display: block; font: 400 11px/1.4 var(--u-mono); color: var(--u-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .brand { color: var(--u-brand-fg); }
.side .brand > span { min-width: 0; }
.side .brand small { color: var(--u-brand-muted); }
.nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.nav-group { margin: 16px 10px 6px; font: 500 11px/1.3 var(--u-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--u-brand-muted); overflow-wrap: anywhere; }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 3px; color: var(--u-brand-muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: color-mix(in srgb, var(--u-brand-on) 60%, transparent); color: var(--u-brand-fg); }
.nav a.on { background: var(--u-brand-on); color: var(--u-brand-on-fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--u-rail); }
.nav a:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--u-rail); }
.nav a .ic { width: 17px; height: 17px; }
.nav a > span:not(.ic):not(.count):not(.live) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav .count { margin-left: auto; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 3px; background: var(--u-accent); color: var(--u-accent-fg); font: 500 11px/1 var(--u-mono); display: grid; place-items: center; }
.nav .count.bad { background: var(--u-bad); color: var(--u-bg); }
/* "a server is running": the bright green of the dark theme reads on navy in both themes */
.nav .live { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.side-foot { margin-top: auto; border-top: 1px solid var(--u-brand-line); padding: 12px 6px 2px; display: flex; align-items: center; gap: 10px; }
.side-foot .avatar { background: #2a4677; color: #ffffff; }
.side-foot .who { min-width: 0; line-height: 1.3; }
.side-foot .who b { display: block; font-size: 13.5px; font-weight: 600; color: var(--u-brand-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .who small { display: block; font: 400 11px/1.4 var(--u-mono); color: var(--u-brand-muted); }
.side-foot .icon-btn { margin-left: auto; }
.side .icon-btn { color: var(--u-brand-muted); }
.side .icon-btn:hover { background: var(--u-brand-on); color: var(--u-brand-fg); }

/* the pages never widen the window: a page wider than it scrolled sideways, and the side column went along with it
   (2026-10-25, Settings at 820-980 px: two buttons wider than their column). Tables scroll in .table-wrap */
.main { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
/* the page's title stays on top while the page scrolls under it: an opaque strip (nothing shows through it), and a place
   a link or a step scrolls to stops under it, not behind it (scroll-margin-top below) */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 10px 28px;
  background: var(--u-bg); border-bottom: 1px solid var(--u-line); }
.page [id] { scroll-margin-top: 76px; }
.top .title { min-width: 0; display: grid; gap: 3px; }
.top h1 { font-size: 18px; }
.top .crumb { font: 500 11px/1.3 var(--u-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--u-muted); }
.top .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top .sep { width: 1px; height: 22px; background: var(--u-line); margin: 0 4px; }
.page { width: 100%; max-width: 1240px; padding: 22px 28px 72px; display: grid; gap: 18px; align-content: start; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 16px; min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.g-list { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }

/* ---------- panels (the design system's card: a header strip, rows, a footer) ---------- */
.panel { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-lg); box-shadow: var(--u-shadow-1); min-width: 0; }
.panel.clip { overflow: hidden; }
.panel-h { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--u-line);
  background: var(--u-surface-2); border-radius: var(--u-radius-lg) var(--u-radius-lg) 0 0; }
.panel-h h2 { font-size: 14.5px; }
.panel-h .meta { color: var(--u-muted); font-size: var(--u-fs-sm); }
.panel-h .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-b { padding: 14px 16px; }
.panel-f { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--u-line); background: var(--u-surface-2);
  border-radius: 0 0 var(--u-radius-lg) var(--u-radius-lg); font-size: var(--u-fs-sm); color: var(--u-muted); }
.panel-f:empty { display: none; }
.panel-f > .ic { width: 16px; height: 16px; }
.panel-f > .ic + span { flex: 1 1 0; min-width: 0; }  /* the note beside its icon wraps there, never under it */
.section-h { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.section-h h2 { font-size: 15.5px; }
.section-h .meta { color: var(--u-muted); font-size: var(--u-fs-sm); }
.section-h .actions { margin-left: auto; display: flex; gap: 8px; }
.lead { font-size: 14px; color: var(--u-muted); max-width: 760px; }

/* ---------- metrics ---------- */
.kpi { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.kpi .label { font: 500 11px/1.35 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); display: flex; align-items: center; gap: 7px; }
.kpi .label .ic { width: 15px; height: 15px; }
.kpi .value { font-size: 26px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .value small { font-size: 13.5px; color: var(--u-muted); font-weight: 500; letter-spacing: 0; }
.kpi .sub { font-size: var(--u-fs-sm); color: var(--u-muted); }
.strip { display: flex; flex-wrap: wrap; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-lg); box-shadow: var(--u-shadow-1); }
.strip > div { flex: 1 1 170px; padding: 12px 16px; border-left: 1px solid var(--u-line); display: grid; gap: 3px; align-content: start; }
.strip > div:first-child { border-left: 0; }
.strip .label { font: 500 11px/1.35 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); }
.strip .value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.strip small { font-size: var(--u-fs-sm); color: var(--u-muted); }
.meter { height: 6px; border-radius: 2px; background: var(--u-sunken); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--u-accent); }
.meter.good i { background: var(--u-good); }

/* ---------- lists: rows instead of boxes ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--u-line); min-width: 0; }
.rows > li:first-child { border-top: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows .grow b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .grow small { display: block; font-size: var(--u-fs-sm); color: var(--u-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .end { margin-left: auto; text-align: right; font-size: var(--u-fs-sm); color: var(--u-muted); white-space: nowrap; }
.rows .time { font: 400 var(--u-fs-xs)/1.4 var(--u-mono); color: var(--u-muted); width: 44px; flex: none; }
.attn { list-style: none; margin: 0; padding: 0; }
.attn li { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--u-line); }
.attn li:first-child { border-top: 0; }
.attn .mark { width: 30px; height: 30px; border-radius: var(--u-radius); display: grid; place-items: center; flex: none; background: var(--u-soft); color: var(--u-soft-fg); }
.attn .mark.bad { background: var(--u-bad-soft); color: var(--u-bad); }
.attn .mark.off { background: var(--u-sunken); color: var(--u-muted); }
.attn .text { min-width: 0; flex: 1; }
.attn .text small { display: block; color: var(--u-muted); font-size: var(--u-fs-sm); }
.attn .btn { flex: none; }

/* ---------- buttons: primary is the one action of a place ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--u-radius);
  border: 1px solid var(--u-accent); background: var(--u-accent); color: var(--u-accent-fg); font: 600 13.5px/1 var(--u-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--u-accent-hover); border-color: var(--u-accent-hover); text-decoration: none; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 0; box-shadow: var(--u-focus); }
.btn .ic { width: 15px; height: 15px; }
.btn.sec { background: var(--u-surface); color: var(--u-fg); border-color: var(--u-line-2); }
.btn.sec:hover { background: var(--u-surface-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--u-accent); padding: 0 8px; }
.btn.ghost:hover { background: var(--u-soft); color: var(--u-soft-fg); }
.btn.danger { background: var(--u-surface); color: var(--u-bad); border-color: var(--u-bad-line); }
.btn.danger:hover { background: var(--u-bad-soft); }
.btn.danger-solid { background: var(--u-bad); border-color: var(--u-bad); color: var(--u-bg); }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--u-fs-sm); gap: 6px; }
.btn.sm .ic { width: 14px; height: 14px; }
.btn.lg { height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn.block { width: 100%; }
/* on a page a button narrower than its words (a narrow column, a long Russian label) wraps them, one line as before
   when they fit: "Настроить вход через систему компании" was wider than the Settings column at 820-980 px */
.page .btn { max-width: 100%; height: auto; min-height: 34px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; white-space: normal; text-align: center; }
.page .btn.sm { min-height: 28px; padding-top: 3px; padding-bottom: 3px; }
.page .btn.lg { min-height: 40px; }
.page .table-wrap .btn { white-space: nowrap; }  /* a table scrolls in its own box instead (.table-wrap) */
.btn.disabled { opacity: .45; pointer-events: none; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--u-radius); border: 0; background: transparent; color: var(--u-muted); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--u-surface-2); color: var(--u-fg); }
.icon-btn .ic { width: 17px; height: 17px; }
.link { color: var(--u-accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------- statuses (mono, uppercase), tags and codes (mono) ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px; border-radius: 3px; font: 500 11px/1 var(--u-mono);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; background: var(--u-surface-2); color: var(--u-muted); vertical-align: middle; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.msg { text-transform: none; letter-spacing: 0; }  /* an error's own text (class msg) is quoted as it came */
.pill.ok { background: var(--u-good-soft); color: var(--u-good); }
.pill.wait { background: var(--u-soft); color: var(--u-soft-fg); }
.pill.wait::before { animation: pulse 1.4s ease-in-out infinite; }
.pill.bad { background: var(--u-bad-soft); color: var(--u-bad); }
.pill.plain::before { display: none; }
@keyframes pulse { 50% { opacity: .25; } }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 3px; border: 1px solid var(--u-line); background: var(--u-surface-2);
  color: var(--u-muted); font: 400 var(--u-fs-xs)/1 var(--u-mono); white-space: nowrap; vertical-align: middle; }
.tag.accent { background: var(--u-soft); border-color: transparent; color: var(--u-soft-fg); }
.tag.bad { background: var(--u-bad-soft); border-color: transparent; color: var(--u-bad); }
.tag.good { background: var(--u-good-soft); border-color: transparent; color: var(--u-good); }
.code { font: 400 12px/1.4 var(--u-mono); background: var(--u-sunken); border-radius: 3px; padding: 2px 6px; color: var(--u-fg); white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--u-line-2); flex: none; }
.dot.on { background: var(--u-good); box-shadow: 0 0 0 3px var(--u-good-soft); }
.dot.bad { background: var(--u-bad); }
.avatar { width: 32px; height: 32px; border-radius: var(--u-radius); background: var(--u-sunken); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--u-muted); flex: none; }
.avatar.sq { border-radius: var(--u-radius); }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.avatar .ic { width: 18px; height: 18px; }
/* the navy tile next to a card's title (G, @, TG): the design system's u-tile */
.badge-letter { width: 26px; height: 26px; border-radius: 3px; display: inline-grid; place-items: center; font: 500 11px/1 var(--u-mono); color: #ffffff; background: var(--u-navy); flex: none; }
.badge-letter .ic { width: 15px; height: 15px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font: 500 var(--u-fs-xs)/1.4 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted);
  padding: 8px 16px; background: var(--u-surface-2); border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.t td { padding: 10px 16px; border-bottom: 1px solid var(--u-line); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: color-mix(in srgb, var(--u-surface-2) 70%, transparent); }
.t .num { text-align: right; font-variant-numeric: tabular-nums; }
.t td .sub { display: block; font-size: var(--u-fs-sm); color: var(--u-muted); margin-top: 1px; }
.t td.act { text-align: right; white-space: nowrap; }
.t td.act .btn + .btn { margin-left: 6px; }
.t tr.group td { background: var(--u-surface-2); font: 500 var(--u-fs-xs)/1.4 var(--u-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--u-muted); padding: 7px 16px; }
.t tr.muted-row td { color: var(--u-muted); }
.t tr.changed td:first-child { box-shadow: inset 3px 0 0 var(--u-accent); }
.t .who { display: flex; align-items: center; gap: 10px; }
.t .who .avatar { width: 28px; height: 28px; }
.t tr.open td { background: var(--u-surface-2); }
.t tr.detail td { background: var(--u-surface-2); padding-top: 0; }
.json { font: 400 12px/1.6 var(--u-mono); background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius); padding: 10px 12px; color: var(--u-fg); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }