/*
 * responsive.css — Chantier 1 modernisation UI (2026-04) v3
 * Approche conservative : rendre l'app utilisable sur tactile
 * sans casser les layouts Kendo.
 *
 * Principe : on garde le scroll horizontal de la Kendo Grid
 * (standard pour tableaux de données complexes sur mobile),
 * mais on corrige tout le reste (toolbar, pagination, splitter,
 * formulaires, cibles tactiles).
 */

/* ============================================================
 *  Safe area iOS (notch)
 * ============================================================ */
body.desktop,
body.login,
body.navbar {
	padding-left : env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* ============================================================
 *  Tablet (< 1024px)  -  compaction légère
 * ============================================================ */
@media screen and (max-width: 1023px) {

	.k-grid td,
	.k-grid th.k-header {
		padding: 4px 6px !important;
		font-size: 13px;
	}

	.k-breadcrumb-item {
		max-width: 180px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

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

	/* ---------- Kendo Splitter (flex + abs) ---------- */
	.k-splitter.k-splitter-horizontal,
	.k-splitview,
	.k-splitview-horizontal {
		flex-direction: column !important;
		display: block !important;
		position: relative !important;
		height: auto !important;
	}
	.k-splitter.k-splitter-horizontal > .k-pane,
	.k-splitview > .k-pane,
	.k-splitview-horizontal > .k-pane {
		position: relative !important;
		width: 100% !important;
		left: 0 !important;
		top: auto !important;
		height: auto !important;
		min-height: 220px;
		max-height: 60vh;
		overflow: auto !important;
	}
	.k-splitter > .k-splitbar-horizontal,
	.k-splitview > .k-splitbar-horizontal {
		display: none !important;
	}

	/* ---------- Kendo Grid : scroll horizontal propre ---------- */
	.k-grid-content,
	.k-grid-header-wrap,
	.k-grid-header {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/* ---------- Pagination compactée ---------- */
	.k-pager-wrap .k-pager-info,
	.k-pager-info {
		display: none !important;
	}
	.k-pager-wrap .k-pager-sizes > label {
		display: none;
	}

	/* ---------- TabStrip : scroll horizontal ---------- */
	.k-tabstrip-items {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap !important;
	}

	/* ---------- Toolbar : wrap si besoin ---------- */
	.k-toolbar {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	/* ---------- Formulaires : labels au-dessus ---------- */
	.k-form .k-form-field,
	form.k-form > div.k-form-field {
		flex-direction: column;
		align-items: stretch;
	}
	.k-form .k-label,
	form.k-form label {
		text-align: left;
		margin-bottom: 4px;
	}

	/* ---------- Navbar : cacher le titre texte ---------- */
	.navbar-brand-text,
	.navbar > .title,
	.k-appbar-title {
		display: none !important;
	}

	/* ---------- Panels maison ---------- */
	.content-panel.split-left,
	.content-panel.split-right,
	.content-panel.pane-left,
	.content-panel.pane-right {
		float: none !important;
		width: 100% !important;
		position: static !important;
	}

	/* ---------- Cible tactile 40px min ---------- */
	.k-button:not(.k-i-more-vertical):not(.k-grid-filter),
	.k-grid-commands .k-button,
	input[type="button"],
	input[type="submit"] {
		min-height: 44px;
	}
}

/* ============================================================
 *  Mobile (< 480px)
 * ============================================================ */
@media screen and (max-width: 479px) {

	/* Breadcrumb : dernier segment uniquement */
	.k-breadcrumb-item:not(:last-child) {
		display: none !important;
	}

	.k-grid td,
	.k-grid th.k-header {
		font-size: 12px;
		padding: 3px 4px !important;
	}

	.login button[type="submit"],
	body.login button[type="submit"] {
		width: 100%;
	}
}

/* ============================================================
 *  Print
 * ============================================================ */
@media print {
	.k-toolbar,
	.k-pager-wrap,
	.navbar,
	.footer,
	#PanelBar_Navbar,
	.k-filter-row {
		display: none !important;
	}
	.k-grid { border: none !important; }
	body { background: white !important; }
}

/* ============================================================
 *  Quick-win 3 : Kendo Grid mobile ne doit pas wrap le texte
 *  → force min-width pour déclencher scroll horizontal
 * ============================================================ */
@media screen and (max-width: 767px) {

	/* Force width minimale des cellules pour ne pas wrap char-par-char */
	.k-grid .k-table-td,
	.k-grid .k-table-th,
	.k-grid td,
	.k-grid th {
		white-space: nowrap !important;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 200px;
	}

	/* Command cells (Actions) : pas de min-width pour garder les icônes compactes */
	.k-grid .k-command-cell {
		white-space: normal !important;
		max-width: none;
	}

	/* Logo cell : taille fixe visible */
	.k-grid .k-table-td.center:first-child img {
		max-width: 40px;
		max-height: 40px;
	}

	/* Le tableau peut s'étendre au-delà du container -> scroll horizontal */
	.k-grid-content table,
	.k-grid-header table {
		min-width: 600px;
	}

	/* Splitter handle plus visible (Quick-win 2) */
	.k-splitbar-horizontal,
	.k-splitter > .k-splitbar {
		width: 6px !important;
		background: var(--color-border, #dddddd);
		cursor: col-resize;
	}
}

/* ============================================================
 *  Quick-win 1 : aliases icônes manquantes Kendo 2026
 * ============================================================ */
.k-i-information::before,
.k-i-info-circle::before,
.k-i-info::before {
	content: "\e144";  /* info circle glyph */
}

/* ============================================================
 *  Fix Kendo 2026 : zebra striping plus visible
 *  Par defaut en 2026 c est alpha 4%, trop faible
 * ============================================================ */
.k-grid .k-table-alt-row,
.k-grid tr.k-alt,
.k-grid .k-table-row.k-table-alt-row,
.k-grid tbody > tr:nth-child(even) {
	background-color: var(--color-bg-body, #f5f7fa) !important;
}

.k-grid .k-table-row:hover:not(.k-selected),
.k-grid tr:hover:not(.k-state-selected) {
	background-color: var(--color-bg-muted, #e9eef5) !important;
}

.k-grid .k-table-row.k-selected,
.k-grid tr.k-state-selected {
	background-color: var(--color-primary-soft, #dbe7f8) !important;
}

/* Header un peu plus visible */
.k-grid .k-grid-header .k-header,
.k-grid .k-grid-header th {
	background-color: var(--color-bg-alt, #f0f2f5) !important;
	border-bottom: 1px solid var(--color-border, #d9dde4);
	font-weight: 600;
}

/* Pagination fond */
.k-pager-wrap,
.k-pager {
	background-color: var(--color-bg-alt, #f0f2f5) !important;
	border-top: 1px solid var(--color-border, #d9dde4);
}

/* Grid toolbar aussi */
.k-grid .k-grid-toolbar,
.k-grid .k-toolbar {
	background-color: var(--color-bg-alt, #f0f2f5) !important;
	border-bottom: 1px solid var(--color-border, #d9dde4);
}


/* ====================================================================
 * Admin listing / bureau : colonne icone minimale, sans decalage
 * --------------------------------------------------------------------
 * Cible la premiere cellule <td class="center k-table-td"> des grilles
 * de navigation (liste des tiers, usagers, docs, ...) qui contiennent
 * un <button class="k-button no-text"> avec une icone k-i-*.
 * Avant : colonne ~60-80px -> icone 20x20 isolee a gauche (decalage).
 * Apres : colonne 32px -> icone collee proprement au texte.
 * ==================================================================== */
.k-grid .k-table-td.center:first-child {
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	padding: 0 4px !important;
}
.k-grid .k-table-td.center:first-child .k-button.no-text,
.k-grid .k-table-td.center:first-child .k-button-icontext.no-text {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	min-width: unset !important;
}
.k-grid .k-table-td.center:first-child .k-icon-32 {
	padding: 0 !important;
	font-size: 1.1em !important;
}

/* Override la largeur inline style="width: 100px" du Kendo Grid colgroup
 * sur la premiere colonne contenant l icone (table-layout: fixed oblige
 * a cibler le <col> directement, pas le <td>).
 *
 * IMPORTANT : scope via :has() aux SEULES grilles dont la 1ere colonne est
 * une colonne d'icone/action (cellule .center contenant un bouton .no-text
 * ou une icone .k-icon-32). Sans ce scope, la regle ecrasait a 36px la 1ere
 * colonne de TOUTES les grilles (regression generalisee depuis le portage
 * Kendo 2026 : le selecteur col:first-child matche desormais la nouvelle
 * structure DOM du Grid). */
.k-grid:has(.k-grid-content td.k-table-td.center:first-child .k-button.no-text) table > colgroup > col:first-child,
.k-grid:has(.k-grid-content td.k-table-td.center:first-child .k-icon-32) table > colgroup > col:first-child {
	width: 36px !important;
}