/* ==========================================================================
   ATM Frontend Styles — Area Riservata Clienti
   Design: Google Material — identico allo stile PVIP Citizen Module
   Plugin: Azienda Ticket Manager v1.0.0
   Author: YES I CODE
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --atm-blue:        #1a73e8;
  --atm-blue-hover:  #1557b0;
  --atm-blue-lt:     #e8f0fe;
  --atm-blue-mid:    #aecbfa;
  --atm-teal:        #0d9488;
  --atm-teal-hover:  #0f766e;
  --atm-green:       #137333;
  --atm-green-lt:    #e6f4ea;
  --atm-red:         #d93025;
  --atm-red-lt:      #fce8e6;
  --atm-warn:        #e37400;
  --atm-warn-lt:     #fef7e0;
  --atm-purple:      #7c4dff;
  --atm-purple-lt:   #ede7f6;
  --atm-text:        #202124;
  --atm-text-2:      #5f6368;
  --atm-text-3:      #9aa0a6;
  --atm-border:      #e8eaed;
  --atm-bg:          #f8f9fa;
  --atm-white:       #ffffff;
  --atm-r:           8px;
  --atm-shadow:      0 1px 3px rgba(60,64,67,.12), 0 2px 6px rgba(60,64,67,.08);
  --atm-shadow-lg:   0 2px 10px rgba(60,64,67,.15), 0 6px 20px rgba(60,64,67,.1);
  --atm-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;

  /* Alias legacy */
  --atm-primary:      var(--atm-blue);
  --atm-primary-dark: var(--atm-blue-hover);
  --atm-success:      var(--atm-green);
  --atm-warning:      var(--atm-warn);
  --atm-danger:       var(--atm-red);
}

/* ── Reset scoped ─────────────────────────────────────────────────────────── */
.atm-wrap *,
.atm-wrap *::before,
.atm-wrap *::after { box-sizing: border-box; }

.atm-wrap {
  font-family: var(--atm-font);
  color: var(--atm-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH — login / registrazione / verifica OTP
   ═══════════════════════════════════════════════════════════════════════ */
.atm-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  box-sizing: border-box;
  /*
   * Sfondo full-viewport via ::before con position:fixed.
   * Questa tecnica è immune a overflow:hidden/clip sui parent del tema:
   * position:fixed posiziona l'elemento rispetto al viewport, non al
   * contenitore, quindi non viene mai tagliato da nessun ancestor.
   * La precedente tecnica (width:100vw + margin-left:calc(50%−50vw))
   * veniva clippata dall'overflow:hidden del container del tema.
   */
}
.atm-auth-wrap::before {
  content:        '';
  position:       fixed;
  inset:          0;
  background:     var(--atm-bg);
  /*
   * z-index: 0  (non -1) → il layer grigio si sovrappone al background
   * bianco del tema, ma sta sotto la card grazie a z-index:1 su .atm-auth-card.
   * Con z-index:-1 il layer veniva nascosto dal background del body/tema.
   */
  z-index:        0;
  pointer-events: none;   /* non blocca i click */
}

.atm-auth-card {
  background:    var(--atm-white);
  border-radius: 16px;
  box-shadow:    var(--atm-shadow-lg);
  width:         100%;
  max-width:     560px;
  overflow:      hidden;
  border:        1px solid var(--atm-border);
  /* z-index:1 garantisce che la card stia sopra il ::before (z-index:0) */
  position:      relative;
  z-index:       1;
}

/* Header card — titolo + sottotitolo */
.atm-auth-header {
  padding: 32px 40px 24px;
  text-align: center;
  border-bottom: 1px solid var(--atm-border);
}

.atm-auth-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0d9488;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.atm-auth-header h1 {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--atm-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.atm-auth-header p {
  color: var(--atm-text-2);
  font-size: .9rem;
  margin: 8px 0 0;
}

.atm-auth-body {
  padding: 32px 40px 36px;
}

/* Footer con link */
.atm-auth-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--atm-border);
  margin-top: 24px;
  font-size: .875rem;
  color: var(--atm-text-2);
}

.atm-auth-footer a {
  color: var(--atm-blue);
  font-weight: 500;
  text-decoration: none;
}

.atm-auth-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════ */
.atm-form-group { margin-bottom: 20px; }
.atm-form-hint { display:block; margin-top:5px; font-size:.8rem; color:#6b7280; line-height:1.4; }

.atm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.atm-form-group label,
.atm-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--atm-text);
  margin-bottom: 6px;
}

.atm-label span.required { color: var(--atm-red); margin-left: 2px; }

.atm-form-group input:not([type="checkbox"]):not([type="radio"]),
.atm-form-group select,
.atm-form-group textarea,
.atm-input,
.atm-select,
.atm-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--atm-border);
  border-radius: var(--atm-r);
  font-family: var(--atm-font);
  font-size: .9375rem;
  color: var(--atm-text);
  background: var(--atm-white);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder più chiaro */
.atm-wrap input::placeholder,
.atm-wrap textarea::placeholder { color: #c0c4cc; font-weight: 400; opacity: 1; }

.atm-form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.atm-form-group select:hover,
.atm-form-group textarea:hover,
.atm-input:hover,
.atm-select:hover,
.atm-textarea:hover { border-color: #bdc1c6; }

.atm-form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.atm-form-group select:focus,
.atm-form-group textarea:focus,
.atm-input:focus,
.atm-select:focus,
.atm-textarea:focus {
  border-color: var(--atm-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.atm-input.error,
.atm-select.error,
.atm-textarea.error {
  border-color: var(--atm-red);
  box-shadow: 0 0 0 3px rgba(217,48,37,.1);
}

.atm-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.atm-textarea,
.atm-form-group textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

.atm-field-error {
  font-size: .8rem;
  color: var(--atm-red);
  margin-top: 5px;
  display: none;
}
.atm-field-error.visible { display: block; }

.atm-field-hint,
.atm-hint {
  display: block;
  font-size: .75rem;
  color: var(--atm-text-2);
  margin-top: 4px;
  line-height: 1.4;
}

/* Password con toggle occhio */
.atm-input-eye { position: relative; }
.atm-input-eye input { padding-right: 44px; }
.atm-eye-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--atm-text-2);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.atm-eye-toggle:hover { color: var(--atm-text); }

/* Checkbox */
.atm-checkbox-group,
.atm-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  color: var(--atm-text-2);
}

.atm-checkbox-group input[type="checkbox"],
.atm-checkbox-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--atm-teal);
  cursor: pointer;
}

.atm-checkbox-group label { color: var(--atm-text-2); cursor: pointer; }
.atm-checkbox-group label a,
.atm-checkbox-wrap a { color: var(--atm-blue); text-decoration: none; }
.atm-checkbox-wrap a:hover { text-decoration: underline; }
/* Spazio sopra il blocco GDPR nella registrazione */
#atm-register-form .atm-form-group:has(#atm-reg-gdpr) { margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   OTP BOX — stile Google Material
   ═══════════════════════════════════════════════════════════════════════ */
.atm-otp-box {
  background: #e8f0fe;
  border: 1.5px solid #c5d8fb;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  margin: 24px 0;
}

.atm-otp-box .atm-otp-desc {
  font-size: .875rem;
  color: var(--atm-text-2);
  margin-top: 8px;
}

.atm-otp-wrap { text-align: center; }

.atm-otp-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.atm-otp-digit {
  width: 56px;
  height: 68px;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  border: 2px solid var(--atm-border);
  border-radius: var(--atm-r);
  background: var(--atm-white);
  transition: border-color .18s, box-shadow .18s;
  caret-color: var(--atm-blue);
  color: var(--atm-text);
  outline: none;
}

.atm-otp-digit:hover  { border-color: #bdc1c6; }
.atm-otp-digit:focus  { border-color: var(--atm-blue); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.atm-otp-digit.filled { border-color: var(--atm-blue); background: var(--atm-blue-lt); }

.atm-otp-countdown {
  font-size: .8125rem;
  color: var(--atm-text-2);
  margin: 10px 0;
}

.atm-otp-countdown .countdown-val { font-weight: 700; color: var(--atm-text); }
.atm-otp-countdown.expiring .countdown-val { color: var(--atm-red); }

.atm-otp-resend { margin-top: 12px; font-size: .875rem; }
.atm-otp-resend button {
  background: none;
  border: none;
  color: var(--atm-blue);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: var(--atm-font);
}
.atm-otp-resend button:hover { text-decoration: underline; }
.atm-otp-resend button:disabled { color: var(--atm-text-3); cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.atm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--atm-r);
  font-family: var(--atm-font);
  font-size: .9375rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, box-shadow .18s;
  white-space: nowrap;
  letter-spacing: .01em;
}

.atm-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Primary — teal (come PVIP) */
.atm-btn--primary {
  background: var(--atm-teal);
  color: var(--atm-white);
  width: 100%;
  padding: 12px 24px;
}
.atm-btn--primary:hover:not(:disabled) {
  background: var(--atm-teal-hover);
  box-shadow: 0 2px 8px rgba(13,148,136,.3);
  color: var(--atm-white);
}

/* Secondary — outline grigio */
.atm-btn--outline,
.atm-btn--secondary {
  background: var(--atm-white);
  color: var(--atm-text);
  border: 1.5px solid var(--atm-border);
}
.atm-btn--outline:hover:not(:disabled),
.atm-btn--secondary:hover:not(:disabled) {
  background: var(--atm-bg);
  border-color: #bdc1c6;
}

/* Blue — link/azioni secondarie */
.atm-btn--blue {
  background: var(--atm-blue);
  color: var(--atm-white);
}
.atm-btn--blue:hover:not(:disabled) {
  background: var(--atm-blue-hover);
  box-shadow: 0 2px 8px rgba(26,115,232,.3);
  color: var(--atm-white);
}

/* Danger */
.atm-btn--danger {
  background: var(--atm-red);
  color: var(--atm-white);
}
.atm-btn--danger:hover:not(:disabled) { background: #c5221f; }

/* Outline danger (chiudi/revoca) */
.atm-btn--outline-danger {
  background: none;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--atm-r);
}
.atm-btn--outline-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #dc2626;
}

/* Sizes */
.atm-btn--sm   { padding: 6px 16px; font-size: .8125rem; }
.atm-btn--full { width: 100%; }

/* Icon button — X, edit, ecc. */
.atm-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--atm-bg);
  color: var(--atm-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  padding: 0;
}
.atm-btn-icon:hover { background: #e2e8f0; color: var(--atm-text); }

/* Logout */
.atm-btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--atm-r);
  font-size: .85rem;
  font-weight: 500;
  color: var(--atm-text-2);
  text-decoration: none;
  border: 1.5px solid var(--atm-border);
  background: var(--atm-white);
  transition: all .15s;
  white-space: nowrap;
}
.atm-btn-logout:hover {
  color: var(--atm-red);
  border-color: var(--atm-red);
  background: #fce8e6;
}

/* Loading state */
.atm-btn .atm-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: atm-spin .6s linear infinite;
}
.atm-btn.loading .atm-spinner { display: block; }
.atm-btn.loading .atm-btn-text { opacity: .5; }

@keyframes atm-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════════════ */
.atm-alert {
  padding: 14px 16px;
  border-radius: var(--atm-r);
  font-size: .9rem;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  line-height: 1.5;
}

.atm-alert--danger,
.atm-alert-error        { background: #fce8e6; color: #c5221f; border-color: #f5c6c3; }
.atm-alert--success,
.atm-alert-success      { background: #e6f4ea; color: var(--atm-green); border-color: #b7dfbf; }
.atm-alert--info,
.atm-alert-info         { background: var(--atm-blue-lt); color: var(--atm-blue); border-color: var(--atm-blue-mid); }
.atm-alert--warning,
.atm-alert-warn,
.atm-alert-warning      { background: var(--atm-warn-lt); color: var(--atm-warn); border-color: #fcd34d; }

/* ── Feedback form validazione — prominente, con icona e shake ── */
@keyframes atm-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.atm-form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid #f5c6c3;
  background: #fce8e6;
  color: #b91c1c;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 12px;
}
.atm-form-feedback.atm-shake { animation: atm-shake .35s ease; }
.atm-form-feedback-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #b91c1c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.atm-form-feedback-icon svg { display: block; }
.atm-form-feedback.atm-feedback--success {
  border-color: #b7dfbf;
  background: #e6f4ea;
  color: #166534;
}
.atm-form-feedback.atm-feedback--success .atm-form-feedback-icon { background: #166534; }

/* Evidenziazione campo con errore */
.atm-field-has-error input,
.atm-field-has-error select,
.atm-field-has-error .atm-crte-wrap,
.atm-field-has-error .atm-select-wrap select {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.atm-field-error-hint {
  font-size: .78rem;
  color: #b91c1c;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.atm-dashboard {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* Header dashboard */
.atm-dash-header {
  background: var(--atm-white);
  border-bottom: 1px solid var(--atm-border);
  padding: 18px 24px 14px;
  margin-bottom: 24px;
  border-radius: var(--atm-r);
  box-shadow: 0 1px 2px rgba(60,64,67,.06);
}

.atm-dash-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.atm-dash-header-left  {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.atm-dash-header-left::after {
  content: '';
  width: 1px;
  height: 24px;
  background: var(--atm-border);
  margin: 0 12px 0 4px;
  flex-shrink: 0;
}
.atm-dash-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Brand: logo + nome portale */
.atm-dash-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--atm-text);
  font-weight: 700;
  font-size: 1rem;
  transition: color .2s, opacity .2s;
  flex-shrink: 0;
}
.atm-dash-brand:hover { color: var(--atm-blue); opacity: .9; }
.atm-dash-logo {
  height: 32px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
}
.atm-dash-brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Breadcrumb */
.atm-dash-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--atm-border);
  font-size: .78rem;
  color: var(--atm-text-2);
}
.atm-dash-breadcrumb a {
  color: var(--atm-text-2);
  text-decoration: none;
  transition: color .15s;
}
.atm-dash-breadcrumb a:hover { color: var(--atm-blue); }
.atm-breadcrumb-sep { color: var(--atm-text-3); user-select: none; }
.atm-breadcrumb-current {
  color: var(--atm-text);
  font-weight: 600;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Avatar con iniziali */
.atm-dash-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--atm-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .5px;
}

.atm-dash-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.atm-dash-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--atm-text-2);
  line-height: 1;
}

.atm-dash-name  { font-size: .95rem; font-weight: 600; color: var(--atm-text); line-height: 1.3; }
.atm-dash-email { font-size: .76rem; color: var(--atm-text-2); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* Badge notifiche non lette */
.atm-dash-unread-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid #fde68a;
}

/* ── Stats Cards ─────────────────────────────────────────────────────── */
.atm-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.atm-stat-card {
  background: var(--atm-white);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--atm-shadow);
  border: 1px solid var(--atm-border);
  border-top: 3px solid var(--atm-border);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s;
}
.atm-stat-card:hover {
  box-shadow: var(--atm-shadow-lg);
  transform: translateY(-2px);
}
.atm-stat-card.atm-stat-primary { border-top-color: var(--atm-blue); }
.atm-stat-card.atm-stat-success { border-top-color: var(--atm-green); }
.atm-stat-card.atm-stat-warn    { border-top-color: var(--atm-warn); }
.atm-stat-card.atm-stat-neutral { border-top-color: var(--atm-text-2); }

.atm-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.atm-stat-icon svg { width: 22px; height: 22px; }
.atm-stat-primary .atm-stat-icon { background: var(--atm-blue-lt); color: var(--atm-blue); }
.atm-stat-warn .atm-stat-icon    { background: var(--atm-warn-lt); color: var(--atm-warn); }
.atm-stat-success .atm-stat-icon { background: var(--atm-green-lt); color: var(--atm-green); }
.atm-stat-neutral .atm-stat-icon { background: var(--atm-bg); color: var(--atm-text-2); }

.atm-stat-content { flex: 1; min-width: 0; }
.atm-stat-card .atm-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--atm-text);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.atm-stat-card .atm-stat-label {
  font-size: .8rem;
  color: var(--atm-text-2);
  font-weight: 500;
}

/* ── Multi-company: context bar e filtri ─────────────────────────────── */
.atm-stats-context {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .8rem; color: var(--atm-text-2);
  background: #f0f7ff; border: 1px solid #c7dcf7; border-radius: 8px;
  padding: 8px 14px; margin-bottom: 10px;
}
.atm-stats-context a { color: var(--atm-blue); text-decoration: none; }
.atm-stats-context a:hover { text-decoration: underline; }

/* ── Barra filtro aziende: scroll orizzontale con fade ─────────────────── */
.atm-co-filter-wrap {
  position: relative;
  margin-bottom: 14px;
}
.atm-co-filter-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 100%;
  background: linear-gradient(to right, transparent, var(--atm-white, #fff));
  pointer-events: none;
  border-radius: 0 20px 20px 0;
}
.atm-co-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  padding-bottom: 2px;            /* evita clip ombra focus */
}
.atm-co-filter-bar::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.atm-co-filter-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 500;
  background: #f1f3f4;
  color: var(--atm-text-2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atm-co-filter-btn:focus-visible { outline: 2px solid var(--atm-blue); outline-offset: 2px; }
.atm-co-filter-btn:hover { background: #e3edff; color: var(--atm-blue); }
.atm-co-filter-btn--active {
  background: var(--atm-blue);
  color: #fff !important;
  border-color: var(--atm-blue);
}

.atm-req-meta-co {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; color: var(--atm-blue);
  background: #e8f0fe; border-radius: 20px; padding: 1px 8px;
}

/* ── Navigation — pill segmentata ────────────────────────────────────── */
.atm-nav,
.atm-dash-nav {
  display: flex;
  gap: 2px;
  background: var(--atm-white);
  border-radius: 10px;
  padding: 4px;
  box-shadow: var(--atm-shadow);
  border: 1px solid var(--atm-border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.atm-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--atm-text-2);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--atm-font);
}
.atm-nav-item:hover { color: var(--atm-text); background: var(--atm-bg); }
.atm-nav-item.atm-active,
.atm-nav-item.atm-nav-active {
  background: var(--atm-blue-lt);
  color: var(--atm-blue);
  font-weight: 600;
}

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

.atm-nav-badge {
  background: var(--atm-red);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
}

/* Tabs compatibilità legacy */
.atm-tabs { display: none; } /* sostituita dalla nav pill */
.atm-tab-pane        { display: none; }
.atm-tab-pane.active { display: block; }

/* ── Section header ──────────────────────────────────────────────────── */
.atm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.atm-section-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--atm-text);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD (pannelli dashboard)
   ═══════════════════════════════════════════════════════════════════════ */
.atm-card,
.atm-panel {
  background: var(--atm-white);
  border-radius: 12px;
  border: 1px solid var(--atm-border);
  box-shadow: var(--atm-shadow);
  padding: 24px 28px;
  margin-bottom: 20px;
}

.atm-card--narrow {
  max-width: 480px;
  margin: 40px auto;
}

/* Compatibilità */
.atm-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -24px -28px 20px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--atm-border);
  background: #fafbfc;
  border-radius: 12px 12px 0 0;
}
.atm-card__head h2,
.atm-card__head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--atm-text); }
.atm-card__body   { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   TICKET LIST — stile req-card PVIP
   ═══════════════════════════════════════════════════════════════════════ */
.atm-ticket-list { list-style: none; padding: 0; margin: 0; }

.atm-ticket-item {
  background: var(--atm-white);
  border-radius: 12px;
  border: 1px solid var(--atm-border);
  box-shadow: 0 2px 8px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.08);
  overflow: hidden;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: box-shadow .2s, transform .15s;
  margin-bottom: 16px;
  display: block;
  text-decoration: none;
  color: inherit;
}
.atm-ticket-item:last-child { margin-bottom: 0; }
.atm-ticket-item:hover {
  box-shadow: var(--atm-shadow-lg);
  transform: translateY(-1px);
}

/* Colori bordo sinistro per stato */
.atm-ticket-item[data-status="aperto"]            { border-left-color: var(--atm-blue); }
.atm-ticket-item[data-status="in_lavorazione"]    { border-left-color: var(--atm-warn); }
.atm-ticket-item[data-status="in_attesa_cliente"] { border-left-color: var(--atm-purple); }
.atm-ticket-item[data-status="risolto"]           { border-left-color: var(--atm-green); }
.atm-ticket-item[data-status="chiuso"]            { border-left-color: var(--atm-text-3); }

/* Classi inglesi legacy */
.atm-ticket-item[data-status="open"]            { border-left-color: var(--atm-blue); }
.atm-ticket-item[data-status="in_progress"]     { border-left-color: var(--atm-warn); }
.atm-ticket-item[data-status="pending_client"]  { border-left-color: var(--atm-purple); }
.atm-ticket-item[data-status="resolved"]        { border-left-color: var(--atm-green); }
.atm-ticket-item[data-status="closed"]          { border-left-color: var(--atm-text-3); }

.atm-ticket-header {
  padding: 16px 20px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.atm-ticket-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--atm-text);
  margin: 0 0 4px;
}

