/* ============================================================
   HARD DÉCO — Lot 9K-2
   Harmonisation visuelle des listes métier.
   Couche de présentation uniquement : aucun rendu JS modifié.
   ============================================================ */

:root {
  --hd-list-max-width: var(--hd-dedicated-max-width, 1480px);
  --hd-list-radius: 12px;
  --hd-list-row-min-height: 58px;
  --hd-list-shadow: 0 3px 14px rgba(15, 23, 42, .045);
  --hd-list-head-bg: color-mix(in srgb, var(--panel) 96%, var(--bg));
  --hd-list-hover-bg: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  --hd-list-quotes-grid: 140px 105px 128px 118px minmax(150px, 1fr) minmax(170px, 1.2fr) 92px;
  --hd-list-invoices-grid: 164px 108px 105px 138px 118px minmax(150px, 1fr) minmax(170px, 1.2fr) 96px;
  --hd-list-clients-grid: minmax(220px, 1fr) minmax(190px, .9fr) minmax(160px, .75fr) minmax(310px, 1.35fr);
  --hd-list-artists-grid: minmax(170px, .8fr) minmax(190px, .9fr) minmax(150px, .7fr) minmax(130px, .6fr) minmax(340px, 1.45fr);
}

/* En-têtes des listes ----------------------------------------- */
body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) {
  box-shadow: 0 1px 0 rgba(15, 23, 42, .025);
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) > .inner {
  width: 100%;
  max-width: var(--hd-list-max-width);
  min-height: 58px;
  margin-inline: auto;
  padding: 8px 24px;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .title {
  min-width: 128px;
  margin-block: 0;
  margin-right: 4px;
  gap: 9px;
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.015em;
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .title .ico {
  width: 20px;
  height: 20px;
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .search {
  max-width: none;
  min-width: 180px;
  gap: 8px;
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel));
  color: var(--hd-color-text, var(--text));
  font-size: 12px;
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .search input:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--hd-color-border, var(--border)));
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .search input:focus {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--hd-color-border, var(--border)));
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  background: var(--hd-color-surface, var(--panel));
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .actions :is(.btn, .btn-secondary) {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 11px;
}

/* Barre de filtres -------------------------------------------- */
:is(.devis-tabs, .tabs-bar-scroll, .activity-list-toolbar) {
  width: 100%;
  max-width: var(--hd-list-max-width);
  margin-inline: auto;
  box-sizing: border-box;
}

.devis-tabs {
  gap: 4px;
  padding: 4px 24px 7px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border: 0;
  background: var(--hd-color-surface, var(--panel));
  scrollbar-width: none;
}

.devis-tabs::-webkit-scrollbar,
.tabs-bar-scroll::-webkit-scrollbar,
.tabs-bar-factures::-webkit-scrollbar {
  display: none;
}

.tabs-bar-scroll {
  padding: 0 24px 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-bar-factures {
  width: max-content;
  min-width: 100%;
  max-width: none;
  gap: 10px;
  margin: 0;
  padding: 4px 0 0;
  border: 0;
  flex-wrap: nowrap;
}

:is(.devis-tabs, .tabs-bar-factures, .activity-result-tabs) .tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 4px 4px;
  background: transparent;
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

:is(.devis-tabs, .tabs-bar-factures, .activity-result-tabs) .tab:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  color: var(--hd-color-text, var(--text));
}

:is(.devis-tabs, .tabs-bar-factures, .activity-result-tabs) .tab.active,
.activity-result-tabs .tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--accent);
  font-weight: 720;
}

:is(.devis-tabs, .tabs-bar-factures, .activity-result-tabs) .tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 1px;
}

.tabs-separator {
  height: 22px;
  margin-inline: 4px;
  background: color-mix(in srgb, var(--hd-color-border, var(--border)) 82%, transparent);
}

.tabs-right-tools {
  margin: 0 0 0 auto;
}

.factures-filters-advanced {
  gap: 6px;
}

