/* Styles propres au backoffice, en complément de Tabler. */

/* Fond des modales (toutes, via .modal-backdrop) : un peu plus opaque que la
   valeur par défaut de Tabler (0.32), en plus du flou déjà appliqué
   (.modal-blur) — pour mieux détacher visuellement la modale du reste de la
   page derrière. */
.modal-backdrop {
	--tblr-backdrop-opacity: 0.55;
}

/* Liste des permissions dans le tableau "Gestion des utilisateurs" :
   hauteur de cellule fixe, défilement interne si trop de permissions. */
.permissions-cell {
	max-height: 90px;
	overflow-y: auto;
}

/* Logo : Tabler force "height: auto" sur toutes les images, donc on doit
   passer par une classe CSS (plus prioritaire) plutôt que l'attribut
   HTML height, qui serait ignoré. */
.sidebar-logo {
	height: 100px;
	width: auto;
}

.login-logo {
	height: 114px;
	width: auto;
}

/* Deux logos sont présents dans le HTML (clair + sombre) ; on affiche
   uniquement celui qui correspond au thème actif (data-bs-theme sur <html>,
   piloté par le bouton de bascule en haut à droite). */
.logo-dark {
	display: none;
}
[data-bs-theme="dark"] .logo-light {
	display: none;
}
[data-bs-theme="dark"] .logo-dark {
	display: inline-block;
}

/* Petit aperçu "pile de photos" en haut de chaque carte de dossier :
   vraies petites miniatures de taille fixe, pas des images étirées. */
