/* ============================================================
   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);
}

.calendar-comment-area {
    width: 100%;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px dashed var(--glass-border) !important;
    border-radius: 6px !important;
    color: var(--text-main) !important;
    font-size: 0.75rem !important;
    min-height: 56px !important;
    padding: 6px !important;
}
.calendar-comment-area:focus {
    background: var(--glass-bg) !important;
    border-color: var(--accent-secondary) !important;
}

.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;
}
.calendar-event-notes {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}
.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 {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.45);
}
.cal-chip-open {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.45);
}
.cal-chip-external {
    background: rgba(148, 163, 184, 0.13);
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.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;
}

/* ---- 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;
}