@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
/* ============================================================================
   ABComputer — skin "abcomputer" per Roundcube 1.6.18 (estende elastic)
   Layer di SOLO override: importa styles.min.css di elastic (prima riga)
   e ricolora la UI sui token --abc-* del design system del gestionale.
   Nessun template modificato. Palette blu elastic -> arancio ABComputer.
   Stati semantici (success/warning/danger) INVARIATI.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Token brand — copiati ESATTI da abcomputer-theme.css
   ---------------------------------------------------------------------------- */
:root {
  /* Brand */
  --abc-primary: #C2410C;          /* arancio bruciato, ancoraggio (AA 4.7:1 su bianco) */
  --abc-primary-hover: #9A3308;
  --abc-primary-dark: #331206;     /* bruno caldo scurissimo (fondi scuri, active) */
  --abc-primary-light: #FCEEE4;    /* arancio ~8% su bianco */
  --abc-primary-lighter: #FEF7F1;  /* card-header, alert */
  --abc-primary-rgb: 194, 65, 12;
  --abc-accent: #EA580C;           /* arancio pieno: 1° stop del gradient */
  --abc-amber: #F59E0B;            /* ambra/oro: 2° stop del gradient */
  --abc-amber-rgb: 245, 158, 11;
  --abc-amber-text: #B45309;       /* ambra scuro AA per testi piccoli su chiaro */
  --abc-peach: #FBBF77;            /* pesca: SOLO su fondo scuro (accento sidebar) */
  --abc-ink: #331206;              /* alias primary-dark */

  /* Gradient — angoli invariati rispetto a pecinlaw (firma visiva) */
  --abc-gradient: linear-gradient(120deg, #EA580C 0%, #F59E0B 100%);
  --abc-gradient-hover: linear-gradient(120deg, #C2410C 0%, #D97706 100%);
  --abc-gradient-brand: linear-gradient(120deg, #C2410C 0%, #EA580C 45%, #F59E0B 100%);
  --abc-gradient-dark: linear-gradient(135deg, #331206 0%, #5A1E07 62%, #7A2D08 100%);

  /* Ombre del brand — calde, sull'accento ambra */
  --abc-shadow-btn: 0 10px 28px rgba(245, 158, 11, 0.38);
  --abc-shadow-btn-hover: 0 14px 34px rgba(245, 158, 11, 0.5);
  --abc-shadow-card: 0 10px 30px rgba(51, 18, 6, 0.06);

  /* Neutri caldi */
  --abc-text: #2A211B;             /* quasi-nero caldo */
  --abc-text-muted: #6B5E52;       /* testo secondario (AA su bianco) */
  --abc-slate: #6B5E52;
  --abc-bg: #FFFFFF;
  --abc-bg-subtle: #FDF6F0;        /* bianco appena ambrato (login/blank) */
  --abc-border: #F3E6DB;           /* ≈ primary 10% su bianco */

  /* Font — si usa Inter, già caricato in pagina */
  --abc-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --abc-font-heading: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --abc-font-detail: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Tinte sidebar scura (schiarite per reggere il gradient scuro) */
  --abc-aside-main: #F8B37A;       /* sabbia/ambra chiara — sezione principale */
  --abc-aside-admin: #F97316;      /* arancio vivo — area gestione */
  --abc-aside-help: var(--abc-peach); /* pesca — impostazioni e aiuto */
}

/* ----------------------------------------------------------------------------
   2. Tipografia — Inter con fallback allo stack Roboto di elastic
   (stessi selettori compilati di styles.min.css che fissano Roboto)
   ---------------------------------------------------------------------------- */
.popover, body, button, input, optgroup, select, textarea {
  font-family: 'Inter', Roboto, sans-serif;
}
div.tox, div.tox :not(.svg) {
  font-family: 'Inter', Roboto, sans-serif;
}
div.tox .tox-color-input > input,
div.tox .tox-listboxfield .tox-listbox--select,
div.tox .tox-textarea,
div.tox .tox-textfield {
  font-family: 'Inter', Roboto, sans-serif !important;
}
.message-htmlpart blockquote span.blockquote-link,
.message-part blockquote span.blockquote-link {
  font-family: 'Inter', Roboto, sans-serif;
}
body { color: var(--abc-text); }

/* ----------------------------------------------------------------------------
   3. Neutralizzazione blu Bootstrap 4 (deps/bootstrap.min.css)
   sostituisce #007bff / #0069d9 / #0062cc / #0056b3 / #005cbf /
   #b8daff / #9fcdff / #b3d7ff / #80bdff / rgba(0,123,255,*)
   ---------------------------------------------------------------------------- */
.table-primary, .table-primary > td, .table-primary > th { background-color: var(--abc-primary-light); } /* sostituisce #b8daff */
.table-hover .table-primary:hover,
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th { background-color: var(--abc-primary-lighter); } /* sostituisce #9fcdff */
.dropdown-item.active, .dropdown-item:active { background-color: var(--abc-primary); } /* sostituisce #007bff */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--abc-primary); } /* sostituisce #007bff */
.page-link { color: var(--abc-primary); } /* sostituisce #007bff */
.page-link:hover { color: var(--abc-primary-hover); } /* sostituisce #0056b3 */
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(0,123,255,.25) */
.page-item.active .page-link { color: #fff; background-color: var(--abc-primary); border-color: var(--abc-primary); }
.badge-primary { background-color: var(--abc-primary); background: var(--abc-gradient); } /* sostituisce #007bff */
a.badge-primary:focus, a.badge-primary:hover { background: var(--abc-gradient-hover); } /* sostituisce #0062cc */
.alert-primary { color: var(--abc-primary-dark); background-color: var(--abc-primary-light); border-color: var(--abc-border); } /* sostituisce #004085/#cce5ff/#b8daff */
.progress-bar { background-color: var(--abc-primary); background-image: var(--abc-gradient); } /* sostituisce #007bff */
.list-group-item.active { background-color: var(--abc-primary); border-color: var(--abc-primary); } /* sostituisce #007bff */
.bg-primary { background-color: var(--abc-primary) !important; } /* sostituisce #007bff */
a.bg-primary:focus, a.bg-primary:hover,
button.bg-primary:focus, button.bg-primary:hover { background-color: var(--abc-primary-hover) !important; } /* sostituisce #0062cc */
.border-primary { border-color: var(--abc-primary) !important; } /* sostituisce #007bff */
.text-primary { color: var(--abc-primary) !important; } /* sostituisce #007bff */
a.text-primary:focus, a.text-primary:hover { color: var(--abc-primary-hover) !important; } /* sostituisce #0056b3 */
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--abc-primary); background-color: var(--abc-primary); } /* sostituisce #007bff */
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(0,123,255,.25) */
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--abc-primary); } /* sostituisce #80bdff */
.custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: var(--abc-primary-light); border-color: var(--abc-primary-light); } /* sostituisce #b3d7ff */
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: var(--abc-primary); background-color: var(--abc-primary); } /* sostituisce #007bff */
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(194, 65, 12, .5); } /* sostituisce rgba(0,123,255,.5) */
.custom-select:focus { border-color: var(--abc-primary); box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce #80bdff */
.custom-range::-webkit-slider-thumb { background-color: var(--abc-primary); } /* sostituisce #007bff */
.custom-range::-moz-range-thumb { background-color: var(--abc-primary); } /* sostituisce #007bff */
.custom-range::-webkit-slider-thumb:active { background-color: var(--abc-primary-light); } /* sostituisce #b3d7ff */
.custom-range::-moz-range-thumb:active { background-color: var(--abc-primary-light); } /* sostituisce #b3d7ff */
.custom-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(194, 65, 12, .35); }
.custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(194, 65, 12, .35); }
.btn-outline-primary { color: var(--abc-primary); border-color: var(--abc-primary); } /* sostituisce #007bff */
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: var(--abc-primary); border-color: var(--abc-primary); }
.btn-outline-primary.focus, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); }
/* checkbox/radio nativi (liste messaggi, form): accento brand */
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--abc-primary); }

