/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* I colori del tema vengono iniettati a runtime (Hi_FT_Settings::get_theme_colors);
   i valori qui sono solo fallback allineati alla palette della piattaforma. */
.hi-ft-box {
	--hi-ft-primary: #D83A31;
	--hi-ft-secondary: #11A64C;
	--hi-ft-border: #e8e8e8;
	max-width: 720px;
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	border: 1px solid var(--hi-ft-border);
	border-radius: .3em;
	background: #fff;
}

.hi-ft-box h3 {
	margin-top: 0;
}

.hi-ft-errore {
	color: var(--hi-ft-primary);
	font-weight: 600;
}

.hi-ft-successo {
	color: var(--hi-ft-secondary);
	font-weight: 600;
}

.hi-ft-scadenza {
	color: #555;
	font-size: 0.95em;
}

.hi-ft-codice input[type="text"] {
	padding: 0.5em 0.75em;
	margin-right: 0.5em;
	min-width: 220px;
}

.hi-ft-codice button {
	padding: 0.5em 1em;
	cursor: pointer;
}

.hi-ft-lista-pillole {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hi-ft-riepilogo {
	margin-bottom: 1.25em;
}

.hi-ft-progress {
	height: 10px;
	background: #f0f0f0;
	border-radius: 999px;
	overflow: hidden;
}

.hi-ft-progress-bar {
	height: 100%;
	background: var(--hi-ft-secondary);
	border-radius: 999px;
	transition: width .4s ease;
}

.hi-ft-progress-testo {
	margin: .5em 0 0;
	font-size: .95em;
	color: #555;
	display: flex;
	align-items: center;
	gap: .75em;
}

.hi-ft-stato-tiro {
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .2em .6em;
	border-radius: 999px;
	background: #eee;
	color: #555;
	/* Senza questi due, "In pari" andava a capo e la pillola colorata si
	   spezzava in due tronconi su righe diverse. */
	display: inline-block;
	white-space: nowrap;
}

.hi-ft-stato-tiro.hi-ft-stato-in_pari,
.hi-ft-stato-tiro.hi-ft-stato-completato {
	background: rgba(17, 166, 76, .12);
	color: var(--hi-ft-secondary);
}

.hi-ft-stato-tiro.hi-ft-stato-in_ritardo {
	background: #fff4e5;
	color: #b26a00;
}

/* Percorso chiuso a fine durata: resta in tabella, visivamente attenuato. */
.hi-ft-stato-tiro.hi-ft-stato-inattivo {
	background: #f0f0f0;
	color: #6b6b6b;
}

.hi-ft-stato-tiro.hi-ft-stato-non_avviato {
	background: #f0f4f8;
	color: #55677a;
}

.hi-ft-report-link {
	display: inline-block;
	font-size: .8em;
	font-weight: 600;
	white-space: nowrap;
	padding: .3em .7em;
	border: 1px solid var(--hi-ft-border, #ddd);
	border-radius: 4px;
	color: var(--hi-ft-primary, #d83a31);
	text-decoration: none;
}

.hi-ft-report-link:hover,
.hi-ft-report-link:focus {
	background: var(--hi-ft-primary, #d83a31);
	border-color: var(--hi-ft-primary, #d83a31);
	color: #fff;
}

.hi-ft-pillola {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 0.75em 1em;
	border-bottom: 1px solid #eee;
}

.hi-ft-pillola-info {
	display: flex;
	flex-direction: column;
	gap: .15em;
}

.hi-ft-pillola-meta {
	font-size: .8em;
	color: #888;
}

.hi-ft-pillola-azioni {
	display: flex;
	align-items: center;
	gap: .75em;
	flex-shrink: 0;
}

.hi-ft-completa-form {
	margin: 0;
}

.hi-ft-completa-btn {
	padding: .4em .8em;
	font-size: .85em;
	font-weight: 700;
	cursor: pointer;
	color: #fff;
	background: var(--hi-ft-primary);
	border: none;
	border-radius: .3em;
	transition: background .2s ease;
	white-space: nowrap;
}

.hi-ft-completa-btn:hover {
	background: var(--hi-ft-secondary);
}

.hi-ft-pillola-stato {
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	white-space: nowrap;
}

/* Dashboard responsabili */
.hi-ft-dashboard {
	max-width: 100%;
	overflow-x: auto;
}

/* Colonne che devono restare su una riga e larghe quanto il loro contenuto:
   date e stato. Senza questo le date andavano a capo e il badge di stato si
   spezzava in due. */
.hi-ft-dashboard table.hi-ft-tabella th.hi-ft-col-stretta,
.hi-ft-dashboard table.hi-ft-tabella td.hi-ft-col-stretta {
	white-space: nowrap;
	width: 1%;
}

.hi-ft-dashboard table.hi-ft-tabella th,
.hi-ft-dashboard table.hi-ft-tabella td {
	padding: .55em .7em;
	text-align: left;
	vertical-align: middle;
}

/* Intestazione nel colore primario del tema (rosso Gulliver). */
.hi-ft-dashboard table.hi-ft-tabella thead th {
	background: var(--hi-ft-primary, #d83a31);
	color: #fff;
	border-bottom: none;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * Frecce di ordinamento: DataTables le disegna in ::before/::after con selettori
 * più specifici dei nostri (`table.dataTable thead>tr>th.sorting:before`), quindi
 * qui serve !important. Di default sono scure e sul rosso sarebbero illeggibili.
 */
.hi-ft-dashboard table.hi-ft-tabella thead th::before,
.hi-ft-dashboard table.hi-ft-tabella thead th::after {
	color: #fff !important;
	opacity: .7 !important;
}

.hi-ft-dashboard table.hi-ft-tabella tbody td {
	border-top: 1px solid var(--hi-ft-border, #e8e8e8);
}

/*
 * Righe alternate, hover ed evidenziazione della colonna ordinata restano quelle
 * di DataTables (classe `display`): sono grigi neutri, non stonano col rosso e
 * hanno selettori più specifici. Sovrascriverle richiederebbe !important sparsi
 * senza guadagno visivo.
 */

/* Paginazione e ricerca, per restare in tinta con l'intestazione. */
.hi-ft-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.hi-ft-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--hi-ft-primary, #d83a31);
	border-color: var(--hi-ft-primary, #d83a31);
	color: #fff !important;
}

.hi-ft-dashboard .dataTables_wrapper .dataTables_filter input:focus {
	border-color: var(--hi-ft-primary, #d83a31);
	outline: none;
}

.hi-ft-stato-bloccata {
	opacity: 0.6;
}

.hi-ft-stato-bloccata .hi-ft-pillola-stato {
	background: #eee;
	color: #666;
}

.hi-ft-stato-disponibile .hi-ft-pillola-stato {
	background: rgba(216, 58, 49, .1);
	color: var(--hi-ft-primary);
}

.hi-ft-stato-completata .hi-ft-pillola-stato {
	background: rgba(17, 166, 76, .12);
	color: var(--hi-ft-secondary);
}

.hi-ft-stato-in_ritardo .hi-ft-pillola-stato {
	background: #fff4e5;
	color: #b26a00;
}