/* SM Area Riservata - CSS completo */
:root {
  --ar-green:       #2e8b4a;
  --ar-green-dark:  #1a5c30;
  --ar-green-light: #e8f5ee;
  --ar-sidebar-w:   260px;
  --ar-topbar-h:    56px;
  --ar-white:       #ffffff;
  --ar-bg:          #f4f7f5;
  --ar-border:      #e0eae3;
  --ar-text:        #1c2b1e;
  --ar-muted:       #5a7060;
  --ar-radius:      10px;
  --ar-radius-lg:   16px;
  --ar-shadow:      0 2px 12px rgba(30,60,35,.09);
  --ar-shadow-md:   0 6px 28px rgba(30,60,35,.14);
  --ar-transition:  0.22s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 16px; color: var(--ar-text); background: var(--ar-bg); }
a { color: var(--ar-green); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin-bottom: .8rem; line-height: 1.65; }
p:last-child { margin-bottom: 0; }

/* ===== LAYOUT ===== */
.smar-layout { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
.smar-sidebar {
  width: var(--ar-sidebar-w);
  background: var(--ar-green-dark);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  transition: transform var(--ar-transition);
}
.smar-sidebar__logo { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.smar-sidebar__logo a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.smar-logo-mark {
  width: 42px; height: 42px;
  background: var(--ar-green);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: 1rem;
  color: #fff; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.2);
}
/* Logo caricato in WordPress: nella barra scura sta su una targhetta bianca,
   altrimenti un logo con scritte nere non si vedrebbe. */
.smar-logo-img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
}
/* Contenitore del logo, uguale in tutta l'area riservata (SMAR_Brand). */
.smar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.smar-brand--plate .smar-logo-img { background: #fff; padding: 9px 11px; border-radius: 10px; }
.smar-logo-text { display: flex; flex-direction: column; }
.smar-logo-text span { font-size: .72rem; color: rgba(255,255,255,.55); letter-spacing: .04em; }
.smar-logo-text strong { font-size: .95rem; color: #fff; font-weight: 700; }
.smar-sidebar__area-label {
  padding: 14px 20px 8px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
  font-weight: 700;
}
.smar-nav { flex: 1; padding: 4px 12px; overflow-y: auto; }
.smar-nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--ar-radius);
  color: rgba(255,255,255,.7);
  font-weight: 600;
  font-size: .88rem;
  transition: background var(--ar-transition), color var(--ar-transition);
  margin-bottom: 2px;
  text-decoration: none;
}
.smar-nav__item svg { flex-shrink: 0; }
.smar-nav__item:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.smar-nav__item.active { background: var(--ar-green); color: #fff; }
.smar-sidebar__footer { padding: 16px 16px 20px; border-top: 1px solid rgba(255,255,255,.1); }
.smar-user-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; background: rgba(255,255,255,.07); border-radius: var(--ar-radius); }
.smar-user-chip__avatar { width: 34px; height: 34px; background: var(--ar-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.smar-user-chip__name { display: block; font-size: .85rem; font-weight: 700; color: #fff; }
.smar-user-chip__role { display: block; font-size: .72rem; color: rgba(255,255,255,.5); }
.smar-btn-logout {
  width: 100%; padding: 9px 14px; border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  cursor: pointer; font-size: .84rem;
  display: flex; align-items: center; gap: 8px;
  transition: background var(--ar-transition);
  font-family: inherit;
}
.smar-btn-logout:hover { background: rgba(220,38,38,.25); color: #fff; border-color: rgba(220,38,38,.4); }
.smar-back-site { display: block; text-align: center; font-size: .77rem; color: rgba(255,255,255,.35); margin-top: 10px; }
.smar-back-site:hover { color: rgba(255,255,255,.6); text-decoration: none; }

/* ===== MAIN ===== */
/* min-width: 0 e' indispensabile: senza, questo riquadro (che e' un figlio
   flex) si allarga fino alla larghezza minima del suo contenuto. Bastava una
   tabella larga e tutta la pagina scivolava fuori a destra, portandosi dietro
   titoli e pulsanti. Con questa riga le tabelle scorrono dentro
   .smar-table-wrap, come era previsto. */
.smar-main { flex: 1; margin-left: var(--ar-sidebar-w); display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.smar-topbar { display: none; height: var(--ar-topbar-h); background: var(--ar-white); border-bottom: 1px solid var(--ar-border); padding: 0 16px; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 100; }
.smar-topbar__title { flex: 1; font-weight: 700; font-size: .95rem; }
.smar-topbar__user { width: 34px; height: 34px; background: var(--ar-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; }
.smar-menu-toggle { background: none; border: none; cursor: pointer; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.smar-menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ar-text); border-radius: 2px; transition: all var(--ar-transition); }
.smar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }
/* La larghezza utile. Nell'area di gestione si allarga con la finestra fino a
   1920px: su un monitor grande l'agenda, il planner, le tabelle e la cartella
   documenti guadagnano colonne invece di lasciare mezzo schermo vuoto accanto
   a una striscia di 1100px. Oltre i 1920 il riquadro smette di crescere e i
   margini auto spartiscono lo spazio che avanza, cosi' le righe di testo non
   diventano illeggibili.
   L'area del paziente resta stretta: ha poche cose, e leggerle su una riga
   lunga il doppio e' peggio, non meglio. */
.smar-content { padding: 28px; max-width: 1100px; width: 100%; flex: 1; }
.smar-role-medico .smar-content { max-width: 1920px; margin-inline: auto; }

/* ===== PAGE HEADER ===== */
.smar-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.smar-page-header h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 4px; }
.smar-page-header p { color: var(--ar-muted); font-size: .9rem; margin: 0; }

/* ===== KPI GRID ===== */
.smar-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.smar-kpi { background: var(--ar-white); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-lg); padding: 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--ar-shadow); }
.smar-kpi__icon { width: 44px; height: 44px; border-radius: var(--ar-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smar-kpi__icon--green  { background: var(--ar-green-light); color: var(--ar-green); }
.smar-kpi__icon--blue   { background: #eff6ff; color: #3b82f6; }
.smar-kpi__icon--orange { background: #fff7ed; color: #f59e0b; }
.smar-kpi__icon--yellow { background: #fefce8; color: #ca8a04; }
.smar-kpi__num { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.smar-kpi__label { font-size: .82rem; color: var(--ar-muted); margin-top: 2px; }

/* ===== CARDS ===== */
.smar-card { background: var(--ar-white); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-lg); padding: 22px; box-shadow: var(--ar-shadow); }
.smar-card--highlight { border-left: 4px solid var(--ar-green); }
.smar-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.smar-card__header h3 { font-size: 1rem; font-weight: 700; }
.smar-card__footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ar-border); }

/* ===== APPOINTMENTS ===== */
.smar-appt-list { display: flex; flex-direction: column; gap: 10px; }
.smar-appt-item { display: flex; align-items: flex-start; gap: 16px; background: var(--ar-white); border: 1px solid var(--ar-border); border-radius: var(--ar-radius); padding: 14px 16px; transition: box-shadow var(--ar-transition); }
.smar-appt-item:hover { box-shadow: var(--ar-shadow-md); }
.smar-appt-item__date { text-align: center; min-width: 60px; flex-shrink: 0; }
.smar-appt-item__date .day { display: block; font-size: .75rem; color: var(--ar-muted); text-transform: capitalize; }
.smar-appt-item__date .time { display: block; font-size: 1.1rem; font-weight: 700; color: var(--ar-green-dark); }
.smar-appt-item__date .dur  { display: block; font-size: .72rem; color: var(--ar-muted); }
.smar-appt-item__body { flex: 1; }
.smar-appt-item__body strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.smar-appt-item__body span  { display: block; font-size: .85rem; color: var(--ar-muted); }
.smar-appt-item__body .note { font-style: italic; font-size: .82rem; color: var(--ar-muted); margin-top: 4px; }
.smar-appt-item__status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.smar-appt-preview { padding: 14px; background: var(--ar-green-light); border-radius: var(--ar-radius); }
.smar-appt-preview__date strong { display: block; font-size: 1rem; }
.smar-appt-preview__date span { font-size: .85rem; color: var(--ar-muted); }
.smar-appt-preview__service { margin-top: 6px; font-weight: 600; color: var(--ar-green-dark); }
.smar-appt-mini { font-size: .85rem; padding: 6px 10px; background: var(--ar-green-light); border-radius: 6px; margin-bottom: 6px; }
.smar-phone-link { font-size: .82rem; color: var(--ar-green) !important; margin-top: 4px; display: inline-block; }

/* ===== SLOTS ===== */
.smar-slots-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.smar-slot { padding: 8px 14px; border: 1.5px solid var(--ar-border); border-radius: 8px; background: var(--ar-white); cursor: pointer; font-size: .88rem; font-weight: 600; transition: all var(--ar-transition); font-family: inherit; }
.smar-slot:hover { border-color: var(--ar-green); color: var(--ar-green); }
.smar-slot.selected { background: var(--ar-green); border-color: var(--ar-green); color: #fff; }

/* ===== DOCUMENTS ===== */
.smar-doc-list { display: flex; flex-direction: column; gap: 10px; }
.smar-doc-item { display: flex; align-items: center; gap: 14px; background: var(--ar-white); border: 1px solid var(--ar-border); border-radius: var(--ar-radius); padding: 14px 16px; transition: box-shadow var(--ar-transition); }
.smar-doc-item--unread { border-left: 3px solid var(--ar-green); }
.smar-doc-item:hover { box-shadow: var(--ar-shadow); }
.smar-doc-item__icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.smar-doc-item__body { flex: 1; }
.smar-doc-item__body strong { display: block; font-size: .96rem; }
.smar-doc-item__body span  { display: block; font-size: .82rem; color: var(--ar-muted); }
.smar-doc-item__body small { font-size: .77rem; color: var(--ar-muted); }
.smar-doc-mini { font-size: .82rem; padding: 5px 10px; background: var(--ar-bg); border-radius: 6px; margin-bottom: 5px; }

/* ===== PATIENTS ===== */
.smar-patients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.smar-patient-card { background: var(--ar-white); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-lg); padding: 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: box-shadow var(--ar-transition), border-color var(--ar-transition); }
.smar-patient-card:hover { box-shadow: var(--ar-shadow-md); border-color: var(--ar-green); }
.smar-patient-card__avatar { width: 42px; height: 42px; background: var(--ar-green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ar-green); font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.smar-patient-card__body { flex: 1; }
.smar-patient-card__body strong { display: block; font-size: .96rem; }
.smar-patient-card__body span { display: block; font-size: .8rem; color: var(--ar-muted); }
.smar-patient-card__actions { display: flex; gap: 6px; }
.smar-scheda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.smar-scheda-col h4 { font-size: .9rem; font-weight: 700; color: var(--ar-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.smar-data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.smar-data-table td { padding: 6px 8px; border-bottom: 1px solid var(--ar-border); }
.smar-data-table td:first-child { color: var(--ar-muted); font-weight: 600; width: 110px; }
.smar-note-box { background: var(--ar-green-light); border-radius: var(--ar-radius); padding: 12px; font-size: .88rem; }

/* ===== BADGES ===== */
.smar-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.smar-badge--pending   { background: #fef3c7; color: #92400e; }
.smar-badge--confirmed { background: var(--ar-green-light); color: var(--ar-green-dark); }
.smar-badge--completed { background: #eff6ff; color: #1e40af; }
.smar-badge--cancelled { background: #fee2e2; color: #991b1b; }
.smar-badge--no_show   { background: #f3f4f6; color: #6b7280; }
.smar-badge-count { background: var(--ar-green); color: #fff; border-radius: 4px; padding: 1px 7px; font-size: .7rem; font-weight: 700; margin-left: 4px; }

/* ===== BUTTONS ===== */
.smar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 6px; font-weight: 500; font-size: .88rem; cursor: pointer; border: 1px solid transparent; transition: all var(--ar-transition); font-family: inherit; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.smar-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,115,184,.28); }
.smar-btn--primary { background: var(--ar-green); color: #fff; border-color: var(--ar-green); }
.smar-btn--primary:hover { background: var(--ar-green-dark); border-color: var(--ar-green-dark); color: #fff; }
.smar-btn--outline { background: transparent; color: var(--ar-green); border-color: var(--ar-green); }
.smar-btn--outline:hover { background: var(--ar-green); color: #fff; }
.smar-btn--sm  { padding: 6px 12px; font-size: .8rem; border-radius: 5px; }
.smar-btn--xs  { padding: 4px 9px; font-size: .76rem; border-radius: 5px; }
.smar-btn--green  { background: var(--ar-green); color: #fff; border-color: var(--ar-green); }
.smar-btn--danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.smar-btn--danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.smar-btn:disabled { opacity: .5; cursor: not-allowed; }
.smar-link { font-size: .88rem; font-weight: 600; color: var(--ar-green); }
.smar-link-btn { background: none; border: none; cursor: pointer; color: #dc2626; font-size: .8rem; font-family: inherit; padding: 0; }

/* ===== FORM ELEMENTS ===== */
.smar-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.smar-form-group label { font-size: .83rem; font-weight: 600; }
.smar-form-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.req { color: #dc2626; }
.smar-input, .smar-select, .smar-textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--ar-border);
  border-radius: var(--ar-radius); background: var(--ar-bg);
  color: var(--ar-text); font-size: .9rem; font-family: inherit;
  transition: border-color var(--ar-transition), box-shadow var(--ar-transition);
  outline: none;
}
.smar-input:focus, .smar-select:focus, .smar-textarea:focus {
  border-color: var(--ar-green);
  box-shadow: 0 0 0 3px rgba(46,139,74,.12);
  background: #fff;
}
.smar-textarea { resize: vertical; min-height: 80px; }
.smar-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a7060' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.smar-search-bar { display: flex; align-items: center; gap: 10px; background: var(--ar-white); border: 1.5px solid var(--ar-border); border-radius: var(--ar-radius); padding: 10px 14px; margin-bottom: 20px; }
.smar-search-input { flex: 1; border: none; background: none; outline: none; font-size: .9rem; font-family: inherit; color: var(--ar-text); }
.smar-autocomplete { position: absolute; left: 0; right: 0; background: #fff; border: 1px solid var(--ar-border); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-md); max-height: 220px; overflow-y: auto; z-index: 50; margin-top: 4px; }
.smar-autocomplete__item { padding: 10px 14px; cursor: pointer; font-size: .88rem; }
.smar-autocomplete__item:hover { background: var(--ar-green-light); }

/* ===== FILE DROP ===== */
.smar-file-drop { position: relative; border: 2px dashed var(--ar-border); border-radius: var(--ar-radius); background: var(--ar-bg); padding: 28px; text-align: center; cursor: pointer; transition: border-color var(--ar-transition), background var(--ar-transition); }
.smar-file-drop:hover, .smar-file-drop.dragover { border-color: var(--ar-green); background: var(--ar-green-light); }
.smar-file-drop svg { display: block; margin: 0 auto 10px; color: var(--ar-green); opacity: .6; }
.smar-file-drop p { font-size: .9rem; color: var(--ar-muted); }
.smar-file-drop span { font-size: .78rem; color: var(--ar-muted); }
.smar-progress { background: var(--ar-border); border-radius: 4px; height: 6px; margin-top: 12px; overflow: hidden; }
.smar-progress__bar { height: 100%; background: var(--ar-green); border-radius: 4px; transition: width .3s ease; width: 0%; }

/* ===== ALERTS ===== */
.smar-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--ar-radius); font-size: .88rem; line-height: 1.5; }
.smar-alert--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.smar-alert--success { background: var(--ar-green-light); color: var(--ar-green-dark); border: 1px solid #a8d9b8; }
.smar-alert--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.smar-alert--warning { background: #fef6e7; color: #8a5300; border: 1px solid #f3d6a0; }
.smar-alert a { color: inherit; font-weight: 700; }

/* ===== TABS ===== */
.smar-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 2px solid var(--ar-border); }
.smar-tab { background: none; border: none; padding: 10px 18px; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--ar-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--ar-transition); font-family: inherit; }
.smar-tab:hover { color: var(--ar-green); }
.smar-tab.active { color: var(--ar-green); border-bottom-color: var(--ar-green); }

/* ===== MODAL ===== */
.smar-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; }
.smar-modal[style*="flex"] { display: flex !important; }
.smar-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); cursor: pointer; }
.smar-modal__box { position: relative; background: #fff; border-radius: var(--ar-radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.smar-modal--wide .smar-modal__box { max-width: 800px; }
.smar-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--ar-border); position: sticky; top: 0; background: #fff; z-index: 1; }
.smar-modal__header h3 { font-size: 1.05rem; font-weight: 700; }
.smar-modal__close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ar-muted); padding: 2px 8px; border-radius: 6px; line-height: 1; }
.smar-modal__close:hover { background: var(--ar-bg); }
.smar-modal__body { padding: 22px 24px; }
.smar-modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--ar-border); }

/* ===== MISC ===== */
.smar-loading { text-align: center; padding: 40px; color: var(--ar-muted); font-size: .9rem; }
.smar-empty { text-align: center; padding: 48px 24px; color: var(--ar-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.smar-empty svg { opacity: .3; }
.smar-empty-msg { text-align: center; padding: 28px; color: var(--ar-muted); font-size: .9rem; }
.smar-data-table { width: 100%; border-collapse: collapse; }
.smar-link { color: var(--ar-green); font-weight: 600; font-size: .88rem; }
.smar-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== LOGIN PAGE ===== */
/* Il cerchio decorativo in basso a destra (::after) sporge di 120px fuori dallo
   schermo. L'overflow:hidden qui sotto non lo taglia: quando l'elemento <html>
   e' "visible", l'overflow del <body> viene passato alla finestra, e il body
   resta di fatto visibile. Risultato: la pagina scorreva di lato di 120px su
   vuoto, sul telefono si vedeva. Basta fermare il passaggio sulla radice. */
html:has(> body.smar-login-body) { overflow-x: hidden; }
.smar-login-body {
  background: linear-gradient(160deg, #0a2e16 0%, #1a5c30 45%, #2e8b4a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.smar-login-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}
.smar-login-body::after {
  content: '';
  position: absolute;
  bottom: -120px; right: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  pointer-events: none;
}
.smar-login-wrap { width: 100%; max-width: 420px; position: relative; z-index: 1; }
.smar-login-card {
  background: #fff;
  border-radius: 20px;
  padding: 44px 40px 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.06);
}
.smar-login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  justify-content: center;
}
.smar-login-logo .smar-logo-img { max-width: 210px; margin: 0 auto; background: none; padding: 0; }
.smar-login-logo .smar-logo-mark {
  width: 46px; height: 46px;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(46,139,74,.35);
}
.smar-login-logo .smar-logo-text span { color: var(--ar-muted); }
.smar-login-logo .smar-logo-text strong { color: var(--ar-green-dark); font-size: 1rem; }
.smar-login-header { text-align: center; margin-bottom: 30px; }
.smar-login-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--ar-green-light) 0%, #c8e6d0 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--ar-green);
  box-shadow: 0 4px 16px rgba(46,139,74,.18);
}
.smar-login-header h1 {
  font-size: 1.4rem;
  font-family: 'Playfair Display', serif;
  margin-bottom: 6px;
  color: var(--ar-text);
}
.smar-login-header p { font-size: .87rem; color: var(--ar-muted); line-height: 1.5; }
.smar-form-group label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ar-text);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.smar-input-wrap { position: relative; display: flex; align-items: center; }
.smar-input-wrap svg:first-child {
  position: absolute; left: 13px;
  color: var(--ar-muted); pointer-events: none;
}
.smar-input-wrap .smar-input {
  padding-left: 40px;
  background: #f8faf9;
  border-color: #e0ead3;
}
.smar-input-wrap .smar-input:focus { background: #fff; }
.smar-pw-toggle {
  position: absolute; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--ar-muted); padding: 4px;
  transition: color var(--ar-transition);
}
.smar-pw-toggle:hover { color: var(--ar-green); }
/* "Ricordami" nel login staff. */
.smar-login-remember { margin: -4px 0 16px; }

/* Il codice parte da se' alle 6 cifre: qui si vede che sta lavorando. */
.smar-code-state {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--ar-muted);
    padding: 6px 2px;
}
.smar-code-state.on { display: flex; }

.smar-btn-submit {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--ar-green) 0%, #27a844 100%);
  color: #fff; border: none;
  border-radius: 6px;
  font-size: .95rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--ar-transition);
  margin-top: 8px;
  box-shadow: 0 4px 18px rgba(46,139,74,.35);
  letter-spacing: .01em;
}
.smar-btn-submit:hover {
  background: linear-gradient(135deg, var(--ar-green-dark) 0%, var(--ar-green) 100%);
  box-shadow: 0 6px 24px rgba(46,139,74,.45);
  transform: translateY(-1px);
}
.smar-btn-submit:active { transform: translateY(0); }
.smar-btn-submit:disabled { opacity: .6; transform: none; box-shadow: none; cursor: not-allowed; }
.smar-login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  font-size: .78rem; color: var(--ar-muted);
}
.smar-login-divider::before, .smar-login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--ar-border);
}
.smar-login-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ar-border);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.smar-login-links a {
  font-size: .82rem; color: var(--ar-muted);
  transition: color var(--ar-transition);
  display: flex; align-items: center; gap: 5px;
}
.smar-login-links a:hover { color: var(--ar-green); text-decoration: none; }
.smar-login-links a:first-child {
  color: var(--ar-green); font-weight: 600; font-size: .88rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .smar-sidebar { transform: translateX(-100%); }
  .smar-sidebar.open { transform: translateX(0); }
  .smar-main { margin-left: 0; }
  .smar-topbar { display: flex; }
  .smar-content { padding: 16px; }
  .smar-page-header { flex-direction: column; align-items: stretch; }
  .smar-kpi-grid { grid-template-columns: 1fr 1fr; }
  .smar-patients-grid { grid-template-columns: 1fr; }
  .smar-scheda-grid { grid-template-columns: 1fr; }
  .smar-appt-item { flex-wrap: wrap; }
  .smar-modal__box { margin: 10px; }
  .smar-form-row { flex-direction: column; }
}
@media (max-width: 480px) {
  .smar-kpi-grid { grid-template-columns: 1fr; }
  .smar-login-card { padding: 28px 20px; }
}