/* ----------------------------------------------------------------------------
   4. Link globali
   ---------------------------------------------------------------------------- */
a { color: var(--abc-primary); } /* sostituisce #00acff */
a:hover { color: var(--abc-primary-hover); } /* sostituisce #008acc */
.btn-link { color: var(--abc-primary); } /* sostituisce #00acff */
.btn-link:hover { color: var(--abc-primary-hover); } /* sostituisce #0056b3 */
.ui.alert a:not(.btn) { color: var(--abc-primary); } /* sostituisce #37beff */

/* ----------------------------------------------------------------------------
   5. Bottoni primary / mainaction — gradient firma, ombra ambra, lift
   ---------------------------------------------------------------------------- */
.btn-primary { /* sostituisce #37beff */
  color: #fff;
  background: var(--abc-gradient);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .22);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary:hover, .btn-primary:focus { /* sostituisce #1eb6ff/#13b2ff */
  color: #fff;
  background: var(--abc-gradient-hover);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--abc-shadow-btn);
}
.btn-primary:focus { box-shadow: var(--abc-shadow-btn), 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(55,190,255,.5) */
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active { /* sostituisce #04adff/#00a8f9 */
  background: var(--abc-primary-dark);
  border-color: transparent;
  transform: translateY(0);
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(55,190,255,.53) */
.btn-primary.disabled, .btn-primary:disabled { /* sostituisce #37beff */
  background: var(--abc-gradient);
  border-color: transparent;
  opacity: .65;
  box-shadow: none;
}
.btn.focus, .btn:focus { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(55,190,255,.3) */

/* Bottoni dei dialoghi TinyMCE (stesso trattamento del mainaction) */
div.tox .tox-dialog__footer .tox-button { /* sostituisce #37beff */
  color: #fff;
  background: var(--abc-gradient);
  border-color: transparent;
}
div.tox .tox-dialog__footer .tox-button:hover,
div.tox .tox-dialog__footer .tox-button:focus { /* sostituisce #1eb6ff/#13b2ff */
  background: var(--abc-gradient-hover);
  border-color: transparent;
  box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35);
}
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background: var(--abc-gradient-hover); border-color: transparent; } /* sostituisce #37beff */
div.tox .tox-dialog__footer .tox-button.disabled,
div.tox .tox-dialog__footer .tox-button:disabled { background: var(--abc-gradient); border-color: transparent; opacity: .65; } /* sostituisce #37beff */
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active,
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active { background: var(--abc-primary-dark); border-color: transparent; } /* sostituisce #04adff/#00a8f9 */
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus,
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(55,190,255,.53) */
div.tox .tox-dialog .tox-dialog__body-nav-item--active { color: var(--abc-primary); } /* sostituisce #00acff */
div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover { color: var(--abc-primary-hover); } /* sostituisce #008acc */

/* Floating action button (mobile) — gradient e ombra ambra */
.floating-action-buttons a.button { /* sostituisce #37beff + alone #eaf8ff */
  background: var(--abc-gradient);
  box-shadow: var(--abc-shadow-btn);
}
.floating-action-buttons a.button:hover,
.floating-action-buttons a.button:focus {
  background: var(--abc-gradient-hover);
  box-shadow: var(--abc-shadow-btn-hover);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   6. Form: focus ring accessibile rgba(194,65,12,.35) + bordi brand
   ---------------------------------------------------------------------------- */
.form-control:focus { /* sostituisce #37beff + rgba(55,190,255,.25) */
  color: var(--abc-text);
  border-color: var(--abc-primary);
  box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35);
}
.input-group-text input:focus { border-color: var(--abc-primary) !important; } /* sostituisce #37beff */
.input-group a:focus { background-color: rgba(194, 65, 12, .15); } /* sostituisce rgba(55,190,255,.25) */
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label,
.formcontent.raweditor .CodeMirror-focused { /* sostituisce #37beff + rgba(55,190,255,.25) */
  border-color: var(--abc-primary);
  box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35);
}
div.tox.focused { border-color: var(--abc-primary) !important; box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35) !important; } /* sostituisce #37beff */
div.tox .tox-color-input > input:focus,
div.tox .tox-listboxfield .tox-listbox--select:focus,
div.tox .tox-textarea:focus,
div.tox .tox-textfield:focus { border-color: var(--abc-primary); box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce #37beff */

/* Switch (custom-switch) — stato checked brand */
.custom-switch .custom-control-input:focus ~ .custom-control-label:before { box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .35); } /* sostituisce rgba(55,190,255,.25) */
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--abc-primary); } /* sostituisce #37beff */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { /* sostituisce #37beff */
  border-color: var(--abc-primary);
  background-color: var(--abc-primary);
}
.custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before { /* sostituisce #84d7ff */
  border-color: rgba(194, 65, 12, .45);
  background-color: rgba(194, 65, 12, .45);
}

