@import "../../elastic/styles/styles.min.css";
@import url("https://eureka.email/kit/fonts-inter.css");

/* ============================================================================================
 * EUREKA — skin «aryo» (design Aryo F-40/F-59, Figma 111:115652 · 127:127524 · 144:135939 ·
 * 143:133312 · 174:170900). Figlia di Elastic: stesse funzioni, aspetto del file di Aryo.
 *   - un solo pannello a sinistra (indirizzo · Componi · cartelle · Contatti · Impostazioni)
 *   - barre strumenti GRIGIE (non più cobalto), icone semplici con suggerimento al passaggio
 *   - elenco messaggi: mittente, data a destra, oggetto; non letti con pallino arancio
 * Colori dai token del portale (cobalto #0047AB, arancio #FF5200, grigi del kit Aryo).
 * ========================================================================================== */
:root {
  --eu-main: #0047AB; --eu-main-hover: #003D94; --eu-main-surface: #EDF3FC;
  --eu-accent: #FF5200; --eu-accent-surface: #FFF5F0; --eu-accent-border: #FFD2BD;
  --eu-s0: #FFFFFF; --eu-s1: #F5F5F5; --eu-s2: #EDEDED; --eu-s3: #E0E0E0;
  --eu-text: #0A0A0A; --eu-gray1: #9E9E9E; --eu-gray2: #757575; --eu-danger: #CC3333;
  --eu-input-border: #AFC5EB;
  /* Mappatura Mail di Aryo (mail-dark-mapping.md, 11.10.2026): barre, riga evidenziata, bordi, fondo. */
  --eu-toolbar: #F5F5F5; --eu-row: #FFE7DB; --eu-border: #AFC5EB; --eu-bg: #F7F5F0;
  --eu-on-accent: #FFFFFF; --eu-input-bg: #FFFFFF;
}
/* Tema scuro: valori «dark» della mappatura e di tokens.css [data-theme="dark"]. La webmail entra in
 * scuro col cookie colorMode=dark, che il portale imposta secondo il tema scelto dall'utente. */
html.dark-mode {
  --eu-main: #6995D3; --eu-main-hover: #98B7E1; --eu-main-surface: #213045;
  --eu-accent: #F54F00; --eu-accent-surface: #793815; --eu-accent-border: #C2440A;
  --eu-s0: #212E49; --eu-s1: #202C41; --eu-s2: #2A3851; --eu-s3: #364663;
  --eu-text: #F1F2F3; --eu-gray1: #667999; --eu-gray2: #909AAD; --eu-danger: #E06C6C;
  --eu-input-border: #345179;
  --eu-toolbar: #2A3851; --eu-row: #C2440A; --eu-border: #345179; --eu-bg: #192334;
  --eu-on-accent: #212E49; --eu-input-bg: #283552;
}
html.dark-mode body { background: var(--eu-bg) !important; }
html, body, input, select, textarea, button, .btn, .popover, .listing, .formcontent { font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; }
body { color: var(--eu-text); }
a, a:visited { color: var(--eu-main); }
.btn-primary, button.btn-primary, input.btn-primary, .primary.btn { background-color: var(--eu-main) !important; border-color: var(--eu-main) !important; color: #fff !important; }
.btn-primary:hover { background-color: var(--eu-main-hover) !important; border-color: var(--eu-main-hover) !important; }
input:focus, textarea:focus, select:focus, .form-control:focus { border-color: var(--eu-accent) !important; box-shadow: none !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--eu-main); }

/* ---------------- intestazioni delle colonne = barre grigie ---------------- */
#layout > div > .header, #layout-content > .header, #layout-list > .header, #layout-sidebar > .header,
.header, .popover-header {
  background: var(--eu-toolbar) !important; color: var(--eu-text) !important; border-color: var(--eu-border) !important;
}
#layout > div > .header a.button, .header .toolbar a, .header a.button, .header .header-title { color: var(--eu-text) !important; }
.header .header-title { font-weight: 500; font-size: 14px; }
/* 23.10.2026 (Ale): «Chiudi» e «Indietro» nelle testate dei menù (3 puntini e voci aperte) erano bianchi
   su grigio chiaro, illeggibili: testo scuro sulla stessa fascia grigia. */
