/* ============================================================================
   Brand Marker — Design System v2 (iPadOS-native, editoriale, premium)
   Stack: PHP nativo + Bootstrap 5 reset minimo + classi bm-*.
   Tutte le classi `bm-*` precedenti sono preservate; solo ristilizzate.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Font import — SF Pro fallback via Inter (system priority)
---------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ============================================================================
   1. TOKENS — iPadOS-native palette + scale Apple HIG
   ============================================================================ */
:root {
  /* SURFACE — sistema iPadOS grouped */
  --bm-bg:            #f2f2f7;
  --bm-bg-elevated:   #ffffff;
  --bm-sidebar-bg:    #1e2128;
  --bm-surface:       #ffffff;
  --bm-surface-alt:   #f9f9fb;
  --bm-surface-sunk:  #eeeef3;
  --bm-surface-tint:  #f5f5f7;
  --bm-overlay:       rgba(28, 28, 30, 0.45);
  --bm-overlay-65:    rgba(28, 28, 30, 0.60);
  --bm-overlay-85:    rgba(28, 28, 30, 0.78);
  --bm-glass:         rgba(255, 255, 255, 0.78);
  --bm-glass-strong:  rgba(255, 255, 255, 0.92);

  /* INK — labels iOS HIG */
  --bm-ink:           #1c1c1e;   /* Label */
  --bm-ink-hover:     #000000;
  --bm-ink-2:         #3a3a3c;   /* Secondary label */
  --bm-ink-3:         #636366;   /* Tertiary label */
  --bm-ink-4:         #8e8e93;   /* Quaternary label */
  --bm-ink-on-dark:   #ffffff;
  --bm-ink-on-accent: #ffffff;

  /* LINE — separator hairlines */
  --bm-line:          #e5e5ea;   /* iOS opaque separator */
  --bm-line-strong:   #d1d1d6;
  --bm-line-soft:     #efeff2;
  --bm-hairline:      rgba(60, 60, 67, 0.12);   /* iOS non-opaque */

  /* ACCENT — Breficom terracotta (mantenuto) */
  --bm-accent:        #e85d1f;
  --bm-accent-hover:  #d24d11;
  --bm-accent-ink:    #b8410f;
  --bm-accent-soft:   #fdebdf;
  --bm-accent-soft-2: #fad3b8;
  --bm-accent-tint:   #fff3eb;

  /* SEMANTIC — iOS system colors raffinati */
  --bm-success:        #28a745;
  --bm-success-soft:   #e6f6ea;
  --bm-success-ink:    #1f7a36;
  --bm-success-border: #c3e7cc;

  --bm-warn:           #f0a020;
  --bm-warn-soft:      #fdf3df;
  --bm-warn-ink:       #8c5a06;
  --bm-warn-border:    #f0dca7;

  --bm-danger:         #d93636;
  --bm-danger-soft:    #fde6e6;
  --bm-danger-ink:     #9a1f1f;
  --bm-danger-border:  #f0bdbd;

  --bm-info:           #0a84ff;   /* iOS system blue */
  --bm-info-soft:      #e3f0ff;
  --bm-info-ink:       #0653a8;
  --bm-info-border:    #c0dcff;

  --bm-mint:            #d4f1dc;
  --bm-mint-light:      #e7f7ec;
  --bm-mint-soft:       #f1fbf4;
  --bm-mint-ink:        #2e6b3a;
  --bm-mint-border:     #c3e3cb;
  --bm-mint-stripe-1:   #c9deca;
  --bm-mint-stripe-2:   #d3e2d3;
  --bm-blue-soft:       #d6e5f2;

  --bm-photo-stripe-1:  #c9c6bd;
  --bm-photo-stripe-2:  #b6b3a9;

  /* STATI ORDINE */
  --bm-state-bozza-bg:        var(--bm-surface-sunk);
  --bm-state-bozza-fg:        var(--bm-ink-2);
  --bm-state-bozza-dot:       var(--bm-ink-3);

  --bm-state-daconfermare-bg: var(--bm-warn-soft);
  --bm-state-daconfermare-fg: var(--bm-warn-ink);
  --bm-state-daconfermare-dot:var(--bm-warn);

  --bm-state-confermato-bg:   var(--bm-success-soft);
  --bm-state-confermato-fg:   var(--bm-success-ink);
  --bm-state-confermato-dot:  var(--bm-success);

  --bm-state-sforato-bg:      var(--bm-accent-soft);
  --bm-state-sforato-fg:      var(--bm-accent-ink);
  --bm-state-sforato-dot:     var(--bm-accent);

  /* TYPE — SF Pro priority + fallback */
  --bm-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --bm-font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --bm-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* TYPE SIZES — scale editoriale */
  --bm-fs-9:   11px;              /* @deprecated — alias di --bm-fs-10 */
  --bm-fs-10: 11px;
  --bm-fs-11: 12px;
  --bm-fs-12: 13px;
  --bm-fs-13: 14px;
  --bm-fs-14: 15px;
  --bm-fs-15: 16px;
  --bm-fs-16: 17px;               /* Apple body — preferito */
  --bm-fs-17: 17px;               /* @deprecated — alias di --bm-fs-16 */
  --bm-fs-18: 19px;
  --bm-fs-20: 22px;
  --bm-fs-22: 24px;
  --bm-fs-24: 26px;
  --bm-fs-28: 32px;
  --bm-fs-32: 38px;
  --bm-fs-40: 48px;
  --bm-fs-56: 64px;

  --bm-fs-body:  15px;
  --bm-fs-label: 13px;
  --bm-fs-badge: 14px;

  /* LINE HEIGHTS */
  --bm-lh-tight: 1.1;
  --bm-lh-snug:  1.3;
  --bm-lh-base:  1.47;            /* Apple body: editorial leading */
  --bm-lh-loose: 1.6;

  /* LETTER SPACING — Apple negative tracking on displays */
  --bm-tr-display: -0.008em;      /* Apple display: -0.374px @ 56px ≈ -0.0067em */
  --bm-tr-tight:   -0.022em;      /* Apple body @ 17px: -0.374px */
  --bm-tr-snug:    -0.014em;
  --bm-tr-normal:  -0.012em;      /* Body desktop 15px: leggera stretta Apple */
  --bm-tr-mono:     0.02em;
  --bm-tr-caps:     0.06em;

  /* WEIGHTS — Apple ladder: 300/400/600/700 (no 500) */
  --bm-w-regular: 400;
  --bm-w-medium:  600;            /* Alias di --bm-w-semi: Apple usa 600 per mid-weight */
  --bm-w-semi:    600;
  --bm-w-bold:    700;
  --bm-w-heavy:   800;            /* Solo per display hero — eccezione esplicita */

  /* SPACING — 4-pt grid */
  --bm-s-0:   0;
  --bm-s-1:   2px;
  --bm-s-2:   4px;
  --bm-s-3:   8px;
  --bm-s-4:  10px;
  --bm-s-5:  12px;
  --bm-s-6:  14px;
  --bm-s-7:  18px;
  --bm-s-8:  22px;
  --bm-s-9:  26px;
  --bm-s-10: 30px;
  --bm-s-12: 36px;
  --bm-s-14: 42px;
  --bm-s-16: 48px;
  --bm-s-20: 60px;
  --bm-s-24: 72px;
  --bm-s-32: 96px;
  --bm-s-40: 120px;

  /* RADII — calibrate: contained, mai morbidi */
  --bm-r-2:    3px;
  --bm-r-3:    4px;
  --bm-r-4:    5px;
  --bm-r-5:    6px;
  --bm-r-6:    7px;
  --bm-r-7:    8px;
  --bm-r-8:   10px;
  --bm-r-10:  12px;
  --bm-r-12:  14px;
  --bm-r-pill: 999px;

  /* SHADOWS — disattivate: elevation gestita via border/hairline */
  --bm-shadow-0: none;
  --bm-shadow-1: none;
  --bm-shadow-2: none;
  --bm-shadow-3: none;
  --bm-shadow-4: none;
  --bm-shadow-focus: 0 0 0 2px var(--bm-accent);
  --bm-shadow-focus-ink: 0 0 0 2px var(--bm-ink);

  /* MOTION */
  --bm-dur-1:  80ms;
  --bm-dur-2: 160ms;
  --bm-dur-3: 240ms;
  --bm-dur-4: 360ms;
  --bm-ease-out:    cubic-bezier(0.22, 0.78, 0.34, 1);
  --bm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bm-ease-spring: cubic-bezier(0.5, 1.4, 0.4, 1);

  /* BREAKPOINTS */
  --bm-bp-phone:     360px;
  --bm-bp-phone-lg:  480px;
  --bm-bp-tablet-v:  768px;
  --bm-bp-tablet-h: 1024px;
  --bm-bp-desktop:  1280px;
  --bm-bp-wide:     1600px;

  /* Z-INDEX */
  --bm-z-base:        1;
  --bm-z-sticky:     10;
  --bm-z-dropdown:   30;
  --bm-z-overlay:    50;
  --bm-z-modal:      60;
  --bm-z-toast:      70;
  --bm-z-cmdk:       80;
  --bm-z-tooltip:    90;

  /* CONTROL SIZES — base desktop dense */
  --bm-control-sm: 32px;
  --bm-control-md: 40px;
  --bm-control-lg: 48px;
  --bm-touch-min:  44px;

  /* LAYOUT */
  --sidebar-w: 268px;
  --bm-content-max: 1280px;
}

/* ----------------------------------------------------------------------------
   TOUCH MODE — iPad / iPhone in showroom, fingers, gloves
---------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  :root {
    --bm-control-sm: 44px;        /* HIG minimo touch */
    --bm-control-md: 50px;
    --bm-control-lg: 58px;
    --bm-fs-body:  17px;
    --bm-fs-label: 15px;
    --bm-fs-badge: 15px;
  }
  html, body { font-size: 17px; }
}

/* ============================================================================
   2. RESET — minimo, sicuro
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-body);
  line-height: var(--bm-lh-base);
  letter-spacing: var(--bm-tr-normal);
  color: var(--bm-ink);
  background: var(--bm-bg);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--bm-line); margin: 0; }
code, pre { font-family: var(--bm-font-mono); }
::selection { background: var(--bm-accent-soft); color: var(--bm-accent-ink); }

/* Focus accessibile uniforme */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--bm-shadow-focus-ink);
  border-radius: var(--bm-r-4);
}

/* Scrollbar — sottile, neutra */
.bm-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.bm-scroll::-webkit-scrollbar-thumb { background: var(--bm-line-strong); border-radius: 999px; border: 2px solid var(--bm-bg); }
.bm-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   3. TIPOGRAFIA — utility editoriali
   ============================================================================ */
.bm-t-display {
  font-family: var(--bm-font-display);
  font-size: clamp(40px, 4.6vw, 56px);
  line-height: var(--bm-lh-tight);
  letter-spacing: var(--bm-tr-display);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink);
}
.bm-t-display-sm {
  font-family: var(--bm-font-display);
  font-size: clamp(28px, 3vw, 36px);
  line-height: var(--bm-lh-tight);
  letter-spacing: var(--bm-tr-tight);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink);
}
.bm-t-h1 { font-family: var(--bm-font-display); font-size: clamp(24px, 2.6vw, 30px); line-height: var(--bm-lh-tight); letter-spacing: var(--bm-tr-tight); font-weight: var(--bm-w-semi); color: var(--bm-ink); }
.bm-t-h2 { font-family: var(--bm-font-display); font-size: clamp(20px, 2vw, 22px); line-height: var(--bm-lh-tight); letter-spacing: var(--bm-tr-snug); font-weight: var(--bm-w-semi); color: var(--bm-ink); }
.bm-t-h3 { font-size: var(--bm-fs-16); line-height: var(--bm-lh-snug); letter-spacing: var(--bm-tr-snug); font-weight: var(--bm-w-semi); color: var(--bm-ink); }
.bm-t-body    { font-size: var(--bm-fs-body); line-height: var(--bm-lh-base); letter-spacing: var(--bm-tr-normal); color: var(--bm-ink); }
.bm-t-body-sm { font-size: var(--bm-fs-13); line-height: var(--bm-lh-snug); letter-spacing: var(--bm-tr-normal); color: var(--bm-ink-2); }
.bm-t-label   { font-size: var(--bm-fs-label); line-height: var(--bm-lh-snug); font-weight: var(--bm-w-semi); color: var(--bm-ink-3); letter-spacing: 0; }
.bm-t-hint    { font-size: var(--bm-fs-13); line-height: var(--bm-lh-snug); color: var(--bm-ink-3); }
.bm-t-mono    { font-family: var(--bm-font-mono); font-size: var(--bm-fs-13); letter-spacing: var(--bm-tr-mono); }
.bm-t-mono-caps { font-family: var(--bm-font-mono); font-size: var(--bm-fs-12); letter-spacing: var(--bm-tr-caps); text-transform: uppercase; color: var(--bm-ink-3); }
.bm-t-num     { font-family: var(--bm-font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "lnum"; }

.bm-c-ink     { color: var(--bm-ink); }
.bm-c-ink-2   { color: var(--bm-ink-2); }
.bm-c-ink-3   { color: var(--bm-ink-3); }
.bm-c-ink-4   { color: var(--bm-ink-4); }
.bm-c-accent  { color: var(--bm-accent); }
.bm-c-success { color: var(--bm-success-ink); }
.bm-c-warn    { color: var(--bm-warn-ink); }
.bm-c-danger  { color: var(--bm-danger-ink); }
.bm-c-info    { color: var(--bm-info-ink); }

/* ============================================================================
   4. LOGO
   ============================================================================ */
.bm-logo {
  display: inline-flex; align-items: center; gap: var(--bm-s-4);
  text-decoration: none; color: var(--bm-ink);
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-15);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-snug);
}
.bm-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bm-accent);
  color: #fff;
  font-family: var(--bm-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ============================================================================
   5. BUTTON — sistema Apple HIG
   ============================================================================ */
.bm-btn {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  font-weight: var(--bm-w-semi);
  letter-spacing: var(--bm-tr-normal);
  min-height: var(--bm-control-md);
  height: var(--bm-control-md);
  padding: 0 var(--bm-s-7);
  border-radius: var(--bm-r-5);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bm-s-3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: var(--bm-surface);
  color: var(--bm-ink);
  border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow-1);
  transition: background var(--bm-dur-1) var(--bm-ease-out),
              border-color var(--bm-dur-1) var(--bm-ease-out),
              transform var(--bm-dur-2) var(--bm-ease-spring),
              box-shadow var(--bm-dur-2) var(--bm-ease-out);
}
.bm-btn:hover { background: var(--bm-surface-alt); border-color: var(--bm-line-strong); }
.bm-btn:active { transform: scale(0.97); }
.bm-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.bm-btn svg, .bm-btn i[data-feather] { width: 18px; height: 18px; flex-shrink: 0; }

