/* =========================================================
 * Diario Giornaliero — stile coerente con Calendario Operativo / Fornitori
 * (stessa palette, stesso font stack, stessi radius e pattern di classi
 * "front-*" per le pagine Oxygen protette da password).
 * ========================================================= */

.diario-wrap {
	max-width: 100%;
}

.diario-card {
	background: #fff;
	border: 1px solid #ccd0d4;
	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
	padding: 16px 20px;
	margin: 16px 0 24px;
	max-width: 900px;
}

.diario-section-title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
}

.diario-description {
	font-size: 13px;
	font-weight: 400;
	color: #646970;
}

/* =========================================================
 * FRONT-END (shortcode) — indipendente dalle classi wp-admin, stesso
 * identico linguaggio visivo degli altri plugin della famiglia.
 * ========================================================= */
.diario-front-wrap {
	max-width: 900px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #23282d;
	box-sizing: border-box;
}

.diario-front-wrap *,
.diario-front-wrap *::before,
.diario-front-wrap *::after {
	box-sizing: inherit;
}

.diario-front-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 8px;
}

.diario-front-title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.diario-front-subtitle {
	margin: 0;
	font-size: 14px;
	color: #646970;
}

.diario-logout-link {
	font-size: 13px;
	font-weight: 600;
	color: #d63638;
	text-decoration: none;
}

.diario-logout-link:hover {
	text-decoration: underline;
}

/* --- Notifiche (bozza salvata / diario inviato / errori) --- */
.diario-front-notice {
	padding: 10px 14px;
	border-radius: 6px;
	margin: 0 0 18px;
	font-size: 14px;
	border-left: 4px solid;
	background: #f6f7f7;
}

.diario-front-notice p {
	margin: 0;
}

.diario-front-notice-success { background: #f0f6ec; border-color: #46b450; }
.diario-front-notice-error   { background: #fbeaea; border-color: #d63638; }
.diario-front-notice-warning { background: #fef8ee; border-color: #dba617; }

/* --- Campi standard --- */
.diario-front-wrap select,
.diario-front-wrap input[type="text"],
.diario-front-wrap input[type="password"],
.diario-front-wrap input[type="email"],
.diario-front-wrap input[type="number"],
.diario-front-wrap input[type="date"],
.diario-front-wrap input[type="time"],
.diario-front-wrap textarea {
	padding: 8px 10px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #23282d;
	background-color: #fff;
	max-width: 100%;
}

.diario-front-wrap textarea {
	width: 100%;
	resize: vertical;
}

.diario-front-wrap fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	/* I <fieldset> hanno un min-width intrinseco che li fa "resistere" al
	   restringimento (non tengono conto del contenuto scrollabile al loro
	   interno): senza questo azzeramento, su schermi stretti il fieldset che
	   avvolge tutto il form si allarga per contenere la tabella "Cosa ho
	   fatto" e tutta la PAGINA finisce per scorrere in orizzontale, invece
	   che solo quella tabella nel suo riquadro dedicato. */
	min-width: 0;
}

.diario-front-wrap fieldset[disabled] input,
.diario-front-wrap fieldset[disabled] select,
.diario-front-wrap fieldset[disabled] textarea {
	background-color: #f6f7f7;
	color: #646970;
}

/* --- "Dati di oggi" --- */
.diario-header-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.diario-header-fields label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3338;
}

.diario-worked-hours {
	font-size: 14px;
	margin-left: auto;
}

.diario-worked-hours strong {
	color: #2271b1;
}

/* --- Tabella "Piano di oggi" --- */
.diario-piano-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 8px;
}

.diario-piano-table th,
.diario-piano-table td {
	padding: 5px 6px;
	text-align: left;
	vertical-align: middle;
}

.diario-piano-table thead th {
	font-size: 12px;
	font-weight: 600;
	color: #646970;
	border-bottom: 1px solid #e2e4e7;
}

.diario-piano-table td input[type="text"] {
	width: 100%;
}

.diario-minuti-input {
	width: 90px !important;
}

/* --- Tabella "Cosa ho fatto" (più colonne: scorre in orizzontale su mobile) --- */
.diario-attivita-scroll {
	overflow-x: auto;
}

/* Promemoria visivo che la tabella qui sotto si scorre in orizzontale:
 * serve solo quando la tabella (720px min-width) non entra nella card, cioè
 * sotto la soglia scelta qui sotto — su schermi più larghi si nasconde
 * perché la tabella è già interamente visibile e lo scorrimento non serve. */
.diario-scroll-hint {
	display: none;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
}

@media (max-width: 800px) {
	.diario-scroll-hint {
		display: block;
	}
}

.diario-attivita-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	margin: 0 0 8px;
}

.diario-attivita-table th,
.diario-attivita-table td {
	padding: 5px 6px;
	text-align: left;
	vertical-align: middle;
}

.diario-attivita-table thead th {
	font-size: 12px;
	font-weight: 600;
	color: #646970;
	border-bottom: 1px solid #e2e4e7;
	white-space: nowrap;
}

.diario-attivita-table td input[type="text"] {
	width: 160px;
}

.diario-attivita-table td select {
	width: 100%;
	min-width: 110px;
}

/* --- "+ altre righe" (dettagli progressivi) --- */
.diario-more-rows {
	margin: 4px 0 10px;
}

.diario-more-rows > summary {
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	color: #2271b1;
	padding: 4px 0;
}

.diario-more-rows > summary::-webkit-details-marker {
	display: none;
}

.diario-more-rows > summary::before {
	content: "+ ";
}