.atm-ticket-meta {
  font-size: .8rem;
  color: var(--atm-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.atm-ticket-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.atm-ticket-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.atm-ticket-id {
  font-size: .72rem;
  font-weight: 600;
  font-family: monospace;
  color: var(--atm-blue);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 2px 7px;
}

.atm-ticket-footer {
  background: var(--atm-bg);
  padding: 10px 20px;
  font-size: .8rem;
  color: var(--atm-text-2);
  border-top: 1px solid var(--atm-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Pallino messaggi non letti */
.atm-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGE — pill style
   ═══════════════════════════════════════════════════════════════════════ */
.atm-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Ticket status */
.atm-badge--open,
.atm-badge--aperto             { background: var(--atm-blue-lt);  color: var(--atm-blue-hover); }
.atm-badge--in_progress,
.atm-badge--in_lavorazione     { background: var(--atm-warn-lt);  color: var(--atm-warn); }
.atm-badge--pending_client,
.atm-badge--in_attesa_cliente  { background: var(--atm-purple-lt); color: var(--atm-purple); }
.atm-badge--resolved,
.atm-badge--risolto            { background: var(--atm-green-lt); color: var(--atm-green); }
.atm-badge--closed,
.atm-badge--chiuso             { background: #f1f3f4; color: var(--atm-text-2); }
.atm-badge--pending,
.atm-badge--pending_email,
.atm-badge--pending_approval   { background: var(--atm-warn-lt);  color: var(--atm-warn); }
.atm-badge--active             { background: var(--atm-green-lt); color: var(--atm-green); }
.atm-badge--rejected           { background: var(--atm-red-lt);   color: var(--atm-red); }

/* Priority */
.atm-badge--low,
.atm-badge--bassa,
.atm-badge--priority-bassa    { background: #e6f4ea; color: var(--atm-green); }
.atm-badge--medium,
.atm-badge--media,
.atm-badge--priority-normale  { background: #f1f3f4; color: var(--atm-text-2); }
.atm-badge--high,
.atm-badge--alta,
.atm-badge--priority-alta     { background: var(--atm-warn-lt); color: var(--atm-warn); }
.atm-badge--critical,
.atm-badge--critica,
.atm-badge--priority-critica  { background: var(--atm-red-lt); color: var(--atm-red); }

/* Alias stato (badge_stato nel template) */
.atm-badge--info    { background: var(--atm-blue-lt);  color: var(--atm-blue-hover); }
.atm-badge--warning { background: var(--atm-warn-lt);  color: var(--atm-warn); }
.atm-badge--success { background: var(--atm-green-lt); color: var(--atm-green); }
.atm-badge--neutral { background: #f1f3f4; color: var(--atm-text-2); }
.atm-badge--danger  { background: var(--atm-red-lt); color: var(--atm-red); }

/* ═══════════════════════════════════════════════════════════════════════
   THREAD MESSAGGI — chat bubbles stile PVIP
   ═══════════════════════════════════════════════════════════════════════ */
.atm-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--atm-bg);
  border-radius: 10px;
  border: 1px solid var(--atm-border);
  margin-bottom: 16px;
  list-style: none;
}

/* Messaggio — bubble */
.atm-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

/* Cliente → destra, teal */
.atm-message--client {
  align-self: flex-end;
  align-items: flex-end;
}

/* Operatore → sinistra, bianco */
.atm-message--operator {
  align-self: flex-start;
  align-items: flex-start;
}

/* Default: trattato come operatore */
.atm-message { align-self: flex-start; align-items: flex-start; }

.atm-message-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.55;
  word-break: break-word;
}

/* Bubble operatore */
.atm-message .atm-message-bubble {
  background: var(--atm-white);
  color: var(--atm-text);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--atm-border);
  box-shadow: var(--atm-shadow);
}

/* Bubble cliente */
.atm-message--client .atm-message-bubble {
  background: var(--atm-teal);
  color: var(--atm-white);
  border: none;
  border-bottom-right-radius: 4px;
  box-shadow: none;
}

/* Nota interna — sfondo giallo */
.atm-message--internal .atm-message-bubble {
  background: #fef9e7;
  border-color: #f6d46b;
  color: var(--atm-text);
}

.atm-message-time {
  font-size: .7rem;
  color: var(--atm-text-2);
  margin-top: 4px;
  padding: 0 4px;
}

.atm-message-role {
  font-size: .7rem;
  font-weight: 600;
  color: var(--atm-text-2);
  margin-bottom: 4px;
  padding: 0 4px;
}

.atm-message-author { font-weight: 600; }

.atm-message-internal-badge {
  font-size: .68rem;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid #fde68a;
}

/* Allegati */
.atm-message-attachments {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Allegati chip (frontend) ──────────────────────────────────────────── */
.atm-att-list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 8px;
}
.atm-att-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             0;
  border-radius:   8px;
  overflow:        hidden;
  text-decoration: none !important;
  border:          1.5px solid transparent;
  max-width:       200px;
  transition:      transform .12s, box-shadow .12s;
  box-shadow:      0 1px 3px rgba(0,0,0,.08);
}
.atm-att-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.14); }
.atm-att-chip-type {
  padding:      5px 9px;
  font-size:    10px;
  font-weight:  700;
  letter-spacing: .06em;
  flex-shrink:  0;
  line-height:  1;
}
.atm-att-chip-name {
  padding:       5px 8px;
  font-size:     12px;
  font-weight:   500;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex:          1;
  min-width:     0;
}
.atm-att-chip-size { padding: 5px 7px 5px 0; font-size: 10px; opacity: .7; white-space: nowrap; flex-shrink: 0; }

.atm-att-chip--pdf { border-color: #fca5a5; background: #fff1f0; }
.atm-att-chip--pdf .atm-att-chip-type { background: #fce8e6; color: #c5221f; }
.atm-att-chip--pdf .atm-att-chip-name,
.atm-att-chip--pdf .atm-att-chip-size { color: #c5221f; }

.atm-att-chip--doc { border-color: #93c5fd; background: #f0f6ff; }
.atm-att-chip--doc .atm-att-chip-type { background: #dbeafe; color: #1d4ed8; }
.atm-att-chip--doc .atm-att-chip-name,
.atm-att-chip--doc .atm-att-chip-size { color: #1a56d9; }

.atm-att-chip--xls { border-color: #86efac; background: #f0fdf4; }
.atm-att-chip--xls .atm-att-chip-type { background: #dcfce7; color: #15803d; }
.atm-att-chip--xls .atm-att-chip-name,
.atm-att-chip--xls .atm-att-chip-size { color: #166534; }

.atm-att-chip--file { border-color: #d1d5db; background: #f9fafb; }
.atm-att-chip--file .atm-att-chip-type { background: #f3f4f6; color: #4b5563; }
.atm-att-chip--file .atm-att-chip-name,
.atm-att-chip--file .atm-att-chip-size { color: #374151; }

.atm-att-img {
  display:        inline-flex;
  flex-direction: column;
  align-items:    stretch;
  border-radius:  10px;
  overflow:       hidden;
  border:         1.5px solid #e5e7eb;
  width:          160px;
  background:     #fff;
  box-shadow:     0 1px 4px rgba(0,0,0,.1);
  transition:     box-shadow .12s;
}
.atm-att-img:hover { box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.atm-att-img-preview { display: block; line-height: 0; }
.atm-att-img-thumb { width: 158px; height: 100px; object-fit: cover; display: block; transition: opacity .12s; }
.atm-att-img-preview:hover .atm-att-img-thumb { opacity: .88; }
.atm-att-img-name {
  font-size:    10px;
  color:        #5f6368;
  padding:      5px 8px 3px;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  border-top:   1px solid #f0f2f5;
}
.atm-att-img-actions {
  display:    flex;
  border-top: 1px solid #f0f2f5;
}
.atm-att-img-btn {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  padding:         5px 4px;
  font-size:       10px;
  font-weight:     600;
  text-decoration: none !important;
  transition:      background .12s;
  white-space:     nowrap;
}
.atm-att-img-btn--view { color: var(--atm-blue); background: #f8fbff; border-right: 1px solid #f0f2f5; }
.atm-att-img-btn--view:hover { background: #e8f0fe; }
.atm-att-img-btn--dl  { color: #137333; background: #f8fdf9; }
.atm-att-img-btn--dl:hover  { background: #e6f4ea; }

/* Nella bolla operatore */
/* Formattazione rich text nelle bolle (operatore → cliente) */
.atm-msg-bubble ul, .atm-msg .atm-msg-bubble ul {
  padding-left: 20px; margin: 4px 0; list-style: disc;
}
.atm-msg-bubble ol, .atm-msg .atm-msg-bubble ol {
  padding-left: 20px; margin: 4px 0; list-style: decimal;
}
.atm-msg--operator .atm-msg-bubble a,
.atm-msg--citizen .atm-msg-bubble a {
    color:           #1558d6;
    font-weight:     700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.atm-msg--operator .atm-msg-bubble a:hover,
.atm-msg--citizen  .atm-msg-bubble a:hover { color: #0d47a1; }
.atm-msg-bubble b, .atm-msg-bubble strong { font-weight: 700; }
.atm-msg-bubble i, .atm-msg-bubble em    { font-style: italic; }
.atm-msg-bubble u                        { text-decoration: underline; }

/* ── Mini RTE cliente ────────────────────────────────────────────────── */
.atm-crte-wrap {
    border:         1px solid #dadce0;
    border-radius:  10px;
    background:     #fff;
    overflow:       hidden;
    transition:     border-color .15s, box-shadow .15s;
}
.atm-crte-wrap:focus-within {
    border-color:   var(--atm-blue, #1a73e8);
    box-shadow:     0 0 0 3px rgba(26,115,232,.12);
}

.atm-crte-toolbar {
    display:         flex;
    align-items:     center;
    gap:             2px;
    padding:         5px 8px;
    border-bottom:   1px solid #f1f3f4;
    background:      #fafafa;
}

.atm-crte-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       26px;
    height:          24px;
    padding:         0 5px;
    border:          1px solid transparent;
    border-radius:   5px;
    background:      transparent;
    color:           #555;
    font-size:       .82rem;
    cursor:          pointer;
    transition:      background .12s, border-color .12s, color .12s;
    line-height:     1;
}
.atm-crte-btn:hover {
    background:      #e8f0fe;
    border-color:    #c5d7fb;
    color:           var(--atm-blue, #1a73e8);
}
.atm-crte-btn--active {
    background:      #e8f0fe !important;
    border-color:    #aecbfa !important;
    color:           var(--atm-blue, #1a73e8) !important;
}

.atm-crte-editor {
    min-height:    140px;
    max-height:    360px;
    overflow-y:    auto;
    padding:       12px 14px;
    font-size:     .875rem;
    color:         #333;
    line-height:   1.55;
    outline:       none;
    word-break:    break-word;
}
.atm-crte-editor:empty::before {
    content:       attr(data-placeholder);
    color:         #9aa0a6;
    pointer-events: none;
}
.atm-crte-editor a { color: var(--atm-blue, #1a73e8); text-decoration: underline; }

.atm-crte-sep {
    display:      inline-block;
    width:        1px;
    height:       16px;
    background:   #dadce0;
    margin:       0 4px;
    flex-shrink:  0;
}

/* Contenuto formattato nella bolla cliente (ottimisticamente inserita) */
.atm-msg-bubble ul, .atm-msg .atm-msg-bubble ul {
    padding-left: 18px; margin: 4px 0; list-style: disc;
}
.atm-msg-bubble ol, .atm-msg .atm-msg-bubble ol {
    padding-left: 18px; margin: 4px 0; list-style: decimal;
}
.atm-msg-bubble b, .atm-msg-bubble strong { font-weight: 700; }
.atm-msg-bubble i, .atm-msg-bubble em     { font-style: italic; }
.atm-msg-bubble u                         { text-decoration: underline; }

/* Bolla operatore — sfondo chiaro, colori standard allegati */
.atm-msg--operator .atm-att-chip-name { color: #333 !important; }
.atm-msg--operator .atm-att-chip-size { color: #666 !important; }

.atm-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--atm-blue) !important;
  text-decoration: none !important;
  background: var(--atm-blue-lt);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--atm-blue-mid);
  transition: background .15s;
}
.atm-attachment-link:hover { background: #d2e3fc; }

/* ── Reply form ──────────────────────────────────────────────────────── */
.atm-reply-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.atm-reply-form textarea,
.atm-reply-form .atm-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--atm-border);
  border-radius: 10px;
  font-family: var(--atm-font);
  font-size: .9rem;
  resize: none;
  outline: none;
  min-height: 72px;
  max-height: 160px;
  transition: border-color .15s, box-shadow .15s;
  color: var(--atm-text);
  background: var(--atm-white);
}
.atm-reply-form textarea:focus,
.atm-reply-form .atm-textarea:focus {
  border-color: var(--atm-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}

/* Riga azioni: chiudi a sinistra, invia a destra */
.atm-reply-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.atm-reply-send { flex: 1; justify-content: center; }

.atm-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  color: var(--atm-text-2);
  cursor: pointer;
}
.atm-checkbox-inline input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--atm-blue);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   STEPPER — nuovo ticket in 3 passaggi
   ═══════════════════════════════════════════════════════════════════════ */
.atm-stepper {
  margin-bottom: 24px;
}
.atm-stepper-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.atm-stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--atm-text-2);
  font-family: var(--atm-font);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.atm-stepper-step:hover { color: var(--atm-blue); }
.atm-stepper-step--active,
.atm-stepper-step--done {
  color: var(--atm-blue);
  font-weight: 600;
}
.atm-stepper-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f3f4;
  color: var(--atm-text-2);
  font-size: .9rem;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.atm-stepper-step--active .atm-stepper-num {
  background: var(--atm-blue);
  color: #fff;
}
.atm-stepper-step--done .atm-stepper-num {
  background: var(--atm-blue);
  color: #fff;
}
.atm-stepper-connector {
  width: 24px;
  height: 2px;
  background: #e8eaed;
  flex-shrink: 0;
}
.atm-stepper-panel {
  display: none;
  animation: atm-stepper-fade .25s ease;
}
.atm-stepper-panel--active {
  display: block;
}
.atm-stepper-panel[hidden] { display: none !important; }
@keyframes atm-stepper-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.atm-stepper-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.atm-stepper-nav .atm-btn { min-width: 120px; }
@media (max-width: 480px) {
  .atm-stepper-nav { flex-direction: column-reverse; }
  .atm-stepper-nav .atm-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DROPZONE
   ═══════════════════════════════════════════════════════════════════════ */
.atm-dropzone {
  border: 2px dashed var(--atm-border);
  border-radius: var(--atm-r);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  font-size: .875rem;
  color: var(--atm-text-2);
  transition: border-color .18s, background .18s;
  background: var(--atm-bg);
}
.atm-dropzone:hover,
.atm-dropzone.drag-over {
  border-color: var(--atm-blue);
  background: var(--atm-blue-lt);
  color: var(--atm-blue-hover);
}

.atm-file-list { margin-top: 10px; }
.atm-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--atm-border);
  color: var(--atm-text-2);
}
.atm-file-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════
   MODAL — con backdrop blur, mobile bottom sheet
   ═══════════════════════════════════════════════════════════════════════ */
.atm-modal-overlay,
.atm-modal {
  position: fixed;
  inset: 0;
  background: rgba(32,33,36,.6);
  backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.atm-modal-overlay.atm-open,
.atm-modal.atm-open {
  opacity: 1;
  pointer-events: all;
}

.atm-modal-box {
  background: var(--atm-white);
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.04);
  transform: translateY(16px) scale(.98);
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .28s;
  opacity: 0;
}
.atm-modal-overlay.atm-open .atm-modal-box,
.atm-modal.atm-open .atm-modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.atm-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--atm-border);
  flex-shrink: 0;
  background: var(--atm-white);
}

.atm-modal-title,
.atm-modal-header .atm-modal-title,
.atm-modal-box .atm-modal-title,
.atm-modal-overlay .atm-modal-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--atm-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.3;
  padding-right: 12px;
}

.atm-modal-subtitle {
  font-size: .78rem;
  color: var(--atm-text-2);
  margin: 2px 0 0;
}

/* Form dentro modal: layout flex per body scrollabile */
/* ── Sezione VIEW modal Determina/CIG ──────────────────────────────────────── */
.atm-det-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.atm-det-view-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}
.atm-det-view-item:first-child {
  grid-column: 1 / -1;
}
.atm-det-view-label {
  font-size: .73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
}
.atm-det-view-value {
  font-size: .92rem;
  font-weight: 600;
  color: #1e293b;
}
.atm-det-view-stato {
  font-size: .82rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 4px;
  display: none;
}
.atm-det-view-stato--attesa {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  display: block;
}
.atm-det-view-stato--ok,
.atm-det-view-stato--approvata {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  display: block;
}
/* ────────────────────────────────────────────────────────────────────────── */

.atm-modal-box > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.atm-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.atm-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  padding: 16px 24px;
  border-top: 1px solid var(--atm-border);
  flex-shrink: 0;
  background: var(--atm-bg);
}

.atm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Pulsante chiudi modale (generico) */
.atm-modal-header .atm-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: -6px -6px 0 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--atm-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  transition: background .2s, color .2s;
}
.atm-modal-header .atm-modal-close:hover {
  background: var(--atm-bg);
  color: var(--atm-text);
}

/* Blocco info bonifico (canone, voce, sottoservizio) */
.atm-canone-bonifico-info {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--atm-bg);
  border-radius: var(--atm-r);
  font-size: .9rem;
  line-height: 1.5;
}
.atm-canone-bonifico-info p {
  margin: 0 0 8px;
}
.atm-canone-bonifico-info p:last-child {
  margin-bottom: 0;
}
.atm-canone-bonifico-info strong {
  color: var(--atm-text-2);
  font-weight: 500;
  min-width: 90px;
  display: inline-block;
}
.atm-canone-bonifico-info span {
  word-break: break-all;
}
.atm-canone-bonifico-servizio,
.atm-canone-bonifico-importo {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--atm-text);
}
.atm-canone-bonifico-servizio { font-weight: 600; }
.atm-canone-bonifico-importo { color: var(--atm-text-2); }
.atm-voce-ss-bonifico-desc {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: var(--atm-text);
  font-weight: 500;
}

/* ── Modale Scegli metodo di pagamento ─────────────────────────────────────── */
.atm-modal-box--metodo .atm-modal-body {
  padding: 20px 24px 24px;
}
.atm-modal-box--metodo .atm-metodo-pagamento-desc {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--atm-text-2);
  line-height: 1.5;
}
.atm-metodo-pagamento-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.atm-metodo-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--atm-border);
  border-radius: 12px;
  background: var(--atm-white);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  text-align: left;
}
.atm-metodo-option:hover {
  border-color: var(--atm-blue);
  box-shadow: 0 0 0 1px var(--atm-blue);
  background: var(--atm-bg);
}
.atm-metodo-option:focus-visible {
  outline: 2px solid var(--atm-blue);
  outline-offset: 2px;
}
.atm-metodo-option svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--atm-text-2);
}
.atm-metodo-option--paypal svg { color: var(--atm-blue); }
.atm-metodo-option--bonifico svg { color: var(--atm-teal); }
.atm-metodo-option span {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--atm-text);
}
.atm-metodo-option small {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--atm-text-2);
  line-height: 1.4;
}
.atm-metodo-option--solo {
  width: 100%;
}

/* ── Modal conferma (Chiudi ticket, ecc.) ──────────────────────────────────── */
.atm-confirm-overlay .atm-confirm-box {
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.12);
}
.atm-confirm-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: none;
}
.atm-confirm-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atm-confirm-icon--warning {
  background: var(--atm-warn-lt);
  color: var(--atm-warn);
}
.atm-confirm-icon--danger {
  background: var(--atm-red-lt);
  color: var(--atm-red);
}
.atm-confirm-icon--info {
  background: var(--atm-blue-lt);
  color: var(--atm-blue);
}
.atm-confirm-text {
  flex: 1;
  min-width: 0;
}
.atm-confirm-text .atm-modal-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--atm-text) !important;
}
.atm-confirm-text .atm-modal-subtitle {
  font-size: .9rem;
  color: var(--atm-text-2);
  margin: 6px 0 0;
  line-height: 1.5;
}
.atm-confirm-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--atm-border);
  background: var(--atm-white);
}

/* ═══════════════════════════════════════════════════════════════════════
   PROFILO — header sfumato navy/blu
   ═══════════════════════════════════════════════════════════════════════ */
/* ─── vecchio atm-profile-card (mantenuto per compatibilità) ─── */
.atm-profile-card {
  background: var(--atm-white);
  border-radius: 14px;
  border: 1px solid var(--atm-border);
  box-shadow: var(--atm-shadow-lg);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   PROFILO — nuovo layout
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.atm-prof-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--atm-white);
  border: 1px solid var(--atm-border);
  border-radius: 14px;
  box-shadow: var(--atm-shadow);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.atm-prof-hero-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--atm-blue) 0%, #1e40af 100%);
  color: #fff;
  font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
  box-shadow: 0 3px 10px rgba(37,99,235,.3);
}
.atm-prof-hero-info  { flex: 1; min-width: 0; }
.atm-prof-hero-name  { font-size: 1.05rem; font-weight: 700; color: var(--atm-text); margin-bottom: 3px; }
.atm-prof-hero-email { font-size: .82rem; color: var(--atm-text-2); margin-bottom: 4px; }
.atm-prof-hero-co    { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--atm-blue); font-weight: 500; }
.atm-prof-hero-co svg { color: var(--atm-blue); opacity: .7; }
.atm-prof-hero-status { margin-left: auto; align-self: flex-start; }

/* ── Card generica ── */
.atm-prof-card {
  background: var(--atm-white);
  border: 1px solid var(--atm-border);
  border-radius: 14px;
  box-shadow: var(--atm-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}
.atm-prof-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  font-size: .8125rem; font-weight: 700;
  color: var(--atm-text-2);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--atm-border);
  background: var(--atm-bg);
}
.atm-prof-card-head svg { flex-shrink: 0; color: var(--atm-blue); }
.atm-prof-card-body { padding: 20px 24px; }

/* ── Righe info ── */
.atm-prof-rows { display: flex; flex-direction: column; }
.atm-prof-row  {
  display: flex; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--atm-border);
  gap: 12px;
}
.atm-prof-row:last-child { border-bottom: none; }
.atm-prof-row-label {
  font-size: .8rem; font-weight: 600; color: var(--atm-text-2);
  width: 130px; flex-shrink: 0;
}
.atm-prof-row-value { font-size: .875rem; color: var(--atm-text); }
.atm-prof-row-value--mono { font-family: monospace; letter-spacing: .04em; font-size: .82rem; }

/* ── Nota ── */
.atm-prof-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 10px;
  font-size: .8125rem; color: #92400e;
  margin-bottom: 16px;
}
.atm-prof-note svg { flex-shrink: 0; color: #f59e0b; margin-top: 1px; }

/* ── Logout ── */
.atm-prof-logout-wrap {
  padding-top: 4px;
  display: flex; justify-content: flex-end;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .atm-prof-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .atm-prof-hero-status { margin-left: 0; }
  .atm-prof-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .atm-prof-row-label { width: auto; }
}

.atm-profile-header {
  background: linear-gradient(135deg, #1a2e4a 0%, #2d5090 100%);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.atm-profile-avatar {
  width: 68px;
  height: 68px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: .02em;
}

.atm-profile-name  { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 5px; line-height: 1.2; }
.atm-profile-email { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: 4px; }
.atm-profile-body  { padding: 28px 36px 36px; }

/* ═══════════════════════════════════════════════════════════════════════
   PENDING BANNER
   ═══════════════════════════════════════════════════════════════════════ */
.atm-pending-banner {
  background: var(--atm-warn-lt);
  border: 1px solid #fde68a;
  border-left: 4px solid var(--atm-warn);
  border-radius: var(--atm-r);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: .9rem;
  color: var(--atm-warn);
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */
.atm-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--atm-text-2);
  font-size: .9rem;
}

.atm-empty--search {
  background: var(--atm-white);
  border: 1px solid var(--atm-border);
  border-radius: 16px;
  padding: 48px 32px 40px;
  max-width: 480px;
  margin: 8px auto 0;
}

.atm-empty-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(13,148,136,.08);
  color: var(--atm-teal);
  margin-bottom: 18px;
}

.atm-empty-icon   { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; opacity: .3; }
.atm-empty-title  { display: block; font-size: 1.05rem; font-weight: 700; color: var(--atm-text); margin-bottom: 8px; }
.atm-empty-desc   { font-size: .875rem; color: var(--atm-text-2); line-height: 1.55; margin: 0 0 24px; }

.atm-empty-steps  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.atm-empty-steps li { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--atm-text); }

.atm-empty-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--atm-teal);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGINAZIONE
   ═══════════════════════════════════════════════════════════════════════ */
.atm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
}

