:root {
  color-scheme: dark;

  /* Kachina-inspired palette, no imagery */
  --bg: #0b0c0c;
  --panel: #111414;
  --panel-2: #171a19;

  --cream: #e8d7ad;
  --cream-dim: #bcae8b;

  --maroon: #7d2530;
  --maroon-dark: #541820;

  --green: #164b38;
  --green-light: #2b7e5d;

  --purple: #654174;

  --border: #3d3a32;
  --grid: #32342f;

  --text: #f0e7d4;
  --muted: #a9a08e;

  --stick: #245f46;
  --open: #654174;
  --flow: #7d2530;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    linear-gradient(
      180deg,
      #0b0c0c 0%,
      #0c0f0e 100%
    );
}

.site-header,
main {
  width: min(1400px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding: 38px 0 24px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  color: var(--cream);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.035em;
}

.site-header p {
  margin-bottom: 0;
  color: var(--cream-dim);
}

.eyebrow {
  margin-bottom: 7px;
  color: var(--green-light);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.header-actions,
.dialog-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.button {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--cream);
  padding: 10px 14px;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: #202523;
}

.button.secondary {
  background: var(--panel);
}

#refreshButton {
  background: var(--green);
  border-color: #28674e;
  color: var(--cream);
}

.button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.filter-group {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-label {
  color: var(--cream-dim);
  font-size: .84rem;
  font-weight: 750;
}

input[type="checkbox"] {
  accent-color: var(--maroon);
}

select {
  background: var(--panel-2);
  color: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  color: var(--muted);
}

.status-row strong {
  color: var(--green-light);
}

.muted {
  color: var(--muted);
}

.error {
  color: #d56f75;
}

.calendar-shell {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 14px;
}

/* =========================================================
   FullCalendar v6 dark Kachina palette
   ========================================================= */

#calendar .fc {
  --fc-page-bg-color: #0d1110;
  --fc-neutral-bg-color: #151a18;
  --fc-neutral-text-color: var(--muted);
  --fc-border-color: var(--grid);

  --fc-button-text-color: var(--cream);
  --fc-button-bg-color: var(--maroon-dark);
  --fc-button-border-color: var(--maroon);
  --fc-button-hover-bg-color: var(--maroon);
  --fc-button-hover-border-color: #a33a46;
  --fc-button-active-bg-color: var(--green);
  --fc-button-active-border-color: #2a6f53;

  --fc-today-bg-color: rgba(22, 75, 56, .24);
  --fc-now-indicator-color: #a93442;

  --fc-event-bg-color: var(--green);
  --fc-event-border-color: transparent;
  --fc-event-text-color: #fff;
}

#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th {
  border-color: var(--grid);
}

#calendar .fc-scrollgrid {
  border-color: var(--grid);
  background: #0d1110;
}

#calendar .fc-col-header-cell {
  background: var(--maroon-dark);
}

#calendar .fc-col-header-cell-cushion {
  display: block;
  padding: 9px 6px;
  color: var(--cream);
  text-decoration: none;
  font-weight: 800;
}

#calendar .fc-daygrid-day,
#calendar .fc-timegrid-col,
#calendar .fc-timegrid-slot,
#calendar .fc-timegrid-axis {
  background: #0d1110;
}

#calendar .fc-day-other {
  background: #090c0b;
}

#calendar .fc-day-today {
  background: rgba(22, 75, 56, .22) !important;
}

#calendar .fc-daygrid-day-number,
#calendar .fc-timegrid-slot-label-cushion,
#calendar .fc-timegrid-axis-cushion {
  color: var(--cream-dim);
}

#calendar .fc-day-other .fc-daygrid-day-number {
  color: #665f51;
}

#calendar .fc-toolbar-title {
  color: var(--cream);
  font-size: 1.35rem;
  font-weight: 800;
}

#calendar .fc-button {
  border-radius: 8px;
  font-weight: 750;
}

#calendar .fc-today-button {
  background: var(--green);
  border-color: #28674e;
}

