@charset "utf-8";

/* ============================================
   iManage UI — Apple-inspired design system
   ============================================ */

/* ── Police Caveat (handwriting) — message d'accueil du login ── */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 700;
	font-display: block;
	src: url('fonts/caveat/caveat-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
	               U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
	               U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 700;
	font-display: block;
	src: url('fonts/caveat/caveat-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
	               U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ── Palette sémantique — 5 tons de base ───────────────────── */
	--color-dark:       #1d1d1f;
	--color-gray:       #6e6e73;   /* WCAG AA ≥ 4.5:1 sur fond blanc */
	--color-gray-light: #f0f0f3;
	--color-light:      #f5f5f7;
	--color-white:      #ffffff;

	/* ── Alias fonctionnels (mappés sur la palette) ─────────────── */
	--bg-primary:      var(--color-light);
	--bg-surface:      var(--color-white);
	--bg-content:      var(--color-gray-light);
	--bg-navbar:       rgba(251, 251, 253, 0.80);
	--bg-notification: rgba(29, 29, 31, 0.94);
	--text-primary:    var(--color-dark);
	--text-secondary:  var(--color-gray);
	--text-on-dark:    var(--color-light);
	--accent:          #1fb4c5;
	--accent-hover:    #18a0b0;
	--border:          rgba(0, 0, 0, 0.10);
	--separator:       1px solid var(--border);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ════════════════════════════════════════════════
   Mode sombre — surcharge des variables fonctionnelles
   Activé via document.documentElement.setAttribute('data-theme', 'dark')
   ════════════════════════════════════════════════ */
[data-theme="dark"] {
	--color-dark:       #f5f5f7;
	--color-gray:       #8e8e93;
	--color-gray-light: #2c2c2e;
	--color-light:      #1c1c1e;
	--color-white:      #242426;

	--bg-primary:      #111113;
	--bg-surface:      #1c1c1e;
	--bg-content:      #2c2c2e;
	--bg-navbar:       rgba(22, 22, 24, 0.92);
	--text-primary:    #f5f5f7;
	--text-secondary:  #8e8e93;
	--text-on-dark:    #f5f5f7;
	--accent:          #3abfd2;
	--accent-hover:    #2eafc2;
	--border:          rgba(255, 255, 255, 0.08);
}
/* Transitions douces lors du changement de thème */
body,
.navbar,
.form-panel,
.lv-root,
.modal-content,
.card,
.panel-section {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
	background: var(--bg-surface);
	color: var(--text-primary);
	letter-spacing: -0.01em;
	padding-top: 48px;
}

h1 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.02em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
h4 { font-weight: 600; }
h5 { font-weight: 600; }
h6 { font-weight: 600; }

#notification_box {
	width: 100%;
	position: fixed;
	z-index: 1090;
	background: #000;
	height: 48px;
	overflow: hidden;
	top: 0;
	left: 0;
}

#notification_slider {
	transform: translateY(-48px);
	transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

#notification_slider.show-notification {
	transform: translateY(0);
}

#notification_message_bar {
	height: 48px;
	background: transparent;
}

.notification_message_content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	width: 100%;
	padding: 0 16px;
}

#notification_text {
	color: #fff;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#notification_message_bar {
	transition: background-color 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

#notification_message_bar.bg-success { background-color: #198754; }
#notification_message_bar.bg-info { background-color: #0d6efd; }
#notification_message_bar.bg-warning { background-color: #e67e00; }
#notification_message_bar.bg-danger { background-color: #dc3545; }

#notification_main_bar {
	height: 48px;
	background: transparent;
}

.notification_main_content {
	display: flex;
	align-items: center;
	height: 48px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
}

.notification_main_content .navbar-brand {
	flex-shrink: 0;
}

.notification_main_content .navbar-brand img {
	height: 28px;
	width: auto;
}

#content_title {
	flex: 1;
	position: relative;
	top: 0;
	text-transform: uppercase;
	color: var(--text-on-dark);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notification_bar_actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.session_controls {
	opacity: 0.7;
	transition: opacity var(--transition);
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: var(--text-on-dark);
	cursor: pointer;
}

.session_controls.visible {
	display: inline-flex !important;
}

.session_controls:hover { opacity: 1; }

/* Bouton toggle jour/nuit — toujours visible (indépendant de .session_controls) */
#theme_toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--text-on-dark);
	cursor: pointer;
	border: none;
	background: transparent;
	opacity: 0.7;
	transition: opacity var(--transition);
	flex-shrink: 0;
	padding: 0;
}
#theme_toggle:hover { opacity: 1; }

.lang-switcher-group {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0 4px;
}

.lang-switcher-group .lang-btn {
	border: none;
	border-radius: 4px;
	background: transparent;
	color: rgba(255,255,255,0.5);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 7px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s, background 0.2s;
}

.lang-switcher-group .lang-btn.active {
	background: rgba(0,180,216,0.22);
	color: #00B4D8;
}

.lang-switcher-group .lang-btn:hover:not(.active) {
	color: rgba(255,255,255,0.9);
}

.persistent_control {
	opacity: 0.7;
	transition: opacity var(--transition);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: var(--text-on-dark);
	cursor: pointer;
}

.persistent_control:hover { opacity: 1; }

.navbar {
	position: sticky;
	top: 48px;
	z-index: 1030;
	background: var(--bg-navbar) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: var(--separator);
	padding: 8px 0;
	transition: background var(--transition);
}

.navbar-brand img {
	opacity: 0.9;
	transition: opacity var(--transition);
}

.navbar-brand:hover img {
	opacity: 1;
}

