/* =============================================================================
   STOK Design System - kit mobile (SS_Xs)
   Restyle della UI legacy (Bootstrap 3 + materialadmin + css/mycss.css) con il
   linguaggio visivo di StikStok_Web. Caricato DOPO css/mycss.css.
   Tema: <html data-theme="dark|light"> impostato da script/stok-theme.js
   (cookie "stok-theme", default dark).
   Fonte: StikStok_Web/src/styles/_tokens.scss, _base.scss, _buttons.scss,
   _layout.scss, app/components/sidenav-ai/sidenav-ai.component.scss.
   ============================================================================= */

/* ---------- Token (copiati da _tokens.scss:10-143) ---------- */
:root {
  /* Base / superfici */
  --stok-bg-deep: #070C17;            /* fondo login, cornice esterna app */
  --stok-bg: #0A1120;                 /* area contenuto */
  --stok-surface: #101B2D;            /* card, sidebar, header */
  --stok-surface-2: #16243A;          /* header tabella, input, hover superficie */
  --stok-surface-3: #1D2F49;          /* riga selezionata, chip elevato */
  --stok-border: #223350;
  --stok-border-strong: #2E4569;
  --stok-overlay: rgba(4, 9, 18, 0.72);
  --stok-loading-veil: rgba(10, 17, 32, 0.55);   /* velo sopra una griglia in caricamento */

  /* Inchiostro */
  --stok-ink: #EAF1FA;                /* testo primario */
  --stok-ink-2: #A3B4CC;              /* testo secondario, label */
  --stok-ink-3: #6E8099;              /* muted, placeholder, disabilitato */
  --stok-ink-inverse: #061020;        /* testo su ciano */

  /* Brand */
  --stok-cyan: #00B4E6;               /* azione primaria, stato attivo */
  --stok-cyan-bright: #35D2FF;        /* hover, glifo power del logo, link */
  --stok-cyan-deep: #0A6E93;          /* pressed, riempimenti profondi, scrollbar */
  --stok-cyan-soft: rgba(0, 180, 230, 0.12);
  --stok-cyan-ring: rgba(0, 180, 230, 0.30);
  --stok-row-hover: rgba(0, 180, 230, 0.18); /* hover riga in griglia */

  /* Semantici */
  --stok-success: #3FCF8E;
  --stok-success-soft: rgba(63, 207, 142, 0.14);
  --stok-success-ring: rgba(63, 207, 142, 0.30);
  --stok-warning: #F2B93B;
  --stok-warning-soft: rgba(242, 185, 59, 0.14);
  --stok-warning-ring: rgba(242, 185, 59, 0.30);
  --stok-danger: #F2555A;
  --stok-danger-soft: rgba(242, 85, 90, 0.14);
  --stok-danger-pressed: #D8464B;
  --stok-danger-ring: rgba(242, 85, 90, 0.30);
  --stok-info: #00B4E6;
  --stok-info-soft: rgba(0, 180, 230, 0.14);
  --stok-neutral: #7C8CA5;
  --stok-neutral-soft: rgba(124, 140, 165, 0.16);

  /* Inchiostri di accento e semantici (testo e icone colorate su superficie) */
  --stok-accent-ink: var(--stok-cyan);
  --stok-link: var(--stok-cyan-bright);
  --stok-link-hover: var(--stok-cyan);
  --stok-success-ink: var(--stok-success);
  --stok-warning-ink: var(--stok-warning);
  --stok-danger-ink: var(--stok-danger);
  --stok-info-ink: var(--stok-info);
  --stok-neutral-ink: var(--stok-neutral);
  --stok-logo-glyph: var(--stok-cyan-bright);   /* glifo "power" del lockup */
  --stok-auth-brand-from: #0C1728;              /* gradiente pannello brand login */
  --stok-scheme: dark;

  /* Carta (anteprime di stampa) */
  --stok-paper: #FFFFFF;
  --stok-paper-ink: #1A1A1A;
  --stok-paper-border: #C0C0C0;

  /* Tipografia */
  --stok-font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --stok-font-mono: "SFMono-Regular", "Consolas", "Roboto Mono", monospace;

  --stok-fs-display: 40px; --stok-lh-display: 46px;
  --stok-fs-h1: 30px;      --stok-lh-h1: 38px;
  --stok-fs-h2: 24px;      --stok-lh-h2: 32px;
  --stok-fs-h3: 19px;      --stok-lh-h3: 26px;
  --stok-fs-h4: 16px;      --stok-lh-h4: 22px;
  --stok-fs-body-lg: 15px; --stok-lh-body-lg: 24px;
  --stok-fs-body: 14px;    --stok-lh-body: 21px;
  --stok-fs-sm: 13px;      --stok-lh-sm: 19px;
  --stok-fs-caption: 12px; --stok-lh-caption: 16px;
  --stok-fs-overline: 11px; --stok-lh-overline: 14px;

  --stok-tracking-overline: 0.14em;
  --stok-tracking-logo: 0.18em;

  /* Spaziature (base 4px) */
  --stok-space-1: 4px;
  --stok-space-2: 8px;
  --stok-space-3: 12px;
  --stok-space-4: 16px;
  --stok-space-5: 20px;
  --stok-space-6: 24px;
  --stok-space-8: 32px;
  --stok-space-10: 40px;
  --stok-space-12: 48px;
  --stok-space-16: 64px;

  /* Raggi */
  --stok-radius-sm: 6px;
  --stok-radius-md: 10px;
  --stok-radius-lg: 14px;
  --stok-radius-xl: 20px;
  --stok-radius-pill: 999px;

  /* Elevazione */
  --stok-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --stok-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --stok-shadow-3: 0 18px 48px rgba(3, 8, 18, 0.55);
  --stok-shadow-glow: 0 0 0 3px var(--stok-cyan-ring);

  /* Layout */
  --stok-header-h: 64px;
  --stok-sidebar-w: 272px;
  --stok-sidebar-w-collapsed: 68px;
  --stok-content-max: 100%;
  --stok-page-pad: var(--stok-space-6);
  --stok-toolbar-pad-y: var(--stok-space-3);
  --stok-control-h: 40px;             /* altezza bottoni/campi (44px touch) */
  --stok-control-h-sm: 36px;          /* bottoni icona, filtri */
  --stok-row-h: 44px;                 /* riga tabella */

  /* Motion */
  --stok-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --stok-dur-fast: 120ms;
  --stok-dur: 200ms;
  --stok-dur-slow: 320ms;

  /* Legacy -> nuovo (shim di compatibilita') */
  --txt: var(--stok-surface-3);       /* era #29335C */
  --azzurro-logo: var(--stok-cyan);   /* era #239DD0 */
  --azzurroscuro: var(--stok-cyan-deep); /* era #1275A1 */
  --verde-logo: var(--stok-success);  /* era #80B73A */
  --rosso-logo: var(--stok-danger);   /* era #DB1A21 */
  --giallo-logo: var(--stok-warning); /* era #EDB100 */

  /* ---------- Solo mobile (SS_Xs) ---------- */
  --stok-mheader-h: 56px;             /* header fisso in alto */
  --stok-actionbar-h: 52px;           /* barra azioni sotto l'header */
  --stok-chrome-h: var(--stok-mheader-h); /* ingombro fisso in alto (header [+ actionbar]) */
  --stok-control-h-touch: 44px;       /* bottoni e campi su terminale */
}

