/**
 * Golf Booking Suite shared calendar visual foundation.
 *
 * Behaviour remains renderer-specific. Public booking and operations calendars
 * consume the same normalized Appearance tokens, surfaces, controls and status
 * palette from this layer.
 */
.sbs2-wrap {
  --gbs-calendar-page: var(--sbs2-page-bg, #020617);
  --gbs-calendar-panel: var(--sbs2-calendar-panel-bg, var(--sbs2-card-bg, #0b1220));
  --gbs-calendar-panel-soft: linear-gradient(180deg, var(--sbs2-surface-card, rgba(37,99,235,.09)), transparent 100%), var(--gbs-calendar-panel);
  --gbs-calendar-header: var(--sbs2-header, #111827);
  --gbs-calendar-cell: var(--sbs2-calendar-day-bg, var(--sbs2-card-bg, #0b1220));
  --gbs-calendar-slot: var(--sbs2-calendar-slot-bg, var(--sbs2-header, #111827));
  --gbs-calendar-border: var(--sbs2-calendar-day-border, var(--sbs2-border, #243041));
  --gbs-calendar-border-active: var(--sbs2-calendar-day-border-active, var(--sbs2-accent, #2563eb));
  --gbs-calendar-text: var(--sbs2-calendar-panel-text, var(--sbs2-text, #e5eef8));
  --gbs-calendar-muted: var(--sbs2-calendar-weekday-text, var(--sbs2-muted, #94a3b8));
  --gbs-calendar-accent: var(--sbs2-accent, #2563eb);
  --gbs-calendar-accent-hover: var(--sbs2-accent-hover, #1d4ed8);
  --gbs-calendar-selected: var(--sbs2-selected, #1d4ed8);
  --gbs-calendar-radius: var(--sbs2-radius, 16px);
  --gbs-calendar-control-bg: linear-gradient(180deg, var(--sbs2-surface-button-strong, rgba(37,99,235,.34)), var(--sbs2-surface-button, rgba(37,99,235,.22))), var(--gbs-calendar-header);
  --gbs-calendar-control-hover: linear-gradient(180deg, var(--sbs2-accent-24, rgba(37,99,235,.24)), var(--sbs2-surface-button, rgba(37,99,235,.22))), var(--gbs-calendar-header);
  --gbs-calendar-active-bg: linear-gradient(180deg, var(--sbs2-selected-soft, rgba(37,99,235,.20)), var(--sbs2-selected-strong, rgba(37,99,235,.30))), var(--gbs-calendar-header);
  --gbs-calendar-shadow: 0 12px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
  --gbs-calendar-focus: 0 0 0 2px var(--sbs2-accent-24, rgba(37,99,235,.24));
}

.sbs2-cal,
.gbs-op-calendar-shell,
.gbs-external-tray,
.gbs-appointment-drawer {
  font-family: var(--sbs2-body-font-resolved, var(--sbs2-body-font, Georgia, "Times New Roman", serif));
  color: var(--gbs-calendar-text);
}

.sbs2-cal,
.gbs-op-calendar-shell {
  border-color: var(--gbs-calendar-border);
  background: linear-gradient(180deg, var(--sbs2-surface-card, rgba(37,99,235,.09)), transparent 18%), var(--gbs-calendar-panel);
  box-shadow: var(--gbs-calendar-shadow);
}

.sbs2-cal-toolbar,
.gbs-op-toolbar,
.gbs-op-time-header,
.gbs-op-weekdays,
.gbs-external-tray-summary,
.gbs-drawer-summary {
  border-color: var(--gbs-calendar-border);
  background: linear-gradient(90deg, var(--sbs2-interference-06, rgba(37,99,235,.06)), transparent 18%, transparent 82%, var(--sbs2-interference-06, rgba(37,99,235,.06))),
              linear-gradient(180deg, var(--sbs2-surface-header, rgba(37,99,235,.14)), transparent 100%),
              var(--gbs-calendar-header);
}

.gbs-operation-calendar-wrap .button,
.gbs-operation-calendar-wrap .sbs2-btn,
.gbs-operation-calendar-wrap summary.button,
.gbs-operation-calendar-wrap select,
.gbs-operation-calendar-wrap input,
.gbs-operation-calendar-wrap textarea {
  font-family: var(--sbs2-button-font-resolved, var(--sbs2-body-font-resolved, var(--sbs2-button-font, var(--sbs2-body-font, Georgia, "Times New Roman", serif))));
}

.gbs-operation-calendar-wrap .button,
.gbs-operation-calendar-wrap summary.button {
  border: 1px solid var(--sbs2-badge-border, var(--gbs-calendar-border));
  border-radius: calc(var(--gbs-calendar-radius) * .65);
  background: var(--gbs-calendar-control-bg);
  color: var(--gbs-calendar-text, var(--sbs2-text, #fff));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow: none;
}

.gbs-operation-calendar-wrap .button:hover,
.gbs-operation-calendar-wrap .button:focus-visible,
.gbs-operation-calendar-wrap summary.button:hover,
.gbs-operation-calendar-wrap summary.button:focus-visible {
  border-color: var(--gbs-calendar-border-active);
  background: var(--gbs-calendar-control-hover);
  color: var(--gbs-calendar-text, var(--sbs2-text, #fff));
  box-shadow: var(--gbs-calendar-focus), inset 0 1px 0 rgba(255,255,255,.10);
  outline: 0;
}

.gbs-operation-calendar-wrap .button.is-active,
.gbs-operation-calendar-wrap .button-primary,
.gbs-operation-calendar-wrap .sbs2-btn {
  border-color: var(--gbs-calendar-border-active);
  background: var(--gbs-calendar-active-bg);
  color: var(--sbs2-button-text, #fff);
  box-shadow: 0 0 0 1px var(--sbs2-accent-18, rgba(37,99,235,.18)), inset 0 1px 0 rgba(255,255,255,.12);
}

.gbs-operation-calendar-wrap input[type="search"],
.gbs-operation-calendar-wrap input[type="text"],
.gbs-operation-calendar-wrap input[type="email"],
.gbs-operation-calendar-wrap input[type="datetime-local"],
.gbs-operation-calendar-wrap textarea,
.gbs-operation-calendar-wrap select {
  border-color: var(--sbs2-input-border, var(--gbs-calendar-border));
  background: var(--sbs2-input-bg, var(--gbs-calendar-panel));
  color: var(--gbs-calendar-text);
  -webkit-text-fill-color: var(--gbs-calendar-text);
  caret-color: var(--gbs-calendar-text);
}

.gbs-operation-calendar-wrap input::placeholder,
.gbs-operation-calendar-wrap textarea::placeholder {
  color: var(--gbs-calendar-muted);
  opacity: 1;
}

.gbs-operation-calendar-wrap select option {
  background: var(--sbs2-select-option-bg, var(--gbs-calendar-panel));
  color: var(--sbs2-select-option-text, var(--gbs-calendar-text));
}

.sbs2-wrap[data-sbs2-theme-mode="dark"] select,
.sbs2-wrap[data-sbs2-theme-mode="dark"] input,
.sbs2-wrap[data-sbs2-theme-mode="dark"] textarea {
  color-scheme: dark;
}

.sbs2-wrap[data-sbs2-theme-mode="light"] select,
.sbs2-wrap[data-sbs2-theme-mode="light"] input,
.sbs2-wrap[data-sbs2-theme-mode="light"] textarea {
  color-scheme: light;
}

/* Shared status presentation tokens. Renderer-specific markup uses the same
 * configured Appearance palette. */
.gbs-op-status--pending { --gbs-status-color: var(--sbs2-status-pending-color); --gbs-status-text: var(--sbs2-status-pending-text); --gbs-status-border: var(--sbs2-status-pending-border); --gbs-status-soft: var(--sbs2-status-pending-soft); }
.gbs-op-status--approved { --gbs-status-color: var(--sbs2-status-approved-color); --gbs-status-text: var(--sbs2-status-approved-text); --gbs-status-border: var(--sbs2-status-approved-border); --gbs-status-soft: var(--sbs2-status-approved-soft); }
.gbs-op-status--cancelled { --gbs-status-color: var(--sbs2-status-cancelled-color); --gbs-status-text: var(--sbs2-status-cancelled-text); --gbs-status-border: var(--sbs2-status-cancelled-border); --gbs-status-soft: var(--sbs2-status-cancelled-soft); }
.gbs-op-status--expired { --gbs-status-color: var(--sbs2-status-expired-color); --gbs-status-text: var(--sbs2-status-expired-text); --gbs-status-border: var(--sbs2-status-expired-border); --gbs-status-soft: var(--sbs2-status-expired-soft); }
.gbs-op-status--completed { --gbs-status-color: var(--sbs2-status-completed-color); --gbs-status-text: var(--sbs2-status-completed-text); --gbs-status-border: var(--sbs2-status-completed-border); --gbs-status-soft: var(--sbs2-status-completed-soft); }
.gbs-op-status--blocked { --gbs-status-color: var(--sbs2-status-blocked-color); --gbs-status-text: var(--sbs2-status-blocked-text); --gbs-status-border: var(--sbs2-status-blocked-border); --gbs-status-soft: var(--sbs2-status-blocked-soft); }

.gbs-op-status {
  border: 1px solid var(--gbs-status-border, var(--gbs-calendar-border));
  background: var(--gbs-status-soft, var(--sbs2-surface-button));
  color: var(--gbs-status-text, var(--gbs-calendar-text));
}

.gbs-op-status-dot--pending { --gbs-status-color: var(--sbs2-status-pending-color); }
.gbs-op-status-dot--approved { --gbs-status-color: var(--sbs2-status-approved-color); }
.gbs-op-status-dot--cancelled { --gbs-status-color: var(--sbs2-status-cancelled-color); }
.gbs-op-status-dot--expired { --gbs-status-color: var(--sbs2-status-expired-color); }
.gbs-op-status-dot--completed { --gbs-status-color: var(--sbs2-status-completed-color); }
.gbs-op-status-dot--blocked { --gbs-status-color: var(--sbs2-status-blocked-color); }

.gbs-op-status-dot {
  background: var(--gbs-status-color, var(--gbs-calendar-muted));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gbs-status-color, var(--gbs-calendar-muted)) 24%, transparent);
}