.nav-link {
	color: var(--text-primary) !important;
	font-weight: 500;
	padding: 6px 14px !important;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

.nav-link > .fa-solid,
.nav-link > .fa-regular {
	margin-right: 6px;
	width: 1.1em;
	text-align: center;
}

.nav-link:hover {
	background: rgba(0, 0, 0, 0.04);
}

.dropdown-menu {
	border: var(--separator);
	border-radius: var(--radius-md);
	padding: 6px;
	background: var(--bg-surface);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	animation: dropdown-in 0.15s ease-out;
}

@keyframes dropdown-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
	padding: 7px 12px;
	border-radius: 6px;
	color: var(--text-primary);
	transition: background var(--transition);
}

.dropdown-item:hover, .dropdown-item:focus {
	background: var(--accent);
	color: #fff;
}

.dropdown-header {
	font-weight: 600;
	color: var(--text-secondary);
	padding: 7px 12px 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dropdown-divider {
	margin: 4px 12px;
	opacity: 0.15;
}

.dropdown-menu-columns {
	columns: 2;
	column-gap: 4px;
	column-rule: 1px solid var(--border);
	min-width: 480px;
}

.dropdown-group {
	break-inside: avoid;
	list-style: none;
}

.dropdown-group + .dropdown-group {
	margin-top: 2px;
}

#user {
	color: var(--text-secondary);
}

#user strong {
	color: var(--text-primary);
	font-weight: 600;
}

/* ─ #user : texte adaptatif au thème (override Bootstrap .text-muted) ─ */
#user .text-muted,
#user small,
#user #app_date {
	color: var(--text-secondary) !important;
}

/* ---- Page header (calendar zone) ----
   Zone entre la navbar et le contenu, masquée par défaut (max-height animé),
   affichée quand l'app active le calendrier (.visible).
   Dégradé léger pour se distinguer visuellement de la navbar. */
#page_header {
	display: flex;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	background: linear-gradient(to bottom, #ffffff, var(--bg-primary));
	transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}

#page_header.visible,
#page_header.always-visible {
	max-height: 80px;
	opacity: 1;
	padding: 12px 0;
	overflow: visible;
}

/* Mode always-visible : utilisé par les apps où le calendrier fait partie intégrante
   de l'écran (ex: change de devises). Ajouter .always-visible sur le #page_header
   dans le template de l'app plutôt que d'override en CSS. */

#page_header .container,
#page_header .container-fluid {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Icônes du date picker dans la zone calendrier */
.date-container .fa-solid,
.date-container .fa-regular {
	color: var(--accent);
}

#page_content {
	padding-top: 16px;
	padding-bottom: 60px;
}

#requested_content {
	padding-top: 0;
	padding-bottom: 0;
}

#page_header.visible + #page_content {
	padding-top: 0;
}

.panel-section-sticky {
	position: sticky;
	top: 134px;
}

#busy_overlay {
	position: fixed;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: rgba(0, 0, 0, 0.2);
	display: none;
	align-items: center;
	justify-content: center;
}

#busy_overlay.active {
	display: flex;
}

#busy_overlay .fa-spin {
	color: var(--accent);
	background: var(--bg-surface);
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	border-radius: 50%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ---- Breadcrumb Bar ----
   Se place entre la navbar (ou le #page_header calendrier quand visible) et
   #page_content. Masqué par défaut (max-height 0 + opacity 0), révélé
   avec un fondu + déroulement de la hauteur quand .visible est ajouté. */
#breadcrumb_bar {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	background: var(--bg-surface);
	border-bottom: var(--separator);
	transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}

#breadcrumb_bar.visible {
	max-height: 48px;
	opacity: 1;
	padding: 6px 0;
}

/* Quand le breadcrumb est visible, retire le padding-top du #page_content
   — le padding du breadcrumb sert d'espaceur — pour garder un spacing cohérent. */
#breadcrumb_bar.visible + #page_content {
	padding-top: 0;
}

#breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	margin: 0;
	padding: 0;
}

#breadcrumb .bc-item {
	color: var(--accent);
	cursor: pointer;
	font-weight: 500;
	border: none;
	background: none;
	padding: 0;
}

#breadcrumb .bc-item:hover {
	text-decoration: underline;
}

#breadcrumb .bc-sep {
	color: var(--text-secondary);
	font-size: .7rem;
}

#breadcrumb .bc-current {
	color: var(--text-primary);
	font-weight: 600;
}

#page_footer {
	position: fixed;
	height: 48px;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-surface);
	border-top: var(--separator);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 20px;
	z-index: 100;
}

#page_footer small {
	color: var(--text-secondary);
	font-weight: 500;
	letter-spacing: 0.02em;
}

#page_footer img {
	height: 20px;
	width: auto;
	opacity: 0.4;
	transition: opacity var(--transition);
}

#page_footer:hover img {
	opacity: 0.7;
}

#login_greeting_wrap {
	position: fixed;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1060;
	pointer-events: none;
	display: none;
}

#login_greeting_wrap span {
	font-family: 'Caveat', cursive;
	font-size: 4.5rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	line-height: 1;
	display: inline-block;
	transition: opacity 0.7s ease-in-out;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.login-brand-col {
	background: #000;
	min-height: 320px;
}

/* ---- Confirm box — au-dessus du form_container ---- */
#confirm_box { z-index: 1060; }

