/* ============================================================================
   MaatOmni Store Hub - Sistema grafico v2 "Banco di regia"
   ----------------------------------------------------------------------------
   Contratto in DESIGN.md. Caricato DOPO app.css / redesign_v1.css: ridefinisce i
   token --app-* (letti anche da chart_theme_v1.js) e le variabili Bootstrap, poi
   il guscio comune (sidebar, header, navbar mobile) e i componenti condivisi.
   Nessun markup, id o data-* viene richiesto oltre a quelli gia' nei template.
   ============================================================================ */

/* ---- 0. Font (self-hosted, OFL) ------------------------------------------ */
@font-face{
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2");
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
}

/* ---- 1. Token ------------------------------------------------------------- */
/* Le chiavi tema storiche (classic, mint, sand, lavender) sono tutte "chiaro":
   il selettore html[data-app-theme] batte le regole per-tema di app.css. */
html,
html[data-app-theme]{
  color-scheme: light;

  /* Piani: menu Notte, banda di regia Grafite, fondo Acciaio, pannelli bianchi */
  --app-bg: #e6e9ee;
  --app-surface: #ffffff;
  --app-surface-soft: #f3f5f8;
  --app-border: #d3d9e1;
  --app-border-strong: #b7c0cc;
  --app-text: #121821;
  --app-text-muted: #3e4756;
  --app-text-subtle: #5b6575;
  --app-heading: #121821;

  /* Inchiostro: filetti dei campi obbligatori, avatar, pulsante AI */
  --app-ink: #121821;
  --app-ink-hover: #2a323d;
  --app-ink-contrast: #ffffff;

  /* Segnale: il blu del logo, azione principale, selezione, fuoco */
  --app-accent: #1d3ae8;
  --app-accent-strong: #1529b8;
  --app-accent-soft: #eceffd;
  --app-accent-bright: #6d82ff;
  --app-accent-solid: #1d3ae8;        /* fondo pieno con testo bianco: 7,4:1 */
  --app-accent-solid-hover: #1529b8;
  --app-link: #1d3ae8;
  --app-link-hover: #1529b8;

  /* Stati: pieni con testo bianco (badge); -text per variazioni e avvisi scritti; -soft solo per sfondi di riga */
  --app-success: #167a43;  --app-success-soft: #e8f3ec;  --app-success-text: #167a43;
  --app-warning: #b45309;  --app-warning-soft: #fbefe4;  --app-warning-text: #9a4708;
  --app-danger:  #c0262d;  --app-danger-soft:  #fbe9ea;  --app-danger-text:  #c0262d;
  --app-info:    #1d3ae8;  --app-info-soft:    #eceffd;  --app-info-text:    #1529b8;
  --app-wait:    #465163;

  --app-sidebar: #11151b;
  --app-sidebar-soft: #1b2129;
  --app-sidebar-text: #c9cfd8;
  --app-sidebar-muted: #8d96a3;
  --app-sidebar-border: rgba(255,255,255,.08);

  /* Banda di regia: testata del modulo e titolo della pagina */
  --app-regia: #1b2129;
  --app-regia-line: rgba(255,255,255,.10);
  --app-regia-text: #f2f4f7;
  --app-regia-muted: #b4bcc8;

  --app-nav-bg: #11151b;
  --app-nav-border: #11151b;
  --app-header-top: #11151b;
  --app-card-head-top: #ffffff;
  --app-card-head-bottom: #ffffff;
  --app-body-top-glow: transparent;

  /* Elevazione: e1 pannelli, e2 banda, barre fisse, menu e finestre */
  --app-shadow-sm: 0 1px 0 rgba(17,21,27,.05), 0 1px 3px rgba(17,21,27,.12);
  --app-shadow-md: 0 2px 4px rgba(17,21,27,.08), 0 10px 24px -8px rgba(17,21,27,.28);
  --app-shadow-lg: 0 16px 40px rgba(17,21,27,.24);

  --app-radius-sm: 4px;
  --app-radius-md: 6px;
  --app-radius-lg: 6px;

  --app-focus-ring: 0 0 0 3px rgba(29, 58, 232, .28);
  --app-font-ui: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --fs-xs: 11px;  --fs-sm: 12.5px;  --fs-md: 14px;  --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 28px;

  /* Serie dei grafici, ordine fisso, validate per daltonismo: Segnale, Ocra, Petrolio, Prugna, Lampone, Oliva */
  --chart-1: #1d3ae8; --chart-2: #d97a16; --chart-3: #00917c;
  --chart-4: #7b52c4; --chart-5: #b02d55; --chart-6: #7f9c1b;

  /* Bootstrap: rimappa sui token cosi' le utility seguono il sistema */
  --bs-body-font-family: var(--app-font-ui);
  --bs-body-font-size: var(--fs-md);
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-bg);
  --bs-secondary-color: var(--app-text-muted);
  --bs-tertiary-color: var(--app-text-subtle);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius-sm);
  --bs-border-radius-sm: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius-md);
  --bs-border-radius-xl: var(--app-radius-md);
  --bs-border-radius-xxl: var(--app-radius-md);
  --bs-primary: #1d3ae8;   --bs-primary-rgb: 29, 58, 232;
  --bs-success: #167a43;   --bs-success-rgb: 22, 122, 67;
  --bs-danger:  #c0262d;   --bs-danger-rgb: 192, 38, 45;
  --bs-warning: #b45309;   --bs-warning-rgb: 180, 83, 9;
  --bs-info:    #1d3ae8;   --bs-info-rgb: 29, 58, 232;
  --bs-link-color: var(--app-link);          --bs-link-color-rgb: 29, 58, 232;
  --bs-link-hover-color: var(--app-link-hover);
  --bs-link-hover-color-rgb: 21, 41, 184;
  --bs-heading-color: var(--app-heading);
}

html[data-app-theme="midnight"]{
  color-scheme: dark;

  --app-bg: #0d1015;
  --app-surface: #1a1f27;
  --app-surface-soft: #222833;
  --app-border: #2c3440;
  --app-border-strong: #3d4757;
  --app-text: #e8ebf0;
  --app-text-muted: #b4bcc8;
  --app-text-subtle: #949eac;
  --app-heading: #f4f6f9;

  --app-ink: #e8ebf0;
  --app-ink-hover: #ffffff;
  --app-ink-contrast: #0d1015;

  --app-accent: #6d82ff;
  --app-accent-strong: #8a9bff;
  --app-accent-soft: rgba(109, 130, 255, .16);
  --app-accent-bright: #8a9bff;
  --app-accent-solid: #3d55f0;        /* nel tema scuro il blu chiaro non regge il bianco: 5,6:1 */
  --app-accent-solid-hover: #5068ff;
  --app-link: #8a9bff;
  --app-link-hover: #a9b5ff;

  /* i blocchi pieni restano quelli del chiaro (bianco sopra almeno 5:1); il testo di stato si schiarisce */
  --app-success: #167a43;  --app-success-soft: rgba(22, 122, 67, .18);  --app-success-text: #5cc98a;
  --app-warning: #b45309;  --app-warning-soft: rgba(180, 83, 9, .18);   --app-warning-text: #f0a25a;
  --app-danger:  #c0262d;  --app-danger-soft:  rgba(192, 38, 45, .18);  --app-danger-text:  #ff8085;
  --app-info:    #6d82ff;  --app-info-soft:    rgba(109, 130, 255, .16); --app-info-text:   #a9b5ff;
  --app-wait:    #4f5b6e;

  --app-sidebar: #080a0e;
  --app-sidebar-soft: #131820;
  --app-sidebar-text: #c9cfd8;
  --app-sidebar-muted: #8d96a3;
  --app-sidebar-border: rgba(255,255,255,.07);

  --app-regia: #131820;
  --app-regia-line: rgba(255,255,255,.08);

  --app-nav-bg: #080a0e;
  --app-nav-border: #080a0e;
  --app-header-top: #080a0e;
  --app-card-head-top: #1a1f27;
  --app-card-head-bottom: #1a1f27;

  --app-shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --app-shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -8px rgba(0,0,0,.7);
  --app-shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
  --app-focus-ring: 0 0 0 3px rgba(109, 130, 255, .36);

  --chart-1: #6d82ff; --chart-2: #cf7c1c; --chart-3: #13a48e;
  --chart-4: #9b7be6; --chart-5: #d9567f; --chart-6: #7f9f26;

  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-bg);
  --bs-primary: #6d82ff;   --bs-primary-rgb: 109, 130, 255;
  --bs-success: #5cc98a;   --bs-success-rgb: 92, 201, 138;
  --bs-danger:  #ff8085;   --bs-danger-rgb: 255, 128, 133;
  --bs-warning: #f0a25a;   --bs-warning-rgb: 240, 162, 90;
  --bs-info:    #6d82ff;   --bs-info-rgb: 109, 130, 255;
  --bs-link-color: var(--app-link);          --bs-link-color-rgb: 138, 155, 255;
  --bs-link-hover-color: var(--app-link-hover);
  --bs-link-hover-color-rgb: 169, 181, 255;
  --bs-heading-color: var(--app-heading);
  --bs-emphasis-color: #f4f6f9;
  --bs-light: #222833; --bs-light-rgb: 34, 40, 51;
}