.bm-btn--sm, .bm-btn--small {
  min-height: var(--bm-control-sm); height: var(--bm-control-sm);
  padding: 0 var(--bm-s-5);
  font-size: var(--bm-fs-13);
  border-radius: var(--bm-r-4);
}
.bm-btn--lg {
  min-height: var(--bm-control-lg); height: var(--bm-control-lg);
  padding: 0 var(--bm-s-9);
  font-size: var(--bm-fs-15);
  border-radius: var(--bm-r-6);
}
.bm-btn--full { width: 100%; }

.bm-btn--primary {
  background: var(--bm-ink); color: var(--bm-ink-on-dark);
  border-color: var(--bm-ink);
}
.bm-btn--primary:hover { background: var(--bm-ink-hover); border-color: var(--bm-ink-hover); }

.bm-btn--accent {
  background: var(--bm-accent); color: var(--bm-ink-on-accent);
  border-color: var(--bm-accent);
}
.bm-btn--accent:hover { background: var(--bm-accent-hover); border-color: var(--bm-accent-hover); }

.bm-btn--tinted {
  background: var(--bm-accent-soft); color: var(--bm-accent-ink);
  border-color: transparent; box-shadow: none;
}
.bm-btn--tinted:hover { background: var(--bm-accent-soft-2); }

.bm-btn--danger {
  background: var(--bm-surface); color: var(--bm-danger-ink);
  border: 1px solid var(--bm-danger-border);
}
.bm-btn--danger:hover { background: var(--bm-danger-soft); border-color: var(--bm-danger); color: var(--bm-danger-ink); }

.bm-btn--ghost {
  background: transparent; color: var(--bm-ink-2);
  border-color: transparent; box-shadow: none;
}
.bm-btn--ghost:hover { background: var(--bm-surface-alt); }

.bm-btn--icon {
  width: var(--bm-control-md); min-width: var(--bm-control-md); height: var(--bm-control-md);
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--bm-r-5);
}
.bm-btn--icon.bm-btn--sm { width: var(--bm-control-sm); min-width: var(--bm-control-sm); height: var(--bm-control-sm); }
.bm-btn--icon.bm-btn--lg { width: var(--bm-control-lg); min-width: var(--bm-control-lg); height: var(--bm-control-lg); }
.bm-btn--icon svg { width: 20px; height: 20px; }
.bm-btn--icon.bm-btn--danger { color: var(--bm-accent); border-color: var(--bm-line); }
.bm-btn--icon.bm-btn--danger:hover { background: var(--bm-accent); color: var(--bm-ink-on-accent); border-color: var(--bm-accent); }

.bm-btn__hint {
  font-family: var(--bm-font-mono); font-size: var(--bm-fs-10);
  padding: 1px 6px; border: 1px solid currentColor; border-radius: var(--bm-r-2);
  opacity: 0.55; margin-left: var(--bm-s-2);
}

/* BUTTON GROUP */
.bm-btn-group { display: inline-flex; }
.bm-btn-group .bm-btn { border-radius: 0; border-right-width: 0; }
.bm-btn-group .bm-btn:first-child { border-top-left-radius: var(--bm-r-5); border-bottom-left-radius: var(--bm-r-5); }
.bm-btn-group .bm-btn:last-child  { border-top-right-radius: var(--bm-r-5); border-bottom-right-radius: var(--bm-r-5); border-right-width: 1px; }

/* ============================================================================
   6. FIELD — input, select, textarea
   ============================================================================ */
.bm-field {
  display: flex; flex-direction: column; gap: var(--bm-s-3);
  font-family: var(--bm-font-sans);
}
.bm-field__label {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-15);
  color: var(--bm-ink);
  font-weight: var(--bm-w-semi);
  letter-spacing: var(--bm-tr-snug);
  line-height: var(--bm-lh-snug);
}
.bm-field__hint {
  font-size: var(--bm-fs-12);
  color: var(--bm-ink-3);
  line-height: var(--bm-lh-snug);
}
.bm-field__kbd { font-family: var(--bm-font-mono); font-size: var(--bm-fs-10); color: var(--bm-ink-3); padding: 1px 5px; border: 1px solid var(--bm-line); border-radius: var(--bm-r-2); }

input.bm-field__control,
select.bm-field__control,
textarea.bm-field__control {
  display: block; width: 100%;
  height: var(--bm-control-md);
  padding: 0 var(--bm-s-5);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-5);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-body);
  color: var(--bm-ink);
  transition: border-color var(--bm-dur-1) var(--bm-ease-out),
              box-shadow var(--bm-dur-1) var(--bm-ease-out),
              background var(--bm-dur-1) var(--bm-ease-out);
  -webkit-appearance: none; appearance: none;
}
textarea.bm-field__control {
  height: auto; min-height: 96px;
  padding: var(--bm-s-5) var(--bm-s-5);
  line-height: var(--bm-lh-base);
  resize: vertical;
}
input.bm-field__control:hover,
select.bm-field__control:hover,
textarea.bm-field__control:hover { border-color: var(--bm-line-strong); }
input.bm-field__control:focus,
select.bm-field__control:focus,
textarea.bm-field__control:focus,
.bm-field__control--focused {
  outline: none;
  border-color: var(--bm-accent);
  box-shadow: var(--bm-shadow-focus);
}
input.bm-field__control::placeholder,
textarea.bm-field__control::placeholder { color: var(--bm-ink-4); }

/* Select native arrow */
select.bm-field__control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%23636366' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--bm-s-5) center;
  background-size: 12px 8px;
  padding-right: var(--bm-s-9);
}

/* Field composito (icona dentro) */
.bm-field__control {
  display: flex; align-items: center; gap: var(--bm-s-3);
  height: var(--bm-control-md);
  padding: 0 var(--bm-s-5);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-5);
  font-size: var(--bm-fs-body);
  color: var(--bm-ink);
}
.bm-field__control:hover { border-color: var(--bm-line-strong); }
.bm-field__control:focus-within { border-color: var(--bm-accent); box-shadow: var(--bm-shadow-focus); outline: none; }
.bm-field__icon { width: 16px; height: 16px; color: var(--bm-ink-3); flex-shrink: 0; }
.bm-field--error .bm-field__control,
.bm-field--error input.bm-field__control,
.bm-field--error select.bm-field__control,
.bm-field--error textarea.bm-field__control { border-color: var(--bm-danger); }
.bm-field--error .bm-field__hint { color: var(--bm-danger-ink); }
.bm-field--dense input.bm-field__control,
.bm-field--dense select.bm-field__control { height: var(--bm-control-sm); font-size: var(--bm-fs-13); }
.bm-field__control--multi { height: auto; min-height: 96px; padding: var(--bm-s-5); align-items: flex-start; }
.bm-field__control--multi textarea { resize: vertical; min-height: 60px; line-height: var(--bm-lh-base); }

/* ============================================================================
   7. PILL & CHIP — segmenti, filtri, tag
   ============================================================================ */
.bm-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bm-s-3);
  height: var(--bm-control-md); padding: 0 var(--bm-s-6);
  background: var(--bm-surface); color: var(--bm-ink-2);
  border: 1px solid var(--bm-line); border-radius: var(--bm-r-pill);
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-13); font-weight: var(--bm-w-medium);
  letter-spacing: 0; white-space: nowrap;
  cursor: pointer; text-decoration: none; text-transform: none;
  box-shadow: var(--bm-shadow-1);
  transition: all var(--bm-dur-1) var(--bm-ease-out);
}
.bm-pill:hover { border-color: var(--bm-line-strong); color: var(--bm-ink); }
.bm-pill--active { background: var(--bm-ink); color: var(--bm-ink-on-dark); border-color: var(--bm-ink); }
.bm-pill--accent { background: var(--bm-accent-soft); color: var(--bm-accent-ink); border-color: transparent; }
select.bm-pill { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%23636366' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--bm-s-5) center;
  background-size: 12px 8px;
  padding-right: var(--bm-s-9);
}

.bm-chip {
  display: inline-flex; align-items: center; gap: var(--bm-s-2);
  height: 28px; padding: 0 var(--bm-s-4);
  background: var(--bm-surface-tint); color: var(--bm-ink-2);
  border: 1px solid transparent; border-radius: var(--bm-r-pill);
  font-size: var(--bm-fs-13); font-weight: var(--bm-w-medium);
  cursor: pointer;
  transition: all var(--bm-dur-1) var(--bm-ease-out);
}
.bm-chip:hover { background: var(--bm-surface-sunk); }
.bm-chip--active { background: var(--bm-ink); color: var(--bm-ink-on-dark); border-color: var(--bm-ink); }
.bm-chip--accent { background: var(--bm-accent-soft); color: var(--bm-accent-ink); border-color: transparent; }
.bm-chip__remove { font-size: 14px; line-height: 0.6; opacity: 0.7; margin-left: var(--bm-s-1); }
.bm-chip__remove:hover { opacity: 1; }
.bm-chip--sm { height: 22px; padding: 0 var(--bm-s-3); font-size: var(--bm-fs-12); }

/* ============================================================================
   8. STATUS BADGE — pill semantica
   ============================================================================ */
.bm-status,
.bm-status-badge {
  display: inline-flex; align-items: center; gap: var(--bm-s-3);
  height: 30px; padding: 0 var(--bm-s-5);
  border-radius: var(--bm-r-pill);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-13);
  font-weight: var(--bm-w-semi);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.bm-status::before,
.bm-status-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.bm-status--bozza,
.bm-status-badge--bozza { background: var(--bm-state-bozza-bg); color: var(--bm-state-bozza-fg); }
.bm-status--bozza::before,
.bm-status-badge--bozza::before { background: var(--bm-state-bozza-dot); }
.bm-status--da-confermare,
.bm-status-badge--da-confermare { background: var(--bm-state-daconfermare-bg); color: var(--bm-state-daconfermare-fg); }
.bm-status--da-confermare::before,
.bm-status-badge--da-confermare::before { background: var(--bm-state-daconfermare-dot); }
.bm-status--confermato,
.bm-status-badge--confermato { background: var(--bm-state-confermato-bg); color: var(--bm-state-confermato-fg); }
.bm-status--confermato::before,
.bm-status-badge--confermato::before { background: var(--bm-state-confermato-dot); }
.bm-status--sforato,
.bm-status-badge--sforato { background: var(--bm-state-sforato-bg); color: var(--bm-state-sforato-fg); }
.bm-status--sforato::before,
.bm-status-badge--sforato::before { background: var(--bm-state-sforato-dot); }

/* ============================================================================
   9. CARD / BOX
   ============================================================================ */
.bm-card,
.bm-box {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-7);
  box-shadow: var(--bm-shadow-1);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-body);
  color: var(--bm-ink);
}
.bm-card--padded,
.bm-box { padding: var(--bm-s-7); }
.bm-card--lg { padding: var(--bm-s-9); border-radius: var(--bm-r-8); }
.bm-box--dashed { border: 2px dashed var(--bm-line-strong); background: transparent; box-shadow: none; }
.bm-box--soft   { background: var(--bm-surface-tint); border-color: transparent; box-shadow: none; }
.bm-box--paper  { background: var(--bm-surface-alt); border-color: var(--bm-line-soft); }
.bm-card--interactive { cursor: pointer; transition: transform var(--bm-dur-2) var(--bm-ease-spring), box-shadow var(--bm-dur-2) var(--bm-ease-out), border-color var(--bm-dur-1) var(--bm-ease-out); }
.bm-card--interactive:hover { box-shadow: var(--bm-shadow-2); border-color: var(--bm-line); transform: translateY(-1px); }
.bm-card--interactive:active { transform: translateY(0); }

/* ============================================================================
   10. KPI
   ============================================================================ */
.bm-kpi {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-7);
  padding: var(--bm-s-7);
  box-shadow: var(--bm-shadow-1);
}
.bm-kpi__label { font-size: var(--bm-fs-label); color: var(--bm-ink-3); font-weight: var(--bm-w-medium); letter-spacing: 0; }
.bm-kpi__value {
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-28); font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-tight);
  margin-top: var(--bm-s-3);
  font-variant-numeric: tabular-nums;
  color: var(--bm-ink);
  line-height: 1;
}
.bm-kpi__delta { display: inline-flex; align-items: center; gap: var(--bm-s-2); font-family: var(--bm-font-mono); font-size: var(--bm-fs-12); font-weight: var(--bm-w-semi); margin-top: var(--bm-s-3); }
.bm-kpi__delta--pos { color: var(--bm-success-ink); }
.bm-kpi__delta--neg { color: var(--bm-danger-ink); }
.bm-kpi__sub { font-size: var(--bm-fs-12); color: var(--bm-ink-3); margin-left: var(--bm-s-3); }

/* ============================================================================
   11. PROGRESS
   ============================================================================ */
.bm-progress { font-family: var(--bm-font-sans); }
.bm-progress__top { display: flex; justify-content: space-between; margin-bottom: var(--bm-s-3); font-size: var(--bm-fs-12); }
.bm-progress__top .bm-progress__label { color: var(--bm-ink-3); font-weight: var(--bm-w-medium); }
.bm-progress__top .bm-progress__num   { color: var(--bm-ink-2); font-weight: var(--bm-w-semi); font-family: var(--bm-font-mono); font-variant-numeric: tabular-nums; }
.bm-progress__track { height: 6px; background: var(--bm-surface-sunk); border-radius: var(--bm-r-pill); overflow: hidden; }
.bm-progress__fill  { height: 100%; background: var(--bm-ink); border-radius: var(--bm-r-pill); transition: width var(--bm-dur-3) var(--bm-ease-out); }
.bm-progress--warn  .bm-progress__fill { background: var(--bm-warn); }
.bm-progress--over  .bm-progress__fill { background: var(--bm-accent); }
.bm-progress--over  .bm-progress__num  { color: var(--bm-accent-ink); }

/* ============================================================================
   12. STEPPER — qty controls
   ============================================================================ */
