/*
 * La feuille de style du club, chargée dans les deux espaces (docs/TELEPHONE.md).
 *
 * 1. Les classes utilitaires des vues écrites à la main. Filament ne livre que
 *    ses propres classes ; sans ce fichier, `text-gray-500` ou `overflow-x-auto`
 *    ne font rien. On ne définit que celles que les vues utilisent, avec les
 *    couleurs de Filament. tests/Feature/ViewClassesTest.php échoue sur une
 *    classe qui n'est ni de Filament, ni ici, ni dans le <style> de sa vue.
 * 2. Les tableaux sur téléphone tenu droit (moins de 640 px) : une ligne devient
 *    une carte, ses boutons d'action juste après le premier champ.
 *
 * L'essai « ligne dans la largeur, actions en seconde ligne » sur ordinateur est
 * à part, dans club-lignes.css (réglage TABLES_FIT_WIDTH).
 */

/* ── 1. Classes utilitaires ─────────────────────────────────────────────── */

.text-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height); }
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: .025em; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }

.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-950 { color: var(--gray-950); }
.text-primary-600 { color: var(--primary-600); }
.text-warning-600 { color: var(--warning-600); }
.text-danger-600 { color: var(--danger-600); }
.dark .dark\:text-gray-300 { color: var(--gray-300); }
.dark .dark\:text-gray-400 { color: var(--gray-400); }
.dark .dark\:text-gray-500 { color: var(--gray-500); }
.dark .dark\:text-white { color: var(--color-white); }
.dark .dark\:text-primary-400 { color: var(--primary-400); }

