/* ============================================================
   QCDESK — Design components (vues liste)
   Project cards, filter pills, status/priority pills, member avatars,
   stat cards, project nav, modern table DataTables, tables Bootstrap.
   ============================================================ */

/* ============================================================
   PROJECT CARDS (liste /projets)
   ============================================================ */

.project-card {
  background: var(--bg-1) !important;
  border: 1px solid color-mix(in oklch, var(--border) 45%, transparent) !important;
  border-radius: var(--r-lg);
  color: var(--text-0);
  transition: border-color .15s, background .15s, transform .15s;
}

.project-card:hover {
  background: var(--bg-2) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
  color: var(--text-0);
  box-shadow: none;
}

.project-card__title {
  color: var(--text-0) !important;
  font-weight: 600;
}

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

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

.project-card__stats i {
  color: var(--text-3);
  opacity: 1;
}

.project-card__progress {
  background: var(--bg-3);
  height: 6px;
  border-radius: 4px;
}

.project-card__progress-bar {
  background: var(--project-accent);
  border-radius: 4px;
}

.project-card__progress-text {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-weight: 600;
}

.project-card__code {
  display: inline-block;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--project-color, var(--project-accent));
  color: #fff;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}

/* Bouton favori étoile */
.project-card__fav,
.btn-favorite {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-grid;
  place-items: center;
  transition: color .15s, border-color .15s, background .15s;
}

.project-card__fav:hover,
.btn-favorite:hover {
  color: #facc15;
  border-color: color-mix(in oklch, #facc15 40%, var(--border));
}

.project-card__fav.is-fav,
.btn-favorite.is-fav {
  color: #facc15;
  border-color: color-mix(in oklch, #facc15 45%, transparent);
  background: color-mix(in oklch, #facc15 10%, transparent);
}

/* ============================================================
   FILTER PILLS (Tous / Actifs / Archivés)
   ============================================================ */

.filter-pill {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}

.filter-pill:hover {
  background: var(--bg-3);
  color: var(--text-0);
  border-color: var(--border-strong);
}

.filter-pill--active {
  background: var(--project-accent) !important;
  color: #fff !important;
  border-color: var(--project-accent) !important;
  box-shadow: none;
}

/* ============================================================
   MULTI-FILTER (ticket index + backlog) — dropdown checkbox list
   Style aligné sur le thème dark, cohérent avec dropdown-menu.
   ============================================================ */

.multi-filter {
  position: relative;
  display: inline-block;
}

.multi-filter__btn {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 30px 5px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-1);
  position: relative;
  transition: background .12s, color .12s, border-color .12s;
}

.multi-filter__btn::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--text-3);
}

.multi-filter__btn:hover {
  background: color-mix(in oklch, var(--project-accent) 10%, transparent);
  color: var(--project-accent-hi);
  border-color: color-mix(in oklch, var(--project-accent) 15%, transparent);
}

.multi-filter__btn--active {
  background: var(--project-accent-chip);
  color: var(--project-accent-hi);
  border-color: color-mix(in oklch, var(--project-accent) 25%, transparent);
  font-weight: 600;
}
.multi-filter__btn--active:hover {
  background: color-mix(in oklch, var(--project-accent) 28%, transparent);
  color: var(--project-accent-hi);
  border-color: color-mix(in oklch, var(--project-accent) 35%, transparent);
}

.multi-filter__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.65);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
}

.multi-filter__dropdown.show {
  display: block;
  animation: multi-filter-in .14s ease-out;
  background: var(--bg-main);
  border-color: var(--border);
}

@keyframes multi-filter-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Barre « Tout cocher / Tout décocher » en haut de chaque dropdown */
.multi-filter__actions {
  display: flex;
  gap: 8px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 6px;
}

.multi-filter__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--text-1);
  text-align: center;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}

.multi-filter__action > i {
  font-size: 11px;
  opacity: 0.85;
}

.multi-filter__action:hover {
  background: var(--project-accent-chip);
  color: var(--project-accent-hi);
  border-color: color-mix(in oklch, var(--project-accent) 30%, transparent);
}

.multi-filter__action:hover > i {
  opacity: 1;
}

.multi-filter__action:active {
  background: color-mix(in oklch, var(--project-accent) 22%, transparent);
}

.multi-filter__action:focus-visible {
  outline: none;
  border-color: color-mix(in oklch, var(--project-accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--project-accent) 22%, transparent);
}

.multi-filter__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-1);
  border-radius: 7px;
  transition: background .1s, color .1s;
}

.multi-filter__item:hover {
  background: var(--bg-3);
  color: var(--text-0);
}

.multi-filter__item input[type="checkbox"] {
  accent-color: var(--project-accent);
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
}

