/* ───────────────────────────────────────────────────────────────
   The Perfect Mail Server — skin "owa" (Outlook on the web look) v2
   Skin derivata: importa la base Elastic e applica override Outlook.
   Palette: blu Outlook #0f6cbd / accent #0078d4 · neutri #faf9f8/#edebe9.
   ─────────────────────────────────────────────────────────────── */
@import url("../../elastic/styles/styles.min.css");

/* ── Tipografia OWA (Segoe UI) ── */
html, body, .listing, .messagelist, .header, #taskmenu, input, button, select,
textarea, .popupmenu, .menu, .formcontent, .boxtitle, .propform, #message-header {
	font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system,
		system-ui, "Helvetica Neue", Arial, sans-serif !important;
}

/* ── Sfondi puliti: niente velo azzurro sui contenitori ── */
#layout-content, #layout-content > .content, #layout-list .scroller,
.messagelist, #messagecontent, .iframe-wrapper, #messagepartcontainer,
#message-header { background-color: #ffffff !important; }

/* ── Rail applicazioni (sinistra) → blu Outlook ── */
#taskmenu { background-color: #0f6cbd !important; }
#taskmenu a, #taskmenu a span.inner, #taskmenu a:before { color: #ffffff !important; }
#taskmenu a:hover, #taskmenu a:focus { background-color: #115ea3 !important; color:#fff !important; }
#taskmenu a.selected, #taskmenu a.selected:hover {
	background-color: #0a4f8a !important; color:#fff !important;
	box-shadow: inset 3px 0 0 #ffffff;
}
#taskmenu a.logout, #taskmenu a.logout:hover { color: #ffd0cf !important; }

/* Nascondi il pulsante "Informazioni" (about) in basso nel rail */
#taskmenu a.about { display: none !important; }

/* Logo Roundcube nascosto (login + ovunque) */
#logo { display: none !important; }

/* AL POSTO del logo nel rail (dentro .popover-header): busta bianca stilizzata
   (outline, angoli vivi). Sostituisco l'immagine di #logo → niente spazio doppio. */
#layout-menu #logo {
	display: inline-block !important;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14'/%3E%3Cpath d='M2 6 12 13 22 6'/%3E%3C/svg%3E") !important;
	width: 29px !important;
	height: 29px !important;
	vertical-align: middle !important;
}
/* il contenitore del logo era scuro (#layout-menu .popover-header{background:#2f3a3f!important}):
   stessa specificità per vincere → trasparente, così mostra il blu del rail */
#layout-menu .popover-header { background-color: transparent !important; text-align: center !important; }

/* Rail tutto blu: il contenitore e il blocco pulsanti in basso erano grigi (#2f3a3f) */
#layout-menu { background-color: #0f6cbd !important; }
#taskmenu .special-buttons { background-color: transparent !important; }

/* "Nuovo messaggio": stessa forma/dimensione degli altri button del rail, ma in
   negativo → sfondo bianco, icona blu, bordino sinistro blu scuro. */
#taskmenu a.compose {
	background-color: #ffffff !important;
	color: #0f6cbd !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: inset 4px 0 0 #0a4f8a !important;   /* bordino left blu scuro */
}
#taskmenu a.compose:before { color: #0f6cbd !important; }
#taskmenu a.compose:hover { background-color: #eff6fc !important; }