/* ---- 2. Base ---------------------------------------------------------------- */
html, body{ min-height: 100%; }
body,
body.app-shell{
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font-ui);
  font-size: var(--fs-md);
  line-height: 1.45;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  color: var(--app-heading);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-wrap: balance;
}
h1,.h1{ font-size: 24px; }
h2,.h2{ font-size: var(--fs-xl); }
h3,.h3{ font-size: 18px; }
h4,.h4,h5,.h5{ font-size: var(--fs-lg); }
h6,.h6{ font-size: var(--fs-md); }
.small, small{ font-size: var(--fs-sm); }
.text-muted, .text-body-secondary, .form-text, .small.text-muted{ color: var(--app-text-muted) !important; }
/* Stati scritti (variazioni, avvisi): colore misurato sul fondo di ciascun tema */
.text-success{ color: var(--app-success-text) !important; }
.text-danger{ color: var(--app-danger-text) !important; }
.text-warning{ color: var(--app-warning-text) !important; }
.text-primary, .text-info{ color: var(--app-info-text) !important; }
code, kbd, pre, samp, .font-monospace, .ds-mono{ font-family: var(--app-font-mono); font-size: .92em; }
a{ color: var(--app-link); text-decoration: none; }
a:hover{ color: var(--app-link-hover); text-decoration: underline; text-underline-offset: 2px; }
hr{ border-color: var(--app-border); opacity: 1; }

