/* ============================================================
   CALENDAR
   ============================================================ */

.cal-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    height: calc(100vh - 120px);
}

/* ── Main view (left, 2/3) ─────────────────────────────────── */
/* min-height: 0 everywhere in this flex/grid chain is load-bearing: flex and
   grid items default to a content-based minimum size, which — without this
   override — lets tall content (lots of events, "+more" rows, etc.) force
   the whole chain to grow past its intended fixed height instead of
   scrolling inside .cal-body where it belongs. Without it, the calendar's
   outer size would creep with content instead of staying constant. */
.cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }

.cal-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.cal-title-block { display: flex; flex-direction: column; gap: 4px; }
.cal-month-year { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--text-1); }
.cal-nav { display: flex; align-items: center; gap: 4px; }

.cal-view-toggle { display: flex; gap: 4px; background: var(--bg-3); border-radius: var(--radius-md); padding: 3px; margin-left: auto; }
.cal-view-btn { background: transparent; border: none; color: var(--text-2); border-radius: var(--radius-sm) !important; }
.cal-view-btn.active { background: var(--bg-2); color: var(--text-1); box-shadow: var(--shadow-sm); }

.cal-body { flex: 1; min-height: 0; overflow: auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* ── Month view ─────────────────────────────────────────────── */
.cal-month-grid { display: flex; flex-direction: column; height: 100%; }
.cal-month-headrow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cal-month-headcell { padding: 10px 8px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: var(--text-3); text-align: center; }

.cal-month-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Each week is a fixed-height block containing two stacked, perfectly
   aligned 7-column grids: the day cells (background + date number only)
   and an items overlay on top that places every pill/bar/+more indicator
   by grid-row (shared "slot" index, computed in JS) and grid-column. A
   multi-day event is one grid item spanning multiple columns, so the
   browser renders a single unbroken rectangle — no per-cell seams — and it
   never grows the row: anything that doesn't fit in the visible slots
   becomes a per-day "+N more" instead. */
.cal-week-block { position: relative; flex: 1; min-height: 120px; }
.cal-week-cells { display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; }
.cal-week-items {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 5px; /* keeps an item from visually touching the next day's column */
    row-gap: 3px;    /* keeps stacked items on the same day visually separate */
    padding: 6px;
    pointer-events: none; /* let clicks on empty slots fall through to the day cell */
}
.cal-week-items > * { pointer-events: auto; }

.cal-month-pill-wrap { min-width: 0; height: 100%; box-sizing: border-box; }
.cal-month-pill-wrap .cal-pill { height: 100%; box-sizing: border-box; display: flex; align-items: center; }

.cal-bar {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    color: var(--text-1);
    background: var(--bg-3);
    border-left: 3px solid var(--accent);
    padding: 0 8px;
    margin: 0 1px;
    cursor: pointer;
    transition: background var(--transition);
}
.cal-bar:hover { background: var(--bg-4); }
/* Rounded + bordered only on the edge that's the event's true start/end;
   an edge cut by the week boundary stays flush, with a ‹/› marker in the
   label itself as a "continues" hint. */
.cal-bar.bar-cap-start { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.cal-bar.bar-cap-end   { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.cal-bar.bar-cut-start { border-left: none; padding-left: 4px; }

.cal-month-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px;
    cursor: pointer;
    transition: background var(--transition);
}
.cal-month-cell:hover { background: var(--bg-3); }
.cal-month-cell.dim { opacity: 0.4; }
.cal-month-cell.today { background: var(--accent-dim); }
.cal-month-daynum { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.cal-month-cell.today .cal-month-daynum { color: var(--accent); }

/* ── Week view ──────────────────────────────────────────────── */
.cal-week-grid { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cal-week-headrow { display: grid; grid-template-columns: 0 repeat(7, 1fr); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cal-week-headcell { padding: 10px 8px; text-align: center; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.cal-week-headcell.cal-week-gutter { border-left: none; }
.cal-week-headcell.today { background: var(--accent-dim); }
.cal-week-dayname { font-size: 0.7rem; text-transform: uppercase; color: var(--text-3); }
.cal-week-daynum { font-size: 1.1rem; font-weight: 700; color: var(--text-1); }
.cal-week-headcell.today .cal-week-daynum { color: var(--accent); }

/* Bars lane for multi-day events — mirrors the week header's 8-column
   layout (gutter + 7 days) so bars line up under the right day columns. */
.cal-week-bars { display: grid; gap: 2px 0; padding: 2px 0; flex-shrink: 0; }

/* Reverted the earlier align-items:start attempt — in practice it produced
   inconsistent results (some dividers stayed full-height, others vanished
   entirely), which is worse than the thing it was trying to fix. Back to
   Grid's default "stretch": every column, including empty ones, always
   gets a full, consistent dividing line down to the row's height. The
   trade-off is a busy day makes the whole row taller for every column,
   which is standard behaviour for most calendar apps anyway. */
.cal-week-body { display: grid; grid-template-columns: 0 repeat(7, 1fr); flex: 1; min-height: 0; overflow-y: auto; }
.cal-week-daycol { border-left: 1px solid var(--border); padding: 8px 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-height: 100%; }
.cal-week-daycol:hover { background: var(--bg-3); }

/* ── Day view ───────────────────────────────────────────────── */
.cal-day-view { display: flex; flex-direction: column; height: 100%; }
.cal-day-head { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cal-day-head.today { background: var(--accent-dim); }
.cal-day-head .cal-week-dayname { font-size: 0.85rem; }
.cal-day-head .cal-week-daynum { font-size: 1.6rem; }
.cal-day-list { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; cursor: pointer; }

/* ── Event pills (shared across month/week/day) ────────────── */
.cal-pill {
    background: var(--bg-3);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.76rem;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background var(--transition);
}
.cal-pill:hover { background: var(--bg-4); }
.cal-pill-busy { color: var(--text-3); font-style: italic; }
.cal-pill-task { border-left-color: var(--danger); }
.cal-more {
    /* height:100% + box-sizing:border-box forces this to fit exactly inside
       its allotted grid row rather than being sized by its own content —
       the previous version could render a hair taller than its 19px row
       (button padding/line-height on top of content), poking past the
       cell's bottom line. */
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 0.7rem;
    color: var(--text-2);
    background: var(--bg-3);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 8px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.cal-more:hover { background: var(--bg-4); color: var(--accent); }

/* ── Right sidebar: mini calendar + upcoming list ────────────── */
.cal-side { display: flex; flex-direction: column; gap: 16px; height: 100%; min-width: 0; min-height: 0; }

.cal-mini-panel, .cal-upcoming-panel {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
}
.cal-mini-head, .cal-upcoming-head {
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-1);
}
.cal-mini-daynames { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.cal-mini-daynames span { font-size: 0.62rem; text-align: center; color: var(--text-3); }
.cal-mini-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-day {
    aspect-ratio: 1;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 0.74rem;
    cursor: pointer;
    transition: background var(--transition);
}
.cal-mini-day:hover { background: var(--bg-3); }
.cal-mini-day.dim { color: var(--text-3); opacity: 0.5; }
.cal-mini-day.highlighted { background: var(--accent-dim); color: var(--text-1); font-weight: 600; }
.cal-mini-day.today { box-shadow: inset 0 0 0 1px var(--accent); }

.cal-upcoming-panel { flex: 1; overflow-y: auto; }
.cal-upcoming-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    background: transparent; border: none;
    padding: 8px 4px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--transition);
}
.cal-upcoming-item:hover { background: var(--bg-3); }
.cal-upcoming-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-upcoming-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-upcoming-title { font-size: 0.82rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-upcoming-when { font-size: 0.72rem; color: var(--text-3); }

/* ── Event drawer content (create / view / busy) ─────────────── */
/* #event-drawer reuses the .task-drawer shell (flex column, 100vh,
   overflow:hidden), but its inner mount point needs the same flex chain
   as #drawer-inner has for tasks — otherwise .drawer-body's flex/overflow
   rules have no effect (flex needs a flex parent), and long forms (Private/
   Meeting, with the extra visibility + viewer/attendee fields) get clipped
   by the outer drawer's overflow:hidden instead of scrolling. */
#event-drawer-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.cal-drawer-time { font-size: 0.85rem; color: var(--text-2); margin-bottom: 12px; }
.cal-drawer-desc { font-size: 0.88rem; color: var(--text-1); margin-bottom: 12px; white-space: pre-wrap; }
.cal-drawer-meta { font-size: 0.76rem; color: var(--text-3); margin-bottom: 10px; }

.cal-attendee-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cal-attendee-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; padding: 6px 10px; background: var(--bg-3); border-radius: var(--radius-sm); }
.cal-attendee-status { font-size: 0.7rem; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.cal-attendee-status.status-pending  { background: var(--warning); color: #1a1e28; }
.cal-attendee-status.status-accepted { background: var(--success-dim); color: var(--success); }
.cal-attendee-status.status-declined { background: var(--danger-dim); color: var(--danger); }

.cal-member-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }
/* Note the `label` qualifier: `.form-group label` (from login.css) sets
   display:block + uppercase + margin-bottom for field captions, and — since
   these checkbox rows sit inside .form-group containers — it was winning
   over a plain `.cal-member-row` class selector (higher specificity), which
   is why the checkbox and name were rendering on separate lines. Matching
   its specificity here (element + class) and relying on calendar.css
   loading after login.css settles it in our favour without needing !important. */
label.cal-member-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.84rem; font-weight: 400; text-transform: none;
    padding: 5px 6px; margin-bottom: 0;
    border-radius: var(--radius-sm); cursor: pointer;
}

/* ── Person picker: dropdown-to-add + removable chip list ────────
   Replaced the old checkbox list (checkboxes were also getting mangled by
   `.form-group input { width:100% }`, which stretched them into a slider-
   looking bar since that rule targets every <input>, checkboxes included). */
.cal-picker-select {
    width: 100%;
    background: var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa0b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 11px 36px 11px 14px;
    color: var(--text-1);
    font-size: 0.9rem;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cal-picker-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.cal-picker-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.cal-picker-empty {
    font-size: 0.8rem;
    color: var(--text-3);
    font-style: italic;
}
.cal-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.84rem;
    color: var(--text-1);
}
.cal-chip-remove {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 0.8rem;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    visibility: hidden;
    flex-shrink: 0;
}
.cal-chip:hover .cal-chip-remove { visibility: visible; }
.cal-chip-remove:hover { background: var(--danger-dim); color: var(--danger); }

/* ── Reminder row: checkbox + conditional "[15] minutes before" ─── */
.cal-reminder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.cal-reminder-row label.cal-member-row { flex-shrink: 0; white-space: nowrap; }
.cal-reminder-minutes-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 0.84rem;
}
/* Still a bit more prominent than a plain field (bold + accent colour),
   but sized to actually sit comfortably next to its label text now. */
#ev-reminder-minutes {
    width: 56px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
#ev-reminder-minutes:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* Used by the event drawer's Save/Cancel and Edit/Delete button rows — had
   no rule at all before, so the buttons had no gap between them. */
.drawer-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* ── Settings popover ───────────────────────────────────────── */
.cal-settings-popover {
    position: fixed;
    z-index: 220;
    width: 280px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 16px;
}
.cal-settings-popover .form-group { margin-bottom: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cal-layout { grid-template-columns: 1fr; height: auto; }
    .cal-side { flex-direction: row; }
    .cal-mini-panel, .cal-upcoming-panel { flex: 1; }
}