/* =========================================================
   Materia — Design system
   Palette: slate industriale + accento caldo (default ambra, personalizzabile)
   Font: Space Grotesk (titoli) / Inter (testo) / JetBrains Mono (codici, quantità)
   ========================================================= */

:root {
  /* Palette pastello: bianco / blu / celeste */
  --hg-primary: #4A86C8;
  --hg-primary-rgb: 74, 134, 200;
  --hg-primary-soft: rgba(var(--hg-primary-rgb), .12);
  --hg-primary-hover: color-mix(in srgb, var(--hg-primary) 85%, #1E3A5F);
  --hg-accent: #A7D3F2;

  --hg-bg: #F4F8FC;
  --hg-surface: #FFFFFF;
  --hg-surface-2: #F0F5FA;
  --hg-border: #DCE6F2;
  --hg-border-strong: #C3D4E6;
  --hg-fg: #1F2F44;
  --hg-fg-muted: #5C7189;
  --hg-fg-subtle: #8FA3B8;

  --hg-sidebar-bg: #E8F1FA;
  --hg-sidebar-fg: #2B4560;
  --hg-sidebar-fg-muted: #7A93AC;
  --hg-sidebar-hover: rgba(74,134,200,.08);
  --hg-sidebar-active: rgba(74,134,200,.16);

  --hg-success: #3E9C7B;
  --hg-danger: #D66A6A;
  --hg-warning: #D9A441;
  --hg-info: #4A86C8;

  --hg-radius: 12px;
  --hg-radius-sm: 8px;
  --hg-shadow: 0 1px 2px rgba(31,47,68,.04), 0 4px 16px -8px rgba(31,47,68,.10);
  --hg-shadow-lg: 0 10px 40px -12px rgba(31,47,68,.22);

  --hg-sidebar-w: 256px;
  --hg-topbar-h: 60px;
  --hg-bottomnav-h: 71px; /* altezza misurata della bottom nav (link 57.5px + 2×6px padding + bordo), esclusa safe-area */

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bs-body-bg: var(--hg-bg);
  --bs-body-color: var(--hg-fg);
  --bs-body-font-family: var(--font-sans);
  --bs-border-color: var(--hg-border);
  --bs-link-color: var(--hg-primary);
  --bs-link-hover-color: var(--hg-primary-hover);
  --bs-primary: var(--hg-primary);
  --bs-primary-rgb: var(--hg-primary-rgb);
  --bs-secondary-color: var(--hg-fg-muted);
  --bs-tertiary-color: var(--hg-fg-subtle);
  --bs-card-bg: var(--hg-surface);
  --bs-border-radius: var(--hg-radius-sm);
  --bs-focus-ring-color: rgba(var(--hg-primary-rgb), .3);
}

[data-bs-theme="dark"] {
  --hg-bg: #0F1720;
  --hg-surface: #172232;
  --hg-surface-2: #1E2B3D;
  --hg-border: #2A3A4F;
  --hg-border-strong: #3B4F68;
  --hg-fg: #E8EFF7;
  --hg-fg-muted: #9FB3C8;
  --hg-fg-subtle: #6E8399;
  --hg-sidebar-bg: #0B121B;
  --hg-sidebar-fg: #C9D8E8;
  --hg-sidebar-fg-muted: #6E8399;
  --hg-sidebar-hover: rgba(122,170,220,.09);
  --hg-sidebar-active: rgba(122,170,220,.18);
  --hg-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px -8px rgba(0,0,0,.6);
  --hg-primary-soft: rgba(var(--hg-primary-rgb), .22);
  --bs-body-bg: var(--hg-bg);
  --bs-body-color: var(--hg-fg);
  --bs-border-color: var(--hg-border);
  --bs-card-bg: var(--hg-surface);
  --bs-secondary-bg: var(--hg-surface-2);
  --bs-tertiary-bg: var(--hg-surface-2);
}

/* ---------- Base ---------- */
html { font-size: 16px; }
body {
  background: var(--hg-bg);
  color: var(--hg-fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .font-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-muted { color: var(--hg-fg-muted) !important; }
.text-subtle { color: var(--hg-fg-subtle) !important; }
.small-caps { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--hg-fg-muted); }
*:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; border-radius: 4px; }
.cursor-pointer { cursor: pointer; }
[data-href] { cursor: pointer; }

/* ---------- Layout ---------- */
.hg-app { display: flex; min-height: 100vh; }
.hg-sidebar {
  width: var(--hg-sidebar-w); flex: 0 0 var(--hg-sidebar-w);
  background: var(--hg-sidebar-bg); color: var(--hg-sidebar-fg);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 16px 12px;
  scrollbar-width: thin; border-right: 1px solid var(--hg-border);
}
.hg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hg-topbar {
  height: var(--hg-topbar-h); display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: color-mix(in srgb, var(--hg-bg) 85%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 1020;
  border-bottom: 1px solid var(--hg-border);
}
.hg-content { padding: 24px; flex: 1; }
@media (max-width: 991.98px) {
  .hg-sidebar { position: fixed; left: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--hg-shadow-lg); }
  .hg-sidebar.show { transform: translateX(0); }
  .hg-nav a { min-height: 44px; }
  .hg-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1040; display: none; }
  .hg-sidebar-backdrop.show { display: block; }
  /* bottom nav + safe-area degli iPhone (home indicator): l'ultimo contenuto non finisce sotto la nav */
  .hg-content { padding: 16px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .hg-topbar { padding: 0 16px; }
}

/* Brand */
.hg-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; color: var(--hg-sidebar-fg); text-decoration: none; }
.hg-brand:hover { color: var(--hg-sidebar-fg); text-decoration: none; }
.hg-brand .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--hg-primary); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; overflow: hidden; flex: 0 0 auto; }
.hg-brand .logo img { width: 100%; height: 100%; object-fit: cover; }
/* marchio Materia (line-art su trasparente): niente riquadro colorato */
.hg-brand .logo.is-mark { background: none; box-shadow: none !important; width: 38px; height: 44px; border-radius: 0; }
.hg-brand .logo.is-mark img { object-fit: contain; }
.brand-on-dark { display: none !important; }
[data-bs-theme="dark"] .brand-on-light { display: none !important; }
[data-bs-theme="dark"] .brand-on-dark { display: inline-block !important; }
.hg-topbar-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--hg-fg); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none; margin-right: auto; }
.hg-topbar-brand:hover { color: var(--hg-fg); text-decoration: none; }
.hg-topbar-brand img { height: 30px; width: auto; }
.hg-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.hg-brand .tag { font-size: .7rem; color: var(--hg-sidebar-fg-muted); }

/* Nav */
.hg-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hg-nav-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--hg-sidebar-fg-muted); padding: 14px 12px 6px; font-weight: 600; }
/* Tre livelli distinti: riposo → hover (tinta leggera) → attivo (tinta piena + barra + grassetto).
   Le voci hanno 2px d'aria fra loro, così hover e attivo adiacenti restano due pillole e non un blocco unico. */
.hg-nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; color: var(--hg-sidebar-fg); font-size: .92rem; font-weight: 500; transition: background .15s, color .15s; min-height: 40px; }
.hg-nav a:hover { background: var(--hg-sidebar-hover); color: var(--hg-primary-hover); text-decoration: none; }
.hg-nav a:active { background: var(--hg-sidebar-active); transition-duration: 0s; }
.hg-nav a:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
.hg-nav a.active, .hg-nav a.active:hover { background: var(--hg-sidebar-active); color: var(--hg-primary-hover); font-weight: 600; }
.hg-nav a.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--hg-primary); }
.hg-nav a .bi { font-size: 1.05rem; width: 20px; text-align: center; opacity: .9; }
.hg-nav a .badge { margin-left: auto; }
.hg-nav .hobby-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: 5px; margin-right: 5px; flex: 0 0 auto; }
.hg-sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hg-border); }

/* Bottom nav mobile */
.hg-bottomnav { display: none; }
@media (max-width: 991.98px) {
  .hg-bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: var(--hg-surface); border-top: 1px solid var(--hg-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .hg-bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--hg-fg-muted); font-size: .68rem; padding: 4px 8px; min-width: 56px; min-height: 48px; justify-content: center; border-radius: 8px; }
  .hg-bottomnav a .bi { font-size: 1.3rem; }
  .hg-bottomnav a.active { color: var(--hg-primary); }
  .hg-bottomnav a:hover { text-decoration: none; }
  /* Barre azioni sticky (es. Salva) sopra la bottom nav, non sotto */
  /* toast sopra la bottom nav, non sopra le sue voci */
  .toast-container.bottom-0 { bottom: calc(var(--hg-bottomnav-h) + env(safe-area-inset-bottom)) !important; }
  .sticky-bottom { bottom: calc(var(--hg-bottomnav-h) + env(safe-area-inset-bottom)) !important; z-index: 1020;
    border-top: 1px solid var(--hg-border); box-shadow: 0 -6px 16px -12px rgba(31,47,68,.25); }
}

/* ---------- Page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-header h1 { font-size: 1.6rem; margin: 0; }
.page-header .eyebrow { font-size: .78rem; color: var(--hg-fg-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.page-header .actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Telefoni: azioni della testata in griglia a 2 colonne, larghezze uguali; l'ultima dispari occupa tutta la riga */
@media (max-width: 575.98px) {
  .page-header .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .page-header .actions > * { width: 100%; min-width: 0; }
  .page-header .actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-header .actions .btn { width: 100%; }
  /* Testate con selettore vista (materiali, progetti): tutto su una riga, icone 44px, "Nuovo …" prende il resto */
  .page-header .actions:has(> .btn-group:not(.boxes-download)) { display: flex; flex-wrap: nowrap; }
  .page-header .actions:has(> .btn-group:not(.boxes-download)) > * { width: auto; flex: 0 0 auto; }
  .page-header .actions:has(> .btn-group:not(.boxes-download)) > :last-child { flex: 1 1 auto; grid-column: auto; }
  .page-header .actions:has(> .btn-group:not(.boxes-download)) .btn-group .btn, .page-header .actions:has(> .btn-group:not(.boxes-download)) > .btn:not(:last-child) { width: 44px; padding-inline: 0; }
}

/* ---------- Cards ---------- */
.card { border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); background: var(--hg-surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--hg-border); font-family: var(--font-display); font-weight: 600; padding: 14px 18px; display: flex; align-items: center; gap: 8px; }
.card-header > .bi { color: var(--hg-fg-muted); }
.card-body { padding: 18px; }
.card-flat { box-shadow: none; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--hg-shadow-lg); }