#calendar .fc-timegrid-slot {
  height: 2.7em;
}

#calendar .fc-timegrid-slot-minor {
  border-top-color: #242823;
}

/* Explicit category colors */
#calendar .ht-event {
  border-radius: 5px;
  color: #fff !important;
  cursor: pointer;
}

#calendar .ht-event .fc-event-main,
#calendar .ht-event .fc-event-time,
#calendar .ht-event .fc-event-title {
  color: #fff !important;
}

#calendar .ht-stick {
  background: var(--stick) !important;
  border-color: #347c5e !important;
}

#calendar .ht-open {
  background: var(--open) !important;
  border-color: #816093 !important;
}

#calendar .ht-flow {
  background: var(--flow) !important;
  border-color: #a33a46 !important;
}

/* Month-view dot events */
#calendar .fc-daygrid-dot-event.ht-stick,
#calendar .fc-daygrid-dot-event.ht-open,
#calendar .fc-daygrid-dot-event.ht-flow {
  background: transparent !important;
}

#calendar .ht-stick .fc-daygrid-event-dot {
  border-color: var(--stick) !important;
}

#calendar .ht-open .fc-daygrid-event-dot {
  border-color: var(--open) !important;
}

#calendar .ht-flow .fc-daygrid-event-dot {
  border-color: var(--flow) !important;
}

#calendar .fc-daygrid-dot-event .fc-event-title,
#calendar .fc-daygrid-dot-event .fc-event-time {
  color: var(--text) !important;
}

/* =========================================================
   Quick View
   ========================================================= */

.upcoming-section {
  padding: 34px 0 50px;
}

.upcoming-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
}

.upcoming-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.small-button {
  padding: 7px 11px;
  font-size: .86rem;
}

#upcomingPageInfo {
  min-width: 78px;
  text-align: right;
  font-size: .85rem;
}

.upcoming-list {
  display: grid;
  gap: 10px;
}

.upcoming-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.upcoming-time,
.upcoming-title {
  color: var(--cream);
  font-weight: 800;
}

.upcoming-date,
.upcoming-rink {
  color: var(--muted);
  font-size: .88rem;
}

.event-type {
  color: var(--green-light);
  font-size: .8rem;
  font-weight: 800;
}

/* =========================================================
   Event dialog
   ========================================================= */

dialog {
  width: min(520px, calc(100% - 24px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
}

dialog::backdrop {
  background: rgba(0, 0, 0, .75);
}

.dialog-content {
  padding: 26px;
}

.dialog-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.8rem;
  cursor: pointer;
}

.event-meta {
  color: var(--muted);
  line-height: 1.7;
  margin: 14px 0 22px;
}

.empty {
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 800px) {
  .site-header,
  main {
    width: min(100% - 24px, 1400px);
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .upcoming-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .upcoming-pagination {
    width: 100%;
  }

  #upcomingPageInfo {
    margin-right: auto;
    text-align: left;
  }

  .upcoming-item {
    grid-template-columns: 84px 1fr;
  }

  .upcoming-item .button {
    grid-column: 1 / -1;
  }

  .calendar-shell {
    padding: 8px;
  }
}


/* =========================================================
   Step 6.10 — readable current day + No Work Hours filter
   ========================================================= */

.filter-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin-inline: 2px;
}

.work-hours-filter {
  color: var(--cream);
  font-weight: 700;
  white-space: nowrap;
}

/* Week/month current-day header: dark green + high-contrast cream */
#calendar .fc-col-header-cell.fc-day-today {
  background: #285846 !important;
}

#calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
  color: #fff0c9 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* Keep the current-day column subtle enough for event readability */
#calendar .fc-timegrid-col.fc-day-today,
#calendar .fc-daygrid-day.fc-day-today {
  background: rgba(40, 88, 70, .20) !important;
}