/* ===== LOGIN OTP ENHANCEMENTS ===== */
.smar-otp-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  background: var(--ar-green-light);
  border-radius: var(--ar-radius-lg);
  border: 1px solid #b8ddc4;
  margin-bottom: 20px;
}
.smar-otp-box svg { color: var(--ar-green); }
.smar-otp-box p  { font-size: .85rem; color: var(--ar-green-dark); text-align: center; margin: 0; }

/* Input OTP grande */
input[style*="letter-spacing:.25em"],
input[style*="letter-spacing: .25em"] {
  font-size: 1.6rem !important;
  letter-spacing: .35em !important;
  text-align: center;
  font-weight: 700;
  color: var(--ar-green-dark);
  background: #f8faf9;
  border-color: #c8e0d0;
  padding: 14px !important;
}
input[style*="letter-spacing:.25em"]:focus,
input[style*="letter-spacing: .25em"]:focus {
  background: #fff;
  border-color: var(--ar-green);
  box-shadow: 0 0 0 4px rgba(46,139,74,.10);
}

/* Spin animation */
@keyframes smar-spin { to { transform: rotate(360deg); } }
.smar-spin { animation: smar-spin .8s linear infinite; display: inline-block; }

/* Bottone resend */
button.smar-link {
  color: var(--ar-green);
  font-size: .82rem;
  font-weight: 600;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--ar-transition);
}
button.smar-link:hover { text-decoration-color: var(--ar-green); }

