/*
 * beroCloud on Bootstrap 5 (BC-40, 40b-1): tokens, shell and components of the approved draft
 * (beroNet/beroCloud/entwurf/berocloud-bs5-entwurf.html, 26.10.2026) -- the bar of the draft itself is not here.
 * Colours: tokens of the beroNet website, beroNet red #a93030 from the logo master. Light and dark:
 * the tokens below, mapped once onto the variables of Bootstrap (data-bs-theme on <html>, set before the
 * first paint by the layout, switched by bc5.js).
 * Fonts: Archivo (variable, 400-700) and IBM Plex Mono 400/500, hosted with the application (fonts/, OFL).
 */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/archivo-latin-wght.woff2) format('woff2-variations'), url(fonts/archivo-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/archivo-latin-ext-wght.woff2) format('woff2-variations'), url(fonts/archivo-latin-ext-wght.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --brand: hsl(0 56% 42.5%);
  --brand-rgb: 169, 48, 48;
  --brand-hover: hsl(0 56% 36%);
  --brand-ink: hsl(0 52% 30%);
  --brand-soft: hsl(0 48% 96%);
  --on-brand: #ffffff;

  --paper: hsl(0 5% 98%);
  --surface: #ffffff;
  --sunk: hsl(0 5% 95%);
  --ink: hsl(0 6% 12%);
  --muted: hsl(0 4% 39%);
  --rule: hsl(0 5% 87%);
  --rule-soft: hsl(0 5% 93%);
  --logo-grey: #999999;

  --nav-bg: hsl(0 8% 11%);
  --nav-fg: hsl(0 5% 76%);
  --nav-fg-strong: hsl(0 5% 97%);
  --nav-hover: hsl(0 8% 17%);
  --nav-active: hsl(0 35% 22%);
  --nav-rule: hsl(0 6% 20%);
  --nav-label: hsl(0 4% 55%);

  --good: #0f8a5a;      --good-ink: hsl(156 80% 25%);   --good-soft: hsl(156 55% 93%);
  --warn: #b06a00;      --warn-ink: hsl(33 100% 29%);   --warn-soft: hsl(38 90% 92%);
  --critical: #c9540c;  --critical-ink: hsl(18 85% 35%); --critical-soft: hsl(22 85% 94%);
  --info: hsl(200 60% 38%); --info-ink: hsl(200 70% 29%); --info-soft: hsl(200 60% 94%);
  --neutral-ink: hsl(0 4% 36%); --neutral-soft: hsl(0 5% 92%);

  --shadow: 0 1px 2px hsl(0 10% 10% / .06), 0 1px 1px hsl(0 10% 10% / .04);
  --radius: 10px;

  --font-ui: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --step--1: .8125rem;
  --step-0: .9375rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --brand: hsl(0 68% 60%); --brand-rgb: 222, 84, 84; --brand-hover: hsl(0 72% 66%);
    --brand-ink: hsl(0 62% 76%); --brand-soft: hsl(0 30% 15%); --on-brand: #14100f;
    --paper: hsl(0 10% 7%); --surface: hsl(0 9% 10%); --sunk: hsl(0 9% 13%);
    --ink: hsl(0 6% 92%); --muted: hsl(0 5% 66%); --rule: hsl(0 8% 23%); --rule-soft: hsl(0 8% 16%);
    --logo-grey: #a3a3a3;
    --nav-bg: hsl(0 10% 5%); --nav-fg: hsl(0 5% 72%); --nav-fg-strong: hsl(0 5% 96%);
    --nav-hover: hsl(0 9% 12%); --nav-active: hsl(0 30% 17%); --nav-rule: hsl(0 8% 15%); --nav-label: hsl(0 4% 50%);
    --good: #28a177; --good-ink: hsl(156 55% 62%); --good-soft: hsl(156 40% 13%);
    --warn: #d29338; --warn-ink: hsl(36 72% 64%); --warn-soft: hsl(36 50% 14%);
    --critical: #db6b33; --critical-ink: hsl(20 78% 67%); --critical-soft: hsl(20 50% 14%);
    --info: hsl(200 60% 60%); --info-ink: hsl(200 65% 70%); --info-soft: hsl(200 40% 14%);
    --neutral-ink: hsl(0 5% 72%); --neutral-soft: hsl(0 6% 18%);
    --shadow: 0 1px 2px hsl(0 0% 0% / .4);
    color-scheme: dark;
  }
}
:root[data-bs-theme="dark"] {
  --brand: hsl(0 68% 60%); --brand-rgb: 222, 84, 84; --brand-hover: hsl(0 72% 66%);
  --brand-ink: hsl(0 62% 76%); --brand-soft: hsl(0 30% 15%); --on-brand: #14100f;
  --paper: hsl(0 10% 7%); --surface: hsl(0 9% 10%); --sunk: hsl(0 9% 13%);
  --ink: hsl(0 6% 92%); --muted: hsl(0 5% 66%); --rule: hsl(0 8% 23%); --rule-soft: hsl(0 8% 16%);
  --logo-grey: #a3a3a3;
  --nav-bg: hsl(0 10% 5%); --nav-fg: hsl(0 5% 72%); --nav-fg-strong: hsl(0 5% 96%);
  --nav-hover: hsl(0 9% 12%); --nav-active: hsl(0 30% 17%); --nav-rule: hsl(0 8% 15%); --nav-label: hsl(0 4% 50%);
  --good: #28a177; --good-ink: hsl(156 55% 62%); --good-soft: hsl(156 40% 13%);
  --warn: #d29338; --warn-ink: hsl(36 72% 64%); --warn-soft: hsl(36 50% 14%);
  --critical: #db6b33; --critical-ink: hsl(20 78% 67%); --critical-soft: hsl(20 50% 14%);
  --info: hsl(200 60% 60%); --info-ink: hsl(200 65% 70%); --info-soft: hsl(200 40% 14%);
  --neutral-ink: hsl(0 5% 72%); --neutral-soft: hsl(0 6% 18%);
  --shadow: 0 1px 2px hsl(0 0% 0% / .4);
  color-scheme: dark;
}