/* Focus da tastiera sempre visibile */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(194, 65, 12, .55);
  outline-offset: 1px;
}

/* ----------------------------------------------------------------------------
   7. Menu principale (#taskmenu / #layout-menu) — gradient scuro firma,
   voce attiva con accento ambra, azioni in pesca
   ---------------------------------------------------------------------------- */
#rcmdraglayer { background-color: var(--abc-ink); } /* sostituisce #2f3a3f */
@media screen and (min-width: 481px) {
  #layout-menu { background: var(--abc-gradient-dark); } /* sostituisce #2f3a3f */
  #layout-menu .popover-header { background-color: var(--abc-ink) !important; } /* sostituisce #2f3a3f */
  #taskmenu .special-buttons { background-color: transparent; } /* sostituisce #2f3a3f */
  #taskmenu a { color: rgba(255, 255, 255, .92); }
  #taskmenu a:hover { color: #fff; background: rgba(255, 255, 255, .08); } /* sostituisce #45555c */
  #taskmenu a.selected,
  #taskmenu a.selected:hover { /* sostituisce #45555c */
    color: #fff;
    background: rgba(245, 158, 11, .22);
    box-shadow: inset 3px 0 0 var(--abc-amber);
  }
  #taskmenu .action-buttons a { color: var(--abc-peach); } /* sostituisce #37beff */
  #taskmenu .action-buttons a:hover { color: var(--abc-peach); background: rgba(255, 255, 255, .08); } /* sostituisce #37beff/#45555c */
}
@media screen and (min-width: 1025px) {
  #taskmenu a:focus { background-color: rgba(255, 255, 255, .12); } /* sostituisce #45555c */
}
/* header del menu su mobile (popover) */
html.layout-phone .popover-header,
html.layout-small .popover-header { background: var(--abc-gradient-dark); } /* sostituisce #005984 */

