:root {
  color-scheme: light;
  --bg: #fbf7f4;
  --panel: #fff;
  --panel2: #f6eae3;
  --border: #eadfd8;
  --border-strong: #a28a7e;
  --text: #2a201c;
  --muted: #725f56;
  --accent: #9c6048;
  --accent2: #7a4a37;
  --on-accent: #fff;
  --green: #23714f;
  --red: #ab392c;
  --yellow: #79570e;
  --success-bg: #e8f5e9;
  --success-border: #c8e6c9;
  --danger-bg: #fdeee9;
  --danger-border: #f0cfc6;
  --warning-bg: #fff3e0;
  --warning-border: #ecd9a0;
  --warning-panel: #fffdf5;
  --login-panel: #fffdfb;
  --browser-theme: #9c6048;
  --orenda-fade-duration: 280ms;
  --orenda-fade-easing: ease-in-out;
  background: var(--bg);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1d1917;
  --panel: #28221f;
  --panel2: #332a25;
  --border: #493a32;
  --border-strong: #94796b;
  --text: #f4eae4;
  --muted: #c2b0a6;
  --accent: #d09a7c;
  --accent2: #e1ad91;
  --on-accent: #1d1917;
  --green: #8ad2ab;
  --red: #ffaaa0;
  --yellow: #f0cb7a;
  --success-bg: #203a2c;
  --success-border: #416a53;
  --danger-bg: #432926;
  --danger-border: #86524a;
  --warning-bg: #392e20;
  --warning-border: #7c6138;
  --warning-panel: #30271c;
  --login-panel: var(--panel);
  --browser-theme: var(--bg);
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--orenda-fade-duration);
  animation-timing-function: var(--orenda-fade-easing);
}

html.orenda-loading { background: var(--bg); }
html.orenda-loading body { visibility: hidden !important; }
html.orenda-ready #orendaPageLoader { display: none; }
html.orenda-font-fallback body,
html.orenda-font-fallback body * { font-family: Tahoma, Arial, sans-serif !important; }

#orendaPageLoader {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--bg);
  visibility: visible !important;
}
#orendaPageLoader img { object-fit: contain; }
#orendaPageLoader span {
  width: 80px;
  height: 2px;
  background: var(--border-strong);
  overflow: hidden;
  border-radius: 2px;
}
#orendaPageLoader span::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  animation: orenda-wait 1.2s ease-in-out infinite;
}
@keyframes orenda-wait { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
  #orendaPageLoader span::after { animation: none; width: 100%; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Match the specificity of the clinical styles injected after page load. */
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .overview-card,
html[data-theme="dark"] body .overview-row,
html[data-theme="dark"] body .patient-item,
html[data-theme="dark"] body .tabs,
html[data-theme="dark"] body .dash-pulse { border-color: var(--border); }

html[data-theme="dark"] body .fin-stat:not(.due),
html[data-theme="dark"] body .lv-stat:not(.due):not(.ok),
html[data-theme="dark"] body .login-card { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] body .fin-stat.due,
html[data-theme="dark"] body .lv-stat.due { background: var(--danger-bg); }
html[data-theme="dark"] body .lv-stat.ok { background: var(--success-bg); }
html[data-theme="dark"] body .overview-card,
html[data-theme="dark"] body .diag-toolbar,
html[data-theme="dark"] body .patient-item:hover,
html[data-theme="dark"] body .patient-item:active,
html[data-theme="dark"] body .photo-slot:hover,
html[data-theme="dark"] body tbody tr:hover { background: var(--panel2); }

html[data-theme="dark"] body .section-title,
html[data-theme="dark"] body .dash-pulse-num {
  background: none;
  color: var(--accent2);
  -webkit-text-fill-color: currentColor;
}
html[data-theme="dark"] body .login-card .login-brand { color: var(--accent2); }
html[data-theme="dark"] body .photo-timeline-pt.active { color: var(--on-accent) !important; }
html[data-theme="dark"] body .wa-btn { color: var(--on-accent); }
html[data-theme="dark"] body .wa-btn:hover { background: var(--green); text-decoration: underline; }
html[data-theme="dark"] body .tooth.selected,
html[data-theme="dark"] body .reveal-tooth .badge { color: var(--on-accent); }
html[data-theme="dark"] body .p-avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--border-strong); }

html[data-theme="dark"] .orenda-workspace button:not([class]),
html[data-theme="dark"] .orenda-workspace button.small:not(.secondary):not(.danger),
html[data-theme="dark"] .orenda-workspace .pf-chip.active {
  background-image: none;
  background-color: var(--accent);
  color: var(--on-accent);
}
html[data-theme="dark"] .orenda-workspace :is(
  input:where(:not([type]), [type="text"], [type="search"], [type="email"], [type="password"],
    [type="number"], [type="date"], [type="datetime-local"], [type="time"], [type="tel"],
    [type="url"], [type="month"], [type="week"], [type="file"]),
  textarea, select
) {
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--text);
}
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] .orenda-workspace :is(input, textarea, select):focus { border-color: var(--accent); }
:root[data-theme="dark"] :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

.orenda-offline {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
  text-align: center;
}
.orenda-offline-card {
  max-width: 28rem;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}
.orenda-offline-card a,
.orenda-update-bar button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
}
.orenda-update-bar {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(var(--bottom-bar-h, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 3000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
}