/* Step OTP - card con icona email */
#step-otp .smar-form-group label,
#email-otp-section .smar-form-group label,
#totp-section .smar-form-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ar-text);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 8px;
}

/* Alert dentro login card */
.smar-login-card .smar-alert {
  border-radius: var(--ar-radius);
  font-size: .85rem;
  padding: 11px 14px;
  margin-bottom: 18px;
}
.smar-login-card .smar-alert--info {
  background: #eff8ff;
  color: #1e5fa8;
  border: 1px solid #bfdbfe;
}
.smar-login-card .smar-alert--error {
  background: #fff1f1;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* Separatore visivo tra sezioni login */
#step-otp > div + div { margin-top: 16px; }

/* Chip "Torna a..." */
#btn-change-email {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--ar-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--ar-transition);
}
#btn-change-email:hover { color: var(--ar-green); }

/* Logo mark nel login card */
.smar-login-card .smar-logo-mark {
  background: var(--ar-green-dark);
  border: 2px solid var(--ar-green);
}

/* Responsivo login */
@media (max-width: 480px) {
  .smar-login-card { padding: 30px 22px 26px; }
  .smar-login-header h1 { font-size: 1.2rem; }
}

/* ============================
   TABELLE ELENCO (sessioni, registro accessi)
============================ */
.smar-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.smar-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.smar-table th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ar-muted);
  font-weight: 700;
  padding: 10px 10px;
  border-bottom: 2px solid var(--ar-border);
  white-space: nowrap;
}
.smar-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--ar-border);
  vertical-align: top;
}
.smar-table tbody tr:hover { background: var(--ar-bg); }
.smar-table code { font-size: .8rem; background: var(--ar-bg); padding: 1px 5px; border-radius: 5px; }