/* ----------------------------------------------------------------------------
   8. Topbar / header di colonna + searchbar
   ---------------------------------------------------------------------------- */
#layout > div > .header { /* sostituisce #f4f4f4/#d4dbde */
  background-color: var(--abc-bg-subtle);
  border-bottom-color: var(--abc-border);
  color: var(--abc-text);
}
#layout > div > .header a.button { color: var(--abc-text); }
@media screen and (max-width: 768px) {
  #layout > div > .header { background-color: var(--abc-bg-subtle); } /* sostituisce #f4f4f4 */
}
@media screen and (min-width: 769px) {
  .header a.button.icon:not(.disabled):focus,
  .header a.button.icon:not(.disabled):hover { background-color: var(--abc-primary-light); } /* sostituisce #ececec */
}
.searchbar { border-bottom-color: var(--abc-border); }
.searchbar:focus-within {
  border-bottom-color: var(--abc-primary);
  box-shadow: inset 0 -1px 0 var(--abc-primary);
}

/* Tab attive (impostazioni, dialoghi) */
.nav-tabs .nav-link { color: var(--abc-text-muted); }
.nav-tabs .nav-link:hover { color: var(--abc-primary); }
.nav-tabs .nav-link.active {
  color: var(--abc-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--abc-primary);
}

/* ----------------------------------------------------------------------------
   9. Liste: selezione, focus, badge non letti, cartelle recenti
   ---------------------------------------------------------------------------- */
