/**
 * KA Google Calendar – enhanced calendar styles
 * Rewritten for briklix3 theme compatibility.
 * Uses CSS custom properties from the theme where available.
 */

/* ── Variables (fallbacks so the file works standalone) ─────────────────── */
:root {
  --ka-bg:          var(--color-bg,        #fff);
  --ka-bg-alt:      var(--color-bg-alt,    #f8fafc);
  --ka-border:      var(--color-border,    #e2e8f0);
  --ka-text:        var(--color-text,      #1e293b);
  --ka-text-muted:  var(--color-text-muted,#64748b);
  --ka-primary:     var(--color-primary,   #0f1f3d);
  --ka-secondary:   var(--color-secondary, #3b82f6);
  --ka-radius:      var(--radius-default,  8px);
  --ka-radius-card: var(--radius-card,     12px);
  --ka-font:        var(--font-family-sans, system-ui, sans-serif);
  --ka-col-time:    4.5rem;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.ka-calendar-wrapper {
  font-family: var(--ka-font);
  width: 100%;
  max-width: 100%;
}

/* ── Expert select ───────────────────────────────────────────────────────── */
.ka-expert-select-container {
  background: var(--ka-bg-alt);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius-card);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--ka-text);
}
.ka-expert-select-container label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ka-primary);
  margin-bottom: .5rem;
}
.ka-expert-select {
  width: 100%;
  max-width: 360px;
  padding: .625rem 2rem .625rem .875rem;
  border: 1.5px solid var(--ka-border);
  border-radius: var(--ka-radius);
  background: var(--ka-bg);
  color: var(--ka-text);
  font-family: inherit;
  font-size: .9375rem;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.ka-expert-select:focus { outline: none; border-color: var(--ka-secondary); box-shadow: 0 0 0 3px rgb(59 130 246/.18); }

/* ── Calendar container ──────────────────────────────────────────────────── */
.ka-calendar-container {
  background: var(--ka-bg);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius-card);
  width: 100%;
  overflow: visible;
}

/* ── Calendar header (h3 + week range) ──────────────────────────────────── */
.ka-calendar-header {
  display: block;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 2px solid var(--ka-border);
}
.ka-calendar-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ka-primary);
  background: none;
  -webkit-text-fill-color: var(--ka-primary);
  margin: 0 0 .25rem;
}
.ka-week-range {
  font-size: .875rem;
  color: var(--ka-text-muted);
  margin: 0;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.ka-calendar-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.25rem;
  background: var(--ka-bg-alt);
  border-bottom: 1px solid var(--ka-border);
}
.ka-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .4375rem .875rem;
  background: var(--ka-bg);
  color: var(--ka-primary);
  border: 1.5px solid var(--ka-border);
  border-radius: var(--ka-radius);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  box-shadow: none;
  transform: none;
}
.ka-nav-btn:hover {
  background: var(--ka-bg-alt);
  border-color: var(--ka-secondary);
  color: var(--ka-secondary);
  transform: none;
  box-shadow: none;
}
.ka-nav-btn:disabled,
.ka-nav-btn.disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.ka-today-btn {
  background: var(--ka-secondary);
  border-color: var(--ka-secondary);
  color: #fff;
}
.ka-today-btn:hover {
  background: oklch(from var(--ka-secondary) calc(l - .06) c h);
  border-color: transparent;
  color: #fff;
}

/* ── Calendar grid outer wrapper ─────────────────────────────────────────── */
.ka-calendar-grid {
  background: var(--ka-bg);
  width: 100%;
  overflow-x: auto; /* horizontal scroll on narrow screens */
}

/* ── Time header (day names + dates) ─────────────────────────────────────── */
.ka-calendar-time-header {
  display: grid;
  grid-template-columns: var(--ka-col-time) repeat(7, minmax(80px, 1fr));
  min-width: 650px;
  background: var(--ka-bg-alt);
  border-bottom: 2px solid var(--ka-border);
  /* remove plugin gradient */
  background-image: none;
  color: var(--ka-primary);
  font-weight: 600;
  border-radius: 0;
  overflow: visible;
}
.ka-calendar-time-header .ka-time-label {
  background: transparent;
  border-right: 1px solid var(--ka-border);
  color: var(--ka-text-muted);
  font-size: .6875rem;
  padding: .625rem .375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ka-calendar-time-header .ka-day-header {
  padding: .625rem .375rem;
  text-align: center;
  border-right: 1px solid var(--ka-border);
  color: var(--ka-primary);
  transition: none;
}
.ka-calendar-time-header .ka-day-header:last-child { border-right: none; }
.ka-day-header.ka-today-header { background: rgba(59,130,246,.08); box-shadow: none; }
.ka-day-name {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ka-text-muted);
  margin-bottom: .2rem;
  opacity: 1;
}
.ka-day-number { font-size: .9375rem; font-weight: 700; color: var(--ka-primary); }
.ka-today-header .ka-day-number { color: var(--ka-secondary); }

/* ── Time slots scrollable area ──────────────────────────────────────────── */
.ka-calendar-time-slots {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: visible;
  border: 1px solid var(--ka-border);
  border-top: none;
  border-radius: 0 0 var(--ka-radius-card) var(--ka-radius-card);
  width: 100%;
}

/* ── Individual time row ─────────────────────────────────────────────────── */
.ka-time-row {
  display: grid;
  grid-template-columns: var(--ka-col-time) repeat(7, minmax(80px, 1fr));
  min-width: 650px;
  border-bottom: 1px solid var(--ka-border);
  min-height: 48px;
  transition: background .1s;
}
.ka-time-row:last-child { border-bottom: none; }
.ka-time-row:hover { background: var(--ka-bg-alt); }

.ka-time-row .ka-time-label {
  padding: 0 .375rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ka-text-muted);
  background: var(--ka-bg-alt);
  border-right: 1px solid var(--ka-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* ── Time slot cells ─────────────────────────────────────────────────────── */
.ka-time-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ka-border);
  padding: .25rem;
  font-size: .625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .1s, transform .1s;
  position: relative;
}
.ka-time-slot:last-child { border-right: none; }

