/* ============================================
   RESPONSIVE — Fiche Fonction / Fiche Projet
   v_reception.php, v_projet.php & block components
   ============================================ */

/* =========================================
   BLOCK PERSONNEL CARDS (block_pers_table.php)
   Desktop: table visible, cards hidden
   ≤1024px: table hidden, cards visible
   ========================================= */

/* --- Desktop default: hide cards --- */
.pers-mobile-search,
.pers-cards-container {
	display: none;
}

/* --- Search bar --- */
.pers-mobile-search {
	margin-bottom: 12px;
	padding: 0 4px;
}
.pers-mobile-search input {
	font-size: 16px;
	padding: 10px 14px;
	min-height: 44px;
	border-radius: 8px;
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}

/* --- Card container --- */
.pers-cards-container {
	padding: 0 4px;
	gap: 8px;
}

/* --- Card --- */
.pers-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	margin-bottom: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	overflow: hidden;
}

/* --- Card header --- */
.pers-card-header {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	cursor: pointer;
	gap: 8px;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.pers-card-header:active {
	background: #f8f8f8;
}
.pers-card-info {
	flex: 1;
	min-width: 0;
}
.pers-card-name {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pers-card-phone {
	font-size: 12px;
	color: #888;
	margin-top: 1px;
}

/* --- Header status icons (DPAE, contract, check-in/out) --- */
.pers-card-status {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.pers-status-icon {
	font-size: 14px;
}
.pers-dpae-ok { color: #5cb85c; }
.pers-contract-ok { color: #5cb85c; }
.pers-contract-warn { color: #d9534f; }
.pers-ci-icon {
	white-space: nowrap;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.pers-ci-icon.done { color: #5cb85c; }
.pers-ci-icon.pending { color: #ccc; }

.pers-card-poste {
	font-size: 12px;
	color: #555;
	background: #f0f0f0;
	padding: 2px 8px;
	border-radius: 12px;
	white-space: nowrap;
	flex-shrink: 0;
}
.pers-card-hours {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	flex-shrink: 0;
}
.pers-card-hours.empty {
	color: #bbb;
	font-weight: 400;
}
.pers-card-chevron {
	font-size: 12px;
	color: #aaa;
	transition: transform 0.2s;
	flex-shrink: 0;
}
.pers-card.pers-card-open .pers-card-chevron {
	transform: rotate(180deg);
}

/* --- Card body (hidden by default) --- */
.pers-card-body {
	display: none;
	padding: 0 14px 14px;
	border-top: 1px solid #f0f0f0;
}

/* --- Check-in status block --- */
.pers-card-checkin-status {
	padding: 8px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 6px;
	background: #f8f9fa;
	border: 1px solid #e8e8e8;
}
.pers-ci-label {
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pers-ci-label.pers-ci-done { color: #5cb85c; }
.pers-ci-label.pers-ci-in { color: #f0ad4e; font-weight: 600; }

/* --- Contract warning block --- */
.pers-card-contract-warn {
	padding: 6px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 6px;
	background: #fdf2f2;
	border: 1px solid #f5c6cb;
	color: #d9534f;
	font-size: 13px;
	font-weight: 600;
}

/* --- Contract badge for desktop table (document icon + optional check overlay) --- */
.contract-badge {
	position: relative;
	display: inline-block;
	margin-left: 6px;
	font-size: 18px;
	line-height: 1;
}
.contract-badge-check {
	position: absolute;
	bottom: -4px;
	right: -5px;
	font-size: 12px;
	color: #22c55e;
	background: #fff;
	border-radius: 50%;
	line-height: 1;
}
.pers-comment-warn {
	display: block;
	color: #f0ad4e;
	font-weight: 600;
	font-size: 11px;
	margin-top: 2px;
}

/* --- Badges --- */
.pers-card-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding-top: 12px;
	margin-bottom: 12px;
}
.pers-badge {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 14px;
	background: #f5f5f5;
	border: 1px solid #e8e8e8;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.pers-badge .fa-check { color: #5cb85c; }
.pers-badge .fa-close { color: #ccc; }
.pers-badge-vehicle {
	font-size: 11px;
	color: #666;
	display: block;
	margin-top: 2px;
}

/* --- Time inputs --- */
.pers-card-times {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}
.pers-card-time-field {
	flex: 1;
}
.pers-card-time-field label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.pers-card-time-field input[type="time"] {
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	padding: 8px;
	min-height: 44px;
	text-align: center;
	border-radius: 6px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	background: #fff;
}
.pers-card-time-field .prev-sc {
	font-size: 11px;
	color: #0090d9;
	margin-top: 2px;
	font-style: italic;
}

/* --- Signature --- */
.pers-card-signature {
	margin-bottom: 10px;
}
.pers-card-signature.has-sign {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.pers-card-signature.has-sign img {
	display: block;
	max-height: 60px;
	height: auto;
	padding: 10px 20px;
	border: 2px dashed #c8d0d8;
	border-radius: 8px;
	background: #f9fafb;
}
.pers-card-signature .btn.sc-sign.sc-sign-small {
	display: inline-block;
	width: auto;
	min-height: 36px;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	background: #fff;
	color: #33B4A9;
	border: 1.5px solid #33B4A9;
	box-shadow: none;
}
.pers-card-signature .btn.sc-sign.sc-sign-small:hover,
.pers-card-signature .btn.sc-sign.sc-sign-small:active {
	background: #33B4A9;
	color: #fff;
}
.pers-card-signature .btn.sc-sign {
	display: block;
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 8px;
	padding: 12px;
	text-align: center;
	background: #fff;
	color: #33B4A9;
	border: 2px solid #33B4A9;
	box-shadow: none;
}
.pers-card-signature .btn.sc-sign:hover,
.pers-card-signature .btn.sc-sign:active {
	background: #33B4A9;
	color: #fff;
}
.pers-card-signature .btn.sc-sign i {
	margin-right: 8px;
	font-size: 18px;
}
.pers-card-signature img {
	max-height: 50px;
}

/* --- Comment --- */
.pers-card-comment {
	margin-bottom: 4px;
}
.pers-card-comment input {
	font-size: 15px;
	padding: 8px 10px;
	min-height: 44px;
	border-radius: 6px;
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
}
.pers-card-comment small {
	font-size: 11px;
	color: #999;
}

/* --- Card status indicators (left border) --- */
.pers-card.pers-card-signed { border-left: 3px solid #5cb85c; }
.pers-card.pers-card-checkedin { border-left: 3px solid #f0ad4e; }
.pers-card.pers-card-complete { border-left: 3px solid #5cb85c; }

/* --- QR check-in band: first header row of the table (repeated on each printed page), above the cards ≤1024px --- */
.v-pers_table .pers-table .pers-qr-band > th {
	padding: 8px 10px !important;
	text-align: left;
	background: #fff !important;
}
.pers-qr-code {
	float: left;
	width: 104px;
	height: 104px;
	padding: 6px;
	box-sizing: content-box;
	margin-right: 10px;
	background: #fff;
}
.pers-qr-code img,
.pers-qr-code canvas {
	width: 104px;
	height: 104px;
}
.pers-qr-text {
	overflow: hidden;
	padding-top: 20px;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}
.pers-qr-title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 4px;
	color: #222;
	margin-bottom: 5px;
	text-transform: uppercase;
}
.pers-qr-how {
	font-size: 12px;
	font-weight: 500;
	color: #333;
	line-height: 1.55;
}
.pers-qr-ref {
	font-size: 11px;
	font-weight: 600;
	color: #777;
	margin-top: 5px;
}
.pers-qr-band-cards {
	display: none;
	margin: 0 4px 12px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
}


/* ===========================================
   TABLETTE (max-width: 1024px)
   =========================================== */
@media screen and (max-width: 1024px) {

	/* --- Layout global --- */
	.container-ff {
		zoom: 0.85 !important; /* Override rec.css zoom: 0.7 */
	}

	/* --- Titres --- */
	.fiche-fct h2 {
		font-size: 18px;
	}

	/* --- col-xs-3/4 -> 2 colonnes sur tablette --- */
	.container-ff .col-xs-3,
	.container-ff .col-xs-4 {
		width: 50% !important;
	}

	/* --- Block Convocation : police réduite --- */
	.table-convoc-2 th,
	.table-convoc-2 td {
		font-size: 13px;
		padding: 4px !important;
	}

	/* --- Block Personnel: switch table to cards --- */
	.v-pers_table .table-perso {
		display: none !important;
	}
	.pers-mobile-search,
	.pers-qr-band-cards {
		display: block;
	}
	.pers-cards-container {
		display: grid;
		grid-template-columns: 1fr;
	}
}


/* ===========================================
   MOBILE (max-width: 767px)
   =========================================== */
@media screen and (max-width: 767px) {

	/* =========================================
	   OVERRIDE GLOBAL COL-XS
	   col-xs-3 à col-xs-8 -> pleine largeur
	   (même comportement que col-md-* : actif
	   seulement sur grand écran)
	   ========================================= */
	.container-ff .col-xs-3,
	.container-ff .col-xs-4,
	.container-ff .col-xs-5,
	.container-ff .col-xs-6,
	.container-ff .col-xs-7,
	.container-ff .col-xs-8 {
		width: 100% !important;
		float: none !important;
	}

	/* Tables : overflow horizontal si trop larges */
	.container-ff .table {
		table-layout: auto !important;
	}
	.container-ff .col-xs-12 {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Cards: disable horizontal scroll + single column on mobile */
	.v-pers_table .col-xs-12 {
		overflow-x: hidden;
		overflow-y: visible;
	}
	.v-pers_table .pers-cards-container,
	.v-pers_table .pers-mobile-search {
		max-width: 100%;
		box-sizing: border-box;
	}
	.pers-cards-container {
		grid-template-columns: 1fr;
	}

	/* Cards header: wrap on mobile to prevent overflow */
	.pers-card-header {
		flex-wrap: wrap;
		row-gap: 4px;
	}
	.pers-card-info {
		order: 1;
		flex: 1 0 calc(100% - 52px);
	}
	.pers-card-chevron {
		order: 2;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: -10px -14px -10px 0;
		font-size: 14px;
	}
	.pers-card-status { order: 3; }
	.pers-card-poste { order: 4; }
	.pers-card-hours { order: 5; }


	/* --- Layout global --- */
	.container-ff {
		zoom: 1 !important;
		padding: 5px !important;
	}
	.invoice-body {
		padding: 10px !important;
	}

	/* --- Titres & texte global fiche --- */
	.fiche-fct h2 {
		font-size: 16px;
	}
	.fiche-fct h3 {
		font-size: 14px;
	}
	.fiche-fct td,
	.fiche-fct th {
		padding: 4px !important;
		font-size: 12px !important;
	}
	.block-title {
		font-size: 15px !important;
	}

	/* --- Boutons toggle de blocs (navigation mobile) --- */
	.btn-toggle-block {
		font-size: 10px !important;
		padding: 5px 8px !important;
		margin: 2px !important;
		border-radius: 20px !important;
		min-height: 28px;
	}
	.btn-toggle-block .fa {
		display: none !important;
	}
	.btn-toggle-block.active {
		background-color: var(--v3-primary, #4680ff) !important;
		color: #fff !important;
		border-color: var(--v3-primary, #4680ff) !important;
	}
	/* Conteneur de boutons : flex-wrap, PAS de scroll */
	.m-b-10.noprint {
		display: flex;
		flex-wrap: wrap;
		gap: 3px;
		align-items: center;
		padding-bottom: 5px;
	}
	.m-b-10.noprint > b {
		width: 100%;
		margin-bottom: 3px;
		font-size: 12px;
	}
	/* Cacher icône Zebra sur mobile */
	.zebra-label {
		display: none !important;
	}


	/* =========================================
	   BLOCK HEADER (block_rec_head.php)
	   ========================================= */

	/* Logo au-dessus du contenu */
	.block-rec-head .col-xs-1,
	.block-rec-head .col-xs-2 {
		width: 100% !important;
		float: none !important;
		text-align: center;
		margin-bottom: 10px;
	}
	.block-rec-head .col-xs-1 img,
	.block-rec-head .col-xs-2 img {
		width: 80px !important;
	}
	.block-rec-head .col-xs-11,
	.block-rec-head .col-xs-10 {
		width: 100% !important;
		float: none !important;
	}
	/* Table header : reflower en paires th/td verticales */
	.table-head-rec {
		border-collapse: collapse;
	}
	.table-head-rec tr {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	.table-head-rec th {
		width: 30% !important;
		display: block !important;
		box-sizing: border-box;
		font-size: 11px !important;
		padding: 4px 6px !important;
		background: #f5f5f5 !important;
	}
	.table-head-rec td {
		width: 70% !important;
		display: block !important;
		box-sizing: border-box;
		font-size: 12px !important;
		padding: 4px 6px !important;
	}
	/* Titres h1 : permettre le wrap */
	.block-rec-head .nowrap {
		white-space: normal !important;
	}
	.block-rec-head h1 {
		font-size: 1.3rem !important;
	}
	.block-rec-head h1.pull-right {
		float: none !important;
		text-align: right;
	}
	/* Multi-réceptions : table condensée */
	.block-rec-head .table-condensed {
		font-size: 11px;
	}
	/* Réduire espacement header */
	.block-rec-head .m-b-30 {
		margin-bottom: 10px !important;
	}


	/* =========================================
	   BLOCK SALLE (block_s_full.php)
	   ========================================= */

	.v-s_full .table th,
	.v-s_full .table td {
		font-size: 12px !important;
		padding: 4px !important;
	}


	/* =========================================
	   BLOCK PERSONNEL CONVOCATION (block_pers_convoc.php)
	   ========================================= */

	/* Cacher colonnes secondaires : Départ Chauffeur, Départ Passager, RDV SP, Signature */
	.table-convoc-2 th:nth-child(5),
	.table-convoc-2 td:nth-child(5),
	.table-convoc-2 th:nth-child(6),
	.table-convoc-2 td:nth-child(6),
	.table-convoc-2 th:nth-child(7),
	.table-convoc-2 td:nth-child(7),
	.table-convoc-2 th:nth-child(9),
	.table-convoc-2 td:nth-child(9) {
		display: none !important;
	}
	/* Colonnes restantes */
	.table-convoc-2 th,
	.table-convoc-2 td {
		width: auto !important;
		font-size: 11px !important;
		padding: 3px !important;
	}
	.table-convoc th,
	.table-convoc td {
		font-size: 12px !important;
	}


	/* =========================================
	   BLOCK FULL INFOS (block_full_infos.php)
	   ========================================= */

	/* Tables multi-colonnes : paires th/td en flex wrap */
	.v-full_infos .table tr {
		display: flex;
		flex-wrap: wrap;
	}
	.v-full_infos .table th {
		width: 50% !important;
		display: inline-block;
		text-align: left !important;
		font-size: 12px !important;
		padding: 3px 6px !important;
		font-weight: bold;
		box-sizing: border-box;
	}
	.v-full_infos .table td {
		width: 50% !important;
		display: inline-block;
		text-align: left !important;
		font-size: 12px !important;
		padding: 3px 6px !important;
		box-sizing: border-box;
	}
	/* Single-cell rows (deroule headers/content): full width */
	.v-full_infos .table tr > th:only-child,
	.v-full_infos .table tr > td:only-child {
		width: 100% !important;
	}


	/* =========================================
	   BLOCK MENU (block_menu.php)
	   ========================================= */

	.v-menu .zoom-08 {
		zoom: 1 !important;
	}
	.v-menu {
		font-size: 13px;
	}
	.tps_prod_font {
		font-size: 12px !important;
		margin-left: 5px !important;
	}


	/* =========================================
	   BLOCK MENU PHOTO (block_menu_photo.php)
	   ========================================= */

	.v-menu_photo img {
		max-height: 200px !important;
	}


	/* =========================================
	   BLOCK RETOUR (block_retour.php)
	   ========================================= */

	.v-retour .table input[type="time"],
	.v-retour .table .form-control {
		font-size: 12px;
		padding: 2px 4px;
	}
	.v-retour .table th,
	.v-retour .table td {
		font-size: 11px !important;
		padding: 3px !important;
	}


	/* =========================================
	   BLOCK CO2 (block_co2_rec.php)
	   ========================================= */

	.v-co2 .col-xs-1 {
		width: 10% !important;
	}
	.v-co2 .col-xs-10 {
		width: 80% !important;
	}


	/* =========================================
	   BLOCK OP (block_op.php)
	   ========================================= */

	.v-op {
		overflow-x: auto;
	}
	.v-op .table {
		font-size: 11px !important;
	}
	.v-op .table th,
	.v-op .table td {
		padding: 3px !important;
	}


	/* =========================================
	   ESPACEMENT VERTICAL REDUIT
	   ========================================= */

	.fiche-fct {
		margin-bottom: 10px !important;
	}
	.block-container {
		padding: 5px !important;
	}
	.container-ff .m-b-30 {
		margin-bottom: 10px !important;
	}
	.container-ff .m-t-30 {
		margin-top: 10px !important;
	}
	.container-ff .m-t-20 {
		margin-top: 8px !important;
	}
	.container-ff .p-t-20 {
		padding-top: 8px !important;
	}
	.container-ff br.noprint {
		display: none;
	}
}


/* ===========================================
   PETIT MOBILE (max-width: 480px)
   =========================================== */
@media screen and (max-width: 480px) {

	/* Encore plus compact */
	.fiche-fct td,
	.fiche-fct th {
		padding: 3px !important;
		font-size: 11px !important;
	}

	/* Header : titre plus petit */
	.block-rec-head h1 {
		font-size: 1.2rem !important;
	}

	/* Convocation : cacher aussi le commentaire sur très petit écran */
	.table-convoc-2 th:nth-child(8),
	.table-convoc-2 td:nth-child(8) {
		display: none !important;
	}

	/* Cards : stack time inputs vertically */
	.pers-card-times {
		flex-direction: column;
	}
}

/* ===========================================
   PRINT — force desktop table, hide cards
   =========================================== */
@media print {
	.pers-mobile-search,
	.pers-cards-container,
	.pers-qr-band-cards {
		display: none !important;
	}
	.v-pers_table .table-perso {
		display: table !important;
	}
}