/* Stat strip: un pannello unico con 4 celle KPI centrate e separate da divisori */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.stat-tile {
  --tone: var(--hg-primary); --tone-soft: var(--hg-primary-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  min-width: 0; padding: 20px 16px 18px; text-align: center; color: inherit; text-decoration: none;
  transition: background-color .15s ease;
}
.stat-tile + .stat-tile { border-left: 1px solid var(--hg-border); }
.stat-tile.tone-danger  { --tone: var(--hg-danger);   --tone-soft: rgba(214,106,106,.14); }
.stat-tile.tone-success { --tone: var(--hg-success);  --tone-soft: rgba(62,156,123,.14); }
.stat-tile.tone-info    { --tone: var(--hg-info);     --tone-soft: rgba(74,134,200,.12); }
.stat-tile.tone-neutral { --tone: var(--hg-fg-muted); --tone-soft: var(--hg-surface-2); }
.stat-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  font-size: 1.1rem; background: var(--tone-soft); color: var(--tone); }
.stat-value { max-width: 100%; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { font-size: .82rem; font-weight: 600; color: var(--hg-fg); }
.stat-meta { font-size: .76rem; color: var(--hg-fg-muted); line-height: 1.35; }
.stat-tile.tone-danger .stat-meta, .stat-tile.tone-success .stat-meta { color: var(--tone); font-weight: 500; }
.stat-tile.is-link:hover { background: var(--hg-surface-2); }
.stat-tile.is-link:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; border-radius: 0; }
@media (max-width: 767.98px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile { padding: 16px 10px 14px; }
  .stat-tile:nth-child(odd) { border-left: 0; }
  .stat-tile:nth-child(n+3) { border-top: 1px solid var(--hg-border); }
}
@media (prefers-reduced-motion: reduce) { .stat-tile { transition: none; } }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--hg-radius-sm); font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s ease; }
.btn-sm { min-height: 32px; padding: .25rem .6rem; font-size: .85rem; }
.btn-xs { min-height: 28px; padding: .1rem .5rem; font-size: .78rem; border-radius: 6px; }
.btn-primary { --bs-btn-bg: var(--hg-primary); --bs-btn-border-color: var(--hg-primary); --bs-btn-hover-bg: var(--hg-primary-hover); --bs-btn-hover-border-color: var(--hg-primary-hover); --bs-btn-active-bg: var(--hg-primary-hover); --bs-btn-active-border-color: var(--hg-primary-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--hg-primary); --bs-btn-disabled-border-color: var(--hg-primary); }
.btn-outline-primary { --bs-btn-color: var(--hg-primary); --bs-btn-border-color: var(--hg-primary); --bs-btn-hover-bg: var(--hg-primary); --bs-btn-hover-border-color: var(--hg-primary); --bs-btn-active-bg: var(--hg-primary); --bs-btn-active-border-color: var(--hg-primary); }
.btn-soft { background: var(--hg-surface-2); border: 1px solid var(--hg-border); color: var(--hg-fg); }
.btn-soft:hover { background: var(--hg-border); color: var(--hg-fg); }
.btn-icon { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 8px; }
.btn-icon.btn-sm { width: 30px; height: 30px; min-height: 30px; }
/* Touch target ≥44px su telefoni e schermi touch (regola progetto: fruibile su Galaxy S10 / iPhone X-11) */
@media (max-width: 767.98px), (pointer: coarse) {
  .btn:not(.btn-xs) { min-height: 44px; }
  .btn:not(.btn-xs):has(> .bi:only-child) { min-width: 44px; } /* pulsanti solo icona (es. "+" attività, minuti) */
  .btn-icon:not(.btn-xs), .btn-icon.btn-sm { width: 44px; height: 44px; min-height: 44px; }
  .hg-topbar .btn { min-height: 44px; min-width: 44px; }
  .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
  .form-switch { min-height: 44px; }
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--hg-fg-muted); }
.btn-ghost:hover { background: var(--hg-surface-2); color: var(--hg-fg); }

/* ---------- Badges soft ---------- */
.badge { font-weight: 600; border-radius: 6px; padding: .3em .55em; font-size: .74rem; }
.text-bg-success-soft { background: #E3F3EC; color: #2C7A5E; }
.text-bg-danger-soft { background: #FBE7E7; color: #A94848; }
.text-bg-warning-soft { background: #FBF0DA; color: #8F6A1E; }
.text-bg-info-soft { background: #E4EFFA; color: #2F5E8F; }
.text-bg-primary-soft { background: var(--hg-primary-soft); color: var(--hg-primary-hover); }
.text-bg-secondary-soft { background: var(--hg-surface-2); color: var(--hg-fg-muted); border: 1px solid var(--hg-border); }
[data-bs-theme="dark"] .text-bg-success-soft { color: #6EE7B7; }
[data-bs-theme="dark"] .text-bg-danger-soft { color: #FCA5A5; }
[data-bs-theme="dark"] .text-bg-warning-soft { color: #FCD34D; }
[data-bs-theme="dark"] .text-bg-info-soft { color: #7DD3FC; }
[data-bs-theme="dark"] .text-bg-primary-soft { color: color-mix(in srgb, var(--hg-primary) 60%, white); }
.badge-hobby { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: .25em .7em .25em .5em; font-size: .74rem; font-weight: 600; color: #fff; }
.badge-hobby .bi { font-size: .8rem; }
.badge-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: .2em .55em; font-size: .72rem; font-weight: 600; text-decoration: none; }
.badge-tag:hover { filter: brightness(.95); text-decoration: none; }

/* Stock indicator */
.stock-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .85rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.stock-pill.ok { background: #E3F3EC; color: #2C7A5E; }
.stock-pill.low { background: #FBF0DA; color: #8F6A1E; }
.stock-pill.out { background: #FBE7E7; color: #A94848; }
[data-bs-theme="dark"] .stock-pill.ok { color: #6EE7B7; }
[data-bs-theme="dark"] .stock-pill.low { color: #FCD34D; }
[data-bs-theme="dark"] .stock-pill.out { color: #FCA5A5; }
.stock-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Progress */
.progress { height: 6px; border-radius: 999px; background: var(--hg-border); }
.progress-bar { background: var(--hg-primary); border-radius: 999px; }
.unit-bar { height: 8px; border-radius: 999px; background: var(--hg-border); overflow: hidden; }
.unit-bar > div { height: 100%; background: var(--hg-success); border-radius: 999px; transition: width .3s; }
.unit-bar.low > div { background: var(--hg-warning); }
.unit-bar.out > div { background: var(--hg-danger); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-bottom-color: var(--hg-border); vertical-align: middle; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hg-fg-muted); font-weight: 600; border-bottom: 1px solid var(--hg-border-strong); white-space: nowrap; background: var(--hg-surface-2); }
.table thead th a { color: inherit; }
.table tbody tr:hover { background: var(--hg-surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-card { overflow: hidden; }
.table-card .table thead th:first-child { border-top-left-radius: 0; }
.table .thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--hg-surface-2); display: grid; place-items: center; color: var(--hg-fg-subtle); font-size: 1.1rem; border: 1px solid var(--hg-border); flex: 0 0 auto; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn { opacity: .55; }
tr:hover .row-actions .btn { opacity: 1; }
@media (max-width: 767.98px) { .row-actions .btn { opacity: 1; } }

/* ---------- Forms ---------- */
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .3rem; }
.form-label .req { color: var(--hg-danger); margin-left: 2px; }
.form-control, .form-select { border-radius: var(--hg-radius-sm); border-color: var(--hg-border-strong); background: var(--hg-surface); color: var(--hg-fg); min-height: 42px; }
.form-control:focus, .form-select:focus { border-color: var(--hg-primary); box-shadow: 0 0 0 .2rem rgba(var(--hg-primary-rgb), .18); }
.form-control-sm, .form-select-sm { min-height: 34px; }
.form-text { color: var(--hg-fg-muted); font-size: .78rem; }
.form-check-input:checked { background-color: var(--hg-primary); border-color: var(--hg-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--hg-primary-rgb), .18); border-color: var(--hg-primary); }
/* Switch: flex con spazio reale tra toggle ed etichetta (il padding-left di Bootstrap è più stretto del toggle ingrandito) */
.form-switch { display: flex; align-items: center; gap: .6rem; padding-left: 0; }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; margin: 0; float: none; flex: 0 0 auto; cursor: pointer; }
.form-switch .form-check-label { cursor: pointer; }
.form-control-color { width: 56px; padding: 4px; }
.input-group-text { background: var(--hg-surface-2); border-color: var(--hg-border-strong); color: var(--hg-fg-muted); }
.form-section { border-top: 1px solid var(--hg-border); padding-top: 18px; margin-top: 18px; }
.form-section-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.form-section-title .bi { color: var(--hg-primary); }
.invalid-feedback { display: block; }
.dims-input { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: center; }
.dims-input .x { color: var(--hg-fg-subtle); text-align: center; }

/* Hobby chips (checkbox styled) */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-group input { position: absolute; opacity: 0; pointer-events: none; }
.chip-group label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--hg-border-strong); background: var(--hg-surface); cursor: pointer; font-size: .875rem; font-weight: 500; transition: all .15s; min-height: 38px; user-select: none; }
.chip-group label:hover { border-color: var(--hg-fg-subtle); }
@media (max-width: 767.98px), (pointer: coarse) { .chip-group label { min-height: 44px; padding-inline: 16px; } }
.chip-group input:checked + label { border-color: var(--chip-color, var(--hg-primary)); background: color-mix(in srgb, var(--chip-color, var(--hg-primary)) 14%, transparent); color: var(--hg-fg); }
.chip-group input:focus-visible + label { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.chip-group .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip-color, var(--hg-primary)); }

/* Icon picker */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.icon-picker input { position: absolute; opacity: 0; pointer-events: none; }
.icon-picker label { display: grid; place-items: center; height: 44px; border-radius: 8px; border: 1.5px solid var(--hg-border); font-size: 1.15rem; cursor: pointer; color: var(--hg-fg-muted); transition: all .15s; }
.icon-picker label:hover { border-color: var(--hg-fg-subtle); color: var(--hg-fg); }
.icon-picker input:checked + label { border-color: var(--hg-primary); background: var(--hg-primary-soft); color: var(--hg-primary); }

/* Tags input */
.tags-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 42px; align-items: center; }
.tags-input .tag { display: inline-flex; align-items: center; gap: 4px; background: var(--hg-surface-2); border: 1px solid var(--hg-border); border-radius: 6px; padding: 2px 8px; font-size: .82rem; }
.tags-input .tag button { border: 0; background: none; padding: 0; line-height: 1; color: var(--hg-fg-muted); cursor: pointer; }
.tags-input input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 120px; color: var(--hg-fg); font-size: .9rem; }

/* ---------- Tree ---------- */
.tree-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; transition: background .15s; }
.tree-item:hover { background: var(--hg-surface-2); }
.tree-item .tree-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .95rem; flex: 0 0 auto; }
.tree-item .tree-name { font-weight: 500; }
.tree-item .tree-meta { font-size: .78rem; color: var(--hg-fg-muted); }
.tree-guide { border-left: 2px dashed var(--hg-border-strong); margin-left: 14px; padding-left: 8px; }
.depth-0 { margin-left: 0; } .depth-1 { margin-left: 24px; } .depth-2 { margin-left: 48px; } .depth-3 { margin-left: 72px; } .depth-4 { margin-left: 96px; } .depth-5 { margin-left: 120px; }
.note-tree a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--hg-fg); font-size: .9rem; }
.note-tree a:hover { background: var(--hg-surface-2); text-decoration: none; }
.note-tree a.active { background: var(--hg-primary-soft); color: var(--hg-primary-hover); font-weight: 600; }
.note-tree a .bi { color: var(--hg-fg-subtle); }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 1199.98px) { .kanban { grid-template-columns: repeat(4, 260px); } }
.kanban-col { background: var(--hg-surface-2); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.kanban-col-head .count { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 999px; padding: 0 8px; font-size: .75rem; color: var(--hg-fg-muted); }
.kanban-card { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 10px; padding: 12px; cursor: grab; transition: box-shadow .15s, transform .15s; }
.kanban-card:hover { box-shadow: var(--hg-shadow); }
.kanban-card.sortable-ghost { opacity: .4; }
.kanban-card .title { font-weight: 600; font-size: .92rem; margin-bottom: 6px; display: block; color: var(--hg-fg); }
.kanban-card .title:hover { color: var(--hg-primary); text-decoration: none; }
.kanban-card .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .75rem; color: var(--hg-fg-muted); }
.kanban-card .cover { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.kanban-col.drag-over { border-color: var(--hg-primary); background: var(--hg-primary-soft); }

/* ---------- Project cover / material image ---------- */
.cover-hero { height: 220px; border-radius: var(--hg-radius); background: var(--hg-surface-2) center/cover no-repeat; border: 1px solid var(--hg-border); position: relative; overflow: hidden; }
.cover-hero.is-empty { display: grid; place-items: center; color: var(--hg-fg-subtle); font-size: 3rem; }
.material-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hg-radius); border: 1px solid var(--hg-border); background: var(--hg-surface-2); }
.material-image.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--hg-fg-subtle); font-size: 3rem; }
.material-image.is-empty .small { font-size: .8rem; font-family: var(--font-mono); opacity: .85; }
.material-image.is-empty.has-color { border-color: rgba(0,0,0,.12); }