.bm-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-5);
  background: var(--bm-surface);
  font-family: var(--bm-font-mono);
  font-size: var(--bm-fs-13);
  height: var(--bm-control-md);
  overflow: hidden;
}
.bm-stepper--filled { border-color: var(--bm-ink); }
.bm-stepper--accent { border-color: var(--bm-accent); }
.bm-stepper__btn {
  width: 36px; height: 100%;
  text-align: center; cursor: pointer; background: transparent; border: none;
  color: var(--bm-ink-2); font-family: var(--bm-font-sans); font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.bm-stepper__btn:hover { background: var(--bm-surface-alt); }
.bm-stepper__btn--minus { border-right: 1px solid var(--bm-line); }
.bm-stepper__btn--plus  { border-left: 1px solid var(--bm-line); }
.bm-stepper__val,
.bm-stepper__value {
  width: 48px; text-align: center; padding: 0;
  font-weight: var(--bm-w-semi); font-variant-numeric: tabular-nums; color: var(--bm-ink);
  height: 100%; line-height: var(--bm-control-md);
}
.bm-stepper--empty .bm-stepper__value { color: var(--bm-ink-4); font-weight: var(--bm-w-medium); }

/* STEPPER iPad — full touch */
.bm-stepper--ipad {
  display: inline-flex; align-items: center;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-6);
  background: var(--bm-surface);
  box-shadow: var(--bm-shadow-1);
  overflow: hidden;
}
.bm-stepper--ipad .bm-stepper__btn {
  width: var(--bm-control-md); height: var(--bm-control-md);
  border: 0;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-20);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink);
  user-select: none;
  transition: background var(--bm-dur-1) var(--bm-ease-out);
}
.bm-stepper--ipad .bm-stepper__btn:hover { background: var(--bm-surface-alt); }
.bm-stepper--ipad .bm-stepper__btn:active { background: var(--bm-surface-sunk); }
.bm-stepper--ipad .bm-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.bm-stepper--ipad .bm-stepper__input {
  width: 64px; height: var(--bm-control-md);
  border: 0; border-left: 1px solid var(--bm-line); border-right: 1px solid var(--bm-line);
  background: transparent;
  font-family: var(--bm-font-mono);
  font-size: var(--bm-fs-16);
  font-weight: var(--bm-w-semi);
  text-align: center; color: var(--bm-ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.bm-stepper--ipad .bm-stepper__input::-webkit-outer-spin-button,
.bm-stepper--ipad .bm-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================================
   13. PHOTO TILE
   ============================================================================ */
.bm-photo,
.bm-photo-tile {
  aspect-ratio: 1/1;
  border-radius: var(--bm-r-6);
  background: var(--bm-surface-tint);
  border: 1px dashed var(--bm-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-12); color: var(--bm-ink-3);
  letter-spacing: 0; text-transform: none;
  position: relative; overflow: hidden;
}
.bm-photo--filled,
.bm-photo-tile--filled {
  background: repeating-linear-gradient(45deg, var(--bm-photo-stripe-1) 0 6px, var(--bm-photo-stripe-2) 6px 12px);
  border-style: solid; border-color: var(--bm-line);
  color: var(--bm-ink-on-dark);
}
.bm-photo-tile--photo { border-style: solid; border-color: var(--bm-line); background: var(--bm-surface); padding: 0; }
.bm-photo-tile--photo > a { display: block; width: 100%; height: 100%; }
.bm-photo-tile--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bm-photo__label { position: relative; font-weight: var(--bm-w-semi); letter-spacing: var(--bm-tr-caps); text-transform: uppercase; }
.bm-photo__plus { font-size: 32px; font-weight: 300; color: var(--bm-ink-3); }
.bm-photo-tile__del { position: absolute; top: var(--bm-s-3); right: var(--bm-s-3); margin: 0; z-index: 1; }
.bm-photo-tile__del button {
  background: var(--bm-overlay-65); color: var(--bm-ink-on-dark);
  border: 0; border-radius: var(--bm-r-3);
  width: 32px; height: 32px;
  cursor: pointer; font-size: 16px; line-height: 1;
  backdrop-filter: blur(8px);
}
.bm-photo-tile__del button:hover { background: var(--bm-overlay-85); }
.bm-photo-tile--upload { cursor: pointer; margin: 0; }
.bm-photo-tile--upload label {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; cursor: pointer;
  font-size: 36px; font-weight: 200; color: var(--bm-ink-3);
}

/* ============================================================================
   14. STEPS / WIZARD
   ============================================================================ */
.bm-steps { display: flex; align-items: center; font-family: var(--bm-font-sans); }
.bm-steps__item { display: flex; align-items: center; gap: var(--bm-s-3); }
.bm-steps__dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bm-surface); border: 1.5px solid var(--bm-line-strong);
  color: var(--bm-ink-3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--bm-fs-12); font-weight: var(--bm-w-bold); font-family: var(--bm-font-sans);
}
.bm-steps__label { font-size: var(--bm-fs-13); font-weight: var(--bm-w-medium); color: var(--bm-ink-3); }
.bm-steps__line { width: 32px; height: 1.5px; background: var(--bm-line); margin: 0 var(--bm-s-5); border-radius: var(--bm-r-pill); }
.bm-steps__item--current .bm-steps__dot { background: var(--bm-accent); border-color: var(--bm-accent); color: var(--bm-ink-on-accent); }
.bm-steps__item--current .bm-steps__label { color: var(--bm-ink); font-weight: var(--bm-w-semi); }
.bm-steps__item--done .bm-steps__dot { background: var(--bm-ink); border-color: var(--bm-ink); color: var(--bm-ink-on-dark); }
.bm-steps__item--done .bm-steps__label { color: var(--bm-ink-2); }
.bm-steps__item--done + .bm-steps__line { background: var(--bm-ink); }

.bm-step-dots {
  display: flex; align-items: center; gap: var(--bm-s-4);
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-13);
}
.bm-step-dots__step { display: flex; align-items: center; gap: var(--bm-s-3); }
.bm-step-dots__bullet {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--bm-line-strong); color: var(--bm-ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-12); font-weight: var(--bm-w-bold);
  background: var(--bm-surface);
}
.bm-step-dots__step--current .bm-step-dots__bullet { border-color: var(--bm-accent); background: var(--bm-accent); color: var(--bm-ink-on-accent); }
.bm-step-dots__step--done .bm-step-dots__bullet { border-color: var(--bm-ink); background: var(--bm-ink); color: var(--bm-ink-on-dark); }
.bm-step-dots__label { color: var(--bm-ink-3); font-size: var(--bm-fs-13); font-weight: var(--bm-w-medium); }
.bm-step-dots__step--current .bm-step-dots__label { color: var(--bm-ink); font-weight: var(--bm-w-semi); }
.bm-step-dots__sep { width: 24px; height: 1.5px; background: var(--bm-line); display: inline-block; border-radius: var(--bm-r-pill); }

.bm-wizard-steps {
  padding: var(--bm-s-5) var(--bm-s-7);
  background: var(--bm-surface);
  border-bottom: 1px solid var(--bm-line-soft);
}

/* ============================================================================
   15. TABLE
   ============================================================================ */
.bm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-body);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-7);
  overflow: hidden;
  box-shadow: var(--bm-shadow-1);
}
.bm-table thead th {
  position: sticky; top: 0; z-index: var(--bm-z-sticky);
  background: var(--bm-surface-alt);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-12);
  font-weight: var(--bm-w-semi);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bm-ink-3);
  text-align: left;
  padding: var(--bm-s-5) var(--bm-s-6);
  border-bottom: 1px solid var(--bm-line);
  white-space: nowrap;
}
.bm-table tbody td {
  padding: var(--bm-s-7) var(--bm-s-6);
  border-bottom: 1px solid var(--bm-line);
  vertical-align: middle;
  color: var(--bm-ink);
}
.bm-table tbody tr { transition: background var(--bm-dur-1) var(--bm-ease-out); }
.bm-table tbody tr:hover { background: var(--bm-surface-alt); cursor: pointer; }
.bm-table tbody tr.is-selected { background: var(--bm-accent-soft); }
.bm-table tbody tr:last-child td { border-bottom: 0; }
.bm-table--num td.bm-table__num,
.bm-table .bm-table__num { font-family: var(--bm-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.bm-table__sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.bm-table__sort.is-asc::after  { content: "▲"; font-size: 8px; }
.bm-table__sort.is-desc::after { content: "▼"; font-size: 8px; }

/* ============================================================================
   16. MODAL / SHEET
   ============================================================================ */
.bm-modal__scrim {
  position: fixed; inset: 0; background: var(--bm-overlay);
  z-index: var(--bm-z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--bm-s-7);
  animation: bm-fade var(--bm-dur-3) var(--bm-ease-out);
  backdrop-filter: blur(8px);
}
.bm-modal {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-strong);
  border-radius: var(--bm-r-8);
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: var(--bm-z-modal);
  animation: bm-pop var(--bm-dur-4) var(--bm-ease-spring);
}
.bm-modal__head { padding: var(--bm-s-7) var(--bm-s-9) var(--bm-s-5); border-bottom: 1px solid var(--bm-line-soft); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bm-s-5); }
.bm-modal__title { font-family: var(--bm-font-display); font-size: var(--bm-fs-20); font-weight: var(--bm-w-bold); letter-spacing: var(--bm-tr-snug); }
.bm-modal__sub { font-size: var(--bm-fs-13); color: var(--bm-ink-3); margin-top: var(--bm-s-2); }
.bm-modal__body { padding: var(--bm-s-7) var(--bm-s-9); overflow: auto; flex: 1; }
.bm-modal__foot { padding: var(--bm-s-5) var(--bm-s-9); border-top: 1px solid var(--bm-line-soft); display: flex; justify-content: flex-end; gap: var(--bm-s-4); background: var(--bm-surface-alt); }

.bm-sheet__scrim { position: fixed; inset: 0; background: var(--bm-overlay); z-index: var(--bm-z-overlay); backdrop-filter: blur(6px); }
.bm-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bm-surface);
  border-top: 1px solid var(--bm-line-strong);
  border-top-left-radius: var(--bm-r-10);
  border-top-right-radius: var(--bm-r-10);
  z-index: var(--bm-z-modal);
  max-height: 92%;
  display: flex; flex-direction: column;
  animation: bm-slide-up var(--bm-dur-3) var(--bm-ease-out);
}
.bm-sheet__handle { width: 44px; height: 5px; background: var(--bm-line-strong); border-radius: var(--bm-r-pill); margin: var(--bm-s-3) auto var(--bm-s-2); flex-shrink: 0; }
.bm-sheet__head { padding: var(--bm-s-3) var(--bm-s-7) var(--bm-s-5); border-bottom: 1px solid var(--bm-line-soft); }
.bm-sheet__body { padding: var(--bm-s-7); overflow: auto; flex: 1; }
.bm-sheet__foot { padding: var(--bm-s-5) var(--bm-s-7) calc(var(--bm-s-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bm-line-soft); display: flex; gap: var(--bm-s-4); }

/* ============================================================================
   17. TOAST / ALERT
   ============================================================================ */
.bm-toast {
  position: fixed; bottom: var(--bm-s-9); left: 50%; transform: translateX(-50%);
  z-index: var(--bm-z-toast);
  background: var(--bm-ink); color: var(--bm-ink-on-dark);
  padding: var(--bm-s-5) var(--bm-s-7);
  border-radius: var(--bm-r-5);
  box-shadow: var(--bm-shadow-3);
  font-size: var(--bm-fs-14); font-weight: var(--bm-w-medium);
  display: inline-flex; align-items: center; gap: var(--bm-s-4);
  animation: bm-toast-in var(--bm-dur-3) var(--bm-ease-spring);
}
.bm-toast--success { background: var(--bm-success-ink); }
.bm-toast--danger  { background: var(--bm-danger-ink); }
.bm-toast--warn    { background: var(--bm-warn-ink); }
.bm-toast__action  { font-weight: var(--bm-w-semi); text-decoration: underline; cursor: pointer; padding-left: var(--bm-s-3); border-left: 1px solid rgba(255,255,255,0.22); margin-left: var(--bm-s-2); }

.bm-alert {
  border: 1px solid var(--bm-line);
  background: var(--bm-surface);
  border-radius: var(--bm-r-5);
  padding: var(--bm-s-5) var(--bm-s-6);
  margin: var(--bm-s-5) var(--bm-s-7);
  display: flex; gap: var(--bm-s-4);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-13);
}
.bm-alert__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.bm-alert__title { font-weight: var(--bm-w-semi); margin-bottom: var(--bm-s-1); }
.bm-alert--info    { background: var(--bm-info-soft);    border-color: var(--bm-info-border);    color: var(--bm-info-ink); }
.bm-alert--warn    { background: var(--bm-warn-soft);    border-color: var(--bm-warn-border);    color: var(--bm-warn-ink); }
.bm-alert--success { background: var(--bm-success-soft); border-color: var(--bm-success-border); color: var(--bm-success-ink); }
.bm-alert--danger,
.bm-alert--error   { background: var(--bm-danger-soft);  border-color: var(--bm-danger-border);  color: var(--bm-danger-ink); }
.bm-alert--accent  { background: var(--bm-accent-soft);  border-color: var(--bm-accent-soft-2); color: var(--bm-accent-ink); }

/* ============================================================================
   18. EMPTY / SKELETON
   ============================================================================ */
.bm-empty { text-align: center; padding: var(--bm-s-20) var(--bm-s-7); display: flex; flex-direction: column; align-items: center; gap: var(--bm-s-4); color: var(--bm-ink-3); }
.bm-empty__icon { width: 44px; height: 44px; color: var(--bm-ink-4); }
.bm-empty__title { font-family: var(--bm-font-display); font-size: var(--bm-fs-18); font-weight: var(--bm-w-semi); letter-spacing: var(--bm-tr-snug); color: var(--bm-ink-2); }
.bm-empty__text { font-size: var(--bm-fs-13); color: var(--bm-ink-3); max-width: 380px; line-height: var(--bm-lh-base); }
.bm-empty--inline { padding: var(--bm-s-12) var(--bm-s-7); }
.bm-empty--row { padding: var(--bm-s-9) var(--bm-s-7); font-size: var(--bm-fs-13); color: var(--bm-ink-3); }

/* Numero tabulare monospace — celle totale/prezzo coerenti */
.bm-num { font-family: var(--bm-font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--bm-tr-mono); }
.bm-num--strong { font-weight: var(--bm-w-bold); color: var(--bm-ink); }
.bm-num--semi { font-weight: var(--bm-w-semi); color: var(--bm-ink); }

