/* Application styles (same design as the Connectivia suite)
   Design system: navy sidebar in both themes + indigo accent; dark theme in shades of black; auto follows the OS.
   Tenant colours are injected as --brand / --accent on <html>. */

:root {
  --brand: #5b5bf6;
  --accent: #7c7cff;
  --bg: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --surface-3: #f0f2f7;
  --border: #e5e7ef;
  --border-strong: #d3d7e3;
  --text: #0f1330;
  --text-2: #3b4263;
  --muted: #6b7291;
  --ok: #138a4b; --ok-bg: #e3f6ec;
  --warn: #a35b06; --warn-bg: #fdf1dc;
  --danger: #c22b2b; --danger-bg: #fde8e8;
  --info: #3c48c9; --info-bg: #e8eafe;
  --muted-bg: #eef0f5;
  --shadow-xs: 0 1px 2px rgba(16, 20, 48, .05);
  --shadow: 0 1px 2px rgba(16, 20, 48, .04), 0 2px 8px rgba(16, 20, 48, .04);
  --shadow-lg: 0 18px 40px rgba(16, 20, 48, .16);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  --radius: 0;
  --radius-sm: 0;
  --sidebar: 256px;
  --sidebar-mini: 72px;
  --side-bg: #11142a;
  --side-bg-2: #171b36;
  --side-border: rgba(255, 255, 255, .07);
  --side-text: #a9afcb;
  --side-text-strong: #ffffff;
  --side-muted: #6c7398;
  --auth-hero-bg: #161a2e;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #09090b;
  --surface: #121214;
  --surface-2: #161618;
  --surface-3: #1e1e21;
  --border: #26262a;
  --border-strong: #36363c;
  --text: #ededef;
  --text-2: #c6c6cc;
  --muted: #8e8e96;
  --ok: #4ade80; --ok-bg: rgba(34, 197, 94, .14);
  --warn: #fbbf24; --warn-bg: rgba(245, 158, 11, .14);
  --danger: #f87171; --danger-bg: rgba(239, 68, 68, .14);
  --info: #9ec5ff; --info-bg: rgba(8, 125, 245, .16);
  --muted-bg: #1e1e21;
  --shadow-xs: none;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .65);
  --auth-hero-bg: #0b0b0d;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #09090b;
    --surface: #121214;
    --surface-2: #161618;
    --surface-3: #1e1e21;
    --border: #26262a;
    --border-strong: #36363c;
    --text: #ededef;
    --text-2: #c6c6cc;
    --muted: #8e8e96;
    --ok: #4ade80; --ok-bg: rgba(34, 197, 94, .14);
    --warn: #fbbf24; --warn-bg: rgba(245, 158, 11, .14);
    --danger: #f87171; --danger-bg: rgba(239, 68, 68, .14);
    --info: #9ec5ff; --info-bg: rgba(8, 125, 245, .16);
    --muted-bg: #1e1e21;
    --shadow-xs: none;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .65);
    --auth-hero-bg: #0b0b0d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.55 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text); }
h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.025em; margin: 0 0 .15rem; line-height: 1.2; }
h2 { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .9rem; }
h3 { font-size: .9rem; font-weight: 650; margin: 1.2rem 0 .5rem; }
h1 small, h2 small { font-weight: 400; color: var(--muted); }
p { margin: .4rem 0 .8rem; }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--surface-3); padding: .08em .4em; border-radius: 0; }
pre { background: var(--surface-3); padding: .85rem 1rem; border-radius: 0; overflow-x: auto; font: 12.5px/1.55 var(--mono); border: 1px solid var(--border); }
pre.json { max-width: 520px; max-height: 300px; margin: .4rem 0 0; }
hr { border: 0; border-top: 1px solid var(--border); }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .83rem; margin: .25rem 0 .7rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; }

.upper { text-transform: uppercase; }
.grow { flex: 1; }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.dim { opacity: .55; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--surface); padding: .5rem 1rem; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* ---------- shell & sidebar ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s ease; }
.sidebar { overscroll-behavior: contain; background: var(--side-bg); background-image: linear-gradient(180deg, var(--side-bg-2), var(--side-bg) 320px); color: var(--side-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 40; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .35rem; padding: 19px 18px 16px; min-height: 70px; }
/* Logo exactly as wide as the payoff below it: the grid takes the text width, the logo stretches to it.
   All-white, tightly cropped vector; whole-pixel paddings keep its edges sharp. */
.brand-lockup { display: inline-grid; row-gap: 7px; }
.brand-lockup .brand-full { width: 0; min-width: 100%; height: auto; }
.brand img { display: block; flex: none; height: auto; }
.brand .brand-mark { display: none; width: 34px; height: 34px; }
/* Without a lockup file (config/brand.php) the logo is the mark followed by the product name */
.brand-lockup .brand-text { display: inline-flex; align-items: center; gap: .55rem; width: auto; min-width: 0; color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.brand-lockup .brand-text img { width: 22px; height: 22px; }
.brand small { display: block; color: var(--side-muted); font-size: .66rem; line-height: 1.25; white-space: nowrap; }
.tenant-switch { margin: 0 .8rem .6rem; padding: .55rem .65rem .6rem; border: 1px solid var(--side-border); border-radius: 0; background: rgba(255, 255, 255, .03); }
.tenant-switch label { font-size: .64rem; color: var(--side-muted); text-transform: uppercase; letter-spacing: .12em; margin: 0; }
.tenant-switch select { width: 100%; margin-top: .25rem; padding: .35rem .5rem; background: rgba(255, 255, 255, .06); color: var(--side-text-strong); border: 1px solid var(--side-border); border-radius: 0; font-size: .86rem; font-weight: 600; }
.tenant-switch select option { color: #0f1330; }
.tenant-switch select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 124, 255, .25); }
.nav { padding: .3rem .7rem 1rem; flex: 1; }
.nav-section { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--side-muted); padding: 1.05rem .65rem .4rem; white-space: nowrap; }
.nav a { position: relative; display: flex; align-items: center; gap: .75rem; padding: .48rem .65rem; margin: 1px 0; color: var(--side-text); border-radius: 0; font-weight: 500; font-size: .875rem; white-space: nowrap; transition: background .12s, color .12s; }
.nav a .ic { opacity: .8; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: var(--side-text-strong); text-decoration: none; }
.nav a.active { background: rgba(124, 124, 255, .16); color: var(--side-text-strong); }
.nav a.active .ic { opacity: 1; color: #a9a9ff; }
.nav a.active::before { content: ""; position: absolute; left: -.7rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0; background: var(--accent); }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .8rem .7rem 1.1rem; color: var(--side-muted); font-size: .72rem; border-top: 1px solid var(--side-border); }
.collapse-btn { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--side-border); color: var(--side-text); border-radius: 0; padding: .32rem .5rem; cursor: pointer; font: inherit; font-size: .75rem; }
.collapse-btn:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.collapse-btn .ic { width: 16px; height: 16px; transition: transform .2s; }

/* Collapsed (icons only) */
html.sidebar-collapsed .shell { grid-template-columns: var(--sidebar-mini) minmax(0, 1fr); }
html.sidebar-collapsed .brand { align-items: center; padding: 1.15rem 0 1rem; }
html.sidebar-collapsed .brand .brand-mark { display: block; }
html.sidebar-collapsed .brand .brand-lockup,
html.sidebar-collapsed .brand .brand-full,
html.sidebar-collapsed .brand .brand-payoff,
html.sidebar-collapsed .tenant-switch,
html.sidebar-collapsed .nav a span,
html.sidebar-collapsed .sidebar-version,
html.sidebar-collapsed .collapse-btn span { display: none; }
html.sidebar-collapsed .nav { padding: .3rem .6rem 1rem; }
html.sidebar-collapsed .nav-section { font-size: 0; padding: .6rem 0 .3rem; margin: .4rem .5rem 0; border-top: 1px solid var(--side-border); }
html.sidebar-collapsed .nav-section:first-child { border-top: 0; }
html.sidebar-collapsed .nav a { justify-content: center; padding: .6rem 0; }
html.sidebar-collapsed .nav a.active::before { left: -.6rem; }
html.sidebar-collapsed .sidebar-foot { justify-content: center; padding: .7rem 0; }
html.sidebar-collapsed .collapse-btn .ic { transform: rotate(180deg); }

/* ---------- top bar ---------- */
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .9rem; height: 62px; padding: 0 1.6rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); }

