/* Sidebar: vaste breedte voor Font Awesome iconen zodat ze altijd zichtbaar zijn */
.sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  min-width: 1.25rem;
  flex-shrink: 0;
  font-size: 1rem;
}
.sidebar-icon i,
.sidebar-icon .fa-solid,
.sidebar-icon .fa-regular,
.sidebar-icon .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
  font-weight: 900;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-size: inherit;
  color: inherit;
}
.sidebar-icon .fa-regular { font-weight: 400 !important; }
.sidebar-icon .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* Kleine util voor badges / toasts */
.badge { @apply inline-block rounded bg-slate-100 px-2 py-1 text-xs dark:bg-gray-700 dark:text-gray-200; }

/* Form fields: duidelijke invoervelden en dropdowns (min 44px touch target) */
.input-field {
  @apply block w-full rounded-lg border-2 border-gray-300 bg-gray-50 px-4 py-2.5 text-gray-900 placeholder-gray-500;
  @apply focus:border-brand-blue focus:bg-white focus:ring-2 focus:ring-brand-blue/20 focus:outline-none;
  @apply dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:bg-gray-700;
  @apply transition-colors;
  min-height: 44px;
}
.select-field {
  @apply block w-full rounded-lg border-2 border-gray-300 bg-gray-50 px-4 py-2.5 pr-10 text-gray-900;
  @apply focus:border-brand-blue focus:bg-white focus:ring-2 focus:ring-brand-blue/20 focus:outline-none;
  @apply dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:focus:bg-gray-700;
  @apply transition-colors;
  min-height: 44px;
}
.select-field option { @apply bg-white text-gray-900; }
.dark .select-field option { @apply bg-gray-700 text-gray-100; }

/* Touch-friendly: tap highlight and prevent double-tap zoom on buttons/links */
button, a, [role="button"] {
  -webkit-tap-highlight-color: rgba(0, 150, 199, 0.15);
  touch-action: manipulation;
}

/* Table wrapper: horizontal scroll with smooth touch scrolling */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Toast and A2HS: respect safe areas (notch, home indicator) */
.toast-container {
  margin-bottom: max(1rem, env(safe-area-inset-bottom));
  margin-right: max(1rem, env(safe-area-inset-right));
}
.a2hs-banner {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Brand blue color */
.bg-brand-blue { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.text-brand-blue { color: #2563eb; }
.hover\:text-blue-900:hover { color: #1e3a8a; }
.border-brand-blue { border-color: #2563eb; }
.hover\:border-brand-blue:hover { border-color: #2563eb; }
.focus\:border-brand-blue:focus { border-color: #2563eb; }
.focus\:ring-brand-blue:focus { --tw-ring-color: #2563eb; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.text-blue-800 { color: #1e40af; }
.bg-blue-700 { background-color: #1d4ed8; }
.from-brand-blue { --tw-gradient-from: #2563eb; }
.to-blue-700 { --tw-gradient-to: #1d4ed8; }