/* ── Theme Variables (defaults match "pink" scheme; overridden by JS) ── */
:root {
  --color-primary: #F071DB;
  --color-primary-light: hsl(310, 78%, 82%);
  --color-primary-hover: hsl(310, 55%, 55%);
  --color-primary-active: hsl(310, 45%, 38%);
  --color-today: hsl(310, 60%, 90%);
  --color-tint: hsl(310, 45%, 94%);
  --color-canvas: hsl(310, 35%, 97%);
  --color-bg: hsl(310, 30%, 98%);
  --color-accent-1: #D271F0;
  --color-accent-2: #F0718E;
  --color-accent-3: #A871F0;
  --color-accent-4: #F07D71;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: #333;
  height: 100vh;
  overflow: hidden;
}

/* ── Main Layout (full screen calendar) ── */
main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Calendar Panel ── */
#calendar-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  overflow: hidden;
}

#calendar-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

#calendar-header h1 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.5px;
}

#calendar {
  flex: 1;
  min-height: 0;
}

/* ── Header Items (for drag-and-drop) ── */
.header-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

#header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.header-spacer {
  flex: 1;
  min-width: 0;
}

/* ── Salon Logo ── */
#salon-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

#salon-logo.hidden {
  display: none;
}

/* ── Nav Buttons ── */
.nav-btn {
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1.5px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}

.nav-btn:disabled {
  border-color: #ccc;
  color: #ccc;
  cursor: not-allowed;
}

/* ── Settings Gear ── */
#btn-settings {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

#btn-settings:hover {
  background: var(--color-primary);
  color: #fff;
}

#btn-settings svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

/* ── Settings Dropdown ── */
#settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 800;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#settings-dropdown.hidden {
  display: none;
}

#settings-anchor {
  position: relative;
}

.settings-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.settings-field input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.settings-field input[type="text"]:focus {
  border-color: var(--color-primary);
}

/* ── Color Scheme Selector ── */
.color-scheme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.color-scheme-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.color-scheme-btn:hover {
  border-color: #bbb;
}

.color-scheme-btn.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-tint);
}

.color-scheme-dots {
  display: flex;
  gap: 3px;
}

.color-scheme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}

.color-scheme-dot.main {
  width: 16px;
  height: 16px;
}

.color-scheme-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Day / Night Toggle ── */
.mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  justify-content: center;
}

.mode-toggle-btn:hover {
  background: var(--color-tint);
}

.mode-icon {
  fill: var(--color-primary);
  flex-shrink: 0;
}

.mode-icon-moon {
  display: none;
}

.dark-mode .mode-icon-sun {
  display: none;
}

.dark-mode .mode-icon-moon {
  display: block;
}

.mode-toggle-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-row .nav-btn {
  font-size: 0.75rem;
  padding: 4px 12px;
}

.settings-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-logo-row input[type="file"] {
  font-size: 0.78rem;
  min-width: 0;
  flex: 1;
}

.settings-logo-preview {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: contain;
  border: 1px solid #eee;
  flex-shrink: 0;
}

.settings-logo-preview.hidden {
  display: none;
}

.settings-reset {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.settings-reset .nav-btn {
  border-color: #c94040;
  color: #c94040;
}

.settings-reset .nav-btn:hover {
  background: #c94040;
  color: #fff;
}

#settings-logo-upload {
  font-size: 0.78rem;
}

.settings-row .nav-btn.active {
  background: var(--color-primary);
  color: #fff;
}


/* ── Customize Mode ── */
#customize-banner {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#customize-banner.hidden {
  display: none;
}

#customize-banner button {
  background: #fff;
  color: var(--color-primary);
  border: none;
  border-radius: 14px;
  padding: 4px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.customize-mode .header-item {
  outline: 2px dashed var(--color-primary-light);
  outline-offset: 3px;
  border-radius: 8px;
  cursor: grab;
  padding: 4px 6px;
  transition: outline-color 0.15s, background 0.15s;
}

