/* =========================
   static/facturation/app.css
   FacturaPro — Design System (revamp)
   ========================= */

/* -------------------------------------------------------
   0) VARIABLES & THÈME
   ------------------------------------------------------- */

/* Ponts pour composants qui attendent --card-bg/--card-border */
:root{
  --card-bg: var(--card);
  --card-border: var(--hair);
  color-scheme: light;
}

/* Palette & tokens */
:root{
  --primary:#4361ee; --primary-600:#3b5bfe;
  --secondary:#3a0ca3;
  --success:#2ec4b6; --success-weak:rgba(46,196,182,.15);
  --warning:#f59f00; --warning-weak:rgba(245,159,0,.15);
  --danger:#f72585;  --danger-weak:rgba(247,37,133,.15);
  --muted:#64748b;

  --bg:#f5f7fb; --card:#ffffff; --text:#0f172a; --hair:#e9edf5;
  --chip:#eef2ff;

  --radius:14px;
  --shadow:0 12px 30px rgba(2,8,23,.08);
  --transition:.25s cubic-bezier(.2,.8,.2,1);

  --sidebar-w:304px;
  --header-h:70px;
  --focus:#99b0ff;
  --layout-transition:.32s cubic-bezier(.22,.9,.24,1);

  --chart-a:#4361ee; --chart-a-weak:rgba(67,97,238,.12);
}

/* Dark mode */
html[data-theme="dark"]{
  --card-bg: var(--card);
  --card-border: var(--hair);
  color-scheme: dark;

  --bg:#0b1220; --card:#101827; --text:#e5e7eb; --hair:#1f2937;
  --muted:#a0aec0;
  --chip:#19223a;
  --shadow:0 12px 30px rgba(0,0,0,.45);
  --sidebar-grad1:#182243; --sidebar-grad2:#1a1746;
}



/* -------------------------------------------------------
   1) RESET DE BASE
   ------------------------------------------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }
html,body{ overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{ max-width:100%; height:auto; }

/* -------------------------------------------------------
   2) LAYOUT GÉNÉRAL (GRID)
   ------------------------------------------------------- */
.app-container{
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  transition: grid-template-columns var(--layout-transition);
}

.main-content{
  grid-column: 2;
  min-width: 0;
  padding: 1.5rem clamp(1rem, 2vw, 2rem);
  transition: padding var(--layout-transition);
}
@media (max-width: 992px){
  .app-container{ grid-template-columns:1fr; }
  .main-content{ padding:1.25rem; }
}

@media (min-width: 993px){
  html[data-sidebar-desktop="hidden"] .app-container{
    grid-template-columns: 0 minmax(0,1fr);
  }

  html[data-sidebar-desktop="hidden"] .sidebar{
    transform: translateX(-110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
  }

  html[data-sidebar-desktop="hidden"] .main-content{
    grid-column: 2;
  }
}

/* -------------------------------------------------------
   3) SIDEBAR (desktop sticky / mobile off-canvas)
   ------------------------------------------------------- */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  min-width: 0;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1700;
  transition:
    transform var(--layout-transition),
    opacity var(--layout-transition),
    box-shadow var(--layout-transition),
    visibility var(--layout-transition);
}
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg, var(--sidebar-grad1,#1e2760), var(--sidebar-grad2,#1c1556));
}
html[data-theme="dark"] .sidebar .sidebar-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
}
.sidebar-header,
.sidebar-footer{ flex:0 0 auto; }
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1rem 1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.15);
}
.sidebar-header .brand{font-size:1.1rem; font-weight:800; display:flex; gap:.6rem; align-items:center}
.sidebar-close{display:none; border:none; background:transparent; color:#fff; font-size:1.25rem; line-height:1; cursor:pointer}

/* Menu */
.sidebar-menu{list-style:none; padding:1rem 0; margin:0}
.menu-item .menu-link{
  display:flex; align-items:center; gap:.75rem; color:#fff; text-decoration:none;
  padding:.85rem 1.25rem; border-left:4px solid transparent;
  transition:background var(--transition), border-color var(--transition);
}
.menu-item .menu-link:hover{background-color:rgba(255,255,255,.12); border-left-color:#fff}
.menu-item.active .menu-link,
.menu-link[aria-current="page"]{
  background-color:rgba(255,255,255,.18);
  box-shadow: inset 4px 0 0 rgba(255,255,255,.9);
  border-left-color: transparent;
}
.menu-link i{ width:20px; text-align:center }

/* Backdrop mobile */
.sidebar-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.42); z-index: 1600;
  backdrop-filter: blur(4px);
  opacity:0; visibility:hidden; transition:opacity var(--layout-transition), visibility var(--layout-transition);
}
.sidebar-backdrop.show{ opacity:1; visibility:visible; }

@media (min-width: 993px){
  html[data-sidebar-desktop="hidden"] .sidebar{
    opacity:0;
    transform:translateX(-24px);
    pointer-events:none;
    visibility:hidden;
    box-shadow:none;
  }
}

