/* UI tweaks: sliding sidebar + compact date/time + floating form + today badge. */

/* Header button doubles as the sidebar slide toggle (all sizes). */
.nav-toggle { display: grid; place-items: center; }
.nav-toggle:hover { background: var(--slate-bg, #e8ebe6); }

/* ---- Sliding sidebar with smooth in/out easing ---- */
.sidebar {
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.34s ease;
  will-change: transform;
}
.app-body {
  transition: margin-left 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-overlay { transition: opacity 0.28s ease; }

@media (min-width: 768px) {
  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  body.sidebar-collapsed .app-body { margin-left: 0; }
  /* When the drawer is open on desktop it lifts above content. */
  .sidebar { box-shadow: 2px 0 16px rgba(20, 34, 26, 0.08); }
}

/* ---- Date field: calendar icon + compact single line (tap opens picker) ---- */
.date-display { gap: 8px; }
.date-display-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--teal, #6a8f6e);
}
#booking-date-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Time selects: a bit more compact ---- */
.hub-slot-fields .select {
  min-height: 38px;
  padding: 6px 10px;
}

/* ---- Floating booking form card (lifts off the page) ---- */
.hub-form-card {
  border: 1px solid var(--border, #e3e6dc);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(47, 71, 56, 0.14), 0 3px 10px rgba(47, 71, 56, 0.07);
}

/* ---- Today's bookings badge (sits in the bookings-list header) ---- */
.today-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--teal-soft, #e8f0e4);
  color: var(--teal-muted, #3f5c44);
  font-size: var(--text-sm, 13px);
  white-space: nowrap;
}
.today-badge-value {
  font-size: var(--text-md, 14px);
  font-weight: 700;
  color: var(--teal-dark, #55745a);
}

/* ---- Booking rules (inline note in the form) ---- */
.hub-form-rules {
  margin: 0 0 4px;
  padding: 10px 12px;
  background: var(--teal-soft, #e8f0e4);
  border-left: 3px solid var(--teal, #6a8f6e);
  border-radius: 8px;
}
.hub-rules-title {
  display: block;
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  color: var(--teal-muted, #3f5c44);
  margin-bottom: 6px;
}
.hub-rules-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-rules-list li {
  font-size: var(--text-xs, 11px);
  line-height: 1.45;
  color: var(--text-muted, #5e6b62);
}

/* ---- Rules acknowledgement popup ---- */
.rules-ack-intro {
  margin: 0 0 10px;
  font-size: var(--text-sm, 13px);
  color: var(--text-muted, #5e6b62);
}
.rules-ack-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rules-ack-list li {
  font-size: var(--text-md, 14px);
  line-height: 1.5;
  color: var(--text, #2a332c);
}

/* ---- Calendar toolbar: month centered, nav buttons separate ---- */
.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.calendar-toolbar .view-switcher { flex: 0 0 auto; }
.cal-date-label {
  flex: 1 1 auto;
  text-align: center;
  margin: 0;
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--navy, #2f4738);
  min-width: 120px;
  order: 0;
}
.calendar-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-nav-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  padding: 6px 12px;
  min-width: 38px;
}
/* On narrow screens put the month on its own centered line, above the controls */
@media (max-width: 640px) {
  .cal-date-label { order: -1; flex-basis: 100%; }
}

/* ---- Match time-field labels to the other form labels ---- */
.hub-slot-fields .field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Standing-lock form inside the modal ---- */
.lock-modal-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.lock-modal-form .field { display: flex; flex-direction: column; gap: 6px; }
.lock-modal-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lock-modal-form .checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lock-modal-form .checkbox { display: inline-flex; align-items: center; gap: 4px; }
.lock-modal-save { width: 100%; height: 44px; margin-top: 4px; }

/* ---- Standing-lock guide note (in the add/edit popup) ---- */
.lock-guide {
  margin: 0;
  padding: 10px 12px;
  background: var(--teal-soft, #e8f0e4);
  border-left: 3px solid var(--teal, #6a8f6e);
  border-radius: 8px;
  font-size: var(--text-xs, 11px);
  line-height: 1.5;
  color: var(--teal-muted, #3f5c44);
}

/* ---- In-progress bookings (happening right now): green "in use" accent ---- */
.cal-event.is-inprogress,
.cal-month-event.is-inprogress {
  box-shadow: inset 0 0 0 2px #2e7d32;
}
.timeline-block.is-inprogress {
  box-shadow: inset 0 0 0 2px #1b5e20;
}
.hub-booking-row.is-inprogress { border-left: 3px solid #2e7d32; }

/* "กำลังใช้งาน" badge in the today list */
.hub-booking-inuse {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e6f4ea;
  color: #1b5e20;
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Custom recurrence dialog ---- */
.repeat-custom { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.repeat-custom .field { display: flex; flex-direction: column; gap: 6px; }
.repeat-custom-row { display: flex; gap: 8px; align-items: center; }
.repeat-custom-row #rc-interval { width: 84px; flex: 0 0 auto; }
.repeat-custom-row #rc-freq { flex: 1 1 auto; }

/* ---- Critical rule (the 15-min no-show rule): red + bold, both places ---- */
.hub-rules-list li.rule-critical,
.rules-ack-list li.rule-critical {
  color: #c0342b;
  font-weight: 700;
}