/* ── SEAMS/calendar/calendar.css ──────────────────────────────────────── */

:root {
    --cal-primary:       var(--color-primary,       #388E3C);
    --cal-primary-dark:  var(--color-primary-dark,  #2E7D32);
    --cal-primary-light: var(--color-bg-green-tint, #f0faf0);
    --incampus:          var(--color-primary,       #388E3C);
    --offcampus:         #1565C0;
    --offcampus-light:   #e3f2fd;
    --border:            #e4e8ed;
    --text-main:         #1a2530;
    --text-muted:        #6b7a8d;
    --surface:           #fff;
    --surface-alt:       #f7f9fb;
    --radius:            12px;
    --radius-sm:         8px;
    --shadow-sm:         0 1px 4px rgba(0,0,0,0.07);
    --shadow-md:         0 4px 18px rgba(0,0,0,0.10);
}

/* ════════════════════════════════════════════════════════════════
   WRAPPER
   ════════════════════════════════════════════════════════════════ */
.guest-calendar-wrapper {
    display: grid;
    grid-template-columns: 420px 1fr;
    grid-template-areas: "events-panel  calendar";
    gap: 0 22px;
    align-items: start;
    padding: 24px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 30px;
}

/* ── Controls Bar ─────────────────────────────────────────────── */
.calendar-controls-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--border);
}

.view-toggle-group {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--cal-primary);
    flex-shrink: 0;
}
.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 15px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cal-primary);
    background: var(--surface);
    text-decoration: none;
    border-right: 1.5px solid var(--cal-primary);
    transition: all 0.18s;
    white-space: nowrap;
}
.view-btn:last-child { border-right: none; }
.view-btn:hover      { background: var(--cal-primary-light); }
.view-btn.active     { background: var(--cal-primary); color: #fff; }

.filter-group { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.18s;
    color: var(--text-main);
}
.filter-btn:hover { border-color: var(--cal-primary); color: var(--cal-primary); }
.filter-btn.active { border-color: transparent; color: #fff; }
.filter-btn[data-filter="all"].active       { background: var(--text-main); }
.filter-btn[data-filter="in_campus"].active  { background: var(--cal-primary); }
.filter-btn[data-filter="off_campus"].active { background: var(--offcampus); }

/* ════════════════════════════════════════════════════════════════
   RIGHT COLUMN — CALENDAR
   ════════════════════════════════════════════════════════════════ */
.calendar-left-col { grid-area: calendar; }

.calendar-header-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    gap: 6px;
    text-align: center;
}
.calendar-header-guest h2 {
    margin: 0;
    color: var(--cal-primary);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.calendar-nav-guest {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.calendar-nav-guest a { text-decoration: none; }
.calendar-nav-guest button {
    background: var(--cal-primary);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
    transition: all 0.18s;
    white-space: nowrap;
}
.calendar-nav-guest button:hover { background: var(--cal-primary-dark); transform: translateY(-1px); }

/* ── Month Grid ───────────────────────────────────────────────── */
.calendar-grid-guest {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--border);
}

.day-header-guest {
    background: var(--cal-primary);
    color: #fff;
    padding: 12px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.calendar-day-guest {
    background: var(--surface);
    min-height: 160px;
    padding: 8px 7px;
    position: relative;
    transition: all 0.15s;
    border: 1px solid var(--border);
    overflow: hidden;
}
.calendar-day-guest.other-month { background: var(--surface-alt); opacity: 0.5; }
.calendar-day-guest.past        { background: var(--surface-alt); }
.calendar-day-guest.past .day-number-guest { color: #bbb; }
.calendar-day-guest.today {
    background: var(--cal-primary-light);
    border: 1.5px solid var(--cal-primary);
}
.calendar-day-guest.today .day-number-guest {
    color: #fff;
    background: var(--cal-primary);
    border-radius: 50%;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 700;
}
.calendar-day-guest.clickable-day { cursor: pointer; }
.calendar-day-guest.clickable-day:hover {
    background: var(--cal-primary-light);
    border-color: var(--cal-primary);
    z-index: 1;
}

.day-number-guest {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.88rem;
    margin-bottom: 5px;
    line-height: 1;
}

.day-events-guest {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.event-badge-guest {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: filter 0.12s;
    line-height: 1.4;
}
.event-badge-guest .badge-time {
    font-size: 0.66rem;
    font-weight: 700;
    opacity: 0.88;
    flex-shrink: 0;
}
.event-badge-guest .badge-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; min-width: 0;
}

.badge-incampus  { background: var(--incampus); color: #fff; }
.badge-offcampus { background: var(--offcampus); color: #fff; }
.badge-incampus:hover  { filter: brightness(0.88); }
.badge-offcampus:hover { filter: brightness(0.88); }

.event-badge-guest.past-badge {
    background: #c0c0c0 !important;
    color: #fff !important;
    pointer-events: none;
    opacity: 0.7;
}

.view-more-link {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cal-primary);
    background: var(--cal-primary-light);
    border: 1px solid var(--cal-primary);
    border-radius: 6px;
    padding: 1px 6px;
    cursor: pointer;
    line-height: 1.7;
    margin-top: 2px;
    transition: background 0.14s, color 0.14s;
}
.view-more-link:hover { background: var(--cal-primary); color: #fff; }

/* ── Multi-day position pills ─────────────────────────────────── */
.badge-day-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    flex-shrink: 0;
    line-height: 1.5;
}

.wev-pill {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
    margin-right: 2px;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   WEEK VIEW
   ════════════════════════════════════════════════════════════════ */
.week-view-grid {
    display: grid;
    grid-template-columns: 52px repeat(7, 1fr);
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 0.82rem;
    background: var(--border);
}

.week-time-col {
    background: var(--cal-primary);
    border-right: 1px solid rgba(255,255,255,0.15);
}
.week-day-header {
    background: var(--cal-primary);
    color: #fff;
    text-align: center;
    padding: 10px 4px;
    border-right: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.week-day-header:last-child { border-right: none; }
.week-day-header.week-today { background: var(--cal-primary-dark); }

.week-day-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.week-dow { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; opacity: 0.88; }
.week-dom { font-size: 1rem; font-weight: 700; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.week-dom.today-circle { background: #fff; color: var(--cal-primary); }

.week-hour-label {
    background: var(--surface-alt);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.68rem;
    padding: 5px 6px 4px;
    text-align: right;
    min-height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}
.week-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-height: 60px;
    padding: 3px 4px;
    background: var(--surface);
    transition: background 0.12s;
}
.week-cell:last-child { border-right: none; }
.week-cell:hover { background: var(--cal-primary-light); }

.week-event-block {
    border-radius: 4px;
    padding: 4px 7px;
    margin-bottom: 2px;
    cursor: pointer;
    color: #fff;
    transition: filter 0.12s;
    overflow: hidden;
    display: block;
}
.week-event-block.badge-incampus  { background: var(--cal-primary); }
.week-event-block.badge-offcampus { background: var(--offcampus); }
.week-event-block:hover { filter: brightness(0.88); }

.wev-title { font-size: 0.7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wev-time  { font-size: 0.63rem; opacity: 0.85; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   DAY VIEW
   ════════════════════════════════════════════════════════════════ */
.day-view-wrapper { width: 100%; }
.day-no-events { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.day-no-events i { font-size: 2.2rem; display: block; margin-bottom: 12px; opacity: 0.35; }
.day-no-events p { margin: 0; font-size: 0.9rem; }

.day-table-wrapper {
    width: 100%; overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.day-events-table { width: 100%; border-collapse: collapse; min-width: 0; background: var(--surface); }
.day-events-table thead tr { background: var(--cal-primary); color: #fff; }
.day-events-table thead th { padding: 12px 16px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: none; }
.day-events-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.13s; }
.day-events-table tbody tr:last-child { border-bottom: none; }
.day-events-table tbody td { border: none; padding: 13px 16px; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════
   EVENTS PANEL
   ════════════════════════════════════════════════════════════════ */
.events-panel {
    grid-area: events-panel;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 20px;
}

.events-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--cal-primary);
    border-radius: var(--radius) var(--radius) 0 0;
}
.events-panel-header h3 {
    margin: 0;
    font-size: 1.0rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.events-panel-header h3 i { color: #fff; }
.events-panel-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cal-primary);
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 3px 11px;
}

.events-table-wrapper {
    border: 1.5px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow-y: auto;
    max-height: 600px;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}

.events-list { display: flex; flex-direction: column; }

.event-list-item {
    display: flex;
    flex-direction: column;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.13s;
    gap: 2px;
}
.event-list-item:last-child { border-bottom: none; }
.event-list-item:hover { background: var(--cal-primary-light); }

.eli-date {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cal-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.eli-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eli-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 1px;
}
.eli-meta i { font-size: 0.66rem; color: var(--cal-primary); }

.events-list-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
}
.events-list-empty i { font-size: 1.8rem; display: block; margin-bottom: 8px; opacity: 0.35; }
.events-list-empty p { margin: 0; font-size: 0.84rem; }

/* ════════════════════════════════════════════════════════════════
   FOOTER — legend strip
   ════════════════════════════════════════════════════════════════ */
.calendar-footer-area {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1.5px solid var(--border);
}
.footer-legend-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.footer-legend-items { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-legend-item  { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-muted); }
.footer-legend-dot   { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet (max 960px) — stack panel below calendar ─────────── */
@media (max-width: 960px) {
    .guest-calendar-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "calendar"
            "events-panel";
        padding: 18px;
        gap: 20px 0;
    }
    .events-panel {
        position: static;
    }
    .events-table-wrapper { max-height: 360px; }
    .calendar-day-guest   { min-height: 90px; }
}

/* ── Small tablet (max 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    .guest-calendar-wrapper { padding: 14px; }

    /* Controls bar: center and wrap */
    .calendar-controls-bar {
        justify-content: center;
        gap: 8px;
    }

    /* Shrink view toggle buttons */
    .view-btn { padding: 6px 11px; font-size: 0.8rem; gap: 4px; }

    /* Calendar header */
    .calendar-header-guest h2 { font-size: 1.1rem; }
    .calendar-nav-guest button { padding: 5px 12px; font-size: 0.78rem; }

    /* Month day cells */
    .calendar-day-guest { min-height: 76px; padding: 5px 4px; }
    .day-header-guest   { padding: 9px 2px; font-size: 0.75rem; }

    /* Week view: shrink time column and cells */
    .week-view-grid { grid-template-columns: 38px repeat(7, 1fr); }
    .week-hour-label { font-size: 0.6rem; padding: 3px 4px; min-height: 52px; }
    .week-cell       { min-height: 52px; padding: 2px 2px; }
    .week-dom        { font-size: 0.85rem; width: 24px; height: 24px; }
    .week-dow        { font-size: 0.6rem; }
    .wev-title       { font-size: 0.62rem; }
    .wev-time        { display: none; } /* hide time on small week cells */

    /* Day view table: horizontal scroll */
    .day-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Day table: hide less important columns on tablet */
    .day-events-table th:nth-child(4),
    .day-events-table td:nth-child(4),
    .day-events-table th:nth-child(5),
    .day-events-table td:nth-child(5) { display: none; }
}

/* ── Mobile (max 580px) ───────────────────────────────────────── */
@media (max-width: 580px) {
    .guest-calendar-wrapper { padding: 10px; border-radius: 10px; }

    /* Hide icon text on view buttons — icon only */
    .view-btn .view-btn-label { display: none; }
    .view-btn { padding: 7px 12px; }

    /* Month day cells: compact */
    .calendar-day-guest { min-height: 58px; padding: 4px 3px; }
    .day-header-guest   { padding: 7px 1px; font-size: 0.68rem; letter-spacing: 0; }
    .day-number-guest   { font-size: 0.78rem; margin-bottom: 3px; }

    /* Only show dot for events (no text) on very small months */
    .event-badge-guest .badge-time,
    .event-badge-guest .badge-name { display: none; }
    .event-badge-guest {
        width: 8px; height: 8px;
        padding: 0;
        border-radius: 50%;
        display: inline-block;
        margin: 1px 1px 0 0;
    }
    .day-events-guest { flex-direction: row; flex-wrap: wrap; gap: 2px; }
    .view-more-link { font-size: 0.55rem; padding: 0 4px; }

    /* Day view: card layout ─────────────────────────────────
       Structure per card:
         td:1  time          → small pill at top
         td:2  event name    → large bold title
         td:3  venue         → muted row with pin icon
         td:4  type badge    → inline badge (on-campus / off-campus)
         td:5  day pill      → start / cont / end chip
    ─────────────────────────────────────────────────────── */
    .day-table-wrapper {
        border: none;
        box-shadow: none;
        overflow-x: visible;
        border-radius: 0;
    }
    .day-events-table { min-width: 0; border-radius: 0; }
    .day-events-table thead { display: none; }

    /* Each row = a card.
       The inline style="border-left:3px solid #color" on the <tr>
       already provides the color — we just reinforce width + radius */
    .day-events-table tbody tr {
        display: block;
        background: var(--surface);
        border-top: 1.5px solid var(--border);
        border-right: 1.5px solid var(--border);
        border-bottom: 1.5px solid var(--border);
        /* border-left color comes from inline style on the <tr> */
        border-left-width: 4px !important;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 0;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .day-events-table tbody tr:last-child { margin-bottom: 0; }

    /* All tds reset */
    .day-events-table tbody td {
        display: block;
        padding: 0;
        border: none;
        font-size: 0.86rem;
        white-space: normal;
    }

    /* td 1 — time: top pill strip */
    .day-events-table tbody td:nth-child(1) {
        background: var(--surface-alt);
        border-bottom: 1px solid var(--border);
        padding: 7px 14px;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .day-events-table tbody td:nth-child(1)::before {
        content: "\F293"; /* bi-clock */
        font-family: "bootstrap-icons";
        font-size: 0.75rem;
        color: var(--cal-primary);
    }

    /* td 2 — event name: main body */
    .day-events-table tbody td:nth-child(2) {
        padding: 11px 14px 4px;
        font-size: 0.93rem;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.3;
    }

    /* td 3 — venue */
    .day-events-table tbody td:nth-child(3) {
        padding: 2px 14px 8px;
        font-size: 0.78rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .day-events-table tbody td:nth-child(3):not(:empty)::before {
        content: "\F390"; /* bi-geo-alt */
        font-family: "bootstrap-icons";
        font-size: 0.72rem;
        color: var(--cal-primary);
        flex-shrink: 0;
    }

    /* td 4 — type badge */
    .day-events-table tbody td:nth-child(4) {
        display: inline-block;
        padding: 6px 6px 10px 14px;
        vertical-align: middle;
    }

    /* td 5 — day pill (start/cont/end) */
    .day-events-table tbody td:nth-child(5) {
        display: inline-block;
        padding: 6px 14px 10px 4px;
        vertical-align: middle;
    }

    /* Week view: hide time column entirely on very small screens */
    .week-view-grid { grid-template-columns: repeat(7, 1fr); }
    .week-time-col,
    .week-hour-label { display: none; }
    .week-day-header { padding: 7px 2px; }
    .week-cell { min-height: 44px; }

    /* Events panel */
    .events-panel-header { padding: 12px 14px; }
    .events-panel-header h3 { font-size: 0.9rem; }
    .events-table-wrapper { max-height: 280px; }
    .event-list-item { padding: 9px 12px; }
    .eli-name { font-size: 0.78rem; }

    /* Footer legend: compact */
    .calendar-footer-area { gap: 10px; padding-top: 10px; }
    .footer-legend-items  { gap: 10px; }
    .footer-legend-item   { font-size: 0.72rem; gap: 5px; }
    .footer-legend-dot    { width: 9px; height: 9px; }
}

/* ── Very small (max 380px) ───────────────────────────────────── */
@media (max-width: 380px) {
    .calendar-day-guest { min-height: 48px; }
    .calendar-nav-guest button { padding: 5px 9px; font-size: 0.74rem; }
    .calendar-header-guest h2  { font-size: 0.98rem; }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN CALENDAR — shared classes
   ════════════════════════════════════════════════════════════════ */
.admin-calendar-wrapper { grid-template-columns: 400px 1fr; }

.admin-cal-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #1a2530, #263040);
    border-radius: 12px 12px 0 0;
    padding: 12px 20px;
}
.admin-cal-banner .banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}
.admin-cal-banner .banner-left i { color: #F57F17; font-size: 1rem; }
.admin-cal-banner .banner-right  { display: flex; gap: 8px; flex-wrap: wrap; }

.admin-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}
.admin-action-btn.pending-btn { background: #F57F17; color: #fff; position: relative; }
.admin-action-btn.pending-btn:hover   { background: #E65100; color: #fff; }
.admin-action-btn.secondary-btn       { background: rgba(255,255,255,0.12); color: #fff; }
.admin-action-btn.secondary-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.pending-badge-count {
    position: absolute;
    top: -6px; right: -6px;
    background: #fff;
    color: #F57F17;
    font-size: 0.6rem;
    font-weight: 900;
    border-radius: 20px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.status-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #f7f9fb;
    border-bottom: 1.5px solid var(--border);
}
.status-filter-bar .sf-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    margin-right: 4px;
}
.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.sf-chip:hover { border-color: #888; color: #333; }
.sf-chip.active { color: #fff; border-color: transparent; }
.sf-chip[data-s="all"].active       { background: #1a2530; }
.sf-chip[data-s="pending"].active   { background: #F57F17; }
.sf-chip[data-s="approved"].active  { background: #2E7D32; }
.sf-chip[data-s="finalized"].active { background: #1565C0; }
.sf-chip[data-s="rejected"].active  { background: #c62828; }
.sf-chip[data-s="cancelled"].active { background: #757575; }
.sf-chip .chip-count {
    background: rgba(0,0,0,0.12);
    border-radius: 20px;
    padding: 0 5px;
    font-size: 0.65rem;
}
.sf-chip.active .chip-count { background: rgba(255,255,255,0.25); }

.event-badge-guest { border-left: 3px solid transparent; }
.status-pending   { border-left-color: #F57F17 !important; }
.status-approved  { border-left-color: #2E7D32 !important; }
.status-finalized { border-left-color: #1565C0 !important; }
.status-rejected  { border-left-color: #c62828 !important; opacity: 0.6; }
.status-cancelled { border-left-color: #888    !important; opacity: 0.5; }

.week-event-block { border-left: 3px solid rgba(255,255,255,0.4); }
.week-status-pending   { border-left-color: #F57F17 !important; }
.week-status-approved  { border-left-color: rgba(255,255,255,0.5) !important; }
.week-status-finalized { border-left-color: #81d4fa !important; }
.week-status-rejected  { opacity: 0.55 !important; }
.week-status-cancelled { opacity: 0.45 !important; }

.event-list-item.eli-pending   { border-left: 3px solid #F57F17; background: #fffdf7; }
.event-list-item.eli-rejected  { opacity: 0.55; border-left: 3px solid #c62828; }
.event-list-item.eli-cancelled { opacity: 0.45; border-left: 3px solid #888; }
.event-list-item.eli-approved  { border-left: 3px solid #2E7D32; }
.event-list-item.eli-finalized { border-left: 3px solid #1565C0; }

.panel-section-divider {
    padding: 7px 14px 5px;
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-section-divider span {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #E65100;
    display: flex;
    align-items: center;
    gap: 5px;
}
.panel-section-divider a { font-size: 0.68rem; font-weight: 700; color: #F57F17; text-decoration: none; }
.panel-section-divider a:hover { text-decoration: underline; }

.all-section-divider {
    padding: 7px 14px 5px;
    background: #f7f9fb;
    border-bottom: 1px solid var(--border);
}
.all-section-divider span {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.reschedule-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    background: #fff3e0;
    color: #E65100;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid #ffcc80;
}

.legend-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}