/* ============================================================
   QCDESK — Design components (UI primitives)
   Cards, formulaires, dropdowns, alerts, badges, text utils, modals.
   Chargé après tokens.css et components.css.
   ============================================================ */

/* ============================================================
   CARDS : mf-header-card, mf-section, .card
   ============================================================ */

.card,
.mf-header-card,
.mf-section {
  background: var(--bg-1) !important;
  border: 1px solid color-mix(in oklch, var(--border) 45%, transparent) !important;
  border-radius: 16px;
  color: var(--text-0);
  box-shadow: none;
}

.mf-header-card {
  padding: 22px 24px;
}

.mf-header-card h4,
.mf-header-card h3,
.mf-header-card h2,
.mf-header-card h1 {
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.mf-header-card .text-muted,
.mf-text-muted {
  color: var(--text-2) !important;
  font-size: 13px;
}

.mf-section {
  padding: 20px;
}

.mf-section-header,
.mf-section > .d-flex:first-child {
  border-bottom: 1px solid var(--divider) !important;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.mf-section-title,
.mf-section h5,
.mf-section h6 {
  color: var(--text-0);
  font-weight: 600;
}

/* Avatar entêtes de pages : on garde l'icône, pas de fond (style maquette .hero-icon) */
.mf-avatar {
  background: transparent !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 1.5rem !important;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mf-avatar i,
.mf-avatar svg {
  font-size: 1.6rem;
  color: inherit;
}

.mf-role-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-chip);
  color: var(--accent-hi);
}

/* Section icons : on retire le fond coloré et la couleur forcée blanche.
   L'icône se lit avec la couleur du texte secondaire, sans pastille. */
.mf-icon,
.mf-icon-user,
.mf-icon-building,
.mf-icon-map,
.mf-icon-lock,
.mf-icon-palette,
.mf-icon-mail,
.mf-icon-globe,
.mf-icon-code,
.mf-icon-file,
.mf-icon-image,
.mf-icon-briefcase,
.mf-icon-shield,
.mf-icon-link,
.mf-icon-cog,
.mf-icon-breadcrumb,
.mf-icon-heading {
  background: transparent !important;
  color: var(--text-2) !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  font-size: 1rem;
}

.mf-icon i,
.mf-icon svg {
  color: inherit;
  font-size: 1.1rem;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */

.form-control,
.form-select,
textarea.form-control,
input.form-control {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-0) !important;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
}

/* Chevron des selects Bootstrap : on remplace le SVG hardcodé (noir) par un
   SVG gris clair lisible sur fond dark. */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238690a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  padding-right: 34px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.form-select:hover {
  border-color: var(--border-strong) !important;
}

/* Options du native select : visibles en dark sur la plupart des browsers */
.form-select option,
select option {
  background-color: var(--bg-2);
  color: var(--text-0);
}

/* Sélecteurs Bootstrap sm/lg */
.form-select-sm {
  padding: 6px 30px 6px 10px !important;
  font-size: 13px !important;
  background-size: 12px 12px !important;
  background-position: right 10px center !important;
  border-radius: 8px !important;
}

.form-control-sm {
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* Ajoute hover states sur inputs pour feedback visuel */
.form-control:hover,
.form-select:hover {
  background: transparent !important;
  border-color: var(--border-strong) !important;
}

.form-control::placeholder {
  color: var(--text-3) !important;
}

/* Focus inputs : basés sur --text-3 pour un feedback neutre, sans dépendre
   de l'accent (principal ou projet). */
.form-control:focus,
.form-select:focus {
  background: transparent !important;
  border-color: color-mix(in oklch, var(--text-3) 55%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-3) 18%, transparent) !important;
  color: var(--text-0) !important;
}

.form-label {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-text {
  color: var(--text-3);
  font-size: 12px;
}

.form-check-input {
  background-color: var(--bg-0);
  border-color: var(--border-strong);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--text-3);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-3) 18%, transparent);
}

.form-check-label {
  color: var(--text-1);
  font-size: 13.5px;
}

.input-group-text {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}

/* ============================================================
   DROPDOWNS (Bootstrap)
   ============================================================ */

.dropdown-menu {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.65);
  color: var(--text-0);
}

.dropdown-item {
  color: var(--text-1);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
  transition: background .12s, color .12s;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-3);
  color: var(--text-0);
}

.dropdown-item.active,
.dropdown-item:active {
  background: color-mix(in oklch, var(--accent) 22%, transparent);
  color: var(--text-0);
}

.dropdown-item.text-danger {
  color: var(--c-red);
}

.dropdown-item.text-danger:hover {
  background: color-mix(in oklch, var(--c-red) 18%, transparent);
  color: var(--c-red);
}

.dropdown-divider {
  border-top: 1px solid var(--divider);
  margin: 4px 0;
}

.dropdown-item .badge.bg-primary {
  background: var(--accent-chip) !important;
  color: var(--accent-hi) !important;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  border-radius: var(--r-md);
  border: 1px solid transparent;
  padding: 12px 16px;
  color: var(--text-0);
  --bs-alert-bg: transparent;
  --bs-alert-color: var(--text-0);
  --bs-alert-border-color: transparent;
  background: var(--bg-1);
}

/* Cohérence bordure/fond :
   - background = var(--tint-{sémantique}) — token de teinte défini PAR THÈME
     (clair: pastel oklch ; sombre: srgb pour ne pas virer mauve), partagé avec les
     panneaux d'info → fonds cohérents entre alertes et panneaux.
   - border / color = color-mix(in srgb, sémantique …% , …) — srgb pour garder la teinte. */

