/* Shared by the clinical workspace and the standalone patient pages. */
:root {
  --control-glass: linear-gradient(165deg, #ffffffb8 0%, #ffffff55 48%, #dcd4f066 100%);
  --control-solid: linear-gradient(165deg, #8074de 0%, #5142bc 44%, #3426a6 75%, #281e85 100%);
  --control-raised: 0 5px 9px #34265022, 0 2px 1px #66548038, inset 0 1px 2px #ffffffed, inset 0 -1px 2px #79659735;
  --control-lifted: 0 9px 16px #3426502c, 0 3px 1px #66548040, inset 0 1px 2px #ffffff, inset 0 -1px 2px #79659735;
  --control-pressed: inset 0 3px 6px #34265038, inset 0 -1px 2px #ffffffc9, 0 1px 2px #34265018;
  --control-colored: 0 6px 12px #3426a638, 0 2px 1px #281e8566, inset 0 1px 2px #ffffff9e, inset 0 -2px 3px #1d155e55;
  --control-focus: #7865d8;
  --kit-btn-bg: var(--control-glass);
  --kit-btn-border: #ffffffc9;
  --kit-btn-shadow: var(--control-raised);
  --kit-btn-hover-bg: linear-gradient(165deg, #ffffffe3, #ffffff99 48%, #dfd6f2b3);
  --kit-btn-hover-shadow: var(--control-lifted);
  --kit-btn-active-shadow: var(--control-pressed);
  --kit-primary-bg: linear-gradient(165deg, #f6efffe8, #d5c5efa8 62%, #ba9bd499);
  --kit-primary-border: #b4a1dd;
  --kit-primary-shadow: var(--control-raised);
  --kit-primary-hover-bg: linear-gradient(165deg, #ffffffed, #e7d8f7cc 62%, #c7afe799);
}

/* Keep each control's geometry and semantic color; add a consistent glass edge and depth. */
html body :is(button, a[data-slot="button"], a.primary, a.secondary, a.btn, .appointment-actions a, .appointment-meet-create):not(:where(.brand, .dashboard-reference-logo, .dashboard-reference-mobile-brand)) {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #ffffffb3 !important;
  border-radius: 14px;
  box-shadow: var(--control-raised) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
  touch-action: manipulation;
}

/* Glass faces for secondary actions and segmented controls. */
html body :is(button[data-ui-surface="glass"], .kit-button, .kit-tab, button.secondary, button.new-patient, .appointment-views button, .appointment-navigation button, .appointment-plain, .langbtn, .btn.secondary, .day-tab, .tk-date, .slot-btn, .appt-mode-btn) {
  background: var(--control-glass) !important;
  color: #342d59 !important;
  border-radius: 14px;
}

/* Main actions have an opaque, glossy purple face. Destructive actions retain red. */
html body :is(button[data-variant="default"], button[data-ui-surface="solid"], button.appointment-primary, .appointment-actions a.appointment-primary, .auth-card-modern button[type="submit"], .btn:not(.secondary), #join) {
  background: var(--control-solid) !important;
  color: #fff !important;
  border-color: #a69ce5 !important;
  box-shadow: var(--control-colored) !important;
}
html body button[data-variant="destructive"] {
  background: linear-gradient(165deg, #ef8b93, #c64258 48%, #9d233d) !important;
  color: #fff !important;
  border-color: #f5adb6 !important;
  box-shadow: 0 6px 12px #9d233d30, inset 0 1px 2px #ffffff9e, inset 0 -2px 3px #6e102e66 !important;
}

/* Selected tabs, switches and dates stay visibly latched after a click. */
html body :is(button[aria-pressed="true"], button[aria-selected="true"], button[aria-current="page"], button[data-selected-single="true"], button[data-range-start="true"], button[data-range-end="true"], button[data-state="checked"], button.active, button.selected, .kit-tab.active, .day-tab.active, .tk-date.active, .slot-btn.active, .appt-mode-btn.on, .seg button.on, .tk-scale button.on):not(:where(.brand, .dashboard-reference-logo, .dashboard-reference-mobile-brand)) {
  background: var(--control-solid) !important;
  color: #fff !important;
  border-color: #c2bbff !important;
  box-shadow: 0 4px 10px #3426a62b, 0 0 0 2px #c2bbff35, inset 0 1px 2px #ffffffa8, inset 0 -2px 4px #281e8566 !important;
}
html body :is(button[aria-selected="true"], button[aria-pressed="true"], button[aria-current="page"]) :is(strong, small) { color: inherit !important; }
html body button[data-range-middle="true"] { background: #ded4f4cc !important; color: #3426a6 !important; }
html body :is(button[class*="rounded-full"], button[role="switch"], .dashboard-reference-icon-button, .langbtn, .tk-water .step) { border-radius: 999px; }

@media (hover: hover) and (pointer: fine) {
  html body :is(button, a[data-slot="button"], a.primary, a.secondary, a.btn, .appointment-actions a, .appointment-meet-create):not(:where(.brand, .dashboard-reference-logo, .dashboard-reference-mobile-brand, :disabled, [aria-disabled="true"])):hover {
    transform: translateY(-2px);
    border-color: #c7baf2 !important;
    box-shadow: var(--control-lifted) !important;
  }
}
html body :is(button, a[data-slot="button"], a.primary, a.secondary, a.btn, .appointment-actions a, .appointment-meet-create):not(:where(.brand, .dashboard-reference-logo, .dashboard-reference-mobile-brand, :disabled, [aria-disabled="true"])):active {
  transform: translateY(1px) scale(.985) !important;
  box-shadow: var(--control-pressed) !important;
}
html body :is(button, a[data-slot="button"], a.primary, a.secondary, a.btn, .appointment-actions a, .appointment-meet-create):focus-visible {
  outline: 3px solid var(--control-focus) !important;
  outline-offset: 3px !important;
}
html body :is(button:disabled, button[aria-disabled="true"], a[aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 1px 2px #34265015, inset 0 1px 1px #ffffff9e !important;
}

/* The purple sidebar uses transparent faces until a destination is selected. */
html body :is(.dashboard-reference-nav-items, .sidebar) button:not(:where(.selected, [aria-current="page"], .dashboard-reference-logo, .appointment-primary)) {
  background: linear-gradient(165deg, #ffffff24, #ffffff08 55%, #21156320) !important;
  color: #fff !important;
  border-color: #ffffff38 !important;
  box-shadow: 0 4px 7px #1710402e, inset 0 1px 1px #ffffff63, inset 0 -1px 1px #1c126733 !important;
}
html body .dashboard-reference-nav-items button.selected {
  background: linear-gradient(165deg, #fff, #e8def9) !important;
  color: #3426a6 !important;
}
html body :is(.dashboard-reference-signout, .sidebar button):active { box-shadow: var(--control-pressed) !important; }

/* Calendar tiles are native, full-size date buttons, with event actions above them. */
html body .appointment-grid {
  gap: 8px;
  padding: 10px;
  border: 1px solid #ffffffb3;
  border-radius: 20px;
  background: linear-gradient(145deg, #ece6f580, #f7f3fa80);
  overflow: visible;
}
html body .appointment-weekday { background: transparent; padding: 6px 2px 10px; }
html body .appointment-calendar .appointment-day {
  position: relative;
  padding: 44px 7px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  min-height: 125px;
  isolation: isolate;
}
html body .appointment-calendar .appointment-day-number {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 14px;
  background: linear-gradient(165deg, #ffffffef, #ffffffb3 60%, #e7dff1bf);
  color: #514766;
  text-align: start;
}
html body .appointment-calendar .appointment-day.outside .appointment-day-number { background: var(--control-glass); color: #81798f; }
html body .appointment-calendar .appointment-day.today .appointment-day-number {
  background: linear-gradient(165deg, #ffffffef, #ffffffb3 60%, #e7dff1bf);
  border-radius: var(--calendar-tile-radius, 14px);
  color: #514766;
}
html body .appointment-calendar .appointment-day-number span { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; }
html body .appointment-calendar .appointment-day.today .appointment-day-number span { background: #3426a6; color: #fff; box-shadow: inset 0 1px 1px #ffffff88, 0 2px 4px #3426a638; }
html body .appointment-calendar .appointment-day-number[aria-pressed="true"] { background: linear-gradient(165deg, #f9f6ff, #d4c4ef) !important; color: #3426a6 !important; border-color: #aa96da !important; }
html body .appointment-calendar .appointment-event,
html body .appointment-calendar .appointment-more { position: relative; z-index: 1; }
html body .appointment-calendar .appointment-event { box-shadow: 0 2px 4px #34265012, inset 0 1px 1px #ffffffb3; }
html body .appointment-calendar .appointment-event button { border-color: transparent !important; box-shadow: inset 0 1px 1px #ffffff44, 0 1px 2px #34265012 !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .appointment-calendar .appointment-event button:hover { transform: none; background: #ffffff55; }

/* Date pickers and tracking calendars share the same depth and selected states. */
html body [data-slot="calendar"] :is(.rdp-week, .rdp-weekdays) { gap: 4px; }
html body [data-slot="calendar"] button[data-day] { border-radius: 9px; }
html body [data-slot="calendar"] button[data-range-middle="true"] { border-radius: 0; }
html body :is(.tk-date, .day-tab, .slot-btn, .appt-mode-btn) { backdrop-filter: blur(9px); }
html body .tk-date.active .dn { color: #fff; }

@media (max-width: 750px) {
  html body .appointment-calendar { --calendar-tile-radius: 10px; }
  html body .appointment-grid { gap: 5px; padding: 6px; border-radius: 14px; }
  html body .appointment-calendar .appointment-day { min-height: 100px; padding: 37px 3px 5px; border-radius: 10px; }
  html body .appointment-calendar .appointment-day-number { padding: 5px 3px; border-radius: 10px; }
  html body .appointment-calendar .appointment-day-number span { min-width: 0; width: 24px; max-width: 100%; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(button, a[data-slot="button"], a.primary, a.secondary, a.btn, .appointment-actions a, .appointment-meet-create) {
    transition: none !important;
    transform: none !important;
  }
}
@media print {
  html body :is(button, a[data-slot="button"], a.primary, a.secondary, a.btn) { box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}