.popover-header, .popover-header a, .popover-header a.button, .popover-header a:before, .popover-header a.button:before,
.popover-header .header-title, .popover-header span { color: var(--eu-text) !important; }
#layout > div { border-color: var(--eu-border) !important; }
#layout-content, #layout-list, #layout-sidebar { background: var(--eu-s0) !important; }

/* barra strumenti: solo icone; l'etichetta resta come suggerimento (title) e per i lettori */
.header .toolbar a.button, #toolbar-menu a.button, .toolbar.menu a.button { min-width: 36px; }
@media (min-width: 1200px) {
  #layout-content > .header .toolbar a .inner, #layout-list > .header .toolbar a .inner { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #layout-content > .header .toolbar a.button:before, #layout-list > .header .toolbar a:before { margin: 0 !important; font-size: 17px; }
  #layout-content > .header .toolbar a.button, #layout-list > .header .toolbar a { padding: 6px 8px !important; border-radius: 6px; }
  #layout-content > .header .toolbar a.button:hover, #layout-list > .header .toolbar a:hover { background: var(--eu-s2) !important; }
  #layout-content > .header .toolbar a.delete:before { color: var(--eu-danger); }
}

/* ---------------- pannello di sinistra (ex menu task + cartelle) ---------------- */
#layout-menu { background: var(--eu-s0) !important; border-right: 1px solid var(--eu-border) !important; }
@media (min-width: 769px) {
  #layout-menu { width: 240px !important; min-width: 240px !important; max-width: 240px !important; flex: 0 0 240px !important; padding: 0 !important; display: flex; flex-direction: column; align-items: stretch !important; }
  #layout-menu .popover-header { display: none !important; }
}
.eu-acct-row { display: flex; align-items: center; height: 58px; padding: 0 16px; background: var(--eu-toolbar); border-bottom: 1px solid var(--eu-border); flex: none; }
.eu-acct { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border: 1px solid var(--eu-accent-border); border-radius: 6px; background: var(--eu-accent-surface); color: var(--eu-accent); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layout-menu .popover-header .eu-acct { margin: 0 auto 0 12px; }
@media (max-width: 768px) { .eu-acct-row { display: none; } }

#taskmenu { flex: 1 1 auto; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; padding: 12px !important; overflow-y: auto; gap: 2px; }
#taskmenu > a, #taskmenu .action-buttons a, #taskmenu .special-buttons a {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px;
  width: 100% !important; max-width: none !important; min-height: 38px; height: auto !important; margin: 0 !important; padding: 8px 12px !important;
  border-radius: 6px !important; background: transparent !important; color: var(--eu-gray2) !important; font-size: 14px !important; text-align: left !important;
}
#taskmenu > a:before, #taskmenu .special-buttons a:before { font-size: 17px !important; margin: 0 !important; width: 20px; text-align: center; color: var(--eu-accent) !important; }
#taskmenu a .inner { display: inline !important; font-size: 14px !important; color: inherit !important; overflow: visible !important; white-space: nowrap; }
#taskmenu > a:hover { background: var(--eu-s1) !important; }
#taskmenu > a.selected { background: var(--eu-accent) !important; color: var(--eu-on-accent) !important; }
#taskmenu > a.selected:before { color: var(--eu-on-accent) !important; }
#taskmenu > a.mail, #taskmenu .special-buttons a.about, #taskmenu .special-buttons a.theme { display: none !important; }
/* Componi: pulsante principale cobalto */
#taskmenu .action-buttons { display: block; margin: 0 0 10px; }
#taskmenu .action-buttons a.compose { background: var(--eu-main) !important; color: #fff !important; min-height: 42px; font-size: 15px !important; font-weight: 500; }
#taskmenu .action-buttons a.compose:before { color: #fff !important; font-size: 16px !important; margin: 0 !important; }
#taskmenu .action-buttons a.compose:hover { background: var(--eu-main-hover) !important; }
/* «Esci»: lo fornisce il portale (incorporata) o il pulsante del plugin (webmail diretta) → niente doppione */
#taskmenu .special-buttons { display: none !important; }