.customize-mode .header-item.header-spacer {
  min-width: 60px;
  min-height: 32px;
  background: var(--color-canvas);
  border-radius: 6px;
  position: relative;
}

.customize-mode .header-item.header-spacer::after {
  content: '\2194';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-primary-light);
  pointer-events: none;
}

.customize-mode .header-item:hover {
  background: var(--color-tint);
}

.customize-mode .header-item.dragging {
  opacity: 0.4;
}

.customize-mode .header-item.drag-over {
  outline-color: var(--color-primary);
  outline-style: solid;
  background: var(--color-tint);
}

/* ── Calendar Toolbar ── */
#calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

#cal-title-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.cal-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.cal-btn:hover {
  background: var(--color-tint);
  border-color: var(--color-primary-light);
}

#cal-prev-btn,
#cal-next-btn {
  font-size: 1.2rem;
  padding: 3px 10px;
  font-weight: 700;
}

.cal-view-btn {
  border-radius: 0;
}

.cal-view-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.cal-view-btn:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.cal-view-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Up Next Widget ── */
#up-next-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: var(--color-tint);
  border-radius: 8px;
  border: 1px solid var(--color-primary-light);
  white-space: nowrap;
}

.up-next-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-primary);
}

.up-next-content {
  font-size: 0.8rem;
  color: #444;
  font-weight: 500;
}

.up-next-content .up-next-client {
  font-weight: 700;
  color: #333;
}

.up-next-content .up-next-sep {
  color: var(--color-primary-light);
  margin: 0 2px;
}

.up-next-content .up-next-tech {
  font-size: 0.72rem;
  color: #777;
}

/* ── FullCalendar Overrides ── */
.fc {
  font-size: 0.85rem;
  height: 100% !important;
}

.fc .fc-toolbar-title {
  font-size: 1.1rem;
}

.fc .fc-button-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.fc .fc-button-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background: var(--color-today) !important;
}

.fc .fc-timegrid-event .fc-event-main {
  overflow: hidden;
  padding: 1px 2px;
}

/* Day view fits the full open-hours range — slot height is computed in JS
   (_fitDaySlots) so the grid never needs an internal scrollbar. */
.cal-fit-day .fc-timegrid-slot {
  height: var(--day-slot-height);
}

/* Definitively remove the Day-view scrollbar. Slot heights (above) are sized
   to fit, so this only ever trims sub-pixel rounding slack — nothing visible
   is clipped, and expandRows keeps the grid filling the container. */
.cal-fit-day .fc-scroller-liquid-absolute {
  overflow: hidden !important;
}

.fc .fc-timegrid-now-indicator-container {
  overflow: visible;
}

.fc .fc-timegrid-now-indicator-line {
  left: -100vw !important;
  width: 200vw !important;
  border-color: #c94040;
  border-width: 1px;
}

.fc .fc-timegrid-now-indicator-arrow {
  display: none;
}

.fc-event {
  border-radius: 3px !important;
  border: none !important;
  padding: 1px 3px;
  font-size: 0.65rem;
  overflow: hidden;
}

.fc-event-custom {
  line-height: 1.15;
  overflow: hidden;
}

