/* ========== Mise en page globale ========== */
:root { --c1:#0ea5e9; --muted:#6b7280; }

.wrap{
  max-width:1100px;
  margin:16px auto;
  padding:0 12px;
}

.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  margin:12px 0;
}

.tile-icon{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
}

/* ========== TOPBAR (avec bouton Home à droite) ========== */
#topbar{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
}
#topbar .left{ display:flex; gap:12px; align-items:center; }
#topbar .brand{ font-weight:700; }
#topbar .right{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* Bouton Home (gros, facile à cliquer) */
.top-home{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid #d1d5db; border-radius:10px;
  font-size:20px; background:#fff;
}
.top-home:hover{ background:#f3f4f6; }

/* ========== Barre d’actions (boutons uniformes) ========== */
.toolbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}

/* Boutons uniformes dans la toolbar */
.toolbar .btn,
.toolbar .btn-outline,
.toolbar form button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:160px;               /* largeur uniforme */
  padding:10px 14px;
  border-radius:10px;
  line-height:1.2; text-align:center; white-space:nowrap;
}

/* Styles de base des boutons */
.btn{ border:1px solid var(--c1); background:var(--c1); color:#fff; }

/* Bouton outline (pour Réinitialiser) */
.btn-outline {
    background: transparent;
    border: 1px solid var(--c1);
    color: var(--c1) !important;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-indent: 0 !important;
    overflow: visible;
}

.btn-outline:hover {
    background: var(--c1);
    color: #fff !important;
    border-color: var(--c1);
}

.btn-dark{ background:#111827; border-color:#111827; color:#fff; }

/* Mobile : 2 colonnes dans les toolbars */
@media (max-width:640px){
  .toolbar .btn,
  .toolbar .btn-outline,
  .toolbar form button{
    flex:1 1 calc(50% - 10px);
    min-width:0;
  }
}

/* Barre d’actions au-dessus de la fiche mission */
.actions-bar .btn,
.actions-bar .btn-outline {
  min-width: 170px;
  text-align: center;
}

/* Adaptation mobile/tablette */
@media (max-width: 720px) {
  .actions-bar { justify-content: center; }
  .actions-bar .btn,
  .actions-bar .btn-outline { flex: 1; }
}

/* ========== Actions dans les tableaux (ex: Contrats) ========== */
.table-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.table-actions .btn,
.table-actions .btn-outline,
.table-actions form button{
  min-width:100px;
  padding:8px 14px;
  border-radius:8px;
  font-size:14px;
  line-height:1.2;
  text-align:center;
  justify-content:center;
}

/* Variante danger pour Supprimer (discrète et cohérente) */
.table-actions .btn-outline.danger{
  border-color:#f87171;
  color:#b91c1c;
}
.table-actions .btn-outline.danger:hover{
  background:#fee2e2;
}

/* Responsive: 2 boutons par ligne si étroit */
@media (max-width:640px){
  .table-actions .btn,
  .table-actions .btn-outline,
  .table-actions form button{
    flex:1 1 140px;
    min-width:0;
  }
}

/* ========== Formulaire de filtres (visits.php) ========== */
.filters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  align-items:end;
}

.filters-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  grid-column:1/-1;
}

/* Variantes de boutons */
.btn-success{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}
.btn-success:hover{
  background:#15803d;
  border-color:#15803d;
}

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

/* Responsive pour les filtres */
@media (max-width:768px){
  .filters-grid{
    grid-template-columns:1fr;
  }
  .filters-actions{
    justify-content:stretch;
  }
  .filters-actions .btn{
    flex:1;
  }
}