/* ============================================================
   Sprint 5 — Responsive global TransmissionsPro
   Cible: phones (<=720px) et tablets (<=1024px)
   Approche: surcharge minimale, pas de refonte
   ============================================================ */

/* Tablet & mobile : sidebar plus etroite */
@media (max-width: 1024px) {
	.sidebar {
		width: 220px !important;
	}
	.main,
	.content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.form-row {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.topbar {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
}

/* Mobile : la sidebar bascule en barre du bas / repliable */
@media (max-width: 720px) {
	body {
		font-size: 15px;
	}

	/* La sidebar devient une barre horizontale en haut */
	.sidebar {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		border-radius: 0 !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 10px 14px !important;
		overflow-x: auto !important;
	}

	/* Cache les labels NAVIGATION et les sections decoratives */
	.sidebar .nav-section-title,
	.sidebar h2,
	.sidebar h3 {
		display: none !important;
	}

	/* Brand compact */
	.sidebar .brand-title,
	.sidebar .brand small,
	.sidebar [class*="brand-sub"] {
		display: none !important;
	}

	/* Navigation items inline */
	.sidebar nav,
	.sidebar .nav,
	.sidebar [class*="navigation"] {
		display: flex !important;
		flex-direction: row !important;
		gap: 6px !important;
		flex-wrap: wrap !important;
	}

	.sidebar a,
	.sidebar button {
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	/* Main: prend toute la largeur */
	.main {
		margin-left: 0 !important;
		padding: 12px !important;
	}

	/* Cartes pleine largeur */
	.card {
		width: 100% !important;
		padding: 16px !important;
	}

	/* Topbar : titre + actions empilées */
	.topbar {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.topbar .title {
		font-size: 18px !important;
	}
	.topbar .actions {
		width: 100% !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
	}
	.admin-dashboard-actions-row {
		width: 100%;
		gap: 6px !important;
	}
	.admin-dashboard-actions-row .btn {
		flex: 1;
		padding: 10px 8px !important;
		font-size: 13px !important;
	}
	.admin-dashboard-secondary-row {
		flex-direction: column;
		width: 100%;
		gap: 8px !important;
	}
	.admin-dashboard-secondary-row a {
		width: 100%;
		box-sizing: border-box;
	}

	/* Boutons + inputs taille tactile */
	.btn {
		min-height: 44px !important;
		padding: 10px 16px !important;
		font-size: 14px !important;
	}
	input,
	select,
	textarea {
		min-height: 44px !important;
		font-size: 16px !important; /* iOS evite zoom auto */
	}
	textarea {
		min-height: 160px !important;
	}

	/* Liste utilisateurs : empechement de l'horizontal scroll */
	.users-manager-grid {
		grid-template-columns: 1fr !important;
	}
	.users-right-column {
		gap: 12px !important;
	}

	/* Modale ConfirmDialog : pleine largeur */
	[role="dialog"][aria-modal="true"] > div {
		max-width: 95vw !important;
		padding: 18px !important;
	}

	/* Tables horizontalement scrollables */
	table {
		display: block !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
	}

	/* Pills compactes */
	.pill {
		font-size: 11px !important;
		padding: 4px 8px !important;
	}

	/* Stat cards super admin dashboard : 1 colonne mobile */
	.dashboard-stats,
	[class*="dashboard"] .grid {
		grid-template-columns: 1fr !important;
	}

	.rapport-mensuel-grid {
		flex-direction: column;
	}
	.rapport-mensuel-historique {
		flex: 0 0 auto;
		width: 100%;
	}
	.rapport-mensuel-contenu {
		width: 100%;
	}
	.rapport-mensuel-contenu > div {
		font-size: 13px !important;
	}
	.rapport-mensuel-generer-btn {
		align-self: stretch !important;
		justify-content: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		margin: 0 !important;
	}
	.rapport-mensuel-notes-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Phone tres petit (<=380px) */
@media (max-width: 380px) {
	.btn {
		font-size: 13px !important;
		padding: 9px 12px !important;
	}
	.topbar .title {
		font-size: 16px !important;
	}
	.card-title {
		font-size: 15px !important;
	}
}

/* Liste utilisateurs : scrollable en hauteur pour ne pas exploser la page */
.users-list-card,
[class*="users-list"],
[class*="UsersList"] {
	max-height: 70vh;
	overflow-y: auto;
}

/* Empeche l'horizontal scroll global */
html, body {
	overflow-x: hidden;
}

/* ================================================================
   Defilement des pages longues.

   `.app` impose max-height 94vh et overflow hidden dans main.css, pour
   l'effet de cadre sur grand ecran. Consequence : toute page plus haute
   que le cadre est tronquee, sans barre de defilement. Ces regles sont
   placees dans responsive.css parce qu'il est charge APRES main.css.
   ================================================================ */
.main {
	overflow-y: auto !important;
	min-height: 0 !important;
}

@media (max-width: 900px) {
	body {
		display: block !important;
		align-items: stretch !important;
		min-height: 100dvh;
	}
	body > main {
		display: block !important;
		min-height: 100dvh !important;
		align-items: stretch !important;
	}
	.app {
		width: 100% !important;
		max-width: none !important;
		min-height: 100dvh !important;
		max-height: none !important;
		border-radius: 0 !important;
		overflow: visible !important;
		display: block !important;
	}
	.main {
		overflow-y: visible !important;
		padding-bottom: 120px !important;
	}
}

/* Bouton du tiroir : en bas a gauche, au-dessus de la barre de navigation.
   En haut, il chevauchait le titre de chaque page (Ma tournee, Profil,
   Gestion de l'etablissement...). Cette zone est libre sur tous les ecrans,
   et le bouton d'ajout flottant se trouve a droite. */
.mobile-drawer-bouton {
	top: auto !important;
	bottom: 86px !important;
	left: 14px !important;
	right: auto !important;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: #0f2544 !important;
	box-shadow: 0 4px 14px rgba(2, 6, 23, 0.45) !important;
}


/* Mobile : titres de card sous les boutons flottants top bar */
@media(max-width:560px){
    .bilans-attente-page > .card-head,
    .acces-famille-page > .card-head,
    .messagerie > .card-head{
        padding-top:44px;
    }
}


/* ========================================================================
   SUIVI PATIENT : poids, glycemie, alimentation
   ======================================================================== */
.suivi-onglets{display:flex;gap:8px;margin:12px 0 16px;flex-wrap:wrap}
.suivi-onglet{padding:8px 16px;border-radius:8px;border:1px solid rgba(148,163,184,.35);
    background:transparent;cursor:pointer;font-size:14px}
.suivi-onglet.actif{background:#2563eb;color:#fff;border-color:#2563eb}
.suivi-saisie{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.suivi-saisie input,.suivi-saisie select{padding:8px 10px;border-radius:8px;
    border:1px solid rgba(148,163,184,.35);font-size:14px}
.suivi-saisie input[type=text]{flex:1;min-width:160px}
.suivi-erreur{color:#dc2626;font-size:13px;margin-bottom:12px}
.suivi-vide{color:#64748b;font-size:14px;padding:16px 0}
.suivi-courbe{width:100%;height:auto;color:#334155;margin-bottom:16px}
.suivi-liste{display:flex;flex-direction:column;gap:6px}
.suivi-ligne{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;
    background:rgba(148,163,184,.08);font-size:14px}
.suivi-ligne-date{min-width:88px;color:#64748b}
.suivi-ligne-valeur{font-weight:600;min-width:80px}
.suivi-ligne-source{font-size:12px;color:#64748b;flex:1}
.suivi-suppr{border:none;background:transparent;color:#94a3b8;cursor:pointer;
    font-size:14px;padding:0 6px}
.suivi-suppr:hover{color:#dc2626}
.suivi-jour{margin-bottom:16px;padding:12px;border-radius:10px;
    background:rgba(148,163,184,.08)}
.suivi-jour-date{font-weight:600;margin-bottom:8px;font-size:14px}
.suivi-repas-ligne{display:flex;gap:12px;padding:5px 0;font-size:14px;align-items:baseline}
.suivi-repas-moment{min-width:56px;color:#64748b;font-size:13px}
.suivi-repas-vide{color:#94a3b8;font-style:italic;font-size:13px}
.suivi-repas-contenu{flex:1}

@media(max-width:560px){
    .suivi-patient-page > .card-head{padding-top:44px}
    .suivi-saisie{flex-direction:column}
    .suivi-saisie input,.suivi-saisie select,.suivi-saisie button{width:100%}
    .suivi-ligne{flex-wrap:wrap;gap:6px}
    .suivi-ligne-source{flex-basis:100%}
}


/* Feuille alimentaire dans le bilan patient */
.bilan-repas-jour{margin-bottom:10px;padding:8px 10px;border-radius:8px;
    background:rgba(148,163,184,.08)}
.bilan-repas-date{font-weight:600;font-size:13px;margin-bottom:5px}
.bilan-repas-ligne{display:flex;gap:10px;font-size:13px;padding:2px 0;align-items:baseline}
.bilan-repas-moment{min-width:48px;color:#64748b;font-size:12px}
.bilan-repas-contenu{flex:1}
.bilan-repas-vide{flex:1;color:#94a3b8;font-style:italic}


/* ========================================================================
   FEUILLE ALIMENTAIRE
   ======================================================================== */
.feuille-filtres{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px;align-items:center}
.feuille-date{padding:8px 10px;border-radius:8px;border:1px solid rgba(148,163,184,.35);font-size:14px}
.feuille-erreur{color:#dc2626;font-size:13px;margin-bottom:12px}
.feuille-vide{color:#64748b;font-size:14px;padding:16px 0}
.feuille-jour-courant{padding:12px;border-radius:10px;background:rgba(148,163,184,.08)}
.feuille-jour-titre{font-weight:650;font-size:15px;margin-bottom:12px}
.feuille-moment{margin-bottom:14px}
.feuille-moment-libelle{font-size:13px;color:#64748b;margin-bottom:5px}
.feuille-saisi{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;
    background:#fff;font-size:14px;margin-bottom:5px}
.feuille-source{font-size:11px;color:#94a3b8;font-style:italic}
.feuille-suppr{border:none;background:transparent;color:#94a3b8;cursor:pointer;font-size:16px;
    padding:0 4px;line-height:1;margin-left:auto}
.feuille-suppr:hover{color:#dc2626}
.feuille-ligne-saisie{display:flex;gap:8px}
.feuille-ligne-saisie input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;
    border:1px solid rgba(148,163,184,.35);font-size:14px}
.feuille-historique{margin-top:20px}
.feuille-historique-titre{font-size:13px;color:#64748b;margin-bottom:8px}
.feuille-histo-jour{padding:8px 10px;border-radius:8px;background:rgba(148,163,184,.06);
    margin-bottom:8px}
.feuille-histo-date{font-weight:600;font-size:13px;margin-bottom:4px}
.feuille-histo-ligne{display:flex;gap:10px;font-size:13px;padding:2px 0;align-items:baseline}
.feuille-histo-moment{min-width:48px;color:#64748b;font-size:12px}
.feuille-histo-contenu{flex:1}
.feuille-histo-vide{flex:1;color:#94a3b8;font-style:italic}
.feuille-note{margin-top:18px;font-size:12px;color:#94a3b8;line-height:1.5}

@media(max-width:560px){
    .feuille-alimentaire > .card-head{padding-top:44px}
    .feuille-filtres{flex-direction:column;align-items:stretch}
    .feuille-date{width:100%}
}


/* Navigation par jour dans la feuille alimentaire du bilan */
.bilan-repas-nav{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.bilan-repas-fleche{width:28px;height:28px;border-radius:6px;
    border:1px solid rgba(148,163,184,.35);background:#fff;cursor:pointer;
    font-size:16px;line-height:1;color:#334155;display:flex;
    align-items:center;justify-content:center}
.bilan-repas-fleche:disabled{opacity:.35;cursor:default}
.bilan-repas-select{padding:5px 8px;border-radius:6px;font-size:13px;
    border:1px solid rgba(148,163,184,.35);background:#fff}
.bilan-repas-compteur{font-size:12px;color:#94a3b8;margin-left:auto}

.bilan-repas-aucun{color:#94a3b8;font-style:italic;font-size:13px;padding:6px 0}


/* Creation manuelle d'un bilan famille */
.bilans-creation{padding:14px;border-radius:10px;background:rgba(148,163,184,.08);
    margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.bilans-creation-titre{font-weight:650;font-size:14px}
.bilans-creation-label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#64748b}
.bilans-creation-date{padding:8px 10px;border-radius:8px;font-size:14px;
    border:1px solid rgba(148,163,184,.35);max-width:200px}
.bilans-creation-periode{font-size:13px;color:#334155;font-weight:500}
.bilans-attente-supprimer{background:transparent;border:1px solid rgba(220,38,38,.35);
    color:#dc2626;padding:7px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.bilans-attente-supprimer:hover{background:rgba(220,38,38,.06)}
.bilans-attente-supprimer:disabled{opacity:.5;cursor:default}

.bilans-attente-page > .card-head{display:flex;justify-content:space-between;
    align-items:flex-start;gap:16px}
.bilans-attente-page > .card-head .btn{flex-shrink:0;margin-top:2px}
.bilans-creation-label{display:flex;flex-direction:column;gap:5px;
    font-size:13px;color:#64748b;align-items:flex-start}

.feuille-nav-date{display:flex;align-items:center;gap:6px}
.feuille-fleche{width:32px;height:32px;border-radius:8px;
    border:1px solid rgba(148,163,184,.35);background:#fff;cursor:pointer;
    font-size:18px;line-height:1;color:#334155;display:flex;
    align-items:center;justify-content:center;flex-shrink:0}
.feuille-fleche:disabled{opacity:.35;cursor:default}
.feuille-aucun{color:#94a3b8;font-style:italic;font-size:13px;margin-bottom:10px}