/* Shared visual contract. Existing page-specific rules remain in portal_global.css. */
body.portal-ui {
  --font-sans: "Segoe UI", system-ui, sans-serif;
  --font-heading: "Segoe UI", system-ui, sans-serif;
  --font-mono: Consolas, ui-monospace, monospace;
  --ui-gutter: clamp(16px,1.5vw,28px); --ui-gap: 16px; --ui-control: 36px;
  --p-sidebar: 232px; --p-radius: 10px; --p-bg: #0c1017; --p-bg-2: #101620;
  --p-surface: #151d29; --p-surface-2: #1a2432; --p-border: #293343;
  --p-muted: #b0bbcc; --p-faint: #97a5ba; --p-text: #edf2fa;
  font-size: 14px; line-height: 1.5;
}
.portal-ui .main > .content { width:100%; max-width:none; min-width:0; padding:20px var(--ui-gutter) 36px; }
.portal-ui[data-page-kind="reading"] .main > .content { max-width:1120px; }
.portal-ui[data-page-kind="editor"] .main > .content { max-width:1280px; }
.portal-ui .content > .stack { gap:var(--ui-gap); min-width:0; }
.portal-ui .content > .stack > * { min-width:0; }
.portal-ui .sidebar { height:100dvh; padding:16px 12px; background:linear-gradient(180deg,#141d2b,#101620 55%); }
.portal-ui .sidebar-brand { min-height:46px; border:0; }
.portal-ui .sidebar-nav { min-height:0; scrollbar-width:thin; padding-top:18px; }
.portal-ui .nav-group-title { font-size:10px; letter-spacing:.09em; margin-bottom:12px; }
.portal-ui .nav-item { min-height:44px; padding:10px 12px; margin-bottom:5px; gap:12px; border-radius:8px; font-size:13px; transition:background .15s,color .15s; }
.portal-ui .nav-item.active { background:#262b34; box-shadow:none; border-color:#414955; color:var(--p-text); }
.portal-ui .nav-item.active::before,.portal-ui .stat-card::before { display:none; }
.portal-ui .nav-item:hover { background-color:rgba(255,255,255,.04); }
.portal-ui .nav-icon { width:20px; height:20px; display:inline-flex; }
.ui-icon { flex:none; vertical-align:middle; }
.portal-ui .sidebar-user { margin-top:auto; border:1px solid var(--p-border); border-radius:10px; background:#17202d; }
.portal-ui .nav-search { display:flex; align-items:center; gap:8px; padding:9px; margin-top:16px; width:100%; border:1px solid var(--p-border); border-radius:8px; color:var(--p-muted); background:#0c121c; cursor:pointer; font-size:11px; }
.nav-search kbd { margin-left:auto; font-size:9px; white-space:nowrap; opacity:.7; }
.portal-ui .topbar { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding:14px var(--ui-gutter); background:rgba(12,16,23,.97); }
.portal-ui .topbar-head { flex:1 1 160px; }
.portal-ui .topbar h1 { font-size:20px; line-height:1.3; overflow-wrap:anywhere; }
.portal-ui .topbar-actions { border:0; background:none; padding:0; gap:8px 12px; }
.portal-ui .scope-select { min-width:0; max-width:240px; }
.portal-ui .scope-banner { margin:0; padding:8px 12px; font-size:12px; border:1px solid var(--p-border); background:var(--p-bg-2); }
.portal-ui .mon-kpi__item { border-left:1px solid var(--p-border); }
.portal-ui .device-signal { border-left:1px solid var(--p-border); }
.portal-ui .diagnostic-process-row td:first-child { border-left:0; }
.portal-ui .section-tabs { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--p-border); padding-bottom:10px; }
.section-tabs a { padding:8px 14px; color:var(--p-muted); border:1px solid transparent; border-radius:7px; font-size:13px; }
.section-tabs a:hover { background:var(--p-surface); color:var(--p-text); }
.section-tabs a.active { color:#ffe1c7; background:var(--p-accent-soft); border-color:rgba(197,106,58,.3); }
/* Replaced by the role-aware section tabs above, not duplicated per template. */
.portal-ui .content:has(.section-tabs) :is(.hub-head,.detection-view-tabs) { display:none; }
.portal-ui .card,.portal-ui .panel { box-shadow:0 1px 0 rgba(255,255,255,.025) inset; }
.portal-ui .card:not(.panel-flush):not(.data-table-wrap) { padding:18px; }
.portal-ui :is(.field,.ops-field) { min-width:0; }
.portal-ui :is(.field,.ops-field)>label { display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--p-muted); }
.portal-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { font:inherit; color:var(--p-text); background-color:var(--p-bg-2); border:1px solid #39465a; border-radius:6px; max-width:100%; }
.portal-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select) { min-height:var(--ui-control); padding:7px 10px; }
.portal-ui textarea { min-height:100px; padding:10px; resize:vertical; }
.portal-ui input::placeholder { color:var(--p-faint); opacity:1; }
.portal-ui .btn { min-height:var(--ui-control); display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1.25; border-radius:6px; }
.portal-ui .btn-sm { min-height:30px; padding:5px 9px; font-size:12px; }
.portal-ui :is(button,input,select):disabled { cursor:not-allowed; opacity:.55; }
.portal-ui :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid #e9af80; outline-offset:3px; }
.portal-ui .ops-toolbar__row { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.portal-ui .ops-toolbar__fields { display:flex; flex:1 1 400px; flex-wrap:wrap; align-items:end; gap:12px; min-width:0; }
.portal-ui .ops-field { flex:1 1 160px; }
.portal-ui .ops-field--grow { flex:3 1 280px; }
.portal-ui .ops-field :is(input,select) { width:100%; }
.portal-ui .ops-toolbar__actions { display:flex; align-items:center; gap:8px; margin:0; }
.portal-ui .ops-toolbar__hint { margin:10px 0 0; font-size:12px; }
.portal-ui .data-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.portal-ui .card.data-table-wrap { overflow-x:auto; }
.portal-ui .data-table { width:100%; font-size:13px; border-collapse:collapse; }
.portal-ui .data-table th { padding:11px 12px; background:#111a26; font-size:10px; letter-spacing:.045em; color:var(--p-muted); text-align:left; }
.portal-ui .data-table td { padding:10px 12px; line-height:1.4; vertical-align:middle; }
.portal-ui .data-table tbody tr:hover { background:rgba(124,160,213,.045); }
.portal-ui .data-table td :is(form,p) { margin-block:0; }
.portal-ui .data-table td.mono { overflow-wrap:anywhere; }
.portal-ui .mon-clients-table { min-width:1060px; table-layout:auto; }
.portal-ui .mon-action-buttons { display:flex; flex-wrap:wrap; gap:4px; }
.portal-ui .mon-actions { min-width:205px; }
.portal-ui .mon-kpi { gap:12px; }
.portal-ui .mon-kpi__item { padding:14px 16px; background:linear-gradient(135deg,#1a2636,var(--p-surface)); }
.portal-ui .mon-row-offline .mon-status-bad { color:var(--p-muted); }
.portal-ui .mon-row-offline .mon-dot-bad { background:var(--p-faint); box-shadow:none; }
.portal-ui .danger-row .mon-status-bad { color:var(--p-danger); }
.portal-ui .detection-row { grid-template-columns:140px minmax(140px,.7fr) minmax(280px,2fr) minmax(140px,.65fr); gap:16px; padding:16px; }
.portal-ui .detection-main { min-width:0; }
.portal-ui .detection-main>p { margin:6px 0; }
.portal-ui .detection-details pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:480px; overflow:auto; }
.portal-ui :is(.detection-origin,.detection-process-item__path,.detection-process-item__hash) { overflow-wrap:anywhere; }
.portal-ui .bans-hub-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:16px; align-items:start; }
.portal-ui .bans-table-card .data-table { min-width:620px; }
.portal-ui .dash-empty { padding:32px 20px; text-align:center; color:var(--p-muted); }
.portal-ui pre { max-width:100%; overflow:auto; }
.portal-ui summary { cursor:pointer; padding-block:6px; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:200; padding:12px; background:#17202d; }
.skip-link:focus { top:12px; }
.portal-ui .command-dialog { width:min(560px,calc(100vw - 32px)); max-height:75dvh; padding:20px; border:1px solid #44536b; border-radius:14px; background:#131d2b; color:var(--p-text); box-shadow:0 24px 100px #0009; }
.command-dialog::backdrop { background:#050912b3; backdrop-filter:blur(5px); }
.command-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.command-head h2 { margin:0; font-size:18px; }
.command-head button { color:var(--p-muted); background:transparent; border:1px solid var(--p-border); border-radius:5px; cursor:pointer; }
.command-dialog input { width:100%; }
.command-results { display:grid; max-height:45dvh; overflow:auto; margin-top:12px; }
.command-results a { display:flex; align-items:center; gap:12px; padding:12px; border-radius:7px; }
.command-results a:hover,.command-results a:focus { background:#263448; }
.command-results [hidden] { display:none; }
.refresh-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--p-muted); font-size:12px; }
.refresh-status { margin-right:auto; }
.dashboard-period { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.dashboard-period>div { flex:1 1 300px; }
.dashboard-period h2 { margin:0 0 4px; font-size:20px; }
.dashboard-period .muted { font-size:12px; }
.dashboard-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.portal-ui .content .card.dashboard-metric { display:flex; flex-direction:column; gap:4px; min-height:0; padding:12px 14px; }
.dashboard-metric>* { margin:0; }
.dashboard-metric>span { color:var(--p-muted); font-size:12px; }
.dashboard-metric>strong { font-size:23px; line-height:1.2; }
.portal-ui .dashboard-metric>small { font-size:11px; line-height:1.35; margin:0; }
.portal-ui .content .card.dashboard-compact { padding:12px 16px; }
.dashboard-compact .dash-events-head { margin-bottom:8px; }
.portal-ui .dashboard-server-table th { padding:7px 10px; }
.portal-ui .dashboard-server-table td { padding:7px 10px; }
.portal-ui .dashboard-server-table .dashboard-project-name { margin:1px 0 0; font-size:11px; }
.portal-ui .dashboard-compact .dashboard-note { margin:6px 0 0; font-size:11px; line-height:1.4; }
.dashboard-note { margin:10px 0 0; font-size:12px; }
.dashboard-project-name { display:block; margin-top:4px; font-size:11px; }
.dashboard-detections td { overflow-wrap:anywhere; }
@media(max-width:1500px) { .dashboard-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.portal-ui .infra-project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); align-items:start; gap:16px; }
.portal-ui .infra-project-body { padding:0; min-width:0; }
.portal-ui .infra-project-card { min-width:0; }
.portal-ui .infra-project-name,.portal-ui .infra-project-ip { overflow-wrap:anywhere; }
.project-slots { display:grid; gap:0; }
.project-slot { padding:12px 0; border-top:1px solid var(--p-border); min-width:0; }
.project-slot-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--p-muted); margin-bottom:8px; }
.project-slot-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.project-slot-controls .inline-form { display:flex; flex:1 1 200px; min-width:0; gap:6px; }
.project-slot-controls input { width:100%; min-width:0; flex:1; }
.project-slot-controls form { margin:0; }
.portal-ui .diagnostic-process-wrap { max-height:none; }
.portal-ui .diagnostic-process-table { min-width:700px; table-layout:fixed; }
.portal-ui .diagnostic-process-table th:nth-child(1) { width:16%; }
.portal-ui .diagnostic-process-table th:nth-child(2) { width:10%; }
.portal-ui .diagnostic-process-table th:nth-child(3) { width:23%; }
.portal-ui .diagnostic-process-table th:nth-child(4) { width:23%; }
.portal-ui .diagnostic-process-table th:nth-child(5) { width:28%; }
.portal-ui .diagnostic-process-table td { overflow-wrap:anywhere; }
.portal-ui .diagnostic-process-table td { padding:6px 10px; vertical-align:middle; }
.portal-ui .diagnostic-process-table .process-signature-cell { display:table-cell; }
.portal-ui .diagnostic-process-table .process-pids span { display:inline; margin-left:6px; }
.portal-ui .diagnostic-process-toolbar .process-search-field { flex:1; min-width:180px; }
.portal-ui .process-search-field input { width:100%; }
.portal-ui .process-executable { white-space:normal; }
.process-detail-cell summary { cursor:pointer; color:#b9d5f3; padding:5px 0; }
.process-file-details { margin:10px 0; font-size:12px; }
.process-file-details dt { color:var(--p-muted); margin-top:8px; }
.process-file-details dd { margin:4px 0; font-family:var(--font-mono); overflow-wrap:anywhere; user-select:text; }
.process-pager { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-top:12px; font-size:12px; color:var(--p-muted); }
.portal-ui .diagnostic-snapshot { content-visibility:auto; contain-intrinsic-size:auto 100px; }
.portal-ui .device-detail-page>* { min-width:0; }
.portal-ui .device-hero { grid-template-columns:minmax(0,1fr); }
.portal-ui .device-hero>* { min-width:0; }
.portal-ui .device-hero-main>* { min-width:0; max-width:100%; }
.portal-ui .device-full-hwid { min-width:0; max-width:100%; }
.portal-ui .device-full-hwid code { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
.portal-ui .device-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:820px) {
 .portal-ui .device-detail-page .btn { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
 .portal-ui .device-overview-grid { grid-template-columns:minmax(0,1fr); }
 .portal-ui .device-hero-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .portal-ui .device-hero-metrics>div { min-width:0; overflow-wrap:anywhere; }
}
@media(min-width:881px) { .portal-ui .sidebar-nav { flex:1; } }
@media(max-width:1400px) {
 .portal-ui .topbar-head { flex-basis:100%; }
 .portal-ui .topbar-actions { justify-content:flex-start; width:100%; }
 .portal-ui .detection-row { grid-template-columns:125px minmax(0,1fr); }
 .portal-ui :is(.detection-main,.detection-origin) { grid-column:2; }
 .portal-ui .bans-hub-layout { grid-template-columns:minmax(0,1fr); }
 .portal-ui .bans-create-card { max-width:640px; }
}
@media(max-width:880px) {
 .portal-ui .topbar { position:relative; }
 .portal-ui .topbar-head { flex-basis:auto; }
 .portal-ui .main>.content { padding:16px; }
 .portal-ui .sidebar { height:100dvh; }
}
@media(max-width:600px) {
 .portal-ui .mon-kpi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .portal-ui .mon-kpi__item { min-width:0; padding:10px; }
 .portal-ui .mon-kpi__label { font-size:9px; overflow-wrap:anywhere; }
 .portal-ui .mon-kpi__value { font-size:22px; }
 .portal-ui :is(.ops-toolbar__fields,.ops-field,.ops-field--grow) { flex-basis:100%; }
 .portal-ui .ops-toolbar__actions { width:100%; }
 .portal-ui .ops-toolbar__actions>* { flex:1; }
 .portal-ui .detection-row { grid-template-columns:minmax(0,1fr); }
 .portal-ui :is(.detection-main,.detection-origin) { grid-column:1; }
 .portal-ui .topbar-actions>.admin-scope-form { width:100%; }
 .portal-ui .scope-select { flex:1; max-width:none; }
 .portal-ui .card:not(.panel-flush):not(.data-table-wrap) { padding:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .portal-ui *, .portal-ui *::before, .portal-ui *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ── HWID notes: badge / tooltip / editor ─────────────────────────── */
.hwid-note-badge{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:6px; padding:0; vertical-align:middle;
  border-radius:6px; cursor:pointer; line-height:0;
  color:var(--p-faint,#97a5ba);
  background:transparent; border:1px solid transparent;
  opacity:.45; transition:opacity .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
tr:hover .hwid-note-badge, *:hover > .hwid-note-badge, .hwid-note-badge:hover{ opacity:1; }
.hwid-note-badge:hover{ color:#ffe1c7; background:var(--p-accent-soft,rgba(197,106,58,.18)); border-color:rgba(197,106,58,.35); }
.hwid-note-badge.has-note{
  opacity:1; color:#ffd9a8;
  background:var(--p-accent-soft,rgba(197,106,58,.18));
  border-color:rgba(197,106,58,.45);
  box-shadow:0 0 0 1px rgba(197,106,58,.12);
}
.hwid-note-badge.has-note::after{
  content:""; position:absolute; top:-3px; right:-3px;
  width:6px; height:6px; border-radius:50%; background:#e8944e; box-shadow:0 0 0 2px var(--p-bg,#0c1017);
}
.hwid-note-badge svg{ display:block; }

.hwid-note-tooltip{
  position:absolute; z-index:1000; max-width:320px;
  padding:8px 10px; border-radius:8px;
  background:#0a0e14; color:var(--p-text,#edf2fa);
  border:1px solid var(--p-border,#293343);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  font:13px/1.4 var(--font-sans); white-space:pre-wrap; word-break:break-word;
  pointer-events:none;
}

.hwid-note-editor{
  position:absolute; z-index:1001; width:320px; max-width:calc(100vw - 16px);
  padding:12px; border-radius:10px;
  background:var(--p-surface,#151d29); border:1px solid var(--p-border,#293343);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.hwid-note-editor-title{ font:600 13px/1 var(--font-sans); color:var(--p-text,#edf2fa); margin-bottom:8px; }
.hwid-note-textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:72px;
  padding:8px 10px; border-radius:8px;
  background:var(--p-bg-2,#101620); color:var(--p-text,#edf2fa);
  border:1px solid var(--p-border,#293343);
  font:13px/1.45 var(--font-sans);
}
.hwid-note-textarea:focus{ outline:none; border-color:rgba(197,106,58,.6); box-shadow:0 0 0 2px rgba(197,106,58,.18); }
.hwid-note-editor-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.hwid-note-spacer{ flex:1; }
.hwid-note-btn{
  padding:6px 12px; border-radius:7px; cursor:pointer;
  font:600 12px/1 var(--font-sans);
  background:var(--p-surface-2,#1a2432); color:var(--p-text,#edf2fa);
  border:1px solid var(--p-border,#293343);
}
.hwid-note-btn:hover{ border-color:rgba(197,106,58,.4); }
.hwid-note-save{ background:#c56a3a; border-color:#c56a3a; color:#fff; }
.hwid-note-save:hover{ background:#d0794a; }
.hwid-note-del{ color:var(--p-danger,#e5736f); border-color:transparent; background:transparent; }
.hwid-note-del:hover{ background:rgba(229,115,111,.12); border-color:rgba(229,115,111,.4); }