/* components.css — Boutons, inputs, tableaux de saisie SecuPaie */

/* ─── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Tailles */
.btn--sm { padding: .35rem .75rem; font-size: .8rem; }
.btn--lg { padding: .65rem 1.4rem; font-size: 1rem; }
.btn--icon { padding: .45rem; }

/* Variantes */
.btn--primaire {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--primaire:hover { background: #1d4ed8; border-color: #1d4ed8; text-decoration: none; color: #fff; }

.btn--sombre {
  background: var(--primaire);
  color: #fff;
  border-color: var(--primaire);
}
.btn--sombre:hover { background: #0f1e33; border-color: #0f1e33; text-decoration: none; color: #fff; }

.btn--succes {
  background: var(--succes);
  color: #fff;
  border-color: var(--succes);
}
.btn--succes:hover { background: #15803d; border-color: #15803d; text-decoration: none; color: #fff; }

.btn--danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn--danger:hover { background: #b91c1c; border-color: #b91c1c; text-decoration: none; color: #fff; }

.btn--contour {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn--contour:hover { background: #eff6ff; text-decoration: none; }

.btn--ghost {
  background: transparent;
  color: var(--texte-sec);
  border-color: var(--bordure);
}
.btn--ghost:hover { background: var(--fond); color: var(--texte); text-decoration: none; }

.btn--danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: var(--bordure);
}
.btn--danger-ghost:hover { background: #fee2e2; border-color: var(--danger); text-decoration: none; }

/* ─── Tableau de saisie des lignes de travail ────────────────────────────── */
.saisie-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--bordure);
}

table.saisie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  min-width: 580px;
}

.saisie-table th {
  background: #f1f5f9;
  color: var(--texte-sec);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--bordure);
}

.saisie-table td {
  padding: .35rem .4rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
}
.saisie-table tbody tr:last-child td { border-bottom: none; }

/* Inputs dans le tableau */
.saisie-table .form-input {
  padding: .3rem .5rem;
  font-size: .85rem;
}
.saisie-table .col-jour  { width: 70px; }
.saisie-table .col-lieu  { min-width: 140px; }
.saisie-table .col-heure { width: 110px; }
.saisie-table .col-action { width: 48px; text-align: center; }

/* Ligne colorée selon type de jour */
.saisie-table .ligne-dimanche { background: #faf5ff; }
.saisie-table .ligne-ferie    { background: #fff7ed; }
.saisie-table .ligne-dimanche .form-input,
.saisie-table .ligne-ferie    .form-input { border-color: transparent; background: rgba(255,255,255,.7); }

/* ─── Panneau de calcul temps réel ──────────────────────────────────────── */
.calcul-panel {
  background: #f0f6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
}
.calcul-panel__title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--primaire);
  margin-bottom: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.calcul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem;
}
.calcul-item {
  background: var(--blanc);
  border-radius: var(--radius-sm);
  padding: .6rem .85rem;
  border: 1px solid var(--bordure);
}
.calcul-item__label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--texte-sec);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}
.calcul-item__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primaire);
  font-variant-numeric: tabular-nums;
}
.calcul-item--total  .calcul-item__value { color: var(--accent); }
.calcul-item--panier .calcul-item__value { color: var(--succes); }
.calcul-item--nuit   .calcul-item__value { color: #6d28d9; }
.calcul-item--dim    .calcul-item__value { color: #7e22ce; }
.calcul-item--ferie  .calcul-item__value { color: #c2410c; }

/* ─── Carte agent (résultats) ────────────────────────────────────────────── */
.agent-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  box-shadow: var(--ombre);
  overflow: hidden;
  margin-bottom: 1rem;
}
.agent-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--primaire);
  color: #fff;
}
.agent-card__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.agent-card__actions {
  display: flex;
  gap: .5rem;
}
.agent-card__body {
  padding: 1rem 1.25rem;
}

/* ─── Fériés liste (paramètres) ──────────────────────────────────────────── */
.feries-liste {
  list-style: none;
}
.feries-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--bordure);
  gap: .5rem;
}
.feries-item:last-child { border-bottom: none; }
.feries-item__date {
  font-weight: 600;
  color: var(--primaire);
  min-width: 110px;
  font-variant-numeric: tabular-nums;
}
.feries-item__label {
  flex: 1;
  color: var(--texte);
  font-size: .9rem;
}
.feries-item__badge { margin-left: auto; }

/* ─── Section règles (paramètres) ───────────────────────────────────────── */
.regles-block {
  background: #f8fafc;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}
.regles-block p { margin-bottom: .5rem; font-size: .9rem; line-height: 1.6; }
.regles-block p:last-child { margin-bottom: 0; }
.regles-block strong { color: var(--primaire); }

/* ─── Spinner chargement ─────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(37,99,235,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .btn { font-size: .85rem; padding: .45rem .9rem; }
  .calcul-grid { grid-template-columns: 1fr 1fr; }
  .agent-card__header { flex-direction: column; align-items: flex-start; gap: .5rem; }
}