.fc-event-header {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.fc-event-header .fc-event-client,
.fc-event-header .fc-event-tech {
  font-weight: 600;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-event-arrow {
  flex: 0 0 auto;
  opacity: 0.7;
  font-weight: 400;
}

.fc-event-service {
  font-size: 0.6rem;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-daygrid-event .fc-event-custom.fc-event-compact {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  padding: 0 2px;
}

.fc-daygrid-more-link {
  color: var(--color-primary);
  font-size: 0.65rem;
  font-weight: 600;
}

/* ── Appointment approval state ──
   Color encodes approval, not technician. Approved = green;
   pending = gray (light) / white (dark). !important beats FullCalendar's
   inline event color defaults. */
.fc-event.appt-approved {
  background: #4caf50 !important;
  border-color: #388e3c !important;
}

.fc-event.appt-approved .fc-event-custom,
.fc-event.appt-approved .fc-event-custom * {
  color: #fff !important;
}

.fc-event.appt-pending {
  background: #d0d0d0 !important;
  border-color: #9e9e9e !important;
}

.fc-event.appt-pending .fc-event-custom,
.fc-event.appt-pending .fc-event-custom * {
  color: #333 !important;
}

.dark-mode .fc-event.appt-pending {
  background: #5c5c5c !important;
  border-color: #7a7a7a !important;
}

.dark-mode .fc-event.appt-pending .fc-event-custom,
.dark-mode .fc-event.appt-pending .fc-event-custom * {
  color: #e8e8e8 !important;
}

/* ── Floating Voice Widget ── */
#voice-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* ── FAB Button ── */
#voice-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(168, 107, 138, 0.4);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

#voice-fab svg {
  fill: #fff;
}

#voice-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(168, 107, 138, 0.5);
}

/* ── Voice Panel (expanded) ── */
#voice-panel {
  width: 340px;
  max-height: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#voice-panel.voice-panel-hidden {
  display: none;
}

/* ── Voice Panel Header ── */
#voice-panel-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

#voice-panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.8;
  transition: opacity 0.15s;
}

#voice-panel-close:hover {
  opacity: 1;
}

/* ── Status Bar ── */
#status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #666;
  padding: 10px 16px 4px;
  width: 100%;
  justify-content: center;
}

#status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-idle { background: #ccc; }
.status-connecting { background: #f0ad4e; animation: pulse 1s ease-in-out infinite; }
.status-connected { background: #5cb85c; }
.status-listening { background: #5cb85c; animation: pulse 0.6s ease-in-out infinite; }
.status-speaking { background: #5bc0de; animation: pulse 0.8s ease-in-out infinite; }
.status-error { background: #d9534f; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* ── Mic Button ── */
#mic-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(168, 107, 138, 0.3);
  margin: 8px 0;
  flex-shrink: 0;
}

#mic-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(168, 107, 138, 0.4);
}

#mic-btn.active {
  background: linear-gradient(135deg, #e06060, #c94040);
  box-shadow: 0 4px 15px rgba(201, 64, 64, 0.4);
  animation: pulse-ring 1.5s ease-in-out infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(201, 64, 64, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(201, 64, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 64, 64, 0); }
}

#mic-btn svg {
  fill: #fff;
}

/* ── Audio Visualizer ── */
#visualizer-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

#audio-visualizer {
  border-radius: 6px;
  background: var(--color-canvas);
}

/* ── Transcript ── */
#transcript-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 12px 12px;
}

#transcript-log {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  background: #fdfbfc;
  font-size: 0.82rem;
  line-height: 1.5;
  max-height: 220px;
}

.msg {
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 95%;
}

.msg-user {
  background: var(--color-tint);
  color: #5a3a4a;
  margin-left: auto;
  text-align: right;
}

.msg-assistant {
  background: #e8f4f0;
  color: #2a5a4a;
}

.msg-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  opacity: 0.7;
}

.msg-streaming {
  opacity: 0.7;
  border-left: 2px solid var(--color-primary);
}

/* ── Appointment Overlay ── */
#appt-overlay,
#appt-detail-overlay,
#confirm-overlay,
#notify-overlay,
#owner-pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlay-fade-in 0.15s ease;
}

#appt-overlay.overlay-hidden,
#appt-detail-overlay.overlay-hidden,
#confirm-overlay.overlay-hidden,
#notify-overlay.overlay-hidden,
#owner-pin-overlay.overlay-hidden {
  display: none;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The new-appointment overlay is non-blocking so the admin can see and
   interact with the calendar while the form is open. The modal itself
   restores pointer-events and is draggable by its header. */
#appt-overlay {
  background: transparent;
  pointer-events: none;
  animation: none;
}

#appt-overlay > #appt-modal {
  pointer-events: auto;
}