.w-full { width: 100%; }
.overflow-x-auto { overflow-x: auto; }
.inline-flex { display: inline-flex; }
.cursor-pointer { cursor: pointer; }
.opacity-60 { opacity: .6; }
.px-2 { padding-inline: calc(var(--spacing) * 2); }
.py-2 { padding-block: calc(var(--spacing) * 2); }
.ms-1 { margin-inline-start: var(--spacing); }
.me-1 { margin-inline-end: var(--spacing); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.space-y-1 > :not(:last-child) { margin-bottom: var(--spacing); }

.border-t { border-top: 1px solid var(--gray-200); }
.border-gray-200 { border-color: var(--gray-200); }
.dark .dark\:border-white\/10 { border-color: rgb(255 255 255 / .1); }
.divide-y > :not(:last-child) { border-bottom: 1px solid var(--gray-200); }
.divide-gray-200 > :not(:last-child) { border-color: var(--gray-200); }
.dark .dark\:divide-white\/10 > :not(:last-child) { border-color: rgb(255 255 255 / .1); }
.ring-1 { box-shadow: 0 0 0 1px var(--cl-ring, rgb(0 0 0 / .1)); }
.ring-gray-950\/10 { --cl-ring: color-mix(in oklab, var(--gray-950) 10%, transparent); }
.dark .dark\:ring-white\/20 { --cl-ring: rgb(255 255 255 / .2); }

/* ── 2. Tableaux sur téléphone tenu droit : des cartes ──────────────────── */

/*
 * Tables Filament : stackedOnMobile() (AppServiceProvider) en fait déjà des
 * cartes. On range les cellules pour que les actions suivent le premier champ
 * (ou la photo et le nom, quand la première colonne est un visage), et on met
 * l'étiquette à gauche de la valeur pour que la carte reste courte.
 */
@media not all and (min-width: 40rem) {
    /* Une grille : la photo à gauche du nom, chaque autre champ sur toute la largeur. */
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: start; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td { grid-column: 1 / -1; order: 3; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td.fi-ta-selection-cell,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:first-child,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td { order: 1; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(.cl-photo) { grid-column: 1; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(.cl-photo) + td { grid-column: 2; order: 1; align-self: center; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(> .fi-ta-actions) { order: 2; }

    /* L'étiquette à gauche de la valeur, sauf pour le premier champ : c'est le titre de la carte. */
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(> .fi-ta-cell-label) { display: flex; gap: .75rem; align-items: baseline; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td > .fi-ta-cell-label { flex: none; width: 7.5rem; text-align: start; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td > .fi-ta-cell-content { flex: 1; min-width: 0; }
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:first-child > .fi-ta-cell-label,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td > .fi-ta-cell-label,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(.cl-photo) + td > .fi-ta-cell-label,
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(.cl-photo) > .fi-ta-cell-label { display: none; }

    /* Nombres centrés ou à droite dans le tableau : à gauche dans la carte. */
    .fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td :is(.fi-ta-text, .fi-ta-text-item, .fi-ta-icon, .fi-ta-col, .fi-ta-text > ul) { justify-content: flex-start; text-align: start; }
}

/*
 * Tableaux écrits à la main : <table class="cl-table">, un data-label sur chaque
 * cellule, la cellule des boutons en class="cl-actions". Une cellule souvent
 * vide (un badge ou rien) en class="cl-opt" quitte la carte quand elle l'est ;
 * class="cl-hide-phone" la retire toujours de la carte, class="cl-show-phone" ne
 * s'y montre que là. Sur ordinateur, un tableau ordinaire ; sur téléphone, une
 * carte par ligne, l'étiquette à gauche de chaque valeur, les boutons après le
 * premier champ.
 */
.cl-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.cl-table > thead > tr > th { padding: .5rem .6rem; text-align: start; font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--gray-500); }
.dark .cl-table > thead > tr > th { color: var(--gray-400); }
.cl-table > tbody > tr > td,
.cl-table > tfoot > tr > td { padding: .5rem .6rem; vertical-align: top; overflow-wrap: break-word; }
.cl-table > tbody > tr + tr,
.cl-table > tfoot > tr { border-top: 1px solid var(--gray-200); }
.dark .cl-table > tbody > tr + tr,
.dark .cl-table > tfoot > tr { border-color: rgb(255 255 255 / .1); }
.cl-table .cl-num { text-align: end; font-variant-numeric: tabular-nums; }
.cl-table .cl-actions { text-align: end; white-space: nowrap; }
.cl-table .cl-show-phone { display: none; }

@media not all and (min-width: 40rem) {
    .cl-table,
    .cl-table > tbody,
    .cl-table > tfoot { display: block; }
    .cl-table > thead { display: none; }
    /* Une grille de trois : chaque champ sur toute la largeur, les nombres côte à côte. */
    .cl-table > tbody > tr,
    .cl-table > tfoot > tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .75rem; padding-block: .4rem; }
    .cl-table > tbody > tr > td,
    .cl-table > tfoot > tr > td { grid-column: 1 / -1; order: 3; display: block; padding: .2rem .25rem; text-align: start; overflow-wrap: anywhere; }
    .cl-table > tbody > tr > td:first-child,
    .cl-table > tbody > tr > td.cl-hide-phone:first-child + td,
    .cl-table > tfoot > tr > td:first-child { order: 1; }
    .cl-table > tbody > tr > td.cl-actions { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; white-space: normal; }
    /* L'étiquette dans la marge gauche de la cellule, la valeur à droite, quelle qu'elle soit. */
    .cl-table > tbody > tr > td[data-label] { position: relative; padding-inline-start: 8rem; }
    .cl-table > tbody > tr > td[data-label]::before { content: attr(data-label); position: absolute; inset-inline-start: .25rem; top: .2rem; width: 7.25rem; color: var(--gray-500); font-size: var(--text-xs); line-height: var(--text-sm--line-height); font-weight: 400; }
    .dark .cl-table > tbody > tr > td[data-label]::before { color: var(--gray-400); }
    /* Les nombres : l'étiquette au-dessus, trois par ligne. */
    .cl-table > tbody > tr > td.cl-num { grid-column: auto; padding-inline-start: .25rem; text-align: start; }
    .cl-table > tbody > tr > td.cl-num::before { position: static; display: block; width: auto; }
    .cl-table > tbody > tr > td.cl-actions:not(:has(*)),
    .cl-table > tbody > tr > td.cl-opt:not(:has(*)),
    .cl-table .cl-hide-phone { display: none; }
    .cl-table .cl-show-phone { display: inline; }
}

/* ── 3. « À faire » en tête de l'accueil (docs/A-FAIRE.md) ──────────────── */

/*
 * Un bouton par chose en attente, en couleurs claires : fond teinté, bord de la
 * couleur, libellé en gras. L'appel du professeur pendant son cours est plein et
 * plus grand, pour se trouver d'un coup d'œil.
 */
.cl-todo-title { margin: 0 0 .6rem; font-size: var(--text-base); line-height: var(--text-base--line-height); font-weight: 600; }
.cl-todo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .6rem; }
.cl-todo-item {
    --c-300: var(--gray-300); --c-500: var(--gray-500); --c-600: var(--gray-600); --c-700: var(--gray-700);
    display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .7rem .9rem;
    border: 1px solid color-mix(in oklab, var(--c-500) 35%, transparent); border-inline-start-width: 4px; border-inline-start-color: var(--c-500);
    border-radius: .75rem; background: color-mix(in oklab, var(--c-500) 9%, transparent);
    color: inherit; text-decoration: none; transition: background-color .15s;
}
.cl-todo-item:hover, .cl-todo-item:focus-visible { background: color-mix(in oklab, var(--c-500) 16%, transparent); }
.cl-todo-primary { --c-300: var(--primary-300); --c-500: var(--primary-500); --c-600: var(--primary-600); --c-700: var(--primary-700); }
.cl-todo-warning { --c-300: var(--warning-300); --c-500: var(--warning-500); --c-600: var(--warning-600); --c-700: var(--warning-700); }
.cl-todo-danger { --c-300: var(--danger-300); --c-500: var(--danger-500); --c-600: var(--danger-600); --c-700: var(--danger-700); }
.cl-todo-info { --c-300: var(--info-300); --c-500: var(--info-500); --c-600: var(--info-600); --c-700: var(--info-700); }
.cl-todo-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--c-600); }
.cl-todo-go { flex: none; width: 1.1rem; height: 1.1rem; margin-inline-start: auto; color: var(--c-500); }
.cl-todo-text { display: flex; flex-direction: column; min-width: 0; }
.cl-todo-label { font-weight: 600; color: var(--c-700); overflow-wrap: anywhere; }
.cl-todo-detail { font-size: var(--text-sm); line-height: var(--text-sm--line-height); color: var(--gray-600); }
.dark .cl-todo-label { color: var(--c-300); }
.dark .cl-todo-icon { color: var(--c-300); }
.dark .cl-todo-detail { color: var(--gray-400); }

.cl-todo-big { grid-column: 1 / -1; min-height: 4rem; padding: 1rem 1.1rem; border-color: var(--c-600); background: var(--c-600); }
.cl-todo-big:hover, .cl-todo-big:focus-visible { background: var(--c-700); }
.cl-todo-big .cl-todo-label, .dark .cl-todo-big .cl-todo-label { color: #fff; font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.cl-todo-big .cl-todo-detail, .dark .cl-todo-big .cl-todo-detail { color: rgb(255 255 255 / .85); }
.cl-todo-big .cl-todo-icon, .cl-todo-big .cl-todo-go, .dark .cl-todo-big .cl-todo-icon { color: #fff; width: 1.75rem; height: 1.75rem; }

.cl-todo { margin: 0; }