/* =========================================================
   MOBILE-CARDS.CSS — FAQ / Carnet / Izicod / MyThesau sur mobile (≤ 767px)
   Les DataTables passent d'un tableau à une colonne unique : chaque ligne
   devient une fiche qui porte toutes ses informations, libellées par le nom
   de la colonne (attribut data-dash-column posé par Dash). Les filtres
   restent au-dessus (inchangés). Les largeurs inline de style_cell_conditional
   sont neutralisées (!important : composant tiers).
   ========================================================= */

@media (max-width: 767px){
  /* Pages en fiches : ni carte de page ni cadre de tableau autour des fiches
     (une carte dans une carte dessine des lignes continues sur les côtés) */
  :is(#page3-content, #page5-content, #thesaurus-content).card{
    padding-inline: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Le cadre du tableau (bordure + ombre, app.css) entourerait toute la pile de fiches */
  #faq-results,
  #izicod-results,
  #thesaurus-table{
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) .dash-spreadsheet-container,
  :is(#faq-results, #izicod-results, #thesaurus-table) .dash-spreadsheet-inner{
    overflow: visible !important;
    max-height: none !important;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) table{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border: 0 !important;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) tbody{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* En-têtes de colonnes : remplacés par les libellés de chaque champ */
  :is(#faq-results, #izicod-results, #thesaurus-table) tr:has(> th),
  :is(#faq-results, #izicod-results, #thesaurus-table) .dash-filter{
    display: none !important;
  }

  /* Fiche */
  :is(#faq-results, #izicod-results, #thesaurus-table) tr:has(> td){
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    padding: 12px 14px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 10px);
    background: var(--bg-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-primary) 6%, transparent);
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Champ : pleine largeur, libellé au-dessus */
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell{
    display: block !important;
    flex: 1 1 100%;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  /* DataTable fixe une hauteur nulle à la valeur hors mise en page tableau */
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell .dash-cell-value{
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell p{ margin: 0; }
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell + td.dash-cell:not([data-dash-column="Like"], [data-dash-column="Actions"]){
    border-top: 1px solid var(--border-color) !important;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell::before{
    content: attr(data-dash-column);
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  /* Champs vides : pas de libellé orphelin */
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell:has(.dash-cell-value:empty),
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell:has(.cell-markdown:empty){
    display: none !important;
  }

  /* Identifiant de la fiche (Code / Questions) : en tête, sans libellé */
  :is(#izicod-results, #thesaurus-table) td[data-dash-column="Code"],
  #faq-results td[data-dash-column="Questions"]{
    order: -2;
    padding-top: 0 !important;
    font-weight: 650 !important;
    color: var(--text-primary);
  }
  :is(#izicod-results, #thesaurus-table) td[data-dash-column="Code"]::before,
  #faq-results td[data-dash-column="Questions"]::before{ display: none; }
  :is(#izicod-results, #thesaurus-table) td[data-dash-column="Code"] + td.dash-cell,
  #faq-results td[data-dash-column="Questions"] + td.dash-cell{ border-top: 0 !important; }

  /* Actions et « J'aime » : rangée d'icônes en pied de fiche */
  :is(#faq-results, #izicod-results, #thesaurus-table) td[data-dash-column="Like"],
  :is(#faq-results, #izicod-results, #thesaurus-table) td[data-dash-column="Actions"]{
    order: 10;
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 4px 0 0 !important;
    border-top: 0 !important;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) td[data-dash-column="Actions"]{
    margin-left: auto;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) td[data-dash-column="Like"]::before,
  :is(#faq-results, #izicod-results, #thesaurus-table) td[data-dash-column="Actions"]::before{
    display: none;
  }
  :is(#faq-results, #izicod-results, #thesaurus-table) td[data-dash-column="Actions"] :is(a, button, span[title]){
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Cellule active / sélectionnée : pas de cadre de tableur sur une fiche */
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell.focused,
  :is(#faq-results, #izicod-results, #thesaurus-table) td.dash-cell.cell--selected{
    outline: none !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   PCS Builder — carte du haut sur mobile / tablette (≤ 1024px)
   Ligne 1 : code + réinitialiser · ligne 2 : description entière (plus de
   hauteur fixe d'un champ, qui coupait les libellés longs) · ligne 3 : actions.
   ========================================================= */
@media (max-width: 1024px){
  .pcs-hero-card{ padding: 12px; }
  .pcs-hero-card .pcs-hero-result{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "code   code   code   reset"
      "desc   desc   desc   desc"
      "status copy   list   thes";
    align-items: center;
    gap: 10px 8px;
  }
  .pcs-hero-card .pcs-hero-result-actions{ display: contents; }

  .pcs-hero-card .pcs-code-row--inline{ grid-area: code; width: auto; min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
  .pcs-hero-card .pcs-code-input{
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 44px;
    font-size: 1.05rem;
  }
  .pcs-hero-card .pcs-code-error:empty{ display: none; }
  .pcs-hero-card #pcs-reset-all{ grid-area: reset; }

  .pcs-hero-card .pcs-description-box.pcs-description-box--inline{
    grid-area: desc;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    display: block;
    padding: 10px 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .pcs-hero-card .pcs-description-box--inline:empty{ display: none; }

  .pcs-hero-card #pcs-copy-status,
  .pcs-hero-card #pcs-checklist-status{ grid-area: status; justify-self: start; }
  .pcs-hero-card #pcs-copy{ grid-area: copy; }
  .pcs-hero-card #pcs-codelist-add{ grid-area: list; }
  .pcs-hero-card #pcs-thesaurus-add{ grid-area: thes; }

  .pcs-hero-card #pcs-copy,
  .pcs-hero-card #pcs-codelist-add,
  .pcs-hero-card #pcs-thesaurus-add,
  .pcs-hero-card #pcs-reset-all{
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pcs-hero-card #pcs-copy{
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-surface);
    cursor: pointer;
  }
}