/* esito delle operazioni nel registro accessi */
.smar-res { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.smar-res--ok   { background: var(--ar-green-light); color: var(--ar-green-dark); }
.smar-res--fail { background: #fee2e2; color: #991b1b; }
.smar-res--deny { background: #fef3c7; color: #92400e; }

/* griglia dei campi nei form a due colonne */
@media (max-width: 640px) {
  .smar-card .smar-form-row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PLANNER APPUNTAMENTI
============================================================ */
.pl-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--ar-border); border-radius: var(--ar-radius);
  padding: 10px 12px; margin-bottom: 14px; position: sticky; top: 0; z-index: 20;
}
.pl-toolbar__date { font-weight: 700; min-width: 210px; text-transform: capitalize; }
.pl-toolbar .smar-btn { padding: 7px 12px; }
.pl-spacer { flex: 1 1 auto; }

.pl-wrap { background: #fff; border: 1px solid var(--ar-border); border-radius: var(--ar-radius); overflow: hidden; }
.pl-head { display: flex; border-bottom: 2px solid var(--ar-border); background: #fafbfc; position: sticky; top: 56px; z-index: 15; }
.pl-head__gutter { width: 58px; flex: 0 0 58px; border-right: 1px solid var(--ar-border); }
.pl-head__col {
  flex: 1 1 0; min-width: 0; padding: 9px 8px; text-align: center;
  font-size: .82rem; font-weight: 700; border-left: 1px solid var(--ar-border);
  text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-head__col small { display: block; font-weight: 600; font-size: .72rem; color: var(--ar-muted); }
.pl-head__col--today { background: var(--ar-green-light); }

.pl-body { display: flex; position: relative; overflow-x: auto; }
.pl-gutter { width: 58px; flex: 0 0 58px; border-right: 1px solid var(--ar-border); position: relative; background: #fafbfc; }
.pl-gutter__h {
  position: absolute; left: 0; right: 0; font-size: .72rem; color: var(--ar-muted);
  padding-right: 6px; text-align: right; font-variant-numeric: tabular-nums;
  transform: translateY(-7px);
}
.pl-col { flex: 1 1 0; min-width: 130px; position: relative; border-left: 1px solid var(--ar-border); }
.pl-col--drop { background: rgba(34,115,184,.06); }
.pl-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--ar-border); pointer-events: none; }
.pl-line--half { border-top-style: dotted; opacity: .7; }
.pl-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 6px, #e9eef3 6px, #e9eef3 12px); pointer-events: none; }
.pl-now { position: absolute; left: 0; right: 0; border-top: 2px solid #dc2626; z-index: 8; pointer-events: none; }
.pl-now::before { content: ''; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; }

.pl-appt {
  position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 7px;
  color: #fff; font-size: .78rem; line-height: 1.25; overflow: hidden; cursor: grab;
  box-shadow: 0 2px 8px rgba(25,45,70,.18); border-left: 4px solid rgba(255,255,255,.55);
  z-index: 10; user-select: none; touch-action: none;
}
.pl-appt:hover { filter: brightness(1.07); }
.pl-appt.dragging { opacity: .75; cursor: grabbing; z-index: 30; box-shadow: 0 10px 26px rgba(25,45,70,.35); }
.pl-appt__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-appt__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-appt__svc  { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-appt__grip { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.pl-appt__grip::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 2px; margin-left: -10px; background: rgba(255,255,255,.6); border-radius: 2px; }
.pl-appt--pending  { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 12px); }
.pl-appt--cancelled { opacity: .45; text-decoration: line-through; }
.pl-appt--done { opacity: .72; }
.pl-appt__flags { position: absolute; top: 3px; right: 5px; font-size: .68rem; opacity: .95; }

.pl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--ar-muted); margin-top: 10px; }
.pl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* riquadro ricerca paziente */
.pl-search { position: relative; }
.pl-results {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; z-index: 40;
  border: 1px solid var(--ar-border); border-radius: var(--ar-radius); max-height: 230px;
  overflow-y: auto; box-shadow: 0 10px 28px rgba(25,45,70,.16); display: none;
}
.pl-results__item { padding: 9px 12px; cursor: pointer; font-size: .86rem; border-bottom: 1px solid var(--ar-border); }
.pl-results__item:hover, .pl-results__item.active { background: var(--ar-green-light); }
.pl-results__item small { display: block; color: var(--ar-muted); }

/* stati sala d'attesa */
.wr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.wr-stat { background: #fff; border: 1px solid var(--ar-border); border-radius: var(--ar-radius); padding: 14px 16px; }
.wr-stat__num { font-size: 1.7rem; font-weight: 700; font-family: 'Playfair Display', serif; }
.wr-stat__label { font-size: .78rem; color: var(--ar-muted); text-transform: uppercase; letter-spacing: .06em; }
.wr-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--ar-border); flex-wrap: wrap; }
.wr-row:last-child { border-bottom: 0; }
.wr-row__time { font-weight: 700; font-variant-numeric: tabular-nums; width: 46px; }
.wr-row__body { flex: 1 1 180px; min-width: 0; }
.wr-row__name { font-weight: 700; }
.wr-row__meta { font-size: .8rem; color: var(--ar-muted); }
.wr-row--called  { background: #eff6ff; }
.wr-row--seated  { background: var(--ar-green-light); }
.wr-row--done    { opacity: .6; }
.wr-row--late    { background: #fffbeb; }
.wr-badge { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ar-bg); color: var(--ar-muted); }
.wr-badge--waiting { background: #fef3c7; color: #92400e; }
.wr-badge--called  { background: #dbeafe; color: #1e40af; }
.wr-badge--seated  { background: var(--ar-green-light); color: var(--ar-green-dark); }
.wr-badge--done    { background: #e5e7eb; color: #4b5563; }

/* ============================================================
   CARTELLA PARODONTALE
============================================================ */
.pe-toolbar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.pe-scroll { overflow-x:auto; padding-bottom:6px; }
.pe-table { border-collapse:collapse; font-size:.72rem; }
.pe-table th, .pe-table td { border:1px solid var(--ar-border); padding:0; text-align:center; }
.pe-table th.pe-row-h, .pe-table td.pe-row-h {
  position:sticky; left:0; z-index:2; background:#fafbfc; text-align:right;
  padding:2px 8px; font-weight:700; color:var(--ar-muted); white-space:nowrap; font-size:.7rem; min-width:112px;
}
.pe-tooth { background:var(--ar-green-light); font-weight:700; font-size:.76rem; padding:3px 0 !important; }
.pe-tooth--gone { background:#f1f5f9; color:#94a3b8; text-decoration:line-through; }
.pe-in {
  width:26px; height:24px; border:0; text-align:center; font-size:.74rem; background:transparent;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.pe-in::-webkit-outer-spin-button, .pe-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pe-in:focus { outline:2px solid var(--ar-green); background:#fff; position:relative; z-index:3; }
.pe-in--deep  { background:#fee2e2; color:#991b1b; font-weight:700; }
.pe-in--mid   { background:#fef3c7; color:#92400e; font-weight:700; }
.pe-dot { width:26px; height:20px; display:block; border:0; background:transparent; cursor:pointer; }
.pe-dot.on  { background:#dc2626; }
.pe-dot.on-pl { background:#3b82f6; }
.pe-sep td, .pe-sep th { border-top:2px solid var(--ar-green-dark); }
.pe-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:16px 0; }
.pe-card { background:#fff; border:1px solid var(--ar-border); border-radius:10px; padding:11px 13px; }
.pe-card__n { font-size:1.35rem; font-weight:700; font-family:'Playfair Display',serif; line-height:1.1; }
.pe-card__l { font-size:.72rem; color:var(--ar-muted); text-transform:uppercase; letter-spacing:.05em; }
.pe-card--alert { border-color:#fca5a5; background:#fef2f2; }
.pe-card--ok { border-color:#86efac; background:#f0fdf4; }
.pe-diag { font-size:.95rem; font-weight:700; }
.pe-summary { white-space:pre-wrap; font-size:.9rem; line-height:1.65; background:var(--ar-bg); border:1px solid var(--ar-border); border-radius:10px; padding:16px 18px; }
.pe-hint { font-size:.78rem; color:var(--ar-muted); }
.pe-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.75rem; color:var(--ar-muted); margin-top:8px; }
.pe-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px; }

/* ============================================================
   IMMAGINI / RADIOGRAFIE
============================================================ */
.im-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.im-item { background:#0f172a; border:1px solid var(--ar-border); border-radius:10px; overflow:hidden; cursor:pointer; position:relative; }
.im-item img { width:100%; height:140px; object-fit:cover; display:block; background:#0f172a; }
.im-item__meta { padding:8px 10px; background:#fff; }
.im-item__k { font-size:.74rem; font-weight:700; color:var(--ar-green-dark); }
.im-item__d { font-size:.72rem; color:var(--ar-muted); }
.im-item__t { font-size:.7rem; color:var(--ar-muted); }
.im-item__file { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#93c5fd; font-size:.8rem; text-align:center; padding:12px; }
.im-view { position:fixed; inset:0; background:rgba(8,15,30,.94); z-index:9999; display:none; flex-direction:column; }
.im-view.open { display:flex; }
.im-view__bar { display:flex; gap:8px; align-items:center; padding:10px 14px; background:rgba(0,0,0,.4); flex-wrap:wrap; color:#fff; font-size:.82rem; }
.im-view__bar button { background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:8px; padding:7px 12px; cursor:pointer; font-size:.8rem; }
.im-view__bar button:hover { background:rgba(255,255,255,.25); }
.im-view__stage { flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.im-view__stage img { max-width:100%; max-height:100%; transition:filter .1s; transform-origin:center; }
.im-view__cmp { display:flex; gap:6px; width:100%; height:100%; }
.im-view__cmp img { max-width:50%; object-fit:contain; }
.im-slider { display:flex; align-items:center; gap:6px; color:#fff; font-size:.75rem; }
.im-slider input { width:96px; }

/* ============================================================
   STATISTICHE
   Palette dei grafici verificata (contrasto e daltonismo):
   blu #2273b8 = eseguiti/valore, cremisi #be123c = mancate presentazioni.
============================================================ */
.bi-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:18px; }
.bi-kpi { background:#fff; border:1px solid var(--ar-border); border-radius:12px; padding:14px 16px; }
.bi-kpi__n { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:700; line-height:1.1; color:var(--ar-text); }
.bi-kpi__l { font-size:.74rem; color:var(--ar-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.bi-kpi__s { font-size:.76rem; color:var(--ar-muted); margin-top:4px; }
.bi-kpi--hero { grid-column:span 2; }
.bi-kpi--hero .bi-kpi__n { font-size:2.3rem; }

.bi-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:980px){ .bi-grid { grid-template-columns:1fr; } }

.bi-chart { position:relative; }
.bi-chart svg { display:block; width:100%; overflow:visible; }
.bi-grid-line { stroke:#e3edf5; stroke-width:1; }
.bi-axis { fill:#8fa0b2; font-size:10px; }
.bi-axis--y { text-anchor:end; }
.bi-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--ar-muted); margin:0 0 10px 2px; }
.bi-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.bi-tip {
  position:absolute; pointer-events:none; opacity:0; transition:opacity .1s;
  background:#0d3355; color:#fff; font-size:.76rem; line-height:1.45; padding:7px 10px;
  border-radius:8px; white-space:nowrap; z-index:5; box-shadow:0 6px 18px rgba(13,51,85,.3);
}
.bi-tip.on { opacity:1; }
.bi-hit { fill:transparent; cursor:crosshair; }
.bi-cross { stroke:#155284; stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.bi-cross.on { opacity:.7; }
.bi-empty { text-align:center; color:var(--ar-muted); font-size:.88rem; padding:36px 0; }
.bi-hbar__label { font-size:.8rem; }
.bi-hbar__value { font-size:.8rem; font-weight:700; fill:var(--ar-text); }
.bi-table { display:none; }
.bi-table.on { display:block; }

/* Etichette di gruppo nella barra laterale dello staff */
.smar-nav__group {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  color: rgba(255,255,255,.38); padding: 14px 18px 5px; margin-top: 2px;
}
.smar-nav__group:first-child { margin-top: 0; padding-top: 6px; }

/* ===== GRUPPI DI BOTTONI (stile Bootstrap) ===== */
.smar-btn-group { display: inline-flex; }
.smar-btn-group .smar-btn { border-radius: 0; margin-left: -1px; }
.smar-btn-group .smar-btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.smar-btn-group .smar-btn:last-child  { border-radius: 0 6px 6px 0; }
.smar-btn--light { background: #f8f9fa; color: var(--ar-text); border-color: var(--ar-border); }
.smar-btn--light:hover { background: #e9ecef; color: var(--ar-text); }
.smar-btn--link { background: none; border-color: transparent; color: var(--ar-green-dark); padding-left: 6px; padding-right: 6px; text-decoration: underline; }

/* ===== CASELLE DI SPUNTA IN RIGA ===== */
.smar-check-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 4px 0 16px; }
.smar-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 400; cursor: pointer; white-space: nowrap; }
.smar-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ar-green); margin: 0; flex: 0 0 auto; }
@media (max-width: 640px) { .smar-check-row { flex-direction: column; align-items: flex-start; } }

/* ===== CARICAMENTO DI TABELLE ED ELENCHI ===== */
.smar-skel { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, #eef1f4 25%, #e2e7ec 37%, #eef1f4 63%); background-size: 400% 100%; animation: smar-skel 1.2s ease-in-out infinite; }
.smar-skel--wide { width: 100%; }
@keyframes smar-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.smar-loading-row td { padding: 14px 12px !important; }
.smar-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px; color: var(--ar-muted); font-size: .88rem; }
.smar-loading::before { content: ''; width: 15px; height: 15px; border: 2px solid var(--ar-border); border-top-color: var(--ar-green); border-radius: 50%; animation: smar-spin .7s linear infinite; }
@keyframes smar-spin { to { transform: rotate(360deg); } }
.smar-empty-msg { padding: 26px 16px; text-align: center; color: var(--ar-muted); font-size: .9rem; }

/* ===== SCHEDE (TABS) ===== */
.smar-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ar-border); margin-bottom: 20px; flex-wrap: wrap; }
.smar-tab { appearance: none; background: none; border: 1px solid transparent; border-bottom: none; padding: 10px 16px; font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--ar-muted); cursor: pointer; border-radius: 6px 6px 0 0; margin-bottom: -1px; }
.smar-tab:hover { color: var(--ar-text); background: #f8f9fa; }
.smar-tab.active { color: var(--ar-green-dark); background: #fff; border-color: var(--ar-border); border-bottom-color: #fff; font-weight: 600; }
.smar-tab__count { display: inline-block; margin-left: 6px; background: var(--ar-bg); color: var(--ar-muted); border-radius: 4px; padding: 1px 6px; font-size: .74rem; font-weight: 700; }
.smar-tab.active .smar-tab__count { background: var(--ar-green-light); color: var(--ar-green-dark); }
.smar-tab-panel[hidden] { display: none; }

/* ===== CAMPO DEL CODICE E AZIONI DI ACCESSO ===== */
.smar-code-input { font-size: 1.9rem; letter-spacing: .45em; text-align: center; font-weight: 700; padding: 14px 10px 14px 20px; color: var(--ar-green-dark); background: #f4f8f5; border: 1.5px solid var(--ar-green); border-radius: 8px; }
.smar-code-input::placeholder { letter-spacing: .45em; color: #b8c6bc; }
.smar-login-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.smar-login-actions button { background: none; border: none; cursor: pointer; font-family: inherit; font-size: .83rem; color: var(--ar-muted); padding: 4px 2px; text-decoration: underline; }
.smar-login-actions button:hover { color: var(--ar-green-dark); }

/* ===== MODULI ===== */
.smar-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.smar-mod { background: var(--ar-white); border: 1px solid var(--ar-border); border-radius: var(--ar-radius-lg); padding: 16px 18px; box-shadow: var(--ar-shadow); opacity: .72; }
.smar-mod--on { opacity: 1; border-color: #cfe3d5; }
.smar-mod__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.smar-mod__head strong { font-size: .95rem; }
.smar-mod p { margin: 0 0 10px; font-size: .85rem; color: var(--ar-muted); line-height: 1.5; }
.smar-mod__foot { font-size: .76rem; color: var(--ar-muted); border-top: 1px dashed var(--ar-border); padding-top: 8px; }

/* interruttore */
.smar-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.smar-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.smar-switch span { position: absolute; inset: 0; background: #cbd5db; border-radius: 22px; transition: background var(--ar-transition); pointer-events: none; }
.smar-switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--ar-transition); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.smar-switch input:checked + span { background: var(--ar-green); }
.smar-switch input:checked + span::before { transform: translateX(18px); }
.smar-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(34,115,184,.28); }

/* ===== CARTELLA DOCUMENTI DEL PAZIENTE ===== */
.smar-doc-cat { border: 1px solid var(--ar-border); border-radius: 8px; margin-bottom: 12px; background: #fff; }
.smar-doc-cat > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; }
.smar-doc-cat > summary::-webkit-details-marker { display: none; }
.smar-doc-cat > summary::before { content: '▸'; margin-right: 8px; color: var(--ar-muted); transition: transform var(--ar-transition); }
.smar-doc-cat[open] > summary::before { content: '▾'; }
.smar-doc-sub { padding: 8px 16px 14px; border-top: 1px dashed var(--ar-border); }
.smar-doc-sub h5 { margin: 6px 0 8px; font-size: .84rem; font-weight: 600; color: var(--ar-green-dark); display: flex; align-items: center; gap: 8px; }
.smar-doc-sub ul { list-style: none; margin: 0; padding: 0; }
.smar-doc-sub--empty { font-size: .82rem; color: #9aa7ae; }
.smar-doc-sub--empty small { color: #b6c0c6; }
.smar-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--ar-border); border-radius: 6px; margin-bottom: 6px; background: #fcfdfd; }
.smar-doc-row strong { display: block; font-size: .86rem; font-weight: 600; }
.smar-doc-row small { display: block; font-size: .76rem; color: var(--ar-muted); margin-top: 2px; }
a.smar-patient-card { text-decoration: none; color: inherit; }

/* ===== SALA D'ATTESA ===== */
.wr-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.wr-col { background: var(--ar-bg); border: 1px solid var(--ar-border); border-radius: 10px; padding: 10px; min-height: 90px; }
.wr-col__head { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ar-muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wr-col__empty { color: #b6c0c6; font-size: .85rem; text-align: center; padding: 10px 0; }
.wr-card { background: #fff; border: 1px solid var(--ar-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.wr-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; font-size: .9rem; }
.wr-card__name { font-weight: 600; font-size: .95rem; margin-top: 2px; }
.wr-card__svc { font-size: .78rem; color: var(--ar-muted); }
.wr-card__late { font-size: .76rem; color: #b45309; margin-top: 4px; }
.wr-card__wait { font-size: .76rem; color: var(--ar-muted); margin-top: 2px; }
.wr-card__act { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wr-screen { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--ar-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; background: #fff; }
.wr-screen__meta { font-size: .78rem; color: var(--ar-muted); margin-top: 3px; }
.wr-screen__act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smar-select--xs { padding: 4px 26px 4px 8px; font-size: .78rem; width: auto; background-position: right 6px center; }

/* Aggiornamento in corso: il contenuto resta, si accende solo una barretta sopra. */
.is-refreshing { position: relative; }
.is-refreshing::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--ar-green), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: smar-refresh 1s linear infinite;
}
tbody.is-refreshing::before { top: 0; }
@keyframes smar-refresh { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }

/* ===== ESPLORA DOCUMENTI =====
   Albero a sinistra, contenuto a destra in icone o in dettagli, anteprima a
   schermo. Due sole colonne: la versione a tre sforava la larghezza della
   pagina sui portatili, perche' la somma dei minimi era piu' larga del
   contenitore. Qui la colonna del contenuto parte da minmax(0,1fr), cosi'
   non spinge mai oltre il riquadro che la contiene. */
.dx {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
}
.dx > * { min-width: 0; }
/* Su tablet la barra laterale dell'area riservata e' ancora al suo posto
   (260px) e al riquadro restano ~500px: albero 236 + contenuto 250 non ci
   stanno, e la barra degli strumenti finiva tagliata fuori a destra. Sotto
   i 1000px l'albero va sopra il contenuto e la larghezza torna intera. */
@media (max-width: 1000px) { .dx { grid-template-columns: 1fr; } .dx__tree { max-height: 220px; } }

.dx__tree {
  border: 1px solid var(--ar-border); border-radius: 10px; background: #fff;
  padding: 6px; max-height: 540px; overflow: auto;
}
.dx-branch { margin-bottom: 1px; }
.dx-row { display: flex; align-items: center; border-radius: 7px; }
.dx-row.on { background: var(--ar-green-light); }
.dx-node__tw {
  flex: 0 0 18px; width: 18px; height: 28px; border: 0; background: none; cursor: pointer;
  color: var(--ar-muted); font-size: .7rem; line-height: 1; padding: 0;
}
.dx-node {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0;
  text-align: left; background: none; border: 0; font: inherit; font-size: .855rem;
  color: var(--ar-text); padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.dx-node > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-node > b {
  flex: 0 0 auto; font-size: .7rem; font-weight: 700; color: var(--ar-muted);
  background: var(--ar-bg); border-radius: 4px; padding: 1px 6px;
}
.dx-node:hover { background: #f1f5f8; }
.dx-node.on, .dx-row.on .dx-node { color: var(--ar-green-dark); font-weight: 600; }
.dx-node.on > b, .dx-row.on .dx-node > b { background: #fff; color: var(--ar-green-dark); }
.dx-node--root { border-bottom: 1px solid var(--ar-border); border-radius: 7px 7px 0 0; margin-bottom: 4px; font-weight: 600; }
.dx-node--sub { padding-left: 26px; font-size: .825rem; }
.dx-children { margin: 1px 0 4px; }
.dx-ico { flex: 0 0 auto; color: var(--ar-green); }

.dx__main { border: 1px solid var(--ar-border); border-radius: 10px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.dx__bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--ar-border); flex-wrap: wrap; min-width: 0;
}
.dx__up {
  flex: 0 0 auto; height: 28px; padding: 0 10px 0 8px; gap: 5px;
  border: 1px solid var(--ar-border); background: #fff; font: inherit; font-size: .8rem; font-weight: 600;
  border-radius: 7px; cursor: pointer; color: var(--ar-text); display: flex; align-items: center; justify-content: center;
}
.dx__up:hover:not(:disabled) { background: var(--ar-green-light); border-color: var(--ar-green); color: var(--ar-green-dark); }
.dx__up:disabled { opacity: .35; cursor: default; }
.dx__crumb { display: flex; align-items: center; gap: 4px; flex: 1 1 180px; min-width: 0; flex-wrap: wrap; font-size: .82rem; }
.dx__crumb button { border: 0; background: none; font: inherit; color: var(--ar-green-dark); cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.dx__crumb button:hover { background: var(--ar-green-light); }
.dx__crumb i { color: var(--ar-muted); font-style: normal; }
.dx__crumb span { color: var(--ar-muted); padding: 2px 4px; }
/* Strumenti elastici: con flex 0 0 auto la casella di ricerca teneva la sua
   larghezza fissa e usciva dal riquadro invece di restringersi. */
.dx__tools { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; justify-content: flex-end; }
.dx__search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ar-border); border-radius: 7px; padding: 4px 8px; color: var(--ar-muted); flex: 1 1 120px; min-width: 0; max-width: 260px; }
.dx__search input { border: 0; outline: 0; font-size: .82rem; width: 100%; min-width: 0; background: none; }
.dx__views { flex: 0 0 auto; }
.dx__views { display: flex; border: 1px solid var(--ar-border); border-radius: 7px; overflow: hidden; }
.dx__views button { border: 0; background: #fff; padding: 5px 8px; cursor: pointer; color: var(--ar-muted); display: flex; }
.dx__views button.on { background: var(--ar-green-light); color: var(--ar-green-dark); }

.dx__body { padding: 12px; overflow: auto; max-height: 540px; min-height: 220px; }
.dx__wait { padding: 40px 16px; text-align: center; color: var(--ar-muted); font-size: .88rem; }
.dx__found { font-size: .8rem; color: var(--ar-muted); margin-bottom: 10px; }
.dx__empty { padding: 36px 16px; text-align: center; color: var(--ar-muted); font-size: .88rem; }
.dx__empty .dx-ico { color: var(--ar-border); margin: 0 auto 10px; }
.dx__empty p { margin: 0 0 12px; }

/* --- icone --- */
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.dx-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border: 1px solid transparent; border-radius: 9px;
  background: none; font: inherit; cursor: pointer; text-align: center; min-width: 0;
}
.dx-tile:hover { background: #f6f9fb; border-color: var(--ar-border); }
.dx-tile__ic { color: var(--ar-green); display: flex; align-items: center; justify-content: center; height: 54px; }
.dx-tile__ic--img { width: 100%; height: 54px; border-radius: 6px; overflow: hidden; background: #0f1720; }
.dx-tile__ic--img img { width: 100%; height: 100%; object-fit: cover; }
.dx-tile--dir .dx-tile__ic { color: #e0a93b; }
/* Due righe sempre, anche quando il nome ne occupa una: altrimenti le caselle
   della stessa riga finiscono con il testo a altezze diverse. */
.dx-tile__nm {
  font-size: .8rem; font-weight: 600; color: var(--ar-text); width: 100%;
  line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.dx-tile--up .dx-tile__ic { color: var(--ar-muted); }

/* --- dettagli --- */
.dx-table-wrap { overflow-x: auto; }
.dx-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.dx-table th {
  text-align: left; font-size: .71rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ar-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--ar-border); white-space: nowrap;
}
.dx-table td { padding: 7px 8px; border-bottom: 1px solid #eef3f7; vertical-align: middle; }
.dx-tr { cursor: pointer; }
.dx-tr:hover { background: #f6f9fb; }
.dx-td-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dx-td-nm span { font-weight: 600; word-break: break-word; }
.dx-td-nm small { display: block; color: var(--ar-muted); font-weight: 400; }
.dx-tr--dir .dx-ico { color: #e0a93b; }
.dx-td-act { text-align: right; white-space: nowrap; }

/* --- anteprima --- */
body.dx-locked { overflow: hidden; }
.dx-prev { position: fixed; inset: 0; z-index: 900; display: none; }
.dx-prev.on { display: block; }
.dx-prev__bg { position: absolute; inset: 0; background: rgba(12,22,34,.62); }
.dx-prev__box {
  position: relative; margin: 4vh auto; width: min(960px, 92vw); max-height: 92vh;
  background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(10,20,32,.4);
}
.dx-prev__head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ar-border); }
.dx-prev__head strong { display: block; font-size: .95rem; word-break: break-word; }
.dx-prev__head small { color: var(--ar-muted); font-size: .76rem; }
.dx-prev__x { margin-left: auto; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ar-muted); }
.dx-prev__media { flex: 1 1 auto; background: #0f1720; display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: auto; }
.dx-prev__media img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.dx-prev__media iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.dx-prev__note { padding: 24px 18px; font-size: .9rem; line-height: 1.6; color: var(--ar-text); }

/* Testo, Word ed Excel aperti dentro l'anteprima. Il contenuto arriva dal
   server gia' in HTML, costruito pezzo per pezzo: qui si impagina soltanto. */
.dx-prev__media--doc { background: #f4f7f9; align-items: flex-start; justify-content: stretch; display: block; padding: 0; }
.dx-doc-wait { padding: 48px 18px; text-align: center; color: var(--ar-muted); font-size: .88rem; }
.dv-doc, .dv-sheet, .dx-prev__media--doc .dv-text {
  background: #fff; margin: 14px; padding: 20px 24px; border-radius: 8px;
  border: 1px solid var(--ar-border); max-height: 66vh; overflow: auto;
}
.dv-doc { font-size: .9rem; line-height: 1.6; color: var(--ar-text); }
.dv-doc p { margin: 0 0 .7em; }
.dv-text { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin: 0; }
.dv-cut { color: var(--ar-muted); font-style: italic; }
.dv-sheet { padding: 0; }
.dv-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.dv-table th, .dv-table td { border: 1px solid #e3eaf0; padding: 6px 9px; text-align: left; vertical-align: top; }
.dv-table th { background: #f1f5f8; font-weight: 700; position: sticky; top: 0; }
.dv-table tr:nth-child(even) td { background: #fafcfd; }
.dv-doc .dv-table { margin: .6em 0; }
.dx-prev__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--ar-border); }
.dx-prev__nav { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ar-muted); }
.dx-prev__nav button { border: 1px solid var(--ar-border); background: #fff; border-radius: 6px; font: inherit; font-size: .78rem; padding: 4px 9px; cursor: pointer; }
.dx-prev__nav button:disabled { opacity: .4; cursor: default; }
.dx-prev__act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Riga "Archivia in" dell'anteprima: sposta un file caricato in un'altra
   cartella. La tendina si restringe fino a 140px, cosi' su telefono la riga
   va a capo invece di allargare la finestra. */
.dx-move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           padding: 10px 14px; border-top: 1px solid var(--ar-border); background: var(--ar-bg); }
.dx-move__lbl { font-size: .78rem; color: var(--ar-muted); font-weight: 600; }
.dx-move__sel { flex: 1 1 140px; min-width: 0; max-width: 340px; font-size: .82rem; padding: 5px 8px; }
.dx-move__msg { font-size: .78rem; color: var(--ar-muted); }

/* La pagina non deve mai essere piu' larga dello spazio disponibile. Non si
   nasconde con un overflow sul contenitore (taglierebbe i menu a tendina e
   i riquadri): le griglie hanno la colonna elastica a minmax(0,1fr) e le
   tabelle larghe scorrono dentro .smar-table-wrap. Qui restano solo i limiti
   che impediscono a un figlio di spingere il genitore. */
.smar-content { min-width: 0; }
.smar-card { max-width: 100%; min-width: 0; }
.smar-tab-panel { min-width: 0; max-width: 100%; }

/* ===== PAGINA PERMESSI: livelli a sinistra, permessi a destra ===== */
.lv-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .lv-layout { grid-template-columns: 1fr; } }
.lv-list > div:last-child { padding: 8px; }
.lv-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
}
.lv-item:hover  { background: #f1f5f8; }
.lv-item:focus  { outline: 2px solid var(--ar-green); outline-offset: 1px; }
.lv-item.active { background: var(--ar-green-light); border-color: var(--ar-green); }
.lv-item__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lv-item__txt strong { font-size: .9rem; font-weight: 600; }
.lv-item__txt small  { font-size: .76rem; color: var(--ar-muted); }
.lv-item.active .lv-item__txt strong { color: var(--ar-green-dark); }

.lv-cap { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; font-size: .85rem; line-height: 1.3; cursor: pointer; }
.lv-cap input[type=checkbox] { margin-top: 3px; flex: 0 0 auto; accent-color: var(--ar-green); width: 16px; height: 16px; }
.lv-cap small { display: block; color: var(--ar-muted); font-size: .75rem; margin-top: 1px; }
.lv-cap input:disabled + span { opacity: .55; }