/* Comptes en Famille — design système (complète Tailwind, chargé via CDN dans partials/head.php).
   Écrit à la main, sans dépendance de build : propriétés CSS réelles, pas de @apply. */

:root {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

/* --- Couleur d'accent (voir ?page=settings) --- Palette "brand" de Tailwind
   (configurée dans partials/head.php via rgb(var(--accent-x) / <alpha-value>))
   pointe sur ces variables, permutées selon html[data-accent]. Toutes les
   classes d'accent déjà utilisées dans l'appli (bg-brand, text-brand, leurs
   variantes dark:) en profitent automatiquement, sans modifier aucune vue.

   ATTENTION : ne JAMAIS écrire d'astérisque suivie d'une barre oblique dans
   ce commentaire (comme dans « bg-brand-<étoile>/text-brand »). Cette suite
   ferme le commentaire par accident, et le texte restant, devenu du CSS
   invalide, fait avaler la règle :root ci-dessous. L'accent par défaut
   (emerald) se retrouve alors sans variables et TOUS les bg-brand-* de
   l'application calculent en transparent. C'est arrivé, et ça ne se voyait
   qu'en thème clair (texte blanc sur fond blanc). */
:root, html[data-accent="emerald"] {
  --accent-50: 236 253 245;  --accent-100: 209 250 229; --accent-200: 167 243 208;
  --accent-300: 110 231 183; --accent-400: 52 211 153;  --accent-500: 16 185 129;
  --accent-600: 5 150 105;   --accent-700: 4 120 87;    --accent-800: 6 95 70;    --accent-900: 6 78 59;
}
html[data-accent="blue"] {
  --accent-50: 239 246 255;  --accent-100: 219 234 254; --accent-200: 191 219 254;
  --accent-300: 147 197 253; --accent-400: 96 165 250;  --accent-500: 59 130 246;
  --accent-600: 37 99 235;   --accent-700: 29 78 216;   --accent-800: 30 64 175;  --accent-900: 30 58 138;
}
html[data-accent="violet"] {
  --accent-50: 245 243 255;  --accent-100: 237 233 254; --accent-200: 221 214 254;
  --accent-300: 196 181 253; --accent-400: 167 139 250; --accent-500: 139 92 246;
  --accent-600: 124 58 237;  --accent-700: 109 40 217;  --accent-800: 91 33 182;  --accent-900: 76 29 149;
}
html[data-accent="pink"] {
  --accent-50: 253 242 248;  --accent-100: 252 231 243; --accent-200: 251 207 232;
  --accent-300: 249 168 212; --accent-400: 244 114 182; --accent-500: 236 72 153;
  --accent-600: 219 39 119;  --accent-700: 190 24 93;   --accent-800: 157 23 77;  --accent-900: 131 24 67;
}
html[data-accent="orange"] {
  --accent-50: 255 247 237;  --accent-100: 255 237 213; --accent-200: 254 215 170;
  --accent-300: 253 186 116; --accent-400: 251 146 60;  --accent-500: 249 115 22;
  --accent-600: 234 88 12;   --accent-700: 194 65 12;   --accent-800: 154 52 18;  --accent-900: 124 45 18;
}
html[data-accent="slate"] {
  --accent-50: 248 250 252;  --accent-100: 241 245 249; --accent-200: 226 232 240;
  --accent-300: 203 213 225; --accent-400: 148 163 184; --accent-500: 100 116 139;
  --accent-600: 71 85 105;   --accent-700: 51 65 85;    --accent-800: 30 41 59;   --accent-900: 15 23 42;
}
html[data-accent="red"] {
  --accent-50: 254 242 242;  --accent-100: 254 226 226; --accent-200: 254 202 202;
  --accent-300: 252 165 165; --accent-400: 248 113 113; --accent-500: 239 68 68;
  --accent-600: 220 38 38;   --accent-700: 185 28 28;   --accent-800: 153 27 27;  --accent-900: 127 29 29;
}
html[data-accent="amber"] {
  --accent-50: 255 251 235;  --accent-100: 254 243 199; --accent-200: 253 230 138;
  --accent-300: 252 211 77;  --accent-400: 251 191 36;  --accent-500: 245 158 11;
  --accent-600: 217 119 6;   --accent-700: 180 83 9;    --accent-800: 146 64 14;  --accent-900: 120 53 15;
}

/* Transitions natives entre pages (View Transitions API) — dégradé simple, aucune dépendance. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
}

/* --- Badge de statut d'opération --- */
.status-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.status-badge--clickable {
  cursor: pointer;
}
/* Variante icône seule (liste des opérations) : le libellé passe en infobulle
   (attribut title), seule la couleur reste visible. Carré, pour que toutes les
   lignes gardent la même largeur quel que soit le statut. */
.status-badge--icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  justify-content: center;
}
.status-badge--planned {
  background: var(--surface-muted);
  color: var(--text-muted);
}
.status-badge--pending {
  background: var(--warning-badge-bg);
  color: var(--warning-text);
}
.status-badge--checked {
  background: var(--info-badge-bg);
  color: var(--info-text);
}
.status-badge--reconciled {
  background: var(--success-badge-bg);
  color: var(--success-strong);
}

