/*
 * DigitalPA branding — skin "digitalpa_elastic" (extends "elastic")
 * Caricato dopo styles.css (vedi templates/includes/layout.html).
 *
 * !important: alcune regole originali di Elastic sono dentro media query
 * a breakpoint diversi (sidebar/topbar), quindi un override "piatto" senza
 * !important vince solo ad alcune risoluzioni. Vedi README.md.
 */

/* Sidebar (task menu) */
#layout-menu,
#layout-menu .popover-header,
#taskmenu .special-buttons {
	background-color: #0c364f !important;
}

/* Contenimento difensivo: se il logo montato ha proporzioni diverse dal
   riquadro (es. wordmark largo invece dell'icona D quadrata), non deve
   traboccare fuori dalla sidebar. */
#layout-menu .popover-header {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#layout-menu .popover-header img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Sidebar (task menu): su schermi molto stretti (html.layout-phone) l'header
   del drawer diventa un flex-box con il logo e il pulsante "chiudi" affiancati;
   il pulsante ha flex:1 e assorbe tutto lo spazio libero, così il
   justify-content:center di Elastic non ha più nulla da distribuire e il
   logo resta a sinistra. Lo centriamo in modo assoluto, indipendente dal
   pulsante accanto. */
html.layout-phone #layout-menu .popover-header {
	position: relative;
}

html.layout-phone #layout-menu .popover-header img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

/* Sidebar (task menu) sotto i 480px: sotto questa soglia Elastic passa
   dal bianco delle icone a un colore scuro pensato per sfondo chiaro,
   illeggibile sul blu della sidebar (skins/elastic/styles/widgets/menu.less) */
@media screen and (max-width: 480px) {
	#taskmenu a {
		color: #fff !important;
	}
}

/* Top bar grigia (header di cartelle / lista messaggi / impostazioni) */
#layout > div > .header {
	background-color: #f2f5f8 !important;
}

/* Font color base (copre body e header; NON ricolora ogni elemento
   dell'interfaccia — Elastic riusa @color-font direttamente in molte
   regole compilate, non solo per eredità da body. Copertura completa
   richiederebbe ricompilare il LESS con @color-font modificato. */
body,
#layout > div > .header {
	color: #0a2c41 !important;
}

/* Login: margine intorno al logo (Elastic non ne mette; sotto serve perché
   lo spazio verso il form dipende solo dai top offset relativi, ai lati
   perché il logo non deve toccare i bordi su schermi stretti).
   Scoping a .task-login: #logo è lo stesso id usato anche per il logo
   nell'header della sidebar (templates/includes/menu.html di Elastic). */
body.task-login #logo {
	margin: 0 1.5rem 1.5rem !important;
	max-height: 75px !important;
}

/* Login: bottone "Accedi" */
#rcmloginsubmit {
	background-color: #0c364f !important;
	border-color: #0c364f !important;
}

/* Login: footer fisso in basso */
#dpa-login-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	background-color: #0c364f;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	font-size: .85rem;
	z-index: 100;
}

#dpa-login-footer .dpa-square {
	display: inline-block;
	width: .7em;
	height: .7em;
	background-color: #c02626;
}

/* Contatore email non lette nella lista cartelle: rosso invece che azzurro */
.folderlist li.mailbox .unreadcount {
	background: #c02626;
}

/* Pallino di stato "non letto" nella lista messaggi: rosso invece che azzurro */
.messagelist td.subject span.msgicon.status.unread::before {
	color: #c02626;
}