/* =====================
   GLOBAL
===================== */
body {
  font-family: 'Cairo', sans-serif;
  background:#f9fafb;
  margin:0;
  color:#111827;
}

/* =====================
   HEADER
===================== */
header {
  background:#2563eb;
  color:white;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.2rem;
  font-weight:600;
}

.add-btn {
  background:#1d4ed8;
  color:white;
  padding:8px 12px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.add-btn:hover { background:#1e40af; }

/* =====================
   TOOLBAR
===================== */
.toolbar {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px;
  margin:15px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.toolbar input,
.toolbar select {
  padding:8px 12px;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-size:0.9rem;
  flex:1;
  min-width:160px;
  outline:none;
}

.toolbar input:focus,
.toolbar select:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.2);
}

/* =====================
   MODAL
===================== */
.modal {
  display:none;
  position:fixed;
  z-index:1000;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
}

.modal-content {
  background:#fff;
  border-radius:12px;
  padding:20px;
  width:100%;
  max-width:650px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.close {
  cursor:pointer;
  font-size:1.4rem;
  color:#ef4444;
  font-weight:bold;
}

/* =====================
   FORM
===================== */
.section-title {
  margin:16px 0 8px;
  font-size:0.95rem;
  font-weight:700;
  color:#2563eb;
  border-left:4px solid #2563eb;
  padding-left:8px;
}

.form-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.input-group {
  display:flex;
  align-items:center;
  background:#f9fafb;
  border:1px solid #d1d5db;
  border-radius:6px;
  padding:6px 10px;
  flex:1;
  min-width:220px;
  margin-bottom:10px;
}

.input-group i {
  margin-right:8px;
  color:#2563eb;
  min-width:18px;
}

.input-group input,
.input-group select {
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:0.9rem;
  padding:6px;
}

/* =====================
   MODAL BUTTONS
===================== */
.modal-actions {
  margin-top:15px;
  display:flex;
  gap:10px;
}

.submit-btn {
  background:#2563eb;
  color:white;
  border:none;
  padding:10px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  flex:1;
}
.submit-btn:hover { background:#1d4ed8; }

.delete-btn {
  background:#ef4444;
  color:white;
  border:none;
  padding:10px;
  border-radius:6px;
  flex:1;
  cursor:pointer;
}
.delete-btn:hover { background:#dc2626; }

/* =====================
   CARDS
===================== */
.clients-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:15px;
  padding:20px;
}

.client-card {
  background:white;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
  padding:12px;
  transition:transform 0.2s, box-shadow 0.2s;
}
.client-card:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

.client-info h4 {
  margin:0;
  font-size:1rem;
  color:#111827;
}

.client-meta {
  font-size:0.85rem;
  color:#374151;
  margin-top:4px;
}

/* =====================
   TYPE COLORS
===================== */
.type-client {
  border-left:5px solid #16a34a;
  background:#ecfdf5;
}
.type-fournisseur {
  border-left:5px solid #f97316;
  background:#fff7ed;
}
.type-client_fournisseur {
  border-left:5px solid #2563eb;
  background:#eff6ff;
}

/* =====================
   ACTION BUTTONS
===================== */
.actions {
  margin-top:8px;
}
.actions button {
  padding:4px 8px;
  font-size:0.75rem;
  border:none;
  border-radius:5px;
  color:white;
  cursor:pointer;
  margin-right:4px;
}
.edit-btn { background:#10b981; }
.edit-btn:hover { background:#059669; }
.actions .delete-btn {
  background:#ef4444;
  padding:4px 8px;
}
.actions .delete-btn:hover { background:#dc2626; }

/* =====================
   RESPONSIVE
===================== */
@media (max-width:600px){
  header { font-size:1rem; }
  .form-row { flex-direction:column; }
  .toolbar { flex-direction:column; }
}