/* ============================================
   NET CALENDAR PAGE
   Shared list/calendar-toggle/month-grid/pagination layout lives in
   css/calendar-page.css (also used by events-calendar.html) — this file is
   this page's own content: the list view groups nets by date, each date's
   nets shown as a dense grid of small cards rather than one full-width
   card per net (nets are short — name/time/frequency — so the big
   .event-item card style used for events just left a lot of empty space).
   ============================================ */

/* This page doesn't load home.css, so .events (used on its <section>) has
   no styling at all unless defined here — same 3rem top padding every
   other page's leading section uses. */
.events {
    padding: 3rem 0;
    background: var(--color-gold-light);
}

/* View switcher stays on the right, same as events-calendar.html (its
   default position from calendar-page.css) — filters take the left side
   instead, opposite it. */
.calendar-filters {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.band-filter-toggles {
    display: flex;
    gap: 0.4rem;
}

.band-filter-btn {
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--color-red);
    border-radius: 20px;
    background: var(--color-red);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.band-filter-btn.is-off {
    background: var(--color-white);
    color: var(--color-red);
    opacity: 0.55;
}

.location-filter-dropdown {
    position: relative;
}

.location-filter-btn {
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--color-red);
    border-radius: 20px;
    background: var(--color-white);
    color: var(--color-red);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.location-filter-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--color-white);
    border: 2px solid var(--color-red);
    border-radius: 8px;
    box-shadow: var(--shadow-brand);
    padding: 0.6rem;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 20;
}

.location-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

/* Same breakpoint calendar-page.css's .toggle-page-header/.view-toggle use
   — has to match, otherwise there'd be a width range where the header has
   already stacked (taller box) but this is still absolutely positioned
   against it, overlapping the title/switcher. */
@media screen and (max-width: 700px) {
    .calendar-filters {
        position: static;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0.75rem;
    }
}

.net-list-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.net-day-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-brown);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-red);
}

.net-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.net-mini-card {
    padding: 0.75rem 0.9rem;
    background: var(--color-white);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.net-mini-card:hover {
    border-color: var(--color-red);
}

.net-mini-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.net-mini-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.net-mini-freq {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--color-red);
    font-weight: 700;
}

/* -- Week view: hour-by-hour grid --
   The grid itself is the scroll container (vertical for the 24 hour rows —
   most are empty since nets cluster in the evening, so it auto-scrolls to
   a sensible hour on load; horizontal on narrow screens, since 7 real
   day-columns can't usefully stack). Sticky day-header row + corner stay
   visible while scrolling through hours. */
.net-week-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, minmax(110px, 1fr));
    grid-auto-rows: minmax(44px, auto);
    max-height: 650px;
    overflow: auto;
    border: 2px solid var(--border-color);
    border-radius: 8px;
}

.net-week-corner,
.net-week-day-col-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-gold-light);
    padding: 0.4rem;
    text-align: center;
    border-bottom: 2px solid var(--color-red);
}

.net-week-day-col-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.net-week-day-col-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.net-week-hour-label {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
    background: var(--color-cream);
    border-top: 1px solid var(--border-color);
}

.net-week-hour-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.25rem;
    background: var(--color-white);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

/* An already-elapsed slot (every hour on an earlier day, or an earlier
   hour today) — same treatment as a past day in the month grid. */
.net-week-hour-cell.is-past {
    background: var(--color-cream);
    opacity: 0.5;
}

/* "Now" marker — a line across the current hour's entire row (every
   column, not just today's) instead of tinting today's whole column.
   Simpler and more precise: this is exactly where "now" sits between the
   greyed-out past above and what's still to come below. */
.net-week-hour-label.is-now,
.net-week-hour-cell.is-now {
    border-top: 3px solid var(--color-red);
}

.net-week-hour-net {
    padding: 0.2rem 0.4rem;
    background: var(--color-gold-light);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s ease, color 0.2s ease;
}

.net-week-hour-net:hover {
    background: var(--color-red);
    color: var(--color-white);
}