/* Meta riga — coppia label/value uniforme per dettaglio/testata */
.bm-meta { display: flex; flex-direction: column; gap: 2px; }
.bm-meta__label { font-size: var(--bm-fs-12); color: var(--bm-ink-3); font-weight: var(--bm-w-medium); letter-spacing: 0; }
.bm-meta__value { font-size: var(--bm-fs-14); color: var(--bm-ink); font-weight: var(--bm-w-semi); }
.bm-meta__value--num { font-family: var(--bm-font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--bm-tr-mono); }

.bm-skel {
  background: linear-gradient(90deg, var(--bm-surface-sunk) 0%, var(--bm-line) 50%, var(--bm-surface-sunk) 100%);
  background-size: 200% 100%;
  animation: bm-shimmer 1.4s linear infinite;
  border-radius: var(--bm-r-4);
}
.bm-skel--text { height: 14px; }
.bm-skel--title { height: 22px; }
.bm-skel--photo { aspect-ratio: 1/1; border-radius: var(--bm-r-6); }
.bm-skel--row   { height: 52px; }

/* ============================================================================
   19. AVATAR / KBD / SEGMENTED / SWITCH / CHECK / DIVIDER / NOTE
   ============================================================================ */
.bm-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bm-accent-soft); color: var(--bm-accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: var(--bm-fs-13); font-weight: var(--bm-w-semi); flex-shrink: 0; }
.bm-avatar--sm { width: 26px; height: 26px; font-size: var(--bm-fs-12); }
.bm-avatar--lg { width: 48px; height: 48px; font-size: var(--bm-fs-15); }

.bm-kbd { font-family: var(--bm-font-mono); font-size: var(--bm-fs-10); padding: 2px 6px; border: 1px solid var(--bm-line); border-radius: var(--bm-r-2); color: var(--bm-ink-3); background: var(--bm-surface); }

.bm-segmented {
  display: inline-flex; padding: 3px; background: var(--bm-surface-sunk);
  border-radius: var(--bm-r-5); gap: 2px;
}
.bm-segmented__btn {
  padding: 6px 14px; font-size: var(--bm-fs-13); font-weight: var(--bm-w-medium);
  color: var(--bm-ink-3); border-radius: var(--bm-r-3);
}
.bm-segmented__btn:hover { color: var(--bm-ink-2); }
.bm-segmented__btn--active { background: var(--bm-surface); color: var(--bm-ink); font-weight: var(--bm-w-semi); box-shadow: var(--bm-shadow-1); }

.bm-switch { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.bm-switch input { opacity: 0; width: 0; height: 0; }
.bm-switch__track { position: absolute; inset: 0; background: var(--bm-line-strong); border-radius: var(--bm-r-pill); transition: background var(--bm-dur-2) var(--bm-ease-out); }
.bm-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-strong);
  border-radius: 50%;
  transition: transform var(--bm-dur-2) var(--bm-ease-out);
}
.bm-switch input:checked + .bm-switch__track { background: var(--bm-success); }
.bm-switch input:checked + .bm-switch__track::after { transform: translateX(20px); }

.bm-check, .bm-radio {
  width: 22px; height: 22px;
  border: 1.5px solid var(--bm-line-strong); background: var(--bm-surface);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--bm-dur-1) var(--bm-ease-out);
}
.bm-check { border-radius: var(--bm-r-2); }
.bm-radio { border-radius: 50%; }
.bm-check.is-checked, .bm-radio.is-checked { background: var(--bm-ink); border-color: var(--bm-ink); }
.bm-check.is-checked::after { content: "✓"; color: var(--bm-ink-on-dark); font-size: 13px; font-weight: 700; }
.bm-radio.is-checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bm-ink-on-dark); }

.bm-divider { display: flex; align-items: center; gap: var(--bm-s-4); color: var(--bm-ink-4); }
.bm-divider::before, .bm-divider::after { content: ""; flex: 1; height: 1px; background: var(--bm-line); }
.bm-divider__text { font-family: var(--bm-font-sans); font-size: var(--bm-fs-12); letter-spacing: 0; text-transform: none; color: var(--bm-ink-3); font-weight: var(--bm-w-medium); }

.bm-note {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-13);
  color: var(--bm-ink-2);
  line-height: var(--bm-lh-base);
  border-left: 3px solid var(--bm-accent);
  padding: var(--bm-s-3) var(--bm-s-5);
  background: var(--bm-accent-tint);
  border-radius: 0 var(--bm-r-3) var(--bm-r-3) 0;
}

.bm-caption { font-family: var(--bm-font-sans); font-size: var(--bm-fs-12); color: var(--bm-ink-3); letter-spacing: 0; text-transform: none; font-weight: var(--bm-w-medium); }

/* ============================================================================
   20. TOGGLE — checkbox/radio wrapper con hit-area
   ============================================================================ */
.bm-toggle {
  display: inline-flex; align-items: center; gap: var(--bm-s-4);
  min-height: var(--bm-touch-min); padding: var(--bm-s-2) 0;
  cursor: pointer; user-select: none;
  font-size: var(--bm-fs-body); color: var(--bm-ink);
}
.bm-toggle__input,
.bm-toggle input[type="checkbox"],
.bm-toggle input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; margin: 0;
  border: 2px solid var(--bm-line-strong); border-radius: var(--bm-r-3);
  background: var(--bm-surface); flex-shrink: 0; cursor: pointer;
  display: inline-grid; place-content: center;
  transition: border-color var(--bm-dur-1) var(--bm-ease-out), background var(--bm-dur-1) var(--bm-ease-out);
}
.bm-toggle__input:hover,
.bm-toggle input[type="checkbox"]:hover { border-color: var(--bm-ink-3); }
.bm-toggle__input:focus-visible,
.bm-toggle input[type="checkbox"]:focus-visible,
.bm-toggle input[type="radio"]:focus-visible { outline: 2px solid var(--bm-accent); outline-offset: 2px; }
.bm-toggle__input:checked,
.bm-toggle input[type="checkbox"]:checked { background: var(--bm-ink); border-color: var(--bm-ink); }
.bm-toggle__input:checked::after,
.bm-toggle input[type="checkbox"]:checked::after {
  content: ""; width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 L5 9.5 L10 3' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
}
.bm-toggle input[type="radio"],
.bm-toggle__input[type="radio"] { border-radius: 50%; }
.bm-toggle input[type="radio"]:checked,
.bm-toggle__input[type="radio"]:checked { background: var(--bm-ink); border-color: var(--bm-ink); }
.bm-toggle input[type="radio"]:checked::after,
.bm-toggle__input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bm-ink-on-dark); }
.bm-toggle__input:disabled,
.bm-toggle input:disabled { opacity: 0.45; cursor: not-allowed; }
.bm-toggle:has(input:disabled) { color: var(--bm-ink-4); cursor: not-allowed; }
.bm-toggle__label { font-size: var(--bm-fs-body); color: var(--bm-ink); line-height: var(--bm-lh-snug); }

/* ============================================================================
   21. ANNOTATION / SEASON PILL
   ============================================================================ */
.bm-annot { display: inline-flex; align-items: flex-start; gap: var(--bm-s-3); font-family: var(--bm-font-sans); font-size: var(--bm-fs-12); color: var(--bm-ink-3); line-height: var(--bm-lh-snug); }
.bm-annot__num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--bm-line-strong); color: var(--bm-ink-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--bm-font-mono); font-size: var(--bm-fs-9); font-weight: var(--bm-w-bold); background: var(--bm-surface); }

.bm-season-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--bm-control-md);
  padding: 0 var(--bm-s-6);
  border: 1px solid var(--bm-line); border-radius: var(--bm-r-pill);
  background: var(--bm-surface); color: var(--bm-ink-2);
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-13); font-weight: var(--bm-w-semi);
  letter-spacing: 0;
  min-width: 64px; cursor: pointer; text-decoration: none;
  box-shadow: var(--bm-shadow-1);
  transition: all var(--bm-dur-1) var(--bm-ease-out);
}
.bm-season-pill:hover { border-color: var(--bm-line-strong); }
.bm-season-pill--active { border-color: var(--bm-ink); background: var(--bm-ink); color: var(--bm-ink-on-dark); }

/* ============================================================================
   22. SECTION HEADER / PAGE HEAD
   ============================================================================ */
.bm-section-header {
  padding: var(--bm-s-7) var(--bm-s-9);
  background: transparent;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--bm-font-sans); gap: var(--bm-s-6);
}
.bm-section-header__main { display: flex; flex-direction: column; gap: var(--bm-s-2); min-width: 0; }
.bm-section-header__back {
  display: inline-flex; align-items: center; gap: var(--bm-s-2);
  font-size: var(--bm-fs-13); color: var(--bm-ink-3); text-decoration: none;
  text-transform: none; letter-spacing: 0; font-weight: var(--bm-w-medium);
  padding: var(--bm-s-2) var(--bm-s-4) var(--bm-s-2) 0;
  min-height: var(--bm-touch-min);
  margin-bottom: var(--bm-s-2);
  align-self: flex-start; width: fit-content;
  transition: color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-section-header__back:hover { color: var(--bm-ink); }
.bm-section-header__title {
  font-family: var(--bm-font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-tight);
  color: var(--bm-ink);
  line-height: 1.08;
}
.bm-section-header__sub {
  display: flex; align-items: center; gap: var(--bm-s-3); flex-wrap: wrap;
  font-size: var(--bm-fs-13); color: var(--bm-ink-3);
  margin-top: var(--bm-s-2);
}
.bm-section-header__action { font-size: var(--bm-fs-13); color: var(--bm-ink-3); }
.bm-section-header--stack { align-items: flex-start; }

.bm-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bm-s-7);
  padding: var(--bm-s-10) var(--bm-s-9) var(--bm-s-7);
  background: transparent;
  border-bottom: 0;
  flex-wrap: wrap;
}
.bm-page-title {
  font-family: var(--bm-font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: var(--bm-w-bold);
  line-height: 1.05;
  letter-spacing: var(--bm-tr-display);
  color: var(--bm-ink);
  margin: 0;
}
.bm-page-sub {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  color: var(--bm-ink-3);
  letter-spacing: 0;
  text-transform: none;
  margin-top: var(--bm-s-3);
  font-weight: var(--bm-w-medium);
}

/* ============================================================================
   23. FILTERBAR
   ============================================================================ */
.bm-filterbar {
  display: flex; flex-wrap: wrap; gap: var(--bm-s-4);
  padding: var(--bm-s-5) var(--bm-s-9);
  background: transparent;
  align-items: center;
}
.bm-filtri-grid { display: grid; grid-template-columns: 1fr; gap: var(--bm-s-7); }
@media (min-width: 768px) {
  .bm-filtri-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   24. ACTION BAR — sticky bottom CTA wizard ordine
   ============================================================================ */
.bm-action-bar {
  position: sticky; bottom: var(--bm-s-5);
  z-index: var(--bm-z-sticky);
  display: flex; align-items: center; gap: var(--bm-s-5);
  padding: var(--bm-s-5) var(--bm-s-7) calc(var(--bm-s-5) + env(safe-area-inset-bottom, 0px));
  margin: var(--bm-s-9) var(--bm-s-9) var(--bm-s-5);
  background: var(--bm-glass-strong);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-3);
}
.bm-action-bar__spacer { flex: 1; }
.bm-action-bar__totals { display: flex; flex-direction: column; gap: 2px; font-family: var(--bm-font-sans); }
.bm-action-bar__totals-label { font-size: var(--bm-fs-12); color: var(--bm-ink-3); text-transform: none; letter-spacing: 0; font-weight: var(--bm-w-medium); }
.bm-action-bar__totals-value {
  font-family: var(--bm-font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: var(--bm-w-bold);
  color: var(--bm-ink);
  letter-spacing: var(--bm-tr-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ============================================================================
   24b. SUMMARY PANEL — sidebar "Totale ordine" stile editorial premium
   ============================================================================ */
.bm-summary {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-2);
  padding: var(--bm-s-9);
  display: flex; flex-direction: column;
  gap: var(--bm-s-7);
}
.bm-summary__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bm-s-4);
}
.bm-summary__eyebrow {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-11);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink-3);
  letter-spacing: var(--bm-tr-caps);
  text-transform: uppercase;
}
.bm-summary__hero {
  display: flex; flex-direction: column; gap: var(--bm-s-3);
}
.bm-summary__hero-value {
  font-family: var(--bm-font-display);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--bm-ink);
}
.bm-summary__hero-value--accent { color: var(--bm-accent); }
.bm-summary__hero-meta {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-13);
  color: var(--bm-ink-3);
  line-height: var(--bm-lh-snug);
}
.bm-summary__hero-meta strong { color: var(--bm-ink-2); font-weight: var(--bm-w-semi); font-variant-numeric: tabular-nums; }

.bm-summary__progress {
  display: flex; flex-direction: column; gap: var(--bm-s-3);
}
.bm-summary__progress-track {
  height: 6px;
  background: var(--bm-surface-sunk);
  border-radius: var(--bm-r-pill);
  overflow: hidden;
  position: relative;
}
.bm-summary__progress-fill {
  position: absolute; inset: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--bm-accent), var(--bm-accent-hover));
  border-radius: inherit;
  transition: width var(--bm-dur-3) var(--bm-ease-out);
}
.bm-summary__progress-fill--ok {
  background: linear-gradient(90deg, var(--bm-ink), var(--bm-ink-2));
}
.bm-summary__progress-meta {
  display: flex; justify-content: space-between; gap: var(--bm-s-3);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-12);
  color: var(--bm-ink-3);
  font-weight: var(--bm-w-medium);
}
.bm-summary__progress-meta strong { color: var(--bm-ink); font-weight: var(--bm-w-semi); font-variant-numeric: tabular-nums; font-family: var(--bm-font-mono); }

.bm-summary__divider {
  height: 1px;
  background: var(--bm-hairline);
  margin: 0 calc(-1 * var(--bm-s-9));
}

.bm-summary__breakdown {
  display: flex; flex-direction: column; gap: var(--bm-s-4);
}
.bm-summary__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bm-s-4);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  color: var(--bm-ink-2);
}
.bm-summary__row-label { font-weight: var(--bm-w-medium); }
.bm-summary__row-value {
  font-family: var(--bm-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink);
}
.bm-summary__row--discount .bm-summary__row-label { color: var(--bm-accent-ink); }
.bm-summary__row--discount .bm-summary__row-value {
  color: var(--bm-accent-ink);
  background: var(--bm-accent-soft);
  padding: 4px 10px;
  border-radius: var(--bm-r-pill);
  font-size: var(--bm-fs-13);
}

