/* =============================================================================
 * Tema Sapel - foglio di stile condiviso da sapel-backoffice e sapel-burundi
 * -----------------------------------------------------------------------------
 * Foglio globale delle due app (lo importano i loro root layout; Burundi
 * aggiunge dopo src/styles/burundi.css con i suoi componenti), scritto da zero
 * senza Bootstrap. Il sito pubblico non lo usa.
 * I nomi delle utility (d-flex, mb-2, text-muted...) e dei componenti (btn,
 * form-control, modal...) restano quelli usati dal markup, anche dai
 * componenti condivisi di @sapel-suite/ui, ma le regole sono tutte nostre e
 * leggono i colori dai token --sapel-*, così tema chiaro e scuro vengono da
 * soli. Le regole proprietarie usano il prefisso `sapel-`.
 *
 * Indice
 *   1. Token
 *   2. Base: reset ed elementi HTML
 *   3. Utility
 *   4. Griglia
 *   5. Componenti: pulsanti, campi, modali, tabelle, avvisi, menu, tooltip
 *   6. Componenti e utility proprietari Sapel
 *   7. Tema chiaro e scuro (token di superficie e testo)
 * ========================================================================== */

/* ==========================================================================
 * 1. Token
 * -------------------------------------------------------------------------
 * Superfici e testi (--sapel-surface, --sapel-text...) sono nella sezione 7;
 * qui colori di stato, raggi, ombre e tempi. Nel tema scuro cambiano solo i
 * valori, i nomi restano gli stessi.
 *
 * Il colore d'accento (primario, testo e fondo d'evidenza, barra laterale) è
 * una tinta oklch, --sapel-hue e --sapel-chroma, scelta con l'attributo
 * data-accent dell'<html> (pannello Aspetto dell'header). Le tinte sono le
 * stesse di Heaven; "sapel" è il rosa del marchio e vale anche senza scelta.
 * ========================================================================= */

:root {
  --sapel-hue: 347.6;
  --sapel-chroma: 0.198;
}

[data-accent='indaco'] { --sapel-hue: 275; --sapel-chroma: 0.19; }
[data-accent='blu'] { --sapel-hue: 245; --sapel-chroma: 0.17; }
[data-accent='smeraldo'] { --sapel-hue: 162; --sapel-chroma: 0.14; }
[data-accent='ambra'] { --sapel-hue: 62; --sapel-chroma: 0.16; }
[data-accent='viola'] { --sapel-hue: 305; --sapel-chroma: 0.18; }

:root {
  --sapel-font: 'Titillium Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sapel-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, monospace;

  --sapel-bg: #f4f5f7;
  --sapel-field-bg: var(--sapel-surface);
  --sapel-scrollbar: #c9ced6;
  --sapel-scrollbar-hover: #a8afba;

  --sapel-primary: oklch(0.519 var(--sapel-chroma) var(--sapel-hue));
  --sapel-primary-hover: oklch(0.471 var(--sapel-chroma) var(--sapel-hue));
  --sapel-primary-active: oklch(0.423 var(--sapel-chroma) var(--sapel-hue));
  --sapel-on-primary: #fff;
  --sapel-ring: oklch(0.519 var(--sapel-chroma) var(--sapel-hue) / 0.22);

  --sapel-success: #0f7a55;
  --sapel-success-soft: #e8f6ef;
  --sapel-success-border: #b5e0cb;
  --sapel-danger: #d0344f;
  --sapel-danger-soft: #fdecef;
  --sapel-danger-border: #f5c0ca;
  --sapel-danger-ring: rgb(208 52 79 / 0.2);
  --sapel-warning: #a35a00;
  --sapel-warning-soft: #fdf3e2;
  --sapel-warning-border: #f2d39b;
  --sapel-info: #2563eb;
  --sapel-info-soft: #eaf1fe;
  --sapel-info-border: #bdd1fb;

  --sapel-backdrop: rgb(15 18 25 / 0.45);
  --sapel-tooltip-bg: #1d2129;
  --sapel-tooltip-text: #f4f5f7;
  /* Fondo delle anteprime email: bianco anche col tema scuro, come nei client di posta */
  --sapel-mail-paper: #fff;

  --sapel-radius-sm: 6px;
  --sapel-radius: 8px;
  --sapel-radius-lg: 12px;
  --sapel-radius-xl: 16px;

  --sapel-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --sapel-shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
  --sapel-shadow-md: 0 6px 16px -4px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.05);
  --sapel-shadow-lg: 0 24px 48px -12px rgb(16 24 40 / 0.22), 0 4px 12px -4px rgb(16 24 40 / 0.08);

  --sapel-ease: cubic-bezier(0.2, 0, 0, 1);
  --sapel-fast: 150ms;

  /* Freccia delle select native e spunta delle checkbox */
  --sapel-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme='dark'] {
  --sapel-bg: #111317;
  --sapel-field-bg: #17191e;
  --sapel-scrollbar: #3a404a;
  --sapel-scrollbar-hover: #4f5662;

  --sapel-primary: oklch(0.565 var(--sapel-chroma) var(--sapel-hue));
  --sapel-primary-hover: oklch(0.609 var(--sapel-chroma) var(--sapel-hue));
  --sapel-primary-active: oklch(0.519 var(--sapel-chroma) var(--sapel-hue));
  --sapel-ring: oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue) / 0.28);

  --sapel-success: #4cc895;
  --sapel-success-soft: rgb(76 200 149 / 0.12);
  --sapel-success-border: rgb(76 200 149 / 0.3);
  --sapel-danger: #ff7d93;
  --sapel-danger-soft: rgb(255 125 147 / 0.12);
  --sapel-danger-border: rgb(255 125 147 / 0.32);
  --sapel-danger-ring: rgb(255 125 147 / 0.25);
  --sapel-warning: #f5b75a;
  --sapel-warning-soft: rgb(245 183 90 / 0.12);
  --sapel-warning-border: rgb(245 183 90 / 0.3);
  --sapel-info: #7aa7ff;
  --sapel-info-soft: rgb(122 167 255 / 0.12);
  --sapel-info-border: rgb(122 167 255 / 0.3);

  --sapel-backdrop: rgb(0 0 0 / 0.6);
  --sapel-tooltip-bg: #e9ebef;
  --sapel-tooltip-text: #15171c;

  --sapel-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --sapel-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.25);
  --sapel-shadow-md: 0 8px 20px -4px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --sapel-shadow-lg: 0 24px 56px -12px rgb(0 0 0 / 0.7), 0 4px 12px -4px rgb(0 0 0 / 0.4);

  --sapel-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3abb8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
}

/* ==========================================================================
 * 2. Base: reset ed elementi HTML
 * ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--sapel-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sapel-text);
  background-color: var(--sapel-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: url(/cursors/mouse_pink.cur), auto;
}

::selection {
  background-color: color-mix(in oklab, var(--sapel-primary) 22%, transparent);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: inherit;
}

h1,
.h1 {
  font-size: 2rem;
}

h2,
.h2 {
  font-size: 1.625rem;
}

h3,
.h3 {
  font-size: 1.375rem;
}

h4,
.h4 {
  font-size: 1.1875rem;
  font-weight: 600;
}

h5,
.h5 {
  font-size: 1.0625rem;
  font-weight: 600;
}

h6,
.h6 {
  font-size: 0.9375rem;
  font-weight: 600;
}

p,
ul,
ol,
dl {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.5rem;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-bottom: 0;
}

dt {
  font-weight: 600;
}

dd {
  margin: 0 0 0.5rem;
}

b,
strong {
  font-weight: 700;
}

small,
.small {
  font-size: 0.8125rem;
}

a {
  color: var(--sapel-accent-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--sapel-fast) var(--sapel-ease);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--sapel-border);
}

code,
kbd,
pre,
samp {
  font-family: var(--sapel-font-mono);
  font-size: 0.875em;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background-color: var(--sapel-surface-2);
  color: var(--sapel-accent-text);
}

pre {
  margin: 0 0 1rem;
  overflow: auto;
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
}

kbd {
  padding: 0.1em 0.4em;
  border: 1px solid var(--sapel-border);
  border-radius: 4px;
  background-color: var(--sapel-surface);
}

mark {
  padding: 0.1em 0.2em;
  border-radius: 3px;
  background-color: color-mix(in oklab, #ffc400 45%, transparent);
  color: inherit;
}

blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--sapel-border-strong);
  color: var(--sapel-text-2);
}

figure {
  margin: 0;
}

img,
svg,
video,
canvas {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
}

button,
input,
select,
optgroup,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

[role='button'] {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* Un solo anello di fuoco, da tastiera: i campi hanno il loro (vedi .form-control) */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--sapel-primary);
  outline-offset: 2px;
}

/* L'autocompletamento del browser non deve cambiare lo stile dei campi: sfondo e
   colore del testo imposti dal browser vengono rimandati all'infinito */
:is(input, textarea, select):is(:autofill, :-webkit-autofill) {
  transition:
    background-color 0s 600000s,
    color 0s 600000s;
}

::placeholder {
  color: var(--sapel-placeholder);
  opacity: 1;
}

/* Barre di scorrimento sottili, sul fondo della superficie */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sapel-scrollbar) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--sapel-scrollbar) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sapel-scrollbar-hover) padding-box;
}

/* Non voglio il badge di grecaptcha visibile */
.grecaptcha-badge {
  visibility: hidden;
}

/* ==========================================================================
 * 3. Utility
 * -------------------------------------------------------------------------
 * Solo quelle usate dal markup. Con !important, come ci si aspetta da una
 * utility: devono vincere sulle regole dei componenti.
 * ========================================================================= */

/* Visualizzazione */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Margini */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.mt-auto { margin-top: auto !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-100 { margin-top: 100px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-auto { margin-left: auto !important; }

/* Spaziature interne */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.ps-1 { padding-left: 0.25rem !important; }

@media (min-width: 768px) {
  .mt-md-4 { margin-top: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }
}

/* Posizione */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-100 { bottom: 100% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.end-0 { right: 0 !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* Dimensioni e overflow */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.vh-100 { height: 100vh !important; height: 100dvh !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Opacità e ombre */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }
.shadow-sm { box-shadow: var(--sapel-shadow-sm) !important; }
.shadow { box-shadow: var(--sapel-shadow-md) !important; }
.shadow-lg { box-shadow: var(--sapel-shadow-lg) !important; }

/* Bordi e angoli */
.border { border: 1px solid var(--sapel-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--sapel-border) !important; }
.border-end { border-right: 1px solid var(--sapel-border) !important; }
.border-bottom { border-bottom: 1px solid var(--sapel-border) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.rounded-1 { border-radius: var(--sapel-radius-sm) !important; }
.rounded-3 { border-radius: var(--sapel-radius-lg) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 999px !important; }

/* Testo */
.fs-1 { font-size: 2.25rem !important; }
.fs-2 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.0625rem !important; }
.fst-italic { font-style: italic !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.lh-1 { line-height: 1 !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Colori del testo e dei fondi */
.text-primary { color: var(--sapel-accent-text) !important; }
.text-secondary,
.text-muted { color: var(--sapel-muted) !important; }
.text-success { color: var(--sapel-success) !important; }
.text-danger { color: var(--sapel-danger) !important; }
.text-dark { color: var(--sapel-text) !important; }
.text-white { color: #fff !important; }
.bg-primary { background-color: var(--sapel-primary) !important; }
.bg-light { background-color: var(--sapel-surface-2) !important; }
.bg-white { background-color: var(--sapel-surface) !important; }
.bg-transparent { background-color: transparent !important; }

/* Interazione */
.user-select-none { user-select: none !important; }
.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }
.visible { visibility: visible !important; }

/* Liste */
.list-unstyled,
.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.clearfix::after {
  display: block;
  clear: both;
  content: '';
}

/* Testo per i soli lettori di schermo */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
 * 4. Griglia
 * -------------------------------------------------------------------------
 * Dodici colonne in flex; lo spazio tra le colonne è --sapel-gutter-x (vedi
 * components/ui/Grid), quello tra le righe il row-gap del contenitore.
 * ========================================================================= */

.row {
  --sapel-gutter-x: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--sapel-gutter-x) * -0.5);
  margin-left: calc(var(--sapel-gutter-x) * -0.5);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--sapel-gutter-x) * 0.5);
  padding-left: calc(var(--sapel-gutter-x) * 0.5);
}

/* Tutte e dodici: Grid.Col genera col-{span} per qualsiasi span da 1 a 12 */
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
}

/* ==========================================================================
 * 5. Componenti
 * ========================================================================= */

/* --- Pulsanti ---------------------------------------------------------------
 * .btn da solo è un pulsante "fantasma" (testo, fondo al passaggio del mouse);
 * le varianti cambiano solo le variabili --btn-*. Pieni il primario,
 * tenui (fondo e bordo della tinta) success, info e warning, a contorno gli
 * outline. */
.btn {
  --btn-bg: transparent;
  --btn-color: var(--sapel-text);
  --btn-border: transparent;
  --btn-hover-bg: var(--sapel-surface-2);
  --btn-hover-color: var(--btn-color);
  --btn-hover-border: var(--btn-border);
  --btn-active-bg: var(--btn-hover-bg);
  --btn-shadow: none;
  --btn-ring: var(--sapel-ring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--sapel-radius);
  background-color: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-color);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;
  user-select: none;
  cursor: pointer;
  transition:
    background-color var(--sapel-fast) var(--sapel-ease),
    border-color var(--sapel-fast) var(--sapel-ease),
    color var(--sapel-fast) var(--sapel-ease),
    box-shadow var(--sapel-fast) var(--sapel-ease),
    transform 80ms var(--sapel-ease);
}

.btn:hover {
  border-color: var(--btn-hover-border);
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  text-decoration: none;
}

.btn:active:not(:disabled) {
  background-color: var(--btn-active-bg);
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    var(--btn-shadow),
    0 0 0 3px var(--btn-ring);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

.btn-sm {
  min-height: 2rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--sapel-radius-sm);
  font-size: 0.8125rem;
}

.btn-primary {
  --btn-bg: var(--sapel-primary);
  --btn-color: var(--sapel-on-primary);
  --btn-border: var(--sapel-primary);
  --btn-hover-bg: var(--sapel-primary-hover);
  --btn-hover-border: var(--sapel-primary-hover);
  --btn-active-bg: var(--sapel-primary-active);
  --btn-shadow: var(--sapel-shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn-success {
  --btn-bg: var(--sapel-success-soft);
  --btn-color: var(--sapel-success);
  --btn-border: var(--sapel-success-border);
  --btn-hover-bg: color-mix(in oklab, var(--sapel-success) 16%, var(--sapel-surface));
}

.btn-warning {
  --btn-bg: var(--sapel-warning-soft);
  --btn-color: var(--sapel-warning);
  --btn-border: var(--sapel-warning-border);
  --btn-hover-bg: color-mix(in oklab, var(--sapel-warning) 16%, var(--sapel-surface));
}

.btn-info {
  --btn-bg: var(--sapel-surface);
  --btn-color: var(--sapel-text);
  --btn-border: var(--sapel-border);
  --btn-hover-bg: var(--sapel-surface-2);
  --btn-hover-border: var(--sapel-border-strong);
  --btn-shadow: var(--sapel-shadow-xs);
}

.btn-light {
  --btn-bg: var(--sapel-surface-2);
  --btn-color: var(--sapel-text);
  --btn-hover-bg: var(--sapel-border);
}

.btn-outline-secondary {
  --btn-bg: var(--sapel-surface);
  --btn-color: var(--sapel-text-2);
  --btn-border: var(--sapel-border-strong);
  --btn-hover-bg: var(--sapel-surface-2);
  --btn-hover-color: var(--sapel-text);
  --btn-shadow: var(--sapel-shadow-xs);
}

.btn-outline-danger {
  --btn-bg: transparent;
  --btn-color: var(--sapel-danger);
  --btn-border: var(--sapel-danger-border);
  --btn-hover-bg: var(--sapel-danger-soft);
  --btn-hover-border: var(--sapel-danger);
  --btn-ring: var(--sapel-danger-ring);
}

.btn-link {
  --btn-color: var(--sapel-accent-text);
  --btn-hover-bg: transparent;
  min-height: 0;
  font-weight: 600;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Pulsante di chiusura di modali e pannelli: la × è una maschera colorata
   con il colore del testo, così segue il tema */
.btn-close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sapel-radius);
  color: var(--sapel-muted);
  transition:
    background-color var(--sapel-fast) var(--sapel-ease),
    color var(--sapel-fast) var(--sapel-ease);
}

.btn-close::before {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  content: '';
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='1.75' d='M3.5 3.5l9 9m0-9l-9 9'/%3e%3c/svg%3e") center / contain no-repeat;
}

.btn-close:hover {
  background-color: var(--sapel-surface-2);
  color: var(--sapel-text);
}

/* Ingrandisci / ripristina delle finestre (Modal maximizable): come la ×, con
   il quadrato pieno o i due quadrati sovrapposti */
.sapel-modal-maximize {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border-radius: var(--sapel-radius);
  color: var(--sapel-muted);
  transition:
    background-color var(--sapel-fast) var(--sapel-ease),
    color var(--sapel-fast) var(--sapel-ease);
}

.sapel-modal-maximize::before {
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  content: '';
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='2.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='black' stroke-width='1.6'/%3e%3c/svg%3e") center / contain no-repeat;
}

.sapel-modal-maximize--on::before {
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M5.5 2.5h7a1 1 0 0 1 1 1v7M2.5 6.5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.6'/%3e%3c/svg%3e");
}

.sapel-modal-maximize:hover {
  background-color: var(--sapel-surface-2);
  color: var(--sapel-text);
}

/* "Aggiorna" nella barra del titolo (Modal con onRefresh): rilegge i dati */
.sapel-modal-refresh {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  margin-left: auto;
  padding: 0 0.625rem;
  border-radius: var(--sapel-radius);
  color: var(--sapel-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background-color var(--sapel-fast) var(--sapel-ease),
    color var(--sapel-fast) var(--sapel-ease);
}

.sapel-modal-refresh::before {
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  content: '';
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M17.651 7.65a7.131 7.131 0 0 0-12.68 3.15M18.001 4v4h-4m-7.652 8.35a7.13 7.13 0 0 0 12.68-3.15M6 20v-4h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
}

.sapel-modal-refresh:hover {
  background-color: var(--sapel-surface-2);
  color: var(--sapel-text);
}

/* Accanto ad "Aggiorna" l'ingrandimento non spinge più a destra */
.sapel-modal-refresh + .sapel-modal-maximize {
  margin-left: 0;
}

/* --- Campi -------------------------------------------------------------------
 * .form-control è il campo a riquadro. Dentro .form-group (Input, Select,
 * TextArea, date picker...) è più alto e l'etichetta sta nel campo: a riposo
 * fa da segnaposto, con .active (campo pieno o col fuoco) sale in piccolo
 * sopra al valore. */
.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sapel-border-strong);
  border-radius: var(--sapel-radius);
  background-color: var(--sapel-field-bg);
  box-shadow: var(--sapel-shadow-xs);
  color: var(--sapel-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  appearance: none;
  transition:
    border-color var(--sapel-fast) var(--sapel-ease),
    box-shadow var(--sapel-fast) var(--sapel-ease),
    background-color var(--sapel-fast) var(--sapel-ease);
}

.form-control:hover:not(:disabled, :focus),
.form-select:hover:not(:disabled, :focus) {
  border-color: var(--sapel-muted);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sapel-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--sapel-surface-2);
  box-shadow: none;
  color: var(--sapel-muted);
  cursor: not-allowed;
}

/* Sola lettura vera: i campi che si aprono con un clic (select, date picker,
   selettori di file) hanno sapel-cursor-pointer e restano come gli altri */
.form-control[readonly]:not(.sapel-cursor-pointer) {
  background-color: var(--sapel-surface-2);
  box-shadow: none;
  cursor: default;
}

.form-control[readonly]:not(.sapel-cursor-pointer):focus {
  border-color: var(--sapel-border-strong);
  box-shadow: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--sapel-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--sapel-danger-ring);
}

textarea.form-control {
  min-height: 2.5rem;
}

.form-control-sm,
.form-select-sm {
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--sapel-radius-sm);
  font-size: 0.8125rem;
}

.form-select {
  padding-right: 2.25rem;
  background-image: var(--sapel-chevron);
  background-position: right 0.625rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  cursor: pointer;
}

.form-select-sm {
  padding-right: 1.875rem;
  background-position: right 0.5rem center;
  background-size: 0.875rem;
}

.form-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--sapel-text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  user-select: none;
}