.top-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid transparent; color: var(--text-2); padding: .45rem .55rem; border-radius: 0; cursor: pointer; font: inherit; }
.icon-btn:hover { background: var(--surface-3); }
.theme-label { font-size: .78rem; color: var(--muted); }
/* Theme switcher: one icon per state (auto = half circle, light = sun, dark = moon) */
.theme-ico { display: none; line-height: 0; }
:root[data-theme="auto"] .theme-ico-auto, :root:not([data-theme]) .theme-ico-auto, :root[data-theme="light"] .theme-ico-light, :root[data-theme="dark"] .theme-ico-dark { display: inline-flex; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .3rem .55rem .3rem .3rem; border-radius: 0; border: 1px solid transparent; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--surface-3); border-color: var(--border); }
.user-name { font-weight: 600; font-size: .86rem; }
.avatar { width: 32px; height: 32px; border-radius: 0; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 264px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-lg); padding: .4rem; }
.menu-head { padding: .6rem .65rem .75rem; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.menu-head strong, .menu-head small { display: block; }
.menu-head small { color: var(--muted); margin-bottom: .4rem; }
.menu a, .menu button { display: flex; width: 100%; gap: .6rem; align-items: center; padding: .52rem .65rem; color: var(--text-2); background: none; border: 0; font: inherit; text-align: left; border-radius: 0; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
.content { padding: 1.7rem 1.8rem 2rem; flex: 1; max-width: 1560px; width: 100%; }
.foot { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.8rem; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--border); }
.backdrop { display: none; }
.only-mobile { display: none; }

/* ---------- page structure ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head p { margin: .2rem 0 0; color: var(--muted); }
.page-head h1 .badge { vertical-align: 4px; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; min-width: 0; }
.card.narrow { max-width: 660px; }
.card.highlight { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); box-shadow: 0 0 0 3px var(--warn-bg); }

.card > h2:first-child { margin-top: 0; display: flex; align-items: center; gap: .45rem; }
.card > h2 .ic { color: var(--muted); width: 17px; height: 17px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.grid-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); gap: 1.2rem; align-items: start; }
.grid-2.tight, .grid-3.tight { gap: .75rem; }
.form .grid-2.tight, .form .grid-3.tight { align-items: end; }
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; }
.grid-2 + .card, .grid-3 + .card, .grid-2 + .grid-2, .grid-3 + .grid-2 { margin-top: 1.2rem; }

/* ---------- KPI tiles & charts ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stats.small { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.stat { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 1rem 1.1rem 1.05rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .15rem; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
a.stat:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); transform: none; box-shadow: none; }
.stat-icon { position: absolute; right: .95rem; top: .95rem; width: 34px; height: 34px; border-radius: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 11%, transparent); color: var(--brand); }
.stat-icon .ic { width: 18px; height: 18px; vertical-align: 0; }
.stat-label { color: var(--muted); font-size: .78rem; font-weight: 500; padding-right: 40px; }
.stat-value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: .25rem; }
.stats.small .stat-value { font-size: 1.3rem; }
.stats.small .stat-label { padding-right: 0; }
.stat small { color: var(--muted); }
.stat-ok .stat-icon { background: var(--ok-bg); color: var(--ok); }
.stat-info .stat-icon { background: var(--info-bg); color: var(--info); }
.stat-warn .stat-icon { background: var(--warn-bg); color: var(--warn); }
.stat-muted .stat-icon { background: var(--muted-bg); color: var(--muted); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bars li { display: grid; grid-template-columns: minmax(80px, 36%) 1fr 2.4rem; align-items: center; gap: .7rem; font-size: .84rem; }

.anomalies { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .5rem 1.4rem; }
.anomalies li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.more { display: inline-flex; margin-top: .8rem; font-size: .84rem; font-weight: 500; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.3rem; padding: 0 1.3rem; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: .6rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); }
.table thead th:first-child { border-top-left-radius: 0; }
.table thead th:last-child { border-top-right-radius: 0; }
.table th a { color: inherit; }
.table th a:hover { color: var(--text); text-decoration: none; }
.table td { padding: .62rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table td strong { font-weight: 600; }
.table.compact td, .table.compact th { padding: .45rem .55rem; }
.table-hover tbody tr { transition: background .1s; }
.table-hover tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }

.actions-col { width: 1%; position: sticky; right: 0; z-index: 1; }
.row-actions { white-space: nowrap; text-align: right; position: sticky; right: 0; background: var(--surface); box-shadow: -8px 0 12px -10px rgba(16, 20, 48, .25); }
.table-hover tbody tr:hover .row-actions { background: var(--surface-2); }

.act { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; border-radius: 0; color: var(--muted); border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s; }
.act .ic { width: 16px; height: 16px; vertical-align: 0; }
.act:hover { background: var(--surface-3); color: var(--text); border-color: var(--border); text-decoration: none; }
.act-primary { color: var(--brand); }
.act-primary:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.act-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

.pagination { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination a, .pagination span { min-width: 2rem; text-align: center; padding: .32rem .6rem; border: 1px solid var(--border); border-radius: 0; font-size: .83rem; color: var(--text-2); background: var(--surface); }
.pagination a:hover { border-color: var(--border-strong); text-decoration: none; }
.pagination .current { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 600; }
.pagination .disabled { color: var(--muted); opacity: .5; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem .12rem .5rem; border-radius: 0; font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: currentColor; opacity: .85; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: var(--muted-bg); color: var(--muted); }
.chip { display: inline-block; padding: .08rem .55rem; margin: 0 .25rem .2rem 0; border-radius: 0; background: var(--surface-3); color: var(--text-2); font-size: .76rem; border: 1px solid var(--border); }
a.chip:hover { text-decoration: none; border-color: var(--border-strong); }

/* ---------- forms ---------- */
.form label, label { display: block; font-weight: 500; font-size: .83rem; color: var(--text-2); margin-bottom: .85rem; }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--muted); box-shadow: none; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 16px; height: 16px; margin: 0 .5rem 0 0; vertical-align: -3px; accent-color: var(--brand); box-shadow: none; }
/* radio buttons square like the rest of the interface: an empty square, filled with the brand colour when chosen */
input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 0; background: var(--surface); cursor: pointer; }
input[type="radio"]:checked { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--surface); }
input[type="radio"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; }
input[type="radio"]:disabled { opacity: .45; cursor: default; }
input[type="color"] { height: 42px; padding: .25rem; }
input[type="file"] { padding: .45rem; font-size: .84rem; }
/* date and time fields as tall as the other fields (Chromium pads the inner date parts) */
input::-webkit-datetime-edit { padding: 0; }
input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
label.check { font-weight: 400; display: flex; align-items: flex-start; gap: .1rem; color: var(--text); }
label.check input { margin-top: .22rem; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
label.inline input { margin: 0; width: auto; }
fieldset { border: 1px solid var(--border); border-radius: 0; padding: .7rem 1rem .4rem; margin: 0 0 1rem; }
legend { font-weight: 600; font-size: .83rem; padding: 0 .35rem; color: var(--text); }
.field-error { color: var(--danger); font-size: .8rem; margin: -.55rem 0 .8rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.sticky-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); padding: .8rem 0; border-top: 1px solid var(--border); z-index: 5; }
.inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { margin-bottom: 0; }
.inline-form input, .inline-form select { width: auto; min-width: 140px; }
.inline-form label.grow { min-width: min(100%, 320px); }
.inline-form label.grow input { width: 100%; }

/* ---------- phone with country code ---------- */
.field > label { margin-bottom: 0; }