/* Note card — empty/textual */
.bm-summary-note {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-1);
  padding: var(--bm-s-8);
}
.bm-summary-note__title {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-11);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink-3);
  letter-spacing: var(--bm-tr-caps);
  text-transform: uppercase;
  margin-bottom: var(--bm-s-4);
}
.bm-summary-note__body {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  color: var(--bm-ink-2);
  line-height: var(--bm-lh-base);
  white-space: pre-wrap;
}
.bm-summary-note__body--empty { color: var(--bm-ink-4); font-style: italic; }

/* ============================================================================
   25. HERO STAT — card totali ordine
   ============================================================================ */
.bm-hero-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bm-s-6);
  align-items: center;
  padding: var(--bm-s-8) var(--bm-s-9);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-1);
  margin: var(--bm-s-7) var(--bm-s-9) var(--bm-s-7);
}
.bm-hero-stat__group { display: flex; flex-direction: column; gap: 6px; }
.bm-hero-stat__label {
  font-size: var(--bm-fs-12);
  color: var(--bm-ink-3);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--bm-w-semi);
}
.bm-hero-stat__value {
  font-family: var(--bm-font-display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: var(--bm-w-bold);
  color: var(--bm-ink);
  letter-spacing: var(--bm-tr-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.02;
}
.bm-hero-stat__value--accent { color: var(--bm-accent); }
.bm-hero-stat__group--right { text-align: right; }
.bm-hero-stat--sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bm-glass-strong);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

/* ============================================================================
   26. SIZES TABLE — taglie/prezzo iPad
   ============================================================================ */
.bm-sizes-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.bm-sizes-table th {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-12);
  font-weight: var(--bm-w-semi);
  text-transform: none;
  letter-spacing: 0;
  color: var(--bm-ink-3);
  padding: var(--bm-s-5) var(--bm-s-5);
  text-align: left;
  border-bottom: 1px solid var(--bm-line);
  background: var(--bm-surface-alt);
}
.bm-sizes-table th.bm-sizes-table__th-num { text-align: right; }
.bm-sizes-table td {
  padding: var(--bm-s-5) var(--bm-s-5);
  border-bottom: 1px solid var(--bm-line-soft);
  vertical-align: middle;
}
.bm-sizes-table tr:hover td { background: var(--bm-surface-alt); }
.bm-sizes-table__size {
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-15);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink);
  letter-spacing: 0;
}
.bm-sizes-table__price-input {
  width: 108px; height: var(--bm-control-md);
  text-align: right;
  font-family: var(--bm-font-mono);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--bm-s-5);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-5);
  background: var(--bm-surface);
  font-size: var(--bm-fs-14);
  color: var(--bm-ink);
}
.bm-sizes-table__price-input:focus { outline: none; border-color: var(--bm-accent); box-shadow: var(--bm-shadow-focus); }
.bm-sizes-table__total {
  font-family: var(--bm-font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--bm-fs-15);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink);
  text-align: right;
  letter-spacing: 0;
}
.bm-sizes-table__total--zero { color: var(--bm-ink-4); font-weight: var(--bm-w-medium); }

/* ============================================================================
   27. ATTR ADD — CTA dashed
   ============================================================================ */
.bm-attr-add {
  display: inline-flex; align-items: center; gap: var(--bm-s-3);
  height: var(--bm-control-md);
  padding: 0 var(--bm-s-7);
  border: 2px dashed var(--bm-line-strong);
  border-radius: var(--bm-r-6);
  background: transparent;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink-3);
  cursor: pointer;
  transition: border-color var(--bm-dur-1) var(--bm-ease-out), color var(--bm-dur-1) var(--bm-ease-out), background var(--bm-dur-1) var(--bm-ease-out);
}
.bm-attr-add:hover { border-color: var(--bm-accent); color: var(--bm-accent); background: var(--bm-accent-tint); }

/* ============================================================================
   28. DASHBOARD / OVERVIEW
   ============================================================================ */
.bm-dashboard {
  padding: 0 var(--bm-s-9) var(--bm-s-9);
  display: grid; gap: var(--bm-s-7);
}
.bm-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
  gap: var(--bm-s-7);
  align-items: stretch;
}
.bm-overview-card,
.bm-side-card {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-1);
  overflow: hidden;
}
.bm-overview-card__head,
.bm-side-card__head {
  min-height: 64px;
  padding: var(--bm-s-6) var(--bm-s-8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bm-s-5);
  border-bottom: 1px solid var(--bm-line-soft);
}
.bm-overview-card__title,
.bm-side-card__title {
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-17);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-snug);
  color: var(--bm-ink);
}
.bm-overview-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bm-s-7);
  padding: var(--bm-s-8);
}
.bm-overview-kpi__value {
  font-family: var(--bm-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.02;
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-overview-kpi__label { margin-top: var(--bm-s-3); font-size: var(--bm-fs-12); color: var(--bm-ink-3); font-weight: var(--bm-w-medium); }

.bm-overview-bars {
  display: grid; grid-template-columns: 1fr 0.72fr 1.2fr 0.45fr;
  gap: var(--bm-s-4); padding: 0 var(--bm-s-8) var(--bm-s-8);
  align-items: end;
}
.bm-overview-bars__bar { min-height: 74px; border-radius: var(--bm-r-5); background: var(--bm-mint); }
.bm-overview-bars__bar--stripe { background: repeating-linear-gradient(135deg, var(--bm-mint-stripe-1) 0 4px, transparent 4px 8px); border: 1px solid var(--bm-mint-stripe-2); }
.bm-overview-bars__bar--blue  { min-height: 88px; background: var(--bm-blue-soft); }
.bm-overview-bars__bar--mint  { min-height: 96px; background: var(--bm-mint); }
.bm-overview-bars__bar--soft  { min-height: 104px; background: var(--bm-mint-light); }

.bm-overview-chart {
  display: grid; grid-template-columns: 1fr;
  gap: var(--bm-s-4); padding: 0 var(--bm-s-8) var(--bm-s-8);
}
.bm-overview-chart__canvas-wrap { position: relative; width: 100%; height: 220px; }
.bm-overview-chart__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bm-s-3) var(--bm-s-4); }
.bm-overview-chart__legend li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--bm-s-3); font-size: var(--bm-fs-12); color: var(--bm-ink-2); }
.bm-overview-chart__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bm-overview-chart__label { color: var(--bm-ink-3); }
.bm-overview-chart__value { font-variant-numeric: tabular-nums; color: var(--bm-ink); font-weight: var(--bm-w-semi); }
.bm-overview-chart__empty { grid-column: 1/-1; padding: var(--bm-s-7); text-align: center; color: var(--bm-ink-3); font-size: var(--bm-fs-13); background: var(--bm-surface-tint); border-radius: var(--bm-r-5); }
.bm-dashboard .bm-overview-card__head .bm-pill { height: var(--bm-control-md); padding: 0 var(--bm-s-6); font-size: var(--bm-fs-13); }
@media (max-width: 720px) {
  .bm-overview-chart__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-overview-chart__canvas-wrap { height: 220px; }
}

.bm-side-card { background: linear-gradient(180deg, var(--bm-mint-soft), var(--bm-mint-light)); border-color: var(--bm-mint-border); }
.bm-side-card__body { padding: var(--bm-s-8); display: grid; gap: var(--bm-s-7); }
.bm-health { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-s-7); }
.bm-health__value {
  font-family: var(--bm-font-display);
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: var(--bm-w-bold); line-height: 0.95;
  letter-spacing: var(--bm-tr-display);
  color: var(--bm-mint-ink);
}
.bm-health__label { max-width: 160px; color: var(--bm-mint-ink); font-size: var(--bm-fs-13); line-height: var(--bm-lh-snug); font-weight: var(--bm-w-medium); }

.bm-exception-list { display: grid; gap: var(--bm-s-4); margin: 0; padding: 0; list-style: none; }
.bm-exception-list__item { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--bm-s-4); align-items: center; padding: var(--bm-s-3) 0; border-top: 1px solid rgba(46,107,58,0.14); font-size: var(--bm-fs-13); }
.bm-exception-list__num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--bm-font-mono); font-size: 10px; font-weight: var(--bm-w-bold); background: rgba(255,255,255,0.82); color: var(--bm-mint-ink); }
.bm-exception-list__meta { color: var(--bm-mint-ink); font-size: var(--bm-fs-12); opacity: 0.7; }

.bm-kpi-grid, .bm-compare-grid, .bm-panel-grid {
  padding: 0 var(--bm-s-9) var(--bm-s-8);
  display: grid; gap: var(--bm-s-7);
}
.bm-kpi-grid    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bm-compare-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-panel-grid  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.bm-kpi-card {
  background: var(--bm-surface); border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8); padding: var(--bm-s-8);
  box-shadow: var(--bm-shadow-1);
}
.bm-kpi-card--active { border-color: var(--bm-ink); }
.bm-kpi-card--mint { background: linear-gradient(180deg, var(--bm-mint-soft), var(--bm-mint-light)); border-color: var(--bm-mint-border); }
.bm-kpi-card__value {
  margin-top: var(--bm-s-3);
  font-family: var(--bm-font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.02;
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-kpi-card__sub { margin-top: var(--bm-s-3); font-size: var(--bm-fs-12); color: var(--bm-ink-3); font-weight: var(--bm-w-medium); }

.bm-table-panel {
  margin: 0 var(--bm-s-9) var(--bm-s-9);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-1);
  overflow: hidden;
}
.bm-table-panel .bm-section-header { border: 0; border-radius: 0; box-shadow: none; padding: var(--bm-s-7) var(--bm-s-8); border-bottom: 1px solid var(--bm-line-soft); }
.bm-table-panel .bm-table { border: 0; border-radius: 0; box-shadow: none; }

.bm-dashboard .bm-orders-table,
.bm-dashboard .bm-orders-cards { padding: 0; }

/* Orders card — tab strip integrato nell'head */
.bm-orders-card__tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--bm-surface-tint);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-5);
  padding: 3px;
}
.bm-orders-card__tab {
  display: inline-flex; align-items: center; gap: var(--bm-s-3);
  height: 34px; padding: 0 var(--bm-s-6);
  background: transparent; border: 0;
  border-radius: var(--bm-r-4);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink-3);
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--bm-dur-1) var(--bm-ease-out), color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-orders-card__tab:hover { color: var(--bm-ink); }
.bm-orders-card__tab--active {
  background: var(--bm-surface);
  color: var(--bm-ink);
  border: 1px solid var(--bm-line);
}
.bm-orders-card__tab-count {
  font-family: var(--bm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--bm-fs-12);
  color: var(--bm-ink-3);
  padding: 1px 6px;
  background: var(--bm-surface-sunk);
  border-radius: var(--bm-r-pill);
  min-width: 22px;
  text-align: center;
}
.bm-orders-card__tab--active .bm-orders-card__tab-count {
  background: var(--bm-ink);
  color: var(--bm-ink-on-dark);
}
.bm-orders-card__filter {
  display: flex; align-items: center; gap: var(--bm-s-3); margin: 0;
}

/* Body lista — separazione netta dal head, full-bleed table */
.bm-dashboard .bm-orders-card .bm-orders-table { padding-top: 0; }
.bm-dashboard .bm-orders-card .bm-orders-table .bm-table thead th {
  background: var(--bm-surface-tint);
  border-bottom: 1px solid var(--bm-line);
}
.bm-dashboard .bm-overview-card .bm-table { border: 0; border-radius: 0; box-shadow: none; }
.bm-dashboard .bm-overview-card .bm-table thead th { top: 0; }
.bm-dashboard-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--bm-s-4); flex-wrap: wrap;
  color: var(--bm-ink-3);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-12);
  font-weight: var(--bm-w-medium);
}

@media (max-width: 980px) {
  .bm-dashboard-grid { grid-template-columns: 1fr; }
  .bm-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   29. ORDER CARDS / ORDERS TABLE
   ============================================================================ */
.bm-order-card {
  border: 1px solid var(--bm-line-soft);
  background: var(--bm-surface);
  border-radius: var(--bm-r-8);
  padding: var(--bm-s-7);
  display: flex; flex-direction: column;
  gap: var(--bm-s-4);
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-body);
  text-decoration: none; color: var(--bm-ink);
  box-shadow: var(--bm-shadow-1);
  transition: transform var(--bm-dur-2) var(--bm-ease-spring), box-shadow var(--bm-dur-2) var(--bm-ease-out), border-color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-order-card:hover { border-color: var(--bm-line); box-shadow: var(--bm-shadow-2); transform: translateY(-1px); }
.bm-order-card:active { transform: translateY(0); }
.bm-order-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-s-4); }
.bm-order-card__brand {
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-17);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-snug);
  color: var(--bm-ink);
}
.bm-order-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--bm-s-5);
  font-size: var(--bm-fs-12);
  color: var(--bm-ink-3);
  font-family: var(--bm-font-sans);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--bm-w-medium);
}
.bm-order-card__meta strong { color: var(--bm-ink); font-weight: var(--bm-w-semi); }

/* Orders table (legacy compat) */
.bm-orders-table { display: block; overflow-x: auto; padding: 0 var(--bm-s-9) var(--bm-s-8); }
.bm-orders-cards { display: flex; flex-direction: column; gap: var(--bm-s-5); padding: var(--bm-s-5) var(--bm-s-9) var(--bm-s-8); }
.bm-orders-table__num { display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.bm-orders-table__num-main { font-weight: var(--bm-w-bold); font-size: var(--bm-fs-14); letter-spacing: 0; }
.bm-orders-table__num-year { font-size: var(--bm-fs-12); color: var(--bm-ink-3); font-variant-numeric: tabular-nums; }
.bm-orders-table__supplier { font-weight: var(--bm-w-semi); font-size: var(--bm-fs-14); letter-spacing: 0; color: var(--bm-ink); }
.bm-orders-table__meta { margin-top: 2px; font-size: var(--bm-fs-12); color: var(--bm-ink-3); }
.bm-orders-table__delivery { font-size: var(--bm-fs-13); color: var(--bm-ink); font-variant-numeric: tabular-nums; }
.bm-orders-table__placeholder { color: var(--bm-ink-4); }
.bm-orders-table__amounts { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bm-s-3); font-variant-numeric: tabular-nums; }
.bm-orders-table__total { font-family: var(--bm-font-display); font-size: var(--bm-fs-15); font-weight: var(--bm-w-bold); color: var(--bm-ink); letter-spacing: var(--bm-tr-snug); }
.bm-orders-table__total.is-over { color: var(--bm-accent); }
.bm-orders-table__budget { font-size: var(--bm-fs-12); color: var(--bm-ink-3); }
.bm-orders-table__bar { height: 4px; background: var(--bm-surface-sunk); margin-top: 8px; position: relative; border-radius: var(--bm-r-pill); overflow: hidden; }
.bm-orders-table__bar-fill { position: absolute; inset: 0; background: var(--bm-ink); transition: width var(--bm-dur-3) var(--bm-ease-out); border-radius: inherit; }
.bm-orders-table__bar-fill.is-over { background: var(--bm-accent); }
.bm-orders-table__chevron { text-align: right; color: var(--bm-ink-4); font-size: var(--bm-fs-15); }