#appt-modal-header {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

#appt-modal.dragging #appt-modal-header {
  cursor: grabbing;
}

#appt-modal-close {
  cursor: pointer;
}

#appt-modal,
#appt-detail-modal,
#confirm-modal,
#notify-modal,
#owner-pin-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  animation: modal-slide-in 0.2s ease;
}

@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

#appt-modal-header,
#appt-detail-modal-header,
#confirm-modal-header,
#notify-modal-header,
#owner-pin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 16px 16px 0 0;
}

#appt-modal-close,
#appt-detail-close,
#confirm-close,
#notify-close,
#owner-pin-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.8;
  transition: opacity 0.15s;
}

#appt-modal-close:hover,
#appt-detail-close:hover,
#confirm-close:hover,
#notify-close:hover,
#owner-pin-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 20px;
}

.modal-message {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #333;
}

#appt-detail-body {
  padding: 20px;
}

#appt-detail-view .appt-form-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#appt-detail-view .appt-form-row label {
  flex: 0 0 90px;
  margin-bottom: 0;
}

#appt-detail-edit-form.detail-edit-hidden,
#appt-detail-view.detail-edit-hidden {
  display: none;
}

.appt-detail-value {
  font-size: 0.9rem;
  color: #333;
}

.btn-danger {
  border-color: #c94040;
  color: #c94040;
}

.btn-danger:hover {
  background: #c94040;
  color: #fff;
}

#appt-detail-approve.hidden {
  display: none;
}

.btn-success {
  border-color: #2e9e5b;
  color: #2e9e5b;
}

.btn-success:hover {
  background: #2e9e5b;
  color: #fff;
}

/* Confirm-dialog action buttons: solid fills so the choice is obvious
   (id specificity keeps these correct in light and dark mode). */
#confirm-modal .btn-success {
  background: #2e9e5b;
  border-color: #2e9e5b;
  color: #fff;
}

#confirm-modal .btn-success:hover {
  background: #268a4f;
  border-color: #268a4f;
}

#confirm-modal .btn-danger {
  background: #c94040;
  border-color: #c94040;
  color: #fff;
}

#confirm-modal .btn-danger:hover {
  background: #b53636;
  border-color: #b53636;
}

#appt-form {
  padding: 20px;
}

.appt-form-row {
  margin-bottom: 14px;
}

.appt-form-row label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
}

.appt-form-row input,
.appt-form-row select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
}

.appt-form-row input:focus,
.appt-form-row select:focus {
  border-color: var(--color-primary);
}

.appt-form-group {
  display: flex;
  gap: 12px;
}

.appt-form-group .appt-form-row {
  flex: 1;
}

.appt-detail-pin-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}

.appt-detail-pin-input:focus {
  border-color: var(--color-primary);
}

.appt-error {
  background: #fef2f2;
  color: #c94040;
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.appt-error.hidden {
  display: none;
}

.appt-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.appt-form-actions .nav-btn {
  flex: 1;
  text-align: center;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2a5a4a;
  color: #fff;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1100;
  pointer-events: none;
}

.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Dark Mode ── */
.dark-mode {
  color: #e0e0e0;
}

.dark-mode .nav-btn {
  background: hsl(0, 0%, 18%);
  color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.dark-mode .nav-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}

.dark-mode #btn-settings {
  background: hsl(0, 0%, 18%);
  color: var(--color-primary-light);
}

.dark-mode #btn-settings:hover {
  background: var(--color-primary);
  color: #fff;
}

