/* Trial layer. Loaded after styles.css; layout and booking semantics stay intact. */
:root {
  --accent: #087f83;
  --accent-hover: #056a70;
  --accent-soft: #def7f3;
  --ink: #173f43;
  --text: #33565a;
  --muted: #506d72;
  --line: #d7eae7;
  --line-strong: #8eb5b1;
  --surface: #ffffff;
  --canvas: #e4f8f4;
  --sidebar: #f6fdfb;
  --occupied: #e5ebec;
  --radius: 22px;
  --motion: 180ms ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html { background: #f4ffff; }
body {
  min-height: 100vh;
  isolation: isolate;
  background: #f4ffff;
}
/* One painted light field. Only its transform moves; no blur or canvas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 68% at 25% 4%, #ffffff 10%, #fffffff5 40%, #ffffff00 78%),
    radial-gradient(ellipse 58% 66% at 60% 42%, #ffffffd9 0%, #ffffff00 78%),
    radial-gradient(ellipse 64% 34% at 77% 110%, #ffffff 0%, #d5fffbe6 30%, #ffffff00 70%),
    radial-gradient(ellipse 56% 84% at 106% 62%, #18c8c5 0%, #64dfd7 35%, #81d8d000 75%),
    radial-gradient(ellipse 62% 48% at 4% 101%, #10c9c4 0%, #81e7df 42%, #81d8d000 80%),
    linear-gradient(140deg, #ffffff 18%, #e7fffd 55%, #81d8d0 100%);
  transform: scale(1.06);
}
@keyframes tiffany-light-flow {
  from { transform: translate(-1%, 1%) scale(1.06); }
  to { transform: translate(1%, -1%) scale(1.09); }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (update: fast) {
  body::before { animation: tiffany-light-flow 32s ease-in-out infinite alternate; }
}
body.day-dialog-open::before { animation-play-state: paused; }
.main { background: transparent; }
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f4fcfa 70%, #e9f9f5 100%);
  border-right-color: #d3eae6;
}
.brand { color: #174c51; }
.brand small, .nav-caption { color: #527372; }
.nav-item { border-radius: 14px; color: #527175; }
.nav-item.active { background: #d9f3ed; color: #096d71; }
.nav-item:hover { background: #e7f8f3; color: #16565a; }
.nav-count { background: #f5fdfb; color: #527575; }
.sidebar-bottom { border-top-color: #cde7e1; }
.sidebar-note, .sidebar-note small { color: #4c706d; }
.status-dot { background: #39a99c; }
.avatar-owner { color: #246e69; background: #d3efe6; }
.topbar, .toolbar, .page-footer { border-color: #cce7e2; }
.breadcrumbs { color: #476b70; }
.breadcrumbs span { color: #7da7a5; }
.eyebrow { color: #496c6b; }
.prototype-badge { background: #f6fdfb; border-color: #b9dfd7; color: #4b7471; border-radius: 9px; }
.page-heading p, .daily-strip { color: #496c70; }
.page-footer { color: #103f43; }
.daily-strip .text-button { color: #103f43; }
.daily-strip .strip-separator { background: #b8ddd5; }

.button,
.icon-btn,
.view-switch button,
.nav-item,
.text-button {
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.button {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  border-color: #bdded7;
  background: #ffffff;
  color: #315f63;
}
.button.primary {
  color: #174f52;
  background: linear-gradient(135deg, #bcefe9 0%, #81d8d0 100%);
  border-color: #74c8c1;
  box-shadow: 0 3px 10px #268f8412;
}
.button.primary:hover:not(:disabled) {
  color: #174f52;
  background: linear-gradient(135deg, #bcefe9 0%, #81d8d0 100%);
  border-color: #59bcb5;
}
.button.secondary { background: #f2fcf9; border-color: #b5ded5; color: #1e686a; }
.button.secondary:hover:not(:disabled) { background: #e4f8f2; border-color: #85c7ba; }
.button.quiet { color: #477575; background: transparent; }
.button.quiet:hover:not(:disabled) { color: #1a6567; background: #e2f5ef; }
.button.danger { background: #fff1f0; color: #a23e40; border-color: #e9c9c5; }
.button.danger:hover:not(:disabled) { background: #fce7e5; border-color: #dca8a3; }
.icon-btn { border-radius: 14px; color: #477577; }
.icon-btn:hover:not(:disabled) { color: #146f70; background: #def4ef; }
.text-button { color: #14787b; border-radius: 10px; }
.text-button:hover { color: #065f65; }
.view-switch { background: #dcefeb; border-color: #c7e4dc; border-radius: 15px; padding: 4px; }
.view-switch button { min-height: 38px; padding: 8px 13px; border-radius: 11px; font-size: 12px; color: #496c6c; }
.view-switch button.active,
.view-switch button[aria-pressed="true"] { color: #1c6365; background: white; box-shadow: 0 1px 4px #28786c13; }
.date-navigation .button { border-radius: 12px; }
.doctor-filter select { color: #3f696b; }
.overview-mode .overview-doctor-search { background: #fffffff2; border-color: #b4d6cf; border-radius: 14px; }
.search-box { border-color: #cee5df; background: #fbfefd; border-radius: 13px; color: #547370; }
.search-box:focus-within,
.overview-doctor-search:focus-within { border-color: #4eaaa3; box-shadow: 0 0 0 3px #65cabb24; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #159c99; }

.calendar-card, .visit-panel {
  background: white;
  border-color: #cde6df;
  border-radius: 22px;
  box-shadow: 0 8px 28px #1f74620a;
}
.calendar-card-heading { background: white; }
.calendar-card-heading h2 { color: #224d50; }
.step-label { background: #f0faf7; border-color: #d3eae3; color: #4d7970; border-radius: 8px; }
.overview-mode .overview-table { border-spacing: 0; background: #ffffff; }
.overview-mode .overview-table th,
.overview-mode .overview-table td { border: 0; }
.overview-mode .overview-table thead th {
  background: #f1faf8;
  background-clip: padding-box;
  border: 4px solid #ffffff;
  border-radius: 16px;
  color: #4e716c;
}
.overview-mode .overview-table th:first-child { background: white; box-shadow: 2px 0 0 #ffffff; }
.overview-mode .overview-table thead th:first-child { background: white; border-radius: 0; }
.overview-mode .overview-table tbody td { padding: 4px; }
.overview-mode .overview-table .doctor-heading strong { color: #285357; }
.overview-mode .overview-table .doctor-heading small { color: #50716e; }
.overview-mode .overview-cell {
  height: 68px;
  min-height: 68px;
  padding: 8px 2px;
  border: 1px solid #d6e7e4;
  border-radius: 14px;
  background: white;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.overview-mode .overview-cell.is-empty, .overview-mode .overview-table td.is-empty { background: white; }
.overview-mode .overview-cell.has-bookings { background: #e5ebec; border-color: #d1dddf; }
.overview-mode .overview-cell strong, .overview-mode .overview-cell .day-count { color: #3f6264; }
.overview-mode .overview-cell:hover { background: #f0faf7; border-color: #71bdb1; box-shadow: inset 0 0 0 1px #71bdb1; outline: none; }
.overview-mode .overview-cell.has-bookings:hover { background: #dfe8e9; }
.overview-mode .overview-cell.selected { border-color: #3faba0; box-shadow: inset 0 0 0 1px #3faba0; outline: none; }
.overview-mode .overview-cell:focus-visible { outline: 2px solid #087f83; outline-offset: 1px; }
.overview-wrap { scrollbar-color: #9bcdbf #edf9f5; }
.slot, .day-dialog .slot { border-radius: 12px; border-color: #b6d6cc; background: white; transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease; }
.slot.booked, .day-dialog .slot.booked { background: #e5ebec; border-color: #cbd9d8; color: #425e60; }
.slot.free { color: #3d6965; }
.slot.blocked, .day-dialog .slot.blocked { background: repeating-linear-gradient(135deg, #f4f8f6, #f4f8f6 5px, #e4eeea 5px, #e4eeea 6px); border-color: #d7e5de; color: #526d65; }
.slot:hover:not(:disabled) { border-color: #51aaa0; background: #f3fcf8; box-shadow: none; }
.slot.booked:hover:not(:disabled) { background: #dbe9e5; }
.slot.selected { border-color: #32a094; box-shadow: inset 0 0 0 1px #32a094; }
.slot.selected::after { background: #189b91; }
.slot-time, .day-dialog .slot-time { font-size: 15px; }
.slot-caption, .day-dialog .slot-caption { font-size: 10px; }
.calendar-legend { color: #4e716b; }
.legend-square { border-color: #adcfc1; }
.legend-square.booked { background: #e5ebec; }
.appointment-row:hover { background: #f3fcf7; }
.appointment-row.selected { background: #e3f6ee; box-shadow: inset 3px 0 #52b5a0; border-radius: 11px; }
.upcoming-section, .day-dialog .upcoming-section { border-top-color: #cee7dd; }

.app-dialog { border-radius: 22px; border-color: #c5e4da; box-shadow: 0 24px 90px #154d3b30; }
.app-dialog::backdrop, .day-dialog::backdrop { background: #123d3859; backdrop-filter: none; }
.day-dialog { background: linear-gradient(145deg, #fbffff, #e7f8f5); border-color: #b9ded9; border-radius: 22px; transform: none; }
.day-dialog[open], .app-dialog[open] { animation: tiffany-dialog-in 150ms ease-out; }
.day-dialog-heading, .dialog-heading { background: #ffffff; border-color: #d0e9df; }
.day-dialog-heading > button:first-child { color: #477c73; border-radius: 13px; }
.day-dialog-heading > button:first-child:hover { background: #e5f7ef; }
.day-dialog .day-calendar-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.day-dialog.day-mode .day-workspace .visit-panel { border-color: #cae6e2; border-radius: 20px; background: white; box-shadow: 0 6px 24px #23676e08; }
.visit-topline, .day-dialog .visit-topline { background: #fcfffd; border-color: #d7eade; }
.visit-topline > span { color: #4e777b; }
.visit-identity h2 { color: #204f4d; }
.patient-avatar { background: #def5f0; color: #347474; }
.visit-meta { color: #4e7479; }
.visit-meta [data-icon] { color: #6a989c; }
.visit-panel .visit-actions > .button.primary,
.payment-form > .button.primary,
.payment-received > .button,
.visit-completion > .button,
.editor-savebar .button,
.patient-editor-footer .button { min-height: 44px; font-size: 14px; border-radius: 16px; }
.arrival-confirmed { border-color: #c3e8d7; background: #e5f8ed; border-radius: 13px; color: #317054; }
.visit-workflow .workflow-section, .visit-completion, .visit-history-details { border-color: #d8eade; }
.workflow-section-heading h3 { color: #24575c; }
.patient-summary small, .patient-summary .muted { color: #4f7075; }
.patient-summary strong { color: #2c5a5e; }
.patient-editor > summary, .visit-note > summary { color: #247b7e; }
.payment-history-details > summary, .visit-history-details > summary { color: #55787c; }
.visit-more > summary { color: #4f7075; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: 12px; border-color: #a9c8cb; background: #ffffff; transition: border-color 180ms ease, background-color 180ms ease; }
input::placeholder, textarea::placeholder { color: #547479; }
.visit-workflow .form-field > span:first-child { color: #4f7277; }
.visit-editor-form .service-line { border-color: #deece1; }
.visit-editor-form .service-add .button { min-height: 44px; border-radius: 13px; font-size: 14px; }
.visit-editor-form .service-info strong, .visit-editor-form .service-price { color: #315b5f; }
.visit-workflow .totals-row.total { border-color: #c8e4d4; }
.visit-workflow .totals-row.total strong { color: #18767c; }
.payment-method { background: #ffffff; border-color: #b5d2d5; border-radius: 13px; }
.payment-method.active, .payment-method[aria-pressed="true"], .payment-method:has(input:checked) { color: #216f77; background: #e1f6f2; border-color: #78b3b5; box-shadow: none; }
.payment-method:hover { background: #effbf8; border-color: #8dbec0; }
.payment-section .payment-method input[type="radio"] { accent-color: #35868c; }
.editor-savebar, .payment-block-note { border-radius: 13px; }
.payment-success { border-radius: 13px; }
.dialog-footer { background: #f9fefb; border-color: #d3e9da; }
.drawer-scrim { background: #16413255; backdrop-filter: none; }
.toast { background: #255c47; border-color: #438c69; border-radius: 15px; }
.toast.error { background: #883d3a; border-color: #aa6560; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):hover, .icon-btn:not(:disabled):hover,
  .view-switch button:hover, .nav-item:hover { transform: translateY(-1px) scale(1.01); opacity: .96; }
  .text-button:hover { opacity: .8; }
}
.button:not(:disabled):active, .icon-btn:not(:disabled):active,
.view-switch button:active, .nav-item:active { transform: scale(.985); opacity: .9; filter: none; }
.overview-cell:active, .slot:active:not(:disabled) { transform: none; opacity: .88; filter: none; }
@keyframes tiffany-dialog-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 960px) {
  .main { background: transparent; }
  .page-heading > .button { font-size: 12px; border-radius: 15px; }
  .calendar-card { border-radius: 18px; }
  .overview-mode .overview-table th:first-child { background: #ffffff; }
  .overview-mode .overview-table thead th:first-child { background: #ffffff; }
  .overview-mode .overview-cell { height: 74px; min-height: 74px; }
  .day-dialog { border-radius: 20px; }
  .day-dialog.day-mode .day-workspace .visit-panel.open { border-radius: 0; background: #ffffff; box-shadow: none; }
  .visit-workflow .form-field input, .visit-workflow .form-field select,
  .visit-workflow .form-field textarea { font-size: 16px; }
  .visit-panel .visit-actions > .button.primary, .payment-form > .button.primary,
  .payment-received > .button, .visit-completion > .button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .icon-btn, .view-switch button, .nav-item, .text-button,
  .slot, .overview-cell { transform: none !important; transition: none !important; }
  .day-dialog[open], .app-dialog[open] { animation: none !important; }
  body::before { animation: none !important; transform: scale(1.06); }
}
@media print {
  html, body { background: white; }
  body::before { display: none; }
  .calendar-card, .visit-panel { box-shadow: none; }
}