:is(.filter-btn, .activity-clear-filters, .list-toolbar-select) {
  min-height: 34px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 8px;
  background: var(--hd-color-surface, var(--panel));
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 11px;
}

.filter-btn {
  align-items: center;
  padding: 6px 9px;
}

:is(.filter-btn, .activity-clear-filters, .list-toolbar-select):hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--hd-color-border, var(--border)));
  color: var(--hd-color-text, var(--text));
}

.filter-popover {
  top: calc(100% + 7px);
  min-width: 220px;
  gap: 7px;
  padding: 10px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--hd-color-border, var(--border)));
  border-radius: 11px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.filter-title {
  margin: 0 0 3px;
  padding: 2px 2px 7px;
  border-bottom: 1px solid var(--hd-color-border, var(--border));
  font-size: 11px;
  font-weight: 720;
}

.filter-popover label {
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
}

.filter-popover label:hover {
  background: var(--hd-list-hover-bg);
}

.filter-popover input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.filter-date-btn {
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--hd-color-text, var(--text));
  font-size: 11px;
}

.filter-date-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--hd-color-border, var(--border)));
  background: var(--hd-list-hover-bg);
}

.apply-btn {
  min-height: 34px;
  margin-top: 3px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}

/* Cadre principal --------------------------------------------- */
.page-list {
  width: 100%;
  max-width: var(--hd-list-max-width);
  margin: 0 auto 56px;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Contrôles communs des listes ------------------------------- */
.page-list > .list-page-controls {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: var(--hd-list-radius);
  background: var(--hd-color-surface, var(--panel));
  box-shadow: var(--hd-list-shadow);
  box-sizing: border-box;
}

.page-list .list-page-control-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.page-list .list-page-search {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}

.page-list .list-page-search > .lucide {
  position: absolute;
  z-index: 1;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--hd-color-text-muted, var(--muted));
  pointer-events: none;
}

.page-list .list-page-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel));
  color: var(--hd-color-text, var(--text));
  font-size: 12px;
  box-sizing: border-box;
}

.page-list .list-page-search input:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--hd-color-border, var(--border)));
}

.page-list .list-page-search input:focus {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--hd-color-border, var(--border)));
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  background: var(--hd-color-surface, var(--panel));
}

.page-list .list-page-control-row > .list-toolbar-select,
.page-list .list-page-control-row > .list-toolbar-select select {
  min-height: 40px;
}

.page-list > .list-page-controls > :is(.devis-tabs, .tabs-bar-scroll, .activity-list-toolbar) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Lot 9K-4.3 — rail de filtres commun ------------------------- */
.list-page-filter-scroll {
  width: auto;
  max-width: 100%;
  min-width: 0;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 38%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  box-sizing: border-box;
}

.list-page-filter-scroll::-webkit-scrollbar {
  height: 5px;
}

.list-page-filter-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.list-page-filter-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 38%, transparent);
}

.list-page-filter-scroll > *,
.list-page-filter-scroll :is(
  .tab,
  .btn-mini,
  .filter-popover-wrap,
  .list-toolbar-select,
  .tabs-left,
  .tabs-center,
  .tabs-right-tools,
  .activity-result-tabs,
  .activity-filter-tools
) {
  flex: 0 0 auto;
}

