/* Horaires page specific styles */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Override main.css : le body global utilise display:flex + align-items:center,
   ce qui centre verticalement le contenu même quand il dépasse la hauteur de la
   fenêtre — résultat : la page semble "déjà scrollée" au chargement et un peu
   plus à chaque refresh. On force un alignement en haut sur cette page. */
body {
	align-items: flex-start;
}

/* Header d'accueil plus spacieux pour donner de la chaleur */
.salarie-interface .page-header {
	padding: 2.5rem 1.75rem 2rem;
}

/* Flèche retour vers le tableau de bord (praticien avec droits admin) */
.salarie-interface .page-header .back-dashboard {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 2;
}

.salarie-interface .page-header .back-dashboard:hover {
	background: rgba(255, 255, 255, 0.28);
	transform: translateX(-2px);
}

/* Mini-monogramme → tableau de bord (pattern « page intérieure », main.css) :
   ici calé sur la géométrie de la flèche ci-dessus (38px, offset 14px). */
.salarie-interface .page-header .page-home-btn {
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
}

.salarie-interface .page-header .page-home-btn img {
	height: 20px;
}

.salarie-interface .page-header .page-title {
	margin-bottom: 0.75rem;
	letter-spacing: 0.2px;
}

/* Greeting "parlé" : chaque mot apparaît entier, en fondu, avec un léger
   décalage entre les mots pour donner un rythme de phrase prononcée. */
.speak-word {
	display: inline-block;
	opacity: 0;
	animation: word-appear 0.5s ease-out forwards;
}

.speak-word:nth-child(1) { animation-delay: 0.2s; }
.speak-word:nth-child(2) { animation-delay: 0.2s; }
.speak-word:nth-child(3) { animation-delay: 0.6s; }

