* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", Arial, sans-serif; color: #222; background: #f6f8fa; }
main { max-width: 820px; margin: 0 auto; padding: 12px 14px 80px; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  background: #1F4E78; color: white; padding: 10px 14px;
}
.topbar .brand { color: white; text-decoration: none; font-weight: 700; font-size: 18px; }
.topbar .user { margin-left: auto; font-size: 14px; }
.topbar .user em { background: #ffd76b; color: #5a4500; padding: 1px 6px; border-radius: 8px; font-style: normal; font-size: 11px; margin-left: 4px; }
.btn-mini {
  background: rgba(255,255,255,0.15); color: white; padding: 4px 10px;
  border-radius: 4px; text-decoration: none; font-size: 13px; border: none; cursor: pointer;
}
.btn-mini:hover { background: rgba(255,255,255,0.25); }

h1 { font-size: 24px; margin: 12px 0 4px; color: #1F4E78; }
h2 { font-size: 18px; margin: 24px 0 8px; color: #1F4E78; }
h3 { font-size: 16px; margin: 16px 0 6px; color: #1F4E78; }
.muted { color: #666; font-size: 14px; }
.muted.small, .small { font-size: 12px; }
.back { display: inline-block; color: #1F4E78; text-decoration: none; font-size: 14px; margin: 8px 0; }
.back-mini { display: inline-block; color: #1F4E78; text-decoration: none; font-size: 13px; margin: 0 0 8px; }

.card {
  background: white; border: 1px solid #d0d7de; border-radius: 8px;
  padding: 14px 16px; margin: 12px 0;
}
.card h2 a { color: #1F4E78; text-decoration: none; }

.login { max-width: 380px; margin: 24px auto; }
.login label { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.login input { width: 100%; padding: 10px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 16px; }
.msg { background: #eef6ff; padding: 8px 12px; border-radius: 6px; margin-top: 12px; font-size: 14px; color: #1F4E78; }

.btn-primary {
  background: #1F4E78; color: white; padding: 10px 16px; border: none;
  border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 600;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: #163654; }

.leerling-list, .les-list { list-style: none; padding: 0; }
.leerling-list li, .les-list li {
  background: white; border: 1px solid #d0d7de; border-radius: 6px;
  padding: 10px 12px; margin-bottom: 6px;
}
.leerling-list li a, .les-list li a { color: #1F4E78; text-decoration: none; font-weight: 500; }
.les-list .vandaag { background: #fff4ce; padding: 2px 6px; border-radius: 4px; }

.aanwezig-list { list-style: none; padding: 0; }
.aanwezig-list li {
  display: flex; align-items: center; gap: 8px;
  background: white; border: 1px solid #d0d7de; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
}
.aanwezig-list .ll-name { flex: 1; }
.aanwezig-list .ll-name a { color: #1F4E78; text-decoration: none; font-weight: 500; }
.aanwezig-cell { display: flex; gap: 4px; }
.aanwezig-cell.single { padding: 8px 0; }

.btn-aanwezig, .btn-score {
  border: 2px solid #d0d7de; background: white;
  width: 44px; height: 44px; border-radius: 8px; font-size: 18px; font-weight: 700;
  cursor: pointer; padding: 0; line-height: 1; color: #666;
}
.btn-aanwezig.active, .btn-score.active { color: white; border-color: transparent; }
.btn-aanwezig.aw-ok.active   { background: #1f9d55; }
.btn-aanwezig.aw-laat.active { background: #d6a500; color: #3a2c00; }
.btn-aanwezig.aw-x.active    { background: #c0392b; }
.btn-score.sc-plus.active    { background: #1f9d55; }
.btn-score.sc-neu.active     { background: #d6a500; color: #3a2c00; }
.btn-score.sc-min.active     { background: #c0392b; }

.row-actions { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; }
.btn-bulk { background: #1f9d55 !important; }
.btn-bulk:hover { background: #167a40 !important; }

.ll-nav { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0; align-items: center; }
.ll-nav.bottom { margin: 24px 0 8px; }
.ll-nav .btn-mini, .ll-nav .btn-primary { background: #1F4E78; color: white; padding: 8px 12px; border-radius: 6px; }
.ll-nav .btn-primary { padding: 10px 16px; }

.progress-pill {
  display: inline-block; background: #eef; color: #1F4E78;
  padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-left: 6px;
}

.scoretable { width: 100%; border-collapse: collapse; }
.scoretable th, .scoretable td { padding: 6px 4px; border-bottom: 1px solid #e5e9ee; font-size: 14px; }
.scoretable th { text-align: left; background: #f6f8fa; }
.scoretable .score-cell { display: flex; gap: 4px; }

textarea {
  width: 100%; padding: 10px; border: 1px solid #d0d7de; border-radius: 6px;
  font-family: inherit; font-size: 14px; resize: vertical;
}
.row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.saved { color: #1f9d55; font-size: 13px; }

.aw-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 16px; }
.aw-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 600;
  background: #f0f2f4; color: #999;
}
.aw-pill.aw-aanwezig { background: #c6efce; color: #155724; }
.aw-pill.aw-laat     { background: #fff2cc; color: #5a4500; }
.aw-pill.aw-afwezig  { background: #fbd1cc; color: #6a1812; }

.grid-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d0d7de; border-radius: 6px; background: white; }
.grid { border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { padding: 6px 8px; border-bottom: 1px solid #e5e9ee; border-right: 1px solid #e5e9ee; min-width: 36px; text-align: center; }
.grid th.sticky, .grid td.sticky { position: sticky; left: 0; background: white; text-align: left; min-width: 200px; max-width: 240px; z-index: 1; }
.grid thead th { background: #1F4E78; color: white; }
.grid thead th.sticky { background: #1F4E78; color: white; }
.cell.sc-plus { background: #c6efce; color: #155724; font-weight: 700; }
.cell.sc-neu  { background: #fff2cc; color: #5a4500; font-weight: 700; }
.cell.sc-min  { background: #fbd1cc; color: #6a1812; font-weight: 700; }

.opm-list { list-style: disc; padding-left: 24px; }
.opm-list li { margin-bottom: 6px; font-size: 14px; }

.beheer-table { width: 100%; border-collapse: collapse; }
.beheer-table th, .beheer-table td { padding: 8px; border-bottom: 1px solid #e5e9ee; font-size: 14px; text-align: left; }
.beheer-table input[type=email] { padding: 6px 8px; border: 1px solid #d0d7de; border-radius: 4px; }

@media (max-width: 600px) {
  main { padding: 10px 10px 80px; }
  h1 { font-size: 20px; }
  .btn-aanwezig, .btn-score { width: 40px; height: 40px; font-size: 17px; }
}