/* FullCalendar list/upcoming view */
#calendar .fc-list,
#calendar .fc-list-table,
#calendar .fc-list-table tbody {
  background: #0d1110 !important;
  border-color: var(--grid) !important;
}

#calendar .fc-list-day-cushion {
  background: var(--maroon-dark) !important;
  color: #fff0c9 !important;
}

#calendar .fc-list-day-text,
#calendar .fc-list-day-side-text {
  color: #fff0c9 !important;
  text-decoration: none !important;
  font-weight: 800;
}

/* Today's day heading in Upcoming/mobile view */
#calendar .fc-list-day.fc-day-today .fc-list-day-cushion {
  background: #285846 !important;
  color: #fff0c9 !important;
}

#calendar .fc-list-day.fc-day-today .fc-list-day-text,
#calendar .fc-list-day.fc-day-today .fc-list-day-side-text {
  color: #fff0c9 !important;
}

#calendar .fc-list-event td {
  border-color: var(--grid) !important;
}

/* Prevent FullCalendar's default white hover row on mobile */
#calendar .fc-list-event:hover td {
  background: rgba(232, 215, 173, .06) !important;
}

#calendar .fc-list-event-time,
#calendar .fc-list-event-title {
  color: #fff !important;
}

/* Hide the blue default list dot inside our category-colored rows */
#calendar .ht-stick .fc-list-event-dot {
  border-color: #55aa83 !important;
}

#calendar .ht-open .fc-list-event-dot {
  border-color: #a37ab6 !important;
}

#calendar .ht-flow .fc-list-event-dot {
  border-color: #d05b68 !important;
}

@media (max-width: 800px) {
  .filter-divider {
    display: none;
  }

  .work-hours-filter {
    width: 100%;
    padding-top: 4px;
  }

  #calendar .fc-list-day-cushion {
    padding: 11px 12px !important;
  }
}


/* =========================================================
   Step 6.11 — AM / PM / No Work Hours filter group
   ========================================================= */

.time-filters {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.time-filter,
.work-hours-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cream);
  font-weight: 700;
  white-space: nowrap;
}

.time-filter input,
.work-hours-filter input {
  margin: 0;
}

@media (max-width: 800px) {
  .time-filters {
    width: 100%;
    padding-top: 4px;
    gap: 16px;
  }

  .time-filter,
  .work-hours-filter {
    width: auto;
    padding-top: 0;
  }
}


/* Step 6.13 — Adult Skills */
#calendar .ht-skills {
  background: #a67c3f !important;
  border-color: #c39b5b !important;
}

#calendar .ht-skills .fc-event-main,
#calendar .ht-skills .fc-event-time,
#calendar .ht-skills .fc-event-title {
  color: #fff7e2 !important;
}

#calendar .fc-daygrid-dot-event.ht-skills {
  background: rgba(166, 124, 63, .16) !important;
  color: #fff0c9 !important;
}

#calendar .ht-skills .fc-daygrid-event-dot,
#calendar .ht-skills .fc-list-event-dot {
  border-color: #c39b5b !important;
}


/* Step 6.14 — Discord invite */
.discord-button {
  background: var(--maroon-dark);
  border-color: var(--maroon);
  color: var(--cream);
}

.discord-button:hover {
  background: var(--maroon);
  border-color: #a33a46;
  color: #fff0c9;
}

@media (max-width: 800px) {
  .header-actions {
    width: 100%;
  }

  .header-actions .button {
    flex: 1 1 auto;
    text-align: center;
  }
}


/* Step 6.15 — Prominent Discord button */
.discord-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #5865f2;
  border-color: #7b84f7;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 6px 18px rgba(88, 101, 242, .24);
  font-weight: 800;
}

.discord-button:hover {
  background: #6875f5;
  border-color: #9ba2fa;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 8px 22px rgba(88, 101, 242, .34);
}

.discord-icon {
  width: 21px;
  height: 17px;
  flex: 0 0 auto;
  display: block;
}

@media (max-width: 800px) {
  .discord-button {
    min-height: 44px;
  }
}