.form-text {
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.invalid-feedback {
  display: none;
  margin-top: 0.3125rem;
  padding-left: 0.125rem;
  color: var(--sapel-danger);
  font-size: 0.8125rem;
  font-weight: 500;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Campo con etichetta interna */
.form-group {
  position: relative;
  margin: 0 0 1rem;
}

.form-group.cmp-input {
  margin-top: 0.5rem;
}

.form-group .form-control {
  min-height: 3.375rem;
  padding: 1.5rem 0.875rem 0.4375rem;
  line-height: 1.35;
}

/* L'etichetta parte dove parte il testo del campo e non ha padding: scalando
   dall'angolo in alto a sinistra resta allineata al valore. Quando sale si
   ferma a metà tra il bordo superiore e il valore, non a ridosso del bordo */
.form-group > label {
  position: absolute;
  top: 0;
  left: calc(0.875rem + 1px);
  z-index: 1;
  display: block;
  max-width: calc(100% - 3.375rem);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--sapel-muted);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 3.375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform var(--sapel-fast) var(--sapel-ease),
    color var(--sapel-fast) var(--sapel-ease);
}

.form-group > label.active {
  max-width: calc((100% - 3.375rem) / 0.8);
  color: var(--sapel-text-2);
  font-weight: 600;
  transform: translateY(-0.375rem) scale(0.8);
}

.form-group:focus-within > label.active {
  color: var(--sapel-accent-text);
}

.form-group.has-danger > label.active {
  color: var(--sapel-danger);
}

/* Nelle textarea il testo scorre sotto l'etichetta: una fascia col fondo del
   campo copre il padding superiore (la barra di scorrimento resta scoperta) */
.form-group:has(> label + textarea.form-control)::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 0.75rem;
  z-index: 1;
  height: calc(1.5rem - 1px);
  border-top-left-radius: calc(var(--sapel-radius) - 1px);
  background-color: var(--sapel-field-bg);
  pointer-events: none;
}

.form-group:has(> label + textarea.form-control:is(:disabled, [readonly]))::before {
  background-color: var(--sapel-surface-2);
}

/* --- Checkbox e radio -------------------------------------------------------- */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 1.5rem;
  margin: 0.5rem 0;
}

.form-check-label {
  margin: 0;
  user-select: none;
}

.form-check-input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--sapel-border-strong);
  border-radius: 5px;
  background-color: var(--sapel-field-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
  vertical-align: middle;
  appearance: none;
  transition:
    background-color var(--sapel-fast) var(--sapel-ease),
    border-color var(--sapel-fast) var(--sapel-ease),
    box-shadow var(--sapel-fast) var(--sapel-ease);
}

.form-check-input[type='radio'] {
  border-radius: 50%;
}

.form-check-input:hover:not(:disabled) {
  border-color: var(--sapel-primary);
}

.form-check-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

/* :indeterminate solo per le caselle: per i radio il browser lo dà a tutti
 * quelli di un gruppo in cui nessuno è scelto, che sembrerebbero tutti pieni */
.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-primary);
}

.form-check-input[type='checkbox']:checked {
  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='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3.5 8.5 3 3 6-7'/%3e%3c/svg%3e");
}

.form-check-input[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-width='2.5' d='M4 8h8'/%3e%3c/svg%3e");
}

.form-check-input[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='3.5' fill='white'/%3e%3c/svg%3e");
  background-size: 1rem;
}

.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Modali ------------------------------------------------------------------
 * Montati da Modal e ConfirmDialog con .fade: la classe .show fa entrare fondo
 * e finestra. Il fondo sfoca la pagina; la finestra sale e si ingrandisce
 * appena. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--sapel-backdrop);
  backdrop-filter: blur(3px);
}

.fade {
  transition: opacity 200ms var(--sapel-ease);
}

.fade:not(.show) {
  opacity: 0;
}

.modal-dialog {
  position: relative;
  z-index: 1;
  width: auto;
  margin: 1rem;
  pointer-events: none;
  transition: transform 260ms var(--sapel-ease);
}

.modal.fade .modal-dialog {
  transform: translateY(12px) scale(0.98);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog-scrollable {
  height: calc(100% - 2rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 2rem);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-xl);
  background-color: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-lg);
  color: var(--sapel-text);
  pointer-events: auto;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem 1.125rem 1.5rem;
  border-bottom: 1px solid var(--sapel-border);
}

.modal-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1.5rem;
}

/* Il margine del dialog sale a 48px dove c'è spazio: oltre quella misura il
   modale scorre al suo interno */
@media (min-width: 768px) {
  .modal-dialog {
    margin: 48px auto;
  }

  .modal-dialog-scrollable {
    height: calc(100% - 96px);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 96px);
  }
}

/* Finestra (Modal maximizable): larghezza da size, altezza fissa e angolo per
   ridimensionarla; con DetailWindow scorre il pannello del contenuto.
   Ingrandita occupa tutto lo schermo meno un filo di margine */
.modal-dialog.sapel-modal-window {
  width: fit-content;
  max-width: none;
  margin: 1.5rem auto;
}

.sapel-modal-window .modal-content {
  width: min(var(--sapel-modal-width, 75rem), calc(100vw - 2rem));
  height: min(54rem, calc(100vh - 3rem));
  min-width: min(36rem, calc(100vw - 1rem));
  min-height: 24rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  overflow: hidden;
  resize: both;
}

.sapel-modal-window .modal-header {
  gap: 0.25rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  user-select: none;
}

/* Il corpo scorre se il contenuto è più alto della finestra; DetailWindow
   (.sapel-detail con flex: 1 e min-height: 0) la riempie e non lo fa mai
   scattare. I figli non si schiacciano: scorre il corpo */
.sapel-modal-window .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.875rem 1rem 1rem;
  overflow-y: auto;
}

.sapel-modal-window .modal-body > * {
  flex-shrink: 0;
}

.modal-dialog.sapel-modal-window--full {
  margin: 0.5rem auto;
}

.sapel-modal-window--full .modal-content {
  width: calc(100vw - 1rem);
  height: calc(100vh - 1rem);
  resize: none;
}

@media (max-width: 767.98px) {
  .modal-dialog.sapel-modal-window {
    margin: 0.5rem auto;
  }

  .sapel-modal-window .modal-content {
    width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
    min-width: 0;
    resize: none;
  }
}

/* --- Card ------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background-color: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
  color: var(--sapel-text);
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sapel-border);
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

/* --- Tabelle ---------------------------------------------------------------- */
.table {
  width: 100%;
  margin-bottom: 1rem;
  background-color: var(--sapel-surface);
  color: var(--sapel-text);
  font-size: 0.875rem;
  vertical-align: top;
}

.table > :not(caption) > * > * {
  border-bottom: 1px solid var(--sapel-border);
  background-color: transparent;
}

.table > thead {
  vertical-align: bottom;
}

.table > thead th {
  color: var(--sapel-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.table > tbody > tr:last-child > * {
  border-bottom: 0;
}

.table > tbody > tr > * {
  transition: background-color var(--sapel-fast) var(--sapel-ease);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: color-mix(in oklab, var(--sapel-surface-2) 55%, transparent);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--sapel-accent-soft);
}

.table-sm > :not(caption) > * > * {
  padding: 0.375rem 0.5rem;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Avvisi ----------------------------------------------------------------- */
.alert {
  --alert-color: var(--sapel-text);
  --alert-bg: var(--sapel-surface-2);
  --alert-border: var(--sapel-border);
  position: relative;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--alert-border);
  border-radius: var(--sapel-radius);
  background-color: var(--alert-bg);
  color: var(--alert-color);
}

.alert-warning {
  --alert-color: var(--sapel-warning);
  --alert-bg: var(--sapel-warning-soft);
  --alert-border: var(--sapel-warning-border);
}

.alert-danger {
  --alert-color: var(--sapel-danger);
  --alert-bg: var(--sapel-danger-soft);
  --alert-border: var(--sapel-danger-border);
}

.alert-success {
  --alert-color: var(--sapel-success);
  --alert-bg: var(--sapel-success-soft);
  --alert-border: var(--sapel-success-border);
}

.alert-info {
  --alert-color: var(--sapel-info);
  --alert-bg: var(--sapel-info-soft);
  --alert-border: var(--sapel-info-border);
}

/* --- Pannelli a tendina --------------------------------------------------------
 * Contenitore dei pannelli in portale (date e color picker, filtri e colonne
 * della tabella): z-index 1060, sopra al modale (1055). */
.dropdown-menu {
  position: absolute;
  z-index: 1060;
  display: none;
  min-width: 10rem;
  margin: 0;
  padding: 0.375rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background-color: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-lg);
  color: var(--sapel-text);
  font-size: 0.875rem;
  list-style: none;
  text-align: left;
}

.dropdown-menu.show {
  display: block;
  animation: sapel-pop-in 140ms var(--sapel-ease);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--sapel-radius-sm);
  color: var(--sapel-text);
  white-space: nowrap;
}

.dropdown-item:hover {
  background-color: var(--sapel-surface-2);
  color: var(--sapel-text);
  text-decoration: none;
}

.dropdown-item.active {
  background-color: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

@keyframes sapel-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu.show {
    animation: none;
  }
}

/* --- Tooltip ---------------------------------------------------------------- */
.tooltip-inner {
  z-index: 1080;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--sapel-radius-sm);
  background-color: var(--sapel-tooltip-bg);
  box-shadow: var(--sapel-shadow-md);
  color: var(--sapel-tooltip-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* --- Wizard a passi (Steppers) -----------------------------------------------
 * Passaggi numerati uniti da una linea che si colora man mano; su schermi
 * stretti resta l'etichetta del solo passaggio corrente. */
.sapel-steps {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.sapel-steps-item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  color: var(--sapel-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.sapel-steps-item:last-child {
  flex: 0 1 auto;
}

.sapel-steps-item:not(:last-child)::after {
  flex: 1 1 1rem;
  min-width: 1rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--sapel-border);
  content: '';
  transition: background-color 300ms var(--sapel-ease);
}

.sapel-steps-item.is-done::after {
  background-color: var(--sapel-primary);
}

.sapel-steps-item.is-active {
  color: var(--sapel-text);
}

.sapel-steps-item.is-done {
  color: var(--sapel-text-2);
}

.sapel-steps-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--sapel-border-strong);
  border-radius: 50%;
  background-color: var(--sapel-surface);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 200ms var(--sapel-ease),
    border-color 200ms var(--sapel-ease),
    box-shadow 200ms var(--sapel-ease);
}

.sapel-steps-dot svg {
  width: 14px;
  height: 14px;
}

.is-active > .sapel-steps-dot {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-primary);
  box-shadow: 0 0 0 4px var(--sapel-ring);
  color: var(--sapel-on-primary);
}

.is-done > .sapel-steps-dot {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-steps-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .sapel-steps-item:not(.is-active) .sapel-steps-label {
    display: none;
  }
}

.sapel-steps-card {
  padding: 1.5rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background-color: var(--sapel-surface-2);
}

.sapel-steps-card-header {
  margin-bottom: 1rem;
}

.sapel-steps-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.sapel-steps-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sapel-border);
}

.sapel-steps-nav .btn {
  min-width: 7.5rem;
}

/* ==========================================================================
 * 6. Componenti e utility proprietari Sapel
 * ========================================================================= */

.sapel-icon-24 {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sapel-icon-18 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sapel-cursor-pointer {
  cursor: pointer;
}

.sapel-icon-hover-danger {
  transition: color 0.2s ease-in-out;
}

.sapel-icon-hover-danger:hover {
  color: var(--sapel-danger);
}

.sapel-hover-light:hover {
  background-color: var(--sapel-surface-2);
}

.sapel-icon-16 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* TextArea: cresce col testo (lo fa il componente) fino a un massimo, poi scorre */
.sapel-textarea-fixed {
  max-height: 175px;
  resize: none;
  overflow-y: auto;
}

.sapel-img-preview-xs {
  max-width: 20rem;
}

/* Sfondo della home del sito: grigio ardesia (--sapel-gray-800 del sito). Nel login
   e nella home della dashboard ci si somma il canvas animato, in accesso negato è fisso */
.sapel-hero__bg {
  position: absolute;
  inset: 0;
  background-color: oklch(27.8% 0.033 256.848);
}

/* Canvas WebGL (vedi HeroBackground in @sapel-suite/ui) sopra una griglia di punti leggera */
.sapel-hero__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.5px);
  background-size: 28px 28px;
}

.sapel-hero__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Variante per la home della dashboard. Nel tema scuro resta il fondo grigio
   ardesia del login; nel chiaro diventa il grigio chiaro della pagina, con la
   griglia scura e l'animazione attenuata per non disturbare i contenuti */
:root:not([data-theme='dark']) .sapel-hero__bg--dashboard {
  background-color: var(--sapel-bg);
}

:root:not([data-theme='dark']) .sapel-hero__bg--dashboard .sapel-hero__canvas {
  background-image: radial-gradient(rgb(0 0 0 / 0.08) 1px, transparent 1.5px);
}

:root:not([data-theme='dark']) .sapel-hero__bg--dashboard .sapel-hero__canvas canvas {
  opacity: 0.6;
}

/* Saluto della home della dashboard: vetro smerigliato sopra lo sfondo animato,
   così il testo resta leggibile quando le icone ci passano sotto */
.sapel-dashboard-welcome {
  max-width: 44rem;
  padding: 2rem 2.5rem;
  border: 1px solid color-mix(in oklab, var(--sapel-border) 70%, transparent);
  border-radius: var(--sapel-radius-xl);
  background-color: color-mix(in oklab, var(--sapel-surface) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sapel-shadow-lg);
  text-align: center;
}