.alert-success {
  background: var(--tint-green) !important;
  border-color: color-mix(in srgb, var(--c-green) 45%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-green) 75%, var(--text-0)) !important;
}

.alert-danger {
  background: var(--tint-red) !important;
  border-color: color-mix(in srgb, var(--c-red) 45%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-red) 75%, var(--text-0)) !important;
}

.alert-warning {
  background: var(--tint-orange) !important;
  border-color: color-mix(in srgb, var(--c-orange) 45%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-orange) 75%, var(--text-0)) !important;
}

.alert-info {
  background: var(--tint-teal) !important;
  border-color: color-mix(in srgb, var(--c-teal) 45%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-teal) 75%, var(--text-0)) !important;
}

.alert-primary {
  background: var(--tint-accent) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bg-1)) !important;
  color: var(--accent-hi) !important;
}

.alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.alert .btn-close {
  filter: invert(0.85) opacity(0.7);
}

/* ============================================================
   ALERTS — thème dark
   Le FOND vient du token --tint-* (déjà adapté au sombre), donc on ne surcharge ici
   que la bordure (plus marquée) et le texte (clair, pour le contraste sur fond teinté).
   ============================================================ */

[data-theme="dark"] .alert {
  border-radius: var(--r-md);
  border: 1px solid transparent;
  padding: 12px 16px;
  color: var(--text-0);
  --bs-alert-bg: transparent;
  --bs-alert-color: var(--text-0);
  --bs-alert-border-color: transparent;
  background: var(--bg-1);
}

[data-theme="dark"] .alert-success {
  border-color: color-mix(in srgb, var(--c-green) 80%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-green) 15%, var(--text-0)) !important;
}

[data-theme="dark"] .alert-danger {
  border-color: color-mix(in srgb, var(--c-red) 80%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-red) 15%, var(--text-0)) !important;
}

[data-theme="dark"] .alert-warning {
  border-color: color-mix(in srgb, var(--c-orange) 80%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-orange) 15%, var(--text-0)) !important;
}

[data-theme="dark"] .alert-info {
  border-color: color-mix(in srgb, var(--c-teal) 80%, var(--bg-1)) !important;
  color: color-mix(in srgb, var(--c-teal) 15%, var(--text-0)) !important;
}

[data-theme="dark"] .alert-primary {
  border-color: color-mix(in srgb, var(--accent) 80%, var(--bg-1)) !important;
  color: var(--accent-hi) !important;
}

[data-theme="dark"] .alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

[data-theme="dark"] .alert .btn-close {
  filter: invert(0.85) opacity(0.7);
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

.badge.bg-primary {
  background: var(--accent) !important;
  color: #fff !important;
}

.badge.bg-secondary {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}

.badge.bg-success {
  background: var(--c-green) !important;
  color: #052213 !important;
}

.badge.bg-danger {
  background: var(--c-red) !important;
  color: #fff !important;
}

.badge.bg-warning {
  background: var(--c-orange) !important;
  color: #2a1a04 !important;
}

.badge.bg-info {
  background: var(--c-teal) !important;
  color: #052a27 !important;
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */

.text-muted {
  color: var(--text-2) !important;
}

.text-white-50 {
  color: var(--text-2) !important;
}

/* Bootstrap .text-dark est hardcodé en noir — on le remet en clair pour dark mode */
.text-dark {
  color: var(--text-0) !important;
}

.text-black {
  color: var(--text-0) !important;
}

.text-body,
.text-body-emphasis {
  color: var(--text-0) !important;
}

.text-body-secondary,
.text-body-tertiary {
  color: var(--text-2) !important;
}

.text-secondary {
  color: var(--text-2) !important;
}

.text-primary {
  color: var(--accent-hi) !important;
}

.text-danger {
  color: var(--c-red) !important;
}

.text-success {
  color: var(--c-green) !important;
}

.text-warning {
  color: var(--c-orange) !important;
}

.text-info {
  color: var(--c-teal) !important;
}

hr {
  border-top: 1px solid var(--divider);
  opacity: 1;
}

/* Links */
a {
  color: var(--accent-hi);
}

a:hover {
  color: var(--text-0);
}

/* ============================================================
   MODALS (Bootstrap)
   ============================================================ */

.modal-content {
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--text-0);
}

.modal {
  z-index: 1055;
}

.modal-backdrop,
.modal-backdrop.show {
  z-index: 1050 !important;
  background-color: #000 !important;
  opacity: 0.6 !important;
}

.modal-header {
  border-bottom: 1px solid var(--divider);
}

.modal-footer {
  border-top: 1px solid var(--divider);
}

.btn-close {
  filter: invert(0.85) opacity(0.7);
}

.btn-close:hover {
  filter: invert(1) opacity(1);
}

/* ============================================================
   CARDS génériques (mockup .card)
   Utilisé par dashboard, project-show et toute vue qui veut un card
   avec un card-header explicite (contrairement à .mf-section qui n'en a pas).
   ============================================================ */

.card .card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid var(--divider);
}

.card .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.card-title-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
}

/* Hero eyebrow (small label above hero title) */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.hero-eyebrow i {
  color: var(--text-3);
}

/* Epic chip — fond pastel épousant la couleur de l'epic.
   Utilisé avec .epic-scope + style="--epic-color: #..." (cf. tokens.css).
   Les fallbacks --bg-3 / --text-3 protègent si la classe epic-scope manque. */
.epic-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.epic-chip::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--epic-color, currentColor);
  flex-shrink: 0;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 10px;
  color: var(--text-2);
  text-align: center;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--text-3);
}

.empty-state-text {
  font-size: 13.5px;
  color: var(--text-2);
}