/* --- Visible seulement des lecteurs d'écran (ex. <input type="radio"> d'un
   contrôle segmenté, dont seul le <span> frère fait office de rendu) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- État générique --- à utiliser par le JS pour masquer un élément sans
   dépendre d'une classe utilitaire Tailwind (ex. "hidden") qui ne serait pas
   générée si aucun autre élément de la page ne la porte au premier rendu
   (le CDN Tailwind scanne le DOM une fois au chargement). !important
   garantit la priorité sur la règle d'affichage propre au composant, quel
   que soit l'ordre de chargement des feuilles de style. */
.is-hidden {
  display: none !important;
}

/* --- Généralité de design / alignement --- */
.text-align_right{
  text-align : right;
}
.text-align_center{
  text-align: center;
}
.text-align_left{
  text-align: left;
}
.text-align_justify{
  text-align: justify;
}

/* --- État vide (liste/grille sans élément) --- */
.empty-state {
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  padding: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-subtle);
}

/* --- Titre de section (au sein d'une page) --- */
.section-heading {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* --- Lien texte --- */
.link {
  font-weight: 500;
}
.link--brand {
  color: rgb(var(--accent-600));
}
.link--brand:hover {
  color: rgb(var(--accent-700));
}
.link--muted {
  color: #64748b;
}
.link--muted:hover {
  color: #334155;
}
html.dark .link--muted {
  color: #94a3b8;
}
.link--danger {
  color: #f43f5e;
}
.link--danger:hover {
  color: #be123c;
}

/* --- Bouton --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.btn--block {
  width: 100%;
}
.btn--primary {
  background: rgb(var(--accent-600));
  color: #fff;
}
.btn--primary:hover {
  background: rgb(var(--accent-700));
}
.btn--outline {
  border: 1px solid var(--border-strong);
  color: var(--text-emphasis);
}
.btn--outline:hover {
  background: var(--surface-muted);
}
.btn__icon {
  width: 1rem;
  height: 1rem;
}

/* Glyphe Font Awesome réduit (0,75 rem) à côté d'un libellé : bouton de
   tri, colonnes, filtres, pastille de statut. */
.icon-small {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* --- Bandeau d'information neutre (ex. opération verrouillée) --- */
.notice {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.notice__icon {
  font-size: 1.125rem;
}

/* --- Bandeau d'alerte (ex. filtres ayant échoué, avertissement) --- */
.alert {
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.alert--warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* --- Bouton icône carré (composant components/icon-button) ---
   Variantes : bleu (défaut), --success, --share (même vert), --danger.
   Le glyphe est une icône Font Awesome (.icon-btn__icon), jamais une classe
   utilitaire Tailwind : rien à régénérer par le CDN. */
.icon-btn {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--info-soft);
  color: var(--info-soft-text);
}
.icon-btn:hover {
  background: var(--info-soft-hover);
}
.icon-btn--success,
.icon-btn--share {
  background: var(--success-soft);
  color: var(--success-soft-text);
}
.icon-btn--success:hover,
.icon-btn--share:hover {
  background: var(--success-soft-hover);
}
.icon-btn--danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.icon-btn--danger:hover {
  background: var(--danger-soft-hover);
}
.icon-btn__icon {
  font-size: 0.75rem;
}

/* --- Menu déroulant (composant components/menu, <details data-user-menu>) ---
   Un seul panneau pour tous les menus : opérations « ⋯ », échéanciers « ⋮ »,
   options de widget, sélecteur de colonnes, menu utilisateur. Le déclencheur
   garde sa classe propre (.menu__trigger, .widget-menu__trigger,
   .column-picker__trigger, .user-menu__trigger) : seuls les panneaux étaient
   dupliqués. Le panneau flottant des lignes d'opérations (.txmenu__panel,
   transactions-menu.css) reste à part — position fixe, choix de performance —
   mais réutilise .menu__option. Fermeture au clic extérieur, à Échap et au clic
   sur une entrée : assets/js/dropdown.js. */
.menu {
  position: relative;
}

.menu__trigger {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 0 0.25rem;
}
.menu__trigger::-webkit-details-marker {
  display: none;
}
.menu__trigger:hover {
  background: var(--surface-muted);
}
.menu__trigger--sq {
  height: 2rem;
  width: 2rem;
  padding: 0;
  color: #94a3b8;
}
.menu__trigger--type {
  height: 1.75rem;
  min-width: 1.75rem;
  font-size: 0.875rem;
}

.menu__trigger-icon {
  height: 1.25rem;
  width: 1.25rem;
}

.menu__dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  margin-top: 0.25rem;
  /* Jamais plus large que l'écran : le panneau est ancré près d'un bord. */
  max-width: calc(100vw - 1.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.5rem;
  box-shadow: var(--shadow-pop);
}
/* Position : ancré à droite sous le déclencheur par défaut. */
.menu__dropdown--up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.menu__dropdown--left {
  right: auto;
  left: 0;
}
.menu__dropdown--spaced {
  margin-top: 0.5rem;
}
.menu__dropdown--up.menu__dropdown--spaced {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
/* Largeur (aucune = celle du contenu). */
.menu__dropdown--sm {
  width: 10rem;
}
.menu__dropdown--md {
  width: 14rem;
}
.menu__dropdown--lg {
  width: 15rem;
}
.menu__dropdown--xl {
  width: 16rem;
}
/* Habillage interne. */
.menu__dropdown--compact {
  padding: 0.375rem;
}
.menu__dropdown--roomy {
  padding: 0.75rem;
}
.menu__dropdown--stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.menu__dropdown--scroll {
  max-height: 18rem;
  overflow-y: auto;
}

.menu__option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius);
  padding: 0.375rem 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
}
.menu__option:hover {
  background: var(--surface-muted);
}
/* Libellé d'une option, tronqué avec « … » s'il dépasse. */
.menu__option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dark .menu__option {
  color: #cbd5e1;
}
.menu__option--active {
  background: #f1f5f9;
  font-weight: 600;
  color: #0f172a;
}
html.dark .menu__option--active {
  background: #1e293b;
  color: #fff;
}
.menu__option--muted {
  color: #94a3b8;
}
.menu__option--danger {
  color: #e11d48;
}
.menu__option--danger:hover {
  background: var(--danger-bg);
}
html.dark .menu__option--danger {
  color: #fb7185;
}

.menu__option-icon {
  width: 1rem;
  flex-shrink: 0;
  text-align: center;
}
.menu__option-icon--blue {
  color: var(--info-icon);
}
.menu__option-icon--success {
  color: var(--success);
}

/* --- Texte secondaire tronqué (ex. rappel d'une opération dans un formulaire) --- */
.text-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--text-subtle);
}

