/**
 * Stili: Semaforo Pre-Immersione
 *
 * BEM namespace: .sd-predive-*
 *
 * @package SD_Logbook
 */

/* ================================================================
   WRAPPER PRINCIPALE
   ================================================================ */

.sd-predive-wrap {
	max-width: 640px;
}

/* ================================================================
   HEADER
   ================================================================ */

.sd-predive-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.sd-predive-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	color: var(--sd-text, #1a1a2e);
}

/* ================================================================
   STATO LOADING
   ================================================================ */

.sd-predive-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 0;
	color: var(--sd-muted, #6b7280);
}

.sd-predive-spinner {
	width: 36px;
	height: 36px;
	border: 4px solid #e5e7eb;
	border-top-color: var(--sd-accent, #0e9f6e);
	border-radius: 50%;
	animation: sd-spin 0.8s linear infinite;
}

@keyframes sd-spin {
	to { transform: rotate(360deg); }
}

/* ================================================================
   CORPO
   ================================================================ */

.sd-predive-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ================================================================
   RIGA SEMAFORO + GLICEMIA
   ================================================================ */

.sd-predive-semaphore-row {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* Il semaforo vero e proprio */
.sd-predive-semaphore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: #1a1a2e;
	border-radius: 40px;
	padding: 12px 10px;
	box-shadow: 0 4px 18px rgba(0,0,0,.25);
	min-width: 52px;
}

.sd-semaphore-light {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	opacity: 0.18;
	transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

.sd-semaphore-red    { background: #ef4444; }
.sd-semaphore-yellow { background: #f59e0b; }
.sd-semaphore-green  { background: #10b981; }

/* Luce attiva */
.sd-semaphore-light.sd-active {
	opacity: 1;
}

.sd-semaphore-red.sd-active    { box-shadow: 0 0 16px 4px rgba(239,68,68,.7); }
.sd-semaphore-yellow.sd-active { box-shadow: 0 0 16px 4px rgba(245,158,11,.7); }
.sd-semaphore-green.sd-active  { box-shadow: 0 0 16px 4px rgba(16,185,129,.7); }

/* Blocco testo glicemia */
.sd-predive-glucose-block {
	flex: 1;
}

.sd-predive-glucose-value {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: var(--sd-text, #1a1a2e);
	letter-spacing: -1px;
}

.sd-predive-glucose-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.sd-predive-arrow {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--sd-muted, #6b7280);
}

.sd-predive-age {
	font-size: .82rem;
	color: var(--sd-muted, #6b7280);
}

.sd-predive-status-label {
	margin-top: 8px;
	font-size: .9rem;
	font-weight: 600;
}

/* Colori etichetta stato */
.sd-predive-status-red    { color: #ef4444; }
.sd-predive-status-yellow { color: #d97706; }
.sd-predive-status-green  { color: #059669; }

/* ================================================================
   RACCOMANDAZIONE
   ================================================================ */

.sd-predive-recommendation {
	border-left: 4px solid var(--sd-accent, #0e9f6e);
	padding: 12px 16px;
	background: #f0fdf4;
	border-radius: 0 8px 8px 0;
	font-size: .95rem;
	line-height: 1.5;
	color: #065f46;
}

.sd-predive-wrap.sd-predive-red .sd-predive-recommendation {
	border-color: #ef4444;
	background: #fef2f2;
	color: #991b1b;
}

.sd-predive-wrap.sd-predive-yellow .sd-predive-recommendation {
	border-color: #f59e0b;
	background: #fffbeb;
	color: #92400e;
}

/* ================================================================
   LISTA AVVISI
   ================================================================ */

.sd-predive-alerts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sd-predive-alerts li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: .88rem;
	line-height: 1.45;
}

.sd-alert-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.sd-predive-alerts li.sd-alert-danger {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.sd-predive-alerts li.sd-alert-warning {
	background: #fffbeb;
	color: #92400e;
	border: 1px solid #fde68a;
}

.sd-predive-alerts li.sd-alert-success {
	background: #f0fdf4;
	color: #065f46;
	border: 1px solid #bbf7d0;
}

.sd-predive-alerts li.sd-alert-info {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

/* ================================================================
   TIMESTAMP
   ================================================================ */

.sd-predive-timestamp {
	font-size: .78rem;
	color: var(--sd-muted, #9ca3af);
	margin: 0;
	text-align: right;
}

/* ================================================================
   ERRORE
   ================================================================ */

.sd-predive-error {
	margin-top: 12px;
}

/* ================================================================
   DISCLAIMER
   ================================================================ */

.sd-predive-disclaimer {
	font-size: 1rem;
	font-weight: 800;
	color: #991b1b;
	background: #fef2f2;
	border: 2px solid #dc2626;
	border-radius: 10px;
	padding: 12px 14px;
	margin-top: 12px;
	line-height: 1.55;
}

.sd-predive-disclaimer-icon {
	vertical-align: -3px;
	margin-right: 6px;
	color: #b91c1c;
	stroke-width: 2.4;
}

/* ================================================================
   AVVISO NO CGM
   ================================================================ */

.sd-predive-no-cgm {
	margin-top: 16px;
}

/* ================================================================
   LEGENDA COLORI
   ================================================================ */

.sd-predive-legend {
	margin-top: 18px;
	padding: 14px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #f8fafc;
}

.sd-predive-legend-title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 800;
	color: #0f172a;
}

.sd-predive-legend-item {
	border-left: 4px solid #64748b;
	background: #ffffff;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.sd-predive-legend-item:last-child {
	margin-bottom: 0;
}

.sd-predive-legend-head {
	margin: 0 0 6px;
	font-size: .92rem;
	font-weight: 800;
}

.sd-predive-legend-item ul {
	margin: 0;
	padding-left: 18px;
}

.sd-predive-legend-item li {
	margin: 3px 0;
	font-size: .88rem;
	line-height: 1.45;
}

.sd-predive-legend-red {
	border-left-color: #dc2626;
	background: #fff7f7;
}

.sd-predive-legend-red .sd-predive-legend-head {
	color: #991b1b;
}

.sd-predive-legend-yellow {
	border-left-color: #d97706;
	background: #fffbeb;
}

.sd-predive-legend-yellow .sd-predive-legend-head {
	color: #92400e;
}

.sd-predive-legend-green {
	border-left-color: #059669;
	background: #f0fdf4;
}

.sd-predive-legend-green .sd-predive-legend-head {
	color: #065f46;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media ( max-width: 480px ) {
	.sd-predive-glucose-value {
		font-size: 2.2rem;
	}

	.sd-predive-semaphore-row {
		gap: 16px;
	}

	.sd-semaphore-light {
		width: 26px;
		height: 26px;
	}
}