/* /connect/admin/views/events.css — Admin Events view skin + responsive rules
 *
 * Companion stylesheet for events.js. events.js renders a bare
 * `.adm-view-page` inside `#adm-view-events`, so all page-level rules are
 * scoped under `#adm-view-events`. The event form / attendee modals are
 * appended to <body>, so their helpers are selected by the events-specific
 * classes/ids they emit.
 *
 * This file owns the class names events.js actually renders (`.evadm-month`,
 * `.evadm-cal-cell`, `.evadm-cal-chip`, …). admin-views.css still styles the
 * shared card chrome (`.evadm-event-card`, `.evadm-card-date`,
 * `.evadm-card-actions`, `.evadm-cal-grid`, `.evadm-cal-nav`), so only the
 * gaps are filled here. Only --bcc-* tokens are used; the one #fff is the
 * on-colour for the coloured calendar type-chips.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   LIST — event cards (renderList())
=============================================================== */
#adm-view-events .evadm-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
}

#adm-view-events .evadm-month {
  display:        block;
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  color:          var(--bcc-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

#adm-view-events .evadm-day {
  display:     block;
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 700;
  color:       var(--bcc-primary);
  line-height: 1;
  margin-top:  2px;
}

#adm-view-events .evadm-title {
  font-size:     var(--bcc-t-md);
  font-weight:   600;
  color:         var(--bcc-ink);
  margin:        0 0 4px;
  overflow-wrap: anywhere;
}

#adm-view-events .evadm-meta {
  font-size:     var(--bcc-t-xs);
  color:         var(--bcc-ink-3);
  overflow-wrap: anywhere;
}

#adm-view-events .evadm-badges {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--bcc-s1);
  margin-top: var(--bcc-s2);
}

/* ================================================================
   CALENDAR — month grid (renderCalendar())
=============================================================== */
#adm-view-events .evadm-cal-grid {
  /* minmax(0,1fr) so long chip text can never widen a column / the page. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

#adm-view-events .evadm-cal-header-cell {
  font-size:      var(--bcc-t-xs);
  font-weight:    600;
  text-align:     center;
  color:          var(--bcc-ink-3);
  text-transform: uppercase;
  padding-bottom: var(--bcc-s2);
}

#adm-view-events .evadm-cal-cell {
  min-width:     0;
  min-height:    44px;
  padding:       var(--bcc-s2);
  background:    var(--bcc-surface-2);
  border:        1px solid transparent;
  border-radius: var(--bcc-r-sm);
  overflow:      hidden;
}

#adm-view-events .evadm-cal-empty {
  min-height: 0;
  background: transparent;
}

#adm-view-events .evadm-cal-today {
  border-color: var(--bcc-primary);
}

#adm-view-events .evadm-cal-day-num {
  display:     block;
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-ink-2);
  line-height: 1;
}

#adm-view-events .evadm-cal-chips {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  margin-top:     2px;
  min-width:      0;
}

#adm-view-events .evadm-cal-chip {
  display:             block;
  min-width:           0;
  padding:             2px 4px;
  font-family:         inherit;
  font-size:           10px;
  line-height:         1.2;
  text-align:          left;
  color:               #fff;
  background:          transparent;
  border:              0;
  border-radius:       3px;
  -webkit-appearance:  none;
  appearance:          none;
  white-space:         nowrap;
  overflow:            hidden;
  text-overflow:       ellipsis;
  cursor:              pointer;
}

#adm-view-events .evadm-cal-more {
  font-size:   10px;
  color:       var(--bcc-ink-3);
  white-space: nowrap;
}

/* ================================================================
   RESPONSIVE — ≤767 phones
=============================================================== */
@media (max-width: 767px) {
  #adm-view-events .adm-view-header { align-items: flex-start; }

  /* Stack the card internals so the action row never forces overflow. */
  #adm-view-events .evadm-event-card { flex-wrap: wrap; }
  #adm-view-events .evadm-card-actions {
    flex-basis: 100%;
    flex-wrap:  wrap;
    margin-top: var(--bcc-s2);
  }
  #adm-view-events .evadm-card-actions .bcc-btn {
    flex:            1 1 auto;
    min-height:      44px;
    justify-content: center;
  }

  /* Calendar collapses to a readable agenda list on phones: each day with
     events becomes a full-width row instead of a cramped 7-column cell. */
  #adm-view-events .evadm-cal-grid { grid-template-columns: 1fr; gap: var(--bcc-s2); }
  #adm-view-events .evadm-cal-header-cell { display: none; }
  #adm-view-events .evadm-cal-empty { display: none; }
  #adm-view-events .evadm-cal-cell {
    display:        flex;
    flex-direction: column;
    gap:            var(--bcc-s1);
    min-height:     0;
    padding:        var(--bcc-s2) var(--bcc-s3);
  }
  /* Only render days that actually have events. */
  #adm-view-events .evadm-cal-cell:not(:has(.evadm-cal-chip)) { display: none; }
  #adm-view-events .evadm-cal-day-num { font-size: var(--bcc-t-md); }
  #adm-view-events .evadm-cal-chips { gap: var(--bcc-s2); margin-top: var(--bcc-s1); }
  #adm-view-events .evadm-cal-chip {
    width:        100%;
    box-sizing:   border-box;
    padding:      var(--bcc-s2) var(--bcc-s3);
    font-size:    12px;
    line-height:  1.3;
    white-space:  normal;
  }
  #adm-view-events .evadm-cal-more { font-size: 12px; }

  /* iOS: keep form controls at 16px so focus does not zoom the page.
     (These ids belong to the event form modal.) */
  #ef-title, #ef-event_type, #ef-starts_at, #ef-ends_at, #ef-location,
  #ef-location_url, #ef-description, #ef-capacity, #ef-recurrence,
  #ef-price, #ef-currency, #ef-max_tickets, #ef-registration_fields {
    font-size: 16px;
  }

  /* Attendee-modal tabs meet the 44px touch target. */
  .evadm-att-tab { min-height: 44px; }
}

/* ================================================================
   RESPONSIVE — ≤480 small phones
=============================================================== */
@media (max-width: 480px) {
  #adm-view-events .evadm-cal-cell { min-height: 0; padding: var(--bcc-s2); }
  #adm-view-events .evadm-cal-chip { font-size: 13px; }
  #adm-view-events .evadm-cal-more { font-size: 13px; }

  #adm-view-events .evadm-card-actions .bcc-btn { flex-basis: 48%; }
}

/* Touch devices: every interactive chip meets the 44px hit target. */
@media (pointer: coarse) {
  #adm-view-events .evadm-cal-chip {
    display:    flex;
    align-items: center;
    min-height: 44px;
  }
  #adm-view-events .evadm-cal-more { min-height: 24px; }
}