:root {
  --da-canvas: #f2f6fa;
  --da-surface: #ffffff;
  --da-ink: #162b3a;
  --da-muted: #64788a;
  --da-border: #dce6ed;
  --da-accent: #0d817b;
  --da-accent-dark: #096d68;
  --da-shadow: 0 8px 26px rgba(18, 42, 61, 0.07);
}

body.dark,
html.dark body {
  --da-canvas: #101a28;
  --da-surface: #172536;
  --da-ink: #e6eef4;
  --da-muted: #a1b1c0;
  --da-border: #33475a;
  --da-accent: #37b7ad;
  --da-accent-dark: #259d95;
  --da-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

body.has-app-sidebar {
  background-color: var(--da-canvas) !important;
  color: var(--da-ink);
}

body.has-app-sidebar .page-content {
  color: var(--da-ink);
}

body.has-app-sidebar .page-content :is(h1, h2, h3, h4) {
  color: var(--da-ink);
  letter-spacing: -0.02em;
}

body.has-app-sidebar .page-content .bg-white {
  background-color: var(--da-surface);
}

body.has-app-sidebar .page-content .border {
  border-color: var(--da-border);
}

body.has-app-sidebar .page-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  select,
  textarea
) {
  min-height: 42px;
  border: 1px solid var(--da-border);
  border-radius: 10px;
  background-color: var(--da-surface);
  color: var(--da-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.has-app-sidebar .page-content :is(input, select, textarea)::placeholder {
  color: #8a9baa;
}

body.has-app-sidebar .page-content :is(input, select, textarea):focus {
  border-color: var(--da-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-accent) 18%, transparent);
}

body.has-app-sidebar .page-content :is(button, a[class*="bg-"]) {
  border-radius: 10px;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

body.has-app-sidebar .page-content button:hover,
body.has-app-sidebar .page-content a[class*="bg-"]:hover {
  filter: brightness(1.035);
}

body.has-app-sidebar .page-content .bg-white.rounded-2xl.shadow-xl.border,
body.has-app-sidebar .page-content .bg-white.rounded-xl.shadow-md {
  border-color: var(--da-border);
  box-shadow: var(--da-shadow);
}

.app-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}

#settings .settings-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#settings .settings-eyebrow {
  margin: 0 0 5px;
  color: var(--da-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

#settings .settings-page-heading h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
}

#settings .settings-page-description {
  margin: 7px 0 0;
  color: var(--da-muted);
  font-size: 14px;
}

#settings .settings-heading-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--da-accent) 16%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--da-accent) 10%, var(--da-surface));
  color: var(--da-accent);
  font-size: 19px;
}

#settings .bg-white.rounded-2xl.shadow-xl.border {
  overflow: hidden;
  border-radius: 17px;
}

#settings .settings-toggle {
  min-height: 64px;
  border-radius: 0;
  color: var(--da-ink);
}

#settings .settings-toggle:hover {
  background: color-mix(in srgb, var(--da-accent) 5%, var(--da-surface));
}

#settings .settings-logo-card {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--da-accent) 20%, var(--da-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--da-accent) 4%, var(--da-surface));
}

#settings .settings-logo-copy h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
}

#settings .settings-logo-copy p,
#settings .settings-help-text {
  margin: 5px 0 0;
  color: var(--da-muted);
  font-size: 12px;
  line-height: 1.5;
}

#settings .settings-logo-controls {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 14px;
}

#settings .settings-logo-preview {
  display: grid;
  min-height: 104px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--da-border);
  border-radius: 12px;
  background: var(--da-surface);
  color: var(--da-muted);
  font-size: 12px;
}

#settings .settings-logo-preview img {
  display: block;
  max-width: 100%;
  max-height: 92px;
  object-fit: contain;
}

#settings .settings-logo-actions {
  display: grid;
  gap: 9px;
  justify-items: start;
}

#settings .settings-logo-form {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

#settings .settings-file-label,
#settings .settings-primary-button,
#settings .settings-delete-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--da-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#settings .settings-file-label {
  position: relative;
  overflow: hidden;
  background: var(--da-surface);
  color: var(--da-ink);
}