.cc-btn { display: inline-flex; align-items: center; gap: .45rem; flex: none; height: auto; padding: 0 .6rem; font: inherit; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-xs); cursor: pointer; white-space: nowrap; }
.cc-btn:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border-strong)); }
.cc-btn:focus-visible, .cc-btn[aria-expanded="true"] { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.cc-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-2px); margin-left: .1rem; }
.flag { width: 20px; height: 15px; border-radius: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; vertical-align: -2px; }
.cc-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: min(340px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, .18)); overflow: hidden; }
.cc-pop input { margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: .65rem .8rem; }
.cc-pop input:focus { box-shadow: none; }
.cc-list { list-style: none; margin: 0; padding: .25rem 0; max-height: 280px; overflow-y: auto; }
.cc-list li { display: flex; align-items: center; gap: .6rem; padding: .42rem .8rem; cursor: pointer; font-size: .87rem; color: var(--text); }
.cc-list li .cc-dial { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.cc-list li.active, .cc-list li:hover { background: var(--surface-3); }
.cc-list li[aria-selected="true"] { font-weight: 600; }
.cc-list .cc-group { cursor: default; padding: .5rem .8rem .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: none !important; }
@media (max-width: 520px) { .cc-pop { width: 100%; } }
.cc-empty { padding: .7rem .8rem; color: var(--muted); font-size: .85rem; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.btn-row form { margin: 0; }
.filters { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.filters input, .filters select { width: auto; margin: 0; min-width: 160px; max-width: 100%; }
/* controls on one row of filters: all as tall as the buttons beside them (like .form-inline) */
.filters input:not([type="checkbox"]):not([type="radio"]), .filters select, .filters .btn { height: 2.6rem; box-sizing: border-box; }
.filters label { max-width: 100%; min-width: 0; }
.filters input[type="search"] { min-width: 260px; }
.filters .grow { flex: 1; }

.copy-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.copy-row input { margin: 0; flex: 1 1 14rem; min-width: 0; }
.copy-row .btn { height: auto; min-height: 30px; align-self: stretch; }
.map-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .45rem; }
.map-row input, .map-row select { margin: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 36px; padding: 0 .95rem; font: inherit; font-size: .86rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-xs); cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1; transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; }
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--text) 22%, var(--border-strong)); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--brand); border-color: color-mix(in srgb, var(--brand) 85%, #000); color: #fff; box-shadow: 0 1px 2px rgba(16, 20, 48, .15), inset 0 1px 0 rgba(255, 255, 255, .15); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); border-color: color-mix(in srgb, var(--brand) 75%, #000); }
.btn:disabled, .btn:disabled:hover { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }
.btn-danger { background: var(--danger); border-color: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }
:root[data-theme="dark"] .btn-danger { color: #1a0505; }
.btn-danger-outline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
.btn-danger-outline:hover { background: var(--danger-bg); }
.btn-sm { height: 30px; padding: 0 .7rem; font-size: .79rem; }
.btn-block { width: 100%; }
.btn .ic { width: 16px; height: 16px; vertical-align: 0; }

/* ---------- alerts ---------- */
.alert { position: relative; display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 2.6rem .8rem 1rem; border-radius: 0; margin-bottom: 1.1rem; border: 1px solid transparent; font-size: .88rem; overflow-wrap: anywhere; }
.alert::before { content: ""; flex: none; width: 4px; align-self: stretch; border-radius: 0; background: currentColor; opacity: .7; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert a { color: inherit; text-decoration: underline; }
.alert-close { position: absolute; right: .55rem; top: .45rem; background: none; border: 0; font-size: 1.2rem; color: inherit; cursor: pointer; opacity: .6; }
.alert-close:hover { opacity: 1; }

/* ---------- misc components ---------- */
.dl { display: grid; grid-template-columns: minmax(130px, 32%) 1fr; gap: 0; margin: 0; font-size: .88rem; }
.dl dt, .dl dd { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }
.dl dt { color: var(--muted); font-weight: 500; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.tabs { display: flex; gap: .25rem; margin-bottom: 1.1rem; overflow-x: auto; padding: .25rem; background: var(--surface-3); border-radius: 0; width: fit-content; max-width: 100%; }
.tabs a { padding: .4rem .85rem; color: var(--muted); border-radius: 0; white-space: nowrap; font-weight: 500; font-size: .85rem; }
.tabs a.active { color: var(--text); background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--text); }

.add-menu .menu a .ic { width: 15px; height: 15px; color: var(--brand); }

.qr { background: #fff; padding: 8px; border-radius: 0; border: 1px solid var(--border); max-width: 100%; height: auto; }

.change { font-size: .8rem; }
.change .old { color: var(--danger); text-decoration: line-through; }
.change .new { color: var(--ok); }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0 0 1.2rem; counter-reset: s; }
.steps li { counter-increment: s; padding: .38rem .85rem .38rem .45rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0; font-size: .8rem; color: var(--muted); font-weight: 500; }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: .45rem; border-radius: 0; background: var(--surface-3); font-weight: 700; font-size: .72rem; }
.steps li.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.steps li.done::before { content: "✓"; background: var(--ok-bg); }

.codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.codes li { margin-bottom: .3rem; }
.totp-setup { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.totp-setup > div { flex: 1; min-width: 260px; }
.secret { font-size: 1rem; letter-spacing: .05em; }
.logo-row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.logo-box { min-width: 160px; }
.logo-preview { max-width: 220px; max-height: 90px; background: #fff; padding: 8px; border-radius: 0; border: 1px solid var(--border); }

.perm-list { margin: 0; padding-left: 1.1rem; font-size: .83rem; color: var(--text-2); }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.report-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.05rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.report-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); transform: translateY(-1px); }
.report-card .ic { color: var(--brand); width: 34px; height: 34px; padding: 8px; border-radius: 0; background: color-mix(in srgb, var(--brand) 11%, transparent); margin-bottom: .35rem; }
.report-card strong { font-weight: 650; }
.report-card span { color: var(--muted); font-size: .82rem; }

.prose { max-width: 980px; }
.empty-state { text-align: center; padding: 4.5rem 1rem; }
.error-code { font-family: var(--font-display); font-size: 4.2rem; font-weight: 800; letter-spacing: -.05em; background: linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }

/* ---------- signature ---------- */

.req { color: var(--danger); }

/* ---------- label editor ---------- */

.editor-canvas-wrap { overflow: auto; background: var(--surface-2); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 14px 14px; }
.zoom-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; font-size: .84rem; color: var(--muted); }
.zoom-row input { width: 100%; margin: 0; box-shadow: none; }
.editor-canvas { position: relative; background: #fff; box-shadow: 0 0 0 1px #94a3b8, var(--shadow-lg); margin: 1.2rem auto; color: #000; overflow: hidden; border-radius: 0; background-image: linear-gradient(#eef2f7 1px, transparent 1px), linear-gradient(90deg, #eef2f7 1px, transparent 1px); }
.le-el { position: absolute; cursor: move; outline: 1px dashed color-mix(in srgb, var(--brand) 40%, transparent); overflow: hidden; line-height: 1.15; user-select: none; touch-action: none; }
.le-el.selected { outline: 2px solid var(--brand); z-index: 5; }
.le-el svg, .le-el img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }

.le-handle { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: var(--brand); cursor: nwse-resize; border-radius: 0; }
.editor-props label { margin-bottom: .6rem; }
/* ---------- print template editor (Editor stampe) ---------- */

.pe-page { overflow: visible; font-family: Arial, Helvetica, sans-serif; color: #14181f; line-height: 1.3; }
.pe-bodytop { position: absolute; left: 0; right: 0; border-top: 1px dashed #94a3b8; pointer-events: none; }
.pe-bodytop span { position: absolute; right: 4px; top: 1px; font-size: 10px; color: #94a3b8; }
.pe-h { overflow: visible; line-height: 1.25; }
.pe-h.pe-h-bar { outline-offset: 2px; }
.pe-h .pe-sub { color: #5a626e; white-space: pre-line; margin-top: 2px; }
.pe-docbox { display: grid; grid-template-columns: 25% 75%; height: 100%; padding: 2px 4px; background: #f6f8fb; border: 1px solid #d2d6dc; box-sizing: border-box; align-content: space-around; color: #5a626e; }
.pe-docbox b { color: #14181f; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-ph { color: #94a3b8; font-size: 11px; font-style: italic; }
.pe-body { position: absolute; padding-bottom: 20px; }
.pe-block { position: relative; cursor: grab; outline: 1px dashed transparent; padding: 1px 0; user-select: none; touch-action: none; }
.pe-block:hover { outline-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.pe-block.selected { outline: 2px solid var(--brand); z-index: 3; }
.pe-block.pe-hidden { opacity: .35; }
.pe-tag { position: absolute; left: -2px; top: -9px; font-size: 9px; line-height: 1; padding: 1px 4px; border-radius: 0; background: var(--brand); color: #fff; display: none; z-index: 4; white-space: nowrap; }
.pe-block:hover .pe-tag, .pe-block.selected .pe-tag { display: block; }
.pe-b-qr { float: right; clear: right; }

.pe-section { font-weight: 700; border-bottom: 1px solid #c8cdd4; margin: 4px 0 3px; padding-bottom: 1px; }
.pe-field { display: flex; border-bottom: 1px solid #e1e4e9; padding: 1px 0; }
.pe-field span:first-child { flex: none; font-weight: 700; color: #505864; }
.pe-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pe-table th, .pe-table td { border: 1px solid #d2d6dc; padding: 1px 2px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pe-table th { background: #ebeef3; }

.pe-hint { color: #646c78; margin: 2px 0 0; font-size: 10px; }
.pe-spacer { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(148, 163, 184, .18) 4px 8px); }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.editor-props .grid-2 { gap: .5rem; }

/* ---------- installer (guest card) ---------- */
body.guest { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent), var(--bg); }
.guest-wrap { width: 100%; max-width: 420px; padding: 1.5rem; }
.guest-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-lg); padding: 1.9rem; }
.guest-brand { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; margin-bottom: 1.4rem; }
.guest-brand img { display: block; height: auto; }
.guest-brand small { color: var(--muted); }
.guest-title { font-size: 1.15rem; margin-bottom: 1rem; }

.check-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 0; font-size: .7rem; font-weight: 800; }
.check-ok { background: var(--ok-bg); color: var(--ok); }
.check-error { background: var(--danger-bg); color: var(--danger); }
.check-warning { background: var(--warn-bg); color: var(--warn); }

/* ---------- authentication (split layout) ---------- */
body.auth { background: var(--surface); --auth-accent: #5b5bf6; --auth-accent-2: #7c7cff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-hero { position: relative; overflow: hidden; background: var(--auth-hero-bg); color: #fff; display: flex; align-items: center; }
.auth-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 680px; padding: 3rem 2rem 3rem clamp(2rem, 14%, 7rem); }
.auth-watermark { position: absolute; width: 560px; height: 560px; right: -120px; bottom: -150px; opacity: .07; pointer-events: none; user-select: none; }
.auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin-bottom: 4.5rem; }
.auth-brand small { display: block; font-size: .72rem; color: #9a9ca8; padding-left: 2px; }
.auth-brand img, .auth-brand svg.auth-logo { display: block; height: auto; }
.logo-on-dark { display: none !important; }
:root[data-theme="dark"] .logo-on-light { display: none !important; }
:root[data-theme="dark"] .logo-on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .logo-on-light { display: none !important; }
  :root[data-theme="auto"] .logo-on-dark { display: block !important; }
}
.auth-brand .brand-text { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.auth-brand .brand-text svg { flex: none; }
.auth-brand-compact .brand-text { color: var(--text); font-size: 1.4rem; }
:root[data-theme="dark"] .brand-text.logo-on-dark { display: inline-flex !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .brand-text.logo-on-dark { display: inline-flex !important; }
}
.auth-eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--auth-accent-2); margin: 0 0 .6rem; font-weight: 500; }
.auth-claim { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.05em; font-weight: 600; margin: 0 0 1rem; color: #fff; }
.auth-lead { color: #cfd1d8; font-size: 1rem; line-height: 1.75; max-width: 330px; margin: 0; }
.auth-hero-foot { color: #9a9ca8; font-size: .82rem; margin: 4.5rem 0 0; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--surface); }
.auth-panel { width: 100%; max-width: 350px; }
.auth-panel .auth-eyebrow { color: var(--auth-accent); font-size: .68rem; }
/* dark theme: the brand blue of the organisation can be very dark, texts and links use its lighter tint */
:root[data-theme="dark"] .auth-panel .auth-eyebrow, :root[data-theme="dark"] .auth-help a { color: var(--auth-accent-2); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .auth-panel .auth-eyebrow, :root[data-theme="auto"] .auth-help a { color: var(--auth-accent-2); }
}
.auth-brand-compact { display: none; margin-bottom: 2rem; color: var(--text); }
.auth-brand-compact small { color: var(--muted); }
.auth-title { font-size: 1.6rem; letter-spacing: -.035em; margin: 0 0 .5rem; font-weight: 700; }
.auth-sub { color: var(--muted); font-size: .88rem; margin: 0 0 1.6rem; }
.auth-form label { font-weight: 400; color: var(--text-2); font-size: .84rem; margin-bottom: 1.1rem; }
.auth-form input { margin-top: .45rem; padding: .7rem .8rem; border-color: var(--border); border-radius: 0; }
.auth-form input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 22%, transparent); }
.auth-submit { margin-top: .8rem; height: 44px; font-size: .95rem; background: var(--auth-accent); border-color: var(--auth-accent); border-radius: 0; }
.auth-submit:hover { background: color-mix(in srgb, var(--auth-accent) 85%, #000); }
.auth-help { color: var(--muted); font-size: .84rem; line-height: 1.6; margin: .7rem 0 0; }
.auth-help a { color: var(--auth-accent); }
.auth-foot { display: flex; justify-content: space-between; margin-top: 2.6rem; font-size: .72rem; color: var(--muted); }
.auth .alert { font-size: .86rem; }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-hero { display: none; }
  .auth-brand-compact { display: flex; }
  .auth-main { align-items: flex-start; padding-top: 3rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-side { grid-template-columns: minmax(0, 1fr); }

}
@media (max-width: 860px) {
  .shell, html.sidebar-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 290px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  /* On phones the drawer always shows labels, whatever the desktop preference. */
  html.sidebar-collapsed .sidebar .brand .brand-full, html.sidebar-collapsed .sidebar .brand .brand-payoff, html.sidebar-collapsed .sidebar .tenant-switch { display: block; }
  html.sidebar-collapsed .sidebar .brand .brand-lockup { display: inline-grid; }
  html.sidebar-collapsed .sidebar .brand .brand-mark { display: none; }
  html.sidebar-collapsed .sidebar .nav a span { display: inline; }
  html.sidebar-collapsed .sidebar .nav a { justify-content: flex-start; padding: .48rem .65rem; }
  html.sidebar-collapsed .sidebar .nav-section { font-size: .64rem; border-top: 0; padding: 1.05rem .65rem .4rem; margin: 0; }
  html.sidebar-collapsed .sidebar .brand { align-items: flex-start; padding: 19px 18px 16px; }
  .collapse-btn { display: none; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open { overflow: hidden; } /* the page behind the open drawer does not scroll with it */
  body.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(11, 13, 28, .5); backdrop-filter: blur(2px); z-index: 35; }
  .only-mobile { display: inline-flex; }
  .topbar { padding: 0 .8rem; height: 56px; }
  .content { padding: 1.1rem .9rem 1.5rem; }
  .user-name, .theme-label { display: none; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl dt { border-bottom: 0; padding-bottom: 0; }
  .filters input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .filters select, .filters input { flex: 1 1 140px; }
  .bars li { grid-template-columns: 34% 1fr 2.2rem; }
  .codes { columns: 1; }
  .table-wrap { margin: 0 -1.3rem; }
}

.print-header { display: none; }
@media print {
  .print-header { display: flex !important; align-items: center; gap: 14px; padding: 0 0 10px; margin: 0 0 14px; border-bottom: 2px solid var(--brand); color: #000; }
  .print-header img { max-height: 18mm; max-width: 45mm; object-fit: contain; }
  .print-header strong { display: block; font-size: 13pt; }
  .print-header small { display: block; font-size: 8pt; color: #444; }
  .print-header .print-date { margin-left: auto; text-align: right; }
  .sidebar, .topbar, .foot, .actions, .filters, .pagination, .btn, .alert-close, form .form-actions { display: none !important; }
  .shell, html.sidebar-collapsed .shell { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
  body { background: #fff; color: #000; }
}

/* ---------- historical assignments ---------- */

.steps li.active { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.steps li.active::before { background: var(--brand); color: #fff; }
.report-group td:first-child { white-space: nowrap; font-weight: 600; }
.report-group h2 .badge { font-weight: 600; }

/* ---------- BI charts (validated categorical palette, light / dark steps) ---------- */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
  --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #4a3aa7; --viz-8: #e34948;
  --viz-other: #b9b8b1; --viz-grid: #e1e0d9; --viz-axis: #c3c2b7;
  --viz-good: #0ca30c; --viz-warning: #fab219; --viz-critical: #d03b3b;
}
:root[data-theme="dark"] {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767;
  --viz-other: #5b5b57; --viz-grid: #2c2c2a; --viz-axis: #383835;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
    --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767;
    --viz-other: #5b5b57; --viz-grid: #2c2c2a; --viz-axis: #383835;
  }
}
.s1 { --c: var(--viz-1); } .s2 { --c: var(--viz-2); } .s3 { --c: var(--viz-3); } .s4 { --c: var(--viz-4); }
.s5 { --c: var(--viz-5); } .s6 { --c: var(--viz-6); } .s7 { --c: var(--viz-7); } .s8 { --c: var(--viz-8); }
.s-other { --c: var(--viz-other); }
.st-good { --c: var(--viz-good); } .st-warning { --c: var(--viz-warning); } .st-critical { --c: var(--viz-critical); }
.bi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(420px, calc(50% - .6rem)), 1fr)); gap: 1.2rem; }
.bi-grid .card { margin: 0; }
/* every chart card: title, chart, then the «Tabella» link aligned at the bottom of the row */
.bi-card { display: flex; flex-direction: column; }
.bi-card > .chart-table { margin-top: auto; padding-top: .9rem; }
.bi-wide { grid-column: 1 / -1; }
.bi-kpi { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bi-kpi .stat-label { padding-right: 0; white-space: normal; min-height: 2.7em; }
.bi-kpi .stat-value { margin-top: .3rem; }
.bi-kpi .stat small { margin-top: .2rem; font-size: .78rem; line-height: 1.35; }
.chart-donut { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.donut { width: 168px; height: 168px; flex: none; }
.donut-track { fill: none; stroke: var(--surface-3); stroke-width: 24; }
.donut-seg { fill: none; stroke: var(--c); stroke-width: 24; cursor: pointer; transition: opacity .15s; outline: none; }
.donut:hover .donut-seg:not(:hover), .donut:focus-within .donut-seg:not(:focus) { opacity: .45; }
.donut-total { font-size: 26px; font-weight: 700; fill: var(--text); font-family: var(--font-display); }
.donut-caption { font-size: 11px; fill: var(--muted); }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; flex: 1; min-width: 170px; font-size: .84rem; }
.chart-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.4rem; align-items: center; gap: .5rem; color: var(--text); }
.chart-legend.inline { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .7rem; }
.chart-legend.inline li { display: inline-flex; }
.swatch { width: 12px; height: 12px; border-radius: 0; background: var(--c); flex: none; }
.lg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-pct { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.hbars { display: grid; gap: .45rem; }
.hbar { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .6rem; font-size: .84rem; border-radius: 0; outline: none; }
.hbar:hover .hbar-fill, .hbar:focus .hbar-fill { filter: brightness(1.12); }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.hbar-track { height: 14px; display: block; }
.hbar-fill { display: block; height: 100%; background: var(--c); border-radius: 0; }
.hbar-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.columns { padding-left: 2rem; }
.col-plot { position: relative; height: 200px; margin-bottom: 1.6rem; border-bottom: 1px solid var(--viz-axis); }
.col-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--viz-grid); }
.col-grid span { position: absolute; left: -2rem; top: -.55rem; width: 1.6rem; text-align: right; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.col-row { position: absolute; inset: 0; display: flex; gap: 2px; align-items: flex-end; }
.col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; }
.col-bars { height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 12%; }
.col-bar { position: relative; flex: 1; max-width: 34px; background: var(--c); border-radius: 0; min-height: 0; cursor: pointer; outline: none; }
.col-bar:hover, .col-bar:focus { filter: brightness(1.12); }
.col-value { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 600; color: var(--text); padding-bottom: 2px; }
.col-label { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: .7rem; color: var(--muted); padding-top: .35rem; white-space: nowrap; }
.chart-table { margin-top: .9rem; }
.chart-table summary { cursor: pointer; font-size: .8rem; color: var(--muted); font-weight: 600; }
.viz-tip { position: fixed; z-index: 60; pointer-events: none; padding: .35rem .55rem; border-radius: 0; background: var(--text); color: var(--surface); font-size: .78rem; font-weight: 600; box-shadow: var(--shadow-lg); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
@media (max-width: 520px) { .bi-grid { grid-template-columns: minmax(0, 1fr); } .donut { width: 140px; height: 140px; } }
@media print { .chart-table { display: none; } .bi-grid { grid-template-columns: 1fr 1fr; } }
.org-logo { display: block; height: 30px; max-width: 140px; width: auto; object-fit: contain; padding: 3px 6px; background: #fff; border: 1px solid var(--border); border-radius: 0; }
@media (max-width: 860px) { .org-logo { height: 26px; max-width: 90px; } }

/* ---------- assignment target ---------- */
.target-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.target-choice .target-option { position: relative; display: flex; align-items: center; gap: .7rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 0; cursor: pointer; background: var(--surface); }
.target-choice .target-option input { position: absolute; opacity: 0; pointer-events: none; }
.target-choice .target-option .ic { width: 22px; height: 22px; color: var(--brand); flex: none; }
.target-choice .target-option strong { display: block; color: var(--text); font-size: .9rem; }
.target-choice .target-option small { display: block; color: var(--muted); font-size: .75rem; font-weight: 400; }
.target-choice .target-option:hover { border-color: var(--border-strong); }
.target-choice .target-option:has(input:checked) { border-color: var(--brand); box-shadow: var(--ring); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.target-choice .target-option:has(input:focus-visible) { box-shadow: var(--ring); }

/* Public asset page (QR code, no login) */
body.public { background: var(--bg); min-height: 100vh; }

/* Autocomplete for long selects (employees) */
.ac { position: relative; margin-top: .3rem; }
.ac .ac-input { margin: 0; padding-right: 2rem; }
.ac .ac-clear { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ac .ac-clear:hover { background: var(--surface-3); color: var(--text); }
.ac .ac-clear[hidden] { display: none !important; }
.ac .ac-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; }
.ac-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: .25rem 0; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-lg); }
.ac-list li { padding: .45rem .8rem; cursor: pointer; font-size: .87rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-list li.active, .ac-list li:hover { background: var(--surface-3); }
.ac-list li.ac-note { cursor: default; color: var(--muted); font-size: .8rem; white-space: normal; background: none; }
.filters .ac { margin-top: 0; min-width: 220px; }
.filters .ac .ac-input { width: 100%; min-width: 0; }

/* "+" next to selects and on-the-fly creation dialog */
.quick-add-row { display: flex; align-items: stretch; gap: .4rem; margin-top: .3rem; }
.quick-add-row > select, .quick-add-row > .ac { flex: 1; min-width: 0; margin-top: 0; }
.quick-add-btn { flex: none; width: 38px; padding: 0; justify-content: center; font-size: 1.15rem; font-weight: 600; line-height: 1; }
.quick-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--border-strong); border-radius: 0; padding: 1.25rem; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.quick-dialog::backdrop { background: rgba(10, 14, 30, .45); }
.quick-dialog h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.quick-dialog .form-actions { margin-top: 1rem; }

/* Sites and positions: one "new" button per type, "+ aggiungi" menu on each row */

.add-menu { position: relative; }
.add-menu summary { cursor: pointer; list-style: none; color: var(--brand); }
.add-menu summary::-webkit-details-marker { display: none; }
.add-menu summary::after { content: " ▾"; font-size: .7em; }
.add-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-lg); padding: .35rem; }
.add-menu .menu a { white-space: nowrap; font-size: .84rem; }

/* Dashboard: "Novità e aggiornamenti" (from CHANGELOG.md), collapsed until clicked */
.whats-new { padding: 0; }
.whats-new > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .95rem 1.2rem; border-radius: 0; }
.whats-new > summary::-webkit-details-marker { display: none; }
.whats-new > summary:hover { background: var(--surface-2); }
.whats-new-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 1rem; }
.whats-new > summary .badge, .whats-new-date { flex: none; }
.whats-new-title .ic { color: var(--brand); }
.whats-new-date { font-size: .82rem; }
.whats-new-toggle { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.whats-new[open] > summary .whats-new-toggle { transform: rotate(-135deg); }
.whats-new[open] > summary { border-bottom: 1px solid var(--border); border-radius: 0; }
.whats-new-body { padding: .4rem 1.2rem 1.1rem; font-size: .9rem; line-height: 1.55; }
.whats-new-body h4 { margin: .9rem 0 .3rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.whats-new-body ul { margin: 0; padding-left: 1.2rem; }
.whats-new-body li { margin: .25rem 0; }
.whats-new-intro { margin: .7rem 0 0; color: var(--text-2); }
.whats-new-older { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.whats-new-older > summary { cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--text-2); }

/* Generic helpers */
.js .js-hide { display: none !important; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.card-title-row h2 { margin: 0; display: flex; align-items: center; gap: .3rem; }
.card-title-row .muted { font-size: .82rem; }
.select-compact { width: auto; min-width: 190px; margin: 0; padding-top: .35rem; padding-bottom: .35rem; font-size: .86rem; }
.row-actions .inline-act { display: inline-block; margin: 0; }
.act-disabled { opacity: .35; cursor: not-allowed; }
.act-disabled:hover { background: none; border-color: transparent; color: var(--muted); }
/* action in progress (e.g. a service restarting): disabled, the icon turns */
button.act:disabled { cursor: default; opacity: .3; background: none; }
button.act:disabled:hover { background: none; border-color: transparent; }
.act-busy, .act-busy:hover { opacity: 1; color: var(--brand); }
.act-busy .ic { animation: act-spin 1.1s linear infinite; }
@keyframes act-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .act-busy .ic { animation: none; } }

/* Super Admin › user: organisations and roles */
.memberships td { vertical-align: middle; }

/* Document type with icon (archive): blue = verbali, teal = schede/registri, violet = report/elenchi */

/* Outgoing mail: setup steps for Microsoft Entra */
.howto { margin: .4rem 0 .6rem; border: 1px solid var(--border); border-radius: 0; padding: .55rem .8rem; background: var(--surface); }
.howto > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--brand); }
.howto ol { margin: .6rem 0 .2rem; padding-left: 1.2rem; font-size: .85rem; line-height: 1.55; }
.howto li { margin-bottom: .35rem; }
.hint.warn { color: var(--warn); }

/* Outgoing mail: log of tests and changes, newest first */
.mail-log { list-style: none; margin: .4rem 0 .5rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 0; background: var(--surface-3); font: 12.5px/1.5 var(--mono); max-height: 420px; overflow-y: auto; }
.mail-log li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: .3rem 0 .3rem .6rem; border-left: 3px solid var(--border); margin-bottom: .2rem; }
.mail-log li.ok { border-left-color: var(--ok); }
.mail-log li.err { border-left-color: var(--danger); }
.mail-log li.err .mail-log-text { color: var(--danger); }
.mail-log li.info { border-left-color: var(--info); }
.mail-log time { color: var(--muted); white-space: nowrap; }
.mail-log small { color: var(--muted); font-size: inherit; }
@media (max-width: 640px) { .mail-log li { grid-template-columns: minmax(0, 1fr); } }

/* Super Admin › Impostazioni applicazione: one card per section */
.settings-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.settings-card { display: flex; gap: .9rem; align-items: flex-start; text-decoration: none; color: var(--text); margin: 0; border: 1px solid var(--border); }
.settings-card:hover { border-color: var(--brand); box-shadow: var(--ring); }
.settings-card > .ic { width: 26px; height: 26px; color: var(--brand); flex: none; margin-top: .1rem; }
.settings-card strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.settings-card small { display: block; color: var(--muted); margin-bottom: .45rem; }
.settings-card em { display: block; font-style: normal; font-size: .82rem; }
.settings-card.warn em { color: var(--warn); }

/* Card whose actions sit at its bottom edge (e.g. Super Admin › tenant: "Salva modifiche") */
.card-actions { display: flex; flex-direction: column; }
.card-actions > .form-actions { margin-top: auto; padding-top: 1rem; }
.btn-warning { background: var(--warn); border-color: color-mix(in srgb, var(--warn) 85%, #000); color: #fff; }
.btn-warning:hover { filter: brightness(1.06); }
:root[data-theme="dark"] .btn-warning { color: #1a1205; }
.backup-choice { border: 1px solid var(--border); border-radius: 0; padding: .7rem .9rem .5rem; margin: 0 0 .9rem; }
.backup-choice legend { font-weight: 600; padding: 0 .3rem; font-size: .9rem; }
.backup-choice .check { display: flex; align-items: flex-start; gap: .55rem; margin: .35rem 0; }
.backup-choice .check input { margin-top: .2rem; }
.backup-choice small { display: block; color: var(--muted); font-weight: 400; }
.totp-input { max-width: 10rem; letter-spacing: .2em; }

.backup-import { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: .4rem 0 1rem; }
.backup-import label { margin: 0; }
.backup-import input, .backup-import .btn { height: 2.6rem; margin-top: .3rem; box-sizing: border-box; }
.backup-import .btn { margin-top: 0; }
.upper::placeholder { text-transform: none; }

/* ---------- Row actions in the grids ----------
   every action always in its own slot (an empty slot keeps the others in place), no floating shadow,
   bigger targets on touch screens, rows as cards on smartphones. */
.act-label { display: none; }
.act-slot { visibility: hidden; }
button.act { background: none; padding: 0; font: inherit; cursor: pointer; }
button.act:hover { background: var(--surface-3); }
button.act-danger:hover { background: var(--danger-bg); }
.row-actions, th.actions-col { box-shadow: 1.4rem 0 0 var(--surface); border-left: 1px solid var(--border); }
@media (pointer: coarse) {
  .row-actions .act { width: 40px; height: 40px; }
  .row-actions .act .ic { width: 18px; height: 18px; }
}
@media (max-width: 640px) {

  /* every other grid with row actions: one card per row, the field names taken from the column headers */
  .grid-cards thead { display: none; }
  .grid-cards, .grid-cards tbody, .grid-cards tr { display: block; width: 100%; min-width: 0; }
  .grid-cards tr { padding: .7rem .75rem; margin-bottom: .6rem; border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
  .grid-cards td { display: block; border: 0; padding: .12rem 0; white-space: normal; font-size: .85rem; min-width: 0; }
  .grid-cards td:first-child { font-size: .95rem; font-weight: 600; }
  .grid-cards td:empty, .grid-cards td.row-actions:not(:has(.act:not(.act-slot))) { display: none; }
  .grid-cards td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted); font-size: .78rem; font-weight: 400; }
  .grid-cards td[colspan] { text-align: center; }
  :is(.grid-assets, .grid-cards) .row-actions { grid-column: 1 / -1; position: static; box-shadow: none; border-left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem;
    border-left: 0; border-top: 1px solid var(--border); padding-top: .55rem; margin-top: .35rem; background: none; }
  :is(.grid-assets, .grid-cards) .row-actions .act { width: auto; height: auto; margin: 0; padding: .45rem .2rem; display: flex; flex-direction: column; gap: .15rem;
    align-items: center; border: 1px solid var(--border); border-radius: 0; }
  :is(.grid-assets, .grid-cards) .row-actions .act-slot { border-color: transparent; }
  :is(.grid-assets, .grid-cards) .row-actions .inline-act { display: block; }
  :is(.grid-assets, .grid-cards) .row-actions .inline-act .act { width: 100%; height: 100%; }
  :is(.grid-assets, .grid-cards) .act-label { display: block; font-size: .72rem; line-height: 1.1; }
}
/* long press on a touch screen: the name of the action */
.act-tip { position: fixed; z-index: 70; transform: translate(-50%, -120%); background: var(--text); color: var(--surface); font-size: .78rem;
  padding: .3rem .55rem; border-radius: 0; pointer-events: none; white-space: nowrap; }

/* ---------- 2FA code: one box per digit (built by app.js on input[data-otp]; without JS the plain field stays) ---------- */
.otp-boxes { display: flex; gap: .45rem; margin-top: .45rem; }
.otp-boxes input.otp-box { width: 2.7rem; min-width: 0; height: 3.1rem; margin: 0; padding: 0; text-align: center; font: 600 1.35rem/1 var(--mono);
  border: 1px solid var(--border-strong); border-radius: 0; background: var(--surface); color: var(--text); caret-color: var(--brand); }
.otp-boxes input.otp-box:nth-child(4) { margin-left: .55rem; }
.otp-boxes input.otp-box:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.auth-form .otp-boxes input.otp-box { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.auth-form .otp-boxes input.otp-box:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 22%, transparent); }
.otp-boxes.otp-error input.otp-box { border-color: var(--danger); }
.otp-boxes[hidden], .otp-toggle[hidden] { display: none; }
.otp-toggle { display: inline-block; margin: -.4rem 0 1rem; padding: 0; background: none; border: 0; font: inherit; font-size: .82rem; color: var(--brand); cursor: pointer; text-decoration: underline; }
@media (max-width: 380px) { .otp-boxes { gap: .3rem; } .otp-boxes input.otp-box { width: 2.3rem; height: 2.8rem; font-size: 1.15rem; } .otp-boxes input.otp-box:nth-child(4) { margin-left: .3rem; } }

/* ---------- integrations: the two directions ---------- */

.direction { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 0; font-size: .78rem; font-weight: 600;
  background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.direction .ic { width: 14px; height: 14px; }
.indent { margin: -.3rem 0 .8rem 1.6rem; }

/* ---------- integrations: logos of the applications ---------- */

.int-logo { width: 28px; height: 28px; flex: none; border-radius: 0; object-fit: contain; }

.int-logo-text { display: inline-grid; place-items: center; background: #173f5f; color: #fff; font: 700 .62rem/1 var(--font); letter-spacing: .02em; }

/* ---------- Editor stampe ---------- */

.tpl-vars { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .7rem; margin: 0; font-size: .82rem; }
.tpl-vars dd { margin: 0; color: var(--muted); }

.alert .btn { text-decoration: none; }
.alert .btn-primary, .alert .btn-primary:hover { color: #fff; }

/* ---------- user manual ---------- */
.manual { --nx-blue: #00529e; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* dark theme: headings in the text colour (#00529E on black is not readable), the blue stays on bars and borders */
:root[data-theme="dark"] .manual-body h3, :root[data-theme="dark"] .manual-toc li.active > a { color: var(--text); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .manual-body h3, :root[data-theme="auto"] .manual-toc li.active > a { color: var(--text); } }
.manual-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .7rem; max-height: calc(100vh - 6rem); overflow: auto; }
.manual-search input { width: 100%; margin: 0; }
.manual-pdf { align-self: flex-start; }
.manual-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.manual-toc > ol > li { counter-increment: ch; margin: .1rem 0; }
.manual-toc > ol > li > a::before { content: counter(ch) ". "; color: var(--muted); }
.manual-toc a { display: block; padding: .3rem .55rem; border-radius: 0; color: var(--text); font-size: .9rem; }
.manual-toc a:hover { background: var(--surface-2); text-decoration: none; }
.manual-toc li.active > a { background: color-mix(in srgb, var(--nx-blue) 12%, transparent); color: var(--nx-blue); font-weight: 600; }
.manual-toc ul { list-style: none; margin: .15rem 0 .4rem .9rem; padding: 0 0 0 .5rem; border-left: 2px solid var(--border); }
.manual-toc ul a { font-size: .84rem; color: var(--text-2); padding: .2rem .5rem; }
.manual-body { max-width: 900px; line-height: 1.65; }
.manual-body h2 { font-size: 1.7rem; margin: .2rem 0 1rem; }
.manual-body h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; color: var(--nx-blue); scroll-margin-top: 5rem; }
.manual-body h4 { font-size: 1rem; margin: 1.3rem 0 .4rem; scroll-margin-top: 5rem; }
.manual-body ul, .manual-body ol { padding-left: 1.4rem; }
.manual-body li { margin: .25rem 0; }
.manual-body pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 0; padding: .7rem .9rem; overflow: auto; font-size: .85rem; }
.manual-crumb { margin: 0 0 .3rem; font-size: .84rem; }
.manual-callout { margin: 1rem 0; padding: .7rem .9rem; border-radius: 0; border-left: 4px solid var(--nx-blue); background: color-mix(in srgb, var(--nx-blue) 8%, transparent); }
.manual-callout.manual-warning { border-left-color: var(--warn); background: var(--warn-bg); }
.manual-callout.manual-tip { border-left-color: var(--ok); background: var(--ok-bg); }
.manual-table { margin: .8rem 0; }
.manual-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.manual-index li { margin: .5rem 0; }
.manual-index span { display: block; font-size: .84rem; }
.manual-results { list-style: none; padding: 0; }
.manual-results li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.manual-results p { margin: .2rem 0 0; font-size: .88rem; color: var(--text-2); }
@media (max-width: 900px) {
  .manual { grid-template-columns: minmax(0, 1fr); }
  .manual-side { position: static; max-height: none; }
}
.manual-figure { margin: 1.2rem 0 1.4rem; text-align: center; }
.manual-figure img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow); background: #fff; }
.manual-figure figcaption { margin-top: .5rem; font-size: .84rem; color: var(--muted); }

/* ---------- provenance of assets and employees ---------- */
.int-logo-xs { width: 14px; height: 14px; border-radius: 0; }
.int-logo-xs.int-logo-text { font-size: .38rem; }
.prov { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .45rem; border-radius: 0; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.prov-internal { background: var(--muted-bg); color: var(--text-2); }
.prov-int { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--text); }
.prov-linked { display: inline-flex; gap: 2px; margin-left: .3rem; vertical-align: middle; }

/* Employee page: profile column (photo, socials, contacts, actions) + sections; photo/social and document dialogs */

@media (max-width: 900px) { .emp-side { position: static; } }
@media (max-width: 520px) { .emp-dialog-photo .emp-avatar { margin: 0 auto; } }

/* ---------- status pages (update pending, service unavailable) ---------- */
.status-panel { text-align: left; }
.status-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 0; margin: .4rem 0 1.1rem; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.status-icon svg { width: 28px; height: 28px; }
.status-title { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 .5rem; }
.status-lead { color: var(--text-2); font-size: 1rem; line-height: 1.6; margin: 0 0 1.2rem; }
.status-detail { border: 1px solid var(--border); border-radius: 0; padding: .9rem 1rem; background: var(--surface-2); font-size: .88rem; line-height: 1.55; margin-bottom: 1.4rem; }
.status-detail p { margin: 0 0 .5rem; }
.status-detail pre { margin: 0; padding: .55rem .75rem; border-radius: 0; background: var(--surface); border: 1px solid var(--border); font-size: .88rem; overflow: auto; }
.status-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.status-actions .muted { font-size: .84rem; }

/* ---------- NexoraOne Agent: agents, configuration, discovered devices ---------- */
.tabs a .count { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 0; background: var(--surface-3); color: var(--muted); font-size: .74rem; font-weight: 600; }
.tabs a.active .count { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand); }
.check-list { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: .2rem 0 .6rem; }
.check-list .check { margin: 0; }

/* ---------- detected device: data in groups, decisions below ---------- */

/* agent configuration: fieldsets never wider than the page; on phones subnets and credentials become cards */

/* ---------- sign-in with Microsoft ---------- */
.auth-or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .6rem; color: var(--muted); font-size: .8rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.btn-microsoft { gap: .6rem; background: var(--surface); color: var(--text); border-color: var(--border-strong); font-weight: 600; }
.btn-microsoft:hover { border-color: var(--text-2); text-decoration: none; }
.ms-logo { width: 18px; height: 18px; flex: none; }
.auth-choices { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .6rem; }
.btn-logo { width: 16px; height: 16px; }

/* Spigoli vivi (3.0.0-rc.79), come tutta la suite: angoli a 0 nei valori sopra, senza eccezioni (anche utente,
   foto dei dipendenti e pallini indicatori, su richiesta del 20/10/2026). Niente ombre su schede, pulsanti
   e campi: le schede compensano con il bordo più marcato. Restano l'ombra delle finestre e l'anello di focus. */
.card, .stat, .report-card { box-shadow: none; border-color: var(--border-strong); }
.btn, .btn-primary, .cc-btn, .tabs a.active, input, select, textarea { box-shadow: none; }

/* Centralino: extensions grid and live panels */
.num { text-align: right; white-space: nowrap; }
.form-inline { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.form-inline label { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-size: .8rem; color: var(--muted); }
.form-inline input, .form-inline select, .form-inline .btn { height: 2.6rem; margin: 0; box-sizing: border-box; }
.form-inline select { width: auto; min-width: 11rem; }
.form-inline .input-wide { width: 19rem; max-width: 100%; }
.bi-grid + .phones-list { margin-top: 1.2rem; }
.ext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.ext { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 0; background: var(--surface); min-width: 0; }
.ext-on { border-left-color: var(--ok); }
.ext-off { opacity: .6; }
.ext-num { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.ext-name, .ext-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-name { font-size: .82rem; }
.ext-meta { font-size: .72rem; color: var(--muted); }
/* extension in a call, like the BLF keys of the phones: red when busy, blinking red while it rings */
.ext-call { opacity: 1; border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.ext-call .ext-meta { color: var(--text-2); }
.ext-call .ext-meta strong { color: var(--brand); font-weight: 600; }
.ext-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.ext-ringing { animation: ext-blink 1s steps(2, jump-none) infinite; }
.ext-ringing .ext-dot { animation: ext-blink-dot 1s steps(2, jump-none) infinite; }
@keyframes ext-blink { 50% { background: var(--surface); border-left-color: color-mix(in srgb, var(--brand) 30%, var(--surface)); } }
@keyframes ext-blink-dot { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .ext-ringing, .ext-ringing .ext-dot { animation: none; } }
/* queue with calls waiting: coloured and blinking like a ringing extension */
.queue-ringing > td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); animation: queue-blink 1s steps(2, jump-none) infinite; }
.queue-ringing > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.queue-ringing .ext-dot { display: inline-block; vertical-align: middle; margin-left: .3rem; animation: ext-blink-dot 1s steps(2, jump-none) infinite; }
.queue-meta { display: block; font-size: .72rem; color: var(--text-2); }
.queue-meta strong { color: var(--brand); font-weight: 600; }
@keyframes queue-blink { 50% { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .queue-ringing > td, .queue-ringing .ext-dot { animation: none; } }
.badge-call { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.refresh-stale { opacity: .55; transition: opacity .2s; }
/* monospaced inputs keep the height of the other fields */
input.mono { font-size: .9rem; line-height: 1.55; }

/* BI of the phone system: stacked columns, gauge, heatmap, area trend */
.stack { height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; padding: 0 12%; }
.stack-part { display: block; width: 100%; max-width: 34px; margin: 0 auto; background: var(--c); cursor: pointer; outline: none; }
.stack-part + .stack-part { box-shadow: 0 1px 0 var(--surface); }
.stack-part:hover, .stack-part:focus { filter: brightness(1.12); }
.chart-gauge { display: flex; justify-content: center; }
.gauge { width: 100%; max-width: 260px; height: auto; }
.gauge-track, .gauge-fill { fill: none; stroke-width: 16; stroke-linecap: butt; }
.gauge-track { stroke: var(--surface-3); }
.gauge-fill { stroke: var(--c); cursor: pointer; outline: none; transition: stroke-dasharray .6s ease; }
.gauge-target { stroke: var(--text); stroke-width: 2; }
.gauge-value { font-size: 30px; font-weight: 700; fill: var(--text); font-family: var(--font-display); }
.gauge-caption { font-size: 10px; fill: var(--muted); }
.st-none { --c: var(--viz-other); }
.heatmap { display: grid; grid-template-columns: 2.4rem repeat(var(--cols), minmax(0, 1fr)); gap: 2px; font-size: .68rem; color: var(--muted); }
.hm-col { text-align: center; white-space: nowrap; }
.hm-row { display: flex; align-items: center; }
.hm-cell { aspect-ratio: 1 / 1; min-height: 12px; background: color-mix(in srgb, var(--viz-1) var(--lv), var(--surface-2)); cursor: pointer; outline: none; }
.hm-cell:hover, .hm-cell:focus { box-shadow: inset 0 0 0 2px var(--text); }
.bi-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bi-filters .btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bi-section { margin: 1.6rem 0 .8rem; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.bi-section small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.bi-gauge-card { justify-content: center; }
.bi-gauge-card .hint { text-align: center; margin: .3rem 0 0; }
.live-today { margin: 1.2rem 0; }
.rate { display: inline-block; width: 6rem; height: 8px; background: var(--surface-3); vertical-align: middle; }
.rate-bar { display: block; height: 100%; background: var(--c); }
.area { padding-left: 2.2rem; }
.ar-plot { height: 220px; }
.ar-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-fill { fill: var(--c); opacity: .12; }
.ar-line { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ar-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--c); pointer-events: none; }
.ar-hits { position: absolute; inset: 0; display: flex; }
.ar-hit { flex: 1; cursor: pointer; outline: none; }
.ar-hit:hover, .ar-hit:focus { background: color-mix(in srgb, var(--text) 6%, transparent); }
.ar-labels { position: absolute; left: 0; right: 0; top: 100%; height: 1.4rem; }
.ar-label { position: absolute; transform: translateX(-50%); padding-top: .35rem; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.ar-label:first-child { transform: none; }
.ar-label.ar-last { transform: translateX(-100%); }
@media (max-width: 560px) { .bi-grid { grid-template-columns: minmax(0, 1fr); } .hbar { grid-template-columns: 8rem minmax(0, 1fr) 2.5rem; } }

/* Server e servizi */
.s-free { --c: var(--viz-grid); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checks li { display: grid; grid-template-columns: 6.6rem 9.5rem minmax(0, 1fr); gap: .6rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--border); font-size: .88rem; }
.checks li:first-child { border-top: 0; padding-top: 0; }
.checks .badge { justify-self: start; }
.check-label { font-weight: 600; }
.check-detail { color: var(--muted); }
.quota { margin-top: 1rem; }
.quota-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .84rem; margin-bottom: .35rem; }
.quota-bar { height: 8px; background: var(--muted-bg); }
.quota-bar span { display: block; height: 100%; }
.q-ok { background: var(--ok); } .q-warn { background: var(--warn); } .q-bad { background: var(--danger); }
.system-row { margin-top: 1.2rem; }
.system-side { display: flex; flex-direction: column; gap: 1.2rem; }
.system-side > .card { margin: 0; }
.table.kv td:first-child { color: var(--muted); width: 42%; }
.events .event-msg { min-width: 22rem; word-break: break-word; }
.events details summary { cursor: pointer; }
.events pre { white-space: pre-wrap; word-break: break-all; font-size: .76rem; max-height: 16rem; overflow: auto; margin: .5rem 0 0; padding: .6rem; background: var(--muted-bg); }
@media (max-width: 700px) { .checks li { grid-template-columns: 6.6rem minmax(0, 1fr); } .check-detail { grid-column: 2; } }
.sys-stats .stat small { min-height: 2.6em; }
.table.kv td { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .grid-2.system-row { grid-template-columns: minmax(0, 1fr); } }
/* services on a phone: without the threads the table fits, the Riavvia icon never covers a column */
@media (max-width: 560px) { .table.services .col-threads { display: none; } }

/* Server e servizi › Backup: contents of a new backup, backup in preparation */
.backup-contents { border: 0; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
.backup-contents legend { padding: 0; margin-bottom: .4rem; font-weight: 600; font-size: .88rem; }
.backup-contents .check { margin: 0; }
.backup-running { display: flex; align-items: center; gap: .4rem; }
.backup-running .act { width: 22px; height: 22px; margin: 0; }
@media (max-width: 560px) { .backup-contents { grid-template-columns: minmax(0, 1fr); } }

/* Centralino › Interni: the status of an extension is a badge; when it can be changed the badge is a compact menu
   that sends the change at once (the preview to confirm follows) */
.status-form { display: inline-flex; align-items: center; margin: 0; }
.status-pick { display: inline-block; width: auto; margin: 0; padding: .12rem 1.5rem .12rem .55rem; font-size: .72rem; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; border-radius: 0; box-shadow: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .7rem center, right .45rem center; background-size: 4px 4px; background-repeat: no-repeat; }
.status-pick:hover, .status-pick:focus { border-color: currentColor; outline: none; }
.status-pick option { color: var(--text); background: var(--surface); font-weight: 400; }
.status-pick.status-ok { background-color: var(--ok-bg); color: var(--ok); }
.status-pick.status-warn { background-color: var(--warn-bg); color: var(--warn); }
.status-pick.status-danger { background-color: var(--danger-bg); color: var(--danger); }
.table-wrap + .hint { margin-top: .9rem; }
.status-pick.status-info { background-color: var(--info-bg, var(--surface-3)); color: var(--info, var(--text)); }

/* ---------- Centralino › Configurazione ---------- */
.config-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .config-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .config-tiles { grid-template-columns: minmax(0, 1fr); } }
.config-tiles .stat { min-height: 132px; }
.config-tiles .stat small { line-height: 1.4; margin-top: .3rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.card-head h2 { margin: 0; display: flex; align-items: center; gap: .45rem; }
.card-head h2 .ic { width: 18px; height: 18px; color: var(--muted); }
.steps-plain { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; color: var(--text-2); font-size: .88rem; line-height: 1.5; }
.empty-state.compact { padding: 2.6rem 1rem; }
.empty-state.compact h2 { margin: .8rem 0 .35rem; }
.empty-state.compact p { margin: 0 auto 1.1rem; max-width: 460px; }
.empty-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.empty-icon .ic { width: 24px; height: 24px; }

/* choice of extensions (members, agents) and IVR keys */
.pick { min-width: 0; padding: .8rem 1rem 1rem; }
.pick legend small { font-weight: 400; margin-left: .35rem; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .15rem 1rem; max-height: 300px; overflow: auto; margin-top: .2rem; }
.pick-grid .check { margin: 0; padding: .35rem .4rem; font-size: .86rem; border: 1px solid transparent; }
.pick-grid .check:hover { background: var(--surface-2); }
.pick-grid .check:has(input:checked) { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); }
.pick-grid .mono { color: var(--muted); margin-right: .2rem; }
.keys-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; max-width: 34rem; margin-top: .3rem; }
.key-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.key-row select { height: 2.1rem; margin: 0; padding: 0 .55rem; flex: 1; min-width: 0; font-size: .85rem; }
.key-row .key-pick { flex: none; width: 3.6rem; font-family: var(--mono); font-weight: 700; }
.key-row .act { flex: none; width: 28px; height: 28px; margin: 0; }
.key-row .act:disabled { opacity: .3; cursor: default; background: none; }
.keys-empty { margin: .2rem 0 0; font-size: .86rem; }
.keys-add { margin-top: .8rem; }
.form-tabs { margin-bottom: 1.2rem; }
.key-digit { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; font-family: var(--mono); font-weight: 700; background: var(--surface-3); border: 1px solid var(--border); color: var(--text); }

/* departments and office hours */
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.2rem; align-items: stretch; }
.dept-grid .dept-card { margin: 0; display: flex; flex-direction: column; }
.dept-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.dept-head h2 { margin: 0; }
.dept-head h2 small { font-weight: 400; margin-left: .3rem; }
.hours-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hours-table th, .hours-table td { padding: .32rem 0; border-bottom: 1px solid var(--border); text-align: left; }
.hours-table th { width: 38%; font-weight: 500; color: var(--text-2); }
.hours-table td { font-variant-numeric: tabular-nums; }
.hours-table tr.is-closed td { color: var(--muted); }
.dept-route { margin: .8rem 0 0; font-size: .86rem; }
.dept-actions { display: grid; gap: .7rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.dept-card .dept-route { margin-bottom: 1rem; }
.dept-override-label { font-size: .82rem; color: var(--muted); margin-right: .1rem; }
.dept-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.dept-links form { margin: 0; }
.dept-actions form { margin: 0; }
.dept-override { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dept-override select { width: auto; height: 30px; margin: 0; padding: 0 .5rem; font-size: .8rem; }
.hours-edit th[scope="row"] { font-weight: 500; white-space: nowrap; text-transform: none; letter-spacing: normal; font-size: .88rem; color: var(--text); background: none; }
.hours-edit + label, .table-wrap + label { margin-top: 1.1rem; }
.time-range { display: flex; align-items: center; gap: .4rem; }
.time-range input { width: auto; margin: 0; padding: .4rem .5rem; font-variant-numeric: tabular-nums; }
.phone-add { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.phone-add h3 { margin-top: 0; }
@media (max-width: 700px) {
  .dept-grid { grid-template-columns: minmax(0, 1fr); }
  .dept-links { justify-content: flex-start; }
  .time-range input { flex: 1; min-width: 0; }
}

/* outbound routes of a rule */
.routes-edit td { vertical-align: middle; }
.routes-edit select, .routes-edit input { margin: 0; }
.routes-edit td:first-child { width: 44px; }
.routes-edit input[type="number"] { max-width: 110px; }

/* Inoltro di chiamata */
.fwd-case { padding: .8rem 1rem 1rem; }
.fwd-target { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .5rem; margin-top: .3rem; }
.fwd-target [hidden] { display: none; }
.fwd-case label[hidden] { display: none; }
.fwd-target select, .fwd-target input { margin: 0; }
/* the status of an extension with its forwarding and BLF buttons, all on the same centre line */
.status-cell { display: flex; align-items: center; gap: .2rem; }
.status-cell .act { margin: 0; }
@media (max-width: 700px) { .fwd-target { grid-template-columns: minmax(0, 1fr); } }
.dept-system { background: color-mix(in srgb, var(--brand) 3%, var(--surface)); }

/* loading: bar at the top while the next page is on its way, spinner on the pressed button */
.page-loader { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .15s; }
.page-loader::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--brand); animation: page-loader 1.1s ease-in-out infinite; }
.page-loader.on { opacity: 1; }
@keyframes page-loader { to { left: 100%; } }
body.is-loading main { opacity: .6; transition: opacity .2s .15s; pointer-events: none; }
.btn.btn-busy { position: relative; color: transparent !important; }
.btn.btn-busy > * { visibility: hidden; }
.btn.btn-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-color: var(--brand) var(--brand) transparent transparent; border-radius: 50%; animation: act-spin .7s linear infinite; }
.btn-primary.btn-busy::after { border-color: #fff #fff transparent transparent; }
select.is-busy { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .page-loader::before { animation: none; left: 0; width: 100%; opacity: .6; } .btn.btn-busy::after { animation-duration: 2s; } }

/* Report (0.13.0): catalogue, preview, scheduled sending and print template editor (as the NexoraOne print editor) */
.report-tile { display: flex; flex-direction: column; margin: 0; }
.report-tile h2 a { color: inherit; }
.report-tile .btn-row { margin-top: auto; padding-top: .4rem; }
.report-toolbar { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; }
.report-toolbar .bi-filters, .report-toolbar .btn-row, .report-toolbar p { margin: 0; }
.report-fields .card { margin: 0; }
.report-fields { margin-bottom: 1.2rem; }
/* reports made of charts: half-width charts two by two, the others on the whole row */
.report-charts { margin-bottom: 1.2rem; }
.report-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; align-items: start; }
.report-charts .bi-wide .hm-cell { aspect-ratio: auto; height: 1.9rem; }
.hbars-wide .hbar { grid-template-columns: 12rem minmax(0, 1fr) 7.5rem; }
@media (max-width: 560px) { .hbars-wide .hbar { grid-template-columns: 6rem minmax(0, 1fr) 7rem; } }
.pe-chart { display: flex; align-items: center; justify-content: center; border: 1px dashed #b9b8b1; background: #f6f5f1; color: #6e7682; text-align: center; overflow: hidden; }
.pe-block.pe-half { display: inline-block; vertical-align: top; }
.table tr.row-muted td { color: var(--muted); }
.report-editor .editor-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
.report-editor .editor-side .card { margin-top: 0; }
.le-el img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: left top; pointer-events: none; }
.pe-block:hover .pe-tag, .pe-block.selected .pe-tag { display: block; }
.pe-table th, .pe-table td { border: 1px solid #d2d6dc; padding: 1px 2px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pe-pagebreak { border-top: 2px dashed #94a3b8; color: #94a3b8; font-size: 10px; text-align: center; padding-top: 2px; }
@media (max-width: 1100px) { .report-editor .editor-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .report-toolbar { flex-direction: column; align-items: stretch; } }
/* scheduled sending form: time and number fields as tall as the selects beside them */
[data-schedule-form] input:not([type="checkbox"]), [data-schedule-form] select { height: 42px; box-sizing: border-box; }
.report-editor .zoom-row span { white-space: nowrap; }
/* the zoom slider on the centre line of the fields beside it (same top margin and height as an input) */
.report-editor .zoom-row { margin: .3rem 0 0; min-height: 2.62rem; }

/* audio files of the phone system: select with a listen button, music on hold by department */
[data-audio-upload] input[type="file"] { height: 2.62rem; padding-top: 0; padding-bottom: 0; line-height: 2.5rem; }
.audio-pick { display: flex; align-items: stretch; gap: 0; }
label > .audio-pick { margin-top: .3rem; }
.audio-pick select { flex: 1 1 auto; min-width: 0; height: 2.62rem; margin: 0; padding-top: 0; padding-bottom: 0; }
.audio-pick .audio-play { flex: 0 0 auto; width: 38px; height: auto; padding: 0; margin-left: -1px; }
.audio-play.is-playing, .act.is-playing { color: var(--brand); border-color: var(--brand); }
.moh-list { display: grid; gap: 0; margin-top: .4rem; }
.moh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem .6rem; padding: .7rem 0; border-top: 1px solid var(--border); margin: 0; }
.moh-row .moh-label { grid-column: 1 / -1; }
.moh-row:first-child { border-top: 0; }
.moh-label { display: flex; align-items: baseline; gap: .45rem; line-height: 1.25; }
.moh-label small { font-size: .76rem; }

/* Mobile: no automatic zoom and no jumps. iOS Safari zooms in on fields with text under 16px when they get the focus
   (the sign-in page focuses the e-mail field at once) and the page then slides; 100vh changes while the browser bar
   shows and hides, 100dvh follows the visible height. */
@media (max-width: 900px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px; }
}
@supports (min-height: 100dvh) {
  .auth-split { min-height: 100dvh; }
  body.guest { min-height: 100dvh; }
}
@media (max-width: 900px) {
  .auth-main { min-height: 100dvh; overflow-anchor: none; }
}

/* extensions of a ring group or queue: available on the left, chosen (in order) on the right */
.dual-grid { display: grid; grid-template-columns: minmax(0, .85fr) 44px minmax(0, 1.15fr); gap: .75rem; align-items: stretch; margin-top: .35rem; }
.dual:not(.is-js) .dual-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dual-available { order: 1; }
.dual-move { order: 2; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.dual-chosen { order: 3; counter-reset: dual; }
.dual-move .btn { width: 44px; padding: 0; }
.dual-pane { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-strong); background: var(--surface); }
.dual-head { display: flex; flex-direction: column; justify-content: center; gap: .1rem; height: 56px; padding: 0 .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dual-head strong { font-size: .86rem; }
.dual-head small { font-size: .74rem; line-height: 1.25; }
.dual-head input[type="search"] { margin: 0; height: 36px; padding-top: 0; padding-bottom: 0; }
.dual-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 200px; max-height: 330px; overflow: auto; }
.dual-item + .dual-item { border-top: 1px solid var(--border); }
.dual-item label { display: flex; align-items: center; gap: .6rem; min-height: 40px; user-select: none; margin: 0; padding: .35rem .5rem .35rem .75rem; font-size: .86rem; font-weight: 400; cursor: pointer; }
.dual-item:hover label, .dual-item:focus-visible label { background: var(--surface-2); }
.dual-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.dual-num { flex: 0 0 auto; min-width: 3.2rem; color: var(--muted); font-size: .8rem; }
.dual-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.dual-dept { flex: 0 1 auto; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .75rem; }
.dual.is-js .dual-item input[type="checkbox"] { display: none; }
.dual:not(.is-js) .dual-item input[type="checkbox"] { width: auto; margin: 0; box-shadow: none; }
.dual-tools { display: flex; align-items: center; margin-left: auto; flex: 0 0 auto; }
.dual-tools .act { width: 28px; height: 28px; margin: 0; }
.dual-tools .act:disabled { opacity: .3; cursor: default; background: none; }
.dual-add { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--muted); opacity: .45; transition: opacity .12s, color .12s; }
.dual-item:hover .dual-add, .dual-item:focus-visible .dual-add { opacity: 1; color: var(--brand); }
.dual.is-js .dual-chosen .dual-item { counter-increment: dual; }
.dual.is-js .dual-chosen .dual-item label { gap: .4rem; padding-left: .4rem; cursor: default; }
.dual.is-js .dual-chosen .dual-dept { display: none; }
.dual.is-js .dual-chosen .dual-num { min-width: 2.2rem; }
.dual.is-js .dual-chosen .dual-item label::before { content: counter(dual); flex: 0 0 1.3rem; text-align: right; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.dual-grip { display: inline-grid; place-items: center; width: 22px; height: 28px; color: var(--muted); cursor: grab; flex: 0 0 auto; touch-action: none; }
.dual-item.is-dragging .dual-grip { cursor: grabbing; }
.dual-grip .ic { width: 16px; height: 16px; }
.dual-item.is-dragging { opacity: .55; background: var(--surface-3); }
.dual-empty { margin: 0; padding: 1rem .75rem; font-size: .84rem; }
@media (max-width: 760px) {
  .dual-grid, .dual:not(.is-js) .dual-grid { grid-template-columns: minmax(0, 1fr); }
  .dual-move { flex-direction: row; justify-content: center; }
  .dual-move .btn .ic { transform: rotate(90deg); }
  .dual-list { min-height: 120px; max-height: 260px; }
  /* on a phone the arrows move the agents (no handle): the name gets the room and goes on two lines if needed */
  .dual.is-js .dual-chosen .dual-grip { display: none; }
  .dual.is-js .dual-chosen .dual-name { white-space: normal; }
}

/* sections of a long form (e.g. Menu, Destinazioni, Opzioni of a digital receptionist) */
.form-section { margin: 1.4rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form > .form-section:first-of-type { margin-top: .4rem; }
.office-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1rem; align-items: start; margin-bottom: .75rem; }
.office-route select { height: 36px; padding-top: 0; padding-bottom: 0; }
.keys-menu .hint { margin: 0 0 .6rem; }
@media (max-width: 760px) { .office-route { grid-template-columns: minmax(0, 1fr); } }

/* BLF keys of an extension: rows in order, the phone with its lamps on the side */
.blf-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-strong); background: var(--surface); }
.blf-row { display: grid; grid-template-columns: 2rem minmax(170px, 280px) minmax(0, 1fr); gap: .6rem; align-items: center; padding: .45rem .6rem; min-height: 50px; }
.blf-list.is-js .blf-row { grid-template-columns: 22px 1.6rem minmax(170px, 280px) minmax(0, 1fr) auto; }
.blf-row + .blf-row { border-top: 1px solid var(--border); }
.blf-row.is-dragging { opacity: .55; background: var(--surface-3); }
.blf-row select, .blf-row input { margin: 0; height: 36px; padding-top: 0; padding-bottom: 0; }
.blf-no { color: var(--muted); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.blf-value { min-width: 0; }
.blf-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
.blf-custom input:first-child { grid-column: 1 / -1; }
.blf-custom[hidden] { display: none; }
.sort-grip { display: inline-grid; place-items: center; width: 22px; height: 28px; color: var(--muted); cursor: grab; touch-action: none; }
.sort-grip .ic { width: 16px; height: 16px; }
.sort-tools { display: flex; }
.sort-tools .act { width: 28px; height: 28px; margin: 0; }
.sort-tools .act:disabled { opacity: .3; cursor: default; background: none; }
.blf-add { display: flex; align-items: center; gap: .9rem; margin: .75rem 0 0; }
.blf-side { display: grid; gap: 1rem; align-content: start; }
.blf-side-hint { font-size: .82rem; margin: -.2rem 0 .7rem; }
.blf-phone { list-style: none; margin: 0; padding: .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; background: var(--surface-2); border: 1px solid var(--border); }
.blf-key { display: flex; align-items: center; gap: .45rem; min-width: 0; height: 32px; padding: 0 .5rem; background: var(--surface); border: 1px solid var(--border); font-size: .78rem; }
.blf-key .blf-no { flex: 0 0 auto; min-width: 1.1rem; text-align: left; }
.blf-key .blf-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blf-key.is-empty .blf-label { color: var(--muted); font-style: italic; }
.blf-led { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.blf-led.led-none { background: transparent; border: 1px solid var(--border-strong); }
.blf-led.led-free { background: var(--ok); }
.blf-led.led-busy { background: var(--danger); }
.blf-led.led-ringing { background: var(--danger); animation: ext-blink-dot 1s steps(1) infinite; }
.blf-led.led-away { background: var(--warn); }
.blf-led.led-offline { background: var(--muted); opacity: .45; }
.blf-legend { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--muted); }
.blf-legend li { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 760px) {
  .blf-row, .blf-list.is-js .blf-row { grid-template-columns: 22px 1.4rem minmax(0, 1fr) auto; }
  .blf-list.is-js .blf-value, .blf-row .blf-value { grid-column: 3 / -1; }
  .blf-custom { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .blf-led.led-ringing { animation: none; } }

/* read-only views of the configuration: cards by section, also when the changes are blocked */
.ro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 980px) { .ro-grid { grid-template-columns: minmax(0, 1fr); } }
.ro-card h2 { margin-bottom: .6rem; }
.ro-card-wide { grid-column: 1 / -1; }
.ro-sub { margin: 1rem 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ro-members { margin: 0; padding: 0; list-style: none; counter-reset: ro; border: 1px solid var(--border); }
.ro-members li { counter-increment: ro; display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; font-size: .86rem; }
.ro-members li + li { border-top: 1px solid var(--border); }
.ro-members li::before { content: counter(ro); min-width: 1.2rem; text-align: right; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ro-members .mono { color: var(--muted); min-width: 3rem; }
.ro-keys { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ro-keys th { width: 3rem; padding: .3rem 0; text-align: left; font-weight: 400; }
.ro-keys td { padding: .3rem 0; border-bottom: 1px solid var(--border); }
.ro-keys tr:last-child td { border-bottom: 0; }
.ro-audio { display: inline-flex; align-items: center; gap: .3rem; }
.ro-audio .act { width: 26px; height: 26px; margin: 0; }
a.ro-link { color: var(--brand); font-weight: 600; text-decoration: none; }
a.ro-link:hover { text-decoration: underline; }
.ro-fwd { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.ro-fwd-state { border: 1px solid var(--border); padding: .6rem .8rem .2rem; }
.ro-fwd-state.is-current { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.ro-fwd-state h3 { margin: 0 0 .3rem; font-size: .9rem; }
.ro-fwd-state .dl { grid-template-columns: minmax(110px, 42%) 1fr; font-size: .82rem; }
.ro-blf { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* the CallPulse user linked to an extension: the list of users narrows on a phone instead of pushing the page */
.link-user label { flex: 1 1 16rem; min-width: 0; max-width: 32rem; }
.link-user select { width: 100%; min-width: 0; }

/* Impostazioni › Centralino 3CX › Telefoni: few codecs, no search (the title stays) */
.phone-defaults .dual-available [data-dual-search] { display: none; }
.phone-defaults .dual-grid { max-width: 56rem; }
.phone-defaults .dual-list { min-height: 0; }

/* Wizard: rows to choose (the whole row selects its radio), what was chosen in the previous steps */
.wizard-pick tbody tr { cursor: pointer; }
.wizard-pick tbody tr:hover { background: var(--surface-2); }
.wizard-pick tbody tr:has(input:checked) { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.wizard-pick td:first-child { width: 2rem; }
.wizard-pick input[type="radio"] { margin: 0; }
.wizard-cell { display: block; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.wizard-chosen { padding-top: .8rem; padding-bottom: .8rem; }
.wizard-chosen .dl { margin: 0; grid-template-columns: 7rem 1fr; }

/* Tiles that open a page (wizards and the like), without a number: icon beside the title, description below, arrow on
   the right. The tiles with a number are .stat */
.action-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
a.action-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: .9rem; row-gap: .25rem; align-items: start; align-content: start; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); transition: border-color .15s; }
a.action-tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.action-tile-icon { grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 11%, transparent); color: var(--brand); }
.action-tile-icon .ic { width: 20px; height: 20px; vertical-align: 0; }
.action-tile-title { grid-column: 2; font-weight: 600; font-size: .95rem; line-height: 1.3; padding-top: .15rem; }
.action-tile-text { grid-column: 2; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.action-tile-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--muted); }
a.action-tile:hover .action-tile-go { color: var(--brand); }

/* Percorso chiamata, in the CallPulse brand look (brochure «Il viaggio di una chiamata»): the caller and the end in
   night blue, the steps as white cards with the red line icon on a pink square, night blue arrows, the heartbeat as
   the timeline. Fixed brand colours: the organisation colour does not change them. */
.flow, .flow-timeline, .flow-legend { --cp-red: #ff1734; --cp-navy: #11142a; --cp-pink: #ffe8eb; --cp-blue: #2b6fd6; --cp-green: #16a34a; --cp-amber: #f5a524; --cp-grey: #a3a9bf; }
:root[data-theme="dark"] :is(.flow, .flow-timeline, .flow-legend) { --cp-pink: rgba(255, 23, 52, .16); --cp-navy: #1b2042; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] :is(.flow, .flow-timeline, .flow-legend) { --cp-pink: rgba(255, 23, 52, .16); --cp-navy: #1b2042; } }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.9rem; align-items: stretch; }
.flow-node { position: relative; flex: 1 1 13.5rem; min-width: 11rem; max-width: 19rem; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .6rem; row-gap: .2rem; align-content: start;
  padding: .7rem .8rem .7rem .7rem; border: 1px solid var(--border); border-left: 4px solid var(--cp-grey); background: var(--surface); font-size: .85rem; }
.flow-node > * { grid-column: 2; }
.flow-node + .flow-node::before { content: ""; position: absolute; left: calc(-1.9rem + 2px); top: 50%; width: calc(1.9rem - 12px); height: 2px; background: var(--cp-navy); }
.flow-node + .flow-node::after { content: ""; position: absolute; left: -11px; top: calc(50% - 5px); border: 6px solid transparent; border-left-color: var(--cp-navy); border-right-width: 0; }
.flow-icon { grid-column: 1; grid-row: 1 / span 6; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: var(--cp-pink); color: var(--cp-red); }
.flow-icon .ic { width: 18px; height: 18px; }
.flow-kind { color: var(--muted); font-size: .68rem; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-node strong { font-size: .95rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.flow-node small { color: var(--muted); font-size: .75rem; line-height: 1.35; }
.flow-node .flow-event { color: var(--text-2); }
.flow-node .badge { justify-self: start; }
.flow-answered { border-left-color: var(--cp-green); }
.flow-missed { border-left-color: var(--cp-red); }
.flow-caller, .flow-end { background: var(--cp-navy); border-color: var(--cp-navy); color: #fff; }
.flow-caller .flow-icon, .flow-end .flow-icon { background: var(--cp-red); color: #fff; }
.flow-caller .flow-kind, .flow-end .flow-kind { color: #ff8a99; }
.flow-caller small, .flow-end small { color: #d9dbe8; }
.flow-stat-name { font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.flow-timeline { display: grid; gap: .35rem; }
.flow-lane { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.flow-lane-label { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: .5rem; border-left: 4px solid var(--cp-grey); }
.flow-lane-label.flow-caller { border-left-color: var(--cp-navy); background: none; color: inherit; }
.flow-lane-label.flow-extension, .flow-lane-label.flow-external { border-left-color: var(--cp-green); }
.flow-track { position: relative; height: 1.4rem; background: var(--surface-2); border: 1px solid var(--border); }
.flow-bar { position: absolute; top: 3px; bottom: 3px; min-width: 3px; }
.flow-bar-caller { background: color-mix(in srgb, var(--cp-navy) 22%, transparent); }
.flow-bar-ring { background: repeating-linear-gradient(135deg, var(--cp-amber) 0 3px, transparent 3px 6px); }
.flow-bar-waiting { background: var(--cp-blue); }
.flow-bar-talk { background: var(--cp-green); }
.flow-bar-consult { background: var(--cp-navy); }
.flow-bar-missed { background: var(--cp-red); }
.flow-beat .flow-track { height: 3rem; background: none; border: 0; }
.flow-beat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-beat path { fill: none; stroke: var(--cp-red); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.flow-beat .flow-lane-label { border-left-color: var(--cp-red); font-weight: 600; }
.flow-scale .flow-track { height: 1.1rem; background: none; border: 0; }
.flow-scale .flow-track span { position: absolute; top: 0; transform: translateX(-50%); font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.flow-scale .flow-track span:first-child { transform: none; }
.flow-scale .flow-track span:last-child { transform: translateX(-100%); }
.flow-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .8rem 0 0; padding: 0; font-size: .78rem; color: var(--muted); }
.flow-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.flow-legend span { display: inline-block; width: 18px; height: 10px; }
@media (max-width: 760px) {
  .flow { flex-direction: column; gap: 1.5rem; }
  .flow-node { flex-basis: auto; width: 100%; min-width: 0; max-width: none; }
  .flow-node + .flow-node::before { left: 1.75rem; top: calc(-1.5rem + 2px); width: 2px; height: calc(1.5rem - 12px); }
  .flow-node + .flow-node::after { left: calc(1.75rem - 5px); top: -11px; border: 6px solid transparent; border-top-color: var(--cp-navy); border-bottom-width: 0; }
  .flow-lane { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* Wizard «Importa interni da Excel»: columns of the sheet with their samples, rows checked */
.import-col { display: block; margin-top: .1rem; color: var(--muted); font-size: .75rem; font-weight: 400; }
.import-samples { max-width: 26rem; }
.import-chip { display: inline-block; margin: .1rem .25rem .1rem 0; padding: .1rem .4rem; background: var(--surface-3); font-family: var(--mono); font-size: .76rem; }
.import-map select { min-width: 13rem; margin: 0; }
.import-map tr.is-skipped td, .import-preview tr.is-skipped td { color: var(--muted); }
.import-preview tr.import-error td, .table tr.import-error td { background: var(--danger-bg); }
.import-msg { min-width: 12rem; font-size: .82rem; }
.import-preview input[type="checkbox"] { margin: 0; }

/* Modelli e-mail: the texts on the left, the e-mail as it arrives on the right (always light, like the e-mail) */
.mail-tpl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.mail-tpl .card { margin: 0; }
.mail-tpl-form textarea { min-height: 15rem; line-height: 1.5; }
.mail-vars { border: 1px solid var(--border); background: var(--surface-2); padding: .6rem .8rem; font-size: .82rem; }
.mail-vars ul { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; }
.mail-vars code { color: var(--brand); }
.mail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; margin: 0 0 .6rem; font-size: .85rem; }
.mail-head dt { color: var(--muted); }
.mail-head dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mail-preview { background: #f4f5f9; border: 1px solid var(--border); overflow: auto; margin-bottom: .8rem; color-scheme: light; }
.mail-preview img { max-width: 100%; }
@media (max-width: 1100px) { .mail-tpl { grid-template-columns: minmax(0, 1fr); } }

/* Search in long selects (data-autocomplete): the group of each entry, and the box inside the rows of keys and forwardings */
.ac-list li .ac-group { float: right; margin-left: .75rem; color: var(--muted); font-size: .75rem; }
.ac-list li.active .ac-group { color: var(--text-2); }
.key-row .ac { flex: 1; min-width: 0; margin: 0; }
.key-row .ac .ac-input { height: 2.1rem; padding-top: 0; padding-bottom: 0; font-size: .85rem; }
.blf-value .ac, .fwd-target .ac { flex: 1; min-width: 0; margin: 0; }
.blf-value .ac .ac-input, .fwd-target .ac .ac-input { margin: 0; }
.blf-row .ac .ac-input, .office-route .ac .ac-input { height: 36px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
/* «+» for a new extension next to the destinations (keys of a menu, BLF keys, office routes) and its preview */
.key-row .quick-add-row { flex: 1; min-width: 0; margin: 0; gap: .3rem; }
.key-row .quick-add-btn { width: 2.1rem; height: 2.1rem; }
.blf-value .quick-add-row, .fwd-target .quick-add-row { margin: 0; gap: .3rem; }
.blf-row .quick-add-btn, .office-route .quick-add-btn { height: 36px; }
.quick-preview p { margin: 0 0 .6rem; }
.quick-preview .table { margin-bottom: .6rem; }

/* Pagine di errore, in the CallPulse look (brochure cover): night blue with the red glow, white logo, the heartbeat,
   title on two lines with the full stop. Fixed brand colours, always dark (the page is the brand, not the theme). */
.errp { margin: 0; min-height: 100vh; display: flex; background: #0a0c1c linear-gradient(135deg, #1b2042, #0a0c1c); color: #fff; color-scheme: dark; }
.errp-wrap { flex: 1; display: flex; flex-direction: column; padding: 2rem clamp(1rem, 6vw, 4.5rem);
  background: radial-gradient(ellipse at 85% 18%, rgba(255, 23, 52, .30), rgba(255, 23, 52, 0) 55%); }
.errp-head a { display: inline-block; }
.errp-logo { width: 11.25rem; height: auto; display: block; }
.errp-main { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 40rem; padding: 2.5rem 0; }
.errp-kicker { color: #ff7a8c; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .9rem; }
.errp-title { font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.4rem; color: #fff; }
.errp-beat { display: block; width: 100%; height: 4.4rem; margin: 0 0 1.4rem; filter: drop-shadow(0 0 6px rgba(255, 23, 52, .6)); }
.errp-lead { font-size: 1.05rem; line-height: 1.6; color: #d9dbe8; margin: 0 0 .6rem; max-width: 33rem; }
.errp-detail { font-size: .9rem; line-height: 1.5; color: #a3a9bf; margin: 0 0 .6rem; max-width: 33rem; }
.errp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.errp-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.5rem; background: #ff1734; color: #fff; font-weight: 700; text-decoration: none; border: 1px solid #ff1734; }
.errp-btn:hover { background: #c8102e; border-color: #c8102e; color: #fff; }
.errp-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); }
.errp-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.errp-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: #8e92ae; }
@media (prefers-reduced-motion: no-preference) {
  .errp-beat path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: errp-draw 2.2s ease-out forwards; }
  @keyframes errp-draw { to { stroke-dashoffset: 0; } }
}