/* =============================================================================
   Espace admin / internal — Pharmacie de Rudder
   Couleurs reprises de la charte du site (vert sauge + terracotta).
   ============================================================================= */
:root {
  --green-dark: #2D5F4E;
  --green-medium: #4A7B6A;
  --green-light: #7BA098;
  --green-soft: #C8D5CF;
  --terracotta: #D4A574;
  --cream: #FAF7F2;
  --cream-warm: #F5EFE5;
  --anthracite: #1F2937;
  --gray-soft: #6B7280;
  --gray-light: #E5E7EB;
  --white: #FEFEFE;
  --red: #B3261E;
  --green-ok: #2E7D52;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--anthracite);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
}

a { color: var(--green-dark); }

/* --- En-tête ------------------------------------------------------------- */
.topbar {
  background: var(--green-dark);
  color: var(--white);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.topbar .brand {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
}
.topbar nav a {
  color: var(--green-soft);
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.95rem;
}
.topbar nav a:hover, .topbar nav a.active { color: var(--white); }
.topbar .user { font-size: 0.85rem; color: var(--green-soft); }
.topbar .user a { color: var(--terracotta); }

/* --- Conteneur ----------------------------------------------------------- */
.container { max-width: 1180px; margin: 0 auto; padding: 32px 24px; }
.container.narrow { max-width: 480px; }

h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 8px; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 28px 0 12px; }
.subtitle { color: var(--gray-soft); margin: 0 0 24px; }

/* --- Cartes -------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.service-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  padding: 24px;
  transition: border-color .2s, transform .2s;
}
.service-card:hover { border-color: var(--green-light); transform: translateY(-2px); }
.service-card h3 { margin: 0 0 6px; color: var(--green-dark); }
.service-card p { margin: 0; color: var(--gray-soft); font-size: 0.9rem; }
.service-card.disabled { opacity: .5; pointer-events: none; }

/* --- Formulaires --------------------------------------------------------- */
label { display: block; font-weight: 500; margin: 14px 0 4px; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green-medium);
  box-shadow: 0 0 0 3px rgba(74,123,106,.15);
}
textarea { min-height: 90px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hint { font-size: 0.8rem; color: var(--gray-soft); margin-top: 4px; }

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.btn-primary { background: var(--green-dark); color: var(--white); }
.btn-primary:hover { background: var(--green-medium); }
.btn-accent { background: var(--terracotta); color: var(--anthracite); }
.btn-ghost { background: transparent; color: var(--green-dark); border: 1px solid var(--gray-light); }
.btn-ghost:hover { border-color: var(--green-medium); }
.btn-danger { background: var(--red); color: var(--white); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

/* --- Tableaux ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; background: var(--white); }
.table-wrap { overflow-x: auto; border: 1px solid var(--gray-light); border-radius: 12px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--gray-light); font-size: 0.9rem; }
th { background: var(--cream-warm); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--cream); }

/* --- Badges de statut ---------------------------------------------------- */
.doc-attached { display: inline-flex; align-items: center; gap: 2px; color: var(--green-medium); vertical-align: middle; margin-left: 6px; }
.doc-attached svg { display: block; }
.doc-attached-count { font-size: 0.72rem; font-weight: 600; line-height: 1; }
.attente-doc { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; }
.attente-doc svg { display: block; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; }
.badge-en_cours { background: #FEF3E2; color: #9A6700; }
.badge-attente  { background: #FDE8D4; color: #B45309; }
.badge-servi    { background: #E6F4EA; color: var(--green-ok); }
.badge-cloture  { background: #ECEFF1; color: var(--gray-soft); }
.badge-archive  { background: #DDE3E7; color: #46505A; }
.badge-annule   { background: #FBE9E7; color: var(--red); }
.badge-na       { background: #F3F4F6; color: var(--gray-soft); }
.badge-admin    { background: var(--green-soft); color: var(--green-dark); }
.badge-employe  { background: var(--cream-warm); color: var(--gray-soft); }
.badge-inactif  { background: #FBE9E7; color: var(--red); }

/* --- Messages flash ------------------------------------------------------ */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.92rem; }
.flash-success { background: #E6F4EA; color: var(--green-ok); border: 1px solid #B7DFC4; }
.flash-error   { background: #FBE9E7; color: var(--red); border: 1px solid #F2C7C2; }
.flash-info    { background: #E8EFF5; color: #2B5278; border: 1px solid #C5D7E8; }

/* --- Barre d'outils / filtres ------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.toolbar .grow { flex: 1; min-width: 200px; }
.toolbar label { margin: 0 0 4px; }

.meta { color: var(--gray-soft); font-size: 0.85rem; }
.pagination { display: flex; gap: 8px; margin-top: 20px; align-items: center; }

/* --- Champs cases à cocher ----------------------------------------------- */
.check-row { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green-dark); }
.check-row label { margin: 0; font-weight: 400; }
.suivi-cell { white-space: nowrap; }
.chk-inline { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 400; margin: 2px 0; }
.chk-inline input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green-dark); }

/* --- Barre d'action groupée (assignation de statut) ---------------------- */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--cream-warm); border: 1px solid var(--gray-light);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.bulk-bar label { margin: 0; }
.row-check, #check-all { width: 18px; height: 18px; accent-color: var(--green-dark); cursor: pointer; }

/* --- Fil de commentaires -------------------------------------------------- */
.comment-item { border-left: 3px solid var(--green-soft); padding: 8px 14px; margin-bottom: 12px; background: var(--cream); border-radius: 0 8px 8px 0; }
.comment-item .comment-meta { font-size: 0.78rem; color: var(--gray-soft); margin-bottom: 4px; }
.comment-item .comment-body { white-space: pre-wrap; }

/* --- Statuts (grille) ----------------------------------------------------- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.status-grid label { margin: 0 0 4px; }

/* --- Dashboard ------------------------------------------------------------ */
.dash-section + .dash-section { margin-top: 36px; }
.rdv-soon { color: var(--terracotta); font-weight: 600; }
.rdv-past { color: var(--red); font-weight: 600; }
.empty-state { color: var(--gray-soft); padding: 20px; text-align: center; background: var(--white); border: 1px dashed var(--gray-light); border-radius: 12px; }
.tag-flags { display: inline-flex; gap: 6px; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .container { padding: 20px 16px; }
}