/* golgari design system (redesign 2026-10): tokens, shell and components on
   top of Tabler. Loaded after tabler.min.css and app.css.

   One system, one colour per app: <html data-gm-app="admin"> is blue,
   "portal" (Area clienti) is green. The brand colour only lives in the frame
   (sidebar tint, active item, 3px line under the top bar, app name, primary
   button, links, focus, the main chart series). Status never uses the brand
   colours: six tones, each with its own icon shape and an Italian label
   (see the "status" partial in _partials.html).

   Every token is written once with light-dark(): Tabler sets color-scheme
   from data-bs-theme, so both themes follow. Contrast: AA (>= 4.5:1) for the
   text-safe brand on white and the dark brand on the dark surfaces.

   Visual themes: these values are the theme «attuale». gm-themes.css
   (generated from themes/<key>.json, the designer's tokens) overrides the
   same custom properties on :root[data-gm-theme="a|b|c"], for the app
   (data-gm-app: density) and the mode (data-bs-theme). Rules below only
   read tokens: a colour, font, radius, size or shadow written in a rule is
   a bug (themes_test.go checks the token files' contrast). */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexSans-Regular.otf") format("opentype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/IBMPlexSans-Medium.otf") format("opentype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/static/fonts/IBMPlexSans-SemiBold.otf") format("opentype"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexSansCondensed-Regular.otf") format("opentype"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/static/fonts/IBMPlexSansCondensed-SemiBold.otf") format("opentype"); }

/* ------------------------------------------------------------------ tokens */
:root[data-gm-app] {
  --gm-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gm-font-num: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;

  /* neutrals: cool grey, white surfaces on a grey page */
  --gm-bg:        light-dark(#f1f3f6, #121519);
  --gm-surface:   light-dark(#ffffff, #1a1e24);
  --gm-surface-2: light-dark(#f7f8fa, #20252c);
  --gm-border:    light-dark(#dde2e8, #2d333b);
  --gm-border-strong: light-dark(#c5ccd5, #3b434d);
  --gm-ink:       light-dark(#1b2027, #e7eaee);
  --gm-ink-2:     light-dark(#3d4651, #c4cad2);
  --gm-muted:     light-dark(#5b6572, #9ba4af);

  /* status tones: text-safe ink on a soft tint */
  --gm-success: light-dark(#0b6b5f, #4cc9b4); --gm-success-bg: light-dark(#e1f3ef, rgba(76,201,180,.14));
  --gm-warning: light-dark(#a14400, #ff9f5a); --gm-warning-bg: light-dark(#fdeedf, rgba(255,159,90,.14));
  --gm-info:    light-dark(#5235b8, #a995f6); --gm-info-bg:    light-dark(#eeeafb, rgba(169,149,246,.15));
  --gm-paused:  light-dark(#6b5844, #c7b29b); --gm-paused-bg:  light-dark(#f1ece6, rgba(199,178,155,.14));
  --gm-danger:  light-dark(#b42318, #ff7b70); --gm-danger-bg:  light-dark(#fde9e7, rgba(255,123,112,.15));
  --gm-neutral: light-dark(#4d5662, #aeb6c0); --gm-neutral-bg: light-dark(#eceff3, rgba(174,182,192,.13));

  --gm-radius: 8px;
  --gm-radius-sm: 6px;
  --gm-radius-lg: var(--gm-radius);
  --gm-radius-pill: 999px;
  --gm-radius-badge: 4px;
  --gm-shadow: 0 1px 2px rgba(16,24,40,.04);
  --gm-shadow-pop: 0 8px 28px rgba(5,10,20,.32);
  --gm-shadow-sheet: 0 -8px 32px rgba(5,10,20,.4);
  --gm-shadow-bar: 0 -6px 20px rgba(16,24,40,.08);
  --gm-shadow-modal: var(--gm-shadow-pop);
  --gm-scrim: rgba(5,10,20,.55);

  /* theme roles: type, focus, sizes, components (gm-themes.css per theme) */
  --gm-font-display: var(--gm-font);
  --gm-font-kpi: var(--gm-font-num);
  --gm-text-body: .875rem;
  --gm-lh-base: 1.4285714286;
  --gm-lh-tight: 1.15;
  --gm-tracking-display: -.005em;
  --gm-title-size: 1.5rem;     --gm-title-weight: 600; --gm-title-lh: 1.75rem;
  --gm-card-title-size: .95rem; --gm-card-title-weight: 600;
  --gm-kpi-size: 1.75rem;      --gm-kpi-weight: 600; --gm-kpi-tracking: -.01em;
  --gm-nav-head-font: var(--gm-font); --gm-nav-head-style: normal; --gm-nav-head-size: .75rem;
  --gm-focus: var(--gm-brand); --gm-focus-width: 2px; --gm-focus-offset: 2px;
  --gm-brand-hover: light-dark(color-mix(in oklab, var(--gm-brand) 86%, #000), color-mix(in oklab, var(--gm-brand) 82%, #fff));
  --gm-brand-active: light-dark(color-mix(in oklab, var(--gm-brand) 78%, #000), color-mix(in oklab, var(--gm-brand) 72%, #fff));
  --gm-accent-line: var(--gm-brand);
  --gm-topline: 3px;
  --gm-topbar-line: var(--gm-accent-line); --gm-topbar-line-w: var(--gm-topline);
  --gm-toggler-filter: none; /* the menu icon on the side menu's tint (Tabler's icon follows the mode) */
  --gm-pad: 1.25rem;
  --gm-control-h: auto;
  --gm-btn-font: var(--gm-font); --gm-btn-weight: 500; --gm-btn-size: .875rem; --gm-btn-px: 1rem;
  --gm-input-bg: var(--gm-surface); --gm-input-border: light-dark(#848d99, #6c7684); /* >= 3:1 on the surfaces (WCAG 1.4.11) */ --gm-input-border-w: 1px;
  --gm-card-bg: var(--gm-surface); --gm-card-border: var(--gm-border); --gm-card-rule: 1px; --gm-card-rule-color: var(--gm-card-border);
  --gm-selected-bg: var(--gm-brand-soft); --gm-selected-ink: var(--gm-ink); --gm-selected-border: var(--gm-brand);
  --gm-ink-display: var(--gm-ink); --gm-header-bg: transparent; --gm-meter: var(--gm-brand);
  --gm-side-active-ink: var(--gm-side-ink);
  --gm-chart-1: var(--gm-brand); --gm-chart-2: var(--gm-muted);
  /* solid fills: progress meters, the counters, the solid buttons */
  --gm-track: light-dark(#e8ebf0, #2a3038);
  --gm-meter-warn: light-dark(#c25400, #ff9f5a);
  --gm-meter-crit: light-dark(#c4281c, #ff7b70);
  --gm-count-bg: light-dark(#c4281c, #ff7b70); --gm-on-count: light-dark(#fff, #2a0905);
  --gm-solid-success: light-dark(#0b6b5f, #2f9e8c);
  --gm-solid-warning: light-dark(#a14400, #d9741f);
  --gm-solid-info: light-dark(#5235b8, #7c63e0);
  --gm-solid-danger: light-dark(#b42318, #c4382d);
  --gm-on-solid: #fff;
  /* app.css's state lines (toasts, steps, diffs, draft bar): their own hex in «attuale» */
  --gm-shadow-toast: 0 8px 28px rgba(0,0,0,.35);
  --gm-ok-line: #2f9e44; --gm-err-line: #e03131; --gm-warn-line: #f59f00;

  /* Tabler on the tokens */
  --tblr-font-sans-serif: var(--gm-font);
  --tblr-body-font-size: var(--gm-text-body);
  --tblr-body-line-height: var(--gm-lh-base);
  --tblr-font-monospace: var(--gm-font-mono);
  --tblr-border-radius-pill: var(--gm-radius-pill);
  --tblr-body-bg: var(--gm-bg);
  --tblr-bg-surface: var(--gm-surface);
  --tblr-bg-surface-secondary: var(--gm-surface-2);
  --tblr-bg-forms: var(--gm-surface);
  --tblr-border-color: var(--gm-border);
  --tblr-border-color-translucent: var(--gm-border);
  --tblr-body-color: var(--gm-ink);
  --tblr-secondary: var(--gm-muted);
  --tblr-muted: var(--gm-muted);
  --tblr-secondary-color: var(--gm-muted);
  --tblr-heading-color: var(--gm-ink);
  --tblr-primary: var(--gm-brand);
  --tblr-link-color: var(--gm-brand-text);
  --tblr-link-hover-color: var(--gm-brand-text);
  --tblr-success: var(--gm-success); --tblr-warning: var(--gm-warning); --tblr-danger: var(--gm-danger); --tblr-info: var(--gm-info);
  --tblr-border-radius: var(--gm-radius-sm);
  --tblr-card-border-radius: var(--gm-radius);
  /* app.css names, kept for the pages that use them */
  --gm-sidebar-accent: var(--gm-brand);
  --gm-tint: var(--gm-brand-text);
  --gm-accent-soft: var(--gm-brand-text);
}
:root[data-gm-app][data-bs-theme="dark"] { --tblr-body-bg-rgb: 18, 21, 25; --tblr-body-color-rgb: 231, 234, 238; }
:root[data-gm-app][data-bs-theme="light"] { --tblr-body-bg-rgb: 241, 243, 246; --tblr-body-color-rgb: 27, 32, 39; }

/* Amministrazione: blue #1f55d6 (text #1a45ae, on dark #5a8cfa) */
:root[data-gm-app="admin"] {
  --gm-brand: light-dark(#1f55d6, #5a8cfa);
  --gm-brand-text: light-dark(#1a45ae, #7fa6fb);
  --gm-on-brand: light-dark(#ffffff, #0b1530);
  --gm-brand-soft: light-dark(#e3ebfc, rgba(90,140,250,.16));
  --gm-side-bg: light-dark(#dce6fb, #141c2e);
  --gm-side-ink: light-dark(#1d2a44, #d5def0);
  --gm-side-muted: light-dark(#4a5876, #8d9bb8);
  --gm-side-active: light-dark(#bcd0f7, #22325a);
  --gm-side-hover: light-dark(rgba(31,85,214,.08), rgba(255,255,255,.06));
  --tblr-primary-rgb: 31, 85, 214;
  --tblr-link-color-rgb: 26, 69, 174; --tblr-link-hover-color-rgb: 20, 52, 132;
}
:root[data-gm-app="admin"][data-bs-theme="dark"] { --tblr-primary-rgb: 90, 140, 250; --tblr-link-color-rgb: 127, 166, 251; --tblr-link-hover-color-rgb: 166, 194, 252; }

/* Area clienti: green #15843d (text #146a33, on dark #3dbe66) */
:root[data-gm-app="portal"] {
  --gm-brand: light-dark(#15843d, #3dbe66);
  --gm-brand-text: light-dark(#146a33, #5fd283);
  --gm-on-brand: light-dark(#ffffff, #07210f);
  --gm-brand-soft: light-dark(#e0f3e6, rgba(61,190,102,.15));
  --gm-side-bg: light-dark(#d5f2de, #12221a);
  --gm-side-ink: light-dark(#163322, #d3e9da);
  --gm-side-muted: light-dark(#40604b, #8aa995);
  --gm-side-active: light-dark(#ade6bf, #1d3a28);
  --gm-side-hover: light-dark(rgba(21,132,61,.09), rgba(255,255,255,.06));
  --tblr-primary-rgb: 21, 132, 61;
  --tblr-link-color-rgb: 20, 106, 51; --tblr-link-hover-color-rgb: 14, 80, 38;
}
:root[data-gm-app="portal"][data-bs-theme="dark"] { --tblr-primary-rgb: 61, 190, 102; --tblr-link-color-rgb: 95, 210, 131; --tblr-link-hover-color-rgb: 140, 224, 166; }

/* ------------------------------------------------------------------ base */
body { font-family: var(--gm-font); background: var(--gm-bg); color: var(--gm-ink); font-size: var(--gm-text-body); line-height: var(--gm-lh-base); -webkit-font-smoothing: antialiased; }
code, pre, samp, .font-monospace { font-family: var(--gm-font-mono) !important; }
a { color: var(--gm-brand-text); }
:focus-visible { outline: var(--gm-focus-width) solid var(--gm-focus); outline-offset: var(--gm-focus-offset); }
.text-muted, .text-secondary { color: var(--gm-muted) !important; }
.gm-num, .table td.text-end, .table th.text-end, .gm-meter-v { font-family: var(--gm-font-num); font-variant-numeric: tabular-nums; }
.gm-kpi-v, .h1 { font-family: var(--gm-font-kpi); font-variant-numeric: tabular-nums; }
.text-success { color: var(--gm-success) !important; }
.text-warning { color: var(--gm-warning) !important; }
.text-danger  { color: var(--gm-danger) !important; }
.text-info    { color: var(--gm-info) !important; }

/* ------------------------------------------------------------------ shell: sidebar */
.page { background: var(--gm-bg); }
.navbar-vertical.gm-sidebar { --tblr-sidebar-width: 15rem; width: var(--tblr-sidebar-width); background: var(--gm-side-bg) !important; color: var(--gm-side-ink);
  border-right: 1px solid color-mix(in oklab, var(--gm-side-ink) 10%, transparent); box-shadow: none; }
@media (min-width: 992px) { .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-inline-start: 15rem; } }
.gm-sidebar .container-fluid { padding: 0; }
.gm-sidebar .navbar-collapse { padding-bottom: 0; }
.gm-sidebar .navbar-nav { padding: .25rem .6rem 1rem !important; gap: 1px; }
.gm-sidebar .gm-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem .9rem; margin: 0; color: var(--gm-side-ink) !important; text-decoration: none; font-size: 1rem; }
.gm-logo { width: 1.85rem; height: 1.85rem; flex: none; border-radius: var(--gm-radius-sm); background: var(--gm-brand); color: var(--gm-on-brand); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1.05rem; line-height: 1; padding-bottom: .12rem; }
.gm-brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.gm-brand-t b { font-weight: 600; font-size: .95rem; color: var(--gm-side-ink); }
.gm-brand-t span { font-weight: 600; font-size: .78rem; color: var(--gm-brand-text); }
.gm-sidebar .gm-nav-head { font-family: var(--gm-nav-head-font); font-style: var(--gm-nav-head-style); font-size: var(--gm-nav-head-size); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gm-side-muted); padding: .9rem .65rem .3rem; list-style: none; }
.gm-sidebar .nav-link { color: var(--gm-side-ink) !important; border-radius: var(--gm-radius-sm); margin: 0; padding: .42rem .65rem; min-height: 2.1rem; font-size: .84rem; position: relative; }
.gm-sidebar .nav-link .nav-link-icon { color: var(--gm-side-muted) !important; width: 1.15rem; margin-right: .55rem; opacity: 1; }
.gm-sidebar .nav-link:hover { background: var(--gm-side-hover); }
.gm-sidebar.navbar-vertical[class*=navbar-expand] .navbar-nav .nav-item.active > .nav-link,
.gm-sidebar .nav-item.active > .nav-link { background: var(--gm-side-active); color: var(--gm-side-active-ink) !important; font-weight: 600; }
.gm-sidebar .nav-item.active > .nav-link::before { content: ""; position: absolute; left: -.6rem; top: .3rem; bottom: .3rem; width: var(--gm-topline); border-radius: 0 var(--gm-radius-sm) var(--gm-radius-sm) 0; background: var(--gm-accent-line); }
.gm-sidebar .nav-item.active > .nav-link .nav-link-icon { color: var(--gm-brand-text) !important; }
.gm-sidebar .nav-link:focus-visible { outline: var(--gm-focus-width) solid var(--gm-focus); outline-offset: calc(-1 * var(--gm-focus-width)); }
/* collapsible groups (admin): <details> keeps them keyboard-usable, no JS */
.gm-navgrp { list-style: none; }
.gm-navgrp > summary { list-style: none; display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .5rem .65rem; border-radius: var(--gm-radius-sm);
  font-size: .8rem; font-weight: 600; color: var(--gm-side-ink); user-select: none; }
.gm-navgrp > summary::-webkit-details-marker { display: none; }
.gm-navgrp > summary:hover { background: var(--gm-side-hover); }
.gm-navgrp > summary .gm-navgrp-n { margin-left: auto; font-weight: 400; color: var(--gm-side-muted); font-size: .75rem; font-family: var(--gm-font-num); }
.gm-navgrp > summary::after { content: "\ea61"; font-family: "tabler-icons"; font-weight: 400; color: var(--gm-side-muted); transition: transform .15s; } /* ti-chevron-right */
.gm-navgrp[open] > summary::after { transform: rotate(90deg); }
.gm-navgrp > ul { list-style: none; padding: 0 0 .25rem; margin: 0; }
.gm-navgrp-has > summary { color: var(--gm-brand-text); }
.gm-sidebar-foot { padding: .75rem .9rem .9rem; margin-top: auto; border-top: 1px solid color-mix(in oklab, var(--gm-side-ink) 12%, transparent); color: var(--gm-side-ink); }
.gm-me { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; min-width: 0; }
.gm-avatar { width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600;
  background: var(--gm-brand-soft); color: var(--gm-brand-text); border: 1px solid color-mix(in oklab, var(--gm-brand) 30%, transparent); text-transform: uppercase; }
.gm-me-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gm-me-t b { font-weight: 600; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-me-t span { font-size: .75rem; color: var(--gm-side-muted); }
.gm-sidebar-foot .btn { color: var(--gm-side-ink); border-color: color-mix(in oklab, var(--gm-side-ink) 18%, transparent); background: transparent; }
.gm-sidebar-foot .btn:hover { background: var(--gm-side-hover); }
.gm-sidebar-foot .text-muted, .gm-sidebar-foot .text-muted a { color: var(--gm-side-muted) !important; }
.gm-side-org, .gm-side-role { color: var(--gm-side-ink); }
.gm-sidebar .navbar-toggler { margin: .7rem .8rem; border-color: color-mix(in oklab, var(--gm-side-ink) 25%, transparent); }
.gm-sidebar .navbar-toggler-icon { filter: var(--gm-toggler-filter); }
@media (max-width: 991.98px) {
  .navbar-vertical.gm-sidebar { width: 100%; position: sticky; top: 0; z-index: 1030; flex-direction: row; }
  .gm-sidebar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .gm-sidebar .gm-brand { order: -1; padding: .6rem 1rem; }
  .gm-sidebar .navbar-collapse { flex-basis: 100%; max-height: 75vh; overflow-y: auto; }
}

/* ------------------------------------------------------------------ shell: top bar */
.gm-topbar { display: flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: .45rem 1.5rem; background: var(--gm-surface);
  border-bottom: var(--gm-topbar-line-w) solid var(--gm-topbar-line); position: sticky; top: 0; z-index: 1020; }
@media (max-width: 991.98px) { .gm-topbar { position: static; } }
.gm-search-btn { display: flex; align-items: center; gap: .55rem; min-width: 0; width: min(28rem, 100%); flex: 0 1 28rem; color: var(--gm-muted); font-size: .84rem;
  background: var(--gm-surface-2); border: 1px solid var(--gm-border); border-radius: var(--gm-radius-sm); padding: .38rem .7rem; text-align: left; }
.gm-search-btn:hover { border-color: var(--gm-border-strong); color: var(--gm-ink-2); }
.gm-search-btn kbd { margin-left: auto; font: 500 .7rem var(--gm-font-num); background: var(--gm-surface); color: var(--gm-muted); border: 1px solid var(--gm-border); box-shadow: none; padding: .05rem .35rem; }
.gm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--gm-radius-sm); color: var(--gm-ink-2);
  background: transparent; border: 1px solid transparent; font-size: 1.15rem; text-decoration: none; }
.gm-iconbtn:hover { background: var(--gm-surface-2); border-color: var(--gm-border); color: var(--gm-ink); }
.gm-topbar .btn-primary { min-height: 2.25rem; }
.gm-topbar-org { color: var(--gm-ink-2); font-weight: 500; }
/* the live indicator lives in the top bar (app.js mounts it in #gm-live-slot) */
#gm-live-slot { display: inline-flex; }
#gm-live-slot .gm-lvb { position: static; box-shadow: none; opacity: 1; background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 999px;
  padding: .2rem .65rem; font-size: .76rem; color: var(--gm-ink-2); max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gm-live-slot .gm-lvb-dot { background: var(--gm-success); }
#gm-live-slot .gm-lvb-err .gm-lvb-dot, #gm-live-slot .gm-lvb.gm-lvb-err .gm-lvb-dot { background: var(--gm-warning); }
#gm-live-slot .gm-lvb.gm-lvb-stop .gm-lvb-dot { background: var(--gm-danger); }
@media (max-width: 575.98px) {
  .gm-topbar { padding: .45rem .75rem; gap: .4rem; }
  .gm-search-btn kbd, .gm-hide-xs { display: none !important; }
  #gm-live-slot .gm-lvb-t { display: none; }
  #gm-live-slot .gm-lvb { padding: .45rem; }
}

/* ------------------------------------------------------------------ page header */
.page-header { margin: 0; padding: 1.25rem 0 .25rem; }
.page-header .page-title { font-family: var(--gm-font-display); font-size: clamp(1.3rem, 7vw, var(--gm-title-size)); font-weight: var(--gm-title-weight); line-height: var(--gm-title-lh); color: var(--gm-ink-display); letter-spacing: var(--gm-tracking-display); }
.page-wrapper > main > .page-header, .page-wrapper > .page-header { background: var(--gm-header-bg); }
.gm-crumbs { font-size: .8rem; color: var(--gm-muted); margin-bottom: .3rem; }
.gm-crumbs a { color: var(--gm-muted); text-decoration: none; }
.gm-crumbs a:hover { color: var(--gm-brand-text); text-decoration: underline; }
.gm-page-sub { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--gm-muted); font-size: .84rem; margin-top: .3rem; }
.gm-page-sub b { color: var(--gm-ink-2); font-weight: 500; }
.page-body { margin-top: 1rem; margin-bottom: 2.5rem; }
@media (max-width: 575.98px) { .page-header .page-title { font-size: min(1.3rem, var(--gm-title-size)); } .page-body .container-xl, .page-header .container-xl { padding-inline: 1rem; } }

/* ------------------------------------------------------------------ buttons */
.btn { font-family: var(--gm-btn-font); font-weight: var(--gm-btn-weight); border-radius: var(--gm-radius-sm); --tblr-btn-border-color: var(--gm-border-strong); min-height: var(--gm-control-h); }
.btn:where(:not(.btn-sm):not(.btn-lg):not(.btn-icon)) { --tblr-btn-padding-x: var(--gm-btn-px); --tblr-btn-font-size: var(--gm-btn-size); }
.btn-sm, .btn-icon { min-height: 0; }
.btn:not([class*="btn-"]), .btn-outline-secondary, .btn-secondary { background: var(--gm-surface); color: var(--gm-ink); border-color: var(--gm-border-strong); }
.btn:not([class*="btn-"]):hover { background: var(--gm-surface-2); border-color: var(--gm-muted); }
.btn-primary { --tblr-btn-bg: var(--gm-brand); --tblr-btn-border-color: var(--gm-brand); --tblr-btn-color: var(--gm-on-brand); --tblr-btn-hover-color: var(--gm-on-brand);
  --tblr-btn-hover-bg: var(--gm-brand-hover); --tblr-btn-hover-border-color: var(--gm-brand-hover);
  --tblr-btn-active-bg: var(--gm-brand-active); background: var(--gm-brand); border-color: var(--gm-brand); color: var(--gm-on-brand); }
.btn-primary:hover { background: var(--gm-brand-hover); border-color: var(--gm-brand-hover); color: var(--gm-on-brand); }
.btn-danger { background: var(--gm-solid-danger); border-color: var(--gm-solid-danger); color: var(--gm-on-solid); }
@media (max-width: 575.98px) { .btn { min-height: 2.75rem; } .btn-sm { min-height: 2.25rem; } } /* 44px touch targets */

/* ------------------------------------------------------------------ cards */
.card { --tblr-card-spacer-x: var(--gm-pad); --tblr-card-spacer-y: var(--gm-pad); background: var(--gm-card-bg); border: 1px solid var(--gm-card-border); border-top: var(--gm-card-rule) solid var(--gm-card-rule-color); border-radius: var(--gm-radius-lg); box-shadow: var(--gm-shadow); }
.card-header { border-bottom: 1px solid var(--gm-border); padding: .9rem 1rem; background: transparent; }
.card-title { font-family: var(--gm-font-display); font-size: var(--gm-card-title-size); font-weight: var(--gm-card-title-weight); color: var(--gm-ink-display); }
.card-title > .ti:first-child { color: var(--gm-muted); }
.card-subtitle, .gm-card-sub { color: var(--gm-muted); font-size: .8rem; font-weight: 400; }
.card-actions a:not(.btn) { font-weight: 600; text-decoration: none; }
.subheader { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gm-muted); }

/* KPI tile: label, big tabular value, a delta with an arrow (never colour alone) */
.gm-kpi .card-body { padding: 1rem 1.05rem; }
.gm-kpi .subheader { margin-bottom: .25rem; }
.gm-kpi .h1, .gm-kpi-v { font-family: var(--gm-font-kpi); font-size: var(--gm-kpi-size); font-weight: var(--gm-kpi-weight); line-height: var(--gm-lh-tight); letter-spacing: var(--gm-kpi-tracking); color: var(--gm-ink-display); margin-bottom: .25rem !important; }
.gm-kpi .h1.text-danger { color: var(--gm-danger) !important; }
.gm-kpi .h1.text-success { color: var(--gm-ink) !important; }
.gm-kpi .small { font-size: .78rem; }
.gm-delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; font-family: var(--gm-font-num); }
.gm-delta.up { color: var(--gm-success); } .gm-delta.down { color: var(--gm-danger); } .gm-delta.warn { color: var(--gm-warning); }

/* meters: brand fill, orange from 75 %, red from 90 % with an icon */
.progress { background: var(--gm-track); border-radius: var(--gm-radius-pill); }
.progress-bar, .progress-bar.bg-primary { background-color: var(--gm-meter) !important; }
.progress-bar.bg-warning, .progress-bar.bg-orange, .progress-bar.bg-yellow { background-color: var(--gm-meter-warn) !important; }
.progress-bar.bg-danger, .progress-bar.bg-red { background-color: var(--gm-meter-crit) !important; }
.progress-bar.bg-green, .progress-bar.bg-success { background-color: var(--gm-success) !important; }
.gm-meter { margin-bottom: .85rem; }
.gm-meter .progress { height: .4rem; margin-top: .35rem; }
.gm-meter .small { font-size: .82rem; color: var(--gm-ink-2); }
.gm-meter .small .text-muted { color: var(--gm-ink) !important; font-family: var(--gm-font-num); font-variant-numeric: tabular-nums; }
.gm-meter-warn, .gm-meter-crit { margin-left: .3rem; }
.gm-meter-warn { color: var(--gm-warning); } .gm-meter-crit { color: var(--gm-danger); }
.gm-stat { border: 1px solid var(--gm-border); border-radius: var(--gm-radius-sm); background: var(--gm-surface-2); }
.gm-stat .h2 { font-family: var(--gm-font-num); }

/* ------------------------------------------------------------------ tables (DataTable) */
.table { --tblr-table-color: var(--gm-ink); --tblr-table-bg: transparent; --tblr-table-border-color: var(--gm-border); font-size: .84rem; }
.table > :not(caption) > * > * { padding: .62rem .75rem; border-bottom-color: var(--gm-border); }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table thead th { font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--gm-ink-2); background: var(--gm-surface-2); white-space: nowrap; }
.card-table thead th { border-top: 0; }
.table tbody tr:hover > * { background: color-mix(in oklab, var(--gm-brand) 4%, transparent); }
.table tbody tr.table-active > *, .table tbody tr[aria-selected="true"] > * { background: var(--gm-selected-bg); color: var(--gm-selected-ink); }
.table td a:not(.btn) { font-weight: 600; text-decoration: none; }
.table td a:not(.btn):hover { text-decoration: underline; }
.gm-itable thead th { background: var(--gm-surface-2); }
.gm-tbar { background: var(--gm-surface); }
.gm-fchip.on { background: var(--gm-brand); border-color: var(--gm-brand); color: var(--gm-on-brand); }

/* ------------------------------------------------------------------ status badges */
/* the partial: icon (shape per tone) + Italian label + tone */
.gm-status, .badge { font-family: var(--gm-font); font-weight: 600; font-size: .75rem; letter-spacing: 0; text-transform: none; border-radius: var(--gm-radius-badge); padding: .22rem .45rem; line-height: 1.2; }
.gm-status { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; border: 1px solid transparent; }
.gm-status .ti { font-size: .95rem; margin: 0; }
.gm-tone-success { color: var(--gm-success) !important; background: var(--gm-success-bg) !important; }
.gm-tone-warning { color: var(--gm-warning) !important; background: var(--gm-warning-bg) !important; }
.gm-tone-info    { color: var(--gm-info) !important;    background: var(--gm-info-bg) !important; }
.gm-tone-paused  { color: var(--gm-paused) !important;  background: var(--gm-paused-bg) !important; }
.gm-tone-danger  { color: var(--gm-danger) !important;  background: var(--gm-danger-bg) !important; }
.gm-tone-neutral { color: var(--gm-neutral) !important; background: var(--gm-neutral-bg) !important; }
/* Tabler's soft badges, already in many pages, on the same tones */
.badge.bg-green-lt, .badge.bg-teal-lt, .badge.bg-success-lt { color: var(--gm-success) !important; background: var(--gm-success-bg) !important; border-color: transparent !important; }
.badge.bg-orange-lt, .badge.bg-yellow-lt, .badge.bg-warning-lt { color: var(--gm-warning) !important; background: var(--gm-warning-bg) !important; border-color: transparent !important; }
.badge.bg-azure-lt, .badge.bg-blue-lt, .badge.bg-indigo-lt, .badge.bg-purple-lt, .badge.bg-cyan-lt, .badge.bg-info-lt { color: var(--gm-info) !important; background: var(--gm-info-bg) !important; border-color: transparent !important; }
.badge.bg-secondary-lt, .badge.bg-muted-lt { color: var(--gm-neutral) !important; background: var(--gm-neutral-bg) !important; border-color: transparent !important; }
.badge.bg-red-lt, .badge.bg-danger-lt, .badge.bg-pink-lt { color: var(--gm-danger) !important; background: var(--gm-danger-bg) !important; border-color: transparent !important; }
/* a soft status badge in a table cell without its own icon gets the tone's icon: never colour alone */
td > .badge[class*="-lt"]:not(:has(.ti))::before { font-family: "tabler-icons"; font-weight: 400; margin-right: .28rem; font-size: .9em; vertical-align: -1px; }
td > .badge.bg-green-lt:not(:has(.ti))::before, td > .badge.bg-teal-lt:not(:has(.ti))::before { content: "\ea67"; }      /* circle-check */
td > .badge.bg-orange-lt:not(:has(.ti))::before, td > .badge.bg-yellow-lt:not(:has(.ti))::before { content: "\ea06"; }    /* alert-triangle */
td > .badge.bg-azure-lt:not(:has(.ti))::before, td > .badge.bg-blue-lt:not(:has(.ti))::before { content: "\ea70"; }       /* clock */
td > .badge.bg-secondary-lt:not(:has(.ti))::before { content: "\ed45"; }                                                  /* player-pause */
td > .badge.bg-red-lt:not(:has(.ti))::before { content: "\ecc6"; }                                                        /* alert-octagon */
.badge.text-uppercase { font-size: .68rem; letter-spacing: .02em; }

/* ------------------------------------------------------------------ alerts */
.alert { border-radius: var(--gm-radius); border: 1px solid var(--gm-border); border-left-width: 3px; background: var(--gm-surface); color: var(--gm-ink); box-shadow: none; }
.alert-info { border-left-color: var(--gm-info); } .alert-info > .ti:first-child, .alert-info .ti-eye { color: var(--gm-info); }
.alert-warning { border-left-color: var(--gm-warning); } .alert-warning > .ti:first-child { color: var(--gm-warning); }
.alert-danger { border-left-color: var(--gm-danger); } .alert-danger > .ti:first-child { color: var(--gm-danger); }
.alert-success { border-left-color: var(--gm-success); } .alert-success > .ti:first-child { color: var(--gm-success); }
.alert-secondary { border-left-color: var(--gm-neutral); }
.alert-link { color: var(--gm-brand-text); }

/* ------------------------------------------------------------------ tabs, forms */
.gm-ptabs a.active, .nav-tabs .nav-link.active { color: var(--gm-ink); border-bottom-color: var(--gm-brand); font-weight: 600; }
.gm-ptabs a.active { box-shadow: inset 0 -2px 0 var(--gm-brand); }
.form-control, .form-select { border: var(--gm-input-border-w) solid var(--gm-input-border); background-color: var(--gm-input-bg); color: var(--gm-ink); border-radius: var(--gm-radius-sm); min-height: var(--gm-control-h); }
.form-control-sm, .form-select-sm, .form-control[type="color"] { min-height: 0; }
.form-control:focus, .form-select:focus { border-color: var(--gm-focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gm-focus) 22%, transparent); }
.form-check-input:checked { background-color: var(--gm-brand); border-color: var(--gm-brand); }
.form-label { font-weight: 500; color: var(--gm-ink-2); }

/* ------------------------------------------------------------------ list rows (portal: resources, to-do) */
.gm-rows { list-style: none; margin: 0; padding: 0; }
.gm-row { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gm-border); }
.gm-row:last-child { border-bottom: 0; }
.gm-row-ic { color: var(--gm-muted); font-size: 1.15rem; flex: none; }
.gm-row-t { min-width: 0; flex: 1; }
.gm-row-t b, .gm-row-t a { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-row-t small { color: var(--gm-muted); font-size: .78rem; }
.gm-row-v { font-family: var(--gm-font-num); font-variant-numeric: tabular-nums; min-width: 5rem; text-align: right; }
@media (max-width: 575.98px) { .gm-row { flex-wrap: wrap; } .gm-row-v { min-width: 0; } }

/* ------------------------------------------------------------------ PlanPage: sticky apply bar */
.gm-applybar { position: sticky; bottom: 0; z-index: 900; margin: 1.25rem -.25rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .8rem 1rem; background: var(--gm-surface); border: 1px solid var(--gm-border); border-top: 3px solid var(--gm-brand); border-radius: var(--gm-radius) var(--gm-radius) 0 0;
  box-shadow: var(--gm-shadow-bar); }
.gm-applybar-t { flex: 1 1 16rem; min-width: 0; font-size: .84rem; color: var(--gm-ink-2); }
.gm-applybar-t b { color: var(--gm-ink); }
.gm-applybar-risk { border-top-color: var(--gm-danger); }
.gm-plan-sum { display: flex; flex-wrap: wrap; gap: .5rem; }
.gm-plan-act { display: inline-flex; align-items: center; gap: .3rem; }
.gm-check-row td:first-child { width: 2rem; }

/* ------------------------------------------------------------------ misc */
.gm-chart-wrap { color: var(--gm-muted); }
.gm-empty { color: var(--gm-muted); }
.gm-kv dt { color: var(--gm-muted); }
.dropdown-menu { border-color: var(--gm-border); border-radius: var(--gm-radius); }
.gm-modal, .gm-drawer, .gm-toast { background: var(--gm-surface); border-color: var(--gm-border); }
.gm-pal-item.on, .gm-pal-item:hover { background: var(--gm-brand); color: var(--gm-on-brand); }
.gm-steps li.on .gm-step-n { background: var(--gm-brand); color: var(--gm-on-brand); }
.gm-steps li.on { border-bottom-color: var(--gm-brand); }
.gm-login .card { border-top: 3px solid var(--gm-brand); }
.gm-login .gm-brand { color: var(--gm-ink) !important; }
.gm-login .gm-brand b, .gm-login .gm-brand i { color: var(--gm-brand-text); }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
.gm-skip { position: absolute; left: .5rem; top: .5rem; z-index: 4000; background: var(--gm-surface); color: var(--gm-brand-text); padding: .4rem .7rem; border-radius: var(--gm-radius-sm); border: 2px solid var(--gm-brand); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* portal top bar: the organization (selector look; one organization per login today) */
.gm-orgsel { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; padding: .2rem .6rem .2rem .3rem; border: 1px solid var(--gm-border); border-radius: var(--gm-radius-sm); background: var(--gm-surface); }
.gm-orgsel .gm-avatar { width: 1.75rem; height: 1.75rem; border-radius: 5px; }
.gm-orgsel-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.gm-orgsel-t b { font-size: .84rem; font-weight: 600; color: var(--gm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-orgsel-t small { font-size: .72rem; color: var(--gm-muted); }

/* tags: kinds and billing modes are facts, not states (no tone, no icon) */
.gm-tag, .badge.text-uppercase { display: inline-flex; align-items: center; font: 500 .74rem/1.2 var(--gm-font); padding: .18rem .45rem; border-radius: var(--gm-radius-badge); white-space: nowrap;
  color: var(--gm-ink-2) !important; background: transparent !important; border: 1px solid var(--gm-border-strong) !important; }
.badge.text-uppercase { font-size: .66rem; letter-spacing: .03em; padding: .14rem .35rem; }
.gm-tag-reserved, .gm-tag-contract { border-style: solid; color: var(--gm-ink) !important; }
.gm-tag-platform, .gm-tag-management, .gm-tag-internal, .gm-tag-excluded { border-style: dashed !important; color: var(--gm-muted) !important; }
td > .badge.text-uppercase::before { content: none !important; }
.table td.text-end, .table th.text-end { white-space: nowrap; }
/* the sidebar's tint runs the whole page height (the bar itself is fixed) */
@media (min-width: 992px) { .page:has(> .gm-sidebar) { background: linear-gradient(to right, var(--gm-side-bg) 15rem, var(--gm-bg) 15rem); } }
/* sidebar density (Tabler's vertical navbar pads its links a lot) */
.navbar-vertical.gm-sidebar .navbar-nav .nav-link { display: flex; align-items: center; padding: .38rem .65rem !important; min-height: 2.1rem; }
.navbar-vertical.gm-sidebar .navbar-nav .nav-item { margin: 0; }
.navbar-vertical.gm-sidebar .nav-link-icon { display: inline-flex; align-items: center; justify-content: center; height: auto; }
.navbar-vertical.gm-sidebar .navbar-collapse { display: flex; flex-direction: column; min-height: calc(100vh - 4rem); }
.navbar-vertical.gm-sidebar .gm-side-bottom { margin-top: auto; padding-top: .5rem !important; padding-bottom: .5rem !important; }
.gm-side-bottom + .gm-sidebar-foot { margin-top: 0; }
.gm-settings-nav .gm-settings-sub { margin-left: 1.5rem; }
@media (min-width: 992px) { .gm-settings-nav { margin-right: .5rem; } }
@media (max-width: 991.98px) { .gm-settings-nav { display: flex; flex-wrap: wrap; gap: .25rem; } .gm-settings-nav .gm-settings-sub { display: contents; } }
@media (max-width: 991.98px) { .navbar-vertical.gm-sidebar .navbar-collapse { min-height: 0; } .navbar-vertical.gm-sidebar .navbar-collapse:not(.show) { display: none; } }
.card-header > div > .card-title { margin: 0; }
.card-header { gap: .75rem; }
h2.card-title { font-size: .95rem; }
.gm-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; }
.gm-title-row .page-title { margin: 0; }
.gm-ptabs { scrollbar-width: thin; border-bottom-color: var(--gm-border); gap: .25rem; }
.gm-ptabs a { color: var(--gm-muted); padding: .55rem .7rem; font-weight: 500; }
.gm-ptabs a > .ti:first-child { display: none; } /* text tabs (redesign) */
.gm-ptabs .badge { background: var(--gm-neutral-bg) !important; color: var(--gm-neutral) !important; font-family: var(--gm-font-num); }
.dropdown-menu form { margin: 0; }
.dropdown-menu .dropdown-item { white-space: normal; }
.datagrid-title { color: var(--gm-muted); text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 500; }
/* every plan page's apply form (/plans/<token>/apply) is the sticky apply bar,
   also on the plan pages not redone one by one */
form[action^="/plans/"][action$="/apply"]:not(.gm-applybar) { position: sticky; bottom: 0; z-index: 900; margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .8rem 1rem; background: var(--gm-surface); border: 1px solid var(--gm-border); border-top: 3px solid var(--gm-brand); border-radius: var(--gm-radius) var(--gm-radius) 0 0; box-shadow: var(--gm-shadow-bar); }
.gm-applybar .btn-primary, form[action^="/plans/"][action$="/apply"] .btn-primary { margin-left: auto; }
.gm-applybar .btn:not(.btn-primary) + .btn-primary { margin-left: 0; }
.gm-applybar > .gm-applybar-t + .btn { margin-left: auto; }
.page-wrapper .page-header { margin-top: 0 !important; padding-top: 1rem; min-height: 0; }
.gm-applybar .btn[disabled] { opacity: .55; }

/* Tabler's solid badges, too, on the status tones (the redesign has no
   saturated pills: a soft tint, the tone's ink and its icon) */
.badge.bg-green, .badge.bg-success, .badge.bg-teal { color: var(--gm-success) !important; background: var(--gm-success-bg) !important; }
.badge.bg-yellow, .badge.bg-orange, .badge.bg-warning { color: var(--gm-warning) !important; background: var(--gm-warning-bg) !important; }
.badge.bg-azure, .badge.bg-blue, .badge.bg-indigo, .badge.bg-cyan, .badge.bg-purple, .badge.bg-info, .badge.bg-primary { color: var(--gm-info) !important; background: var(--gm-info-bg) !important; }
.badge.bg-red, .badge.bg-danger { color: var(--gm-danger) !important; background: var(--gm-danger-bg) !important; }
.badge.bg-secondary, .badge.bg-dark, .badge.bg-muted { color: var(--gm-neutral) !important; background: var(--gm-neutral-bg) !important; }
td > .badge:is(.bg-green, .bg-success, .bg-teal):not(:has(.ti))::before,
td > .badge:is(.bg-yellow, .bg-orange, .bg-warning):not(:has(.ti))::before,
td > .badge:is(.bg-azure, .bg-blue):not(:has(.ti))::before,
td > .badge:is(.bg-red, .bg-danger):not(:has(.ti))::before { font-family: "tabler-icons"; font-weight: 400; margin-right: .28rem; font-size: .9em; vertical-align: -1px; }
td > .badge:is(.bg-green, .bg-success, .bg-teal):not(:has(.ti))::before { content: "\ea67"; }
td > .badge:is(.bg-yellow, .bg-orange, .bg-warning):not(:has(.ti))::before { content: "\ea06"; }
td > .badge:is(.bg-azure, .bg-blue):not(:has(.ti))::before { content: "\ea70"; }
td > .badge:is(.bg-red, .bg-danger):not(:has(.ti))::before { content: "\ecc6"; }
/* card titles: text only, as in the design (decorative leading icons hidden) */
.card-header .card-title > .ti:first-child { display: none; }
/* the meta row of a page header can hold tags and badges */
.gm-page-sub .gm-tag, .gm-page-sub code { vertical-align: 1px; }
code { color: var(--gm-ink-2); background: var(--gm-surface-2); border: 1px solid var(--gm-border); border-radius: 4px; padding: .05rem .3rem; font-size: .8em; }
pre code { border: 0; background: none; padding: 0; }
/* sign-in pages */
.gm-login { background: linear-gradient(180deg, var(--gm-side-bg) 0, var(--gm-bg) 22rem) !important; }
.gm-login-brand { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1.5rem; }
.gm-login-brand .gm-logo { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; border-radius: 8px; }
.gm-login-brand .gm-brand-t b { font-size: 1.3rem; color: var(--gm-ink); }
.gm-login-brand .gm-brand-t span { font-size: .9rem; color: var(--gm-brand-text); }
.gm-login .card { border-top: 3px solid var(--gm-brand); }
.gm-login .h2 { font-weight: 600; font-size: 1.25rem; }
/* button variants on the system: secondary actions are neutral bordered
   buttons; tone only in the label (danger, success), never a filled colour
   except the primary and the destructive confirm */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-ghost-secondary, .btn-ghost-primary, .btn-white, .btn-light {
  --tblr-btn-bg: var(--gm-surface); --tblr-btn-border-color: var(--gm-border-strong); --tblr-btn-hover-bg: var(--gm-surface-2); --tblr-btn-hover-border-color: var(--gm-muted); --tblr-btn-active-bg: var(--gm-surface-2);
  background: var(--gm-surface); border-color: var(--gm-border-strong); color: var(--gm-ink); }
.btn-outline-primary, .btn-ghost-primary { color: var(--gm-brand-text); --tblr-btn-hover-color: var(--gm-brand-text); }
.btn-outline-success { color: var(--gm-success); --tblr-btn-hover-color: var(--gm-success); }
.btn-outline-danger { color: var(--gm-danger); --tblr-btn-hover-color: var(--gm-danger); }
.btn-outline-warning { color: var(--gm-warning); --tblr-btn-hover-color: var(--gm-warning); }
.btn-outline-info { color: var(--gm-info); --tblr-btn-hover-color: var(--gm-info); }
.btn-ghost-secondary { border-color: transparent; background: transparent; color: var(--gm-ink-2); }
.btn-ghost-secondary:hover { background: var(--gm-surface-2); border-color: var(--gm-border); }
.btn-success { --tblr-btn-bg: var(--gm-success); background: var(--gm-solid-success); border-color: var(--gm-solid-success); color: var(--gm-on-solid); }
.btn-warning { background: var(--gm-solid-warning); border-color: var(--gm-solid-warning); color: var(--gm-on-solid); }
.btn-info { background: var(--gm-solid-info); border-color: var(--gm-solid-info); color: var(--gm-on-solid); }
.btn-group > .btn.active, .btn-group > .btn:active { background: var(--gm-brand-soft); color: var(--gm-brand-text); border-color: var(--gm-brand); }
.btn:disabled, .btn.disabled { opacity: .5; }
@media (max-width: 991.98px) { .gm-sidebar .gm-brand { margin-right: auto !important; } }
@media (max-width: 575.98px) {
  .page-header .row > .col-auto { width: 100%; }
  .page-header .row > .col-auto .btn { flex: 1 1 auto; }
  .gm-page-sub { gap: .15rem .8rem; font-size: .8rem; }
}
/* mobile menu: full width, one scroll for the whole panel */
@media (max-width: 991.98px) {
  .navbar-vertical.gm-sidebar > .container-fluid { width: 100%; max-width: none; padding: 0; justify-content: space-between; }
  .navbar-vertical.gm-sidebar .navbar-collapse.show, .navbar-vertical.gm-sidebar .navbar-collapse.collapsing { display: block; width: 100%; max-height: calc(100vh - 3.6rem); overflow-y: auto; }
  .navbar-vertical.gm-sidebar .navbar-nav { width: 100%; max-height: none; overflow: visible; padding: .25rem .9rem .5rem !important; }
  .navbar-vertical.gm-sidebar .gm-sidebar-foot { position: static; margin: 0; }
  .navbar-vertical.gm-sidebar .gm-brand { padding: .6rem 1rem; }
}
@media (max-width: 991.98px) { .navbar-vertical.gm-sidebar .navbar-brand.gm-brand { flex: 1 1 auto; justify-content: flex-start; margin: 0 !important; width: auto; } }
/* relations: clickable chips to what belongs to the object (design: «Relazioni ovunque») */
.gm-rel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.25rem 0 1rem; }
.gm-rel-l { font-size: .78rem; font-weight: 600; color: var(--gm-muted); margin-right: .2rem; }
.gm-chip-rel { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border: 1px solid var(--gm-border-strong); border-radius: var(--gm-radius-sm); background: var(--gm-surface);
  font-size: .78rem; color: var(--gm-muted); text-decoration: none; }
.gm-chip-rel b { color: var(--gm-brand-text); font-weight: 600; }
a.gm-chip-rel:hover { border-color: var(--gm-brand); text-decoration: none; }
.gm-chip-rel .ti { font-size: .95rem; }
.gm-tenant-switch { gap: .45rem; padding-right: .3rem; }
.gm-tenant-switch .form-select { width: auto; max-width: 16rem; border: 0; background-color: transparent; font-weight: 600; padding-left: .2rem; }
/* the Team page's status names (customer teams PR 3) on the same tones */
.gm-status-ok { color: var(--gm-success) !important; background: var(--gm-success-bg) !important; }
.gm-status-warn { color: var(--gm-warning) !important; background: var(--gm-warning-bg) !important; }
.gm-status-info { color: var(--gm-info) !important; background: var(--gm-info-bg) !important; }
.gm-status-danger { color: var(--gm-danger) !important; background: var(--gm-danger-bg) !important; }
.gm-settings-nav .list-group-item.active { border-left-color: var(--gm-brand); background: var(--gm-brand-soft); color: var(--gm-ink); }
.breadcrumb { font-size: .8rem; }
.breadcrumb-item a { color: var(--gm-muted); text-decoration: none; }
.datagrid { --tblr-datagrid-padding: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.datagrid-content { font-weight: 500; }

/* organisation switcher (customer teams PR 5) in the portal top bar: on the
   right on desktop (design), first on the left on phones */
.gm-topbar-tenant { order: 10; min-width: 0; }
.gm-topbar-end { order: 5; }
.gm-tenant-btn { border: 1px solid var(--gm-border) !important; background: var(--gm-surface); border-radius: var(--gm-radius-sm); min-height: 2.5rem; color: var(--gm-ink); }
.gm-tenant-btn:hover { background: var(--gm-surface-2); border-color: var(--gm-border-strong) !important; }
.gm-tenant-btn .gm-tenant-name { font-weight: 600; font-size: .84rem; }
.gm-tenant-btn .small { font-size: .72rem; color: var(--gm-muted) !important; }
.gm-tenant-avatar { background: var(--gm-brand-soft) !important; color: var(--gm-brand-text) !important; border: 1px solid color-mix(in oklab, var(--gm-brand) 30%, transparent); border-radius: 5px !important; }
.gm-tenant-menu .dropdown-item.active { background: var(--gm-brand-soft); color: var(--gm-ink); }
@media (max-width: 575.98px) {
  .gm-topbar-tenant { order: -1; }
  .gm-tenant-btn { max-width: 52vw; min-height: 2.75rem; }
}
.gm-delta.flat { color: var(--gm-muted); }

/* bell (notifications.go) */
.gm-bell-n { position: absolute; top: .1rem; right: .1rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--gm-count-bg);
  color: var(--gm-on-count); font: 600 .66rem/1.05rem var(--gm-font-num); text-align: center; }
.gm-notify-menu { width: min(24rem, 92vw); padding: 0; overflow: hidden; }
.gm-notify-head { padding: .7rem 1rem; font-weight: 600; border-bottom: 1px solid var(--gm-border); }
.gm-notify-list { max-height: 60vh; overflow-y: auto; }
.gm-notify-item { display: flex; gap: .6rem; padding: .65rem 1rem; border-bottom: 1px solid var(--gm-border); color: var(--gm-ink); text-decoration: none; font-size: .84rem; }
.gm-notify-item:last-child { border-bottom: 0; }
a.gm-notify-item:hover { background: var(--gm-surface-2); text-decoration: none; }
.gm-notify-item .ti { font-size: 1.1rem; margin-top: .05rem; }
.gm-notify-item small { display: block; color: var(--gm-muted); font-size: .76rem; }
.gm-notify-empty { padding: 1rem; color: var(--gm-muted); font-size: .84rem; }
.gm-notify-all { display: block; padding: .6rem 1rem; border-top: 1px solid var(--gm-border); font-weight: 600; text-decoration: none; }
.gm-ti-success { color: var(--gm-success); } .gm-ti-warning { color: var(--gm-warning); } .gm-ti-info { color: var(--gm-info); }
.gm-ti-paused { color: var(--gm-paused); } .gm-ti-danger { color: var(--gm-danger); } .gm-ti-neutral { color: var(--gm-neutral); }
/* the portal's search field in the top bar */
.gm-search-form { cursor: text; }
.gm-search-form input { border: 0; outline: 0; background: transparent; color: var(--gm-ink); flex: 1; min-width: 0; font-size: .84rem; }
.gm-search-form:focus-within { border-color: var(--gm-brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gm-brand) 22%, transparent); }
@media (max-width: 767.98px) { .gm-search-form { display: none; } }
/* relations panel (detail pages) */
.gm-main-col { min-width: 0; }
.gm-relpanel { position: static; }
.gm-relgrp { font-size: .78rem; font-weight: 600; color: var(--gm-ink-2); margin: .9rem 0 .4rem; }
.gm-relgrp:first-child { margin-top: 0; }
.gm-rellist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.gm-rellist li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.gm-rellist .gm-chip-rel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-rellist .gm-status { flex: none; }

/* alerts (alerts_view.go): the dashboard's card, the page, the strips, the sidebar count */
.gm-nav-n { margin-left: auto; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--gm-count-bg);
  color: var(--gm-on-count); font: 600 .68rem/1.15rem var(--gm-font-num); text-align: center; }
.gm-nav-n[hidden] { display: none; }
.gm-av-all { font-weight: 600; }
.gm-av-cats, .gm-av-top, .gm-av-items { list-style: none; margin: 0; padding: 0; }
.gm-av-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .6rem; }
.gm-av-cat { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem .6rem; border: 1px solid var(--gm-border); border-radius: var(--gm-radius-sm);
  background: var(--gm-surface); color: var(--gm-ink); text-decoration: none; }
.gm-av-cat:hover { background: var(--gm-surface-2); text-decoration: none; }
.gm-av-cat-i { font-size: 1.1rem; color: var(--gm-muted); }
.gm-av-cat-n { flex: 1; min-width: 0; font-size: .84rem; font-weight: 500; }
.gm-av-cat-0 .gm-av-cat-n { color: var(--gm-muted); font-weight: 400; }
.gm-av-line, .gm-av-row > summary { display: flex; align-items: flex-start; gap: .55rem; padding: .5rem 0; }
.gm-av-top > li + li, .gm-av-list > .gm-av-row + .gm-av-row, .gm-av-strip-body > .gm-av-row + .gm-av-row, .gm-av-items > li + li { border-top: 1px solid var(--gm-border); }
.gm-av-lead { flex: none; min-width: 7.2rem; }
.gm-av-t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .86rem; }
.gm-av-go { flex: none; font-weight: 600; font-size: .84rem; white-space: nowrap; }
.gm-av-row > summary, .gm-av-strip > summary, .gm-av-sec > summary { list-style: none; cursor: pointer; }
.gm-av-row > summary::-webkit-details-marker, .gm-av-strip > summary::-webkit-details-marker, .gm-av-sec > summary::-webkit-details-marker { display: none; }
.gm-av-chev { flex: none; color: var(--gm-muted); font-size: 1.1rem; transition: transform .15s; }
details[open] > summary > .gm-av-chev { transform: rotate(180deg); }
.gm-av-row > summary:focus-visible, .gm-av-strip > summary:focus-visible, .gm-av-sec > summary:focus-visible { outline: 2px solid var(--gm-brand); outline-offset: 2px; }
.gm-av-detail { padding: 0 0 .6rem calc(7.2rem + .55rem); font-size: .82rem; color: var(--gm-ink-2); overflow-wrap: anywhere; }
.gm-av-items { margin: 0 0 .4rem calc(7.2rem + .55rem); padding-left: .75rem; border-left: 2px solid var(--gm-border); }
.gm-av-items .gm-av-lead { min-width: 0; }
.gm-av-ico { font-size: 1.05rem; line-height: 1.4; }
.gm-av-items .gm-av-detail { padding-left: calc(1.05rem + .55rem); }
.gm-av-sec > summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gm-av-sec > summary .card-title { margin: 0; flex: 1 1 auto; }
.gm-av-sec-n { display: flex; flex-wrap: wrap; gap: .35rem; }
.gm-av-list { padding: .25rem 1rem .5rem; }
.gm-av-strip { border: 1px solid var(--gm-border); border-left-width: 4px; border-radius: var(--gm-radius); background: var(--gm-surface); box-shadow: var(--gm-shadow); }
.gm-av-strip-danger { border-left-color: var(--gm-danger); } .gm-av-strip-warning { border-left-color: var(--gm-warning); } .gm-av-strip-info { border-left-color: var(--gm-info); }
.gm-av-strip > summary { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; min-height: 2.75rem; }
.gm-av-strip > summary > .gm-av-lead { min-width: 0; }
.gm-av-strip > summary > .gm-av-t { flex: none; font-weight: 600; }
.gm-av-strip .gm-av-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-av-strip-body { padding: 0 .8rem .6rem; border-top: 1px solid var(--gm-border); }
@media (max-width: 575.98px) {
  .gm-av-cats { grid-template-columns: 1fr; }
  .gm-av-lead { min-width: 0; }
  .gm-av-line, .gm-av-row > summary { flex-wrap: wrap; row-gap: .25rem; }
  .gm-av-t { flex: 1 1 100%; order: 3; }
  .gm-av-go { order: 2; margin-left: auto; }
  .gm-av-chev { order: 2; margin-left: auto; }
  .gm-av-detail, .gm-av-items, .gm-av-items .gm-av-detail { margin-left: 0; padding-left: .5rem; }
  .gm-av-items .gm-av-line, .gm-av-items .gm-av-row > summary { flex-wrap: nowrap; }
  .gm-av-items .gm-av-t { flex: 1 1 0; order: 0; }
  .gm-av-items .gm-av-go, .gm-av-items .gm-av-chev { order: 0; margin-left: 0; }
  .gm-av-strip > summary { flex-wrap: wrap; }
  .gm-av-strip .gm-av-hint { flex: 1 1 100%; order: 4; white-space: normal; }
}

/* ------------------------------------------------------------------ compact details (design «Dettagli compatti e aiuti», phase 1)
   Attr chip -> Detail popover -> «Dettagli servizio» panel. Colours are the tokens above, none new. */
:root[data-gm-app] {
  --gm-size-target-min: 24px; --gm-size-chip: 24px; --gm-size-popover: 340px; --gm-size-drawer: 520px; --gm-size-kv-key: 104px;
  --gm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.gm-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gm-attr { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--gm-size-chip); max-inline-size: 100%; padding: 3px 8px 3px 6px;
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius-sm); background: var(--gm-surface-2); color: var(--gm-muted);
  font: 400 .75rem/1rem var(--gm-font); cursor: pointer; white-space: nowrap; }
.gm-attr > span { overflow: hidden; text-overflow: ellipsis; }
.gm-attr .ti { font-size: .95rem; flex: none; }
.gm-attr:hover { border-color: var(--gm-border-strong); color: var(--gm-ink); }
.gm-attr:focus-visible { outline: 2px solid var(--gm-brand); outline-offset: 2px; }
.gm-attr[aria-expanded="true"] { background: var(--gm-brand-soft); border-color: var(--gm-brand); color: var(--gm-brand-text); }
.gm-attr--warn { background: var(--gm-warning-bg); border-color: transparent; color: var(--gm-warning); }
.gm-attr--warn:hover { border-color: var(--gm-warning); color: var(--gm-warning); }
.gm-attr--warn[aria-expanded="true"] { background: var(--gm-warning-bg); border-color: var(--gm-warning); color: var(--gm-warning); }
.gm-svc-name > b { display: block; }

/* Icon button S: 24 px, always with an aria-label */
.gm-iconbtn--s { inline-size: var(--gm-size-target-min); block-size: var(--gm-size-target-min); padding: 0; font-size: 1rem; color: var(--gm-muted); vertical-align: middle; }
.gm-iconbtn--s:focus-visible { outline: 2px solid var(--gm-brand); outline-offset: 2px; }
.gm-iconbtn--s[aria-pressed="true"], .gm-iconbtn--s[aria-expanded="true"] { background: var(--gm-brand-soft); border-color: transparent; color: var(--gm-brand-text); }
.gm-iconbtn--s:disabled { opacity: .45; }
.gm-copied { display: none; align-items: center; gap: 4px; font: 600 .75rem/1rem var(--gm-font); white-space: nowrap; }
.gm-iconbtn--s.is-copied { inline-size: auto; padding-inline: 6px; gap: 4px; color: var(--gm-success); border-color: transparent; }
.gm-iconbtn--s.is-copied > .ti-copy { display: none; }
.gm-iconbtn--s.is-copied > .gm-copied { display: inline-flex; }

/* KV row: the key on the left (104 px), the value on the right, the copy button at the end of a technical one */
.gm-kv--rows { display: grid; grid-template-columns: var(--gm-size-kv-key) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start; margin: 0; }
.gm-kv--rows dt { font: 400 .75rem/1rem var(--gm-font); color: var(--gm-muted); padding-block-start: 1px; overflow-wrap: anywhere; }
.gm-kv--rows dd { margin: 0; font: 400 .8125rem/1.125rem var(--gm-font); color: var(--gm-ink); min-width: 0; overflow-wrap: anywhere; }
.gm-kv--rows dd.gm-kv-wide { grid-column: 2 / -1; }
.gm-kv--rows dd.gm-kv-act { display: flex; align-items: flex-start; justify-content: flex-end; }
.gm-kv--rows code, .gm-mono-copy code { font: 400 .75rem/1rem var(--gm-font-mono); color: var(--gm-ink); background: none; border: 0; padding: 0; }
.gm-pop .gm-kv--rows code { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Copy value: a long technical value cut in the middle, the copy button beside it */
.gm-mono-copy { display: inline-flex; align-items: center; gap: 4px; max-inline-size: 100%; padding-inline-start: 8px; background: var(--gm-surface-2);
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius-sm); }
.gm-mono-copy code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-mono-copy--link { background: none; border-color: transparent; padding-inline-start: 0; }
.gm-mono-copy--link a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 15rem; }

/* Detail popover */
.gm-pop { position: fixed; z-index: 2000; inline-size: min(var(--gm-size-popover), calc(100vw - 16px)); background: var(--gm-surface); color: var(--gm-ink);
  border: 1px solid var(--gm-border-strong); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-pop); font-size: .8125rem; }
.gm-pop[hidden] { display: none; }
.gm-pop::before { content: ""; position: absolute; inset-block-start: -6px; inset-inline-start: var(--gm-arrow-x, 24px); inline-size: 10px; block-size: 10px; background: var(--gm-surface);
  border-inline-start: 1px solid var(--gm-border-strong); border-block-start: 1px solid var(--gm-border-strong); transform: rotate(45deg); }
.gm-pop--above::before { inset-block-start: auto; inset-block-end: -6px; transform: rotate(225deg); }
.gm-pop__head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 8px 12px; }
.gm-pop__head > .ti { font-size: 1rem; color: var(--gm-muted); flex: none; }
.gm-pop__head h3 { flex: 1; min-width: 0; margin: 0; font: 600 .875rem/1.25rem var(--gm-font); color: var(--gm-ink); }
.gm-pop .gm-kv--rows { padding: 0 12px 10px; }
.gm-pop__note { margin: 0; padding: 0 12px 10px; color: var(--gm-muted); line-height: 1.35; }
.gm-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--gm-border); }
.gm-pop__foot a { font-weight: 600; }
.gm-pop__foot small { margin-inline-start: auto; color: var(--gm-muted); font-size: .75rem; }
.gm-pop-sheet { display: none; }
.gm-pop-back { position: fixed; inset: 0; z-index: 1999; background: var(--gm-scrim); }
/* under 640 px: a sheet from the bottom, same markup (touch targets 44 px) */
.gm-pop--sheet { inset: auto 0 0 0 !important; inline-size: auto; max-block-size: 80vh; overflow-y: auto; border-radius: var(--gm-radius-lg) var(--gm-radius-lg) 0 0; border-inline-width: 0; border-block-end-width: 0;
  padding-block-end: env(safe-area-inset-bottom, 0px); box-shadow: var(--gm-shadow-sheet); }
.gm-pop--sheet::before { inset: 8px auto auto 50%; inline-size: 36px; block-size: 4px; margin-inline-start: -18px; border: 0; border-radius: 2px; background: var(--gm-border-strong); transform: none; }
.gm-pop--sheet .gm-pop__head { padding-block-start: 22px; }
.gm-pop--sheet .gm-pop__head h3 { font-size: 1rem; }
.gm-pop--sheet .gm-iconbtn--s { inline-size: 44px; block-size: 44px; }
.gm-pop--sheet .gm-kv--rows { padding-block-end: 14px; }
.gm-pop--sheet .gm-pop__foot { border-top: 0; padding-block-start: 0; }
.gm-pop--sheet .gm-pop__foot a { flex: 1; display: flex; align-items: center; justify-content: center; min-block-size: 44px; border: 1px solid var(--gm-border-strong); border-radius: var(--gm-radius-sm); color: var(--gm-ink); text-decoration: none; }
.gm-pop--sheet .gm-pop__foot small { display: none; }
.gm-pop--sheet .gm-pop-wide { display: none; }
.gm-pop--sheet .gm-pop-sheet { display: inline; }
@media (pointer: coarse) {
  .gm-attr { min-block-size: 32px; position: relative; }
  .gm-attr::after { content: ""; position: absolute; inset: -6px 0; }
  .gm-attrs { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .gm-pop, .gm-drawer, .gm-drawer-back { transition: none; } }

/* the panel «Dettagli servizio» (gmDrawer): 520 px, sections of key–value rows */
.gm-drawer:has(.gm-svc) { width: min(var(--gm-size-drawer), 100vw); }
.gm-svc__head { padding-block-end: 12px; }
.gm-svc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gm-svc__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 10px; }
.gm-sec { padding: 12px 0; border-top: 1px solid var(--gm-border); }
.gm-sec > summary { display: flex; align-items: center; gap: 8px; margin-block-end: 10px; font: 600 .8125rem/1.25rem var(--gm-font); color: var(--gm-ink); cursor: pointer; list-style: none; }
.gm-sec > summary::-webkit-details-marker { display: none; }
.gm-sec > summary::before { content: ""; inline-size: 6px; block-size: 6px; margin-inline: 3px; border-inline-end: 2px solid var(--gm-muted); border-block-end: 2px solid var(--gm-muted); transform: rotate(-45deg); transition: transform .12s; }
.gm-sec[open] > summary::before { transform: rotate(45deg); margin-block-start: -3px; }
.gm-sec:not([open]) > summary { margin-block-end: 0; }
.gm-sec h4 { margin: 0 0 10px; font: 600 .8125rem/1.25rem var(--gm-font); }
.gm-sec__note { display: flex; gap: 6px; margin: 10px 0 0; color: var(--gm-muted); font-size: .75rem; line-height: 1.3; }
.gm-sec__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 8px; }
.gm-sec__form label { margin: 0; font-size: .75rem; color: var(--gm-muted); min-inline-size: var(--gm-size-kv-key); }
.gm-aux__head { display: flex; align-items: center; gap: 8px; }
.gm-aux .gm-attrs { margin-top: 8px; }
.gm-change-row > td { padding-block: 0 .5rem; border-top: 0; }
.gm-change .gm-attrs { margin: 0; }
.gm-svc-table .gm-status { white-space: nowrap; }
.gm-svc-name { min-width: 14.5rem; }
.gm-svc-name .gm-attrs { max-width: 16rem; }
.gm-svc-table td.small > div { white-space: nowrap; }
.gm-svc-table .gm-mono-copy { max-inline-size: 15rem; }
.gm-svc-table td, .gm-svc-table th { padding-inline: .5rem; }

/* under 640 px the services list is a list of cards (design: «Portale mobile / Serverless»): name and status on top,
   the address, the chips; image, requests and scale are in the panel «Dettagli servizio» */
@media (max-width: 639.98px) {
  .gm-svc-table, .gm-svc-table tbody { display: block; }
  .gm-svc-table thead { display: none; }
  .gm-svc-table tr { display: block; position: relative; padding: 12px 16px; border-bottom: 1px solid var(--gm-border); }
  .gm-svc-table tr:last-child { border-bottom: 0; }
  .gm-svc-table td { display: block; padding: 0; border: 0; }
  .gm-svc-table .gm-c-img, .gm-svc-table td.gm-c-res { display: none; }
  .gm-svc-table td.gm-c-status { position: absolute; inset-block-start: 10px; inset-inline-end: 16px; }
  .gm-svc-table td.gm-svc-name { min-width: 0; width: auto; }
  .gm-svc-table td.gm-svc-name > b { padding-inline-end: 9rem; }
  .gm-svc-table.card-table tr > td { padding-inline: 0; }
  .gm-svc-table td.gm-svc-name .gm-attrs { max-width: none; }
  .gm-svc-table td.gm-c-addr { margin-block-start: 4px; }
  .gm-svc-table td.gm-c-price { display: block; margin-block-start: 4px; text-align: start !important; }
  .gm-svc-table td.gm-c-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-block-start: 8px; text-align: start !important; white-space: normal !important; }
  .gm-svc-table tr.gm-change-row { padding-block: 0 12px; }
  .gm-svc-table tr.gm-change-row td { padding: 0; }
  .gm-svc-table td[colspan] { display: block; }
}

/* the services list never scrolls sideways from 640 px up: the row's actions are one «⋯» menu, resources and scale one
   column, and the image column gives way when the table's own width (the rail beside it counts) cannot hold it */
.gm-pop--menu { inline-size: auto; min-inline-size: 13rem; max-inline-size: min(20rem, calc(100vw - 16px)); }
.gm-pop--menu::before { inset-inline-start: auto; inset-inline-end: 7px; }
.gm-menu { list-style: none; margin: 0; padding: 4px; }
.gm-menu__item { display: flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: 32px; padding: 6px 10px; border: 0; border-radius: var(--gm-radius-sm); background: none;
  color: var(--gm-ink); font: 400 .8125rem/1.125rem var(--gm-font); text-align: start; text-decoration: none; cursor: pointer; }
.gm-menu__item .ti { font-size: 1rem; color: var(--gm-muted); }
.gm-menu__item:hover { background: var(--gm-surface-2); color: var(--gm-ink); text-decoration: none; }
.gm-menu__item:focus-visible { outline: 2px solid var(--gm-brand); outline-offset: -2px; }
.gm-menu__item--danger, .gm-menu__item--danger .ti { color: var(--gm-danger); }
.gm-menu__item--off { color: var(--gm-muted); cursor: default; }
.gm-menu__item--off:hover { background: none; }
.gm-menu form { margin: 0; }
.gm-menu__form { margin: 0; padding: 8px 12px 12px; border-top: 1px solid var(--gm-border); }
.gm-svc-table .gm-c-res > div { white-space: nowrap; }
.gm-svc-table .gm-c-act { width: 1%; }
.gm-svc-table .gm-c-status { white-space: nowrap; }
.gm-svc-table.card-table tr > td:last-child, .gm-svc-table.card-table tr > th:last-child { padding-inline-end: .75rem; }
.table-responsive:has(> .gm-svc-table) { container-type: inline-size; }
@container (max-width: 990px) { .gm-svc-table--admin .gm-c-img { display: none; } }
@container (max-width: 1040px) { .gm-svc-table--portal .gm-c-img { display: none; } }
@media (max-width: 639.98px) { .gm-svc-table .gm-c-img { display: none; } }

/* ===== layout rules (gaps.md «Layout dei dettagli», 29/10/2026) =====
   Detail pages: main column + «Relazioni» rail. The rail sits beside the main column only when the content area is
   at least 1280 px wide (container query, not viewport): below it goes under the main column. The main column is
   itself a container, so cards inside it react to the room they really have. */
.gm-detail-wrap { container: gmdetail / inline-size; }
.gm-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.gm-main-col { min-width: 0; container: gmmain / inline-size; }
.gm-detail-rail { min-width: 0; }
@container gmdetail (min-width: 1280px) {
  .gm-detail { grid-template-columns: minmax(0, 1fr) 19rem; }
  .gm-relpanel { position: sticky; top: 4rem; }
}
/* the tab strip scrolls sideways inside its column, never under the rail; the side with hidden tabs fades */
.gm-ptabs { max-width: 100%; scroll-padding-inline: 2rem; overscroll-behavior-x: contain; }
.gm-ptabs.gm-fade-e { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.gm-ptabs.gm-fade-s { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem); mask-image: linear-gradient(to right, transparent, #000 2.5rem); }
.gm-ptabs.gm-fade-s.gm-fade-e { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
.gm-ptabs a { min-height: var(--gm-size-target-min); }

/* two cards side by side (list | form): one column until the main column is 1100 px wide */
.gm-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.gm-split > * { min-width: 0; }
@container gmmain (min-width: 1100px) { .gm-split { grid-template-columns: minmax(0, 7fr) minmax(24rem, 5fr); } }
@container gmmain (min-width: 1100px) { .gm-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* forms built on Bootstrap columns that reflow on the card's width, not the viewport's (.gm-cq on the card body) */
.gm-cq { container-type: inline-size; }
@container (max-width: 34rem) {
  .gm-cq .row > .col-md-6, .gm-cq .row > .col-md-7, .gm-cq .row > .col-md-8 { flex: 0 0 auto; width: 100%; }
  .gm-cq .row > .col-md-3, .gm-cq .row > .col-md-4, .gm-cq .row > .col-md-5 { flex: 0 0 auto; width: 50%; }
}
@container (max-width: 20rem) { .gm-cq .row > [class*="col-md-"] { width: 100%; } }
.gm-cq .form-control::placeholder { text-overflow: ellipsis; }

/* radio cards as a segmented control that wraps */
.gm-choice--seg { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .375rem; }
.gm-choice--seg label { align-items: center; padding: .45rem .6rem; min-height: 2.5rem; }
.gm-choice--seg input { margin-top: 0; flex: none; }
.gm-choice--seg b { font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.gm-choice--seg .gm-iconbtn { margin-inline-start: auto; }

/* help disclosure: a one-line question, the explanation behind it */
.gm-help { font-size: .8125rem; color: var(--gm-muted); }
.gm-help > summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--gm-size-target-min); cursor: pointer; list-style: none; color: var(--gm-muted); font-weight: 500; }
.gm-help > summary::-webkit-details-marker { display: none; }
.gm-help > summary .ti { font-size: 1rem; }
.gm-help > summary:hover { color: var(--gm-ink); }
.gm-help > summary:focus-visible { outline: 2px solid var(--gm-brand); outline-offset: 2px; border-radius: var(--gm-radius-sm); }
.gm-help > div { margin-top: .35rem; padding: .5rem .75rem; border-inline-start: 2px solid var(--gm-border-strong); line-height: 1.45; max-width: 72ch; }
.gm-help > div p { margin: 0 0 .35rem; } .gm-help > div p:last-child { margin: 0; }

/* one-line lead with its help tip; status rows of chips */
.gm-lead { display: flex; align-items: center; gap: .375rem; min-width: 0; margin: 0 0 .5rem; font-size: .8125rem; color: var(--gm-muted); }
.gm-lead > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gm-chiprow .gm-attrs { margin: 0; }
.gm-attr--icon { padding: 3px 5px; }
.gm-attr--static { cursor: default; }
.gm-attr--static:hover { border-color: var(--gm-border); color: var(--gm-muted); }
.gm-attr--ok { color: var(--gm-success); }
.gm-attr--info { color: var(--gm-info); }
.gm-attr--paused { color: var(--gm-paused); }
.gm-statusbtn { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; border-radius: var(--gm-radius-sm); cursor: pointer; min-height: var(--gm-size-target-min); }
.gm-statusbtn > .ti { font-size: .8rem; color: var(--gm-muted); }
.gm-statusbtn:focus-visible { outline: 2px solid var(--gm-brand); outline-offset: 2px; }
.gm-statusbtn[aria-expanded="true"] > .ti { color: var(--gm-brand); }
.gm-nowrap { white-space: nowrap; }
.gm-num { font-variant-numeric: tabular-nums; font-family: var(--gm-font-num); text-align: end; white-space: nowrap; }
.gm-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* inline add-row (input | select | button) that wraps on narrow cards */
.gm-addrow { display: grid; grid-template-columns: minmax(12rem, 3fr) minmax(9rem, 2fr) auto; gap: .5rem; align-items: center; }
@container (max-width: 34rem) { .gm-addrow { grid-template-columns: minmax(0, 1fr) auto; } .gm-addrow > :first-child { grid-column: 1 / -1; } }
.gm-addrow--4 { grid-template-columns: repeat(3, minmax(8rem, 1fr)) auto; }
@container (max-width: 40rem) { .gm-addrow--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gm-addrow--4 > :last-child { grid-column: 1 / -1; justify-self: start; } }
/* cross-cutting: flex/grid children that hold wide tables or tab strips may shrink below their content */
.page-wrapper, .page-body .container-xl, .page-body .container-fluid { min-width: 0; }
/* radio cards: as many columns as fit, never cut (the inline repeat(3,1fr) are gone) */
.gm-choice { grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr)); }
.gm-choice > label { min-width: 0; }
.gm-choice--seg { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); }
/* a table that may scroll sideways, with edge shadows telling there is more */
.gm-tablewrap { overflow-x: auto; background:
  linear-gradient(to right, var(--gm-surface) 30%, transparent) left / 2rem 100% no-repeat local,
  linear-gradient(to left, var(--gm-surface) 30%, transparent) right / 2rem 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.25), transparent) left / .75rem 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.25), transparent) right / .75rem 100% no-repeat scroll; }
/* filter / action bars that wrap instead of overflowing */
.gm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.gm-toolbar > * { min-width: 0; }
.gm-toolbar > .form-control, .gm-toolbar > .form-select { width: auto; max-width: 100%; flex: 1 1 10rem; }
/* an input with its own inline width keeps it (it only shrinks when the row is narrower) */
.gm-toolbar > .form-control[style*="width"], .gm-toolbar > .form-select[style*="width"] { flex: 0 1 auto; }

/* «Accensione programmata»: chart | settings side by side only when the card is 60rem wide */
.card:has(> .gm-power-grid) { container-type: inline-size; }
.gm-power-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.gm-power-grid > * { min-width: 0; }
.gm-power-side { border-top: 1px solid var(--gm-border); }
@container (min-width: 60rem) {
  .gm-power-grid { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); }
  .gm-power-side { border-top: 0; border-inline-start: 1px solid var(--gm-border); }
}
.gm-power-grid .gm-heat { max-width: 100%; overflow-x: auto; }
.gm-pw-now { display: grid; grid-template-columns: minmax(0, 14rem) auto; gap: .5rem; align-items: center; justify-content: start; }
.gm-pw-now > .btn { justify-self: start; white-space: nowrap; }
@media (max-width: 379.98px) { .gm-pw-now { grid-template-columns: minmax(0, 1fr); } }
.gm-console-intro .gm-lead { margin: 0; }
.gm-console-intro .gm-help > div { color: var(--gm-muted); }

/* «Domini personalizzati» and «Rete interna» tables: compact cells, cards under 640 px */
.gm-dom-table td, .gm-net-table td { vertical-align: middle; }
.gm-dom-name .gm-trunc { max-width: 16rem; }
.gm-dom-table .gm-mono-copy, .gm-net-table .gm-mono-copy { max-inline-size: 16rem; }
.gm-net-table .gm-net-name { white-space: nowrap; }
@media (max-width: 639.98px) {
  .gm-dom-table, .gm-dom-table tbody, .gm-net-table, .gm-net-table tbody { display: block; }
  .gm-dom-table thead, .gm-net-table thead { display: none; }
  .gm-dom-table tr, .gm-net-table tr { display: block; position: relative; padding: 12px 16px; border-bottom: 1px solid var(--gm-border); }
  .gm-dom-table td, .gm-net-table td { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 !important; border: 0; text-align: start; }
  .gm-dom-table td[data-label]::before, .gm-net-table td[data-label]::before { content: attr(data-label); min-width: 6.5rem; font-size: .75rem; color: var(--gm-muted); }
  .gm-dom-table td:last-child { position: absolute; top: 8px; right: 8px; }
  .gm-dom-table .gm-mono-copy, .gm-net-table .gm-mono-copy { max-inline-size: 100%; }
}

/* list page with a side form (clients): side by side only when the content area is 1120 px wide */
.gm-listside-wrap { container: gmlist / inline-size; }
.gm-listside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.gm-listside > * { min-width: 0; }
.gm-listside > :last-child { max-width: 40rem; }
@container gmlist (min-width: 70rem) { .gm-listside { grid-template-columns: minmax(0, 1fr) 20rem; } .gm-listside > :last-child { max-width: none; } }
.gm-ell { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-chiprow--nowrap { flex-wrap: nowrap; }
/* clients table: one line per cell, numbers right-aligned in tabular figures; cards under 640 px */
.gm-cust-table td, .gm-cust-table th { padding-inline: .5rem; }
.gm-cust-name { max-width: 16rem; }
.gm-cust-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gm-cust-title .gm-ell { flex: 0 1 auto; }
.gm-cust-ns .gm-mono-copy { max-inline-size: 12rem; }
@media (max-width: 639.98px) {
  .gm-cust-table, .gm-cust-table tbody { display: block; }
  .gm-cust-table thead { display: none; }
  .gm-cust-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--gm-border); }
  .gm-cust-table td { display: flex; justify-content: space-between; gap: 8px; padding: 0; border: 0; max-width: none; }
  .gm-cust-table td.gm-cust-name, .gm-cust-table td.gm-cust-ns { grid-column: 1 / -1; display: block; }
  .gm-cust-table td.gm-cust-ns { margin: 4px 0; }
  .gm-cust-table td.gm-num[data-label]::before { content: attr(data-label); color: var(--gm-muted); font-size: .75rem; font-family: var(--gm-font); }
}

/* new resource page: the tab bar with the serverless link beside it; self-service pre-flight, compact price, request progress */
.gm-req-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.gm-req-tabs > .gm-ptabs { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.gm-ss-badge { margin-inline-start: .35rem; font-weight: 600; vertical-align: 1px; }
.gm-class-hint span { display: block; }
.gm-ss-check:empty { display: none; }
.gm-ss-check { border-radius: var(--gm-radius-sm); padding: .5rem .75rem; margin-bottom: .5rem; border: 1px solid var(--gm-border); }
.gm-ss-ok { color: var(--gm-success); background: var(--gm-success-bg); border-color: transparent; }
.gm-ss-no { color: var(--gm-danger); background: var(--gm-danger-bg); border-color: transparent; }
.gm-ss-warn { color: var(--gm-warning); background: var(--gm-warning-bg); border-color: transparent; }
.gm-ss-check .gm-toolbar { color: var(--gm-ink); flex-wrap: wrap; }
.gm-ss-mobile { display: flex; align-items: baseline; gap: .5rem; font-family: var(--gm-font-num); }
.gm-stepper { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; counter-reset: none; }
.gm-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; position: relative; color: var(--gm-muted); font-size: .8125rem; }
.gm-step + .gm-step::before { content: ""; position: absolute; top: 1rem; right: calc(50% + 1.25rem); width: calc(100% - 2.5rem + .5rem); height: 2px; background: var(--gm-border); }
.gm-step-done + .gm-step::before { background: var(--gm-success); }
.gm-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--gm-border-strong); background: var(--gm-surface); font-weight: 600; }
.gm-step-done { color: var(--gm-ink); }
.gm-step-done .gm-step-dot { border-color: var(--gm-success); background: var(--gm-success-bg); color: var(--gm-success); }
.gm-step-current { color: var(--gm-ink); font-weight: 600; }
.gm-step-current .gm-step-dot { border-color: var(--gm-info); color: var(--gm-info); }
@media (max-width: 479.98px) {
  .gm-stepper { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .gm-step { flex-direction: row; text-align: start; }
  .gm-step + .gm-step::before { display: none; }
}

/* ================================================================== cards that never widen the page
   (network pages, 2026-10-30). A card header's actions shrink and wrap
   instead of pushing the card wider than the screen; on a phone they go
   under the title when both do not fit. */
.card-header > .card-title { min-width: 0; overflow-wrap: break-word; }
.card-actions { min-width: 0; max-width: 100%; }
.card-actions.d-flex { flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .card-header { flex-wrap: wrap; row-gap: .5rem; }
  .card-header > .card-actions { margin: 0 0 0 auto; }
}
/* the toggle of a collapsible card (app.js initCollapsible): a real button, in the title */
.gm-collapse-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 2rem; min-height: 2rem; margin: -.25rem .25rem -.25rem -.25rem; padding: 0;
  border: 0; border-radius: var(--gm-radius-sm); background: none; color: var(--gm-muted); vertical-align: middle; cursor: pointer; }
.gm-collapse-toggle:hover { color: var(--gm-ink); background: var(--gm-surface-2); }
.gm-collapse-toggle:focus-visible { outline: var(--gm-focus-width, 2px) solid var(--gm-focus, var(--gm-brand)); outline-offset: var(--gm-focus-offset, 2px); }
.gm-collapse-toggle > .gm-collapse-icon { margin: 0; }
.card-header .card-title > .gm-collapse-toggle + .ti { display: none; } /* the redesign hides a title's leading icon, also after the toggle */
@media (pointer: coarse), (max-width: 575.98px) { .gm-collapse-toggle { min-width: var(--gm-size-target-min); min-height: var(--gm-size-target-min); } }
/* long addresses (CIDR, IPv6, host:port) break inside their cell */
.gm-addr { overflow-wrap: anywhere; }
.gm-minw0 { min-width: 0; }

/* a table whose rows become record cards under 640 px: <table class="gm-rectable">,
   td.gm-rec-main (the row's name, top left), td.gm-rec-act (its buttons, top right),
   the other cells one per line with their data-label */
@media (max-width: 639.98px) {
  .gm-rectable, .gm-rectable > tbody { display: block; }
  .gm-rectable > thead { display: none; }
  .gm-rectable > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--gm-border); }
  .gm-rectable > tbody > tr:last-child { border-bottom: 0; }
  .gm-rectable > tbody > tr > td { display: block; grid-column: 1 / -1; min-width: 0; padding: 0 !important; border: 0 !important; text-align: start !important; white-space: normal; overflow-wrap: anywhere; }
  .gm-rectable > tbody > tr > td[data-label] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; }
  .gm-rectable > tbody > tr > td[data-label]::before { content: attr(data-label); flex: 0 0 7rem; font-family: var(--gm-font); font-size: .75rem; color: var(--gm-muted); }
  .gm-rectable > tbody > tr > td.gm-rec-main { grid-column: 1; grid-row: 1; }
  .gm-rectable > tbody > tr > td.gm-rec-act { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
  .gm-rectable > tbody > tr > td.gm-rec-order { order: 9; }
  .gm-rectable > tbody > tr > td[colspan]:not(.gm-rec-main) { grid-column: 1 / -1; }
  .gm-rectable > tbody > tr.gm-rec-empty { display: block; }
  .gm-rectable .btn-icon { min-width: var(--gm-size-target-min); min-height: var(--gm-size-target-min); }
}

/* Firewall: the open ports of a flow wrap inside the card header; the zone map
   keeps a legible size on a phone and scrolls sideways inside its card */
.gm-fwchips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; }
.gm-fwchain-acts { display: flex; flex: 1 1 16rem; align-items: center; justify-content: flex-end; gap: .375rem; }
.gm-fwchain-acts > .gm-fwchips { flex: 0 1 auto; justify-content: flex-end; }
.gm-fwchain-acts > .btn { flex: 0 0 auto; margin-inline-start: auto; }
.gm-fwchain-acts:not(:has(> .gm-fwchips)) { flex: 0 0 auto; } /* only the «+»: it stays beside the title */
@media (max-width: 575.98px) {
  .gm-fwchain-acts > .gm-fwchips { flex: 1 1 auto; justify-content: flex-start; }
  .gm-fwchain-acts > .btn { min-width: var(--gm-size-target-min); min-height: var(--gm-size-target-min); }
}
.gm-fwmap-body { overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 767.98px) { .gm-fwmap-body > svg.gm-fwmap { min-width: 36rem; } }
/* the map reads the theme's tokens (it was drawn in fixed blues and oranges) */
.fw-zone rect, [data-bs-theme="light"] .fw-zone rect { fill: var(--gm-surface-2); stroke: var(--gm-border-strong); }
.fw-zone-fw rect { stroke: var(--gm-brand); }
.fw-zone-wan rect { stroke: var(--gm-danger); }
.fw-zone-vpns rect { stroke: var(--gm-paused); }
.fw-zone-lan rect { stroke: var(--gm-success); }
.fw-zone-t { fill: var(--gm-ink); }
.fw-zone-s { fill: var(--gm-muted); }
.fw-flow, .fw-label rect, .fw-self rect { stroke: var(--gm-info); }
.fw-arrowhead { fill: var(--gm-info); }
.fw-flow.ch, .fw-label.ch rect { stroke: var(--gm-warning); }
.fw-arrowhead.ch { fill: var(--gm-warning); }
.fw-label rect { fill: var(--gm-surface); }
.fw-self rect { fill: var(--gm-info-bg); }
.fw-label text, .fw-self text { fill: var(--gm-ink); }
.gm-legend-line { border-top-color: var(--gm-info); }
.gm-legend-line.ch { border-top-color: var(--gm-warning); }
/* the draft bar: the theme's surface and shadow */
.gm-draftbar { background: var(--gm-surface); box-shadow: var(--gm-shadow-bar, 0 -6px 24px rgba(0,0,0,.35)); }
@media (max-width: 575.98px) { .gm-draftbar { gap: .5rem .75rem; padding: .625rem .75rem; } .gm-draftbar > form { flex: 1 1 auto; } .gm-draftbar > form > .btn { width: 100%; } }
/* the raw editor's file list: a short scrolling list above the editor on a phone */
@media (max-width: 991.98px) { .gm-fwfiles { max-height: 14rem; overflow-y: auto; } }
/* a footer with a button and a long note: the button keeps its label */
.gm-footnote { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.gm-footnote > .btn, .gm-footnote > form { flex: 0 0 auto; }
.gm-footnote > .small { flex: 1 1 18rem; min-width: 0; }

/* ================================================================== themes: shared pieces
   Every rule below reads tokens; the theme files (gm-themes.css) only set
   custom properties. The structure a theme changes (B's band) is the same
   DOM laid out again, never other markup. */

/* the theme picker (Sistema › Aspetto, Impostazioni › Profilo): radios */
.gm-theme-pick { display: grid; gap: var(--gm-space-2, .5rem); border: 0; padding: 0; margin: 0; }
.gm-theme-opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: .35rem .75rem; padding: .7rem .8rem; min-height: var(--gm-size-target-min);
  border: 1px solid var(--gm-border-strong); border-radius: var(--gm-radius); background: var(--gm-surface); cursor: pointer; }
.gm-theme-opt:hover { background: var(--gm-surface-2); }
.gm-theme-opt .form-check-input { margin: .15rem 0 0; float: none; }
.gm-theme-opt:has(input:checked) { background: var(--gm-selected-bg); color: var(--gm-selected-ink); box-shadow: inset 0 0 0 2px var(--gm-selected-border); }
.gm-theme-opt:has(input:focus-visible) { outline: var(--gm-focus-width) solid var(--gm-focus); outline-offset: var(--gm-focus-offset); }
.gm-theme-opt input:focus-visible { outline: none; }
.gm-theme-opt-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; grid-column: 3; }
.gm-theme-opt-t b { font-weight: 600; }
.gm-theme-opt-t small { color: var(--gm-muted); }
.gm-theme-opt:has(input:checked) .gm-theme-opt-t small { color: var(--gm-ink-2); }
.gm-theme-opt > .form-check-input + .gm-theme-opt-t { grid-column: 2 / 4; }
.gm-theme-sw { display: inline-grid; grid-template-columns: repeat(4, .9rem); height: 1.6rem; border: 1px solid var(--gm-border-strong); }
.gm-theme-sw i { display: block; }

/* selection is not focus: selected = tint + 2 px inner brand line + aria-selected; focus = the outline, added on top */
.table tbody tr.table-active > *:first-child, .table tbody tr[aria-selected="true"] > *:first-child { box-shadow: inset 3px 0 0 var(--gm-selected-border); }
[aria-selected="true"]:focus-visible, .table-active:focus-visible { outline: var(--gm-focus-width) solid var(--gm-focus); outline-offset: var(--gm-focus-offset); }

/* on a brand surface the marks are --gm-on-brand (themes: the tick is drawn in it) */
:root[data-gm-theme]:not([data-gm-theme="attuale"]) .form-check-input:checked[type="checkbox"] { background-image: var(--gm-check-icon); }
:root[data-gm-theme]:not([data-gm-theme="attuale"]) .form-check-input:checked[type="radio"] { background-image: radial-gradient(circle, var(--gm-on-brand) 0 28%, transparent 32%); }
:root[data-gm-theme]:not([data-gm-theme="attuale"]) .form-switch .form-check-input:checked { background-image: radial-gradient(circle at calc(100% - .5em) 50%, var(--gm-on-brand) 0 .36em, transparent .4em); }
.form-check-input:checked { border-color: var(--gm-brand); }
.form-check-input { border-color: var(--gm-input-border); }

/* the portal: 44 px touch targets in every theme (density.portal sets the size) */
:root[data-gm-app="portal"]:not([data-gm-theme="attuale"]) :is(.gm-sidebar .nav-link, .gm-iconbtn, .btn:not(.btn-sm)) { min-height: var(--gm-size-target-min); }
:root[data-gm-app="portal"]:not([data-gm-theme="attuale"]) .gm-iconbtn { min-width: var(--gm-size-target-min); }
@media (pointer: coarse), (max-width: 991.98px) { /* «attuale» too: on touch, 44 px */
  :root[data-gm-app="portal"] :is(.gm-sidebar .nav-link, .btn, .form-control, .form-select, .gm-iconbtn) { min-height: 2.75rem; }
  :root[data-gm-app="portal"] .gm-iconbtn { min-width: 2.75rem; } }

/* ---- A · Banco a mosaico: tiles separated by the bg «fuga», no shadows; tabs with a top bar */
:root[data-gm-theme="a"] .row-cards { --tblr-gutter-x: var(--gm-tile-gap); --tblr-gutter-y: var(--gm-tile-gap); }
:root[data-gm-theme="a"] .gm-ptabs { gap: var(--gm-tile-gap); border-bottom: 0; }
:root[data-gm-theme="a"] .gm-ptabs a { background: var(--gm-surface); min-height: var(--gm-tab-h); display: inline-flex; align-items: center; }
:root[data-gm-theme="a"] .gm-ptabs a.active { background: var(--gm-surface-2); box-shadow: inset 0 3px 0 var(--gm-brand); }
:root[data-gm-theme="a"] .table thead th { color: var(--gm-muted); }
:root[data-gm-theme="a"] .gm-sidebar { border-right: var(--gm-tile-gap) solid var(--gm-bg); }

/* ---- B · Quadro orario: sections opened by a 3 px rule, condensed labels, tabs underlined 5 px */
:root[data-gm-theme="b"] .card-header { border-bottom: 1px solid var(--gm-border); padding-inline: 0; }
:root[data-gm-theme="b"] .card-body { padding-inline: 0; }
:root[data-gm-theme="b"] .card-table .table > :not(caption) > * > :first-child { padding-left: 0; }
:root[data-gm-theme="b"] .gm-kpi .card-body { padding-inline: 0; }
:root[data-gm-theme="b"] .gm-ptabs a { font: 700 1.1875rem/1 var(--gm-font-display); color: var(--gm-ink-2); min-height: var(--gm-tab-h); display: inline-flex; align-items: center; }
:root[data-gm-theme="b"] .gm-ptabs a:hover { box-shadow: inset 0 -2px 0 var(--gm-ink); }
:root[data-gm-theme="b"] .gm-ptabs a.active { color: var(--gm-ink); box-shadow: inset 0 -5px 0 var(--gm-ink); }
:root[data-gm-theme="b"] .table thead th { font: 700 1rem/1.2 var(--gm-font-display); color: var(--gm-muted); background: transparent; }
:root[data-gm-theme="b"] .subheader, :root[data-gm-theme="b"] .form-label { font-family: var(--gm-font-display); font-weight: 700; font-size: 1rem; }
:root[data-gm-theme="b"] .btn:not([class*="btn-"]), :root[data-gm-theme="b"] .btn-outline-secondary, :root[data-gm-theme="b"] .btn-secondary { border-width: 2px; border-color: var(--gm-ink); background: transparent; }
:root[data-gm-theme="b"] .form-control:focus, :root[data-gm-theme="b"] .form-select:focus { border-color: var(--gm-ink); box-shadow: 0 0 0 2px var(--gm-bg), 0 0 0 4px var(--gm-ink); }
:root[data-gm-theme="b"] .gm-logo { background: var(--gm-band-ink); color: var(--gm-band-bg); }

/* B's band: the side menu (same DOM) across the top, on desktop */
@media (min-width: 992px) {
  :root[data-gm-theme="b"] .page:has(> .gm-sidebar) { display: block; background: var(--gm-bg); }
  :root[data-gm-theme="b"] .navbar-vertical.gm-sidebar { position: sticky; top: 0; bottom: auto; width: 100%; height: auto; min-height: 58px; overflow: visible; z-index: 1030;
    background: var(--gm-band-bg) !important; color: var(--gm-band-ink); border: 0; }
  :root[data-gm-theme="b"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-inline-start: 0; }
  :root[data-gm-theme="b"] .gm-sidebar > .container-fluid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 58px; padding: 0 2rem; }
  :root[data-gm-theme="b"] .gm-sidebar .gm-brand { padding: 0 1.5rem 0 0; }
  :root[data-gm-theme="b"] .gm-brand-t b { font: 900 1.6rem/1 var(--gm-font-display); color: var(--gm-band-ink); }
  :root[data-gm-theme="b"] .gm-brand-t span { color: var(--gm-band-muted); font-weight: 400; }
  :root[data-gm-theme="b"] .navbar-vertical.gm-sidebar .navbar-collapse { display: flex !important; flex-direction: row; align-items: center; min-height: 0; gap: 1rem; }
  :root[data-gm-theme="b"] .gm-sidebar .navbar-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .25rem; padding: 0 !important; min-width: 0; flex: 1 1 auto; }
  :root[data-gm-theme="b"] .gm-sidebar .gm-nav-head { display: none; }
  :root[data-gm-theme="b"] .navbar-vertical.gm-sidebar .navbar-nav .nav-link, :root[data-gm-theme="b"] .gm-navgrp > summary {
    font: 700 1.1875rem/1 var(--gm-font-display); color: var(--gm-band-ink) !important; padding: .55rem .7rem !important; white-space: nowrap; border-radius: var(--gm-radius-sm); min-height: 2.5rem; }
  :root[data-gm-theme="b"] .gm-sidebar .nav-link .nav-link-icon, :root[data-gm-theme="b"] .gm-navgrp-n, :root[data-gm-theme="b"] .gm-sidebar .nav-item.active > .nav-link::before { display: none !important; }
  :root[data-gm-theme="b"] .gm-sidebar .nav-item.active > .nav-link, :root[data-gm-theme="b"] .gm-navgrp-has > summary { background: var(--gm-side-active); color: var(--gm-side-active-ink) !important; }
  :root[data-gm-theme="b"] .gm-navgrp-has > summary::after { color: var(--gm-side-active-ink); }
  :root[data-gm-theme="b"] .gm-navgrp { position: relative; }
  :root[data-gm-theme="b"] .gm-navgrp > ul { position: absolute; top: calc(100% + .5rem); left: 0; min-width: 16rem; padding: .4rem; background: var(--gm-band-bg); border: var(--gm-rule) solid var(--gm-band-ink); z-index: 1040; }
  :root[data-gm-theme="b"] .gm-navgrp > ul .nav-link { font-size: 1.0625rem; }
  :root[data-gm-theme="b"] .gm-sidebar-foot { display: flex; align-items: center; gap: .75rem; margin: 0 0 0 auto; padding: 0; border: 0; flex: none; }
  :root[data-gm-theme="b"] .gm-sidebar-foot .gm-me { margin: 0; }
  :root[data-gm-theme="b"] .gm-sidebar-foot .gm-me-t, :root[data-gm-theme="b"] .gm-sidebar-foot > .small, :root[data-gm-theme="b"] .gm-side-org { display: none; }
  :root[data-gm-theme="b"] .gm-sidebar-foot .btn { width: auto !important; color: var(--gm-band-ink); border: 2px solid var(--gm-band-ink); }
  :root[data-gm-theme="b"] .gm-avatar { border-radius: var(--gm-radius-sm); background: transparent; color: var(--gm-band-ink); border: 2px solid var(--gm-band-ink); }
  :root[data-gm-theme="b"] .gm-topbar { position: static; border-bottom: 0; background: var(--gm-bg); padding-inline: 2rem; }
  :root[data-gm-theme="b"] .page-body .container-xl, :root[data-gm-theme="b"] .page-header .container-xl { max-width: none; padding-inline: 2rem; }
}

/* ---- C · Tavola IGM: the legend on the side, italic group names, segmented tabs, rounded controls */
:root[data-gm-theme="c"] .navbar-vertical.gm-sidebar { --tblr-sidebar-width: 16.75rem; border-right: 1px solid var(--gm-border); }
@media (min-width: 992px) {
  :root[data-gm-theme="c"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-inline-start: 16.75rem; }
  :root[data-gm-theme="c"] .page:has(> .gm-sidebar) { background: linear-gradient(to right, var(--gm-side-bg) 16.75rem, var(--gm-bg) 16.75rem); }
}
:root[data-gm-theme="c"] .gm-sidebar .gm-nav-head { color: var(--gm-side-muted); padding-top: 1.1rem; }
:root[data-gm-theme="c"] .gm-sidebar .nav-item.active > .nav-link { color: var(--gm-brand-text) !important; }
:root[data-gm-theme="c"] .gm-sidebar .nav-item.active > .nav-link::before { display: none; }
:root[data-gm-theme="c"] .gm-sidebar .nav-link, :root[data-gm-theme="c"] .gm-navgrp > summary { border-radius: var(--gm-radius); }
:root[data-gm-theme="c"] .gm-brand-t b { font: italic 600 1.6rem/1 var(--gm-font-display); }
:root[data-gm-theme="c"] .gm-brand-t span { font: italic 400 1rem/1.3 var(--gm-font-display); color: var(--gm-side-muted); }
:root[data-gm-theme="c"] .gm-logo { border-radius: 50%; }
:root[data-gm-theme="c"] .gm-crumbs { font: italic 400 1rem/1.3 var(--gm-font-display); }
:root[data-gm-theme="c"] .gm-ptabs { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--gm-surface-2); border: 0; border-radius: var(--gm-radius-lg); }
:root[data-gm-theme="c"] .gm-ptabs a { border-radius: var(--gm-radius); min-height: var(--gm-tab-h); display: inline-flex; align-items: center; gap: .45rem; color: var(--gm-ink-2); }
:root[data-gm-theme="c"] .gm-ptabs a.active { background: var(--gm-surface); color: var(--gm-ink); box-shadow: inset 0 0 0 1px var(--gm-border); }
:root[data-gm-theme="c"] .gm-ptabs a.active::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gm-brand); } /* «sei qui» (plus the weight and aria-current) */
:root[data-gm-theme="c"] .form-control:focus, :root[data-gm-theme="c"] .form-select:focus { box-shadow: 0 0 0 1px var(--gm-focus), 0 0 0 4px var(--gm-brand-soft); }
:root[data-gm-theme="c"] .table thead th { color: var(--gm-muted); }
@media (min-width: 992px) {
  :root[data-gm-theme="b"] .gm-navgrp .gm-navgrp > ul { position: static; border: 0; min-width: 0; padding: 0 0 0 .75rem; }
  :root[data-gm-theme="b"] .gm-band-more > .gm-navgrp > ul { left: auto; right: 0; }
}
/* the 7×24 maps: the cell read out by the keyboard (app.js initHeatmaps) */
.gm-heat:focus-visible { outline: var(--gm-focus-width) solid var(--gm-focus); outline-offset: var(--gm-focus-offset); }
.gm-heat > .is-cur { outline: 2px solid var(--gm-ink); outline-offset: -1px; }
@media (min-width: 992px) { :root[data-gm-theme="b"] .gm-navgrp > summary::after { transform: rotate(90deg); } :root[data-gm-theme="b"] .gm-navgrp[open] > summary::after { transform: rotate(-90deg); } }
/* C: open sections (the card is a section: no box, the header a Bodoni title over a hairline) */
:root[data-gm-theme="c"] .card-header { padding-inline: 0; border-bottom-color: var(--gm-border); }
:root[data-gm-theme="c"] .card-body, :root[data-gm-theme="c"] .gm-kpi .card-body { padding-inline: 0; }
:root[data-gm-theme="c"] .card-table .table > :not(caption) > * > :first-child { padding-left: 0; }
:root[data-gm-theme="c"] .row-cards { --tblr-gutter-y: 2.75rem; }
:root[data-gm-theme="c"] .card { box-shadow: none; }

/* ---- A's rail: the side menu (same DOM) as a 76 px column of tiles, icon over label; groups fly out */
@media (min-width: 992px) {
  :root[data-gm-theme="a"] .navbar-vertical.gm-sidebar { --tblr-sidebar-width: 5.75rem; overflow: visible; }
  :root[data-gm-theme="a"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-inline-start: 5.75rem; }
  :root[data-gm-theme="a"] .page:has(> .gm-sidebar) { background: linear-gradient(to right, var(--gm-side-bg) 5.75rem, var(--gm-bg) 5.75rem); }
  :root[data-gm-theme="a"] .gm-sidebar .gm-brand { justify-content: center; padding: .7rem 0; }
  :root[data-gm-theme="a"] .gm-sidebar .gm-brand-t, :root[data-gm-theme="a"] .gm-sidebar .gm-nav-head, :root[data-gm-theme="a"] .gm-navgrp-n,
  :root[data-gm-theme="a"] .gm-sidebar-foot .gm-me-t, :root[data-gm-theme="a"] .gm-sidebar-foot > .small, :root[data-gm-theme="a"] .gm-side-org { display: none !important; }
  :root[data-gm-theme="a"] .gm-sidebar .navbar-nav { padding: 0 !important; gap: var(--gm-tile-gap); }
  :root[data-gm-theme="a"] .navbar-vertical.gm-sidebar .navbar-nav .nav-link, :root[data-gm-theme="a"] .gm-navgrp > summary {
    flex-direction: column; justify-content: center; gap: .2rem; min-height: 3.4rem; padding: .35rem .2rem !important; text-align: center; font-size: var(--gm-text-sm); line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  :root[data-gm-theme="a"] .gm-sidebar .nav-link .nav-link-icon { margin: 0 !important; font-size: 1.35rem; width: auto; }
  :root[data-gm-theme="a"] .gm-sidebar .nav-item.active > .nav-link::before { left: 0; top: 0; bottom: 0; }
  :root[data-gm-theme="a"] .gm-navgrp > summary::after { content: none; }
  :root[data-gm-theme="a"] .gm-navgrp-li { position: relative; }
  :root[data-gm-theme="a"] .gm-navgrp-has > summary { background: var(--gm-side-active); box-shadow: inset 3px 0 0 var(--gm-selected-border); }
  :root[data-gm-theme="a"] .gm-navgrp > ul { position: absolute; left: 100%; top: 0; min-width: 15rem; padding: var(--gm-tile-gap); background: var(--gm-side-bg); box-shadow: var(--gm-shadow-modal-pop, 0 0 0 2px var(--gm-accent-line)); z-index: 1040; }
  :root[data-gm-theme="a"] .gm-navgrp > ul .nav-link { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; min-height: 2.25rem !important; font-size: var(--gm-text-md) !important; padding: .4rem .65rem !important; }
  :root[data-gm-theme="a"] .gm-navgrp > ul .nav-link .nav-link-icon { font-size: 1.05rem; margin-right: .55rem !important; }
  :root[data-gm-theme="a"] .gm-sidebar-foot { padding: .5rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
  :root[data-gm-theme="a"] .gm-sidebar-foot .gm-me { margin: 0; }
  :root[data-gm-theme="a"] .gm-sidebar-foot .btn { font-size: var(--gm-text-xs); padding: .2rem; white-space: normal; }
  :root[data-gm-theme="a"] .gm-sidebar-foot .btn .ti { display: block; margin: 0 auto !important; }
}
:root[data-gm-theme="b"] :is(.btn-sm, .gm-orgsel, .gm-orgsel *) { font-family: var(--gm-font); } /* condensed never under 16 px */
:root[data-gm-theme="b"] .btn-sm { font-weight: 600; }
:root[data-gm-theme="b"][data-bs-theme="light"] { --gm-toggler-filter: invert(1); } /* the band is black in both modes */
.gm-theme-opt-t .gm-tag { align-self: flex-start; }