[data-theme='dark'] .sapel-dashboard-welcome {
  border-color: color-mix(in oklab, #fff 12%, transparent);
  background-color: color-mix(in oklab, #fff 6%, transparent);
}

@media (max-width: 575.98px) {
  .sapel-dashboard-welcome {
    padding: 1.5rem;
  }
}

/* Card di login: ripresa della card hero della home del sito (sapel-hero__card).
   Intestazione e form in vetro scuro sul fondo grigio: affiancati da
   tablet in su, uno sopra l'altro su mobile. */
.sapel-login-card {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: color-mix(in oklab, #fff 5%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

.sapel-login-card__header {
  padding: 2rem 1.5rem;
  color: #fff;
}

.sapel-login-card__body {
  padding: 1.5rem;
  color: #fff;
  background-color: rgb(0 0 0 / 0.25);
  border-top: 1px solid color-mix(in oklab, #fff 10%, transparent);
}

.sapel-login-card__muted {
  color: color-mix(in oklab, #fff 65%, transparent);
}

/* Sul vetro scuro i campi hanno testo, etichetta e bordo chiari e il fondo
   semitrasparente, in entrambi i temi */
.sapel-login-card__body .form-group .form-control {
  color: #fff;
  background-color: color-mix(in oklab, #fff 6%, transparent);
  border-color: color-mix(in oklab, #fff 22%, transparent);
  box-shadow: none;
}

.sapel-login-card__body .form-group .form-control:hover:not(:focus) {
  border-color: color-mix(in oklab, #fff 40%, transparent);
}

.sapel-login-card__body .form-group .form-control:focus {
  background-color: color-mix(in oklab, #fff 10%, transparent);
  border-color: oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue));
  box-shadow: 0 0 0 3px oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue) / 0.25);
}

.sapel-login-card__body .form-group .form-control.is-invalid {
  border-color: #ff8a9b;
}

.sapel-login-card__body .form-group label {
  color: color-mix(in oklab, #fff 65%, transparent) !important;
}

.sapel-login-card__body .form-group label.active {
  color: #fff !important;
}

.sapel-login-card__body .text-danger,
.sapel-login-card__body .invalid-feedback {
  color: #ff8a9b !important;
}

@media (min-width: 48rem) {
  .sapel-login-card {
    max-width: 60rem;
    flex-direction: row;
  }

  .sapel-login-card__header {
    flex: 1 1 50%;
    padding: 3rem 2.5rem;
  }

  .sapel-login-card__body {
    flex: 1 1 60%;
    padding: 2.5rem;
    border-top: 0;
    border-left: 1px solid color-mix(in oklab, #fff 10%, transparent);
  }
}

.sapel-login-card__badge {
  border-radius: 9999px;
  border-color: color-mix(in oklab, #fff 20%, transparent) !important;
  background-color: color-mix(in oklab, #fff 10%, transparent);
  padding-block: 0.375rem;
  font-size: 0.75rem;
  line-height: calc(1 / 0.75);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}

.sapel-login-card__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}

.sapel-login-card__title {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  justify-content: center;
  width: fit-content;
}

.sapel-login-card__initial {
  font-size: 2rem !important;
  line-height: 1.1 !important;
  font-weight: 700;
}

.sapel-login-card__word {
  align-self: center;
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  font-weight: 600;
}

@media (min-width: 40rem) {
  .sapel-login-card__initial {
    font-size: 2.5rem !important;
    line-height: 1 !important;
  }

  .sapel-login-card__word {
    font-size: 1.375rem !important;
    line-height: calc(2 / 1.5) !important;
  }
}

.sapel-login-card__bar {
  height: 0.25rem;
  width: 5rem;
  border-radius: 9999px;
  background-image: linear-gradient(to right in oklab, var(--sapel-primary) 0%, transparent 100%);
}

/* Modulo di accesso di Keycloak nella card di login del backoffice (iframe di
   app/login/page.js). L'altezza la mette il tema di Keycloak (js/sapel.js),
   che aggiunge anche .is-ready: fino ad allora il corpo della card resta
   invisibile, così titolo e modulo compaiono già al loro posto */
.sapel-login-frame {
  display: block;
  /* 4px per lato per l'anello di focus dei campi (keycloak.css del tema) */
  width: calc(100% + 8px);
  height: 0;
  margin: -4px;
  border: 0;
}

.sapel-login-card__body > * {
  transition: opacity var(--sapel-fast) var(--sapel-ease);
}

.sapel-login-card__body:has(.sapel-login-frame:not(.is-ready)) > * {
  opacity: 0;
}

.sapel-mt-24 {
  margin-top: 6rem;
}

/* --- Profilo ----------------------------------------------------------------
 * Intestazione con avatar e dati fissi dell'utente, sotto due card: dati
 * personali (più larga) e cambio password, affiancate da 992px */
.sapel-profile {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.sapel-profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--sapel-accent-soft) 0%, transparent 55%),
    var(--sapel-surface);
  box-shadow: var(--sapel-shadow-sm);
}

.sapel-profile-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg in oklab, var(--sapel-primary), var(--sapel-primary-active));
  box-shadow:
    0 0 0 3px var(--sapel-surface),
    0 0 0 4px var(--sapel-border);
  color: var(--sapel-on-primary);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sapel-profile-hero__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.sapel-profile-hero__text h1 {
  margin: 0;
  color: var(--sapel-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.sapel-profile-hero__email {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  overflow: hidden;
  color: var(--sapel-muted);
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-profile-hero__email svg,
.sapel-profile-tag svg {
  width: 16px;
  height: 16px;
}

.sapel-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sapel-profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: 999px;
  background: var(--sapel-surface);
  color: var(--sapel-text-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sapel-profile-tag--accent {
  border-color: transparent;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-profile-card__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--sapel-border);
}

.sapel-profile-card__head h2 {
  margin: 0;
  color: var(--sapel-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.sapel-profile-card__head p {
  margin: 0.125rem 0 0;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-profile-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--sapel-radius);
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-profile-card__icon svg {
  width: 20px;
  height: 20px;
}

/* Ruoli: gruppi per categoria come in RolesInput */
.sapel-profile-roles__title {
  margin: 0 0 0.25rem;
  color: var(--sapel-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sapel-profile-roles__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sapel-profile-roles__list li {
  padding: 0.25rem 0.375rem;
  color: var(--sapel-text);
  font-size: 0.875rem;
}

.sapel-profile-roles__empty {
  margin: 0;
  color: var(--sapel-muted);
}

/* Pulsante d'invio in fondo alla card, separato dai campi */
.sapel-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sapel-border);
}

@media (min-width: 768px) {
  .sapel-profile {
    padding: 2rem 1.5rem;
  }

  .sapel-profile-hero {
    gap: 1.5rem;
    padding: 2rem;
  }

  .sapel-profile-avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.375rem;
  }

  .sapel-profile-hero__text h1 {
    font-size: 1.75rem;
  }
}

/* --- Iter dei ticket ------------------------------------------------------------
 * Configuratore (Dizionari › Iter ticket): elenco degli step a sinistra e
 * dettaglio a destra, tabelle di pulsanti e attori con righe cliccabili, azioni
 * automatiche, percorso. Nel dettaglio del ticket: lo step corrente con i suoi
 * pulsanti e lo storico dei passaggi */
.sapel-checklist {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sapel-checklist__label {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sapel-text-2);
}

.sapel-checklist__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.25rem 1rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-field-bg);
}

.sapel-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.sapel-checklist__item .form-check-input {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.sapel-iter-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--sapel-border);
  border-radius: 999px;
  background: var(--sapel-surface-2);
  color: var(--sapel-text-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.sapel-iter-badge--accent {
  border-color: transparent;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-iter-badge--danger {
  border-color: var(--sapel-danger-border);
  background: var(--sapel-danger-soft);
  color: var(--sapel-danger);
}

.sapel-iter-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-iter-toolbar .btn {
  width: auto !important;
}

.sapel-iter-section {
  margin: 1.75rem 0 0.375rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sapel-border);
  font-weight: 700;
}

/* Step: elenco e dettaglio affiancati, uno sotto l'altro sugli schermi stretti */
.sapel-iter-steps {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .sapel-iter-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sapel-iter-steps__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sapel-iter-steps__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
  color: var(--sapel-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-iter-steps__item:hover {
  border-color: var(--sapel-border-strong);
}

.sapel-iter-steps__item.is-active {
  border-color: var(--sapel-primary);
  background: var(--sapel-accent-soft);
}

.sapel-iter-steps__detail {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
}

.sapel-iter-functions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.sapel-iter-functions__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
  color: var(--sapel-text);
  text-align: left;
  cursor: pointer;
}

.sapel-iter-functions__item:hover {
  border-color: var(--sapel-border-strong);
}

.sapel-iter-functions__item.is-off {
  opacity: 0.6;
}

/* Percorso: diagramma a blocchi in stile E/R (rettangoli = step, rombi =
 * pulsanti). Il disegno ha la sua misura e scorre se non entra */
.sapel-iter-diagram {
  overflow: hidden;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface-2);
}

.sapel-iter-diagram__canvas {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem;
}

.sapel-iter-diagram__canvas > svg {
  display: block;
  max-width: none;
  font-family: var(--sapel-font);
}

.sapel-iter-diagram__edge {
  fill: none;
  stroke: var(--sapel-muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.sapel-iter-diagram__edge--primario {
  stroke: var(--sapel-primary);
}

.sapel-iter-diagram__edge--pericolo {
  stroke: var(--sapel-danger);
  stroke-dasharray: 5 4;
}

.sapel-iter-diagram__arrow {
  fill: var(--sapel-muted);
}

/* Pallino "Inizio iter": pieno, con la scritta in chiaro */
.sapel-iter-diagram__start circle {
  fill: var(--sapel-text-2);
}

.sapel-iter-diagram__start text {
  fill: var(--sapel-surface);
  font-size: 11px;
  font-weight: 700;
}

.sapel-iter-diagram__arrow--primario {
  fill: var(--sapel-primary);
}

.sapel-iter-diagram__arrow--pericolo {
  fill: var(--sapel-danger);
}

.sapel-iter-diagram__box rect {
  fill: var(--sapel-surface);
  stroke: var(--sapel-border-strong);
  stroke-width: 1.5;
}

.sapel-iter-diagram__box--success rect {
  stroke: var(--sapel-success);
  stroke-width: 2.5;
}

.sapel-iter-diagram__box--danger rect {
  stroke: var(--sapel-danger);
  stroke-width: 2.5;
}

.sapel-iter-diagram__box.is-current rect {
  fill: var(--sapel-accent-soft);
  stroke: var(--sapel-primary);
  stroke-width: 3;
}

.sapel-iter-diagram__name {
  fill: var(--sapel-text);
  font-size: 13px;
  font-weight: 700;
}

.sapel-iter-diagram__info {
  fill: var(--sapel-muted);
  font-size: 11px;
}

.sapel-iter-diagram__rel polygon {
  fill: var(--sapel-surface);
  stroke: var(--sapel-border-strong);
  stroke-width: 1.5;
}

.sapel-iter-diagram__rel--primario polygon {
  stroke: var(--sapel-primary);
}

.sapel-iter-diagram__rel--secondario polygon {
  stroke: var(--sapel-warning);
}

.sapel-iter-diagram__rel--pericolo polygon {
  stroke: var(--sapel-danger);
}

.sapel-iter-diagram__rel text {
  fill: var(--sapel-text);
  font-size: 11px;
  font-weight: 600;
}

/* Percorso: il diagramma e, in alto a destra, la legenda in un riquadro a parte.
 * Sugli schermi stretti la legenda va sopra al diagramma, sempre a destra */
.sapel-iter-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 1rem;
  align-items: start;
}

/* Il riquadro è largo quanto il diagramma; se non ci sta, scorre */
.sapel-iter-path > .sapel-iter-diagram {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  max-width: 100%;
}

.sapel-iter-legend {
  grid-column: 2;
  grid-row: 1;
  padding: 0.875rem 1rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
}

@media (max-width: 1100px) {
  .sapel-iter-path {
    grid-template-columns: minmax(0, 1fr);
  }

  .sapel-iter-path > .sapel-iter-diagram,
  .sapel-iter-legend {
    grid-column: 1;
    grid-row: auto;
  }

  .sapel-iter-legend {
    justify-self: end;
    width: min(100%, 16rem);
  }
}

.sapel-iter-legend__title {
  margin: 0 0 0.625rem;
  color: var(--sapel-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sapel-iter-legend ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sapel-iter-legend li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.sapel-iter-legend svg {
  flex-shrink: 0;
}

.sapel-iter-legend li > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.25;
}

.sapel-iter-legend strong {
  color: var(--sapel-text);
  font-weight: 600;
}

.sapel-iter-legend li > span > span {
  color: var(--sapel-muted);
  font-size: 0.75rem;
}

.sapel-iter-diagram__legend-box {
  fill: var(--sapel-surface);
  stroke: var(--sapel-border-strong);
  stroke-width: 1.5;
}

.sapel-iter-diagram__legend-box--success {
  stroke: var(--sapel-success);
  stroke-width: 2.5;
}

.sapel-iter-diagram__legend-box--danger {
  stroke: var(--sapel-danger);
  stroke-width: 2.5;
}

.sapel-iter-diagram__legend-rel {
  fill: var(--sapel-surface);
  stroke: var(--sapel-primary);
  stroke-width: 1.5;
}

.sapel-iter-diagram__legend-dot {
  fill: var(--sapel-text-2);
}

.sapel-iter-diagram__legend-line {
  fill: none;
  stroke: var(--sapel-muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.sapel-iter-diagram__legend-line--danger {
  stroke: var(--sapel-danger);
  stroke-dasharray: 5 4;
}

.sapel-iter-diagram .is-clickable {
  cursor: pointer;
}

.sapel-iter-diagram__box.is-clickable:hover rect,
.sapel-iter-diagram__rel.is-clickable:hover polygon {
  fill: var(--sapel-accent-soft);
}

/* --- Table minimal (packages/ui/table/Minimal.jsx) ---------------------------
 * La Table con `minimal` dentro a un modale: allegati, risposte, iter e stato
 * ADS del ticket. Riga di strumenti (ricerca, filtri a richiesta, aggiorna),
 * tabella in un riquadro arrotondato senza righe alterne, paginazione essenziale.
 * Le righe che si aprono mostrano l'icona a destra al passaggio del mouse */
.sapel-mini-table {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.sapel-mini-table__title {
  margin: 0;
  color: var(--sapel-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.sapel-mini-table__description {
  margin: 0.125rem 0 0;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-mini-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sapel-mini-table__search {
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
  color: var(--sapel-muted);
  transition: border-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-mini-table__search:focus-within {
  border-color: var(--sapel-primary);
}

.sapel-mini-table__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--sapel-text);
  font: inherit;
}

.sapel-mini-table__count {
  margin-right: auto;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.sapel-mini-table__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
  color: var(--sapel-text-2);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    border-color var(--sapel-fast) var(--sapel-ease),
    background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-mini-table__tool--icon {
  justify-content: center;
  width: 2rem;
  padding: 0;
}

.sapel-mini-table__tool svg {
  width: 16px;
  height: 16px;
}

.sapel-mini-table__tool:hover:not(:disabled) {
  border-color: var(--sapel-border-strong);
}

.sapel-mini-table__tool.is-on {
  border-color: transparent;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-mini-table__tool:disabled {
  opacity: 0.5;
  cursor: progress;
}

.sapel-mini-table__badge {
  min-width: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background: var(--sapel-primary);
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  text-align: center;
}

.sapel-mini-table .sapel-mini-table__filters th {
  min-width: 9rem;
  padding: 0 0.5rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

/* La riga dei titoli perde il bordo: titoli e filtri fanno un'unica testata */
.sapel-mini-table thead tr:has(+ .sapel-mini-table__filters) th {
  border-bottom: 0;
}

.sapel-mini-table .sapel-mini-table__filters th:empty {
  min-width: 0;
}

.sapel-mini-table__reset {
  height: 1.875rem;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--sapel-accent-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
}

.sapel-mini-table__reset:hover {
  text-decoration: underline;
}

.sapel-mini-table__frame {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
}

.sapel-mini-table .table {
  --bs-table-bg: transparent;
}

.sapel-mini-table th {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--sapel-border);
  background: var(--sapel-surface-2);
  color: var(--sapel-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sapel-mini-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.sapel-mini-table__sort:hover,
.sapel-mini-table th[aria-sort] {
  color: var(--sapel-text);
}

.sapel-mini-table__sort svg {
  width: 14px;
  height: 14px;
}

.sapel-mini-table td {
  padding: 0.5rem 0.875rem;
  border-color: var(--sapel-border);
  color: var(--sapel-text);
}

.sapel-mini-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Colonna stretta al contenuto (date, pesi) */
.sapel-mini-table .sapel-mini-table__fit {
  width: 1%;
  white-space: nowrap;
}

.sapel-mini-table tbody tr.is-clickable {
  cursor: pointer;
  transition: background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-mini-table tbody tr.is-clickable:hover,
.sapel-mini-table tbody tr.is-clickable:focus-visible {
  background: var(--sapel-accent-soft);
  outline: none;
}

.sapel-mini-table .sapel-mini-table__action {
  width: 2.75rem;
  color: var(--sapel-accent-text);
  text-align: center;
}

.sapel-mini-table td.sapel-mini-table__action {
  opacity: 0;
  transition: opacity var(--sapel-fast) var(--sapel-ease);
}

.sapel-mini-table tr:hover td.sapel-mini-table__action,
.sapel-mini-table tr:focus-visible td.sapel-mini-table__action {
  opacity: 1;
}

@media (hover: none) {
  .sapel-mini-table td.sapel-mini-table__action {
    opacity: 1;
  }
}

.sapel-mini-table__empty {
  margin: 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--sapel-muted);
}

.sapel-mini-table td.sapel-mini-table__none {
  padding: 1.5rem;
  color: var(--sapel-muted);
  text-align: center;
}

.sapel-mini-table__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-mini-table__pager span {
  margin-right: 0.5rem;
}

.sapel-mini-table__pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
  background: var(--sapel-surface);
  color: var(--sapel-text-2);
}

.sapel-mini-table__pager button:disabled {
  opacity: 0.4;
}

.sapel-mini-table__pager svg {
  width: 14px;
  height: 14px;
}

/* Nome dell'allegato con il riquadro del tipo (estensione) accanto */
.sapel-file-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font-weight: 500;
}

.sapel-file-name__type {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--sapel-radius);
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sapel-file-name__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Nota sotto lo step nello storico dell'iter */
.sapel-mini-table__note {
  font-size: 0.8125rem;
  white-space: pre-wrap;
  color: var(--sapel-text-2);
}

/* --- Ticket a card ------------------------------------------------------------
 * Alternativa alla tabella dei ticket: barra con ricerca e azioni, poi una
 * griglia di card. Il bordo sinistro prende la tinta della priorità (data-tone) */
.sapel-ticket-cards__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
}

/* Una casella per campo (codice, oggetto, nota interna): si dividono la riga */
.sapel-ticket-cards__search {
  display: flex;
  flex: 1 1 12rem;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--sapel-border-strong);
  border-radius: var(--sapel-radius);
  background: var(--sapel-field-bg);
  color: var(--sapel-muted);
  cursor: text;
  transition:
    border-color var(--sapel-fast) var(--sapel-ease),
    box-shadow var(--sapel-fast) var(--sapel-ease);
}

.sapel-ticket-cards__search:focus-within {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-ticket-cards__search svg {
  width: 18px;
  height: 18px;
}

.sapel-ticket-cards__search input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--sapel-text);
  font: inherit;
  font-size: 0.9375rem;
}

.sapel-ticket-cards__count {
  color: var(--sapel-muted);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Aggiorna (e Aggiungi) accanto alla ricerca, a sinistra */
.sapel-ticket-cards__actions {
  display: flex;
  gap: 0.5rem;
}

.sapel-ticket-cards__actions svg {
  width: 18px;
  height: 18px;
}

/* Filtri a tendina sotto la ricerca, su tutta la riga: si dividono lo spazio
   e vanno a capo solo se stretti. Quelli in uso hanno il colore primario */
.sapel-ticket-cards__filters {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sapel-ticket-cards__filter {
  flex: 1 1 12rem;
  width: auto;
  min-width: 10rem;
}

/* Il campo, da solo o dentro al contenitore con l'icona */
.sapel-ticket-cards__filter.sapel-menu-select,
.sapel-ticket-cards__filter > .sapel-menu-select {
  min-height: 2.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8125rem;
}

.sapel-ticket-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.sapel-ticket-cards__empty {
  margin: 0;
  padding: 3rem 1rem;
  border: 1px dashed var(--sapel-border-strong);
  border-radius: var(--sapel-radius-lg);
  color: var(--sapel-muted);
  text-align: center;
}

.sapel-ticket-cards__more {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-ticket-cards__actions .btn,
.sapel-ticket-cards__more .btn {
  width: auto !important;
}

/* Card del ticket: bordo sottile uguale su tutti i lati, la priorità è il
   pallino colorato nella sua etichetta (--tone) */
.sapel-ticket-card {
  --tone: var(--sapel-muted);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-xl);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
  color: var(--sapel-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow var(--sapel-fast) var(--sapel-ease),
    transform var(--sapel-fast) var(--sapel-ease),
    border-color var(--sapel-fast) var(--sapel-ease);
}

/* Al passaggio l'ombra prende il colore primario del tema (Aspetto) */
.sapel-ticket-card:hover {
  border-color: color-mix(in oklab, var(--sapel-primary) 45%, var(--sapel-border));
  box-shadow:
    0 12px 28px -12px color-mix(in oklab, var(--sapel-primary) 60%, transparent),
    0 0 0 1px color-mix(in oklab, var(--sapel-primary) 20%, transparent);
  transform: translateY(-2px);
}

.sapel-ticket-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-ticket-card[data-tone='danger'] { --tone: var(--sapel-danger); }
.sapel-ticket-card[data-tone='warning'] { --tone: var(--sapel-warning); }
.sapel-ticket-card[data-tone='info'] { --tone: var(--sapel-info); }

.sapel-ticket-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sapel-ticket-card__code {
  color: var(--sapel-muted);
  font-family: var(--sapel-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sapel-ticket-card__step {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.sapel-ticket-card__subject {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sapel-ticket-card__agency {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  color: var(--sapel-text-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-ticket-card__agency svg,
.sapel-ticket-card__note svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.sapel-ticket-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sapel-ticket-card__tags:empty {
  display: none;
}

.sapel-ticket-card__tag {
  max-width: 100%;
  overflow: hidden;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--sapel-surface-2);
  color: var(--sapel-text-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La descrizione della priorità è lunga: una riga, per intero nel title.
   Il pallino ne dice la gravità */
.sapel-ticket-card__priority {
  background: color-mix(in oklab, var(--tone) 12%, transparent);
}

.sapel-ticket-card__priority::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--tone);
  vertical-align: 0.05em;
}

/* Nota interna: due righe al massimo, per intero nel title */
.sapel-ticket-card__note {
  display: -webkit-box;
  overflow: hidden;
  padding: 0.5rem 0.625rem;
  border-radius: var(--sapel-radius);
  background: var(--sapel-warning-soft);
  color: var(--sapel-text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sapel-ticket-card__note svg {
  display: inline-block;
  margin-right: 0.125rem;
  color: var(--sapel-warning);
  vertical-align: -3px;
}

.sapel-ticket-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in oklab, var(--sapel-border) 60%, transparent);
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-ticket-card__footer strong,
.sapel-ticket-card__times strong {
  color: var(--sapel-text-2);
  font-weight: 600;
}

.sapel-ticket-card__person {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--sapel-text-2);
  font-weight: 600;
}

.sapel-ticket-card__person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}

.sapel-ticket-card__person-username {
  color: var(--sapel-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.sapel-ticket-card__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--sapel-primary);
  color: var(--sapel-on-primary);
  font-size: 0.625rem;
  font-weight: 700;
}

.sapel-ticket-card__times {
  display: flex;
  gap: 1rem;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  .sapel-ticket-card:hover {
    transform: none;
  }
}

.sapel-hover-primary:hover {
  color: var(--sapel-primary);
}

.sapel-filter-row {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 0;

  text-transform: none;
  font-weight: 400;
}

.sapel-filter-row.sapel-open {
  max-height: 3.25rem;
}

.sapel-hover-bg-placeholder:hover {
  background-color: var(--sapel-surface-2);
}

.sapel-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.sapel-table-filter-input {
  border: 1px solid var(--sapel-border);
  border-radius: 6px;
  background-color: var(--sapel-field-bg);
  transition:
  border-color 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;
}

.sapel-table-filter-input:hover {
  border-color: var(--sapel-muted);
}

.sapel-table-filter-input:focus {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

select.sapel-table-filter-input {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sapel-table-filter-input[readonly] {
  cursor: pointer;
}

.sapel-table-filter-menu {

  z-index: 1060;
}

.sapel-table-filter-menu .sapel-select-option {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Voce indicata con mouse o frecce, e la parte che corrisponde alla ricerca */
.sapel-table-filter-menu .sapel-select-option.is-highlighted {
  color: var(--sapel-accent-text);
  background-color: var(--sapel-accent-soft);
}

.sapel-select-match {
  padding: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
}

.sapel-table-filter-input.sapel-is-open {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

/* Scelta delle colonne della tabella: bottone accanto all'imbuto e menu a
   spunta, con lo stesso bordo e lo stesso fuoco dei campi della riga filtri */
.sapel-columns-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: 6px;
  background-color: var(--sapel-field-bg);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sapel-gray);
  cursor: pointer;
  transition:
  border-color 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;
}

.sapel-columns-trigger:hover {
  border-color: var(--sapel-muted);
}

.sapel-columns-trigger.sapel-is-open {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-columns-count {
  padding: 0 0.375rem;
  border-radius: 999px;
  background-color: var(--sapel-accent-soft);
  font-size: 0.6875rem;
  line-height: 1.25rem;
  color: var(--sapel-accent-text);
}

.sapel-columns-menu {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--sapel-shadow-lg);
}

.sapel-columns-menu-title {
  padding: 0.625rem 1rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sapel-muted);
}

.sapel-columns-menu-list {
  max-height: 18rem;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
  overflow: auto;
}

.sapel-columns-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.375rem 1rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  text-align: left;
  color: var(--sapel-gray);
  cursor: pointer;
}

.sapel-columns-menu-item:hover:not(:disabled) {
  color: var(--sapel-accent-text);
  background-color: var(--sapel-accent-soft);
}

.sapel-columns-menu-item:disabled {
  opacity: 0.5;
  cursor: default;
}

.sapel-columns-check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--sapel-border);
  border-radius: 4px;
  background-color: var(--sapel-field-bg);
  color: var(--sapel-on-primary);
  transition:
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out;
}

.sapel-columns-check.sapel-checked {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-primary);
}

/* I comandi di paginazione usavano i bottoni outline del design system, che
   portano con se' la palette Bootstrap Italia: qui stanno sui colori primari
   Sapel, con lo stesso trattamento hover/disabilitato dei chip dei filtri. */
.sapel-paginator-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--sapel-border);
  border-radius: 50%;
  background-color: var(--sapel-field-bg);
  color: var(--sapel-primary);
  cursor: pointer;
  transition:
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  color 0.15s ease-in-out;
}

.sapel-paginator-btn:hover:not(:disabled) {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-accent-soft);
}

/* !important perche' la regola generale su :focus-visible in fondo al file
   azzera box-shadow e border-color con la stessa specificita'. */
.sapel-paginator-btn:focus-visible:not(:disabled) {
  border-color: var(--sapel-primary) !important;
  box-shadow: 0 0 0 3px var(--sapel-ring) !important;
}

.sapel-paginator-btn:disabled {
  color: var(--sapel-placeholder);
  background-color: transparent;
  cursor: default;
}

.sapel-table-filter-daterange {
  font-size: 0.8125rem;
  text-transform: none;
  font-weight: 400;
}

/* --- Viste a card con filtri (components/ui/Tree) ---------------------------
 * Barra dei filtri (campi in alto, "Filtri avanzati" che si apre sotto), riga
 * col conteggio e i filtri attivi a chip, poi le radici come card. I figli
 * stanno su una linea guida che parte dalla freccia del padre; aprendo un nodo
 * il contenitore si allunga (grid-template-rows) e le righe entrano in fila.
 * --------------------------------------------------------------------------- */
.sapel-tree-toolbar {
  padding: 0.875rem 1rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
}

.sapel-tree-toolbar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.sapel-tree-toolbar__fields,
.sapel-tree-toolbar__advanced-panel {
  display: grid;
  flex: 1 1 32rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
}

.sapel-tree-toolbar__actions {
  display: flex;
  flex: none;
  gap: 0.5rem;
}

.sapel-tree-toolbar__actions svg {
  width: 16px;
  height: 16px;
}

.sapel-tree-toolbar__advanced.is-open {
  --btn-bg: var(--sapel-accent-soft);
  --btn-color: var(--sapel-accent-text);
  --btn-border: color-mix(in oklab, var(--sapel-primary) 40%, var(--sapel-border));
  --btn-hover-bg: var(--sapel-accent-soft);
}

.sapel-tree-toolbar__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background: var(--sapel-primary);
  color: var(--sapel-on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  animation: sapel-tree-pop 220ms var(--sapel-ease) both;
}

.sapel-tree-toolbar__advanced-panel {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--sapel-border-strong);
}

.sapel-tree-filter {
  min-width: 0;
}

.sapel-tree-filter__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--sapel-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sapel-tree-filter__search {
  position: relative;
}

.sapel-tree-filter__search svg {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 16px;
  height: 16px;
  color: var(--sapel-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.sapel-tree-filter__search .form-control {
  padding-left: 2.25rem;
}

/* Tendina (MenuSelect) e data (DatePickerInput) del tema: a tutta larghezza,
 * senza il margine che il selettore della data ha nei form */
.sapel-tree-filter .sapel-menu-select {
  width: 100%;
  text-align: left;
}

.sapel-tree-filter .form-group {
  margin: 0 !important;
}

/* Qui l'etichetta sta sopra il campo, non dentro: la data torna all'altezza
 * e al padding della tendina e della ricerca accanto */
.sapel-tree-filter .form-group .form-control {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.5;
}

/* Conteggio, filtri attivi e Espandi/Comprimi tutto */
.sapel-tree-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  min-height: 2rem;
  margin: 1rem 0 0.75rem;
}

.sapel-tree-summary__count {
  margin-right: 0.25rem;
  color: var(--sapel-muted);
  font-size: 0.875rem;
}

.sapel-tree-summary__count strong {
  color: var(--sapel-text);
  font-weight: 700;
}

.sapel-tree-summary__spacer {
  flex: 1;
}

.sapel-tree-summary__expand {
  display: flex;
  gap: 0.25rem;
}

.sapel-tree-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.1875rem 0.25rem 0.1875rem 0.625rem;
  border: 1px solid color-mix(in oklab, var(--sapel-primary) 25%, transparent);
  border-radius: 999px;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-size: 0.8125rem;
  font-weight: 600;
  animation: sapel-tree-pop 220ms var(--sapel-ease) both;
}

.sapel-tree-chip__label {
  opacity: 0.75;
  font-weight: 500;
}

.sapel-tree-chip__remove {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-tree-chip__remove:hover {
  background: color-mix(in oklab, var(--sapel-primary) 18%, transparent);
}

.sapel-tree-empty {
  padding: 3rem 1rem;
  border: 1px dashed var(--sapel-border-strong);
  border-radius: var(--sapel-radius-lg);
  color: var(--sapel-muted);
  text-align: center;
}

.sapel-tree-more {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.sapel-tree-more .btn,
.sapel-tree-empty .btn,
.sapel-tree-toolbar .btn {
  width: auto !important;
}

/* Contenitore che si apre e si chiude: pannello avanzato e figli dei nodi */
.sapel-tree-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 300ms var(--sapel-ease),
    opacity 220ms var(--sapel-ease);
}

.sapel-tree-collapse[data-open='true'] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sapel-tree-collapse__inner {
  min-height: 0;
  overflow: hidden;
}

/* Nel pannello avanzato l'overflow taglierebbe l'anello di focus dei campi:
   un po' di spazio attorno, ripreso con i margini negativi */
.sapel-tree-toolbar .sapel-tree-collapse__inner {
  margin: 0 -4px -4px;
  padding: 0 4px 4px;
}

/* Radici: card che entrano dal basso una dopo l'altra */
.sapel-tree-roots,
.sapel-tree-node__children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sapel-tree-roots {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sapel-tree-roots > li {
  animation: sapel-tree-rise 380ms var(--sapel-ease) both;
}

.sapel-tree-roots > li:nth-child(2) { animation-delay: 30ms; }
.sapel-tree-roots > li:nth-child(3) { animation-delay: 60ms; }
.sapel-tree-roots > li:nth-child(4) { animation-delay: 90ms; }
.sapel-tree-roots > li:nth-child(5) { animation-delay: 120ms; }
.sapel-tree-roots > li:nth-child(6) { animation-delay: 150ms; }
.sapel-tree-roots > li:nth-child(7) { animation-delay: 180ms; }
.sapel-tree-roots > li:nth-child(8) { animation-delay: 210ms; }
.sapel-tree-roots > li:nth-child(9) { animation-delay: 240ms; }
.sapel-tree-roots > li:nth-child(n + 10) { animation-delay: 270ms; }

.sapel-tree-node[data-depth='root'] {
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
  transition:
    border-color var(--sapel-fast) var(--sapel-ease),
    box-shadow 240ms var(--sapel-ease);
}

.sapel-tree-node[data-depth='root']:hover {
  border-color: color-mix(in oklab, var(--sapel-primary) 30%, var(--sapel-border));
  box-shadow: var(--sapel-shadow-sm);
}

/* Aperta: il bordo e l'ombra prendono il colore primario del tema */
.sapel-tree-node[data-depth='root'][data-open='true'] {
  border-color: color-mix(in oklab, var(--sapel-primary) 45%, var(--sapel-border));
  box-shadow:
    0 12px 28px -14px color-mix(in oklab, var(--sapel-primary) 55%, transparent),
    0 0 0 1px color-mix(in oklab, var(--sapel-primary) 14%, transparent);
}

.sapel-tree-node__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.sapel-tree-node__row[data-expandable='true'] {
  cursor: pointer;
}

.sapel-tree-node[data-depth='root'] > .sapel-tree-node__row {
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
}

.sapel-tree-node[data-depth='child'] > .sapel-tree-node__row {
  min-height: 2.5rem;
  padding: 0.3125rem 0.5rem 0.3125rem 0.375rem;
  border-radius: var(--sapel-radius);
  transition: background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-tree-node[data-depth='child'] > .sapel-tree-node__row:hover {
  background: var(--sapel-surface-2);
}

/* Freccia: ruota di un quarto quando il nodo è aperto */
.sapel-tree-node__toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--sapel-radius);
  background: transparent;
  color: var(--sapel-muted);
  cursor: pointer;
  transition:
    background-color var(--sapel-fast) var(--sapel-ease),
    color var(--sapel-fast) var(--sapel-ease);
}

.sapel-tree-node[data-depth='child'] > .sapel-tree-node__row > .sapel-tree-node__toggle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--sapel-radius-sm);
}

.sapel-tree-node__toggle[data-empty] {
  cursor: default;
}

button.sapel-tree-node__toggle:hover {
  background: var(--sapel-surface-2);
  color: var(--sapel-text);
}

button.sapel-tree-node__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-tree-node__toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 260ms var(--sapel-ease);
}

.sapel-tree-node[data-open='true'] > .sapel-tree-node__row > .sapel-tree-node__toggle {
  color: var(--sapel-accent-text);
}

.sapel-tree-node[data-open='true'] > .sapel-tree-node__row > .sapel-tree-node__toggle svg {
  transform: rotate(90deg);
}

/* Icona in un riquadro tinto: accento di base, oppure il tono (data-tone) */
.sapel-tree-node__icon {
  --tone-bg: var(--sapel-accent-soft);
  --tone-fg: var(--sapel-accent-text);
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--sapel-radius);
  background: var(--tone-bg);
  color: var(--tone-fg);
  transition: transform 260ms var(--sapel-ease);
}

.sapel-tree-node__icon svg {
  width: 20px;
  height: 20px;
}

.sapel-tree-node[data-depth='child'] > .sapel-tree-node__row > .sapel-tree-node__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--sapel-radius-sm);
}

.sapel-tree-node[data-depth='child'] > .sapel-tree-node__row > .sapel-tree-node__icon svg {
  width: 16px;
  height: 16px;
}

.sapel-tree-node[data-depth='root'][data-open='true'] > .sapel-tree-node__row > .sapel-tree-node__icon {
  transform: scale(1.06);
}

.sapel-tree-node__icon[data-tone='success'],
.sapel-tree-badge[data-tone='success'] { --tone-bg: var(--sapel-success-soft); --tone-fg: var(--sapel-success); --tone-border: var(--sapel-success-border); }
.sapel-tree-node__icon[data-tone='warning'],
.sapel-tree-badge[data-tone='warning'] { --tone-bg: var(--sapel-warning-soft); --tone-fg: var(--sapel-warning); --tone-border: var(--sapel-warning-border); }
.sapel-tree-node__icon[data-tone='danger'],
.sapel-tree-badge[data-tone='danger'] { --tone-bg: var(--sapel-danger-soft); --tone-fg: var(--sapel-danger); --tone-border: var(--sapel-danger-border); }
.sapel-tree-node__icon[data-tone='info'],
.sapel-tree-badge[data-tone='info'] { --tone-bg: var(--sapel-info-soft); --tone-fg: var(--sapel-info); --tone-border: var(--sapel-info-border); }
.sapel-tree-node__icon[data-tone='neutral'],
.sapel-tree-badge[data-tone='neutral'] { --tone-bg: var(--sapel-surface-2); --tone-fg: var(--sapel-text-2); --tone-border: var(--sapel-border); }

.sapel-tree-node__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.sapel-tree-node__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.sapel-tree-node__label {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  color: var(--sapel-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-tree-node[data-depth='root'] > .sapel-tree-node__row .sapel-tree-node__label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sapel-tree-node__label a,
.sapel-tree-node__action {
  color: var(--sapel-accent-text);
  text-decoration: none;
}

.sapel-tree-node__label a:hover,
.sapel-tree-node__action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sapel-tree-node__action {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sapel-tree-node__detail {
  min-width: 0;
  overflow: hidden;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-tree-node__description {
  overflow: hidden;
  color: var(--sapel-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-tree-node__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1rem;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-tree-node__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.sapel-tree-node__meta svg {
  width: 15px;
  height: 15px;
}

.sapel-tree-node__badges {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.sapel-tree-badge {
  --tone-bg: var(--sapel-accent-soft);
  --tone-fg: var(--sapel-accent-text);
  --tone-border: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5625rem;
  border: 1px solid var(--tone-border);
  border-radius: 999px;
  background: var(--tone-bg);
  color: var(--tone-fg);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.sapel-tree-badge svg {
  width: 14px;
  height: 14px;
}

.sapel-tree-badge--count {
  justify-content: center;
  min-width: 1.75rem;
}

.sapel-tree-badge--count[data-zero='true'] {
  --tone-bg: var(--sapel-surface-2);
  --tone-fg: var(--sapel-muted);
  --tone-border: var(--sapel-border);
}

/* Figli: la lista parte sotto la freccia del padre. Ogni riga ha il suo tratto
   verticale e un raccordo orizzontale; l'ultima chiude la linea a gomito */
.sapel-tree-node[data-depth='root'] > .sapel-tree-collapse .sapel-tree-node__children {
  margin: 0 0.75rem 0 1.75rem;
}

.sapel-tree-node[data-depth='root'] > .sapel-tree-collapse > .sapel-tree-collapse__inner > .sapel-tree-node__children {
  padding-bottom: 0.75rem;
}

.sapel-tree-node[data-depth='child'] > .sapel-tree-collapse .sapel-tree-node__children {
  margin: 0 0 0 1.125rem;
}

.sapel-tree-node[data-depth='child'] {
  position: relative;
  padding-left: 1.25rem;
}

.sapel-tree-node[data-depth='child']::before,
.sapel-tree-node[data-depth='child']::after {
  position: absolute;
  left: 0;
  content: '';
  border-color: var(--sapel-border-strong);
  border-style: solid;
  border-width: 0;
}

.sapel-tree-node[data-depth='child']::before {
  top: 0;
  bottom: 0;
  border-left-width: 1.5px;
}

.sapel-tree-node[data-depth='child']::after {
  top: 1.25rem;
  width: 1rem;
  border-top-width: 1.5px;
}

.sapel-tree-node[data-depth='child']:last-child::before {
  bottom: auto;
  width: 1rem;
  height: calc(1.25rem + 0.75px);
  border-bottom-width: 1.5px;
  border-bottom-left-radius: 0.625rem;
}

.sapel-tree-node[data-depth='child']:last-child::after {
  display: none;
}

/* I figli entrano in fila quando il padre si apre */
.sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li {
  animation: sapel-tree-slide 320ms var(--sapel-ease) both;
}

.sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li:nth-child(2) { animation-delay: 45ms; }
.sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li:nth-child(3) { animation-delay: 90ms; }
.sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li:nth-child(4) { animation-delay: 135ms; }
.sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li:nth-child(5) { animation-delay: 180ms; }
.sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li:nth-child(n + 6) { animation-delay: 220ms; }

@keyframes sapel-tree-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes sapel-tree-slide {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes sapel-tree-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* Su schermi stretti i badge vanno a capo sotto il testo */
@media (max-width: 640px) {
  .sapel-tree-node[data-depth='root'] > .sapel-tree-node__row {
    flex-wrap: wrap;
  }

  .sapel-tree-node[data-depth='root'] > .sapel-tree-node__row > .sapel-tree-node__badges {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-left: 5.25rem;
  }

  .sapel-tree-node[data-depth='child'] .sapel-tree-node__head {
    flex-direction: column;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sapel-tree-collapse,
  .sapel-tree-node__toggle svg,
  .sapel-tree-node__icon {
    transition: none;
  }

  .sapel-tree-roots > li,
  .sapel-tree-collapse[data-open='true'] > .sapel-tree-collapse__inner > .sapel-tree-node__children > li,
  .sapel-tree-chip,
  .sapel-tree-toolbar__badge {
    animation: none;
  }
}

/* --- Calendario (components/CalendarPanel) ---------------------------------
 * Al posto dei selettori di data del browser, nei campi data e nei filtri
 * della tabella: mese con le frecce, giorni in griglia (oggi cerchiato, scelto
 * pieno, intervallo in tinta tenue), scelta rapida del mese dal titolo e
 * orario in due campi */
.sapel-calendar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 16rem;
  color: var(--sapel-text);
  font-size: 0.8125rem;
}

.sapel-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.sapel-calendar__nav,
.sapel-calendar__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 2rem;
  border: 0;
  border-radius: var(--sapel-radius);
  background: transparent;
  color: var(--sapel-text-2);
  font: inherit;
  transition: background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-calendar__nav {
  width: 2rem;
  padding: 0;
}

.sapel-calendar__title {
  padding: 0 0.625rem;
  color: var(--sapel-text);
  font-weight: 700;
}

.sapel-calendar__nav:hover,
.sapel-calendar__title:hover {
  background: var(--sapel-surface-2);
}

.sapel-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 2px;
}

.sapel-calendar__weekday {
  padding: 0.25rem 0;
  color: var(--sapel-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.sapel-calendar__day {
  position: relative;
  height: 2.125rem;
  padding: 0;
  border: 0;
  border-radius: var(--sapel-radius);
  background: transparent;
  color: var(--sapel-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-calendar__day:hover:not(:disabled) {
  background: var(--sapel-surface-2);
}

.sapel-calendar__day:focus-visible {
  outline: 2px solid var(--sapel-primary);
  outline-offset: -2px;
}

.sapel-calendar__day.is-outside {
  color: var(--sapel-placeholder, var(--sapel-muted));
  opacity: 0.6;
}

.sapel-calendar__day.is-today {
  box-shadow: inset 0 0 0 1px var(--sapel-primary);
  color: var(--sapel-accent-text);
  font-weight: 700;
}

.sapel-calendar__day.is-between {
  border-radius: 0;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-calendar__day.is-selected,
.sapel-calendar__day.is-selected:hover {
  background: var(--sapel-primary);
  box-shadow: none;
  color: var(--sapel-on-primary, #fff);
  font-weight: 700;
  opacity: 1;
}

.sapel-calendar__day.is-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sapel-calendar__day.is-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.sapel-calendar__day:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.sapel-calendar__months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.sapel-calendar__month {
  height: 2.5rem;
  border: 0;
  border-radius: var(--sapel-radius);
  background: transparent;
  color: var(--sapel-text);
  font: inherit;
  font-weight: 600;
}

.sapel-calendar__month:hover {
  background: var(--sapel-surface-2);
}

.sapel-calendar__month.is-current {
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-calendar__times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sapel-border);
}

.sapel-calendar__time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sapel-calendar__time > span:first-child {
  margin-right: 0.25rem;
  color: var(--sapel-muted);
}

.sapel-calendar__time.is-disabled {
  opacity: 0.5;
}

.sapel-calendar__time input {
  width: 2.25rem;
  height: 1.875rem;
  padding: 0;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
  background: var(--sapel-field-bg, var(--sapel-surface));
  color: var(--sapel-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sapel-calendar__time input:focus {
  border-color: var(--sapel-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-calendar__colon {
  color: var(--sapel-muted);
  font-weight: 700;
}

.sapel-date-preset-chip {
  padding: 0.125rem 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 999px;
  border: 1px solid var(--sapel-border);
  background-color: var(--sapel-surface-2);
  color: var(--sapel-text-2);
  cursor: pointer;
  transition:
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out,
  color 0.15s ease-in-out;
}

.sapel-date-preset-chip:hover {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-accent-soft);
  color: var(--sapel-primary);
}

/* Pulsante "Filtro" con popup dei criteri di ricerca */
.sapel-filter-trigger.is-active {
  color: var(--sapel-primary);
  box-shadow: inset 0 0 0 2px var(--sapel-primary);
}

.sapel-filter-count {
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background-color: var(--sapel-primary);
  color: var(--sapel-on-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
}

.sapel-date-panel-reset,
.sapel-color-panel-reset {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--sapel-muted);
  cursor: pointer;
}

.sapel-date-panel-reset:hover:not(:disabled),
.sapel-color-panel-reset:hover:not(:disabled) {
  color: var(--sapel-primary);
}

.sapel-date-panel-reset:disabled,
.sapel-color-panel-reset:disabled {
  opacity: 0.5;
  cursor: default;
}

.sapel-date-panel-apply,
.sapel-color-panel-apply {
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--sapel-primary);
  border-radius: 4px;
  background-color: var(--sapel-primary);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sapel-on-primary);
  cursor: pointer;
  transition:
  background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out;
}

.sapel-date-panel-apply:hover,
.sapel-color-panel-apply:hover {
  background-color: var(--sapel-primary-hover);
  border-color: var(--sapel-primary-hover);
}

.sapel-date-picker-trigger.sapel-cursor-pointer[readonly] {

  cursor: pointer;
  background-color: var(--sapel-field-bg);
}

/* La Select non ricercabile è di sola lettura solo per impedire la digitazione:
   senza questa regola .form-control[readonly] le darebbe il cursore di divieto
   anche quando il menu si apre. In sola lettura vera il componente non mette
   sapel-cursor-pointer e il divieto resta. */
.sapel-select-trigger.sapel-cursor-pointer[readonly] {
  cursor: pointer;
}

/* Il cursore solo quando il campo è davvero apribile: in sola lettura o
   durante un invio resta quello di .form-control[readonly] */
.sapel-file-trigger.sapel-cursor-pointer[readonly] {
  cursor: pointer;
}

/* Anteprima dell'immagine di un DocumentPickerInput (es. la firma): pannello
   sotto il campo con il disegno dei menu delle select, visibile al passaggio
   del mouse. L'immagine sta su un foglio bianco anche nel tema scuro, perche'
   firme e loghi sono pensati per la carta. */
.sapel-file-hover-preview {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1060;
  padding: 0.5rem;
  background-color: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  box-shadow: var(--sapel-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition:
    opacity var(--sapel-fast) var(--sapel-ease),
    transform var(--sapel-fast) var(--sapel-ease),
    visibility var(--sapel-fast);
  pointer-events: none;
}

.sapel-file-field:hover .sapel-file-hover-preview {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sapel-file-hover-preview__caption {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--sapel-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Il foglio ha una misura fissa e l'immagine lo riempie restando in
   proporzione: qualunque sia la sua dimensione reale, non ne esce */
.sapel-file-hover-preview__paper {
  box-sizing: border-box;
  width: min(20rem, 70vw);
  height: 8rem;
  padding: 0.75rem;
  background-color: #fff;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
}

.sapel-file-hover-preview__paper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sapel-date-picker-panel {

  z-index: 1060;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
}

.sapel-hover-underline:hover {
  text-decoration: underline;
}

/* 1060 come gli altri pannelli in portale (filtri tabella, date e color
   picker): 1055 e' lo z-index del modale, e a parita' il menu resterebbe
   sotto di esso. */
/* Menu delle select: lo stesso disegno della combobox di sapel-website, un
   elenco bianco attaccato al campo, con le voci a tutta larghezza. Il margine
   negativo annulla lo scarto di 4px che useAnchoredPanel lascia sotto il
   campo, per questo gli angoli arrotondati sono solo quelli in basso. */
.sapel-select-menu {
  z-index: 1060;
  max-height: 15rem;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  overflow: auto;
  background-color: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  box-shadow: var(--sapel-shadow-lg);
}

.sapel-select-option {
  padding: 0.4375rem 0.75rem;
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-select-option.is-selected {
  font-weight: 600;
}

/* Sul sito l'opzione scelta è evidenziata finché il puntatore non ne indica
   un'altra: qui lo fa il :not(:hover) sul menu, senza stato in React */
.sapel-select-option:hover,
.sapel-select-menu:not(:hover) .sapel-select-option.is-selected {
  color: var(--sapel-accent-text);
  background-color: var(--sapel-accent-soft);
}

.sapel-select-empty {
  padding: 0.5rem 1rem;
}

/* MenuSelect: tendina compatta al posto della <select> nativa (barre di
   filtri, righe per pagina), con lo stesso menu delle select. Nel menu la
   voce evidenziata la decide il componente (mouse e frecce): is-highlighted */
.sapel-menu-select {
  overflow: hidden;
  color: var(--sapel-text);
  font-family: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-menu-select.is-open,
.sapel-menu-select:focus-visible {
  border-color: var(--sapel-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-menu-select.is-active {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-weight: 600;
}

.sapel-menu-select__menu {
  font-size: 0.875rem;
}

/* Con l'icona (prop icon, e sempre in DateRangeMenu): il contenitore prende
   le classi di dimensione, l'icona sta a sinistra nel campo */
.sapel-menu-select-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.sapel-menu-select-wrap > .sapel-menu-select {
  width: 100%;
}

.sapel-menu-select--with-icon {
  padding-left: 2.125rem;
}

.sapel-menu-select__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  z-index: 1;
  display: flex;
  color: var(--sapel-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.sapel-menu-select__icon svg {
  width: 16px;
  height: 16px;
}

.sapel-menu-select-wrap:has(> .is-active) .sapel-menu-select__icon {
  color: var(--sapel-accent-text);
}

/* Versione digitabile (searchable): mentre si scrive la voce scelta fa da segnaposto */
.sapel-menu-select--search {
  cursor: text;
}

.sapel-menu-select--search::placeholder {
  color: var(--sapel-muted);
  opacity: 1;
}

.sapel-menu-select__menu .sapel-select-option.sapel-menu-select__empty {
  color: var(--sapel-muted);
  font-style: italic;
  cursor: default;
}

/* Righe per pagina nel piè della tabella */
.sapel-table-page-size {
  width: auto;
  min-width: 4.5rem;
}

.sapel-menu-select__menu .sapel-select-option,
.sapel-menu-select__menu:not(:hover) .sapel-select-option.is-selected {
  background-color: transparent;
  color: var(--sapel-text);
}

.sapel-menu-select__menu.sapel-select-menu .sapel-select-option.is-highlighted {
  background-color: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

:root {
  --sapel-blue: #228be6;
  --sapel-gray: var(--sapel-text);
  --sapel-light-gray: var(--sapel-text-2);
  --sapel-placeholder: #98a2b3;
}

.sapel-text-gray {
  color: var(--sapel-gray);
}

.sapel-min-w-0 {
  min-width: 0;
}

.sapel-min-h-0 {
  min-height: 0;
}

.sapel-overflow-y-auto {
  overflow-y: auto;
}

.sapel-w-64 {
  width: 16rem;
}

.sapel-color-picker-trigger.sapel-cursor-pointer[readonly] {

  cursor: pointer;
  background-color: var(--sapel-field-bg);
  padding-right: 2.75rem;
}

.sapel-color-picker-preview {
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--sapel-text) 15%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.sapel-color-picker-panel {

  z-index: 1060;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
}

.sapel-color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.375rem;
}

.sapel-color-swatch {
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--sapel-text) 15%, transparent);
  border-radius: 6px;
  cursor: pointer;
  transition:
  transform 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;
}

.sapel-color-swatch:hover {
  transform: scale(1.08);
}

.sapel-color-swatch.sapel-selected {

  box-shadow:
  0 0 0 2px var(--sapel-surface),
  0 0 0 4px var(--sapel-primary);
}

.sapel-color-picker-native {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid var(--sapel-border);
  border-radius: 6px;
  background-color: var(--sapel-field-bg);
  cursor: pointer;
}

.sapel-color-picker-hex {
  border: 1px solid var(--sapel-border);
  border-radius: 6px;
  background-color: var(--sapel-field-bg);
  font-family: monospace;
  text-transform: lowercase;
  transition:
  border-color 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;
}

.sapel-color-picker-hex:focus {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-table-filter-color {
  font-size: 0.8125rem;
  text-transform: none;
  font-weight: 400;
}

.sapel-table-filter-color-input {
  padding-right: 3.5rem;
}

.sapel-table-filter-color-preview {
  display: inline-flex;
  gap: 2px;
}

.sapel-color-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid color-mix(in oklab, var(--sapel-text) 15%, transparent);
}

.sapel-table-filter-color .sapel-color-swatch-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
}

/* Dissolvenza tra i passaggi del wizard: il design system non ha un'utility
   per la transizione di opacita', e senza transizione il cambio di step
   sarebbe istantaneo nonostante l'attesa gestita dal componente. */
.sapel-step-fade {
  transition: opacity 0.3s ease-in-out;
}

/* Area di caricamento allegati (DropzoneInput): lo stesso disegno di
   sapel-website, con il colore primario del backoffice. I figli non
   intercettano il puntatore, altrimenti passarci sopra trascinando un file
   farebbe scattare dragleave sul contenitore e l'evidenziazione lampeggerebbe. */
.sapel-dropzone {
  padding: 2rem 1.5rem;
  border: 1.5px dashed var(--sapel-border-strong);
  border-radius: 0.75rem;
  background-color: var(--sapel-field-bg);
  cursor: pointer;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.sapel-dropzone > * {
  pointer-events: none;
}

.sapel-dropzone.is-active {
  border-color: var(--sapel-primary);
  background-color: var(--sapel-accent-soft);
}

.sapel-dropzone.is-invalid {
  border-color: var(--sapel-danger);
}

.sapel-dropzone.is-disabled {
  cursor: default;
  opacity: 0.6;
}

@media (hover: hover) {
  .sapel-dropzone:not(.is-disabled):hover {
    background-color: var(--sapel-accent-soft);
  }
}

/* Testo multiriga (es. la descrizione nel riepilogo): mantiene gli a capo */
.sapel-pre-line {
  white-space: pre-line;
}

/* Voci della Navbar: se non stanno nel contenitore scorrono in orizzontale
   con le frecce ai lati, senza la barra di scorrimento */
.sapel-navbar-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.sapel-navbar-scroll::-webkit-scrollbar {
  display: none;
}

/* Centrata finché ci sta; quando deborda i margini automatici vanno a zero e
   la lista parte dal bordo sinistro, così anche la prima voce resta
   raggiungibile (con justify-content: center verrebbe tagliata) */
.sapel-navbar-list {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.sapel-navbar-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Vista ad albero (es. commesse): ogni livello rientra sotto al nodo padre,
   con una linea guida a sinistra per seguire l'alberatura */
.sapel-tree .sapel-tree {
  margin-left: 11px;
  padding-left: 1.25rem;
  border-left: 1px solid var(--sapel-border);
}

.sapel-tree-row {
  min-width: 0;
}

/* I link dell'albero mantengono il colore anche al passaggio del mouse */
.sapel-tree-row a:hover {
  color: var(--sapel-accent-text);
}

/* Occupa il posto della freccia nei nodi senza figli, per allineare le icone */
.sapel-tree-spacer {
  width: 24px;
  flex-shrink: 0;
}

/* Anteprima dei file (FilePreview): il file e sotto il pulsante Scarica.
   Con un PDF il modale occupa tutta l'altezza dello schermo (entro il margine
   del dialog) e scorrono solo le pagine; con gli altri file scorre il corpo */
.sapel-file-preview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.modal-content:has(.sapel-pdf-viewer) {
  height: 100%;
}

.sapel-file-preview-image {
  max-width: 100%;
  margin: 0 auto;
}

.sapel-file-preview-text {
  width: 100%;
  height: 60vh;
  border: 1px solid var(--sapel-border);
  border-radius: 8px;
}

/* Lettore PDF: barra con pagine, ricerca e zoom, sopra alle pagine su fondo grigio */
.sapel-pdf-viewer {
  flex: 1 1 auto;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  overflow: hidden;
  background: var(--sapel-bg);
}

.sapel-pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sapel-border);
  background: var(--sapel-surface);
  color: var(--sapel-muted);
  font-size: 0.875rem;
}

.sapel-pdf-search,
.sapel-pdf-zoom {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sapel-pdf-search {
  position: relative;
  flex: 0 1 26rem;
  gap: 0.5rem;
}

.sapel-pdf-search svg {
  position: absolute;
  left: 0.625rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.sapel-pdf-search input {
  flex: 1 1 auto;
  min-width: 10rem;
  height: 2rem;
  padding: 0 0.75rem 0 2rem;
  border: 1px solid var(--sapel-border-strong);
  border-radius: var(--sapel-radius-sm);
  background: var(--sapel-field-bg);
  color: var(--sapel-text);
}

.sapel-pdf-search input:focus {
  outline: none;
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-pdf-zoom span {
  min-width: 3.5rem;
  text-align: center;
}

.sapel-pdf-toolbar button {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--sapel-border);
  border-radius: 6px;
  background: var(--sapel-surface);
  color: var(--sapel-text);
  line-height: 1;
}

.sapel-pdf-toolbar button:hover:not(:disabled) {
  background: var(--sapel-surface-2);
}

.sapel-pdf-toolbar button:disabled {
  opacity: 0.4;
}

.sapel-pdf-pages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.5rem;
}

/* Pagine al centro finché entrano; ingrandite si scorre anche in orizzontale */
.sapel-pdf-document {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  min-width: 100%;
}

.sapel-pdf-page {
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 50, 77, 0.12), 0 6px 16px rgba(23, 50, 77, 0.08);
}

.sapel-pdf-message {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--sapel-muted);
  font-size: 0.875rem;
}

/* Occorrenze della ricerca: il testo di pdf.js è trasparente sopra al disegno
   della pagina, quindi si colora solo lo sfondo */
.sapel-pdf-match,
.sapel-pdf-current {
  padding: 0;
  border-radius: 2px;
  color: transparent;
  background: rgba(255, 196, 0, 0.45);
}

.sapel-pdf-current {
  background: oklch(0.519 var(--sapel-chroma) var(--sapel-hue) / 0.45);
}

/* Pianificazione, vista Griglia: il mese come il foglio di pianificazione, una
   colonna per operatore e una riga per giorno. Intestazione e colonna dei
   giorni restano ferme mentre si scorre; sabato e domenica sono in rosso. */
.sapel-planning-grid {
  flex: 1 1 auto;
  overflow: auto;
}

.sapel-planning-grid table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: 0.75rem;
  color: var(--sapel-text);
}

.sapel-planning-grid th,
.sapel-planning-grid td {
  min-width: 12rem;
  padding: 0.25rem;
  border-right: 1px solid var(--sapel-border);
  border-bottom: 1px solid var(--sapel-border);
  vertical-align: top;
  background: var(--sapel-surface);
}

.sapel-planning-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.5rem;
  text-align: center;
  font-weight: 700;
  background: var(--sapel-surface-2);
  border-bottom-color: var(--sapel-border-strong);
}

.sapel-planning-grid td {
  cursor: pointer;
}

.sapel-planning-grid td:hover {
  background: var(--sapel-surface-2);
}

.sapel-planning-grid .sapel-planning-grid__day {
  position: sticky;
  left: 0;
  z-index: 1;
  /* Colonna dei giorni stretta: mai oltre 90px, il resto va agli operatori */
  box-sizing: border-box;
  width: 90px;
  min-width: 0;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  background: var(--sapel-surface-2);
  border-right-color: var(--sapel-border-strong);
}

.sapel-planning-grid thead .sapel-planning-grid__day {
  z-index: 3;
}

.sapel-planning-grid__day span {
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
}

.sapel-planning-grid__today .sapel-planning-grid__day {
  color: var(--sapel-accent-text);
}

.sapel-planning-grid__weekend th,
.sapel-planning-grid__weekend td,
.sapel-planning-grid__weekend .sapel-planning-grid__day {
  background: color-mix(in oklab, var(--sapel-danger) 8%, var(--sapel-surface));
  border-bottom-color: color-mix(in oklab, var(--sapel-danger) 25%, var(--sapel-surface));
}

.sapel-planning-grid__weekend td:hover {
  background: color-mix(in oklab, var(--sapel-danger) 14%, var(--sapel-surface));
}

.sapel-planning-grid__weekend .sapel-planning-grid__day {
  color: var(--sapel-danger);
}

/* Ferie o permesso per tutto il giorno: la cella si vela del colore della
   tipologia come le righe del fine settimana, anche quando ci cade sopra */
.sapel-planning-grid td.sapel-planning-grid__leave {
  background: color-mix(in oklab, var(--event-color) 8%, var(--sapel-surface));
  border-bottom-color: color-mix(in oklab, var(--event-color) 25%, var(--sapel-surface));
}

.sapel-planning-grid td.sapel-planning-grid__leave:hover {
  background: color-mix(in oklab, var(--event-color) 14%, var(--sapel-surface));
}

.sapel-planning-grid__activity--leave {
  border-left-color: transparent;
  background: transparent;
  color: var(--event-color);
  font-weight: 600;
}

.sapel-planning-grid__activity--leave:hover {
  background: color-mix(in oklab, var(--event-color) 10%, transparent);
}

/* Una riga per attività: tinta della tipologia, orario se non è a giornata
   intera e cliente sotto al titolo */
.sapel-planning-grid__activity {
  display: block;
  width: 100%;
  margin-bottom: 0.125rem;
  padding: 0.125rem 0.375rem;
  border: 0;
  border-left: 3px solid var(--event-color);
  border-radius: 0.25rem;
  background: var(--sapel-surface) linear-gradient(var(--event-tint), var(--event-tint));
  color: var(--sapel-text);
  font-size: 0.75rem;
  text-align: left;
  white-space: normal;
}

.sapel-planning-grid__activity:hover {
  background: var(--sapel-surface) linear-gradient(var(--event-tint-strong), var(--event-tint-strong));
}

.sapel-planning-grid__activity small {
  display: block;
  color: var(--sapel-muted);
}

/* Barra laterale (Sidebar), come quella della Sapel Suite: due sezioni apribili
   ad accordion, il menu ad albero e le schede aperte. I colori sono quelli della
   suite con la tinta Sapel (350), l'accento è il primario del backoffice */
.sapel-sidebar {
  --nav-bg: oklch(0.975 0.005 var(--sapel-hue));
  --nav-hover: oklch(0.945 0.007 var(--sapel-hue));
  --nav-border: oklch(0.915 0.006 var(--sapel-hue));
  --nav-border-strong: oklch(0.85 0.008 var(--sapel-hue));
  --nav-text: oklch(0.22 0.012 var(--sapel-hue));
  --nav-text-2: oklch(0.38 0.012 var(--sapel-hue));
  --nav-muted: oklch(0.55 0.012 var(--sapel-hue));
  --nav-accent: var(--sapel-primary);
  --nav-accent-soft: oklch(0.955 0.03 var(--sapel-hue));
  --nav-accent-text: oklch(0.47 var(--sapel-chroma) var(--sapel-hue));
  --nav-radius: 7px;
  /* Rientro di ogni livello dell'albero */
  --nav-step: 14px;
  display: none;
  flex-direction: column;
  width: 16rem;
  flex-shrink: 0;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
}

.sapel-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
}

.sapel-nav a,
.sapel-nav a:hover {
  text-decoration: none;
}

.sapel-nav svg {
  flex: none;
  width: 22px;
  height: 22px;
}

/* Etichette su una riga: le voci hanno tutte la stessa altezza */
.sapel-nav-area-title span,
.sapel-nav-group-title span,
.sapel-nav-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-nav .sapel-nav-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--nav-muted);
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* Sezioni: intestazione maiuscoletta con la freccia, separate da una riga */
.sapel-nav-section + .sapel-nav-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--nav-border);
}

.sapel-nav-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
}

.sapel-nav-section-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--nav-radius);
  color: var(--nav-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sapel-nav-section-toggle:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sapel-nav-section-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sapel-nav-section-toggle svg,
.sapel-nav-section-toggle .sapel-nav-chevron {
  width: 13px;
  height: 13px;
  color: inherit;
}

.sapel-nav-section[data-open='true'] > .sapel-nav-section-label .sapel-nav-chevron {
  transform: rotate(90deg);
}

.sapel-nav-section:first-child .sapel-nav-section-toggle {
  color: var(--nav-accent-text);
}

.sapel-nav-section-body {
  padding-top: 4px;
}

.sapel-nav-section-action {
  margin-left: auto;
  padding: 0;
  color: var(--nav-muted);
  font-size: 10.5px;
  font-weight: 600;
}

.sapel-nav-section-action:hover {
  color: var(--nav-text);
  text-decoration: underline;
}

/* Primo livello del menu: icona, titolo e, per i gruppi, la freccia a destra */
.sapel-nav-area-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 1px 0;
  padding: 8px 10px;
  border-radius: var(--nav-radius);
  color: var(--nav-text);
  font-weight: 600;
  text-align: left;
}

.sapel-nav-area-title:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sapel-nav-area-title .sapel-nav-chevron {
  margin-left: auto;
}

.sapel-nav-area[data-open='true'] > .sapel-nav-area-title .sapel-nav-chevron {
  transform: rotate(90deg);
}

.sapel-nav-area.active > .sapel-nav-area-title > svg:first-child {
  color: var(--nav-accent-text);
}

a.sapel-nav-area-title.active {
  background: var(--nav-accent-soft);
  color: var(--nav-accent-text);
}

/* Livelli sotto l'area: ogni livello (--depth) rientra di --nav-step; nei gruppi
   la freccia sta a sinistra dell'icona, che resta allineata a quelle delle voci
   dello stesso livello */
.sapel-nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 1px 0;
  padding: 7px 10px 7px calc(20px + var(--depth, 0) * var(--nav-step));
  border-radius: var(--nav-radius);
  color: var(--nav-text-2);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.sapel-nav-group-title:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sapel-nav-group[data-open='true'] > .sapel-nav-group-title .sapel-nav-chevron {
  transform: rotate(90deg);
}

.sapel-nav-group.active > .sapel-nav-group-title {
  color: var(--nav-text);
}

.sapel-nav-group.active > .sapel-nav-group-title .sapel-nav-chevron {
  color: var(--nav-accent-text);
}

.sapel-nav-children {
  position: relative;
}

/* Guida verticale sotto la freccia del gruppo */
.sapel-nav-children::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(26.5px + var(--depth, 0) * var(--nav-step));
  width: 1px;
  background: var(--nav-border);
}

.sapel-nav-group.active > .sapel-nav-children::before {
  background: color-mix(in oklch, var(--nav-accent) 45%, var(--nav-border));
}

.sapel-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 0;
  padding: 7px 10px 7px calc(44px + var(--depth, 0) * var(--nav-step));
  border-radius: var(--nav-radius);
  color: var(--nav-text-2);
  font-weight: 500;
}

.sapel-nav-item:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sapel-nav-item.active {
  background: var(--nav-accent-soft);
  color: var(--nav-accent-text);
  font-weight: 600;
}

/* Schede aperte: numero d'ordine di apertura, voce e area su due righe,
   la × compare al passaggio del mouse */
.sapel-nav-tab {
  position: relative;
  margin: 1px 0;
  border-radius: var(--nav-radius);
}

.sapel-nav-tab > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 30px 6px 10px;
  color: var(--nav-text-2);
  font-weight: 500;
}

.sapel-nav-tab:hover {
  background: var(--nav-hover);
}

.sapel-nav-tab:hover > a {
  color: var(--nav-text);
}

.sapel-nav-tab.active {
  background: var(--nav-accent-soft);
}

.sapel-nav-tab.active > a {
  color: var(--nav-accent-text);
}

.sapel-nav-tab-num {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--nav-border-strong);
  border-radius: 6px;
  color: var(--nav-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sapel-nav-tab.active .sapel-nav-tab-num {
  border-color: var(--nav-accent);
  background: var(--nav-accent);
  color: #fff;
}

.sapel-nav-tab-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.sapel-nav-tab-text > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-nav-tab-text small {
  color: var(--nav-muted);
  font-size: 11px;
  font-weight: 400;
}

.sapel-nav-tab-close {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  color: var(--nav-muted);
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%);
}

.sapel-nav-tab:hover .sapel-nav-tab-close,
.sapel-nav-tab-close:focus-visible {
  opacity: 1;
}

.sapel-nav-tab-close:hover {
  background: var(--nav-border);
  color: var(--nav-text);
}

/* Su schermi piccoli la barra non c'è */
@media (min-width: 576px) {
  .sapel-sidebar {
    display: flex;
  }
}

/* Piede della barra con il pulsante che la nasconde */
.sapel-nav-footer {
  flex: none;
  padding: 8px 10px;
  border-top: 1px solid var(--nav-border);
}

.sapel-nav-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--nav-radius);
  color: var(--nav-muted);
  font-weight: 600;
  white-space: nowrap;
}

.sapel-nav-collapse:hover {
  background: var(--nav-hover);
  color: var(--nav-text);
}

.sapel-nav-collapse svg {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* Pannello della barra: il menu e il piede. Con la barra nascosta si stacca e
   scorre sopra la pagina */
.sapel-sidebar-pannello {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* Barra nascosta (data-sidebar sull'<html>), come la barra di Windows a
   scomparsa: non occupa spazio, resta un filo sul bordo sinistro. Restando un
   attimo sul filo (Sidebar, data-mostra) il pannello entra sopra la pagina e
   le finestre; uscendone torna via. Il filo si riempie durante l'attesa */
html[data-sidebar='nascosta'] .sapel-sidebar {
  position: relative;
  z-index: 920; /* sopra le finestre (100+) e la loro barra (900), sotto le conferme (1000) */
  width: 0;
  border-right: 0;
}

.sapel-sidebar-bordo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Zona sensibile più larga del filo visibile: non serve stare attaccati al bordo */
  width: 18px;
  border-left: 2px solid var(--nav-border-strong);
}

.sapel-sidebar-bordo::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: var(--nav-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 150ms ease;
}

.sapel-sidebar-bordo:hover::after {
  transform: scaleY(1);
  transition: transform 250ms linear; /* ATTESA_APRI in Sidebar */
}

html[data-sidebar='nascosta'] .sapel-sidebar-pannello {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16rem;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  box-shadow: 0 12px 32px -8px oklch(0.2 0.03 var(--sapel-hue) / 0.3);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 220ms;
}

html[data-sidebar='nascosta'] .sapel-sidebar[data-mostra='true'] .sapel-sidebar-pannello {
  transform: none;
  visibility: visible;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

html[data-sidebar='nascosta'] .sapel-nav-collapse svg {
  transform: scaleX(-1);
}

/* Animazioni: allargando la barra le etichette salgono dal basso mentre cresce
   (l'animazione riparte quando passano da display: none a visibili); aprendo o
   chiudendo un'area, un gruppo o una sezione l'altezza cresce o cala
   progressivamente (righe della griglia da 0fr a 1fr) */
.sapel-nav {
  overflow-x: hidden;
}

:is(.sapel-nav-area-title, .sapel-nav-group-title, .sapel-nav-item, .sapel-nav-collapse) > span,
.sapel-nav-section-toggle > span,
.sapel-nav-tab-text {
  animation: sapel-nav-label-in 220ms 60ms cubic-bezier(0.2, 0, 0, 1) both;
}

.sapel-nav-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.2, 0, 0, 1);
}

.sapel-nav-drawer[data-open='true'] {
  grid-template-rows: 1fr;
}

.sapel-nav-drawer > div {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
}

.sapel-nav-drawer[data-open='true'] > div {
  opacity: 1;
}

@keyframes sapel-nav-label-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

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

/* Barra in alto: marchio, ricerca, cambio del tema e utente. Colori dai token
   --sapel-* (chiaro e scuro) */
.sapel-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.5rem;
  height: 60px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--sapel-border);
  background: var(--sapel-chrome);
  color: var(--sapel-text);
  font-size: 0.875rem;
}

.sapel-topbar a,
.sapel-topbar a:hover {
  text-decoration: none;
}

.sapel-topbar svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.sapel-topbar-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--sapel-text);
}

.sapel-topbar-brand:hover {
  color: var(--sapel-text);
}

/* Il logo è un SVG tutto bianco (nasce per il fondo scuro del login): qui fa
   da maschera, colorata col primario, così si vede in entrambi i temi e segue
   il colore d'accento */
.sapel-topbar-logo {
  flex: none;
  width: 34px;
  height: 34px;
  background-color: var(--sapel-primary);
  mask: url(/images/logo_sapel.svg) center / contain no-repeat;
}

.sapel-topbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sapel-topbar-brand-text > span {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sapel-topbar-brand-text small {
  color: var(--sapel-muted);
  font-size: 0.7rem;
}

.sapel-topbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.sapel-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-right: 6px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--sapel-border);
  border-radius: 8px;
  background: var(--sapel-surface-2);
  color: var(--sapel-muted);
}

.sapel-topbar-search:hover {
  border-color: var(--sapel-border-strong);
  color: var(--sapel-text);
}

.sapel-topbar-search > span {
  min-width: 9rem;
  text-align: left;
}

.sapel-topbar-search kbd {
  padding: 1px 6px;
  border: 1px solid var(--sapel-border);
  border-radius: 5px;
  background: var(--sapel-surface);
  color: var(--sapel-muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
}

.sapel-topbar-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--sapel-text-2);
}

.sapel-topbar-btn:hover {
  background: var(--sapel-surface-2);
  color: var(--sapel-text);
}

.sapel-topbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 6px;
  background: var(--sapel-border);
}

.sapel-topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  color: var(--sapel-text);
}

.sapel-topbar-user:hover {
  background: var(--sapel-surface-2);
  color: var(--sapel-text);
}

.sapel-topbar-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sapel-primary);
  color: var(--sapel-on-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sapel-topbar-user-text {
  display: none;
  flex-direction: column;
  line-height: 1.2;
}

.sapel-topbar-user-text > span {
  font-weight: 600;
  white-space: nowrap;
}

.sapel-topbar-user-text small {
  color: var(--sapel-muted);
  font-size: 0.7rem;
}

/* Pannello Aspetto dell'header: tema (chiaro, scuro, di sistema) e colore d'accento */
.sapel-aspetto {
  top: 100%;
  right: 0;
  width: 280px;
  margin-top: 6px;
  padding: 14px;
}

.sapel-aspetto h4 {
  margin: 0 0 8px;
  color: var(--sapel-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sapel-aspetto section + section {
  margin-top: 16px;
}

.sapel-segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface-2);
}

.sapel-segmented button {
  flex: 1;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--sapel-radius-sm);
  background: none;
  color: var(--sapel-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.sapel-segmented button:hover {
  color: var(--sapel-text);
}

.sapel-segmented button[aria-pressed='true'] {
  background: var(--sapel-surface);
  color: var(--sapel-text);
  box-shadow: var(--sapel-shadow-sm);
}

.sapel-aspetto__colori {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.sapel-aspetto__colore {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--sapel-surface);
  cursor: pointer;
}

.sapel-aspetto__colore[aria-pressed='true'] {
  border-color: var(--sapel-text);
}

/* Campanella delle notifiche dell'header, accanto al pulsante del tema: il
   cerchio rosso dice quante sono da leggere, il pannello mostra le ultime */
.sapel-bell {
  position: relative;
}

.sapel-bell__count {
  position: absolute;
  top: 3px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--sapel-surface);
  border-radius: 999px;
  background: var(--sapel-danger);
  color: var(--sapel-on-primary);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sapel-bell__panel {
  top: 100%;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  margin-top: 6px;
  padding: 0;
  overflow: hidden;
}

.sapel-bell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sapel-border);
}

.sapel-bell__header h4 {
  margin: 0;
  color: var(--sapel-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sapel-bell__panel .sapel-notifications {
  max-height: min(60vh, 440px);
  padding: 6px;
  overflow-y: auto;
}

.sapel-bell__empty {
  margin: 0;
  padding: 24px 14px;
  color: var(--sapel-muted);
  text-align: center;
}

.sapel-bell__footer {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--sapel-border);
  color: var(--sapel-accent-text);
  font-weight: 600;
  text-align: center;
}

.sapel-bell__footer:hover {
  background: var(--sapel-surface-2);
}

/* Elenco delle notifiche (campanella e Scrivania): quelle da leggere hanno il
   puntino e il titolo in grassetto, la spunta a destra le sposta tra le lette */
.sapel-notifications {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sapel-notification {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border-radius: var(--sapel-radius);
}

.sapel-notification:hover {
  background: var(--sapel-surface-2);
}

.sapel-notification__link {
  display: flex;
  flex: 1;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  color: var(--sapel-text);
}

.sapel-notification__link:hover {
  color: var(--sapel-text);
}

.sapel-notification__icon {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sapel-surface-2);
  color: var(--sapel-muted);
}

.sapel-notification--unread .sapel-notification__icon {
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-notification--unread .sapel-notification__icon::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--sapel-surface);
  border-radius: 50%;
  background: var(--sapel-danger);
}

.sapel-notification__icon .sapel-icon-24 {
  width: 18px;
  height: 18px;
}

.sapel-notification__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}

.sapel-notification__title {
  font-weight: 500;
}

.sapel-notification--unread .sapel-notification__title {
  font-weight: 700;
}

.sapel-notification__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sapel-text-2);
  font-size: 0.8125rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sapel-notification__meta {
  color: var(--sapel-muted);
  font-size: 0.75rem;
}

.sapel-notification__action {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 8px 6px 0 0;
  border: 1px solid transparent;
  border-radius: var(--sapel-radius-sm);
  background: none;
  color: var(--sapel-muted);
  cursor: pointer;
}

.sapel-notification__action:hover:not(:disabled) {
  border-color: var(--sapel-border);
  background: var(--sapel-surface);
  color: var(--sapel-success);
}

/* In testa al ticket aperto da una notifica, con il pulsante "Presa visione" */
.sapel-notification-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sapel-notification-notice .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Scrivania: un riquadro per elenco con il numero di cose che aspettano
   l'operatore; sotto, l'elenco del riquadro scelto */
.sapel-desk__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.sapel-desk__tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
  color: var(--sapel-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sapel-desk__tile:hover {
  border-color: var(--sapel-border-strong);
}

.sapel-desk__tile[aria-pressed='true'] {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-desk__tile-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sapel-radius);
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-desk__tile--alert .sapel-desk__tile-icon {
  background: var(--sapel-danger-soft);
  color: var(--sapel-danger);
}

.sapel-desk__tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.sapel-desk__tile-count {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sapel-desk__tile--alert .sapel-desk__tile-count {
  color: var(--sapel-danger);
}

.sapel-desk__tile-title {
  font-weight: 600;
}

.sapel-desk__tile-hint {
  margin-top: 2px;
  color: var(--sapel-muted);
  font-size: 0.75rem;
}

.sapel-desk__panel {
  padding: 16px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
}

/* Le scelte della Scrivania (Da leggere / Lette, filtro dei ticket) stanno su
   una riga e prendono la larghezza del loro testo */
.sapel-desk__panel .sapel-segmented,
.sapel-desk__filter {
  display: inline-flex;
}

.sapel-desk__panel .sapel-segmented button,
.sapel-desk__filter button {
  flex: none;
  white-space: nowrap;
}

.sapel-desk__filter {
  max-width: 100%;
  margin-bottom: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Sopra i ticket da lavorare: il filtro a sinistra, tabella o card a destra */
.sapel-desk__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sapel-desk__toolbar .sapel-desk__filter {
  margin-bottom: 0;
}

/* Fogli lavoro e attività: solo tabella o card, a destra */
.sapel-desk__toolbar--end {
  justify-content: flex-end;
}

/* Loader: il fiore Sapel che ruota "respirando". Da solo, accanto al testo
   (--inline), a tutta pagina (--page), nell'angolo di un contenitore (--corner)
   o sopra a tutta la finestra (.sapel-loading-overlay) */
.sapel-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--sapel-muted);
  font-size: 0.875rem;
}

.sapel-loader-flower {
  flex: none;
  color: var(--sapel-primary);
  animation: sapel-loader-spin 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sapel-loader--inline {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* A tutta pagina compare solo se il caricamento dura più di un attimo, e sfuma:
   le navigazioni veloci passano dritte alla pagina senza lampi */
.sapel-loader--page {
  flex: 1;
  min-height: 60vh;
  animation: sapel-fade-in 240ms 180ms ease backwards;
}

.sapel-loader--on-primary .sapel-loader-flower {
  color: var(--sapel-on-primary);
}

/* Ogni pagina del backoffice entra in dissolvenza (template.js si rimonta a ogni
   cambio di pagina). Solo "backwards": finita l'animazione non resta nessun
   transform, che altrimenti farebbe da riferimento ai modali position: fixed */
.sapel-page {
  height: 100%;
  animation: sapel-page-in 260ms cubic-bezier(0.2, 0, 0, 1) backwards;
}

@keyframes sapel-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes sapel-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.sapel-loader--corner {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  padding: 0.375rem;
  border-radius: 50%;
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-sm);
}

.sapel-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--sapel-surface) 82%, transparent);
  backdrop-filter: blur(3px);
  transition: opacity 300ms ease;
}

.sapel-loading-overlay[data-visible='false'] {
  opacity: 0;
  pointer-events: none;
}

.sapel-loading-overlay[data-visible='false'] .sapel-loader-flower {
  animation-play-state: paused;
}

@keyframes sapel-loader-spin {
  50% {
    transform: rotate(180deg) scale(0.88);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sapel-loader-flower {
    animation-duration: 6s;
  }

  .sapel-page,
  .sapel-loader--page {
    animation: none;
  }
}

/* Sotto i 768px la ricerca resta un'icona e dell'utente l'avatar; i link
   principali compaiono da 992px (sono anche nella barra laterale) */
@media (max-width: 767.98px) {
  .sapel-topbar-search {
    width: 38px;
    justify-content: center;
    padding: 0;
  }

  .sapel-topbar-search > :not(svg),
  .sapel-topbar-brand-text small {
    display: none;
  }
}

@media (min-width: 768px) {
  .sapel-topbar-user-text {
    display: flex;
  }
}

/* Scelta di ruoli e voci di menu (RolesInput, SectionsInput): un riquadro per
   categoria, affiancati su più colonne; una riga per ruolo con la spunta, il
   nome e la nota "dal profilo" per quelli già inclusi */
.sapel-roles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sapel-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.sapel-roles-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface-2);
}

.sapel-roles-group legend {
  float: none;
  width: auto;
  margin: 0 0 0.25rem;
  padding: 0;
  color: var(--sapel-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sapel-roles-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem;
  border-radius: var(--sapel-radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
}

.sapel-roles-item:hover {
  background: var(--sapel-surface);
}

.sapel-roles-item--nested {
  padding-left: 1.75rem;
}

.sapel-roles-item .form-check-input {
  flex: none;
  margin: 0;
}

.sapel-roles-item span {
  min-width: 0;
}

.sapel-roles-item small {
  flex: none;
  margin-left: auto;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.sapel-roles-item:has(.form-check-input:disabled) {
  cursor: default;
}

/* Enti dell'utente (MembershipsInput): una scheda per ente con profili e,
   aprendoli, i ruoli aggiuntivi; sotto la scelta dell'ente da aggiungere */
.sapel-memberships {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sapel-membership {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
}

.sapel-membership-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sapel-membership-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.sapel-membership-toggle {
  align-self: flex-start;
  padding: 0;
  color: var(--sapel-accent-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.sapel-membership-toggle:hover {
  text-decoration: underline;
}

.sapel-membership-add {
  width: 100%;
}

/* --- Comunicazioni -------------------------------------------------------------
 * Posta del backoffice: un messaggio è un riquadro con intestazione (mittente,
 * destinatari, data), testo e allegati. Nella conversazione di un ticket i
 * messaggi del cliente (--in) e quelli spediti da noi (--out) si distinguono
 * dal bordo e dal fondo. In cima alle pagine della posta, lo stato della casella.
 * --------------------------------------------------------------------------- */
.sapel-mail-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sapel-mail-message {
  background: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-left-width: 4px;
  border-radius: var(--sapel-radius);
  box-shadow: var(--sapel-shadow-xs);
  padding: 0.75rem 1rem;
}

.sapel-mail-message--in {
  border-left-color: var(--sapel-info);
}

.sapel-mail-message--out {
  border-left-color: var(--sapel-primary);
  background: var(--sapel-surface-2);
}

.sapel-mail-message__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--sapel-muted);
  margin-bottom: 0.5rem;
}

.sapel-mail-message__head strong {
  color: var(--sapel-text);
}

.sapel-mail-message__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--sapel-text);
  max-height: 24rem;
  overflow-y: auto;
}

.sapel-mail-message__error {
  color: var(--sapel-danger);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.sapel-mail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sapel-mail-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--sapel-text-2);
  background: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-mail-attachment:hover {
  border-color: var(--sapel-border-strong);
  color: var(--sapel-accent-text);
}

/* Stato della posta in arrivo come in Hermes: una riga di nota con "Scarica
   ora" a destra, sotto gli avvisi delle caselle in errore */
.sapel-mail-status {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.sapel-mail-status__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.sapel-mail-status__note {
  color: var(--sapel-muted);
}

.sapel-mail-status__note strong {
  color: var(--sapel-text);
}

/* Dettaglio di un messaggio (modals/Detail) come in Hermes: chi, a chi e
   quando in testa, le schede e sotto un pannello ad altezza fissa, così
   cambiando scheda la finestra non cambia misura */
.sapel-mail-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sapel-mail-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.sapel-mail-detail__people {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sapel-mail-detail__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.sapel-mail-detail__muted {
  color: var(--sapel-muted);
}

.sapel-mail-detail .sapel-detail__tabs {
  padding: 0;
}

.sapel-mail-detail .sapel-detail__tab:disabled {
  opacity: 0.5;
  cursor: default;
}

.sapel-mail-detail__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: min(28rem, 52vh);
  overflow-y: auto;
}

.sapel-mail-detail__text {
  flex: 1;
  margin: 0;
  padding: 0.75rem;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
  color: var(--sapel-text);
  background: var(--sapel-surface-2);
  border-radius: var(--sapel-radius);
}

/* L'email com'è per chi la riceve: fondo bianco anche nel tema scuro */
.sapel-mail-detail__html {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-mail-paper);
}

.sapel-mail-detail__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 0.875rem;
  margin: 0 0 1rem;
}

.sapel-mail-detail__fields dt {
  font-weight: 400;
  color: var(--sapel-muted);
}

.sapel-mail-detail__fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.sapel-mail-detail__mono {
  font-family: var(--sapel-font-mono);
  font-size: 0.8125rem;
  color: var(--sapel-muted);
}

.sapel-mail-detail__actions {
  display: flex;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sapel-border);
}

/* Testo | HTML */
.sapel-mail-switch {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px;
  background: var(--sapel-surface-2);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
}

.sapel-mail-switch button {
  padding: 0.125rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--sapel-muted);
  background: transparent;
  border: 0;
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-mail-switch button.sapel-mail-switch--active {
  color: var(--sapel-text);
  font-weight: 600;
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
}

/* Messaggi della conversazione: una riga cliccabile per messaggio */
/* Scheda Ticket del dettaglio mail: il ticket collegato, in sola lettura */
.sapel-mail-ticket__intro {
  margin: 0 0 0.5rem;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-mail-ticket__card {
  padding: 1rem 1.25rem;
  border: 1px solid var(--sapel-border);
  border-left: 4px solid var(--sapel-primary);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-surface);
}

.sapel-mail-ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.sapel-mail-ticket__code {
  color: var(--sapel-accent-text);
  font-size: 1rem;
}

.sapel-mail-ticket__subject {
  margin: 0.25rem 0 0.75rem;
  color: var(--sapel-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sapel-mail-ticket__card .sapel-mail-detail__fields {
  margin-bottom: 0;
}

.sapel-mail-linked + .sapel-mail-linked {
  margin-top: 1rem;
}

.sapel-mail-linked__title {
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sapel-muted);
}

.sapel-mail-linked__row {
  display: grid;
  grid-template-columns: max-content minmax(0, 14rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--sapel-text);
  background: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-mail-linked__row + .sapel-mail-linked__row {
  margin-top: 0.25rem;
}

.sapel-mail-linked__row:hover {
  border-color: var(--sapel-border-strong);
  background: var(--sapel-surface-2);
}

.sapel-mail-linked__row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-mail-linked__row svg {
  width: 1rem;
  height: 1rem;
  color: var(--sapel-muted);
}

/* Compositore (forms/Message) come il nuovo messaggio di Hermes: in testa le
   righe Da, A, Cc e Oggetto con l'etichetta a sinistra e il campo senza bordo,
   separate da una linea; sotto l'editor del testo e gli allegati */
.sapel-composer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sapel-composer__head {
  background: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
}

.sapel-composer__head > * + * {
  border-top: 1px solid var(--sapel-border);
}

.sapel-composer__head .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.625rem;
  min-height: 2.625rem;
  margin: 0 !important;
  padding: 0.1875rem 0.75rem;
}

.sapel-composer__head .form-group:focus-within {
  background: color-mix(in oklab, var(--sapel-accent-soft) 35%, transparent);
}

.sapel-composer__head .form-group > label,
.sapel-composer__head .form-group > .form-label {
  position: static;
  flex: 0 0 4rem;
  max-width: none;
  margin: 0;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  transform: none;
}

.sapel-composer__head .form-group .sapel-recipients {
  flex: 1;
  min-width: 0;
  min-height: 2.125rem;
  padding: 0.1875rem 2.25rem 0.1875rem 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.sapel-composer__head .invalid-feedback {
  flex-basis: 100%;
  padding-left: 4.625rem;
}

.sapel-static-field__value {
  flex: 1;
  min-width: 0;
  color: var(--sapel-text);
  overflow-wrap: anywhere;
}

.sapel-static-field__note {
  color: var(--sapel-muted);
  font-size: 0.75rem;
}

.sapel-composer__footer {
  display: flex;
  justify-content: flex-end;
}

/* Editor del testo (components/ui/TextEditor) */
.sapel-editor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sapel-field-bg);
  border: 1px solid var(--sapel-border-strong);
  border-radius: var(--sapel-radius);
  transition:
    border-color var(--sapel-fast) var(--sapel-ease),
    box-shadow var(--sapel-fast) var(--sapel-ease);
}

.sapel-editor:focus-within {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-editor.is-invalid {
  border-color: var(--sapel-danger);
}

.sapel-editor.is-disabled {
  background: var(--sapel-surface-2);
}

.sapel-editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 0.3125rem 0.375rem;
  background: var(--sapel-surface-2);
  border-bottom: 1px solid var(--sapel-border);
}

/* Icona con una breve etichetta accanto (Grassetto, Elenco, Link...) */
.sapel-editor__button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 1.875rem;
  padding: 0 8px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sapel-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-editor__button:hover:not(:disabled) {
  color: var(--sapel-text);
  background: var(--sapel-border);
}

.sapel-editor__button--active,
.sapel-editor__button--active:hover:not(:disabled) {
  color: var(--sapel-accent-text);
  background: var(--sapel-accent-soft);
}

.sapel-editor__separator {
  width: 1px;
  height: 1.125rem;
  margin: 0 0.25rem;
  background: var(--sapel-border-strong);
}

.sapel-editor__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.375rem;
}

/* Colori del testo: un quadratino per colore, "Automatico" barrato */
.sapel-editor__colors {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0.375rem;
}

.sapel-editor__swatch {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--sapel-border-strong);
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-editor__swatch:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--sapel-ring);
}