/* ============================================================================
   30. NAV ITEM / TABBAR (componente design system)
   ============================================================================ */
.bm-nav-item {
  display: flex; align-items: center; gap: var(--bm-s-4);
  padding: var(--bm-s-3) var(--bm-s-4);
  border-radius: var(--bm-r-5);
  font-size: var(--bm-fs-14); font-weight: var(--bm-w-medium);
  color: var(--bm-ink-2);
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--bm-dur-1) var(--bm-ease-out);
}
.bm-nav-item:hover { background: var(--bm-surface-alt); }
.bm-nav-item__icon { width: 20px; height: 20px; color: var(--bm-ink-3); flex-shrink: 0; }
.bm-nav-item--active { background: var(--bm-accent-soft); color: var(--bm-accent-ink); font-weight: var(--bm-w-semi); }
.bm-nav-item--active .bm-nav-item__icon { color: var(--bm-accent); }
.bm-nav-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-nav-item__hint { font-family: var(--bm-font-mono); font-size: var(--bm-fs-10); color: var(--bm-ink-4); padding: 1px 5px; border: 1px solid var(--bm-line); border-radius: var(--bm-r-2); }

/* ============================================================================
   30b. LITEPICKER — datepicker iPadOS, palette accent
   ============================================================================ */
.litepicker {
  font-family: var(--bm-font-sans) !important;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-7) !important;
  box-shadow: var(--bm-shadow-3);
  padding: var(--bm-s-5) !important;
  color: var(--bm-ink);
}
.litepicker .container__months {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex; gap: var(--bm-s-7);
}
.litepicker .month-item {
  padding: 0 !important;
  width: auto !important;
}
.litepicker .month-item-header {
  padding: var(--bm-s-3) var(--bm-s-3) var(--bm-s-5);
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-16);
  font-weight: var(--bm-w-bold);
  color: var(--bm-ink);
  letter-spacing: var(--bm-tr-snug);
  text-transform: capitalize;
}
.litepicker .month-item-name { font-weight: var(--bm-w-bold); color: var(--bm-ink); }
.litepicker .month-item-year { font-weight: var(--bm-w-medium); color: var(--bm-ink-3); margin-left: 6px; }
.litepicker .button-previous-month,
.litepicker .button-next-month {
  width: 36px; height: 36px;
  border-radius: var(--bm-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bm-ink-2) !important;
  fill: var(--bm-ink-2) !important;
  background: transparent;
  transition: background var(--bm-dur-1) var(--bm-ease-out);
}
.litepicker .button-previous-month:hover,
.litepicker .button-next-month:hover { background: var(--bm-surface-alt); color: var(--bm-ink) !important; fill: var(--bm-ink) !important; }
.litepicker .button-previous-month svg,
.litepicker .button-next-month svg { width: 16px; height: 16px; }

.litepicker .month-item-weekdays-row {
  margin-bottom: var(--bm-s-3);
}
.litepicker .month-item-weekdays-row > div {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-12);
  font-weight: var(--bm-w-semi);
  color: var(--bm-ink-3);
  letter-spacing: 0;
  text-transform: lowercase;
  width: 40px !important;
  height: 28px;
  line-height: 28px;
  text-align: center;
}

.litepicker .container__days {
  gap: 2px;
}
.litepicker .day-item {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14) !important;
  font-weight: var(--bm-w-medium);
  color: var(--bm-ink-2) !important;
  border-radius: var(--bm-r-4) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background var(--bm-dur-1) var(--bm-ease-out), color var(--bm-dur-1) var(--bm-ease-out);
  padding: 0 !important;
  margin: 0 !important;
}
.litepicker .day-item:hover {
  background: var(--bm-accent-soft) !important;
  color: var(--bm-accent-ink) !important;
  border: none !important;
  box-shadow: none !important;
}
.litepicker .day-item.is-today {
  color: var(--bm-accent) !important;
  font-weight: var(--bm-w-bold) !important;
}
.litepicker .day-item.is-locked {
  color: var(--bm-ink-4) !important;
  opacity: 0.45;
  cursor: not-allowed;
}
.litepicker .day-item.is-locked:hover {
  background: transparent !important;
  color: var(--bm-ink-4) !important;
}
.litepicker .day-item.is-in-range {
  background: var(--bm-accent-soft) !important;
  color: var(--bm-accent-ink) !important;
  border-radius: 0 !important;
}
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
  background: var(--bm-accent) !important;
  color: var(--bm-ink-on-accent) !important;
  font-weight: var(--bm-w-semi) !important;
  border-radius: var(--bm-r-4) !important;
}
.litepicker .day-item.is-start-date.is-in-range {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.litepicker .day-item.is-end-date.is-in-range {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.litepicker .day-item.is-flipped { color: var(--bm-ink-4) !important; }

/* Touch / iPad — calendario più grande */
@media (hover: none) and (pointer: coarse) {
  .litepicker {
    padding: var(--bm-s-7) !important;
    border-radius: var(--bm-r-8) !important;
  }
  .litepicker .container__months { gap: var(--bm-s-9); }
  .litepicker .month-item-header { font-size: var(--bm-fs-18); padding: var(--bm-s-4) var(--bm-s-3) var(--bm-s-6); }
  .litepicker .button-previous-month,
  .litepicker .button-next-month { width: 44px; height: 44px; }
  .litepicker .button-previous-month svg,
  .litepicker .button-next-month svg { width: 20px; height: 20px; }
  .litepicker .month-item-weekdays-row > div {
    width: 52px !important;
    font-size: var(--bm-fs-13);
    height: 34px; line-height: 34px;
  }
  .litepicker .day-item {
    width: 52px !important;
    height: 52px !important;
    line-height: 52px !important;
    font-size: var(--bm-fs-16) !important;
    border-radius: var(--bm-r-5) !important;
  }
  .litepicker .day-item.is-start-date,
  .litepicker .day-item.is-end-date { border-radius: var(--bm-r-5) !important; }
}

/* ============================================================================
   31. TYPEAHEAD
   ============================================================================ */
.bm-typeahead { position: relative; }
.bm-typeahead__list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--bm-z-dropdown);
  margin: 0; padding: var(--bm-s-2) 0;
  list-style: none;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-5);
  box-shadow: var(--bm-shadow-2);
  max-height: 320px; overflow-y: auto;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-body);
}
.bm-typeahead__list[hidden] { display: none; }
.bm-typeahead__item {
  padding: var(--bm-s-3) var(--bm-s-5);
  cursor: pointer; color: var(--bm-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: var(--bm-r-3);
  margin: 0 var(--bm-s-2);
}
.bm-typeahead__item:hover,
.bm-typeahead__item--active { background: var(--bm-accent-soft); color: var(--bm-accent-ink); }
.bm-typeahead__item--empty { color: var(--bm-ink-4); cursor: default; font-style: italic; }
.bm-typeahead__item--empty:hover { background: transparent; color: var(--bm-ink-4); }

/* ============================================================================
   32. ANIMAZIONI
   ============================================================================ */
@keyframes bm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-pop  { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bm-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bm-toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bm-shimmer  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

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

/* ============================================================================
   33. SHIM legacy — vecchi token mantengono compatibilità
   ============================================================================ */
:root {
  --color-overlay:      var(--bm-overlay);
  --color-overlay-deep: var(--bm-overlay-85);
  --color-bg:           var(--bm-bg);
  --color-paper:        var(--bm-surface-alt);
  --color-card:         var(--bm-surface);
  --color-soft:         var(--bm-surface-sunk);
  --color-ink:          var(--bm-ink);
  --color-muted:        var(--bm-ink-3);
  --color-line:         var(--bm-line);
  --color-accent:       var(--bm-accent);
  --color-accent-soft:  var(--bm-accent-soft);
  --color-success:      var(--bm-success);
  --color-success-soft: var(--bm-success-soft);
  --color-danger:       var(--bm-danger);

  --status-bozza-bg:           var(--bm-state-bozza-bg);
  --status-bozza-fg:           var(--bm-state-bozza-fg);
  --status-da-confermare-bg:   var(--bm-state-daconfermare-bg);
  --status-da-confermare-fg:   var(--bm-state-daconfermare-fg);
  --status-confermato-bg:      var(--bm-state-confermato-bg);
  --status-confermato-fg:      var(--bm-state-confermato-fg);
  --status-sforato-bg:         var(--bm-state-sforato-bg);
  --status-sforato-fg:         var(--bm-state-sforato-fg);

  --font-sans: var(--bm-font-sans);
  --font-mono: var(--bm-font-mono);

  --fs-xs:  var(--bm-fs-12);
  --fs-sm:  var(--bm-fs-12);
  --fs-md:  var(--bm-fs-13);
  --fs-lg:  var(--bm-fs-14);
  --fs-xl:  var(--bm-fs-16);
  --fs-2xl: var(--bm-fs-24);
  --fs-3xl: var(--bm-fs-28);

  --sp-1: var(--bm-s-2);
  --sp-2: var(--bm-s-3);
  --sp-3: var(--bm-s-4);
  --sp-4: var(--bm-s-5);
  --sp-5: var(--bm-s-7);
  --sp-6: var(--bm-s-9);
  --sp-7: var(--bm-s-12);
  --sp-8: var(--bm-s-16);

  --radius-sm:   var(--bm-r-3);
  --radius-md:   var(--bm-r-5);
  --radius-lg:   var(--bm-r-7);
  --radius-pill: var(--bm-r-pill);

  --shadow-card:  var(--bm-shadow-1);
  --shadow-hard:  var(--bm-shadow-2);
  --shadow-focus: var(--bm-shadow-focus);

  --hit: var(--bm-touch-min);
}

/* ============================================================================
   34. LAYOUT — shell, header, sidebar, tabbar, main
   ============================================================================ */
html, body { height: 100%; }

/* HEADER */
.bm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--bm-s-4) var(--bm-s-9);
  background: var(--bm-glass);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--bm-hairline);
  position: sticky; top: 0; z-index: var(--bm-z-sticky);
  min-height: 56px;
}
.bm-header__right { display: flex; align-items: center; gap: var(--bm-s-5); }
.bm-header .bm-btn--small { min-height: var(--bm-touch-min); padding: 0 var(--bm-s-6); }

/* SIDEBAR — iPadOS split-view stile */
.bm-sidebar { display: none; }

.bm-sidebar__brand {
  padding: var(--bm-s-3) var(--bm-s-6) var(--bm-s-9);
  display: flex; align-items: center; gap: var(--bm-s-4);
}
.bm-sidebar__brand-name {
  font-family: var(--bm-font-display);
  font-size: var(--bm-fs-15);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-snug);
  color: var(--bm-ink);
  white-space: nowrap;
}
.bm-sidebar__nav {
  list-style: none; margin: 0;
  padding: 0 var(--bm-s-5);
  display: flex; flex-direction: column; gap: 2px;
}
.bm-sidebar__item {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0 var(--bm-s-4);
  gap: var(--bm-s-4);
  color: var(--bm-ink-2);
  text-decoration: none;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-14);
  font-weight: var(--bm-w-medium);
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--bm-r-5);
  background: transparent;
  transition: background var(--bm-dur-1) var(--bm-ease-out),
              color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-sidebar__item:hover { background: var(--bm-surface-tint); color: var(--bm-ink); }
.bm-sidebar__item--active {
  color: var(--bm-accent);
  font-weight: var(--bm-w-semi);
  background: var(--bm-accent-soft);
  border-color: transparent;
}
.bm-sidebar__item--active:hover { background: var(--bm-accent-soft); }
.bm-sidebar__item-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bm-ink-3);
  flex-shrink: 0;
}
.bm-sidebar__item-icon svg { width: 22px; height: 22px; }
.bm-sidebar__item--active .bm-sidebar__item-icon { color: var(--bm-accent); }

.bm-sidebar__group-label {
  padding: var(--bm-s-7) var(--bm-s-4) var(--bm-s-2);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-11);
  color: var(--bm-ink-4);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: var(--bm-w-semi);
}

.bm-sidebar__sep {
  height: 1px;
  margin: var(--bm-s-3) var(--bm-s-4);
  background: var(--bm-hairline);
}

.bm-sidebar__subnav {
  list-style: none; margin: 0;
  padding: var(--bm-s-1) 0 var(--bm-s-2) var(--bm-s-9);
  display: flex; flex-direction: column; gap: 1px;
}
.bm-sidebar__subitem {
  display: flex; align-items: center;
  min-height: 36px;
  padding: 0 var(--bm-s-4);
  color: var(--bm-ink-3);
  text-decoration: none;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-13);
  font-weight: var(--bm-w-medium);
  letter-spacing: 0;
  border-radius: var(--bm-r-4);
  background: transparent;
  transition: background var(--bm-dur-1) var(--bm-ease-out),
              color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-sidebar__subitem:hover { background: var(--bm-surface-tint); color: var(--bm-ink-2); }
.bm-sidebar__subitem--active { color: var(--bm-accent); font-weight: var(--bm-w-semi); background: var(--bm-accent-soft); }