.table, .table td, .table th, .form-control, .form-select, .badge,
[class*="kpi"], [class*="Kpi"], [class*="totale"], [class*="amount"], .tnum{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Focus visibile ovunque, al posto delle ombre Bootstrap */
:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible{ outline: none; box-shadow: var(--app-focus-ring); }

/* Caricamento pagina: nessun bagliore azzurro residuo */
html.storehub-page-loading body::before{ background: rgba(16, 24, 40, .32); }

/* ---- 3. Guscio desktop (>= 1200px) ------------------------------------------ */
@media (min-width: 1200px){
  body.app-shell{
    padding: 0 0 0 240px;
    height: 100vh;
    overflow: hidden;
  }
  body.app-shell.app-shell--rail-collapsed{ padding-left: 68px; }

  .app-desktop-rail{
    top: 0; left: 0; bottom: 0;
    width: 240px;
    background: var(--app-sidebar);
    border: 0;
    border-right: 1px solid var(--app-sidebar-border);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 12px 16px;
    gap: 4px;
    transition: width .16s ease;
  }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail{ width: 68px; padding-inline: 10px; }

  /* Testa: marchio + comprimi */
  .app-desktop-rail__top{
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; min-height: 40px; padding: 0 2px 8px;
    border-bottom: 1px solid var(--app-sidebar-border);
    margin-bottom: 6px;
  }
  .app-desktop-rail__brand{
    display: inline-flex; align-items: center; gap: 10px; min-width: 0;
    color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em;
    text-decoration: none;
  }
  .app-desktop-rail__brand:hover{ color: #fff; text-decoration: none; }
  .app-desktop-rail__brand img{ width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto; display: block; }
  .app-desktop-rail__brand span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-desktop-rail__toggle{
    width: 30px; height: 30px; border-radius: var(--app-radius-sm);
    border: 0; background: transparent; color: var(--app-sidebar-text);
    box-shadow: none; flex: 0 0 auto;
  }
  .app-desktop-rail__toggle:hover{ background: rgba(255,255,255,.07); color: #fff; }
  .app-desktop-rail__toggle svg{ width: 16px; height: 16px; display: block; }
  .app-desktop-rail__toggle-icon{ display: inline-flex; transition: transform .16s ease; }
  /* Barra compressa: il pulsante resta, sotto l'icona, con la freccia verso destra */
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__top{ flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__brand span{ display: none; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__toggle{ display: inline-flex; align-items: center; justify-content: center; color: #f4f5f7; background: rgba(255,255,255,.08); }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__toggle-icon{ transform: rotate(180deg); } /* stessa icona, freccia verso destra */

  /* Store attivo: pulsante vero, apre la selezione store */
  .app-desktop-rail__store{
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; padding: 8px 10px; margin: 2px 0 8px;
    border: 1px solid var(--app-sidebar-border); border-radius: var(--app-radius-md);
    background: var(--app-sidebar-soft); color: var(--app-sidebar-text);
    text-align: left; cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
  }
  .app-desktop-rail__store:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); color: #fff; }
  .app-desktop-rail__store-kicker{
    color: var(--app-sidebar-muted); font-size: var(--fs-xs); font-weight: 500;
    letter-spacing: 0; text-transform: none;
  }
  .app-desktop-rail__store-value{
    color: #f2f4f7; font-size: 13px; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .app-desktop-rail__store-mini{
    display: none; width: 36px; height: 36px; margin: 0; border-radius: var(--app-radius-sm);
    background: transparent; border: 0; color: var(--app-accent-bright);
  }
  .app-desktop-rail__store-mini svg{ width: 18px; height: 18px; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__store{ padding: 4px; align-items: center; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__store-kicker,
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__store-value{ display: none; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__store-mini{ display: inline-flex; }

  /* Voci */
  .app-desktop-rail__nav{ gap: 1px; padding-top: 0; }
  .app-desktop-rail__group{
    color: var(--app-sidebar-muted); font-size: var(--fs-xs); font-weight: 500;
    padding: 12px 10px 4px; letter-spacing: 0; text-transform: none; white-space: nowrap;
  }
  .app-desktop-rail__group:first-child{ padding-top: 4px; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__group{
    height: 1px; padding: 0; margin: 8px 6px; overflow: hidden; font-size: 0;
    background: var(--app-sidebar-border);
  }
  .app-desktop-rail__link{
    position: relative; min-height: 36px; padding: 0 10px;
    border-radius: var(--app-radius-sm);
    color: var(--app-sidebar-text);
    grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px;
    transition: background-color .12s ease, color .12s ease;
  }
  .app-desktop-rail__link .app-nav__icon{ width: 20px; height: 20px; opacity: .8; }
  .app-desktop-rail__link .app-nav__icon svg{ width: 18px; height: 18px; }
  .app-desktop-rail__link:hover{ background: rgba(255,255,255,.06); color: #fff; transform: none; text-decoration: none; }
  .app-desktop-rail__link:hover .app-nav__icon{ opacity: 1; }
  .app-desktop-rail__link.active{ background: rgba(109,130,255,.14); color: #fff; box-shadow: none; }
  .app-desktop-rail__link.active .app-nav__icon{ opacity: 1; color: var(--app-accent-bright); }
  .app-desktop-rail__link.active::before{
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 2px 2px 0; background: var(--app-accent-bright);
  }
  .app-desktop-rail__label{ font-size: 13.5px; font-weight: 500; opacity: 1; }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__link{
    width: 40px; min-height: 36px; border-radius: var(--app-radius-sm);
    grid-template-columns: 20px; padding: 0;
  }
  body.app-shell.app-shell--rail-collapsed .app-desktop-rail__link.active::before{ left: -10px; }

  /* Header di pagina: banda di regia grafite, sticky, una riga */
  .app-desktop-sectionbar{
    position: sticky; top: 0; z-index: 1002;
    background: var(--app-regia);
    border: 0; border-bottom: 1px solid var(--app-regia-line);
    border-radius: 0; box-shadow: none;
    min-height: 56px; padding: 0 24px; margin: 0;
    display: flex; align-items: stretch; gap: 8px;
  }
  .app-desktop-sectionbar__title{
    align-self: center; margin-right: 16px; color: var(--app-regia-text);
    font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em;
  }
  .app-desktop-sectionbar__scroll{
    align-self: center; width: 28px; height: 28px; border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-regia-line); background: transparent; color: var(--app-regia-muted);
    font-size: 1rem;
  }
  .app-desktop-sectionbar__track{ gap: 2px; align-items: stretch; }
  .app-desktop-sectionbar__link{
    min-height: 56px; padding: 0 10px; border-radius: 0;
    background: transparent; color: var(--app-regia-muted);
    font-size: 13.5px; font-weight: 500;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    transition: color .12s ease, border-color .12s ease;
  }
  .app-desktop-sectionbar__link:hover{ background: transparent; color: #fff; text-decoration: none; }
  .app-desktop-sectionbar__link.active{
    background: transparent; color: #fff; font-weight: 600;
    border-bottom-color: var(--app-accent-bright); box-shadow: none;
  }
  .app-desktop-sectionbar__actions{ align-self: center; gap: 4px; margin-left: 8px; }
  .app-desktop-header__user{
    width: 36px; height: 36px; border-radius: var(--app-radius-sm);
    border: 0; background: transparent; color: var(--app-regia-muted); box-shadow: none;
  }
  .app-desktop-header__user:hover{ background: rgba(255,255,255,.08); color: #fff; }
  .app-desktop-header__user svg{ width: 18px; height: 18px; }

  /* Spazio di lavoro: nessun pannello-nel-pannello */
  .app-workspace-panel{
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0 24px 32px;
  }
  .app-workspace-panel .container{ margin-inline: 0; max-width: 1440px; padding-inline: 0; }

  /* Il titolo della pagina prosegue la banda: stesso fondo, a filo sotto le schede.
     Vale per la prima testata del contenuto (.ds-page-head o .cr-header). */
  .app-workspace-panel > .container > .ds-page-head:first-child,
  .app-workspace-panel > .container > form > .ds-page-head:first-child,
  .app-workspace-panel > .container > .cr-header:first-child{
    margin: -24px -24px 24px; padding: 16px 24px 20px;
    background: var(--app-regia);
    /* a tutta larghezza anche dentro i contenitori stretti o oltre i 1440px: lo sfondo esce ai lati
       senza allargare la pagina (l'outset di border-image non crea scorrimento) */
    border-image: conic-gradient(var(--app-regia) 0 0) fill 0 / / 0 100vmax;
  }
  .app-workspace-panel > .container.py-3 > .ds-page-head:first-child{ margin-top: -16px; }
  .app-workspace-panel > .container > .ds-page-head:first-child .ds-page-head__title,
  .app-workspace-panel > .container > form > .ds-page-head:first-child .ds-page-head__title,
  .app-workspace-panel > .container > .cr-header:first-child .cr-title{ color: var(--app-regia-text); font-size: 22px; }
  .app-workspace-panel > .container > .ds-page-head:first-child :is(.ds-page-head__meta, .form-label, .text-muted, .small),
  .app-workspace-panel > .container > form > .ds-page-head:first-child :is(.ds-page-head__meta, .form-label, .text-muted, .small),
  .app-workspace-panel > .container > .cr-header:first-child :is(.cr-subtitle, .form-label, .text-muted, .small){ color: var(--app-regia-muted) !important; }
  .app-workspace-panel > .container > .ds-page-head:first-child :is(strong, .fw-semibold),
  .app-workspace-panel > .container > form > .ds-page-head:first-child :is(strong, .fw-semibold),
  .app-workspace-panel > .container > .cr-header:first-child :is(strong, .fw-semibold){ color: var(--app-regia-text); }
  /* azioni secondarie sulla banda: filetto chiaro, testo chiaro */
  .app-workspace-panel > .container > .ds-page-head:first-child :is(.btn-outline-secondary, .btn-outline-primary, .btn-secondary, .btn-light, .btn-outline-dark),
  .app-workspace-panel > .container > form > .ds-page-head:first-child :is(.btn-outline-secondary, .btn-outline-primary, .btn-secondary, .btn-light, .btn-outline-dark),
  .app-workspace-panel > .container > .cr-header:first-child :is(.btn-outline-secondary, .btn-outline-primary, .btn-secondary, .btn-light, .btn-outline-dark){
    --bs-btn-bg: transparent; --bs-btn-color: var(--app-regia-text); --bs-btn-border-color: rgba(255,255,255,.28);
    --bs-btn-hover-bg: rgba(255,255,255,.08); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.4);
    --bs-btn-active-bg: rgba(255,255,255,.12); --bs-btn-active-color: #fff; --bs-btn-active-border-color: rgba(255,255,255,.4);
  }
}

/* ---- 4. Guscio mobile e tablet (< 1200px) ----------------------------------- */
.app-header.navbar{
  background: var(--app-nav-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-nav-border) !important;
  border-radius: 0; box-shadow: none;
  width: 100%; margin: 0; padding: 0 8px; min-height: 56px;
}
.app-header .navbar-brand, .app-header .app-brand{ color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.app-header .app-brand__logo{ width: 28px; height: 28px; border-radius: 6px; }
.app-header .navbar-nav .nav-link{
  color: var(--app-sidebar-text); border-radius: var(--app-radius-sm); padding: .45rem .7rem;
  font-weight: 500; font-size: 13.5px;
}
.app-header .navbar-nav .nav-link:hover, .app-header .navbar-nav .nav-link:focus{ background: rgba(255,255,255,.07); color: #fff; }
.app-header .navbar-nav .nav-link.active{ background: rgba(109,130,255,.16); color: #fff; box-shadow: none; font-weight: 600; }
.app-header .navbar-nav .nav-link.active .app-nav__icon{ color: var(--app-accent-bright); }
.app-header .nav-scroll-btn, .app-nav-action-btn{
  border-radius: var(--app-radius-sm); border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: var(--app-sidebar-text); box-shadow: none;
}
.app-header .nav-scroll-btn:hover, .app-nav-action-btn:hover{ background: rgba(255,255,255,.08); color: #fff; transform: none; }
.app-header .app-header__avatar, .app-header__avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 11px; font-weight: 600; box-shadow: none;
}
.app-header__burger{ border: 0; border-radius: var(--app-radius-sm); padding: .35rem .5rem; }
.app-header__burger .navbar-toggler-icon{ width: 20px; height: 20px; filter: invert(1) brightness(1.6); }
.app-header .nav-link.is-pressing, .app-header .navbar-toggler.is-pressing{ background: rgba(255,255,255,.1); }
.app-header .dropdown-item.is-pressing{ background: var(--app-accent-soft); }

@media (max-width: 1199.98px){
  .app-header.navbar{ z-index: 1075; margin-top: 0; border-radius: 0; box-shadow: none; padding: .15rem .5rem; }
}
@media (max-width: 991.98px){
  .app-header #mainNav.offcanvas-lg{ background: var(--app-sidebar); color: var(--app-sidebar-text); width: min(84vw, 300px); padding: 0 10px 16px; }
  .app-header #mainNav .offcanvas-header{ border-bottom: 1px solid var(--app-sidebar-border); color: #fff; padding: 14px 8px; margin-bottom: 6px; }
  .app-header #mainNav .offcanvas-header .btn-close{ filter: invert(1) grayscale(1) brightness(1.8); }
  .app-header #mainNav .navbar-nav{ gap: 1px; }
  .app-header #mainNav .navbar-nav .nav-link{ color: var(--app-sidebar-text); border-radius: var(--app-radius-sm); font-weight: 500; min-height: 40px; }
  .app-header #mainNav .navbar-nav .nav-link:hover, .app-header #mainNav .navbar-nav .nav-link:focus{ background: rgba(255,255,255,.06); color: #fff; }
  .app-header #mainNav .navbar-nav .nav-link.active{ background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
  .app-header #mainNav .navbar-nav .nav-link.active .app-nav__icon{ color: var(--app-accent-bright); }
  .app-header #mainNav .app-nav-group{
    color: var(--app-sidebar-muted); font-size: var(--fs-xs); font-weight: 500; padding: 14px 10px 4px;
    list-style: none;
  }
  .app-header #mainNav .dropdown-menu{ background: var(--app-sidebar-soft); border-color: var(--app-sidebar-border); }
  .app-header #mainNav .dropdown-menu .dropdown-item{ color: var(--app-sidebar-text); }
  .app-header #mainNav .dropdown-menu .dropdown-item:hover{ background: rgba(255,255,255,.06); color: #fff; }
  .app-header #mainNav .dropdown-header{ color: var(--app-sidebar-muted); }
}
@media (min-width: 992px){
  .app-header .app-nav-group{ display: none; }
}

/* Sub-barra store (mobile/tablet): flush, in frase */
.store-subbar{
  background: var(--app-regia); border: 0; border-bottom: 1px solid var(--app-regia-line);
  border-radius: 0; box-shadow: none; margin: 0; backdrop-filter: none;
}
.store-subbar-inner{ padding: 8px 16px; gap: 10px; }
.store-subbar-label{ font-size: var(--fs-sm); color: var(--app-regia-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.store-subbar-value{ font-size: 13.5px; font-weight: 600; color: var(--app-regia-text); }
.store-subbar .store-subbar-btn, .store-subbar-btn{
  border-radius: var(--app-radius-sm);
  --bs-btn-bg: transparent; --bs-btn-color: var(--app-regia-text); --bs-btn-border-color: rgba(255,255,255,.28);
  --bs-btn-hover-bg: rgba(255,255,255,.08); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.4);
  --bs-btn-active-bg: rgba(255,255,255,.12); --bs-btn-active-color: #fff; --bs-btn-active-border-color: rgba(255,255,255,.4);
}

/* Toolbar di modulo (mobile/tablet): tab scorrevoli, non griglia di pulsanti */
.app-sectionbar{ margin: 0 0 16px; background: transparent; }
.app-sectionbar__inner{
  background: var(--app-regia); border: 0;
  border-radius: 0; box-shadow: var(--app-shadow-md); backdrop-filter: none;
  padding: 0 16px; max-width: none;
}
.app-sectionbar__inner > .d-flex{
  flex-wrap: nowrap !important; overflow-x: auto; gap: 0 !important;
  scrollbar-width: none; -ms-overflow-style: none;
}
.app-sectionbar__inner > .d-flex::-webkit-scrollbar{ display: none; }
.app-sectionbar__label{ display: none; }
.app-sectionbar .btn, .app-sectionbar .btn-sm{
  flex: 0 0 auto; min-height: 44px; padding: 0 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--app-regia-muted); font-size: 13.5px; font-weight: 500;
  border-bottom: 3px solid transparent; box-shadow: none;
}
.app-sectionbar .btn.btn-primary{ color: #fff; font-weight: 600; border-bottom-color: var(--app-accent-bright); background: transparent; }
.app-sectionbar .btn:hover{ background: transparent; color: #fff; }

/* ---- 5. Componenti ----------------------------------------------------------- */
/* Pulsanti */
.btn{
  border-radius: var(--app-radius-sm); font-weight: 500; letter-spacing: 0;
  font-size: 13.5px; padding: .42rem .85rem; line-height: 1.3; min-height: 36px;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.btn-sm{ border-radius: var(--app-radius-sm); font-size: var(--fs-sm); padding: .3rem .65rem; min-height: 32px; }
.btn-lg{ font-size: 15px; min-height: 42px; }
.btn:active{ transform: scale(.98); }
.btn > svg{ width: 16px; height: 16px; vertical-align: -3px; }
.btn-sm > svg{ width: 14px; height: 14px; vertical-align: -2px; }
.btn-primary{
  --bs-btn-bg: var(--app-accent-solid); --bs-btn-border-color: var(--app-accent-solid); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--app-accent-solid-hover); --bs-btn-hover-border-color: var(--app-accent-solid-hover); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--app-accent-solid-hover); --bs-btn-active-border-color: var(--app-accent-solid-hover); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--app-accent-solid); --bs-btn-disabled-border-color: var(--app-accent-solid); --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 29, 58, 232;
  font-weight: 600;
}
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark{
  --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border-strong); --bs-btn-color: var(--app-text);
  --bs-btn-hover-bg: var(--app-surface-soft); --bs-btn-hover-border-color: var(--app-border-strong); --bs-btn-hover-color: var(--app-heading);
  --bs-btn-active-bg: var(--app-surface-soft); --bs-btn-active-border-color: var(--app-border-strong); --bs-btn-active-color: var(--app-heading);
  --bs-btn-disabled-bg: var(--app-surface); --bs-btn-disabled-border-color: var(--app-border); --bs-btn-disabled-color: var(--app-text-subtle);
}
.btn-outline-primary{
  --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border-strong); --bs-btn-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-soft); --bs-btn-hover-border-color: var(--app-accent); --bs-btn-hover-color: var(--app-accent-strong);
  --bs-btn-active-bg: var(--app-accent-soft); --bs-btn-active-border-color: var(--app-accent); --bs-btn-active-color: var(--app-accent-strong);
}
.btn-outline-success{
  --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border-strong); --bs-btn-color: var(--app-success);
  --bs-btn-hover-bg: var(--app-success-soft); --bs-btn-hover-border-color: var(--app-success); --bs-btn-hover-color: var(--app-success);
  --bs-btn-active-bg: var(--app-success-soft); --bs-btn-active-border-color: var(--app-success); --bs-btn-active-color: var(--app-success);
}
.btn-outline-danger{
  --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border-strong); --bs-btn-color: var(--app-danger);
  --bs-btn-hover-bg: var(--app-danger-soft); --bs-btn-hover-border-color: var(--app-danger); --bs-btn-hover-color: var(--app-danger);
  --bs-btn-active-bg: var(--app-danger-soft); --bs-btn-active-border-color: var(--app-danger); --bs-btn-active-color: var(--app-danger);
}
.btn-outline-warning{
  --bs-btn-bg: var(--app-surface); --bs-btn-border-color: var(--app-border-strong); --bs-btn-color: var(--app-warning);
  --bs-btn-hover-bg: var(--app-warning-soft); --bs-btn-hover-border-color: var(--app-warning); --bs-btn-hover-color: var(--app-warning);
  --bs-btn-active-bg: var(--app-warning-soft); --bs-btn-active-border-color: var(--app-warning); --bs-btn-active-color: var(--app-warning);
}
.btn-danger{
  --bs-btn-bg: var(--app-danger); --bs-btn-border-color: var(--app-danger);
  --bs-btn-hover-bg: #961f18; --bs-btn-hover-border-color: #961f18;
  --bs-btn-active-bg: #961f18; --bs-btn-active-border-color: #961f18;
}
.btn-success{
  --bs-btn-bg: var(--app-success); --bs-btn-border-color: var(--app-success);
  --bs-btn-hover-bg: #166232; --bs-btn-hover-border-color: #166232;
  --bs-btn-active-bg: #166232; --bs-btn-active-border-color: #166232;
}
.btn-link{ --bs-btn-color: var(--app-link); --bs-btn-hover-color: var(--app-link-hover); text-decoration: none; }
.btn-close{ border-radius: var(--app-radius-sm); opacity: .6; }
.btn-close:hover{ opacity: 1; }
html[data-app-theme="midnight"] .btn-close{ filter: invert(1) grayscale(1); }

/* Segmento (prev / oggi / next) */
.ds-segment{ display: inline-flex; align-items: center; }
.ds-segment .btn{ border-radius: 0; margin-left: -1px; min-width: 36px; }
.ds-segment .btn:first-child{ border-radius: var(--app-radius-sm) 0 0 var(--app-radius-sm); margin-left: 0; }
.ds-segment .btn:last-child{ border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0; }
.ds-segment .btn:focus-visible{ position: relative; z-index: 1; }

/* Form */
.form-label{ font-size: var(--fs-sm); font-weight: 500; color: var(--app-text-muted); margin-bottom: 4px; }
.form-control, .form-select{
  background-color: var(--app-surface); color: var(--app-text);
  border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-sm);
  font-size: 13.5px; min-height: 36px; padding: .4rem .6rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-select{ background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px 12px; padding-right: 2rem; }
.form-control-sm, .form-select-sm{ min-height: 32px; font-size: var(--fs-sm); padding: .25rem .5rem; }
.form-select-sm{ padding-right: 1.75rem; }
.form-control::placeholder{ color: var(--app-text-subtle); }
.form-control:focus, .form-select:focus{ border-color: var(--app-accent); box-shadow: var(--app-focus-ring); background-color: var(--app-surface); color: var(--app-text); }
.form-control:disabled, .form-select:disabled, .form-control[readonly]{ background-color: var(--app-surface-soft); color: var(--app-text-muted); }
.form-control.is-invalid, .was-validated .form-control:invalid{ border-color: var(--app-danger); }
.invalid-feedback{ font-size: var(--fs-sm); color: var(--app-danger); }
.form-check-input{ border-color: var(--app-border-strong); width: 16px; height: 16px; margin-top: .2em; }
.form-check-input:checked{ background-color: var(--app-accent); border-color: var(--app-accent); }
.form-check-input:focus{ box-shadow: var(--app-focus-ring); border-color: var(--app-accent); }
.form-switch .form-check-input{ width: 2em; }
.input-group-text{ background: var(--app-surface-soft); border-color: var(--app-border-strong); color: var(--app-text-muted); font-size: 13.5px; }
html[data-app-theme="midnight"] .form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa4b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Tabelle */
.table{
  --bs-table-bg: transparent; --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--app-text);
  --bs-table-hover-bg: var(--app-surface-soft); --bs-table-hover-color: var(--app-text);
  font-size: 13px; margin-bottom: 0;
}
.table > :not(caption) > * > *{ padding: .5rem .6rem; background-color: transparent; }
.table thead th, .table .table-light th, .table > thead > tr > th{
  background: var(--app-surface-soft); color: var(--app-text-muted);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid var(--app-border-strong); white-space: nowrap; vertical-align: bottom;
}
.table td{ vertical-align: middle; }
.table-sm > :not(caption) > * > *{ padding: .35rem .5rem; }
.table-bordered > :not(caption) > *{ border-width: 1px 0; }
.table-bordered > :not(caption) > * > *{ border-width: 0 1px; }
.table .text-end, .table td.text-end, .table th.text-end{ font-variant-numeric: tabular-nums; }
.table-responsive{ border-radius: 0; }
.table-secondary, .table-light{ --bs-table-bg: var(--app-surface-soft); --bs-table-color: var(--app-text); }
html[data-app-theme="midnight"] .table-light, html[data-app-theme="midnight"] .table-secondary{ --bs-table-bg: var(--app-surface-soft); }
.card .table-responsive > .table{ margin: 0; }

/* Badge di stato: blocco pieno, testo bianco, icona e parola (si leggono anche senza colore).
   Neutro (light): informazione, non stato, con filetto e senza icona. Le icone sono a linea, stessa misura. */
.badge{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.25;
  padding: 3px 8px 3px 6px; border-radius: var(--app-radius-sm); border: 0;
  background: var(--app-surface); color: var(--app-text-muted); box-shadow: inset 0 0 0 1px var(--app-border-strong);
}
.badge::before{
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--badge-icon) center / contain no-repeat; mask: var(--badge-icon) center / contain no-repeat;
  display: none;
}
.badge:is(.text-bg-success, .bg-success, .text-bg-warning, .bg-warning, .text-bg-danger, .bg-danger,
  .text-bg-primary, .bg-primary, .text-bg-info, .bg-info, .text-bg-secondary, .bg-secondary, .text-bg-dark, .bg-dark){
  color: #fff !important; box-shadow: none;
}
.badge:is(.text-bg-success, .bg-success, .text-bg-warning, .bg-warning, .text-bg-danger, .bg-danger,
  .text-bg-primary, .bg-primary, .text-bg-info, .bg-info, .text-bg-secondary, .bg-secondary)::before{ display: block; }
.badge:is(.text-bg-success, .bg-success){
  background: var(--app-success) !important;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.badge:is(.text-bg-warning, .bg-warning){
  background: var(--app-warning) !important;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.badge:is(.text-bg-danger, .bg-danger){
  background: var(--app-danger) !important;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.badge:is(.text-bg-primary, .bg-primary, .text-bg-info, .bg-info){
  background: var(--app-accent-solid) !important;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.22-8.56'/%3E%3C/svg%3E");
}
.badge:is(.text-bg-secondary, .bg-secondary){
  background: var(--app-wait) !important;
  --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}
.badge:is(.text-bg-dark, .bg-dark){ background: var(--app-ink) !important; color: var(--app-ink-contrast) !important; }
.badge:is(.text-bg-light, .bg-light){ background: var(--app-surface) !important; color: var(--app-text-muted) !important; }
/* contatori e badge senza testo: niente icona */
.badge:is(.rounded-pill, [class*="count"], :empty)::before{ display: none !important; }
.badge:is(.rounded-pill, [class*="count"]){ padding-left: 7px; padding-right: 7px; }
.badge.rounded-pill{ border-radius: 999px; }

/* Pannelli: nessuna ombra sulle superfici statiche, anche dove i template usano le utility Bootstrap */
.shadow-sm, .shadow, .shadow-lg{ box-shadow: none !important; }
.card{ background: var(--app-surface); border: 1px solid transparent; border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-sm); }
.card.shadow-sm, .card.shadow, .card.shadow-lg{ box-shadow: var(--app-shadow-sm) !important; }
.card-header{
  background: var(--app-surface); border-bottom: 1px solid var(--app-border);
  font-size: 13.5px; font-weight: 600; color: var(--app-heading); padding: .6rem 1rem;
  border-radius: calc(var(--app-radius-md) - 1px) calc(var(--app-radius-md) - 1px) 0 0 !important;
}
.card-body{ padding: 1rem; }
.card-footer{ background: var(--app-surface-soft); border-top: 1px solid var(--app-border); }
.card .card{ border-radius: var(--app-radius-sm); border-color: var(--app-border); box-shadow: none !important; }
.bg-light{ background-color: var(--app-surface-soft) !important; }
.border{ border-color: var(--app-border) !important; }
.rounded{ border-radius: var(--app-radius-md) !important; }

/* Elenchi (list-group): righe hairline, selezione in cobalto tenue */
.list-group{ --bs-list-group-border-color: var(--app-border); --bs-list-group-bg: var(--app-surface); --bs-list-group-color: var(--app-text); --bs-list-group-action-hover-bg: var(--app-surface-soft); --bs-list-group-action-hover-color: var(--app-heading); --bs-list-group-action-active-bg: var(--app-accent-soft); --bs-list-group-action-active-color: var(--app-accent-strong); border-radius: var(--app-radius-md); }
.list-group-item{ padding: 10px 12px; font-size: 13.5px; }
.list-group-item-action:hover, .list-group-item-action:focus{ background: var(--app-surface-soft); color: var(--app-heading); }
.list-group-item.active{ background: var(--app-accent-soft); border-color: var(--app-border); color: var(--app-accent-strong); }
.list-group-item.active .text-muted, .list-group-item.active .small{ color: var(--app-accent-strong) !important; opacity: .85; }

/* Tab */
.nav-tabs{ border-bottom: 1px solid var(--app-border); gap: 2px; }
.nav-tabs .nav-link{
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  color: var(--app-text-muted); font-size: 13.5px; font-weight: 500; padding: .55rem .75rem;
}
.nav-tabs .nav-link:hover{ color: var(--app-heading); border-bottom-color: var(--app-border-strong); }
.nav-tabs .nav-link.active{ background: transparent; color: var(--app-heading); font-weight: 600; border-bottom-color: var(--app-accent); }
.nav-pills .nav-link{ border-radius: var(--app-radius-sm); color: var(--app-text-muted); font-weight: 500; }
.nav-pills .nav-link.active{ background: var(--app-accent-soft); color: var(--app-accent-strong); }

/* Alert */
.alert{ border-radius: var(--app-radius-md); border-width: 1px; font-size: 13.5px; padding: .7rem .9rem; }
.alert-success{ background: var(--app-success-soft); border-color: transparent; color: var(--app-success-text); }
.alert-warning{ background: var(--app-warning-soft); border-color: transparent; color: var(--app-warning-text); }
.alert-danger { background: var(--app-danger-soft);  border-color: transparent; color: var(--app-danger-text); }
.alert-info, .alert-primary{ background: var(--app-info-soft); border-color: transparent; color: var(--app-info-text); }
.alert-secondary, .alert-light{ background: var(--app-surface-soft); border-color: var(--app-border); color: var(--app-text-muted); }

/* Modali, offcanvas, menu, toast */
.modal-content, .offcanvas{
  background: var(--app-surface); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-lg);
}
.modal-header, .offcanvas-header{ border-bottom: 1px solid var(--app-border); padding: .9rem 1.1rem; }
.modal-title, .offcanvas-title{ font-size: var(--fs-lg); font-weight: 600; }
.modal-body{ padding: 1.1rem; }
.modal-footer{ border-top: 1px solid var(--app-border); padding: .75rem 1.1rem; gap: 8px; }
.modal-footer > *{ margin: 0; }
.modal-backdrop{ --bs-backdrop-bg: #0b0e13; --bs-backdrop-opacity: .5; }
.dropdown-menu{
  background: var(--app-surface); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-md);
  padding: 4px; font-size: 13.5px;
}
.dropdown-item{ border-radius: var(--app-radius-sm); padding: .45rem .7rem; color: var(--app-text); }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--app-surface-soft); color: var(--app-heading); }
.dropdown-item.active, .dropdown-item:active{ background: var(--app-accent-soft); color: var(--app-accent-strong); }
.dropdown-item-text{ color: var(--app-text-muted); }
.dropdown-divider{ border-color: var(--app-border); opacity: 1; }
.dropdown-header{ color: var(--app-text-subtle); font-size: var(--fs-xs); font-weight: 500; text-transform: none; letter-spacing: 0; }
.toast{ border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-md); font-size: 13.5px; }
.app-ai-kicker, .pwa-install-kicker{
  color: var(--app-text-muted); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* Assistente AI: pulsante flottante grafite, senza oscillazione */
.app-ai-fab, .btn.app-ai-fab{
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--app-ink); border-color: var(--app-ink); color: var(--app-ink-contrast);
  box-shadow: var(--app-shadow-md); animation: none;
}
.app-ai-fab:hover{ background: var(--app-ink-hover); border-color: var(--app-ink-hover); }

/* Tema: due scelte */
.theme-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-card{
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px;
  border: 1px solid var(--app-border-strong); border-radius: var(--app-radius-md);
  background: var(--app-surface); cursor: pointer; box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.theme-card:hover{ border-color: var(--app-accent); transform: none; box-shadow: none; }
.theme-card:has(.theme-card__input:checked){ border-color: var(--app-accent); box-shadow: var(--app-focus-ring); }
.theme-card__input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-card__preview{
  display: grid; grid-template-columns: 28% 1fr; grid-template-rows: 10px 1fr;
  gap: 3px; height: 56px; padding: 4px; border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border); overflow: hidden;
}
.theme-card__preview span{ border-radius: 2px; display: block; }
.theme-card__preview span:nth-child(1){ grid-row: 1 / 3; }
.theme-card__preview--base{ background: #e6e9ee; }
.theme-card__preview--base span:nth-child(1){ background: #11151b; }
.theme-card__preview--base span:nth-child(2){ background: #1b2129; }
.theme-card__preview--base span:nth-child(3){ background: #ffffff; box-shadow: 0 1px 2px rgba(17,21,27,.18); }
.theme-card__preview--midnight{ background: #0d1015; border-color: #2c3440; }
.theme-card__preview--midnight span:nth-child(1){ background: #080a0e; }
.theme-card__preview--midnight span:nth-child(2){ background: #131820; }
.theme-card__preview--midnight span:nth-child(3){ background: #1a1f27; border: 1px solid #2c3440; }
.theme-card__label{ font-size: 13.5px; font-weight: 600; color: var(--app-heading); }
.theme-card__desc{ font-size: var(--fs-sm); color: var(--app-text-muted); }

/* Overlay caricamento e banner PWA */
#pwaInstallBanner .card{ border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-lg); background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); }

/* Pagina: testata, KPI, stati vuoti */
.ds-page-head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.ds-page-head__title{ font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.ds-page-head__meta{ color: var(--app-text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.ds-page-head__actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ds-kpi-strip{
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--app-surface); border: 0; border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-sm);
  overflow: hidden;
}
.card .ds-kpi-strip{ box-shadow: inset 0 0 0 1px var(--app-border); }
/* Telefono: due colonne, cifra ridotta perche' gli importi entrino interi */
@media (max-width: 575.98px){
  .ds-kpi-strip .ds-kpi{ padding: 10px 12px; }
  .ds-kpi-strip .ds-kpi__value{ font-size: 22px; }
  .ds-kpi-strip.ds-kpi-strip--secondary .ds-kpi__value{ font-size: var(--fs-md); }
}
.ds-kpi-strip + .ds-kpi-strip{ margin-top: 8px; }
.ds-kpi{ padding: 12px 16px; border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); min-width: 0; }
.ds-kpi__label{ font-size: var(--fs-sm); font-weight: 500; color: var(--app-text-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-kpi__value{
  margin-top: 4px; font-size: var(--fs-2xl); font-weight: 600; color: var(--app-heading); line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-kpi__value.rc-negative, .ds-kpi__value.is-negative{ color: var(--app-danger); }
.ds-kpi-strip--secondary .ds-kpi__value{ font-size: var(--fs-lg); margin-top: 2px; }
.ds-kpi-strip--secondary .ds-kpi{ padding: 10px 16px; }
@media (min-width: 576px){ .ds-kpi-strip{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px){
  .ds-kpi-strip{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ds-kpi-strip--secondary{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-kpi-strip--five{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ds-kpi-strip .ds-kpi{ border-bottom: 0; }
  .ds-kpi-strip .ds-kpi:last-child{ border-right: 0; }
}
.ds-empty{
  padding: 32px 16px; text-align: center; color: var(--app-text-muted); font-size: 13.5px;
  border: 1px dashed var(--app-border-strong); border-radius: var(--app-radius-md); background: var(--app-surface);
}

/* ---- 6. Dashboard (calendario mensile) --------------------------------------- */
.app-shell .collect-toolbar{ gap: 12px 16px; margin-bottom: 16px; }
.app-shell .collect-toolbar #monthLabel{ font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-transform: capitalize; }
.app-shell .collect-toolbar .text-muted.small{ font-size: var(--fs-sm); }

.app-shell .calendar-weekdays{ gap: 0; margin: 0 !important; border: 1px solid var(--app-border); border-bottom: 0; border-radius: var(--app-radius-md) var(--app-radius-md) 0 0; background: var(--app-surface-soft); }
.app-shell .calendar-weekdays .weekday{
  font-size: var(--fs-sm); font-weight: 500; color: var(--app-text-muted); opacity: 1; text-transform: none; letter-spacing: 0;
  text-align: left; padding: 6px 8px; border-right: 1px solid var(--app-border);
}
.app-shell .calendar-weekdays .weekday:last-child{ border-right: 0; }
.app-shell .calendar-grid{
  gap: 0; grid-auto-rows: 96px; background: var(--app-surface);
  border: 1px solid var(--app-border); border-radius: 0 0 var(--app-radius-md) var(--app-radius-md); overflow: hidden;
}
.app-shell .calendar-grid .day-cell{
  border: 0; border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border);
  border-radius: 0; background: var(--app-surface); padding: 6px 8px;
  transition: background-color .12s ease;
}
.app-shell .calendar-grid .day-cell:nth-child(7n){ border-right: 0; }
.app-shell .calendar-grid .day-cell.is-clickable:hover{ background: var(--app-surface-soft); }
.app-shell .calendar-grid .day-cell.muted{ opacity: 1; background: var(--app-surface-soft); }
.app-shell .calendar-grid .day-cell.muted .day-number{ color: var(--app-text-subtle); }
.app-shell .calendar-grid .day-cell.validated-period{ background: var(--app-surface-soft); border-color: var(--app-border); }
.app-shell .calendar-grid .day-cell.validated-period .metric-line{ background: transparent; }
.app-shell .calendar-grid .day-cell.today{ outline: none; box-shadow: inset 0 0 0 1px var(--app-accent); }
.app-shell .calendar-grid .day-cell.is-clickable:focus-visible{ outline: 2px solid var(--app-accent); outline-offset: -2px; }
.app-shell .calendar-grid .day-number{
  position: absolute; top: 6px; left: 8px; right: auto;
  font-size: var(--fs-sm); font-weight: 500; color: var(--app-text-muted); opacity: 1; line-height: 1;
}
.app-shell .calendar-grid .day-cell.today .day-number{
  color: var(--app-on-accent, #fff); background: var(--app-accent); border-radius: 10px; padding: 3px 6px; margin: -3px -6px;
}
.app-shell .calendar-grid .day-number.day-link{ color: var(--app-text); border-radius: 3px; }
.app-shell .calendar-grid .day-number.day-link:hover{ color: var(--app-accent); }
.app-shell .calendar-grid .day-number.day-link:hover{ text-decoration: underline; opacity: 1; }
.app-shell .calendar-grid .day-cell.today .day-number.day-link{ color: var(--app-on-accent, #fff); }
.app-shell .calendar-grid .day-photo-btn{
  top: 4px; left: auto; right: 6px; width: 24px; height: 24px; border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border-strong); background: var(--app-surface); color: var(--app-text-muted); font-size: 0;
}
.app-shell .calendar-grid .day-photo-btn::before{
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--icon-camera) center / contain no-repeat; mask: var(--icon-camera) center / contain no-repeat;
}
.app-shell .calendar-grid .day-photo-btn:hover{ color: var(--app-accent); border-color: var(--app-accent); }
.app-shell .calendar-grid{
  --icon-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.app-shell .calendar-grid .day-cell .occ-bar{ left: 8px; right: 8px; bottom: 6px; gap: 2px; }
.app-shell .calendar-grid .metric-line{
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; padding: 1px 0;
  background: transparent; border: 0; border-radius: 0; color: var(--app-text);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.app-shell .calendar-grid .metric-label{ font-weight: 400; color: var(--app-text-muted); opacity: 1; }
.app-shell .calendar-grid .metric-value{ font-weight: 600; }
.app-shell .calendar-grid .metric-line.diff.negative{ color: var(--app-danger-text); background: transparent; border: 0; }
.app-shell .calendar-grid .metric-line.diff.negative .metric-label{ color: var(--app-danger-text); }
.app-shell .calendar-grid .metric-chip{
  font-size: var(--fs-xs); font-weight: 600; padding: 2px 6px; border-radius: 3px; border-width: 1px;
  font-variant-numeric: tabular-nums;
}
.app-shell .calendar-grid .metric-chip.chip-inv{ background: var(--app-success-soft); border-color: transparent; color: var(--app-success); }
.app-shell .calendar-grid .metric-chip.chip-delivery{ background: var(--app-info-soft); border-color: transparent; color: var(--app-info); }
.app-shell .calendar-grid .metric-chip.chip-txin{ background: var(--app-warning-soft); border-color: transparent; color: var(--app-warning); }
.app-shell .calendar-grid .metric-chip.chip-txout{ background: var(--app-danger-soft); border-color: transparent; color: var(--app-danger); }
.app-shell .calendar-grid .metric-chip.chip-waste{ background: var(--app-surface-soft); border-color: var(--app-border); color: var(--app-text); }
/* Magazzino: una riga per movimentazione (Inv., DDT, TX in, TX out, Waste), altezza variabile */
.app-shell .calendar-grid.calendar-grid--stack{ grid-auto-rows: minmax(96px, auto); }
.app-shell .calendar-grid--stack .day-cell{ min-height: 96px; }
.app-shell .calendar-grid--stack .day-cell .occ-bar{
  position: static; display: flex; flex-direction: column; gap: 2px; margin-top: 18px;
}
.app-shell .calendar-grid--stack .metric-chip{
  display: flex; justify-content: space-between; gap: 6px; width: 100%;
  padding: 2px 6px; cursor: pointer; line-height: 1.3;
}
.app-shell .calendar-grid--stack .metric-chip__label{ font-weight: 500; opacity: .85; }
.app-shell .calendar-grid--stack .metric-chip__value{ font-weight: 600; white-space: nowrap; }
.app-shell .calendar-grid--stack .metric-chip:hover{ filter: brightness(.96); }
#collectStatus{ font-size: var(--fs-sm); }
@media (max-width: 575.98px){
  /* iOS ingrandisce la pagina sui campi con testo sotto i 16px */
  .app-shell .form-control, .app-shell .form-select, .app-shell textarea{ font-size: 16px; }
  .app-shell .calendar-grid{ grid-auto-rows: 76px; }
  .app-shell .calendar-grid.calendar-grid--stack{ grid-auto-rows: minmax(76px, auto); }
  .app-shell .calendar-grid--stack .day-cell{ min-height: 76px; }
  .app-shell .calendar-grid--stack .day-cell .occ-bar{ margin-top: 16px; }
  .app-shell .calendar-grid--stack .metric-chip{ padding: 1px 4px; }
  .app-shell .calendar-grid--stack .metric-chip__label{ display: none; }
  .app-shell .calendar-grid .day-cell{ padding: 4px 5px; }
  .app-shell .calendar-grid .day-number{ left: 5px; top: 4px; }
  .app-shell .calendar-grid .day-cell .occ-bar{ left: 5px; right: 5px; bottom: 4px; }
  .app-shell .calendar-grid .metric-line{ font-size: var(--fs-xs); }
  .app-shell .calendar-grid .metric-label{ display: none; }
  .app-shell .calendar-weekdays .weekday{ padding: 4px 5px; font-size: var(--fs-xs); }
}

/* Telefono e tablet piccolo: il mese a 7 colonne non entra (importi troncati).
   Diventa un elenco di giorni, oggi in cima, con importi interi ed etichette GA/DC.
   La griglia parte sempre di lunedi' (42 celle), quindi la posizione dice il giorno della settimana;
   i nomi tradotti arrivano dal template in --wd-1 ... --wd-7. */
@media (max-width: 767.98px){
  .app-shell .calendar-weekdays{ display: none; }
  .app-shell .calendar-grid,
  .app-shell .calendar-grid.calendar-grid--stack{
    display: flex; flex-direction: column-reverse; border-radius: var(--app-radius-md);
    border: 0; box-shadow: var(--app-shadow-sm);
  }
  .app-shell .calendar-grid .day-cell.muted,
  .app-shell .calendar-grid .day-cell.today ~ .day-cell{ display: none; }
  .app-shell .calendar-grid .day-cell,
  .app-shell .calendar-grid--stack .day-cell{
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    min-height: 56px; padding: 8px 12px; border-right: 0; overflow: visible;
  }
  .app-shell .calendar-grid .day-cell:last-child{ border-bottom: 0; }
  .app-shell .calendar-grid .day-number,
  .app-shell .calendar-grid .day-number.day-link{
    position: static; grid-column: 1; margin: 0; padding: 0; justify-self: start;
    display: flex; flex-direction: column; gap: 2px;
    font-size: var(--fs-lg); font-weight: 600; color: var(--app-heading); line-height: 1.1;
  }
  .app-shell .calendar-grid .day-number::after{
    font-size: var(--fs-sm); font-weight: 500; color: var(--app-text-muted); text-transform: lowercase;
  }
  .app-shell .calendar-grid .day-cell:nth-child(7n+1) .day-number::after{ content: var(--wd-1, ""); }
  .app-shell .calendar-grid .day-cell:nth-child(7n+2) .day-number::after{ content: var(--wd-2, ""); }
  .app-shell .calendar-grid .day-cell:nth-child(7n+3) .day-number::after{ content: var(--wd-3, ""); }
  .app-shell .calendar-grid .day-cell:nth-child(7n+4) .day-number::after{ content: var(--wd-4, ""); }
  .app-shell .calendar-grid .day-cell:nth-child(7n+5) .day-number::after{ content: var(--wd-5, ""); }
  .app-shell .calendar-grid .day-cell:nth-child(7n+6) .day-number::after{ content: var(--wd-6, ""); }
  .app-shell .calendar-grid .day-cell:nth-child(7n) .day-number::after{ content: var(--wd-7, ""); }
  /* oggi: numero nel Segnale, riga col filo */
  .app-shell .calendar-grid .day-cell.today .day-number,
  .app-shell .calendar-grid .day-cell.today .day-number.day-link{
    color: var(--app-accent); background: transparent; padding: 0; margin: 0; border-radius: 0;
  }
  .app-shell .calendar-grid .day-cell .occ-bar,
  .app-shell .calendar-grid--stack .day-cell .occ-bar{
    position: static; grid-column: 2; margin: 0;
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 16px;
  }
  .app-shell .calendar-grid .metric-line{
    width: auto; gap: 6px; font-size: var(--fs-md); padding: 0; overflow: visible;
  }
  .app-shell .calendar-grid .metric-label{ display: inline; font-size: var(--fs-sm); }
  .app-shell .calendar-grid .metric-value{ overflow: visible; }
  .app-shell .calendar-grid--stack .metric-chip{ width: auto; }
  .app-shell .calendar-grid--stack .metric-chip__label{ display: inline; }
  .app-shell .calendar-grid .day-photo-btn{
    position: static; grid-column: 3; grid-row: 1; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  }
  .app-shell .calendar-grid .day-photo-btn::before{ width: 18px; height: 18px; }
  /* periodo convalidato: fondo incassato e spunta accanto al giorno */
  .app-shell .calendar-grid .day-cell.validated-period .day-number::before{
    content: ""; order: 2; width: 12px; height: 12px; background: var(--app-success-text);
    -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
  }
}

/* ---- 7. Mobile: spazi ------------------------------------------------------- */
@media (max-width: 1199.98px){
  .app-workspace-panel{ padding: 0; }
  .app-workspace-panel > .container{ padding-inline: 16px; }
}

/* ---- 8. Movimento ridotto ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ---- Colori fissi di Bootstrap: leggibili anche nel tema scuro ------------------ */
/* Testo su accento: bianco sull'accento scuro del tema chiaro, scuro sull'accento chiaro del tema scuro. */
:root{ --app-on-accent: #ffffff; }
html[data-app-theme="midnight"]{ --app-on-accent: #10151c; }
.bg-white{ background-color: var(--app-surface) !important; }
html[data-app-theme="midnight"] .text-dark:not(.badge):not([class*="bg-"]):not([class*="text-bg-"]){ color: var(--app-text) !important; }
html[data-app-theme="midnight"] .border-light{ border-color: var(--app-border) !important; }

/* Righe di tabella colorate (selezione, esito): Bootstrap le tinge con testo nero fisso. */
.table-primary, .table-info{
  --bs-table-bg: var(--app-accent-soft); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-accent-soft); --bs-table-striped-color: var(--app-text);
  --bs-table-active-bg: var(--app-accent-soft); --bs-table-active-color: var(--app-text);
  --bs-table-hover-bg: var(--app-accent-soft); --bs-table-hover-color: var(--app-text);
}
.table-success{
  --bs-table-bg: var(--app-success-soft); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-success-soft); --bs-table-striped-color: var(--app-text);
  --bs-table-active-bg: var(--app-success-soft); --bs-table-active-color: var(--app-text);
  --bs-table-hover-bg: var(--app-success-soft); --bs-table-hover-color: var(--app-text);
}
.table-warning{
  --bs-table-bg: var(--app-warning-soft); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-warning-soft); --bs-table-striped-color: var(--app-text);
  --bs-table-active-bg: var(--app-warning-soft); --bs-table-active-color: var(--app-text);
  --bs-table-hover-bg: var(--app-warning-soft); --bs-table-hover-color: var(--app-text);
}
.table-danger{
  --bs-table-bg: var(--app-danger-soft); --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: var(--app-danger-soft); --bs-table-striped-color: var(--app-text);
  --bs-table-active-bg: var(--app-danger-soft); --bs-table-active-color: var(--app-text);
  --bs-table-hover-bg: var(--app-danger-soft); --bs-table-hover-color: var(--app-text);
}
.table-active{ --bs-table-active-bg: var(--app-surface-soft); --bs-table-active-color: var(--app-text); --bs-table-bg-state: var(--app-surface-soft); }

/* Pulsanti pieni colorati: nel tema scuro il fondo e' chiaro, il testo deve essere scuro. */
html[data-app-theme="midnight"] .btn-danger, html[data-app-theme="midnight"] .btn-success,
html[data-app-theme="midnight"] .btn-warning, html[data-app-theme="midnight"] .btn-info{
  --bs-btn-color: var(--app-on-accent); --bs-btn-hover-color: var(--app-on-accent); --bs-btn-active-color: var(--app-on-accent);
  --bs-btn-disabled-color: var(--app-on-accent);
}
html[data-app-theme="midnight"] .btn-danger{ --bs-btn-hover-bg: #f58580; --bs-btn-hover-border-color: #f58580; --bs-btn-active-bg: #f58580; --bs-btn-active-border-color: #f58580; }
html[data-app-theme="midnight"] .btn-success{ --bs-btn-hover-bg: #7ccf98; --bs-btn-hover-border-color: #7ccf98; --bs-btn-active-bg: #7ccf98; --bs-btn-active-border-color: #7ccf98; }

/* Foglio chiaro: contenuti con colori propri scritti per la mail (per esempio il report vendite) restano su carta chiara. */
.ds-paper{
  background: #ffffff; color: #1f2937; color-scheme: light;
  border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: 16px; overflow-x: auto;
}

/* ---- Scelta dello store: tendina dal pulsante dello store attivo ------------------------------------
   Pannello di menu (hairline, raggio 6, ombra md). Sopra l'header (1075), sotto i toast (1090). */
.store-picker{
  position: fixed; z-index: 1080; width: 320px; display: flex; flex-direction: column;
  background: var(--app-surface); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-md);
  opacity: 0; transform: translateY(-4px); transition: opacity .15s cubic-bezier(.23, 1, .32, 1), transform .15s cubic-bezier(.23, 1, .32, 1);
}
.store-picker.is-open{ opacity: 1; transform: none; }
.store-picker[hidden]{ display: none; }
.store-picker__search{ padding: 8px; border-bottom: 1px solid var(--app-border); }
.store-picker__status{ padding: 10px 12px; font-size: var(--fs-sm); color: var(--app-text-muted); }
.store-picker__list{ overflow-y: auto; padding: 4px 0; min-height: 0; flex: 1 1 auto; }
.store-picker__item{
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 12px;
  border: 0; background: transparent; color: var(--app-text); text-align: left; font-size: var(--fs-md);
}
.store-picker__item:hover{ background: var(--app-surface-soft); }
.store-picker__item:focus-visible{ outline: 2px solid var(--app-accent); outline-offset: -2px; background: var(--app-surface-soft); }
.store-picker__code{ flex: none; min-width: 3.5rem; font-family: var(--app-font-mono); font-size: var(--fs-sm); color: var(--app-text-muted); font-variant-numeric: tabular-nums; }
.store-picker__name{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-picker__item svg{ flex: none; color: var(--app-accent); }
.store-picker__item[aria-current="true"]{ font-weight: 600; }
.store-picker__item[aria-current="true"] .store-picker__code{ color: var(--app-accent); }
@media (pointer: coarse){ .store-picker__item{ min-height: 44px; } }
@media (prefers-reduced-motion: reduce){ .store-picker{ transition: none; transform: none; } }