.list-page-filter-scroll :is(.tab, .btn-mini, .list-toolbar-select) {
  min-width: max-content;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* Le rail extérieur porte seul le défilement : aucun sous-groupe ne doit
   compresser ses boutons ou créer un second scroll imbriqué. */
.list-page-filter-scroll > :is(.tabs-bar-factures, .tabs-group, .activity-result-tabs, .activity-filter-tools),
.list-page-filter-scroll :is(.tabs-left, .tabs-center, .tabs-right-tools, .tabs-group) {
  width: max-content;
  max-width: none;
  min-width: max-content;
  flex-wrap: nowrap;
  overflow: visible;
}

.list-page-filter-scroll.tabs-bar-scroll > .tabs-bar-factures {
  width: max-content;
  min-width: max-content;
}

/* Résultats utilise le même bloc de contrôle que les autres listes. */
.page-results > .list-page-controls {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: var(--hd-list-radius);
  background: var(--hd-color-surface, var(--panel));
  box-shadow: var(--hd-list-shadow);
  box-sizing: border-box;
}

.page-results > .list-page-controls > .list-page-filter-scroll {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
}

.page-list :is(.pane-list, .page-left, .activity-panel) {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: var(--hd-list-radius);
  background: var(--hd-color-surface, var(--panel));
  box-shadow: var(--hd-list-shadow);
}

.page-list .list-summary {
  min-height: 44px;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px 8px;
  border-color: var(--hd-color-border, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 97%, var(--accent) 3%);
}

.list-summary-metric {
  min-height: 30px;
  gap: 5px;
  padding: 5px 9px;
  border-color: color-mix(in srgb, var(--hd-color-border, var(--border)) 88%, transparent);
  background: var(--hd-color-surface, var(--panel));
  font-size: 10px;
}

.list-summary-metric .ico {
  width: 14px;
  height: 14px;
}

.list-summary-metric strong {
  font-size: 11px;
  font-weight: 720;
}

/* Lot 9K-4.4 — résumé horizontal commun ---------------------- */
.page-list .list-page-summary-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 6px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 32%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  border: 1px solid var(--hd-color-border, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 97%, var(--accent) 3%);
  box-sizing: border-box;
}

.page-list .list-page-summary-scroll::-webkit-scrollbar {
  height: 4px;
}

.page-list .list-page-summary-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.page-list .list-page-summary-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

.page-list .list-page-summary-scroll > *,
.page-list .list-page-summary-scroll :is(.list-summary-metric, .kb-summaryMetric, .kb-summaryToggle) {
  flex: 0 0 auto;
  min-width: max-content;
  scroll-snap-align: start;
}

.page-list .list-page-summary-scroll .kb-summaryMetrics {
  width: max-content;
  min-width: max-content;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.page-list .list-page-summary-scroll .kb-summaryMetric {
  min-height: 30px;
  justify-content: flex-start;
  padding: 5px 9px;
  background: var(--hd-color-surface, var(--panel));
}

.page-list .list-page-summary-scroll .kb-summaryToggle {
  width: auto;
  min-height: 30px;
  justify-content: center;
  margin-left: 2px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
}

.page-list .list-page-summary-scroll .activity-scope-metric {
  margin-left: 0;
}

/* En-têtes et grilles desktop --------------------------------- */
.list-table-head {
  min-height: 40px;
  gap: 14px;
  padding: 9px 14px;
  border-bottom-color: var(--hd-color-border, var(--border));
  background: var(--hd-list-head-bg);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .055em;
}

.list-table-head-devis,
.devis-item .devis-row {
  grid-template-columns: var(--hd-list-quotes-grid);
}

.list-table-head-factures,
.facture-item .facture-row {
  grid-template-columns: var(--hd-list-invoices-grid);
}

.list-table-head-clients,
.client-item .client-row {
  grid-template-columns: var(--hd-list-clients-grid);
}

.list-table-head-artistes,
.artiste-item .artiste-row {
  grid-template-columns: var(--hd-list-artists-grid);
}

.page-list .list-cards > li.card-item {
  min-height: var(--hd-list-row-min-height);
  padding: 10px 14px;
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--hd-color-border, var(--border)) 72%, transparent);
  background: var(--hd-color-surface, var(--panel));
  transition: background-color .15s ease, box-shadow .15s ease;
}

.page-list .list-cards > li.card-item:hover {
  background: var(--hd-list-hover-bg);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
}

.page-list .list-cards > li.card-item:is(:focus-visible, :focus-within) {
  position: relative;
  z-index: 1;
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--panel) 91%, var(--accent) 9%);
}

.page-list :is(.devis-row, .facture-row, .client-row, .artiste-row) {
  align-items: center;
  gap: 14px;
}