/* ---------- Definition list ---------- */
.dl-grid { display: grid; grid-template-columns: minmax(120px, 35%) 1fr; gap: 8px 16px; margin: 0; }
.dl-grid dt { font-size: .8rem; color: var(--hg-fg-muted); font-weight: 500; }
.dl-grid dd { margin: 0; font-size: .92rem; word-break: break-word; }
.color-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); vertical-align: -3px; margin-right: 4px; }

/* ---------- Attachments / links ---------- */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.attach-card { border: 1px solid var(--hg-border); border-radius: 10px; overflow: hidden; background: var(--hg-surface); display: flex; flex-direction: column; position: relative; transition: box-shadow .15s; }
.attach-card:hover { box-shadow: var(--hg-shadow); }
.attach-card .preview { aspect-ratio: 4/3; background: var(--hg-surface-2); display: grid; place-items: center; color: var(--hg-fg-subtle); font-size: 2rem; overflow: hidden; }
.attach-card .preview img { width: 100%; height: 100%; object-fit: cover; }
.attach-card .info { padding: 8px 10px; font-size: .78rem; }
.attach-card .info .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--hg-fg); }
.attach-card .info .size { color: var(--hg-fg-subtle); }
.attach-card .actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.attach-card:hover .actions, .attach-card:focus-within .actions { opacity: 1; }
@media (max-width: 767.98px) { .attach-card .actions { opacity: 1; } }
.attach-card .actions .btn { background: rgba(255,255,255,.92); color: var(--hg-fg); border: 0; width: 28px; height: 28px; min-height: 28px; padding: 0; }
.dropzone { border: 2px dashed var(--hg-border-strong); border-radius: var(--hg-radius); padding: 22px; text-align: center; color: var(--hg-fg-muted); cursor: pointer; transition: all .15s; background: var(--hg-surface-2); }
.dropzone:hover, .dropzone.drag { border-color: var(--hg-primary); background: var(--hg-primary-soft); color: var(--hg-primary-hover); }
.dropzone .bi { font-size: 1.6rem; display: block; margin-bottom: 4px; }

.link-card { display: flex; gap: 12px; border: 1px solid var(--hg-border); border-radius: 10px; overflow: hidden; background: var(--hg-surface); color: var(--hg-fg); transition: box-shadow .15s; position: relative; }
.link-card:hover { box-shadow: var(--hg-shadow); text-decoration: none; color: var(--hg-fg); }
.link-card .img { width: 120px; flex: 0 0 120px; background: var(--hg-surface-2) center/cover no-repeat; display: grid; place-items: center; color: var(--hg-fg-subtle); font-size: 1.5rem; }
.link-card .body { padding: 10px 12px 10px 0; min-width: 0; flex: 1; }
.link-card .title { font-weight: 600; font-size: .9rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card .desc { font-size: .78rem; color: var(--hg-fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card .host { font-size: .72rem; color: var(--hg-fg-subtle); margin-top: 4px; }
.link-card .rm { position: absolute; top: 6px; right: 6px; }
.yt-embed { border-radius: 10px; overflow: hidden; border: 1px solid var(--hg-border); }

/* ---------- Editor.js ---------- */
.note-title-input { font-family: var(--font-display); font-size: 2rem; font-weight: 700; border: 0; background: transparent; width: 100%; padding: 4px 0; color: var(--hg-fg); outline: none; }
.note-title-input::placeholder { color: var(--hg-fg-subtle); }
/* Nota ancorata a sinistra (titolo e testo sulla stessa colonna); larghezza massima per righe leggibili */
.note-editor-wrap { max-width: 860px; margin: 0; }
.codex-editor { font-size: 1rem; }
.codex-editor__redactor { padding-bottom: 120px !important; }
/* Editor.js centra i blocchi (margin: 0 auto): li allineiamo al titolo. I controlli stanno a destra (.ce-toolbar__actions) */
.ce-block__content, .ce-toolbar__content { max-width: 760px; margin-left: 0; margin-right: auto; }
.ce-toolbar__plus, .ce-toolbar__settings-btn { color: var(--hg-fg-muted); background: var(--hg-surface); border: 1px solid var(--hg-border); }
.ce-toolbar__plus:hover, .ce-toolbar__settings-btn:hover { background: var(--hg-surface-2); }
.ce-popover { --color-background: var(--hg-surface); --color-text-primary: var(--hg-fg); --color-text-secondary: var(--hg-fg-muted); --color-border: var(--hg-border); --color-background-item-hover: var(--hg-surface-2); --color-background-item-focus: var(--hg-primary-soft); --color-shadow-icon: transparent; }
.ce-inline-toolbar { background: var(--hg-surface); border-color: var(--hg-border); color: var(--hg-fg); }
.ce-inline-tool, .ce-inline-toolbar__dropdown { color: var(--hg-fg); }
.ce-inline-tool:hover, .ce-inline-toolbar__dropdown:hover { background: var(--hg-surface-2); }
.ce-conversion-toolbar { background: var(--hg-surface); border-color: var(--hg-border); color: var(--hg-fg); }
.ce-conversion-tool:hover { background: var(--hg-surface-2); }
.ce-header { font-family: var(--font-display); font-weight: 600; }
.ce-paragraph[data-placeholder]:empty::before { color: var(--hg-fg-subtle); }
.cdx-block { padding: .35em 0; }
.cdx-checklist__item-checkbox-check { border-color: var(--hg-border-strong); }
.cdx-checklist__item--checked .cdx-checklist__item-checkbox-check { background: var(--hg-primary); border-color: var(--hg-primary); }
.cdx-input, .cdx-settings-button, .ce-code__textarea { background: var(--hg-surface-2); border-color: var(--hg-border); color: var(--hg-fg); border-radius: 8px; }
.ce-code__textarea { font-family: var(--font-mono); font-size: .85rem; }
.cdx-quote__text { background: var(--hg-surface-2); }
.image-tool__image-picture { border-radius: 10px; }
.cdx-attaches { border-color: var(--hg-border); }
.cdx-attaches__title, .cdx-attaches__size { color: var(--hg-fg); }
.link-tool__content { background: var(--hg-surface); border-color: var(--hg-border); color: var(--hg-fg); }
.tc-table, .tc-row, .tc-cell { border-color: var(--hg-border-strong) !important; }
.tc-add-row:hover, .tc-add-column:hover { background: var(--hg-surface-2); }
.embed-tool__caption, .image-tool__caption, .cdx-quote__caption { color: var(--hg-fg-muted); }
.ce-toolbar__actions { right: -10px; }
@media (max-width: 650px) { .ce-toolbar__actions { right: 0; } .codex-editor--narrow .ce-toolbar__actions { right: 0; } }
/* Su telefono Editor.js apre menu/impostazioni blocco come pannello fisso in basso; .codex-editor (z-index 1) crea uno
   stacking context che lo lascerebbe sotto la bottom nav (z 1030): alziamo l'editor solo mentre un popover è aperto */
@media (max-width: 650px) { .codex-editor:has(.ce-popover--opened) { z-index: 1041; } }
.editor-status { font-size: .78rem; color: var(--hg-fg-subtle); display: inline-flex; align-items: center; gap: 6px; }
.editor-status.saving { color: var(--hg-warning); }
.editor-status.saved { color: var(--hg-success); }
.editor-status.error { color: var(--hg-danger); }

/* Rendered note content (read view) */
.note-content { font-size: 1rem; line-height: 1.7; max-width: 760px; }
.note-content .ej-h { margin-top: 1.4em; margin-bottom: .4em; }
.note-content h1.ej-h { font-size: 1.8rem; } .note-content h2.ej-h { font-size: 1.45rem; } .note-content h3.ej-h { font-size: 1.2rem; }
.note-content p { margin-bottom: .8em; }
.note-content .ej-quote { border-left: 3px solid var(--hg-primary); padding: 8px 16px; background: var(--hg-surface-2); border-radius: 0 8px 8px 0; margin: 1em 0; }
.note-content .ej-quote footer { font-size: .8rem; color: var(--hg-fg-muted); }
.note-content .ej-code { background: #1F2F44; color: #E8EFF7; padding: 14px 16px; border-radius: 10px; font-family: var(--font-mono); font-size: .85rem; overflow-x: auto; }
.note-content .ej-delimiter { border: 0; text-align: center; margin: 1.6em 0; height: auto; opacity: 1; }
.note-content .ej-delimiter::before { content: '* * *'; letter-spacing: .6em; color: var(--hg-fg-subtle); font-size: 1.2rem; }
.note-content .ej-checklist { list-style: none; padding: 0; }
.note-content .ej-checklist li { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.note-content .ej-checklist li .bi { color: var(--hg-primary); margin-top: 3px; }
.note-content .ej-checklist li.done span { text-decoration: line-through; color: var(--hg-fg-muted); }
.note-content .ej-image { margin: 1.2em 0; }
.note-content .ej-image img { max-width: 100%; border-radius: 10px; }
.note-content .ej-image.bordered img { border: 1px solid var(--hg-border); }
.note-content .ej-image.bg { background: var(--hg-surface-2); padding: 16px; border-radius: 10px; text-align: center; }
.note-content figcaption { font-size: .8rem; color: var(--hg-fg-muted); text-align: center; margin-top: 6px; }
.note-content .ej-attach { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hg-border); border-radius: 10px; padding: 10px 14px; color: var(--hg-fg); background: var(--hg-surface); margin: .5em 0; }
.note-content .ej-attach .bi { color: var(--hg-primary); font-size: 1.2rem; }
.note-content .ej-attach .size { color: var(--hg-fg-subtle); font-size: .78rem; }
.note-content .ej-embed { margin: 1.2em 0; }
.note-content .ej-embed .ratio { border-radius: 10px; overflow: hidden; border: 1px solid var(--hg-border); }
.note-content .ej-link { display: flex; border: 1px solid var(--hg-border); border-radius: 10px; overflow: hidden; color: var(--hg-fg); margin: 1em 0; background: var(--hg-surface); }
.note-content .ej-link img { width: 140px; object-fit: cover; flex: 0 0 140px; }
.note-content .ej-link .body { padding: 10px 14px; min-width: 0; }
.note-content .ej-link .title { font-weight: 600; }
.note-content .ej-link .desc { font-size: .82rem; color: var(--hg-fg-muted); }
.note-content .ej-link .host { font-size: .74rem; color: var(--hg-fg-subtle); margin-top: 4px; }
.note-content .ej-warning { border: 1px solid #EEDBAF; background: #FBF0DA; border-radius: 10px; padding: 12px 16px; margin: 1em 0; }
.note-content mark { background: rgba(var(--hg-primary-rgb), .3); border-radius: 3px; padding: 0 2px; }
.note-content code { background: var(--hg-surface-2); border: 1px solid var(--hg-border); border-radius: 4px; padding: 1px 5px; font-family: var(--font-mono); font-size: .85em; color: var(--hg-fg); }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--hg-fg-muted); }
.empty-state > .bi { font-size: 2.6rem; color: var(--hg-fg-subtle); display: block; margin-bottom: 12px; }
.empty-state h5 { font-family: var(--font-display); color: var(--hg-fg); }
.alert { border-radius: var(--hg-radius-sm); border: 1px solid transparent; }
.alert-success { background: #E3F3EC; color: #24634C; border-color: #BFE3D2; }
.alert-danger { background: #FBE7E7; color: #8F3B3B; border-color: #F1C4C4; }
.alert-warning { background: #FBF0DA; color: #7A5A17; border-color: #EEDBAF; }
.alert-info { background: #E4EFFA; color: #2A527D; border-color: #C7DCF1; }
[data-bs-theme="dark"] .alert-success { color: #A7F3D0; } [data-bs-theme="dark"] .alert-danger { color: #FECACA; } [data-bs-theme="dark"] .alert-warning { color: #FDE68A; } [data-bs-theme="dark"] .alert-info { color: #BAE6FD; }
.toast-container { z-index: 1090; }
.dropdown-menu { border-radius: 10px; border-color: var(--hg-border); box-shadow: var(--hg-shadow-lg); background: var(--hg-surface); padding: 6px; }
.dropdown-item { border-radius: 6px; padding: 8px 12px; font-size: .9rem; color: var(--hg-fg); }
.dropdown-item:hover { background: var(--hg-surface-2); color: var(--hg-fg); }
.modal-content { border-radius: var(--hg-radius); border-color: var(--hg-border); background: var(--hg-surface); color: var(--hg-fg); }
.modal-header { border-bottom-color: var(--hg-border); font-family: var(--font-display); }
.modal-footer { border-top-color: var(--hg-border); }
.nav-pills .nav-link { border-radius: 8px; color: var(--hg-fg-muted); font-weight: 500; font-size: .9rem; padding: 8px 14px; }
.nav-pills .nav-link.active { background: var(--hg-primary); color: #fff; }
.nav-tabs { border-bottom-color: var(--hg-border); }
.nav-tabs .nav-link { color: var(--hg-fg-muted); font-weight: 500; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; }
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--hg-fg); }
.nav-tabs .nav-link.active { color: var(--hg-primary); background: transparent; border-bottom-color: var(--hg-primary); }
.pagination { --bs-pagination-color: var(--hg-fg); --bs-pagination-bg: var(--hg-surface); --bs-pagination-border-color: var(--hg-border); --bs-pagination-hover-bg: var(--hg-surface-2); --bs-pagination-hover-color: var(--hg-fg); --bs-pagination-hover-border-color: var(--hg-border); --bs-pagination-active-bg: var(--hg-primary); --bs-pagination-active-border-color: var(--hg-primary); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--hg-primary-rgb), .18); --bs-pagination-disabled-bg: var(--hg-surface-2); --bs-pagination-disabled-color: var(--hg-fg-subtle); --bs-pagination-disabled-border-color: var(--hg-border); }
.list-group-item { background: var(--hg-surface); border-color: var(--hg-border); color: var(--hg-fg); }
.list-group-item-action:hover { background: var(--hg-surface-2); color: var(--hg-fg); }
.breadcrumb { font-size: .85rem; margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hg-fg-subtle); }
.breadcrumb-item.active { color: var(--hg-fg-muted); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { min-height: 38px; width: auto; }
.search-input { position: relative; }
.search-input .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hg-fg-subtle); pointer-events: none; }
.search-input .form-control { padding-left: 36px; }
.kbd { font-family: var(--font-mono); font-size: .7rem; border: 1px solid var(--hg-border-strong); border-radius: 4px; padding: 1px 5px; color: var(--hg-fg-muted); background: var(--hg-surface-2); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hg-border); }
.timeline li:last-child { border-bottom: 0; }
.timeline .tl-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; font-size: .95rem; }
.timeline .tl-body { flex: 1; min-width: 0; font-size: .875rem; }
.timeline .tl-time { font-size: .74rem; color: var(--hg-fg-subtle); white-space: nowrap; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; transition: background .15s; }
.task-item:hover { background: var(--hg-surface-2); }
.task-item .handle { color: var(--hg-fg-subtle); cursor: grab; }
.task-item.done .title { text-decoration: line-through; color: var(--hg-fg-muted); }
.task-item .title { flex: 1; font-size: .92rem; }
.task-item .btn { opacity: 0; }
.task-item:hover .btn, .task-item:focus-within .btn { opacity: 1; }
@media (max-width: 767.98px) { .task-item .btn { opacity: 1; } }
/* Target touch delle checkbox e della "×" dei tag (B35, B36): area toccabile ≥44px, aspetto invariato */
@media (max-width: 767.98px), (pointer: coarse) {
  .task-item { min-height: 48px; }
  .task-item .form-check-input, .form-check:not(.form-switch) > .form-check-input { width: 1.4em; height: 1.4em; flex-shrink: 0; }
  /* l'etichetta collegata copre tutta la riga: toccarla spunta la checkbox */
  .task-item .title { align-self: stretch; display: flex; align-items: center; min-height: 44px; }
  .form-check:not(.form-switch):has(> .form-check-input) { display: flex; align-items: center; gap: 10px; padding-left: 0; min-height: 44px; }
  .form-check:not(.form-switch) > .form-check-input { float: none; margin: 0; }
  .form-check:not(.form-switch) > .form-check-label { flex: 1; align-self: stretch; display: flex; align-items: center; }
  .tags-input .tag button { min-width: 44px; min-height: 44px; margin: -12px -10px -12px -8px; font-size: 1.1rem; }
}
.sortable-handle { cursor: grab; color: var(--hg-fg-subtle); }
.sortable-ghost { opacity: .35; }
.quick-search-results { max-height: 60vh; overflow-y: auto; }
.quick-search-results .item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--hg-fg); }
.quick-search-results .item:hover, .quick-search-results .item.active { background: var(--hg-surface-2); text-decoration: none; }
.quick-search-results .item .sub { font-size: .76rem; color: var(--hg-fg-muted); }
.hobby-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--hobby-color, var(--hg-primary)); flex: 0 0 auto; }
/* Hobby strip (dashboard): celle centrate che riempiono la riga con qualsiasi numero di hobby.
   Divisori via box-shadow sul bordo sinistro/superiore, tagliati da overflow → corretti anche quando la griglia va a capo */