.sapel-editor__swatch--auto {
  background: linear-gradient(
    to top right,
    var(--sapel-field-bg) calc(50% - 1px),
    var(--sapel-text) 50%,
    var(--sapel-field-bg) calc(50% + 1px)
  );
}

.sapel-editor__swatch--custom {
  display: inline-grid;
  place-items: center;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--sapel-text-2);
  background: var(--sapel-field-bg);
  border-style: dashed;
}

/* Colore personalizzato (TextEditor/CustomColor): area di saturazione e
   luminosità sopra la barra della tinta */
.sapel-color-custom__area,
.sapel-color-custom__hue {
  position: relative;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
  cursor: crosshair;
  touch-action: none;
}

.sapel-color-custom__area {
  height: 8.5rem;
  background-image:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent);
}

.sapel-color-custom__hue {
  height: 0.75rem;
  margin-top: 0.625rem;
  cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.sapel-color-custom__area:focus-visible,
.sapel-color-custom__hue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.sapel-color-custom__thumb {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sapel-color-custom .sapel-color-picker-hex {
  min-width: 0;
}

.sapel-color-custom .sapel-color-panel-apply:disabled {
  opacity: 0.5;
  cursor: default;
}

.sapel-editor__link .form-control {
  width: 17.5rem;
  height: 1.875rem;
  min-height: 0;
  padding: 0 0.5rem;
}

.sapel-editor__text {
  min-height: 16rem;
  max-height: 46vh;
  padding: 0.875rem 1rem;
  overflow: auto;
  outline: none;
  line-height: 1.55;
  color: var(--sapel-text);
  overflow-wrap: anywhere;
}

.sapel-editor__text:empty::before {
  content: attr(data-placeholder);
  color: var(--sapel-muted);
  pointer-events: none;
}

.sapel-editor__text p,
.sapel-editor__text div {
  margin: 0;
}

.sapel-editor__text ul,
.sapel-editor__text ol {
  margin: 0.25rem 0;
  padding-left: 1.5rem;
}

.sapel-editor__text blockquote {
  margin: 0.375rem 0;
  padding: 2px 0 2px 0.75rem;
  color: var(--sapel-text-2);
  border-left: 3px solid var(--sapel-border-strong);
}

.sapel-editor__text a {
  color: var(--sapel-accent-text);
}

.sapel-editor__text img {
  max-width: 100%;
  height: auto;
}

/* Allegati compatti (DropzoneInput compact): "Allega", i file come etichette,
   la riga accoglie i file trascinati */
.sapel-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.625rem;
  padding: 0.375rem;
  border: 1px dashed transparent;
  border-radius: var(--sapel-radius);
  transition:
    border-color var(--sapel-fast) var(--sapel-ease),
    background-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-attach.is-active {
  border-color: var(--sapel-primary);
  background: var(--sapel-accent-soft);
}

.sapel-attach.is-invalid {
  border-color: var(--sapel-danger);
}

.sapel-attach__button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.875rem;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sapel-text-2);
  background: var(--sapel-surface);
  border: 1px solid var(--sapel-border-strong);
  border-radius: var(--sapel-radius-sm);
  cursor: pointer;
}