.page-list :is(.devis-row, .facture-row, .client-row, .artiste-row) > .col {
  min-width: 0;
}

.page-list :is(.devis-id, .facture-id, .client-id, .artiste-id) {
  color: var(--hd-color-text, var(--text));
  font-size: 11px;
  font-weight: 680;
}

.page-list :is(.devis-id, .facture-id) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.facture-objet {
  overflow: hidden;
  margin-top: 2px;
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-list .montant {
  color: var(--hd-color-text, var(--text));
  font-size: 11px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-list .date-col {
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Badges métier plus sobres ----------------------------------- */
.status-badge {
  min-height: 27px;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

.status-badge .ico {
  width: 13px;
  height: 13px;
}

.status-badge.badge-muted {
  border-color: color-mix(in srgb, #64748b 24%, var(--border));
  background: color-mix(in srgb, #64748b 9%, var(--panel));
  color: #64748b;
}

.status-badge.badge-or,
.status-badge.badge-amber {
  border-color: color-mix(in srgb, #d97706 27%, var(--border));
  background: color-mix(in srgb, #d97706 9%, var(--panel));
  color: #b45309;
}

.status-badge.badge-blue,
.status-badge.badge-indigo {
  border-color: color-mix(in srgb, #2563eb 25%, var(--border));
  background: color-mix(in srgb, #2563eb 8%, var(--panel));
  color: #2563eb;
}

.status-badge.badge-purple {
  border-color: color-mix(in srgb, #7c3aed 25%, var(--border));
  background: color-mix(in srgb, #7c3aed 8%, var(--panel));
  color: #7c3aed;
}

.status-badge.badge-green {
  border-color: color-mix(in srgb, #15803d 24%, var(--border));
  background: color-mix(in srgb, #22c55e 9%, var(--panel));
  color: #15803d;
}

.status-badge.badge-red {
  border-color: color-mix(in srgb, #dc2626 24%, var(--border));
  background: color-mix(in srgb, #ef4444 8%, var(--panel));
  color: #b91c1c;
}

.status-badge.badge-orange {
  border-color: color-mix(in srgb, #ea580c 24%, var(--border));
  background: color-mix(in srgb, #f97316 8%, var(--panel));
  color: #c2410c;
}

.status-badge.badge-gray {
  border-color: color-mix(in srgb, #64748b 22%, var(--border));
  background: color-mix(in srgb, #64748b 8%, var(--panel));
  color: #64748b;
}

:is(.artiste-badge, .client-badge, .projet-badge) {
  --entity-tone: var(--accent);
  max-width: 100%;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--entity-tone) 20%, var(--hd-color-border, var(--border)));
  border-radius: 999px;
  background: color-mix(in srgb, var(--entity-tone) 7%, var(--panel));
  color: var(--hd-color-text, var(--text));
  font: inherit;
  font-size: 9px;
  font-weight: 620;
  line-height: 1.2;
  text-align: left;
}

.artiste-badge { --entity-tone: #6366f1; }
.client-badge { --entity-tone: #0891b2; }
.projet-badge { --entity-tone: #7c3aed; }

/* Dans les listes métier, ces pastilles décrivent la ligne : la seule
   navigation principale reste le devis ou la facture porté par la ligne. */
.page-list .entity-badge--info {
  cursor: inherit;
  pointer-events: none;
}

/* Le lien Client est la seule action secondaire exposée dans la ligne. */
.entity-badge--link {
  cursor: pointer;
}

.entity-badge--link:hover {
  border-color: color-mix(in srgb, var(--entity-tone) 38%, var(--hd-color-border, var(--border)));
  background: color-mix(in srgb, var(--entity-tone) 12%, var(--panel));
  color: var(--entity-tone);
}

.entity-badge--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--entity-tone) 65%, transparent);
  outline-offset: 2px;
}

.entity-badge-link-icon {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: 1px;
  opacity: .72;
}

#main-content #projetsKanban .entity-badge--info:hover {
  border-color: color-mix(in srgb, var(--entity-tone) 20%, var(--hd-color-border, var(--border)));
  background: color-mix(in srgb, var(--entity-tone) 7%, var(--panel));
  color: var(--hd-color-text, var(--text));
}

button:is(.artiste-badge, .client-badge, .projet-badge) {
  cursor: pointer;
}

button:is(.artiste-badge, .client-badge, .projet-badge):hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--hd-color-border, var(--border)));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

button:is(.artiste-badge, .client-badge, .projet-badge):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
  outline-offset: 1px;
}

:is(.artiste-badge, .client-badge, .projet-badge) > :is(span:last-child, .artiste-name, .client-name, .projet-name) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.artiste-badge-icon, .client-badge-icon, .projet-badge-icon) {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--entity-tone) 14%, var(--panel));
  color: var(--entity-tone);
}

:is(.artiste-badge-icon, .client-badge-icon, .projet-badge-icon) .ico,
.artiste-badge > .lucide {
  width: 11px;
  height: 11px;
}

/* Cartes projets : mêmes codes visuels, dans un format plus compact. */
#main-content #projetsKanban .kb-client .client-badge,
#main-content #projetsKanban .kb-resp .artiste-badge {
  min-height: 24px;
  gap: 5px;
  padding: 2px 7px 2px 3px;
  border: 1px solid color-mix(in srgb, var(--entity-tone) 20%, var(--hd-color-border, var(--border)));
  background: color-mix(in srgb, var(--entity-tone) 7%, var(--panel));
  color: var(--hd-color-text, var(--text));
}

/* Clients et artistes ----------------------------------------- */
.page-list .avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: none;
  font-size: 12px;
  font-weight: 720;
}

/* Les logos fournis sont souvent blancs/transparents : le fond accent garantit
   leur lisibilité dans les deux thèmes, sans modifier les fichiers sources. */
.page-list .artiste-avatar {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  background: var(--accent);
  color: #fff;
}

.page-list .artiste-avatar-img { padding: 4px; }

/* L'avatar identifie le client sans prendre le dessus sur son nom. */
.page-list .client-item .client-avatar {
  width: 30px;
  height: 30px;
  font-size: 10px;
}

:is(.client-name-col, .artiste-name-col) {
  gap: 9px !important;
}

:is(.client-email, .artiste-email, .client-location-text, .artiste-location-text) {
  overflow: hidden;
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.client-stats-col, .artiste-stats-col) {
  gap: 5px;
}

:is(.client-stat-pill, .artiste-stat-pill, .artiste-role-pill, .current-user-badge) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--hd-color-border, var(--border)) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 74%, var(--panel));
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}

.artiste-ca-pill {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: var(--accent);
}

.current-user-badge {
  min-height: 20px;
  margin-left: 5px;
  padding: 2px 6px;
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: var(--accent);
  font-size: 8px;
}

.artiste-item.is-current-user {
  background: color-mix(in srgb, var(--panel) 96%, var(--accent) 4%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 78%, transparent);
}

/* Activité ----------------------------------------------------- */
.activity-list-toolbar {
  padding: 5px 24px 8px;
}

.activity-page {
  max-width: var(--hd-list-max-width);
  padding: 16px 24px 56px;
}

.activity-panel {
  border-radius: var(--hd-list-radius);
  box-shadow: var(--hd-list-shadow);
}

.activity-row {
  min-height: var(--hd-list-row-min-height);
  gap: 14px;
  padding: 10px 14px;
}

.activity-row:hover {
  background: var(--hd-list-hover-bg);
}

.activity-main strong {
  font-size: 11px;
  font-weight: 700;
}

.activity-main span,
.activity-date,
.activity-user {
  font-size: 9px;
}

.activity-category,
.activity-status {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 9px;
}

.activity-list-footer {
  min-height: 44px;
  background: var(--hd-list-head-bg);
}

/* États vides -------------------------------------------------- */
.page-list :is(.home-empty, .activity-empty) {
  min-height: 220px;
  margin: 0;
  padding: 28px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hd-color-text-muted, var(--muted));
  font-size: 11px;
}

.page-list .home-empty:not(.hidden) {
  display: grid;
  place-items: center;
}

/* Tablette : lignes transformées en cartes lisibles ----------- */
@media (max-width: 1099px) {
  .page-list {
    padding-inline: 16px;
  }

  .page-list .list-summary {
    margin-inline: 0;
  }

  .page-list .list-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .page-list .list-cards > li.card-item {
    min-height: 0;
    padding: 12px;
    border: 1px solid var(--hd-color-border, var(--border));
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .035);
  }

  .page-list :is(.devis-row, .facture-row, .client-row, .artiste-row) > .col {
    position: static;
    inset: auto;
    min-height: 0;
    justify-content: flex-start;
  }

  .devis-item .devis-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id amount"
      "project project"
      "client status"
      "artist date";
    gap: 8px 10px;
  }

  .devis-row .id-col { grid-area: id; }
  .devis-row .montant-col { grid-area: amount; justify-content: flex-end; }
  .devis-row .statut-col { grid-area: status; justify-content: flex-end; }
  .devis-row .artiste-col { grid-area: artist; }
  .devis-row .client-col { grid-area: client; }
  .devis-row .projet-col { grid-area: project; }
  .devis-row .date-col { grid-area: date; align-items: center; justify-content: flex-end; }

  .facture-item .facture-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id amount"
      "type status"
      "project project"
      "client date"
      "artist date";
    gap: 8px 10px;
  }

  .facture-row .id-col { grid-area: id; }
  .facture-row .avatar-col { grid-area: type; }
  .facture-row .montant-col { grid-area: amount; justify-content: flex-end; }
  .facture-row .statut-col { grid-area: status; justify-content: flex-end; }
  .facture-row .artiste-col { grid-area: artist; }
  .facture-row .client-col { grid-area: client; }
  .facture-row .projet-col { grid-area: project; }
  .facture-row .date-col { grid-area: date; align-items: flex-end; justify-content: flex-end; text-align: right; }

  .client-item .client-row,
  .artiste-item .artiste-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  :is(.client-stats-col, .artiste-stats-col) {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .artiste-role-col {
    justify-content: flex-end !important;
  }
}

/* Mobile ------------------------------------------------------- */
@media (max-width: 720px) {
  body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) > .inner {
    min-height: 0;
    padding: 9px 12px;
    flex-wrap: wrap;
  }

  body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .title {
    width: auto;
    min-width: 0;
    flex: 1;
    font-size: 18px;
  }

  body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .search {
    order: 3;
    flex: 1 0 100%;
  }

  body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .search input {
    min-height: 42px;
    font-size: 13px;
  }

  body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .actions :is(.btn, .btn-secondary) {
    min-height: 38px;
  }

  .page-list,
  .activity-page {
    margin-top: 0;
    padding-inline: 10px;
  }

  .page-list > .list-page-controls {
    padding: 10px;
  }

  .page-results > .list-page-controls {
    padding: 10px;
  }

  .list-page-filter-scroll {
    gap: 6px;
    padding-bottom: 5px !important;
    scroll-padding-inline: 2px;
  }

  .list-page-filter-scroll :is(.tab, .btn-mini) {
    min-height: 40px;
  }

  .page-list .list-page-control-row {
    grid-template-columns: 1fr;
  }

  .page-list .list-cards {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px;
  }

  .page-list .list-cards > li.card-item {
    padding: 8px 9px;
    border-radius: 9px;
  }

  .page-list :is(.devis-row, .facture-row) {
    gap: 5px 8px;
  }

  .page-list :is(.devis-row, .facture-row) :is(.artiste-badge, .client-badge, .projet-badge) {
    min-height: 25px;
    gap: 5px;
    padding: 2px 7px 2px 3px;
    font-size: 9px;
  }

  .page-list :is(.devis-row, .facture-row) :is(.artiste-badge-icon, .client-badge-icon, .projet-badge-icon) {
    width: 19px;
    height: 19px;
  }

  .page-list .client-item .client-avatar {
    width: 28px;
    height: 28px;
  }

  .page-list :is(.devis-row, .facture-row) .status-badge {
    min-height: 24px;
    padding: 3px 7px;
  }

  .page-list :is(.devis-row, .facture-row) :is(.devis-id, .facture-id, .montant) {
    font-size: 10px;
  }

  .page-list .facture-objet {
    margin-top: 0;
    font-size: 8px;
  }

  .page-list :is(.devis-row, .facture-row) .date-col {
    gap: 2px;
    font-size: 9px;
  }

  .page-list .list-summary {
    min-height: 40px;
    padding: 5px 6px;
  }

  .page-list .list-page-summary-scroll {
    min-height: 40px;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    padding: 5px 6px;
  }

  .page-list .list-page-summary-scroll .kb-summaryMetrics {
    display: flex;
    grid-template-columns: none;
  }

  .page-list .list-page-summary-scroll .kb-summaryToggle {
    width: auto;
  }

  .list-summary-metric {
    min-height: 28px;
    padding: 4px 8px;
  }

  .tabs-right-tools {
    display: flex;
  }

  .tabs-bar-factures {
    gap: 7px;
  }

  .activity-list-toolbar {
    gap: 8px;
  }

  .activity-filter-tools {
    width: 100%;
    gap: 6px;
  }

  .activity-row {
    padding: 11px;
  }

  .page-list :is(.home-empty, .activity-empty) {
    min-height: 170px;
  }
}

@media (max-width: 480px) {
  body.app-shell-visible #main-content > .toolbar:not([class*="-page-toolbar"]) .actions .btn span {
    display: none;
  }

  .tabs-separator {
    display: none;
  }

  :is(.client-email-col, .artiste-email-col) {
    grid-column: 1 / -1;
  }

  :is(.client-ville-col, .artiste-ville-col) {
    grid-column: 1;
  }

  .artiste-role-col {
    grid-column: 2;
    grid-row: 2;
  }

  :is(.client-stats-col, .artiste-stats-col) {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .page-list .list-cards > li.card-item,
    .activity-row,
    .filter-btn,
    .filter-date-btn,
    .devis-tabs .tab,
    .tabs-bar-factures .tab
  ) {
    transition: none !important;
  }
}

/* ============================================================
   V2-RC1.5.26 — lignes métier allégées
   Type et Statut conservent leur fonction de badge. Les entités
   Artiste, Client et Projet redeviennent des informations de ligne.
   ============================================================ */
:is(
  .page-list,
  #main-content #projetsKanban
) :is(.artiste-badge, .client-badge, .projet-badge) {
  min-height: 0;
  gap: 6px;
  padding: 1px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--hd-color-text, var(--text));
  font-weight: 600;
}

:is(
  .page-list,
  #main-content #projetsKanban
) :is(.artiste-badge-icon, .projet-badge-icon) {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: transparent;
  color: var(--entity-tone);
  opacity: .72;
}

:is(
  .page-list,
  #main-content #projetsKanban
) :is(.artiste-badge-icon, .projet-badge-icon) .ico {
  width: 13px;
  height: 13px;
}

/* Le nom suffit pour identifier le client ; la flèche indique le lien. */
:is(
  .page-list,
  #main-content #projetsKanban
) .client-badge-icon {
  display: none;
}

:is(
  .page-list,
  #main-content #projetsKanban
) .client-badge.entity-badge--link:hover {
  border: 0;
  background: transparent;
  color: var(--entity-tone);
}

:is(
  .page-list,
  #main-content #projetsKanban
) .client-badge.entity-badge--link:hover .client-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:is(
  .page-list,
  #main-content #projetsKanban
) .entity-badge-link-icon {
  width: 10px;
  height: 10px;
  margin-left: 0;
  opacity: .48;
}

:is(
  .page-list,
  #main-content #projetsKanban
) .client-badge.entity-badge--link:hover .entity-badge-link-icon {
  opacity: .9;
}