.ac-root {
  --label-w: 210px;
  --col-w: 38px;
  --bar-h: 20px;
  --bar-gap: 2px;
  --accent: #29b6f6;
  --accent-free: #4caf50;
  --ink: #37474f;
  --line: #e3e6e8;
  --shade: #f1f3f4;

  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
}

.ac-scroll { overflow-x: auto; }

/* toolbar */
.ac-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 4px 12px;
}
.ac-break { display: none; } /* forces a row break on narrow screens only */
.ac-month {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  min-width: 9em;
  text-align: center;
}
.ac-nav,
.ac-today {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ac-nav { font-size: 16px; line-height: 1; }
.ac-nav:hover,
.ac-today:hover { background: var(--shade); }
/* find next weekend */
.ac-find {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ac-find:hover { background: var(--accent); color: #fff; }
.ac-spark { width: 15px; height: 15px; flex: none; }

.ac-dialog {
  border: 0;
  border-radius: 12px;
  padding: 0;
  max-width: 420px;
  width: calc(100% - 32px);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.ac-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.ac-dialog-body { padding: 18px; font-size: 13px; }
.ac-dialog-body h3 { margin: 0 0 4px; font-size: 16px; }
.ac-dialog-hint { margin: 0 0 12px; color: #78909c; }
.ac-days { display: flex; gap: 4px; margin-bottom: 14px; }
.ac-day {
  flex: 1;
  border: 1px solid var(--line);
  background: none;
  border-radius: 6px;
  padding: 7px 0;
  font: inherit;
  font-size: 12px;
  color: #78909c;
  cursor: pointer;
}
.ac-day:hover { background: var(--shade); }
.ac-day.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.ac-dialog-list { max-height: 34vh; overflow-y: auto; margin-bottom: 12px; }

.ac-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.ac-slot + .ac-slot { border-top: 1px solid var(--line); }
.ac-slot-when { flex: 1; font-weight: 600; }
.ac-dialog-list label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 5px;
  cursor: pointer;
}
.ac-dialog-list label:hover { background: var(--shade); }
.ac-dialog-result:not(:empty) {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--shade);
  margin-bottom: 12px;
  max-height: 34vh;
  overflow-y: auto;
}
.ac-dialog-result.is-hit { background: color-mix(in srgb, var(--accent-free) 15%, transparent); }
.ac-dialog-result.is-error { background: #ffebee; color: #c62828; }
.ac-dialog-result strong { flex: 1; font-size: 14px; }
.ac-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ac-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}
.ac-btn:hover { background: var(--shade); }
.ac-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ac-btn--primary:hover { filter: brightness(0.93); background: var(--accent); }
.ac-btn:disabled { opacity: 0.5; cursor: default; }

/* filter */
.ac-filter { position: relative; }
.ac-filter-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.ac-filter-btn::-webkit-details-marker { display: none; }
.ac-filter-btn::after { content: " ▾"; color: #90a4ae; }
.ac-filter[open] .ac-filter-btn { background: var(--shade); }
.ac-filter-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.ac-filter-panel label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
}
.ac-filter-panel label:hover { background: var(--shade); }
.ac-filter-bulk {
  display: flex;
  gap: 6px;
  padding: 2px 6px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.ac-filter-bulk button {
  flex: 1;
  border: 1px solid var(--line);
  background: none;
  border-radius: 5px;
  padding: 3px;
  font: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
}
.ac-filter-bulk button:hover { background: var(--shade); }

.ac-switch {
  display: flex;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.ac-seg {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 4px 14px;
  font: inherit;
  font-size: 12px;
  color: #78909c;
  cursor: pointer;
  white-space: nowrap;
}
.ac-seg:hover { color: var(--ink); }
.ac-seg.is-on { color: #fff; }
.ac-seg--booked.is-on { background: var(--accent); }
.ac-seg--available.is-on { background: var(--accent-free); }
.ac-status { padding: 24px 8px; color: #78909c; }

/* grid */
.ac-grid {
  display: grid;
  grid-template-columns: var(--label-w) repeat(var(--days), minmax(var(--col-w), 1fr));
  align-items: stretch;
  min-width: min-content;
}

.ac-col {
  grid-row: 1 / -1;
  border-left: 1px solid var(--line);
  z-index: 0;
}
.ac-col.is-weekend { background: var(--shade); }
.ac-col.is-today { background: #fff8e1; box-shadow: inset 0 0 0 1px #ffca28; }

.ac-dayhead,
.ac-lanes {
  position: relative;
  z-index: 1;
}

/* above the bars, so the sticky first column stays opaque while side-scrolling */
.ac-corner,
.ac-label { z-index: 2; }

.ac-corner { grid-area: 1 / 1; }

.ac-label[hidden],
.ac-lanes[hidden] { display: none; }

.ac-corner,
.ac-label {
  grid-column: 1;
  position: sticky;
  left: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 4px 10px 4px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-name {
  flex: 1;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.ac-cap { color: #90a4ae; font-variant-numeric: tabular-nums; }
.ac-label.is-error .ac-name { color: #c62828; }

.ac-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  color: #78909c;
  font-size: 11px;
}
.ac-dnum { color: var(--ink); font-weight: 600; }

.ac-lanes {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: var(--bar-h);
  row-gap: var(--bar-gap);
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}

.ac-bar {
  border-radius: 999px;
  padding: 0 8px;
  margin: 0 1px;
  color: #fff;
  font-size: 11px;
  line-height: var(--bar-h);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.ac-bar--booked { background: var(--accent); }
.ac-bar--available { background: var(--accent-free); }

.ac-error {
  grid-column: 1 / -1;
  color: #c62828;
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* On phones, give the calendar the screen once they start scrolling right:
   the sticky name column collapses to 10vw and the names truncate. */
@media (max-width: 700px) {
  /* three rows: month nav / Facilities + Find / full-width mode switch */
  .ac-toolbar { gap: 6px; padding: 6px 2px 10px; }
  .ac-break { display: block; flex-basis: 100%; height: 0; }
  .ac-month { font-size: 15px; min-width: 0; flex: 1; }
  .ac-filter { flex: 1; }
  .ac-filter-btn { text-align: center; }
  .ac-find { flex: 2; }
  .ac-switch { margin-left: 0; flex-basis: 100%; }
  .ac-seg { flex: 1; padding: 7px 8px; }
  /* comfortable touch targets (~44px) rather than mouse-sized ones */
  .ac-nav, .ac-today, .ac-find, .ac-filter-btn { padding: 12px 10px; }
  .ac-seg { padding: 12px 8px; }
  .ac-btn { padding: 12px 16px; }
  .ac-filter-panel label, .ac-dialog-list label { padding: 11px 8px; }
  .ac-filter-bulk button { padding: 10px; }

  /* the dropdown must stay readable even though its button is narrow */
  .ac-filter-panel { min-width: 0; width: 76vw; }

  .ac-scroll.is-scrolled { --label-w: 10vw; }
  .ac-scroll.is-scrolled .ac-label { padding-right: 4px; gap: 0; }
  .ac-scroll.is-scrolled .ac-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ac-scroll.is-scrolled .ac-cap { display: none; }
}

@media (prefers-color-scheme: dark) {
  .ac-root {
    --ink: #e3e6e8;
    --line: #333a3f;
    --shade: #23282c;
    background: #16191c;
  }
  .ac-corner, .ac-label, .ac-nav, .ac-today, .ac-filter-panel,
  .ac-dialog, .ac-btn { background: #16191c; }
  .ac-btn--primary { background: var(--accent); }
  .ac-dialog-result.is-error { background: #3b1f22; }
  .ac-col.is-today { background: #2b2718; }
}