/* Schermi bassi (_tokens.scss:150-156) */
@media (max-height: 760px) {
  :root {
    --stok-header-h: 56px;
    --stok-page-pad: var(--stok-space-4);
    --stok-toolbar-pad-y: var(--stok-space-2);
  }
}

/* Light mode (_tokens.scss:165-208): sovrascrive SOLO i token cromatici */
:root[data-theme="light"] {
  /* Base / superfici */
  --stok-bg-deep: #E9EEF5;
  --stok-bg: #F3F6FA;
  --stok-surface: #FFFFFF;
  --stok-surface-2: #F1F5FA;
  --stok-surface-3: #E2EAF4;
  --stok-border: #D8E0EA;
  --stok-border-strong: #C2CEDC;
  --stok-overlay: rgba(15, 28, 46, 0.45);
  --stok-loading-veil: rgba(255, 255, 255, 0.65);

  /* Inchiostro */
  --stok-ink: #0F1C2E;
  --stok-ink-2: #47586F;
  --stok-ink-3: #75859C;

  /* Tinte */
  --stok-cyan-soft: rgba(0, 180, 230, 0.10);
  --stok-row-hover: rgba(0, 180, 230, 0.12);
  --stok-success-soft: rgba(63, 207, 142, 0.14);
  --stok-warning-soft: rgba(242, 185, 59, 0.16);
  --stok-danger-soft: rgba(242, 85, 90, 0.12);
  --stok-info-soft: rgba(0, 180, 230, 0.12);
  --stok-neutral-soft: rgba(124, 140, 165, 0.14);

  /* Inchiostri di accento e semantici (leggibili su bianco) */
  --stok-accent-ink: #0A6E93;
  --stok-link: #0A6E93;
  --stok-link-hover: #00B4E6;
  --stok-success-ink: #1F8F5F;
  --stok-warning-ink: #9A6700;
  --stok-danger-ink: #C43A3F;
  --stok-info-ink: #0A6E93;
  --stok-neutral-ink: #5B6B84;
  --stok-logo-glyph: #00B4E6;
  --stok-auth-brand-from: #FFFFFF;
  --stok-scheme: light;

  /* Elevazione */
  --stok-shadow-1: 0 1px 2px rgba(15, 28, 46, 0.08);
  --stok-shadow-2: 0 4px 16px rgba(15, 28, 46, 0.12);
  --stok-shadow-3: 0 18px 48px rgba(15, 28, 46, 0.18);
}

/* =============================================================================
   Base (_base.scss) + neutralizzazione di mycss.css "* { font-size:13px;
   font-family:'Segoe UI'; line-height:142% }" (mycss.css:1254-1258)
   ============================================================================= */
html,
body {
  background: var(--stok-bg);
  color: var(--stok-ink);
  font-family: var(--stok-font);
  font-size: var(--stok-fs-body);
  line-height: var(--stok-lh-body);
  -webkit-font-smoothing: antialiased;
  color-scheme: var(--stok-scheme);
}

/* Il selettore universale di mycss spezza l'ereditarieta': si torna a ereditare */
* {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  color: var(--stok-ink);
}
h1 { font-size: var(--stok-fs-h1); line-height: var(--stok-lh-h1); }
h2 { font-size: var(--stok-fs-h2); line-height: var(--stok-lh-h2); }
h3 { font-size: var(--stok-fs-h3); line-height: var(--stok-lh-h3); }
h4 { font-size: var(--stok-fs-h4); line-height: var(--stok-lh-h4); }
h5 { font-size: var(--stok-fs-body); line-height: var(--stok-lh-body); }
h6 { font-size: var(--stok-fs-sm); line-height: var(--stok-lh-sm); }