.hobby-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); overflow: hidden; border-radius: 0 0 var(--hg-radius) var(--hg-radius); }
.hobby-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 22px 16px 18px; text-align: center; box-shadow: -1px 0 0 var(--hg-border), 0 -1px 0 var(--hg-border); }
.hobby-tile .hobby-icon { margin-bottom: 4px; }
.hobby-name { max-width: 100%; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hobby-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: .8rem; color: var(--hg-fg-muted); }
.hobby-counts strong { color: var(--hg-fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.hobby-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.hobby-actions .btn { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767.98px) { .hobby-actions .btn { min-height: 44px; padding-inline: 14px; } }
.hobby-tile-add { justify-content: center; color: var(--hg-fg-muted); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.hobby-add-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px;
  font-size: 1.2rem; border: 1.5px dashed var(--hg-border-strong); color: var(--hg-primary); }
.hobby-tile-add .hobby-name { color: var(--hg-fg); }
.hobby-tile-add:hover { background: var(--hg-surface-2); color: var(--hg-fg-muted); }
.hobby-tile-add:hover .hobby-add-icon { border-color: var(--hg-primary); }
.hobby-tile-add:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .hobby-tile-add { transition: none; } }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-fit { width: fit-content; }
/* Usata nelle view ma prima non definita: senza min-width:0 i figli flex non si restringono e text-truncate non tronca (sforamenti in dashboard/categorie) */
.min-w-0 { min-width: 0 !important; }
.gap-2-5 { gap: .75rem; }
.inherited-badge { font-size: .68rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.material-card .img { aspect-ratio: 4/3; background: var(--hg-surface-2); display: grid; place-items: center; color: var(--hg-fg-subtle); font-size: 2rem; overflow: hidden; border-radius: 10px 10px 0 0; }
.material-card .img img { width: 100%; height: 100%; object-fit: cover; }
.material-card .body { padding: 12px; }
.material-card .name { font-weight: 600; display: block; color: var(--hg-fg); font-size: .92rem; }
.material-card .name:hover { color: var(--hg-primary); text-decoration: none; }
.material-card .sub { font-size: .78rem; color: var(--hg-fg-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .hg-sidebar, .hg-topbar, .hg-bottomnav, .no-print { display: none !important; }
  .hg-content { padding: 0; }
}

/* Pulsanti danger pastello */
.btn-danger { --bs-btn-bg: #D66A6A; --bs-btn-border-color: #D66A6A; --bs-btn-hover-bg: #C25656; --bs-btn-hover-border-color: #C25656; --bs-btn-active-bg: #C25656; --bs-btn-active-border-color: #C25656; }
.btn-outline-danger { --bs-btn-color: #C25656; --bs-btn-border-color: #E4A5A5; --bs-btn-hover-bg: #D66A6A; --bs-btn-hover-border-color: #D66A6A; }
.text-danger { color: #C25656 !important; }
.text-warning { color: #C99A2E !important; }
.hg-topbar .btn-primary { box-shadow: 0 2px 8px -2px rgba(var(--hg-primary-rgb), .45); }
.hg-brand .logo { box-shadow: 0 4px 12px -4px rgba(var(--hg-primary-rgb), .5); }

/* ---------- Dropdown custom (Tom Select) ---------- */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; border: 0; background: transparent; min-height: 0; }
.ts-wrapper .ts-control {
  border: 1px solid var(--hg-border-strong); border-radius: var(--hg-radius-sm); background: var(--hg-surface); color: var(--hg-fg);
  min-height: 42px; padding: 8px 36px 8px 12px; font-size: 1rem; line-height: 1.5; box-shadow: none; transition: border-color .15s, box-shadow .15s;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer;
}
.ts-wrapper.form-select-sm .ts-control, .form-select-sm + .ts-wrapper .ts-control { min-height: 34px; padding: 4px 30px 4px 10px; font-size: .875rem; }
.ts-wrapper.single .ts-control { background-image: none !important; }
/* Il tema tom-select.bootstrap5 toglie il bordo al control (!important) e lo mette sul wrapper, che qui è azzerato:
   rimettiamo il bordo sul control, uguale ai campi di testo */
.ts-wrapper.form-select .ts-control, .ts-wrapper.form-control .ts-control { border: 1px solid var(--hg-border-strong) !important; }
.ts-wrapper.form-select.focus .ts-control, .ts-wrapper.form-select.dropdown-active .ts-control,
.ts-wrapper.form-control.focus .ts-control, .ts-wrapper.form-control.dropdown-active .ts-control { border-color: var(--hg-primary) !important; }
.ts-wrapper.form-select.is-invalid .ts-control, .ts-wrapper.form-control.is-invalid .ts-control { border-color: var(--hg-danger) !important; }
.ts-wrapper.single .ts-control::after { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--hg-fg-muted); border-bottom: 2px solid var(--hg-fg-muted); transform: translateY(-70%) rotate(45deg); transition: transform .15s; pointer-events: none; }
.ts-wrapper.single.dropdown-active .ts-control::after { transform: translateY(-30%) rotate(-135deg); }
.ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: var(--hg-primary); box-shadow: 0 0 0 .2rem rgba(var(--hg-primary-rgb), .18); }
.ts-wrapper.is-invalid .ts-control { border-color: var(--hg-danger); }
.ts-wrapper .ts-control input { color: var(--hg-fg); font-size: inherit; min-width: 40px; }
.ts-wrapper .ts-control input::placeholder, .ts-wrapper .ts-control .ts-placeholder { color: var(--hg-fg-subtle); }
.ts-wrapper.single .ts-control > .item { color: var(--hg-fg); }
.ts-wrapper.disabled .ts-control { background: var(--hg-surface-2); opacity: .7; }
.ts-dropdown {
  z-index: 1090; margin-top: 6px; border: 1px solid var(--hg-border); border-radius: 10px; background: var(--hg-surface); color: var(--hg-fg);
  box-shadow: var(--hg-shadow-lg); padding: 6px; font-size: .95rem; overflow: hidden;
}
/* aperta verso l'alto quando sotto non c'è posto (hgSelect): in body la posizione la dà il JS, nelle modali il CSS */
.ts-dropdown.is-up { margin-top: 0; }
.ts-wrapper > .ts-dropdown.is-up { top: auto; bottom: 100%; margin: 0 0 6px; }
.ts-dropdown .ts-dropdown-content { max-height: 280px; scrollbar-width: thin; }
.ts-dropdown .option { padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--hg-fg); }
.ts-dropdown .option.active { background: var(--hg-primary-soft); color: var(--hg-primary-hover); }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-dropdown .option.selected::after { content: '\F26E'; font-family: 'bootstrap-icons'; float: right; color: var(--hg-primary); }
.ts-dropdown .no-results, .ts-dropdown .optgroup-header { padding: 8px 10px; color: var(--hg-fg-muted); font-size: .85rem; }
.ts-dropdown .dropdown-input-wrap { padding: 4px 4px 8px; border-bottom: 1px solid var(--hg-border); margin-bottom: 4px; }
.ts-dropdown .dropdown-input-wrap .dropdown-input { border: 1px solid var(--hg-border-strong); border-radius: 8px; padding: 7px 10px 7px 32px; background: var(--hg-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238FA3B8'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") 10px center/14px no-repeat; color: var(--hg-fg); font-size: .9rem; width: 100%; outline: none; }
.ts-dropdown .dropdown-input-wrap .dropdown-input:focus { border-color: var(--hg-primary); }
.ts-dropdown .option .opt-depth { display: inline-block; width: 14px; height: 1px; }
.ts-dropdown .option .opt-sub { display: block; font-size: .76rem; color: var(--hg-fg-muted); }
.ts-wrapper.multi .ts-control > .item { background: var(--hg-primary-soft); color: var(--hg-primary-hover); border-radius: 6px; padding: 2px 8px; font-size: .85rem; }
.ts-wrapper .clear-button { color: var(--hg-fg-subtle); right: 34px; }
.filter-bar .ts-wrapper { width: auto; min-width: 130px; max-width: 220px; }
.filter-bar .search-input { flex: 1 1 180px; min-width: 160px !important; }
/* tendine dei filtri (agganciate al body): larghe quanto la voce più lunga con la spunta, niente testo a capo */
.ts-dropdown.is-fit { width: max-content !important; max-width: min(360px, calc(100vw - 16px)); }
.ts-dropdown.is-fit .option { white-space: nowrap; }
/* ricerca che non ruba spazio alle tendine (catalogo filamenti): le select si allargano per mostrare il testo */
@media (min-width: 576px) {
  .filter-bar:has(.search-compact) { justify-content: flex-end; }
  .filter-bar .search-input.search-compact { flex: 0 1 260px; margin-right: auto; }
  .filter-bar:has(.search-compact) .ts-wrapper { flex: 0 0 auto; min-width: 190px; max-width: 280px; }

  /* le scelte si applicano da sole (autosubmit): "Filtra" serve solo nel pannello su telefono */
  .filter-bar:has(.search-compact) > button.btn-soft { display: none; }
}
.ts-wrapper.single .ts-control > .item:only-child:empty::before { content: attr(data-placeholder); }
.filter-bar .ts-wrapper .ts-control { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
/* Pannello filtri (JS aggiunge .filter-head + .filter-toggle): su desktop invisibile, la barra resta com'era */
.filter-head { display: contents; }
.filter-toggle { display: none !important; }
/* Telefoni: visibili solo ricerca + "Filtri (n)"; il resto si apre su richiesta in griglia a 2 colonne, controlli ≥44px */
@media (max-width: 575.98px) {
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filter-bar > :not(.ts-hidden-accessible) { min-width: 0 !important; max-width: none !important; width: 100% !important; }
  .filter-head { display: flex; gap: 8px; grid-column: 1 / -1; }
  .filter-head .search-input { flex: 1 1 auto; min-width: 0 !important; }
  .filter-toggle { display: inline-flex !important; flex: 0 0 auto; white-space: nowrap; }
  .filter-head:not(:has(.search-input)) .filter-toggle { flex: 1 1 auto; }
  .filter-toggle[aria-expanded="true"] { background: var(--hg-primary-soft); border-color: var(--hg-primary); color: var(--hg-primary); }
  .filter-bar.is-collapsible:not(.is-open) > :not(.filter-head) { display: none !important; }
  .filter-bar .form-control, .filter-bar .ts-wrapper .ts-control { min-height: 44px; }
  .filter-bar .form-check { grid-column: 1 / -1; margin: 0; }
  .card:has(> .card-body > .filter-bar) > .card-body { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* "Filtra" = azione principale del pannello; a tutta riga se non c'è "Azzera" */
  .filter-bar > button:not(.filter-toggle) { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; font-weight: 600; }
  .filter-bar > button:not(.filter-toggle):last-child { grid-column: 1 / -1; }
}

/* ---------- Login (marchio Materia) ---------- */
.auth-body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--hg-bg); }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* pannello marchio: tinta primaria tenue + griglia isometrica leggera, richiamo al tratto del logo */
.auth-brand {
  position: relative; display: grid; place-items: center; padding: 48px; overflow: hidden;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(var(--hg-primary-rgb), .16), transparent 70%),
    repeating-linear-gradient(30deg, rgba(var(--hg-primary-rgb), .07) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-30deg, rgba(var(--hg-primary-rgb), .07) 0 1px, transparent 1px 36px),
    var(--hg-sidebar-bg);
  border-right: 1px solid var(--hg-border);
}
.auth-brand-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 480px; width: 100%; }
.auth-brand-logo { width: 100%; max-width: 440px; height: auto; }
.auth-brand-custom { width: 120px; height: 120px; object-fit: contain; border-radius: 24px; }

.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: 16px; box-shadow: var(--hg-shadow-lg); padding: 32px; }
.auth-head { display: none; text-align: center; margin-bottom: 24px; }
.auth-mark { display: inline-block; margin-bottom: 10px; }
.auth-mark img { height: 72px; width: auto; }
.auth-wordmark { font-family: 'Montserrat', var(--font-display); font-weight: 500; font-size: 1.9rem; letter-spacing: .22em; text-transform: uppercase; color: var(--hg-fg); margin: 0 0 4px; padding-left: .22em; line-height: 1.1; }
.auth-slogan { font-family: 'Montserrat', var(--font-sans); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hg-fg-muted); margin: 0; text-wrap: balance; line-height: 1.6; }
.auth-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 0 0 20px; }
.auth-input { position: relative; }
.auth-input > .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hg-fg-subtle); pointer-events: none; }
.auth-input .form-control { padding-left: 42px; min-height: 48px; }
.auth-input .form-control[type=password], .auth-input .form-control#password { padding-right: 48px; }
.auth-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--hg-fg-muted); border-radius: 8px; }
.auth-eye:hover { color: var(--hg-fg); }
.auth-eye:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
.auth-submit { min-height: 48px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth-foot { font-size: .78rem; color: var(--hg-fg-subtle); margin: 0; }
.auth-panel .form-check { display: flex; align-items: center; gap: 10px; padding-left: 0; min-height: 44px; }
.auth-panel .form-check-input { float: none; margin: 0; width: 1.25em; height: 1.25em; flex-shrink: 0; }
.auth-panel .form-check-label { flex: 1; }

[data-bs-theme="dark"] .auth-brand {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(var(--hg-primary-rgb), .18), transparent 70%),
    repeating-linear-gradient(30deg, rgba(255,255,255,.035) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-30deg, rgba(255,255,255,.035) 0 1px, transparent 1px 36px),
    var(--hg-surface);
}

