/* GoLicit admin UI — 4.5 design: white, black and signal yellow (#ffe500).
   Yellow is only ever a fill behind black text (never yellow text on white — it is unreadable). */
:root {
  --yellow: #ffe500;
  --black: #000;
  --ink: #111;
  --white: #fff;
  --paper: #fafafa;
  --line: #e2e2e2;
  --line-strong: #111;
  --muted: #666;
  --soft: #f2f2f2;
  --sidebar-w: 248px;
  /* 4.12.1 colour update: grey surfaces with a yellow border instead of solid yellow fills. */
  --grey-btn: #2b2b2b;        /* sidebar menu buttons */
  --grey-btn-hover: #3a3a3a;
  --grey-panel: #1c1c1c;      /* opened sub-menu */
  --grey-tile: #ececec;       /* dashboard "needs attention" tiles */
  --grey-tile-hover: #e2e2e2;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--paper); color: var(--ink); }
a { color: var(--ink); }
::selection { background: var(--yellow); color: var(--black); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; box-shadow: 0 0 0 5px var(--black); }

/* ---- Layout: black sidebar + white content ---- */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--black); color: var(--white); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; text-decoration: none; color: var(--white); }
.brand .mark { background: var(--yellow); color: var(--black); font-weight: 800; letter-spacing: -.02em; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; font-size: 15px; }
/* 4.52: logo image — yellow GL letters on a black rounded badge (reads on the dark sidebar and the light login alike).
   Sized by HEIGHT with width:auto so the image keeps its aspect ratio and never overlaps the text in the flex row. */