.sapel-attach__button:hover:not(:disabled) {
  color: var(--sapel-accent-text);
  border-color: var(--sapel-primary);
}

.sapel-attach__file {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 20rem;
  height: 1.875rem;
  padding: 0 0.375rem 0 0.625rem;
  font-size: 0.8125rem;
  color: var(--sapel-text);
  background: var(--sapel-surface-2);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
}

.sapel-attach__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-attach__size,
.sapel-attach__hint {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--sapel-muted);
}

.sapel-attach__file button {
  display: inline-grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 0.65;
  cursor: pointer;
}

.sapel-attach__file button:hover {
  opacity: 1;
  background: var(--sapel-border-strong);
}

@media (max-width: 40rem) {
  .sapel-composer__head .form-group > label,
  .sapel-composer__head .form-group > .form-label {
    flex-basis: 3.25rem;
  }

  .sapel-composer__head .invalid-feedback {
    padding-left: 0;
  }

  .sapel-editor__link .form-control {
    width: 11rem;
  }
}

.sapel-mail-locked {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--sapel-warning);
  background: var(--sapel-warning-soft);
  border: 1px solid var(--sapel-warning-border);
  border-radius: var(--sapel-radius);
}

/* Destinatari come in Outlook (RecipientsInput): un'etichetta per indirizzo,
   il testo da scrivere in coda e il + della rubrica a destra. Il riquadro è
   un div, quindi il fuoco si prende da :focus-within */
