/**
 * Mary — Patches responsive mobile (mai 2026)
 *
 * Audit UX mobile a identifie 5 problemes concrets sur 360-480px :
 *   1. Stats bars 4-col qui debordent (sales, crm, pipeline)
 *   2. Padding 40-48px lateral qui ne descend pas en < 768px
 *   3. Touch targets 26-28px (boutons Editer/Supprimer dans listes)
 *   4. Formulaires CRM `.nc-row-3` qui restent en 3 colonnes
 *   5. Bouton recherche mobile-top-bar 36px (sous WCAG 44px)
 *
 * Charge en DERNIER dans base_dashbord.html pour garantir l'override
 * des regles app-specific (purchasing-v2.css, finance-v3.css, etc.).
 */

/* ============================================================
   1. STATS BARS — repli en 2 colonnes sur mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Sales (devis, factures, commandes, abonnements, contrats) */
  .ld-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* CRM contacts */
  .cl-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* CRM relations (page unifiee) */
  .rl-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Pipeline (kanban) */
  .pp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Purchasing */
  .pu-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Finance hero */
  .fn-hero__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Banking */
  .bk-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Tasks */
  .tk-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Saas dashboard generique */
  .v2-status,
  .resume-stats,
  .pulse-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Sur les tres petits ecrans (< 380px), une seule colonne */
@media (max-width: 380px) {
  .ld-stats,
  .cl-stats,
  .rl-stats,
  .pp-stats,
  .pu-stats,
  .bk-stats,
  .tk-stats {
    grid-template-columns: 1fr;
  }
  .fn-hero__row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   2. PADDING LATERAL — descend a 16px sur mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Pages full-width avec padding desktop 32-48px lateral */
  .ld-page,
  .nc-page,
  .a-page,
  .o-page,
  .cl-page,
  .rl-page,
  .pu-content,
  .fn-content,
  .bk-content,
  .ag-content,
  .tk-page,
  .objectifs-container,
  .alertes-container,
  .pref-container,
  .dashboard-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}



/* ============================================================
   3. TOUCH TARGETS — minimum 44x44 pour tous les boutons d'action
   ============================================================ */
@media (max-width: 768px) {
  /* Boutons icon-only dans les listes (Editer, Supprimer, Voir, etc.) */
  .ld-icon-btn,
  .cl-row-action,
  .rl-row-action,
  .pu-row-action,
  .fn-btn--icon,
  .bk-btn--icon,
  .ld-row-actions a,
  .ld-row-actions button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Bouton recherche mobile-top-bar (etait 36px) */
  .mobile-top-bar__search,
  .mobile-top-bar__notif,
  .mobile-top-bar__profile {
    min-width: 44px;
    min-height: 44px;
  }

  /* Boutons primary/ghost dans les pages — assurer 44px */
  .ld-btn,
  .pu-btn,
  .fn-btn,
  .bk-btn,
  .nc-btn {
    min-height: 40px;
  }
}


/* ============================================================
   4. FORMULAIRES MULTI-COLONNES → mono-colonne sur mobile
   ============================================================ */