a {
  color: var(--stok-link);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--stok-link-hover);
  text-decoration: underline;
}

hr {
  border-top-color: var(--stok-border);
}

td,
th,
.stok-num {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--stok-cyan);
  outline-offset: 2px;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--stok-cyan-deep) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--stok-surface); }
*::-webkit-scrollbar-thumb {
  background: var(--stok-cyan-deep);
  border-radius: var(--stok-radius-pill);
  border: 2px solid var(--stok-surface);
}
*::-webkit-scrollbar-thumb:hover { background: var(--stok-cyan); }

/* Icone: Material Symbols Outlined (_base.scss:93-120) */
.material-icons,
.stok-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.stok-icon--fill {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Overline (etichette di sezione) */
.stok-overline {
  font-size: var(--stok-fs-overline);
  line-height: var(--stok-lh-overline);
  font-weight: 600;
  letter-spacing: var(--stok-tracking-overline);
  text-transform: uppercase;
  color: var(--stok-ink-2);
}

/* Logo lockup ST + glifo power + K (_base.scss:162-202) */
.stok-logo {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  gap: 0.32em;
  font-weight: 600;
  letter-spacing: var(--stok-tracking-logo);
  font-size: 22px;
  line-height: 1;
  color: var(--stok-ink);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.stok-logo svg {
  width: 0.95em;
  height: 0.95em;
  margin: 0 -0.05em 0.05em -0.14em;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  stroke: var(--stok-logo-glyph);
  fill: none;
  overflow: visible;
  stroke-linecap: round;
}
.stok-logo__sep {
  width: 1px;
  height: 0.9em;
  background: var(--stok-border-strong);
  margin: 0 0.36em 0.1em;
}
.stok-logo__sub {
  color: var(--stok-ink-2);
  font-size: 0.82em;
  letter-spacing: 0.16em;
  line-height: 1.15;
}
.stok-logo--lg {
  font-size: 52px;
}

/* =============================================================================
   Cornice app: header fisso + actionbar fissa sotto l'header
   ============================================================================= */
body.stok-app {
  padding-top: var(--stok-chrome-h);
}
body.stok-has-actionbar {
  --stok-chrome-h: calc(var(--stok-mheader-h) + var(--stok-actionbar-h));
}

/* materialadmin #content padding-top:64px (materialadmin.css:1162-1167) e
   mycss #content top:-22px (mycss.css:1448-1450) servivano alla vecchia navbar:
   l'offset ora viene solo dal padding-top del body */
body.stok-app #content {
  padding-top: 0;
  top: 0;
}

/* Header (sidenav-ai.component.scss:300-364, variante mobile) */
.stok-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1032;
  height: var(--stok-mheader-h);
  padding: 0 var(--stok-space-3);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--stok-space-3);
  background: var(--stok-surface);
  color: var(--stok-ink);
  border-bottom: 1px solid var(--stok-border);
  font-family: var(--stok-font);
}
.stok-header .stok-logo {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.stok-header__title {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 0;
  padding-left: var(--stok-space-3);
  border-left: 1px solid var(--stok-border-strong);
  font-size: var(--stok-fs-h4);
  line-height: var(--stok-lh-h4);
  font-weight: 600;
  color: var(--stok-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stok-header__spacer {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
.stok-header .stok-icon-btn + .stok-icon-btn {
  margin-left: calc(var(--stok-space-2) - var(--stok-space-3));
}
@media (max-width: 720px) {
  .stok-header .stok-logo__sep,
  .stok-header .stok-logo__sub {
    display: none;
  }
}

/* Bottone icona tondo (sidenav-ai.component.scss:17-48), 44px touch */
.stok-icon-btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: var(--stok-control-h-touch);
  height: var(--stok-control-h-touch);
  margin: 0;
  padding: 0;
  border: 1px solid var(--stok-border-strong);
  border-radius: var(--stok-radius-pill);
  background: transparent;
  color: var(--stok-ink-2);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background var(--stok-dur) var(--stok-ease), color var(--stok-dur) var(--stok-ease), border-color var(--stok-dur) var(--stok-ease);
  transition: background var(--stok-dur) var(--stok-ease), color var(--stok-dur) var(--stok-ease), border-color var(--stok-dur) var(--stok-ease);
}
.stok-icon-btn .stok-icon {
  font-size: 22px;
}
.stok-icon-btn:hover,
.stok-icon-btn:active {
  background: var(--stok-cyan-soft);
  color: var(--stok-accent-ink);
  border-color: var(--stok-cyan);
  text-decoration: none;
}
/* Niente stato "attivo" persistente dopo il tap: solo anello da tastiera */
.stok-icon-btn:focus-visible {
  box-shadow: var(--stok-shadow-glow);
}

/* Actionbar della pagina: resta nel DOM dov'e' (anche dentro UpdatePanel),
   il CSS la fissa sotto l'header. La classe body.stok-has-actionbar e'
   gestita da script/stok-theme.js */
.stok-actionbar {
  position: fixed;
  top: var(--stok-mheader-h);
  left: 0;
  right: 0;
  z-index: 1031;
  height: var(--stok-actionbar-h);
  margin: 0;
  padding: 0 var(--stok-space-3);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: var(--stok-space-2);
  background: var(--stok-surface-2);
  color: var(--stok-ink);
  border-bottom: 1px solid var(--stok-border);
  overflow: hidden;
}
.stok-actionbar__start,
.stok-actionbar__end {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--stok-space-2);
  min-width: 0;
  white-space: nowrap;
}
.stok-actionbar__start {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
.stok-actionbar__end {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
/* Nella barra i bottoni e i testi grandi vengono compattati per stare in 52px */
.stok-actionbar .btn {
  min-height: var(--stok-control-h-sm);
  padding: 6px 12px;
  font-size: var(--stok-fs-sm);
  line-height: 22px;
}
.stok-actionbar .text-xl,
.stok-actionbar .text-xxl {
  font-size: var(--stok-fs-h4);
  line-height: var(--stok-lh-h4);
}
.stok-actionbar .text-lg {
  font-size: var(--stok-fs-body);
}
.stok-actionbar .stok-icon-btn {
  width: 40px;
  height: 40px;
}

/* =============================================================================
   Bottoni (_buttons.scss): le classi Bootstrap restano nelle pagine
   ============================================================================= */
.btn {
  display: inline-block;
  min-height: var(--stok-control-h-touch);
  height: auto;
  padding: 10px var(--stok-space-4);
  border: 1px solid transparent;
  border-radius: var(--stok-radius-md);
  background-image: none;
  font-family: var(--stok-font);
  font-size: var(--stok-fs-body);
  font-weight: 500;
  line-height: 22px;
  text-transform: none;
  text-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: background var(--stok-dur) var(--stok-ease), color var(--stok-dur) var(--stok-ease), border-color var(--stok-dur) var(--stok-ease), -webkit-filter var(--stok-dur) var(--stok-ease);
  transition: background var(--stok-dur) var(--stok-ease), color var(--stok-dur) var(--stok-ease), border-color var(--stok-dur) var(--stok-ease), filter var(--stok-dur) var(--stok-ease);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
  text-decoration: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--stok-shadow-glow);
}
.btn .stok-icon {
  font-size: 20px;
  margin-top: -2px;
}
/* Dimensioni: stesso ordine di materialadmin (btn-lg prima di sm/xs) */
.btn-lg {
  min-height: 48px;
  padding: 12px 20px;
  font-size: var(--stok-fs-h4);
}
.btn-sm,
.btn-xs {
  min-height: var(--stok-control-h-sm);
  padding: 6px 12px;
  font-size: var(--stok-fs-sm);
}
.btn-block {
  display: block;
  width: 100%;
}
/* Ombre "raised" e bordi a pillola materialadmin neutralizzati */
.btn-raised,
.btn-raised:hover,
.btn-raised:active,
.btn-raised.active {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-rounded {
  border-radius: var(--stok-radius-md);
}
/* Floating action -> bottone icona tondo (come .stok-icon-btn) */
.btn.btn-floating-action {
  width: var(--stok-control-h-touch);
  height: var(--stok-control-h-touch);
  min-height: 0;
  padding: 0;
  border-radius: var(--stok-radius-pill) !important;
  border-color: var(--stok-border-strong);
  background: transparent;
  color: var(--stok-ink-2);
  line-height: 1;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn.btn-floating-action:hover,
.btn.btn-floating-action:focus {
  background: var(--stok-cyan-soft);
  border-color: var(--stok-cyan);
  color: var(--stok-accent-ink);
}
.btn.btn-floating-action .fa,
.btn.btn-floating-action .stok-icon {
  line-height: 1;
  margin: 0;
}

/* Secondario (btn-default, btn-default-dark): trasparente, bordo forte */
.btn.btn-default,
.btn.btn-default:focus,
.btn.btn-default.focus,
.btn.btn-default-dark,
.btn.btn-default-dark:focus,
.btn.btn-default-dark.focus {
  background: transparent;
  border-color: var(--stok-border-strong);
  color: var(--stok-ink);
}
.btn.btn-default:hover,
.btn.btn-default-dark:hover {
  background: transparent;
  border-color: var(--stok-cyan);
  color: var(--stok-accent-ink);
}
.btn.btn-default:active,
.btn.btn-default.active,
.btn.btn-default:active:hover,
.btn.btn-default:active:focus,
.btn.btn-default-dark:active,
.btn.btn-default-dark.active,
.btn.btn-default-dark:active:hover,
.btn.btn-default-dark:active:focus {
  background: var(--stok-cyan-soft);
  border-color: var(--stok-cyan);
  color: var(--stok-accent-ink);
}

/* Primario (btn-primary, btn-info): ciano pieno */
.btn.btn-primary,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-info,
.btn.btn-info:focus,
.btn.btn-info.focus {
  background: var(--stok-cyan);
  border-color: var(--stok-cyan);
  color: var(--stok-ink-inverse);
  font-weight: 600;
}
.btn.btn-primary:hover,
.btn.btn-info:hover {
  background: var(--stok-cyan-bright);
  border-color: var(--stok-cyan-bright);
  color: var(--stok-ink-inverse);
}
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active:hover,
.btn.btn-primary:active:focus,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-info:active:hover,
.btn.btn-info:active:focus {
  background: var(--stok-cyan-deep);
  border-color: var(--stok-cyan-deep);
  color: var(--stok-ink-inverse);
}

/* Pieni semantici (mixin stok-btn-pieno, _buttons.scss:58-67) */
.btn.btn-success,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success.focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-success:active:hover,
.btn.btn-success:active:focus {
  background: var(--stok-success);
  border-color: var(--stok-success);
  color: var(--stok-ink-inverse);
  font-weight: 600;
}
.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning.focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:active:hover,
.btn.btn-warning:active:focus {
  background: var(--stok-warning);
  border-color: var(--stok-warning);
  color: var(--stok-ink-inverse);
  font-weight: 600;
}
.btn.btn-danger,
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger.focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-danger:active:hover,
.btn.btn-danger:active:focus {
  background: var(--stok-danger);
  border-color: var(--stok-danger);
  color: var(--stok-ink-inverse);
  font-weight: 600;
}
.btn.btn-success:hover,
.btn.btn-warning:hover,
.btn.btn-danger:hover {
  -webkit-filter: brightness(1.12);
  filter: brightness(1.12);
}
.btn.btn-success:active,
.btn.btn-warning:active,
.btn.btn-danger:active {
  -webkit-filter: brightness(0.92);
  filter: brightness(0.92);
}
.btn.btn-danger:active {
  background: var(--stok-danger-pressed);
  border-color: var(--stok-danger-pressed);
}
.btn.btn-success:focus-visible { box-shadow: 0 0 0 3px var(--stok-success-ring); }
.btn.btn-warning:focus-visible { box-shadow: 0 0 0 3px var(--stok-warning-ring); }
.btn.btn-danger:focus-visible { box-shadow: 0 0 0 3px var(--stok-danger-ring); }

/* Su un bottone pieno i testi colorati interni (label text-info ecc. delle
   righe GridView) ereditano il colore del bottone: contrasto in entrambi i temi */
.btn-primary [class*="text-"],
.btn-info [class*="text-"],
.btn-success [class*="text-"],
.btn-warning [class*="text-"],
.btn-danger [class*="text-"],
.btn-primary label,
.btn-info label,
.btn-success label,
.btn-warning label,
.btn-danger label {
  color: inherit;
}
.btn label:not([class*="text-"]) {
  font-size: inherit;
  color: inherit;
}
.btn label {
  margin: 0;
  cursor: inherit;
}

/* Disabilitato (_buttons.scss:46-54) */
.btn.btn.disabled,
.btn.btn[disabled],
.btn.btn:disabled,
.btn.btn.disabled:hover,
.btn.btn[disabled]:hover,
.btn.btn.disabled:focus,
.btn.btn[disabled]:focus,
.btn.btn.disabled:active,
.btn.btn[disabled]:active {
  background: var(--stok-surface-2);
  border-color: var(--stok-border);
  color: var(--stok-ink-3);
  cursor: not-allowed;
  opacity: 1;
  -webkit-filter: none;
  filter: none;
}

/* =============================================================================
   Tessere menu (menu.aspx / smenu.aspx)
   ============================================================================= */
.stok-tiles {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stok-space-3);
  margin: 0;
  padding: 0;
}
@media (min-width: 600px) {
  .stok-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.stok-tile {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: var(--stok-space-2);
  min-height: 104px;
  padding: var(--stok-space-4);
  background: var(--stok-surface);
  border: 1px solid var(--stok-border);
  border-radius: var(--stok-radius-lg);
  color: var(--stok-ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background var(--stok-dur) var(--stok-ease), border-color var(--stok-dur) var(--stok-ease), color var(--stok-dur) var(--stok-ease);
  transition: background var(--stok-dur) var(--stok-ease), border-color var(--stok-dur) var(--stok-ease), color var(--stok-dur) var(--stok-ease);
}
.stok-tile:hover,
.stok-tile:focus,
.stok-tile:active,
.stok-tile.attivo {
  background: var(--stok-cyan-soft);
  border-color: var(--stok-cyan);
  color: var(--stok-accent-ink);
  text-decoration: none;
}
.stok-tile__icon,
.stok-tile .stok-icon {
  font-size: 32px;
  color: var(--stok-accent-ink);
}
.stok-tile__label {
  font-size: var(--stok-fs-sm);
  line-height: var(--stok-lh-sm);
  font-weight: 600;
  color: var(--stok-ink);
}
.stok-tile:hover .stok-tile__label,
.stok-tile:active .stok-tile__label {
  color: var(--stok-accent-ink);
}
.stok-tile__badge {
  position: absolute;
  top: var(--stok-space-2);
  right: var(--stok-space-2);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--stok-radius-pill);
  background: var(--stok-danger);
  color: var(--stok-ink-inverse);
  font-size: var(--stok-fs-caption);
  line-height: 22px;
  font-weight: 600;
  text-align: center;
}
.stok-tile__badge--vuoto {
  display: none;
}

/* =============================================================================
   Card / sezioni
   ============================================================================= */
.card,
.panel,
.well,
.modalPopupInfo {
  background: var(--stok-surface);
  color: var(--stok-ink);
  border: 1px solid var(--stok-border);
  border-radius: var(--stok-radius-lg);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.card-head,
.panel-heading,
.panel-default > .panel-heading {
  background: transparent;
  color: var(--stok-ink);
  border-bottom: 1px solid var(--stok-border);
}
.card-body,
.panel-body,
.panel-footer {
  background: transparent;
  color: var(--stok-ink);
}
.panel-footer {
  border-top: 1px solid var(--stok-border);
}
.card-transparent {
  background: transparent;
}

/* Superfici materialadmin .style-* (materialadmin.css:5187-5860):
   [class] alza la specificita' sopra ".card .style-x" e ".card.style-x" */
.style-default[class],
.style-default-bright[class],
.style-default-light[class],
.style-gray[class],
.style-gray-light[class],
.style-gray-bright[class] {
  background: var(--stok-surface-2);
  border-color: var(--stok-border);
  color: var(--stok-ink);
}
.style-default-dark[class],
.style-gray-dark[class] {
  background: var(--stok-surface-3);
  border-color: var(--stok-border-strong);
  color: var(--stok-ink);
}
.style-primary[class],
.style-info[class],
.style-accent[class] {
  background: var(--stok-info-soft);
  border-color: var(--stok-cyan-ring);
  color: var(--stok-info-ink);
}
.style-success[class] {
  background: var(--stok-success-soft);
  border-color: var(--stok-success-ring);
  color: var(--stok-success-ink);
}
.style-warning[class] {
  background: var(--stok-warning-soft);
  border-color: var(--stok-warning-ring);
  color: var(--stok-warning-ink);
}
.style-danger[class] {
  background: var(--stok-danger-soft);
  border-color: var(--stok-danger-ring);
  color: var(--stok-danger-ink);
}

/* Chip titolo (.badge.style-*) e badge generico (_layout.scss:268-294, senza pallino) */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--stok-radius-pill);
  background: var(--stok-neutral-soft);
  color: var(--stok-neutral-ink);
  font-weight: 500;
  line-height: var(--stok-lh-caption);
  vertical-align: middle;
}
.badge[class] {
  border-color: currentColor;
}
/* Badge dentro un bottone pieno (conteggio righe pick.aspx): chip contornato
   nel colore del testo del bottone, altrimenti sparisce sul fondo pieno */
.btn-primary .badge[class],
.btn-info .badge[class],
.btn-success .badge[class],
.btn-warning .badge[class],
.btn-danger .badge[class] {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

/* Taglie testo legacy (materialadmin .text-lg..xxxl non fissano line-height):
   interlinea relativa come il vecchio 142% di mycss, niente righe sovrapposte */
.text-lg,
.text-xl,
.text-xxl,
.text-xxxl {
  line-height: 1.3;
}

/* Layout autenticazione Login/CambioPassword (da web styles/_auth.scss, variante sotto 900px) */
.stok-auth { min-height: 100vh; background: var(--stok-bg-deep); }
.stok-auth form { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 72px 0 32px; /* spazio per il toggle tema in alto a destra */ }
.stok-auth__theme { position: absolute; top: 12px; right: 12px; }
.stok-auth__lockup { display: flex; flex-direction: column; align-items: center; }
.stok-auth .stok-logo { font-size: 40px; }
.stok-auth__bar { width: 86px; height: 4px; margin-top: 20px; background: var(--stok-cyan); }
.stok-auth .login-form { width: calc(100% - 48px); max-width: 380px; margin: 24px 0 32px; padding: 32px; background: var(--stok-surface); border: 1px solid var(--stok-border); border-radius: var(--stok-radius-xl); box-shadow: var(--stok-shadow-3); color: var(--stok-ink); }
.stok-auth .login-form h1 { margin: 0 0 8px; font-size: var(--stok-fs-h2); line-height: var(--stok-lh-h2); font-weight: 600; color: var(--stok-ink); }
.stok-auth__hint { margin: 0 0 16px; font-size: var(--stok-fs-sm); line-height: var(--stok-lh-sm); color: var(--stok-ink-2); }
.stok-auth__field { margin-bottom: 16px; }
.stok-auth__field label { display: block; margin-bottom: 6px; }
.stok-auth__error { display: block; font-size: var(--stok-fs-sm); line-height: var(--stok-lh-sm); color: var(--stok-danger-ink); }
/* Validator Display=Static nascosto (visibility:hidden): non occupa una riga vuota */
.stok-auth__error[style*="visibility:hidden"],
.stok-auth__error[style*="visibility: hidden"] { display: none; }

/* Bolla conteggio (label-danger) */
.label {
  border-radius: var(--stok-radius-pill);
  font-weight: 600;
}
.label-danger,
.label.label-danger {
  background: var(--stok-danger);
  color: var(--stok-ink-inverse);
}

/* =============================================================================
   Colori testo materialadmin/bootstrap -> inchiostri STOK (leggibili nei 2 temi)
   ============================================================================= */
.text-default,
.text-default-dark {
  color: var(--stok-ink);
}
.text-default-light,
.text-muted {
  color: var(--stok-ink-3);
}
.text-primary,
.text-primary-dark,
.text-primary-light,
.text-accent {
  color: var(--stok-accent-ink);
}
.text-info { color: var(--stok-info-ink); }
.text-success { color: var(--stok-success-ink); }
.text-warning { color: var(--stok-warning-ink); }
.text-danger { color: var(--stok-danger-ink); }

/* =============================================================================
   Form
   ============================================================================= */
label {
  color: var(--stok-ink-2);
  font-size: var(--stok-fs-sm);
}
.form-control,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  height: var(--stok-control-h-touch);
  padding: 0 var(--stok-space-3);
  background: var(--stok-surface-2);
  border: 1px solid var(--stok-border);
  border-radius: var(--stok-radius-md);
  color: var(--stok-ink);
  font-family: var(--stok-font);
  font-size: 16px;
  line-height: 22px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color var(--stok-dur) var(--stok-ease), box-shadow var(--stok-dur) var(--stok-ease);
  transition: border-color var(--stok-dur) var(--stok-ease), box-shadow var(--stok-dur) var(--stok-ease);
}
textarea,
textarea.form-control {
  height: auto;
  min-height: 88px;
  padding: 10px var(--stok-space-3);
}
.form-control:focus,
.form-group .form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  /* annulla il verde #DFF2BF di mycss.css (input[type=text|number]:focus, select:focus) */
  background-color: var(--stok-surface-2);
  border-color: var(--stok-cyan);
  -webkit-box-shadow: var(--stok-shadow-glow);
  box-shadow: var(--stok-shadow-glow);
}
.form-control[disabled],
.form-control[readonly],
input[disabled],
select[disabled],
textarea[disabled] {
  background: var(--stok-surface);
  border-color: var(--stok-border);
  border-style: solid;
  color: var(--stok-ink-3);
}
.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: var(--stok-ink-3); opacity: 1; }
.form-control::-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder { color: var(--stok-ink-3); opacity: 1; }
.form-control:-ms-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: var(--stok-ink-3); }
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--stok-ink-3); opacity: 1; }
/* Linea animata materialadmin sotto i campi in .form-group (era #0aa89e) */
.form-group .form-control ~ label:after,
.form-group .form-control ~ .form-control-line:after {
  background-color: var(--stok-cyan);
}
.form-group .form-control:focus ~ label {
  color: var(--stok-accent-ink);
}
select option {
  background: var(--stok-surface);
  color: var(--stok-ink);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--stok-cyan);
}

