/* ======================= */
/* ======= FORM.CSS ====== */
/* ======================= */



.modal input, .modal select, .modal textarea{
  width:100%; 
  background:var(--bg); 
  color:var(--text); 
  border:1px solid var(--border);
  border-radius:8px; 
  padding:8px 10px; 
  outline:none; 
  font:inherit;
  font-size: 0.9rem;
}

.modal input:focus,
.modal textarea:focus{ 
    outline:none; 
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); 
    border: 1px solid var(--accent) !important; 
    background: var(--accent-200);
}

/* Span Label */

.lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
  font-size: 0.85rem;
}
.lblh2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    margin-bottom: 30px;
}


/* 1) Laisse les enfants de .row-grid rétrécir */
.row-grid > * { min-width: 0; }


.blocTitleStatut {
    grid-template-columns: 3fr 1fr;
    display: grid;
    gap: 12px;
}

/* 2) Pistes flexibles (au lieu de 1fr qui peut rester à min-content) */
.row-grid.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .row-grid.row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocTitleStatut {
    grid-template-columns: 2fr 1fr;
    }
}

/* 3) Les inputs date peuvent vraiment prendre 100% */
.field input[type="date"]{
  width: 100%;
  max-width: 100%;
  min-width: 0;           /* crucial pour Safari/Chrome */
  font: inherit;          /* évite un zoom/hauteur étrange */
  /* optionnel : retire le style natif si besoin
     -webkit-appearance: none;
     appearance: none;
  */
}

.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.date-control {
  position: relative;
}
.flatpickr-input { width: 100%;}

.date-control .date-picker[readonly] {
  caret-color: transparent; /* pas de curseur texte */
}

.date-control .date-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .6;
  pointer-events: none; /* clic passe à l'input => ouvre le calendrier */
}


.blocClient {

    padding-bottom: 10px;
    background: var(--panel);
    padding:0;
    border: 0;
    margin-bottom: 20px;
}

.champ-autocompletion {
    position: relative;
    margin-top: 10px;
}

/* Conteneur déjà existant (#suggestions). Ex : */
.suggestion-box {
  position: absolute; /* si .champ-autocompletion est position:relative */
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: 320px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Bandeau "ajouter nouveau" */
.suggest-new {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}
.suggest-new:hover { background: var(--bg); }

/* séparateur */
.suggest-sep {
  height: 1px;
  background: var(--bg); 
  margin: 2px 0;
}

/* Item client */
.suggest-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.suggest-item:hover,
.suggest-item.active {   background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }

.suggest-item .text { display: flex; flex-direction: column; }
.suggest-item .title { font-size: 14px; line-height: 1.2; }
.suggest-item .meta  { font-size: 12px; color:var(--muted) }

/* Vide */
.suggest-empty {
  padding: 12px;
 color:var(--muted) ;
  font-style: italic;
}



.client-summary, .project-summary {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding-left:38px;
}
.client-summary__name, .project-summary__name {display:flex;align-items:center;gap:8px;font-weight:600}
.client-summary__addr, .project-summary__addr, .artiste-summary__meta{margin-top:4px}

.client-summary {
    flex-direction: column;
    gap: 4px;
}

#clientSummaryAddr {
    white-space: normal;   /* permet le retour à la ligne */
    line-height: 1.4;
}

.duo-title h4 {
 margin: 0;
}


/* DOT Coloré */

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0;
}
.color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.color-dot:hover {
  transform: scale(1.1);
}
.color-dot.active {
  border-color: var(--text);
  transform: scale(1.15);
}




@keyframes modalIn{ from{ transform:translateY(20px); opacity:0; } to{ transform:translateY(0); opacity:1; } }







/* =====================================================
   TABLE-MATERIEL — Responsive Design (Desktop → Mobile)
   ===================================================== */

.table-mat.mini {
  width: 100%;
  border-collapse: collapse;
}

.table-mat.mini th, .table-mat.mini td {
  padding: 0px 0 6px 0;
  text-align: left;
}

.table-mat.mini td.col-price {
  width: 100px;
  text-align: right;
}

.table-mat.mini td.col-actions {
  text-align: center;
  width: 60px;
}




/* ============================================================
   MODALE BUDGET — STYLE DÉDIÉ
   ============================================================ */

.budget-modal-body {
  max-height: 70vh;
  overflow-y: auto;
}



.kpi .lbl {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
  justify-content: center;
}
.kpi .lbl .lucide {
    color: var(--accent);
    width: 16px;
    height: 16px;
}

.kpi.ca {
background: var(--accent);
}
.kpi.ca .lbl  {
color: var(--panel);
}
.kpi.ca .lbl .lucide  {
color: var(--panel);
}



.kpi .val {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.kpi.ca .val   {
    color: var(--panel);
}


.kpi.highlight {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-color: var(--accent);
}

/* ===============================
   BARRE DE RÉPARTITION FINANCIÈRE
   =============================== */
.kpi-bar {
  position: relative;
  height: 18px;
  border-radius: 9999px;
  background: var(--bg);
  overflow: hidden;
  margin-top: 2rem;
  margin-bottom: .75rem;
}

.kpi-bar .bar-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.4s ease;
}

.bar-seg.mat {
  background-color: hsl(0 80% 60%);
}
.bar-seg.presta {
  background-color: hsl(35 90% 55%);
}
.bar-seg.com {
  background-color: hsl(210 85% 55%);
}
.bar-seg.marge {
  background-color: hsl(145 60% 45%);
}

/* Légende harmonisée */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  margin-top: .25rem;
  color: var(--muted);
}
.legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.legend .dot.mat { background-color: hsl(0 80% 60%); }
.legend .dot.presta { background-color: hsl(35 90% 55%); }
.legend .dot.com { background-color: hsl(210 85% 55%); }
.legend .dot.marge { background-color: hsl(145 60% 45%); }


