:root { color-scheme: light dark; --primary: #000000; --text: #ffffff; --accent1: #35b1fb; --accent2: #0289db; --accent3: #054a74; --accent4: #00433a; --accent5: #ffffff; --header-bg-image: url('https://i.postimg.cc/t4S6CDjx/cityscape.jpg'); --footer-bg-image: url('https://i.postimg.cc/8Cfgxn5P/theater-seats.jpg'); --cal-zoom: 1; }
    html, body { height: 100%; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 24px; line-height: 1.35; background-size: cover; background-repeat: no-repeat; color: var(--text); background-color: var(--primary); min-height: 100vh; display: flex; flex-direction: column; }
    header { position: relative; display:flex; justify-content:center; align-items:center; padding: 51px 0; margin-bottom: -32px; overflow: hidden; border-radius: 0; margin-left: -24px; margin-right: -24px; width: calc(100% + 48px); }
    header::before { content: ""; position: absolute; inset: 0; background-image: var(--header-bg-image); background-position: 50% 34%; background-size: cover; background-repeat: no-repeat; opacity: 0.75; pointer-events: none; }
    header > * { position: relative; z-index: 1; }
    #logo { max-height: 112px; border-radius: 6px; transform: translateY(-7%); }
    h1 { margin: 0 0 16px; font-size: 22px; color: var(--accent1); text-align:center; }
    #appTitle { display:block; width: fit-content; margin: 0 auto 16px; background: #000; padding: 8px 12px; border-radius: 8px; position: relative; z-index: 2; transform: translateY(4%); }
    h2 { margin: 14px 0 10px; font-size: 18px; color: var(--accent2); }
    h3 { margin: 12px 0 8px; font-size: 16px; color: var(--accent3); }
    a { color: var(--accent1); }
    .row { display: flex; gap: 16px; flex-wrap: wrap; overflow: visible; }
    .col { flex: 1 1 360px; border: 1px solid var(--accent3); padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.04); overflow: visible; }
    label { display:block; margin-top: 6px; font-size: 14px; color: var(--accent5); }
    input, select { margin: 4px 0 8px; padding: 8px; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--accent3); background: rgba(0,0,0,0.25); color: var(--text); -webkit-appearance: menulist; appearance: menulist; position: relative; z-index: 1; }
    button { padding: 8px 12px; margin: 6px 6px 0 0; border-radius: 10px; border: 1px solid var(--accent2); background: var(--primary); color: var(--text); cursor: pointer; }
    button:hover { background: var(--accent2); }
    /* Keyboard-navigation focus ring — applies to every button, input,
     * select, and the styled-checkbox weekday-pills used in the
     * recurrence panels. Audited as a WCAG 2.4.7 (Focus Visible)
     * regression: prior CSS only had :hover, so Tab users couldn't
     * tell which control had focus. :focus-visible suppresses the
     * outline on mouse-only interaction. */
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    .weekday-pill:focus-within,
    .form-disclose:focus-visible,
    .form-primary:focus-visible,
    .form-secondary:focus-visible {
      outline: 2px solid var(--accent1);
      outline-offset: 2px;
    }
    table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
    thead th { background: rgba(255,255,255,0.06); color: var(--text); }
    th, td { border: 1px solid var(--accent3); padding: 6px 8px; vertical-align: top; }
    .hidden { display: none !important; }
    .error { color: #b00020; margin-top: 6px; }
    .hint { color: var(--accent2); margin-top: 6px; }
    .ok { color: #0b6; }
    .nowrap { white-space: nowrap; }
    .optional-field { margin-top: 10px; }
    .optional-field button { margin: 6px 0; }
    .optional-field-body { margin-top: 6px; }
    .ghost-btn { background: transparent; border-style: dashed; }
    .ghost-btn:hover { background: rgba(255,255,255,0.08); }
    /* NOTE: do not disable [popover]/top-layer globally; it breaks native <select> dropdowns */

    /* Mobile: custom anchored dropdown for <select> */
    .mobile-native-hidden { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
    .mobile-select { position: relative; width: 100%; }
    .mobile-select-btn {
      width: 100%;
      /* WCAG 2.5.5 (Target Size): bumped from 40 → 44px so the
       * mobile select trigger meets the 44px touch-target minimum. */
      min-height: 44px;
      text-align: left;
      padding: 8px 10px;
      background: rgba(0,0,0,0.25);
      color: var(--text);
      border: 1px solid var(--accent3);
      border-radius: 8px;
      box-sizing: border-box;
    }
    .mobile-select-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      border: 1px solid var(--accent3);
      border-radius: 10px;
      background: rgba(0,0,0,0.95);
      max-height: 45vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      z-index: 2000;
      box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }
    .mobile-select-menu.hidden { display: none !important; }
    .mobile-select-opt {
      display: block;
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      margin: 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: transparent;
      color: var(--text);
      border-radius: 0;
    }
    .mobile-select-opt:last-child { border-bottom: 0; }
    .mobile-select-opt.is-active { background: rgba(53,177,251,0.18); }

    /* Edit Duty selector meta (archived toggle + load note) */
    .duty-edit-meta { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 100%; }
    label.duty-edit-archived-toggle { display: flex; align-items: center; gap: 8px; margin: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    label.duty-edit-archived-toggle input { width: auto; margin: 0; flex: 0 0 auto; }
    label.duty-edit-archived-toggle span { display: inline-block; }

    /* Predictive org suggestions (site-styled blue panel) */
    .org-suggest-wrap { position: relative; }
    .org-suggest {
      position: absolute; left: 0; right: 0; top: 100%; z-index: 1000;
      border: 1px solid var(--accent2);
      background: linear-gradient(180deg, rgba(2,137,219,0.12), rgba(5,74,116,0.12)), rgba(0,8,20,0.98);
      border-radius: 10px; margin-top: 6px; max-height: 260px; overflow-y: auto;
      box-shadow: 0 10px 24px rgba(2,137,219,0.25), 0 2px 6px rgba(0,0,0,0.35);
    }
    .org-suggest::before {
      content: ""; position: absolute; top: -8px; left: 16px; width: 0; height: 0;
      border-left: 8px solid transparent; border-right: 8px solid transparent;
      border-bottom: 8px solid var(--accent2);
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
    }
    .org-suggest.hidden { display: none !important; }
    .org-suggest div { padding: 10px 12px; cursor: pointer; color: var(--text); }
    .org-suggest div + div { border-top: 1px solid rgba(2,137,219,0.22); }
    .org-suggest div:hover, .org-suggest div.active { background: rgba(2,137,219,0.28); }
    .org-suggest div mark { background: transparent; color: var(--accent1); font-weight: 600; }

    /* Toolbar */
    nav#toolbar { display:flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 16px; background: rgba(0,0,0,0.6); border: 1px solid var(--accent3); border-radius: 8px; padding: 8px; }
    nav#toolbar button { background: rgba(0,0,0,0.2); }

    /* Calendar */
    #calendarSection { width: min(100%, 960px); margin: 0 auto; }
    #calendarFilterRow .col { min-width: 200px; }
    .calendar-month-controls { display: flex; align-items: center; gap: 8px; }
    .calendar-month-controls button { margin: 0; }
    .calendar-month-label { font-weight: 600; font-size: 16px; min-width: 140px; text-align: center; }
    .calendar-zoom-mobile { display: none; }
    .calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 12px 0 6px; text-align: center; font-weight: 600; color: var(--accent5); }
    .calendar-weekdays div { padding: 4px 0; background: rgba(255,255,255,0.04); border-radius: 6px; }
    .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-height: 360px; }
    .calendar-day { border: 1px solid var(--accent3); border-radius: 10px; padding: 6px; min-height: 90px; background: rgba(0,0,0,0.25); display: flex; flex-direction: column; }
    .calendar-day-number { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--accent5); }
    .calendar-day--muted { opacity: 0.45; }
    .calendar-events { display: flex; flex-direction: column; gap: 4px; }
    .calendar-event { border: 1px solid rgba(53,177,251,0.4); background: rgba(2,137,219,0.16); border-left: 4px solid var(--accent1); border-radius: 8px; padding: 4px 6px; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; transition: background 0.2s ease, border-color 0.2s ease; }
    .calendar-event:hover { background: rgba(2,137,219,0.32); }
    .calendar-more { font-size: 12px; color: var(--accent1); margin-top: 2px; }
    #calendarEventPanel .col { flex: 1 1 100%; }
    #calendarEventSummary div { margin-bottom: 4px; }
    #calendarStatus.error { color: #ff8a80; }
    .calendar-day-event-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
    .calendar-day-event-picker button { width: 100%; text-align: left; border-radius: 8px; border: 1px solid var(--accent2); background: rgba(2,137,219,0.15); color: var(--text); padding: 6px 8px; }
    .calendar-day-event-picker button:hover { background: rgba(2,137,219,0.3); }
    .calendar-day-schedule { margin-top: 18px; padding: 16px; border: 1px solid var(--accent3); border-radius: 12px; background: rgba(0,0,0,0.2); }
    .calendar-day-schedule-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
    .calendar-day-schedule-header strong { font-size: 16px; }
    .calendar-day-schedule-meta { font-size: 13px; color: var(--accent5); margin-top: 2px; }
    .calendar-day-schedule-controls { display: flex; gap: 8px; }
    .calendar-day-schedule-controls button { margin: 0; }
    .calendar-day-schedule-body { min-height: 60px; }
    .calendar-schedule-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
    .calendar-schedule-column { border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(255,255,255,0.04); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
    .calendar-schedule-column.is-focused { box-shadow: 0 0 0 2px rgba(53,177,251,0.4); }
    .calendar-schedule-column-header { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--accent1); padding-left: 8px; }
    .calendar-schedule-column-header span { font-weight: 400; font-size: 12px; color: var(--accent5); }
    .calendar-schedule-duty { border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px; background: rgba(0,0,0,0.18); }
    .calendar-schedule-duty h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
    .calendar-schedule-duty-location { font-size: 12px; color: var(--accent5); margin-bottom: 6px; }
    .calendar-showtime-block { border: 1px dashed rgba(255,255,255,0.18); border-radius: 10px; padding: 10px; background: rgba(0,0,0,0.12); }
    .calendar-showtime-header { font-size: 13px; color: var(--accent2); margin-bottom: 8px; }
    .calendar-event-duties-block { display: flex; flex-direction: column; gap: 10px; }
    .calendar-schedule-assignment { border-left: 4px solid var(--accent1); padding-left: 6px; margin-bottom: 6px; border-radius: 4px; background: rgba(255,255,255,0.05); }
    .calendar-schedule-assignment:last-child { margin-bottom: 0; }
    .calendar-schedule-assignment-name { font-weight: 600; font-size: 13px; }
    .calendar-schedule-assignment-time { font-size: 12px; color: var(--accent5); }
    /* Track time bar */
    .track-time-bar { margin: 12px 0 0; padding: 12px; border: 1px solid var(--accent3); border-radius: 10px; background: rgba(0,0,0,0.15); overflow: visible; }
    .track-time-main { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
    .track-time-group { display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1 1 220px; }
    .track-time-buttons { display: flex; flex-direction: column; gap: 6px; width: 140px; }
    .track-time-buttons button { width: 100%; }
    .track-time-bar select, .track-time-bar input { width: 100%; box-sizing: border-box; min-height: 42px; }
    .track-time-select { position: relative; }
    #trackTimeDutySelect {
      display: block;
      width: 100%;
      min-height: 40px;
      padding: 8px 10px;
      background: rgba(0,0,0,0.35);
      color: var(--text);
      border: 1px solid var(--accent3);
      border-radius: 8px;
      font-size: 14px;
      box-sizing: border-box;
    }
    #clockSection, #clockSection .row, #clockSection .col, #clockDutiesWrap { overflow: visible; }
    #clockDutiesWrap { overflow-x: hidden; }
    #clockDutiesWrap table { table-layout: fixed; width: 100%; min-width: 0; max-width: 100%; }
    #clockDutiesWrap table th { white-space: nowrap; font-size: 11px; padding: 3px 4px; }
    #clockDutiesWrap th:nth-child(1), #clockDutiesWrap td:nth-child(1) { width: 8%; }
    #clockDutiesWrap th:nth-child(2), #clockDutiesWrap td:nth-child(2) { width: 18%; }
    #clockDutiesWrap th:nth-child(3), #clockDutiesWrap td:nth-child(3) { width: 32%; white-space: normal; word-break: break-word; }
    #clockDutiesWrap th:nth-child(4), #clockDutiesWrap td:nth-child(4) { width: 12%; }
    #clockDutiesWrap th:nth-child(5), #clockDutiesWrap td:nth-child(5) { width: 12%; }
    #clockDutiesWrap th:nth-child(6), #clockDutiesWrap td:nth-child(6) { width: 8%; }
    #clockDutiesWrap th, #clockDutiesWrap td { white-space: normal; word-break: break-word; padding: 3px 4px; font-size: 11px; }
    @media (max-width: 640px) {
      .track-time-main { flex-direction: column; }
      .track-time-group { width: 100%; }
      .track-time-buttons { width: 100%; }
      .track-time-buttons button { width: 100%; }
    }
    .calendar-day-schedule-empty { padding: 8px; font-size: 13px; color: var(--accent5); }

    /* Home section tweaks */
    #homeSection { max-width: 640px; margin: 0 auto 16px; text-align: center; flex: 0 1 640px; }
    #homeHero { display: block; margin: 8px auto 0; max-width: 420px; width: 100%; border-radius: 10px; }

    /* Footer background image */
    footer#footer { position: relative; height: 288px; margin-top: auto; border-radius: 0; overflow: hidden; pointer-events: none; margin-left: -24px; margin-right: -24px; width: calc(100% + 48px); }
    footer#footer::before { content: ""; position: absolute; inset: 0; background-image: var(--footer-bg-image); background-position: 50% 78%; background-size: cover; background-repeat: no-repeat; opacity: 0.75; pointer-events: none; }

    /* Mobile-only overrides (single block) */
    @media (max-width: 640px) {
      body { margin: 0; padding: 0; overflow-x: hidden; }
      header, footer#footer { margin: 0 !important; width: 100% !important; }
      nav#toolbar, section, .col { width: 100%; max-width: 100%; box-sizing: border-box; }
      section { margin: 12px 0; padding: 12px; }
      .row { flex-direction: column; gap: 12px; }
      .col { flex: 1 1 100%; min-width: 0; }

      /* Global "no horizontal bleed" safety net on mobile.
         Important: keep overflow-y visible so dropdowns/menus aren't clipped. */
      html, body { max-width: 100%; overflow-x: hidden; }
      .row, .col,
      .track-time-bar,
      table, .stacked-table tr {
        overflow-x: hidden;
        overflow-y: visible;
      }
      img { max-width: 100%; height: auto; }

      /* Calendar exception: keep previous behavior (no clipping). */
      #calendarSection,
      #calendarSection .row,
      #calendarSection .col,
      .calendar-day,
      .calendar-day-schedule,
      .calendar-schedule-column {
        overflow-x: visible;
        overflow-y: visible;
      }

      /* Toolbar 2-up */
      nav#toolbar {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        border: none;
        background: transparent;
        padding: 0;
        width: min(100%, 520px);
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
      }
      nav#toolbar button { flex: 1 1 48%; min-width: 0; max-width: 48%; background: rgba(0,0,0,0.25); }

      /* Calendar */
      #calendarSection { width: 100%; border: none; padding: 0; background: transparent; }
      .calendar-month-controls { justify-content: space-between; flex-wrap: nowrap; }
      .calendar-zoom-mobile { display: flex; gap: 10px; margin: 10px 0 6px; justify-content: space-between; }
      .calendar-zoom-mobile button { padding: 6px 10px; font-size: 14px; min-width: 64px; }
      .calendar-weekdays { gap: 4px; margin: 10px 0 6px; font-size: 12px; }
      .calendar-weekdays div { padding: 3px 0; }
      /* Let the calendar use more horizontal room on mobile (bigger squares) */
      .calendar-weekdays,
      #calendarGridWrap {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
      }
      .calendar-grid {
        width: 100%;
        box-sizing: border-box;
        gap: 0;
        grid-template-columns: repeat(7, 1fr);
        padding: 0;
      }
      .calendar-day {
        position: relative;
        padding: 4px;
        background: rgba(0,0,0,0.2);
        border: 1px solid rgba(5,74,116,0.6);
        overflow: hidden;
        /* Max out size on mobile (still 7 columns, no horizontal scroll) */
        aspect-ratio: 1 / 1.6;
        min-width: 0;
        min-height: 0; /* override desktop min-height so aspect-ratio can make true squares */
        border-radius: 0; /* sharp 90° corners on mobile */
      }
      .calendar-day-number { font-size: 14px; margin-bottom: 5px; }
      .calendar-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; flex: 1 1 auto; min-height: 0; min-width: 0; }
      .calendar-event {
        display: block;
        padding: 6px 8px;
        font-size: 13px;
        border-radius: 10px;
        min-width: 0;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Mobile calendar Option B: compact event bars (no titles in-grid) */
      .calendar-event.calendar-event--bar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 2px;
        height: 26px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0;
        color: rgba(255,255,255,0.95);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        font-variant-numeric: tabular-nums;
      }
      .calendar-more { font-size: 11px; }
      .calendar-count-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: rgba(2,137,219,0.25);
        border: 1px solid rgba(53,177,251,0.45);
        color: var(--text);
        font-size: 11px;
        line-height: 16px;
        text-align: center;
        pointer-events: none;
      }

      /* Time clock: stack date + buttons inside cell */
      #clockDutiesWrap td.track-time-cell { display: flex; flex-direction: column; gap: 8px; width: 100%; border-left: none; border-right: none; }
      #clockDutiesWrap .date-input-wrap,
      #clockDutiesWrap .clock-buttons-wrap { width: 100%; }
      #clockDutiesWrap .date-input-wrap { margin-bottom: 8px; position: relative; }
      #clockDutiesWrap .date-input-wrap .date-placeholder { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--accent2); opacity: 0.8; pointer-events: none; }
      #clockDutiesWrap .clock-buttons-wrap { display: flex; flex-direction: column; gap: 8px; }
      #clockDutiesWrap .clock-btn { width: 100%; }
      #clockDutiesWrap .duty-date-input { width: 100%; }

      /* Base stacked table/forms */
      table { width: 100%; max-width: 100%; table-layout: fixed; font-size: 13px; }
      table th, table td { padding: 6px 4px; word-break: break-word; }
      .stacked-table { border: none; }
      .stacked-table thead { display: none; }
      .stacked-table, .stacked-table tbody, .stacked-table tr, .stacked-table td { display: block; width: 100%; }
      .stacked-table tr { border: 1px solid var(--accent3); border-radius: 10px; padding: 10px; margin-bottom: 12px; background: rgba(0,0,0,0.35); }
      .stacked-table td { border: none; padding: 6px 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: break-word; word-break: break-word; }
      .stacked-table td::before { content: attr(data-label); font-weight: 600; color: var(--accent2); }
      form, select, input, button, textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
      input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; width: 100%; display: block; }
      .nowrap { white-space: normal; }
      /* Calendar grid should never scroll horizontally on mobile */
      #calendarGridWrap {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 92vh;
        -webkit-overflow-scrolling: touch;
      }
    }