/* =============================================================================
   Tabelle (GridView -> <table class="table ...">)
   ============================================================================= */
.table,
table.table {
  background: transparent;
  color: var(--stok-ink);
  border-color: var(--stok-border);
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
  background: var(--stok-surface-2);
  color: var(--stok-ink-2);
  font-size: var(--stok-fs-overline);
  line-height: var(--stok-lh-overline);
  font-weight: 600;
  letter-spacing: var(--stok-tracking-overline);
  text-transform: uppercase;
  border-top: 0;
  border-bottom: 1px solid var(--stok-border);
  vertical-align: middle;
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  height: var(--stok-row-h);
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--stok-border);
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background: transparent;
}
.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover {
  background: var(--stok-row-hover);
}
.table > tbody > tr.active > td,
.table > tbody > tr.selected > td,
.table > tbody > tr.active:hover > td,
.table > tbody > tr.selected:hover > td {
  background: var(--stok-surface-3);
}
.table > tbody > tr.success > td { background: var(--stok-success-soft); }
.table > tbody > tr.warning > td { background: var(--stok-warning-soft); }
.table > tbody > tr.danger > td { background: var(--stok-danger-soft); }
.table > tbody > tr.info > td { background: var(--stok-info-soft); }
/* GridView non hanno bordi verticali (rules="all" di ASP.NET) ne' cornice esterna */
.table,
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-left: 0;
  border-right: 0;
}
.table { border-top: 0; border-bottom: 0; }

