/* Endpoint screens (assets/js/endpoint*.js). Built on the shared panels, tables and charts;
   only layout and the Endpoint-specific pieces live here. */

/* ---------- Shared bits ---------- */

.ep-small { font-size: 11.5px; }
.ep-mt { margin-top: 12px; }
.ep-m { margin: 0 17px 12px; }
.ep-m0 { margin: 0; }
.ep-pad { padding: 0 17px 14px; }
.ep-sub { padding: 12px 17px 16px; border-top: 1px solid var(--line); }
.ep-crumbs { margin-bottom: 6px; }
.ep-wrap { white-space: normal !important; min-width: 180px; }
.ep-nowrap { white-space: nowrap; }
.ep-nowrap .spec-row { flex-wrap: nowrap; }
.ep-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.no-results .ep-btns { justify-content: center; margin-top: 14px; }
.ep-center { display: grid; place-content: center; min-height: 300px; }
.ep-center .no-results { max-width: 460px; }
.ep-old { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--wait); white-space: nowrap; }
.ep-crit-n { color: var(--crit); font-weight: 700; }
.ep-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.ep-flag.crit { color: var(--crit); }
.ep-run { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ep-run.ok { color: var(--ok); }
.ep-run.crit { color: var(--crit); }
.ep-run.run { color: var(--accent); }
.ep-run.run .icon { animation: spin 1.4s linear infinite; }
.ep-run.none { color: var(--ink-3); }
.ep-out {
  margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  border-radius: var(--r-md); background: var(--sunken); font: 12px/1.55 var(--font-data); color: var(--ink);
}
.ep-link-rows tbody tr[data-id] { cursor: pointer; }
.ep-link-rows tbody tr[data-id]:hover td { background: var(--surface-2); }
.ep-op { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--ink); font-weight: 500; font-size: 13px; }
.ep-op:hover { color: var(--accent); }

/* Lists of things with a tile, a text block and an action or state. */
.ep-list { list-style: none; margin: 0; padding: 0 0 6px; }
.ep-list li { display: grid; grid-template-columns: 32.5px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9.5px 17px; border-top: 1px solid var(--line); font-size: 13px; }
.ep-list li:first-child { border-top: 0; }
.ep-list a:hover { color: var(--accent); }
.ep-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 17px 14px; }

/* Simple tables inside panels: narrower than full data tables on small screens. */
.dt-table.ep-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt-table.ep-table tbody tr:last-child td { border-bottom: 0; }
dl.facts.ep-facts { grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); }
dl.facts.ep-facts dd { text-align: left; }
.dialog:has(.ep-dlg), .dialog:has(.ep-dfacts) { width: min(600px, 100%); }
.ep-dfacts { margin: 12px 0; }
.ep-dlg { display: grid; gap: 10px; margin-top: 10px; font-size: 13px; }
.ep-dlg > p { color: var(--ink-2); line-height: 1.5; }