/* --- Montant coloré selon le sens (dépense/revenu) --- */
.tx-amount--income {
  color: var(--success);
}
.tx-amount--expense {
  color: var(--danger);
}

/* --- Interrupteur (switch) --- */
.switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch__track {
  position: absolute;
  inset: 0;
  background: var(--control-muted);
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease;
}
.switch__thumb {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  background: white;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch input:checked ~ .switch__track {
  background: #059669;
}
.switch input:checked ~ .switch__thumb {
  transform: translateX(1.25rem);
}
.switch input:focus-visible ~ .switch__track {
  outline: 2px solid #059669;
  outline-offset: 2px;
}

/* --- Champs date/mois en mode sombre --- L'icône du sélecteur natif
   (calendrier) est dessinée en noir par le navigateur : illisible sur fond
   sombre. On l'inverse, et on force la couleur du texte saisi. */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: 0.85;
  cursor: pointer;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="month"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
html.dark input[type="date"],
html.dark input[type="month"],
html.dark input[type="time"] {
  color-scheme: dark;
}

/* --- Tableau triable (voir assets/js/sortable-table.js) --- */
[data-sortable-table] th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}
[data-sortable-table] th[data-sort-key][data-sort-dir="asc"]::after {
  content: " \25B2";
}
[data-sortable-table] th[data-sort-key][data-sort-dir="desc"]::after {
  content: " \25BC";
}