.atm-pagination button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--atm-border);
  background: var(--atm-white);
  color: var(--atm-text);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--atm-font);
}
.atm-pagination button:hover:not(:disabled) {
  background: var(--atm-blue-lt);
  border-color: var(--atm-blue);
  color: var(--atm-blue);
}
.atm-pagination button.atm-active {
  background: var(--atm-blue);
  border-color: var(--atm-blue);
  color: #fff;
}
.atm-pagination button:disabled { opacity: .4; cursor: default; }

/* Dividers */
.atm-divider { border: none; border-top: 1px solid var(--atm-border); margin: 20px 0; }

/* Loading */
.atm-loading { display: flex; justify-content: center; align-items: center; padding: 48px; }

.atm-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--atm-border);
  border-top-color: var(--atm-blue);
  border-radius: 50%;
  animation: atm-spin .65s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Skeleton loader ─────────────────────────────────────────────────────── */
@keyframes atm-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.atm-skeleton {
  background: linear-gradient(
    90deg,
    var(--atm-border) 0%,
    rgba(0,0,0,.06) 50%,
    var(--atm-border) 100%
  );
  background-size: 200% 100%;
  animation: atm-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.atm-skeleton-card {
  background: var(--atm-white);
  border: 1px solid var(--atm-border);
  border-radius: var(--atm-r);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.atm-skeleton-card .atm-skeleton { height: 14px; margin-bottom: 8px; }
.atm-skeleton-card .atm-skeleton:last-child { margin-bottom: 0; width: 60%; }

.atm-msg-skeleton {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 14px;
}

.atm-msg-skeleton .atm-skeleton {
  height: 12px;
  border-radius: 12px;
  max-width: 200px;
}

.atm-msg-skeleton .atm-skeleton:nth-child(1) { width: 85%; }
.atm-msg-skeleton .atm-skeleton:nth-child(2) { width: 45%; }
.atm-msg-skeleton .atm-skeleton:nth-child(3) { width: 30%; height: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Auth */
  .atm-auth-body   { padding: 24px 24px 28px; }
  .atm-auth-header { padding: 28px 24px 22px; }
  .atm-form-row    { grid-template-columns: 1fr; }

  /* Dashboard header mobile */
  .atm-dash-header  { padding: 10px 12px 8px; border-radius: 0; margin-bottom: 12px; }
  .atm-dash-header-top { gap: 8px; flex-wrap: nowrap; align-items: center; }

  /* Brand: nascondo il nome su mobile, mostro solo logo se presente */
  .atm-dash-brand-name { display: none; }
  .atm-dash-logo { height: 28px; }
  /* Se non c'è logo, nascondo l'intero brand */
  .atm-dash-brand:not(:has(img)) { display: none; }
  /* Separatore verticale: nascosto su mobile */
  .atm-dash-header-left::after { display: none; }

  .atm-dash-header-left { gap: 10px; flex: 1; min-width: 0; }
  .atm-dash-avatar { width: 36px; height: 36px; font-size: .8rem; flex-shrink: 0; }
  .atm-dash-identity { min-width: 0; }
  .atm-dash-name  { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .atm-dash-email { display: none; } /* nascosta su mobile: c'è già il nome */
  .atm-dash-label { display: none; } /* "AREA PERSONALE" nascosta, ridondante */

  .atm-dash-header-actions { flex-wrap: nowrap; gap: 8px; flex-shrink: 0; }
  .atm-dash-unread-badge { display: none; } /* già visibile nel nav come badge */

  .atm-dash-breadcrumb { margin-top: 8px; padding-top: 8px; font-size: .75rem; }
  .atm-breadcrumb-current { max-width: 160px; }
  .atm-dashboard    { padding: 0 8px 60px; }
  .atm-card,
  .atm-panel        { padding: 14px 12px; }
  .atm-stats-row    { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }

  /* Modal → bottom sheet, contenuti scrollabili */
  .atm-modal-overlay,
  .atm-modal        { align-items: flex-end; padding: 0; }
  .atm-modal-box    {
    max-width: 100%;
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
  }
  .atm-modal-box > form { min-height: 0; }
  .atm-modal-header { padding: 16px 18px 14px; }
  .atm-modal-body   {
    padding: 0 18px;
    min-height: 0;
    max-height: calc(88vh - 130px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .atm-modal-footer { padding: 14px 18px 24px; }

  /* Thread */
  .atm-thread  { max-height: 340px; }
  .atm-message { max-width: 92%; }

  /* Reply actions in colonna */
  .atm-reply-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .atm-reply-actions .atm-btn,
  .atm-btn--outline-danger { width: 100%; justify-content: center; }
  .atm-reply-send { flex: none; }

  /* OTP */
  .atm-otp-digit { width: 44px; height: 56px; font-size: 1.75rem; }
  .atm-otp-inputs { gap: 8px; }

  /* Profilo */
  .atm-profile-header { flex-direction: column; text-align: center; padding: 24px 20px; }
  .atm-profile-body   { padding: 20px 20px 28px; }

  /* Ticket */
  .atm-ticket-meta { flex-direction: column; gap: 4px; }

  /* Toolbar ticket: colonna su mobile, full-width */
  .atm-ticket-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .atm-ticket-search-row { max-width: none; }
  .atm-ticket-search-wrap { max-width: none; }
  /* Mobile: filtri inline nascosti (pulsante Filtri visibile) */
  .atm-ticket-filters-row { display: none !important; }
}
@media (max-width: 768px) {
  .atm-ticket-filters-row { display: none !important; }
}
@media (min-width: 769px) {
  .atm-ticket-filters-trigger { display: none !important; }
  .atm-ticket-filters-row { display: flex !important; }
}

@media (max-width: 480px) {
  /* Ticket: header collassa */
  .atm-ticket-header { flex-direction: column; gap: 8px; }
  .atm-ticket-right  { flex-direction: row; align-items: center; flex-wrap: wrap; }

  /* Stats: 2 colonne compatte */
  .atm-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .atm-stat-card { padding: 10px 12px; gap: 10px; }
  .atm-stat-card .atm-stat-value { font-size: 1.4rem; }
  .atm-stat-card .atm-stat-label { font-size: .7rem; }
  .atm-stat-icon { width: 34px; height: 34px; border-radius: 8px; }
  .atm-stat-icon svg { width: 18px; height: 18px; }

  /* Nav → bottom bar fissa */
  .atm-nav,
  .atm-dash-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--atm-border);
    box-shadow: 0 -2px 12px rgba(60,64,67,.12);
    margin-bottom: 0;
    padding: 6px 8px;
    justify-content: space-around;
    gap: 0;
  }
  .atm-nav-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: .68rem;
    border-radius: 6px;
  }
  .atm-nav-icon { width: 20px; height: 20px; }
  .atm-dashboard { padding-bottom: 80px; }
}

/* ==========================================================================
   AGGIUNTE v1.1 — nuovi template PVIP-style
   ========================================================================== */

/* ── Auth divider ─────────────────────────────────────────────────────────── */
.atm-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
  color: var(--atm-text-3);
  font-size: .78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.atm-auth-divider::before,
.atm-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--atm-border);
}

/* ── Selettore Tipo Ente (registrazione) ─────────────────────────────────── */
.atm-tipo-ente-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.atm-tipo-ente-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px 14px;
  border: 2px solid var(--atm-border);
  border-radius: 12px;
  background: var(--atm-bg);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  position: relative;
  font-family: var(--atm-font);
  text-align: center;
}
.atm-tipo-ente-btn:hover {
  border-color: var(--atm-blue);
  background: #f0f7ff;
}
.atm-tipo-ente-btn--active {
  border-color: var(--atm-blue) !important;
  background: #e8f2ff !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.atm-tipo-ente-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--atm-white);
  border: 1.5px solid var(--atm-border);
  color: var(--atm-text-2);
  transition: background .18s, border-color .18s, color .18s;
}
.atm-tipo-ente-btn--active .atm-tipo-ente-icon,
.atm-tipo-ente-btn:hover .atm-tipo-ente-icon {
  background: var(--atm-blue);
  border-color: var(--atm-blue);
  color: #fff;
}
.atm-tipo-ente-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--atm-text);
  line-height: 1.3;
}
.atm-tipo-ente-check {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--atm-blue);
  color: #fff;
  align-items: center;
  justify-content: center;
}
.atm-tipo-ente-btn--active .atm-tipo-ente-check {
  display: flex;
}
.atm-ente-panel {
  margin-top: 12px;
  margin-bottom: 8px;
  padding: 16px;
  background: var(--atm-bg);
  border: 1.5px solid var(--atm-border);
  border-radius: 10px;
  animation: atm-fade-in .2s ease;
}
@keyframes atm-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Select con chevron SVG ───────────────────────────────────────────────── */
.atm-select-wrap { position: relative; }
.atm-select-wrap select {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border: 1.5px solid var(--atm-border);
  border-radius: var(--atm-r);
  font-family: var(--atm-font);
  font-size: .9375rem;
  color: var(--atm-text);
  background: var(--atm-white);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.atm-select-wrap select:focus {
  border-color: var(--atm-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}
.atm-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--atm-text-2);
}

/* .atm-dash-nav e .atm-nav-active sono gestiti nella sezione Navigation Tabs sopra */

/* ── Section panel ────────────────────────────────────────────────────────── */
.atm-section-panel {
  background: var(--atm-white);
  border-radius: 12px;
  border: 1px solid var(--atm-border);
  box-shadow: var(--atm-shadow);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-sizing: border-box;
  max-width: 100%;
}

/* ── OTP info box (pagina verifica) ──────────────────────────────────────── */
.atm-otp-info-box {
  background: var(--atm-blue-lt);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
  margin-bottom: 24px;
}
.atm-otp-info-label { margin: 0 0 4px; font-size: .8rem; color: var(--atm-text-2); }
.atm-otp-info-email { color: var(--atm-blue); font-size: 1rem; display: block; }
.atm-otp-info-desc  { margin: 6px 0 0; font-size: .78rem; color: var(--atm-text-2); }

/* ── OTP 6 digit input ────────────────────────────────────────────────────── */
.atm-otp-digits {
  display: flex !important;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 8px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: visible;   /* non clippare i digit */
}
/*
 * !important necessario: il tema potrebbe applicare input{width:100%} con
 * specificità superiore a (0,2,0). Con !important i digit mantengono la
 * dimensione corretta e tutti e 6 sono visibili.
 */
.atm-otp-digits .atm-otp-digit {
  width:       48px !important;
  height:      56px !important;
  min-width:   0;
  flex-shrink: 0 !important;
  text-align:  center !important;
  font-size:   1.5rem !important;
  font-weight: 700;
  padding:     0 !important;
  border:      2px solid var(--atm-border) !important;
  border-radius: 10px;
  transition:  border-color .15s, box-shadow .15s;
  background:  var(--atm-white) !important;
  color:       var(--atm-text);
  box-sizing:  border-box !important;
}
.atm-otp-digits .atm-otp-digit:focus {
  border-color: var(--atm-blue) !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);
  outline: none;
}
.atm-otp-digits .atm-otp-digit.filled { border-color: var(--atm-blue) !important; background: var(--atm-blue-lt) !important; }

/* ── Countdown OTP ────────────────────────────────────────────────────────── */
.atm-otp-countdown {
  text-align: center;
  font-size: .8rem;
  color: var(--atm-text-2);
  margin: 12px 0 20px;
}
.atm-otp-countdown.expiring .atm-countdown-val { color: var(--atm-warn); font-weight: 600; }
.atm-otp-countdown.expired  .atm-countdown-val { color: var(--atm-red); font-weight: 600; }

/* ── Back link ────────────────────────────────────────────────────────────── */
.atm-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--atm-blue);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: opacity .15s;
}
.atm-back-link:hover { opacity: .8; }

/* ── Thread title ─────────────────────────────────────────────────────────── */
.atm-thread-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.atm-thread-title h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--atm-text); }

/* ── Thread empty state ───────────────────────────────────────────────────── */
.atm-thread-empty {
  list-style: none;
  text-align: center;
  padding: 32px 16px;
  color: var(--atm-text-2);
  font-size: .9rem;
}

/* ── Reply area ───────────────────────────────────────────────────────────── */
.atm-reply-area {
  border-top: 1px solid var(--atm-border);
  margin-top: 16px;
  padding-top: 16px;
}
.atm-reply-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--atm-text);
  margin-bottom: 8px;
}
.atm-textarea--reply { min-height: 80px; }

/* ── Ticket list nuovi stili ─────────────────────────────────────────────── */
.atm-ticket-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.atm-ticket-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.atm-ticket-arrow { color: var(--atm-text-3); flex-shrink: 0; }

/* ── Toolbar ricerca/filtri/ordinamento lista ticket (mobile-first) ─────────── */
/* Layout: riga 1 = ricerca, riga 2 = filtri + ordinamento */
.atm-ticket-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
/* Riga 1: ricerca (input + pulsante) */
.atm-ticket-search-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
@media (min-width: 641px) {
  .atm-ticket-search-row {
    flex-direction: row;
    width: 100%;
  }
}
.atm-ticket-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.atm-ticket-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--atm-text-3);
  pointer-events: none;
}
.atm-ticket-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1.5px solid var(--atm-border);
  border-radius: var(--atm-r);
  font-family: var(--atm-font);
  font-size: .875rem;
  color: var(--atm-text);
  background: var(--atm-white);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  box-sizing: border-box;
}
.atm-ticket-search-input:focus {
  border-color: var(--atm-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.atm-ticket-search-input::placeholder { color: var(--atm-text-3); }
.atm-ticket-search-btn {
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--atm-r);
  font-family: var(--atm-font);
  font-size: .875rem;
  font-weight: 600;
  background: var(--atm-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.atm-ticket-search-btn:hover {
  background: #1557b0;
  box-shadow: 0 2px 6px rgba(26,115,232,.3);
}
.atm-ticket-search-btn:active { transform: scale(0.98); }
@media (min-width: 641px) {
  .atm-ticket-search-wrap { flex: 1; min-width: 120px; }
  .atm-ticket-search-btn { flex-shrink: 0; }
}
/* Pulsante Filtri: visibile su mobile, nascosto su desktop */
.atm-ticket-filters-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 1.5px solid var(--atm-border);
  border-radius: var(--atm-r);
  background: #f8f9fa;
  color: var(--atm-text);
  font-family: var(--atm-font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.atm-ticket-filters-trigger:hover {
  border-color: var(--atm-blue);
  background: var(--atm-blue-lt);
  color: var(--atm-blue);
}
.atm-ticket-filters-trigger svg { flex-shrink: 0; color: var(--atm-blue); }
/* Riga 2: filtri stato + ordinamento (desktop) */
.atm-ticket-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.atm-ticket-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.atm-ticket-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  background: #f1f3f4;
  color: var(--atm-text-2);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--atm-font);
  transition: background .15s, color .15s, border-color .15s;
}
.atm-ticket-filter-btn:hover {
  background: #e8f0fe;
  color: var(--atm-blue);
}
.atm-ticket-filter-btn--active {
  background: var(--atm-blue);
  color: #fff;
  border-color: var(--atm-blue);
}
.atm-ticket-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.atm-ticket-sort-label {
  font-size: .8125rem;
  color: var(--atm-text-2);
  margin: 0;
}
.atm-ticket-sort-select {
  padding: 6px 28px 6px 10px;
  border: 1.5px solid var(--atm-border);
  border-radius: var(--atm-r);
  font-family: var(--atm-font);
  font-size: .8125rem;
  color: var(--atm-text);
  background: var(--atm-white);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.atm-ticket-sort-select:focus { border-color: var(--atm-blue); }

/* ── Modal Filtri (solo mobile) ───────────────────────────────────────────── */
.atm-filters-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
@media (min-width: 769px) {
  .atm-filters-modal { display: none !important; }
}
.atm-filters-modal.atm-filters-modal--open {
  opacity: 1;
  pointer-events: all;
}
.atm-filters-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32,33,36,.5);
  backdrop-filter: blur(4px);
}
.atm-filters-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  background: var(--atm-white);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.atm-filters-modal.atm-filters-modal--open .atm-filters-modal-sheet {
  transform: translateY(0);
}
.atm-filters-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--atm-border);
  flex-shrink: 0;
}
.atm-filters-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--atm-text);
}
.atm-filters-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--atm-text-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.atm-filters-modal-close:hover { background: #f1f3f4; color: var(--atm-text); }
.atm-filters-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.atm-filters-modal-section { display: flex; flex-direction: column; gap: 10px; }
.atm-filters-modal-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--atm-text-2);
  margin: 0;
}
.atm-filters-modal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.atm-filters-modal-pills .atm-ticket-filter-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: .875rem;
}
.atm-filters-modal-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 36px 12px 14px;
  font-size: .9rem;
}
.atm-filters-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--atm-border);
  flex-shrink: 0;
}
.atm-filters-modal-apply {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: 1rem;
}

.atm-ticket-pagination-info {
  font-size: .8125rem;
  color: var(--atm-text-2);
  margin-bottom: 12px;
  min-height: 1.4em;
}
/* Stato vuoto: nessun ticket corrisponde ai filtri */
.atm-ticket-pagination-info--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(26,115,232,.04) 0%, transparent 70%);
  border-radius: 12px;
  border: 1px dashed var(--atm-border);
}
.atm-ticket-pagination-info--empty .atm-no-results-icon {
  color: var(--atm-blue);
  opacity: 0.75;
  margin-bottom: 16px;
}
.atm-ticket-pagination-info--empty .atm-no-results-icon svg {
  display: block;
}
.atm-ticket-pagination-info--empty .atm-no-results-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--atm-text);
  margin-bottom: 6px;
}
.atm-ticket-pagination-info--empty .atm-no-results-desc {
  display: block;
  font-size: .875rem;
  color: var(--atm-text-2);
  line-height: 1.5;
}
.atm-ticket-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--atm-border);
}
.atm-ticket-pagination button {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--atm-r);
  border: 1px solid var(--atm-border);
  background: var(--atm-white);
  color: var(--atm-text);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--atm-font);
}
.atm-ticket-pagination button:hover:not(:disabled) {
  background: var(--atm-blue-lt);
  border-color: var(--atm-blue);
  color: var(--atm-blue);
}
.atm-ticket-pagination button.atm-page-active {
  background: var(--atm-blue);
  border-color: var(--atm-blue);
  color: #fff;
}
.atm-ticket-pagination button:disabled { opacity: .4; cursor: default; }

/* ── Empty state dashboard ───────────────────────────────────────────────── */
.atm-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--atm-text-2);
}
.atm-empty-state svg { color: var(--atm-text-3); margin-bottom: 12px; }
.atm-empty-state strong { display: block; font-size: 1rem; color: var(--atm-text); margin-bottom: 8px; }
.atm-empty-state p { font-size: .875rem; margin: 0; }
.atm-empty-state a:not(.atm-btn) { color: var(--atm-blue); }
.atm-empty-state-cta.atm-btn--blue { color: var(--atm-white) !important; }
.atm-empty-state-cta.atm-btn--blue:hover { color: var(--atm-white) !important; }
/* Empty state migliorato (Fase 2.2) */
.atm-empty-state--tickets {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 32px;
  background: linear-gradient(180deg, rgba(26,115,232,.04) 0%, transparent 60%);
  border-radius: 16px;
  border: 1px dashed var(--atm-border);
}
.atm-empty-state-illus {
  color: var(--atm-blue);
  opacity: 0.7;
  margin-bottom: 24px;
}
.atm-empty-state-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--atm-text);
  margin: 0 0 10px;
}
.atm-empty-state-desc {
  font-size: .95rem;
  color: var(--atm-text-2);
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 320px;
}
.atm-empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--atm-r);
  transition: background .15s, box-shadow .15s;
}
.atm-empty-state-cta:hover {
  box-shadow: 0 2px 8px rgba(26,115,232,.3);
}
.atm-empty-state--servizi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 32px;
  background: linear-gradient(180deg, rgba(26,115,232,.04) 0%, transparent 60%);
  border-radius: 16px;
  border: 1px dashed var(--atm-border);
}
.atm-empty-state--canoni {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px;
  background: linear-gradient(180deg, rgba(26,115,232,.04) 0%, transparent 60%);
  border-radius: 16px;
  border: 1px dashed var(--atm-border);
}
.atm-empty-state--canoni .atm-empty-state-desc {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ── Sezione I miei Servizi ───────────────────────────────────────────────── */
.atm-servizi-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.atm-servizi-search-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
@media (min-width: 641px) {
  .atm-servizi-search-row {
    flex-direction: row;
    width: 100%;
  }
}
.atm-servizi-search-row .atm-ticket-search-wrap {
  flex: 1;
  min-width: 0;
}
.atm-servizi-search-row .atm-ticket-search-btn {
  flex-shrink: 0;
}
.atm-servizi-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.atm-servizi-stato-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.atm-servizi-stato-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--atm-font);
  background: var(--atm-bg);
  color: var(--atm-text);
  border: 1px solid var(--atm-border);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.atm-servizi-stato-btn:hover {
  background: #e8eaed;
  border-color: var(--atm-border);
}
.atm-servizi-stato-btn--active {
  background: var(--atm-blue);
  color: #fff;
  border-color: var(--atm-blue);
}
.atm-stato-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  background: rgba(0,0,0,.10);
  color: inherit;
  margin-left: 5px;
  vertical-align: middle;
}
.atm-servizi-stato-btn--active .atm-stato-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.atm-servizi-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.atm-servizi-sort-label {
  font-size: .8rem;
  color: var(--atm-text-2);
  white-space: nowrap;
}
.atm-servizi-sort-select {
  padding: 6px 10px;
  border-radius: var(--atm-r);
  font-size: .8rem;
  font-family: var(--atm-font);
  border: 1px solid var(--atm-border);
  background: var(--atm-white);
  color: var(--atm-text);
  min-width: 180px;
}
.atm-stats-row--servizi {
  margin-bottom: 24px;
}
.atm-stats-row--servizi .atm-stat-card {
  min-width: 0;
}
/* Modale dettaglio servizio */
.atm-servizio-modal .atm-modal-box {
  max-width: 480px;
  width: 100%;
}
.atm-servizio-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.atm-servizio-modal-header .atm-modal-close {
  flex-shrink: 0;
  padding: 4px;
  margin: -4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--atm-text-2);
  border-radius: 4px;
}
.atm-servizio-modal-header .atm-modal-close:hover {
  background: var(--atm-bg);
  color: var(--atm-text);
}
.atm-servizio-modal-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.atm-servizio-modal-row {
  margin: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: baseline;
}
.atm-servizio-modal-row dt {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atm-text-2);
  margin: 0;
}
.atm-servizio-modal-row dd {
  font-size: .9rem;
  margin: 0;
  color: var(--atm-text);
}
.atm-servizio-modal-footer--ticket {
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  border-top: 1px solid var(--atm-border);
  padding-top: 14px;
}
.atm-svc-ticket-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--atm-text-2);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.atm-svc-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.atm-svc-cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--atm-border);
  background: #fff;
  color: var(--atm-text);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.atm-svc-cat-chip:hover {
  border-color: var(--atm-blue);
  background: rgba(26,115,232,.05);
  color: var(--atm-blue);
}
.atm-svc-cat-chip--active {
  border-color: var(--atm-blue);
  background: var(--atm-blue);
  color: #fff;
}
.atm-svc-ticket-cta-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.atm-svc-ticket-cta-row .atm-btn--secondary {
  flex: 0 0 auto;
}
.atm-svc-cta--disabled {
  pointer-events: none;
  opacity: .4;
  cursor: not-allowed;
}
.atm-servizio-modal-extra {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--atm-border);
}
.atm-servizio-modal-extra-title {
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--atm-text);
}
/* ══════════════════════════════════════════════════════════════
   MODAL DETTAGLIO SERVIZIO — design professionale unificato
   ══════════════════════════════════════════════════════════════ */
