/* ── Theme note ───────────────────────────────────────────────────────────
 *
 * This page's accents were #3b82f6 (blue) while the rest of the site — nav
 * active indicator, cookie banner, donate button, theme.css's --red — uses
 * #b30000. The palette was otherwise already dark and correct, so only the
 * six accent usages were off-theme: the "today" cell tint, the today date
 * pill (month and week views), the today weekday label, the form focus
 * ring, and the all-day checkbox.
 *
 * Event colours are NOT touched. Those come from each calendar row's own
 * "color" field in the database (many are #3b82f6), so they are content,
 * not theme, and recolouring them here would override a user's choice.
 */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* height:100% not 100vh, and auto not scroll. Embedded in the
       dashboard this document sits in an iframe shorter than the
       viewport, so 100vh made it taller than its own frame; overflow
       :scroll then forced a bar whether or not there was anything to
       scroll. Same pair of problems Media and Shows had. */
    html { height: 100%; }
    body {
      background: #000;
      color: #f0f0f0;
      font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }

    /* ── Page title ────────────────────────────────────────────────────── */
    .cal-page-head {
      margin-top: 100px;
      padding: 24px 24px 0;
      flex-shrink: 0;
    }

    /* Inside the dashboard there is no fixed nav to clear, and the header
       has to read like every other admin screen's rather than like a
       public page's hero. */
    /* The admin header: same geometry, same colours and the same sticky
       behaviour as .page-head everywhere else -- it was a lighter panel
       tone and scrolled away, which is what made it read as a different
       product from the screen beside it. */
    .cal-page-head--embed {
      margin-top: 0;
      padding: 24px 24px 18px;
      background: #000;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      position: sticky;
      top: 0;
      z-index: 60;
    }

    .cal-page-title {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    /* Matches admin-dashboard.css's .page-title / .page-sub. */
    .cal-page-head--embed .cal-page-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 28px;
      letter-spacing: normal;
      line-height: 1.2;
      background: linear-gradient(135deg, #fff 0%, #aaa 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cal-page-sub { display: none; }
    .cal-page-head--embed .cal-page-sub {
      display: block;
      font-size: 13px;
      color: #999;
      margin-top: 5px;
    }

    /* ── Header ────────────────────────────────────────────────────────── */
    .cal-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: #111;
      flex-shrink: 0;
      margin-top: 100px;
    }

    /* When the page title is present (public /calendar), it already clears
       the fixed nav — cal-header shouldn't add its own 100px on top of that.
       The admin embed (no page title, no nav) keeps the base margin above. */
    .cal-page-head + .cal-header {
      margin-top: 24px;
    }
    /* The embed header carries its own rule, so the month controls sit
       directly under it. */
    .cal-page-head--embed + .cal-header {
      margin-top: 0;
      border-top: none;
      position: sticky;
      top: var(--cal-head-h, 0px);
      z-index: 59;
      background: #000;
    }
    /* The MONTH view's day-name row is deliberately NOT sticky.
       (The week and day views' .week-header still is -- see below --
       because those grids scroll through 24 hours and the dates have to
       stay in view.)

       .month-grid is `overflow:hidden` with `grid-auto-rows:1fr`: the
       whole month always fits its container, so there is nothing to
       scroll past and nothing for a sticky row to earn. What it did
       instead was come unstuck from the grid: its containing block is
       .month-view, so as the PAGE scrolled the row slid down inside it
       and came to rest across the middle of the calendar, with week rows
       above it and below it. That is the "why is the calendar in the
       middle of it all". It sits above the grid now, where a row of day
       names belongs. */

    .nav-group { display: flex; align-items: center; gap: 4px; }
    .range-group { display: flex; align-items: center; gap: 6px; }
    .cal-range-lbl {
      font-size: 10px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #666;
    }
    .cal-range-dash { color: #666; }
    .cal-date-input {
      background: #1a1a1a;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px;
      color: #f0f0f0;
      font-family: inherit;
      font-size: 12px;
      padding: 5px 8px;
      color-scheme: dark;   /* the native picker, in this palette */
      cursor: pointer;
    }
    .cal-date-input:focus { outline: none; border-color: #b30000; }
    @media (max-width: 1100px) {
      /* The toolbar wraps before these get squeezed into unusability. */
      .cal-header { flex-wrap: wrap; row-gap: 8px; }
    }

    .calendar-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 12px;
      height: 32px;
      border-radius: 6px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.12);
      background: #1a1a1a;
      color: #ccc;
      transition: background .15s, color .15s;
      text-decoration: none;
    }
    .calendar-btn:hover { background: #252525; color: #fff; }
    .btn-icon { padding: 0; width: 32px; font-size: 16px; }
    .btn-primary { background: #b30000; color: #fff; border-color: transparent; }
    .btn-primary:hover { background: #8b0000; }
    .btn-danger { background: #7f1d1d; color: #fca5a5; border-color: transparent; }
    .btn-danger:hover { background: #991b1b; }

    .cal-title {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.3px;
      flex: 1;
      text-align: center;
    }

    .view-group { display: flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; }
    .view-btn {
      padding: 0 12px;
      height: 32px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      border: none;
      background: #1a1a1a;
      color: #888;
      cursor: pointer;
      transition: background .15s, color .15s;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .view-btn:last-child { border-right: none; }
    .view-btn:hover { background: #252525; color: #ccc; }
    .view-btn.active { background: #252525; color: #fff; }

    /* ── Body ──────────────────────────────────────────────────────────── */
    /* overflow:visible, and no min-height. This box used to clip while
       .week-scroll inside it scrolled on its own -- so the page had one
       bar and the grid had another, and because only the inner one
       scrolled, its scrollbar ate width from the day columns while the
       header above kept the full width. That is why the weekday labels
       drifted further out of line with each column across the week.
       One scroller (the page) means one bar and both rows measured
       against the same width. */
    .cal-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }

    /* ── Month view ────────────────────────────────────────────────────── */
    .month-view {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }

    /* The only .dow-row rule. There were two, 100 lines apart -- this one
       and a sticky block up by the header -- and neither mentioned the
       other, so the row's position came from one and its layout from the
       other. */
    .dow-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
    }
    .dow-label {
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #555;
      text-align: center;
    }

    .month-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-auto-rows: 1fr;
      overflow: hidden;
    }

    .month-cell {
      border-right: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 4px;
      overflow: hidden;
      cursor: pointer;
      transition: background .1s;
      min-height: 0;
    }
    .month-cell:hover { background: rgba(255,255,255,0.02); }
    .month-cell.other-month { opacity: .35; }
    .month-cell.today { background: rgba(179,0,0,0.07); }
    /* Clicking a day marks it selected -- a visible highlight, so the
       calendar responds to the click even before the drawer/day-view
       opens. Ring + fill beat the faint today tint. */
    .month-cell.selected { background: rgba(179,0,0,0.20); box-shadow: inset 0 0 0 2px rgba(179,0,0,0.6); }

    .cell-date {
      font-size: 12px;
      font-weight: 600;
      color: #666;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-bottom: 2px;
    }
    .cell-date.today-num {
      background: #b30000;
      color: #fff;
    }

    .event-chip {
      font-size: 11px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 3px;
      margin-bottom: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      color: #fff;
      opacity: .9;
    }
    .event-chip:hover { opacity: 1; }

    .more-chip {
      font-size: 10px;
      font-weight: 600;
      color: #666;
      padding-left: 5px;
      cursor: pointer;
    }
    .more-chip:hover { color: #aaa; }

    /* ── Week / Day view ───────────────────────────────────────────────── */
    .week-view, .day-view {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: visible;
    }

    /* Pins under the page header and the month controls, so scrolling
       down the day grid keeps the dates visible. --cal-head-h and
       --cal-bar-h are measured from the real elements (calendar.html);
       both wrap at narrow widths, so neither is a constant. */
    .week-header {
      display: flex;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      flex-shrink: 0;
      position: sticky;
      top: calc(var(--cal-head-h, 0px) + var(--cal-bar-h, 0px));
      z-index: 40;
      background: #000;
    }
    .time-gutter { width: 56px; flex-shrink: 0; }
    .week-day-labels { display: flex; flex: 1; }
    .week-day-label {
      flex: 1;
      text-align: center;
      padding: 6px 4px;
      font-size: 12px;
      font-weight: 600;
      color: #555;
      border-left: 1px solid rgba(255,255,255,0.06);
    }
    .week-day-label .day-num {
      display: inline-flex;
      width: 26px;
      height: 26px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 14px;
      font-weight: 700;
    }
    .week-day-label.today .day-num { background: #b30000; color: #fff; }
    .week-day-label.today { color: #b30000; }

    .week-scroll {
      flex: 1;
      overflow: visible;
      display: flex;
    }
    .time-axis {
      width: 56px;
      flex-shrink: 0;
      position: relative;
    }
    .time-label {
      position: absolute;
      right: 8px;
      font-size: 10px;
      color: #444;
      transform: translateY(-50%);
      white-space: nowrap;
      user-select: none;
    }
    .day-columns {
      flex: 1;
      display: flex;
      position: relative;
    }
    .day-col {
      flex: 1;
      border-left: 1px solid rgba(255,255,255,0.06);
      position: relative;
    }
    .hour-line {
      position: absolute;
      left: 0;
      right: 0;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .half-hour-line {
      position: absolute;
      left: 0;
      right: 0;
      border-top: 1px dashed rgba(255,255,255,0.02);
    }
    .now-line {
      position: absolute;
      left: 0;
      right: 0;
      border-top: 2px solid #ef4444;
      z-index: 3;
    }
    .now-line::before {
      content: '';
      position: absolute;
      left: -4px;
      top: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ef4444;
    }

    .timed-event {
      position: absolute;
      border-radius: 4px;
      padding: 2px 5px;
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
      cursor: pointer;
      z-index: 2;
      opacity: .9;
      min-height: 18px;
    }
    .timed-event:hover { opacity: 1; filter: brightness(1.15); }
    .timed-event .ev-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .timed-event .ev-time  { display: block; font-size: 10px; font-weight: 400; opacity: .8; }

    /* ── Modal ─────────────────────────────────────────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 100;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.open { display: flex; }

    .modal-card {
      background: #141414;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      width: 480px;
      max-width: 95vw;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .modal-head h3 { font-size: 16px; font-weight: 700; }
    .modal-close {
      background: none;
      border: none;
      color: #666;
      font-size: 20px;
      cursor: pointer;
      padding: 2px;
      line-height: 1;
    }
    .modal-close:hover { color: #ccc; }

    .modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

    .field { display: flex; flex-direction: column; gap: 4px; }
    .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #666; }
    .field input, .field textarea, .field select {
      background: #1e1e1e;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      color: #f0f0f0;
      font-family: inherit;
      font-size: 13px;
      padding: 8px 10px;
      width: 100%;
      transition: border-color .15s;
    }
    .field input:focus, .field textarea:focus, .field select:focus {
      outline: none;
      border-color: #b30000;
    }
    .field textarea { resize: vertical; min-height: 72px; }

    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    .color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
    .swatch {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .1s;
    }
    .swatch:hover { transform: scale(1.15); }
    .swatch.selected { border-color: #fff; }

    .allday-row { display: flex; align-items: center; gap: 8px; }
    .allday-row input[type=checkbox] { width: 16px; height: 16px; accent-color: #b30000; cursor: pointer; }
    .allday-row label { font-size: 13px; font-weight: 500; color: #ccc; cursor: pointer; }

    .modal-foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 20px 16px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .modal-foot .spacer { flex: 1; }

    /* ── Detail popover ─────────────────────────────────────────────────── */
    .popover {
      display: none;
      position: fixed;
      z-index: 200;
      background: #1a1a1a;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      /* Was a flat 300px, which a long title ran straight out of. Caps
         against the viewport too, and scrolls rather than growing off
         the screen once a clamped title is opened. */
      width: min(360px, calc(100vw - 32px));
      max-height: min(60vh, 460px);
      overflow: auto;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      padding: 16px;
    }
    .popover.open { display: block; }
    .pop-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
    .pop-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
    .pop-title { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .pop-close { background: none; border: none; color: #555; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }
    .pop-close:hover { color: #ccc; }
    .pop-row { font-size: 12px; color: #888; margin-bottom: 6px; display: flex; gap: 6px; align-items: flex-start; }
    .pop-row svg { flex-shrink: 0; margin-top: 1px; }
    .pop-actions { display: flex; gap: 8px; margin-top: 14px; }

    /* ── Page head actions ─────────────────────────────────────────────── */
    /* "+ New Event" sits on the title line now, the way every other admin
       screen puts its primary action in .page-head. */
    .cal-page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .cal-page-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    /* ── Upcoming view ─────────────────────────────────────────────────── */
    /* A list, not a grid: what is next, in order. */
    .upcoming-list {
      display: flex;
      flex-direction: column;
      padding: 8px 0 40px;
    }
    .upcoming-empty {
      padding: 60px 24px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }
    .upcoming-day {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 18px 24px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .upcoming-day-name {
      font-size: 13px;
      font-weight: 700;
      color: #f0f0f0;
    }
    .upcoming-day-date { font-size: 12px; color: #777; }
    .upcoming-today-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #fff;
      background: var(--red, #b30000);
      border-radius: 10px;
      padding: 2px 8px;
    }
    .upcoming-day.is-today .upcoming-day-name { color: #fff; }

    .upcoming-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      cursor: pointer;
      transition: background .12s;
    }
    .upcoming-row:hover,
    .upcoming-row:focus-visible {
      background: rgba(255, 255, 255, 0.03);
      outline: none;
    }
    .upcoming-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    /* Fixed column so the titles line up down the list rather than
       starting wherever each time string happens to end. */
    .upcoming-when {
      width: 150px;
      flex-shrink: 0;
      font-size: 12px;
      color: #888;
      font-variant-numeric: tabular-nums;
    }
    .upcoming-title {
      font-size: 14px;
      color: #f0f0f0;
      font-weight: 500;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .upcoming-where {
      font-size: 12px;
      color: #666;
      margin-left: auto;
      padding-left: 16px;
      flex-shrink: 0;
    }

    /* ── Appended periods ──────────────────────────────────────────────── */
    /* Scrolling past the bottom of the current month/week/day appends the
       next one. The label says which, so a continuous run of grids does
       not become one undifferentiated wall of dates. */
    .cal-period-label {
      position: sticky;
      top: calc(var(--cal-head-h, 0px) + var(--cal-bar-h, 0px));
      z-index: 41;
      padding: 10px 24px;
      background: #000;
      border-top: 1px solid rgba(255, 255, 255, 0.10);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 13px;
      font-weight: 700;
      color: #f0f0f0;
    }

    @media (max-width: 640px) {
      .upcoming-when { width: 100%; }
      .upcoming-row { flex-wrap: wrap; }
      .upcoming-where { margin-left: 0; padding-left: 0; }
    }