/**
 * layout.css — Structural layout classes for the PrioryVolunteer prototype.
 *
 * These classes control the spatial arrangement of elements in the DOM.
 * They intentionally contain no color or font declarations; those belong
 * in styles.css or colors.css respectively.
 *
 * Naming convention: short, purpose-reflecting names per RULES.md.
 */

/* ── Document root ── */
html,
body,
#root {
    height: 100%;
    overflow-x: hidden;
}

/* ── Page shell — full viewport flex column ── */
.page-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── Top bar — thin horizontal strip ── */
.top-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    flex-shrink: 0;
}

/* ── Main content area — grows to fill remaining height ── */
.content-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Two-column split layout (used in Explore, Ministry, MyOpps) ── */
.split-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Primary panel — ~75% width, grows */
.split-primary {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

/* Sidebar panel — fixed width */
.split-sidebar {
    width: 16rem;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

/* Strong blue vertical divider between panels */
.panel-divider {
    width: 1px;
    flex-shrink: 0;
}

/* Draggable variant — slightly wider for an easier grab target */
.draggable-divider {
    width: 4px;
}

/* ── My Opportunities single-column layout ── */
.myopps-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Scrollable content area below the page header */
.myopps-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

/* ── Calendar week grid (7 equal columns) ──
 * minmax(0, 1fr) prevents content from widening a column beyond its share. */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* ── Explore control strip ── */
.control-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    position: relative;
}

/* Navigation row: prev/next arrows + date label */
.explore-nav-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

/* Date label — absolutely centered on the full control-strip width */
#explore-date-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: none;
    pointer-events: none;
}

/* Segmented control row: Day/Week/Month + sort */
.explore-seg-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* On wide screens: group both nav arrows together → [◀][▶] [date range] */
@media (min-width: 1000px) {
    #explore-prev-btn   { order: 1; }
    #explore-next-btn   { order: 2; }
    #explore-date-label { order: 3; }
}

/* On mobile each row gets its own full-width line */
@media (max-width: 640px) {
    .explore-nav-row,
    .explore-seg-row,
    .explore-view-row {
        flex: 0 0 100%;
    }
}

/* ── Page visibility — JS toggles the `hidden` attribute on each .page element ── */
.page:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.tab-panel {
    display: none; flex-direction: column; flex: 1; overflow: hidden;
}
.tab-panel.is-active {
    display: flex;
}

.explore-view {
    display: none;
    flex: 1;
    overflow: hidden;
}
.explore-view.is-active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Modal overlay ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.is-open {
    display: flex;
}