/* tablet e telefono: solo il form, con marchio, nome e slogan sopra (lo slogan dentro l'immagine sarebbe illeggibile) */
@media (max-width: 991.98px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-head { display: block; }
  .auth-panel {
    padding: 32px 16px calc(24px + env(safe-area-inset-bottom));
    background: radial-gradient(700px 360px at 50% -10%, rgba(var(--hg-primary-rgb), .16), transparent 70%);
  }
}
@media (max-width: 400px) {
  .auth-card { padding: 24px 20px; }
  .auth-wordmark { font-size: 1.6rem; }
  .auth-slogan { font-size: .64rem; letter-spacing: .03em; }
}

/* ---------- Footer (dashboard) ---------- */
.app-footer { margin-top: 32px; padding: 16px 4px 4px; border-top: 1px solid var(--hg-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; color: var(--hg-fg-muted); font-size: .82rem; }
.app-footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.app-footer-mark { height: 22px; width: auto; opacity: .85; }
.app-footer-name { font-family: 'Montserrat', var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--hg-fg); }
.app-footer-version { font-family: var(--font-mono); font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: var(--hg-surface-2); border: 1px solid var(--hg-border); color: var(--hg-fg-muted); }
.app-footer-credit { margin: 0; }
.app-footer-credit strong { color: var(--hg-fg); font-weight: 600; }
.app-footer-credit .bi-heart-fill { color: var(--hg-danger); font-size: .8em; margin: 0 2px; vertical-align: 0; }
@media (prefers-reduced-motion: no-preference) {
  .app-footer-credit:hover .bi-heart-fill { animation: hg-heartbeat .9s ease-in-out; }
}
@keyframes hg-heartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
/* telefono: centrato, su due righe */
@media (max-width: 575.98px) {
  .app-footer { flex-direction: column; justify-content: center; text-align: center; }
}

/* ---------- Catalogo filamenti ---------- */
.preset-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--hg-border); }
.preset-row:last-child { border-bottom: 0; }
.preset-swatch { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.preset-swatch.is-empty { background: repeating-linear-gradient(45deg, var(--hg-surface-2) 0 6px, var(--hg-border) 6px 12px); }
.preset-info { flex: 1; min-width: 0; }
.preset-name { font-weight: 600; overflow-wrap: anywhere; }
.preset-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .82rem; color: var(--hg-fg-muted); }
.preset-action { flex-shrink: 0; }
@media (max-width: 575.98px) { .preset-row { padding: 10px 12px; gap: 10px; } }
/* catalogo legnami: tinta dell'essenza */
.preset-swatch.wood-betulla, .preset-swatch.wood-pioppo { display: grid; place-items: center; color: rgba(60, 40, 10, .55); font-size: 1.1rem; }
.preset-swatch.wood-betulla { background: linear-gradient(135deg, #EED9B0, #DDBF8A); }
.preset-swatch.wood-pioppo { background: linear-gradient(135deg, #F5EBD2, #E6D5AE); }

/* ---------- Acquisti ---------- */
.purchase-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px 44px; gap: 10px 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--hg-border); }
.purchase-row:first-child { padding-top: 0; }
.purchase-row .js-remove-row { width: 44px; height: 38px; }
.purchase-row-cost { grid-column: 1 / -1; margin-top: -4px; }
.purchase-row-cost:empty { display: none; }
.purchase-row .d-flex > div { flex: 1; min-width: 0; }
.purchase-summary { position: sticky; top: calc(var(--hg-topbar-h) + 16px); }
@media (max-width: 767.98px) {
  .purchase-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .purchase-row-main { grid-column: 1 / -1; }
  .purchase-row .js-remove-row { grid-column: 2; justify-self: end; height: 44px; }
  .purchase-summary { position: static; }
}
.purchase-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hg-border); }
.purchase-line:last-child { border-bottom: 0; }
/* lotti nello scarico */
.lot-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--hg-border); }
.lot-row:last-child { border-bottom: 0; }
.lot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.lot-row .js-lot-qty { width: 110px; flex-shrink: 0; }
@media (min-width: 576px) { .purchase-date .form-control { width: 11rem; } }
/* fornitore: largo quanto un nome lungo, non tutta la riga */
@media (min-width: 576px) { .purchase-supplier .ts-wrapper, .purchase-supplier select { width: 20rem; max-width: 100%; } }
/* login: firma e versione in fondo al pannello marchio (come il footer della dashboard) */
.auth-brand-footer { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: .82rem; color: var(--hg-fg-muted); }
.auth-brand-footer strong { color: var(--hg-fg); font-weight: 600; }
.auth-brand-footer .bi-heart-fill { color: var(--hg-danger); font-size: .8em; margin: 0 2px; }

