/* Raio-X · Nexum Monitor — monitoring dashboard.
   Everything important fits in one screen: cards, tabs and panels that scroll
   inside themselves instead of making the page long. */

:root {
  --bg: #eef1f5;
  --card: #ffffff;
  --card-2: #f7f9fb;
  --ink: #1b2430;
  --ink-2: #445163;
  --muted: #7a8696;
  --line: #e3e8ee;
  --line-2: #d3dae3;
  --brand: #2679c0;
  --brand-ink: #ffffff;
  --brand-soft: #e4f0fa;
  --ok: #22a45a;
  --ok-soft: #e4f6ec;
  --warn: #ee8a00;
  --warn-soft: #fff3df;
  --crit: #e03b3b;
  --crit-soft: #fde8e8;
  --skip: #9aa5b1;
  --acc: #5b6cff;
  --acc-soft: #eceeff;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-hi: 0 6px 18px rgba(16, 24, 40, .12);
  --radius: 10px;
  --rail: 68px;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1016; --card: #141b23; --card-2: #10161d; --ink: #e6edf3; --ink-2: #b4c0cc; --muted: #8796a5;
    --line: #222c37; --line-2: #2d3a47; --brand: #45d0f9; --brand-ink: #06222e; --brand-soft: #0e2836;
    --ok: #3fc173; --ok-soft: #10291b; --warn: #f5a524; --warn-soft: #2e2210; --crit: #ff6464; --crit-soft: #331617;
    --skip: #5d6b79; --acc: #8b97ff; --acc-soft: #1d2140;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hi: 0 8px 24px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1016; --card: #141b23; --card-2: #10161d; --ink: #e6edf3; --ink-2: #b4c0cc; --muted: #8796a5;
  --line: #222c37; --line-2: #2d3a47; --brand: #45d0f9; --brand-ink: #06222e; --brand-soft: #0e2836;
  --ok: #3fc173; --ok-soft: #10291b; --warn: #f5a524; --warn-soft: #2e2210; --crit: #ff6464; --crit-soft: #331617;
  --skip: #5d6b79; --acc: #8b97ff; --acc-soft: #1d2140;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hi: 0 8px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* wins over display: grid/flex on the same element */
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
code { font: 12.5px var(--mono); background: var(--card-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* ---- app frame: icon rail + content ------------------------------- */
.app { display: grid; grid-template-columns: var(--rail) 1fr; height: 100vh; }
.rail { background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 6px; z-index: 2; }
.rail .logo { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px; background: #101a26; }
.rail .logo img { width: 26px; height: 26px; }
.rail .logo:hover { background: #101a26; }
.rail a, .rail button { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--muted);
  background: none; border: 0; cursor: pointer; position: relative; }
.rail a:hover, .rail button:hover { background: var(--card-2); color: var(--ink); }
.rail a.on { background: var(--brand-soft); color: var(--brand); }
.rail a.on::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.rail .spacer { flex: 1; }
.rail form { margin: 0; }
.rail [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--card); font: 12px var(--sans); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

.content { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topbar h1 { font: 600 17px/1.2 var(--sans); margin: 0; letter-spacing: -.01em; }
.topbar .crumb { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.topbar .grow { flex: 1; }
.workspace { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 22px; }

.search { display: flex; align-items: center; gap: 8px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; height: 36px; color: var(--muted); }
.search input { border: 0; background: transparent; color: var(--ink); font: 14px var(--sans); outline: none; width: 200px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--card-2);
  border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.chip b { font: 600 14px var(--sans); color: var(--ink); }
.chip.crit b { color: var(--crit); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--skip); }

/* ---- buttons & forms ---------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent;
  background: var(--brand); color: var(--brand-ink); font: 600 13px var(--sans); cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.06); color: var(--brand-ink); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--card-2); color: var(--ink); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.link-btn { background: none; border: 1px solid var(--line-2); color: var(--ink-2); border-radius: 7px; padding: 5px 10px; font: 12.5px var(--sans); cursor: pointer; }
.link-btn:hover { background: var(--card-2); color: var(--ink); }
input, select, textarea { font: 14px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 0; border-color: var(--brand); }
.field { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 160px; }
.row > .btn { flex: none; }

/* ---- cards ---------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.card-h h2, .card-h h3 { margin: 0; font: 600 14px/1.25 var(--sans); }
.card-h .sub { color: var(--muted); font-size: 12px; }
.card-h .grow { flex: 1; min-width: 0; }
.card-b { padding: 14px; }
.panel { display: flex; flex-direction: column; min-height: 0; }
.panel > .card-b { flex: 1; min-height: 0; overflow: auto; }

.status-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.status-ic svg { width: 13px; height: 13px; stroke-width: 3; }
.st-bom, .st-ok { background: var(--ok); }
.st-regular, .st-atencao { background: var(--warn); }
.st-risco, .st-critico { background: var(--crit); }
.st-nada, .st-nao_verificado { background: var(--skip); }
.st-aceito { background: var(--acc); }

/* company cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-content: start; }
.co { display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.co:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }
.co .card-h a.name { font: 600 14.5px/1.25 var(--sans); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co .card-h .sub { display: flex; gap: 6px; align-items: center; }
.co-body { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 14px; align-items: center; }
.co-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.co-foot > div { padding: 10px 12px; text-align: center; }
.co-foot > div + div { border-left: 1px solid var(--line); }
.co-foot b { display: block; font: 600 19px/1.1 var(--sans); }
.co-foot span { font-size: 11.5px; color: var(--muted); }
.co-foot .crit b { color: var(--crit); }

.counts { display: grid; gap: 7px; }
.counts .lbl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 1px; }
.count { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.count b { font: 700 15px var(--sans); color: var(--ink); min-width: 18px; }
.count.bom { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.count.risco { border-color: color-mix(in srgb, var(--crit) 60%, transparent); }
.count.regular { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.count .status-ic { width: 18px; height: 18px; }
.count .status-ic svg { width: 11px; height: 11px; }

/* score ring */
.ring { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--line); }
.ring .val { stroke: var(--band, var(--brand)); stroke-linecap: round; stroke-dasharray: 100; animation: ringfill 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ringfill { from { stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce) { .ring .val { animation: none; } .live.on i { animation: none; } .co:hover, .tile:hover { transform: none; } }
.ring .num { text-align: center; line-height: 1; }
.ring .num b { font: 700 34px/1 var(--sans); letter-spacing: -.02em; color: var(--band, var(--ink)); display: block; }
.ring .num span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ring.sm { width: 64px; height: 64px; }
.ring.sm circle { stroke-width: 7; }
.ring.sm .num b { font-size: 18px; }
.ring.sm .num span { display: none; }
.band-bom { --band: var(--ok); }
.band-regular { --band: var(--warn); }
.band-risco { --band: var(--crit); }
.band-nada { --band: var(--skip); }

.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--skip); }
.live.on i { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- company dashboard ------------------------------------------- */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 14px 18px; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--card-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.kpi b { display: block; font: 700 24px/1.1 var(--sans); letter-spacing: -.01em; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi.crit b { color: var(--crit); }
.kpi.warn b { color: var(--warn); }
.kpi.acc b { color: var(--acc); }

.tabs { display: flex; gap: 4px; padding: 0 22px; background: var(--card); border-bottom: 1px solid var(--line); }
.tabs a { padding: 11px 14px 10px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; gap: 7px; align-items: center; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .badge { font: 600 11px/1 var(--sans); background: var(--crit-soft); color: var(--crit); border-radius: 999px; padding: 3px 6px; }
.workspace .tabs { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 8px; box-shadow: var(--shadow); flex: none; }
.tab { display: none; }
.tab.on { display: block; }

.dash { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 1.3fr) minmax(260px, .9fr); gap: 16px; height: 100%; min-height: 520px; }
.dash > .panel { max-height: 100%; }
.workspace.fit { overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.workspace.fit > .tab.on { flex: 1; min-height: 0; overflow: auto; }
.workspace.fit > .tab.on.dash-tab { overflow: hidden; }

/* service orders */
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.orders li { display: grid; grid-template-columns: 22px 1fr; gap: 3px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card-2); }
.orders li .status-ic { grid-row: span 3; margin-top: 1px; }
.orders .t { font-weight: 600; }
.orders .fix { color: var(--ink-2); font-size: 12.5px; }
.orders .reach { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; background: var(--band, var(--brand)); }

/* machine tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card-2); transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--brand); transform: translateY(-1px); color: inherit; }
.tile .h { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .m { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tile .m .c { color: var(--crit); font-weight: 600; }
.tile .m .w { color: var(--warn); font-weight: 600; }

/* compact result lines (domain, findings) */
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.lines li:last-child { border-bottom: 0; }
.lines .t { font-weight: 600; font-size: 13px; }
.lines .f { color: var(--ink-2); font-size: 12.5px; grid-column: 2; }

/* ---- timeline --------------------------------------------------------- */
.coverage { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.coverage .chip { height: auto; padding: 5px 11px; font-size: 12px; }
.chip.warnchip { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); }
.timeline { position: relative; }
.tday { position: sticky; top: -14px; z-index: 1; background: var(--card); padding: 10px 0 6px; font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tday span { background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.tev { display: grid; grid-template-columns: 48px 22px 1fr; gap: 10px; align-items: start; padding: 8px 8px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; }
.tev:hover { background: var(--card-2); }
.tev .ttime { font: 12.5px var(--mono); color: var(--muted); padding-top: 2px; text-align: right; }
.tev .t { font-weight: 600; font-size: 13.5px; }
.tev .t .code { font-weight: 400; margin-left: 6px; }
.tev .f { color: var(--ink-2); font-size: 12.5px; word-break: break-all; }
.tev[data-sev="critico"] { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit-soft) 60%, transparent); }
.tev[data-sev="atencao"] { border-left-color: var(--warn); }

/* ---- machine page --------------------------------------------------- */
.mgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; height: 100%; }
.findings { list-style: none; margin: 0; padding: 0; }
.findings li { display: grid; grid-template-columns: 22px 1fr; gap: 3px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.findings li:last-child { border-bottom: 0; }
.findings li > div:first-child { padding-top: 1px; }
.findings .t { font-weight: 600; }
.findings .f { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.findings details { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.findings summary { cursor: pointer; color: var(--brand); font-size: 12.5px; font-weight: 500; margin-top: 4px; }
.findings details p { margin: 6px 0 0; max-width: 75ch; }
.accepted-note { font-size: 12.5px; color: var(--acc); margin-top: 5px; }
.accept-form { margin-top: 10px; padding: 10px; border: 1px dashed var(--line-2); border-radius: 8px; display: grid; gap: 8px; }
.accept-form label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.accept-row { display: flex; gap: 8px; flex-wrap: wrap; }
.group-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 2px; font-weight: 600; }
.group-label:first-child { margin-top: 0; }

/* technician playbook: rows that open it, and the side drawer */
.has-pb { cursor: pointer; transition: background .12s; }
.findings li.has-pb { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.findings li.has-pb:hover, .lines li.has-pb:hover, tr.has-pb:hover th { background: var(--card-2); }
.orders li.has-pb:hover { border-color: var(--brand); }
.pb-open { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; padding: 0; border: 0; background: none;
  color: var(--brand); font: 600 12.5px var(--sans); cursor: pointer; }
.pb-open .i { width: 14px; height: 14px; }
.orders .pb-open { margin: 0 0 0 6px; font-size: 12px; }
dialog.drawer { margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; width: min(600px, 100vw); height: 100dvh; max-height: none; max-width: 100vw;
  background: transparent; color: var(--ink); }
dialog.drawer::backdrop { background: rgba(8, 12, 18, .45); }
dialog.drawer[open] .drawer-in { animation: drawerin .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes drawerin { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] .drawer-in { animation: none; } }
.drawer-in { height: 100%; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-hi); }
.drawer-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.drawer-h h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.eyebrow { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.drawer-b { padding: 6px 22px 28px; overflow: auto; flex: 1; }
.drawer-b h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.drawer-b > p { margin: 0 0 8px; color: var(--ink-2); }
.pb-finding { margin: 14px 0 0 !important; padding: 10px 12px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; }
.pb-steps { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: var(--ink-2); }
.pb-steps li::marker { color: var(--brand); font-weight: 700; }
.pb-cmd { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 10px; overflow: hidden; }
.pb-cmd-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 7px 8px 7px 12px; background: var(--card-2);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.pb-cmd-h .link-btn { flex: none; }
.pb-cmd pre { margin: 0; padding: 10px 12px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; background: var(--card); }
.pb-caution { margin-top: 14px !important; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--ink) !important; font-size: 13px; }
.stamp { display: none; } /* legacy class; the status icon replaces it */
.s-critico { color: var(--crit); } .s-atencao { color: var(--warn); } .s-ok { color: var(--ok); } .s-aceito { color: var(--acc); } .s-nao_verificado { color: var(--skip); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.facts dt { font-size: 11.5px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 500; }
.spark { display: block; overflow: visible; width: 100%; }
.spark polyline { fill: none; stroke: var(--band, var(--brand)); stroke-width: 2; }
.spark circle { fill: var(--band, var(--brand)); }
.spark .spark-ref { stroke: var(--line-2); stroke-dasharray: 3 4; }

/* ---- tables, matrix, misc ------------------------------------------ */
.scroll { overflow: auto; }
table.ledger { width: 100%; border-collapse: collapse; }
.ledger th { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ledger td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .meta { display: block; font-size: 12px; color: var(--muted); }
.code { font: 12.5px var(--mono); color: var(--muted); }
.off { color: var(--muted); text-decoration: line-through; }
.users td form { display: inline; margin: 0; }
.users .reset { display: inline-flex; gap: 6px; }
.users .reset input { width: 150px; padding: 5px 8px; font-size: 13px; }

.matrix { border-collapse: separate; border-spacing: 3px; }
.matrix th, .matrix td { padding: 0; }
.matrix thead th { height: 112px; vertical-align: bottom; padding-bottom: 6px; }
.matrix thead th a { writing-mode: vertical-rl; transform: rotate(180deg); font: 12px var(--mono); color: var(--ink-2); white-space: nowrap; max-height: 104px; overflow: hidden; text-overflow: ellipsis; }
.matrix tbody th { text-align: left; font-weight: 500; padding-right: 14px; white-space: nowrap; height: 24px; font-size: 13px; }
.matrix tbody th small { font: 11px var(--mono); color: var(--muted); margin-left: 6px; }
.matrix td { width: 24px; height: 24px; text-align: center; }
.matrix td i { display: block; width: 22px; height: 22px; border-radius: 5px; background: var(--card-2); }
.matrix td.affected { font: 12px var(--mono); color: var(--muted); padding-left: 10px; text-align: left; width: auto; }
.cell-critico { background: var(--crit) !important; }
.cell-atencao { background: var(--warn) !important; }
.cell-ok { background: var(--ok-soft) !important; }
.cell-aceito { background: var(--acc-soft) !important; box-shadow: inset 0 0 0 2px var(--acc); }
.cell-nao_verificado { background: transparent !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 12px; flex-wrap: wrap; align-items: center; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

.install { display: flex; gap: 8px; align-items: stretch; }
.install code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 10px 12px; font-size: 12px; border-radius: 8px; }
.note { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.notice { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--brand-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.stale { color: var(--warn); font-size: 12px; font-weight: 500; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stack { display: grid; gap: 12px; max-width: 420px; }
.stack label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.stack .btn { justify-self: start; }

dialog { border: 0; border-radius: 12px; padding: 0; width: min(460px, calc(100vw - 32px)); background: var(--card); color: var(--ink); box-shadow: var(--shadow-hi); }
dialog::backdrop { background: rgba(10, 16, 24, .45); backdrop-filter: blur(2px); }
dialog form { display: grid; gap: 12px; padding: 18px; }
dialog h2 { margin: 0; font-size: 16px; }

/* ---- login ---------------------------------------------------------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login .plate { position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(1200px 600px at 10% 110%, #2679c055, transparent 60%), radial-gradient(800px 500px at 90% -10%, #45d0f933, transparent 60%), #0b1119; color: #e6edf3; }
.login .plate::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.login .plate > * { position: relative; z-index: 1; }
.login .plate h1 { font: 600 44px/1.1 var(--sans); letter-spacing: -.02em; max-width: 14ch; margin: 0; }
.login .plate p { color: #9fb0c0; max-width: 46ch; }
.login .brandmark { display: flex; flex-direction: column; gap: 6px; }
.login .brandmark img { width: 380px; max-width: 85%; height: auto; margin-left: -46px; } /* the PNG carries side padding */
.login .brandmark span { font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #5bedf5; }
.login .form { display: flex; align-items: center; justify-content: center; padding: 32px; }
.login form { width: min(380px, 100%); display: grid; gap: 14px; }
.login form h2 { margin: 0 0 6px; font-size: 22px; }
.login label { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.login .btn { height: 42px; justify-content: center; }
.login .err { color: var(--crit); margin: 0; }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1180px) {
  .dash { grid-template-columns: 1fr 1fr; height: auto; }
  .dash > .panel:last-child { grid-column: span 2; }
  .workspace.fit, .workspace.fit > .tab.on.dash-tab { overflow: auto; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* minmax(0, 1fr): without it, wide children (install line, tiles) stretch the page past the screen. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .rail { order: 2; flex-direction: row; justify-content: space-around; padding: 6px; border-right: 0; border-top: 1px solid var(--line); }
  .rail .logo, .rail .spacer { display: none; }
  .rail a.on::before { display: none; }
  .rail [data-tip]:hover::after { display: none; }
  .content { height: auto; min-height: 0; }
  .app { height: 100vh; }
  .workspace { padding: 14px 16px; }
  .topbar { padding: 10px 16px; }
  .search input { width: 120px; }
  .grid { grid-template-columns: 1fr; }
  .dash, .mgrid, .two { grid-template-columns: minmax(0, 1fr); }
  .dash > .panel:last-child { grid-column: auto; }
  .hero { grid-template-columns: 1fr; justify-items: center; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tabs { padding: 0 8px; overflow-x: auto; }
  .login { grid-template-columns: 1fr; }
  .login .plate { padding: 28px 16px; min-height: 240px; }
  .login .plate h1 { font-size: 30px; }
  .hide-sm { display: none; }
}
@media print {
  .rail, .topbar .search, .tabs, .no-print { display: none !important; }
  .app { display: block; height: auto; }
  .content, .workspace, .workspace.fit { height: auto; overflow: visible; }
  .tab { display: block !important; break-before: page; }
  .card { box-shadow: none; }
}