/* cartelle dentro il pannello */
.eu-folders { margin: 0 0 4px; padding: 0; list-style: none; }
.eu-folders .listing, .eu-folders ul { background: transparent !important; }
#mailboxlist li, .eu-folders-static li { border: 0 !important; background: transparent !important; }
#mailboxlist li > a, .eu-folders-static li > a {
  display: flex !important; align-items: center; gap: 10px; min-height: 38px; padding: 8px 12px 8px 44px !important; border-radius: 6px;
  color: var(--eu-gray2) !important; font-size: 14px; position: relative; text-decoration: none;
}
#mailboxlist li > a:before, .eu-folders-static li > a:before { position: absolute !important; left: 12px !important; width: 20px; text-align: center; color: var(--eu-accent) !important; font-size: 17px !important; margin: 0 !important; }
#mailboxlist li > a:hover, .eu-folders-static li > a:hover { background: var(--eu-s1) !important; }
#mailboxlist li.selected > a { background: var(--eu-accent) !important; color: var(--eu-on-accent) !important; }
#mailboxlist li.selected > a:before, #mailboxlist li.selected > a .unreadcount { color: var(--eu-on-accent) !important; }
#mailboxlist li .unreadcount, #mailboxlist li a .unreadcount { margin-left: auto; background: transparent !important; color: var(--eu-main) !important; font-size: 12px; font-weight: 500; padding: 0 !important; min-width: 0; }
#mailboxlist li.selected .unreadcount { color: var(--eu-on-accent) !important; }
#mailboxlist ul li > a { padding-left: 64px !important; }
#mailboxlist ul li > a:before { left: 32px !important; }
#mailboxlist div.treetoggle { left: 0 !important; }
/* la vecchia colonna delle cartelle non serve più in elenco/lettura */
body.task-mail.action-none #layout-sidebar, body.task-mail.action-show #layout-sidebar, body.task-mail.action-preview #layout-sidebar { display: none !important; }
body.task-mail .back-sidebar-button { display: none !important; }

