/* Werkbonnenapp Questo - Material Design stylesheet */

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #37474F;
  background: #F5F5F5;
}

a { color: #1565C0; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: #1A237E; }
h1 { font-size: 22px; font-weight: 500; margin-top: 0; }
h2 { font-size: 17px; font-weight: 500; }

/* === TOPBAR === */
.topbar {
  background: #1565C0;
  color: white;
  padding: 0 24px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  border-radius: 8px;
}
.topbar strong { color: white; font-weight: 500; }
.topbar a.nav { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; }
.topbar a.nav:hover { color: white; text-decoration: none; }
.topbar .sep { color: rgba(255,255,255,0.35); margin: 0 10px; }

/* === CARD === */
.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card h1, .card h2 { margin-top: 0; }

/* === KNOPPEN === */
.button {
  display: inline-block;
  padding: 8px 18px;
  background: #1565C0;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.button:hover { background: #0D47A1; text-decoration: none; color: white; }
.button-ghost { background: white; color: #1565C0; border: 1px solid #1565C0; }
.button-ghost:hover { background: #E3F2FD; }
.button-small { padding: 5px 12px; font-size: 13px; }

/* === TABELLEN === */
table {
  border-collapse: collapse;
  width: 100%;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
th, td {
  border-bottom: 1px solid #ECEFF1;
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
th {
  background: #ECEFF1;
  color: #78909C;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
tr:hover td { background: #FAFAFA; }
tr:last-child td { border-bottom: none; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #E3F2FD; color: #1565C0; }
th.sortable::after { content: ' \2195'; opacity: 0.4; }
th.sort-asc::after  { content: ' \25B2'; opacity: 1; color: #1565C0; }
th.sort-desc::after { content: ' \25BC'; opacity: 1; color: #1565C0; }

/* === FILTER === */
.filters {
  background: white;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.filters .label { font-weight: 500; margin-right: 4px; color: #78909C; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.filter-pill {
  display: inline-block;
  padding: 5px 14px;
  background: white;
  color: #546E7A;
  text-decoration: none;
  border: 1px solid #B0BEC5;
  border-radius: 16px;
  font-size: 13px;
}
.filter-pill:hover { background: #E3F2FD; border-color: #1565C0; color: #1565C0; text-decoration: none; }
.filter-pill.active { background: #1565C0; color: white; border-color: #1565C0; }

/* === FASE & STATUS PILLEN === */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}
.status-concept              { background: #90A4AE; }
.status-klaar_voor_productie { background: #1565C0; }
.status-in_productie         { background: #2E7D32; }
.status-afgerond             { background: #558B2F; }

.phase-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 110px;
  text-align: center;
  background: #ECEFF1;
  color: #546E7A;
}
.phase-pill.phase-1  { background: #F1F8E9; color: #558B2F; }
.phase-pill.phase-2  { background: #FFF8E1; color: #F57F17; }
.phase-pill.phase-5  { background: #E8F5E9; color: #2E7D32; }
.phase-pill.phase-7  { background: #FFF3E0; color: #E65100; }
.phase-pill.phase-10 { background: #FAFAFA; color: #90A4AE; }
.phase-pill.phase-12 { background: #EDE7F6; color: #4527A0; }
.phase-pill.phase-13 { background: #E3F2FD; color: #1565C0; }
.phase-pill.phase-14 { background: #F3E5F5; color: #6A1B9A; }

/* Werkbon pill */
.pill-werkbon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 110px;
  max-width: 110px;
  text-align: center;
  line-height: 1.4;
}
.pill-werkbon-yes { background: #FFF3E0; color: #E65100; }
.pill-werkbon-no  { background: #F5F5F5; color: #90A4AE; }

/* === MELDINGEN === */
.error   { background: #FFEBEE; border: 1px solid #EF9A9A; padding: 12px 16px; border-radius: 6px; color: #B71C1C; margin-bottom: 16px; }
.success { background: #E8F5E9; border: 1px solid #A5D6A7; padding: 12px 16px; border-radius: 6px; color: #1B5E20; margin-bottom: 16px; }
.warning { background: #FFF8E1; border: 1px solid #FFE082; padding: 12px 16px; border-radius: 6px; color: #F57F17; margin-bottom: 16px; }
.empty   { padding: 32px; text-align: center; color: #90A4AE; font-style: italic; background: white; border: 1px dashed #B0BEC5; border-radius: 8px; }

/* === FORM ELEMENTEN === */
input[type="text"], input[type="number"], input[type="date"], input[type="email"], textarea, select {
  padding: 8px 12px;
  border: 1px solid #B0BEC5;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  color: #37474F;
  background: white;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #1565C0;
  box-shadow: 0 0 0 2px rgba(21,101,192,.12);
}
textarea { resize: vertical; min-height: 70px; }
label { font-weight: 500; font-size: 13px; color: #546E7A; }

/* === KNOPPEN IN TABEL === */
.button-action {
  display: inline-block;
  padding: 5px 14px;
  background: #1565C0;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.button-action:hover { background: #0D47A1; text-decoration: none; color: white; }

.button-light {
  display: inline-block;
  padding: 5px 14px;
  background: #E3F2FD;
  color: #1565C0;
  text-decoration: none;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #BBDEFB;
}
.button-light:hover { background: #BBDEFB; color: #0D47A1; text-decoration: none; }