/**
 * Area Personale — pannello riservato Álvaro (modelli/calendario/prenotazioni/
 * solicitudes). Utilitario, non marketing: stessi token colore/font di
 * style.css (navy/cyan/Manrope) ma densità dati alta, niente hero/animazioni.
 * Sostituisce lo scaffold senza CSS — vedi CLAUDE.md progetto per lo storico.
 */

#zodrid-login,
#zodrid-no-access {
	max-width: 440px;
	margin: 72px auto 96px;
	padding: 0 24px;
	text-align: center;
	color: var(--white);
}
/* Card login — stessa ricetta vetro delle card sito (navy-card + bordo
   tenue), form compatto centrato con logo sopra il titolo. */
.zodrid-login__card {
	background: var(--navy-card, rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 20px;
	padding: 36px 32px 32px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.zodrid-login__logo {
	height: 72px;
	width: auto;
	object-fit: contain;
	margin: 0 auto 16px;
	display: block;
}
#zodrid-login .login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--white-70);
	margin: 4px 0 18px;
}
#zodrid-login .login-remember label { display: flex; align-items: center; gap: 8px; margin: 0; }
#zodrid-login .login-remember input { accent-color: var(--cyan); width: 16px; height: 16px; }
#zodrid-login input[type="submit"]:hover { filter: brightness(1.08); }
#zodrid-login input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
#zodrid-login h1,
#zodrid-no-access h1 {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 32px;
	margin-bottom: 12px;
}
#zodrid-login p,
#zodrid-no-access p {
	color: var(--white-70);
	margin-bottom: 24px;
}
#zodrid-login form p { margin-bottom: 14px; text-align: left; }
#zodrid-login label { display: block; font-size: 13px; color: var(--white-70); margin-bottom: 6px; }
#zodrid-login input[type="text"],
#zodrid-login input[type="password"] {
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--radius-item);
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	font-family: var(--font-body);
}
#zodrid-login input[type="submit"] {
	background: var(--cyan);
	color: var(--navy);
	border: none;
	border-radius: var(--radius-pill);
	padding: 13px 28px;
	font-weight: var(--fw-bold);
	cursor: pointer;
	width: 100%;
	font-family: var(--font-body);
	font-size: 15px;
}

#zodrid-area-personale {
	max-width: 1280px;
	margin: 0 auto;
	/* Header sito nascosto su questo template (style.css) — niente
	   compenso 140px, solo respiro normale. */
	padding: 32px 24px 80px;
	color: var(--white);
	font-family: var(--font-body);
}
.ap-header__right { display: flex; align-items: center; gap: 16px; }
#zodrid-area-personale > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	font-size: 14px;
	color: var(--white-70);
}
#zodrid-area-personale > header a { color: var(--cyan); font-weight: var(--fw-semibold); }

#zodrid-area-personale nav {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	flex-wrap: wrap;
}
#zodrid-area-personale nav button {
	background: none;
	border: none;
	color: var(--white-70);
	padding: 10px 18px;
	font-size: 14px;
	font-weight: var(--fw-semibold);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
