/* Mini CRM — feuille de style de l'interface publique ([mini_crm]).
   Conçue pour ne jamais déborder sur le reste du site : tout est scopé
   sous #mini-crm-root / .mini-crm-root. */

.mini-crm-root {
	/* Charte COM MANIA — mêmes teintes que le thème (com-mania-theme) et le
	   système RH (com-mania-rh/public/css/app.css), pour que les deux outils
	   maison paraissent d'un seul tenant sur le site :
	   --mc-navy = brand-primary-dark (bandeaux sombres : sidebar, toast) ;
	   --mc-navy-light = brand-primary (violet vif : liens, boutons, actif) ;
	   --mc-navy-darker = brand-primary-darker (survol des boutons). */
	--mc-navy: #4A3563;
	--mc-navy-light: #6B4E8E;
	--mc-navy-darker: #372850;
	--mc-accent: #1a7f4f;
	--mc-accent-light: #e3f6ec;
	--mc-danger: #b3261e;
	--mc-danger-light: #fdeceb;
	--mc-warn: #b45309;
	--mc-warn-light: #fef3e2;
	/* Étapes Potentiel/Cible du pipeline commercial (demande agence, septembre
	   2026, voir Potentiel -> Cible -> Prospect -> Client) — Prospect/Client
	   réutilisent --mc-warn/--mc-accent ci-dessus, inchangés. */
	--mc-info: #2563a8;
	--mc-info-light: #e8f1fa;
	--mc-cible-light: #efe9f6;
	--mc-bg: #f4f6f9;
	--mc-surface: #ffffff;
	--mc-border: #e4e7ec;
	--mc-text: #1c2733;
	--mc-text-muted: #6b7684;
	--mc-radius: 10px;
	--mc-shadow: 0 1px 3px rgba(20, 30, 45, 0.08), 0 1px 2px rgba(20, 30, 45, 0.06);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--mc-text);
	background: var(--mc-bg);
	border-radius: var(--mc-radius);
	overflow: hidden;
	box-shadow: var(--mc-shadow);
}

.mini-crm-root * { box-sizing: border-box; }
.mini-crm-root a { color: var(--mc-navy-light); text-decoration: none; }
.mini-crm-root a:hover { text-decoration: underline; }

.mc-loading, .mc-fatal-error {
	padding: 60px 20px;
	text-align: center;
	color: var(--mc-text-muted);
}
.mc-fatal-error { color: var(--mc-danger); }

.mc-access-denied {
	padding: 40px 24px;
	background: var(--mc-warn-light);
	border: 1px solid var(--mc-warn);
	border-radius: var(--mc-radius);
	color: #6b5000;
	max-width: 600px;
	margin: 40px auto;
	text-align: center;
}

/* ---------------------------------------------------------------- SHELL */
.mc-shell {
	display: flex;
	min-height: 720px;
	max-height: 88vh;
}

