/*
 * Téléphone (moins de 768 px) : le back-office se resserre, sans rien changer à partir de 768 px.
 * Chargée par le gabarit master après les feuilles des pages (index-pages.css) : hors couche, comme la feuille Vristo
 * (style.css) qu'elle doit battre ; pas d'utilitaire Tailwind neuf (app.css est compilé dans l'image).
 */
@media (max-width: 767px) {
    /* Moins de marge autour de la page. */
    .main-content > main {
        padding: 1rem;
    }

    #page-main > .pt-5 {
        padding-top: 0.75rem;
    }

    /* En-tête de page (x-page-header) : date masquée, titre plus petit, boutons sur la ligne du titre s'ils tiennent,
       description dessous. */
    .lw-page-header {
        align-items: center;
        gap: 0.375rem 0.75rem;
    }

    .lw-page-header > :first-child {
        display: contents;
    }

    .lw-page-header > :first-child > * {
        flex-basis: 100%;
        margin-top: 0;
    }

    .lw-page-header .lw-page-date {
        display: none;
    }

    .lw-page-header > :first-child > h1 {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .lw-page-header h1 ~ * {
        order: 3;
    }

    .lw-page-header > :last-child:not(:first-child) {
        order: 2;
        gap: 0.5rem;
    }

    .lw-page-header .btn {
        padding: 0.4375rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Création (x-buttons.add) et exports comptables : l'icône seule, le libellé (lw-btn-label) reste lu par les lecteurs d'écran. */
    .lw-page-header .btn:has(> .lw-btn-label) {
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0;
    }

    .lw-page-header .lw-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* Filtres posés dans l'en-tête (période, caisse…) : le texte d'un select ne passe pas sous sa flèche. */
    .lw-page-header .form-select {
        padding-inline: 0.625rem 1.75rem;
        background-position: right 0.375rem center;
        text-overflow: ellipsis;
    }

    /* Petits boutons (filtres du support, « Tester la connexion »…) : 36 px de haut au doigt. */
    #page-main .btn-sm {
        min-height: 2.25rem;
    }

    /* Sélecteur de mois (x-month-nav) : flèches, mois et « Tous les mois » sur une ligne, le mois se rétrécit. */
    .lw-month-nav {
        flex-wrap: nowrap;
        gap: 0.375rem;
    }

    .lw-month-nav > form {
        flex: 1 1 0;
        min-width: 0;
    }

    .lw-month-nav input[type='month'] {
        width: 100% !important;
        min-width: 0;
        padding-inline: 0.5rem;
    }

    .lw-month-nav > .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .lw-month-nav > .btn:not(.px-2) {
        padding-inline: 0.625rem;
        font-size: 0.8125rem;
    }

    /* Onglets (.lw-tabs, barres role="tablist" à classe lw-tablist) : à la ligne au lieu de défiler, aucun n'est coupé par le bord. */
    .lw-tabs,
    .lw-tablist {
        flex-wrap: wrap;
        overflow: visible;
        white-space: normal;
    }

    .lw-tab,
    .lw-tablist [role='tab'] {
        min-height: 40px;
        padding: 0.625rem;
    }

    .lw-tab > svg,
    .lw-tablist [role='tab'] > svg {
        display: none;
    }

    /* Barre de filtres : deux filtres par ligne ; la recherche texte et les boutons sur toute la largeur. */
    .lw-index-filter-panel {
        padding: 0.75rem;
    }

    .lw-index-filters form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem 0.75rem;
    }

    .lw-index-filters form > * {
        min-width: 0;
    }

    .lw-index-filters form > :is(div:has(input[type='text']), div:has(input[type='search']), div:has(.btn), p) {
        grid-column: 1 / -1;
    }

    /* Un select se rétrécit (son texte se coupe) au lieu de prendre la largeur de sa plus longue option. */
    .lw-index-filters .form-select,
    .lw-index-filters select {
        padding-inline: 0.625rem 1.75rem;
        background-position: right 0.375rem center;
        text-overflow: ellipsis;
    }

    .lw-index-filters input[type='date'],
    .lw-index-filters input[type='month'] {
        padding-inline: 0.625rem;
    }

    /* Grilles de chiffres (x-stat-card) : deux cartes par ligne, la valeur entière à la ligne plutôt que coupée. */
    .grid:has(> .lw-stat-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .lw-stat-card {
        padding: 0.75rem;
    }

    .lw-stat-card :is(dt, dd, p) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .lw-stat-card dt {
        letter-spacing: 0.06em;
    }

    .lw-stat-card dd {
        margin-top: 0.25rem;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    /* Panneau du tableau d'une page index : Excel et PDF en icônes sur la ligne de la recherche. */
    .lw-index-panel {
        padding: 0.75rem;
    }

    .lw-index-panel > .lw-export-floating {
        position: absolute;
        top: 0.75rem;
        inset-inline-start: 0.75rem;
        z-index: 1;
    }

    .lw-index-panel > .lw-export-floating > div {
        margin-bottom: 0;
    }

    .lw-index-panel > .lw-export-floating .btn {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
    }

    .lw-export-floating .lw-export-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .lw-index-panel:has(> .lw-export-floating) .dataTable-top {
        padding-inline-start: 5.75rem;
    }

    .lw-index-panel .dataTable-top {
        margin-bottom: 0.75rem;
    }

    .lw-index-panel .dataTable-search {
        flex: 1 1 auto;
    }

    .lw-index-panel .dataTable-search .dataTable-input {
        width: 100%;
        min-height: 2.5rem;
    }

    /* Le tableau seul défile (pas son pied) ; pied : total et nombre par page sur une ligne, pages dessous, à la ligne. */
    .lw-index-table-scroll {
        overflow: visible;
    }

    .dataTable-container {
        margin-bottom: 0.75rem;
    }

    .dataTable-bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.8125rem;
    }

    .dataTable-bottom .dataTable-pagination {
        flex-basis: 100%;
        margin-inline: 0;
    }

    .dataTable-pagination ul {
        flex-wrap: wrap;
        gap: 0.25rem 0;
    }

    /*
     * Tableaux en blocs (table[data-stack], posé par window.stackTable de bulk-utils.js) : le titre en tête
     * (data-cell="main"), les autres colonnes à la suite avec leur intitulé (data-label), les actions au bout.
     * Rien n'est masqué, sauf une colonne qui répète le titre (data-cell="dup"). L'en-tête ne garde que « Tout sélectionner ».
     */
    table[data-stack] thead tr {
        display: flex;
    }

    table[data-stack] thead th {
        display: none;
    }

    table[data-stack] thead th[data-cell='check'] {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: auto !important;
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    table[data-stack] thead th[data-cell='check']::after {
        content: attr(data-label);
    }

    /* Intitulé qui nomme tout le tableau (th[data-caption] : « Charges », « Actif ») : gardé en bandeau au-dessus des blocs. */
    table[data-stack] thead th[data-caption] {
        display: block;
        flex: 1 1 auto;
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-align: start;
        text-transform: uppercase;
    }

    /* Pas de case (pas de colonne de sélection, ou liste vide) ni de bandeau : l'en-tête disparaît. */
    table[data-stack]:not(:has(tbody [data-cell='check'], thead [data-caption])) thead {
        display: none;
    }

    table[data-stack],
    table[data-stack] :is(thead, tbody, tfoot) {
        display: block;
        width: 100%;
    }

    /* Lignes du corps et du pied (total), cellules td ou th. */
    table[data-stack] :is(tbody, tfoot) > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 1rem;
        padding: 0.75rem;
    }

    /* Retour à la ligne après le titre (et la case de sélection). */
    table[data-stack] :is(tbody, tfoot) > tr::after {
        content: '';
        order: -1;
        flex-basis: 100%;
    }

    table[data-stack] :is(tbody, tfoot) > tr > :is(td, th) {
        display: block;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
        margin-top: 0.375rem;
        padding: 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: start;
    }

    table[data-stack] :is(tbody, tfoot) > tr > :is(td, th):is(:empty, [data-cell='empty'], [data-cell='dup']) {
        display: none;
    }

    /* Ligne vide (« Aucun résultat ») ou intertitre : une seule cellule sur toute la largeur. */
    table[data-stack] :is(tbody, tfoot) > tr > :is(td, th)[colspan] {
        flex-basis: 100%;
        margin-top: 0;
    }

    table[data-stack] :is(tbody, tfoot) > tr > [data-cell='check'] {
        order: -3;
        display: flex;
        align-items: center;
        min-height: 2rem;
        margin: 0;
    }

    table[data-stack] :is(tbody, tfoot) > tr > [data-cell='main'] {
        order: -2;
        flex: 1 1 0;
        margin-top: 0;
        font-weight: 600;
    }

    /* Titre sur deux colonnes (numéro de compte ou réf. puis intitulé) : le numéro garde sa largeur, l'intitulé prend le reste,
       ou passe dessous s'il lui reste moins de 10rem (réf. longue d'une note : « 2315, 2325 »). */
    table[data-stack] :is(tbody, tfoot) > tr > [data-cell='main']:has(~ [data-cell='main']) {
        flex: 0 0 auto;
    }

    table[data-stack] :is(tbody, tfoot) > tr > [data-cell='main'] ~ [data-cell='main'] {
        flex-basis: 10rem;
    }

    /* Actions au bout du bloc, plus collées au bord droit comme dans le tableau qui défile (master, sous 1024 px). */
    table[data-stack] :is(tbody, tfoot) > tr > [data-cell='actions'] {
        order: 1;
        align-self: flex-end;
        position: static;
        margin-inline-start: auto;
        background: none;
        box-shadow: none;
    }

    table[data-stack] :is(tbody, tfoot) > tr > [data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1rem;
        text-transform: uppercase;
        color: #888ea8;
    }

    /* Le tableau en blocs tient dans l'écran : son conteneur ne défile plus (s'il ne contient que des tableaux en blocs). */
    .dataTable-container:has(> table[data-stack]),
    :is(.overflow-x-auto, .table-responsive, .lw-ledger-table-wrap):has(table[data-stack]):not(:has(table:not([data-stack]))) {
        overflow: visible;
    }

    /* États comptables (balance, grand livre, états SYSCOHADA) : montants, réf. et notes sous leur intitulé, plus à droite ni
       au centre ; une ligne de total garde son fond sur tout le bloc. */
    table[data-stack] :is(.num, .fs-num, .fs-ref, .fs-note, .fs-sign, .fs-mark) {
        white-space: normal;
        text-align: start;
    }

    /* Les états SYSCOHADA sont en 11 px (taille du PDF) : 13 px au doigt. */
    table[data-stack].fs-table {
        font-size: 0.8125rem;
    }

    /* Saisie d'une note ou d'un flux : deux champs par ligne (M et F côte à côte), chacun sur toute sa case. */
    table[data-stack].fs-table :is(tbody, tfoot) > tr > td:has(> :is(.fs-cell, .fs-input, .fs-text)) {
        display: flex;
        flex: 1 1 40%;
        flex-direction: column;
        align-self: stretch;
    }

    /* Champ au bas de sa case : deux champs voisins restent alignés quand un seul intitulé passe sur deux lignes. */
    table[data-stack].fs-table :is(.fs-cell, .fs-input) {
        width: 100%;
        min-width: 0;
        margin-top: auto;
    }

    table[data-stack] :is(tbody, tfoot) > tr:is(.fs-total, .fs-grand, .fs-heading) > :is(td, th),
    table[data-stack].lw-ledger-table tfoot td {
        background: none;
    }

    table[data-stack].fs-table tr.fs-total {
        background: #f1f5f9;
    }

    table[data-stack].fs-table tr.fs-grand {
        background: #cbd5e1;
    }

    .dark table[data-stack].fs-table tr.fs-total {
        background: #0e1726;
    }

    .dark table[data-stack].fs-table tr.fs-grand {
        background: #1b2e4b;
    }

    table[data-stack].fs-table tr.fs-heading {
        background: #f8fafc;
    }

    .dark table[data-stack].fs-table tr.fs-heading {
        background: #0e1726;
    }

    /* Bilan SYSCOHADA (actif puis passif) et tables des codes de la note 36 : l'une sous l'autre au lieu de côte à côte. */
    .fs-grid {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        min-width: 0;
        margin: 0;
    }

    .fs-col {
        display: block;
        width: auto;
    }

    /* En-tête d'un état (entreprise, exercice) : les deux colonnes l'une sous l'autre. */
    .fs-head td {
        display: block;
    }

    .fs-head td.fs-right {
        margin-top: 0.5rem;
        text-align: start;
    }

    /* Cases à cocher plus grandes, au doigt. */
    table input.bulk-row-cb,
    table input#bulk-select-all {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Actions de ligne : une cible de 40 px au doigt pour chaque icône, liens comme boutons. */
@media (max-width: 767px), (pointer: coarse) {
    .row-actions :is(a, button) {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}