/* ---------- Vendite: ordini dei clienti ---------- */
.order-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 110px 44px; gap: 10px 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--hg-border); }
.order-row:first-child { padding-top: 0; }
.order-row .js-remove-oi { width: 44px; height: 38px; }
.order-row-total .js-oi-total { height: 38px; display: flex; align-items: center; }
@media (max-width: 767.98px) {
  .order-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .order-row-desc { grid-column: 1 / -1; }
  .order-row-total .js-oi-total { height: 44px; }
  .order-row .js-remove-oi { justify-self: end; height: 44px; }
}
@media (min-width: 576px) { .order-date .form-control { width: 11rem; } }
.payment-line .js-confirm { margin-left: -4px; }
/* lista ordini su telefono: ogni ordine è una scheda (numero e importi in alto, stato e consegna sotto) */
@media (max-width: 575.98px) {
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody { display: block; }
  .orders-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num total" "cust left" "stat due"; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hg-border); }
  .orders-table td { display: block; padding: 0; border: 0; background: none; }
  .orders-table .o-num { grid-area: num; white-space: nowrap; } .orders-table .o-num > div { display: inline; margin-left: 6px; }
  .orders-table .o-cust { grid-area: cust; overflow-wrap: anywhere; }
  .orders-table .o-stat { grid-area: stat; }
  .orders-table .o-due { grid-area: due; text-align: right; }
  .orders-table .o-total { grid-area: total; font-weight: 600; }
  .orders-table .o-left { grid-area: left; }
}

/* ---------- Sidebar: gruppi apribili (Tools › Laser) ---------- */
.hg-nav a.hg-nav-group .hg-nav-chevron { margin-left: auto; font-size: .8rem; width: auto; opacity: .7; transition: transform .2s; }
.hg-nav a.hg-nav-group.collapsed .hg-nav-chevron { transform: rotate(-90deg); }
.hg-subnav { padding-left: 18px; margin-top: 2px; }
.hg-subnav a { font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .hg-nav a.hg-nav-group .hg-nav-chevron { transition: none; } }

/* ---------- Boxes.py: galleria ---------- */
.boxes-group-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 4px 0 12px; }
.boxes-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-bottom: 28px; }
.boxes-card { display: flex; flex-direction: column; background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius);
  overflow: hidden; color: var(--hg-fg); text-decoration: none; box-shadow: var(--hg-shadow); transition: border-color .15s, box-shadow .15s, transform .15s; }
.boxes-card:hover { border-color: var(--hg-primary); box-shadow: var(--hg-shadow-lg); color: var(--hg-fg); text-decoration: none; transform: translateY(-2px); }
.boxes-card:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.boxes-card-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: var(--hg-surface-2, #EEF4FA); border-bottom: 1px solid var(--hg-border); }
/* disegno al posto della foto (Boxes.py non ha un esempio): intero, su fondo chiaro */
.boxes-card-photo.is-drawing { object-fit: contain; padding: 12px; background: #fff; }
.boxes-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.boxes-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
/* descrizione su 4 righe fisse: tutte le schede hanno la stessa altezza, anche tra gruppi diversi (il testo intero è nell'aria-label) */
.boxes-card-desc { font-size: .84rem; color: var(--hg-fg-muted); line-height: 1.4; min-height: calc(4 * 1.4em);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.boxes-card-cta { margin-top: auto; padding-top: 6px; align-self: flex-end; font-size: .84rem; font-weight: 600; color: var(--hg-primary); display: inline-flex; align-items: center; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .boxes-card, .boxes-card:hover { transition: none; transform: none; } }
@media (max-width: 575.98px) {
  .boxes-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .boxes-card-body { padding: 10px; }
  .boxes-card-desc { -webkit-line-clamp: 3; min-height: calc(3 * 1.4em); }
}
.boxes-credit { font-size: .78rem; color: var(--hg-fg-subtle); }

/* ---------- Boxes.py: configuratore ---------- */
.boxes-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.boxes-preview-col { position: sticky; top: calc(var(--hg-topbar-h) + 16px); }
@media (max-width: 991.98px) {
  .boxes-layout { grid-template-columns: minmax(0, 1fr); }
  .boxes-preview-col { position: static; order: -1; }
}
.boxes-preview { position: relative; background: #fff; border-radius: var(--hg-radius-sm); border: 1px solid var(--hg-border);
  height: min(62vh, 640px); overflow: hidden; touch-action: none; cursor: grab; }
.boxes-preview.is-panning { cursor: grabbing; }
@media (max-width: 991.98px) { .boxes-preview { height: 42vh; min-height: 260px; } }
.boxes-preview img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.boxes-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hg-fg-subtle); font-size: .9rem; text-align: center; padding: 16px; }
.boxes-preview-status { position: absolute; top: 10px; right: 10px; font-size: .78rem; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid var(--hg-border); color: #5C7189; }
.boxes-preview-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.boxes-preview-tools .boxes-size { margin-left: auto; font-family: var(--font-mono); font-size: .82rem; color: var(--hg-fg-muted); }
.boxes-photo { width: 56px; height: 56px; border-radius: var(--hg-radius-sm); object-fit: cover; border: 1px solid var(--hg-border); background: #fff; flex: 0 0 auto; }
.boxes-group + .boxes-group { margin-top: 14px; }
.boxes-group > .card-header { font-family: var(--font-display); font-weight: 600; }
.boxes-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; row-gap: 4px; }
.boxes-field-help { padding-bottom: 10px; }
.boxes-fields .boxes-field-wide { grid-column: 1 / -1; }
/* ogni campo occupa 3 righe della griglia (etichetta, campo, aiuto): etichette, campi e aiuti allineati riga per riga */
.boxes-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 4px; align-content: start; }
.boxes-field > .form-label { align-self: start; margin-bottom: 0; }
.boxes-field-control { display: flex; align-items: center; min-height: calc(1.5em + .75rem + 2px); }
.boxes-field-control > * { width: 100%; }
.boxes-field .form-switch { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 44px; }
.boxes-field .form-switch .form-check-input { margin: 0; float: none; width: 2.6em; height: 1.4em; cursor: pointer; }
.boxes-switch-state { font-size: .86rem; color: var(--hg-fg-muted); }
.boxes-switch-state .on, .form-check-input:checked + .boxes-switch-state .off { display: none; }
.form-check-input:checked + .boxes-switch-state .on { display: inline; }
.boxes-field .form-text { font-size: .76rem; line-height: 1.35; }
.boxes-field .form-label { font-size: .86rem; font-weight: 500; }
.boxes-field .form-label code { font-size: .78rem; color: var(--hg-fg); background: none; padding: 0; }
.boxes-field.has-error .form-control, .boxes-field.has-error .ts-control { border-color: var(--hg-danger) !important; }
.boxes-advanced .accordion-button { font-weight: 600; font-size: .92rem; }
.boxes-advanced .accordion-button:not(.collapsed) { background: var(--hg-surface-2); color: var(--hg-fg); box-shadow: none; }
@media (max-width: 575.98px) { .boxes-fields { grid-template-columns: 1fr 1fr; column-gap: 10px; } }
[data-bs-theme="dark"] .boxes-preview { border-color: var(--hg-border-strong); }

/* Boxes.py su telefono: barra fissa sopra la bottom nav + anteprima a tutto schermo */
.boxes-overlay-head, .boxes-mobilebar { display: none; }
@media (max-width: 991.98px) {
  .boxes-form { padding-bottom: 104px; }
  .boxes-preview-col { position: fixed; inset: 0; z-index: 1045; background: var(--hg-bg); padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)); display: none; overflow-y: auto; }
  .boxes-preview-col.is-open { display: block; }
  .boxes-preview-col .card { height: 100%; }
  .boxes-preview-col .card-body { display: flex; flex-direction: column; height: 100%; }
  .boxes-preview-col .boxes-preview { flex: 1 1 auto; height: auto; min-height: 0; }
  .boxes-overlay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .boxes-overlay-head .btn-close { width: 44px; height: 44px; padding: 0; background-size: 14px; }
  body.boxes-overlay-open { overflow: hidden; }
  .boxes-mobilebar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; z-index: 1025;
    /* 4px sotto la bottom nav (che sta sopra): nessuna fessura da cui si veda il contenuto */
    bottom: calc(var(--hg-bottomnav-h) - 4px + env(safe-area-inset-bottom)); min-height: 68px; padding: 8px 16px 12px; text-align: left;
    background: var(--hg-surface); border: 0; border-top: 1px solid var(--hg-border); box-shadow: 0 -6px 16px -12px rgba(31,47,68,.25); color: var(--hg-fg); }
  .boxes-mobilebar:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
  .boxes-mobilebar-thumb { width: 64px; height: 48px; flex: 0 0 auto; background: #fff; border: 1px solid var(--hg-border); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
  .boxes-mobilebar-thumb img { max-width: 100%; max-height: 100%; }
  .boxes-mobilebar-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  .boxes-mobilebar-size { font-family: var(--font-mono); font-size: .88rem; font-weight: 600; }
  .boxes-mobilebar-status { font-size: .78rem; color: var(--hg-fg-muted); }
  .boxes-mobilebar-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--hg-primary); min-height: 44px; }
}

