body {
  font-size: 0.9rem;
}

.navbar {
  min-height: 56px;
}

.card {
  border-radius: 12px;
}

.card-header {
  border-radius: 12px 12px 0 0 !important;
  font-size: 0.875rem;
}

.table th {
  font-size: 0.775rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
}

.bg-primary.bg-opacity-10 { background-color: rgba(13,110,253,0.1) !important; }
.bg-success.bg-opacity-10 { background-color: rgba(25,135,84,0.1) !important; }
.bg-warning.bg-opacity-10 { background-color: rgba(255,193,7,0.1) !important; }
.bg-info.bg-opacity-10    { background-color: rgba(13,202,240,0.1) !important; }
.bg-success-subtle        { background-color: rgba(25,135,84,0.1); }
.bg-danger-subtle         { background-color: rgba(220,53,69,0.1); }

.sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 10;
}

input[type=text][style*="letter-spacing"] {
  caret-color: #0d6efd;
}

/* ── Responsive tabellen ────────────────────────────────────────────────── */
/*
 * Tabellen in .card-body zonder .table-responsive wrapper worden op kleine
 * schermen horizontaal scrollbaar via display:block + overflow-x:auto.
 * Reeds gewikkelde tabellen (card-body > div.table-responsive > table)
 * vallen hier niet onder omdat de tabel dan geen directe child van card-body is.
 */
@media (max-width: 767.98px) {
  .card-body > .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals: tabellen in modal-body ook scrollbaar */
  .modal-body .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ruimere touch-targets voor knoppen in tabelrijen */
  .table .btn-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }

  /* Kaartkoppen met knoppen mogen wrappen */
  .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Settings pagina: minder padding zodat tabellen meer ruimte hebben */
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .card-body {
    padding: 1rem;
  }

  /* Rapportages formulier: knoppen full-width */
  #reportForm .btn {
    width: 100%;
  }

  /* Dashboard periode-knoppen mogen wrappen */
  .btn-group.btn-group-sm {
    flex-wrap: wrap;
  }
}

/* ── Navigatie op tablet/telefoon ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Uitklapbaar menu: lichte scheiding tussen items */
  .navbar-collapse .nav-item + .nav-item {
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  /* Gebruikersnaam + uitlogknop in aparte sectie */
  .navbar-collapse .d-flex.align-items-center {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 0.25rem;
  }
}

/* ── Print-stijlen ─────────────────────────────────────────────────────── */
@media print {
  .navbar, .btn, .alert-dismissible .btn-close { display: none !important; }
  .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
  .table-responsive { overflow: visible !important; }
  body { font-size: 0.8rem; }
}