/* ===== LÉGENDE ===== */
.legend {
  display: flex;
  justify-content: space-around;
  font-size: 13px;
  margin-top: 8px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 8px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.dot.mat {
  background: #f59e0b;
}

.dot.presta {
  background: #ef4444;
}

.dot.com {
  background: #6366f1;
}

.dot.marge {
  background: #22c55e;
}



/* ===============================
   FICHE PROJET
   =============================== */

.modal.modal-wide {
  max-width: 900px;
  width: 90%;
}

.fiche-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 20px;
}

.fiche-section {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: inset 0 0 0 1px var(--border);
  margin-bottom: 20px;
}

.fiche-section h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
  margin-block-start: 5px;
}
.fiche-section h4 .lucide {
    color: var(--accent);

}
.fiche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 16px;
  font-size: 14px;
}

.fiche-map {
  width: 100%;
  height: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 6px;
}

.fiche-docs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-doc {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}
.btn-doc:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fiche-note {
  background: var(--panel);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}



/* ============================================================
   📎 STYLE — Bloc fichiers (Documents / pièces jointes)
   ============================================================ */
.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--radius, 8px);
  padding: 6px 8px;
  margin-bottom: 6px;
   transition: all 0.2s ease;
}

.file-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}

.file-item i {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.file-item a {
  flex: 1;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.file-item a:hover {
  text-decoration: underline;
}

.file-item .btn-icon {
  flex-shrink: 0;
  opacity: 0.6;
  border: none;
  background: transparent;
  padding: 4px;
  border-radius: var(--radius, 6px);
  cursor: pointer;
   transition: all 0.2s ease;
}

.file-item .btn-icon:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.file-item .btn-icon.danger i {
  color: var(--bad, #ef4444);
}

/* Texte vide */
.fiche-docs em {
  color: var(--muted);
  font-size: 13px;
}

/* === petit séparateur sous le bloc upload === */
#file-upload {
  display: block;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: var(--radius, 8px);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
   transition: all 0.2s ease;
}

#file-upload:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}



/* ============================================================
   ONGLET MODALE — STYLE ACCENTUÉ (barre sous header)
   ============================================================ */

.tabs-under-header .tabs {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.2rem 1.2rem 0;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line);
  position: relative;
}

/* Ligne animée sous l’onglet actif */
.tabs-under-header .tabs::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  width: var(--tab-line-w, 0);
  left: var(--tab-line-x, 0);
  transition: all 0.25s ease;
}

.tabs-under-header .tab {
  position: relative;
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  padding: 0.8rem 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.25s ease, transform 0.2s ease;
  border-bottom: 3px solid transparent;
}

.tabs-under-header .tab:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.tabs-under-header .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel {
  display: none;
  padding-top: 2rem;
  animation: fadeIn .25s ease;
}

.tab-panel.active {
  display: block;
}

/* Petite transition d’apparition */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}



/* ============================================================
   🧭 ONGLET (barre de navigation des sections)
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  background: var(--panel);
}

.tabs.tabToolbar {
  overflow-x: visible ;
  overflow-y: visible ;
}
.dv-toolbar {
  display: flex;
  gap:8px
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs .tab {
    flex: 0 0 auto;
    padding: 12px 16px 10px 16px;
    background: transparent;
    border: none !important;
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
}
.tabs .tab.btn {
  background: var(--accent);
  color:var(--textNeg);
}

.tabs .tab.active {
    color: var(--accent);
    /* border-bottom-color: var(--accent); */
    background: var(--accent-200);
    border-radius: 0 0 8px 8px;
}

.tabs .tab.btn.active {
  background: var(--accent);
  color:var(--textNeg);
}


.tabs .tab .lucide {
  width: 16px;
  height: 16px;
}

/* ✅ sur mobile : barre d’onglets scrollable horizontalement */
@media (max-width: 768px) {
  .tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-right: 10px;
  }

  .tabs .tab {
    font-size: 13px;
    padding: 8px 12px;
  }

  .tabs .tab i {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   ⚡ BONUS : transition fluide entre onglets
   ============================================================ */
.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}



/* =======================================================
   Correction affichage modale Client au-dessus d’une autre
   ======================================================= */


/* La modale client doit être au-dessus et centrée */
.client-modal-wrapper {
  position: absolute;          /* se détache du flux flex */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1010;                /* au-dessus de la modale projet */
  background: transparent;     /* ne rajoute pas d’opacité supplémentaire */
}

/* Effet visuel léger pour clarifier la superposition */
#clientModal {
  transform: scale(0.97);
  animation: fadeInUp 0.25s ease forwards;
}






/* =====================================================
   🎚️ TOGGLE SWITCH (Oui / Non)
   ===================================================== */

   
.toggle-field {

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border);
  transition: .3s;
  border-radius: 9999px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: var(--panel-soft);
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* ✅ Checked */
.toggle input:checked + .slider {
  background-color: var(--accent);
}

.toggle input:checked + .slider::before {
  transform: translateX(24px);
  background-color: var(--textNeg);
}

/* 🌗 Mode sombre */
[data-theme="dark"] .slider {
  background-color: var(--border);
}

[data-theme="dark"] .slider::before {
  background-color: var(--text);
}


code {

  color: var(--muted);
  font-size: 0.8rem;

}

.params-form .field {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.params-form .field > span,
.params-form .field > .lbl,
.params-form .lbl-row .lbl,
.pay-option > span{
  display:flex;
  align-items:center;
  gap:8px;
}

.params-form .lucide  {
  width:16px;
  height:16px;
  color: var(--accent);
}


input[type="checkbox"]{
  width: auto !important;
}