.form-group .sapel-recipients {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding-right: 2.75rem;
  cursor: text;
}

.form-control.sapel-recipients:focus-within {
  border-color: var(--sapel-primary);
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

.form-control.sapel-recipients.is-invalid:focus-within {
  border-color: var(--sapel-danger);
  box-shadow: 0 0 0 3px var(--sapel-danger-ring);
}

.sapel-recipients.is-disabled {
  background-color: var(--sapel-surface-2);
  cursor: not-allowed;
}

.sapel-recipients__input {
  flex: 1 0 8rem;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.sapel-recipient {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0 0.5rem 0 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.375rem;
  cursor: default;
}

.sapel-recipient.is-invalid {
  border-color: var(--sapel-danger-border);
  background: var(--sapel-danger-soft);
  color: var(--sapel-danger);
}

.sapel-recipient__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-recipient__remove,
.sapel-recipients__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}

.sapel-recipient__remove {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.9375rem;
  opacity: 0.7;
}

.sapel-recipient__remove:hover:not(:disabled) {
  opacity: 1;
  background: var(--sapel-accent-soft);
}

.sapel-recipients__add {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--sapel-border);
  color: var(--sapel-accent-text);
  font-size: 1.125rem;
  transform: translateY(-50%);
}

.sapel-recipients__add:hover:not(:disabled),
.sapel-recipients__add[aria-expanded='true'] {
  border-color: var(--sapel-primary);
  background: var(--sapel-accent-soft);
}