.ep-section { margin-top: 24px; }
.ep-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; }
.ep-section-head h2 { font-size: 15px; font-weight: 700; }
.ep-param { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ep-param > label, .ep-param > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ep-param .field, .ep-param .select-wrap, .ep-param select { width: 100%; }
.ep-params { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Overview ---------- */

.kpis.ep-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
.kpis.ep-k { margin-top: 0; }
a.ep-kpi { color: inherit; transition: background 0.15s; }
a.ep-kpi:hover { background: var(--surface-2); }
a.ep-kpi:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
a.ep-kpi:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.ep-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 17px; }
.ep-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.ep-picks { display: grid; gap: 2px; max-height: 320px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.ep-picks label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.ep-picks label:hover { background: var(--sunken); }
.ep-findings { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ep-agent { display: grid; gap: 11px; }
.ep-lead { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ep-lead strong { color: var(--ink); }
.ep-ops .ep-run { margin-left: 4px; }

/* ---------- Devices ---------- */

.ep-browse { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 17px; align-items: start; }
.ep-browse-main { display: grid; gap: 10px; min-width: 0; }
.ep-tree { position: sticky; top: calc(var(--top-h) + 16px); display: grid; gap: 1px; padding: 6px; max-height: calc(100dvh - var(--top-h) - 32px); overflow: auto; }
.ep-tree a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6.5px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2); }
.ep-tree a:hover { background: var(--sunken); color: var(--ink); }
.ep-tree a .num { font-size: 11.5px; color: var(--ink-3); }
.ep-tree a.all, .ep-tree a.site { font-weight: 600; color: var(--ink); }
.ep-tree a.child { padding-left: 22px; }
.ep-tree a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ep-tree a[aria-current="page"] .num { color: var(--accent); }
.ep-tree-group { display: grid; gap: 1px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.ep-folder-select { display: none; }

/* ---------- Device ---------- */

.ep-device .tabs { margin-bottom: 14px; }
.ep-health { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; padding-top: 6px; }
.ep-hcell { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ep-hlabel { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ep-hcell .spark { width: 100%; }
.ep-collected { display: inline-flex; align-items: center; gap: 10px; }
.ep-inv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 17px; align-items: start; }
.ep-inv-body { min-width: 0; padding-bottom: 6px; }
.ep-inv-body > .panel-body { padding-top: 8px; }
/* Inventory › Stockage: a group label over its two entries, physical disks and logical volumes (operator, 2026-11-05). */
.ep-subnav-group { display: flex; align-items: center; gap: 10px; padding: 8px 10px 2px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.account-nav a.ep-subnav-child { padding-left: 35px; }
.account-nav a.ep-subnav-child svg { display: none; }
/* Fixed frame (kit.css): the folder tree and inventory sections stay, their content scrolls. */
@media (min-width: 861px) and (min-height: 560px) {
  .frame .ep-browse, .frame .ep-inv { min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .frame .ep-tree { position: static; align-self: start; max-height: 100%; }
  .frame .ep-browse-main { display: flex; flex-direction: column; min-height: 0; }
  .frame .ep-browse-main > .dt { flex: 1 1 auto; }
  .frame .ep-subnav { position: static; align-self: start; }
  .frame .ep-inv-body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  .frame .ep-inv-body > :last-child { flex: 1 1 auto; min-height: 0; overflow: auto; }
}
.ep-dt-flush .dt-toolbar { padding-top: 6px; }
.ep-mon-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.ep-mon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; align-content: start; }
.ep-runform { display: grid; gap: 12px; }
.ep-term-like { max-height: 300px; background: #0A1230; color: #DCE3F5; }

/* Live tabs fill the viewport: header and tabs on top, the tool below. */
main.fit > .ep-fit { flex: 0 0 auto; height: calc(100dvh - var(--top-h) - 40px); min-height: 560px; }
.ep-fit > .fill { flex: 1 1 auto; min-height: 0; }
.ep-fit > .banner { flex: none; }

/* Terminal: a dark console in both themes. */

/* Files: listing and preview side by side, preview on top when narrow. */
.ep-files { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 17px; min-height: 0; }
.ep-files-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ep-files-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ep-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; font: 12.5px var(--font-data); color: var(--ink-3); }
.ep-loc button { padding: 3px 6px; border-radius: 6px; color: var(--ink-2); }
.ep-loc button:hover { background: var(--sunken); color: var(--ink); }
.ep-loc button[aria-current] { color: var(--ink); font-weight: 700; }
.ep-files-tools { display: flex; gap: 6px; }
.ep-fscroll { flex: 1 1 auto; min-height: 0; }
.dt-table.ep-ftable td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.ep-ftable tr.selected td { background: var(--accent-soft); }
.ep-fname { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); text-align: left; }
.ep-fname .icon { flex: none; color: var(--accent); }
.ep-fname:hover { color: var(--accent); }
.ep-preview { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-height: 0; overflow: auto; }
.ep-prev-head { display: flex; align-items: center; gap: 10px; }
.ep-path { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.ep-prev-text { flex: 1 1 auto; min-height: 120px; max-height: none; }

/* Remote desktop. The remote screen keeps its own colours in both themes. */

/* ---------- Scripts ---------- */

.ep-code-panel { display: flex; flex-direction: column; min-width: 0; align-self: start; }
.ep-code { flex: 1 1 auto; margin: 0; max-height: 620px; overflow: auto; padding: 12px 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--sunken); font: 12.5px/1.6 var(--font-data); color: var(--ink); counter-reset: ln; outline: none; }
.ep-code:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ep-code code { display: block; min-width: max-content; }
.ep-code .ln { display: block; padding-right: 16px; white-space: pre; counter-increment: ln; }
.ep-code .ln::before { content: counter(ln); display: inline-block; width: 34px; margin-right: 14px; text-align: right; color: var(--ink-3); opacity: 0.7; user-select: none; }
.tk-c { color: var(--ink-3); font-style: italic; }
.tk-s { color: var(--ok); }
.tk-v { color: var(--accent); }
.tk-f { color: var(--accent); font-weight: 600; }
.tk-k { font-weight: 700; }
.ep-picklist { max-height: 220px; overflow: auto; margin-top: 8px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ep-pick { display: flex; width: 100%; gap: 9px; padding: 6px 8px; border-radius: 6px; }
.ep-pick:hover { background: var(--sunken); }
.ep-pick .muted { font-size: 11.5px; }
.ep-pick .muted:first-of-type { margin-left: auto; }

/* ---------- Updates and compliance ---------- */

.ep-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.ep-ring { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.ep-ring-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ep-ring-top h3 { font-size: 14.5px; font-weight: 700; }
.ep-ring-top > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.ep-ring-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.ep-ring-nums b { color: var(--ink); }
.ep-ring-nums .ep-crit-n b { color: var(--crit); }
dl.facts.ep-ringfacts { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 12.5px; }
dl.facts.ep-ringfacts dd { overflow-wrap: normal; }
.ep-ring .btn { justify-self: start; }
.ep-comp { display: inline-grid; grid-template-columns: 52px minmax(80px, 120px); align-items: center; gap: 10px; }
.ep-comp strong { font-size: 13px; }
.ep-fix p { font-size: 13px; line-height: 1.5; }
.ep-fix .ep-btns { margin: 10px 0; }

/* ---------- Deployment ---------- */

.ep-steps { display: grid; gap: 20px; padding-top: 6px; }
.ep-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.ep-step strong { display: block; font-size: 13.5px; }
.ep-deploy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 17px; align-items: start; }
.ep-step p { margin: 3px 0 8px; }
.ep-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.ep-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ep-cmdline { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 7px 8px 7px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunken); }
.ep-cmdline > code, .ep-cmdline > span { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.ep-code-big { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); }
.ep-code-big .data { font-size: 22px; font-weight: 700; letter-spacing: 0.12em; }
.ep-token { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 20px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.ep-token > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- Settings tables ---------- */

.ep-settings .account-layout { align-content: start; }

.dt-table.ep-edit td { padding: 7px 10px; }
.ep-edit .field { height: 30px; }
.ep-edit input.field:not([type]) { min-width: 150px; width: 100%; }
.ep-time { display: inline-flex; align-items: center; gap: 6px; }
.ep-time .field { width: 104px; }
.ep-thr { display: inline-flex; align-items: center; gap: 6px; }
.ep-thr .field { width: 64px; text-align: right; }
.ep-rights { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ep-rights .check { font-size: 12.5px; white-space: nowrap; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .kpis.ep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep-kpis .kpi:nth-child(4) { border-left: 0; }
  .ep-kpis .kpi:nth-child(n + 4) { border-top: 1px solid var(--line); }
  a.ep-kpi:first-child, a.ep-kpi:last-child { border-radius: 0; }
  .ep-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-cols-3 > :last-child { grid-column: 1 / -1; }
  .ep-rings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .ep-deploy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .kpis.ep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-kpis .kpi:nth-child(n) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .ep-kpis .kpi:nth-child(odd) { border-left: 0; }
  .ep-kpis .kpi:nth-child(-n + 2) { border-top: 0; }
  .ep-cols-3, .ep-cols-2, .ep-mon { grid-template-columns: minmax(0, 1fr); }
  .ep-inv { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ep-inv .ep-subnav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .ep-inv .ep-subnav a { flex: none; white-space: nowrap; }
  .ep-files { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(220px, 1fr); }
  .ep-preview { order: -1; max-height: 38dvh; }
}
@media (max-width: 860px) {
  .ep-browse { grid-template-columns: minmax(0, 1fr); }
  .ep-tree { display: none; }
  .ep-folder-select { display: inline-flex; width: 100%; }
  .ep-folder-select select { width: 100%; }
  .dt-table.ep-table { min-width: 560px; }
  .dt-table.ep-ftable { min-width: 0; }
  .dt-table.ep-ftable td { white-space: normal; }
  .dt-table.ep-edit { min-width: 720px; }
  main.fit > .ep-fit { height: calc(100dvh - var(--top-h) - 34px); }
}
@media (max-width: 520px) {
  .kpis.ep-kpis { grid-template-columns: minmax(0, 1fr); }
  .ep-kpis .kpi:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .ep-kpis .kpi:first-child { border-top: 0; }
  .ep-health { grid-template-columns: minmax(0, 1fr); }
  .ep-list li { grid-template-columns: 32.5px minmax(0, 1fr); }
  .ep-list li > :last-child:not(:nth-child(2)) { grid-column: 2; justify-self: start; }
  .ep-code-big .data { font-size: 18px; }
}

/* Replay of a recorded terminal (TerminalReplayPage): the emulator at its recorded size, then the player. */
.term-replay { display: grid; gap: 10px; min-width: 0; }
.term-replay .term { max-height: min(62vh, 640px); }

/* Recorded sessions (RecordingsPage): the device scope line and the type cell. */
.rec-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
.rec-kind { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rec-kind svg { color: var(--muted); flex: none; }
/* Package updates an agent may not install (aptUnavailableReason): the reason in the waiting tone, no brick. */
.upd-blocked { color: var(--wait); }
.role.upd-blocked { font-size: 11.5px; }
.upd-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }