/* ─────────────────────────────────────────────
   DEVIS.CSS — Écrans devis et facture
   ───────────────────────────────────────────── */

/* ─── ÉCRANS COMMUNS ─── */
#devis-screen, #facture-screen {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fafaf8;
  z-index: 500;
  overflow-y: auto;
}
#devis-screen.open, #facture-screen.open { display: block; }

.devis-header, .facture-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0; z-index: 10;
}
.devis-header   { background: linear-gradient(135deg, #059669, #10B981); }
.facture-header { background: linear-gradient(135deg, #1B4332, #2D6A4F); }

.devis-header h2, .facture-header h2 {
  color: #fff; font-size: 18px; font-weight: 800; flex: 1;
}
.devis-close, .facture-close {
  background: rgba(255,255,255,.2);
  border: none; color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 18px;
}

.devis-body, .facture-body { padding: 16px; }

/* ─── SECTION ─── */
.devis-section {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.devis-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F0F2F8;
}

/* ─── CHAMPS ─── */
.devis-input, .devis-select {
  width: 100%;
  padding: 10px 13px;
  border-radius: 8px;
  border: 1.5px solid #E2E5F0;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .2s;
  background: #fff;
}
.devis-input:focus, .devis-select:focus {
  outline: none;
  border-color: #059669;
}
.devis-field { margin-bottom: 10px; }
.devis-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}

/* ─── CARTE DEVIS/FACTURE ─── */
.devis-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
  cursor: pointer;
  transition: box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.devis-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.devis-card-accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  border-radius: 2px 0 0 2px;
}
.devis-card-title { font-weight: 700; font-size: 14px; color: #1B4332; }
.devis-card-sub   { font-size: 12px; color: #6B7280; margin-top: 3px; }
.devis-card-amount { font-size: 16px; font-weight: 800; color: #059669; }

/* ─── BADGES STATUT ─── */
.statut-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.statut-devis      { background: #FEF3C7; color: #92400E; }
.statut-accepte    { background: #D1FAE5; color: #065F46; }
.statut-realise    { background: #DBEAFE; color: #1E40AF; }
.statut-facture    { background: #EDE9FE; color: #5B21B6; }
.statut-paye       { background: #D1FAE5; color: #065F46; }
.statut-annule     { background: #FEE2E2; color: #991B1B; }

/* ─── BOUTON GÉNÉRATION ─── */
.devis-btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #059669, #10B981);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 10px;
  transition: opacity .2s;
}
.devis-btn-primary:hover { opacity: .9; }

.facture-btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #1B4332, #2D6A4F);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 10px;
  transition: opacity .2s;
}
.facture-btn-primary:hover { opacity: .9; }

/* ─── DÉPENDANCES ─── */
.deps-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid #E2E5F0;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff;
  font-size: 13px;
}
.deps-item.selected { border-color: #059669; background: #05966912; }

/* Mode sombre */
body.dark .devis-section  { background: #252A3A; }
body.dark .devis-card     { background: #252A3A; }
body.dark .devis-input,
body.dark .devis-select   { background: #1A1D2E; color: #e2e8f0; border-color: #374151; }
body.dark .deps-item      { background: #1A1D2E; border-color: #374151; color: #e2e8f0; }
body.dark .deps-item.selected { background: #05966920; border-color: #059669; }