.dossier-apercu {
	height: 70px;
	overflow: hidden;
	gap: 6px;
	padding: 8px;
}
.dossier-apercu img {
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 4px;
}
.dossier-apercu-vide {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tblr-secondary-bg, #f5f5f5);
	color: var(--tblr-secondary-color, #999);
	font-size: 0.85rem;
}
/* Nom de dossier trop long : tronqué avec des points de suspension plutôt que
   de passer à la ligne (sinon la case à cocher et le badge Visible/Masqué se
   décalent). min-width: 0 est nécessaire pour qu'un enfant flex accepte de
   rétrécir sous la largeur de son contenu. */
.dossier-card-title {
	min-width: 0;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Carte témoignage à hauteur fixe, quelle que soit la longueur du texte ou
   la présence d'une fonction — sans ça, des témoignages de longueurs très
   différentes donnaient des cartes de tailles visiblement inégales sur une
   même ligne. Les boutons restent collés en bas (mt-auto, voir la vue). */
.temoignage-card {
	height: 230px;
}
.temoignage-card .card-body {
	overflow: hidden;
}

/* Avatar rond dans la carte d'un témoignage (page Témoignages) — même
   principe de troncature que .dossier-card-title pour le nom à côté. */
.temoignage-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.temoignage-avatar-vide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tblr-primary, #206bc4);
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
}
.temoignage-card-title {
	min-width: 0;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Aperçu du texte du témoignage dans la carte : 3 lignes maximum, coupé
   proprement plutôt que de laisser des cartes de hauteurs très différentes
   selon la longueur du témoignage. */
.temoignage-texte-apercu {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Poignée de glisser-déposer (réordonnancement des dossiers) : curseur
   explicite + zone de clic confortable, sans quoi "⠿" seul est minuscule. */
.dossier-drag-handle {
	cursor: grab;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--tblr-secondary-color, #6c7a91);
	padding: 2px 8px 2px 0;
	flex-shrink: 0;
	user-select: none;
}
.dossier-drag-handle:active {
	cursor: grabbing;
}
/* Carte en cours de glissement : estompée pour bien distinguer la source de
   sa future position (indiquée par une fine barre bleue, avant ou après la
   carte survolée selon le côté du curseur — voir initDossierReorder()).
   Règles volontairement génériques (pas limitées à #dossiers-grid) : le même
   mécanisme de glisser-déposer est réutilisé telle quelle par
   initTemoignageReorder() sur #temoignages-grid. */
.row-cards .is-dragging {
	opacity: 0.4;
}
.row-cards .dossier-drop-before > .card,
.row-cards .dossier-drop-after > .card {
	position: relative;
}
.row-cards .dossier-drop-before > .card::before,
.row-cards .dossier-drop-after > .card::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--tblr-primary, #206bc4);
	border-radius: 2px;
}
.row-cards .dossier-drop-before > .card::before {
	left: -10px;
}
.row-cards .dossier-drop-after > .card::after {
	right: -10px;
}

/* Éditeur de texte riche (Quill) du formulaire dossier. */
.dossier-editor .ql-editor {
	min-height: 120px;
}

/* Vue "grille" des photos d'un dossier : boîtier à TAILLE FIXE, indépendant
   de la présence ou de la longueur de la description (jamais de débordement).
   La photo occupe la majorité du boîtier (c'est l'objet principal de cet
   écran), avec un léger zoom + ombre au survol pour donner du relief. */
.realisation-card {
	height: 280px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.realisation-card:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}
.realisation-thumb-wrap {
	position: relative;
	height: 170px;
	flex-shrink: 0;
	overflow: hidden;
}
.realisation-thumb {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.realisation-card:hover .realisation-thumb {
	transform: scale(1.06);
}
/* Superposée sur la photo en vue grille uniquement — en vue liste, le même
   badge (.realisation-carrousel-badge) reste simplement en ligne à côté du
   titre. Fond sombre + texte blanc : contrairement à "bg-azure-lt" (pensé
   pour un fond blanc), ça reste lisible quelle que soit la photo en dessous. */
.realisation-thumb-wrap .realisation-carrousel-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	background: rgba(15, 23, 42, 0.72) !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	backdrop-filter: blur(2px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.realisation-thumb-wrap .realisation-carrousel-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #e8ad35;
	flex-shrink: 0;
}
/* Badge "Masqué" (photo pas encore diffusée sur le site) : en bas à gauche de
   la vignette pour ne pas se superposer au badge Carrousel (haut-gauche) ni à
   la case de sélection (haut-droite). Même traitement fond sombre translucide. */
.realisation-thumb-wrap .realisation-masque-badge {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 1;
	background: rgba(15, 23, 42, 0.72) !important;
	color: #fff !important;
	backdrop-filter: blur(2px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Nombre de jours restants avant purge définitive, page Corbeille — même
   traitement que les autres badges superposés sur une vignette. */
.realisation-thumb-wrap .corbeille-jours-badge {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 1;
	background: rgba(15, 23, 42, 0.72) !important;
	color: #fff !important;
	backdrop-filter: blur(2px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Urgence croissante à l'approche de la purge définitive (voir
   corbeille/index.php) — pas de préfixe ".realisation-thumb-wrap" ici
   contrairement au badge ci-dessus : une carte de dossier supprimé affiche
   ce même badge en ligne dans sa card-body, pas superposé sur une vignette. */
.corbeille-jours-badge.corbeille-urgence-moyenne {
	background: rgba(217, 119, 6, 0.85) !important;
	color: #fff !important;
}
.corbeille-jours-badge.corbeille-urgence-haute {
	background: rgba(200, 30, 30, 0.88) !important;
	color: #fff !important;
}

/* Barre de recherche/filtre de la page Corbeille, alignée avec le titre. */
.corbeille-filtres {
	min-width: 0;
}
.corbeille-filtres #corbeille-recherche {
	width: 260px;
}
.corbeille-filtres #corbeille-filtre-dossier {
	width: 200px;
}
@media (max-width: 576px) {
	.corbeille-filtres {
		width: 100%;
	}
	.corbeille-filtres #corbeille-recherche,
	.corbeille-filtres #corbeille-filtre-dossier {
		width: auto;
		flex: 1 1 160px;
	}
}
.corbeille-vide {
	text-align: center;
	padding: 48px 16px;
	border: 1px dashed var(--tblr-border-color);
	border-radius: 8px;
	color: var(--tblr-secondary-color);
}
/* Case à cocher de sélection multiple, superposée en haut à droite de la
   vignette : même principe que le badge "Carrousel" (fond sombre translucide)
   pour rester lisible quelle que soit la photo en dessous. */
.realisation-thumb-wrap .realisation-select-wrap {
	position: absolute;
	top: 5px;
	right: 8px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	backdrop-filter: blur(2px);
}
.realisation-thumb-wrap .realisation-select-wrap .form-check-input {
	/* .form-check-input (Tabler) utilise un float + une marge négative pour se
	   positionner dans l'espace réservé par le padding d'un vrai .form-check
	   (case suivie d'un texte) — un système qui ne marche pas ici (case seule,
	   dans un petit badge de 26px) : il sort du badge au lieu d'être centré.
	   On annule donc float/marge pour laisser le flex du badge faire le travail. */
	float: none;
	margin: 0;
}
.realisation-card-body {
	padding: 0.6rem 0.75rem;
}
.realisation-card-title {
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.realisation-card-desc {
	font-size: 0.74rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Vue "liste" des photos d'un dossier : petite vignette à gauche, infos à droite. */
.realisation-row-thumb {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
/* Un titre ou une description trop longs tronquent avec des points de
   suspension plutôt que de passer à la ligne — sans ça, la ligne grandit et
   décale le badge "Carrousel" et les boutons "Modifier"/"Supprimer" à droite.
   min-width: 0 est nécessaire sur le conteneur flex pour que la troncature
   fonctionne (un enfant flex ne rétrécit jamais sous sa largeur de contenu
   par défaut, même avec flex-fill). */
.realisation-list-info {
	min-width: 0;
}
.realisation-list-info .realisation-title-text,
.realisation-list-info .realisation-desc-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Widgets du tableau de bord : horloge, calendrier, météo. Volontairement
   compacts — d'autres éléments plus importants viendront s'ajouter autour
   (statistiques, activité récente...), ces trois-là ne doivent pas dominer
   la page. */
.dashboard-widget .card-body {
	padding: 0.75rem 1rem;
}
.dashboard-clock-time {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.dashboard-clock-date {
	color: var(--tblr-secondary-color, #6c7a91);
	text-transform: capitalize;
	font-size: 0.8rem;
}
.dashboard-calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	font-size: 0.78rem;
}
.dashboard-calendar-weekday {
	text-align: center;
	padding-bottom: 4px;
	font-size: 0.68rem;
}
.dashboard-calendar-day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
}
.dashboard-calendar-day span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 0.72rem;
}
.dashboard-weather-label {
	font-size: 0.65rem;
	margin-bottom: 2px;
}
.dashboard-weather-icon {
	width: 32px;
	height: 32px;
}
.dashboard-weather-temp {
	font-size: 1.1rem;
	font-weight: 700;
}
.dashboard-weather-desc {
	font-size: 0.7rem;
}
.dashboard-weather-col {
	border-right: 1px solid var(--tblr-border-color, #e6e8eb);
}

/* Bouton de fermeture de la "liseuse" (#photo-viewer-modal) : le × généré
   par .btn-close est un simple trait fin à faible opacité, peu lisible sur
   une photo sombre ou chargée. On reprend donc le même habillage que les
   flèches précédent/suivant du même viewer (fond rond sombre), avec une
   couleur de survol nettement différente pour un retour visuel clair. */
.photo-viewer-close {
	font-size: 1.5rem;
	line-height: 1;
}
.photo-viewer-close:hover,
.photo-viewer-close:focus {
	background-color: #e8ad35;
	border-color: #e8ad35;
	color: #171717;
}

/* Bouton qui déplie le menu latéral sur petit écran (#sidebar-menu, voir
   layout/header.php). Le menu lui-même se cache sous 992px ; Tabler, lui,
   cache par défaut tout ".navbar-toggler" dès 768px dans une barre
   "navbar-expand-md" — on force ici les deux à changer au même endroit. */
#sidebar-toggle-btn {
	display: none;
}
@media (max-width: 991.98px) {
	#sidebar-toggle-btn {
		display: block;
	}
}