.sapel-recipient__remove:disabled,
.sapel-recipients__add:disabled {
  cursor: not-allowed;
}

.sapel-recipients-menu .sapel-select-option {
  display: flex;
  flex-direction: column;
}

.sapel-recipients-menu__email {
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

/* --- Stato ADS ----------------------------------------------------------------
 * Tab del dettaglio ticket: in alto il campo per collegare un protocollo ADS e
 * "Scarica posta", sotto un riquadro per protocollo con lo stato attuale e lo
 * storico delle mail (righe che si aprono sul messaggio). Il colore dello
 * stato arriva dal dizionario in --ads-color.
 * --------------------------------------------------------------------------- */
/* Titolo suggerito per la richiesta su ADS, con il codice del ticket */
.sapel-ads-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface-2);
  color: var(--sapel-muted);
  font-size: 0.875rem;
}

.sapel-ads-hint code {
  color: var(--sapel-text);
  font-weight: 600;
}

.sapel-ads-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.sapel-ads-add {
  display: flex;
  flex: 1 1 22rem;
  align-items: flex-start;
  gap: 0.75rem;
}

.sapel-ads-add__field {
  flex: 1;
}

/* Pulsanti alti come il campo e allineati al suo bordo (il form-group ha
   margin-top: 0.5rem); con un errore sotto il campo restano in alto */
.sapel-ads-toolbar .btn {
  min-height: 3.375rem;
  margin-top: 0.5rem;
}

.sapel-ads-anomalies {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--sapel-warning-border, var(--sapel-border));
  border-left: 4px solid var(--sapel-warning);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-warning-soft, var(--sapel-surface));
}

.sapel-ads-anomalies__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--sapel-warning);
}

.sapel-ads-anomalies__head h4 {
  margin: 0 0 0.25rem;
  color: var(--sapel-text);
  font-size: 1rem;
  font-weight: 700;
}

.sapel-ads-anomalies__head p {
  margin: 0;
  color: var(--sapel-text-2);
  font-size: 0.8125rem;
}

.sapel-ads-anomalies__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.sapel-ads-anomaly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
}

.sapel-ads-anomaly__body {
  display: flex;
  flex: 1 1 20rem;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sapel-ads-anomaly__reason {
  color: var(--sapel-text);
  font-size: 0.875rem;
}

.sapel-ads-assign__reason {
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid var(--sapel-warning);
  border-radius: var(--sapel-radius-sm);
  background: var(--sapel-surface-2);
}

.sapel-ads-assign__mails {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  list-style: none;
  font-size: 0.8125rem;
}

.sapel-ads-assign__mails li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  overflow-wrap: anywhere;
}

.sapel-ads-ticket {
  background: var(--sapel-surface);
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  box-shadow: var(--sapel-shadow-xs);
  padding: 0.75rem 1rem;
}

.sapel-ads-ticket__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  color: var(--sapel-text);
}

/* Mail di ADS del protocollo: la tabella (minimal nel modale) sotto la testata */
.sapel-ads-ticket__head + * {
  margin-top: 0.75rem;
}

.sapel-ads-badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--sapel-muted);
  background: var(--sapel-surface-2);
  border: 1px solid var(--sapel-border);
  border-radius: 999px;
}

.sapel-ads-badge--colored {
  color: var(--ads-color);
  background: color-mix(in srgb, var(--ads-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--ads-color) 40%, transparent);
}

/* --- Finestra di dettaglio -------------------------------------------------------
 * DetailWindow (ticket, fogli lavoro...), sul modello della pratica di Heaven:
 * testata con i dati principali in coppie etichetta | valore, sotto le voci a
 * sinistra e il pannello della voce scelta a destra, in fondo i pulsanti.
 * Dentro una finestra (Modal maximizable) riempie l'altezza e scorre solo il
 * contenuto del pannello; in una pagina segue l'altezza del contenuto. */
.sapel-detail {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.sapel-detail__header {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
}

/* Il bordo sotto l'ultima riga finisce sotto quello del riquadro */
.sapel-detail__pair {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  margin-bottom: -1px;
  border-bottom: 1px solid var(--sapel-border);
}

.sapel-detail__pair:nth-child(odd):not(.sapel-detail__pair--wide) {
  border-right: 1px solid var(--sapel-border);
}

.sapel-detail__pair--wide {
  grid-column: 1 / -1;
}

.sapel-detail__label {
  padding: 0.4375rem 0.625rem;
  background: var(--sapel-surface-2);
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-detail__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.4375rem 0.625rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.sapel-detail__pair--wide .sapel-detail__value {
  display: block;
  white-space: pre-wrap;
}

/* Campo modificabile nella testata: l'etichetta è la colonna a sinistra, il
   campo occupa la cella senza etichetta interna */
.sapel-detail__pair--field .sapel-detail__value {
  padding: 0.25rem 0.375rem;
}

/* I campi hanno mb-2 (con !important): nella cella non serve */
.sapel-detail__pair--field .form-group {
  flex: 1;
  margin: 0 !important;
}

.sapel-detail__pair--field .form-group .form-control {
  min-height: 2.125rem;
  padding: 0.3125rem 0.5rem;
}

.sapel-detail__body {
  display: grid;
  flex: 1;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 0;
}

.sapel-detail__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}

.sapel-detail__nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.375rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
  background: var(--sapel-surface-2);
  color: var(--sapel-muted);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition:
    color var(--sapel-fast) var(--sapel-ease),
    border-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-detail__nav-item svg {
  width: 20px;
  height: 20px;
}

.sapel-detail__nav-item:hover {
  border-color: var(--sapel-border-strong);
  color: var(--sapel-text);
}

.sapel-detail__nav-item--active,
.sapel-detail__nav-item--active:hover {
  border-color: var(--sapel-primary);
  background: var(--sapel-surface);
  color: var(--sapel-accent-text);
  font-weight: 600;
}

.sapel-detail__count {
  position: absolute;
  top: 0.25rem;
  right: 0.375rem;
  color: var(--sapel-muted);
  font-size: 0.6875rem;
  font-weight: 400;
}

.sapel-detail__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
}

.sapel-detail__panel > [hidden] {
  display: none;
}

/* Il contenuto della voce e, se ne ha, le sue schede */
.sapel-detail__page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.sapel-detail__tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
  padding: 0 0.625rem;
  /* Scorre solo in orizzontale: con il solo overflow-x l'asse y diventerebbe
     auto e comparirebbe una barra verticale. La riga sotto è un'ombra interna,
     così il trattino della scheda attiva le sta sopra senza sporgere */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 -1px 0 var(--sapel-border);
}

.sapel-detail__tab {
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid transparent;
  color: var(--sapel-muted);
  font: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.sapel-detail__tab:hover {
  color: var(--sapel-text);
}

.sapel-detail__tab--active,
.sapel-detail__tab--active:hover {
  border-bottom-color: var(--sapel-primary);
  color: var(--sapel-accent-text);
  font-weight: 600;
}

.sapel-detail__content {
  flex: 1;
  min-height: 0;
  padding: 0.875rem;
  overflow-y: auto;
}

/* Voce con hideHeader aperta: la testata è nascosta (con display: grid
   l'attributo hidden da solo non basta) */
.sapel-detail__header[hidden] {
  display: none;
}

/* Contenuto fill (la risposta al cliente): il compositore riempie il pannello
   e il testo dell'editor prende lo spazio che resta, scorrendo da solo.
   contain: size fa sì che un testo lungo (la citazione) non allunghi la
   finestra: conta solo la min-height. Se la finestra è troppo bassa scorre
   tutto il contenuto, come prima */
.sapel-detail__content--fill {
  display: flex;
  flex-direction: column;
}

.sapel-detail__content--fill > .sapel-composer {
  flex: 1;
}

.sapel-detail__content--fill .sapel-composer > :has(> .form-group > .sapel-editor),
.sapel-detail__content--fill .form-group:has(> .sapel-editor) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.sapel-detail__content--fill .sapel-editor {
  flex: 1;
}

.sapel-detail__content--fill .sapel-editor__text {
  flex: 1;
  min-height: 12rem;
  max-height: none;
  contain: size;
}

.sapel-detail__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sapel-border);
}

.sapel-detail__actions:empty {
  display: none;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-detail__actions .btn {
  width: auto !important;
}

/* Anteprima del pulsante nel configuratore dell'iter (stile e icona) */
.sapel-iter-button-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.sapel-iter-button-preview .btn {
  width: auto !important;
}

/* Spinge a destra i pulsanti che seguono (es. le azioni dell'iter a sinistra) */
.sapel-detail__spacer {
  flex: 1;
}

/* Stato e step nella testata */
.sapel-detail__badge {
  --tone: var(--sapel-muted);
  --tone-soft: var(--sapel-surface-2);
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.sapel-detail__badge[data-tone='accent'] { --tone: var(--sapel-accent-text); --tone-soft: var(--sapel-accent-soft); }
.sapel-detail__badge[data-tone='success'] { --tone: var(--sapel-success); --tone-soft: var(--sapel-success-soft); }
.sapel-detail__badge[data-tone='warning'] { --tone: var(--sapel-warning); --tone-soft: var(--sapel-warning-soft); }
.sapel-detail__badge[data-tone='danger'] { --tone: var(--sapel-danger); --tone-soft: var(--sapel-danger-soft); }
.sapel-detail__badge[data-tone='info'] { --tone: var(--sapel-info); --tone-soft: var(--sapel-info-soft); }

.sapel-detail__note {
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

/* Testo Word del documento in cima alla voce Dettaglio, come la pratica di
 * Heaven: etichetta | file e stato | pulsanti */
.sapel-detail-text {
  margin-bottom: 1rem;
}

.sapel-detail-text__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-sm);
}

.sapel-detail-text__value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.4375rem 0.625rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.sapel-detail-text__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-detail-text__actions .btn {
  width: auto !important;
}

/* Badge sotto il nome del file (archiviato, bloccato, aperto in Word) */
.sapel-detail-text__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.125rem;
}

/* Riquadri di una voce del dettaglio (DetailWindow.Section): titolo con i
 * suoi pulsanti a destra, sotto il contenuto. Le righe del testo e del
 * firmato vanno da bordo a bordo (flush), separate da una linea */
.sapel-detail-section {
  min-width: 0;
  margin-bottom: 1.25rem;
}

.sapel-detail-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--sapel-border);
}