.atm-svcm2-box {
  max-width: 500px !important;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  border-radius: 20px !important;
  overflow: hidden;
  padding: 0 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08) !important;
}

/* ── Header hero ───────────────────────────────────────────────── */
.atm-svcm2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  flex-shrink: 0;
}
.atm-svcm2-header-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.atm-svcm2-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f0fe 0%, #dbeafe 100%);
  color: #1a73e8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26,115,232,.15);
}
.atm-svcm2-box .atm-svcm2-title,
.atm-svcm2-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  border: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 320px !important;
}
.atm-svcm2-subtitle {
  font-size: .78rem;
  color: #94a3b8;
  display: block;
  font-weight: 500;
}
.atm-svcm2-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.atm-svcm2-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f8fafc;
  cursor: pointer;
  color: #94a3b8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.atm-svcm2-close:hover { background: #f1f5f9; color: #475569; }

/* ── Body scrollabile ──────────────────────────────────────────── */
.atm-svcm2-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 0;
}

/* ── Sezioni ───────────────────────────────────────────────────── */
.atm-svcm2-section {
  padding: 16px 22px;
  border-bottom: 1px solid #f8fafc;
}
.atm-svcm2-section:last-child { border-bottom: none; }
.atm-svcm2-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #94a3b8;
  margin-bottom: 14px;
}
.atm-svcm2-section-title svg { opacity: .7; }

/* ── DL dati contratto ─────────────────────────────────────────── */
.atm-svcm2-dl { margin: 0; display: flex; flex-direction: column; gap: 0; }
.atm-svcm2-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}
.atm-svcm2-row:last-child { border-bottom: none; }
.atm-svcm2-row dt {
  font-size: .77rem;
  font-weight: 500;
  color: #94a3b8;
  margin: 0;
}
.atm-svcm2-row dd {
  font-size: .88rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.atm-svcm2-empty {
  font-size: .82rem;
  color: #94a3b8;
  margin: 0;
  font-style: italic;
}

/* ── Scadenza ──────────────────────────────────────────────────── */
.atm-svcm2-scad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -.02em;
}
.atm-svcm2-scad svg { opacity: .5; flex-shrink: 0; }
.atm-svcm2-scad-note {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  color: #64748b;
  padding: 2px 9px;
  background: #f1f5f9;
  border-radius: 20px;
  margin-left: 2px;
  vertical-align: middle;
}
.atm-svcm2-scad-note--soon {
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.atm-svcm2-scad-note--expired {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.atm-svcm2-scad--soon strong  { color: #b45309; }
.atm-svcm2-scad--expired strong { color: #dc2626; }

/* ── Chip fine garanzia / assistenza (tipo_costi=iniziale con data) ── */
.atm-svcm2-garanzia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e3a5f;
  font-size: 0.875rem;
  font-weight: 500;
}
.atm-svcm2-garanzia svg { opacity: .6; flex-shrink: 0; color: #3b82f6; }
.atm-svcm2-garanzia-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}
.atm-svcm2-garanzia strong { font-weight: 800; color: #1e293b; }
.atm-svcm2-scad-note--muted {
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Label prefisso pillola "Fine garanzia" nella card servizio ───── */
.atm-svc2-giorni-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}
.atm-svc2-giorni--muted {
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 400;
}

/* ── Chip una tantum (nessun canone ricorrente) ────────────────── */
.atm-svcm2-tantum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  color: #166534;
  font-size: 0.875rem;
  font-weight: 500;
}
.atm-svcm2-tantum svg { opacity: .7; flex-shrink: 0; }
.atm-svcm2-tantum-note {
  margin-left: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  color: #15803d;
  opacity: .8;
}

/* Chip informativi modalità tariffaria (annuale / solo canone / canone+iniziale) */
.atm-svcm2-tariffa-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.atm-svcm2-tariffa-info__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.atm-svcm2-tariffa-info__row svg { opacity: .75; flex-shrink: 0; }
.atm-svcm2-tariffa-info-note {
  font-size: 0.8rem;
  font-weight: 400;
  color: #1e3a8a;
  line-height: 1.45;
}
.atm-svcm2-tariffa-info--annuale { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.atm-svcm2-tariffa-info--canone { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
.atm-svcm2-tariffa-info--canone .atm-svcm2-tariffa-info-note { color: #115e59; }

/* ── Alert link pagamenti ──────────────────────────────────────── */
.atm-svcm2-alert-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 600;
  width: 100%;
  box-sizing: border-box;
  transition: background .15s;
}
.atm-svcm2-alert-link--pagamento {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
}
.atm-svcm2-alert-link--pagamento:hover { background: #ffedd5; }
.atm-svcm2-alert-link svg:last-child { margin-left: auto; flex-shrink: 0; opacity: .5; }

/* ── Info chip (rinnovo in elaborazione, ecc.) ─────────────────── */
.atm-svcm2-info-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .83rem;
  line-height: 1.5;
  font-weight: 500;
}
.atm-svcm2-info-chip--warn {
  background: #fefce8;
  border: 1px solid #fde047;
  color: #854d0e;
}
.atm-svcm2-info-chip--ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}
.atm-svcm2-info-chip svg { flex-shrink: 0; margin-top: 1px; }

/* ── Lista ─────────────────────────────────────────────────────── */
.atm-svcm2-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.atm-svcm2-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .83rem;
  color: var(--atm-text);
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}
.atm-svcm2-list-item:last-child { border-bottom: none; }
.atm-svcm2-list-item svg { flex-shrink: 0; color: #22c55e; }
.atm-svcm2-list-item a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--atm-blue);
  text-decoration: none;
  font-weight: 500;
}

/* ── Sezione descrizione ───────────────────────────────────────── */
.atm-svcm2-desc-text {
  font-size: .875rem;
  color: var(--atm-text);
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ── Componenti con rinnovo separato (solo autonomi) ──────────── */
.atm-svcm2-collegato-item {
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 0 !important;
  flex-wrap: wrap;
}
.atm-svcm2-collegato-item svg { color: #3b82f6 !important; flex-shrink: 0; }
.atm-svcm2-collegato-nome {
  font-weight: 600;
  font-size: .84rem;
  color: var(--atm-text);
  flex: 1;
  min-width: 100px;
}
.atm-svcm2-collegato-importo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}
.atm-svcm2-collegato-costo {
  font-size: .85rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.atm-svcm2-collegato-freq {
  font-size: .72rem;
  color: #94a3b8;
  font-weight: 500;
}
.atm-svcm2-collegato-scad {
  font-size: .72rem;
  color: #dc2626;
  white-space: nowrap;
  padding: 2px 7px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
}
.atm-svcm2-collegato-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Pricing breakdown rinnovo ─────────────────────────────────── */
.atm-svcm2-pricing {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  font-size: .84rem;
}
.atm-svcm2-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.atm-svcm2-pricing-row:last-child { border-bottom: none; }
.atm-svcm2-pricing-row--item {
  background: #fff;
  color: #1e293b;
  font-weight: 600;
}
.atm-svcm2-pricing-row--iva {
  background: #f8fafc;
  color: #64748b;
  font-size: .79rem;
}
.atm-svcm2-pricing-row--iva-pa {
  background: #fff8f2;
  color: #92400e;
  font-size: .79rem;
  border-top: 1px solid #fde8cc !important;
}
.atm-svcm2-split-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 6px;
  background: #fed7aa;
  color: #92400e;
  border-radius: 8px;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.atm-svcm2-iva-erario {
  font-style: italic;
  opacity: .75;
}
.atm-svcm2-pricing-row--total-pa {
  background: #eff6ff;
  font-weight: 800;
  color: #1d4ed8;
  font-size: .9rem;
  border-top: 2px solid #bfdbfe !important;
}
.atm-svcm2-pricing-row--subtotal {
  background: #f8fafc;
  color: #64748b;
  font-size: .8rem;
  font-weight: 600;
  border-top: 1px dashed #cbd5e1 !important;
}
/* ── Box "Costi futuri previsti" nel modal dettagli ─────────────────── */
.atm-svcm2-future-box {
  margin-top: .75rem;
  border: 1.5px dashed #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  padding: .75rem 1rem;
}
.atm-svcm2-future-box__title {
  font-size: .75rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
}
.atm-svcm2-future-box__note {
  font-size: .72rem;
  color: #b45309;
  font-style: italic;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.atm-svcm2-future-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-top: 1px dashed #fde68a;
  font-size: .8rem;
}
.atm-svcm2-future-row__label {
  flex: 1;
  font-weight: 600;
  color: #78350f;
}
.atm-svcm2-future-row__when {
  font-size: .72rem;
  color: #b45309;
  background: #fef3c7;
  border-radius: 20px;
  padding: .1rem .55rem;
  white-space: nowrap;
  font-weight: 600;
}
.atm-svcm2-future-row__amt {
  font-weight: 700;
  color: #92400e;
  text-align: right;
  white-space: nowrap;
}
.atm-svcm2-pricing-row--total {
  background: #f0fdf4;
  font-weight: 800;
  color: #15803d;
  font-size: .9rem;
  border-top: 2px solid #86efac !important;
}
.atm-svcm2-pricing--iniziale {
  margin-bottom: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}
.atm-svcm2-pricing-row--section-title {
  font-size: .78rem;
  font-weight: 700;
  color: #1e40af;
  padding: 8px 14px 4px;
  border-bottom: 1px solid #bfdbfe;
}
.atm-svcm2-pricing-freq {
  font-size: .72rem;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 3px;
}

.atm-svcm2-pricing-row--component {
  padding-left: 10px;
  border-left: 3px solid #bfdbfe;
  background: #f8fbff;
}
.atm-svcm2-pricing-component {
  color: #475569;
  font-size: .84rem;
  font-weight: 600;
}

/* ── Footer ────────────────────────────────────────────────────── */
.atm-svcm2-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
  flex-shrink: 0;
}

/* ── Stato badge ────────────────────────────────────────────────── */
.atm-svcm2-stato-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .atm-svcm2-box { max-height: 100vh !important; border-radius: 0 !important; }
  .atm-svcm2-row { grid-template-columns: 1fr; gap: 2px; }
  .atm-svcm2-row dt { font-size: .7rem; }
  .atm-svcm2-footer { flex-direction: column-reverse; gap: 8px; }
  .atm-svcm2-footer .atm-svc2-btn { width: 100%; justify-content: center; }
}

.atm-servizio-modal-doc-list,
.atm-servizio-modal-rinnovi-list,
.atm-servizio-modal-tickets-list {
  margin: 0;
  padding-left: 20px;
  font-size: .88rem;
}
.atm-servizio-modal-doc-list li,
.atm-servizio-modal-rinnovi-list li,
.atm-servizio-modal-tickets-list li {
  margin-bottom: 6px;
}
.atm-servizio-modal-doc-list a,
.atm-servizio-modal-tickets-list a {
  color: var(--atm-primary, #1a73e8);
  text-decoration: none;
}
.atm-servizio-modal-doc-list a:hover,
.atm-servizio-modal-tickets-list a:hover {
  text-decoration: underline;
}
.atm-servizio-ticket-stato {
  font-size: .78rem;
  color: var(--atm-text-2);
  margin-left: 6px;
}
/* Form rinnovo: layout flex per body scrollabile e footer fisso */
/* ══════════════════════════════════════════════════════════════════════════
   MODAL PAGAMENTO — design unificato per tutti i 6 modal della sezione
   (rinnovo, determina, metodo, bonifico voce/ss, bonifico canone, bonifico rinnovo)
   ══════════════════════════════════════════════════════════════════════════ */
#atm-rinnovo-modal .atm-modal-box,
#atm-determina-voce-modal .atm-modal-box,
#atm-metodo-pagamento-modal .atm-modal-box,
#atm-voce-ss-bonifico-modal .atm-modal-box,
#atm-canone-bonifico-modal .atm-modal-box,
#atm-rinnovo-bonifico-modal .atm-modal-box {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
}
#atm-rinnovo-modal .atm-modal-box { max-width: 500px; }
#atm-determina-voce-modal .atm-modal-box,
#atm-metodo-pagamento-modal .atm-modal-box,
#atm-voce-ss-bonifico-modal .atm-modal-box,
#atm-canone-bonifico-modal .atm-modal-box,
#atm-rinnovo-bonifico-modal .atm-modal-box { max-width: 460px; }

/* Header unificato */
#atm-rinnovo-modal .atm-modal-header,
#atm-determina-voce-modal .atm-modal-header,
#atm-metodo-pagamento-modal .atm-modal-header,
#atm-voce-ss-bonifico-modal .atm-modal-header,
#atm-canone-bonifico-modal .atm-modal-header,
#atm-rinnovo-bonifico-modal .atm-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff;
}

/* Icona header colorata */
.atm-modal-header-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
}
.atm-modal-header-icon--orange {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  color: #c2410c;
}
.atm-modal-header-icon--purple {
  background: linear-gradient(135deg, #faf5ff, #e9d5ff);
  color: #7c3aed;
}

/* Testo header: titolo + sottotitolo opzionale */
.atm-modal-header-text { flex: 1; min-width: 0; }
.atm-modal-header-text .atm-modal-title {
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.atm-modal-header-text .atm-modal-subtitle,
.atm-modal-header-text .atm-rinnovo-servizio-nome {
  font-size: .78rem;
  color: #94a3b8;
  margin: 2px 0 0 !important;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button 32×32 unificato */
#atm-rinnovo-modal .atm-modal-close,
#atm-determina-voce-modal .atm-modal-close,
#atm-metodo-pagamento-modal .atm-modal-close,
#atm-voce-ss-bonifico-modal .atm-modal-close,
#atm-canone-bonifico-modal .atm-modal-close,
#atm-rinnovo-bonifico-modal .atm-modal-close {
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f8fafc !important;
  border: none !important;
  border-radius: 8px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
#atm-rinnovo-modal .atm-modal-close:hover,
#atm-determina-voce-modal .atm-modal-close:hover,
#atm-metodo-pagamento-modal .atm-modal-close:hover,
#atm-voce-ss-bonifico-modal .atm-modal-close:hover,
#atm-canone-bonifico-modal .atm-modal-close:hover,
#atm-rinnovo-bonifico-modal .atm-modal-close:hover {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

/* Body */
#atm-rinnovo-modal .atm-modal-body,
#atm-determina-voce-modal .atm-modal-body,
#atm-metodo-pagamento-modal .atm-modal-body,
#atm-voce-ss-bonifico-modal .atm-modal-body,
#atm-canone-bonifico-modal .atm-modal-body,
#atm-rinnovo-bonifico-modal .atm-modal-body {
  padding: 20px !important;
  max-height: calc(80vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Footer */
#atm-rinnovo-modal .atm-modal-footer,
#atm-determina-voce-modal .atm-modal-footer,
#atm-metodo-pagamento-modal .atm-modal-footer,
#atm-voce-ss-bonifico-modal .atm-modal-footer,
#atm-canone-bonifico-modal .atm-modal-footer,
#atm-rinnovo-bonifico-modal .atm-modal-footer {
  padding: 12px 20px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #fafafa !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
#atm-rinnovo-modal .atm-modal-footer .atm-btn,
#atm-determina-voce-modal .atm-modal-footer .atm-btn,
#atm-metodo-pagamento-modal .atm-modal-footer .atm-btn,
#atm-voce-ss-bonifico-modal .atm-modal-footer .atm-btn,
#atm-canone-bonifico-modal .atm-modal-footer .atm-btn,
#atm-rinnovo-bonifico-modal .atm-modal-footer .atm-btn {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Classi specifiche rinnovo (compatibilità) */
.atm-rinnovo-modal-box { max-width: 500px !important; }
.atm-rinnovo-modal-header { /* sovrascritta dalla regola unificata */ }
.atm-rinnovo-servizio-nome {
  font-size: .78rem;
  color: #94a3b8;
  margin: 2px 0 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atm-modal-box .atm-rinnovo-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}
.atm-rinnovo-modal-body { padding: 18px 20px !important; }
.atm-rinnovo-form .atm-form-group { margin-bottom: 14px; }
.atm-rinnovo-form .atm-radio-group { display: flex; flex-direction: column; gap: 8px; }
.atm-rinnovo-form .atm-radio-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .88rem; }

/* Importo box */
.atm-rinnovo-importo-box {
  background: rgba(26,115,232,.04);
  border: 1px solid rgba(26,115,232,.15);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: .82rem;
  color: #444;
  line-height: 2;
}

/* Bonifico dati */
.atm-rinnovo-bonifico-box {
  background: var(--atm-bg);
  border: 1px solid var(--atm-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 10px;
  font-size: .83rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.atm-rinnovo-bdata-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.atm-rinnovo-bdata-row > span { color: var(--atm-text-2); flex-shrink: 0; }
.atm-rinnovo-bdata-row > strong,
.atm-rinnovo-bdata-row > em { color: var(--atm-text); word-break: break-all; font-style: normal; text-align: right; }
.atm-rinnovo-bonifico-note { font-size: .8rem; color: var(--atm-text-2); margin: 0 0 12px; }

/* PA section */
.atm-rinnovo-pa-infobox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(234,179,8,.06);
  border: 1px solid rgba(234,179,8,.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .82rem;
  color: #78350f;
  margin-bottom: 16px;
  line-height: 1.5;
}
.atm-rinnovo-pa-infobox svg { flex-shrink: 0; margin-top: 1px; color: #b45309; }
.atm-rinnovo-pa-infobox--ok {
  background: rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.3);
  color: #065f46;
}
.atm-rinnovo-pa-infobox--ok svg { color: #059669; }

/* Toggle modalità PA */
.atm-pa-mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--atm-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.atm-pa-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--atm-bg-2, #f8fafc);
  color: var(--atm-text-2, #64748b);
  transition: background .15s, color .15s;
}
.atm-pa-mode-btn + .atm-pa-mode-btn { border-left: 1px solid var(--atm-border); }
.atm-pa-mode-btn--active {
  background: var(--atm-primary, #1d4ed8);
  color: #fff;
}
.atm-pa-mode-btn--active svg { color: #fff; }
.atm-rinnovo-pa-section-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--atm-text-2);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--atm-border);
}
.atm-rinnovo-pa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .atm-rinnovo-pa-row2 { grid-template-columns: 1fr; } }

/* CIG monospace */
.atm-input-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; letter-spacing: .08em; }
.atm-input-cig { text-transform: uppercase !important; max-width: 160px; }

/* Label hint inline */
.atm-form-label-opt { font-weight: 400; color: var(--atm-text-2); }
.atm-form-label-hint { display: block; font-size: .73rem; font-weight: 400; color: var(--atm-text-2); margin-top: 1px; }

/* File input */
.atm-rinnovo-file-wrap { display: flex; align-items: center; }
.atm-rinnovo-file-input { font-size: .85rem; }

.atm-rinnovo-form .atm-optional { font-weight: 400; color: var(--atm-text-2); }
.atm-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.atm-service-card {
  background: var(--atm-white);
  border-radius: 12px;
  border: 1px solid var(--atm-border);
  box-shadow: 0 2px 8px rgba(60,64,67,.08);
  transition: box-shadow .2s, transform .2s;
}
.atm-service-card:hover {
  box-shadow: 0 4px 16px rgba(60,64,67,.12);
  transform: translateY(-2px);
}
.atm-service-card--clickable {
  cursor: pointer;
}
.atm-service-card--clickable .atm-service-card-cta {
  pointer-events: auto;
}
.atm-service-card-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 24px;
}
.atm-service-card-main {
  min-width: 0;
}
.atm-service-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.atm-service-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--atm-text);
  line-height: 1.3;
}
.atm-service-card-code {
  font-size: .75rem;
  color: var(--atm-text-2);
  background: var(--atm-bg);
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}
.atm-service-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.atm-service-card-tipo {
  font-size: .875rem;
  color: var(--atm-text-2);
}
.atm-service-card-company {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--atm-text-2);
}
.atm-service-card-company svg {
  flex-shrink: 0;
  opacity: .7;
}
.atm-service-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.atm-service-card-detail {
  margin: 0;
}
.atm-service-card-detail dt {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atm-text-3);
  margin-bottom: 2px;
}
.atm-service-card-detail dd {
  font-size: .9rem;
  margin: 0;
  color: var(--atm-text);
}
.atm-service-card-giorni--urgent dd {
  color: var(--atm-warn);
  font-weight: 600;
}
.atm-service-card-giorni--scaduto dd {
  color: var(--atm-red);
  font-weight: 600;
}
/* Card servizio scaduto: evidenza visiva */
.atm-service-card--scaduto {
  border-left: 4px solid var(--atm-red);
  background: linear-gradient(90deg, rgba(217,48,37,.06) 0%, transparent 12%);
}
.atm-service-card--scaduto .atm-service-card-giorni--scaduto dt {
  color: var(--atm-red);
  font-weight: 600;
}
.atm-service-card--scaduto .atm-service-card-detail dd strong {
  color: var(--atm-red);
}
.atm-service-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.atm-service-card-actions .atm-btn {
  flex-shrink: 0;
}
.atm-service-card-cta {
  white-space: nowrap;
}
/* ── Rinnovo in attesa: pulsante disabilitato + messaggio ──────────────── */
.atm-rinnovo-pending-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.atm-rinnovo-disabled-btn {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  gap: 5px;
}
.atm-rinnovo-pending-msg {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: .75rem;
  color: var(--atm-text-2);
  line-height: 1.4;
  margin: 0;
  max-width: 220px;
  text-align: right;
}
.atm-rinnovo-pending-msg svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #f59e0b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SERVIZI v2 — layout pulito e professionale
   ═══════════════════════════════════════════════════════════════════════════ */
