/* Mobile-first from 360px (REQ-058); WCAG 2.1 AA contrast targets */
:root { --ink:#1a2233; --muted:#5a6478; --brand:#0a5c4e; --bg:#f6f7f9; --card:#fff; --danger:#a4262c; --ok:#0d6832; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); font-size:16px; line-height:1.5; }
main { max-width: 640px; margin: 0 auto; padding: 1rem; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:var(--brand); color:#fff; padding:.75rem 1rem; }
.topbar a { color:#fff; text-decoration:none; margin-left:.75rem; }
.brand { font-weight:700; margin-left:0 !important; }
.badge { background:#ffd23f; color:#000; border-radius:9px; padding:0 .4em; font-size:.75rem; vertical-align:top; }
h1 { font-size:1.4rem; } h2 { font-size:1.15rem; }
.card { background:var(--card); border-radius:10px; padding:1rem; margin:.75rem 0; box-shadow:0 1px 3px rgb(0 0 0 / .08); }
label { display:block; font-weight:600; margin:.75rem 0 .25rem; }
input, select, textarea { width:100%; padding:.6rem; font-size:1rem; border:1px solid #c3c9d4; border-radius:8px; }
input:focus, select:focus, textarea:focus, a:focus, button:focus { outline:3px solid #7ab8ff; outline-offset:1px; }
button, .btn { display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:8px; padding:.7rem 1.2rem; font-size:1rem; cursor:pointer; text-decoration:none; margin-top:.75rem; }
.btn-outline { background:transparent; color:var(--brand); border:2px solid var(--brand); }
.btn-danger { background:var(--danger); }
.msg { padding:.6rem .9rem; border-radius:8px; }
.msg-error { background:#fbe9ea; color:var(--danger); }
.msg-success { background:#e7f4ec; color:var(--ok); }
.status { display:inline-block; padding:.1em .6em; border-radius:999px; font-size:.85rem; font-weight:600; background:#e3e7ee; }
.status-BOOKED { background:#dcefe4; color:var(--ok); }
.status-REJECTED, .status-EXPIRED { background:#fbe9ea; color:var(--danger); }
.status-PENDING, .status-UNDER_REVIEW { background:#fff3cd; color:#6a4d00; }
.meta { color:var(--muted); font-size:.9rem; }
ul.plain { list-style:none; padding:0; }
.slot-option { display:flex; gap:.5rem; align-items:center; padding:.5rem; border:1px solid #d6dbe4; border-radius:8px; margin:.4rem 0; }
table { width:100%; border-collapse:collapse; } td, th { text-align:left; padding:.4rem .5rem; border-bottom:1px solid #e3e7ee; }
@media (min-width: 720px) { main { padding:2rem 1rem; } }
/* Parent dashboard: absences | bookings per child; stacked on phones (REQ-058) */
h3 { font-size:1rem; margin:.25rem 0 .5rem; }
.two-col { display:grid; gap:.75rem; }
@media (min-width: 720px) { .two-col { grid-template-columns:1fr 1fr; } }
.row { padding:.6rem 0; border-top:1px solid #e3e7ee; }
.row:first-of-type { border-top:0; }
.row .btn { margin-top:.25rem; }
form.inline { display:inline; }
.linklike { background:none; border:0; color:#fff; font:inherit; cursor:pointer; padding:0; margin:0 0 0 .75rem; text-decoration:none; }
/* Month calendar of missed classes */
.cal-nav { display:flex; justify-content:space-between; align-items:center; margin:0 0 .5rem; }
.cal-nav a { text-decoration:none; font-size:1.4rem; line-height:1; padding:0 .6rem; color:var(--brand); }
.cal { table-layout:fixed; font-size:.85rem; }
.cal th { font-weight:600; color:var(--muted); text-align:center; padding:.2rem 0; border:0; }
.cal td { text-align:center; vertical-align:top; height:2.7rem; padding:.15rem 0; border:0; border-top:1px solid #eef0f4; }
.cal .d { display:block; }
.cal td.other .d { color:#b5bcc9; }
.cal td.today .d { font-weight:700; color:var(--brand); }
.dot { display:inline-block; min-width:1.25rem; height:1.25rem; line-height:1.25rem; border-radius:999px; background:var(--danger); color:#fff; font-size:.7rem; font-weight:700; margin:1px; cursor:default; }
ul.missed li { padding:.45rem 0; border-top:1px solid #e3e7ee; }
.dot-done { background:#c3c9d4; color:#1a2233; }
ul.missed li.done { color:var(--muted); }