/* --- "Fine giornata" / "Straordinario" (domande/risposte) — etichetta
 * SEMPRE sopra il campo, a tutte le larghezze (non solo su mobile): niente
 * tabella a due colonne che su schermi stretti lasciava poco spazio al
 * testo scritto. --- */
.diario-qa-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.diario-qa-item label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 13px;
	color: #2c3338;
}

.diario-qa-item textarea {
	width: 100%;
}

/* --- Sezione "Straordinario" (aperta solo se già compilata) --- */
.diario-straord-toggle {
	margin: 0 0 24px;
	border: 1px solid #dba617;
	border-radius: 6px;
	background: #fffbf2;
}

.diario-straord-toggle > summary {
	cursor: pointer;
	list-style: none;
	padding: 12px 16px;
	font-weight: 700;
	font-size: 14px;
	color: #a06000;
}

.diario-straord-toggle > summary::-webkit-details-marker {
	display: none;
}

.diario-straord-toggle[open] > summary {
	border-bottom: 1px solid #f0dcae;
}

.diario-straord-body {
	margin: 0;
	max-width: none;
	box-shadow: none;
	border: 0;
	background: transparent;
	padding: 4px 16px 16px;
}

/* --- Legenda codici --- */
.diario-legend-toggle {
	margin: 8px 0 24px;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	background: #fff;
}

.diario-legend-toggle > summary {
	cursor: pointer;
	list-style: none;
	padding: 10px 14px;
	font-weight: 700;
	font-size: 14px;
	color: #2271b1;
}

.diario-legend-toggle > summary::-webkit-details-marker {
	display: none;
}

.diario-legend-toggle[open] > summary {
	border-bottom: 1px solid #e0e0e0;
}

.diario-legend-body {
	padding: 12px 14px;
	font-size: 12px;
	color: #50575e;
	line-height: 1.6;
}

.diario-legend-body p {
	margin: 0 0 8px;
}

/* --- Azioni finali (Salva bozza / Invia diario) --- */
.diario-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 24px;
}

.diario-front-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 6px;
	border: 1px solid #ccd0d4;
	background-color: #f6f7f7;
	color: #2c3338;
	cursor: pointer;
}

.diario-front-btn:hover {
	background-color: #f0f0f1;
	border-color: #949494;
	color: #000;
}

.diario-front-btn-primary {
	background-color: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

.diario-front-btn-primary:hover {
	background-color: #135e96;
	border-color: #0a4b78;
	color: #fff;
}

/* --- Elenco diari (filtro + tabella) --- */
.diario-front-form-table {
	width: 100%;
	max-width: 560px;
	border-collapse: collapse;
	margin: 0 0 8px;
}

.diario-front-form-table th {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px 10px 0;
	width: 220px;
	font-weight: 600;
	font-size: 14px;
}

.diario-front-form-table td {
	padding: 8px 0;
}

/* Avvolge sia la tabella "wp-list-table" (bacheca) sia la
 * "diario-front-list-table" (front-end): su schermi stretti scorre solo
 * questo riquadro in orizzontale, non l'intera pagina. */
.diario-table-scroll {
	overflow-x: auto;
	margin: 0 0 8px;
}

.diario-front-list-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: #fff;
}

.diario-front-list-table th,
.diario-front-list-table td {
	border: 1px solid #e2e4e7;
	padding: 9px 12px;
	text-align: left;
	font-size: 13px;
	vertical-align: middle;
}

.diario-front-list-table thead th {
	background: #f0f0f1;
	font-weight: 600;
}

.diario-front-list-table tbody tr:nth-child(odd) {
	background: #fafafa;
}

/* --- Filtro elenco diari --- */
.diario-card form[method="get"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* --- Tab "Diari" / "Impostazioni" (gestione front-end) --- */
.diario-admin-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 20px;
	border-bottom: 1px solid #dcdcde;
	padding: 0;
}

.diario-admin-tabs a {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #50575e;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}

.diario-admin-tabs a:hover {
	color: #1d2327;
}

.diario-tab-active {
	color: #2271b1 !important;
	border-bottom-color: #2271b1 !important;
}

/* --- Vista di sola lettura di un singolo diario (admin) --- */
.diario-view h3 {
	margin: 0 0 6px;
	font-size: 18px;
}

.diario-view h4 {
	margin: 18px 0 6px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: #646970;
}

.diario-view ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.diario-view li {
	margin: 0 0 4px;
	font-size: 13px;
}

.diario-view p {
	font-size: 13px;
	margin: 0 0 8px;
}

/* --- Gate password (accesso dipendente e accesso gestione) --- */
.diario-gate-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	min-height: 40vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 12px;
}

.diario-gate-box {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 28px 24px;
	max-width: 340px;
	width: 100%;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.diario-gate-box h3 {
	margin: 0 0 16px;
	font-size: 18px;
}

.diario-gate-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.diario-gate-form input[type="password"] {
	padding: 10px 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	font-size: 15px;
}

.diario-gate-submit {
	padding: 10px 16px;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.diario-gate-submit:hover {
	background: #135e96;
}

.diario-gate-error {
	color: #c40000;
	font-size: 14px;
	margin: 0 0 10px;
}

@media (max-width: 700px) {
	.diario-front-form-table,
	.diario-front-form-table tbody,
	.diario-front-form-table tr,
	.diario-front-form-table th,
	.diario-front-form-table td {
		display: block;
		width: 100% !important;
	}

	.diario-front-form-table th {
		padding: 14px 0 4px;
	}

	.diario-header-fields {
		flex-direction: column;
		align-items: stretch;
	}

	.diario-worked-hours {
		margin-left: 0;
	}
}