/* Off-canvas en mobile */
@media (max-width: 992px){
  .sidebar{
    position:fixed; inset:0 auto 0 0;
    transform:translateX(-100%);
    transition:transform var(--layout-transition);
    width:min(88vw, var(--sidebar-w));
    max-width:none;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-close{ display:inline-flex; }
}

/* Corps de sidebar : scroll interne propre */
.sidebar .sidebar-body{
  padding:.5rem 0 1rem;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  -ms-overflow-style:auto; scrollbar-width:thin;
}
.sidebar .sidebar-body::-webkit-scrollbar{ width:0; height:0; }
.sidebar .sidebar-section{ padding:.25rem 0 .35rem; }
.sidebar .sidebar-heading{
  display:flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem .35rem; color:rgba(255,255,255,.85);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; font-weight:800; opacity:.95;
}
.sidebar .menu-group{ list-style:none; margin:0; padding:.25rem 0; }
.sidebar .menu-item{ margin:.05rem 0; }
.sidebar .menu-sep{ height:1px; margin:.35rem 1rem; background:rgba(255,255,255,.15); border-radius:99px; }
#appSidebar .menu-link, #appSidebar .sidebar-heading{
  max-width:100%; box-sizing:border-box; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
@media (max-width: 992px){
  .sidebar .sidebar-heading{ padding:.5rem .9rem .25rem }
  .sidebar .menu-item .menu-link{ padding:.7rem 1rem }
}


/* === Sidebar — Accordéon moderne ===================================== */
.section-trigger{
  /* reset bouton */
  -webkit-appearance:none; appearance:none; border:0; background:transparent;
  width:100%; text-align:left; cursor:pointer; padding:.6rem 1rem .35rem;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  color:rgba(255,255,255,.85); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.4px; font-weight:800;
}
.section-trigger .section-caret{ transition: transform .2s ease; opacity:.9 }
.menu-group[hidden] + .nothing{} /* (préserve le sélecteur suivant) */
/* Caret synchronisé avec aria-expanded */
.section-trigger[aria-expanded="true"]  .section-caret { transform: rotate(180deg); }
.section-trigger[aria-expanded="false"] .section-caret { transform: rotate(0); }


/* Lorsque une section contient l’élément actif, mettre le heading en évidence */
.sidebar-section:has(.menu-item.active) .section-trigger{
  color:#fff;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* "hack" anti-flou subpixel */
}

/* Petit effet hover cohérent avec le gradient */
.section-trigger:hover{
  color:#fff; filter:brightness(1.03);
}

/* (Optionnel) micro-transition d’apparition des groupes */
.menu-group{
  transition: opacity .18s ease;
}
.menu-group[hidden]{ opacity:0; }



/* -------------------------------------------------------
   4) HEADER
   ------------------------------------------------------- */
.header .notif .dropdown { z-index: 1500; }
.header{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  padding:.95rem 1.1rem;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--hair) 88%, transparent);
  box-shadow:var(--shadow);
  margin-bottom:1.5rem;
  z-index: 1200;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-width:48px;
  height:48px;
  padding:0 .95rem;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--hair) 70%, transparent);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,242,255,.92));
  color:var(--text);
  cursor:pointer;
  font-size:1rem;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
}
.menu-toggle:hover,
.menu-toggle:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--primary) 28%, transparent);
  color:var(--primary);
  box-shadow:0 16px 34px rgba(67,97,238,.14);
}
.menu-toggle.is-active{
  color:var(--primary);
}
.menu-toggle.is-active .menu-toggle-icon{
  background:rgba(67,97,238,.16);
  box-shadow:inset 0 0 0 1px rgba(67,97,238,.08);
}
.menu-toggle-icon{
  width:1.85rem;
  height:1.85rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(67,97,238,.1);
}
.menu-toggle-label{
  font-size:.9rem;
  font-weight:800;
  white-space:nowrap;
}

.search-bar{
  display:flex; align-items:center; gap:.6rem; background:var(--hair);
  border-radius:999px; padding:.55rem 1rem; width:min(100%, 420px); flex:1 1 320px;
  border:1px solid color-mix(in srgb, var(--hair) 75%, transparent);
}
.search-bar input{ border:none; background:transparent; outline:none; width:100%; padding:.35rem .2rem; color:inherit }

.header-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
}

.user-profile{ display:flex; align-items:center; gap:.6rem; position:relative; }
.user-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.user-info{ line-height:1.2 }
.user-role{ font-size:.85rem; color:var(--muted) }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:12px; border:1px solid var(--hair); background:transparent; cursor:pointer; color:var(--muted);
}
.theme-toggle:hover{ border-color:var(--primary); color:var(--primary) }

[data-theme="dark"] .header{
  background:linear-gradient(135deg, rgba(16,24,39,.92), rgba(17,24,39,.86));
  border-color:rgba(148,163,184,.12);
}