/* ---- Bootstrap mapped onto the tokens (one place, both themes) ---- */
:root, :root[data-bs-theme] {
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--step-0);
  --bs-body-line-height: 1.5;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--muted);
  --bs-secondary-bg: var(--sunk);
  --bs-tertiary-bg: var(--sunk);
  --bs-border-color: var(--rule);
  --bs-border-color-translucent: var(--rule);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-hover);
  --bs-link-hover-color-rgb: var(--brand-rgb);
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: var(--radius);
  --bs-focus-ring-color: rgba(var(--brand-rgb), .3);
  --bs-code-color: var(--ink);
}
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 1040; background: var(--surface); }
h1, h2, h3, h4, h5 { font-family: var(--font-ui); text-wrap: balance; letter-spacing: -0.015em; }
.mono, code, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.bi { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; }
a { text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: .875rem; --bs-btn-padding-x: .85rem; display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-x: .6rem; }
.btn-primary {
  --bs-btn-color: var(--on-brand); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--on-brand); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: var(--on-brand); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-quiet {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--rule);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--sunk); --bs-btn-hover-border-color: var(--rule);
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--sunk); --bs-btn-active-border-color: var(--muted);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-danger-quiet {
  --bs-btn-color: var(--critical-ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--rule);
  --bs-btn-hover-color: var(--critical-ink); --bs-btn-hover-bg: var(--critical-soft); --bs-btn-hover-border-color: var(--critical);
}
.btn-ghost { --bs-btn-color: var(--muted); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--sunk); --bs-btn-active-bg: var(--sunk); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.form-control, .form-select { background-color: var(--surface); border-color: var(--rule); color: var(--ink); font-size: .875rem; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18); background-color: var(--surface); color: var(--ink); }
.form-control::placeholder { color: var(--muted); }
.form-check-input { background-color: var(--surface); border-color: var(--muted); }
.form-check-input:checked, .form-check-input:indeterminate { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18); }
.form-label { font-weight: 600; font-size: .8125rem; }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--ink); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--sunk); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-active-bg: var(--brand-soft); --bs-dropdown-link-active-color: var(--brand-ink); --bs-dropdown-border-color: var(--rule); --bs-dropdown-header-color: var(--muted); --bs-dropdown-font-size: .875rem; box-shadow: 0 8px 24px hsl(0 10% 5% / .14); }
.dropdown-item { display: flex; align-items: center; gap: .55rem; }
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--rule); --bs-modal-header-border-color: var(--rule-soft); --bs-modal-footer-border-color: var(--rule-soft); }
.pagination { --bs-pagination-color: var(--ink); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--rule); --bs-pagination-hover-color: var(--ink); --bs-pagination-hover-bg: var(--sunk); --bs-pagination-hover-border-color: var(--rule); --bs-pagination-focus-color: var(--ink); --bs-pagination-focus-bg: var(--sunk); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18); --bs-pagination-active-color: var(--on-brand); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-disabled-color: var(--muted); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-border-color: var(--rule); --bs-pagination-font-size: .875rem; margin: 0; }
.nav-tabs { --bs-nav-tabs-border-color: var(--rule); --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--ink); --bs-nav-link-font-weight: 600; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; white-space: nowrap; font-size: .875rem; padding: .6rem .9rem; display: flex; gap: .45rem; align-items: center; }
.nav-tabs .nav-link.active { border-bottom-color: var(--brand); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--rule-soft); --bs-table-hover-bg: var(--sunk); --bs-table-hover-color: var(--ink); --bs-table-striped-bg: var(--sunk); font-size: .875rem; margin: 0; }
.table > :not(caption) > * > * { padding: .6rem .75rem; vertical-align: middle; }
.table thead th, .eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.table thead th { border-bottom-color: var(--rule); background: var(--surface); }
.progress { --bs-progress-bg: var(--sunk); --bs-progress-bar-bg: var(--brand); --bs-progress-height: .5rem; }
.alert-note { background: var(--info-soft); color: var(--ink); border: 1px solid transparent; border-radius: var(--radius); }
.offcanvas-backdrop { --bs-backdrop-bg: hsl(0 10% 4%); }