@media (max-width: 768px) {
  /* CRM nouveau contact / opportunite / lead */
  .nc-row,
  .nc-row-2,
  .nc-row-3,
  .nc-row-4,
  .of-row,
  .of-row-2,
  .of-row-3,
  .cf-row-2,
  .cf-row-3,
  /* Storefront management */
  .pref-row,
  .pref-row-2,
  /* Sales nouveau devis/facture/commande */
  .form-row,
  .form-row-2,
  .form-row-3,
  .ld-form-row,
  .nc-grid-2,
  .nc-grid-3,
  /* Banking, Finance, Purchasing forms */
  .pu-row,
  .pu-row-2,
  .fn-form-row,
  .fn-form-row-2,
  .bk-row,
  .bk-row-2 {
    grid-template-columns: 1fr;
  }

  /* Forms layout sales : colonne secondaire (340-380px) sous la principale */
  .form-layout,
  .nc-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   5. LIGNES TABLEAU (.fn-row / .ld-row / .pu-row / .rl-row)
   Quand la grille est figee a `1.5fr 130px 110px ...` desktop,
   on bascule en flex-column sur mobile pour ne pas casser.
   ============================================================ */
@media (max-width: 768px) {
  .ld-row,
  .fn-row,
  .pu-row,
  .rl-row,
  .cl-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
  }
  /* Header de tableau cache sur mobile (donnees auto-explicatives en stack) */
  .ld-row--header,
  .fn-row--header,
  .pu-row--header,
  .rl-row--header,
  .cl-row--header {
    display: none;
  }
  /* Total row aussi en colonne */
  .ld-row--total,
  .fn-row--total,
  .pu-row--total {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* ============================================================
   6. HERO BLOCKS — reduire la hauteur du header de page
   ============================================================ */
@media (max-width: 768px) {
  .ld-hero,
  .fn-head,
  .pu-head,
  .ag-head,
  .nc-page-header,
  .objectifs-header,
  .alertes-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
  }
  .ld-hero h1,
  .fn-head h1,
  .pu-head h1 {
    font-size: 1.25rem;
  }
}


/* ============================================================
   7. RAIL-DRAWER MOBILE — refonte complete (audit 2026-05-09)

   Le sidebar-v2.css ne stylait correctement que ~50% des selecteurs
   du drawer en mobile : 17 selecteurs (modules, chevrons, pin star,
   sub-pages, hint, close...) avaient leur taille/layout definis
   uniquement dans @media (min-width: 769px). En mobile, ces elements
   prenaient leur taille naturelle = grosse croix, icones geantes,
   texte sans hierarchie.

   Cette section reecrit le drawer mobile de A a Z. Elle utilise
   `` partout pour gagner sur n'importe quelle regle
   app-specific qui chargerait apres dark-mode.css.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- PANEL ---- */
  /* Top sheet : le drawer descend du HAUT (comme la caisse retail mobile),
     ce qui libère le bas de l'écran et évite tout conflit avec le clavier.
     Ce fichier est chargé APRÈS le bundle dist/ : à spécificité égale, l'ordre
     source suffit à surcharger le positionnement bottom-sheet de base — pas
     besoin de. L'état ouvert (.rail-drawer.is-open { translateY(0) })
     vient du bundle (spécificité supérieure) et fonctionne tel quel. */
  .rail-drawer {
    width: 100vw;
    max-width: 100vw;
    height: 80vh;
    max-height: 80vh;
    top: 0;
    bottom: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    transform: translateY(-100%);
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Drag handle (::before pseudo-element) — deja stylee en sidebar-v2.
     Top sheet : la poignee passe EN BAS (order 99) comme affordance
     "tirer pour fermer", coherent avec un drawer qui descend du haut. */
  .rail-drawer::before {
    order: 99;
    width: 36px;
    height: 4px;
    margin: 6px auto calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  /* ---- HEADER (search + close inline ghost) ---- */
  .rail-drawer__head {
    /* padding-right reserve la place du bouton close (X) qui est
       positionne en absolute. Cela evite que la search bar passe en
       dessous. La drag handle est ::before, sur sa propre ligne. */
    padding: 8px 56px 12px 16px;
    border-bottom: 1px solid var(--sb-border, rgba(0,0,0,0.06));
    flex-shrink: 0;
    position: relative;
  }
  .rail-drawer__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--sb-bg-soft, rgba(0,0,0,0.04));
    border-radius: 12px;
    min-height: 44px;
  }
  .rail-drawer__search svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--sb-text-3, #86868b);
  }
  .rail-drawer__search input {
    font-size: 16px;  /* prevent zoom auto Safari iOS */
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    min-width: 0;
  }
  .rail-drawer__search kbd { display: none; }

  /* Close button — ghost icon, aligne avec la search bar, sans bord
     ni fond (pattern iOS clean). Reste cliquable en 44x44 (touch
     target invisible : padding interne, icone visuelle 18x18). */
  .rail-drawer__close {
    position: absolute;
    top: 12px;        /* sous la drag handle (8+4) */
    right: 8px;
    width: 44px;       /* touch target WCAG */
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--sb-text-3, #86868b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .rail-drawer__close:active {
    background: var(--sb-bg-soft, rgba(0,0,0,0.06));
    color: var(--sb-text, #1a1a1a);
  }
  .rail-drawer__close svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
  }

  /* ---- QUICK ACTIONS (4 boutons : Facture, Devis, Contact, Caisse) ---- */
  .rail-drawer__quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sb-border, rgba(0,0,0,0.06));
    flex-shrink: 0;
  }
  .rail-drawer__quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    background: var(--sb-bg-soft, rgba(0,0,0,0.04));
    border: 1px solid var(--sb-border, rgba(0,0,0,0.06));
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--sb-text-2, #5a5a5e);
    text-decoration: none;
    min-height: 56px;
  }
  .rail-drawer__quick-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--sb-mary, #00a86b);
  }

  /* ---- BODY (scrollable) ---- */
  .rail-drawer__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px 24px;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- SECTION ---- */
  .rail-drawer__section {
    margin-bottom: 12px;
  }
  .rail-drawer__section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--sb-text-3, #86868b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 8px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .rail-drawer__section-count {
    font-size: 11px;
    color: var(--sb-text-quiet, #b0b0b0);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }

  /* ---- MODULE ROW ---- */
  .rail-drawer__module {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px 0 0;
    border-radius: 10px;
    position: relative;
    margin-bottom: 2px;
  }
  .rail-drawer__module-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    text-decoration: none;
    color: var(--sb-text, #1a1a1a);
    font-size: 14px;
    min-width: 0;
    min-height: 52px;
  }
  .rail-drawer__module-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text-2, #5a5a5e);
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--sb-bg-soft, rgba(0,0,0,0.04));
  }
  .rail-drawer__module-icon svg {
    width: 20px;
    height: 20px;
  }
  .rail-drawer__module-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .rail-drawer__module-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--sb-text, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rail-drawer__module-sub {
    font-size: 11.5px;
    color: var(--sb-text-3, #86868b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rail-drawer__chev {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text-3, #86868b);
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .rail-drawer__chev svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.25;
  }
  .rail-drawer__module.is-expanded .rail-drawer__chev {
    transform: rotate(90deg);
    color: var(--sb-mary-dark, #047857);
  }
  .rail-drawer__module.is-expanded {
    background: var(--sb-bg-soft, rgba(0,0,0,0.04));
  }

  /* ---- PIN STAR (visible toujours sur mobile, pas de hover) ---- */
  .rail-pin-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--sb-text-quiet, #b0b0b0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1;  /* desktop avait opacity:0 + hover→1, pas de hover sur mobile */
    padding: 0;
    font-family: inherit;
  }
  .rail-pin-btn.is-pinned {
    color: var(--sb-mary, #00a86b);
  }
  .rail-pin-btn svg {
    width: 16px;
    height: 16px;
  }

  /* ---- SUB-PAGES (quand un module est etendu) ---- */
  .rail-drawer__subs {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    margin-left: 24px;
    border-left: 2px solid var(--sb-border, rgba(0,0,0,0.06));
    padding-left: 4px;
  }
  .rail-drawer__module.is-expanded + .rail-drawer__subs {
    max-height: 600px;
  }
  .rail-drawer__sub {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px 0 0;
    border-radius: 8px;
    position: relative;
  }
  .rail-drawer__sub-link {
    flex: 1;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--sb-text-2, #5a5a5e);
    font-size: 13.5px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .rail-drawer__sub-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- ENTITES (resultats search + recents) ---- */
  .rail-drawer__entity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--sb-text, #1a1a1a);
    font-size: 14px;
    min-height: 52px;
  }
  .rail-drawer__entity-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-bg-soft, rgba(0,0,0,0.04));
    color: var(--sb-text-2, #5a5a5e);
    flex-shrink: 0;
  }
  .rail-drawer__entity-icon svg {
    width: 18px;
    height: 18px;
  }
  .rail-drawer__entity-main { flex: 1; min-width: 0; }
  .rail-drawer__entity-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rail-drawer__entity-meta {
    font-size: 12px;
    color: var(--sb-text-3, #86868b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
  }
  .rail-drawer__entity-time,
  .rail-drawer__entity-kind {
    font-size: 11px;
    color: var(--sb-text-quiet, #b0b0b0);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ---- LOADING / EMPTY ---- */
  .rail-drawer__loading {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .rail-drawer__skeleton {
    height: 52px;
    border-radius: 10px;
  }
  .rail-drawer__empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--sb-text-3, #86868b);
    font-size: 13px;
  }
  .rail-drawer__empty-icon {
    display: inline-block;
    color: var(--sb-text-quiet, #b0b0b0);
    margin-bottom: 12px;
  }
  .rail-drawer__empty-icon svg {
    width: 32px;
    height: 32px;
  }
  .rail-drawer__empty-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--sb-text-2, #5a5a5e);
    margin: 8px 0 4px;
  }
  .rail-drawer__empty-hint {
    font-size: 12.5px;
    color: var(--sb-text-3, #86868b);
  }

  /* ---- HINT (kbd footer) — pas pertinent en mobile ---- */
  .rail-drawer__hint { display: none; }

  /* ---- BACKDROP ---- */
  .rail-drawer-backdrop {
    background: rgba(20, 20, 22, 0.55);
  }

  /* ---- DEFENSE GLOBALE : aucun SVG du drawer ne peut exceder 36x36 ---- */
  .rail-drawer svg {
    max-width: 36px;
    max-height: 36px;
  }


  /* ---- CREATE-SHEET (bottom sheet alternatif, si re-utilise) ---- */
  .create-sheet svg { max-width: 32px; max-height: 32px; }
  .create-sheet__item-icon svg {
    width: 22px;
    height: 22px;
  }
  .create-sheet__close svg,
  [data-create-sheet="close"] svg {
    max-width: 16px;
    max-height: 16px;
  }
}


/* ============================================================
   8. INPUTS / SELECTS — taille de police >= 16px pour eviter
   le zoom auto Safari iOS sur focus
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px;
  }
}


/* ============================================================
   9. SAFE AREA — clearance pour la tab-bar (uniquement quand présente)
   ============================================================ */
@media (max-width: 768px) {
  body:has(.tab-bar) {
    /* Marge bas pour la tab-bar fixed (60px + safe-area).
       Scopé via :has() pour ne pas impacter les pages qui n'ont pas
       de tab-bar (caisse mobile, lecteur de tickets, etc.). */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}


/* ============================================================
   10. EXTENSION : apps moins centrales (agenda/catalog/mail/
   tenant/tpe/accountant/storefront/pipeline/opportunites)
   Meme philosophie : grilles → 1 colonne, padding lateral 16px,
   touch targets 44x44, hero stack vertical.
   ============================================================ */
@media (max-width: 768px) {
  /* Pages globales — 16px padding lateral */
  .de-page,
  .ag-page,
  .ag-uni-page,
  .catalog-page,
  .mary-page,
  .tpe-page,
  .acc-page,
  .cpt-page,
  .of-page,
  .pl-page,
  .sf-page,
  .finalize-page,
  .help-content,
  .module-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Grilles → 1 col */
  .de-grid,
  .ag-grid,
  .ag-uni-grid,
  .tpe-grid,
  .acc-grid,
  .cpt-grid,
  .of-grid,
  .pl-grid,
  .sf-grid,
  .catalog-grid,
  .card-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Hero / heads — stack vertical */
  .de-head,
  .ag-uni-hero,
  .tpe-head,
  .tpe-hero,
  .tpe-dt-head,
  .tpe-dt-hero,
  .tpe-form-head,
  .acc-head,
  .acc-hero,
  .cpt-head,
  .of-head,
  .pl-head,
  .sf-head,
  .mary-page-head,
  .mary-page-header-content,
  .catalog-page-head,
  .finalize-head,
  .compose-head,
  .conversation-head,
  .email-head,
  .email-list-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
  }
  .de-head h1,
  .ag-uni-hero h1,
  .tpe-head h1,
  .tpe-hero h1,
  .acc-head h1,
  .acc-hero h1,
  .cpt-head h1,
  .mary-page-head h1,
  .catalog-page-head h1 {
    font-size: 1.25rem;
  }

  /* Lignes tableau secondaires */
  .de-cat-row,
  .acc-row,
  .acc-bar-row,
  .cpt-row,
  .tpe-evt-row,
  .tpe-form-row,
  .catalog-produit-row,
  .email-header-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
  }

  /* Form rows multi-col */
  .acc-form-row,
  .acc-form-row-2,
  .acc-form-row-3,
  .cpt-form-row,
  .cpt-form-row-2,
  .tpe-form-grid,
  .tpe-form-grid-2,
  .of-form-row,
  .pl-form-row,
  .sf-form-row,
  .sf-form-row-2,
  .sf-form-row-3,
  .catalog-form-row,
  .catalog-form-row-2 {
    grid-template-columns: 1fr;
  }

  /* Touch targets pour ces apps */
  .de-icon-btn,
  .ag-icon-btn,
  .ag-uni-icon-btn,
  .tpe-icon-btn,
  .acc-icon-btn,
  .cpt-icon-btn,
  .of-icon-btn,
  .pl-icon-btn,
  .sf-icon-btn,
  .catalog-icon-btn,
  .mary-icon-btn,
  .email-action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Ecrans tres etroits (< 380px) */
@media (max-width: 380px) {
  .card-stats {
    grid-template-columns: 1fr;
  }
}