.brand .mark-img { height: 48px; width: auto; border-radius: 8px; background: var(--black); object-fit: contain; padding: 5px 7px; box-sizing: border-box; flex: 0 0 auto; }
.brand .word { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.brand .word small { display: block; font-weight: 400; font-size: 11px; color: #aaa; letter-spacing: .04em; text-transform: uppercase; }
.brand .word small.sub2 { color: var(--yellow); font-weight: 600; margin-top: 1px; }
.nav { padding: 4px 10px 16px; flex: 1; }
.nav .group { margin-top: 14px; padding: 0 10px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.nav .hint { padding: 0 10px 6px; font-size: 11px; color: #8a8a8a; margin-top: -2px; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: #e8e8e8; text-decoration: none; font-size: 14px; }
.nav a:hover { background: #1c1c1c; color: var(--white); }
.nav a.active { background: var(--yellow); color: var(--black); font-weight: 650; }
.nav a.l2 { padding-left: 24px; }
.nav a.l3 { padding-left: 40px; font-size: 13px; }
.nav .sub { padding: 6px 10px 2px 24px; font-size: 12px; color: #bdbdbd; display: flex; align-items: center; gap: 6px; }
.nav .sub::before { content: ""; width: 6px; height: 6px; background: var(--yellow); border-radius: 1px; }
.nav a .count { margin-left: auto; font-size: 11px; background: var(--yellow); color: var(--black); border-radius: 999px; padding: 0 7px; font-weight: 700; }
.nav a.active .count { background: var(--black); color: var(--yellow); }
/* Grouped navigation (4.12.1): grey ROOT items with a yellow border, each dropping down to grey sub-pages. */
.nav .navgroup { margin-bottom: 4px; }
.nav .root { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  margin: 3px 0; padding: 9px 12px; border: 2px solid transparent; border-radius: 7px;
  background: var(--grey-btn); border-color: var(--yellow); color: var(--white); font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: left; }
.nav a.root:hover, .nav button.root:hover { background: var(--grey-btn-hover); color: var(--yellow); }
.nav .root.on { background: var(--grey-btn-hover); color: var(--yellow); box-shadow: inset 4px 0 0 var(--yellow); }
.nav .root .caret { font-size: 11px; font-weight: 700; opacity: .7; }
.nav .submenu { margin: 2px 2px 10px; padding: 5px; background: var(--grey-panel); border: 1px solid #3a3a3a; border-radius: 7px;
  display: flex; flex-direction: column; gap: 2px; }
.nav a.sub-item { display: block; padding: 7px 11px; border: 2px solid transparent; border-radius: 5px;
  background: transparent; color: #e6e6e6; font-size: 13px; font-weight: 500; }
.nav a.sub-item:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.nav a.sub-item.active { background: var(--grey-btn); border: 2px solid var(--yellow); color: var(--white); font-weight: 700; }
/* Windows-style account corner (4.36): an avatar + name button that opens a flyout above it. */
.who { position: relative; border-top: 1px solid #222; padding: 10px; font-size: 13px; color: #cfcfcf; }
.who strong { color: var(--white); }
.who-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; color: #e8e8e8;
  border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; }
.who-btn:hover, .who-btn.open { background: #1c1c1c; border-color: #333; }
.who-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--black);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -.02em; }
.who-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who-id strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: 11px; color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-caret { margin-left: auto; font-size: 11px; color: #8a8a8a; }
.who-ver { padding: 8px 12px 4px; font-size: 11px; color: #7a7a7a; letter-spacing: .02em; }
.who-backdrop { position: fixed; inset: 0; z-index: 30; }
.who-menu { position: absolute; z-index: 31; left: 10px; right: 10px; bottom: 100%; margin-bottom: 6px;
  background: var(--grey-panel); border: 1px solid #3a3a3a; border-radius: 10px; padding: 6px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
.who-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent;
  color: #e8e8e8; border: 0; border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.who-item:hover { background: rgba(255, 255, 255, .09); color: var(--white); }
.who-item.danger:hover { background: rgba(220, 70, 70, .18); color: #ff9b9b; }
.who-item .ic { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.menu-toggle { display: none; }

.content { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: var(--white); border-bottom: 1px solid var(--line); min-height: 60px; }
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.topbar .crumbs { color: var(--muted); font-size: 13px; }
.topbar .crumbs a { color: var(--muted); }
main { max-width: 1240px; padding: 22px 28px 48px; }
.banner { background: var(--yellow); color: var(--black); padding: 8px 28px; font-size: 13px; border-bottom: 1px solid var(--black); }
.banner a, .banner button { color: var(--black); font-weight: 700; }

/* ---- Cards, tables, forms ---- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin: 0 0 12px; font-weight: 700; }
.card h2 .muted { font-weight: 400; }
.card.accent { border-top: 4px solid var(--yellow); }
h3 { font-size: 13px; margin: 16px 0 8px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; background: var(--white); position: sticky; top: 0; }
tbody tr:hover { background: #fffbe0; }
tr.click { cursor: pointer; }
tr.selected { background: #fff6a8 !important; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.url { word-break: break-all; }
td.url, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
td.check, th.check { width: 34px; }
.table-wrap { overflow-x: auto; }

button.btn, a.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); color: var(--black); border: 1px solid var(--black); border-radius: 6px; padding: 7px 14px; cursor: pointer; font: inherit; font-weight: 650; text-decoration: none; white-space: nowrap; }
button.btn:hover, a.btn:hover { background: #ffd900; }
button.btn.secondary, a.btn.secondary { background: var(--white); font-weight: 500; }
button.btn.secondary:hover, a.btn.secondary:hover { background: var(--soft); }
button.btn.dark { background: var(--black); color: var(--white); }
button.btn.danger { background: var(--black); color: var(--yellow); border-color: var(--black); }
button.btn.danger:hover { background: #222; }
button.btn.small, a.btn.small { padding: 3px 9px; font-size: 12px; }
button.btn:disabled { opacity: .45; cursor: default; }
button.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; }

input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid #cfcfcf; border-radius: 6px; background: var(--white); color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--black); }
textarea { min-height: 90px; resize: vertical; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--black); margin: 0; vertical-align: middle; }
label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 12px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 0 0; color: var(--ink); font-size: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.grow { flex: 1; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.ok { color: var(--ink); } .bad { color: var(--ink); font-weight: 600; }
input.filter { width: 280px; max-width: 100%; }
select.inline { width: auto; }
.form-grid { display: grid; grid-template-columns: minmax(170px, max-content) minmax(0, 420px); gap: 8px 14px; align-items: center; margin: 12px 0; }
.form-grid label { margin: 0; }
.form-grid .full { grid-column: 1 / -1; }
dl.facts { display: grid; grid-template-columns: minmax(170px, max-content) 1fr; gap: 6px 18px; margin: 0; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; word-break: break-word; }
code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--soft); padding: 2px 5px; border-radius: 4px; font-size: 12px; }
pre { padding: 10px 12px; overflow: auto; border: 1px solid var(--line); }
details > summary { cursor: pointer; margin-bottom: 8px; }
details.card > summary { list-style-position: inside; font-weight: 700; }
details.card[open] > summary { margin-bottom: 12px; }
details.danger-zone { margin-top: 14px; border-top: 1px dashed #bbb; padding-top: 10px; }
details.danger-zone > summary { font-weight: 600; }

/* ---- Messages ---- */
.msg { margin: 10px 0; padding: 9px 12px; border-radius: 6px; background: var(--soft); border-left: 4px solid var(--black); }
.msg.error { background: var(--black); color: var(--white); border-left-color: var(--yellow); }
.msg.note { background: #fff9c7; border-left-color: var(--yellow); }
.warn-box { border: 1px solid var(--black); background: #fff9c7; border-radius: 8px; padding: 10px 12px; }

/* ---- Badges (text always carries the meaning; style only reinforces it) ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; border: 1px solid var(--black); background: var(--white); color: var(--black); white-space: nowrap; vertical-align: middle; line-height: 1.6; }
.badge.ok::before { content: "✓"; }
.badge.warn { background: var(--yellow); }
.badge.bad { background: var(--black); color: var(--yellow); }
.badge.muted { border-color: #bbb; color: var(--muted); font-weight: 500; }
.badge.info { border-style: dashed; }
.badge.solid { background: var(--black); color: var(--white); }

/* ---- Dashboard ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--ink); display: block; }
.kpi:hover { border-color: var(--black); }
.kpi .v { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: 12px; margin-top: 4px; }
/* 4.12.1: "needs attention" tiles are grey with a yellow border (were solid yellow). */
.kpi.hot { background: var(--grey-tile); border: 2px solid var(--yellow); padding: 13px 15px; }
.kpi.hot:hover { background: var(--grey-tile-hover); border-color: var(--yellow); }
.kpi.hot .l { color: var(--ink); }
.kpi.dark { background: var(--black); color: var(--white); border-color: var(--black); }
.kpi.dark .l { color: #bbb; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 > .card { margin-bottom: 0; min-width: 0; }
.bars { display: grid; grid-template-columns: minmax(110px, max-content) 1fr 44px; gap: 6px 10px; align-items: center; }
.bars .bar { height: 14px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.bars .bar > span { display: block; height: 100%; background: var(--black); border-radius: 3px; }
.bars .bar > span.y { background: var(--yellow); box-shadow: inset 0 0 0 1px var(--black); }
.bars .bar > span.g { background: #bdbdbd; }
.bars .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.stack { display: flex; height: 18px; border-radius: 3px; overflow: hidden; border: 1px solid var(--black); background: var(--white); }
.stack > span { display: block; height: 100%; }
.seg-PASS { background: var(--black); }
.seg-REVIEW { background: var(--yellow); }
.seg-FAIL { background: repeating-linear-gradient(45deg, var(--black) 0 4px, var(--yellow) 4px 8px); }
.seg-UNKNOWN { background: #c9c9c9; }
.seg-NOT_APPLICABLE { background: var(--white); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--black); margin-right: 5px; vertical-align: -1px; }

/* ---- Selection toolbar ---- */
.toolbar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--black); color: var(--white); padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.toolbar select, .toolbar input { width: auto; padding: 4px 8px; }
.toolbar .btn.secondary { border-color: var(--white); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid #cfcfcf; background: var(--white); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.chip.on { background: var(--black); color: var(--white); border-color: var(--black); }
.chip .n { font-weight: 700; margin-left: 4px; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--black); padding: 16px; }
.login { width: 100%; max-width: 380px; background: var(--white); border-radius: 12px; padding: 26px; border-top: 6px solid var(--yellow); }
.login .brand { color: var(--black); padding: 0 0 12px; }
.login .brand .word small { color: var(--muted); }

.report ul { margin: 4px 0 8px; padding-left: 20px; }
.report table td:first-child { white-space: nowrap; }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  /* The collapsed black header (brand + Menu) stays pinned so the menu is always reachable on long pages. */
  .sidebar { position: sticky; top: 0; height: auto; z-index: 20; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; background: var(--yellow); color: var(--black); border: 0; border-radius: 7px; padding: 8px 14px; font: inherit; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
  .brand { padding: 12px 16px; }
  .sidebar .nav, .sidebar .who { display: none; }
  .sidebar.open { max-height: 100vh; overflow-y: auto; }
  .sidebar.open .nav, .sidebar.open .who { display: block; }
  /* Topbar: title block on its own line, actions wrap underneath instead of colliding. */
  .topbar { flex-wrap: wrap; align-items: flex-start; padding: 12px 16px; }
  .topbar .grow { flex-basis: 100%; }
  main, .banner { padding-left: 16px; padding-right: 16px; }
  main { padding-top: 16px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  /* Wide tables scroll sideways instead of squashing cells (e.g. hosts breaking letter-by-letter). */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap td.url { white-space: nowrap; word-break: normal; }
  .table-wrap table { min-width: 520px; }
}
@media (max-width: 640px) {
  dl.facts, .form-grid { grid-template-columns: 1fr; }
  .bars { grid-template-columns: minmax(90px, 40%) 1fr 36px; }
  /* Filter inputs (user / device / site, search box) fill the width and stay tappable. */
  .card .row > input { flex: 1 1 140px; min-width: 0; }
  input.filter { width: 100%; }
  .topbar h1 { font-size: 17px; }
}

/* 4.15: Admin → AI → Decision rules — one row per setting: number · name + description · control. */
.rule-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(220px, 340px); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.rule-no { font-weight: 800; color: var(--muted); padding-top: 2px; }
.rule-title { font-weight: 650; }
.rule-default { white-space: nowrap; }
.rule-ctl textarea, .rule-ctl select, .rule-ctl input:not([type=checkbox]) { width: 100%; }
.rule-ctl input[type=number] { width: 110px; }
@media (max-width: 760px) { .rule-row { grid-template-columns: 1fr; } .rule-no { display: none; } }

/* 4.16: report catalogue + viewer */
.report-list { display: grid; gap: 2px; }
.report-link { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.report-link:hover { background: var(--soft); }
.report-link .small { margin-top: 2px; }
th.click { cursor: pointer; user-select: none; white-space: nowrap; }
th.click:hover { text-decoration: underline; }

/* 4.17: report builder */
.report-list.cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 18px; }
.step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--black); font-size: 12px; font-weight: 800; margin-right: 4px; }
.builder-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 18px; align-items: start; }
.field-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; max-height: 380px; overflow: auto; padding-right: 6px; }
.fg-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
.field-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 2px 0; font-weight: 400; cursor: pointer; }
.field-opt { color: var(--ink); }
.col-order { display: grid; gap: 4px; max-height: 380px; overflow: auto; }
.col-item { display: flex; align-items: center; gap: 4px; background: var(--soft); border-radius: 6px; padding: 3px 4px 3px 10px; font-size: 13px; }
.col-item .btn.small { padding: 1px 7px; }
.filter-row select, .filter-row input { margin: 0; }
@media (max-width: 900px) { .builder-cols { grid-template-columns: 1fr; } }

/* 4.18: page tabs (Assets: Installed apps / Web services / Portable apps · Detections: Installed / Web / Portable) */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 16px; flex-wrap: wrap; }
.tabs .tab { padding: 9px 16px; margin-bottom: -2px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px 6px 0 0; }
.tabs .tab:hover { color: var(--ink); background: var(--soft); }
.tabs .tab.on { color: var(--ink); border-bottom-color: var(--yellow); background: var(--white); }
.tabs .tab .n { font-size: 12px; font-weight: 700; background: var(--soft); border-radius: 999px; padding: 1px 8px; color: var(--ink); }
.tabs .tab.on .n { background: var(--black); color: var(--white); }

/* 4.18: asset import */
.btn.on { box-shadow: inset 0 0 0 2px var(--black); }
.import-notes { background: var(--soft); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; display: grid; gap: 2px; }

/* 4.19: dashboard sections + clickable card titles */
.dash-section { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--yellow); }
.dash-section:first-child { margin-top: 0; }
.dash-section h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.card h2.card-link { display: flex; align-items: baseline; gap: 10px; }
.card h2.card-link a { color: var(--ink); text-decoration: none; }
.card h2.card-link a:hover { text-decoration: underline; }
.card h2.card-link a.more { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.kpi .l.small { font-size: 11px; margin-top: 2px; }
.grid2 + .grid2, .grid2 + .card, .card + .grid2 { margin-top: 16px; }

/* 4.19.1: donut charts (yellow / black / greys) — total in the centre, legend with count and % */
.donut { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.donut-svg { width: 150px; height: 150px; display: block; overflow: visible; }
.donut-seg { transition: stroke-width .12s, opacity .12s; }
.donut-seg.link { cursor: pointer; }
.donut-seg.on { stroke-width: 26; }
.donut-seg.dim { opacity: .35; }
.donut-v { font-size: 24px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.donut-l { font-size: 9.5px; fill: var(--muted); }
.donut-legend { display: grid; gap: 2px; min-width: 0; }
.donut-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 46px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 13px; }
.donut-row .sw { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.donut-row .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-row .n { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.donut-row .p { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
a.donut-row:hover, .donut-row.on { background: var(--soft); }
@media (max-width: 560px) { .donut { grid-template-columns: 1fr; justify-items: center; } .donut-legend { width: 100%; } }

/* =====================================================================================================================
   4.19.2 — one colour meaning everywhere:
   yellow = good / fine · dark grey = under review / pending / with conditions · black = bad (rejected, failed,
   missing, not updated) · light grey = unknown / not analysed. (Yellow buttons and the menu are UI, not data.)
   ===================================================================================================================== */
:root { --good: #ffe500; --good-2: #fff3a0; --pending: #4d4d4d; --pending-2: #8c8c8c; --bad: #111111; --unknown: #d6d6d6; }

/* Badges */
.badge.ok { background: var(--good); border-color: var(--black); color: var(--black); }
.badge.warn { background: var(--pending); border-color: var(--pending); color: var(--white); }
.badge.info { background: var(--white); border: 1px solid var(--pending); border-style: solid; color: var(--pending); box-shadow: inset 0 0 0 1px var(--pending); }
.badge.bad { background: var(--bad); border-color: var(--bad); color: var(--white); }
.badge.muted { background: var(--white); border-color: #bbb; color: var(--muted); }

/* Dashboard tiles */
.kpi.good { background: var(--white); border: 2px solid var(--good); padding: 13px 15px; }
.kpi.good:hover { border-color: var(--black); }
.kpi.pend { background: var(--pending); border-color: var(--pending); color: var(--white); }
.kpi.pend .l { color: #e0e0e0; }
.kpi.pend:hover { background: #3d3d3d; }
.kpi.bad { background: var(--bad); border-color: var(--bad); color: var(--white); }
.kpi.bad .l { color: #c8c8c8; }
.kpi.bad:hover { background: #000; box-shadow: 0 0 0 2px var(--good) inset; }

/* Requirement results (Pass / Review / Fail / Unknown / N/A) */
.seg-PASS { background: var(--good); }
.seg-REVIEW { background: var(--pending); }
.seg-FAIL { background: var(--bad); }
.seg-UNKNOWN { background: var(--unknown); }
.seg-NOT_APPLICABLE { background: var(--white); }
.stack > span + span { box-shadow: -2px 0 0 var(--white); }

/* Bar lists (only time series and model stats remain): neutral grey; .y = good, .g = unknown */
.bars .bar > span { background: var(--pending-2); }
.bars .bar > span.y { background: var(--good); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.bars .bar > span.g { background: var(--unknown); }

/* Colour key next to the dashboard title */
.color-key { white-space: nowrap; }
.color-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* 4.19.3: three-column card grid (framework donuts) */
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.grid3 > .card { margin-bottom: 0; min-width: 0; }
.grid3 + .grid2, .grid3 + .card { margin-top: 16px; }

/* 4.21: automatic category marker */
.auto-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); border: 1px solid #ccc; border-radius: 4px; padding: 0 4px; vertical-align: 1px; }

/* 4.22: roles & permissions */
.perm-table td, .perm-table th { vertical-align: middle; }
.perm-cell { text-align: center; width: 110px; }
.perm-radio { display: inline-flex; justify-content: center; margin: 0; cursor: pointer; padding: 6px 14px; }
.perm-radio input { width: 18px; height: 18px; accent-color: var(--black); }

/* 4.23: report filters (dashboard click-through + "+ Filter") */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); color: var(--black); border-radius: 999px; padding: 3px 4px 3px 12px; font-size: 13px; }
.fchip strong { font-weight: 700; }
.fchip-x { border: 0; background: var(--black); color: var(--yellow); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 20px; padding: 0; }
.fchip-x:hover { background: var(--grey-btn-hover); }
.fform { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--white, #fff); }
.fform select, .fform input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.fform input { min-width: 160px; }

/* 4.24: AI usage — second row of views inside a tool tab, "where" pills under a clicked row */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.subtab { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; background: var(--white); }
.subtab:hover { border-color: var(--black); }
.subtab.on { background: var(--black); color: var(--yellow); border-color: var(--black); }
.ai-where { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: 12px; }
.pill:hover { background: var(--yellow); }
tr.ai-detail > td { background: var(--soft); }
tr.click.open > td { background: #fffbd6; }
.tabs .tab .n.bad { background: var(--black); color: var(--yellow); }   /* 4.25: device page — security issues count */