/* ---- Shell ---- */
.app { display: flex; min-height: 100dvh; }
.sidebar-col { flex: 0 0 0; }
.sidebar { --bs-offcanvas-width: 272px; --bs-offcanvas-bg: var(--nav-bg); --bs-offcanvas-color: var(--nav-fg); color: var(--nav-fg); display: flex; flex-direction: column; padding-left: env(safe-area-inset-left, 0px); }
@media (min-width: 992px) {
  .sidebar-col { flex-basis: 248px; background: var(--nav-bg); position: sticky; top: 0; height: 100dvh; align-self: flex-start; }
  .sidebar { height: 100%; overflow-y: auto; }
}
.sidebar .brand { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.1rem 1rem; }
.sidebar .btn-close { filter: invert(1) grayscale(1); opacity: .7; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.logo svg.bcmark { width: 26px; height: 25px; }
.logo .word { font-family: var(--font-ui); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1; }
.logo .word .a { color: var(--logo-grey); }
.logo .word .b { color: var(--brand); }
.sidebar .logo .word .b { color: hsl(0 68% 62%); }
.sidebar { --mark-r: hsl(0 68% 62%); }
.org { margin: 0 .8rem .8rem; padding: .6rem .75rem; border: 1px solid var(--nav-rule); border-radius: 8px; font-size: .8125rem; line-height: 1.3; }
.org b { color: var(--nav-fg-strong); display: block; font-weight: 600; }
.nav-side { list-style: none; margin: 0; padding: 0 .6rem 1rem; display: flex; flex-direction: column; gap: 1px; }
.nav-side .label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-label); padding: .95rem .6rem .35rem; font-weight: 600; }
.nav-side a { display: flex; align-items: center; gap: .7rem; padding: .48rem .6rem; border-radius: 7px; color: var(--nav-fg); text-decoration: none; font-size: .875rem; font-weight: 500; }
.nav-side a .bi { width: 1.05rem; height: 1.05rem; opacity: .85; }
.nav-side a:hover { background: var(--nav-hover); color: var(--nav-fg-strong); }
.nav-side a[aria-current="page"] { background: var(--nav-active); color: var(--nav-fg-strong); }
.nav-side a[aria-current="page"] .bi { color: hsl(0 68% 66%); opacity: 1; }
.nav-side .sub a { padding-left: 2.35rem; font-size: .8125rem; }
.nav-side .count { margin-left: auto; font-size: .72rem; font-family: var(--font-mono); color: var(--nav-label); }
.nav-side .ext { margin-left: auto; width: .75rem; height: .75rem; opacity: .5; }
.sidebar .foot { margin-top: auto; padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--nav-rule); font-size: .75rem; color: var(--nav-label); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1020; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: .6rem; padding-block: .55rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.topbar .search { flex: 1 1 auto; max-width: 30rem; position: relative; min-width: 0; }
.topbar .search .bi { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.topbar .search input { padding-left: 2.1rem; background: var(--sunk); border-color: transparent; }
.topbar .search kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .7rem; color: var(--muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0 .3rem; }
.topbar .spacer { flex: 1 1 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: inline-grid; place-items: center; font-weight: 700; font-size: .75rem; }
.topbar .logo-mobile { display: none; }
@media (max-width: 991.98px) { .topbar .logo-mobile { display: inline-flex; } .topbar .logo-mobile .word { font-size: 1.1rem; } }
@media (max-width: 575.98px) { .topbar .search kbd, .topbar .user-name { display: none; } .topbar .logo-mobile .word { display: none; } }

.content { flex: 1 1 auto; padding-block: 1.5rem 2.5rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); width: 100%; max-width: 1440px; }
@media (min-width: 992px) { .content { padding-left: max(2rem, env(safe-area-inset-left, 0px)); padding-right: max(2rem, env(safe-area-inset-right, 0px)); } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: var(--step-2); font-weight: 700; margin: 0; }
.page-head .sub { color: var(--muted); margin: .2rem 0 0; font-size: .875rem; }
.crumbs { font-size: .8125rem; color: var(--muted); margin-bottom: .35rem; display: flex; gap: .35rem; align-items: center; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.appfoot { border-top: 1px solid var(--rule-soft); color: var(--muted); font-size: .75rem; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding-block: .9rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.appfoot a { color: var(--muted); text-decoration: none; }
.appfoot a:hover { color: var(--ink); }

/* ---- Surfaces ---- */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.panel-h h2 { font-size: .95rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }
.panel-h a { font-size: .8125rem; text-decoration: none; font-weight: 600; white-space: nowrap; }
.panel-b { padding: 1rem; }
.table-wrap { overflow-x: auto; position: relative; }

/* ---- KPI tiles ---- */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); margin-bottom: 1.25rem; }
.tile { padding: 1rem 1.1rem 1.05rem; display: flex; flex-direction: column; gap: .6rem; }
.tile .top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tile .top .bi { color: var(--muted); width: 1.1rem; height: 1.1rem; }
.tile .big { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .big small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tile .note { font-size: .8125rem; color: var(--muted); margin: 0; }
.tile .note a { font-weight: 600; text-decoration: none; }
.meter { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--sunk); gap: 2px; }
.meter span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .78rem; color: var(--muted); list-style: none; margin: 0; padding: 0; }
.legend li { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }
.legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fwrows { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.fwrows li { display: grid; grid-template-columns: 4.9rem 1fr 2rem; gap: .6rem; align-items: center; }
.fwrows .bar { height: .45rem; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.fwrows .bar span { display: block; height: 100%; border-radius: 999px; }
.fwrows .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Chips ---- */
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .12em .55em; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.55; white-space: nowrap; border: 1px solid transparent; }
.chip .bi { width: .85em; height: .85em; }
.chip .dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.chip-good { color: var(--good-ink); background: var(--good-soft); }
.chip-warn { color: var(--warn-ink); background: var(--warn-soft); }
.chip-critical { color: var(--critical-ink); background: var(--critical-soft); }
.chip-info { color: var(--info-ink); background: var(--info-soft); }
.chip-neutral { color: var(--neutral-ink); background: var(--neutral-soft); }
.chip-outline { color: var(--muted); border-color: var(--rule); background: transparent; }
.chip-brand { color: var(--brand-ink); background: var(--brand-soft); }
.sipdots { display: inline-flex; gap: 3px; vertical-align: middle; }
.sipdots i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.sipdots .ok { background: var(--good); }
.sipdots .bad { background: var(--critical); }
.sipdots .none { background: var(--rule); }

/* ---- Device list ---- */
form.filters { display: grid; gap: .6rem; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); padding: .85rem 1rem; border-bottom: 1px solid var(--rule-soft); }
@media (max-width: 1199.98px) { form.filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } form.filters .q { grid-column: 1 / -1; } }
.quick { display: flex; gap: .4rem; flex-wrap: wrap; padding: .7rem 1rem 0; }
.quick button { border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 999px; font-size: .8125rem; padding: .2rem .7rem; font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; }
.quick button b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.quick button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.quick button[aria-pressed="true"] b { color: inherit; }
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem 1rem; background: var(--brand-soft); border-bottom: 1px solid var(--rule-soft); font-size: .875rem; }
.bulkbar strong { color: var(--brand-ink); }
.bulkpanel { padding: .9rem 1rem; border-bottom: 1px solid var(--rule-soft); background: var(--sunk); display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.bulkpanel > div { min-width: 0; }
.devtable td.serial a { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.devtable td.serial a:hover { text-decoration: underline; }
.devtable tr.is-selected td { background: var(--brand-soft); }
.devtable .fw { font-family: var(--font-mono); font-size: .8125rem; white-space: nowrap; }
.devtable .ip { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); }
.devtable th.sortable { cursor: pointer; }
.devtable th .bi { opacity: .6; }
.rowact { display: flex; gap: .15rem; justify-content: flex-end; }
.listfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-top: 1px solid var(--rule-soft); font-size: .8125rem; color: var(--muted); }
.devcards { list-style: none; margin: 0; padding: 0; }
.devcards li { border-bottom: 1px solid var(--rule-soft); padding: .85rem 1rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; }
.devcards .nm { font-weight: 600; text-decoration: none; color: var(--ink); }
.devcards .meta { grid-column: 2; font-size: .8125rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.devcards .acts { grid-column: 2; display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* ---- Device detail ---- */
.dev-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.dev-head h1 { font-size: var(--step-2); font-weight: 700; margin: 0 0 .5rem; }
.dev-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; align-items: center; font-size: .875rem; color: var(--muted); }
.dev-meta .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-right: .35rem; }
.dev-meta .v { color: var(--ink); }
.copy { border: 0; background: none; color: var(--muted); padding: 0 .2rem; }
.copy:hover { color: var(--brand); }
.dev-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-bottom: 1.25rem; }
.fact { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.fact .val { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fact p { margin: 0; font-size: .8125rem; color: var(--muted); }
.kv { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); margin: 0; font-size: .875rem; }
.kv dt, .kv dd { padding: .5rem 1rem; border-bottom: 1px solid var(--rule-soft); margin: 0; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 575.98px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; font-size: .75rem; } .kv dd { padding-top: .1rem; } }
.notset { color: var(--muted); font-style: italic; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1199.98px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tabpane-wrap { padding-top: 1.1rem; }

/* Request GUI */
.rgui { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 767.98px) { .rgui { grid-template-columns: minmax(0, 1fr); } }
.rgui h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.rgui p { margin: 0; color: var(--muted); font-size: .875rem; max-width: 62ch; }
.rstate { margin-top: 1rem; border-radius: 8px; padding: .9rem 1rem; display: flex; gap: .85rem; align-items: flex-start; }
.rstate .bi { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.rstate.wait { background: var(--info-soft); color: var(--ink); }
.rstate.wait .bi, .rstate.wait .spinner-border { color: var(--info-ink); }
.rstate.ready { background: var(--good-soft); }
.rstate.ready .bi { color: var(--good-ink); }
.rstate b { display: block; margin-bottom: .15rem; }
.rstate .small { color: var(--muted); }
.rstate .progress { margin-top: .6rem; max-width: 22rem; --bs-progress-bar-bg: var(--info); }
.rstate .links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .5rem; font-size: .875rem; }
.rstate .links a { font-weight: 600; }

/* ---- Activity ---- */
.feed { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.feed li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .6rem; padding: .55rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--muted); font-variant-numeric: tabular-nums; }
.feed .who { font-weight: 600; }
.feed code { font-size: .78rem; }
.subrow { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid var(--rule-soft); font-size: .875rem; align-items: center; }
.subrow:last-child { border-bottom: 0; }
.subrow .l { color: var(--muted); }
.subrow .r { text-align: right; font-weight: 600; }