/* ---------------------------------------------------------------------
 * Utility classes — replace the inline style="..." attributes that used
 * to live in index.html. Keeping styles in CSS rather than HTML lets us
 * tighten the Content-Security-Policy to drop style-src unsafe-inline.
 * ------------------------------------------------------------------- */

/* Margin-top */
.u-mt-0  { margin-top: 0; }
.u-mt-6  { margin-top: 6px; }
.u-mt-8  { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }

/* Margin-left */
.u-ml-8  { margin-left: 8px; }
.u-ml-10 { margin-left: 10px; }
.u-ml-8-error { margin-left: 8px; color: #b00020; }

/* Margin (TRBL shorthand) */
.u-m-0-0-8-0 { margin: 0 0 8px 0; }
.u-m-0-0-6-0 { margin: 0 0 6px 0; }
.u-m-8-0     { margin: 8px 0; }
.u-m-6-0     { margin: 6px 0; }
.u-m-6-0-0-0 { margin: 6px 0 0 0; }
.u-m-8-0-vert{ margin: 8px 0 8px 0; }

/* Padding */
.u-pl-18 { padding-left: 18px; }

/* Width / max-width */
.u-w-full     { width: 100%; }
.u-w-80       { width: 80px; }
.u-w-auto-m0  { width: auto; margin: 0; }
.u-mw-480     { max-width: 480px; width: 100%; }

/* Flex sizing */
.u-flex-160-grow  { flex: 1 1 160px; }
.u-flex-180-fixed { flex: 0 0 180px; }
.u-flex-140-fixed { flex: 0 0 140px; }

/* Gaps (composes with .row/.flex container classes already in use) */
.u-gap-8  { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }

/* Common compound row-style shortcuts (display already comes from
   .row/.col container classes; these just add gap/wrap/spacing). */
.u-row-12-wrap-mt-8  { gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.u-row-12-wrap-mt-12 { gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.u-row-12-mb-8       { gap: 12px; margin-bottom: 8px; }
.u-row-8-wrap-mb-8   { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.u-row-8-wrap-center-mb-8 { gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.u-row-12-end        { gap: 12px; align-items: flex-end; }
.u-row-8-mt-8        { gap: 8px; margin-top: 8px; }
.u-row-8-mt-12       { gap: 8px; margin-top: 12px; }

/* Display helpers (compose with row/col layout) */
.u-flex-row-gap-8-wrap-mt-8  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.u-flex-row-gap-8-wrap-mt-10 { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.u-flex-row-gap-8-center-wrap-mt-6 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.u-flex-center-gap-8-mb-6 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; font-weight: normal; }
.u-flex-center-gap-8-mt-8 { display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; font-weight: normal; }
.u-flex-center-gap-6-mt-10 { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.u-flex-center-gap-6-pointer { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* Visibility */
.u-display-none { display: none; }

/* Borders + small panels */
.u-error-border { color: #b00020; border-color: #b00020; }
.u-panel-dark   { border: 1px solid var(--accent3); border-radius: 10px; padding: 10px; background: rgba(0,0,0,0.18); }
.u-suggestion-list-hidden {
  display: none; border: 1px solid #334; border-radius: 6px; padding: 8px 10px;
  margin-bottom: 8px; max-height: 180px; overflow-y: auto; background: #1a1f2e;
}
.u-scroll-pane {
  max-height: 140px; overflow: auto; border: 1px solid #334; border-radius: 6px;
  padding: 6px; background: #1a1f2e; font-size: 0.9em;
}

/* Iframe / embedded viewer dimensions (waiver previews etc.) */
.u-embed-300 { width: 100%; height: 300px; border: 1px solid #ccc; }
.u-embed-200 { width: 100%; height: 200px; border: 1px solid #ccc; margin-bottom: 8px; }

/* Modal overlay (full-screen dimmer that centers its child).
 * overflow-y: auto so a long modal panel (the Edit Duty Preference
 * form on a phone, for example) can be scrolled to its Save/Cancel
 * footer instead of getting clipped at the viewport bottom.
 * align-items: flex-start once scrolling kicks in so the panel
 * starts near the top instead of being centered off-screen. */
.u-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.u-modal-overlay > * { max-height: none; }

/* Misc */
.u-self-end { align-self: flex-end; }

/* ---------------------------------------------------------------
 * CSP-safe replacements for inline style="..." attributes that
 * used to be interpolated into innerHTML template literals. The
 * site's CSP is `style-src 'self'`, which rejects parsed inline
 * style attributes. Dynamic colors are applied via DOM property
 * mutation (el.style.background = ...) after the node is in the
 * tree, which CSP allows.
 * --------------------------------------------------------------- */

/* Text colors */
.u-error-text   { color: #b00020; }
.u-text-accent1 { color: var(--accent1); }

/* Margin-left + danger color (matches u-ml-8-error pattern) */
.u-ml-6-error { margin-left: 6px; color: #b00020; }

/* Inline color swatches/dots. Background color is set via JS
   (el.style.background = '#xxxxxx') after the node is appended. */
.u-swatch-12 {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.u-swatch-10 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

/* Calendar volunteer-link styling (replaces inline style="cursor:pointer;
   text-decoration:underline;text-decoration-style:dotted") */
.calendar-volunteer-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Calendar duty requirement row (small hint under the duty title) */
.calendar-schedule-duty-req {
  margin: 4px 0 0 0;
  font-size: 0.85em;
}


/* ===========================================================
 * Role-aware home dashboard (PR #N — replaces the old "Welcome
 * to the TTTC Volunteer Tracker" splash). Variables come from
 * the existing :root theme so per-org branding still wins.
 * =========================================================== */

.dash-greeting {
  font-size: 28px;
  font-weight: 700;
  margin: 16px 0 4px 0;
}
.dash-greeting-sub {
  font-size: 15px;
  color: var(--accent2);
  margin: 0 0 20px 0;
}

/* Volunteer: "next shift" hero card */
.dash-next-shift {
  background: linear-gradient(135deg, var(--accent3), var(--accent4));
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.dash-nsc-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px 0;
}
.dash-next-shift h3 {
  font-size: 22px;
  margin: 0 0 4px 0;
  color: white;
}
.dash-nsc-when {
  font-size: 16px;
  color: white;
  opacity: 0.9;
  margin: 0 0 16px 0;
}
.dash-nsc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-btn-primary {
  background: white;
  color: var(--accent4);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.dash-btn-primary:hover { opacity: 0.95; }
.dash-btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
/* When the secondary button appears OUTSIDE a gradient hero card
   (e.g. in the admin quick-actions row), use accent colors instead
   of the white-on-translucent treatment. */
.dash-quick-actions .dash-btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent3);
}
.dash-quick-actions .dash-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}
.dash-quick-actions .dash-btn-primary {
  background: var(--accent2);
  color: white;
}
.dash-quick-actions .dash-btn-primary:hover { background: var(--accent1); }

/* "No upcoming shifts" empty state */
.dash-empty {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--accent3);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
}
.dash-empty p {
  margin: 0 0 12px 0;
  /* WCAG AA fix: rgba(...,0.7) on the dark dashboard background
   * measured ~3.9:1, below the 4.5:1 minimum for normal text.
   * Bumped to 0.85 for ~4.7:1. */
  color: rgba(255, 255, 255, 0.85);
}
.dash-empty button {
  padding: 10px 18px;
  background: var(--accent2);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Card grids */
.dash-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dash-info-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--accent3);
  border-radius: 12px;
  padding: 18px;
}
.dash-info-card h4 {
  margin: 0 0 12px 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent2);
}
.dash-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  gap: 8px;
}
.dash-info-row:last-child { border-bottom: none; }
.dash-info-row .ic-when {
  color: var(--accent2);
  font-size: 12px;
  white-space: nowrap;
}
.dash-stat-big {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent1);
  padding: 8px 0;
}

/* Admin: stat tiles */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dash-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--accent3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.dash-stat-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent1);
  line-height: 1;
}
.dash-stat-label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-top: 8px;
}
.dash-stat-card.alert .dash-stat-num { color: #ff8a65; }

/* Admin: quick actions row */
.dash-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dash-quick-actions button {
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Superadmin: org list */
.dash-org-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
  flex-wrap: wrap;
}
.dash-org-row:last-child { border-bottom: none; }
.dash-org-name { font-weight: 600; }
.dash-org-meta {
  color: var(--accent2);
  font-size: 12px;
  margin-top: 2px;
}
.dash-org-switch {
  background: var(--accent2);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.dash-org-switch:hover { background: var(--accent1); }

/* Superadmin org list: search, pending pill, empty state, quiet collapse */
.dash-org-search { margin-bottom: 4px; }
.dash-org-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 14px;
  box-sizing: border-box;
}
.dash-org-search input:focus {
  outline: none;
  border-color: var(--accent2);
}
.dash-org-pending-pill {
  display: inline-block;
  background: rgba(255, 138, 101, 0.18);
  color: #ff8a65;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}
.dash-org-empty {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
.dash-org-quiet {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}
.dash-org-quiet > summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--accent2);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.dash-org-quiet > summary::-webkit-details-marker { display: none; }
.dash-org-quiet > summary:hover { color: var(--accent1); }
.dash-org-quiet > summary::before {
  content: "▸ ";
  display: inline-block;
}
.dash-org-quiet[open] > summary::before { content: "▾ "; }

/* ===========================================================
 * Sub-navigation tabs that appear at the top of grouped
 * sections after the toolbar collapse (Home/Schedule/Events/
 * People/Settings instead of 10 separate top-level buttons).
 * =========================================================== */

.nav-legacy { display: none !important; }

.sub-nav {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--accent3);
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sub-nav button {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.sub-nav button:hover { background: rgba(255, 255, 255, 0.06); }
.sub-nav button.active {
  background: var(--accent3);
  color: white;
}

/* ===========================================================
 * Advanced-options collapsible. Used on Create Duty (and any
 * other dense form that benefits from progressive disclosure)
 * to hide rarely-used fields behind a single click.
 *
 * Native <details><summary> — no JS, accessible by default.
 * =========================================================== */

.advanced-options {
  margin: 16px 0;
  border: 1px solid var(--accent3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.advanced-options > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent2);
  list-style: none;
  user-select: none;
}
.advanced-options > summary::-webkit-details-marker { display: none; }
.advanced-options > summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.advanced-options[open] > summary::before {
  transform: rotate(90deg);
}
.advanced-options[open] > summary {
  border-bottom: 1px solid var(--accent3);
}
.advanced-options-body {
  padding: 12px 16px 16px 16px;
}

/* ===========================================================
 * Dashboard layout overrides — undo the legacy
 * "#homeSection { max-width: 640px; margin: 0 auto; text-align: center }"
 * that was sized for the old "Welcome to..." card. The dashboard
 * needs the full content width and left-aligned text.
 * =========================================================== */
#homeSection {
  max-width: none;
  margin: 0;
  text-align: left;
  flex: 1 1 auto;
  background: transparent;
  border: none;
  padding: 12px 0;
}

/* Active toolbar button — highlights which top-level section the user
 * is currently viewing. Replaces the visual flatness of "all 5 buttons
 * look identical." */
nav#toolbar button.toolbar-active {
  background: var(--accent3);
  color: white;
  border-color: var(--accent3);
}

/* ===========================================================
 * Modern form layout — used by the Create Event redesign and
 * any future create/edit forms that adopt the same pattern.
 * Scoped under .form-card so the existing legacy <input>/<button>
 * global styles still win everywhere else in the app.
 *
 * Pattern:
 *   .form-card                 — outer visual frame
 *     .form-card-head          — title + "fields with * are required" hint
 *     .form-section            — numbered section (Basics / When / Where)
 *       .form-section-head     — number badge + heading + sub-hint
 *       .form-field            — single label+input row
 *       .form-row-2            — two side-by-side fields (date + time)
 *       .form-disclose         — "+ Add description" ghost disclosure
 *     .form-actions            — primary submit + error
 *
 * Recurrence-specific:
 *   .form-recur                — fieldset wrapping the recurrence panel
 *   .form-weekday-row          — flexbox of weekday pills
 *   .weekday-pill              — clickable circle (S/M/T/W/T/F/S)
 *
 * The legacy .col wrapper around a form-card draws no inner chrome —
 * the form-card owns the visual frame. .col stays for layout flex.
 * =========================================================== */

.col:has(.form-card) {
  border: none;
  background: transparent;
  padding: 0;
}

.form-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--accent3);
  border-radius: 12px;
  padding: 22px 22px 18px;
}
.form-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 6px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.form-card-title {
  margin: 0;
  color: white;
  font-size: 20px;
  font-weight: 600;
}
.form-card-hint {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}
.form-card .req {
  color: #ff7a90;
  margin-left: 2px;
  font-weight: 600;
}

.form-section {
  padding: 18px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.form-section:first-of-type {
  border-top: none;
  padding-top: 8px;
}
.form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.form-section-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(53, 177, 251, 0.15);
  color: var(--accent1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.form-section-head h4 {
  margin: 0;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.form-section-sub {
  margin-left: auto;
  /* WCAG AA fix: was rgba(...,0.4) ≈ 2.2:1 on the card background
   * (fails 4.5:1). Bumped to 0.7 for ~5:1 contrast. */
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.form-field { margin-bottom: 14px; }
.form-field label {
  display: block;
  color: #c9cdd6;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.form-field input[type="text"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field input[type="number"],
.form-field select {
  width: 100%;
  /* WCAG 2.5.5 (Target Size): 11px padding + 14px font ≈ 37px tall,
   * below the 44px touch-target minimum. min-height pins the control
   * at 44px without disrupting line-height or text alignment. */
  min-height: 44px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  font-size: 14px;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background-color 0.15s;
}
.form-field input:focus,
.form-field select:focus {
  border-color: var(--accent1);
  background: rgba(53, 177, 251, 0.06);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Aligned with the codebase-wide 640px mobile breakpoint (see the @media
 * blocks at the top of this file and #homeSection) so form-row-2 and
 * form-row-3 collapse together — previously the 540 / 720 split left an
 * awkward 540–720px tablet zone where the 3-col grid had already become
 * single-column but the 2-col grid was still 2-up. */
@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* form-row-3: 3-column grid for cascading filter triplets like
 * Org → Event → Duty. Wraps to 1 column on narrow screens. */
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .form-row-3 { grid-template-columns: 1fr; }
}

/* Disclosure ghost button — "+ Add description", "+ Add location", etc. */
.form-disclose {
  background: transparent;
  border: 1px dashed rgba(53, 177, 251, 0.4);
  color: var(--accent1);
  /* WCAG 2.5.5 (Target Size): bumped vertical padding from 10 → 12px
   * so the button is ≥44px tall once the label wraps to a second line
   * (form-disclose-desc subtext). */
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  margin: 0 0 12px 0;
  transition: background 0.15s, border-style 0.15s;
}
.form-disclose:hover {
  background: rgba(53, 177, 251, 0.06);
  border-style: solid;
}
.form-disclose .plus {
  color: var(--accent1);
  font-weight: 700;
  margin-right: 4px;
}
.form-disclose .form-disclose-desc {
  /* WCAG AA fix: was rgba(...,0.4) ≈ 2.2:1 on the dashed-border ghost
   * background (fails 4.5:1 for 11px normal text). Bumped to 0.7 for
   * ~5:1 contrast. Slightly bigger font for legibility too. */
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 400;
}

/* Recurrence panel */
.form-recur {
  background: rgba(53, 177, 251, 0.03);
  border: 1px solid rgba(53, 177, 251, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 12px;
}
.form-recur legend {
  color: var(--accent1);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 6px;
}
.form-recur-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.form-recur-row label,
.form-recur-sublabel {
  color: #c9cdd6;
  font-size: 12px;
  margin: 0;
  font-weight: 500;
  display: inline-block;
}
.form-recur-row select,
.form-recur-row input[type="date"],
.form-recur-row input[type="number"] {
  width: auto;
  margin: 0;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  color: white;
  font-size: 13px;
}
.form-recur-num { width: 70px; }
.form-recur-unit {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.form-recur-preview {
  color: var(--accent1);
  font-size: 12px;
  font-style: italic;
  margin: 8px 0 0;
}

/* Weekday pill row — clickable circles, replaces stacked checkboxes */
.form-weekday-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.weekday-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 (Target Size — Enhanced): bumped from 36×36 to 44×44
   * so the tap target meets the AAA target size and the more widely
   * recommended 44px minimum for touch ergonomics. Font nudged from
   * 11 → 12px to keep the glyph balanced in the larger circle. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  margin: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.weekday-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.weekday-pill:hover { border-color: var(--accent1); }
.weekday-pill:has(input:checked) {
  background: var(--accent2);
  border-color: var(--accent2);
  color: white;
}
.weekday-pill > span { pointer-events: none; }

/* Action row */
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.form-primary {
  background: var(--accent2);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}
.form-primary:hover { background: var(--accent1); }
.form-actions .error {
  margin: 0;
  font-size: 13px;
}

/* Secondary action button — quieter than the primary, used for "Add show",
 * "Archive", "Cancel", etc. */
.form-secondary {
  background: transparent;
  color: #c9cdd6;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}
.form-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.3);
}
.form-secondary.form-destructive {
  color: #ff7a90;
  border-color: rgba(255, 122, 144, 0.3);
}
.form-secondary.form-destructive:hover {
  background: rgba(255, 122, 144, 0.08);
  border-color: rgba(255, 122, 144, 0.5);
}

/* Compact form-card — slightly less padding, no big card-title size.
 * Used by inline forms like the calendar quick-edit panel. */
.form-card-compact {
  padding: 16px 18px 14px;
  border-radius: 10px;
}
.form-card-compact .form-card-title {
  font-size: 16px;
}
.form-card-compact .form-section { padding: 12px 0 4px; }
.form-card-compact .form-actions {
  margin-top: 14px;
  padding-top: 14px;
}

/* Color picker row — color input sits next to a "Clear color" button.
 * Used in the calendar quick-edit form. */
.form-color-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.form-field-color {
  margin: 0;
  flex: 0 0 auto;
}
.form-field-color input[type="color"] {
  width: 80px;
  height: 40px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
}

/* Advanced options: a <details> styled to look like a form-section so
 * "Advanced options" sits inline with the other numbered sections but
 * the body is collapsed by default. */
details.form-section-advanced { padding-top: 18px; }
details.form-section-advanced[open] {
  padding-bottom: 8px;
}
details.form-section-advanced > summary.form-section-advanced-summary {
  list-style: none;
  cursor: pointer;
  margin-bottom: 14px;
  padding: 0;
  /* keep the same flex layout as a regular .form-section-head */
}
details.form-section-advanced > summary.form-section-advanced-summary::-webkit-details-marker {
  display: none;
}
details.form-section-advanced > summary.form-section-advanced-summary::after {
  content: "▸";
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  transition: transform 0.15s ease;
}
details.form-section-advanced[open] > summary.form-section-advanced-summary::after {
  content: "▾";
}

/* form-field-action-aligned: a form-field whose content is a button row;
 * align it to the bottom edge of its grid cell so the button sits flush
 * with the bottom of the adjacent select. */
.form-field.form-field-action-aligned {
  display: flex;
  align-items: flex-end;
  margin-bottom: 14px;
}

/* Volunteer Management — duty-preferences "add" row layout. Source select +
 * cascading template/custom fields + interest/experience flags + Add button
 * stack into a small subform inside the Edit Volunteer panel. */
.vm-duty-add-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(74, 158, 255, 0.04);
  border: 1px solid rgba(74, 158, 255, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.vm-duty-add-row > .form-field { margin-bottom: 0; }
.vm-duty-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vm-duty-flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #c9cdd6;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.vm-duty-flag-pill input { width: auto; margin: 0; }
.vm-duty-flag-pill:hover { border-color: var(--accent1); }
.vm-duty-flag-pill:has(input:checked) {
  background: rgba(53, 177, 251, 0.12);
  border-color: var(--accent1);
  color: white;
}

/* Branding settings: 2-column color grid that wraps responsively
 * (primary, text, accent1..accent5 = 7 swatches).  */
.form-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}
.form-color-grid .form-field-color {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}
.form-color-grid .form-field-color label {
  margin-bottom: 4px;
}