/* Severity (info | warning | danger) — message + icônes en tête de modal */
.confirm-message {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 16px;
	border-radius: var(--radius-sm);
	background: var(--bg-content);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-primary);
}
.confirm-icon {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}
.confirm-icon-info    { color: #0d6efd; }
.confirm-icon-warning { color: #e67e00; }
.confirm-icon-danger  { color: #dc3545; }

/* Le fond du message reflète la sévérité — discret mais perceptible */
.confirm-message:has(.confirm-icon-warning) { background: rgba(230, 126, 0, 0.08); }
.confirm-message:has(.confirm-icon-danger)  { background: rgba(220, 53, 69, 0.08); }

/* ════════════════════════════════════════════════
   Form Container — deux composants distincts :

   · .form-panel           (default)
       Drawer latéral 500px à droite, slide depuis la droite.
       Usage : saisie de formulaires courts (create/update).

   · .form-panel-overlay
       Modal plein écran centré, max 1320px, slide depuis le bas.
       Usage : fiche détail complète, consultation riche (niveau 2).
       (Anciennement .form-panel-xl — alias conservé pour compat.)

   · .form-panel-overlay-lg
       Variante large de l'overlay, max 1600px.
       (Anciennement .form-panel-xxl — alias conservé pour compat.)
   ════════════════════════════════════════════════ */
#form_container {
	display: none;
	position: fixed;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
}
#form_container.open { display: block; }

.form-backdrop {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
#form_container.open .form-backdrop { opacity: 1; }

.form-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	border-bottom: var(--separator);
	flex-shrink: 0;
}
.form-panel-header h5 { margin: 0; font-weight: 600; }
.form-panel-body      { flex: 1; overflow-y: auto; padding: 20px; }

.form-panel {
	position: absolute;
	top: 20px; right: 20px; bottom: 20px;
	width: calc(100% / 3);
	min-width: 380px;
	max-width: 580px;
	background: var(--bg-surface);
	border-radius: var(--radius-md);
	transform: translateX(calc(100% + 20px));
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 40px rgba(0, 0, 0, 0.18);
}
#form_container.open .form-panel {
	transform: translateX(0);
	opacity: 1;
}

.form-panel.form-panel-overlay,
.form-panel.form-panel-overlay-lg,
.form-panel.form-panel-xl,
.form-panel.form-panel-xxl {
	top: 10px;
	bottom: 10px;
	left: 50%;
	right: auto;
	width: 100%;
	transform: translateX(-50%) translateY(30px);
	opacity: 0;
	border-radius: var(--radius-md);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
.form-panel.form-panel-overlay,
.form-panel.form-panel-xl    { max-width: 1320px; }
.form-panel.form-panel-overlay-lg,
.form-panel.form-panel-xxl   { max-width: 1600px; }
#form_container.open .form-panel.form-panel-overlay,
#form_container.open .form-panel.form-panel-overlay-lg,
#form_container.open .form-panel.form-panel-xl,
#form_container.open .form-panel.form-panel-xxl {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

@media (max-width: 575.98px) {
	.form-panel,
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-overlay-lg,
	.form-panel.form-panel-xl,
	.form-panel.form-panel-xxl {
		width: 100%;
		left: 0; right: 0;
		max-width: none;
		transform: translateY(100%);
		opacity: 0;
	}
	#form_container.open .form-panel,
	#form_container.open .form-panel.form-panel-overlay,
	#form_container.open .form-panel.form-panel-overlay-lg,
	#form_container.open .form-panel.form-panel-xl,
	#form_container.open .form-panel.form-panel-xxl {
		transform: translateY(0);
		opacity: 1;
	}
}
@media (min-width: 576px) and (max-width: 991.98px) {
	.form-panel { width: 80%; }
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-xl { max-width: 100%; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-xl { max-width: 960px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-xl { max-width: 1140px; }
}

/* ════════════════════════════════════════════════
   Panel section — card utilisée dans les rapports/détails
   Regroupe des informations liées avec un fond contrasté.
   ════════════════════════════════════════════════ */
.panel-section {
	background: var(--bg-primary);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 20px;
}
.panel-section:last-child  { margin-bottom: 0; }
.panel-section h6 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--text-primary);
}
.panel-section h6:first-child { margin-top: 0; }
.panel-section .table { --bs-table-bg: transparent; margin-bottom: 0; }

/* ════════════════════════════════════════════════
   Detail header — en-tête riche des vues détail
   Usage : iManage.detail_header_html({ icon, title, subtitle, note, extra })
   Props : icon (classes FA), title, subtitle (au-dessus), note (en-dessous),
           extra (droite, ex: badge de statut)
   ════════════════════════════════════════════════ */
.detail-header {
	display: flex;
	align-items: center;
	background: #18181b;
	border-radius: 0;
	padding: 20px 24px;
	margin: -20px -20px 20px -20px;
}
[data-theme="dark"] .detail-header { background: #0d0d0f; }
.detail-header-icon-box {
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	flex-shrink: 0;
	color: #ffffff;
	font-size: 1.2rem;
}
.detail-header-body {
	flex: 1 1 0;
	min-width: 0;
}
.detail-header-subtitle {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}
.detail-header-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	margin: 0;
}
.detail-header-note {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	margin-top: 4px;
}
.detail-header-extra {
	flex-shrink: 0;
	margin-left: 16px;
	align-self: flex-start;
}

/* ════════════════════════════════════════════════
   Scrollbar discrète (WebKit)
   ════════════════════════════════════════════════ */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

/* ════════════════════════════════════════════════
   Dashboard (.dashboard-v3) — structure commune
   Les apps peuvent ajouter leurs propres extensions (KPIs spécifiques,
   cards métier, etc.) dans leur app.css. Cette base fournit hero, kpis,
   cards et feed. La couleur d'accent est automatiquement var(--accent).
   ════════════════════════════════════════════════ */
.dashboard-v3 {
    --d-ink:    #0f172a;
    --d-mute:   #64748b;
    --d-line:   #e2e8f0;
    --d-surf:   #ffffff;
    --d-soft:   #f8fafc;
    --d-softer: #f1f5f9;
    --d-accent: var(--accent);

    color: var(--d-ink);
    font-size: 14px;
    line-height: 1.5;
}
.dashboard-v3 h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}
.dashboard-v3 h6.g-card-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d-mute);
    margin: 0 0 12px;
}

/* Hero */
.dashboard-v3 .g-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--d-soft), var(--d-surf));
    border: 1px solid var(--d-line);
    border-radius: 12px;
}
.dashboard-v3 .g-hello { min-width: 0; flex: 1; }
.dashboard-v3 .g-role-pill {
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--d-accent);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}
.dashboard-v3 .g-hint {
    font-size: 13px;
    color: var(--d-ink);
    margin: 0;
    opacity: 0.85;
}