/* --- Indicateur de chargement htmx (classe posée automatiquement par htmx
   sur l'élément qui déclenche la requête pendant qu'elle est en vol) --- */
.htmx-request,
.htmx-request * {
  cursor: progress;
}
form.htmx-request,
button.htmx-request {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

/* --- Visibilité responsive --- Utilitaires génériques pour masquer un
   élément selon la taille d'écran, sur les mêmes seuils que le reste de
   l'appli (768px, 1024px — voir transactions.css/accounts.css). Toujours en
   mobile-first (min-width), jamais de max-width, pour rester cohérent avec
   le reste des fichiers CSS du projet.
   `display: revert` restaure la valeur d'affichage naturelle de l'élément
   (block, inline, flex posé par une autre classe, etc.) plutôt que d'imposer
   une valeur arbitraire qui ne conviendrait pas à tous les tags. */
.no-mobile {
  display: none;
}
@media (min-width: 768px) {
  .no-mobile {
    display: revert;
  }
}

/* Masqué uniquement entre 768px et 1023px (tablette). */
@media (min-width: 768px) {
  .no-tablet {
    display: none;
  }
}
@media (min-width: 1024px) {
  .no-tablet {
    display: revert;
  }
}

@media (min-width: 1024px) {
  .no-desktop {
    display: none;
  }
}

/* --- Infobulle --- Transforme un élément (inline ou block) en déclencheur
   d'infobulle, sur les mêmes seuils que .no-mobile/.no-tablet/.no-desktop
   ci-dessus. Le texte vient de l'attribut `data-tooltip` (jamais dupliqué en
   CSS), affiché dans une bulle au-dessus de l'élément.
   Déclenchement au survol ET au focus : sur mobile il n'y a pas de :hover,
   l'élément doit donc pouvoir recevoir le focus pour s'ouvrir au toucher —
   ajouter tabindex="0" s'il ne s'agit pas déjà d'un <button>/<a>/<input>…
     <span class="tooltip" data-tooltip="Toujours affiché">…</span>
     <span class="tooltip-for-mobile" data-tooltip="Mobile seulement" tabindex="0">…</span>
     <span class="tooltip-for-tablet" data-tooltip="Tablette seulement" tabindex="0">…</span>
     <span class="tooltip-for-desktop" data-tooltip="Desktop seulement" tabindex="0">…</span>
   Hors de sa plage, une classe -for-mobile/-for-tablet/-for-desktop ne fait
   RIEN : l'élément s'affiche normalement, comme sans aucune de ces classes. */
.tooltip[data-tooltip],
.tooltip-for-mobile[data-tooltip],
.tooltip-for-tablet[data-tooltip],
.tooltip-for-desktop[data-tooltip] {
  position: relative;
}
.tooltip[data-tooltip]::after,
.tooltip-for-mobile[data-tooltip]::after,
.tooltip-for-tablet[data-tooltip]::after,
.tooltip-for-desktop[data-tooltip]::after {
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: 16rem;
  transform: translateX(-50%);
  border-radius: 0.375rem;
  background: var(--tooltip-bg);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Toujours actif. */
.tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
}
.tooltip[data-tooltip]:hover::after,
.tooltip[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}

/* Actif seulement sous 768px (mobile). */
.tooltip-for-mobile[data-tooltip]::after {
  content: attr(data-tooltip);
}
.tooltip-for-mobile[data-tooltip]:hover::after,
.tooltip-for-mobile[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px) {
  .tooltip-for-mobile[data-tooltip]::after {
    content: none;
  }
}

/* Actif seulement entre 768px et 1023px (tablette). */
.tooltip-for-tablet[data-tooltip]::after {
  content: none;
}
.tooltip-for-tablet[data-tooltip]:hover::after,
.tooltip-for-tablet[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px) {
  .tooltip-for-tablet[data-tooltip]::after {
    content: attr(data-tooltip);
  }
}
@media (min-width: 1024px) {
  .tooltip-for-tablet[data-tooltip]::after {
    content: none;
  }
}

/* Actif seulement à partir de 1024px (desktop). */
.tooltip-for-desktop[data-tooltip]::after {
  content: none;
}
.tooltip-for-desktop[data-tooltip]:hover::after,
.tooltip-for-desktop[data-tooltip]:focus::after {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1024px) {
  .tooltip-for-desktop[data-tooltip]::after {
    content: attr(data-tooltip);
  }
}

/* --- Tableau de données (composant components/data-table) ---
   Enveloppe défilante .data-table-wrap + <table class="data-table">. Colonnes
   triables : data-sortable-table (assets/js/sortable-table.js). .data-table__sort =
   en-tête qui trie côté SERVEUR (lien). Cellules : --strong, --money. */
.data-table-wrap {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
}

.data-table thead {
  border-bottom: 1px solid var(--border);
  background: var(--table-head-bg);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--text-subtle);
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
}

