/* =====================================================
   ADMIN UI — admin.css (consolidé, complet)
   - Cohérence visuelle (cards / boutons / forms / tables)
   - Mobile-first: table→cards compact + barre sticky actions
   - Inclut les utilitaires/classes utilisées par index/edit variations
===================================================== */

/* =====================================================
   VARIABLES
===================================================== */
:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --line:#e6e8ee;
  --text:#1f2937;
  --muted:#6b7280;

  /* Palette plus “dense” (lisibilité boutons) */
  --primary:#1d4ed8;
  --success:#15803d;
  --danger:#b91c1c;
  --warning:#f59e0b;

  --radius:14px;
  --radius-sm:10px;
}

/* =====================================================
   BASE
===================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  font-size:14px;
  line-height:1.4;
}
a{color:inherit;text-decoration:none}

/* =====================================================
   UTILS (utilisés dans tes pages)
===================================================== */
.muted{color:var(--muted)}
.text-right{text-align:right}
.m-0{margin:0}
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.ml-6{margin-left:6px}
.ml-8{margin-left:8px}
.mr-6{margin-right:6px}
.spacer{height:12px}
.fw-900{font-weight:900}
.h3{margin:0;font-size:16px;font-weight:900}
.items-start{align-items:flex-start}
.hr{border:none;border-top:1px solid #eef0f6;margin:14px 0}

.row{display:flex;gap:10px;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Grid helpers */
.col-span-all{grid-column:1/-1}

/* =====================================================
   LAYOUT
===================================================== */
.page-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.page-title{
  font-size:22px;
  font-weight:900;
  margin:0;
}
.page-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
}

.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.actions-stack{align-items:flex-end}

/* top links (Retour lot / Lien client) */
.top-links{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  width:auto;
}

/* =====================================================
   CARDS
===================================================== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.card-pad{padding:14px}

/* =====================================================
   BUTTONS (contrastés + hiérarchie claire)
===================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;

  background:#1976d2;
  border:1px solid rgba(15, 23, 42, .14);
  box-shadow:0 1px 0 rgba(15, 23, 42, .06);
}
.btn:hover{filter:brightness(0.97)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{
  outline:3px solid rgba(29, 78, 216, .25);
  outline-offset:2px;
}

.btn-soft{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#0f172a;
}
.btn-client{
  background:#f1f5f9;
  border-color:#cbd5e1;
}

/* Variant: OUTLINE (navigation secondaire lisible) */
.btn-outline{
  background:#f8fafc;
  border:1px solid #c7d2fe;
  color:#1e293b;
  box-shadow:none;
}
.btn-outline:hover{background:#eef2ff}
.btn-outline:active{transform:translateY(1px)}
.btn-primary{
  background:var(--primary);
  border-color:rgba(0,0,0,.12);
  color:#fff;
  box-shadow:0 8px 18px rgba(29, 78, 216, .18);
}
.btn-success{
  background:var(--success);
  border-color:rgba(0,0,0,.12);
  color:#fff;
  box-shadow:0 8px 18px rgba(21, 128, 61, .18);
}
.btn-danger{
  background:var(--danger);
  border-color:rgba(0,0,0,.12);
  color:#fff;
}
.btn.small{padding:6px 10px;font-size:12px;border-radius:10px}

.btn[disabled],
.btn.is-disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:saturate(0.85);
}

/* =====================================================
   FLASH (compat avec flash success/error + flash-ok/flash-err)
===================================================== */
.flash{
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  margin:12px 0;
  border:1px solid transparent;
}
.flash-ok,
.flash.success{background:#ecfdf5;color:#065f46;border-color:#bbf7d0}
.flash-err,
.flash.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* =====================================================
   FORMS
===================================================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
}
.field label{
  font-size:12px;
  font-weight:800;
  display:block;
  margin-bottom:4px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:13px;
  background:#fff;
}
.field textarea{resize:vertical}
.help{font-size:11px;color:var(--muted);margin-top:4px}

/* actions bottom */
.form-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.form-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Draft switch inline (création) */
.draft-inline{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.draft-inline-text{font-size:13px;color:var(--text)}

/* Switch row (édition) */
.switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.switch-text{font-weight:900}

/* =====================================================
   SWITCH (swipe)
===================================================== */
.switch{
  position:relative;
  width:42px;
  height:24px;
  flex:0 0 auto;
}
.switch input{display:none}
.switch span{
  position:absolute;
  inset:0;
  background:#e5e7eb;
  border-radius:999px;
  transition:.2s;
  border:1px solid #d7dbe7;
}
.switch span:before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.switch input:checked + span{
  background:var(--success);
  border-color:var(--success);
}
.switch input:checked + span:before{
  transform:translateX(18px);
}

/* =====================================================
   TABLE
===================================================== */
.table-wrap{overflow-x:auto}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.table th{
  text-align:left;
  font-size:11px;
  color:var(--muted);
  padding:6px 8px;
}
.table td{
  padding:8px;
  border-top:1px solid var(--line);
  vertical-align:top;
  white-space:nowrap;
}
.table td.note{white-space:normal}
.tr-link{cursor:pointer}
.tr-link:hover{background:rgba(0,0,0,.03)}

/* =====================================================
   STATUS PILLS
===================================================== */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}
.st-attente{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.st-valide{background:#ecfdf5;color:#065f46;border-color:#bbf7d0}
.st-refuse{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.st-draft{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}

/* =====================================================
   DANGER ZONE (suppression)
===================================================== */
.danger{
  border:1px solid #fecaca;
  background:#fff5f5;
  border-radius:var(--radius);
  padding:12px;
}

/* =====================================================
   MOBILE: top-links sur une ligne + sticky actions + historique compact
===================================================== */
@media (max-width:700px){
  /* top-links sur une ligne */
  .top-links{
    flex-direction:row;
    align-items:center;
    width:100%;
  }
  .top-links .btn{
    flex:1;
    white-space:nowrap;
    padding:10px 10px;
  }

  /* sticky bottom bar (laisse de la place en bas) */
  .mobile-sticky{
    position:sticky;
    bottom:0;
    background:var(--card);
    border-top:1px solid var(--line);
    padding-top:10px;
    margin-top:12px;
    z-index:10;
  }
  body{padding-bottom:14px}

  /* compact: sur la barre, texte "Brouillon" masqué */
  .draft-inline-text{display:none}

  /* === Rendre Enregistrer dominant sur mobile === */
  .mobile-sticky .form-actions{
    width:100%;
    flex-wrap:nowrap;
  }
  .mobile-sticky .form-actions .btn{
    flex:0 0 auto;
  }
  .mobile-sticky .form-actions .btn-soft{
    padding:10px 12px;
  }
  .mobile-sticky .form-actions .btn-success{
    flex:1 1 auto;              /* dominant */
    padding:12px 14px;          /* plus grand */
    font-size:14px;
    border-radius:14px;
  }

  /* TABLE -> CARDS (alignement + compact) */
  .table{min-width:0}
  .table thead{display:none}
  .table tr{
    display:block;
    width:100%;
    border:1px solid var(--line);
    border-radius:14px;
    margin:0 0 10px 0;
    padding:8px 10px;
    background:var(--card);
  }
  .table td{
    display:grid;
    grid-template-columns:108px 1fr;
    gap:10px;
    border:0;
    padding:4px 0;
    white-space:normal;
    align-items:start;
  }
  .table td::before{
    content:attr(data-label);
    font-weight:900;
    color:var(--muted);
    font-size:11px;
  }
  .status-pill{padding:3px 8px;font-size:10px}

  /* ultra compact: cache champs secondaires */
  .table td[data-label="Note"],
  .table td[data-label="Créée le"]{
    display:none;
  }
}


/* =====================================================
   SHOW LOT : PILLS / LINKS / KPI / PROGRESS
===================================================== */
.note{color:var(--muted);font-size:12.5px}
.mt-10{margin-top:10px}
.ml-8{margin-left:8px}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}
.pill-blue{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.pill-super{background:#e3f2fd;border-color:#bbdefb;color:#0d47a1}

/* Link style (inside cards) */
.link{color:#2563eb;text-decoration:none;font-weight:900}
.link:hover{text-decoration:underline}

/* top grid (infos / comparatif) */
.top-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:12px;
  align-items:stretch;
}
@media (max-width:900px){
  .top-grid{grid-template-columns:1fr;}
}

/* info table */
.table-info{width:100%;border-collapse:collapse}
.table-info th{
  width:180px;
  text-align:left;
  color:var(--text);
  font-weight:900;
  padding:8px 10px;
  border-bottom:1px solid #eef0f6;
  vertical-align:top;
}
.table-info td{
  padding:8px 10px;
  border-bottom:1px solid #eef0f6;
  vertical-align:top;
}

/* progress bar */
.progress-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.progress-bg{
  background:#e5e7eb;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  flex:1;
  min-width:180px;
  border:1px solid rgba(15,23,42,.10);
}
.progress-fill{height:100%;background:var(--success)}
.progress-fill.warning{background:var(--warning)}
.progress-fill.danger{background:var(--danger)}

/* KPI */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
@media (max-width:900px){
  .kpi-grid{grid-template-columns:1fr;}
}
.kpi{
  background:#fafafa;
  border:1px solid #eef0f6;
  border-radius:12px;
  padding:10px;
}
.kpi .label{color:var(--muted);font-size:12px;font-weight:800}
.kpi .value{font-weight:950;font-size:15px;margin-top:2px}

/* Invoice status row tint */
.row-payee{background:#ecfdf5}
.row-conflit{background:#fef2f2}
.row-encours{background:#eff6ff}
.status-text{font-weight:900}
.status-text.payee{color:#15803d}
.status-text.conflit{color:#b91c1c}
.status-text.encours{color:#1d4ed8}

/* Align secondary actions under top-links */
.action-row{justify-content:flex-end}


/* =====================================================
   EXTRA: BTN WARNING (fusionner / actions orange)
===================================================== */
.btn-warning{
  background:var(--warning);
  border-color:rgba(0,0,0,.12);
  color:#fff;
  box-shadow:0 8px 18px rgba(245, 158, 11, .18);
}

/* =====================================================
   EXTRA: TEXT WRAP
===================================================== */
.wrap{white-space:normal}
.table td.wrap{white-space:normal}

/* =====================================================
   ACCORDION (lots index)
===================================================== */
.accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.acc-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
}
.acc-head{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  cursor:pointer;
  user-select:none;
}
.acc-head:hover{background:#f8fafc}
.acc-left{
  min-width:240px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.acc-title{margin:0;font-size:16px;font-weight:950}
.acc-meta{
  color:var(--muted);
  font-size:12.5px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.acc-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.acc-body{
  display:none;
  padding:0 14px 14px 14px;
}
.acc-item.open .acc-body{display:block}
.chev{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(15, 23, 42, .14);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.acc-item.open .chev{transform:rotate(180deg)}

/* =====================================================
   MOBILE: container pleine largeur (évite le max-width:80% du style.css)
===================================================== */
@media (max-width:700px){
  .container,
  .site-main > .container,
  main.container{
    max-width:100% !important;
    width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* =====================================================
   LOTS EDIT: composants spécifiques (select filtrable + TVA)
===================================================== */
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.is-hidden{display:none !important}

/* Champs input "legacy" (alias des inputs de .field) */
.input{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:13px;
  background:#fff;
}
.input:focus{
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(122,167,255,.18);
  outline:none;
}

/* Select artisan filtrable */
.searchable-select{position:relative}
.searchable-options{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  overflow:hidden;
  max-height:260px;
  overflow-y:auto;
  z-index:50;
}
.searchable-options div{
  padding:10px 12px;
  cursor:pointer;
  border-top:1px solid #f0f2f8;
}
.searchable-options div:first-child{border-top:0}
.searchable-options div:hover{background:#f8fafc}
.small-help{font-size:12px;color:var(--muted);margin-top:8px}

/* TVA box */
.tva-box{
  border:1px solid #eef0f6;
  border-radius:12px;
  padding:12px;
  background:#fafafa;
}
.tva-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  margin-bottom:10px;
}
.tva-left{display:flex;align-items:center;gap:10px}
.tva-label{font-weight:900;display:flex;align-items:center;gap:8px}
.tva-amount{
  width:180px;
  max-width:45vw;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
  background:#fff;
}
.tva-amount:focus{
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(122,167,255,.18);
}

/* Mobile: TVA input full width si besoin */
@media (max-width:700px){
  .tva-line{flex-direction:column; align-items:stretch}
  .tva-amount{width:100%; max-width:none}
}


/* =====================================================
   COMPAT & SAFETY NET (évite toute perte de “features”)
===================================================== */

/* Alias legacy (certaines pages utilisent .select/.textarea) */
.select{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:13px;
  background:#fff;
}
.textarea{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  font-size:13px;
  background:#fff;
  resize:vertical;
}

/* Checkboxes TVA (create.php) */
.tva-check{
  width:18px;height:18px;
  accent-color:var(--primary);
}

/* Compat anciens statuts (si une page legacy traîne) */
.st-pending{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.st-approved{background:#ecfdf5;color:#065f46;border-color:#bbf7d0}
.st-rejected{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* Compat ancien switch “custom” (variations/edit legacy) */
.switch-wrap{display:flex;flex-direction:column;gap:6px}
.switch-control{display:flex;align-items:center;gap:10px;font-weight:900;user-select:none}
.switch-hint{color:var(--muted);font-size:12px}

.switch-track{
  width:46px;height:26px;border-radius:999px;
  border:1px solid rgba(15, 23, 42, .14);
  background:#e5e7eb;position:relative;transition:.18s;
  display:inline-block;
}
.switch-knob{
  width:22px;height:22px;border-radius:999px;background:#fff;
  position:absolute;top:50%;left:2px;transform:translateY(-50%);
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:.18s;
}
/* ON */
.switch-input:checked + label .switch-track{
  background:var(--success);
  border-color:var(--success);
}
.switch-input:checked + label .switch-track .switch-knob{left:22px}
.switch-input:focus + label .switch-track{
  box-shadow:0 0 0 3px rgba(29,78,216,.20);
}


/* =====================================================
   PROJECTS SHOW: mini-progress + gantt (si utilisés)
===================================================== */

/* Progress fill state alias */
.progress-fill.ok{background:var(--success)}

/* SUPER-LOT pill (projects/show) */
.superlot-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background:#eef2ff;
  border:1px solid #dbe3ff;
  color:#1e3a8a;
  white-space:nowrap;
}

/* Mini progress per lot */
.mini-pg{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mini-bg{
  background:#e5e7eb;
  border-radius:999px;
  height:10px;
  width:140px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
}
.mini-fill{height:100%;background:var(--primary)}

/* Gantt */
.gantt-row{margin:10px 0}
.gantt-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.gantt-bar-bg{
  background:#e5e7eb;
  width:100%;
  height:14px;
  position:relative;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
}
.gantt-bar-fill{
  position:absolute;
  height:100%;
  border-radius:999px;
}
.gantt-click{cursor:pointer}
.gantt-click:hover{filter:brightness(.98)}


/* =====================================================
   PROJECTS INDEX: statut projet pills
===================================================== */
.st-negociation{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.st-progress{background:#e3f2fd;border-color:#bbdefb;color:#0d47a1}
.st-pause{background:#eceff1;border-color:#cfd8dc;color:#37474f}
.st-cancel{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.st-done{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}

/* Mobile ultra compact: masque l'adresse dans la liste projets */
@media (max-width:700px){
  .table td[data-label="Adresse"]{display:none}
}


/* =====================================================
   PROJECTS EDIT: champs requis + money wrap + readonly
===================================================== */
.req{color:var(--danger);font-weight:900;margin-left:4px}

.money-wrap{display:flex;align-items:center;gap:8px}
.money-wrap span{font-weight:900;color:var(--muted)}

.readonly{
  background:#f8fafc !important;
  color:#374151;
}


/* =====================================================
   PROSPECTS INDEX: recherche + pills statut/tag
===================================================== */
.search-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.search{
  flex:1;
  min-width:240px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
  background:#fff;
  font-size:13px;
}
.search:focus{
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(122,167,255,.18);
}

/* Pills statut/tag prospects */
.st-new{ background:#e3f2fd; border-color:#bbdefb; color:#0d47a1; }
.st-progress{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.st-win{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.st-lost{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

.tag-cold{ background:#eceff1; border-color:#cfd8dc; color:#37474f; }
.tag-warm{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.tag-hot{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }

/* Mobile: liste prospects plus compacte */
@media (max-width:700px){
  .table td[data-label="Email"],
  .table td[data-label="Source"]{
    display:none;
  }
}


/* =====================================================
   PROSPECTS INDEX: recherche (UI améliorée)
===================================================== */
.search-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.search-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.search-ico{opacity:.75}
.search-input{
  flex:1;
  min-width:180px;
  border:0;
  outline:none;
  font-size:14px;
  background:transparent;
}
.search-input::placeholder{color:#9aa3b2}
.search-bar:focus-within{
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(122,167,255,.18);
}
.search-clear{visibility:hidden}
@media (max-width:700px){
  .search-bar{gap:8px}
  .search-clear{padding:8px 10px}
}


/* =====================================================
   PROSPECTS SHOW: info grid + bouton full width
===================================================== */
.btn-block{
  width:100%;
  justify-content:center;
}
.info{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:10px;
  align-items:start;
}
.info div{
  padding:6px 0;
  border-bottom:1px solid #eef0f6;
}
.info div:nth-last-child(-n+2){border-bottom:none}
.k{color:var(--muted);font-weight:900}
.v{font-weight:650}

/* Mobile: infos en une colonne */
@media (max-width:700px){
  .info{grid-template-columns:1fr}
  .k{font-size:12px}
}

/* =====================================================
   USERS: pills rôle + responsive colonnes
===================================================== */
.role-admin{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.role-edit{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.role-read{background:#eceff1;border-color:#cfd8dc;color:#37474f}

@media (max-width:700px){
  /* Liste users: cacher email pour gagner de la place */
  .table td[data-label="Email"]{display:none}
}
/* =====================================================
   AUTH (login.php) — scoped to .auth-page
===================================================== */
.auth-page .auth-wrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 12px;
  min-height:calc(100vh - 180px); /* header + padding */
}
@media (max-width:700px){
  .auth-page .auth-wrap{
    padding:18px 12px;
    min-height:calc(100vh - 140px);
    align-items:flex-start;
  }
}

.auth-page .auth-card{
  width:min(560px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.auth-page .auth-pad{padding:18px}
@media (max-width:700px){
  .auth-page .auth-pad{padding:16px}
}

.auth-page .auth-brand{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.auth-page .auth-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  flex:0 0 auto;
}
.auth-page .auth-title{margin:0;font-size:22px;font-weight:950}
.auth-page .auth-sub{margin-top:4px;color:var(--muted);font-size:13px}

.auth-page .auth-form{
  margin-top:14px;
  display:grid;
  gap:12px;
}

.auth-page .auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.auth-page .auth-small{color:var(--muted);font-size:12.5px}
.auth-page .auth-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  cursor:pointer;
}
.auth-page .auth-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}

@media (max-width:700px){
  .auth-page .auth-actions .btn{
    width:100%;
    padding:12px 14px;
    font-size:14px;
    border-radius:14px;
  }
  .auth-page .auth-row{
    align-items:flex-start;
  }
}

/* =====================================================
   AUTH — FIX: éviter le scroll inutile sur login
   - On laisse .page-shell / .site-main gérer la hauteur (style.css)
   - Empêche le calc(100vh - 180px) + paddings de dépasser le viewport
===================================================== */
.auth-page .auth-wrap{
  min-height: 0;      /* override */
  padding: 18px 0;    /* moins de padding vertical dans le container */
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:700px){
  .auth-page .auth-wrap{
    align-items:flex-start;
    padding: 12px 0;
  }
}

/* Projects create: input + action button (adresse prospect) */
.input-action{
  display:flex;
  align-items:center;
  gap:10px;
}
.input-action > .field-input{
  flex:1;
  min-width:0;
}

/* Etat ON du bouton */
.btn-toggle-on{
  background: var(--text);
  color:#fff;
  border-color: rgba(0,0,0,.12);
}

/* =====================================================
   INVOICES (artisan invoices)
===================================================== */

/* Filtres statuts */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

.p-en_cours{background:#e3f2fd;border-color:#bbdefb;color:#0d47a1;}
.p-payee{background:#e8f5e9;border-color:#c8e6c9;color:#1b5e20;}
.p-conflit{background:#ffebee;border-color:#ffcdd2;color:#b71c1c;}
.p-autres{background:#eeeeee;border-color:#e0e0e0;color:#424242;}
.p-reset{background:#111827;border-color:#111827;color:#fff;}

.pill.is-disabled{opacity:.35;pointer-events:none;}
.pill.is-active{outline:3px solid rgba(0,0,0,.15);}
.pill .count{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  padding:2px 8px;
  border-radius:999px;
  font-weight:900;
}

/* Lignes de table factures */
.row-en_cours{background:#e3f2fd;}
.row-payee{background:#e8f5e9;}
.row-conflit{background:#ffebee;}
.row-autres{background:#eeeeee;}

/* Tags de statut */
.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.82rem;
  border:1px solid transparent;
}
.t-en_cours{background:#dbeafe;border-color:#bfdbfe;color:#1e40af;}
.t-payee{background:#dcfce7;border-color:#bbf7d0;color:#166534;}
.t-conflit{background:#fee2e2;border-color:#fecaca;color:#991b1b;}
.t-autres{background:#e5e7eb;border-color:#d1d5db;color:#374151;}

/* Bandeau show facture */
.invoice-banner{
  max-width:860px;
  margin:20px auto 18px auto;
  padding:14px 18px;
  border-radius:12px;
  font-weight:800;
  color:#fff;
  text-align:center;
}
.invoice-banner-blue{background:#0b74b8;}
.invoice-banner-red{background:#c62828;}
.invoice-banner-green{background:#2e7d32;}

/* Grille infos show facture */
.invoice-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 25px;
  margin:15px 0 20px 0;
}
.invoice-info-item{
  display:flex;
  flex-direction:column;
}
.invoice-info-label{
  font-weight:800;
  color:#333;
  margin-bottom:3px;
}
.invoice-info-link{
  color:#0b74b8;
  text-decoration:none;
  font-weight:700;
}
.invoice-info-link:hover{
  text-decoration:underline;
}

/* Formulaire statut facture */
.invoice-status-form .row-inline{
  display:flex;
  gap:20px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.invoice-status-form .form-field{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:220px;
}
.invoice-status-form .form-field label{
  font-weight:800;
  margin-bottom:6px;
}
.invoice-status-form .form-field select,
.invoice-status-form .form-field input{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #d7dbe6;
  background:#fafafa;
}
.invoice-status-form .form-field select:focus,
.invoice-status-form .form-field input:focus{
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(122,167,255,.18);
  outline:none;
}

/* Zone conflit */
.invoice-conflict-box{
  background:#fff7f7;
  border-left:4px solid #c62828;
  padding:15px 20px;
  border-radius:10px;
  margin-bottom:20px;
  display:none;
}
.invoice-conflict-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:15px;
  margin-top:10px;
}
.invoice-conflict-card{
  background:#ffffff;
  border:1px solid #e1e1e1;
  border-radius:10px;
  padding:12px;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
.invoice-conflict-title{
  font-weight:700;
  margin-bottom:8px;
  color:#333;
}
.invoice-conflict-card input{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #ccc;
}

/* Bouton principal formulaire statut */
.invoice-status-btn{
  min-width:220px;
  padding:12px 16px;
  font-size:15px;
  border-radius:12px;
}

/* Largeurs page facture */
.invoice-container{
  max-width:860px;
  margin:0 auto 16px auto;
}
.invoice-container-last{
  max-width:860px;
  margin:0 auto 35px auto;
}

/* Mobile */
@media (max-width:700px){
  .invoice-info-grid{
    grid-template-columns:1fr;
  }

  .invoice-status-btn{
    width:100%;
    min-width:0;
  }
}

/* =====================================================
   INVOICES SHOW / INDEX
===================================================== */

/* Filtres statuts */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}
.p-en_cours{background:#e3f2fd;border-color:#bbdefb;color:#0d47a1}
.p-payee{background:#e8f5e9;border-color:#c8e6c9;color:#1b5e20}
.p-conflit{background:#ffebee;border-color:#ffcdd2;color:#b71c1c}
.p-autres{background:#eeeeee;border-color:#e0e0e0;color:#424242}
.p-reset{background:#111827;border-color:#111827;color:#fff}

.pill.is-disabled{opacity:.35;pointer-events:none}
.pill.is-active{outline:3px solid rgba(0,0,0,.15)}
.pill .count{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  padding:2px 8px;
  border-radius:999px;
  font-weight:900;
}

/* Lignes de table factures */
.row-en_cours{background:#e3f2fd}
.row-payee{background:#e8f5e9}
.row-conflit{background:#ffebee}
.row-autres{background:#eeeeee}

/* Tags statut facture */
.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.82rem;
  border:1px solid transparent;
}
.t-en_cours{background:#dbeafe;border-color:#bfdbfe;color:#1e40af}
.t-payee{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.t-conflit{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.t-autres{background:#e5e7eb;border-color:#d1d5db;color:#374151}

/* Bandeau facture */
.invoice-banner{
  margin:0 0 14px 0;
  padding:12px 14px;
  border-radius:12px;
  font-weight:900;
  color:#fff;
}
.invoice-banner-blue{background:#0b74b8}
.invoice-banner-red{background:#c62828}
.invoice-banner-green{background:#2e7d32}

/* Cards internes show facture */
.invoice-inline-card{
  border:1px solid #eef0f6;
  border-radius:12px;
  background:#fafafa;
  padding:12px;
}

/* Form statut facture */
.invoice-status-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.invoice-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.invoice-status-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.invoice-status-btn{
  min-width:220px;
}

/* Zone conflit */
.invoice-conflict-box{
  background:#fff7f7;
  border:1px solid #fecaca;
  border-left:4px solid #c62828;
  border-radius:12px;
  padding:14px;
  display:none;
}
.invoice-conflict-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px;
  margin-top:10px;
}
.invoice-conflict-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
}
.invoice-conflict-title{
  font-weight:900;
  margin-bottom:8px;
  color:#333;
  font-size:13px;
}

/* Mobile */
@media (max-width:700px){
  .invoice-status-grid{
    grid-template-columns:1fr;
  }
  .invoice-status-actions{
    justify-content:stretch;
  }
  .invoice-status-btn{
    width:100%;
    min-width:0;
  }
}

/* =====================================================
   SITUATIONS
===================================================== */

.selector-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.selector-row .grow{
  flex:1;
  min-width:280px;
}

.project-summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.project-summary-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.empty-state{
  color:var(--muted);
  padding:4px 0;
}

.table-actions{
  white-space:nowrap;
}

@media (max-width:700px){
  .project-summary{
    flex-direction:column;
    align-items:stretch;
  }

  .project-summary-actions{
    width:100%;
  }

  .project-summary-actions .btn{
    flex:1;
  }
}

/* =====================================================
   SITUATIONS VIEW
===================================================== */

.situation-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.situation-inline-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.situation-chart-card{
  border:1px solid #eef0f6;
  border-radius:12px;
  background:#fff;
  padding:12px;
}

.situation-chart-canvas{
  width:100%;
  max-width:100%;
  display:block;
}

.situation-timeline-table td{
  vertical-align:top;
}

.row-clickable{
  cursor:pointer;
}
.row-clickable:hover{
  background:#fafafa;
}

.detail-row{
  background:#fcfcff;
}

.detail-box{
  padding:12px 12px 4px 12px;
}

.situation-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  margin-right:6px;
  vertical-align:middle;
  border:1px solid rgba(0,0,0,.06);
}

.badge-var{ background:#6f42c1; color:#fff; }
.badge-inv{ background:#0d6efd; color:#fff; }
.badge-paid{ background:#198754; color:#fff; }
.badge-conflict{ background:#dc3545; color:#fff; }
.badge-default{ background:#6c757d; color:#fff; }

.btn-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:8px;
  text-decoration:none;
  background:#f7f7f7;
  color:#111;
  font-size:12px;
  cursor:pointer;
}
.btn-mini:hover{
  background:#f0f0f0;
}

.actions-cell{
  white-space:nowrap;
  text-align:right;
}

.situation-form-inline{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.situation-form-inline .field.grow{
  flex:1;
  min-width:280px;
}

.situation-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.situation-summary-main{
  flex:2;
  min-width:280px;
}

.situation-summary-side{
  flex:1;
  min-width:260px;
}

.situation-summary-box{
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  padding:10px;
}

.situation-event-line{
  margin-bottom:4px;
}

.situation-empty{
  color:var(--muted);
}

@media (max-width:700px){
  .situation-head-actions,
  .situation-inline-actions{
    width:100%;
  }

  .situation-head-actions .btn,
  .situation-inline-actions .btn{
    flex:1;
  }

  .actions-cell{
    text-align:left;
    white-space:normal;
  }

  .situation-form-inline{
    align-items:stretch;
  }
}

.modal-backdrop[hidden]{
  display:none !important;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:1000;
}

.modal-card{
  width:min(460px, 100%);
  background:#fff;
  border:1px solid #e6e8ee;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  padding:18px;
}

/* =====================================================
   ARTISANS INDEX
===================================================== */

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.toolbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  flex:1;
  min-width:280px;
}

.toolbar-left .search{
  flex:1 1 320px;
  min-width:240px;
  max-width:none;
}

.filter-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #d7dbe6;
  background:#fff;
  color:#111;
  font-weight:800;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}

.filter-btn:hover{
  background:#f8fafc;
}

.filter-btn.active{
  background:#1f7a34;
  color:#fff;
  border-color:#1f7a34;
}

.filter-btn .count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding:0 6px;
  height:22px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background:rgba(15,23,42,.06);
}

.filter-btn.active .count{
  background:rgba(255,255,255,.18);
  color:#fff;
}

tr.lot-active td:first-child,
tr.lot-closed td:first-child{
  position:relative;
}

tr.lot-active td:first-child:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#1f7a34;
  border-radius:14px 0 0 14px;
}

tr.lot-closed td:first-child:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#94a3b8;
  border-radius:14px 0 0 14px;
}

.lot-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid #d7dbe6;
  background:#fff;
  white-space:nowrap;
}

.lot-pill.active{
  border-color:rgba(31,122,52,.35);
  background:rgba(31,122,52,.08);
  color:#14532d;
}

.lot-pill.closed{
  border-color:rgba(100,116,139,.35);
  background:rgba(148,163,184,.10);
  color:#475569;
}

.lot-pill.none{
  opacity:.55;
  min-width:22px;
}

/* mobile */
@media (max-width:900px){
  .toolbar-left{
    width:100%;
    align-items:stretch;
  }

  .toolbar-left .search{
    width:100%;
    flex:1 1 100%;
  }

  .filter-group{
    width:100%;
  }
}

@media (max-width:700px){
  .filter-group{
    gap:8px;
  }

  .filter-btn{
    flex:1 1 calc(50% - 8px);
    min-width:120px;
  }
}