[data-theme="dark"] .menu-toggle{
  background:linear-gradient(135deg, rgba(30,41,59,.92), rgba(15,23,42,.92));
  border-color:rgba(148,163,184,.16);
  color:var(--text);
}
[data-theme="dark"] .menu-toggle.is-active .menu-toggle-icon{
  background:rgba(99,102,241,.2);
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.12);
}

/* Header: mobile = 2 lignes (recherche en haut) */
@media (max-width: 768px){
  .header{
    display: flex;
    flex-wrap: wrap;           /* autorise le retour à la ligne */
    align-items: stretch;
    row-gap: .6rem;            /* espace vertical entre les 2 lignes */
  }

  /* 1ère ligne : la recherche prend toute la largeur */
  .header .search-bar{
    order: -1;                 /* passe en premier */
    width: 100%;
    max-width: 100%;
    margin: 0 0 .5rem 0;
  }

  /* 2ème ligne : le reste reste sur une seule ligne */
  .header > :not(.search-bar){
    /* pas d’étirement inattendu */
    flex: 0 0 auto;
  }

  /* pousse le profil (ou le dernier bloc) à droite si tu en as besoin */
  .header .user-profile,
  .header .header-actions{ margin-left: auto; }
  .menu-toggle-label{ display:none; }
  .menu-toggle{ padding:0; width:48px; }
}

/* === Notifications : affichage mobile soigné ====================== */
@media (max-width: 560px){
  /* Le dropdown devient un panneau "ancré" sous le header */
  .header .notif .dropdown{
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top) + var(--header-h, 70px) + 8px);
    width: auto;
    max-width: none;
    max-height: min(68vh, 520px);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(2,8,23,.28);
    z-index: 1600;                /* au-dessus des cards/tables */
    overflow: hidden;             /* masque les coins arrondis */
  }

  /* En-tête collée en haut du panneau + fond solide */
  .header .notif .dropdown .dropdown-head{
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--hair);
  }
  .header .notif .dropdown .dropdown-head strong{
    font-size: 1.02rem;
    font-weight: 900;
  }

  /* Liste défilante confortable (scroll iOS/Android fluide) */
  .header .notif .dropdown .dropdown-list{
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: max(.25rem, env(safe-area-inset-bottom));
  }

  /* Items : plus d'air et meilleure hiérarchie typographique */
  .header .notif .dropdown .dropdown-row{
    gap: .8rem;
    padding: .8rem .95rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--muted) 24%, transparent);
  }
  .header .notif .dropdown .dropdown-row i{
    margin-top: .2rem;
    opacity: .75;
    font-size: 1rem;
  }
  .header .notif .dropdown .row-main .title{
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.25;
  }
  .header .notif .dropdown .row-main .sub{
    margin-top: .2rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* 3 lignes max */
    overflow: hidden;
  }
  .header .notif .dropdown .row-main .meta{
    margin-top: .25rem;
    font-size: .78rem;
    opacity: .85;
  }

  /* État "non lu" plus doux mais visible */
  .header .notif .dropdown .dropdown-row.is-unread{
    background: color-mix(in srgb, var(--primary) 10%, transparent);
  }

  /* État vide */
  .header .notif .dropdown .dropdown-empty{
    text-align: center;
    padding: 1.1rem .9rem;
    color: var(--muted);
  }

  /* Position et lisibilité du badge sur la cloche */
  #notifToggle .badge{
    position: absolute;
    top: -4px; right: -4px;
    translate: 0 0;
  }
}

/* Desktop: on garde tes tailles initiales, juste une petite ombre + largeur */
.header .notif .dropdown{
  min-width: 420px;
  max-width: 520px;
}
@media (max-width: 520px){
  .header .notif .dropdown{
    min-width: 300px;
    max-width: 92vw;
  }
}

/* (Sécurité) toujours respecter [hidden] et badge vide */
.badge[hidden], [hidden]{ display:none !important; }

/* Header sticky (mobile + desktop) */
.header{
  position: sticky;
  /* colle le header sous la barre d'état si présente (iOS/Android) */
  top: 0;
  top: max(env(safe-area-inset-top), 0px);
  z-index: 1200;               /* au-dessus du contenu */
}

/* Valeur par défaut (sera mise à jour en JS) */
:root{ --header-h: 70px; }


/* -------------------------------------------------------
   5) ATOMS & UTILITAIRES
   ------------------------------------------------------- */