/* Champ recherche dans les dropdowns multi-filtre */
.multi-filter__search {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 12px);
  margin: 4px 6px 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-0);
  outline: none;
}
.multi-filter__search:focus {
  border-color: color-mix(in oklch, var(--project-accent) 50%, var(--border));
}
.multi-filter__search::placeholder {
  color: var(--text-3);
}

.multi-filter__item.is-active {
  background: color-mix(in oklch, var(--project-accent) 12%, transparent);
  color: var(--project-accent-hi);
  font-weight: 600;
}
.multi-filter__item.is-active i.fa-check {
  color: var(--c-green, var(--project-accent));
  margin-left: auto;
  font-size: 10px;
}

.multi-filter__empty {
  padding: 10px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
  font-style: italic;
}

/* ============================================================
   STATUS PILLS (QCDesk)
   ============================================================ */

.status-pill {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.status-pill--brouillon {
  background: var(--c-gray-lo) !important;
  color: var(--text-1) !important;
}

.status-pill--actif {
  background: color-mix(in oklch, var(--c-blue) 20%, transparent) !important;
  color: var(--c-blue) !important;
}

.status-pill--standby {
  background: color-mix(in oklch, var(--c-yellow) 18%, transparent) !important;
  color: var(--c-yellow) !important;
}

.status-pill--termine {
  background: color-mix(in oklch, var(--c-green) 20%, transparent) !important;
  color: var(--c-green) !important;
}

/* ============================================================
   PRIORITY PILLS (QCDesk)
   ============================================================ */

.priority-pill {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.priority-pill--basse {
  background: var(--c-gray-lo) !important;
  color: #fff !important;
}

.priority-pill--normale {
  background: var(--c-blue) !important;
  color: #fff !important;
}

.priority-pill--haute {
  background: var(--c-orange) !important;
  color: #fff !important;
}

.priority-pill--urgente {
  background: var(--c-red) !important;
  color: #fff !important;
}

/* Priority dots (à côté du ref) */
.priority-dot--basse { background: var(--c-gray); }
.priority-dot--normale { background: var(--c-blue); }
.priority-dot--haute { background: var(--c-orange); }
.priority-dot--urgente { background: var(--c-red); }

/* ============================================================
   MEMBER AVATARS (stack)
   ============================================================ */

.member-avatar {
  border: 2px solid var(--bg-1) !important;
  font-weight: 600;
}

.member-avatar--more {
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
}

.member-stack {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   EPIC COUNT (compteur discret sans fond) — onglet epics
   ============================================================ */

.epic-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.stat-card {
  background: var(--bg-1) !important;
  border: 1px solid color-mix(in oklch, var(--border) 45%, transparent) !important;
  border-radius: var(--r-lg);
  color: var(--text-0);
}

.stat-card__value {
  color: var(--text-0);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.stat-card__label {
  color: var(--text-2);
}

.stat-card__icon {
  color: var(--text-3);
}

/* ============================================================
   PROJECT NAV (sous-navigation d'un projet)
   ============================================================ */

.project-nav {
  border-bottom: 1px solid var(--border) !important;
  gap: 4px;
}

.project-nav__link {
  color: var(--text-2) !important;
  padding: 12px 14px;
  border-bottom: 3px solid transparent;
  position: relative;
  border-radius: 0;
  transition: color .15s;
}

.project-nav__link:hover {
  color: var(--text-0) !important;
  border-bottom-color: transparent;
}

.project-nav__link--active {
  color: var(--project-accent-hi) !important;
  border-bottom-color: var(--project-accent) !important;
  font-weight: 600;
}

/* ============================================================
   MODERN TABLE (DataTables)
   ============================================================ */

.mt-table-wrapper {
  background: var(--bg-1) !important;
  border: 1px solid color-mix(in oklch, var(--border) 45%, transparent) !important;
  border-radius: 16px;
  overflow: hidden;
}

.mt-search-bar {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
}

.mt-search-bar .mt-search-input input {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-0);
  border-radius: 10px;
}

.mt-search-bar .mt-search-input input:focus {
  border-color: color-mix(in oklch, var(--bg-4) 20%, var(--border)) !important;
}

.mt-search-bar .mt-search-input i {
  color: var(--project-accent);
}

.mt-search-bar .mt-count {
  color: var(--text-2);
}

.mt-table-wrapper table.dataTable {
  color: var(--text-0);
  border-collapse: separate;
  border-spacing: 0;
}

.mt-table-wrapper table.dataTable thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-3) !important;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 12px 18px !important;
}

.mt-table-wrapper table.dataTable tbody td {
  color: var(--text-1);
  border-bottom: none !important;
  padding: 13px 18px !important;
}

.mt-table-wrapper table.dataTable tbody tr {
  transition: background .12s;
}

.mt-table-wrapper table.dataTable tbody tr:hover {
  background: var(--bg-2) !important;
}

.mt-table-wrapper table.dataTable tbody tr:hover td {
  color: var(--text-0);
}

.mt-table-wrapper table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

.mt-table-wrapper table.dataTable.table-striped tbody tr {
  background: transparent !important;
}

.mt-table-wrapper table.dataTable.table-striped tbody tr:hover {
  background: var(--bg-2) !important;
}

.mt-table-footer {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-2);
}

