/* ===== app.css ===== */

/* Tokens (variables) */
:root {
  --bg:#f8f9fb; 
  --card:#ffffff; 
  --text:#1f2328; 
  --muted:#6b7280; 
  --border:#e5e7eb;

  --primary:#0d6efd; 
  --primary-600:#0b5ed7; 
  --success:#198754; 
  --danger:#dc3545; 
  --warning:#f59e0b;

  --radius:12px; 
  --shadow:0 6px 18px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ===== Layout ===== */
header {
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1.1rem;
  position:sticky;
  top:0;
  z-index:10;
}
header .brand { font-weight:700; letter-spacing:.3px; }
header .auth { display:flex; align-items:center; gap:.8rem; }
header .auth a { color:#fff; text-decoration:none; opacity:.9; }
header .auth a:hover { opacity:1; }
header .auth .username { color:#fff; margin-right:.1rem; white-space:nowrap; }

nav.main-nav { display:flex; gap:.9rem; flex-wrap:wrap; }
nav.main-nav a {
  color:#fff;
  text-decoration:none;
  opacity:.9;
  padding:.2rem .35rem;
  border-radius:var(--radius);
}
nav.main-nav a:hover {
  opacity:1;
  background:rgba(255,255,255,.12);
}

main { flex:1 0 auto; padding:1.2rem; max-width:none; margin:0 auto; }

footer.site-footer {
  flex:0 0 auto;
  border-top: 1px solid var(--border);
  background: #fafafa;
  padding: 12px 16px;
  font-size: 14px;
}
.site-footer .footer-inner {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
}
.site-footer .left { justify-self:start; }
.site-footer .center { text-align:center; }
.site-footer .right { justify-self:end; }
.site-footer a { color:inherit; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* ===== Cards/Sections ===== */
.section, .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ===== Headings ===== */
h1,h2,h3 { margin:.2rem 0 1rem 0; }
h1 { font-size:1.5rem; }
h2 { font-size:1.25rem; }
.muted { color: var(--muted); }

/* ===== Forms ===== */
form { display:block; }
.search-form {
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.search-form input[type="text"],
input[type="text"], input[type="date"], input[type="email"], 
input[type="password"], textarea, select {
  width:100%;
  max-width:520px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius);
  padding:.55rem .7rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
textarea { min-height:120px; }
input:focus,textarea:focus,select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(13,110,253,.12);
}
.form-wrap { max-width:900px; margin:0 auto; }
.form-row { display:flex; gap:1rem; flex-wrap:wrap; }
.form-group { flex:1; min-width:240px; }

/* ===== Buttons ===== */
.btn {
  display:inline-block;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:.5rem .85rem;
  border-radius:var(--radius);
  cursor:pointer;
  text-decoration:none;
  transition:transform .02s, background .2s, border-color .2s, color .2s;
}
.btn:hover { background:#f3f4f6; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.6; pointer-events:none; }

.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-600); border-color:var(--primary-600); }

.btn-success { background:var(--success); color:#fff; border-color:var(--success); }
.btn-success:hover {
  background:#fff;
  color:var(--success);
  border-color:var(--success);
}

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

.btn-warning { background:var(--warning); color:#111; border-color:var(--warning); }

.btn-container { display:inline-flex; gap:.5rem; }

/* ===== Tables ===== */

/* Conteneur du tableau : largeur stable 80% (avant/après recherche) */
.table-wrapper {
  width: 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: auto;
  /* Si un parent est en flex, éviter que ça rétrécisse après submit */
  flex: 0 0 auto !important;
}

/* Le tableau remplit toujours son conteneur */
.responsive-table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Colonnes auto (pas de largeur figée) */
  table-layout: auto !important;
  overflow: hidden;
}

.responsive-table thead th {
  background:#f6f7fb;
  text-align:left;
  font-weight:600;
  font-size:.92rem;
  padding:.7rem .6rem;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.responsive-table td {
  padding:.6rem;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.responsive-table tr:last-child td { border-bottom:none; }
.responsive-table tbody tr:hover { background:#fafbff; }

.centered { text-align:left; }
.text-center { text-align:center; }
.nowrap { white-space:nowrap; }

/* Mobile : passer à 100% pour respirer */
@media (max-width:900px) {
  .table-wrapper {
    width: 100% !important;
  }
  .responsive-table { width:100% !important; max-width:100% !important; }
}

/* ===== Alerts ===== */
.alert {
  padding:.7rem .9rem;
  border-radius:var(--radius);
  margin:.8rem 0;
  border:1px solid transparent;
}
.alert-success { background:#e7f7ed; color:#0f5132; border-color:#badbcc; }
.alert-danger  { background:#fdecea; color:#842029; border-color:#f5c2c7; }
.alert-warning { background:#fff7ed; color:#92400e; border-color:#fed7aa; }
.alert-info    { background:#eef6ff; color:#1d4ed8; border-color:#bfdbfe; }

/* ===== Badges ===== */
.badge {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--border);
  background:#fff;
}
.badge.success { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.badge.danger  { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.badge.warning { background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ===== Module de connexion ===== */
.login-box {
  width: 60%;
  max-width: 700px;
  min-width: 300px;
  margin: 10vh auto;
  background: #fff;
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
}
.login-box h1 { text-align: center; margin-bottom: 1rem; }
.login-box .btn-group {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 1rem;
}

/* ===== Dashboard (centrage + accueil) ===== */
.dashboard { display:flex; justify-content:center; }
.dashboard-inner { width:100%; max-width:900px; margin:0 auto; }
.hero-welcome { text-align:center; padding:1.4rem; }
.hero-welcome h1 { font-size:1.8rem; margin-bottom:.4rem; }

/* Barre de recherche centrée */
.centered-form {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  margin:1.1rem auto 0;
}
.centered-form input[type="text"] { width:100%; max-width:480px; }

/* Grille du dashboard */
.cards-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
  margin-top:1rem;
}
@media (max-width: 1000px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards-grid { grid-template-columns: 1fr; } }

/* ===== Boutons centrés + espacés réutilisables ===== */
.center-btns {
  display: flex;
  justify-content: center;
  gap: 0.8rem;         /* espace entre boutons */
  margin-bottom: 1rem; /* espace dessous */
}
.btn-block {
  margin-top: 1.2rem;  /* espace au-dessus pour décoller des champs */
}

/* ===== Forcer la largeur du tableau SAV à 80% (avant/après recherche) ===== */
#sav-table {
  width: 80% !important;          /* largeur cible */
  margin-left: auto !important;    /* centré */
  margin-right: auto !important;
  overflow-x: auto;                /* scroll si trop de colonnes */
  flex: 0 0 auto !important;       /* ne pas se faire rétrécir par un parent flex */
}

/* Le tableau remplit son conteneur */
#sav-table .responsive-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}

/* Neutraliser d'éventuelles contraintes héritées */
#sav-table, 
#sav-table * {
  max-width: none !important;
}

/* Sur mobile, on laisse respirer: plein écran */
@media (max-width: 900px) {
  #sav-table { width: 100% !important; }
}