/* KPI strip */
.dashboard-v3 .g-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.dashboard-v3 .g-kpi-card {
    background: var(--d-surf);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.dashboard-v3 .g-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dashboard-v3 .g-kpi-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-softer);
    border-radius: 8px;
    color: var(--d-accent);
    font-size: 16px;
}
.dashboard-v3 .g-kpi-body { min-width: 0; flex: 1; }
.dashboard-v3 .g-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d-mute);
    margin-bottom: 4px;
}
.dashboard-v3 .g-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.1;
    margin-bottom: 4px;
}
.dashboard-v3 .g-kpi-hint { font-size: 12px; color: var(--d-mute); }

/* Cards */
.dashboard-v3 .g-card {
    background: var(--d-surf);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.dashboard-v3 .g-card-body { font-size: 13px; }
.dashboard-v3 .g-card-body .table { margin-bottom: 0; }
.dashboard-v3 .g-card-body .table th {
    font-size: .72rem !important;
    color: var(--d-mute) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--d-line);
    padding: 8px 10px;
}
.dashboard-v3 .g-card-body .table td {
    padding: 8px 10px;
    border-top: 1px solid var(--d-line);
    vertical-align: middle;
}

/* Activité / feed */
.dashboard-v3 .g-feed { list-style: none; padding: 0; margin: 0; }
.dashboard-v3 .g-feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--d-line);
}
.dashboard-v3 .g-feed-item:last-child { border-bottom: none; }
.dashboard-v3 .g-feed-icon {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-softer);
    color: var(--d-accent);
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
}
.dashboard-v3 .g-feed-main { flex: 1; min-width: 0; }
.dashboard-v3 .g-feed-label {
    font-weight: 500;
    color: var(--d-ink);
    font-size: 13px;
}

/* ════════════════════════════════════════════════
   Alertes dashboard (.g-alertes)
   ════════════════════════════════════════════════ */
.g-alertes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}
.g-alerte {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	border-left: 4px solid transparent;
}
.g-alerte-haute  { background: #fff5f5; border-left-color: #dc3545; }
.g-alerte-moyenne { background: #fff8ec; border-left-color: #fd7e14; }
.g-alerte-basse  { background: #fefce8; border-left-color: #d97706; }
.g-alerte-icon   { font-size: 18px; flex-shrink: 0; }
.g-alerte-body   { display: flex; flex-direction: column; min-width: 0; }
.g-alerte-titre  { font-size: 13px; font-weight: 600; color: var(--color-dark); }
.g-alerte-msg    { font-size: 12px; color: var(--color-gray); }

/* ════════════════════════════════════════════════
   Status — deux patterns distincts
   · .status-box  : carré 32x32 avec abréviation 3 lettres (colonnes compactes)
   · .status-pill : pill icône + texte (lisible en N&B, a11y colorblind)
   La couleur de fond est fournie par les classes .badge-* de l'app.
   ════════════════════════════════════════════════ */
.status-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: .6rem;
    padding: 0;
    text-align: center;
    line-height: 1;
    letter-spacing: .02em;
}

/* Pill accessible — icône + libellé. L'icône double le signal de la couleur
   pour les malvoyants et le mode N&B (accessibility guideline 1.4.1). */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #fff;
}
.status-pill > .fa-solid,
.status-pill > .fa-regular {
    font-size: 10px;
}

/* ════════════════════════════════════════════════
   Bootstrap overrides standard iManage
   (les couleurs de marque sont définies dans app.css de chaque projet)
   ════════════════════════════════════════════════ */
.alert {
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 500;
}

.nav-tabs .nav-link {
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-pills .nav-link.active {
	background: var(--accent);
}

.login-brand-logo {
	width: 60%;
	max-width: 160px;
	height: auto;
}

#login_box .modal-dialog { max-width: 560px; }
#login_box .btn-primary  { font-weight: 600; }

/* Login box — animation slide-up (remplace le simple fade Bootstrap) */
#login_box.modal.fade .modal-dialog {
	transform: translateY(28px);
	transition: transform 0.34s ease-out !important;
}
#login_box.modal.fade.show .modal-dialog {
	transform: none;
}

.form-control {
	border-radius: var(--radius-sm);
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 8px 12px;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Focus visible au clavier — a11y. Affiche un anneau sur les éléments
   focussés UNIQUEMENT via Tab (pas au clic souris). */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Retire l'outline par défaut sur clic souris — garde focus-visible au clavier */
:focus:not(:focus-visible) {
	outline: none;
}

.form-select {
	border-radius: var(--radius-sm);
}

.table thead th {
	font-weight: 600;
	font-size: .78rem;
	text-transform: capitalize;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
}

.table td {
	vertical-align: top;
	border-color: var(--border);
	padding: 10px 12px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: rgba(0, 0, 0, 0.025);
}

.table-sm td, .table-sm th {
	padding: 6px 10px;
}

div.dataTables_info,
.dataTables_info {
	color: var(--text-secondary) !important;
	font-size: .72rem !important;
}

div.dataTables_length,
div.dataTables_length label,
.dataTables_length,
.dataTables_length label {
	font-size: .72rem !important;
	color: var(--text-secondary) !important;
}

div.dataTables_length select,
.dataTables_length select {
	font-size: .72rem !important;
}

div.dataTables_filter,
div.dataTables_filter label,
.dataTables_filter,
.dataTables_filter label {
	font-size: .72rem !important;
	color: var(--text-secondary) !important;
}

div.dataTables_filter input,
.dataTables_filter input {
	font-size: .78rem !important;
}

.table td .btn,
.table th .btn {
	padding-left: 10px;
	padding-right: 10px;
}

.table td .fa-solid,
.table td .fa-regular {
	padding: 0 4px;
}

strong.detail-link {
	color: var(--accent);
	cursor: pointer;
}

strong.detail-link:hover {
	text-decoration: underline;
}

.content-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-primary);
	background: var(--bg-content);
	margin: 20px 0;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	gap: 8px;
}