.mt-table-wrapper .dataTables_info {
  color: var(--text-2) !important;
}

.mt-table-wrapper .dataTables_paginate .paginate_button {
  color: var(--text-1) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 8px !important;
}

.mt-table-wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--bg-2) !important;
  color: var(--text-0) !important;
  border-color: transparent !important;
}

.mt-table-wrapper .dataTables_paginate .paginate_button.current {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.mt-table-wrapper .dataTables_processing {
  background: color-mix(in oklch, var(--bg-0) 90%, transparent) !important;
  color: var(--text-2);
}

/* Action buttons (view/edit/delete) */
.mt-actions .mt-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 8px;
  transition: background .12s, color .12s, border-color .12s;
}

.mt-actions .mt-btn:hover {
  background: var(--bg-2);
  border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
  color: var(--accent-hi);
}

.mt-actions .mt-btn--view:hover {
  background: color-mix(in oklch, var(--c-teal) 12%, transparent);
  border-color: color-mix(in oklch, var(--c-teal) 40%, var(--border));
  color: var(--c-teal);
}

.mt-actions .mt-btn--danger:hover {
  background: color-mix(in oklch, var(--c-red) 12%, transparent);
  border-color: color-mix(in oklch, var(--c-red) 40%, var(--border));
  color: var(--c-red);
}

/* ============================================================
   BOOTSTRAP TABLES génériques (fallback)
   ============================================================ */

.table {
  color: var(--text-0);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-0);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--bg-2);
  --bs-table-hover-color: var(--text-0);
  --bs-table-striped-bg: transparent;
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text-1);
  border-bottom-color: var(--divider);
}

.table > thead {
  color: var(--text-3);

}

.table > thead th {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-3);
  border-color: var(--border) !important;
}

.table > tbody > tr:hover > * {
  background-color: var(--bg-2);
  color: var(--text-0);
}

/* ============================================================
   TICKETS TABLE (classe .tickets-table)
   Utilisée par dashboard/index et tout écran qui veut une table
   de tickets avec rows rounded hover (style mockup, indépendant des DataTables).
   ============================================================ */

.tickets-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tickets-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tickets-table tbody td {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-1);
  vertical-align: middle;
  border-bottom: none;
}

.tickets-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}

.tickets-table tbody tr:hover {
  background: var(--bg-2);
}

/* Rows DataTables tickets list */
.mt-table-wrapper table.dataTable tbody tr {
  cursor: pointer;
}

.tickets-table tbody tr:hover td {
  background: var(--bg-2);
  color: var(--text-0);
}

.tickets-table tbody tr:last-child td {
  border-bottom: none;
}

.ticket-ref {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--project-accent-hi);
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--project-accent-chip);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background .12s, color .12s;
}

.ticket-ref:hover {
  background: color-mix(in oklch, var(--project-accent) 45%, transparent);
  color: #fff;
}

.ticket-name {
  color: var(--text-0);
  font-weight: 500;
}

/* ============================================================
   Harmonisation listes tickets / epics / lots
   Reproduit l'effet de .ticket-row (dashboard projet) :
   pas de séparateurs entre lignes, hover arrondi et aéré.
   Volontairement exclu : .chiffrage-table (classe dédiée).
   ============================================================ */

/* --- Liste tickets : DataTables dans .mt-table-wrapper --- */

.mt-table-wrapper table.dataTable tbody td {
  border-bottom: 0 !important;
}

/* Le bg hover doit vivre sur les <td> (pas sur <tr>) pour que
   le border-radius des cellules extrêmes soit respecté. */
.mt-table-wrapper table.dataTable tbody tr:hover {
  background: transparent !important;
}
.mt-table-wrapper table.dataTable tbody tr:hover > td {
  background: var(--bg-2);
  color: var(--text-0);
}
.mt-table-wrapper table.dataTable tbody tr > td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.mt-table-wrapper table.dataTable tbody tr > td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* --- Listes epics / lots : tables Bootstrap dans .mf-section --- */

.mf-section .table > :not(caption) > * > * {
  border-bottom: 0 !important;
}
.mf-section .table > thead > tr > th,
.mf-section .table > tbody > tr > td {
  padding: 10px 14px;
}
.mf-section .table > tbody > tr > td {
  transition: background .12s;
}
.mf-section .table > tbody > tr > td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.mf-section .table > tbody > tr > td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}