/* Elenchi a card (table.stok-list marcata da stok-theme.js): una card per riga come le liste web.
   !important solo dove l'altezza/larghezza arriva da attributi inline della LinkButton (Height=110px). */
table.stok-list { width: 100% !important; table-layout: fixed; }
table.stok-list > tbody > tr > td {
  height: auto;
  padding: 0 0 var(--stok-space-2) 0;
  border: 0;
}
table.stok-list > tbody > tr:hover,
table.stok-list > tbody > tr:hover > td { background: transparent; }
table.stok-list > tbody > tr > td > .btn {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  padding: var(--stok-space-3) var(--stok-space-4);
  border: 1px solid var(--stok-border);
  border-radius: var(--stok-radius-lg);
  background: var(--stok-surface);
  color: var(--stok-ink);
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}
/* pulsanti flottanti dentro la card (es. elimina "X" pull-right): la card li contiene senza altezza fissa */
table.stok-list > tbody > tr > td > .btn::after { content: ""; display: table; clear: both; }
/* Stati interattivi e stati riga con ".btn.btn" -> specificita' (0,4,4): battono i riempimenti pieni
   tipo .btn.btn-success:active:hover (0,4,0), cosi' una riga non lampeggia a colore pieno */
table.stok-list > tbody > tr > td > .btn.btn:hover,
table.stok-list > tbody > tr > td > .btn.btn:focus { background: var(--stok-surface-2); border-color: var(--stok-border-strong); color: var(--stok-ink); }
/* Stato riga (aperto/in corso/finito dal code-behind): tinta soft + bordo sinistro colorato, come i badge di stato web */
table.stok-list > tbody > tr > td > .btn.btn-warning,
table.stok-list > tbody > tr > td > .btn.btn-warning:hover,
table.stok-list > tbody > tr > td > .btn.btn-warning:focus { background: var(--stok-warning-soft); border-color: var(--stok-warning-ring); border-left: 4px solid var(--stok-warning); color: var(--stok-ink); }
table.stok-list > tbody > tr > td > .btn.btn-success,
table.stok-list > tbody > tr > td > .btn.btn-success:hover,
table.stok-list > tbody > tr > td > .btn.btn-success:focus { background: var(--stok-success-soft); border-color: var(--stok-success-ring); border-left: 4px solid var(--stok-success); color: var(--stok-ink); }
table.stok-list > tbody > tr > td > .btn.btn-danger,
table.stok-list > tbody > tr > td > .btn.btn-danger:hover,
table.stok-list > tbody > tr > td > .btn.btn-danger:focus { background: var(--stok-danger-soft); border-color: var(--stok-danger-ring); border-left: 4px solid var(--stok-danger); color: var(--stok-ink); }
table.stok-list > tbody > tr > td > .btn.btn-info,
table.stok-list > tbody > tr > td > .btn.btn-info:hover,
table.stok-list > tbody > tr > td > .btn.btn-info:focus,
table.stok-list > tbody > tr > td > .btn.btn-primary,
table.stok-list > tbody > tr > td > .btn.btn-primary:hover,
table.stok-list > tbody > tr > td > .btn.btn-primary:focus { background: var(--stok-info-soft); border-color: var(--stok-cyan-ring); border-left: 4px solid var(--stok-cyan); color: var(--stok-ink); }
/* Pressione: feedback ciano per ogni riga (ultima regola a pari specificita') */
table.stok-list > tbody > tr > td > .btn.btn:active,
table.stok-list > tbody > tr > td > .btn.btn.active { background: var(--stok-cyan-soft); border-color: var(--stok-cyan); color: var(--stok-ink); }
/* Testi riga: prima riga in evidenza, le altre secondarie (le label legacy text-xl erano tutte a 23px) */
table.stok-list .btn label,
table.stok-list .btn .text-xl,
table.stok-list .btn .text-lg {
  font-size: var(--stok-fs-body);
  line-height: var(--stok-lh-body);
  font-weight: 400;
  color: var(--stok-ink-2);
}
/* Badge contatore in testa alla riga (pick): resta badge, la riga titolo e' la label che lo segue */
table.stok-list .btn label.badge {
  margin-right: var(--stok-space-2);
  font-size: var(--stok-fs-caption);
  line-height: 18px;
  font-weight: 600;
  vertical-align: 1px;
}
table.stok-list .btn label:first-of-type:not(.badge),
table.stok-list .btn label.badge + label {
  font-size: var(--stok-fs-body-lg);
  line-height: var(--stok-lh-body-lg);
  font-weight: 600;
  color: var(--stok-ink);
}