/* En-tête de colonne cliquable pour trier (ex. tableau d'amortissement). */
.data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
}
.data-table__sort:hover {
  color: rgb(var(--accent-600));
}

.data-table tbody tr + tr {
  border-top: 1px solid var(--border-subtle);
}

/* :where() → spécificité nulle pour le préfixe : une classe de cellule
   (--strong, ou celle d'une vue) peut redéfinir la couleur par défaut. */
:where(.data-table) td {
  color: var(--text-muted);
}

/* Montant (centimes formatés en devise) : aligné à droite, chasse tabulaire
   pour que les colonnes de chiffres restent verticalement alignées. */
.data-table__cell--money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table__cell--strong {
  font-weight: 500;
  color: var(--text);
}
.data-table__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Sélecteur de colonnes facultatives (composant components/column-picker) ---
   Déclencheur + contenu ; le panneau lui-même est un .menu__dropdown
   (composant components/menu). */
.column-picker {
  position: relative;
  flex-shrink: 0;
}

.column-picker__trigger {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--field-bg);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.column-picker__trigger::-webkit-details-marker {
  display: none;
}
.column-picker__trigger:hover {
  background: #f8fafc;
}
html.dark .column-picker__trigger:hover {
  background: #334155;
}

.column-picker__hint {
  font-size: 0.75rem;
  color: #94a3b8;
}

.column-picker__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
}

.column-picker__apply {
  width: 100%;
  border-radius: var(--radius);
  background: rgb(var(--accent-600));
  padding: 0.375rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}