.atm-svc2-card {
  background: var(--atm-white);
  border-radius: 12px;
  border: 1px solid var(--atm-border);
  border-left: 4px solid #22c55e;
  box-shadow: 0 1px 4px rgba(60,64,67,.07);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s;
  position: relative;
}
.atm-svc2-card:hover,
.atm-svc2-card:focus {
  box-shadow: 0 4px 18px rgba(60,64,67,.13);
  transform: translateY(-2px);
  outline: none;
}
.atm-svc2-card--attivo     { border-left-color: #22c55e; }
.atm-svc2-card--in-scadenza { border-left-color: #f59e0b; }
.atm-svc2-card--urgente    { border-left-color: #ef4444; }
.atm-svc2-card--scaduto {
  border-left-color: #dc2626;
  background: linear-gradient(90deg, rgba(220,38,38,.04) 0%, transparent 14%);
}
.atm-svc2-card--senza-piano { border-left-color: #94a3b8; }

/* — Riga 1: titolo + badge ——————————————————————————————— */
.atm-svc2-top { display: flex; flex-direction: column; gap: 6px; }
.atm-svc2-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.atm-svc2-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--atm-text);
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge stato */
.atm-svc2-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.atm-svc2-badge--attivo        { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.atm-svc2-badge--in-scadenza   { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.atm-svc2-badge--urgente       { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.atm-svc2-badge--scaduto       { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.atm-svc2-badge--collaudo      { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.atm-svc2-badge--sospeso        { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.atm-svc2-badge--in-attivazione { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.atm-svc2-badge--in-gestione    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
/* Garanzia scaduta — blu neutro, non allarmante come il rosso "scaduto" */
.atm-svc2-badge--garanzia-scad { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* — Riga 2: meta (tipo · codice · azienda) ——————————————— */
.atm-svc2-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: .8rem;
  color: var(--atm-text-2);
}
.atm-svc2-sep { color: var(--atm-border); font-size: .9em; }
.atm-svc2-tipo  { color: var(--atm-text-2); }
.atm-svc2-code  {
  background: var(--atm-bg);
  border: 1px solid var(--atm-border);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: .75rem;
  color: var(--atm-text-2);
  font-family: monospace;
}
.atm-svc2-company {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--atm-text-2);
}
.atm-svc2-company svg { opacity: .6; flex-shrink: 0; }

/* — Riga 3: info pillole ————————————————————————————————— */
.atm-svc2-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.atm-svc2-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--atm-text);
  background: var(--atm-bg);
  border: 1px solid var(--atm-border);
  border-radius: 7px;
  padding: 4px 10px;
}
.atm-svc2-info-pill svg { opacity: .55; flex-shrink: 0; }
.atm-svc2-info-pill--muted { color: var(--atm-text-2); background: transparent; border-color: transparent; }
.atm-svc2-giorni { font-size: .8em; margin-left: 2px; }
.atm-svc2-giorni--urgente { color: #b45309; font-weight: 600; }
.atm-svc2-giorni--scaduto { color: #dc2626; font-weight: 600; }

/* — Riga 4: alert chips ————————————————————————————————— */
.atm-svc2-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.atm-svc2-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  line-height: 1.3;
  text-decoration: none;
}
.atm-svc2-alert svg { flex-shrink: 0; }
.atm-svc2-alert--pagamento {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  transition: background .15s;
}
.atm-svc2-alert--pagamento:hover { background: #ffedd5; color: #c2410c; }
.atm-svc2-alert--rinnovo {
  background: #fef9c3;
  border: 1px solid #fde047;
  color: #854d0e;
}
.atm-svc2-alert--ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}
.atm-svc2-alert--warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  cursor: help;
}

/* — Riga 5: azioni ——————————————————————————————————————— */
.atm-svc2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--atm-border);
  margin-top: 2px;
}

/* ── Servizi collegati autonomi nella card servizio ─────────────── */
.atm-svc2-ss-section {
  margin-top: 10px;
  padding: 0;
  background: var(--atm-bg-subtle, #f8fafc);
  border: 1px solid var(--atm-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.atm-svc2-ss-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--atm-text-muted, #6b7280);
  padding: 10px 14px 6px;
}
.atm-svc2-ss-group {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.atm-svc2-ss-group + .atm-svc2-ss-group { padding-top: 0; }
.atm-svc2-ss-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 0 4px;
  margin: 0;
}
.atm-svc2-ss-group-label--current { color: #059669; }
.atm-svc2-ss-group-label--current::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #059669;
  flex-shrink: 0;
}
.atm-svc2-ss-group-label--arretrati { color: #dc2626; }
.atm-svc2-ss-group-label--arretrati::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
}
.atm-svc2-ss-group--arretrati {
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  padding: 2px 14px 6px;
  margin: 0;
}
.atm-svc2-ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .8rem;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
}
.atm-svc2-ss-group .atm-svc2-ss-row:not(:last-child) {
  border-bottom-color: var(--atm-border-light, #e5e7eb);
}
.atm-svc2-ss-row--arretrato {
  opacity: .85;
}
.atm-svc2-ss-row--arretrato .atm-svc2-ss-name {
  color: #7f1d1d;
}
.atm-svc2-ss-name {
  color: var(--atm-text, #111827);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atm-svc2-ss-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: .03em;
}
.atm-svc2-ss-badge--code { color: #6b7280; background: #f1f5f9; }
.atm-svc2-ss-badge--quando { color: #6b7280; background: #f8fafc; border: 1px solid #e2e8f0; }
.atm-svc2-ss-badge--nc {
  color: #fff;
  background: #6366f1;
  font-size: .58rem;
  padding: 1px 5px;
}
.atm-svc2-ss-amount {
  font-size: .78rem;
  font-weight: 600;
  color: var(--atm-text, #111827);
  white-space: nowrap;
}
.atm-svc2-ss-row--arretrato .atm-svc2-ss-amount { color: #dc2626; }
.atm-svc2-ss-scad {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  color: var(--atm-text-muted, #6b7280);
  white-space: nowrap;
}
.atm-svc2-ss-scad--urgent {
  color: #d97706;
  font-weight: 600;
}
.atm-svc2-ss-scad--expired {
  color: #dc2626;
  font-weight: 600;
}
.atm-svc2-ss-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--atm-border-light, #e5e7eb);
}
.atm-svc2-ss-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--atm-primary, #1a73e8);
  text-decoration: none;
  transition: color .15s;
}
.atm-svc2-ss-link:hover { color: var(--atm-primary-dark, #1557b0); text-decoration: underline; }
.atm-svc2-ss-count {
  font-size: .68rem;
  color: var(--atm-text-muted, #9ca3af);
}
.atm-svc2-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.atm-svc2-btn:hover { transform: translateY(-1px); }
.atm-svc2-btn:active { transform: translateY(0); }
.atm-svc2-btn--primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.atm-svc2-btn--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.atm-svc2-btn--ghost {
  background: #fff;
  color: #64748b;
  border-color: #e2e8f0;
}
.atm-svc2-btn--ghost:hover {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
}
.atm-svc2-btn--outline {
  background: transparent;
  color: #2563eb;
  border-color: #bfdbfe;
}
.atm-svc2-btn--outline:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.atm-btn--sm {
  padding: 10px 18px;
  font-size: .875rem;
}

/* ── Sezione Canoni: card ridisegnate (stile professionale) ───────────────── */
.atm-pagamenti-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--atm-border, #e5e7eb);
}
.atm-pagamenti-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap; /* non spezza il testo su mobile */
  color: var(--atm-text-2, #6b7280);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  flex-shrink: 0; /* non si restringe mai */
}
.atm-pagamenti-tab:hover {
  color: var(--atm-blue, #1a73e8);
  background: rgba(26,115,232,.06);
}
.atm-pagamenti-tab--active {
  color: var(--atm-blue, #1a73e8);
  background: rgba(26,115,232,.1);
  border-color: rgba(26,115,232,.25);
}
.atm-pagamenti-tab-count {
  font-size: .75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
}
.atm-pagamenti-tab--active .atm-pagamenti-tab-count {
  background: rgba(26,115,232,.2);
}
.atm-link-pagamenti {
  color: var(--atm-blue, #1a73e8);
  font-weight: 600;
  text-decoration: none;
}
.atm-link-pagamenti:hover {
  text-decoration: underline;
}
.atm-pagamenti-filter-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(26,115,232,.07);
  border: 1px solid rgba(26,115,232,.18);
  border-radius: 10px;
  font-size: .875rem;
  color: var(--atm-text-2);
  margin-bottom: 16px;
}
.atm-pagamenti-filter-banner svg { color: var(--atm-blue); flex-shrink: 0; }
.atm-pagamenti-filter-banner strong { color: var(--atm-text); }
.atm-pagamenti-filter-clear {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--atm-blue);
  text-decoration: none;
  white-space: nowrap;
}
.atm-pagamenti-filter-clear:hover { text-decoration: underline; }

.atm-canoni-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
/* ══════════════════════════════════════════════════════════════════════════
   PAYMENT CARDS — Material Design 3
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Card base ───────────────────────────────────────────────────────────── */
.atm-canone-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8edf2;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .22s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1), border-color .22s ease;
}
.atm-canone-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
  border-color: rgba(26,115,232,.2);
  transform: translateY(-2px);
}

/* ── Accent stripe sinistra ── */
.atm-canone-card__accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--atm-blue) 0%, var(--atm-blue-mid) 100%);
  border-radius: 16px 0 0 16px;
}
.atm-canone-card--comunicato         .atm-canone-card__accent { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.atm-canone-card--scaduto            .atm-canone-card__accent { background: linear-gradient(180deg, #ef4444, #dc2626); width: 5px; }
.atm-canone-card--attesa-determina   .atm-canone-card__accent { background: linear-gradient(180deg, #f97316, #fb923c); }
.atm-canone-card--determina-ricevuta .atm-canone-card__accent { background: linear-gradient(180deg, #0ea5e9, #38bdf8); }

/* ── Varianti stato card ── */
.atm-canone-card--scaduto {
  background: #fffbfb;
  border-color: rgba(239,68,68,.22);
  box-shadow: 0 2px 8px rgba(239,68,68,.07);
}
.atm-canone-card--comunicato {
  background: #fffdf5;
  border-color: rgba(245,158,11,.2);
}
/* Voci contrattuali — tono blu/indaco leggero */
.atm-canone-card--contrattuale {
  border-left: 3px solid rgba(99,102,241,.35);
}
/* Addebiti extra — tono viola/magenta leggero + bordo più marcato */
.atm-canone-card--extra {
  border-left: 3px solid rgba(192,38,211,.35);
}

/* ── Banner "Pagamento scaduto" ── */
.atm-canone-card__overdue-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(239,68,68,.07);
  border-bottom: 1px solid rgba(239,68,68,.13);
  color: #b91c1c;
  font-size: .74rem;
  font-weight: 600;
  padding: 7px 18px 7px 28px;
  letter-spacing: .01em;
}
.atm-canone-card__overdue-bar svg { flex-shrink: 0; color: #ef4444; }
.atm-canone-card__overdue-bar--contract {
  background: rgba(217,119,6,.07);
  border-bottom-color: rgba(217,119,6,.15);
  color: #92400e;
}
.atm-canone-card__overdue-bar--contract svg { color: #d97706; }
/* Bonifico comunicato ma scadenza già passata */
.atm-canone-card__overdue-bar--verifica {
  background: rgba(245, 158, 11, 0.09);
  border-bottom-color: rgba(245, 158, 11, 0.22);
  color: #9a3412;
  font-weight: 600;
}
.atm-canone-card__overdue-bar--verifica svg {
  color: #d97706;
}

@keyframes atm-pulse-danger {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(220,38,38,.0); }
}

/* ── Tab "Scaduti" ── */
.atm-pagamenti-tab--scaduti {
  color: #b91c1c !important;
  border-color: rgba(220,38,38,.22) !important;
}
.atm-pagamenti-tab--scaduti.atm-pagamenti-tab--active,
.atm-pagamenti-tab--scaduti:hover {
  background: rgba(220,38,38,.06) !important;
  border-color: #dc2626 !important;
}
.atm-pagamenti-tab-count--danger { background: #dc2626; color: #fff; }

/* ── Toolbar: tabs + filtro stato ── */
/* ── Toolbar pagamenti: mobile-first ── */
.atm-pagamenti-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}

/* Tab: scroll orizzontale su mobile, no wrapping */
.atm-pagamenti-toolbar .atm-pagamenti-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: 4px;
  padding-bottom: 12px;
  padding-right: 24px; /* spazio per il fade-out finale */
  border-bottom: 1px solid var(--atm-border, #e5e7eb);
  margin-bottom: 0;
  /* Fade a destra: indica che ci sono altri tab */
  mask-image: linear-gradient(to right, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%);
}
.atm-pagamenti-toolbar .atm-pagamenti-tabs::-webkit-scrollbar { display: none; }

/* Su desktop rimuovi il fade */
@media (min-width: 640px) {
  .atm-pagamenti-toolbar .atm-pagamenti-tabs {
    mask-image: none;
    -webkit-mask-image: none;
    padding-right: 0;
  }
}

/* Filtro stato: riga separata sotto i tab su mobile */
.atm-pagamenti-stato-filter {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--atm-border, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 8px;
}
.atm-pagamenti-stato-filter .atm-filter-select-wrap {
  width: 100%;
}
.atm-pagamenti-stato-filter .atm-filter-select {
  width: 100%;
  min-width: 0;
}

/* Desktop (≥ 640px): tabs + select sulla stessa riga */
@media (min-width: 640px) {
  .atm-pagamenti-toolbar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }
  .atm-pagamenti-toolbar .atm-pagamenti-tabs {
    flex: 1;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--atm-border, #e5e7eb);
  }
  .atm-pagamenti-stato-filter {
    flex-shrink: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--atm-border, #e5e7eb);
    width: auto;
  }
  .atm-pagamenti-stato-filter .atm-filter-select-wrap { width: auto; }
  .atm-pagamenti-stato-filter .atm-filter-select { min-width: 150px; width: auto; }
}
/* ── Pagamenti: barra di ricerca ── */
.atm-pagamenti-search-wrap {
  padding: 10px 0 4px;
}
.atm-pagamenti-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.atm-pagamenti-search-icon {
  position: absolute;
  left: 11px;
  color: var(--atm-text-muted, #9ca3af);
  pointer-events: none;
  flex-shrink: 0;
}
.atm-pagamenti-search {
  width: 100%;
  height: 38px;
  padding: 0 36px 0 34px;
  border: 1px solid var(--atm-border, #e5e7eb);
  border-radius: 8px;
  background: var(--atm-bg, #fff);
  color: var(--atm-text, #111827);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* rimuove la X nativa di Chrome/Edge/Safari */
  -webkit-appearance: none;
}
.atm-pagamenti-search::-webkit-search-cancel-button,
.atm-pagamenti-search::-webkit-search-decoration { display: none; }
.atm-pagamenti-search::placeholder { color: var(--atm-text-muted, #9ca3af); }
.atm-pagamenti-search:focus {
  border-color: var(--atm-primary, #4f46e5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--atm-primary, #4f46e5) 15%, transparent);
}
.atm-pagamenti-search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--atm-border, #e5e7eb);
  border-radius: 50%;
  color: var(--atm-text-muted, #6b7280);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.atm-pagamenti-search-clear:hover {
  background: var(--atm-text-muted, #9ca3af);
  color: #fff;
}
/* Messaggio nessun risultato */
.atm-pagamenti-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--atm-text-muted, #6b7280);
  font-size: 0.9rem;
  text-align: center;
}
.atm-pagamenti-no-results svg {
  opacity: 0.35;
}

/* ── Storico Pagamenti: toolbar filtri ── */
.atm-storico-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--atm-border, #e5e7eb);
}
.atm-storico-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.atm-storico-toolbar .atm-filter-select-wrap {
  min-width: 140px;
}
.atm-storico-toolbar .atm-btn {
  align-self: flex-start;
  width: auto;
  flex-shrink: 0;
}
.atm-storico-search-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
}
.atm-storico-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--g-text-2, #9ca3af);
  pointer-events: none;
}
.atm-storico-search-input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--atm-border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  color: var(--g-text, #111827);
  background: var(--atm-surface, #fff);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.atm-storico-search-input:focus {
  border-color: var(--atm-primary, #2563eb);
}
.atm-storico-search-input::placeholder {
  color: var(--g-text-2, #9ca3af);
}

/* ── Storico Pagamenti: empty state ── */
.atm-storico-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 24px 48px;
  text-align: center;
}
.atm-storico-empty-state__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--g-bg-2, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--g-text-2, #94a3b8);
}
.atm-storico-empty-state--result .atm-storico-empty-state__icon {
  background: #fef9f0;
  color: #d97706;
}
.atm-storico-empty-state__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--g-text-1, #1e293b);
  margin: 0 0 8px;
}
.atm-storico-empty-state__desc {
  font-size: .875rem;
  color: var(--g-text-2, #64748b);
  max-width: 380px;
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 540px) {
  .atm-storico-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .atm-storico-toolbar__filters {
    flex-wrap: nowrap;
  }
  .atm-storico-toolbar .atm-btn {
    align-self: center;
    flex-shrink: 0;
  }
}
/* ── Storico Pagamenti — Paginazione ─────────────────────────────────── */
#atm-storico-pager-wrap,
#atm-canoni-pager-wrap,
#atm-servizi-pager-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.atm-pager-count {
  font-size: .8rem;
  color: var(--g-text-2, #6b7280);
}

.atm-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.atm-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--g-border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--g-text, #1e293b);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}
.atm-pager-btn:hover:not(.atm-pager-btn--active):not(.atm-pager-btn--disabled) {
  background: var(--g-bg-2, #f8fafc);
  border-color: var(--g-blue, #3b82f6);
  color: var(--g-blue, #3b82f6);
}
.atm-pager-btn--active {
  background: var(--g-blue, #3b82f6);
  border-color: var(--g-blue, #3b82f6);
  color: #fff;
  cursor: default;
}
.atm-pager-btn--disabled {
  opacity: .35;
  cursor: default;
}
.atm-pager-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 34px;
  color: var(--g-text-2, #6b7280);
  font-size: .85rem;
  user-select: none;
}

/* Wrapper custom select con icona */
.atm-filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--g-bg, #fff);
  border: 1px solid var(--g-border, #e2e8f0);
  border-radius: 8px;
  padding: 0 10px;
  gap: 6px;
  height: 40px; /* touch-friendly su mobile */
  transition: border-color .15s;
}
@media (min-width: 640px) {
  .atm-filter-select-wrap { height: 34px; }
}
.atm-filter-select-wrap:focus-within {
  border-color: var(--g-accent, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.atm-filter-select-icon {
  color: var(--g-text-2, #64748b);
  flex-shrink: 0;
  pointer-events: none;
}
.atm-filter-select-arrow {
  color: var(--g-text-2, #64748b);
  flex-shrink: 0;
  pointer-events: none;
}
.atm-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--g-text-1, #1e293b);
  cursor: pointer;
  padding: 0;
  flex: 1; /* si espande nel wrap */
  min-width: 0;
  line-height: 1;
}

/* ── Body ── */
.atm-canone-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.atm-canone-card__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 16px 28px;
  min-width: 0;
}

/* ── Header: titolo + badges ── */
.atm-canone-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.atm-canone-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.atm-canone-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #0f172a !important;
  letter-spacing: -.015em;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.atm-canone-card__ref-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.atm-canone-card__ref {
  display: inline-block;
  font-size: .63rem;
  font-weight: 600;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  letter-spacing: .07em;
  color: #94a3b8;
  white-space: nowrap;
  line-height: 1.2;
}
.atm-canone-card__ref--svc {
  color: #475569;
  font-weight: 700;
  font-size: .65rem;
}
.atm-canone-card__company {
  font-size: .76rem;
  color: #64748b;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Badges wrapper ── */
.atm-canone-card__badges {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Badges ── */
.atm-canone-card__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: .67rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .025em;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Badge stato determina */
.atm-canone-card__badge--attesa-determina   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.atm-canone-card__badge--determina-ricevuta { background: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }
/* Badge tipo (tonal chips Material 3) */
.atm-canone-card__badge--canone        { background: rgba(16,185,129,.1);  color: #065f46;  border-color: rgba(16,185,129,.25); }
.atm-canone-card__badge--voce          { background: rgba(124,58,237,.09); color: #5b21b6;  border-color: rgba(124,58,237,.2); }
.atm-canone-card__badge--extra         { background: rgba(124,58,237,.09); color: #5b21b6;  border-color: rgba(124,58,237,.2); }
.atm-canone-card__badge--sottoservizio,
.atm-canone-card__badge--collegato     { background: rgba(26,115,232,.09); color: #1a56db;  border-color: rgba(26,115,232,.2); }
.atm-canone-card__badge--attivazione   { background: rgba(245,158,11,.1);  color: #92400e;  border-color: rgba(245,158,11,.25); }
.atm-canone-card__badge--rinnovo       { background: rgba(139,92,246,.1);  color: #5b21b6;  border-color: rgba(139,92,246,.22); }
.atm-canone-card__badge--contrattuale  { background: rgba(99,102,241,.09); color: #3730a3;  border-color: rgba(99,102,241,.2); }
.atm-canone-card__badge--extra-label   { background: rgba(245,158,11,.1);  color: #92400e;  border-color: rgba(245,158,11,.25); font-size:.67rem; }
.atm-canone-card__badge--anticipato    { background: rgba(249,115,22,.1);  color: #9a3412;  border-color: rgba(249,115,22,.25); font-size:.67rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL DETTAGLI UNIFICATO — design moderno
   ══════════════════════════════════════════════════════════════════════════ */
#atm-voce-dettagli-modal .atm-modal-box {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
}
#atm-voce-dettagli-modal .atm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 13px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
#atm-voce-dettagli-modal .atm-modal-header .atm-modal-title {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
}
#atm-voce-dettagli-modal .atm-modal-header .atm-modal-close {
  width: 32px;
  height: 32px;
  margin: 0;
  background: #f8fafc;
  border-radius: 8px;
  color: #94a3b8;
}
#atm-voce-dettagli-modal .atm-modal-header .atm-modal-close:hover {
  background: #f1f5f9;
  color: #475569;
}
#atm-voce-dettagli-modal .atm-modal-body {
  padding: 0;
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
}
#atm-voce-dettagli-modal .atm-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
}

/* ── Hero header ─────────────────────────────────────────────────────────── */
.atm-det-header {
  padding: 22px 22px 18px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}
.atm-det-header__type-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.atm-det-header__type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
}
.atm-det-header__type-row .atm-det-header__type { margin-bottom: 0; }
.atm-det-header__ref {
  font-size: .63rem;
  font-weight: 600;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  letter-spacing: .04em;
  padding: 3px 8px;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  white-space: nowrap;
}
.atm-det-header__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.atm-det-header__sub {
  font-size: .78rem;
  color: #94a3b8;
  margin: 0 0 18px;
  font-weight: 500;
}
.atm-det-header__amount {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.atm-det-header__amount-value {
  font-size: 2.1rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -.03em;
}
.atm-det-header__amount-label {
  font-size: .73rem;
  color: #94a3b8;
  font-weight: 500;
}

/* ── Righe dettaglio ─────────────────────────────────────────────────────── */
.atm-det-rows { padding: 4px 22px 8px; }
.atm-det-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
  font-size: .875rem;
}
.atm-det-row:last-child { border-bottom: none; }
.atm-det-row__icon { color: #cbd5e1; flex-shrink: 0; display: flex; }
.atm-det-row__label {
  color: #94a3b8;
  flex: 0 0 130px;
  font-size: .79rem;
  font-weight: 500;
}
.atm-det-row__value {
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  text-align: right;
  font-size: .88rem;
}

/* ── Nota descrizione ────────────────────────────────────────────────────── */
.atm-det-note-block {
  margin: 4px 22px 14px;
  padding: 11px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border-left: 3px solid #e2e8f0;
  display: flex;
  gap: 8px;
  font-size: .8rem;
  color: #64748b;
  line-height: 1.55;
  font-style: italic;
}
.atm-det-note-block svg { flex-shrink: 0; margin-top: 2px; color: #94a3b8; }

/* ── Blocco IVA ──────────────────────────────────────────────────────────── */
.atm-det-iva-block {
  margin: 4px 22px 18px;
  background: #f8faff;
  border: 1px solid #e0eaff;
  border-radius: 12px;
  overflow: hidden;
  font-size: .84rem;
}
.atm-det-iva-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  color: #64748b;
  border-bottom: 1px solid #eef2ff;
}
.atm-det-iva-row:last-of-type { border-bottom: none; }
.atm-det-iva-row--total {
  font-weight: 800;
  font-size: .92rem;
  color: #1e293b;
  padding: 11px 14px;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe !important;
  border-bottom: none !important;
}
.atm-det-iva-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: .74rem;
  color: #3b82f6;
  line-height: 1.45;
  padding: 8px 14px 10px;
  border-top: 1px solid #e0eaff;
  background: #f0f7ff;
}
.atm-det-iva-note svg { flex-shrink: 0; margin-top: 1px; color: #60a5fa; }

/* ── IVA PA Split Payment ────────────────────────────────────────────────── */
.atm-det-iva-block--pa-note {
  background: #fff8f2;
  border-color: #fde8cc;
}
.atm-det-iva-block--pa-note .atm-det-iva-row {
  font-weight: 600;
  color: #92400e;
  border-color: #fde8cc;
}
.atm-det-iva-block--pa-note .atm-det-iva-row--total {
  background: #fff3e0;
  color: #78350f;
  border-color: #fbbf24 !important;
}
.atm-det-iva-block--pa-note .atm-det-iva-note {
  background: #fff8f2;
  color: #c2410c;
  border-color: #fde8cc;
}
.atm-det-iva-block--pa-note .atm-det-iva-note svg { color: #f97316; }
/* ── Badge stati ── */
.atm-canone-card__badge--da-pagare  { background: rgba(26,115,232,.09); color: #1a73e8; border-color: rgba(26,115,232,.2); }
.atm-canone-card__badge--comunicato { background: rgba(245,158,11,.12); color: #92400e; border-color: rgba(245,158,11,.3); }
.atm-canone-card__badge--scaduto    { background: rgba(239,68,68,.1);   color: #b91c1c; border-color: rgba(239,68,68,.22); }
.atm-canone-card__badge--cessato   { background: rgba(100,116,139,.1);  color: #475569; border-color: rgba(100,116,139,.25); }
.atm-canone-card__badge--sospeso   { background: rgba(245,158,11,.1);   color: #92400e; border-color: rgba(245,158,11,.25); }
/* ── SS grouped card: mini-tabella proposta commerciale ── */
.atm-ss-table {
  margin: 12px 16px 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  font-size: .85rem;
}
.atm-ss-table__row {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  gap: 12px;
}
.atm-ss-table__row--item {
  background: #fff;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.atm-ss-table__row--item:last-of-type { border-bottom: none; }
.atm-ss-table__row--sub {
  background: #f9fafb;
  color: #6b7280;
  font-size: .82rem;
}
.atm-ss-table__row--total {
  background: #f0f9ff;
  font-weight: 700;
  color: #0f172a;
  font-size: .93rem;
}
.atm-ss-table__label { flex: 1; display: flex; align-items: center; gap: 6px; }
.atm-ss-table__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.atm-ss-table__row--item .atm-ss-table__value { font-weight: 600; color: #1e293b; }
.atm-ss-table__row--total .atm-ss-table__value { color: #1d4ed8; }
.atm-ss-table__code {
  font-style: normal;
  font-size: .73rem;
  color: #9ca3af;
  font-family: monospace;
  font-weight: 400;
}
.atm-ss-table__sep {
  height: 1px;
  background: #e5e7eb;
  margin: 0;
}
.atm-ss-table__sep--strong {
  height: 2px;
  background: #d1d5db;
}

/* ── Meta row: data sinistra, importo destra ── */
.atm-canone-card__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.atm-canone-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.atm-canone-card__meta-item--importo {
  align-items: flex-end;
  text-align: right;
}
.atm-canone-card__meta-label {
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  line-height: 1.2;
}
.atm-canone-card__meta-value {
  font-size: .88rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}
.atm-canone-card__meta-value em {
  font-style: normal;
  font-weight: 500;
  color: #64748b;
  font-size: .9em;
}
.atm-canone-card__importo {
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* ── Campo input in errore ──────────────────────────────────── */
.atm-input-error,
.atm-input-error:focus,
.atm-input-invalid,
.atm-input-invalid:focus {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 3px rgba(217,48,37,.15) !important;
  animation: atm-shake .25s ease;
}
@keyframes atm-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── IVA detail nella card ── */
.atm-iva-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 4px;
  font-size: .7rem;
  color: #94a3b8;
  line-height: 1.4;
  text-align: right;
}
/* Breakdown sopra il totale (aziende): niente margin-top, il gap del parent basta */
.atm-iva-detail--above {
  margin-top: 0;
  margin-bottom: 2px;
}
.atm-iva-detail span { white-space: nowrap; }
.atm-iva-detail__pa    {
  color: #b45309;
  font-weight: 500;
  white-space: normal !important;
  max-width: 220px;
  text-align: right;
  line-height: 1.35;
}
.atm-iva-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: .05em;
}
.atm-iva-badge--split {
  background: rgba(245,158,11,.12);
  color: #92400e;
  border: 1px solid rgba(245,158,11,.28);
}

/* ── Feedback stati ── */
.atm-canone-card__feedback {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 16px 14px 28px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.5;
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  color: #92400e;
}
.atm-canone-card__feedback-icon { flex-shrink: 0; margin-top: 1px; color: #d97706; }

.atm-canone-card__feedback--ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.atm-canone-card__feedback--ok .atm-canone-card__feedback-icon { color: #16a34a; }

.atm-canone-card__feedback--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.atm-canone-card__feedback--warn .atm-canone-card__feedback-icon { color: #d97706; }

.atm-canone-card__feedback--determina {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.atm-canone-card__feedback--determina .atm-canone-card__feedback-icon { color: #3b82f6; }

/* ── Footer ── */
.atm-canone-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px 12px 16px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  border-radius: 0 0 16px 16px;
  flex-wrap: wrap;
}
.atm-canone-card__footer-utility {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.atm-canone-card__footer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Bottoni ── */
.atm-canone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
}
.atm-canone-btn svg { flex-shrink: 0; }
.atm-canone-btn:active { transform: scale(.97); }

/* Filled primary */
.atm-canone-btn--primary {
  background: var(--atm-blue);
  color: #fff;
  box-shadow: 0 2px 5px rgba(26,115,232,.28);
}
.atm-canone-btn--primary:hover {
  background: var(--atm-blue-hover);
  box-shadow: 0 4px 12px rgba(26,115,232,.38);
  transform: translateY(-1px);
}

/* Outlined ghost (utility buttons) */
.atm-canone-btn--ghost {
  background: transparent;
  color: #475569;
  border-color: #e2e8f0;
  padding: 7px 13px;
  font-size: .78rem;
}
.atm-canone-btn--ghost:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

.atm-canone-btn--secondary {
  background: #fff;
  color: var(--atm-text);
  border-color: var(--atm-border);
}
.atm-canone-btn--secondary:hover {
  background: var(--atm-bg);
  border-color: #94a3b8;
}

/* Tonal determina (orange) */
/* Determina — non ancora inserita (grigio/neutro) */
.atm-canone-btn--det-todo {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}
.atm-canone-btn--det-todo:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

/* Determina — già inserita (verde teal) */
.atm-canone-btn--det-ok {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.atm-canone-btn--det-ok:hover {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

/* Pulsante disabilitato (attesa determina o approvazione) */
.atm-canone-btn--disabled,
.atm-canone-btn--disabled:hover {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
  opacity: .75;
  pointer-events: none;
}

/* Retro-compat: .atm-canone-btn--determina punta a det-todo */
.atm-canone-btn--determina {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}
.atm-canone-btn--determina:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

/* Danger (scaduto) */
.atm-canone-btn--danger {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(239,68,68,.3);
  animation: atm-pulse-danger 2.5s infinite;
}
.atm-canone-btn--danger:hover,
.atm-canone-btn--danger:focus {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(239,68,68,.4);
  animation: none;
}

/* Ticket button */
.atm-canone-btn--ticket {
  color: #475569 !important;
  border-color: #e2e8f0 !important;
  background: transparent !important;
  font-size: .78rem !important;
  padding: 7px 13px !important;
  gap: 5px !important;
  text-decoration: none;
}
.atm-canone-btn--ticket:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

/* Utility buttons nel footer */
.atm-canone-card__footer-utility .atm-btn-card-dettagli,
.atm-canone-card__footer-utility .atm-canone-btn--ticket {
  font-size: .78rem;
  padding: 7px 13px;
}
.atm-canone-card__footer-utility .atm-btn-card-dettagli svg { color: #94a3b8; }

/* Legacy selectors (mantenuti per compatibilità JS) */
.atm-canone-card__actions  { display: flex; flex-direction: column; align-items: flex-end; }
.atm-canone-card__btns     { display: flex; gap: 8px; align-items: center; }

/* ── Responsive mobile ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .atm-canoni-grid { gap: 10px; }
  .atm-canone-card { border-radius: 14px; }

  .atm-canone-card__info { padding: 15px 14px 13px 22px; gap: 12px; }

  .atm-canone-card__title { font-size: .95rem !important; }

  .atm-canone-card__meta { flex-direction: column; gap: 10px; align-items: flex-start; }
  .atm-canone-card__meta-item--importo { align-items: flex-start; text-align: left; }
  .atm-canone-card__meta-item--importo .atm-iva-detail,
  .atm-canone-card__meta-item--importo .atm-iva-detail--above { align-items: flex-start; text-align: left; }
  .atm-iva-detail__pa { text-align: left; max-width: 100%; }
  .atm-canone-card__importo { font-size: 1.2rem !important; }

  .atm-canone-card__feedback { margin: 0 12px 12px 22px; }

  .atm-canone-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px 13px;
  }
  .atm-canone-card__footer-utility {
    order: 2;
    width: 100%;
    gap: 6px;
  }
  .atm-canone-card__footer-utility > * {
    flex: 1;
    justify-content: center;
    padding: 8px 10px !important;
    font-size: .78rem !important;
  }
  .atm-canone-card__footer-utility .atm-canone-btn svg { display: none; }

  .atm-canone-card__footer-actions {
    order: 1;
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .atm-canone-card__footer-actions > .atm-canone-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: .85rem;
    min-height: 44px;
    text-align: center;
  }

  /* legacy */
  .atm-canone-card__btns .atm-canone-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* ── Servizi: mobile ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .atm-services-grid {
    gap: 12px;
  }
  .atm-service-card-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .atm-service-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
  }
  .atm-service-card-title {
    font-size: 1.05rem;
  }
  .atm-service-card-meta {
    gap: 8px;
    margin-bottom: 12px;
  }
  .atm-service-card-meta .atm-badge {
    font-size: .7rem;
    padding: 3px 8px;
  }
  .atm-service-card-details {
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }
  .atm-service-card-detail dt {
    font-size: .65rem;
  }
  .atm-service-card-detail dd {
    font-size: .85rem;
  }
  .atm-service-card-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--atm-border);
  }
  .atm-service-card-actions .atm-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .atm-service-card-cta {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: 12px 16px;
  }
  .atm-stats-row--servizi {
    margin-bottom: 16px;
  }
  .atm-stats-row--servizi .atm-stat-card {
    padding: 10px 12px;
  }
  .atm-servizi-filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .atm-servizi-stato-filter {
    justify-content: flex-start;
  }
  .atm-servizi-sort-wrap {
    width: 100%;
  }
  .atm-servizi-sort-select {
    flex: 1;
    min-width: 0;
  }
  .atm-servizio-modal-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .atm-stats-row--servizi .atm-stat-value {
    font-size: 1.25rem;
  }
  .atm-stats-row--servizi .atm-stat-label {
    font-size: .7rem;
  }

  /* ── atm-svc2-card: mobile-first ────────────────────────────────── */
  .atm-svc2-card {
    padding: 14px 14px;
    overflow: hidden; /* evita che il contenuto esca dal card */
  }

  /* Titolo: permetti wrapping su mobile */
  .atm-svc2-title {
    white-space: normal;
    font-size: 1rem;
  }

  /* Meta (tipo · codice · azienda): wrap + troncamento company */
  .atm-svc2-meta {
    flex-wrap: wrap;
    gap: 3px 5px;
  }
  .atm-svc2-company {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Info pillole: più compatte */
  .atm-svc2-info-pill {
    font-size: .78rem;
    padding: 3px 8px;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  .atm-svc2-giorni {
    white-space: nowrap;
  }

  /* Alert chips: wrap corretto */
  .atm-svc2-alerts {
    flex-wrap: wrap;
    gap: 6px;
  }
  .atm-svc2-alert {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1;
  }

  /* Azioni: un pulsante per riga, a tutta larghezza */
  .atm-svc2-actions {
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
  }
  .atm-svc2-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: .85rem;
    white-space: normal;
    text-align: center;
  }
}

/* ── Logout button ───────────────────────────────────────────────────────── */
.atm-btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid var(--atm-border);
  border-radius: 8px;
  color: var(--atm-text-2);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: all .15s;
  background: none;
  cursor: pointer;
}
.atm-btn-logout:hover { border-color: var(--atm-red); color: var(--atm-red); background: var(--atm-red-lt); }

/* ── Meta table profilo ──────────────────────────────────────────────────── */
.atm-meta-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.atm-meta-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.atm-meta-table th,
.atm-meta-table td { padding: 10px 12px; border-bottom: 1px solid var(--atm-border); text-align: left; word-break: break-word; overflow-wrap: break-word; }
.atm-meta-table th { width: 35%; color: var(--atm-text-2); font-weight: 500; background: var(--atm-bg); }
.atm-meta-table tr:last-child th,
.atm-meta-table tr:last-child td { border-bottom: 0; }

/* ── Profile company ─────────────────────────────────────────────────────── */
.atm-profile-info { flex: 1; }
.atm-profile-company {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}

/* ── Unread badge dashboard ──────────────────────────────────────────────── */

/* ── Pending banner flex ─────────────────────────────────────────────────── */
.atm-pending-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.atm-pending-banner svg { flex-shrink: 0; margin-top: 2px; }

/* ── Form messages alias ─────────────────────────────────────────────────── */
.atm-form-messages:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════
   TICKET CARD LIST — stile PVIP
   ═══════════════════════════════════════════════════════════════ */

.atm-requests-list {
    display: block;
    padding: 4px 2px;
}

.atm-req-card {
    background: var(--atm-white);
    border-radius: 12px;
    border: 1px solid var(--atm-border);
    border-left: 4px solid transparent;
    box-shadow: 0 2px 8px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.08);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .25s ease, transform .2s ease, border-left-width .2s;
    margin-bottom: 16px;
}
.atm-req-card:hover {
    box-shadow: 0 6px 20px rgba(60,64,67,.14), 0 2px 8px rgba(60,64,67,.1);
    transform: translateY(-2px);
    border-left-width: 5px;
}

/* Bordo sinistro colorato per stato */
.atm-req-card[data-status="aperto"],
.atm-req-card[data-status="open"]            { border-left-color: #1a73e8; }
.atm-req-card[data-status="in_lavorazione"],
.atm-req-card[data-status="in_progress"]     { border-left-color: #e37400; }
.atm-req-card[data-status="in_attesa_cliente"],
.atm-req-card[data-status="pending_client"]  { border-left-color: #f29900; }
.atm-req-card[data-status="risolto"],
.atm-req-card[data-status="resolved"]        { border-left-color: #137333; }
.atm-req-card[data-status="chiuso"],
.atm-req-card[data-status="closed"]          { border-left-color: #9aa0a6; }

.atm-req-header {
    padding: 16px 20px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.atm-req-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--atm-text);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.01em;
}
.atm-req-meta {
    font-size: .8rem;
    color: var(--atm-text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.atm-req-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.atm-req-meta-op,
.atm-req-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--atm-text-2);
    background: rgba(107,114,128,.08);
    padding: 3px 10px;
    border-radius: 20px;
}
.atm-req-op-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--atm-blue);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.atm-req-op-avatar.atm-avatar-icon svg { stroke: currentColor; }
.atm-sla-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--atm-blue);
    background: var(--atm-blue-lt);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--atm-blue-mid);
}
.atm-sla-badge svg { flex-shrink: 0; opacity: .9; }
.atm-req-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.atm-req-card--detail .atm-req-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.atm-req-codice {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--atm-blue);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 2px 7px;
}
.atm-req-footer {
    background: var(--atm-bg);
    padding: 10px 20px;
    font-size: .8rem;
    color: var(--atm-text-2);
    border-top: 1px solid var(--atm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* ── CSAT form (valutazione ticket chiuso) ──────────────────────────────────── */
.atm-csat-form-wrap {
    margin-top: 16px;
    padding: 20px;
    background: var(--atm-bg);
    border-radius: var(--atm-r);
    border: 1px solid var(--atm-border);
}
.atm-csat-form-title {
    margin: 0 0 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--atm-text);
}
.atm-csat-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.atm-csat-stars {
    display: flex;
    gap: 4px;
    align-items: center;
}
.atm-csat-star {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--atm-text-3);
    transition: color .15s, transform .1s;
}
.atm-csat-star:hover,
.atm-csat-star:focus {
    color: #f59e0b;
    transform: scale(1.1);
    outline: none;
}
.atm-csat-star .atm-csat-star-full { display: none; }
.atm-csat-star .atm-csat-star-empty { display: block; }
.atm-csat-star.atm-csat-star--filled .atm-csat-star-full,
.atm-csat-star .atm-csat-star-full[style*="display:block"] { display: block !important; }
.atm-csat-star.atm-csat-star--filled .atm-csat-star-empty,
.atm-csat-star .atm-csat-star-full[style*="display:block"] ~ .atm-csat-star-empty { display: none !important; }
.atm-csat-star:hover .atm-csat-star-empty,
.atm-csat-star:focus .atm-csat-star-empty { color: #f59e0b; }
.atm-csat-thanks {
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--atm-green-lt);
    border-radius: var(--atm-r);
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.atm-csat-thanks-stars { font-size: 1.2rem; color: #15803d; letter-spacing: 2px; }
.atm-csat-thanks-label { font-size: .9rem; font-weight: 600; color: var(--atm-green); }

.atm-req-apri {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    color: var(--atm-blue);
    font-size: .82rem;
}
.atm-req-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    flex-shrink: 0;
    animation: atm-pulse 1.8s ease-in-out infinite;
}

/* Card con messaggi non letti: bordo sinistro evidenziato */
.atm-req-card--unread {
    border-left-color: #e74c3c !important;
    background: #fffcfc;
}

/* Badge "N nuovi" nella riga titolo */
.atm-req-unread-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: #e74c3c;
    color: #fff;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
}

@keyframes atm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .6; transform: scale(1.3); }
}

/* ── Toast notifications ── */
#atm-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}

.atm-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #1a1f2e;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    font-size: .875rem;
    font-weight: 500;
    min-width: min(260px, calc(100vw - 48px));
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: all;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
}

.atm-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.atm-toast--info .atm-toast-icon { color: #4db8ff; }
.atm-toast--success .atm-toast-icon { color: #67e480; }
.atm-toast--warning .atm-toast-icon { color: #ffcc00; }
.atm-toast--error .atm-toast-icon { color: #ff6b6b; }

.atm-toast-msg { flex: 1; }

.atm-toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
}
.atm-toast-close:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   THREAD CHAT — stile PVIP (bolle citizen / operator)
   ═══════════════════════════════════════════════════════════════ */

.atm-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--atm-bg);
    border-top: 1px solid var(--atm-border);
    border-bottom: 1px solid var(--atm-border);
}
.atm-thread-empty {
    text-align: center;
    color: var(--atm-text-2);
    font-size: .85rem;
    padding: 20px 0;
}
.atm-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    gap: 8px;
}
.atm-msg--citizen  { align-self: flex-end;  align-items: flex-end;   }
.atm-msg--operator { align-self: flex-start; align-items: flex-start; }

.atm-msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.atm-msg--citizen .atm-msg-head  { flex-direction: row-reverse; }
.atm-msg--operator .atm-msg-head { flex-direction: row; }

.atm-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.atm-msg-avatar.atm-avatar-icon svg { stroke: currentColor; }
.atm-msg-avatar--citizen {
    background: var(--atm-blue);
    color: #fff;
}
.atm-msg-avatar--operator {
    background: var(--atm-bg);
    color: var(--atm-text-2);
    border: 1px solid var(--atm-border);
}
.atm-msg-head-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.atm-msg-bubble {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.55;
    word-break: break-word;
}
.atm-msg--citizen .atm-msg-bubble {
    background: var(--atm-blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.atm-msg--operator .atm-msg-bubble {
    background: var(--atm-white);
    color: var(--atm-text);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--atm-border);
    box-shadow: 0 1px 3px rgba(60,64,67,.08);
}
.atm-msg-time {
    font-size: .7rem;
    color: var(--atm-text-2);
    margin-top: 4px;
}
.atm-msg-time--head {
    font-size: .75rem;
    color: var(--atm-text-3);
    font-weight: 500;
}
.atm-msg-role {
    font-size: .8rem;
    font-weight: 700;
    color: var(--atm-text);
}
.atm-msg-attachments {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Bolla descrizione iniziale: stile più tenue rispetto ai follow-up */
.atm-msg--description .atm-msg-bubble {
    background: #e8f0fe;
    color: var(--atm-text);
    border: 1.5px dashed #a8c4f5;
    border-bottom-right-radius: 14px;
}
.atm-msg--description .atm-msg-role {
    font-size: .72rem;
    font-weight: 600;
    font-style: italic;
    color: #5f85c4;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════
   REPLY FORM — stile PVIP
   ═══════════════════════════════════════════════════════════════ */

.atm-reply-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.atm-reply-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1.5px solid var(--atm-border);
    border-radius: 10px;
    font-size: .9rem;
    font-family: var(--atm-font);
    resize: none;
    min-height: 72px;
    max-height: 160px;
    transition: border-color .15s, box-shadow .15s;
    background: var(--atm-white);
    color: var(--atm-text);
}
.atm-reply-form textarea:focus {
    outline: none;
    border-color: var(--atm-blue);
    box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.atm-reply-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.atm-action-close-ticket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: .82rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--atm-font);
    transition: background .15s, border-color .15s;
}
.atm-action-close-ticket:hover {
    background: #fef2f2;
    border-color: #dc2626;
}
.atm-reply-send { flex: 1; justify-content: center; }

/* ── Banner "Nuovo messaggio" (polling) ──────────────────────────────── */
.atm-new-msg-banner {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    z-index:       9999;
    background:    #1a73e8;
    color:         #fff;
    padding:       12px 20px;
    border-radius: 10px;
    font-size:     .875rem;
    font-weight:   500;
    box-shadow:    0 4px 16px rgba(26,115,232,.35);
    cursor:        pointer;
    animation:     atm-slide-in .25s ease;
}
@keyframes atm-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.atm-closed-note {
    text-align: center;
    color: var(--atm-text-2);
    font-size: .85rem;
    margin: 0;
    padding: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* .atm-thread, .atm-reply-actions e .atm-reply-send erano qui duplicati
   rispetto al blocco 640px a riga ~1750; mantengo solo le regole uniche */
@media (max-width: 640px) {
    .atm-req-header { flex-direction: column; gap: 10px; }
    .atm-req-right  { flex-direction: row; align-self: flex-start; }
    .atm-req-header,
    .atm-req-footer { padding-left: 14px; padding-right: 14px; }
    .atm-req-card { margin-bottom: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   DROPZONE ALLEGATI (frontend)
   ═══════════════════════════════════════════════════════════════ */

.atm-dropzone {
    border: 2px dashed var(--atm-border);
    border-radius: 10px;
    background: #f8faff;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    overflow: hidden;
}
.atm-dropzone:hover,
.atm-dropzone.atm-dz-over {
    border-color: var(--atm-blue);
    background: #eef4ff;
}
.atm-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
    text-align: center;
    color: var(--atm-text-2);
    font-size: .82rem;
    user-select: none;
}
.atm-dropzone-inner svg {
    color: #7aa5e2;
    flex-shrink: 0;
}
.atm-dropzone-inner small {
    font-size: .73rem;
    color: var(--atm-text-2);
    opacity: .75;
}
.atm-dropzone-inner u {
    color: var(--atm-blue);
    text-decoration-color: var(--atm-blue);
    cursor: pointer;
}
/* Lista anteprima file */
.atm-file-preview {
    list-style: none;
    margin: 0;
    padding: 6px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atm-file-item {
    display:       flex;
    align-items:   center;
    gap:           7px;
    background:    #fff;
    border:        1px solid var(--atm-border);
    border-radius: 7px;
    padding:       5px 10px;
    font-size:     .8rem;
    color:         var(--atm-text);
}
/* Item con anteprima immagine */
.atm-file-item--img {
    padding: 4px 10px 4px 4px;
}
/* Thumbnail reale per le immagini */
.atm-file-thumb {
    width:         44px;
    height:        44px;
    object-fit:    cover;
    border-radius: 5px;
    flex-shrink:   0;
    border:        1px solid var(--atm-border);
    display:       block;
}
.atm-file-icon { flex-shrink: 0; color: var(--atm-blue); }
.atm-file-name {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.atm-file-size { color: var(--atm-text-2); font-size: .72rem; white-space: nowrap; }
.atm-file-remove {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #d93025;
    font-size:   1rem;
    line-height: 1;
    padding:     0 2px;
    opacity:     .7;
    transition:  opacity .15s;
}
.atm-file-remove:hover { opacity: 1; }

/* ── Selezione categoria a due livelli ───────────────────────────────────── */

/* Quando il subcategory group è visibile, la riga si adatta a 3 colonne */
#atm-subcategory-group {
    animation: atm-fade-in .2s ease;
}
@keyframes atm-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Su mobile il select subcategory occupa tutta la larghezza */
@media (max-width: 640px) {
    #atm-subcategory-group {
        grid-column: 1 / -1;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASSWORD — cambio password + recupero
   ══════════════════════════════════════════════════════════════════════════ */

/* Label row con link "Password dimenticata?" — solo nel body auth per non
   rompere display:block delle label negli altri form (registrazione, profilo, ecc.) */
.atm-auth-body .atm-form-group label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.atm-forgot-link {
  font-size: .78rem;
  font-weight: 400;
  color: var(--atm-blue);
  text-decoration: none;
}
.atm-forgot-link:hover { text-decoration: underline; }

/* ── Ricordami checkbox ──────────────────────────────────────────────────── */
.atm-remember-row {
  margin: 4px 0 14px;
}
.atm-remember-label {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   .875rem;
  color:       var(--atm-text-2);
  user-select: none;
}
/* Nasconde il checkbox nativo */
.atm-remember-label input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}
/* Box custom */
.atm-remember-box {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         18px;
  height:        18px;
  flex-shrink:   0;
  border:        2px solid #cbd5e1;
  border-radius: 5px;
  background:    #fff;
  transition:    border-color .15s, background .15s;
}
/* Stato checked */
.atm-remember-label input:checked + .atm-remember-box {
  background:    var(--atm-blue);
  border-color:  var(--atm-blue);
}
/* Checkmark SVG via clip-path / box-shadow (puro CSS) */
.atm-remember-label input:checked + .atm-remember-box::after {
  content: '';
  display:       block;
  width:         5px;
  height:        9px;
  border:        2px solid #fff;
  border-top:    none;
  border-left:   none;
  transform:     rotate(45deg) translateY(-1px);
}
/* Focus ring per accessibilità */
.atm-remember-label input:focus-visible + .atm-remember-box {
  outline:        2px solid var(--atm-blue);
  outline-offset: 2px;
}

/* ── Password strength bar ─────────────────────────────────────────────── */
.atm-pw-strength { margin-top: 6px; }
.atm-pw-strength-bar {
  height: 4px;
  background: var(--atm-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.atm-pw-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s, background-color .3s;
  background: var(--atm-red);
}
.atm-pw-strength-fill.atm-pw--fair   { background: var(--atm-warn); }
.atm-pw-strength-fill.atm-pw--good   { background: #34a853; }
.atm-pw-strength-fill.atm-pw--strong { background: var(--atm-green); }
.atm-pw-strength-label {
  font-size: .72rem;
  color: var(--atm-red);
}
.atm-pw-strength-label.atm-pw--fair   { color: var(--atm-warn); }
.atm-pw-strength-label.atm-pw--good   { color: #34a853; }
.atm-pw-strength-label.atm-pw--strong { color: var(--atm-green); }

/* ── Toggle preferenze notifiche (Fase 5.3) ───────────────────────────────── */
.atm-toggle-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.atm-toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.atm-toggle-switch {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--atm-border);
  position: relative;
  transition: background .2s;
}
.atm-toggle-switch::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.atm-toggle-row input:checked + .atm-toggle-switch {
  background: var(--atm-blue);
}
.atm-toggle-row input:checked + .atm-toggle-switch::after {
  transform: translateX(20px);
}
.atm-toggle-row input:focus-visible + .atm-toggle-switch {
  outline: 2px solid var(--atm-blue);
  outline-offset: 2px;
}

/* ── Sezione cambio password nel profilo ───────────────────────────────── */
.atm-profile-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--atm-text);
  margin: 0 0 20px;
}
.atm-change-pw-section { max-width: 420px; }

/* ══════════════════════════════════════════════════════════════════════════
   RECUPERA PASSWORD — pagina /recupera-password
   ══════════════════════════════════════════════════════════════════════════ */

.atm-recover-card { max-width: 480px; }

/* Icona header */
.atm-recover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--atm-warn-lt);
  color: var(--atm-warn);
  margin-bottom: 12px;
}

/* ── Step indicator ────────────────────────────────────────────────────── */
.atm-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 24px 0 28px;
  padding: 0 16px;
}
.atm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.atm-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--atm-border);
  background: var(--atm-white);
  color: var(--atm-text-3);
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}
.atm-step-label {
  font-size: .72rem;
  color: var(--atm-text-3);
  white-space: nowrap;
  transition: color .25s;
}
.atm-step--active .atm-step-circle {
  border-color: var(--atm-blue);
  background: var(--atm-blue);
  color: #fff;
}
.atm-step--active .atm-step-label { color: var(--atm-blue); font-weight: 600; }
.atm-step--done .atm-step-circle {
  border-color: var(--atm-green);
  background: var(--atm-green-lt);
  color: var(--atm-green);
}
.atm-step--done .atm-step-label { color: var(--atm-green); }
/* Checkmark for done steps */
.atm-step--done .atm-step-circle::after {
  content: '✓';
  font-weight: 700;
}
.atm-step--done .atm-step-circle { font-size: 0; }
.atm-step--done .atm-step-circle::after { font-size: .85rem; }

.atm-step-line {
  flex: 1;
  height: 2px;
  background: var(--atm-border);
  margin: 0 8px;
  margin-bottom: 22px; /* align with circle center */
}

/* ── OTP info banner ───────────────────────────────────────────────────── */
.atm-otp-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--atm-blue-lt);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--atm-text);
  margin-bottom: 20px;
  line-height: 1.4;
}
.atm-otp-info--success {
  background: var(--atm-green-lt);
  color: var(--atm-green);
}

/* ── Countdown & resend ────────────────────────────────────────────────── */
.atm-otp-countdown-wrap {
  font-size: .8rem;
  color: var(--atm-text-2);
  margin: 12px 0 4px;
  text-align: center;
}
.atm-otp-countdown { font-weight: 700; color: var(--atm-blue); font-variant-numeric: tabular-nums; }
.atm-otp-resend-wrap { font-size: .82rem; color: var(--atm-text-2); }
.atm-link-btn {
  background: none;
  border: none;
  color: var(--atm-blue);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}
.atm-link-btn:disabled {
  color: var(--atm-text-3);
  text-decoration: none;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   UPLOAD OVERLAY — modal di caricamento allegati
   ══════════════════════════════════════════════════════════════════════════ */

#atm-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 22, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#atm-upload-overlay.atm-upload-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.atm-upload-overlay-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  min-width: 230px;
  max-width: 90vw;
  text-align: center;
}

.atm-upload-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid #e8eaf2;
  border-top-color: var(--atm-blue, #6c6cff);
  border-radius: 50%;
  animation: atm-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes atm-spin {
  to { transform: rotate(360deg); }
}

.atm-upload-overlay-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #3a3a5c;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   PASSWORD SUGGEST — pulsante + box password in chiaro
   ═══════════════════════════════════════════════════════════════════ */

/* Riga label + bottone suggerisci */
.atm-pw-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.atm-pw-label-row label {
    margin-bottom: 0;
}

/* Bottone "Suggerisci password" */
.atm-pw-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--atm-primary, #1a73e8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s;
    flex-shrink: 0;
}
.atm-pw-suggest-btn:hover { opacity: 1; text-decoration: underline; }
.atm-pw-suggest-btn svg { color: var(--atm-primary, #1a73e8); }

/* Box con la password suggerita visibile */
.atm-pw-suggest-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: #f0f7ff;
    border: 1px dashed #93c5fd;
    border-radius: 6px;
    padding: 8px 12px;
}
.atm-pw-suggest-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: .88rem;
    font-weight: 600;
    color: #1e40af;
    letter-spacing: .04em;
    flex: 1;
    word-break: break-all;
}
.atm-pw-suggest-copy {
    flex-shrink: 0;
    background: none;
    border: 1px solid #93c5fd;
    border-radius: 5px;
    padding: 4px 7px;
    cursor: pointer;
    color: #3b82f6;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
}
.atm-pw-suggest-copy:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.atm-pw-suggest-copy.copied { background: #16a34a; color: #fff; border-color: #16a34a; }

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE FIX — tutto il frontend
   ═══════════════════════════════════════════════════════════════════ */

/* ── Notice/banner inline: sempre responsivi ────────────────────── */
.atm-notice { flex-wrap: wrap !important; box-sizing: border-box; max-width: 100%; }
.atm-notice > * { min-width: 0; }

/* ── Regole di sicurezza globali (no media query) ────────────────── */
/* Previene overflow di qualsiasi elemento */
.atm-auth-wrap,
.atm-dashboard,
.atm-profile-wrap,
.atm-ticket-wrap,
.atm-section-panel { box-sizing: border-box; max-width: 100%; overflow-x: hidden; }

/* Tutte le immagini del frontend */
.atm-auth-wrap img,
.atm-dashboard img,
.atm-ticket-wrap img { max-width: 100%; height: auto; }

/* Input/select/textarea mai più larghi del contenitore */
.atm-auth-wrap input,
.atm-auth-wrap select,
.atm-auth-wrap textarea,
.atm-dashboard input,
.atm-dashboard select,
.atm-dashboard textarea { max-width: 100%; box-sizing: border-box; }

/* ── 480px — Fix toast/banner vs bottom nav fissa ───────────────── */
@media (max-width: 480px) {

    /* Toast: deve stare sopra la bottom nav (altezza ~60px + 8px gap) */
    #atm-toast-container {
        bottom: 76px;  /* bottom nav ~60px + margine */
        left: 12px;
        right: 12px;
        max-width: none;
    }

    /* Banner nuovo messaggio: sale sopra la bottom nav */
    .atm-new-msg-banner {
        bottom: 76px;
        right: 12px;
        max-width: calc(100vw - 24px);
    }

    /* Section panel: padding ridotto */
    .atm-section-panel { padding: 14px 12px; margin-bottom: 14px; }

    /* Auth body: padding ridotto */
    .atm-auth-body { padding: 20px 18px !important; }
    .atm-auth-header { padding: 18px 18px 14px !important; }

    /* Profile: padding ridotto */
    .atm-profile-body { padding: 16px 16px 20px !important; }
}

/* ── 480px — OTP: riduzione per schermi medi ────────────────────── */
@media (max-width: 480px) {
    /* 6 digit × 44px + 5 gap × 8px = 264+40 = 304px → ok su 380px+ */
    .atm-otp-digits          { gap: 8px !important; }
    .atm-otp-digits .atm-otp-digit {
        width:     44px !important;
        height:    52px !important;
        font-size: 1.4rem !important;
    }
}

/* ── 380px — OTP su schermi very small (iPhone SE, ecc.) ─────────── */
@media (max-width: 380px) {

    /* OTP prima definizione */
    .atm-otp-digit { width: 38px !important; height: 48px !important; font-size: 1.4rem !important; }
    .atm-otp-inputs { gap: 6px; }

    /* OTP seconda definizione (pagina verifica)
       6 × 38px + 5 × 6px = 228+30 = 258px → ok anche su 320px (-36px padding = 284px) */
    .atm-otp-digits          { gap: 6px !important; }
    .atm-otp-digits .atm-otp-digit {
        width:     38px !important;
        height:    46px !important;
        font-size: 1.25rem !important;
    }

    /* Auth form: padding minimo */
    .atm-auth-body { padding: 16px 14px !important; }

    /* Tipo ente: 1 colonna su schermi strettissimi */
    .atm-tipo-ente-group { grid-template-columns: 1fr !important; }

    /* Step stepper: font ridotto */
    .atm-step-label { font-size: .65rem !important; white-space: normal !important; text-align: center; }
}

/* ── 640px — Fix tipo-ente-group e meta-table ────────────────────── */
@media (max-width: 640px) {

    /* tipo ente registrazione: già 2 col, ma gestisce padding */
    .atm-tipo-ente-btn { padding: 14px 10px 12px; gap: 6px; }

    /* Meta table profilo: scrollabile */
    .atm-meta-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .atm-meta-table th { width: auto; }

    /* Attachment thumb: ridimensiona */
    .atm-att-img { width: 100%; max-width: 200px; }
    .atm-att-img-thumb { width: 100%; max-width: 198px; height: 90px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 5 — Accessibilità (5.1) e Dark Mode (5.4)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Accessibilità WCAG: focus visibile, contrasto ───────────────────────── */
.atm-wrap.atm-a11y button:focus-visible,
.atm-wrap.atm-a11y a:focus-visible,
.atm-wrap.atm-a11y input:focus-visible,
.atm-wrap.atm-a11y select:focus-visible,
.atm-wrap.atm-a11y textarea:focus-visible,
.atm-wrap.atm-a11y [tabindex="0"]:focus-visible {
  outline: 2px solid var(--atm-blue);
  outline-offset: 2px;
}
.atm-wrap.atm-a11y .atm-btn:focus-visible,
.atm-wrap.atm-a11y .atm-nav-item:focus-visible {
  outline: 2px solid var(--atm-blue);
  outline-offset: 2px;
}
.atm-wrap.atm-a11y .atm-crte-editor:focus {
  outline: 2px solid var(--atm-blue);
  outline-offset: 2px;
}

/* ── Dark mode toggle button ────────────────────────────────────────────── */
.atm-dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--atm-text-2);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.atm-dark-mode-toggle:hover {
  background: var(--atm-border);
  color: var(--atm-text);
}
.atm-dark-mode-toggle:focus-visible {
  outline: 2px solid var(--atm-blue);
  outline-offset: 2px;
}

/* ── Dark mode: variabili e override ────────────────────────────────────── */
/* Sfondo full-viewport: copre tutta la pagina anche con temi (Avada, ecc.) */
html.atm-dark-mode,
body.atm-dark-mode {
  background: #202124 !important;
  min-height: 100vh;
}
body.atm-dark-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #202124;
  z-index: -1;
  pointer-events: none;
}
/* Override contenitori tema che impongono sfondo chiaro */
body.atm-dark-mode #page,
body.atm-dark-mode #content,
body.atm-dark-mode #wrapper,
body.atm-dark-mode .fusion-page-wrapper,
body.atm-dark-mode .fusion-main,
body.atm-dark-mode .fusion-body,
body.atm-dark-mode .site-content,
body.atm-dark-mode .content-area,
body.atm-dark-mode main {
  background: transparent !important;
}
/* Header/topbar tema (Avada, ecc.) — sfondo scuro per coerenza */
body.atm-dark-mode #header,
body.atm-dark-mode #wrapper .fusion-header-wrapper,
body.atm-dark-mode .fusion-header-wrapper,
body.atm-dark-mode .fusion-header,
body.atm-dark-mode .fusion-top-header,
body.atm-dark-mode .fusion-secondary-header,
body.atm-dark-mode .header-wrapper,
body.atm-dark-mode header.site-header,
body.atm-dark-mode .site-header,
body.atm-dark-mode .fusion-sticky-header,
body.atm-dark-mode .fusion-header-v1,
body.atm-dark-mode .fusion-header-v2,
body.atm-dark-mode .fusion-header-v3,
body.atm-dark-mode .fusion-header-v4,
body.atm-dark-mode .fusion-header-v5,
body.atm-dark-mode .fusion-header-v6,
body.atm-dark-mode .fusion-header-v7 {
  background: #202124 !important;
  border-color: #3c4043 !important;
}
/* Avada: contenitori interni header */
body.atm-dark-mode .fusion-header .fusion-row,
body.atm-dark-mode .fusion-header .fusion-secondary-header,
body.atm-dark-mode .fusion-header .fusion-top-header,
body.atm-dark-mode .fusion-header-wrapper .fusion-row,
body.atm-dark-mode #header .fusion-row {
  background: transparent !important;
}
/* Avada: testo e link nell'header */
body.atm-dark-mode .fusion-header a,
body.atm-dark-mode .fusion-header span,
body.atm-dark-mode .fusion-header-wrapper a,
body.atm-dark-mode .fusion-header-wrapper span,
body.atm-dark-mode .fusion-secondary-header a,
body.atm-dark-mode .fusion-top-header a,
body.atm-dark-mode #header a,
body.atm-dark-mode #header span {
  color: #e8eaed !important;
}
body.atm-dark-mode .fusion-header a:hover,
body.atm-dark-mode .fusion-header-wrapper a:hover,
body.atm-dark-mode #header a:hover {
  color: #8ab4f8 !important;
}

.atm-wrap.atm-dark-mode {
  --atm-text:      #e8eaed;
  --atm-text-2:    #9aa0a6;
  --atm-text-3:    #5f6368;
  --atm-border:    #3c4043;
  --atm-bg:       #202124;
  --atm-white:    #292a2d;
  --atm-blue-lt:  #174ea6;
  --atm-green-lt: #0d652d;
  --atm-red-lt:   #93000a;
  --atm-warn-lt:  #b86c00;
  --atm-purple-lt: #5e35b1;
  /* Override variabili globali per dark mode */
  --g-text:       #e8eaed;
  --g-text-1:     #e8eaed;
  --g-text-2:     #9aa0a6;
  --g-text-3:     #5f6368;
  --g-border:     #3c4043;
  --g-bg:         #292a2d;
  --g-bg-2:       #35363a;
  --g-bg-soft:    #35363a;
  --g-bg-hover:   #3c4043;
  /* Ombre per dark mode */
  --atm-shadow:    0 1px 3px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --atm-shadow-lg: 0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
/* Titoli e testo: override tema che impone colori chiari */
.atm-wrap.atm-dark-mode h1,
.atm-wrap.atm-dark-mode h2,
.atm-wrap.atm-dark-mode h3,
.atm-wrap.atm-dark-mode h4,
.atm-wrap.atm-dark-mode h5,
.atm-wrap.atm-dark-mode h6,
.atm-wrap.atm-dark-mode .atm-section-header h3,
.atm-wrap.atm-dark-mode .atm-card__head h2,
.atm-wrap.atm-dark-mode .atm-card__head h3,
.atm-wrap.atm-dark-mode .atm-req-title,
.atm-wrap.atm-dark-mode .atm-dash-name,
.atm-wrap.atm-dark-mode .atm-dash-email,
.atm-wrap.atm-dark-mode .atm-dash-label,
.atm-wrap.atm-dark-mode .atm-stat-value,
.atm-wrap.atm-dark-mode .atm-stat-label,
.atm-wrap.atm-dark-mode .atm-breadcrumb-sep,
.atm-wrap.atm-dark-mode .atm-breadcrumb-current {
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-dash-brand-name,
.atm-wrap.atm-dark-mode .atm-breadcrumb a {
  color: var(--atm-text-2) !important;
}
.atm-wrap.atm-dark-mode .atm-dash-brand:hover .atm-dash-brand-name,
.atm-wrap.atm-dark-mode .atm-breadcrumb a:hover {
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-card__head {
  background: var(--atm-white) !important;
  border-color: var(--atm-border);
}
/* Badge priorità: contrasto leggibile in dark mode */
.atm-wrap.atm-dark-mode .atm-badge--priority-normale {
  background: #3c4043 !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-badge--priority-bassa {
  background: #0d652d !important;
  color: #fff !important;
}
.atm-wrap.atm-dark-mode .atm-badge--priority-alta {
  background: #b86c00 !important;
  color: #fff !important;
}
.atm-wrap.atm-dark-mode .atm-badge--priority-critica {
  background: #93000a !important;
  color: #fff !important;
}
/* Badge stato ticket in dark mode (info, warning, success, neutral + priorità) */
.atm-wrap.atm-dark-mode .atm-badge--info,
.atm-wrap.atm-dark-mode .atm-badge--aperto { background: #174ea6 !important; color: #fff !important; }
.atm-wrap.atm-dark-mode .atm-badge--warning,
.atm-wrap.atm-dark-mode .atm-badge--in_lavorazione,
.atm-wrap.atm-dark-mode .atm-badge--in_attesa_cliente { background: #b86c00 !important; color: #fff !important; }
.atm-wrap.atm-dark-mode .atm-badge--success,
.atm-wrap.atm-dark-mode .atm-badge--risolto { background: #0d652d !important; color: #fff !important; }
.atm-wrap.atm-dark-mode .atm-badge--neutral,
.atm-wrap.atm-dark-mode .atm-badge--chiuso { background: #5f6368 !important; color: #fff !important; }
.atm-wrap.atm-dark-mode .atm-dash-header,
.atm-wrap.atm-dark-mode .atm-dash-nav,
.atm-wrap.atm-dark-mode .atm-section-panel,
.atm-wrap.atm-dark-mode .atm-stat-card,
.atm-wrap.atm-dark-mode .atm-prof-card,
.atm-wrap.atm-dark-mode .atm-auth-card,
.atm-wrap.atm-dark-mode .atm-msg-bubble,
.atm-wrap.atm-dark-mode .atm-canone-card {
  background: var(--atm-white);
  border-color: var(--atm-border);
}
.atm-wrap.atm-dark-mode .atm-canone-card-details {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.atm-wrap.atm-dark-mode .atm-canone-card-detail dd strong {
  color: #34d399;
}
.atm-wrap.atm-dark-mode .atm-dashboard {
  background: var(--atm-bg);
}
.atm-wrap.atm-dark-mode .atm-btn--outline {
  border-color: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-btn--outline:hover {
  background: var(--atm-border);
}
.atm-wrap.atm-dark-mode .atm-dark-mode-toggle {
  color: var(--atm-text-2);
}
.atm-wrap.atm-dark-mode .atm-dark-mode-toggle:hover {
  background: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-crte-editor {
  background: var(--atm-white);
  color: var(--atm-text);
  border-color: var(--atm-border);
}
.atm-wrap.atm-dark-mode .atm-dropzone {
  background: var(--atm-white);
  border-color: var(--atm-border);
}
.atm-wrap.atm-dark-mode .atm-closed-note,
.atm-wrap.atm-dark-mode .atm-prof-note {
  background: var(--atm-white);
  border-color: var(--atm-border);
  color: var(--atm-text-2);
}
.atm-wrap.atm-dark-mode .atm-ticket-search-input,
.atm-wrap.atm-dark-mode .atm-ticket-sort-select {
  background: var(--atm-white);
  border-color: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-ticket-filters-trigger {
  background: var(--atm-white);
  border-color: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-ticket-filters-trigger:hover {
  background: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-ticket-filter-btn {
  background: var(--atm-border);
  color: var(--atm-text-2);
}
.atm-wrap.atm-dark-mode .atm-ticket-filter-btn:hover {
  background: var(--atm-blue-lt);
  color: var(--atm-blue);
}
.atm-wrap.atm-dark-mode .atm-co-filter-btn {
  background: var(--atm-white);
  border-color: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-co-filter-btn:hover {
  background: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-co-filter-wrap::after {
  background: linear-gradient(to right, transparent, var(--atm-white));
}
.atm-wrap.atm-dark-mode .atm-req-card {
  background: var(--atm-white);
  border-color: var(--atm-border);
}
.atm-wrap.atm-dark-mode .atm-filters-modal-sheet {
  background: var(--atm-white);
  border-color: var(--atm-border);
}
.atm-wrap.atm-dark-mode .atm-filters-modal-close:hover {
  background: var(--atm-border);
  color: var(--atm-text);
}
.atm-wrap.atm-dark-mode .atm-ticket-pagination-info--empty {
  background: linear-gradient(180deg, rgba(26,115,232,.08) 0%, transparent 70%);
  border-color: var(--atm-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Card pagamento / rinnovo / voce (area riservata)
   ══════════════════════════════════════════════════════════════════════════ */

/* Card base */
.atm-wrap.atm-dark-mode .atm-canone-card {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.4) !important;
  border-color: rgba(138,180,248,.25) !important;
}

/* Titolo, company, ref */
.atm-wrap.atm-dark-mode .atm-canone-card__title {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__company {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__ref {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__ref--svc {
  color: #bdc1c6 !important;
}

/* Meta (labels, values, separators) */
.atm-wrap.atm-dark-mode .atm-canone-card__meta {
  border-top-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__meta-label {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__meta-value {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__meta-value em {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__importo {
  color: #e8eaed !important;
}

/* IVA detail */
.atm-wrap.atm-dark-mode .atm-iva-detail {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-iva-detail span {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-iva-detail__pa {
  color: #f59e0b !important;
}
.atm-wrap.atm-dark-mode .atm-iva-badge--split {
  background: rgba(245,158,11,.2) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.35) !important;
}

/* Badges dark mode */
.atm-wrap.atm-dark-mode .atm-canone-card__badge--canone        { background: rgba(16,185,129,.15) !important; color: #34d399 !important; border-color: rgba(16,185,129,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--voce,
.atm-wrap.atm-dark-mode .atm-canone-card__badge--extra          { background: rgba(167,139,250,.15) !important; color: #a78bfa !important; border-color: rgba(167,139,250,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--sottoservizio,
.atm-wrap.atm-dark-mode .atm-canone-card__badge--collegato      { background: rgba(96,165,250,.15) !important; color: #60a5fa !important; border-color: rgba(96,165,250,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--attivazione    { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--rinnovo        { background: rgba(167,139,250,.15) !important; color: #a78bfa !important; border-color: rgba(167,139,250,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--contrattuale   { background: rgba(129,140,248,.15) !important; color: #818cf8 !important; border-color: rgba(129,140,248,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--extra-label    { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--anticipato     { background: rgba(249,115,22,.15) !important; color: #fb923c !important; border-color: rgba(249,115,22,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--da-pagare      { background: rgba(96,165,250,.15) !important; color: #60a5fa !important; border-color: rgba(96,165,250,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--comunicato     { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--scaduto        { background: rgba(239,68,68,.15) !important; color: #f87171 !important; border-color: rgba(239,68,68,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--cessato        { background: rgba(100,116,139,.2) !important; color: #94a3b8 !important; border-color: rgba(100,116,139,.35) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--sospeso        { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--attesa-determina   { background: rgba(249,115,22,.15) !important; color: #fb923c !important; border-color: rgba(249,115,22,.3) !important; }
.atm-wrap.atm-dark-mode .atm-canone-card__badge--determina-ricevuta { background: rgba(56,189,248,.15) !important; color: #38bdf8 !important; border-color: rgba(56,189,248,.3) !important; }

/* Footer della card */
.atm-wrap.atm-dark-mode .atm-canone-card__footer {
  background: rgba(255,255,255,.03) !important;
  border-top-color: var(--atm-border) !important;
}

/* Overdue bar */
.atm-wrap.atm-dark-mode .atm-canone-card__overdue-bar {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.25) !important;
  color: #f87171 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__overdue-bar--contract {
  background: rgba(217,119,6,.12) !important;
  border-color: rgba(217,119,6,.25) !important;
  color: #fbbf24 !important;
}

/* Pulsanti utility (Dettagli, Proforma, Apri ticket) */
.atm-wrap.atm-dark-mode .atm-btn-card-dettagli,
.atm-wrap.atm-dark-mode .atm-canone-btn--proforma,
.atm-wrap.atm-dark-mode .atm-canone-btn--determina,
.atm-wrap.atm-dark-mode .atm-canone-btn--ticket {
  background: transparent !important;
  border-color: var(--atm-border) !important;
  color: #bdc1c6 !important;
}
.atm-wrap.atm-dark-mode .atm-btn-card-dettagli:hover,
.atm-wrap.atm-dark-mode .atm-canone-btn--proforma:hover,
.atm-wrap.atm-dark-mode .atm-canone-btn--determina:hover,
.atm-wrap.atm-dark-mode .atm-canone-btn--ticket:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card__footer-utility .atm-btn-card-dettagli svg {
  color: #9aa0a6 !important;
}

/* ── SS table (sottoservizi raggruppati) ── */
.atm-wrap.atm-dark-mode .atm-ss-table {
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__row--item {
  background: var(--atm-white) !important;
  color: #e8eaed !important;
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__row--item .atm-ss-table__value {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__row--sub {
  background: rgba(255,255,255,.04) !important;
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__row--total {
  background: rgba(26,115,232,.1) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__row--total .atm-ss-table__value {
  color: #8ab4f8 !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__code {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__sep {
  background: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-ss-table__sep--strong {
  background: #5f6368 !important;
}

/* ── Storico toolbar / search ── */
.atm-wrap.atm-dark-mode .atm-storico-toolbar {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-storico-search-input {
  background: var(--atm-bg) !important;
  border-color: var(--atm-border) !important;
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-storico-search-input::placeholder {
  color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-storico-search-icon {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-storico-empty-state {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-storico-empty-state__title {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-storico-empty-state__desc {
  color: #9aa0a6 !important;
}

/* ── Modal dettagli ── */
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-box {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-header {
  background: var(--atm-white) !important;
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-header .atm-modal-title {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-header .atm-modal-close {
  background: var(--atm-bg) !important;
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-header .atm-modal-close:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-body {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode #atm-voce-dettagli-modal .atm-modal-footer {
  background: rgba(255,255,255,.03) !important;
  border-top-color: var(--atm-border) !important;
}

/* ── Tutti i modali generici (overlay, box, header, body, footer) ── */
.atm-wrap.atm-dark-mode .atm-modal-box {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-modal-header {
  background: var(--atm-white) !important;
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-modal-title {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-modal-subtitle {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-modal-close {
  background: var(--atm-bg) !important;
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-modal-close:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-modal-body {
  background: var(--atm-white) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-modal-footer {
  background: rgba(255,255,255,.03) !important;
  border-top-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-modal-body label,
.atm-wrap.atm-dark-mode .atm-modal-body p,
.atm-wrap.atm-dark-mode .atm-modal-body span {
  color: inherit;
}

/* Servizio detail modal */
.atm-wrap.atm-dark-mode .atm-svcm2-box {
  background: var(--atm-white) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-box h2,
.atm-wrap.atm-dark-mode .atm-svcm2-box h3,
.atm-wrap.atm-dark-mode .atm-svcm2-box h4 {
  color: #e8eaed !important;
}

/* Rinnovo modal */
.atm-wrap.atm-dark-mode .atm-rinnovo-modal-box {
  background: var(--atm-white) !important;
}
.atm-wrap.atm-dark-mode .atm-rinnovo-modal-box h2,
.atm-wrap.atm-dark-mode .atm-rinnovo-modal-box h3 {
  color: #e8eaed !important;
}

/* Det header dentro modal */
.atm-wrap.atm-dark-mode .atm-det-header {
  background: var(--atm-white) !important;
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-det-header__title {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-det-header__sub {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-det-header__ref {
  background: var(--atm-bg) !important;
  color: #9aa0a6 !important;
  border-color: var(--atm-border) !important;
}

/* Sezione dettagli (righe info) */
.atm-wrap.atm-dark-mode .atm-det-section {
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-det-section__title {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-det-row__label {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-det-row__value {
  color: #e8eaed !important;
}

/* ── Feedback / note nella card ── */
.atm-wrap.atm-dark-mode .atm-canone-card__feedback {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--atm-border) !important;
  color: #9aa0a6 !important;
}

/* ── Filtri select in area riservata ── */
.atm-wrap.atm-dark-mode .atm-filter-select-wrap select,
.atm-wrap.atm-dark-mode .atm-section-panel select {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: var(--atm-text) !important;
}

/* ── Paginazione ── */
.atm-wrap.atm-dark-mode .atm-pagination-btn {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-pagination-btn:hover {
  background: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-pagination-btn--active {
  background: var(--atm-blue-lt) !important;
  border-color: rgba(138,180,248,.3) !important;
  color: #8ab4f8 !important;
}
.atm-wrap.atm-dark-mode .atm-pagination-info {
  color: #9aa0a6 !important;
}

/* ── Generic text color catch-all per area riservata ── */
.atm-wrap.atm-dark-mode .atm-canone-card p,
.atm-wrap.atm-dark-mode .atm-canone-card span:not([class*="badge"]),
.atm-wrap.atm-dark-mode .atm-canone-card label,
.atm-wrap.atm-dark-mode .atm-canone-card small {
  color: inherit;
}

/* ── Sezione storico pagamenti ── */
.atm-wrap.atm-dark-mode .atm-section-header {
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-section-header h3 {
  color: var(--atm-text) !important;
}

/* ── Canoni mensili card dettagli ── */
.atm-wrap.atm-dark-mode .atm-canone-card-details {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card-detail dt {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card-detail dd {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-canone-card-detail dd strong {
  color: #34d399 !important;
}

/* ── Form elements dark mode ── */
.atm-wrap.atm-dark-mode .atm-form-hint {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode input::placeholder,
.atm-wrap.atm-dark-mode textarea::placeholder {
  color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.atm-wrap.atm-dark-mode .atm-form-group select:hover,
.atm-wrap.atm-dark-mode .atm-form-group textarea:hover,
.atm-wrap.atm-dark-mode .atm-input:hover,
.atm-wrap.atm-dark-mode .atm-select:hover,
.atm-wrap.atm-dark-mode .atm-textarea:hover {
  border-color: #5f6368 !important;
}

/* ── Confirm modal ── */
.atm-wrap.atm-dark-mode .atm-confirm-box {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-confirm-box p {
  color: #9aa0a6 !important;
}

/* ── Storico table (frontend /area-riservata/?sezione=storico) ── */
.atm-wrap.atm-dark-mode .atm-table-wrap {
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-table {
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-table td {
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-table td span[style*="font-weight:600"] {
  color: #e8eaed !important;
}

/* ── Inline-styled IVA breakdown blocks ── */
.atm-wrap.atm-dark-mode #atm-rinnovo-riepilogo-costi {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode #atm-metodo-iva-breakdown,
.atm-wrap.atm-dark-mode #atm-voce-ss-iva-block,
.atm-wrap.atm-dark-mode #atm-canone-bonifico-iva-block,
.atm-wrap.atm-dark-mode #atm-rinnovo-bonifico-importo-block {
  background: rgba(138,180,248,.08) !important;
  border-color: rgba(138,180,248,.2) !important;
  color: #e8eaed !important;
}

/* ── Rinnovo/PA wrapper panels ── */
.atm-wrap.atm-dark-mode .atm-rinnovo-importo-box {
  background: rgba(138,180,248,.08) !important;
  border-color: rgba(138,180,248,.2) !important;
  color: #e8eaed !important;
}

/* ── Form inputs in area riservata ── */
.atm-wrap.atm-dark-mode input[type="text"],
.atm-wrap.atm-dark-mode input[type="date"],
.atm-wrap.atm-dark-mode input[type="email"],
.atm-wrap.atm-dark-mode input[type="number"],
.atm-wrap.atm-dark-mode textarea,
.atm-wrap.atm-dark-mode select {
  background: var(--atm-bg, #202124) !important;
  border-color: var(--atm-border, #3c4043) !important;
  color: var(--atm-text, #e8eaed) !important;
}
.atm-wrap.atm-dark-mode input::placeholder,
.atm-wrap.atm-dark-mode textarea::placeholder {
  color: #5f6368 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Pulsanti .atm-canone-btn varianti
   ══════════════════════════════════════════════════════════════════════════ */
.atm-wrap.atm-dark-mode .atm-canone-btn--ghost {
  color: #bdc1c6 !important;
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--ghost:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
  border-color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--secondary {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: var(--atm-text) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--secondary:hover {
  background: var(--atm-border) !important;
  border-color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--det-todo {
  background: var(--atm-white) !important;
  color: #bdc1c6 !important;
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--det-todo:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
  border-color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--det-ok {
  background: rgba(16,185,129,.12) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,.3) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--det-ok:hover {
  background: rgba(16,185,129,.2) !important;
  border-color: rgba(16,185,129,.4) !important;
  color: #6ee7b7 !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--disabled,
.atm-wrap.atm-dark-mode .atm-canone-btn--disabled:hover {
  background: var(--atm-border) !important;
  color: #5f6368 !important;
  border-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-canone-btn--danger {
  box-shadow: 0 2px 6px rgba(239,68,68,.2) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Stats context bar
   ══════════════════════════════════════════════════════════════════════════ */
.atm-wrap.atm-dark-mode .atm-stats-context {
  background: rgba(138,180,248,.08) !important;
  border-color: rgba(138,180,248,.2) !important;
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-stats-context a {
  color: #8ab4f8 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Dettaglio voce (modal) — blocchi interni
   ══════════════════════════════════════════════════════════════════════════ */
.atm-wrap.atm-dark-mode .atm-det-header__amount-value {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-det-header__amount-label {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-det-rows {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-det-row {
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-det-row__icon {
  color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-det-row__label {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-det-row__value {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-det-note-block {
  background: rgba(255,255,255,.04) !important;
  border-left-color: var(--atm-border) !important;
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-det-note-block svg {
  color: #5f6368 !important;
}
/* IVA block */
.atm-wrap.atm-dark-mode .atm-det-iva-block {
  background: rgba(138,180,248,.06) !important;
  border-color: rgba(138,180,248,.15) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-row {
  color: #9aa0a6 !important;
  border-bottom-color: rgba(138,180,248,.1) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-row--total {
  background: rgba(138,180,248,.1) !important;
  color: #e8eaed !important;
  border-top-color: rgba(138,180,248,.2) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-note {
  background: rgba(138,180,248,.05) !important;
  color: #8ab4f8 !important;
  border-top-color: rgba(138,180,248,.1) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-note svg {
  color: #60a5fa !important;
}
/* IVA PA Split */
.atm-wrap.atm-dark-mode .atm-det-iva-block--pa-note {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.2) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-block--pa-note .atm-det-iva-row {
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.15) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-block--pa-note .atm-det-iva-row--total {
  background: rgba(245,158,11,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.25) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-block--pa-note .atm-det-iva-note {
  background: rgba(245,158,11,.06) !important;
  color: #fb923c !important;
  border-color: rgba(245,158,11,.12) !important;
}
.atm-wrap.atm-dark-mode .atm-det-iva-block--pa-note .atm-det-iva-note svg {
  color: #f97316 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Modal servizio (.atm-svcm2-*)
   ══════════════════════════════════════════════════════════════════════════ */
.atm-wrap.atm-dark-mode .atm-svcm2-header {
  background: var(--atm-white) !important;
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-icon {
  background: linear-gradient(135deg, rgba(138,180,248,.15) 0%, rgba(96,165,250,.15) 100%) !important;
  color: #8ab4f8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-title {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-subtitle {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-close {
  background: var(--atm-bg) !important;
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-close:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-body {
  background: var(--atm-white) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-section {
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-section-title {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-row {
  border-bottom-color: var(--atm-border) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-row dt {
  color: #9aa0a6 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-row dd {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-empty {
  color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-scad {
  color: #e8eaed !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-scad-note {
  background: var(--atm-border) !important;
  color: #bdc1c6 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-scad-note--soon {
  background: rgba(245,158,11,.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.3) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-scad-note--expired {
  background: rgba(239,68,68,.15) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.3) !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-scad-note--muted {
  background: var(--atm-border) !important;
  color: #9aa0a6 !important;
  border-color: #5f6368 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-scad--soon strong  { color: #fbbf24 !important; }
.atm-wrap.atm-dark-mode .atm-svcm2-scad--expired strong { color: #f87171 !important; }
/* Garanzia / assistenza chip */
.atm-wrap.atm-dark-mode .atm-svcm2-garanzia {
  background: rgba(138,180,248,.08) !important;
  border-color: rgba(138,180,248,.2) !important;
  color: #bdc1c6 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-garanzia svg { color: #60a5fa !important; }
.atm-wrap.atm-dark-mode .atm-svcm2-garanzia-label { color: #8ab4f8 !important; }
.atm-wrap.atm-dark-mode .atm-svcm2-garanzia strong { color: #e8eaed !important; }
/* Una tantum chip */
.atm-wrap.atm-dark-mode .atm-svcm2-tantum {
  background: rgba(16,185,129,.1) !important;
  border-color: rgba(16,185,129,.25) !important;
  color: #34d399 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-tantum-note { color: #6ee7b7 !important; }
/* Tariffa info chip */
.atm-wrap.atm-dark-mode .atm-svcm2-tariffa-info {
  background: rgba(138,180,248,.08) !important;
  border-color: rgba(138,180,248,.2) !important;
  color: #8ab4f8 !important;
}
.atm-wrap.atm-dark-mode .atm-svcm2-tariffa-info-note {
  color: #9aa0a6 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Misc: alerts, chips, badges, btn-icon, btn-logout, banner
   ══════════════════════════════════════════════════════════════════════════ */
/* btn-icon hover */
.atm-wrap.atm-dark-mode .atm-btn-icon:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
}
/* btn-logout hover */
.atm-wrap.atm-dark-mode .atm-btn-logout:hover {
  background: rgba(239,68,68,.12) !important;
}
/* Alerts */
.atm-wrap.atm-dark-mode .atm-alert--info    { background: rgba(138,180,248,.1) !important; border-color: rgba(138,180,248,.2) !important; color: #8ab4f8 !important; }
.atm-wrap.atm-dark-mode .atm-alert--success { background: rgba(16,185,129,.1) !important; border-color: rgba(16,185,129,.2) !important; color: #34d399 !important; }
.atm-wrap.atm-dark-mode .atm-alert--warning { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.2) !important; color: #fbbf24 !important; }
.atm-wrap.atm-dark-mode .atm-alert--error,
.atm-wrap.atm-dark-mode .atm-alert--danger  { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.2) !important; color: #f87171 !important; }
/* Unread badge */
.atm-wrap.atm-dark-mode .atm-dash-unread-badge {
  background: rgba(245,158,11,.15) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: #fbbf24 !important;
}
/* Pending banner */
.atm-wrap.atm-dark-mode .atm-pending-banner {
  background: rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.25) !important;
  color: #fbbf24 !important;
}
/* File attachment chip */
.atm-wrap.atm-dark-mode .atm-att-chip--file {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: #bdc1c6 !important;
}
.atm-wrap.atm-dark-mode .atm-att-chip--file:hover {
  background: var(--atm-border) !important;
  color: #e8eaed !important;
}
/* Service category chip */
.atm-wrap.atm-dark-mode .atm-svc-cat-chip {
  background: var(--atm-white) !important;
  border-color: var(--atm-border) !important;
  color: #bdc1c6 !important;
}
.atm-wrap.atm-dark-mode .atm-svc-cat-chip:hover {
  background: rgba(138,180,248,.08) !important;
}
.atm-wrap.atm-dark-mode .atm-svc-cat-chip--active {
  background: var(--atm-blue-lt) !important;
  color: #8ab4f8 !important;
  border-color: rgba(138,180,248,.3) !important;
}

/* Export PDF button (Fase 5.2) */
.atm-export-pdf-btn { margin-top: 12px; }