.content-title .content-title-actions {
	margin-left: auto;
}

.content-title small {
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: 0;
	margin-left: 10px;
}

#report_nav_links,
#report_form_links {
	margin-left: auto;
	display: flex;
	gap: 2px;
}

#report_nav_links + #report_form_links {
	margin-left: 0;
}

#report_nav_links .nav-link-btn,
#report_form_links .form-link-btn {
	background: none;
	border: none;
	color: var(--accent);
	font-size: .8rem;
	font-weight: 500;
	padding: 2px 8px;
	cursor: pointer;
	text-decoration: none;
}

#report_nav_links .nav-link-btn:hover,
#report_form_links .form-link-btn:hover {
	text-decoration: underline;
	color: var(--accent-hover);
}

/* ---- Action icons (tables standards, hors list_view) ---- */
.record_tools .fa-solid,
.record_tools .fa-regular,
.change_password_command,
.update_data,
.cancel_data {
	padding: 4px 6px;
	margin: 0 2px;
	cursor: pointer;
	color: var(--text-secondary);
	transition: color var(--transition);
}

.record_tools .fa-solid:hover,
.record_tools .fa-regular:hover,
.change_password_command:hover,
.update_data:hover,
.cancel_data:hover {
	color: var(--accent);
}

.form-container {
	max-width: 480px;
	margin: 0 auto;
}

.form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-bottom: 24px;
}

.report-header {
	text-align: center;
	margin-bottom: 24px;
}

.report-header img {
	width: 180px;
	height: auto;
	margin-bottom: 8px;
}

.report-header .report-subtitle {
	color: var(--accent);
	font-weight: 600;
}

.report-header h3 {
	font-weight: 700;
	margin-top: 16px;
	letter-spacing: 0.02em;
}

.report-header h3 small {
	font-weight: 400;
	color: var(--text-secondary);
}

.report-header .report-date {
	text-align: right;
	color: var(--text-secondary);
}

.report-main-title {
	font-weight: 700;
	margin-top: 16px;
	letter-spacing: 0.02em;
}

.no_display,
input[type="radio"].no_display,
input[type="checkbox"].no_display {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.data_block {
	text-transform: uppercase;
}

.print_change_ticket, #expand_content, .dropdown-menu a {
	cursor: pointer;
}

.number {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.input-group-text {
	padding-left: 20px;
	padding-right: 20px;
}

input[type="number"] {
	text-align: right;
}

.lv-root {
    --lv-ink:    #0f172a;
    --lv-mute:   #64748b;
    --lv-line:   #e2e8f0;
    --lv-surf:   #ffffff;
    --lv-soft:   #f8fafc;
    --lv-softer: #f1f5f9;
    --lv-cyan:   #00B4D8;
    --lv-accent: #0891b2;
    background: var(--lv-surf);
    border: 1px solid var(--lv-line);
    border-radius: 12px;
    overflow: hidden;
    color: var(--lv-ink);
    font-feature-settings: "tnum" 1;
    margin-bottom: 20px;
}

.lv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--lv-line);
    flex-wrap: wrap;
}
.lv-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lv-ink);
}
.lv-count {
    font-size: 12px;
    font-weight: 500;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--lv-softer);
    color: var(--lv-mute);
    border: 1px solid var(--lv-line);
}
.lv-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.lv-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--lv-softer);
    border: 1px solid var(--lv-line);
    border-radius: 8px;
    padding: 0 10px;
    transition: border-color .15s, background .15s;
    min-width: 240px;
}
.lv-search:focus-within {
    background: var(--lv-surf);
    border-color: var(--lv-cyan);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.12);
}
.lv-search .fa-magnifying-glass {
    color: var(--lv-mute);
    font-size: 12px;
    margin-right: 6px;
}
.lv-search-input {
    border: 0;
    background: transparent;
    padding: 7px 0;
    outline: 0;
    font-size: 13.5px;
    width: 100%;
    color: var(--lv-ink);
}
.lv-search-input::placeholder { color: var(--lv-mute); }

.lv-btn-primary {
    background: var(--lv-ink); color: #fff; border: 0;
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.lv-btn-primary:hover { background: #1e293b; }
.lv-btn-ghost {
    background: transparent; color: var(--lv-mute); border: 1px solid var(--lv-line);
    padding: 6px 11px; border-radius: 7px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.lv-btn-ghost:hover:not(:disabled) { background: var(--lv-softer); color: var(--lv-ink); border-color: var(--lv-mute); }
.lv-btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.lv-table-wrap { overflow-x: auto; }
.lv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.lv-th {
    padding: 11px 14px;
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lv-mute);
    font-weight: 500;
    border-bottom: 1px solid var(--lv-line);
    background: var(--lv-soft);
    white-space: nowrap;
    user-select: none;
    /* Sticky : l'en-tête reste visible lors du scroll dans les longues listes */
    position: sticky;
    top: 0;
    z-index: 2;
}
.lv-th.lv-sortable {
    cursor: pointer;
    transition: color .15s, background .15s;
}
.lv-th.lv-sortable:hover { color: var(--lv-ink); background: var(--lv-softer); }
.lv-th.lv-sorted { color: var(--lv-ink); }
.lv-sort-ind {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.5;
}
.lv-th.lv-sorted .lv-sort-ind { opacity: 1; color: var(--lv-accent); }

.lv-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--lv-line);
    vertical-align: top;
    color: var(--lv-ink);
}
.lv-table tbody tr:last-child td { border-bottom: 0; }
.lv-table tbody tr.lv-row-clickable { cursor: pointer; transition: background .12s; }
.lv-table tbody tr.lv-row-clickable:hover { background: var(--lv-soft); }

