/* ============================================================
   Calendar (DS-03): session-aware week grid + responsive session
   surface (sticky rail / tablet slide-over / phone bottom sheet)
   ============================================================ */

/* ---- Layout ---- */
.calendar-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.calendar-main {
    flex: 1;
    min-width: 0;
}

.calendar-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.calendar-day-column {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px;
    min-height: 220px;
}

.calendar-day-column.calendar-day-today {
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.25);
}

.calendar-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.calendar-day-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--accent-secondary);
}

.calendar-note-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 5px;
}
.calendar-note-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}
.calendar-note-toggle.has-note {
    color: var(--accent-warning, #f59e0b);
}

/* The day note is the shared rich-text box (pages/components/note_editor.py) in
   compact mode; only the column-specific sizing lives here. */
.calendar-day-note-editor {
    margin-bottom: 10px;
}
.calendar-day-note-editor .note-textarea {
    border-style: dashed !important;
    font-size: 0.75rem !important;
    min-height: 56px !important;
    padding: 6px !important;
}

/* The day column is narrow, so its note is clipped to a few lines at rest.
   Clipped by CSS rather than truncated in Python: a "..." cut in the source
   would land mid-URL and destroy the link. Padding and font size match the
   column's textarea override above, and the box reserves the textarea's height
   inline (build_note_editor), so the column does not reflow on click. The
   dashed border marks the day note as the column's own scratch area rather
   than another event card. */
.calendar-day-note-editor .note-display {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    border-style: dashed;
    font-size: 0.75rem;
    line-height: 1.35;
    overflow: hidden;
    padding: 6px;
}
.calendar-day-note-editor .note-display p {
    margin-bottom: 0.2rem;
}

.calendar-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* ---- Event cards ---- */
.calendar-event-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.13), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
}
.calendar-event-card:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
}

.calendar-event-appt {
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.18), rgba(26, 54, 93, 0.05));
    border-color: rgba(26, 54, 93, 0.4);
}

.calendar-event-external {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.3);
    cursor: default;
}
.calendar-event-external:hover {
    filter: none;
    transform: none;
}