/* =============================================================================
   Messaggi (#divmsg + .error/.success/.warning/.info gestiti da HideLabel)
   display:none resta nei master/pagine; HideLabel mette display:block inline
   ============================================================================= */
#divmsg {
  display: none;
  position: fixed;
  top: calc(var(--stok-chrome-h) + 8px);
  bottom: auto;
  left: 8px;
  right: 8px;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 100010;
}
.error,
.success,
.warning,
.info {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--stok-radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: var(--stok-lh-body);
  text-align: center;
}
.error {
  background: var(--stok-danger-soft);
  border-color: var(--stok-danger-ring);
  color: var(--stok-danger-ink);
}
.success {
  background: var(--stok-success-soft);
  border-color: var(--stok-success-ring);
  color: var(--stok-success-ink);
}
.warning {
  background: var(--stok-warning-soft);
  border-color: var(--stok-warning-ring);
  color: var(--stok-warning-ink);
}
.info {
  background: var(--stok-info-soft);
  border-color: var(--stok-cyan-ring);
  color: var(--stok-info-ink);
}
/* I *-soft sono trasparenti: sotto serve una superficie opaca per non
   mescolarsi col contenuto che scorre dietro il messaggio fisso */
#divmsg.error,
#divmsg.success,
#divmsg.warning,
#divmsg.info {
  -webkit-box-shadow: var(--stok-shadow-2);
  box-shadow: var(--stok-shadow-2);
}
#divmsg.error { background: linear-gradient(var(--stok-danger-soft), var(--stok-danger-soft)), var(--stok-surface); }
#divmsg.success { background: linear-gradient(var(--stok-success-soft), var(--stok-success-soft)), var(--stok-surface); }
#divmsg.warning { background: linear-gradient(var(--stok-warning-soft), var(--stok-warning-soft)), var(--stok-surface); }
#divmsg.info { background: linear-gradient(var(--stok-info-soft), var(--stok-info-soft)), var(--stok-surface); }
#divmsg.error *,
#divmsg.success *,
#divmsg.warning *,
#divmsg.info * {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
}