/* Record number — la colonne déclencheuse du détail (overlay) */
.lv-table td.lv-record-number {
    cursor: pointer;
    color: var(--lv-accent);
    font-weight: 600;
    transition: color .12s;
}
.lv-table td.lv-record-number:hover {
    color: var(--lv-ink);
    text-decoration: underline;
}

/* Row expand (niveau 1) — chevron + animation max-height */
.lv-table th.lv-expand-header,
.lv-table td.lv-expand-cell {
    width: 32px;
    padding: 8px 6px;
    text-align: center;
}
.lv-expand-toggle {
    cursor: pointer;
    color: var(--lv-mute);
    font-size: 11px;
    transition: color .12s, transform .2s ease;
    display: inline-block;
}
.lv-expand-toggle:hover { color: var(--lv-ink); }
.lv-expand-toggle.fa-chevron-down { transform: rotate(0deg); }

.lv-table tr.lv-expansion > td {
    padding: 0;
    background: var(--lv-soft);
    border-bottom: 1px solid var(--lv-line);
}
.lv-expansion-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 14px;
    transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.lv-table tr.lv-expansion.lv-expanded > td > .lv-expansion-body {
    max-height: 500px;
    opacity: 1;
    padding: 14px;
}
.lv-align-center { text-align: center; }
.lv-align-right  { text-align: right; }

/* Colonnes tronquées (`truncate: true` dans la config de la colonne).
   Le texte complet est exposé via l'attribut title (hover + a11y screenreader).
   max-width nécessaire pour que text-overflow fonctionne sur table-cell. */
.lv-table td.lv-truncate {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record_tools {
    display: inline-flex;
    gap: 2px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity .15s ease;
    vertical-align: middle;
}
.lv-table tbody tr:hover .record_tools { opacity: 1; }
.record_tools .update_data,
.record_tools .cancel_data {
    padding: 3px 5px;
    color: var(--lv-mute);
    cursor: pointer;
    border-radius: 4px;
    transition: color .12s, background .12s;
    font-size: 12px;
}
.record_tools .update_data:hover { color: var(--lv-ink); background: var(--lv-soft); }
.record_tools .cancel_data:hover { color: #c03030; background: #fdecec; }

/* ════════════════════════════════════════════════
   Sous-navigation contextuelle (lv-subnav)
   Boutons onglet-like pour filtrer une list_view par sous-entité.
   Usage : <div class="lv-subnav">
               <button class="lv-subnav-btn" data-link_id="..." data-title="...">Libellé</button>
           </div>
   ════════════════════════════════════════════════ */
.lv-subnav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--lv-line);
    margin-bottom: 16px;
}
.lv-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--lv-line);
    border-radius: 8px;
    background: var(--lv-surf);
    color: var(--lv-mute);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color .13s, background .13s, border-color .13s;
}
.lv-subnav-btn:hover {
    background: var(--lv-softer);
    color: var(--lv-ink);
    border-color: var(--lv-mute);
}
.lv-subnav-btn.active {
    background: var(--lv-softer);
    color: var(--lv-mute);
    border-color: var(--lv-line);
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
}
/* Subnav de section (injecté par menu.js) : boutons alignés à droite */
.lv-subnav[data-menu-level] { justify-content: flex-end; }

/* ════════════════════════════════════════════════
   Fil d'Ariane contextuel (lv-breadcrumb)
   Affiché en haut de la vue après navigation via lv-subnav[data-menu-level].
   Usage : <div class="lv-breadcrumb">
               <a class="lv-breadcrumb-link" data-link_id="..." data-title="...">
                   <i class="fa-solid fa-arrow-left"></i> Section
               </a>
               <span class="lv-breadcrumb-sep">›</span>
               <span class="lv-breadcrumb-current">Sous-vue</span>
           </div>
   ════════════════════════════════════════════════ */
.lv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--lv-mute);
    margin-bottom: 14px;
}
.lv-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lv-mute);
    text-decoration: none;
    cursor: pointer;
    transition: color .12s;
}
.lv-breadcrumb-link:hover { color: var(--lv-ink); }
.lv-breadcrumb-sep { opacity: 0.4; font-size: 11px; }
.lv-breadcrumb-current { color: var(--lv-ink); font-weight: 500; }

/* ════════════════════════════════════════════════
   Panneau de détail d'une ligne (lv-dp)
   Paires label / valeur pour expansion ou détail.
   Usage : <div class="lv-dp-row">
               <span class="lv-dp-label">Libellé</span>
               <span class="lv-dp-val">Valeur</span>
           </div>
   ════════════════════════════════════════════════ */
.lv-dp-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--lv-line);
    font-size: 13px;
}
.lv-dp-row:last-child { border-bottom: 0; }
.lv-dp-label {
    flex: 0 0 160px;
    color: var(--lv-mute);
    font-size: 12px;
    font-weight: 500;
}
.lv-dp-val {
    flex: 1;
    color: var(--lv-ink);
    word-break: break-word;
}

/* ════════════════════════════════════════════════
   Mode sombre — surcharges composants list_view
   ════════════════════════════════════════════════ */