.calendar-event-time {
    font-weight: 700;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.calendar-event-title {
    font-weight: 600;
    color: var(--text-main);
}
.calendar-event-class {
    font-size: 0.7rem;
    color: var(--accent-secondary);
    margin-top: 3px;
}
/* Clipped over two lines rather than truncated with an ellipsis: the note is
   now rendered markup, so a text-overflow cut would land mid-link and a "..."
   built in Python would have destroyed the anchor outright. */
.calendar-event-notes {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 3px;
    overflow: hidden;
    opacity: 0.8;
    width: 100%;
}
.calendar-event-notes p,
.calendar-event-notes ul,
.calendar-event-notes ol {
    margin-bottom: 0;
}
/* This lesson's own note outranks the every-week note, so it reads as the
   foreground text rather than a footnote. */
.calendar-event-notes-dated {
    color: var(--text-main);
    font-style: normal;
    opacity: 1;
}

.session-lesson-notes {
    margin-bottom: 10px;
}
.calendar-event-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* ---- Chips ---- */
.cal-chip {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 99px;
    letter-spacing: 0.04em;
    display: inline-block;
}
.cal-chip-recorded {
    /* Filled green so it stays readable on light cards (a faint green chip
       with light-green text was low-contrast in light mode). */
    background: #10b981;
    color: #052e16;
    border: 1px solid #059669;
}
.cal-chip-open {
    /* Filled amber so it stays readable on light cards (a faint yellow chip
       with light-yellow text was unreadable in light mode). */
    background: #f59e0b;
    color: #422006;
    border: 1px solid #d97706;
}
.cal-chip-external {
    background: rgba(148, 163, 184, 0.13);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.cal-chip-plan {
    /* Filled violet so it stays readable on light cards. */
    background: #8b5cf6;
    color: #fff;
    border: 1px solid #7c3aed;
    text-decoration: none;
}
.cal-chip-plan:hover {
    background: #7c3aed;
    color: #fff;
}
.cal-record-btn {
    padding: 2px 8px !important;
    font-size: 0.62rem !important;
}

/* ---- Session drawer (desktop sticky rail) ---- */
.calendar-session-drawer {
    width: 320px;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 15px;
    position: sticky;
    top: 16px;
}

.calendar-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.session-student-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}

.session-student-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.session-student-name {
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.session-inputs-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.session-note-input {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    flex: 1 1 auto;
}
.session-note-input:focus,
.session-grade-input:focus {
    border-color: var(--accent-primary) !important;
    outline: none;
}
.session-grade-input {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    width: 64px;
    flex: 0 0 auto;
    text-align: center;
}

/* One grade cell per Participation part marked "recorded every lesson". The
   inputs are the gradebook's own build_cell_render() output, so each part
   honours its own entry mode; these rules only size them for the drawer. */
.session-grade-cell {
    flex: 0 0 auto;
    width: 68px;
}
.session-grade-cell .gb-cell {
    width: 100%;
}
.session-grade-cell input,
.session-grade-cell select {
    font-size: 0.75rem !important;
    padding: 2px 4px !important;
    text-align: center;
    width: 100%;
}

/* Column headings, rendered only when a class records more than one thing per
   lesson - a single-channel class must look exactly as it always did. */
.session-channel-header {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    padding: 0 10px;
}
.session-channel-header .session-student-name {
    flex: 1 1 auto;
}
.session-channel-heading {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: 0.65rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 68px;
}

/* ---- Phone today-list (bottom-sheet) ---- */
.session-today-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.session-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 8px;
    padding: 9px 11px;
    cursor: pointer;
}
.session-list-item:hover {
    filter: brightness(1.2);
}
.session-list-manual {
    background: transparent;
    border-style: dashed;
}
.session-list-title {
    font-size: 0.8rem;
    font-weight: 600;
}
.session-list-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ---- Phone today-bar and tablet edge handle (hidden on desktop) ---- */
.calendar-today-bar {
    display: none;
}
.calendar-edge-handle {
    display: none;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Desktop: the drawer is a permanent sticky rail; its back/close controls
   (only meaningful for the slide-over / bottom-sheet) stay hidden even though
   the callback sets an inline display for smaller screens. */
@media (min-width: 992px) {
    #session-back-btn,
    #session-close-btn {
        display: none !important;
    }
}

/* Tablet: session drawer becomes a right slide-over with an edge handle */
@media (max-width: 991.98px) and (min-width: 641px) {
    .calendar-session-drawer {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(360px, 70vw);
        border-radius: 12px 0 0 12px;
        transform: translateX(105%);
        transition: transform 0.25s;
        z-index: 1050;
        max-height: 100vh;
        overflow-y: auto;
        /* Solid surface: as a fixed overlay the translucent glass bg would let
           the grid show through. */
        background: var(--bg-color);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    }
    .calendar-session-drawer.open {
        transform: translateX(0);
    }
    .calendar-edge-handle {
        display: flex;
        align-items: center;
        position: fixed;
        right: 0;
        top: 38%;
        z-index: 1040;
        writing-mode: vertical-rl;
        padding: 14px 7px;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        color: #fff;
        border: none;
        border-radius: 9px 0 0 9px;
        font-weight: 700;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        cursor: pointer;
    }
}

/* Phone: bottom sheet + persistent today-bar */
@media (max-width: 640px) {
    body {
        padding-bottom: 70px;
    }
    .calendar-session-drawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 14px 14px 0 0;
        transform: translateY(108%);
        transition: transform 0.25s;
        z-index: 1050;
        /* Solid surface (see tablet note above). */
        background: var(--bg-color);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    }
    .calendar-session-drawer.open {
        transform: translateY(0);
    }
    .calendar-today-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1040;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        color: #fff;
        border: none;
        border-radius: 99px;
        padding: 12px 18px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
    }
}

/* When a dropdown inside the session drawer is open, lift the drawer above the
   week grid and let the open menu overflow the drawer's scroll area instead of
   being clipped by it (react-select renders the menu inline). Mirrors the
   card-level :has() pattern in 01_general.css. */
.calendar-session-drawer:has(.Select.is-open) {
    overflow: visible;
    z-index: 10060;
}