.sapel-detail-section__title {
  margin: 0;
  color: var(--sapel-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.sapel-detail-section__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-detail-section__actions .btn {
  width: auto !important;
}

/* Pulsante leggero nel titolo (es. lo storico delle aperture in Word) */
.sapel-detail-section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.375rem;
  border: 0;
  border-radius: var(--sapel-radius-sm);
  background: transparent;
  color: var(--sapel-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.sapel-detail-section__link:hover {
  color: var(--sapel-primary);
}

.sapel-detail-section__body {
  padding-top: 0.75rem;
}

.sapel-detail-section__body--flush {
  padding: 0;
}

.sapel-detail-section__body > .sapel-detail-text__row {
  border: 0;
  border-bottom: 1px solid var(--sapel-border);
  border-radius: 0;
}

.sapel-detail-section__body > .sapel-detail-text__row > .sapel-detail__label {
  padding-left: 0;
  background: transparent;
}

.sapel-detail-section__body > .sapel-detail-text__row > .sapel-detail-text__actions {
  padding-right: 0;
}

/* Riga su cui si sta trascinando un file da caricare */
.sapel-detail-text__row--over {
  background: var(--sapel-accent-soft);
}

/* Allegati a cartelle del foglio lavoro, come la pratica di Heaven: elenco e
 * file della scheda sono tabelle minimal; qui la scheda dell'allegato */
.sapel-folders__empty {
  padding: 0.75rem !important;
  color: var(--sapel-muted);
  text-align: center;
}

/* Scheda dell'allegato: la zona dei file (tabella minimal e pulsante per
   caricarli) accetta i file trascinati, e si colora quando passano sopra */
.sapel-folders__files {
  margin-top: 0.75rem;
  padding: 0.375rem;
  border: 1px dashed transparent;
  border-radius: var(--sapel-radius-sm);
}

.sapel-folders__files--over {
  border-color: var(--sapel-primary);
  background: var(--sapel-accent-soft);
}

.sapel-folders__file-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.sapel-folders__file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-folders__file-actions .btn,
.sapel-folders__footer .btn {
  width: auto !important;
}

.sapel-folders__dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  margin: 0.625rem 0 0;
  padding: 0.625rem;
  border: 1px dashed var(--sapel-border-strong);
  border-radius: var(--sapel-radius-sm);
  background: transparent;
  color: var(--sapel-muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.sapel-folders__dropzone:hover:not(:disabled) {
  border-color: var(--sapel-primary);
  color: var(--sapel-primary);
}

.sapel-folders__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.sapel-folders__footer .btn:first-child:not(:last-child) {
  margin-right: auto;
}

/* Collaboratori del ticket: la scelta del collega e il pulsante sulla stessa riga */
.sapel-collaborators__add {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sapel-collaborators__add > .form-group {
  flex: 1;
  min-width: 0;
}

/* Button è sempre a tutta larghezza (w-100): qui deve restare stretto */
.sapel-collaborators__add .btn,
.sapel-collaborators__remove {
  width: auto !important;
}

@media (max-width: 767.98px) {
  .sapel-detail__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .sapel-detail-text__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sapel-detail-text__actions {
    flex-wrap: wrap;
  }

  .sapel-detail__pair:nth-child(odd):not(.sapel-detail__pair--wide) {
    border-right: 0;
  }

  .sapel-detail__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sapel-detail__nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .sapel-detail__nav-item {
    flex: 0 0 6rem;
  }
}

/* --- Menu del tasto destro --------------------------------------------------------
 * components/ui/ContextMenu, come il menu contestuale di sasuite: in portale su
 * body sopra modali e tooltip, voci con icona ed eventuale scorciatoia, gruppi
 * separati da una riga, titolo (es. "Ticket TI26-A123") in cima. */
@keyframes sapel-context-menu-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.sapel-context-menu {
  position: fixed;
  z-index: 2000;
  /* larghezza del contenuto: vicino al bordo non si stringe */
  width: max-content;
  min-width: 250px;
  /* sempre dentro la finestra con 24px di margine (MARGIN in ContextMenu); se è più alto scorre */
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-lg);
  font-family: var(--sapel-font);
  animation: sapel-context-menu-in 140ms ease-out;
}

.sapel-context-menu__title {
  margin-bottom: 6px;
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--sapel-border);
  color: var(--sapel-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sapel-context-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--sapel-radius-sm);
  background: none;
  color: var(--sapel-text);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.sapel-context-menu__item:hover {
  background: var(--sapel-surface-2);
}

.sapel-context-menu__item--danger {
  color: var(--sapel-danger);
}

.sapel-context-menu__item:disabled {
  background: none;
  opacity: 0.45;
  cursor: default;
}

.sapel-context-menu__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.sapel-context-menu__label {
  flex: 1;
  white-space: nowrap;
}

.sapel-context-menu__kbd {
  margin-left: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sapel-muted);
  font: inherit;
  font-size: 11.5px;
}

.sapel-context-menu__sep {
  height: 1px;
  margin: 8px 4px;
  background: var(--sapel-border);
}

.sapel-context-menu__note {
  padding: 8px 12px;
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  .sapel-context-menu {
    animation: none;
  }
}

/* ==========================================================================
 * 7. Tema chiaro e scuro
 * -------------------------------------------------------------------------
 * Il tema è l'attributo data-theme dell'<html> (lo imposta lo script in testa
 * al layout, lo cambia il pannello Aspetto dell'header). I componenti nuovi usano i
 * token --sapel-*: qui sotto i valori dei due temi e i pochi ritocchi che non
 * si esprimono con un token.
 * ========================================================================= */

:root {
  color-scheme: light;
  /* I pochi controlli nativi rimasti (calendario dentro il DatePickerInput,
     selettore colore, caselle) prendono il colore del tema */
  accent-color: var(--sapel-primary);
  --sapel-chrome: #fff;
  --sapel-surface: #fff;
  --sapel-surface-2: #f5f6f8;
  --sapel-border: #dfe3e8;
  --sapel-border-strong: #c7ccd4;
  --sapel-text: hsl(0deg, 0%, 10%);
  --sapel-text-2: #3d4b5c;
  --sapel-muted: #5d7083;
  --sapel-accent-text: var(--sapel-primary);
  --sapel-accent-soft: oklch(0.519 var(--sapel-chroma) var(--sapel-hue) / 0.1);
}

[data-theme='dark'] {
  color-scheme: dark;
  --sapel-chrome: #17191e;
  --sapel-surface: #1c1f25;
  --sapel-surface-2: #252930;
  --sapel-border: #30353f;
  --sapel-border-strong: #454c58;
  --sapel-text: #e4e7ec;
  --sapel-text-2: #bcc3cd;
  --sapel-muted: #959fad;
  --sapel-accent-text: oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue));
  --sapel-accent-soft: oklch(0.765 calc(var(--sapel-chroma) * 0.72) var(--sapel-hue) / 0.14);

  --sapel-placeholder: #6b7480;
}

/* Barra laterale */
[data-theme='dark'] .sapel-sidebar {
  --nav-bg: var(--sapel-chrome);
  --nav-hover: #22252c;
  --nav-border: #2a2e36;
  --nav-border-strong: #3c424d;
  --nav-text: #e6e8ec;
  --nav-text-2: #b9bfc9;
  --nav-muted: #8a929f;
  --nav-accent-soft: var(--sapel-accent-soft);
  --nav-accent-text: var(--sapel-accent-text);
}

/* Attività del planning: sul fondo scuro la tinta della tipologia va rinforzata */
[data-theme='dark'] .sapel-planning-grid__activity:not(.sapel-planning-grid__activity--leave) {
  background: var(--sapel-surface) linear-gradient(var(--event-tint-strong), var(--event-tint-strong));
}

/* Ferie e permessi: come --sapel-danger del tema scuro, il testo si schiarisce */
[data-theme='dark'] .sapel-planning-grid__activity--leave {
  color: color-mix(in oklab, var(--event-color) 55%, #fff);
}

/* Modelli (Dizionari › Modelli): elenco delle variabili e anteprima delle email */
.sapel-merge-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

.sapel-merge-fields dt {
  font-family: var(--sapel-font-mono);
  font-weight: 500;
  color: var(--sapel-text);
}

.sapel-merge-fields dd {
  margin: 0;
  color: var(--sapel-muted);
}

/* Modelli email: la finestra non scorre. Il form la riempie, il testo si allunga
   fino ai pulsanti e la legenda delle variabili, a destra, scorre al suo interno */
.sapel-modal-window .modal-body > .sapel-mail-model,
.sapel-mail-model > nav,
.sapel-mail-model .sapel-navbar-pages,
.sapel-mail-model .sapel-navbar-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.sapel-mail-model .sapel-navbar-page[hidden] {
  display: none;
}

/* L'anteprima è lunga quanto l'email: scorre lei, non la finestra */
.sapel-mail-model .sapel-navbar-page {
  overflow-y: auto;
}

.sapel-mail-model .sapel-navbar-page > * {
  flex-shrink: 0;
}

.sapel-merge-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
}

.sapel-merge-layout__fields {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Dal riquadro del testo fino alla textarea, tutti si allungano */
.sapel-merge-layout__body,
.sapel-merge-layout__body .row,
.sapel-merge-layout__body .row > *,
.sapel-merge-layout__body .form-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.sapel-merge-layout__body {
  min-height: 8rem;
}

.sapel-merge-layout__body .form-group {
  margin-bottom: 0 !important;
}

/* TextArea si dà l'altezza del contenuto nello stile: qui comanda lo spazio libero */
.sapel-merge-layout__body textarea {
  flex: 1;
  height: auto !important;
  max-height: none;
}

.sapel-merge-legend {
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-surface-2);
}

.sapel-merge-legend__title {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sapel-text);
}

.sapel-merge-legend__group {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sapel-text-2);
}

.sapel-merge-legend__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--sapel-muted);
}

.sapel-merge-legend__note code {
  font-family: var(--sapel-font-mono);
  color: var(--sapel-text-2);
}

.sapel-merge-legend__list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
}

.sapel-merge-legend__list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.sapel-merge-legend__list li .sapel-merge-legend__note {
  padding-left: 0.5rem;
}

.sapel-merge-legend__field {
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--sapel-radius-sm);
  background: none;
  font-family: var(--sapel-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sapel-accent-text);
  cursor: pointer;
  transition: background var(--sapel-fast) var(--sapel-ease), border-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-merge-legend__field:hover {
  border-color: var(--sapel-border);
  background: var(--sapel-accent-soft);
}

.sapel-merge-legend__field:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sapel-ring);
}

/* Schermo stretto: la legenda va sotto il testo */
@media (max-width: 900px) {
  .sapel-merge-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 14rem);
  }
}

.sapel-mail-preview {
  display: block;
  width: 100%;
  /* L'altezza la prende dal contenuto dell'email, al caricamento */
  min-height: 20rem;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius);
  background: var(--sapel-mail-paper);
}

/* --- Inserito da / ultima modifica ---------------------------------------------
 * components/ui/AuditInfo, in fondo ai dettagli: una fascia leggera con le due
 * voci affiancate, una sotto l'altra quando lo spazio non basta (la riga che le
 * separa è lo spazio di 1px della griglia sul fondo del bordo). Avatar con le
 * iniziali in tinta tenue e un piccolo badge: + per l'inserimento (colore del
 * tema), matita per la modifica (neutro). */
.sapel-audit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-border);
}

.sapel-audit__entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  background: var(--sapel-surface-2);
}

.sapel-audit__avatar {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sapel-audit__entry[data-kind='modified'] .sapel-audit__avatar {
  background: var(--sapel-surface);
  box-shadow: inset 0 0 0 1px var(--sapel-border-strong);
  color: var(--sapel-text-2);
}

.sapel-audit__avatar[data-missing] {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--sapel-border-strong);
  color: var(--sapel-muted);
}

.sapel-audit__badge {
  position: absolute;
  right: -0.1875rem;
  bottom: -0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0.1875rem;
  border: 2px solid var(--sapel-surface-2);
  border-radius: 50%;
  background: var(--sapel-primary);
  color: var(--sapel-on-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sapel-audit__entry[data-kind='modified'] .sapel-audit__badge {
  background: var(--sapel-muted);
  color: var(--sapel-surface);
}

.sapel-audit__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.sapel-audit__name {
  overflow: hidden;
  color: var(--sapel-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sapel-audit__name[data-missing] {
  color: var(--sapel-muted);
  font-style: italic;
  font-weight: 400;
}

.sapel-audit__date {
  color: var(--sapel-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* In piccolo, a sinistra dei pulsanti in fondo al dettaglio (DetailWindow
   audit): niente fascia, avatar più piccoli; i pulsanti restano a destra */
.sapel-audit--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 auto 0 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sapel-audit--compact .sapel-audit__entry {
  gap: 0.5rem;
  padding: 0;
  background: transparent;
}

.sapel-audit--compact .sapel-audit__avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.sapel-audit--compact .sapel-audit__badge {
  right: -0.25rem;
  bottom: -0.25rem;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0.125rem;
  border-width: 1.5px;
  border-color: var(--sapel-surface);
}

.sapel-audit--compact .sapel-audit__name {
  font-size: 0.75rem;
}

.sapel-audit--compact .sapel-audit__date {
  font-size: 0.6875rem;
}

/* ---------------------------------------------------------------------------
 * Object storage (backoffice, Dizionari › Sistema › Object storage): schede a
 * pillola, card di stato e manutenzione, card dell'archivio (cartelle e file).
 * data-tone sceglie la tinta della card: success, warning, danger, info, accent
 * ------------------------------------------------------------------------- */
.sapel-storage__tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-xl);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
}

.sapel-storage__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--sapel-radius-lg);
  background: transparent;
  color: var(--sapel-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--sapel-fast) var(--sapel-ease), color var(--sapel-fast) var(--sapel-ease);
}

.sapel-storage__tab svg {
  width: 18px;
  height: 18px;
}

.sapel-storage__tab:hover {
  color: var(--sapel-text);
}

.sapel-storage__tab--active,
.sapel-storage__tab--active:hover {
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
  box-shadow: var(--sapel-shadow-xs);
}

.sapel-storage__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.sapel-storage__card {
  --tone: var(--sapel-primary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-xl);
  color: var(--sapel-text);
}

.sapel-storage__card--link {
  cursor: pointer;
}

.sapel-storage__card[data-tone='success'] { --tone: var(--sapel-success); }
.sapel-storage__card[data-tone='warning'] { --tone: var(--sapel-warning); }
.sapel-storage__card[data-tone='danger'] { --tone: var(--sapel-danger); }
.sapel-storage__card[data-tone='info'] { --tone: var(--sapel-info); }
.sapel-storage__card[data-tone='accent'] { --tone: var(--sapel-primary); }

.sapel-storage__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sapel-storage__card-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sapel-radius-lg);
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  color: var(--tone);
}

.sapel-storage__card-icon svg {
  width: 20px;
  height: 20px;
}

.sapel-storage__card-title {
  color: var(--sapel-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sapel-storage__card-value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.sapel-storage__card-hint {
  color: var(--sapel-muted);
  font-size: 0.8125rem;
}

.sapel-storage__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.sapel-storage__card-actions > * {
  flex: 1 1 160px;
}

.sapel-storage__meter {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--sapel-border);
  overflow: hidden;
}

.sapel-storage__meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone);
}

.sapel-storage__workers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.sapel-storage__workers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sapel-storage__panel {
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-xl);
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-xs);
}

.sapel-storage__title {
  margin: 24px 0 12px;
  font-size: 1rem;
  font-weight: 700;
}

/* Archivio: una card per cartella o file, in griglia */
.sapel-storage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.sapel-storage__entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  color: var(--sapel-text);
}

.sapel-storage__entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sapel-radius);
  background: var(--sapel-accent-soft);
  color: var(--sapel-accent-text);
}

.sapel-storage__entry-icon svg {
  width: 20px;
  height: 20px;
}

.sapel-storage__entry-name {
  max-width: 100%;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sapel-storage__entry-meta {
  color: var(--sapel-muted);
  font-size: 0.75rem;
}

.sapel-storage__entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
}

.sapel-storage__entry-actions > * {
  flex: 1 1 80px;
}

/* Percorso nel modale dell'archivio: Archivio / ENTI / ENTE_1 ... */
.sapel-storage__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid var(--sapel-border);
  border-radius: var(--sapel-radius-lg);
  background: var(--sapel-field-bg);
  font-size: 0.875rem;
}

.sapel-storage__crumb {
  padding: 2px 8px;
  border: 0;
  border-radius: var(--sapel-radius-sm);
  background: transparent;
  color: var(--sapel-accent-text);
  font: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.sapel-storage__crumb:hover {
  background: var(--sapel-accent-soft);
}

.sapel-storage__crumbs > * + *::before {
  content: '/';
  margin-right: 8px;
  color: var(--sapel-muted);
  font-weight: 400;
}

.sapel-storage__crumb--current {
  color: var(--sapel-text);
  cursor: default;
}

.sapel-storage__crumb--current:hover {
  background: transparent;
}

.sapel-storage__more {
  max-width: 320px;
  margin: 16px auto 0;
}

/* ---------------------------------------------------------------------------
 * Card sfumate: la tinta della card (--tone: stato, priorità, avviso; se manca
 * il colore primario) sfuma dall'angolo in alto a sinistra verso la superficie.
 * Al passaggio un'ombra leggerissima nel colore primario del tema (Aspetto).
 * Valgono per le card dell'object storage, dei ticket e della Scrivania: per
 * una card nuova basta aggiungerne qui il selettore.
 * ------------------------------------------------------------------------- */
.sapel-storage__card,
.sapel-storage__entry,
.sapel-ticket-card,
.sapel-desk__tile {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--tone, var(--sapel-primary)) 10%, var(--sapel-surface)),
    var(--sapel-surface) 60%
  );
  box-shadow: var(--sapel-shadow-xs);
  transition:
    box-shadow var(--sapel-fast) var(--sapel-ease),
    transform var(--sapel-fast) var(--sapel-ease),
    border-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-storage__card:hover,
.sapel-storage__entry:hover,
.sapel-ticket-card:hover,
.sapel-desk__tile:hover {
  border-color: color-mix(in oklab, var(--sapel-primary) 30%, var(--sapel-border));
  box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--sapel-primary) 45%, transparent);
  transform: translateY(-2px);
}

/* La Scrivania non ha una tinta per riquadro: il primario, e il rosso per gli avvisi */
.sapel-desk__tile--alert {
  --tone: var(--sapel-danger);
}

/* ---------------------------------------------------------------------------
 * Correttore ortografico del backoffice (components/ui/SpellCheck): specchio
 * trasparente sopra input e textarea con gli errori sottolineati come in Word
 * (rosso l'ortografia, blu la grammatica), le stesse sottolineature nei campi
 * contenteditable (CSS Custom Highlight API) e il pulsante "Correggi"
 * ------------------------------------------------------------------------- */
.sapel-spell__mirror {
  position: fixed;
  z-index: 1065;
  margin: 0;
  color: transparent;
  pointer-events: none;
}

.sapel-spell__mark {
  text-decoration: underline wavy var(--sapel-danger);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}

.sapel-spell__mark[data-kind='grammar'] {
  text-decoration-color: var(--sapel-info);
}

::highlight(sapel-spell) {
  text-decoration: underline wavy var(--sapel-danger);
  text-decoration-skip-ink: none;
}

::highlight(sapel-grammar) {
  text-decoration: underline wavy var(--sapel-info);
  text-decoration-skip-ink: none;
}

.sapel-spell__button {
  position: fixed;
  z-index: 1066;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--sapel-border);
  border-radius: 999px;
  background: var(--sapel-surface);
  box-shadow: var(--sapel-shadow-sm);
  color: var(--sapel-accent-text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--sapel-fast) var(--sapel-ease), border-color var(--sapel-fast) var(--sapel-ease);
}

.sapel-spell__button:hover {
  border-color: color-mix(in oklab, var(--sapel-primary) 30%, var(--sapel-border));
  box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--sapel-primary) 45%, transparent);
}

/* "Correggi" tra i pulsanti della barra di TextEditor, dopo un separatore: chip
 * rossa finché ci sono errori, grigia quando non ce ne sono */
.sapel-spell__tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 1.625rem;
  padding: 0 10px;
  border: 1px solid var(--sapel-danger-border);
  border-radius: 999px;
  background: var(--sapel-danger-soft);
  color: var(--sapel-danger);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--sapel-fast) var(--sapel-ease);
}

.sapel-spell__tool:hover:not(:disabled) {
  box-shadow: 0 0 0 3px var(--sapel-danger-ring);
}

.sapel-spell__tool:disabled {
  border-color: var(--sapel-border);
  background: transparent;
  color: var(--sapel-muted);
  cursor: default;
}

.sapel-spell__count {
  min-width: 1.125rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sapel-danger);
  color: var(--sapel-on-primary);
  font-size: 0.6875rem;
  line-height: 1.125rem;
  text-align: center;
}

.sapel-spell__group {
  display: inline-flex;
  align-items: center;
}