#zodrid-area-personale nav button:hover { color: var(--white); }
#zodrid-area-personale nav button[aria-pressed="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ---- Inicio: dashboard contatori ---- */
.ap-dash {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.ap-dash__card {
	background: var(--navy-card);
	border: 1px solid transparent;
	border-radius: var(--radius-card-md);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--white);
	font-family: var(--font-body);
	text-align: left;
	cursor: default;
}
button.ap-dash__card { cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast); }
button.ap-dash__card:hover { transform: translateY(-2px); border-color: rgba(70, 237, 253, 0.4); }
.ap-dash__card--urgent { border-color: rgba(245, 158, 11, 0.55); }
.ap-dash__num { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 40px; line-height: 1; color: var(--cyan); }
.ap-dash__card--urgent .ap-dash__num { color: #F59E0B; }
.ap-dash__label { font-size: 13px; color: var(--white-70); }

/* ---- Badge stato + filtri + vuoto ---- */
.ap-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: var(--fw-bold);
	white-space: nowrap;
}
.ap-badge--ok   { background: rgba(22, 163, 74, 0.2);  color: #4ADE80; }
.ap-badge--ko   { background: rgba(220, 38, 38, 0.2);  color: #F87171; }
.ap-badge--warn { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }
.ap-badge--info { background: rgba(70, 237, 253, 0.15); color: var(--cyan); }
.ap-badge--muted { background: rgba(148, 163, 184, 0.2); color: #94A3B8; }

.ap-filter { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ap-filter button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--white-70);
	border-radius: var(--radius-pill);
	padding: 6px 16px;
	font-size: 13px;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}
.ap-filter button:hover { color: var(--white); }
.ap-filter button.is-active { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

.ap-empty { color: var(--white-60); font-size: 14px; }

/* ---- Modelli: form per modello ---- */
[data-panel="modelli"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
/* display:grid sopra vincerebbe sull'attributo hidden (stesso bug già
   visto su .ap-modal) — ribadire esplicitamente. Vale per ogni pannello. */
#zodrid-area-personale section[data-panel][hidden] { display: none; }
[data-panel="modelli"] form {
	background: var(--navy-card);
	border-radius: var(--radius-card-md);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
[data-panel="modelli"] h3 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 20px; margin-bottom: 4px; }
[data-panel="modelli"] label { display: block; font-size: 12px; color: var(--white-70); }
[data-panel="modelli"] input,
[data-panel="modelli"] textarea {
	width: 100%;
	margin-top: 4px;
	padding: 8px 12px;
	border-radius: var(--radius-item);
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	font-family: var(--font-body);
}
[data-panel="modelli"] button[type="submit"] {
	align-self: flex-start;
	background: var(--cyan);
	color: var(--navy);
	border: none;
	border-radius: var(--radius-pill);
	padding: 8px 20px;
	font-weight: var(--fw-bold);
	cursor: pointer;
	margin-top: 4px;
}
[data-panel="modelli"] span { font-size: 12px; color: var(--white-60); }

.ap-moto__head { display: flex; align-items: center; gap: 12px; }
.ap-moto__thumb { width: 64px; height: 44px; object-fit: contain; flex-shrink: 0; }
.ap-moto__toggles { display: flex; gap: 16px; margin: 4px 0 2px; }
.ap-toggle { display: inline-flex !important; align-items: center; gap: 7px; font-size: 13px !important; color: var(--white) !important; cursor: pointer; }
.ap-toggle input { width: auto !important; margin: 0 !important; accent-color: var(--cyan); }
.ap-toggle--sm { font-size: 12px !important; color: var(--white-70) !important; min-width: 90px; }
.ap-moto__subtitle { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--white-60); margin-top: 6px; }
.ap-moto__durata { display: flex; align-items: center; gap: 12px; }
.ap-moto__durata input[type="number"] { flex: 1; margin-top: 0 !important; }

/* ---- Tabelle (Reservas/Solicitudes) ---- */
[data-panel="prenotazioni"] table,
[data-panel="solicitudes"] table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
[data-panel="prenotazioni"] th,
[data-panel="solicitudes"] th {
	text-align: left;
	padding: 10px 12px;
	color: var(--white-60);
	font-weight: var(--fw-semibold);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
[data-panel="prenotazioni"] td,
[data-panel="solicitudes"] td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	vertical-align: top;
}
[data-panel="prenotazioni"] button,
[data-panel="solicitudes"] button {
	background: var(--cyan);
	color: var(--navy);
	border: none;
	border-radius: var(--radius-pill);
	padding: 6px 14px;
	font-size: 12px;
	font-weight: var(--fw-bold);
	cursor: pointer;
	margin-right: 6px;
}
[data-panel="prenotazioni"] button:disabled,
[data-panel="solicitudes"] button:disabled { opacity: 0.5; cursor: default; }

/* ---- Calendario ---- */
.ap-calendario__toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ap-calendario__toolbar label { font-size: 13px; color: var(--white-70); }
.ap-calendario__toolbar select {
	padding: 8px 14px;
	border-radius: var(--radius-item);
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	font-family: var(--font-body);
}
#ap-calendar {
	background: var(--navy-card);
	border-radius: var(--radius-card-md);
	padding: 16px;
	color: var(--navy);
}
#ap-calendar .fc { color: var(--navy); }
#ap-calendar .fc-theme-standard td,
#ap-calendar .fc-theme-standard th { border-color: rgba(6, 42, 79, 0.12); }
#ap-calendar .fc-daygrid-day-frame { background: var(--white); border-radius: 8px; }
#ap-calendar .fc-toolbar-title { color: var(--white); font-family: var(--font-display); font-weight: var(--fw-extrabold); }
#ap-calendar .fc-button {
	background: var(--cyan) !important;
	border: none !important;
	color: var(--navy) !important;
	font-weight: var(--fw-semibold);
	text-transform: capitalize;
}
#ap-calendar .fc-button:hover { transform: translateY(-1px); }
#ap-calendar .fc-day-today .fc-daygrid-day-frame { outline: 2px solid var(--cyan); outline-offset: -2px; }
/* Vista settimana/giorno (timeGrid): griglia oraria su fondo bianco,
   etichette orari leggibili sul card navy */
#ap-calendar .fc-timegrid-body, #ap-calendar .fc-timegrid-slot { background: var(--white); }
#ap-calendar .fc-timegrid-slot-label, #ap-calendar .fc-timegrid-axis { background: var(--white); color: var(--navy); font-size: 12px; }
#ap-calendar .fc-col-header-cell { background: var(--white); }
#ap-calendar .fc-col-header-cell-cushion { color: var(--navy); font-weight: var(--fw-semibold); }
#ap-calendar .fc-timegrid-now-indicator-line { border-color: var(--cyan); }
#ap-calendar .fc-toolbar { flex-wrap: wrap; gap: 8px; }

.ap-legend { display: flex; gap: 20px; margin-top: 14px; font-size: 12px; color: var(--white-70); }
.ap-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ap-legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ap-legend__item--available .ap-legend__dot { background: #46EDFD; }
.ap-legend__item--blocked .ap-legend__dot { background: #DC2626; }

/* ---- Modal periodo ---- */
.ap-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.ap-modal[hidden] { display: none; }
.ap-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 18, 36, 0.7); }
.ap-modal__card {
	position: relative;
	background: var(--navy-card);
	border-radius: var(--radius-card-md);
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	color: var(--white);
}
.ap-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ap-modal__header h3 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 18px; }
.ap-modal__close { background: none; border: none; color: var(--white-70); font-size: 24px; cursor: pointer; line-height: 1; }
.ap-modal__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ap-field-row { display: flex; gap: 12px; }
.ap-field { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--white-70); }
.ap-field input,
.ap-field select {
	padding: 9px 12px;
	border-radius: var(--radius-item);
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 14px;
}
.ap-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ap-modal__footer-right { display: flex; gap: 10px; margin-left: auto; }
.ap-btn { border: none; border-radius: var(--radius-pill); padding: 9px 20px; font-weight: var(--fw-bold); font-size: 13px; cursor: pointer; }
.ap-btn--primary { background: var(--cyan); color: var(--navy); }
.ap-btn--ghost { background: transparent; color: var(--white-70); border: 1px solid rgba(255, 255, 255, 0.2); }
.ap-btn--danger { background: transparent; color: #F87171; border: 1px solid rgba(248, 113, 113, 0.4); }

#zodrid-login .zodrid-lang-switcher { justify-content: center; margin-bottom: 20px; }

@media (max-width: 640px) {
	#zodrid-area-personale { padding: 24px 16px 60px; }
	.ap-field-row { flex-direction: column; }
}