/* =============================================================================
   Modali (Bootstrap .modal + AjaxControlToolkit ModalPopupExtender)
   ============================================================================= */
.modal-content {
  background: var(--stok-surface);
  color: var(--stok-ink);
  border: 1px solid var(--stok-border);
  border-radius: var(--stok-radius-lg);
  -webkit-box-shadow: var(--stok-shadow-3);
  box-shadow: var(--stok-shadow-3);
}
.modal-header {
  border-bottom: 1px solid var(--stok-border);
}
.modal-footer {
  border-top: 1px solid var(--stok-border);
}
.modal-title {
  color: var(--stok-ink);
}
.close {
  color: var(--stok-ink-2);
  text-shadow: none;
  opacity: 1;
}
.close:hover,
.close:focus {
  color: var(--stok-accent-ink);
  opacity: 1;
}
/* mycss.css:1531 colora di nero il contenitore .modal: ora fa da velo il backdrop */
.modal {
  background-color: transparent;
}
.modal-backdrop,
.modal-backdrop.in,
.modalBackground {
  background: var(--stok-overlay);
  opacity: 1;
  filter: none;
}
.modalPopupInfo {
  /* Width="400" inline nelle pagine: su palmari da 360px il popup non deve uscire dallo schermo */
  max-width: calc(100vw - 24px);
  height: auto !important;
  min-height: 150px;
  -webkit-box-shadow: var(--stok-shadow-3);
  box-shadow: var(--stok-shadow-3);
}

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