@keyframes word-appear {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.salarie-interface .page-header .page-subtitle {
	font-size: 0.95em;
	opacity: 0;
	margin-bottom: 0;
	animation: word-appear 0.5s ease-out 0.8s forwards;
}

.salarie-interface .page-header .auto-login-badge {
	margin-top: 1rem;
	opacity: 0;
	animation: word-appear 0.5s ease-out 1.0s forwards;
}

/* Animation entrée header : fade + léger slide-up */
@keyframes dashboard-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* La main qui salue : fade-in après le dernier mot du greeting, puis salut */
.wave-hand {
	transform-origin: 70% 70%;
	opacity: 0;
	animation: word-appear 0.5s ease-out 0.6s forwards,
	           wave 1.4s ease-in-out 1.0s 1;
}

@keyframes wave {
	 0% { transform: rotate(0deg); }
	15% { transform: rotate(14deg); }
	30% { transform: rotate(-8deg); }
	45% { transform: rotate(14deg); }
	60% { transform: rotate(-4deg); }
	75% { transform: rotate(10deg); }
	100% { transform: rotate(0deg); }
}

/* Tiles qui arrivent après que le greeting soit terminé */
.tiles-grid {
	opacity: 0;
	animation: word-appear 0.5s ease-out 1.0s forwards;
}

/* Préférence utilisateur "réduire les animations" : on coupe tout */
@media (prefers-reduced-motion: reduce) {
	.speak-word,
	.salarie-interface .page-header .page-subtitle,
	.salarie-interface .page-header .auto-login-badge,
	.tiles-grid,
	.wave-hand {
		opacity: 1;
		animation: none;
	}
}

/* Bouton discret "Noter mes heures d'hier ?" sur la page d'aujourd'hui.
   Tonalité ambre légère qui rappelle le header de la page veille, sans
   concurrencer le bouton Valider. Pensé comme une suggestion ("tu as oublié ?"). */
.yesterday-hint {
	display: block;
	text-align: center;
	text-decoration: none;
	margin-top: 0.75rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: #b45309;
	background: #fff7ed;
	border: 1px dashed #fdba74;
	border-radius: 8px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.yesterday-hint:hover,
.yesterday-hint:focus {
	background: #ffedd5;
	border-color: #f97316;
	border-style: solid;
}

/* Mode "Saisie de la veille" : header ambre pour distinguer du mode aujourd'hui.
   On surcharge le gradient bleu de main.css ainsi que la flèche inférieure. */
.salarie-interface .page-header.yesterday-mode {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.salarie-interface .page-header.yesterday-mode::after {
	border-top-color: #b45309;
}

.salarie-interface .page-header.yesterday-mode .back-to-today {
	color: #fff7ed;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.salarie-interface .page-header.yesterday-mode .back-to-today:hover {
	color: #ffffff;
}

/* Grille de tiles équilibrées (stat + planning) */
.tiles-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 1.25rem 0.75rem;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	color: #1f2937;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	min-height: 96px;
	text-align: center;
}

.tile:hover,
.tile:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
	border-color: #007ca1;
}

.tile-value {
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1.05;
	color: #1f2937;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.tile-stat.positive .tile-value {
	color: #059669;
}

.tile-stat.negative .tile-value {
	color: #dc2626;
}

.tile-icon {
	font-size: 1.85rem;
	line-height: 1;
}

.tile-label {
	font-size: 0.85rem;
	color: #6b7280;
	font-weight: 500;
}

/* ============================================================
   WIDGET H. SUP ANNUEL (cliquable -> detail-heures-sup)
   ============================================================ */

.hsup-widget-card {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: white;
	border: 1px solid #e9ecef;
	border-left: 4px solid #9ca3af;
	border-radius: 12px;
	padding: 0.75rem 1rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	text-decoration: none;
	color: #1f2937;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hsup-widget-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hsup-widget-card.positive {
	border-left-color: #10b981;
}

.hsup-widget-card.negative {
	border-left-color: #ef4444;
}

.hsup-widget-label {
	font-size: 0.95rem;
	color: #4b5563;
	font-weight: 500;
}

.hsup-widget-total {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1f2937;
	font-variant-numeric: tabular-nums;
}

.hsup-widget-card.positive .hsup-widget-total {
	color: #059669;
}

.hsup-widget-card.negative .hsup-widget-total {
	color: #dc2626;
}

/* Barre de navigation */
.nav-header {
	background: #007ca1;
	color: white;
	padding: 1em;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	height: 72px;
}

.nav-header h1 {
	margin: 0;
	font-size: 1.5em;
	font-weight: 600;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nav-links a {
	color: white;
	text-decoration: none;
	margin-left: 1em;
	padding: 0.5em 1em;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	transition: background 0.3s ease;
}

.nav-links a:hover {
	background: rgba(255, 255, 255, 0.2);
}

.container {
	max-width: 28rem;
	margin: 0 auto;
}

.card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	margin-bottom: 1rem;
	padding: 1rem;
}

.header {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

.back-btn {
	padding: 0.5rem;
	background: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin-right: 0.75rem;
	transition: background-color 0.2s;
}

.back-btn:hover {
	background-color: #f3f4f6;
}

.clock-icon {
	width: 2rem;
	height: 2rem;
	margin-right: 0.75rem;
	color: #007ca1;
}

.employee-info h1,
.employee-info h2 {
	font-size: 1.25rem;
	font-weight: bold;
	color: #1f2937;
	margin-bottom: 0.25rem;
}

.employee-info p {
	font-size: 0.875rem;
	color: #6b7280;
}

.date-banner {
	background-color: #f0f8fb;
	border-left: 4px solid #007ca1;
	border-radius: 8px;
	padding: 0.75rem;
	text-align: center;
	margin-bottom: 1rem;
}

.date-banner p {
	color: #005f7a;
	font-weight: 500;
}

/* Styles pour jour férié */
.holiday-banner {
	background-color: #fef2f2;
	border-left: 4px solid #ef4444;
	border-radius: 8px;
	padding: 0.75rem;
	text-align: center;
	margin-bottom: 1rem;
}

.holiday-banner p {
	color: #dc2626;
	font-weight: 500;
}

/* ============================================================
   Layout compact horaires : "● Matin   [08:30] → [12:00]"
   Une ligne par moitié de journée.
   ============================================================ */

.time-section {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.time-section:last-of-type {
	margin-bottom: 1rem;
}

.time-section-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #1f2937;
	text-align: center;
}

.time-section-inputs {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 1;
	min-width: 0;
}

.time-section-inputs .time-field {
	flex: 1;
	min-width: 0;
}

.time-section-inputs .time-input {
	padding: 0.55rem 0.4rem;
	font-size: 1rem;
	min-width: 0;
}

.time-section-inputs .anomaly-icon {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 0.8rem;
	height: 0.8rem;
}

.time-arrow {
	color: #9ca3af;
	font-weight: 500;
	flex-shrink: 0;
}

.time-section .absence-block {
	flex: 1;
}

/* Ancienne classe (gardée pour compat éventuelle, plus utilisée ici) */
.section-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

.section-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	margin-right: 0.5rem;
}

.morning-dot {
	background-color: #fbbf24;
}

.afternoon-dot {
	background-color: #fb923c;
}

.time-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.time-field {
	display: flex;
	flex-direction: column;
	position: relative;
}

.time-field label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.anomaly-icon {
	width: 1rem;
	height: 1rem;
	color: #ef4444;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.anomaly-icon.visible {
	opacity: 1;
}

.time-input {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	text-align: center;
	font-size: 1.125rem;
	font-family: "Courier New", monospace;
	transition: all 0.2s;
}

/* Android (Chrome) : la valeur d'un input time est un pseudo-élément aligné
   à gauche — le text-align du champ ne s'y applique pas. On centre la valeur
   quand le navigateur le supporte (Samsung Internet l'ignore : c'est le champ
   resserré ci-dessous qui fait le travail chez lui). Ne PAS toucher à
   ::-webkit-datetime-edit : lui donner width:100% écrase la flèche du picker. */
.time-input::-webkit-date-and-time-value {
	text-align: center;
}

/* Sur tactile : champ resserré sur la valeur — Samsung Internet aligne
   l'heure à gauche quoi qu'il arrive, un champ qui épouse son contenu
   (heure + flèche du picker) rend ça imperceptible. width:auto = taille
   intrinsèque du widget natif, bornée pour garder une zone de tap correcte. */
@media (pointer: coarse) {
	/* .time-field est en flex-direction:column (règle de base) : le centrage
	   horizontal passe donc par align-items, pas justify-content */
	.time-field {
		align-items: center;
	}

	/* Largeur FIXE : un champ vide a une taille intrinsèque plus étroite
	   qu'un champ rempli — tous identiques, pleins ou vides */
	.time-input {
		width: 6.2em;
	}
}

.time-input:focus {
	outline: none;
	border-color: #007ca1;
	box-shadow: 0 0 0 2px rgba(0, 124, 161, 0.2);
}

.time-input:disabled {
	background-color: #f9fafb;
	color: #9ca3af;
	cursor: not-allowed;
}

.submit-btn {
	width: 100%;
	padding: 0.75rem 1.25rem;
	background-color: #007ca1;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.submit-btn:hover:not(:disabled) {
	background-color: #005f7a;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.submit-btn:disabled {
	background-color: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

.spinner {
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

.message {
	padding: 1rem;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
	flex-wrap: wrap;
}

.message.success {
	background-color: #ecfdf5;
	border: 1px solid #d1fae5;
	color: #065f46;
}

.message.error {
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.message.info {
	background-color: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
}

.message.warning {
	background-color: #fffbeb;
	border: 1px solid #fed7aa;
	color: #92400e;
}

.message-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.message-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Compense visuellement l'absence d'icône (modes canRetry / reconnect où
   l'icône est en display:none) : aligne le texte sur la même colonne que
   les messages standards, sans réserver de hauteur fantôme. */
.message-text.is-icon-spaced {
	padding-left: calc(1.25rem + 0.5rem);
}

.message-retry-btn {
	margin-left: auto;
	padding: 0.625rem 1rem;
	min-height: 44px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.message-retry-btn:hover {
	background: rgba(255, 255, 255, 0.4);
}

.message-retry-btn:active {
	background: rgba(255, 255, 255, 0.7);
}

.message-retry-btn.hidden {
	display: none;
}

@media (max-width: 540px) {
	.message-retry-btn {
		flex-basis: 100%;
		margin-left: 0;
		margin-top: 0.5rem;
		white-space: normal;
	}
}

.hidden {
	display: none;
}

.actions-card h4 {
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	margin-bottom: 0.75rem;
}

.actions-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.action-btn {
	padding: 0.5rem 0.75rem;
	border: none;
	border-radius: 8px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}

.clear-btn {
	background-color: #f3f4f6;
	color: #374151;
}

.clear-btn:hover {
	background-color: #e5e7eb;
}

.standard-btn {
	background-color: #e6f3f7;
	color: #005f7a;
}

.standard-btn:hover {
	background-color: #d1ecf1;
}

.motif-btn {
	background-color: #e6f3f7;
	color: #005f7a;
	display: block;
	max-width: 60%;
	margin: 1.25rem auto;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.motif-btn:hover {
	background-color: #d1ecf1;
}

/* Formulaire motif dans BadouDialog */
.motif-form {
	text-align: left;
	padding: 0.5rem 0;
}

.motif-form-group {
	margin-bottom: 1rem;
}

.motif-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: #2c3e50;
	font-size: 0.9rem;
}

.motif-select,
.motif-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 0.9rem;
	font-family: inherit;
	background: #fff;
	transition: border-color 0.2s;
}

.motif-select:focus,
.motif-input:focus {
	outline: none;
	border-color: #007ca1;
	box-shadow: 0 0 0 2px rgba(0, 124, 161, 0.15);
}

/* Bloc d'absence (emoji à la place des horaires) */
.absence-block {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 2;
	padding: 1rem;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.absence-emoji {
	font-size: 1.5rem;
	line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
	body {
		padding: 0.5em;
		padding-top: 0.5em;
	}

	.nav-header {
		display: none;
	}

	.container {
		max-width: 100%;
	}
}

.container {
	padding: 0;
	background: none;
	box-shadow: none;
	text-align: left;
}

.container p {
	margin-bottom: 0;
}