.page-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1.25rem; flex-wrap:wrap}
.page-title{font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:900;margin:0;display:flex;align-items:center;gap:.5rem}
.page-title::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--success));box-shadow:0 0 0 6px color-mix(in srgb, var(--primary) 10%, transparent)}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border-radius:999px;background:var(--chip);color:var(--primary);font-weight:700}
.btn{
  padding:.7rem 1.05rem; border:none; border-radius:12px; cursor:pointer; font-weight:700;
  display:inline-flex; align-items:center; gap:.55rem; transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition)
}
.btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(67,97,238,.25)}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background:var(--chip); color:#111827}
.btn-danger{background:var(--danger); color:#fff}
.btn-ghost{background:transparent; color:var(--text)}
.btn-icon{width:42px; height:42px; align-items:center; justify-content:center}
.btn[disabled]{ opacity:.55; pointer-events:none; cursor:not-allowed; }

.card{background:var(--card); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow)}
.card + .card{margin-top:1rem}
.section-title{font-size:1.05rem;font-weight:800;color:var(--text);margin:.25rem 0 1rem;border-bottom:1px dashed var(--hair);padding-bottom:.6rem}
.hidden{ display:none !important; }

/* -------------------------------------------------------
   6) FORMULAIRES
   ------------------------------------------------------- */
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
.form-group{flex:1;min-width:220px}
.form-control, select, textarea, input[type="date"], input[type="number"], input[type="text"], input[type="email"]{
  width:100%; padding:.8rem 1rem; border:1px solid var(--hair); background:transparent; color:inherit;
  border-radius:12px; transition:border-color var(--transition), box-shadow var(--transition)
}
.form-control:focus, select:focus, textarea:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="email"]:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,97,238,.12)
}
.field-error{color:var(--danger); font-size:.9rem}

/* Inline formset (lignes facture) */
.table-like{width:100%; border-collapse:collapse}
.table-like th, .table-like td{padding:.75rem; border-bottom:1px solid var(--hair); text-align:left}
.item-row--deleted{opacity:.35; text-decoration:line-through}

/* -------------------------------------------------------
   7) TABLES & LISTES
   ------------------------------------------------------- */