.listing li.selected,
.listing tr.selected td { color: var(--abc-text); background-color: var(--abc-primary-light); } /* sostituisce #ebf9ff */
ul.treelist li.selected > a,
ul.treelist li.selected > div > a { color: var(--abc-text); background-color: var(--abc-primary-light); } /* sostituisce #ebf9ff */
.table-widget table.options-table tr.selected td { background-color: var(--abc-primary-light); color: var(--abc-text); } /* sostituisce #ebf9ff */
.image-selector .attachmentslist li:focus,
.image-selector .attachmentslist li:hover { background: var(--abc-primary-light); } /* sostituisce #ebf9ff */
html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
  border-left: 2px solid rgba(194, 65, 12, .5); /* sostituisce #9ddfff */
}
.folderlist li.mailbox .unreadcount { background: var(--abc-gradient); color: #fff; } /* sostituisce #37beff */
.folderlist li.mailbox.recent > a { color: var(--abc-primary-hover); } /* sostituisce #008cd0 */
.folderlist li.mailbox.recent > a > .unreadcount { background: var(--abc-gradient); color: #fff; } /* sostituisce #37beff */
.popupmenu .listing li > a:not(.disabled):hover { color: #fff; background-color: var(--abc-primary); } /* sostituisce #37beff */
.popupmenu .listing li.selected { color: #fff; background-color: var(--abc-primary); } /* sostituisce #37beff */

/* ----------------------------------------------------------------------------
   10. Menu contestuali, popover, datepicker, dialoghi
   ---------------------------------------------------------------------------- */
.popover .menu li a:not(.disabled):hover { color: #fff; background-color: var(--abc-primary); } /* sostituisce #37beff */
.popover .menu .dropbutton a.dropdown:hover { background-color: var(--abc-primary); } /* sostituisce #37beff */
.googie_list li.googie_list_onhover { color: #fff; background-color: var(--abc-primary); } /* sostituisce #37beff */
.ui-menu .ui-state-active { background-color: var(--abc-primary) !important; } /* sostituisce #37beff */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus { background-color: rgba(194, 65, 12, .2); } /* sostituisce rgba(55,190,255,.5) */
.ui-slider .ui-slider-range { background: var(--abc-primary-light); } /* sostituisce #d0f0ff */
.ui-slider .ui-slider-handle.ui-state-active { background: var(--abc-primary); border-color: var(--abc-primary-dark); } /* sostituisce #37beff/#005984 */
.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight { background: var(--abc-primary-light); color: var(--abc-primary); } /* sostituisce #d0f0ff/#37beff */
.ui-datepicker a.ui-state-active { background: var(--abc-primary) !important; color: #fff !important; } /* sostituisce #37beff */

/* ----------------------------------------------------------------------------
   11. Messaggi di stato, quota, strumenti immagine, blockquote
   (success/warning/danger restano i semantici di elastic)
   ---------------------------------------------------------------------------- */
.ui.alert { background-color: rgba(194, 65, 12, .05); } /* sostituisce rgba(55,190,255,.05) */
.ui.alert.boxinformation { background-color: var(--abc-primary-light); } /* sostituisce rgba(55,190,255,.2) */
#messagestack .alert-info.information { background: linear-gradient(120deg, #C2410C 0%, #EA580C 100%); } /* sostituisce #37beff */
.quota-widget .value { background-color: var(--abc-primary); } /* sostituisce #37beff */
p.image-attachment { background-color: rgba(194, 65, 12, .05); } /* sostituisce rgba(55,190,255,.05) */
.image-tools { background-color: rgba(194, 65, 12, .45); } /* sostituisce rgba(55,190,255,.4) */
.image-tools a:focus,
.image-tools a:hover { background-color: rgba(194, 65, 12, .6) !important; } /* sostituisce rgba(55,190,255,.5) */
.message-htmlpart blockquote,
.message-part blockquote { /* sostituisce #006a9d (livello 0; livelli 1-2 restano verde/rosso) */
  color: var(--abc-amber-text);
  border-left-color: var(--abc-amber-text);
  border-right-color: var(--abc-amber-text);
}

/* ----------------------------------------------------------------------------
   12. LOGIN — fondo ambrato con radial, barra gradient firma, card
   (solo CSS: nessuna modifica a templates/login.html)
   ---------------------------------------------------------------------------- */
body.task-login {
  background-color: var(--abc-bg-subtle);
  background-image: radial-gradient(ellipse at 50% -10%, rgba(194, 65, 12, .10), transparent 60%);
}
.task-login #layout,
.task-login #layout-content { background: transparent; }
/* barra gradient firma 4px in cima */
body.task-login::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--abc-gradient);
  z-index: 100;
}
.task-login #login-form {
  max-width: 400px;
  padding: 2rem 1.75rem 1.5rem;
  background: var(--abc-bg);
  border: 1px solid var(--abc-border);
  border-radius: 16px;
  box-shadow: var(--abc-shadow-card);
  text-align: left;
}
.task-login #login-form .form-control {
  border-radius: 8px;
}
.task-login #login-form .formbuttons .btn {
  width: 100%;
  border-radius: 8px;
  padding: .6rem .75rem;
}
.task-login #login-form .formbuttons + .oauthlogin { border-top: 1px solid var(--abc-border); } /* sostituisce #ccc */
.task-login #login-footer { color: var(--abc-text-muted); margin-top: 1rem; }
.task-login #login-footer a { color: var(--abc-primary); }
@media screen and (max-height: 640px) {
  .task-login #logo { top: 8vh; }
  .task-login #login-form { top: 12vh; }
}

/* ----------------------------------------------------------------------------
   13. Scrollbar — tinta leggera brand (webkit + firefox)
   ---------------------------------------------------------------------------- */
html { scrollbar-color: rgba(194, 65, 12, .4) var(--abc-bg-subtle); }
html:not(.touch) ::-webkit-scrollbar-track { background-color: var(--abc-bg-subtle); } /* sostituisce #f1f1f1 */
html:not(.touch) ::-webkit-scrollbar-thumb { background-color: rgba(194, 65, 12, .4); border-radius: 3px; } /* sostituisce #c1c1c1 */
html:not(.touch) ::-webkit-scrollbar-thumb:hover { background-color: rgba(194, 65, 12, .6); }

/* ============================================================================
   14. DARK MODE (html.dark-mode) — fondi scuri elastic INVARIATI,
   accenti blu -> ambra/pesca (reggono meglio del primary su scuro),
   bottoni gradient invariati
   ============================================================================ */
html.dark-mode a { color: var(--abc-amber); } /* sostituisce #00acff ereditato */
html.dark-mode a:hover { color: var(--abc-peach); } /* sostituisce #008acc ereditato */
html.dark-mode .btn-link { color: var(--abc-amber); }
html.dark-mode .btn-link:hover { color: var(--abc-peach); }
html.dark-mode .btn-primary { /* sostituisce #006a9d */
  background: var(--abc-gradient);
  color: #fff;
  border-color: transparent;
}
html.dark-mode .btn-primary:hover:not(:disabled) { background: var(--abc-gradient-hover); background-color: transparent; } /* sostituisce #007bb7 */
html.dark-mode .floating-action-buttons a.button { background: var(--abc-gradient); } /* sostituisce #006a9d */
html.dark-mode .tox .tox-dialog__footer .tox-button { background: var(--abc-gradient); background-color: transparent; color: #fff; } /* sostituisce #006a9d */
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled) { background: var(--abc-gradient); background-color: transparent; } /* sostituisce #006a9d */
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled) { background: var(--abc-gradient-hover); background-color: transparent; } /* sostituisce #007bb7 */
html.dark-mode .tox .tox-dialog__body-nav-item--active { color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .tox .tox-collection__item--enabled { color: var(--abc-amber); } /* sostituisce #37beff (fondo scuro invariato) */
html.dark-mode #taskmenu .action-buttons a { color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td { color: var(--abc-amber); } /* sostituisce #37beff (fondo #374549 invariato) */
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status { color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .custom-file-label:focus:not(.is-invalid),
html.dark-mode .form-control:focus:not(.is-invalid) { border-color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--abc-amber-text); } /* sostituisce #006a9d */
html.dark-mode .multi-input:not(.is-invalid) > .content.focused { border-color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .input-group a:focus { border-color: var(--abc-amber); box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .3); } /* sostituisce #37beff */
html.dark-mode .recipient-input.focus { border-color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .formcontent.raweditor .CodeMirror-focused { border-color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode .message-part blockquote,
html.dark-mode .message-htmlpart blockquote { border-color: var(--abc-peach); color: var(--abc-peach); } /* sostituisce #6acfff */
html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight { color: var(--abc-amber); } /* sostituisce #37beff */
html.dark-mode #messagestack .alert-info,
html.dark-mode .ui.alert.boxinformation { background-color: #7A2D08; } /* sostituisce #217299 — bruno-arancio scuro dal gradient-dark */
html.dark-mode { scrollbar-color: var(--abc-amber-text) #4d6066; } /* sostituisce #007bb7 */
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color: var(--abc-amber-text); } /* sostituisce #007bb7 */
html.dark-mode:not(.touch) ::-webkit-scrollbar-track { background-color: #4d6066; }
html.dark-mode .nav-tabs .nav-link { color: #c5d1d3; box-shadow: none; }
html.dark-mode .nav-tabs .nav-link:hover { color: var(--abc-amber); }
html.dark-mode .nav-tabs .nav-link.active { color: var(--abc-amber); box-shadow: inset 0 -2px 0 var(--abc-amber); }
html.dark-mode .folderlist li.mailbox.recent > a { color: var(--abc-amber); } /* sostituisce #008cd0 ereditato */
html.dark-mode .page-link { color: var(--abc-amber); background-color: transparent; }
html.dark-mode .searchbar:focus-within {
  border-bottom-color: var(--abc-amber);
  box-shadow: inset 0 -1px 0 var(--abc-amber);
}

/* Login in dark mode: fondo scuro elastic + alone caldo, card scura */
html.dark-mode body.task-login {
  background-color: #21292c;
  background-image: radial-gradient(ellipse at 50% -10%, rgba(234, 88, 12, .12), transparent 60%);
}
html.dark-mode .task-login #login-form {
  background: rgba(255, 255, 255, .04);
  border-color: #4d6066;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
html.dark-mode .task-login #login-footer { color: #8ba3a7; }
html.dark-mode .task-login #login-footer a { color: var(--abc-amber); }

/* ============================================================================
   v2 — Correzioni da review usabilità (01/09/2026)
   ============================================================================ */

/* R4: barra firma in cima: gradient a 3 stop come da token --abc-gradient-brand */
body.task-login::before {
  background: linear-gradient(120deg, var(--abc-primary) 0%, var(--abc-accent) 50%, var(--abc-amber) 100%);
}

/* R3: contrasto bottone ACCEDI — gradient scurito (5,2:1 / 3,5:1) + testo large bold */
.task-login #login-form .formbuttons .btn,
.task-login #login-form button.mainaction {
  background-image: linear-gradient(120deg, var(--abc-primary) 0%, var(--abc-accent) 100%);
  font-size: 1.25rem;
  font-weight: 700;
}
.task-login #login-form .formbuttons .btn:hover,
.task-login #login-form button.mainaction:hover {
  background-image: var(--abc-gradient-hover);
}

/* R5: campi login su neutri caldi (bordo warm leggibile, icone ambra su fondo subtle) */
.task-login #login-form .form-control,
.task-login #login-form .input-group-text {
  border-color: #E8D5C4;
  color: var(--abc-text);
}
.task-login #login-form .input-group-text.icon {
  background: var(--abc-bg-subtle);
  color: var(--abc-amber-text);
}
.task-login #login-form .form-control::placeholder { color: var(--abc-text-muted); }

/* R7: dark mode login su neutri caldi (bruno invece dei grigio-azzurri elastic) */
html.dark-mode body.task-login { background-color: #241A12; }
html.dark-mode .task-login #login-form { border-color: #4A382C; }
html.dark-mode .task-login #login-form .form-control,
html.dark-mode .task-login #login-form .input-group-text { border-color: #6B5344; }

/* ============================================================================
   v3 — Tema unico light (come il gestionale: niente dark mode) + logo AB
   ============================================================================ */

/* Separatori voci taskmenu: righe chiare tenui sul gradient scuro
   (elastic usa #f1f3f4 !important, serve pari forza) */
#taskmenu a { border-bottom: 1px solid rgba(255, 255, 255, .10) !important; }
#taskmenu a.selected { border-bottom-color: rgba(255, 255, 255, .16) !important; }

/* Logo AB: dimensioni corrette in login e nel menu mobile; bianco sul gradient
   scuro del popover-header (stesso trucco filter di abcomputer.org) */
.task-login #logo { max-width: 250px; height: auto; }
#layout-menu .popover-header img {
  filter: brightness(0) invert(1);
  max-width: 160px;
  max-height: 44px;
}

/* Rinforzo tema unico: se una vecchia preferenza/classe dark-mode restasse
   appesa, le superfici principali restano quelle del brand chiaro */
html.dark-mode body { background-color: var(--abc-bg); color: var(--abc-text); }

/* ============================================================================
   v3 — UI loggata brand completa + menu custom + logo AB (01/09/2026)
   ============================================================================ */

/* Barra gradient firma su TUTTE le pagine (come il gestionale) */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(120deg, var(--abc-primary) 0%, var(--abc-accent) 50%, var(--abc-amber) 100%);
  z-index: 100000;
  pointer-events: none;
}

/* ---- Aside menu: più largo, logo AB su chip bianco, Esci sotto il logo ---- */
@media (min-width: 768px) {
  #layout-menu { width: 96px; }
}
#layout-menu .popover-header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  height: auto;
  line-height: normal;
  padding: .6rem .45rem .2rem !important;
}
#layout-menu .popover-header img,
#layout-menu #logo {
  max-width: 100%;
  max-height: none;
  background: #fff;
  border-radius: 10px;
  padding: .4rem .45rem;
  box-shadow: 0 4px 14px rgba(51, 18, 6, .28);
}
#layout-menu a.logout-top {
  display: block;
  color: #fff !important;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem 0 .55rem;
  opacity: .88;
  text-decoration: none;
}
#layout-menu a.logout-top:hover { opacity: 1; color: var(--abc-amber) !important; }
#taskmenu a.about { display: none !important; }