[data-theme="dark"] .lv-root {
    --lv-ink:    #dde1e7;
    --lv-mute:   #8892a4;
    --lv-line:   rgba(255, 255, 255, 0.07);
    --lv-surf:   #1c1c1e;
    --lv-soft:   #242426;
    --lv-softer: #2c2c2e;
    border-color: var(--lv-line);
}
[data-theme="dark"] .lv-search-input { color: var(--lv-ink); }
/* lv-btn-primary : fond clair (#dde1e7) en mode sombre → texte doit être sombre */
[data-theme="dark"] .lv-btn-primary { background: var(--lv-ink); color: #0f172a; }
[data-theme="dark"] .lv-btn-primary:hover { background: #f0f4f8; color: #0f172a; }
[data-theme="dark"] .record_tools .cancel_data:hover { background: #3a1515; color: #f47; }

/* ════════════════════════════════════════════════
   Mode sombre — surcharges composants Bootstrap
   ════════════════════════════════════════════════ */
[data-theme="dark"] .modal-content {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border);
    background: var(--bg-content);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-content);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-content);
    color: var(--text-primary);
    border-color: var(--accent);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder { color: var(--text-secondary); }
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-content);
    color: var(--text-secondary);
    border-color: var(--border);
}
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-surface);
    border-color: var(--border);
}
[data-theme="dark"] .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background: var(--bg-content); color: var(--text-primary); }
[data-theme="dark"] .dropdown-divider { border-color: var(--border); }
[data-theme="dark"] .card {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background: var(--bg-content);
    border-color: var(--border);
}
[data-theme="dark"] .table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-table-border-color: var(--border);
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

/* ── Boutons Bootstrap — inversions de contraste nécessaires en mode sombre ─── */

/* btn-secondary : gris #6c757d trop proche du fond sombre → on l'éclaircit        */
[data-theme="dark"] .btn-secondary {
    --bs-btn-bg:               #4e5966;
    --bs-btn-border-color:     #4e5966;
    --bs-btn-color:            #e2e8f0;
    --bs-btn-hover-bg:         #5d6878;
    --bs-btn-hover-border-color: #5d6878;
    --bs-btn-hover-color:      #f0f4f8;
    --bs-btn-active-bg:        #404d5a;
    --bs-btn-active-border-color: #404d5a;
    --bs-btn-active-color:     #f0f4f8;
    --bs-btn-disabled-bg:      #4e5966;
    --bs-btn-disabled-border-color: #4e5966;
    --bs-btn-disabled-color:   #8892a4;
}

/* btn-light : fond blanc/clair inesthétique sur fond sombre → surface sombre       */
[data-theme="dark"] .btn-light {
    --bs-btn-bg:               var(--bg-content);
    --bs-btn-border-color:     var(--border);
    --bs-btn-color:            var(--text-primary);
    --bs-btn-hover-bg:         var(--bg-surface);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-hover-color:      var(--text-primary);
    --bs-btn-active-bg:        var(--bg-primary);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-active-color:     var(--text-primary);
}

/* btn-dark : fond quasi-noir → disparaît sur fond sombre, on le rend clair         */
[data-theme="dark"] .btn-dark {
    --bs-btn-bg:               #dde1e7;
    --bs-btn-border-color:     #dde1e7;
    --bs-btn-color:            #0f172a;
    --bs-btn-hover-bg:         #f0f4f8;
    --bs-btn-hover-border-color: #f0f4f8;
    --bs-btn-hover-color:      #0f172a;
    --bs-btn-active-bg:        #c8cfd9;
    --bs-btn-active-border-color: #c8cfd9;
    --bs-btn-active-color:     #0f172a;
}

/* btn-outline-secondary : bordure grise peu visible sur fond sombre               */
[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:            #9aa3b0;
    --bs-btn-border-color:     rgba(255, 255, 255, 0.18);
    --bs-btn-hover-color:      var(--text-primary);
    --bs-btn-hover-bg:         var(--bg-content);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.30);
    --bs-btn-active-color:     var(--text-primary);
    --bs-btn-active-bg:        var(--bg-content);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.30);
}

/* btn-outline-dark : texte et bordure #212529 → quasi-invisibles sur fond sombre  */
[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color:            var(--text-primary);
    --bs-btn-border-color:     rgba(255, 255, 255, 0.20);
    --bs-btn-hover-color:      #0f172a;
    --bs-btn-hover-bg:         #dde1e7;
    --bs-btn-hover-border-color: #dde1e7;
    --bs-btn-active-color:     #0f172a;
    --bs-btn-active-bg:        #dde1e7;
    --bs-btn-active-border-color: #dde1e7;
}