.bm-sidebar__footer {
  margin-top: auto;
  padding: var(--bm-s-5) var(--bm-s-5) var(--bm-s-5);
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-12);
  color: var(--bm-ink-4);
  border-top: 1px solid var(--bm-hairline);
  line-height: var(--bm-lh-snug);
}
.bm-sidebar__account {
  padding: var(--bm-s-2);
  border-radius: var(--bm-r-5);
  background: var(--bm-surface-tint);
}
.bm-sidebar__profile {
  display: flex; align-items: center; gap: var(--bm-s-3);
  min-height: 44px;
  padding: 0 var(--bm-s-3);
  color: var(--bm-ink-2);
  text-decoration: none;
  border-radius: var(--bm-r-4);
  transition: background var(--bm-dur-1) var(--bm-ease-out);
}
.bm-sidebar__profile:hover,
.bm-sidebar__profile--active { background: var(--bm-surface); color: var(--bm-ink); }
.bm-sidebar__profile-mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bm-accent-soft);
  color: var(--bm-accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bm-sidebar__profile-mark svg { width: 18px; height: 18px; }
.bm-sidebar__profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bm-sidebar__profile-copy strong {
  color: var(--bm-ink); font-size: var(--bm-fs-13); font-weight: var(--bm-w-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bm-sidebar__profile-copy span {
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-11); color: var(--bm-ink-3);
  letter-spacing: 0; text-transform: capitalize; font-weight: var(--bm-w-medium);
}
.bm-sidebar__logout-form { margin: var(--bm-s-1) 0 0; }
.bm-sidebar__logout {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; min-height: 38px;
  padding: 0 var(--bm-s-3);
  gap: var(--bm-s-3);
  border: 0; border-radius: var(--bm-r-4);
  background: transparent; color: var(--bm-ink-3);
  font-family: var(--bm-font-sans); font-size: var(--bm-fs-12); font-weight: var(--bm-w-medium);
  letter-spacing: 0; cursor: pointer;
  transition: background var(--bm-dur-1) var(--bm-ease-out), color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-sidebar__logout:hover { background: var(--bm-surface); color: var(--bm-ink); }
.bm-sidebar__logout i { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bm-sidebar__logout i[data-feather] { width: 18px; height: 18px; }

/* MAIN */
.bm-main {
  padding: 0;
  min-height: 100vh;
  background: var(--bm-bg);
}
.bm-main--padded { padding: var(--bm-s-7); }
@media (min-width: 1024px) {
  .bm-main--padded { padding: var(--bm-s-9); }
}

/* TABBAR — mobile floating glass */
.bm-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bm-glass-strong);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--bm-hairline);
  padding-top: var(--bm-s-2);
  padding-bottom: calc(var(--bm-s-3) + env(safe-area-inset-bottom, 0px));
  font-family: var(--bm-font-sans);
  z-index: var(--bm-z-sticky);
}
.bm-tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: var(--bm-s-3) 0;
  min-height: 56px;
  text-decoration: none;
  color: var(--bm-ink-3);
  transition: color var(--bm-dur-1) var(--bm-ease-out);
}
.bm-tabbar__item-icon,
.bm-tabbar__icon { font-size: 1.4rem; line-height: 1; }
.bm-tabbar__item-icon svg,
.bm-tabbar__icon svg { width: 24px; height: 24px; }
.bm-tabbar__item-label,
.bm-tabbar__label {
  font-size: var(--bm-fs-11);
  font-weight: var(--bm-w-semi);
  letter-spacing: 0;
}
.bm-tabbar__item--active { color: var(--bm-accent); }
.bm-tabbar__item--active .bm-tabbar__item-icon,
.bm-tabbar__item--active .bm-tabbar__icon { color: var(--bm-accent); }
.bm-tabbar__item--cta .bm-tabbar__icon {
  width: 40px; height: 40px;
  background: var(--bm-accent); color: var(--bm-ink-on-accent);
  border-radius: var(--bm-r-5);
  display: flex; align-items: center; justify-content: center;
}