/* Boxes.py: "Scarica" con menu dei formati; sul telefono occupa la prima riga */
.boxes-download > .dropdown-toggle-split { border-left: 1px solid rgba(255,255,255,.45); }
.boxes-download .dropdown-item { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.boxes-formats { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.boxes-formats .form-check { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; cursor: pointer; }
.boxes-formats .form-check-input { margin: 0; float: none; }
@media (max-width: 575.98px) {
  .page-header .actions > .boxes-download { grid-column: 1 / -1; display: flex; }
  .page-header .actions > .boxes-download > .btn:first-child { flex: 1 1 auto; width: auto; }
  .page-header .actions > .boxes-download > .dropdown-toggle-split { flex: 0 0 48px; width: 48px; }
  .boxes-download .dropdown-item { min-height: 48px; }
}
@media (max-width: 575.98px) {
  .page-header .actions:has(> .boxes-download) > :last-child { grid-column: auto; }
}

/* ---------- TemplateMaker ---------- */
.tm-notice { margin-top: 10px; padding: 10px 12px; border-radius: var(--hg-radius-sm); font-size: .88rem; border: 1px solid var(--hg-border); }
.tm-notice[hidden] { display: none; }
.tm-notice.is-ok { background: #E6F6EC; border-color: #A9DABB; color: #1D5E36; }
.tm-notice.is-warn { background: #FDECEC; border-color: #F0B4B4; color: #8C1F1F; }
.tm-notice.is-tight { background: #FFF5DC; border-color: #EBC878; color: #7A4F00; }
.boxes-mobilebar-status.is-tight { color: #9A6200; font-weight: 600; }
.boxes-mobilebar-status.is-warn { color: #B42318; font-weight: 600; }
[data-bs-theme=dark] .tm-notice.is-ok { background: #16301F; border-color: #2E6A44; color: #A8E0BC; }
[data-bs-theme=dark] .tm-notice.is-tight { background: #3A2E10; border-color: #8A6A1E; color: #F0D590; }
[data-bs-theme=dark] .boxes-mobilebar-status.is-tight { color: #F0C060; }
[data-bs-theme=dark] .boxes-mobilebar-status.is-warn { color: #F2A0A0; }
[data-bs-theme=dark] .tm-notice.is-warn { background: #3A1B1B; border-color: #7A3535; color: #F2B8B8; }
.tm-notice-text { margin: 0; font-weight: 600; }
.tm-notice-title { margin: 8px 0 4px; font-size: .82rem; }
.tm-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 575.98px) { .tm-suggestions .btn { min-height: 44px; } }
.boxes-field[hidden] { display: none; }
.tm-photo { flex: 0 0 auto; display: block; border-radius: var(--hg-radius-sm, 8px); overflow: hidden; border: 1px solid var(--hg-border); }
.tm-photo img { display: block; width: 160px; height: auto; }
@media (max-width: 575.98px) { .tm-photo img { width: 112px; } }
/* foto del modello (Boxes.py, TemplateMaker): pulsante che apre la modale a grande */
.photo-zoom { position: relative; flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--hg-radius-sm); min-width: 44px; min-height: 44px; }
.photo-zoom > .bi { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; display: grid; place-items: center; font-size: .75rem;
  border-radius: 50%; background: rgba(255,255,255,.92); color: var(--hg-primary); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.photo-zoom:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.photo-modal .modal-body { padding: 8px; text-align: center; }
.photo-modal .modal-body img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; border-radius: var(--hg-radius-sm); }

/* TemplateMaker: legenda dei tipi di linea dell'anteprima */
.tm-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.tm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tm-swatch { flex: 0 0 auto; }
/* TemplateMaker: galleria della pagina del modello (esempi, istruzioni) */
.tm-intro { display: flex; gap: 16px; align-items: flex-start; }
@media (max-width: 575.98px) { .tm-intro { flex-direction: column; } .tm-intro .tm-photo img { width: 100%; max-width: 320px; } }
.tm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; background: var(--hg-surface); }
.tm-gallery .photo-zoom { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.tm-gallery .photo-zoom img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hg-radius-sm); border: 1px solid var(--hg-border); }
.tm-gallery .photo-zoom > .bi { bottom: 26px; }
.tm-gallery-cap { font-size: .74rem; color: var(--hg-fg-muted); line-height: 1.2; text-align: left; }
.tm-gallery-video { grid-column: 1 / -1; justify-self: start; }
.tm-gallery .photo-zoom img[src$=".svg"] { object-fit: contain; background: #fff; }

/* Ornamenti personalizzati (sfere col nome): anteprima 3D/2D accanto al form; su telefono resta in alto, fissa sotto la topbar */
.orn-card-img { padding: 14px; background: #fff; }
.boxes-layout .orn-preview-col { position: sticky; top: calc(var(--hg-topbar-h) + 16px); }
@media (max-width: 991.98px) {
  .boxes-layout .orn-preview-col { position: sticky; top: calc(var(--hg-topbar-h) + 4px); inset: auto; inset-inline: 0; z-index: 20; display: block; order: -1; padding: 0; background: none; overflow: visible; }
  .boxes-layout .orn-preview-col .card { height: auto; }
  .boxes-layout .orn-preview-col .card-body { display: block; height: auto; padding: 10px; }
  .orn-layout .boxes-form { padding-bottom: 16px; }
}
.orn-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.orn-tabs .boxes-size { margin-left: auto; font-family: var(--font-mono); font-size: .82rem; color: var(--hg-fg-muted); }
.orn-tabs .btn.active, .orn-tabs .btn[aria-pressed="true"] { background: var(--hg-primary); color: #fff; border-color: var(--hg-primary); }
@media (max-width: 575.98px) { .orn-tabs .btn { min-height: 44px; min-width: 44px; } }
.orn-stage { position: relative; background: #fff; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); overflow: hidden; }
.orn-3d { height: min(60vh, 560px); background: #e8f1fa url('/ornaments/christmas-pine-preview.webp') center / cover no-repeat; }
.orn-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.orn-3d[hidden], .orn-2d[hidden] { display: none; }
.orn-2d { padding: 8px 10px 10px; height: min(60vh, 560px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.orn-2d-svg { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; }
.orn-2d-svg svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.orn-dimrow { width: 100%; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.orn-dim { flex: 0 0 auto; position: relative; height: 14px; border-left: 1.5px solid var(--hg-fg-muted); border-right: 1.5px solid var(--hg-fg-muted); margin: 6px 0 0; }
.orn-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--hg-fg-muted); }
.orn-dim span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; padding: 0 6px; font-family: var(--font-mono); font-size: .78rem; color: #333; }
.orn-vdim { margin-left: auto; font-family: var(--font-mono); font-size: .78rem; color: #333; white-space: nowrap; }
.orn-stage .boxes-preview-status.is-error { background: var(--hg-danger); color: #fff; border-color: var(--hg-danger); max-width: calc(100% - 20px); }
.orn-name-input { text-transform: uppercase; font-family: var(--font-mono); letter-spacing: .08em; font-size: 1.1rem; }
.boxes-field output { font-family: var(--font-mono); font-weight: 600; margin-left: 6px; }
@media (max-width: 991.98px) { .orn-3d, .orn-2d { height: 34vh; min-height: 200px; } }
@media (max-width: 991.98px) {
  .orn-preview-col .card-body > p { display: none; }
  .orn-3d, .orn-2d { height: 30vh; min-height: 190px; }
}

/* Ornamenti › Stampa 3D multicolore */
.orn-mode { display: flex; flex-wrap: wrap; gap: 0; }
.orn-mode .btn { flex: 1 1 auto; min-height: 44px; }
.orn-mode .btn[aria-pressed="true"] { background: var(--hg-primary); color: #fff; border-color: var(--hg-primary); }
.orn-subtitle { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.orn-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-pal-item { display: flex; align-items: center; gap: 4px; }
.orn-pal-item .btn { min-width: 44px; min-height: 44px; padding: 0; }
.orn-swatch-in { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px 4px 4px; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); background: var(--hg-surface, #fff); cursor: pointer; }
.orn-color-input { width: 36px; height: 36px; padding: 0; border: 1px solid var(--hg-border); border-radius: 6px; background: none; cursor: pointer; }
.orn-slot { font-family: var(--font-mono); font-size: .78rem; }
.orn-seglist { display: flex; flex-wrap: wrap; gap: 6px; }
.orn-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--hg-border); border-radius: 999px; background: var(--hg-surface, #fff); color: inherit; font-size: .85rem; }
.orn-chip small { color: var(--hg-fg-muted); font-family: var(--font-mono); }
.orn-chip.is-on { border-color: var(--hg-primary); box-shadow: 0 0 0 2px var(--hg-primary); }
.orn-chip.is-warn { border-style: dashed; border-color: #d98a00; }
.orn-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0006; display: inline-block; flex: 0 0 auto; }
.orn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-actions .btn { min-height: 44px; }
.orn-actions .btn.active { background: var(--hg-primary); color: #fff; }
.orn-warns { border: 1px solid #d98a00; background: #fff6e0; color: #5a3d00; border-radius: var(--hg-radius-sm); padding: 8px 12px; font-size: .85rem; }
.orn-warns ul { margin: 4px 0 0; padding-left: 18px; }
[data-bs-theme=dark] .orn-warns { background: #3a2e12; color: #ffd98a; }
.orn-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.orn-quick-label { font-size: .82rem; }
.orn-quick-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.orn-qc { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #0004; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: var(--font-mono); font-size: .8rem; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.orn-qc.is-on { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary); }
.orn-seg { stroke: #2b3a4a; stroke-width: .2; stroke-linejoin: round; cursor: pointer; }
.orn-seg:hover { stroke-width: .45; }
.orn-seg.is-warn { stroke: #d98a00; stroke-dasharray: .8 .5; }
.orn-seg.is-sel { stroke: #1f6feb; stroke-width: .7; stroke-dasharray: none; }
.orn-seg.is-merge { stroke: #e07a1f; stroke-dasharray: 1.2 .6; }
@media (max-width: 575.98px) { .orn-preview-col .orn-quick { margin-top: 4px; } .orn-preview-col .orn-quick-label { flex: 1 0 100%; } }

/* Cartonus: misure del progetto e schema della serratura */
.cn-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 10px 0 0; font-size: .82rem; }
.cn-info > div { min-width: 0; }
.cn-info dt { font-weight: 500; color: var(--bs-secondary-color); font-size: .74rem; }
.cn-info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cn-mech { margin-top: 10px; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); padding: 8px 10px; }
.cn-mech > summary { cursor: pointer; font-size: .86rem; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.cn-mech-svg { width: 100%; height: auto; display: block; color: var(--bs-body-color); }
@media (max-width: 991.98px) {
  /* Cartonus: il pannello a tutto schermo ha anche misure e schema: scorre, e il disegno non si schiaccia */
  .cn-col .card-body { overflow-y: auto; }
  .cn-col .boxes-preview { flex: 0 0 auto; height: 50vh; min-height: 240px; }
}

/* Mappe a strati */
.maps-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.maps-stage { position: sticky; top: calc(var(--hg-topbar-h) + 16px); }
@media (max-width: 991.98px) { .maps-layout { grid-template-columns: minmax(0, 1fr); } .maps-stage { position: static; order: -1; } }
.maps-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: 8px; }
.maps-frame { width: 100%; display: flex; justify-content: center; }
.maps-box { position: relative; width: 100%; height: 300px; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); overflow: hidden; background: #fff; }
.maps-box .maps-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.maps-svgview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
.maps-svgview[hidden] { display: none; }
.maps-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.maps-svg svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.maps-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(255,255,255,.85); font-weight: 600; text-align: center; padding: 16px; }
.maps-loading[hidden] { display: none; }
.mp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; align-items: start; }
.mp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-seg .btn { min-height: 44px; min-width: 44px; }
.mp-step { display: inline-flex; align-items: center; gap: 6px; }
.mp-step .btn { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; }
.mp-step-val { min-width: 3.4em; text-align: center; font-family: var(--font-mono); font-size: .9rem; }
.mp-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mp-inline .form-control { flex: 1 1 160px; min-width: 0; }
.mp-dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 4px; }
.mp-dpad .btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; touch-action: manipulation; }
.mp-labels { list-style: none; padding: 0; margin: 8px 0 0; max-height: 280px; overflow: auto; display: grid; gap: 6px; }
.mp-labels li { display: flex; gap: 10px; align-items: center; }
.mp-labels .form-check-input { flex: 0 0 auto; width: 1.4em; height: 1.4em; margin: 0; }
.mp-labels li .form-control { min-height: 44px; }
[data-bs-theme="dark"] .maps-loading { background: rgba(20,28,38,.85); }
[data-bs-theme="dark"] .maps-box { border-color: var(--hg-border-strong); }
@font-face { font-family: 'Great Vibes'; src: url('/maps/fonts/GreatVibes-Regular.ttf'); }
@font-face { font-family: 'Dancing Script'; src: url('/maps/fonts/DancingScript.ttf'); font-weight: 400 700; }
@font-face { font-family: 'Parisienne'; src: url('/maps/fonts/Parisienne-Regular.ttf'); }
@font-face { font-family: 'Sacramento'; src: url('/maps/fonts/Sacramento-Regular.ttf'); }
@font-face { font-family: 'Pinyon Script'; src: url('/maps/fonts/PinyonScript-Regular.ttf'); }
@font-face { font-family: 'Cormorant Garamond'; src: url('/maps/fonts/CormorantGaramond.ttf'); font-weight: 300 700; }
@font-face { font-family: 'Cinzel'; src: url('/maps/fonts/Cinzel.ttf'); font-weight: 400 900; }
@font-face { font-family: 'Alex Brush'; src: url('/maps/fonts/AlexBrush-Regular.ttf'); }

/* Mappe a strati: percorso, sezioni comprimibili, barra di azione su telefono */
.mp-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 0 16px; counter-reset: s; }
.mp-steps li { padding: 0; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); background: var(--hg-surface); color: var(--hg-fg-muted); font-size: .85rem; font-weight: 500; min-width: 0; }
.mp-steps-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--hg-surface-2); color: var(--hg-fg-muted); }
.mp-steps-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-steps li.is-current { border-color: var(--hg-primary); color: var(--hg-fg); background: var(--hg-surface); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hg-primary) 18%, transparent); }
.mp-steps li.is-current .mp-steps-n { background: var(--hg-primary); color: #fff; }
.mp-steps li.is-done .mp-steps-n { background: #D6EBDD; color: #1E6B3A; }
.mp-steps li.is-done .mp-steps-n::before { content: "\2713"; }
.mp-steps li.is-done .mp-steps-n { font-size: 0; }
.mp-steps li.is-done .mp-steps-n::before { font-size: .85rem; }
@media (max-width: 575.98px) { .mp-steps { gap: 4px; } .mp-steps li { flex-direction: column; gap: 2px; padding: 6px 2px; text-align: center; font-size: .72rem; } }
.mp-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-family: var(--font-display); font-weight: 600; }
.mp-sec > summary::-webkit-details-marker { display: none; }
.mp-sec > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .9rem; transition: transform .2s; color: var(--hg-fg-muted); }
.mp-sec[open] > summary::after { transform: rotate(180deg); }
.mp-sec > summary:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
.mp-gen { display: flex; gap: 8px; margin-top: 16px; }
.mp-gen #mpGenerate { flex: 1 1 auto; min-height: 48px; }
.mp-gen-dl { flex: 0 0 auto; min-height: 48px; display: none; }
.mp-progress { width: min(260px, 70%); height: 8px; }
@media (prefers-reduced-motion: reduce) { .mp-sec > summary::after { transition: none; } }
@media (max-width: 991.98px) {
  .maps-layout { padding-bottom: 96px; }
  .maps-box { min-height: 120px; }
  .mp-gen { position: fixed; left: 0; right: 0; z-index: 1025; margin: 0; padding: 8px 16px 12px; background: var(--hg-surface); border-top: 1px solid var(--hg-border);
    bottom: calc(var(--hg-bottomnav-h) - 4px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px -12px rgba(31,47,68,.25); }
  .mp-gen-dl { display: inline-flex; align-items: center; gap: 6px; }
  .mp-gen-dl[disabled] { display: none; }
  .mp-steps { position: sticky; top: calc(var(--hg-topbar-h) - 1px); z-index: 20; background: var(--hg-bg); padding: 4px 0; }
}

/* Mappe a strati: spaziature (etichetta sopra il controllo, gruppi distanziati) */
.maps-controls .form-label { display: block; margin-bottom: 8px !important; font-size: .86rem; font-weight: 500; color: var(--hg-fg-muted); }
.maps-controls .card-body > .form-label ~ .form-label, .maps-controls .mp-seg + .form-label { margin-top: 20px !important; }
.maps-controls .mp-row { row-gap: 18px; column-gap: 16px; }
.maps-controls .mp-row + .mp-row, .maps-controls .mp-row + .form-label, .maps-controls .mp-seg + .mp-row, .maps-controls .mp-seg + .mp-seg { margin-top: 18px !important; }
.maps-controls .form-text { margin-top: 8px; }
.maps-controls .form-check.form-switch { margin-top: 16px !important; min-height: 44px; display: flex; align-items: center; }
.maps-controls details summary:not(.card-header) { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.maps-controls .mp-seg .btn[aria-pressed="false"] { color: var(--hg-fg); }
.mp-step .mp-step-val { min-width: 3.2em; }
#mpFlip { min-height: 44px; margin-top: 16px; }
@media (max-width: 991.98px) {
  .mp-steps { position: static; padding: 0; }
  .maps-stage { order: -1; }
  #mapsApp.is-svg .maps-stage { position: sticky; top: calc(var(--hg-topbar-h) - 1px); z-index: 18; margin: 0 -4px; }
  .maps-stage .card { box-shadow: 0 8px 18px -12px rgba(31,47,68,.35); }
  .maps-stage .card-body { padding: 10px 12px 8px; }
  .maps-stage-head { min-height: 40px; margin-bottom: 6px; }
  .maps-stage .form-text { display: none; }
  #mapsApp.is-svg .maps-box { height: auto !important; max-height: 38vh; min-height: 200px; }
  #mapsApp.is-svg .maps-svgview { position: relative; inset: auto; height: 38vh; }
}

/* Mappe a strati: percorso cliccabile, spazi tra i pulsanti, scarica */
.mp-steps li { display: block; }
.mp-steps-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: var(--hg-radius-sm); cursor: pointer; }
.mp-steps-b:disabled { cursor: default; opacity: .6; }
.mp-steps-b:not(:disabled):hover { background: var(--hg-surface-2); }
.mp-steps-b:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
@media (max-width: 575.98px) { .mp-steps-b { flex-direction: column; gap: 2px; padding: 6px 2px; text-align: center; justify-content: center; font-size: .72rem; } }
.mp-seg { gap: 8px; }
.mp-step { gap: 8px; }
.mp-step-val { min-width: 4.4em; }
.mp-dpad { gap: 8px; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; }
.mp-sec > .card-body > * + * { margin-top: 0; }
.maps-controls details:not(.mp-sec) > summary::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .8rem; margin-right: 8px; transition: transform .2s; display: inline-block; }
.maps-controls details:not(.mp-sec)[open] > summary::before { transform: rotate(90deg); }
.mp-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mp-dl-grid .btn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; text-align: left; }
.mp-dl-grid .btn i { font-size: 1.4rem; flex: 0 0 auto; }
.mp-dl-grid .btn span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mp-dl-grid .btn small { font-weight: 400; opacity: .8; }
.mp-download:focus { outline: none; }
.mp-download:focus-visible { box-shadow: 0 0 0 2px var(--hg-primary); }
@media (max-width: 991.98px) {
  .maps-stage-head strong { display: none; }
  .maps-stage-head { justify-content: flex-end; min-height: 0; margin-bottom: 6px; }
  #mapsApp.is-svg .maps-box { max-height: 30vh; }
  #mapsApp.is-svg .maps-svgview { height: 30vh; }
  #mapsApp.is-svg .maps-stage .card-body { padding: 8px 10px; }
}
.maps-controls .mp-inline + .mp-row, .maps-controls .mp-inline + .form-label, .maps-controls .form-select + .form-label { margin-top: 20px !important; }
.maps-controls .mp-inline .form-control { min-height: 44px; }
.mp-dl-grid .btn { justify-content: flex-start; }
[data-bs-theme="dark"] .maps-svgview { background: var(--hg-surface-2); }
.mp-frame-custom { margin-top: 16px; max-width: 220px; } .mp-frame-custom[hidden], #mpFrameTextOpts[hidden], #p3dFrameOpts[hidden], #p3dFrameTextOpts[hidden] { display: none; }

/* Mappe a strati: anteprima 3D */
.mp-th { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 8px; }
.mp3d-body { display: flex; flex-direction: column; gap: 16px; padding: 0; }
.mp3d-stage { position: relative; height: min(62vh, 640px); background: radial-gradient(circle at 50% 35%, var(--hg-surface-2), var(--hg-bg)); overflow: hidden; touch-action: none; }
.maps3d-canvas { width: 100%; height: 100%; display: block; outline: none; }
.mp3d-loading { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; padding: 16px; background: color-mix(in srgb, var(--hg-bg) 80%, transparent); font-weight: 600; }
.mp3d-loading[hidden] { display: none; }
.mp3d-controls { padding: 0 16px 16px; }
@media (max-width: 991.98px) {
  #mp3d .modal-body { display: flex; flex-direction: column; overflow-y: auto; }
  .mp3d-stage { flex: 0 0 52vh; height: 52vh; }
}

/* Mappe a strati: colori RAL dei fogli d'acqua */
.opt-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.25); }
.mp-ral { display: grid; gap: 12px; margin-top: 12px; }
.mp-ral .form-label { margin-bottom: 4px !important; }
.mp-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 16px; font-size: .82rem; color: var(--hg-fg-muted); }
.mp-legend li { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.mp-legend .opt-dot { margin: 0; flex: 0 0 auto; }
@media (max-width: 991.98px) { .maps-stage .mp-legend { display: none; } #mapsApp.is-svg .mp-legend-m { display: grid; } }
.mp-legend-m { display: none; }

/* Mappe a strati: elimina parti */
.maps-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; touch-action: none; cursor: crosshair; }
.maps-draw[hidden] { display: none; }
.maps-svgview.is-picking .maps-svg { cursor: pointer; }
.mp-dellist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.mp-dellist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); }
.mp-dellist .btn { min-height: 44px; }
.mp-picking-msg { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; padding: 6px 10px; border-radius: 8px; background: rgba(214,51,108,.92); color: #fff; font-size: .85rem; text-align: center; }
.mp-ral { margin-top: 16px; }

.mp-why { flex-basis: 100%; width: 100%; margin-top: 6px; color: var(--hg-fg-muted); }
.mp-step button:disabled, .mp-dpad button:disabled { opacity: .45; }

/* ---------- Mappa 3D (Tools › Stampa 3D) ---------- */
.p3d-preview { position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, var(--hg-surface-2), var(--hg-bg)); touch-action: none; }
.p3d-preview[hidden] { display: none; }
.p3d-preview canvas { width: 100%; height: 100%; display: block; }
.p3d-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.p3d-plates { display: flex; flex-wrap: wrap; gap: 8px; }
.p3d-plates[hidden] { display: none; }
.p3d-plates .btn, .p3d-view .btn { min-height: 44px; }
.p3d-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.p3d-num .input-group-text { font-family: var(--font-mono); font-size: .85rem; }
.p3d-num .form-control { min-height: 44px; font-family: var(--font-mono); }
.p3d-slots { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; gap: 12px; }
.p3d-slot { display: grid; grid-template-columns: 28px 14px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); background: var(--hg-surface); }
.p3d-slot-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--hg-surface-2); color: var(--hg-fg); }
.p3d-slot-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); margin: 0; }
.p3d-slot-body .form-label { margin: 0 0 6px !important; font-size: .86rem; color: var(--hg-fg); }
.p3d-color { width: 100%; max-width: 100%; min-height: 44px; padding: 4px; }
.p3d-slot .form-select { min-height: 44px; }
.p3d-sum { display: grid; gap: 0; margin: 0 0 16px; }
.p3d-sum > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hg-border); font-size: .9rem; }
.p3d-sum dt { font-weight: 500; color: var(--hg-fg-muted); }
.p3d-sum dd { margin: 0; font-family: var(--font-mono); font-size: .85rem; overflow-wrap: anywhere; }
.p3d-warn { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.p3d-warn[hidden] { display: none; }
.p3d-warn li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--hg-radius-sm); background: #FFF4D6; color: #6B4E00; font-size: .85rem; }
[data-bs-theme=dark] .p3d-warn li { background: #3d3315; color: #f1d98a; }
.p3d-warn li i { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 575.98px) { .p3d-sum > div { grid-template-columns: 1fr; gap: 2px; } .p3d-slot { grid-template-columns: 28px 12px minmax(0, 1fr); } }

/* Forma della mappa: selettore a 6 pulsanti con l'icona (Mappe a strati e Mappa 3D) e maschera sul riquadro della mappa */
.mp-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mp-shape { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 4px; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm); background: var(--hg-surface); color: var(--hg-fg-muted); font-size: .78rem; line-height: 1.15; text-align: center; cursor: pointer; }
.mp-shape svg { color: var(--hg-primary); flex: none; }
.mp-shape:hover { border-color: var(--hg-primary); }
.mp-shape:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.mp-shape.is-on { border-color: var(--hg-primary); background: color-mix(in srgb, var(--hg-primary) 12%, var(--hg-surface)); color: var(--hg-fg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--hg-primary); }
.mp-shape:disabled { opacity: .55; cursor: not-allowed; }
.maps-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
@media (max-width: 400px) { .mp-shape { font-size: .72rem; padding: 8px 2px; } }
.p3d-quote { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--hg-radius-sm); background: var(--hg-primary-soft); color: var(--hg-fg); font-size: .9rem; line-height: 1.45; }