.dark-mode #settings-dropdown {
  background: hsl(0, 0%, 16%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dark-mode .settings-field label {
  color: #aaa;
}

.dark-mode .settings-field input[type="text"] {
  background: hsl(0, 0%, 14%);
  border-color: hsl(0, 0%, 25%);
  color: #e0e0e0;
}

.dark-mode .settings-logo-preview {
  border-color: hsl(0, 0%, 25%);
}

.dark-mode .color-scheme-btn {
  background: hsl(0, 0%, 14%);
  border-color: hsl(0, 0%, 25%);
}

.dark-mode .color-scheme-btn:hover {
  border-color: hsl(0, 0%, 40%);
}

.dark-mode .color-scheme-label {
  color: #aaa;
}

.dark-mode .mode-toggle-btn {
  background: hsl(0, 0%, 18%);
}

.dark-mode .settings-reset {
  border-top-color: hsl(0, 0%, 22%);
}

.dark-mode .settings-row .nav-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.dark-mode #cal-title-text {
  color: #e0e0e0;
}

.dark-mode .cal-btn {
  background: hsl(0, 0%, 18%);
  border-color: hsl(0, 0%, 25%);
  color: #e0e0e0;
}

.dark-mode .cal-btn:hover {
  background: var(--color-tint);
  border-color: var(--color-primary-light);
}

.dark-mode .cal-view-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.dark-mode .up-next-content {
  color: #ccc;
}

.dark-mode .up-next-content .up-next-client {
  color: #e0e0e0;
}

.dark-mode .up-next-content .up-next-tech {
  color: #999;
}

/* Calendar dark overrides */
.dark-mode .fc .fc-scrollgrid {
  border-color: hsl(0, 0%, 22%) !important;
}

.dark-mode .fc th {
  background: hsl(0, 0%, 16%);
  color: #ccc;
}

.dark-mode .fc td {
  border-color: hsl(0, 0%, 22%) !important;
}

.dark-mode .fc th {
  border-color: hsl(0, 0%, 22%) !important;
}

.dark-mode .fc .fc-col-header-cell-cushion {
  color: #ccc;
}

.dark-mode .fc .fc-timegrid-slot-label-cushion {
  color: #999;
}

.dark-mode .fc .fc-daygrid-day-number {
  color: #ccc;
}

/* Voice widget dark */
.dark-mode #voice-panel {
  background: hsl(0, 0%, 16%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dark-mode #status-bar {
  color: #aaa;
}

.dark-mode #transcript-log {
  background: hsl(0, 0%, 14%);
  border-color: hsl(0, 0%, 22%);
  color: #e0e0e0;
}

.dark-mode .msg-user {
  color: #ddd;
}

.dark-mode .msg-assistant {
  background: hsl(160, 20%, 16%);
  color: #b0d8c8;
}

/* Modals dark */
.dark-mode #appt-modal,
.dark-mode #appt-detail-modal,
.dark-mode #confirm-modal,
.dark-mode #notify-modal,
.dark-mode #owner-pin-modal {
  background: hsl(0, 0%, 16%);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.dark-mode #appt-form,
.dark-mode #appt-detail-body {
  color: #e0e0e0;
}

.dark-mode .appt-detail-value,
.dark-mode .modal-message {
  color: #e0e0e0;
}

.dark-mode .appt-form-row label {
  color: #aaa;
}

.dark-mode .appt-form-row input,
.dark-mode .appt-form-row select {
  background: hsl(0, 0%, 14%);
  border-color: hsl(0, 0%, 25%);
  color: #e0e0e0;
}

.dark-mode .appt-detail-pin-input {
  background: hsl(0, 0%, 14%);
  border-color: hsl(0, 0%, 25%);
  color: #e0e0e0;
}

.dark-mode .appt-error {
  background: hsl(0, 20%, 16%);
}

/* Customize mode dark */
.dark-mode .customize-mode .header-item.header-spacer {
  background: hsl(0, 0%, 18%);
}

.dark-mode #customize-banner button {
  background: hsl(0, 0%, 16%);
}

/* Toast dark */
.dark-mode .toast {
  background: hsl(0, 0%, 22%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #calendar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #voice-panel {
    width: calc(100vw - 32px);
    max-height: 70vh;
  }

  #voice-widget {
    bottom: 16px;
    right: 16px;
  }

  #settings-dropdown {
    width: calc(100vw - 48px);
    right: -8px;
  }
}