#settings .settings-file-label input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#settings .settings-primary-button {
  border-color: var(--da-accent);
  background: var(--da-accent);
  color: #fff;
}

#settings .settings-primary-button:hover {
  background: var(--da-accent-dark);
}

#settings .settings-delete-button {
  min-height: 32px;
  padding: 0 10px;
  border-color: #fecaca;
  background: #fff7f7;
  color: #b42318;
  font-size: 12px;
}

/* Keep common Tailwind/Bootstrap surfaces readable in either signed-in workspace. */
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app) {
  color: var(--da-ink);
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="text-black"], [class~="text-gray-950"], [class~="text-gray-900"], [class~="text-gray-800"],
  [class~="text-slate-950"], [class~="text-slate-900"], [class~="text-slate-800"],
  [class~="text-zinc-950"], [class~="text-zinc-900"], [class~="text-zinc-800"],
  [class~="text-neutral-950"], [class~="text-neutral-900"], [class~="text-neutral-800"],
  [class~="text-stone-950"], [class~="text-stone-900"], [class~="text-stone-800"]
) {
  color: var(--da-ink) !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="text-gray-700"], [class~="text-slate-700"], [class~="text-zinc-700"],
  [class~="text-neutral-700"], [class~="text-stone-700"]
) {
  color: #d3dee6 !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="text-gray-600"], [class~="text-gray-500"], [class~="text-gray-400"],
  [class~="text-slate-600"], [class~="text-slate-500"], [class~="text-slate-400"],
  [class~="text-zinc-600"], [class~="text-zinc-500"], [class~="text-zinc-400"],
  [class~="text-neutral-600"], [class~="text-neutral-500"], [class~="text-neutral-400"],
  [class~="text-stone-600"], [class~="text-stone-500"], [class~="text-stone-400"]
) {
  color: var(--da-muted) !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="bg-white"], [class~="bg-gray-50"], [class~="bg-slate-50"],
  [class~="bg-zinc-50"], [class~="bg-neutral-50"], [class~="bg-stone-50"],
  [class~="bg-gray-100"], [class~="bg-slate-100"], [class~="bg-zinc-100"],
  [class~="bg-neutral-100"], [class~="bg-stone-100"]
) {
  background-color: var(--da-surface) !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="bg-gray-200"], [class~="bg-slate-200"], [class~="bg-zinc-200"],
  [class~="bg-neutral-200"], [class~="bg-stone-200"]
) {
  background-color: #293e50 !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="border-gray-100"], [class~="border-gray-200"], [class~="border-gray-300"],
  [class~="border-slate-100"], [class~="border-slate-200"], [class~="border-slate-300"],
  [class~="border-zinc-100"], [class~="border-zinc-200"], [class~="border-zinc-300"],
  [class~="border-neutral-100"], [class~="border-neutral-200"], [class~="border-neutral-300"],
  [class~="border-stone-100"], [class~="border-stone-200"], [class~="border-stone-300"],
  [class~="divide-gray-200"], [class~="divide-slate-200"]
) {
  border-color: var(--da-border) !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="hover:bg-gray-50"], [class~="hover:bg-gray-100"],
  [class~="hover:bg-slate-50"], [class~="hover:bg-slate-100"],
  [class~="hover:bg-zinc-50"], [class~="hover:bg-neutral-50"], [class~="hover:bg-stone-50"]
):hover {
  background-color: #203648 !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
  select, textarea, .form-control, .form-select, .input-group-text
) {
  border-color: var(--da-border) !important;
  color: var(--da-ink) !important;
  background-color: #101a28 !important;
  color-scheme: dark;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(input, select, textarea)::placeholder {
  color: #91a5b4 !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app) option {
  color: var(--da-ink);
  background-color: var(--da-surface);
}

/* Subtle status backgrounds become dark-tinted instead of staying pale. */
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"]) { background-color: #1b344b !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-green-50"], [class~="bg-green-100"], [class~="bg-green-200"], [class~="bg-emerald-50"], [class~="bg-emerald-100"]) { background-color: #1d392e !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-teal-50"], [class~="bg-teal-100"], [class~="bg-teal-200"]) { background-color: #1c3e3b !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-yellow-50"], [class~="bg-yellow-100"], [class~="bg-yellow-200"], [class~="bg-amber-50"], [class~="bg-amber-100"]) { background-color: #3a321d !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-red-50"], [class~="bg-red-100"], [class~="bg-red-200"], [class~="bg-rose-50"], [class~="bg-rose-100"]) { background-color: #3b2426 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-purple-50"], [class~="bg-purple-100"], [class~="bg-purple-200"], [class~="bg-violet-50"], [class~="bg-violet-100"]) { background-color: #2c2742 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"]) { background-color: #293253 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="bg-orange-50"], [class~="bg-orange-100"], [class~="bg-orange-200"]) { background-color: #3b2c20 !important; }

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="text-blue-600"], [class~="text-blue-700"], [class~="text-blue-800"], [class~="text-blue-900"],
  [class~="text-cyan-600"], [class~="text-cyan-700"], [class~="text-cyan-800"], [class~="text-cyan-900"]
) { color: #9bd0f7 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is(
  [class~="text-green-600"], [class~="text-green-700"], [class~="text-green-800"], [class~="text-green-900"],
  [class~="text-emerald-600"], [class~="text-emerald-700"], [class~="text-emerald-800"]
) { color: #91e2ad !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="text-teal-600"], [class~="text-teal-700"], [class~="text-teal-800"], [class~="text-teal-900"]) { color: #83dfd2 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="text-yellow-600"], [class~="text-yellow-700"], [class~="text-yellow-800"], [class~="text-amber-600"], [class~="text-amber-700"], [class~="text-amber-800"]) { color: #f1d27c !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="text-red-600"], [class~="text-red-700"], [class~="text-red-800"], [class~="text-rose-600"], [class~="text-rose-700"], [class~="text-rose-800"]) { color: #f2a6a8 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="text-purple-600"], [class~="text-purple-700"], [class~="text-purple-800"], [class~="text-violet-600"], [class~="text-violet-700"], [class~="text-violet-800"]) { color: #cbbcf8 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="text-indigo-600"], [class~="text-indigo-700"], [class~="text-indigo-800"]) { color: #c2cbf5 !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class~="text-orange-600"], [class~="text-orange-700"], [class~="text-orange-800"]) { color: #f3ba83 !important; }

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-slate-50"], [class*="bg-gradient-to-"][class*="from-gray-50"], [class*="bg-gradient-to-"][class*="from-zinc-50"], [class*="bg-gradient-to-"][class*="from-neutral-50"], [class*="bg-gradient-to-"][class*="from-stone-50"]) {
  border-color: var(--da-border) !important;
  background-color: #1c3041 !important;
  background-image: none !important;
}

:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-blue-50"]) { border-color: #2e4e68 !important; background-color: #1b344b !important; background-image: none !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-green-50"], [class*="bg-gradient-to-"][class*="from-emerald-50"]) { border-color: #315742 !important; background-color: #1d392e !important; background-image: none !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-teal-50"]) { border-color: #2e5d58 !important; background-color: #1c3e3b !important; background-image: none !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-yellow-50"], [class*="bg-gradient-to-"][class*="from-amber-50"]) { border-color: #5b4b28 !important; background-color: #3a321d !important; background-image: none !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-red-50"], [class*="bg-gradient-to-"][class*="from-rose-50"]) { border-color: #5a3638 !important; background-color: #3b2426 !important; background-image: none !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-purple-50"], [class*="bg-gradient-to-"][class*="from-violet-50"]) { border-color: #493f6d !important; background-color: #2c2742 !important; background-image: none !important; }
:is(body.has-app-sidebar.dark, body.doctor-portal-app.dark, html.dark body.has-app-sidebar, html.dark body.doctor-portal-app)
:is([class*="bg-gradient-to-"][class*="from-orange-50"]) { border-color: #60452d !important; background-color: #3b2c20 !important; background-image: none !important; }

@media (max-width: 640px) {
  #settings .settings-heading-mark { display: none; }
  #settings .settings-logo-controls { grid-template-columns: 1fr; }
  #settings .settings-logo-preview { min-height: 90px; }
  #settings .settings-logo-form > * { flex: 1 1 100%; }
}

@media print {
  .app-brand-logo { display: none !important; }
}