/* ---- Login ---- */
.login { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background-color: var(--paper); background-image: radial-gradient(circle at 1px 1px, var(--rule) 1.2px, transparent 1.6px); background-size: 22px 22px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 1rem; }
.login-top { display: flex; justify-content: flex-end; }
.login-card { width: 100%; max-width: 25rem; margin: 1.5rem auto; padding: 2rem 1.75rem 1.6rem; align-self: center; }
@media (max-width: 400px) { .login-card { padding: 1.5rem 1.15rem; } }
.login-card .logo { margin-bottom: 1.5rem; }
.login-card h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .25rem; }
.login-card .lead-s { color: var(--muted); font-size: .875rem; margin-bottom: 1.4rem; }
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: 1rem 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.login-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; font-size: .75rem; color: var(--muted); }
.login-foot a { color: var(--muted); text-decoration: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---- In the application (not in the draft) ---- */
/* navigation state, forms inside menus (logout is a POST) */
.sidebar .nav-side a.active, .nav-side a[aria-current="page"] { background: var(--nav-active); color: var(--nav-fg-strong); }
.sidebar .nav-side form { margin: 0; }
.sidebar .nav-side button.linklike { width: 100%; background: none; border: 0; text-align: left; }
.topbar .dropdown-menu form { margin: 0; }
.topbar .dropdown-menu button.dropdown-item { width: 100%; }
.trial { margin-bottom: 1rem; }
.flashes .alert { border-radius: var(--radius); }
.alert-error { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--bs-danger-bg-subtle); --bs-alert-border-color: var(--bs-danger-border-subtle); }
/* widgets of the framework with their Bootstrap 5 defaults (app\components\Ui::containerDefaults()) */
.grid-view .summary { font-size: .8125rem; color: var(--muted); }
.grid-view .listfoot:has(.summary:only-child) { justify-content: flex-start; }
.grid-view th a { color: inherit; text-decoration: none; }
.grid-view th a.asc::after { content: " \2191"; } .grid-view th a.desc::after { content: " \2193"; }
.detail-view th { width: 13rem; color: var(--muted); font-weight: 500; }
.invalid-feedback { font-size: .8125rem; }
.help-block, .form-text { font-size: .8125rem; color: var(--muted); }
/* the sample page (ui/sample) */
.swatches { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.swatch { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: .75rem; }
.swatch i { display: block; height: 2.2rem; }
.swatch span { display: block; padding: .3rem .5rem; font-family: var(--font-mono); }
.iconrow { display: flex; flex-wrap: wrap; gap: .6rem 1rem; color: var(--muted); }
.iconrow .bi { width: 1.25rem; height: 1.25rem; color: var(--ink); }
/* the device list (themes/bs5/device/index.php, 40b-2) */
.quick a { border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 999px; font-size: .8125rem; padding: .2rem .7rem; font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; text-decoration: none; }
.quick a b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.quick a .bi { width: .9em; height: .9em; }
.quick a[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.quick a[aria-current="true"] b { color: inherit; }
#device-list .filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)) auto; align-items: start; }
#device-list .filters .go { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 1399.98px) { #device-list .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } #device-list .filters .q { grid-column: 1 / -1; } #device-list .filters .go { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { #device-list .filters { grid-template-columns: minmax(0, 1fr); } }
.legacyfilters { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.legacyfilters a { text-decoration: none; }
fieldset.bulkpanel { margin: 0; min-width: 0; }
.devtable th.sel, .devtable td.sel { width: 2.5rem; }
.devtable td.nm .devname { color: var(--ink); text-decoration: none; font-weight: 500; }
.devtable td.nm .devname:hover { text-decoration: underline; }
.devtable td.serial { white-space: nowrap; }
.devtable td.fwc .vulnrow { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.devtable td.act { width: 1%; white-space: nowrap; }
.chip.vuln { cursor: help; }
/* below 768 px: every row a card, no column wider than the screen */
@media (max-width: 767.98px) {
  :is(#devices, #org-devices) .devtable thead { display: none; }
  :is(#devices, #org-devices) .devtable, :is(#devices, #org-devices) .devtable tbody, :is(#devices, #org-devices) .devtable tr, :is(#devices, #org-devices) .devtable td { display: block; width: auto; }
  :is(#devices, #org-devices) .devtable tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule-soft); }
  :is(#devices, #org-devices) .devtable td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  :is(#devices, #org-devices) .devtable td.sel { grid-row: 1 / span 7; width: auto; }
  :is(#devices, #org-devices) .devtable td.nm { order: -1; grid-column: 2; }
  :is(#devices, #org-devices) .devtable td.serial, :is(#devices, #org-devices) .devtable td.fwc, :is(#devices, #org-devices) .devtable td.ip, :is(#devices, #org-devices) .devtable td.st, :is(#devices, #org-devices) .devtable td.sp, :is(#devices, #org-devices) .devtable td.ty, :is(#devices, #org-devices) .devtable td.act { grid-column: 2; font-size: .8125rem; }
  :is(#devices, #org-devices) .devtable td.fwc { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
  :is(#devices, #org-devices) .devtable td.fwc .vulnrow { margin-top: 0; }
  :is(#devices, #org-devices) .devtable td.act { width: auto; }
  :is(#devices, #org-devices) .devtable td.act .rowact { justify-content: flex-start; }
  :is(#devices, #org-devices) .devtable td.empty { grid-column: 1 / -1; }
  :is(#devices, #org-devices).table-wrap { overflow-x: visible; }
}
.devtable .sel input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; vertical-align: middle; accent-color: var(--brand); }
.devtable td.fwc .fw { white-space: normal; overflow-wrap: anywhere; }
.devtable td.fwc { max-width: 10rem; }
.devtable td.ip { max-width: 9rem; overflow-wrap: anywhere; }
.devtable td.ty { max-width: 7rem; }
.devtable td.nm { min-width: 8rem; }
.devtable .rowact .btn { padding: .2rem .35rem; }
@media (max-width: 767.98px) { :is(#devices, #org-devices) .devtable td { max-width: none; min-width: 0; } }
/* the update mode (themes/bs5/fw-update, BC-58 58c) */
.fwtable td { vertical-align: top; }
.fwtable td.sel, .fwtable th.sel { width: 2.5rem; }
.fwtable td.path .chip { margin-left: .35rem; }
.fwtable td.path .mono, .fwtable td.fw .mono { overflow-wrap: anywhere; }
.fwtable tr.refused td { background: var(--critical-soft, transparent); }
.fwtable .sel input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand); }
@media (max-width: 767.98px) {
  .fwtable thead { display: none; }
  .fwtable, .fwtable tbody, .fwtable tr, .fwtable td { display: block; width: auto; }
  .fwtable tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule-soft); }
  .fwtable td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; grid-column: 2; }
  .fwtable td.sel { grid-column: 1; grid-row: 1 / span 4; }
  .fwtable td.path .chip { margin-left: 0; }
}
/* the device page, statistic and events (themes/bs5/device/view*.php, statistic.php, themes/bs5/event-change, 40b-3) */
#device-view .dev-head h1 { overflow-wrap: anywhere; }
#device-view .dev-meta .chip { font-size: .75rem; }
.copy.done { color: var(--good-ink); }
.rstate.fail { background: var(--critical-soft); }
.rstate.fail .bi { color: var(--critical-ink); }
.rstate .links > * { display: inline-flex; align-items: center; gap: .35rem; }
#tunnelDiv:empty { display: none; }
#tunnelStateFailed { margin-top: 1rem; }
.facts .fact .val .chip { font-size: .8125rem; }
.facts .fact p { overflow-wrap: anywhere; }
.facts .fact .val .small { color: var(--muted); }
#t-ports .grid-view .table td:last-child { overflow-wrap: anywhere; }
.applist { padding: 0; }
.applist .listfoot:empty { display: none; }
.chart { width: 100%; position: relative; }
.chart .flot-text, .chart .flot-tick-label, .chart .legendLabel { color: var(--muted) !important; font-family: var(--font-ui); font-size: .72rem; }
.chart .legend table { color: var(--ink); }
.chart .tick-good { color: var(--good-ink); font-weight: 600; }
.chart .tick-bad { color: var(--critical-ink); font-weight: 600; }
.chartgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }

/* ---- Dashboard (40b-4) ---- */
.locmap { height: 26rem; border-radius: var(--radius); background: var(--sunk); }
@media (max-width: 575.98px) { .locmap { height: 18rem; } }
.locmap-info { color: #1f1f1f; font-size: .8125rem; max-width: 16rem; }
.locmap-info b { display: block; margin-bottom: .15rem; }
#dashboard .nm { font-weight: 600; text-decoration: none; }
#dashboard .tile .note .d-block { color: var(--muted); }

/* ---- Pages of a visitor (40b-4): sign in, recovery, registration ---- */
.login-card.wide { max-width: 42rem; }
.login-flashes { width: 100%; max-width: 25rem; margin: 1rem auto 0; }
.regsec { margin: 0 0 .5rem; }
.regsec legend { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }

/* ---- Device pages (40b-5): forms, files, tasks, search ---- */
.formpanel { max-width: 46rem; }
.grid-view td.act { white-space: nowrap; text-align: right; width: 1%; }
.grid-view td.act .btn { padding: .2rem .35rem; }
.grid-view td.act .btn + .btn { margin-left: .1rem; }
.wqhead, .wqrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 1fr) minmax(0, 1.2fr); gap: .5rem 1rem; align-items: center; padding: .55rem 1rem; }
.wqhead { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-soft); }
.wqrow { border-bottom: 1px solid var(--rule-soft); }
.wqrow:last-child { border-bottom: 0; }
.wqrow.queued { background: var(--brand-soft); }
.wqrow .wq-task { margin: 0; }
.wqrow .wq-param:empty { display: none; }
@media (max-width: 767.98px) {
  .wqhead { display: none; }
  .wqrow { grid-template-columns: minmax(0, 1fr); }
}
.cfgfile textarea { font-size: .8125rem; tab-size: 4; }
#config-files .nav-link { font-size: .8125rem; }
/* alarms of a device (40b-5b): the check boxes and lists of the models, unchanged markup */
#alert-monitoring td.alerts { font-size: .8125rem; min-width: 12rem; }
#alert-monitoring td.alerts label { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
#alert-monitoring td.alerts select { display: block; width: 100%; max-width: 18rem; margin-top: .3rem; padding: .2rem .5rem; font-size: .8125rem; border: 1px solid var(--rule); border-radius: var(--radius-sm, .375rem); background: var(--surface); color: var(--ink); }
#device-redirect-import dl dt { margin-top: .4rem; }
.grid-view tr.filters td { padding: .35rem .5rem; }
.grid-view tr.filters .form-control, .grid-view tr.filters .form-select { font-size: .8125rem; padding-top: .2rem; padding-bottom: .2rem; }
/* organizations and locations (40b-6a): the devices of an organization as in the device list (above), the public
   profile pages of a visitor as a wide card, the devices of a location as a list */
.login-card.public { max-width: 64rem; }
.login-card.public .page-head { margin-top: 1rem; }
.suborgs { columns: 2 14rem; column-gap: 1.5rem; }
.suborgs li { break-inside: avoid; padding: .1rem 0; }
.locdevices li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem 1rem; border-bottom: 1px solid var(--rule-soft); overflow-wrap: anywhere; }
.locdevices li:last-child { border-bottom: 0; }
.locdevices a { font-family: var(--font-mono); font-size: .8125rem; text-decoration: none; }
#org-key-value { overflow-wrap: anywhere; }
.terms-text .row { --bs-gutter-x: 0; }
.terms-text .col-lg-6 { width: auto; max-width: 52rem; flex: 1 1 auto; }
.terms-text p { line-height: 1.55; }