/* §6 Interface design. Mobile-first; the 640px and 1024px breakpoints
   widen the layout rather than restructure it, per §6.3 "Server-rendered
   pages with progressive enhancement." */

:root {
    --color-bg: #faf8f5;
    --color-surface: #ffffff;
    --color-text: #2b2620;
    --color-muted: #746b5e;
    --color-border: #e4dcd0;
    --color-accent: #8a5a3b;
    --color-accent-contrast: #ffffff;
    --color-warning: #b8790f;
    --color-danger: #a33636;
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.4;
}

a { color: var(--color-accent); }

.app-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.app-brand {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
}

.app-nav {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.app-nav a { text-decoration: none; color: var(--color-text); }

.app-logout { margin-left: auto; }

.app-logout button {
    background: none;
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

.app-main {
    padding: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background: var(--color-surface);
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.record-form, .login-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 420px;
    background: var(--color-surface);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.record-form label, .login-form label {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 0.4rem;
}

.record-form input, .record-form select, .record-form textarea,
.login-form input {
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    min-height: 44px;
}

/* CR-10: quick-add-teacher's collapsed-by-default form on Clases. */
.quick-add-teacher {
    max-width: 420px;
    margin-top: 0.75rem;
}
.quick-add-teacher summary {
    cursor: pointer;
    color: var(--color-accent);
    font-size: 0.9rem;
    padding: 0.4rem 0;
}
.quick-add-teacher .record-form {
    margin-top: 0.5rem;
}

.checkbox-label { display: flex; align-items: center; gap: 0.5rem; flex-direction: row; }
.checkbox-label input { min-height: auto; }

button[type="submit"] {
    margin-top: 0.8rem;
    padding: 0.7rem 1rem;
    min-height: 48px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

.form-error {
    color: var(--color-danger);
    font-weight: 600;
}

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.unpaid-badge {
    display: inline-block;
    background: var(--color-warning);
    color: #fff;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}

/* CR-05: what a one-off attendee paid, shown next to the "Suelta" roster
   kind label -- admin-only, same as every other money figure. */
.oneoff-amount {
    display: inline-block;
    color: var(--color-muted);
    font-size: 0.8rem;
}

/* §3.1/§6 Calendar: Month -> Day -> Class -> Student. Phone-first grid
   (compact, dot-per-class); widens to the full tablet layout at 1024px. */

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.calendar-header h1 { margin: 0; font-size: 1.2rem; }
.calendar-header a { font-size: 1.3rem; text-decoration: none; padding: 0.4rem 0.7rem; }

.calendar-grid-headers, .calendar-week {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr: a bare 1fr track still respects its
       content's min-content width, so a day with an unbreakable class
       name/teacher (nowrap, for the ellipsis below) silently grows that
       column wider than its six siblings. minmax(0, 1fr) caps the track's
       minimum at 0, so all seven columns stay equal width regardless of
       what's inside, and the ellipsis rules actually get to do their job. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Phone default: the grid becomes a flat chronological list -- each day
   a full-width row, each class a full-width tappable link showing its
   time and teacher directly (§ redesign, 6 Sept: no separate Day page). */

.next-class-banner {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    margin-bottom: 1rem;
    min-height: 48px;
    justify-content: center;
}
.next-class-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.next-class-details { font-size: 0.95rem; font-weight: 600; }

.calendar-grid-headers { display: none; }

.calendar-week { display: contents; }

.calendar-day {
    display: block;
    width: 100%;
    padding: 0.5rem 0.1rem;
    border-bottom: 1px solid var(--color-border);
}
.calendar-day-outside { display: none; }
.calendar-day-today { background: #f3e9e0; }

.calendar-day-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    padding: 0 0.4rem;
    margin-bottom: 0.3rem;
}
.calendar-day-today .calendar-day-number { color: var(--color-accent); }

.calendar-day-occurrences { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.calendar-occurrence {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
    color: var(--color-text);
    min-height: 44px;
}
.calendar-occurrence-cancelled { text-decoration: line-through; opacity: 0.6; }
.occurrence-time { font-weight: 600; }
.occurrence-teacher { color: var(--color-muted); font-size: 0.85rem; }
.occurrence-status-badge {
    background: var(--color-danger);
    color: #fff;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}

.class-meta { color: var(--color-muted); margin-top: -0.5rem; }

/* §3.1/§6 Class roster: phone-first cards with full-width tap targets,
   collapses into table-like rows at the tablet breakpoint. */

.roster-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

.roster-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.roster-row-info { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.roster-kind { color: var(--color-muted); font-size: 0.8rem; }

.roster-save-state { font-size: 0.75rem; margin-left: auto; }
.roster-save-state-saving { color: var(--color-muted); }
.roster-save-state-saved { color: #2f7a3d; }
.roster-save-state-error { color: var(--color-danger); }
.roster-save-state-saved::before { content: '✓ '; }

.roster-status-buttons { display: flex; gap: 0.4rem; }
.status-button {
    flex: 1;
    min-height: 48px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}
.status-button:disabled { opacity: 0.6; cursor: default; }
.status-button[aria-pressed="true"] { color: #fff; border-color: transparent; }
.status-button-attended[aria-pressed="true"] { background: #2f7a3d; }
.status-button-absent[aria-pressed="true"] { background: var(--color-danger); }

.class-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.class-actions > form:first-child button {
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    min-height: 48px;
}

@media (min-width: 640px) {
    .record-form, .login-form { max-width: 480px; }
}

@media (min-width: 1024px) {
    .app-main { padding: 1.5rem 2rem; }

    /* Back to a real 7-column grid on desktop -- plenty of width per
       cell to show time + name + teacher on each class. minmax(0, 1fr),
       matching the base rule above, so these two overrides (same
       specificity, later in the cascade) don't quietly reintroduce the
       bare-1fr content-driven-width bug they're meant to just re-enable
       display:grid for. */
    .calendar-grid-headers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

    .calendar-day {
        display: block;
        min-width: 0;
        min-height: 110px;
        border: 1px solid var(--color-border);
        border-top: none;
        border-left: none;
        padding: 0.3rem;
    }
    .calendar-week:first-child .calendar-day { border-top: 1px solid var(--color-border); }
    .calendar-day:nth-child(7n+1) { border-left: 1px solid var(--color-border); }
    .calendar-day-outside { display: block; background: var(--color-bg); }
    .calendar-day-today { box-shadow: inset 0 0 0 2px var(--color-accent); background: var(--color-surface); }

    .calendar-day-number { font-size: 0.7rem; padding: 0 0.1rem; margin-bottom: 0.2rem; }

    .calendar-occurrence {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0.25rem 0.4rem;
        min-height: 0;
        font-size: 0.7rem;
        width: 100%;
    }
    .occurrence-time { font-size: 0.7rem; }
    .occurrence-name, .occurrence-teacher {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .occurrence-teacher { font-size: 0.65rem; }

    .roster-row { flex-direction: row; align-items: center; min-height: 56px; }
    .roster-row-info { flex: 1; }
    .roster-status-buttons { width: 340px; flex: none; }
    .status-button { min-height: 40px; }

    .class-actions { flex-direction: row; align-items: flex-start; }
}