/* ---------------- elenco messaggi ---------------- */
#layout-list .searchbar { margin: 10px 12px !important; border: 1px solid var(--eu-input-border) !important; border-radius: 8px !important; background: var(--eu-input-bg) !important; }
#messagelist tr td, table.messagelist tr td { border-color: var(--eu-border) !important; }
table.messagelist.layout-widescreen tr td.subject, #messagelist.withselection tr td.subject { padding-top: 10px !important; padding-bottom: 10px !important; }
table.messagelist span.fromto, table.messagelist span.fromto a { color: var(--eu-text) !important; font-size: 14px; font-weight: 500 !important; }
table.messagelist span.subject, table.messagelist span.subject a { color: var(--eu-text) !important; font-size: 13px; font-weight: 400 !important; }
table.messagelist span.date { color: var(--eu-gray2) !important; font-size: 12px; }
table.messagelist tr.unread span.subject a, table.messagelist tr.unread span.fromto a { font-weight: 600 !important; }
table.messagelist tr.unread td.subject span.msgicon.status:before, table.messagelist tr.unread td.subject span.status:before { color: var(--eu-accent) !important; }
table.messagelist tr.selected td, table.messagelist tr.selected:hover td { background: var(--eu-row) !important; color: var(--eu-text) !important; }
table.messagelist tr.selected td *, table.messagelist tr.selected td a { color: var(--eu-text) !important; }
table.messagelist tr.focused td { outline: none !important; }
table.messagelist tr:hover td { background: var(--eu-row); }
/* Riga al passaggio del mouse = riga selezionata (Aryo 1.1, mail-dark-mapping: --color-row-highlight-text/-dot). */
:root { --eu-row-text: #0A0A0A; --eu-row-dot: #FF5200; }
html.dark-mode { --eu-row-text: #F1F2F3; --eu-row-dot: #F1F2F3; }
table.messagelist tr:hover td, table.messagelist tr:hover td *, table.messagelist tr:hover td a { color: var(--eu-row-text) !important; }
table.messagelist tr.unread:hover td.subject span.msgicon.status:before, table.messagelist tr.unread:hover td.subject span.status:before { color: var(--eu-row-dot) !important; }
table.messagelist tr td { background: var(--eu-s0); }

/* ---------------- lettura ---------------- */
#message-header .subject, .message-header .subject, h2.subject { font-size: 18px !important; font-weight: 600 !important; color: var(--eu-text) !important; }
#message-header .header-title a, .header-links a { color: var(--eu-main) !important; }

/* ---------------- scrittura ---------------- */
body.action-compose #layout-content > .header .toolbar a.send, #compose-content .formbuttons .btn-primary { background: var(--eu-main) !important; color: #fff !important; border-radius: 6px; }
body.action-compose #layout-sidebar { background: var(--eu-s0) !important; border-left: 1px solid var(--eu-border) !important; }
body.action-compose #layout-sidebar > .header .header-title { font-weight: 500; }
#compose-attachments, .compose-attachments { border: 2px dashed var(--eu-s3) !important; border-radius: 8px !important; }

/* ---------------- contatti e impostazioni: righe con selezione arancio chiaro ---------------- */
#layout-sidebar .listing li.selected, #layout-list .listing li.selected, #settings-menu li.selected, #sections-table tr.selected td, .listing li.selected > a, .listing tr.selected td {
  background: var(--eu-row) !important; color: var(--eu-text) !important;
}
.listing li.selected *, .listing tr.selected td * { color: var(--eu-text) !important; }
.listing li, .listing tr td { border-color: var(--eu-border) !important; }
.listing li a:before, .listing tr td a:before { color: var(--eu-text); }
.nav.nav-tabs .nav-link.active, .tabsbar .tablink.selected a { background: var(--eu-main) !important; color: #fff !important; border-radius: 12px 12px 0 0; }
.nav.nav-tabs .nav-link, .tabsbar .tablink a { background: var(--eu-main-surface); color: var(--eu-main) !important; border: 1px solid var(--eu-input-border); border-bottom: 0; border-radius: 12px 12px 0 0; }

/* ---------------- telefono ---------------- */
@media (max-width: 768px) {
  #layout-menu.popover-overlay, #layout-menu { background: var(--eu-s0) !important; }
  .floating-action-buttons a.button, a.button.floating-action, .floating-action-buttons a.compose { background: var(--eu-main) !important; color: #fff !important; border-radius: 6px !important; }
}

/* ---------------- accesso (invariato dalla skin eureka) ---------------- */
.task-login, body.task-login #layout, .task-login #layout-content { background: #F7F4EE !important; }
.task-login .box, .task-login .formcontent { border-top: 3px solid var(--eu-accent) !important; }
.task-login .box { max-width: 420px; margin: 0 auto; }
body.task-login img, .task-login #logo, .task-login .logo { max-width: 230px !important; max-height: 58px !important; width: auto !important; height: auto !important; }

/* --- correzioni v2 --- */
#taskmenu .eu-folders, #taskmenu .eu-folders ul, #taskmenu #mailboxlist { display: block !important; width: 100% !important; height: auto !important; flex: none !important; }
#taskmenu #mailboxlist li, #taskmenu .eu-folders-static li { display: block !important; width: 100% !important; height: auto !important; float: none !important; }
#taskmenu #mailboxlist li > a, #taskmenu .eu-folders-static li > a { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; height: auto !important; line-height: 21px !important; white-space: nowrap; }
#taskmenu #mailboxlist li > a .unreadcount { position: static !important; display: inline !important; }
@media (min-width: 769px) {
  #layout-list > .header a.button.refresh .inner, #layout-list > .header a.toolbar-button .inner { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #layout-list > .header a.button.refresh:before { margin: 0 !important; font-size: 17px; }
}
#message-header, .message-header, #message-header .header { background: transparent !important; }

/* --- correzioni v3 --- */
#taskmenu a, #taskmenu #mailboxlist li > a, #taskmenu .eu-folders-static li > a { max-width: none !important; overflow: visible !important; }
#taskmenu #mailboxlist li > a, #taskmenu .eu-folders-static li > a { text-overflow: clip !important; }
/* «Invia» nella barra in alto (scrittura) */
body.action-compose #layout-content > .header { position: relative; }
body.action-compose #layout-content > .header a.eu-send { order: 99; display: inline-flex !important; align-items: center; gap: 8px; margin: 0 12px 0 auto !important; padding: 6px 16px !important; height: 34px; border-radius: 6px; background: var(--eu-main) !important; color: #fff !important; font-size: 14px; font-weight: 500; text-decoration: none; }
body.action-compose #layout-content > .header a.eu-send:before { color: #fff !important; margin: 0 !important; font-size: 14px; }
body.action-compose #layout-content > .header a.eu-send .inner { position: static !important; width: auto; height: auto; clip: auto; color: #fff !important; }
body.action-compose #layout-content > .header a.eu-send:hover { background: var(--eu-main-hover) !important; }
body.action-compose #compose-content .formbuttons .btn.send { display: none !important; }

/* --- telefono: pannello a scomparsa compatto come Aryo (175:171337) --- */
@media (max-width: 768px) {
  #layout-menu .popover-header { display: flex !important; align-items: center; height: 56px; padding: 0 8px 0 0 !important; background: var(--eu-toolbar) !important; border-bottom: 1px solid var(--eu-border); }
  #layout-menu .popover-header .eu-acct { height: auto !important; line-height: 18px !important; padding: 3px 10px !important; margin-left: 16px !important; }
  #layout-menu .popover-header a.button.cancel, #layout-menu .popover-header a.button.cancel:before { color: var(--eu-text) !important; }
  #layout-menu .action-buttons { display: none !important; }
  #taskmenu { padding: 8px 12px !important; }
  #taskmenu > a, #taskmenu #mailboxlist li > a, #taskmenu .eu-folders-static li > a { min-height: 40px !important; padding-top: 8px !important; padding-bottom: 8px !important; border: 0 !important; line-height: 21px !important; }
  #taskmenu > a:before, #taskmenu #mailboxlist li > a:before, #taskmenu .eu-folders-static li > a:before { line-height: 21px !important; top: auto !important; }
  #taskmenu #mailboxlist li, #taskmenu .eu-folders-static li { border: 0 !important; }
  .floating-action-buttons a.button.compose { width: auto !important; padding: 0 16px !important; gap: 8px; display: inline-flex !important; align-items: center; border-radius: 6px !important; height: 40px !important; }
}

/* --- fascia del marchio del plugin eureka_auth (#eu-brandbar) ---
   Webmail aperta direttamente: fascia sabbia 64px con monogramma + logo 40px, colonne sotto.
   Dentro il portale (iframe → html.eu-embedded): MAI visibile, anche se la sessione non ha il
   segnale «incorporata» (il portale mostra già intestazione e piè di pagina). */
#eu-brandbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 10000; display: flex; align-items: center; justify-content: center; background: #F7F4EE; border-bottom: 1px solid var(--eu-s3); box-sizing: border-box; cursor: pointer; }
#eu-brandbar .eu-brand-inner { position: static !important; left: auto !important; transform: none !important; display: flex; align-items: center; gap: 12px; }
#eu-brandbar .eu-m, #eu-brandbar .eu-w, #eu-brandbar img { height: 40px !important; width: auto !important; max-width: none !important; }
body:has(#eu-brandbar) #layout { position: absolute !important; top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; margin: 0 !important; }
html.eu-embedded #eu-brandbar { display: none !important; }
html.eu-embedded body:has(#eu-brandbar) #layout { top: 0 !important; }

/* --- tema scuro: superfici di lettura, scrittura e impostazioni = surface-0 (mappatura Aryo) --- */
html.dark-mode #layout-content, html.dark-mode #layout-list, html.dark-mode #layout-sidebar,
html.dark-mode .formcontent, html.dark-mode #preferences-frame, html.dark-mode .listing,
html.dark-mode #messagebody, html.dark-mode .message-part, html.dark-mode #compose-content { background: var(--eu-s0) !important; color: var(--eu-text) !important; }
html.dark-mode .form-control, html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background-color: var(--eu-input-bg) !important; color: var(--eu-text) !important; border-color: var(--eu-input-border) !important; }