body.has-tabbar { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
body.has-tabbar .bm-main { min-height: calc(100vh - 56px); padding-bottom: var(--bm-s-8); }

/* RESPONSIVE UTILITIES */
.bm-only-mobile    { display: block !important; }
.bm-only-tablet-up { display: none !important; }
@media (min-width: 768px) {
  .bm-only-mobile    { display: none !important; }
  .bm-only-tablet-up { display: block !important; }
}

/* SHELL APP — sidebar + main grid >=1024px (landscape iPad / desktop).
   Su iPad portrait (768-1023) la sidebar si ritira a favore di tabbar bottom,
   liberando spazio per il main — pattern iPadOS Mail/Settings. */
@media (min-width: 1024px) {
  body.bm-shell-app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 0;
    background: var(--bm-bg);
  }
  .bm-shell-app .bm-sidebar {
    display: flex; flex-direction: column;
    height: 100vh;
    background: var(--bm-sidebar-bg);
    border-right: 1px solid rgba(255,255,255,.06);
    padding: var(--bm-s-7) 0;
    overflow-y: auto;
  }
  .bm-shell-app .bm-tabbar { display: none; }
  .bm-shell-app .bm-shell-main {
    height: 100vh;
    overflow: hidden;
    min-height: 0;
    background: var(--bm-bg);
    display: flex;
    flex-direction: column;
  }
  .bm-shell-app .bm-main {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  .bm-shell-app .bm-header { position: sticky; top: 0; justify-content: flex-end; }
}

/* TOPBAR — barra titolo sticky bianca nel content area */
.bm-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  min-height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}
.bm-topbar__left { display: flex; flex-direction: column; min-width: 0; }
.bm-topbar__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1c1c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-topbar__sub {
  font-size: 10px;
  color: #aeaeb2;
  margin-top: 1px;
  white-space: nowrap;
}
.bm-topbar__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* STEPS — subbar wizard sotto la topbar */
.bm-steps {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 36px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.bm-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  font-size: 11px;
  color: #aeaeb2;
  font-weight: 500;
}
.bm-step--active { color: #1c1c1e; font-weight: 600; }
.bm-step--done   { color: #34c759; }
.bm-step__num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.07);
  color: #8e8e93;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}
.bm-step--active .bm-step__num { background: #e8601a; color: #fff; }
.bm-step--done   .bm-step__num { background: #34c759; color: #fff; }
.bm-step-sep { width: 16px; height: 1px; background: rgba(0,0,0,.1); margin-right: 10px; }

/* SIDEBAR DARK OVERRIDES — applicato solo su >=1024px (sidebar visibile) */
@media (min-width: 1024px) {
  .bm-shell-app .bm-sidebar .bm-sidebar__brand-name     { color: rgba(255,255,255,.9); }
  .bm-shell-app .bm-sidebar .bm-logo-badge              { background: var(--bm-accent); }
  .bm-shell-app .bm-sidebar .bm-sidebar__item           { color: rgba(255,255,255,.45); }
  .bm-shell-app .bm-sidebar .bm-sidebar__item:hover     { background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); }
  .bm-shell-app .bm-sidebar .bm-sidebar__item--active   { background: rgba(255,255,255,.09); color: rgba(255,255,255,.92); }
  .bm-shell-app .bm-sidebar .bm-sidebar__item--active:hover { background: rgba(255,255,255,.12); }
  .bm-shell-app .bm-sidebar .bm-sidebar__item-icon      { color: rgba(255,255,255,.35); stroke: rgba(255,255,255,.35); }
  .bm-shell-app .bm-sidebar .bm-sidebar__item--active .bm-sidebar__item-icon { color: #e8601a; stroke: #e8601a; }
  .bm-shell-app .bm-sidebar .bm-sidebar__group-label    { color: rgba(255,255,255,.22); }
  .bm-shell-app .bm-sidebar .bm-sidebar__sep            { background: rgba(255,255,255,.08); }
  .bm-shell-app .bm-sidebar .bm-sidebar__subitem        { color: rgba(255,255,255,.4); }
  .bm-shell-app .bm-sidebar .bm-sidebar__subitem:hover  { background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); }
  .bm-shell-app .bm-sidebar .bm-sidebar__subitem--active { background: rgba(255,255,255,.09); color: rgba(255,255,255,.85); }
  .bm-shell-app .bm-sidebar .bm-sidebar__footer         { border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
  .bm-shell-app .bm-sidebar .bm-sidebar__account        { background: rgba(255,255,255,.06); }
  .bm-shell-app .bm-sidebar .bm-sidebar__profile        { color: rgba(255,255,255,.55); }
  .bm-shell-app .bm-sidebar .bm-sidebar__profile:hover,
  .bm-shell-app .bm-sidebar .bm-sidebar__profile--active { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
  .bm-shell-app .bm-sidebar .bm-sidebar__profile-mark   { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
  .bm-shell-app .bm-sidebar .bm-sidebar__profile-copy strong { color: rgba(255,255,255,.85); }
  .bm-shell-app .bm-sidebar .bm-sidebar__profile-copy span   { color: rgba(255,255,255,.4); }
  .bm-shell-app .bm-sidebar .bm-sidebar__logout         { color: rgba(255,255,255,.4); }
  .bm-shell-app .bm-sidebar .bm-sidebar__logout:hover   { background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); }
}

/* SHELL plain */
.bm-shell-plain { background: var(--bm-bg); }

/* SHELL error — pagine 403/404/500/419 premium iPadOS */
.bm-shell-error { background: var(--bm-bg); min-height: 100vh; }
.bm-error {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--bm-s-9);
}
.bm-error__inner {
  max-width: 520px;
  width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--bm-s-5);
}
.bm-error__code {
  font-family: var(--bm-font-display);
  font-size: clamp(80px, 12vw, 140px);
  font-weight: var(--bm-w-heavy);
  letter-spacing: var(--bm-tr-display);
  color: var(--bm-ink);
  line-height: 1;
  margin-bottom: var(--bm-s-3);
  background: linear-gradient(180deg, var(--bm-ink), var(--bm-ink-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bm-error__title {
  font-family: var(--bm-font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--bm-w-bold);
  letter-spacing: var(--bm-tr-tight);
  color: var(--bm-ink);
  line-height: 1.1;
  margin: 0;
}
.bm-error__text {
  font-size: var(--bm-fs-16);
  line-height: var(--bm-lh-base);
  color: var(--bm-ink-3);
  margin: 0;
  max-width: 440px;
}
.bm-error .bm-btn { margin-top: var(--bm-s-5); }

/* SHELL auth */
.bm-auth {
  min-height: 100vh;
  background: var(--bm-bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--bm-s-9);
}
.bm-auth__inner {
  width: 100%; max-width: 440px; margin: 0 auto;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  padding: var(--bm-s-9);
}
.bm-auth__aside { display: none; }
@media (min-width: 1024px) {
  .bm-auth {
    display: grid; grid-template-columns: 1fr 1fr; padding: 0; min-height: 100vh;
  }
  .bm-auth__aside {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--bm-s-16);
    background: var(--bm-surface-tint);
    border-right: 1px solid var(--bm-hairline);
  }
  .bm-auth__main {
    display: flex; align-items: center; justify-content: center;
    padding: var(--bm-s-16);
    background: var(--bm-bg);
  }
  .bm-auth__inner { max-width: 400px; margin: 0; }
}

/* ============================================================================
   35. ALLINEAMENTI GLOBALI APP — inline-style legacy reset
   ============================================================================ */
/* Le view ereditano padding/background da contenitori. Normalizziamo. */
.bm-main > section.bm-only-tablet-up:not(.bm-table-panel),
.bm-main > section.bm-orders-table,
.bm-main > section[style*="padding:0 var(--sp-6)"],
.bm-main > section[style*="padding:var(--sp-3) var(--sp-6)"],
.bm-main > section[style*="padding:var(--sp-4) var(--sp-6)"],
.bm-main > section[style*="padding:var(--sp-5) var(--sp-6)"] {
  padding-left: var(--bm-s-9) !important;
  padding-right: var(--bm-s-9) !important;
}
.bm-main > section[style*="background:var(--color-paper)"],
.bm-main > section[style*="background:var(--color-card)"] {
  background: transparent !important;
  border-bottom: 0 !important;
}
.bm-main > section > .bm-section-header {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-8);
  box-shadow: var(--bm-shadow-1);
}
.bm-box .bm-caption + div[style*="font-size:32px"],
.bm-box .bm-caption + div[style*="font-size:28px"] {
  font-family: var(--bm-font-display) !important;
  font-size: var(--bm-fs-28) !important;
  font-weight: var(--bm-w-bold) !important;
  letter-spacing: var(--bm-tr-tight) !important;
}

/* ============================================================================
   36. TOUCH MODE — adjustments per iPad / smartphone showroom
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  body { background: var(--bm-bg); }

  .bm-page-head { padding: var(--bm-s-7) var(--bm-s-9) var(--bm-s-5); gap: var(--bm-s-5); }
  .bm-page-title { font-size: clamp(24px, 2.8vw, 28px); line-height: 1.08; letter-spacing: var(--bm-tr-tight); }
  .bm-section-header { padding: var(--bm-s-6) var(--bm-s-9); gap: var(--bm-s-4); }
  .bm-section-header__title { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.1; letter-spacing: var(--bm-tr-snug); }
  .bm-section-header__back { min-height: var(--bm-touch-min); padding: var(--bm-s-2) var(--bm-s-5) var(--bm-s-2) 0; font-size: var(--bm-fs-13); }

  .bm-page-sub, .bm-section-header__sub { font-size: var(--bm-fs-13); }

  .bm-field { gap: var(--bm-s-3); }
  .bm-field__label, .bm-t-label { font-size: var(--bm-fs-15); font-weight: var(--bm-w-semi); color: var(--bm-ink-2); }
  .bm-field__hint, .bm-t-hint { font-size: var(--bm-fs-13); color: var(--bm-ink-3); }

  .bm-btn,
  .bm-pill,
  input.bm-field__control,
  select.bm-field__control,
  textarea.bm-field__control {
    font-size: var(--bm-fs-15);
  }
  .bm-btn { min-height: var(--bm-control-md); height: var(--bm-control-md); padding: 0 var(--bm-s-8); border-radius: var(--bm-r-5); }
  .bm-btn--small,
  .bm-btn--sm { min-height: var(--bm-control-sm); height: var(--bm-control-sm); padding: 0 var(--bm-s-6); font-size: var(--bm-fs-14); }
  .bm-btn--lg { min-height: var(--bm-control-lg); height: var(--bm-control-lg); padding: 0 var(--bm-s-9); font-size: var(--bm-fs-16); border-radius: var(--bm-r-6); }
  .bm-btn--icon { width: var(--bm-control-md); min-width: var(--bm-control-md); height: var(--bm-control-md); padding: 0; }

  .bm-pill { min-height: 36px; height: 36px; padding: 0 var(--bm-s-6); font-size: var(--bm-fs-13); }

  input.bm-field__control,
  select.bm-field__control,
  textarea.bm-field__control {
    min-height: 56px;
    padding-left: var(--bm-s-6);
    padding-right: var(--bm-s-6);
    border-radius: var(--bm-r-6);
    font-size: var(--bm-fs-16);
  }
  textarea.bm-field__control { padding-top: var(--bm-s-5); padding-bottom: var(--bm-s-5); }

  .bm-box, .bm-card,
  .bm-overview-card, .bm-side-card,
  .bm-kpi-card, .bm-table, .bm-table-panel,
  .bm-order-card, .bm-auth__inner { border-radius: var(--bm-r-8); }

  .bm-box, .bm-kpi-card { padding: var(--bm-s-6) var(--bm-s-7); }

  .bm-table thead th { font-size: var(--bm-fs-11); padding: var(--bm-s-3) var(--bm-s-5); }
  .bm-table tbody td { font-size: var(--bm-fs-13); padding-top: var(--bm-s-4); padding-bottom: var(--bm-s-4); }

  .bm-status, .bm-status-badge { min-height: 26px; padding: 0 var(--bm-s-5); font-size: var(--bm-fs-12); }
  .bm-status::before, .bm-status-badge::before { width: 8px; height: 8px; }

  .bm-sidebar__item { min-height: 44px; font-size: var(--bm-fs-14); padding: 0 var(--bm-s-5); }
  .bm-sidebar__item-icon svg { width: 20px; height: 20px; }
  .bm-sidebar__subitem { min-height: 36px; font-size: var(--bm-fs-13); padding: 0 var(--bm-s-5); }
  .bm-sidebar__profile, .bm-sidebar__logout { min-height: 44px; font-size: var(--bm-fs-13); }
  .bm-sidebar__profile-copy strong { font-size: var(--bm-fs-13); }

  .bm-overview-kpis { gap: var(--bm-s-6); padding: var(--bm-s-7); }
  .bm-overview-kpi__value { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.05; }
  .bm-kpi-card__value { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.05; }

  .bm-health__value { font-size: clamp(28px, 3.2vw, 36px); }

  .bm-order-card { padding: var(--bm-s-8); gap: var(--bm-s-6); }
  .bm-order-card__brand { font-size: var(--bm-fs-18); }
  .bm-order-card__meta { font-size: var(--bm-fs-13); }

  .bm-orders-table__num-main,
  .bm-orders-table__supplier,
  .bm-orders-table__total { font-size: var(--bm-fs-13); }
  .bm-orders-table__num-year,
  .bm-orders-table__meta,
  .bm-orders-table__delivery,
  .bm-orders-table__budget { font-size: var(--bm-fs-12); }

  .bm-step-dots__bullet { width: 28px; height: 28px; font-size: var(--bm-fs-13); }
  .bm-step-dots__label { font-size: var(--bm-fs-13); }

  .bm-hero-stat { padding: var(--bm-s-7) var(--bm-s-8); border-radius: var(--bm-r-8); }
  .bm-hero-stat__value { font-size: clamp(24px, 2.8vw, 32px); }
  .bm-hero-stat__label { font-size: var(--bm-fs-12); }

  .bm-stepper--ipad .bm-stepper__btn { width: var(--bm-control-lg); height: var(--bm-control-lg); font-size: var(--bm-fs-22); }
  .bm-stepper--ipad .bm-stepper__input { width: 76px; height: var(--bm-control-lg); font-size: var(--bm-fs-18); }

  .bm-sizes-table td { padding: var(--bm-s-6) var(--bm-s-5); }
  .bm-sizes-table__size { font-size: var(--bm-fs-18); }
  .bm-sizes-table__price-input { width: 124px; height: var(--bm-control-lg); font-size: var(--bm-fs-16); border-radius: var(--bm-r-6); }
  .bm-sizes-table__total { font-size: var(--bm-fs-17); }

  .bm-photo, .bm-photo-tile { border-radius: var(--bm-r-7); font-size: var(--bm-fs-13); }
  .bm-photo, .bm-photo-tile--upload { min-height: 132px; }
  .bm-photo-tile__del,
  .bm-photo-tile__del button,
  [data-bm="attr-del"] {
    width: 44px !important; min-width: 44px !important;
    height: 44px !important; min-height: 44px !important;
    font-size: var(--bm-fs-17) !important;
    border-radius: var(--bm-r-5) !important;
  }

  .bm-attr-add { min-height: var(--bm-control-lg); height: var(--bm-control-lg); padding: 0 var(--bm-s-8); font-size: var(--bm-fs-15); border-radius: var(--bm-r-6); }

  .bm-action-bar { gap: var(--bm-s-7); padding: var(--bm-s-5) var(--bm-s-9) calc(var(--bm-s-5) + env(safe-area-inset-bottom, 0px)); }
  .bm-action-bar__totals-value { font-size: clamp(22px, 2.8vw, 28px); }
}

/* SMALL TABLET / PHONE LAYOUT — sotto 900px restituiamo lo scroll vertical */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  body.bm-shell-app:has(.bm-orders-cards),
  body.bm-shell-app:has(#form-testata),
  body.bm-shell-app:has(form[data-bm="riga-form"]) {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: auto;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  body.bm-shell-app:has(.bm-orders-cards) .bm-sidebar,
  body.bm-shell-app:has(#form-testata) .bm-sidebar,
  body.bm-shell-app:has(form[data-bm="riga-form"]) .bm-sidebar { display: none; }
  body.bm-shell-app:has(.bm-orders-cards) .bm-shell-main,
  body.bm-shell-app:has(#form-testata) .bm-shell-main,
  body.bm-shell-app:has(form[data-bm="riga-form"]) .bm-shell-main {
    height: auto; min-height: 100vh; overflow: visible;
    background: var(--bm-bg);
  }
  body.bm-shell-app:has(.bm-orders-cards) .bm-tabbar,
  body.bm-shell-app:has(#form-testata) .bm-tabbar,
  body.bm-shell-app:has(form[data-bm="riga-form"]) .bm-tabbar { display: grid; }

  .bm-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bm-tabbar__item { min-height: 60px; }

  .bm-main:has(.bm-orders-cards) .bm-orders-cards,
  .bm-main:has(#form-testata) .bm-only-mobile,
  .bm-main:has(form[data-bm="riga-form"]) .bm-only-mobile { display: flex !important; flex-direction: column; }
  .bm-main:has(.bm-orders-cards) .bm-orders-table,
  .bm-main:has(#form-testata) .bm-only-tablet-up,
  .bm-main:has(form[data-bm="riga-form"]) .bm-only-tablet-up { display: none !important; }

  .bm-main { padding-bottom: var(--bm-s-16); }

  .bm-page-head, .bm-dashboard, .bm-filterbar,
  .bm-kpi-grid, .bm-compare-grid, .bm-panel-grid {
    padding-left: clamp(20px, 5vw, 36px);
    padding-right: clamp(20px, 5vw, 36px);
  }
  .bm-page-head { align-items: flex-start; flex-direction: column; }
  .bm-page-head .bm-btn { align-self: flex-start; }
  .bm-dashboard-grid,
  .bm-overview-kpis,
  .bm-compare-grid,
  .bm-panel-grid { grid-template-columns: 1fr; }
  .bm-overview-card__head, .bm-side-card__head { min-height: 68px; padding: var(--bm-s-7) var(--bm-s-8); }
  .bm-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--bm-s-8); }
  .bm-overview-chart, .bm-side-card__body { padding: 0 var(--bm-s-8) var(--bm-s-8); }

  .bm-orders-cards {
    display: flex !important;
    padding: var(--bm-s-7) clamp(20px, 5vw, 36px) !important;
    gap: var(--bm-s-5) !important;
  }

  .bm-section-header,
  .bm-wizard-steps,
  .bm-main > section.bm-only-mobile,
  .bm-main > section[style*="padding:0 var(--sp-6)"],
  .bm-main > section[style*="padding:var(--sp-3) var(--sp-6)"],
  .bm-main > section[style*="padding:var(--sp-4) var(--sp-6)"],
  .bm-main > section[style*="padding:var(--sp-5) var(--sp-6)"] {
    padding-left: clamp(20px, 5vw, 36px) !important;
    padding-right: clamp(20px, 5vw, 36px) !important;
  }
  .bm-main > section[style*="background:var(--color-paper)"],
  .bm-main > section[style*="background:var(--color-card)"],
  form[data-bm="riga-form"] > .bm-only-mobile { background: transparent !important; }

  #form-testata,
  #form-testata-mobile,
  form[data-bm="riga-form"] > .bm-only-mobile {
    padding: var(--bm-s-9) clamp(20px, 5vw, 36px) calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    gap: var(--bm-s-7) !important;
  }
  #form-testata,
  .bm-main:has(#form-testata) #form-testata-mobile { display: flex !important; flex-direction: column !important; }
  #form-testata-mobile { background: transparent !important; }
  #form-testata-mobile .bm-field { gap: var(--bm-s-3); }
  #form-testata-mobile > div { gap: var(--bm-s-5) !important; }
  #form-testata .bm-box,
  form[data-bm="riga-form"] > .bm-only-mobile > .bm-box { padding: var(--bm-s-8); }

  form[data-bm="riga-form"] > .bm-only-mobile > .bm-box:nth-of-type(3) { order: 5; }
  form[data-bm="riga-form"] > .bm-only-mobile > .bm-box:nth-of-type(4) { order: 3; }
  form[data-bm="riga-form"] > .bm-only-mobile > .bm-box:nth-of-type(5) { order: 4; }
  form[data-bm="riga-form"] > .bm-only-mobile > .bm-box:nth-of-type(6) { order: 6; }
  form[data-bm="riga-form"] > .bm-only-mobile > .bm-box:nth-of-type(7) { order: 7; }

  form[data-bm="riga-form"] [data-bm="attr-row"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px !important;
    gap: var(--bm-s-5) !important;
  }
  form[data-bm="riga-form"] [data-bm="size-row"] {
    grid-template-columns: 80px minmax(0, 1.2fr) minmax(124px, 0.8fr) minmax(96px, auto) !important;
    gap: var(--bm-s-5) !important;
    padding: var(--bm-s-6) !important;
    border-radius: var(--bm-r-6) !important;
    font-size: var(--bm-fs-15) !important;
  }

  .bm-hero-stat--sticky {
    top: 0; z-index: 35;
    margin-left: 0; margin-right: 0;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .bm-action-bar {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    min-height: 84px;
    padding-left: clamp(20px, 5vw, 36px);
    padding-right: clamp(20px, 5vw, 36px);
  }
}

/* PHONE — sotto 560px (touch) */
@media (hover: none) and (pointer: coarse) and (max-width: 560px) {
  html, body { font-size: 16px; }
  .bm-page-title,
  .bm-section-header__title { font-size: clamp(24px, 7.5vw, 30px); }

  /* form layouts */
  .bm-overview-kpis { grid-template-columns: 1fr; }
  #form-testata-mobile > div { grid-template-columns: 1fr !important; }
  form[data-bm="riga-form"] [data-bm="attr-row"],
  form[data-bm="riga-form"] [data-bm="size-row"] { grid-template-columns: 1fr !important; }

  /* action bar: stack + safe area */
  .bm-action-bar {
    display: grid; grid-template-columns: 1fr 1fr; min-height: 0;
    margin: var(--bm-s-7) var(--bm-s-5) calc(var(--bm-s-4) + env(safe-area-inset-bottom, 0px));
    padding: var(--bm-s-4) var(--bm-s-6) calc(var(--bm-s-4) + env(safe-area-inset-bottom, 0px));
    gap: var(--bm-s-4);
    border-radius: var(--bm-r-7);
  }
  .bm-action-bar__spacer { display: none; }
  .bm-action-bar__totals { grid-column: 1 / -1; grid-row: 1; }
  .bm-action-bar__totals-value { font-size: clamp(20px, 6vw, 24px); }
  .bm-action-bar .bm-btn { width: 100%; }

  /* hero stat: 1 colonna, padding compatto */
  .bm-hero-stat {
    grid-template-columns: 1fr;
    gap: var(--bm-s-4);
    padding: var(--bm-s-6) var(--bm-s-7);
    margin: var(--bm-s-5) var(--bm-s-5) var(--bm-s-5);
    border-radius: var(--bm-r-7);
  }
  .bm-hero-stat__group--right { text-align: left; }
  .bm-hero-stat__value { font-size: clamp(22px, 6.5vw, 28px); }
  .bm-hero-stat--sticky { margin-left: 0; margin-right: 0; border-radius: 0; border-left: 0; border-right: 0; }

  /* stepper qty: 44 invece di 52 */
  .bm-stepper--ipad .bm-stepper__btn { width: 44px; height: 44px; font-size: var(--bm-fs-18); }
  .bm-stepper--ipad .bm-stepper__input { width: 56px; height: 44px; font-size: var(--bm-fs-16); }

  /* sizes table: scroll orizzontale + input compatto */
  .bm-sizes-table-wrap,
  .bm-card:has(> .bm-sizes-table),
  .bm-box:has(> .bm-sizes-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bm-sizes-table { min-width: 480px; }
  .bm-sizes-table td { padding: var(--bm-s-5) var(--bm-s-4); }
  .bm-sizes-table__size { font-size: var(--bm-fs-16); }
  .bm-sizes-table__price-input { width: 92px; height: 44px; font-size: var(--bm-fs-15); border-radius: var(--bm-r-5); }
  .bm-sizes-table__total { font-size: var(--bm-fs-15); }

  /* attr add: 44 */
  .bm-attr-add { min-height: 44px; height: 44px; padding: 0 var(--bm-s-6); font-size: var(--bm-fs-14); }

  /* btn lg: 44 + full-width fuori action-bar quando standalone */
  .bm-btn--lg { min-height: 48px; height: 48px; padding: 0 var(--bm-s-7); font-size: var(--bm-fs-15); }
  .bm-btn--lg.bm-btn--full,
  .bm-action-bar .bm-btn--lg { width: 100%; }

  /* tabelle admin: overflow-x scroll su container parent (no markup changes) */
  .bm-card:has(> .bm-table),
  .bm-card:has(> .bm-table-panel),
  .bm-box:has(> .bm-table),
  .bm-table-panel:has(> .bm-table),
  .bm-orders-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bm-card > .bm-table,
  .bm-box > .bm-table,
  .bm-table-panel > .bm-table { min-width: 640px; }

  /* form admin: collassa griglie 2col → 1col */
  .bm-form-grid,
  .bm-form-section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* typeahead dropdown: max-height per tastiera aperta */
  .bm-typeahead-results,
  [data-bm="supplier-results"] {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* keyboard open: sticky off (handler in app.js) */
  .bm-keyboard-open .bm-action-bar,
  .bm-keyboard-open .bm-hero-stat--sticky { position: static !important; box-shadow: none; }
}

/* PHONE — fallback non-touch (es. dev tools) */
@media (max-width: 560px) {
  .bm-card:has(> .bm-table),
  .bm-box:has(> .bm-table),
  .bm-table-panel:has(> .bm-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}