/* ---- Toolbar interne: icone brand invece del grigio ---- */
#layout-content .header a.button:not(.disabled),
#layout-list .header a.button:not(.disabled),
#layout-sidebar .header a.button:not(.disabled),
#layout-content .header .toolbar a.button:not(.disabled) {
  color: var(--abc-amber-text);
}
#layout-content .header a.button:not(.disabled):hover,
#layout-list .header a.button:not(.disabled):hover,
#layout-sidebar .header a.button:not(.disabled):hover {
  color: var(--abc-primary);
}
#layout-content .header a.button.disabled,
#layout-list .header a.button.disabled { color: var(--abc-text-muted); opacity: .4; }

/* Titoli dialoghi con sottolineatura gradient firma */
.ui-dialog .ui-dialog-titlebar {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(120deg, var(--abc-primary), var(--abc-accent), var(--abc-amber)) 1;
}

/* ---- Login: card bianca che CONTIENE il logo AB ---- */
.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
}
#login-card {
  background: #fff;
  border: 1px solid var(--abc-border);
  border-radius: 16px;
  box-shadow: var(--abc-shadow-card), 0 18px 44px rgba(194, 65, 12, .07);
  padding: 1.9rem 1.7rem 1.4rem;
  width: min(92vw, 400px);
  margin: 12vh auto 2rem;
  position: relative;
}
#login-card #logo,
.task-login #logo {
  display: block;
  position: static;
  margin: 0 auto 1.4rem;
  max-width: 250px;
  width: 100%;
  height: auto;
  top: auto;
}
.task-login #login-form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: static;
  top: auto;
  margin: 0;
  width: auto;
  max-width: none;
}
html.dark-mode #login-card { background: #2B2118; border-color: #4A382C; }
html.dark-mode #login-card #logo { background: #fff; border-radius: 10px; padding: .5rem .6rem; }
html.dark-mode .task-login #login-form { background: transparent; border: 0; }

/* v3.1 — fix: niente filter bianco sul logo AB (chip bianco), menu 100px, label leggibili */
#layout-menu .popover-header img,
#layout-menu #logo { filter: none !important; }
@media (min-width: 768px) {
  #layout-menu { width: 100px; }
}
#taskmenu span.inner { font-size: .72rem; }
#taskmenu a { font-size: 1.1rem; }

/* v3.2 — logo header da loggati: trasparente (bianco monocromo su fondo scuro) */
#layout-menu .popover-header img,
#layout-menu #logo {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: .15rem .2rem;
  filter: brightness(0) invert(1) !important;
}