/* Available */
.ka-time-slot.ka-available {
  background: #d1fae5;
  color: #065f46;
}
.ka-time-slot.ka-available:hover {
  background: #a7f3d0;
  transform: none;
  box-shadow: none;
}
/* Booked */
.ka-time-slot.ka-booked {
  background: #fee2e2;
  color: #991b1b;
  cursor: not-allowed;
  opacity: .8;
}
/* Unavailable / outside hours */
.ka-time-slot.ka-unavailable,
.ka-time-slot.ka-outside-hours {
  background: var(--ka-bg-alt);
  color: var(--ka-border);
  cursor: default;
}
/* Today column */
.ka-time-slot.ka-today { outline: 1.5px solid var(--ka-secondary); outline-offset: -1px; }
/* Selected */
.ka-time-slot.ka-selected {
  background: var(--ka-secondary);
  color: #fff;
  border-color: var(--ka-secondary);
  transform: none;
  box-shadow: none;
  z-index: 1;
}
.ka-time-slot:hover { transform: none; z-index: 0; }

.ka-slot-text {
  font-size: .625rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}

/* ── Booking form ─────────────────────────────────────────────────────────── */
.ka-booking-form-container {
  padding: 1.5rem;
  background: var(--ka-bg-alt);
  border-top: 1px solid var(--ka-border);
  border-radius: 0 0 var(--ka-radius-card) var(--ka-radius-card);
}
.ka-booking-form-container h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ka-primary);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--ka-border);
}
.ka-booking-form { display: flex; flex-direction: column; gap: .875rem; }
.ka-form-row { display: flex; flex-direction: column; gap: .375rem; }
.ka-form-row label { font-size: .8125rem; font-weight: 600; color: var(--ka-primary); }
.ka-form-row input,
.ka-form-row select,
.ka-form-row textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--ka-border);
  border-radius: var(--ka-radius);
  font-family: inherit;
  font-size: .9375rem;
  color: var(--ka-text);
  background: var(--ka-bg);
  transition: border-color .15s;
}
.ka-form-row input:focus,
.ka-form-row select:focus,
.ka-form-row textarea:focus {
  outline: none;
  border-color: var(--ka-secondary);
  box-shadow: 0 0 0 3px rgb(59 130 246/.18);
}
.ka-duration-info { font-size: .8125rem; color: var(--ka-text-muted); margin-top: .25rem; }
.ka-submit-btn,
.ka-booking-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .875rem 1.5rem;
  background: var(--ka-secondary);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--ka-radius);
  cursor: pointer;
  transition: background .15s;
  margin-top: .25rem;
  transform: none;
  box-shadow: none;
}
.ka-submit-btn:hover,
.ka-booking-submit:hover { background: oklch(from var(--ka-secondary) calc(l - .06) c h); transform: none; }

/* ── Error / loading ─────────────────────────────────────────────────────── */
.ka-error {
  padding: .875rem 1.125rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--ka-radius);
  font-size: .9375rem;
  margin: .75rem 0;
}
.ka-loader { text-align: center; padding: 2rem; color: var(--ka-text-muted); }

/* ── Booking section header ──────────────────────────────────────────────── */
.ka-booking-section {
  background: var(--ka-bg);
  border-radius: var(--ka-radius-card);
  padding: 1.5rem;
  border: 1px solid var(--ka-border);
}
.ka-calendar-section {
  background: var(--ka-bg);
  border-radius: var(--ka-radius-card);
  padding: 1.5rem;
  border: 1px solid var(--ka-border);
  margin-bottom: 1.25rem;
}
.ka-calendar-header {
  border-bottom: 2px solid var(--ka-border);
  margin-bottom: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --ka-col-time: 3.5rem; }
  .ka-calendar-time-header { min-width: 600px; }
  .ka-time-row { min-width: 600px; }
}
@media (max-width: 768px) {
  :root { --ka-col-time: 3rem; }
  .ka-calendar-time-header { min-width: 520px; }
  .ka-time-row { min-width: 520px; }
  .ka-calendar-navigation { gap: .375rem; padding: .625rem .75rem; }
  .ka-nav-btn { font-size: .75rem; padding: .375rem .625rem; }
}