:root {
    color-scheme: light;
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: rgb(71 85 105);
}

.form-input {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgb(203 213 225);
    background: white;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(15 23 42);
    outline: none;
}

.form-input:focus {
    border-color: rgb(37 99 235);
    box-shadow: 0 0 0 4px rgb(219 234 254);
}

.btn-primary,
.btn-soft,
.btn-mini,
.action-tile,
.nav-link {
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-weight: 900;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
    display: inline-flex;
    background: rgb(37 99 235);
    padding: 0.9rem 1.2rem;
    color: white;
}

.btn-soft {
    display: inline-flex;
    background: rgb(239 246 255);
    padding: 0.75rem 1rem;
    color: rgb(29 78 216);
}

.btn-mini {
    display: inline-flex;
    background: rgb(34 197 94);
    padding: 0.65rem 0.9rem;
    color: white;
}

.btn-primary:active,
.btn-soft:active,
.btn-mini:active,
.action-tile:active {
    transform: scale(0.98);
}

.action-tile {
    display: flex;
    gap: 0.65rem;
    min-height: 76px;
    background: white;
    color: rgb(15 23 42);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    border: 1px solid rgb(226 232 240);
}

.action-tile span {
    display: grid;
    height: 2rem;
    width: 2rem;
    place-items: center;
    border-radius: 0.75rem;
    background: rgb(239 246 255);
    color: rgb(37 99 235);
}

.nav-link {
    display: flex;
    padding: 0.65rem 0.25rem;
    color: rgb(71 85 105);
    font-size: 0.78rem;
}

.nav-link:hover {
    background: rgb(248 250 252);
    color: rgb(37 99 235);
}

.status-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.status-pill {
    display: inline-flex;
    min-width: 116px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgb(220 252 231);
    color: rgb(21 128 61);
    font-weight: 1000;
    cursor: pointer;
    user-select: none;
}

.status-pill::before {
    content: "✓ " attr(data-on);
}

.status-toggle input:not(:checked) + .status-pill {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.status-toggle input:not(:checked) + .status-pill::before {
    content: "✕ " attr(data-off);
}

.student-card:has(input:not(:checked)) {
    border-color: rgb(252 165 165);
}

.grade-day {
    display: grid;
    min-height: 48px;
    cursor: pointer;
    place-items: center;
    border-radius: 1rem;
    border: 1px solid rgb(203 213 225);
    background: rgb(248 250 252);
    color: rgb(71 85 105);
    font-weight: 900;
}

.grade-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.grade-day:has(input:checked),
.grade-day.is-checked {
    border-color: rgb(37 99 235);
    background: rgb(239 246 255);
    color: rgb(29 78 216);
}

@media (min-width: 640px) {
    .nav-link {
        font-size: 0.9rem;
    }
}