/* Fallback directs (Bootstrap < 5.2 sans --bs-btn-*) */
[data-theme="dark"] .btn-secondary          { background-color: #4e5966; border-color: #4e5966; color: #e2e8f0; }
[data-theme="dark"] .btn-secondary:hover    { background-color: #5d6878; border-color: #5d6878; color: #f0f4f8; }
[data-theme="dark"] .btn-light              { background-color: var(--bg-content); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .btn-light:hover        { background-color: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .btn-dark               { background-color: #dde1e7; border-color: #dde1e7; color: #0f172a; }
[data-theme="dark"] .btn-dark:hover         { background-color: #f0f4f8; border-color: #f0f4f8; color: #0f172a; }
[data-theme="dark"] .btn-outline-secondary  { color: #9aa3b0; border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bg-content); border-color: rgba(255,255,255,0.30); color: var(--text-primary); }
[data-theme="dark"] .btn-outline-dark       { color: var(--text-primary); border-color: rgba(255,255,255,0.20); }
[data-theme="dark"] .btn-outline-dark:hover { background-color: #dde1e7; border-color: #dde1e7; color: #0f172a; }

[data-theme="dark"] .dashboard-v3 {
    --d-ink:    #dde1e7;
    --d-mute:   #8892a4;
    --d-line:   rgba(255, 255, 255, 0.07);
    --d-surf:   #1c1c1e;
    --d-soft:   #242426;
    --d-softer: #2c2c2e;
    color: var(--d-ink);
}
[data-theme="dark"] .dashboard-v3 h2 { color: var(--d-ink); }

/* ════════════════════════════════════════════════
   Empty state — pattern réutilisable
   Usage minimal :
       <div class="empty-state">
           <i class="empty-state-icon fa-regular fa-folder-open"></i>
           <h3 class="empty-state-title">Aucun enregistrement</h3>
           <p class="empty-state-hint">Commencez par ajouter votre premier élément.</p>
           <button class="btn btn-primary btn-sm empty-state-action">
               <i class="fa-solid fa-plus"></i> Nouveau
           </button>
       </div>
   ════════════════════════════════════════════════ */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    max-width: 420px;
    margin: 0 auto;
}
.empty-state-icon {
    font-size: 40px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: 16px;
    display: block;
}
.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.empty-state-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}
.empty-state-action {
    margin-top: 4px;
}

/* list_view utilise .lv-empty (alias simple) ou .empty-state (pattern riche) */
.lv-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--lv-mute);
    font-size: 14px;
    margin: 0;
}

.lv-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid var(--lv-line);
    background: var(--lv-soft);
    font-size: 12.5px;
    color: var(--lv-mute);
    flex-wrap: wrap;
}
.lv-info { font-variant-numeric: tabular-nums; }
.lv-pager {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lv-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 0 0;
    color: var(--lv-mute);
}
.lv-pagesize-select {
    padding: 4px 6px;
    border: 1px solid var(--lv-line);
    border-radius: 6px;
    background: var(--lv-surf);
    color: var(--lv-ink);
    font-size: 12.5px;
    outline: 0;
    cursor: pointer;
}
.lv-pagesize-select:focus { border-color: var(--lv-cyan); }
.lv-page-indicator {
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: center;
    color: var(--lv-ink);
    font-weight: 500;
}

@media (max-width: 640px) {
    .lv-header { flex-direction: column; align-items: stretch; }
    .lv-search { min-width: 0; width: 100%; }
    .lv-footer { flex-direction: column; align-items: stretch; }
    .lv-pager { justify-content: center; }

    /* ── Colonnes masquées sur mobile ── */
    .lv-table th.lv-mobile-hide,
    .lv-table td.lv-mobile-hide { display: none; }

    /* ── Bandeau "Plus de détails sur ordinateur" ── */
    .lv-mobile-hint { display: flex; }
}

/* Le bandeau est caché sur desktop */
.lv-mobile-hint {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--lv-mute);
    background: var(--lv-soft);
    border-top: 1px solid var(--lv-line);
    border-radius: 0 0 var(--lv-radius) var(--lv-radius);
}

.lv-root .lv-tag {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; line-height: 1.5;
    background: var(--lv-softer); color: var(--lv-mute); border: 1px solid var(--lv-line);
}
.lv-root .lv-tag-ok      { background: rgba(16,185,129,.10); color: #059669; border-color: rgba(16,185,129,.25); }
.lv-root .lv-tag-warn    { background: rgba(217,119,6,.10);  color: #d97706; border-color: rgba(217,119,6,.25); }
.lv-root .lv-tag-bad     { background: rgba(220,38,38,.10);  color: #dc2626; border-color: rgba(220,38,38,.25); }
.lv-root .lv-tag-info    { background: rgba(59,130,246,.10); color: #2563eb; border-color: rgba(59,130,246,.25); }
.lv-root .lv-tag-mute    { background: var(--lv-softer); color: var(--lv-mute); border-color: var(--lv-line); }

.lv-root td .lv-count {
    display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 6px;
    background: var(--lv-softer); color: var(--lv-mute); border: 1px solid var(--lv-line);
    font-size: 12px; font-weight: 500; text-align: center;
}

.btn, .btn-sm { border-radius: 7px; font-weight: 500; transition: background .15s, border-color .15s; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-primary { box-shadow: none; }
.btn-outline-primary:hover { box-shadow: none; }

.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important;
    border-color: var(--accent) !important;
}

/* ════════════════════════════════════════════════
   Respecte prefers-reduced-motion — a11y
   Les utilisateurs avec vestibular disorders ou en mode économie
   de batterie désactivent les animations système. On respecte.
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.ms-bar {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 20px 0 10px;
    overflow-x: auto;
    position: relative;
}
.ms-node {
    flex: 1 1 0;
    min-width: 140px;
    text-align: center;
    position: relative;
    padding: 0 8px;
}

.ms-node::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}
.ms-node:last-child::before { display: none; }

.ms-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00B4D8, #0891b2);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 180, 216, 0.25);
}
.ms-label {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    margin-top: 10px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.ms-code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
}
.ms-desc {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.4;
}

.ms-node.ms-done   .ms-circle { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25); }
.ms-node.ms-active .ms-circle { background: linear-gradient(135deg, #00B4D8, #0891b2); }
.ms-node.ms-todo   .ms-circle { background: #e2e8f0; color: #64748b; box-shadow: none; }
.ms-node.ms-done::before   { background: #10B981; }

/* ════════════════════════════════════════════════
   Print — règles canoniques iManage
   Cache le chrome UI, neutralise les positions fixes, formate la page A4.
   Les apps peuvent ajouter leurs règles spécifiques dans leur app.css.
   ════════════════════════════════════════════════ */
@media print {
	.navbar,
	#notification_box,
	#login_box,
	#confirm_box,
	#update_box,
	#change_password_box,
	#new_password_box,
	#page_footer,
	#page_header,
	#form_container,
	#busy_overlay,
	.print_toolbar,
	.form-actions,
	.record_tools,
	.session_controls,
	.no-print {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		padding-top: 0 !important;
		font-size: 9pt !important;
	}

	#page, #page_content {
		position: static !important;
		overflow: visible !important;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff !important;
	}

	#requested_content,
	#requested_content > div {
		background: #fff !important;
		padding: 0 !important;
	}

	table { width: 100%; }
	td { vertical-align: top; }
	a { text-decoration: none !important; color: #000 !important; }

	.card-header { padding: 4px 8px !important; }
	.card-body { padding: 0 !important; }
	h5 { font-size: 11pt !important; }

	.report-header { margin-bottom: 16px; }
	.report-header img { width: 140px; }
	.report-main-title { margin-top: 8px; }

	@page { size: A4 landscape; margin: 15mm; }
}