/* ── Header dei pannelli → neutro chiaro, titolo marcato ── */
.header { background-color: #faf9f8 !important; border-color: #edebe9 !important; }
.header .header-title { color: #201f1e !important; font-weight: 600 !important; }
.header a.button, .header a.button:before { color: #0f6cbd !important; }
.header a.button:not(.disabled):hover,
.header a.button:not(.disabled):focus { background-color: #eff6fc !important; }

/* ── Cartelle (folderlist) → selezione a pillola azzurra, non lette in grassetto ── */
.folderlist li.selected > a, .listing li.selected > a {
	background-color: #eaf2fb !important;
	color: #0f6cbd !important;
	font-weight: 600 !important;
	box-shadow: inset 3px 0 0 #0f6cbd;
}
.folderlist li.mailbox.unread > a { font-weight: 700 !important; }
.unreadcount { background-color: #0f6cbd !important; color: #ffffff !important; }

/* ── Lista messaggi (table.messagelist) ── */
.messagelist td { border-color: #f0eff0 !important; }
.messagelist tr:not(.selected):hover td { background-color: #f5f9fd !important; }
.messagelist tr.selected td { background-color: #eaf2fb !important; color: #102a43 !important; }
/* banda verticale a sinistra della riga selezionata: la metto sul td.subject
   (colonna VISIBILE); il td:first-child è la checkbox .selection nascosta. */
.messagelist tr.selected td.subject { box-shadow: inset 3px 0 0 #0f6cbd !important; }
.messagelist td.subject span.fromto { font-weight: 600 !important; color: #201f1e; }
.messagelist td.subject span.date { color: #605e5c !important; }
/* non letti: mittente/oggetto in grassetto, accento blu */
.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject a { font-weight: 700 !important; }
.messagelist tr.unread td.subject a { color: #0f6cbd !important; }

/* ── Riquadro di lettura ── */
#message-header > .subject { font-weight: 600 !important; color: #201f1e !important; }

/* ── Link e accenti ── */
a { color: #0f6cbd; }
a:hover { color: #115ea3; }

/* ── Bottoni primari (Invia / Salva) → blu Outlook pieno ── */
.btn-primary, button.btn-primary, a.btn-primary, .formbuttons .btn.btn-primary {
	background-color: #0f6cbd !important;
	border-color: #0f6cbd !important;
	color: #ffffff !important;
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover {
	background-color: #115ea3 !important; border-color: #115ea3 !important;
}

/* ── Icone del "chrome" compatte e uniformi + label nascoste ──
   Copre: toolbar messaggio, toolbar lista (Seleziona/Argomenti/Opzioni),
   pulsanti negli header e il RAIL sidebar (#taskmenu). Icona ~0.95rem
   (0.5rem era troppo piccola). Regola un solo valore per cambiarle tutte. */

/* Label dei pulsanti (span.inner) nascoste in tutto il chrome */
#taskmenu a span.inner,
.header a span.inner,
.toolbar a span.inner,
[role="toolbar"] a span.inner,
a.toolbar-button span.inner { display: none !important; }

/* Icone a dimensione uniforme e leggibile */
#taskmenu a:before,
.header a:before,
.toolbar a:before,
[role="toolbar"] a:before,
a.toolbar-button:before {
	font-size: 1.26rem !important;  /* topbar: -10% rispetto a 1.4rem */
	height: auto !important;
	line-height: 1.4 !important;
}

/* Rail sidebar: con label nascosta, centro l'icona nella voce */
#taskmenu a:before { float: none !important; width: auto !important; margin: 0 !important; }

/* Padding compatto dei pulsanti — SOLO toolbar (escluso il rail #taskmenu, che è
   .menu.toolbar ma role="navigation": le toolbar vere hanno role="toolbar"). */
.header a.button,
[role="toolbar"] a,
a.toolbar-button { padding: .3rem .45rem !important; }

/* ── Topbar più bassa: 58px → 38px ──
   SOLO le barre-strumenti in cima ai pannelli (e i [role=toolbar]); NON il selettore
   largo `.header`, altrimenti schiaccia l'header-sommario del messaggio
   (sender + Dettagli/Intestazioni) e il corpo ci si sovrappone. */
#layout > div > .header,
.header[role="toolbar"] {
	height: 38px !important;
	min-height: 38px !important;
	line-height: 38px !important;
}
#layout > div > .header a.button:before { height: 38px !important; }

/* ── Sidebar / rail più stretto: 78px → 44px, icone 1.2rem (più congruente) ── */
#layout-menu,
#layout #layout-menu { width: 44px !important; }
#taskmenu a:before { font-size: 1.2rem !important; }   /* solo rail; topbar resta 1.4rem */

/* ── Centratura ORIZZONTALE icone del rail ──
   Le voci #taskmenu a erano larghe 78px (più del rail da 50px) con l'icona
   floatata a sinistra: le porto a tutta larghezza e tolgo il float, poi
   text-align:center centra. Vale per quelle in alto e in basso. */
/* I pulsanti in basso (theme/about/logout) stanno in span.special-buttons che è
   position:absolute: lo ancoro al rail (left:0;right:0) e lo centro, così non
   scappano a destra. #layout-menu position:relative = punto d'ancoraggio. */
#layout-menu { position: relative !important; }
/* flow-root = block formatting context: evita il margin-collapsing del margin-top
   del pill compose verso il bordo del rail (altrimenti il gap top non si vede). */
#taskmenu .action-buttons { width: 100% !important; display: flow-root !important; }
#taskmenu .special-buttons {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	text-align: center !important;
}
/* Voce del rail: flex sul singolo button → icona centrata nei due assi.
   Sicuro perché i pulsanti del rail sono tutti visibili; il display:none di
   #taskmenu a.about resta valido perché più specifico di #taskmenu a. */
#taskmenu a {
	width: 100% !important;
	height: 38px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#taskmenu a:before {
	float: none !important;
	margin: 0 !important;
	width: auto !important;
}

/* ── Menu Impostazioni: item attivo uniforme ──
   "Cartelle" risultava più scuro perché il <li> prendeva background #ebf9ff
   (Elastic .listing li.selected) mentre gli altri mostrano solo il <a> #eaf2fb.
   Allineo li + a a #eaf2fb per tutte le sezioni (.listitem). */
html[class] li.listitem.selected,
html[class] li.listitem.selected > a,
html[class] ul.treelist li.listitem.selected > a { background-color: #eaf2fb !important; }

/* Sottovoce della LISTA CARTELLE in Impostazioni (seconda colonna): stile Elastic
   di default → sfondo #ebf9ff, riga sinistra 2px #9ddfff, testo #2c363a.
   Mirato SOLO agli item cartella (.mailbox/.folderlist), NON alle sezioni
   (.listitem della prima colonna). */
body.task-settings li.mailbox.selected > a,
body.task-settings .folderlist li.selected > a {
	background-color: #ebf9ff !important;
	color: #2c363a !important;
	font-weight: normal !important;
	box-shadow: none !important;
	border-left: 2px solid #9ddfff !important;
}

/* ── Allineamento icone negli header colonne 2 e 3 → a sinistra (erano centrate) ── */
#messagelist-header,                         /* colonna 2: toolbar lista */
.header[role="toolbar"] {                     /* colonna 3: toolbar messaggio */
	justify-content: flex-start !important;
}

/* ── Header colonna 1 (lista cartelle): email tutta a sinistra; ⋮ come in origine ──
   .header-title ha flex:1 + text-align:center + margin:0 -20rem → per questo era centrata */
#layout-sidebar > .header { justify-content: flex-start !important; }
#layout-sidebar > .header .header-title {
	text-align: left !important;
	margin: 0 0 0 7px !important;   /* 7px di stacco dal bordo sinistro */
}

/* ════════ COERENZA RESPONSIVE ════════
   Elastic commuta con @media + classi html.layout-large/normal/small/phone (più
   specifiche delle mie regole piatte). Prefisso con html[class] (specificità 1,1,1)
   per pareggiarle e, arrivando dopo, vincere su tutti i breakpoint. */
html[class] #layout-menu { background-color: #0f6cbd !important; }
html[class] #taskmenu .special-buttons { background-color: transparent !important; }
html[class] #layout-menu .popover-header { background-color: transparent !important; }
html[class] #taskmenu a.selected,
html[class] #taskmenu a.selected:hover { background-color: #0a4f8a !important; color: #fff !important; }
html[class] #taskmenu a:hover,
html[class] #taskmenu a:focus { background-color: #115ea3 !important; color: #fff !important; }
/* nella .popover-header lascio solo la busta (#logo è un <img>): nascondo il
   pulsante cancel mobile che a layout-small/phone tornerebbe visibile */
html[class] #layout-menu .popover-header a { display: none !important; }
html[class] #layout-menu #logo { display: inline-block !important; }

/* spunte/radio in tinta Outlook */
input { accent-color: #0f6cbd; }

/* ════════════════════════ DARK MODE — stile OWA dark ════════════════════════
   Tutte le mie personalizzazioni hardcodano colori chiari con !important: qui le
   ridefinisco per html.dark-mode (in fondo al file → vince per ordine, anche sul
   guard html[class]). Palette: pannelli #252423 · RAIL #1b1a19 (più scuro del
   fondale) · header #2b2a29 · testo #e1dfdd/#f3f2f1 · accento #2899f5 ·
   selezione #243447 · hover #2d2c2b · bordi #3b3a39. */

html.dark-mode body { color: #e1dfdd; }

/* Rail: grigio scuro, leggermente più scuro del fondale */
html.dark-mode #layout-menu,
html.dark-mode #taskmenu { background-color: #1b1a19 !important; }
html.dark-mode #taskmenu a,
html.dark-mode #taskmenu a:before,
html.dark-mode #taskmenu a span.inner { color: #e1dfdd !important; }
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus { background-color: #323130 !important; color: #fff !important; }
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover { background-color: #2b2a29 !important; color: #fff !important; }
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a.logout:hover { color: #f1707b !important; }
html.dark-mode #taskmenu .special-buttons { background-color: transparent !important; }
html.dark-mode #layout-menu .popover-header { background-color: transparent !important; }

/* Pulsante "Nuovo messaggio" in dark: pill grigia (più chiara del rail), icona blu */
html.dark-mode #taskmenu a.compose { background-color: #323130 !important; color: #2899f5 !important; }
html.dark-mode #taskmenu a.compose:before { color: #2899f5 !important; }
html.dark-mode #taskmenu a.compose:hover { background-color: #3b3a39 !important; }

/* Pannelli: fondale scuro */
html.dark-mode #layout-content,
html.dark-mode #layout-content > .content,
html.dark-mode #layout-list .scroller,
html.dark-mode .messagelist,
html.dark-mode #messagecontent,
html.dark-mode .iframe-wrapper,
html.dark-mode #messagepartcontainer,
html.dark-mode #message-header,
html.dark-mode #layout-sidebar { background-color: #252423 !important; }

/* Header / toolbar */
html.dark-mode .header { background-color: #2b2a29 !important; border-color: #3b3a39 !important; }
html.dark-mode .header .header-title { color: #f3f2f1 !important; }
html.dark-mode .header a.button,
html.dark-mode .header a.button:before { color: #2899f5 !important; }
html.dark-mode .header a.button:not(.disabled):hover,
html.dark-mode .header a.button:not(.disabled):focus { background-color: #323130 !important; }

/* Link / titoli */
html.dark-mode a { color: #2899f5; }
html.dark-mode #message-header > .subject { color: #f3f2f1 !important; }

/* Lista messaggi */
html.dark-mode .messagelist td { border-color: #3b3a39 !important; color: #e1dfdd; }
html.dark-mode .messagelist td.subject span.fromto { color: #f3f2f1 !important; }
html.dark-mode .messagelist td.subject span.date { color: #a19f9d !important; }
html.dark-mode .messagelist tr:not(.selected):hover td { background-color: #2d2c2b !important; }
html.dark-mode .messagelist tr.selected td { background-color: #243447 !important; color: #f3f2f1 !important; }
html.dark-mode .messagelist tr.unread td.subject a,
html.dark-mode .messagelist tr.unread td.subject span.fromto { color: #2899f5 !important; }

/* Cartelle (posta) + listing: selezione */
html.dark-mode .folderlist li.selected > a,
html.dark-mode .listing li.selected > a { background-color: #243447 !important; color: #2899f5 !important; }
html.dark-mode .folderlist li.mailbox.unread > a { color: #f3f2f1 !important; }
html.dark-mode .unreadcount { background-color: #2899f5 !important; color: #1b1a19 !important; }

/* Impostazioni: sezione attiva (col1) + sottovoce cartelle (col2) */
html.dark-mode li.listitem.selected,
html.dark-mode li.listitem.selected > a { background-color: #243447 !important; color: #2899f5 !important; }
html.dark-mode body.task-settings li.mailbox.selected > a,
html.dark-mode body.task-settings .folderlist li.selected > a {
	background-color: #2d3b4d !important;
	color: #e1dfdd !important;
	border-left-color: #479ef5 !important;
}

/* Area messaggi vuota (blankpage iframe): niente bianco in dark */
html.dark-mode #messagecontent iframe,
html.dark-mode .iframe-wrapper,
html.dark-mode .iframe-wrapper iframe { background-color: #252423 !important; }

/* Banda verticale sinistra anche in dark (su td.subject visibile) */
html.dark-mode .messagelist tr.selected td.subject { box-shadow: inset 3px 0 0 #2899f5 !important; }

/* Pulsanti in basso del rail (special-buttons) in dark: stesso colore del rail
   (#1b1a19), non #21292c di Elastic → uso transparent così mostra il rail. */
html.dark-mode #layout-menu .special-buttons a:not(:focus) { background-color: transparent !important; }