.table-container{background:var(--card);border-radius:12px;padding:1rem;box-shadow:var(--shadow)}
.table-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.table-title{font-weight:700}
.table-wrapper{overflow:auto;border-radius:12px;border:1px solid var(--hair)}
table{width:100%; border-collapse:collapse; min-width:0;}   /* base: pas de min-width forcé */
.table--wide{ min-width:720px; }                              /* opt-in large tables */
th,td{padding:.75rem;border-bottom:1px solid var(--hair);text-align:left; word-break:break-word; hyphens:auto}
th{color:var(--muted);font-weight:700;font-size:.9rem}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(67,97,238,.03)}
.money{font-variant-numeric:tabular-nums}
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Badges d’état */
.status{padding:.25rem .55rem;border-radius:999px;font-size:.8rem;font-weight:700}
.status-paid{background:var(--success-weak);color:#0b7285}
.status-pending{background:var(--warning-weak);color:#7a4c00}
.status-overdue{background:var(--danger-weak);color:#8a113c}
.status-success{ background:#16a34a; color:#fff; }

/* -------------------------------------------------------
   8) DASHBOARD & CHARTS
   ------------------------------------------------------- */
.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-bottom:1.25rem}
.stat-card{display:flex;align-items:center}
.stat-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:.9rem;font-size:1.25rem}
.bg-primary{background:rgba(67,97,238,.15);color:#4361ee}
.bg-success{background:rgba(46,196,182,.18);color:#0b7285}
.bg-warning{background:rgba(252,163,17,.15);color:#b7791f}
.bg-danger{background:rgba(247,37,133,.15);color:#c2255c}
.stat-info h3{font-size:1.6rem;margin:.1rem 0}
.stat-info p{color:var(--muted);font-size:.9rem;margin:0}
.charts{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin:1rem 0 1.25rem}
@media (max-width: 992px){ .charts{grid-template-columns:1fr} }

/* -------------------------------------------------------
   9) NOTIFICATIONS (toasts)
   ------------------------------------------------------- */
.notification{
  position:fixed; right:16px; bottom:16px; display:flex; gap:.6rem; align-items:center;
  background:var(--card); color:var(--text); border:1px solid var(--hair);
  padding:.75rem 1rem; border-radius:12px; box-shadow:var(--shadow); z-index:1200; transition:opacity .28s;
}
.notification-success{border-color:rgba(46,196,182,.35)}
.notification-error{border-color:rgba(247,37,133,.35)}

/* Dropdown cloche (contenu menu) */
.header .notif{ position:relative; }
.header .notif .dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--radius); box-shadow:var(--shadow);
  z-index:1300; max-height:70vh; overflow:auto;
}
.header .notif .badge{
  display:inline-flex; min-width:18px; height:18px; align-items:center; justify-content:center;
  border-radius:9px; font-size:.72rem; background:var(--danger); color:#fff; translate:-8px -8px;
}
/* Mobile : ancrage fixe pour éviter tout clipping */
@media (max-width:560px){
  .header .notif .dropdown{
    position:fixed; right:12px; left:12px;
    top:calc(var(--header-h,70px) + 8px);
  }
}

/* Respecte toujours l’attribut [hidden] */
.badge[hidden], [hidden]{ display:none !important; }

/* -------------------------------------------------------
   10) ACTION BAR (création facture)
   ------------------------------------------------------- */
.actionbar{ position:sticky; bottom:0; z-index:800; margin-top:1rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.03)) 0 0/100% 10px no-repeat, var(--card);
  border-top:1px solid var(--hair); padding:.75rem 1rem; border-radius:12px;
}
.actionbar .totals{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.actionbar .totals .chip{background:var(--hair); color:var(--text)}
@media (pointer:coarse){
  .btn, .menu-link, .theme-toggle, .user-avatar, .tile, .chip{ min-height:44px; }
}
.actionbar, .action-bar{ padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }

/* -------------------------------------------------------
   11) PAGINATION
   ------------------------------------------------------- */
.pagination{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.pagination a, .pagination span{
  padding:.45rem .7rem; border-radius:10px; border:1px solid var(--hair); text-decoration:none; color:inherit
}
.pagination .current{background:var(--primary); color:#fff; border-color:transparent}

/* -------------------------------------------------------
   12) DROPDOWN PROFIL
   ------------------------------------------------------- */
.dropdown{
  position:absolute; right:0; top:calc(100% + .5rem); min-width:220px; z-index:1200;
  background:var(--card-bg,#fff); border:1px solid var(--card-border,#e6e8ef);
  border-radius:12px; box-shadow:var(--shadow); padding:.35rem; animation:fadeIn .15s ease;
}
.dropdown-item{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:10px; text-decoration:none;
  color:inherit;
}
.dropdown-item:hover{ background:rgba(67,97,238,.07) }
.dropdown-sep{ height:1px; background:var(--light-gray,#e9ecef); margin:.25rem 0 }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }

/* -------------------------------------------------------
   13) MODAUX (générique + Account Hub)
   ------------------------------------------------------- */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1500; }
.modal[hidden]{ display:none !important; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.modal-dialog{
  position:relative; z-index:1; width:min(520px, 94vw);
  background:var(--card-bg,#fff); border:1px solid var(--card-border,#e6e8ef);
  border-radius:16px; box-shadow:var(--shadow); padding:1rem;
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem }
.modal-body{ display:flex; flex-wrap:wrap; gap:.5rem }
.modal-close{ background:transparent; border:none; font-size:1.1rem; cursor:pointer }

/* Account Hub */
.modal--account .modal-dialog.sheet{
  --pad:1rem;
  width:min(720px, 96vw);
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(180deg, rgba(67,97,238,.45), rgba(247,37,133,.45)) border-box;
  border:1px solid transparent; border-radius:18px; box-shadow:var(--shadow);
  padding:var(--pad); position:relative; overflow:hidden; transform:scale(.96) translateY(8px);
  opacity:0; transition:transform .28s var(--transition), opacity .28s var(--transition);
}
.modal--account.is-open .sheet{ transform:scale(1) translateY(0); opacity:1; }
.modal--account .modal-backdrop{ backdrop-filter:blur(2px); }
html[data-theme="dark"] .modal--account .sheet{
  background:
    linear-gradient(var(--card, #101827), var(--card, #101827)) padding-box,
    linear-gradient(180deg, rgba(67,97,238,.45), rgba(247,37,133,.45)) border-box;
}
.sheet-deco{
  position:absolute; inset:auto -20% -40% auto; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(67,97,238,.12), transparent 70%),
             radial-gradient(closest-side, rgba(247,37,133,.10), transparent 70%);
  filter: blur(18px); pointer-events:none;
}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem .25rem .75rem;
  border-bottom:1px dashed var(--hair);
}
.user{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.avatar{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-weight:900; font-size:1.25rem; letter-spacing:.5px;
  background:linear-gradient(180deg, var(--primary), var(--secondary));
  box-shadow:0 10px 26px rgba(67,97,238,.35);
  flex:0 0 auto;
}
.meta h3{ margin:.1rem 0; font-size:1.15rem; font-weight:900 }
.meta .sub{ margin:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw }
.roles{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem }
.role{ padding:.2rem .5rem; border-radius:999px; background:var(--chip); color:var(--primary); font-weight:700; font-size:.78rem }
.role-super{ background:linear-gradient(90deg,#ffedd5,#fee2e2); color:#b91c1c }
.role-user{ background:linear-gradient(90deg,#eef2ff,#e0e7ff); color:#3730a3 }
.sheet-close{
  border:1px solid var(--hair); background:transparent; color:inherit; width:40px; height:40px;
  border-radius:12px; cursor:pointer; flex:0 0 auto;
}
.sheet-close:hover{ border-color:var(--primary); color:var(--primary) }
.sheet-body{ padding:1rem .25rem .25rem; }
.actions-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.tile{
  display:flex; gap:.8rem; align-items:center; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--hair); border-radius:14px; padding:.85rem .9rem;
  transition: transform .2s var(--transition), box-shadow .2s var(--transition), border-color .2s;
}
.tile i{ font-size:1.05rem; width:28px; text-align:center; color:var(--primary) }
.tile strong{ display:block; font-weight:800; line-height:1.2 }
.tile span{ display:block; color:var(--muted); font-size:.87rem; line-height:1.2 }
.tile:hover{
  transform: translateY(-2px);
  border-color: rgba(67,97,238,.35);
  box-shadow: 0 10px 30px rgba(2,8,23,.10);
  background: linear-gradient(180deg, rgba(67,97,238,.06), transparent);
}
.logout-row{ margin-top:1rem; display:flex; justify-content:flex-end }
.btn-logout{
  background:linear-gradient(90deg, var(--danger), #ff3d9a); color:#fff; border:none;
  padding:.8rem 1rem; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px rgba(247,37,133,.28); transition: transform .15s, box-shadow .15s;
}
.btn-logout:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(247,37,133,.32) }
@media (prefers-reduced-motion: reduce){
  .modal--account .sheet{ transition:none }
}

/* -------------------------------------------------------
   14) PROGRÈS HTMX & TRANSITIONS
   ------------------------------------------------------- */
#hxProgress{
  position:fixed; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#4361ee,#f72585);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease; z-index:2000;
}
#hxProgress.is-active{ transform:scaleX(1); }
/* Rendu stable: éviter les blancs au chargement sur mobile */
.table-container,
.table-wrap,
.charts,
.cards,
.surface{
  content-visibility: visible;
  contain-intrinsic-size: auto;
}
#pjax.is-swapping{ opacity:.86; filter:saturate(.96); transition: opacity .18s ease, filter .18s ease; }

/* -------------------------------------------------------
   15) LISTES CLIENTS/PRODUITS (cards sur mobile)
   ------------------------------------------------------- */
@media (max-width:760px){
  table.as-cards thead{ display:none }
  table.as-cards tbody tr{
    display:grid; grid-template-columns:1fr auto; gap:.5rem; padding:.7rem;
    border:1px solid var(--hair); border-radius:12px; margin:.6rem; background:var(--card);
    box-shadow:0 8px 18px rgba(2,8,23,.06);
  }
  table.as-cards tbody td{ padding:0; border:none }
  table.as-cards tbody td[data-label]{ display:flex; flex-direction:column }
  table.as-cards tbody td[data-label]::before{ content:attr(data-label); font-size:.78rem; color:var(--muted); margin-bottom:.15rem }
  /* Mapping colonnes (clients) */
  .clients-table .t-col-1{order:1;grid-column:1;font-weight:900}
  .clients-table .t-col-2{order:3;grid-column:1}
  .clients-table .t-col-3{order:4;grid-column:1}
  .clients-table .t-col-4{order:5;grid-column:1;color:var(--muted)}
  .clients-table .t-col-5{order:2;grid-column:2;justify-self:end;text-align:right;color:var(--muted)}
  .clients-table .t-actions{order:6;grid-column:2;justify-self:end}
  @supports(selector(:has(*))){
    .clients-table tr:has(.badge-archived){ border-left:4px solid #ef4444 }
  }
}
@media (min-width:561px){ .fab{ display:none } }

/* -------------------------------------------------------
   16) AUTRES (modales simples, spinner)
   ------------------------------------------------------- */
.modal-backdrop.simple{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-card{background:var(--surface,#fff);color:var(--text,#222);width:min(960px,96vw);max-height:88vh;overflow:auto;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:1rem 1.25rem}
.modal-close{position:sticky;top:0;float:right;border:0;background:transparent;font-size:1.75rem;line-height:1;cursor:pointer}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #ddd;border-top-color:#666;margin:2rem auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* Pages sans sidebar (#appSidebar absent) -> 1 colonne */
@supports(selector(:has(*))){
  .app-container:not(:has(#appSidebar)){
    grid-template-columns: 1fr !important;
  }
}

/* Fallback explicite pour les pages d'auth (on pose la classe via <script>) */
html.auth-standalone .app-container{
  grid-template-columns: 1fr !important;
}
html.auth-standalone .main-content{
  padding: 0;                 /* l'auth gère son propre padding */
}

/* Empêche le body de passer en dessous du sheet sur mobile */
@media (max-width:560px){
  .header .notif .dropdown{
    will-change: transform;  /* micro-accélération */
  }
  /* Optionnel : léger slide-in */
  .header .notif .dropdown[hidden]{ transform: translateY(-4px); opacity:.0; }
  .header .notif .dropdown:not([hidden]){ transform: translateY(0); opacity:1; transition: transform .18s ease, opacity .18s ease; }
}

/* === Sidebar: scrollbar harmonisée avec le gradient === */
#appSidebar .sidebar-body{
  --sb-w: 10px;
  --sb-thumb: color-mix(in srgb, #ffffff 60%, transparent);
  --sb-thumb-hover: color-mix(in srgb, #ffffff 78%, transparent);
  --sb-track: transparent;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit/Chromium */
#appSidebar .sidebar-body::-webkit-scrollbar{
  width: var(--sb-w);
}
#appSidebar .sidebar-body::-webkit-scrollbar-track{
  background: var(--sb-track);
}
#appSidebar .sidebar-body::-webkit-scrollbar-thumb{
  /* pilule blanche translucide, nette sur le gradient */
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 75%, transparent),
    color-mix(in srgb, #fff 55%, transparent)
  );
  border-radius: 999px;
  border: 3px solid transparent;   /* amincit visuellement */
  background-clip: padding-box;
}
#appSidebar .sidebar-body:hover::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 88%, transparent),
    color-mix(in srgb, #fff 70%, transparent)
  );
}
#appSidebar .sidebar-body::-webkit-scrollbar-thumb:active{
  background: color-mix(in srgb, #fff 95%, transparent);
}

/* Dark: un chouïa plus doux pour ne pas “hurler” */
html[data-theme="dark"] #appSidebar .sidebar-body{
  --sb-thumb: color-mix(in srgb, #ffffff 55%, transparent);
}

/* --- Listes Clients & Produits : ne JAMAIS couper les mots dans les tableaux --- */
.items-table th { white-space: nowrap; word-break: normal; }
.items-table td { word-break: normal; }

/* --- Mode cartes (mobile) : mapping pour la table Produits --- */
@media (max-width:760px){
  /* On a déjà .as-cards pour le layout; on ajoute juste la grille Produits */
  .products-table .t-col-1{order:1;grid-column:1 / -1;font-weight:900}   /* Libellé (titre) */
  .products-table .t-col-2{order:2;grid-column:1}                         /* Type */
  .products-table .t-col-3{order:3;grid-column:1}                         /* PU HT */
  .products-table .t-col-4{order:4;grid-column:1}                         /* Achat HT */
  .products-table .t-col-5{order:5;grid-column:1}                         /* TVA % */
  .products-table .t-col-6{order:6;grid-column:1}                         /* Unité */
  .products-table .t-col-7{order:7;grid-column:1;color:var(--muted)}      /* SKU */
  .products-table .t-actions{order:8;grid-column:2;justify-self:end}      /* Actions */
}

/* Bouton cloche : fond transparent, compatible clair/sombre */
#notifToggle{
  background: transparent !important;
  border: 1px solid var(--hair);
  color: var(--muted);
}
#notifToggle:hover{
  border-color: var(--primary);
  color: var(--primary);
}

/* Badge lisible sur tout fond : petit anneau de séparation */
#notifToggle .badge{
  background: var(--danger);
  color: #fff;
  box-shadow: 0 0 0 2px var(--card);
}

/* Safety: la barre sticky reste toujours cliquable */
.invoice-form-premium .action-bar{ z-index:1000; pointer-events:auto; }
.invoice-form-premium .action-bar::before{ pointer-events:none !important; }
.invoice-form-premium .action-bar > *{ position:relative; z-index:1; }

@media (max-width: 992px){
  .app-container{ grid-template-columns: 1fr !important; }
  .main-content{ grid-column: 1 / -1 !important; } /* force le body à occuper toute la grille */
}

.sidebar-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Sidebar: boutons "menu-link" (ex: Déconnexion) sans fond blanc */
.sidebar .menu-item button.menu-link{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;   /* enlève le fond blanc */
  border: 0;                 /* enlève le bord natif */
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.sidebar .menu-item button.menu-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 2px;
}

/* Sidebar: <button class="menu-link"> doit ressembler à <a class="menu-link"> */
.sidebar .menu-item button.menu-link{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;   /* <-- supprime le fond blanc natif */
  border: 0;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* Le <form> de logout ne doit pas casser l'alignement */
.sidebar .menu-item .logout-form{ margin: 0; }

/* Focus visible accessible sur les “menu-link” (btn + lien) */
.sidebar .menu-item .menu-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 2px;
}

/* === Bell badge like YouTube ============================================ */
.header .notif .btn-icon { position: relative; }           /* ancre locale */
#notifToggle .badge{
  position: absolute;
  top: 2px;                /* ajuste au goût (entre -2 et 4px) */
  right: 2px;
  transform: translate(50%,-50%);   /* mord légèrement l’angle */
  min-width: 18px;
  height: 18px;
  padding: 0 5px;          /* s’élargit quand 2+ chiffres */
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  background: var(--danger);
  color: #fff;
  box-shadow: 0 0 0 2px var(--card); /* anneau de séparation (clair/sombre) */
  pointer-events: none;    /* clics passent à l’icône */
  translate: 0 0;          /* neutralise l’ancien translate si présent */
}

/* ==== FOOTER anti-overflow / mobile < 444px ==== */
.cosmic-footer .cosmic-container,
.cosmic-footer .cosmic-main-grid,
.cosmic-footer .cosmic-bottom-content { min-width: 0; }

.cosmic-footer .cosmic-main-grid{
  /* tracks qui peuvent VRAIMENT rétrécir */
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr);
}
@media (max-width:1024px){
  .cosmic-footer .cosmic-main-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width:640px){
  .cosmic-footer .cosmic-main-grid{
    grid-template-columns: minmax(0,1fr);
  }
}

/* enfants flex qui doivent pouvoir se compresser */
.cosmic-footer .cosmic-brand-text,
.cosmic-footer .nav-card-content,
.cosmic-footer .legal-links { min-width: 0; }

/* ne jamais dépasser la largeur du conteneur */
.cosmic-footer .cosmic-logo-card,
.cosmic-footer .cosmic-contact-card,
.cosmic-footer .cosmic-nav-card { width:100%; max-width:100%; }

/* liens légaux + bouton "top" doivent pouvoir passer à la ligne */
.cosmic-footer .cosmic-meta-links { flex-wrap: wrap; gap: .9rem; }
.cosmic-footer .legal-link { overflow-wrap:anywhere; }

@media (max-width:444px){
  .cosmic-footer .cosmic-container{ padding-left:1rem; padding-right:1rem; }
  .cosmic-footer .nav-card-icon{ width:36px; height:36px; }
  .cosmic-footer .cosmic-nav-card{ padding:.9rem; }
  .cosmic-footer .cosmic-app-name{ font-size:1.35rem; }
}

/* pas d’agrandissement au “hover” sur mobile (évite un léger overflow) */
@media (hover:none){
  .cosmic-footer .cosmic-nav-card{ transform:none !important; }
}

/* Ne jamais intercepter les clics */
#hxProgress { pointer-events: none !important; }
#hxProgress.is-active { pointer-events: none !important; }

/* (optionnel) assure que la barre n'écrase pas le header */
#hxProgress { z-index: 2; }          /* une fine barre au-dessus du contenu… */
.header { z-index: 3; position: relative; } /* …mais le header reste cliquable */

/* =========================================================
   FIX MOBILE — rendu initial + sidebar + viewport
========================================================= */

/* Empêche les “blancs” de premier rendu sur petits écrans */
@media (max-width: 992px){
  .main-content,
  .page-header,
  .dashboard,
  .charts,
  .table-container,
  .table-wrap,
  .cards,
  .surface,
  .header,
  .app-topbar{
    content-visibility: visible !important;
    contain: none !important;
  }
}

/* Layout mobile stable */
@media (max-width: 992px){
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-container{
    display: block !important;
    min-height: 100dvh;
    width: 100%;
  }

  .main-content{
    width: 100%;
    min-width: 0;
    padding: 1rem .9rem 1.25rem !important;
    overflow-x: hidden;
  }
}

/* Sidebar mobile vraiment off-canvas */
@media (max-width: 992px){
  #appSidebar.sidebar,
  .sidebar.sidebar-modern{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-width: 340px;
    height: 100dvh;
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
    visibility: visible;
    z-index: 1700;
    border-radius: 0 24px 24px 0;
    overflow: hidden;
  }

  #appSidebar.sidebar.open,
  .sidebar.sidebar-modern.open{
    transform: translate3d(0, 0, 0);
  }

  html[data-sidebar-desktop="hidden"] .sidebar{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: var(--shadow) !important;
  }
}

/* Le contenu ne doit jamais être décalé par la sidebar sur mobile */
@media (max-width: 992px){
  .app-container,
  .main-content{
    margin-left: 0 !important;
    left: auto !important;
    transform: none !important;
  }
}

/* Header mobile plus fiable */
@media (max-width: 992px){
  .header,
  .app-topbar{
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
  }
}

/* Protection contre les hauteurs instables */
@supports (height: 100svh){
  @media (max-width: 992px){
    #appSidebar.sidebar,
    .sidebar.sidebar-modern{
      height: 100svh;
    }
  }
}

/* Le backdrop doit être correct */
.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  z-index: 1600;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.sidebar-backdrop.show{
  opacity: 1;
  visibility: visible;
}

.sidebar-backdrop[hidden]{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Scroll interne sidebar plus propre */
#appSidebar .sidebar-body,
.sidebar.sidebar-modern .sidebar-body{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Evite que certains blocs prennent une hauteur fantôme au chargement */
.dashboard,
.charts,
.table-container,
.table-wrap,
.surface,
.cards{
  min-width: 0;
}

/* Floating action button: éviter qu'il recouvre trop le contenu en mobile */
@media (max-width: 560px){
  .fab,
  .floating-action,
  .floating-create,
  .quick-action-fab{
    right: 16px !important;
    bottom: 16px !important;
    z-index: 1100;
  }
}