/* ═══════════════════════════════════════════════════════
   MA COLLECTION — bascule vignettes/tableau, tableau de
   portefeuille et tri de colonnes (utilitaire ktSortable).
   ═══════════════════════════════════════════════════════ */

/* ── 1. Barre de contrôles ──────────────────────────── */
.kt-pf-sectionhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.kt-pf-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* ── 2. Vue vignettes ───────────────────────────────── */
.kt-pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.kt-pf-tile-remove {
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ui-border);
  color: var(--text-tertiary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color .15s;
}
.kt-pf-tile-remove:hover { color: var(--negative); }

.kt-pf-empty {
  border-radius: var(--radius-lg);
  border: 1px dashed var(--ui-border);
  padding: 36px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ── 3. Vue tableau ─────────────────────────────────── */
.kt-pf-tablewrap {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--app-surface-elevated);
  overflow-x: auto;                 /* ne défile que si la largeur l'impose */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
table.kt-pf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 12.5px;
}

/* En-têtes triables */
.kt-pf-table thead th {
  padding: 0;
  background: var(--app-card);
  border-bottom: 1px solid var(--ui-border-strong);
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
/* .sr-only est en position absolue : la cellule doit lui servir de bloc conteneur. */
.kt-pf-table thead th[data-col="act"] { padding: 10px 14px; position: relative; }
.kt-sort-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s;
}
.kt-pf-table thead th.kt-num .kt-sort-btn { justify-content: flex-end; text-align: right; }
.kt-sort-btn:hover { color: var(--text-secondary); }
.kt-sort-btn[data-active="1"] { color: var(--text-primary); }
.kt-sort-btn:focus-visible { outline: 2px solid #007aff; outline-offset: -2px; border-radius: var(--radius-sm); }
.kt-sort-ind {
  flex: 0 0 9px;
  width: 9px;
  font-size: 8px;
  line-height: 1;
  color: var(--text-secondary);
}

/* Corps */
.kt-pf-table tbody td {
  padding: 9px 12px;
  border-top: 1px solid var(--ui-border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.kt-pf-row { cursor: pointer; transition: background .13s; }
.kt-pf-row:hover { background: var(--ui-hover); }

.kt-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.kt-pf-table tbody td.kt-num { color: var(--text-primary); }
.kt-strong { font-weight: 600; }
.kt-dim { color: var(--text-tertiary); }
.kt-pos { color: var(--positive); }
.kt-neg { color: var(--negative); }
.kt-pf-table tbody td.kt-pos, .kt-pf-table tfoot td.kt-pos { color: var(--positive); }
.kt-pf-table tbody td.kt-neg, .kt-pf-table tfoot td.kt-neg { color: var(--negative); }

/* Colonne « Ligne » : le seul contenu élastique du tableau */
td.kt-pf-line { width: 20%; max-width: 0; overflow: hidden; }
.kt-pf-lineflex { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kt-pf-thumb {
  flex: 0 0 34px;
  width: 34px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--app-card);
}
.kt-pf-thumb .product-art { height: 46px; width: 34px; border-radius: var(--radius-sm); }
.kt-pf-thumb .small-art img { height: 42px; width: 30px; }
.kt-pf-thumb .small-art .illustrated-card { width: 26px; height: 36px; border-width: 2px; padding: 1px; }
.kt-pf-thumb .small-art .illustrated-card > div { font-size: 11px; }
.kt-pf-thumb .small-art .box-illustration { transform: scale(.38) rotate(-8deg); }
.kt-pf-lineid { display: block; min-width: 0; overflow: hidden; }
.kt-pf-lineid a {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-pf-lineid a:hover { text-decoration: underline; }
.kt-pf-lineid small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-pf-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.kt-pf-grade {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.kt-pf-sub { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }

.kt-pf-act { text-align: right; }
.kt-pf-remove {
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border-strong);
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.kt-pf-remove:hover { color: var(--negative); border-color: var(--negative); }
.kt-pf-remove:focus-visible { outline: 2px solid #007aff; outline-offset: 2px; }

/* Pied : ligne de total */
.kt-pf-table tfoot td {
  padding: 11px 12px;
  background: var(--app-card);
  border-top: 1px solid var(--ui-border-strong);
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}
.kt-pf-total-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kt-pf-table tfoot td[data-col="name"] small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.kt-pf-legend {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* ── 4. Adaptation aux petites largeurs ─────────────── */
@media (max-width: 1180px) {
  .kt-pf-table { font-size: 12px; }
  .kt-pf-table tbody td, .kt-pf-table tfoot td { padding-left: 9px; padding-right: 9px; }
  .kt-sort-btn { padding-left: 9px; padding-right: 9px; }
  /* Colonnes secondaires : masquées dès que la largeur ne les porte plus. */
  .kt-pf-table [data-col="forecast"],
  .kt-pf-table [data-col="weight"] { display: none; }
}
@media (max-width: 900px) {
  .kt-pf-table { min-width: 620px; }
  /* Le tableau défile : la colonne d'intitulé reste visible. */
  td.kt-pf-line { width: 1%; max-width: none; }
  .kt-pf-lineid { width: 124px; }
  .kt-pf-table th[data-col="name"], .kt-pf-table td[data-col="name"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--app-surface-elevated);
  }
  .kt-pf-table thead th[data-col="name"], .kt-pf-table tfoot td[data-col="name"] {
    z-index: 2;
    background: var(--app-card);
  }
  .kt-pf-table th[data-col="name"]::after, .kt-pf-table td[data-col="name"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1px;
    width: 1px;
    background: var(--ui-border-strong);
  }
  .kt-pf-legend { font-size: 10.5px; }
  .kt-pf-controls { gap: 8px; }
  .kt-pf-controls .seg button { padding: 0 8px; font-size: 11.5px; }
}
@media (max-width: 560px) {
  .kt-pf-thumb { flex-basis: 28px; width: 28px; height: 38px; }
  .kt-pf-thumb .product-art { height: 38px; width: 28px; }
  .kt-pf-thumb .small-art img { height: 34px; width: 24px; }
  .kt-pf-thumb .small-art .illustrated-card { width: 22px; height: 30px; }
  .kt-pf-thumb .small-art .box-illustration { transform: scale(.31) rotate(-8deg); }
}

/* ── 5. Mise en page de la page « Ma collection » ───── */
.kt-pf-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.kt-pf-collage { display: flex; align-items: center; flex-shrink: 0; gap: 0; min-width: 0; }
@media (max-width: 1000px) {
  .kt-pf-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .kt-pf-collage { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Étape 5 — contrôles de collection, sparkline, compteur de filtres.

   Aucune couleur en dur : les variables du thème sont celles du site. La
   sparkline hérite du vert/rouge de gain/perte par la fonction de tracé
   (`KTChart.spark`), comme les autres courbes.
   ═══════════════════════════════════════════════════════════════════════════ */

.kt-pf-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.kt-pf-select select,
.kt-pf-search input {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.kt-pf-search { flex: 1 1 200px; min-width: 160px; }
.kt-pf-search input { width: 100%; }

.kt-pf-count {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 0 12px;
}

/* ── Colonne Tendance ────────────────────────────────────────────────────── */

.kt-pf-trendcell { min-width: 132px; }

.kt-pf-spark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.kt-pf-spark-graph {
  display: block;
  width: 104px;
  height: 30px;
}

.kt-pf-spark small {
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Le tiret et sa raison. La raison est visible sans survol : une infobulle
   seule serait invisible au clavier comme à l'impression, et le §5.2 demande
   que l'absence de tendance se lise, pas qu'elle se devine. */
.kt-pf-nospark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--text-muted);
}

.kt-pf-nospark small {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 150px;
  text-align: right;
  line-height: 1.3;
}