.mc-sidebar {
	width: 230px;
	flex-shrink: 0;
	background: var(--mc-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 16px 0;
}
.mc-sidebar-brand {
	font-size: 18px;
	font-weight: 700;
	padding: 8px 20px 20px;
	letter-spacing: 0.02em;
}
.mc-nav-list { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
/* Sélecteur qualifié (.mc-sidebar .mc-nav-item, spécificité 0,2,0) volontairement
   plus fort que la règle générique ".mini-crm-root a" (0,1,1) ci-dessus : sans
   ce préfixe, ".mc-nav-item" seul (0,1,0) perdait face à elle et les liens du
   menu héritaient de la couleur de lien (violette) au lieu du blanc prévu —
   invisibles sur un fond de sidebar de teinte proche, sauf au survol/actif où
   les sélecteurs composés (.mc-nav-item:hover / .is-active) l'emportaient déjà,
   ce qui donnait l'impression que seule la case survolée/active s'affichait. */
.mc-sidebar .mc-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: rgba(255,255,255,0.75);
	font-size: 14px;
	font-weight: 500;
}
.mc-sidebar .mc-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.mc-sidebar .mc-nav-item.is-active { background: var(--mc-navy-light); color: #fff; }
.mc-sidebar .mc-nav-item svg { flex-shrink: 0; }
.mc-sidebar-footer { padding: 10px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }

.mc-content {
	flex: 1;
	overflow-y: auto;
	padding: 28px 32px 60px;
	background: var(--mc-bg);
}

/* ---------------------------------------------------------------- HEADER / PANELS */
.mc-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.mc-page-header h1 { font-size: 22px; margin: 0; font-weight: 700; }
.mc-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-back-link { display: inline-block; font-size: 13px; color: var(--mc-text-muted); margin-bottom: 4px; }
.mc-brand-title { color: var(--mc-navy-light); }
/* Ligne "Ajouté par / Modifié par" sous le titre de fiche société/marque
   (demande agence, septembre 2026) — voir auditMetaHtml() dans views.js. */
.mc-audit-meta { margin: 4px 0 0; }

.mc-panel {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	padding: 20px 22px;
	margin-bottom: 20px;
	box-shadow: var(--mc-shadow);
}
.mc-panel h2 { font-size: 15px; margin: 0 0 14px; font-weight: 700; }
.mc-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mc-panel-header h2 { margin: 0; }
.mc-subheading { font-size: 13px; font-weight: 700; margin: 18px 0 8px; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mc-fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mc-fiche-grid .mc-panel { margin-bottom: 0; }
.mc-dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mc-muted { color: var(--mc-text-muted); font-size: 13px; }

/* ---------------------------------------------------------------- STATS */
.mc-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }
.mc-stat-card {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	padding: 16px;
	box-shadow: var(--mc-shadow);
}
.mc-stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
.mc-stat-label { font-size: 12px; color: var(--mc-text-muted); margin-top: 6px; }
.mc-stat-potentiel .mc-stat-value { color: var(--mc-info); }
.mc-stat-cible .mc-stat-value { color: var(--mc-navy-light); }
.mc-stat-prospect .mc-stat-value { color: var(--mc-warn); }
.mc-stat-client .mc-stat-value { color: var(--mc-accent); }
.mc-stat-clickable { cursor: pointer; }
.mc-stat-clickable:hover { box-shadow: 0 2px 6px rgba(20, 30, 45, 0.14), 0 1px 2px rgba(20, 30, 45, 0.08); }

/* ---------------------------------------------------------------- LISTS */
.mc-list-item { padding: 10px 0; border-bottom: 1px solid var(--mc-border); font-size: 13px; }
.mc-list-item:last-child { border-bottom: none; }
.mc-list-item-meta { color: var(--mc-text-muted); margin-top: 2px; }
.mc-list-item-overdue { background: var(--mc-danger-light); margin: 0 -10px; padding: 10px; border-radius: 6px; border-bottom: none; }
.mc-overdue-tag { display: inline-block; background: var(--mc-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; }

.mc-reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--mc-border); background: var(--mc-surface); }
.mc-reminder-row:first-child { border-top-left-radius: var(--mc-radius); border-top-right-radius: var(--mc-radius); }
.mc-reminder-row:last-child { border-bottom: none; border-bottom-left-radius: var(--mc-radius); border-bottom-right-radius: var(--mc-radius); }
.mc-reminder-main { font-size: 13px; }
.mc-reminder-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------------------------------------------------------------- FILTERS / TABLE */
.mc-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mc-filters-wrap > * { min-width: 160px; }
.mc-input, .mc-filters select, .mc-filters input, .mc-inline-stage-select {
	padding: 8px 10px;
	border: 1px solid var(--mc-border);
	border-radius: 7px;
	font-size: 13px;
	background: var(--mc-surface);
	color: var(--mc-text);
}
.mc-input:focus, .mc-filters select:focus, .mc-inline-stage-select:focus { outline: 2px solid var(--mc-navy-light); outline-offset: 1px; }

/* Sélecteur "Étape" en liste (demande agence, septembre 2026 : reclassification
   rapide sans ouvrir la fiche) — compact, dans une cellule de tableau. */
.mc-inline-stage-select { padding: 5px 8px; font-size: 12px; cursor: pointer; }
.mc-inline-stage-select:disabled { opacity: 0.6; cursor: wait; }

.mc-table-wrap { overflow-x: auto; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); }
.mc-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.mc-table th, .mc-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--mc-border); }
.mc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mc-text-muted); background: #fafbfc; }
.mc-table tbody tr:last-child td { border-bottom: none; }
.mc-table tbody tr:hover { background: #f8fafc; }
.mc-row-clickable { cursor: pointer; }
.mc-col-actions { width: 1%; }
.mc-empty-cell { text-align: center; color: var(--mc-text-muted); padding: 26px; white-space: normal; }

/* ---------------------------------------------------------------- BADGES */
.mc-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.mc-badge-potentiel { background: var(--mc-info-light); color: var(--mc-info); }
.mc-badge-cible { background: var(--mc-cible-light); color: var(--mc-navy-light); }
.mc-badge-prospect { background: var(--mc-warn-light); color: var(--mc-warn); }
.mc-badge-client { background: var(--mc-accent-light); color: var(--mc-accent); }
.mc-badge-nature { background: #eef1f6; color: #46536b; text-transform: none; font-weight: 600; }
.mc-chip-link { display: inline-block; background: #eef1f6; color: var(--mc-navy-light); padding: 4px 10px; border-radius: 20px; font-size: 12px; margin: 2px 4px 2px 0; }
.mc-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------- BUTTONS */
.mc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	background: var(--mc-surface);
}
.mc-btn-sm { padding: 5px 10px; font-size: 12px; }
.mc-btn-primary { background: var(--mc-navy-light); color: #fff; }
.mc-btn-primary:hover { background: var(--mc-navy-darker); }
.mc-btn-secondary { background: var(--mc-accent-light); color: var(--mc-accent); }
.mc-btn-secondary:hover { background: #d9ede7; }
.mc-btn-ghost { background: transparent; color: var(--mc-text-muted); border-color: var(--mc-border); }
.mc-btn-ghost:hover { background: #f1f3f6; }
.mc-btn-danger { background: var(--mc-danger); color: #fff; }
.mc-btn-danger-ghost { background: transparent; color: var(--mc-danger); border-color: var(--mc-danger-light); }
.mc-btn-danger-ghost:hover { background: var(--mc-danger-light); }

.mc-icon-btn {
	background: transparent;
	border: 1px solid var(--mc-border);
	border-radius: 7px;
	padding: 6px;
	cursor: pointer;
	color: var(--mc-text-muted);
	display: inline-flex;
}
.mc-icon-btn:hover { background: #F2EDF8; color: var(--mc-navy-light); border-color: var(--mc-navy-light); }

/* ------------------------------------------------------- SECTOR ROWS (secteurs multiples societe) */
.mc-sector-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.mc-sector-row .mc-input { flex: 1 1 0; min-width: 0; }
.mc-sector-row .mc-icon-btn { flex: 0 0 auto; }

/* ------------------------------------------- MULTI-VALUE ROWS (telephones/emails societe) */
.mc-multivalue-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mc-multivalue-row .mc-input { flex: 1 1 0; min-width: 0; }
.mc-multivalue-row .mc-icon-btn { flex: 0 0 auto; }

/* --------------------------------------------------- VALIDATION ICON (fiches societe/marque) */
.mc-validate-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; margin-left: 4px; vertical-align: middle;
	border-radius: 50%; border: 1.5px solid var(--mc-border);
	background: transparent; color: var(--mc-text-muted); cursor: pointer; padding: 0;
}
.mc-validate-icon:hover { border-color: var(--mc-navy-light); color: var(--mc-navy-light); }
.mc-validate-icon.is-validated { border-color: var(--mc-accent); background: var(--mc-accent-light); color: var(--mc-accent); }
.mc-validate-icon.is-validated:hover { border-color: var(--mc-accent); }

/* ------------------------------------------------ STATUS ICON (actif/non actif contact) */
.mc-status-icon {
	display: inline-flex; width: 12px; height: 12px; margin-right: 8px; vertical-align: middle;
	border-radius: 50%; border: none; cursor: pointer; padding: 0;
}
.mc-status-icon.is-active { background: var(--mc-accent); }
.mc-status-icon.is-inactive { background: var(--mc-danger); }

/* ---------------------------------------------------------------- MODAL */
.mc-overlay {
	position: fixed; inset: 0; background: rgba(15, 23, 35, 0.55);
	display: none; align-items: flex-start; justify-content: center;
	z-index: 100000; padding: 5vh 16px; overflow-y: auto;
}
.mc-overlay.is-open { display: flex; }
body.mc-no-scroll { overflow: hidden; }
.mc-modal {
	background: var(--mc-surface); border-radius: 12px; width: 100%; max-width: 560px;
	position: relative; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.mc-modal-wide { max-width: 860px; }
.mc-modal-close {
	position: absolute; top: 14px; right: 14px; background: transparent; border: none;
	font-size: 22px; line-height: 1; cursor: pointer; color: var(--mc-text-muted);
}
.mc-modal h2 { margin: 0 0 18px; font-size: 18px; }
.mc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.mc-choice-buttons { display: flex; gap: 12px; }
.mc-choice-buttons .mc-btn { flex: 1; justify-content: center; padding: 16px; }

.mc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mc-field { display: flex; flex-direction: column; gap: 5px; }
.mc-field-wide { grid-column: 1 / -1; }
.mc-field label { font-size: 12px; font-weight: 600; color: var(--mc-text-muted); }
.mc-field .mc-input, .mc-field select, .mc-field textarea, .mc-field input {
	padding: 8px 10px; border: 1px solid var(--mc-border); border-radius: 7px; font-size: 13px; width: 100%; font-family: inherit;
}
.mc-required { color: var(--mc-danger); }
.mc-checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
.mc-checkbox { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 400; background: #f4f6f9; padding: 5px 10px; border-radius: 20px; }
.mc-checkbox input { width: auto; }

.mc-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--mc-border); }
.mc-tab { background: transparent; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--mc-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mc-tab.is-active { color: var(--mc-navy-light); border-bottom-color: var(--mc-navy-light); }

.mc-deflist { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13px; margin: 0; }
.mc-deflist dt { color: var(--mc-text-muted); font-weight: 600; }
.mc-deflist dd { margin: 0; }

/* ---------------------------------------------------------------- SEARCH SELECT */
.mc-search-select { position: relative; }
.mc-search-select input { width: 100%; padding: 8px 10px; border: 1px solid var(--mc-border); border-radius: 7px; font-size: 13px; }
.mc-search-results {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--mc-surface);
	border: 1px solid var(--mc-border); border-radius: 8px; box-shadow: var(--mc-shadow); z-index: 20;
	max-height: 220px; overflow-y: auto;
}
.mc-search-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.mc-search-item:hover { background: #F2EDF8; }
.mc-search-empty { padding: 10px 12px; font-size: 13px; color: var(--mc-text-muted); }
.mc-search-select-chosen {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: #F2EDF8; color: var(--mc-navy-light); padding: 8px 10px; border-radius: 7px; font-size: 13px;
}
.mc-chip-remove { background: transparent; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--mc-text-muted); }

/* ---------------------------------------------------------------- CHECKBOX FILTER (liste à cocher) */
.mc-check-filter { position: relative; min-width: 160px; }
.mc-check-filter-btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
	background: #fff; border: 1px solid var(--mc-border); border-radius: 7px; padding: 8px 10px;
	font-size: 13px; text-align: left; cursor: pointer; color: var(--mc-text);
}
.mc-check-filter-btn.is-active { border-color: var(--mc-navy-light); color: var(--mc-navy-light); font-weight: 600; }
.mc-check-filter-caret { color: var(--mc-text-muted); font-size: 10px; }
.mc-check-filter-panel {
	/* Positionné en JS (position: fixed + top/left calculés depuis le bouton,
	   voir createCheckboxFilter()) plutôt qu'en absolu relatif à .mc-check-filter :
	   avec plusieurs filtres sur une même barre qui passe à la ligne (flex-wrap)
	   et des libellés de longueur variable (noms de commerciaux…), un simple
	   `position: absolute; left: 0` pouvait déborder sur les filtres voisins et
	   cacher le tableau en dessous. Largeur fixe (et non min-width: 100%) pour
	   ne plus dépendre de la largeur du bouton déclencheur. */
	position: fixed; width: 240px; background: var(--mc-surface);
	border: 1px solid var(--mc-border); border-radius: 8px; box-shadow: var(--mc-shadow); z-index: 1000;
	max-height: 260px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
/* Le `display: flex` ci-dessus (nécessaire à la mise en page des cases à
   cocher) a la même spécificité CSS que la règle native `[hidden] { display:
   none }` du navigateur — et en cas d'égalité de spécificité, une règle
   d'auteur (celle de cette feuille de style) l'emporte TOUJOURS sur une règle
   de user-agent, quel que soit l'ordre. Résultat : dès qu'un panneau reçoit
   `display: flex`, l'attribut `hidden` posé/retiré en JS n'a plus aucun effet
   visuel et TOUS les panneaux restent affichés en permanence, superposés —
   exactement le symptôme remonté par l'agence. Cette règle, plus spécifique
   (sélecteur de classe + attribut), rétablit le masquage. */
.mc-check-filter-panel[hidden] {
	display: none;
}
.mc-check-filter-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mc-check-filter-item:hover { background: #F2EDF8; }
.mc-check-filter-item input { width: auto; }
.mc-check-filter-actions {
	display: flex; gap: 4px; padding: 2px 4px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--mc-border);
}
.mc-check-filter-action {
	flex: 1; background: transparent; border: none; color: var(--mc-navy-light); font-size: 12px; font-weight: 600;
	padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.mc-check-filter-action:hover { background: #F2EDF8; }

/* ---------------------------------------------------------------- TOASTS */
.mc-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 100001; display: flex; flex-direction: column; gap: 8px; }
.mc-toast {
	background: var(--mc-navy); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.2); opacity: 1; transition: opacity 0.3s, transform 0.3s; max-width: 320px;
}
.mc-toast-success { background: var(--mc-accent); }
.mc-toast-error { background: var(--mc-danger); }
.mc-toast-out { opacity: 0; transform: translateY(6px); }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
	.mc-shell { flex-direction: column; max-height: none; }
	.mc-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 10px; }
	.mc-sidebar-brand { display: none; }
	.mc-nav-list { flex-direction: row; }
	.mc-nav-item span { display: none; }
	.mc-sidebar-footer { display: none; }
	.mc-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.mc-fiche-grid, .mc-dashboard-columns { grid-template-columns: 1fr; }
	.mc-form-grid { grid-template-columns: 1fr; }
	.mc-content { padding: 18px; }
}

/* ---------------------------------------------------------------- IMPRESSION
   "Télécharger PDF" (demande agence, septembre 2026) : déclenché par
   window.print() (voir wirePrintButton() dans views.js) — l'utilisateur choisit
   "Enregistrer en PDF" comme destination dans la boîte d'impression du
   navigateur. On masque tout ce qui n'est pas le tableau lui-même (sidebar,
   filtres, boutons d'action, colonne "Voir la fiche") et on retire les
   contraintes de mise en page pensées pour l'écran (ombre, coins arrondis,
   défilement) pour que le tableau imprime sur toute la largeur de la page. */
@media print {
	.mc-sidebar, .mc-header-actions, .mc-filters, .mc-col-actions { display: none !important; }
	.mini-crm-root { box-shadow: none; border-radius: 0; overflow: visible; background: #fff; }
	.mc-shell { display: block; max-height: none; }
	.mc-content { padding: 0; overflow: visible; }
	.mc-table-wrap { overflow-x: visible; box-shadow: none; border: none; }
	.mc-table { white-space: normal; font-size: 11px; }
	.mc-inline-stage-select { border: none; background: transparent; padding: 0; -webkit-appearance: none; appearance: none; }
}