/* -----------------------------------------------------------------------------
   BASIS
----------------------------------------------------------------------------- */
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f6f8;
  margin: 0;
  padding: 0;
  color: #222;
}
h1, h2 { margin: 0 0 15px 0; font-weight: 600; }
a { text-decoration: none; color: #0366d6; }
a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   HEADER & NAVIGATIE
----------------------------------------------------------------------------- */
header { background: #1f2937; color: white; padding: 20px; text-align: center; }
nav {
  background: #374151;
  padding: 10px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
nav a {
  color: #d1d5db;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}
nav a.active { background: #111827; color: #fff; font-weight: 600; }
nav a:hover { background: #4b5563; color: #fff; }

/* -----------------------------------------------------------------------------
   KAARTEN / CONTAINERS
----------------------------------------------------------------------------- */
.card {
  background: white;
  padding: 20px;
  margin: 20px auto;
  width: 95%;
  max-width: 1100px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* -----------------------------------------------------------------------------
   FORMULIEREN
----------------------------------------------------------------------------- */
input[type="text"], input[type="number"], select {
  padding: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
}
input[type="submit"] {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
input[type="submit"]:hover { background: #1e40af; }
.inline { display: inline-block; margin-right: 10px; }

/* -----------------------------------------------------------------------------
   TABELLEN
----------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table th {
  background: #e5e7eb;
  padding: 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #d1d5db;
}
table td { padding: 8px; border-bottom: 1px solid #e5e7eb; }
table tr:nth-child(even) { background: #f9fafb; }

/* -----------------------------------------------------------------------------
   BADGES (dynamisch op basis van taakcode)
----------------------------------------------------------------------------- */
.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
  font-weight: 600;
}

/* bekende taken (standaard) */
.badge-tel       { background: #2563eb; } /* blauw */
.badge-mail      { background: #059669; } /* groen */
.badge-aanvragen { background: #d97706; } /* oranje */
.badge-thuiswerk { background: #0ea5e9; } /* cyaan */

/* nieuwe taak: loket */
.badge-loket {
    background: #7c3aed;  /* of een kleur die je mooi vindt */
    color: white;
}


/* fallback/generiek */
.badge-none { background: #9ca3af; } /* grijs */

/* nieuw: IA-label */
.badge-ia { background: #7c3aed; } /* paars */

/* planning/tabel */
.planning-table th, .planning-table td { text-align: center; }
.task-cell { padding: 6px; }

/* delete-knop stijl */
input[type="submit"][style*="background:#dc2626"],
button[style*="background:#dc2626"] {
  background: #dc2626 !important;
}
input[type="submit"][style*="background:#dc2626"]:hover,
button[style*="background:#dc2626"]:hover {
  background: #b91c1c !important;
}

/* Dashboard utils */
.summary-box{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.muted{ color:#6b7280; font-size:14px; }

/* waarschuwing */
.warning-box {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 15px;
  color: #92400e;
  font-size: 14px;
}