/* DonorHub interface refresh — warm paper, arterial red, and community teal. */
:root {
  color-scheme: light;
  --background: 38 36% 96%;
  --foreground: 218 31% 19%;
  --card: 40 42% 99%;
  --card-foreground: 218 31% 19%;
  --card-border: 34 22% 86%;
  --popover: 40 42% 99%;
  --popover-foreground: 218 31% 19%;
  --popover-border: 34 22% 84%;
  --primary: 349 65% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 165 25% 90%;
  --secondary-foreground: 174 39% 24%;
  --muted: 36 24% 91%;
  --muted-foreground: 216 15% 43%;
  --accent: 39 77% 56%;
  --accent-foreground: 219 32% 18%;
  --destructive: 0 67% 43%;
  --destructive-foreground: 0 0% 100%;
  --border: 34 22% 84%;
  --input: 33 18% 76%;
  --ring: 349 68% 49%;
  --dh-ink: #202d43;
  --dh-berry: #b32348;
  --dh-rose: #d85a68;
  --dh-muted: #647184;
}

:root.dark,
.dark {
  color-scheme: dark;
  --background: 221 27% 11%;
  --foreground: 38 32% 93%;
  --card: 221 24% 15%;
  --card-foreground: 38 32% 93%;
  --card-border: 220 18% 25%;
  --popover: 221 24% 15%;
  --popover-foreground: 38 32% 93%;
  --popover-border: 220 18% 27%;
  --primary: 350 63% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 172 24% 22%;
  --secondary-foreground: 165 32% 88%;
  --muted: 220 19% 20%;
  --muted-foreground: 216 15% 70%;
  --accent: 39 75% 61%;
  --accent-foreground: 220 30% 14%;
  --destructive: 0 58% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 26%;
  --input: 220 15% 37%;
  --ring: 350 70% 67%;
  --dh-ink: #eee8df;
  --dh-berry: #df6077;
  --dh-rose: #ed8290;
  --dh-muted: #a9b4c1;
}

html {
  background: hsl(var(--background));
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  overflow-x: clip;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: hsl(var(--primary) / .18);
  color: hsl(var(--foreground));
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid hsl(var(--ring) / .72);
  outline-offset: 3px;
}

:where(button, .btn-primary, .btn-secondary, .btn-ghost, .header-action, .dh-camp-gps-button) {
  min-height: 2.8rem;
  border-radius: .78rem;
  font-weight: 750;
  line-height: 1.2;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

:where(.btn-primary, .btn-secondary, .btn-ghost, .home-primary-action, .header-action, a[class*="rounded"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  text-decoration: none;
}

:where(button, .btn-primary, .btn-secondary, .btn-ghost) {
  vertical-align: middle;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  border-color: hsl(var(--input));
  border-radius: .7rem;
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

:where(input, select, textarea)::placeholder {
  color: hsl(var(--muted-foreground) / .78);
}

:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: hsl(var(--primary));
}

/* Shared page surfaces and content rhythm. */
.home-page {
  min-height: 100dvh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(ellipse at 5% 0%, hsl(349 64% 52% / .07), transparent 30rem),
    radial-gradient(ellipse at 95% 24%, hsl(165 36% 42% / .08), transparent 32rem),
    hsl(var(--background));
}

.home-hero {
  border-color: hsl(0 0% 100% / .2);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 90% 12%, hsl(39 80% 70% / .15), transparent 17rem),
    linear-gradient(128deg, #202e45 0%, #29495a 54%, #8c2848 100%);
  box-shadow: 0 22px 52px hsl(218 31% 19% / .17);
}

.home-primary-action {
  min-height: 3rem;
  border: 1px solid hsl(39 78% 66% / .72);
  border-radius: .84rem;
  background: hsl(39 77% 58%);
  color: #272d38;
  box-shadow: 0 8px 19px hsl(218 31% 11% / .22);
}

.home-primary-action:hover {
  background: hsl(39 81% 64%);
  transform: translateY(-1px);
}

.home-card,
.home-quick-link,
.home-camps-section,
#find-donors,
.rounded-xl.border,
.rounded-2xl.border,
.card {
  border-color: hsl(var(--card-border));
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

.home-card {
  border-radius: 1.05rem;
  box-shadow: 0 9px 27px hsl(218 31% 19% / .055);
}

.home-card:hover {
  border-color: hsl(var(--primary) / .3);
  box-shadow: 0 15px 34px hsl(218 31% 19% / .09);
}

.home-quick-link {
  min-height: 3.15rem;
  border-radius: .82rem;
  box-shadow: 0 5px 15px hsl(218 31% 19% / .045);
}

.home-quick-link:hover {
  border-color: hsl(var(--primary) / .38);
  background-color: hsl(var(--card));
}

.home-camps-section {
  border-radius: 1.2rem;
  background: linear-gradient(140deg, hsl(var(--card)), hsl(165 27% 94%));
}

.dark .home-camps-section {
  background: linear-gradient(140deg, hsl(var(--card)), hsl(170 22% 17%));
}

/* Keep repeated actions aligned and consistent across all public routes. */
button,
.btn-primary,
.btn-secondary,
.btn-ghost,
.header-action,
.dh-camp-gps-button {
  box-sizing: border-box;
}

.btn-primary,
.home-primary-action,
.dh-search-auth-submit,
.dh-whatsapp-share-send,
.dh-duplicate-call {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover:not(:disabled),
.dh-search-auth-submit:hover:not(:disabled),
.dh-whatsapp-share-send:hover:not(:disabled),
.dh-duplicate-call:hover:not(:disabled) {
  border-color: hsl(var(--primary) / .88);
  background: hsl(var(--primary) / .92);
}

#find-donors [data-testid="button-find-search"][data-dh-needs-blood-group="true"] {
  border-color: hsl(var(--border));
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary,
.btn-ghost,
.dh-search-auth-cancel,
.dh-whatsapp-share-cancel,
.dh-duplicate-close {
  border-color: hsl(var(--border));
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Header: a steady baseline for the brand, desktop links and utility actions. */
.topbar {
  border-color: hsl(var(--border));
  background: hsl(var(--background) / .94);
  color: hsl(var(--foreground));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.topbar > div {
  min-width: 0;
  align-items: center;
}

.topbar nav {
  align-items: center;
}

.topbar nav a {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  border-radius: .65rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.topbar nav a:hover,
.topbar nav a[aria-current="page"] {
  background: hsl(var(--primary) / .075);
  color: hsl(var(--primary));
}

.topbar .header-action {
  min-height: 2.75rem;
  white-space: normal;
}

.dh-theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border-color: hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

/* Search, camp and request forms share a legible field rhythm. */
#find-donors {
  border-radius: 1rem;
  box-shadow: 0 8px 24px hsl(218 31% 19% / .055);
}

#find-donors .field,
.dh-camp-profile-field input,
.dh-whatsapp-share-form input,
.dh-search-auth-card input:not([type="checkbox"]) {
  min-height: 2.8rem;
}

.dh-list-request-fields,
.dh-contact-opt-in,
.dh-camp-profile-fields,
.dh-camp-donor-choice {
  border-color: hsl(var(--border));
  border-radius: .9rem;
  background: hsl(var(--muted) / .48);
}

.dh-list-follow-up {
  border-top-color: hsl(var(--border));
}

.dh-camp-donor-option {
  border-color: hsl(var(--border));
  border-radius: .7rem;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

.dh-camp-donor-choice legend,
.dh-camp-profile-field,
.dh-list-name-label {
  color: hsl(var(--foreground));
}

.dh-camp-donor-help,
.dh-camp-otp-status,
.dh-camp-profile-consent,
.dh-contact-opt-in small,
.dh-list-consent {
  color: hsl(var(--muted-foreground));
}

.dh-list-current-area {
  border-color: hsl(var(--border));
  border-left-color: hsl(var(--primary));
  background: hsl(var(--muted) / .48);
}

.dh-camp-otp-row {
  border-color: hsl(var(--primary) / .26);
  background: hsl(var(--primary) / .055);
}

/* Keep the fixed PWA navigation calm, legible and safe-area aware. */
.mobile-nav {
  border-top-color: hsl(var(--border));
  background: hsl(var(--background) / .96);
  box-shadow: 0 -8px 24px hsl(218 31% 19% / .06);
}

.mobile-nav-link {
  min-width: 0;
  border-radius: .7rem;
}

.mobile-nav-link[aria-current="page"] {
  color: hsl(var(--primary));
}

.mobile-nav-link[href="/find"] svg,
.mobile-nav-link[href="/camps"] svg,
.mobile-nav-link[href="/requests"] svg,
.mobile-nav-link[href="/support"] svg {
  color: hsl(var(--primary));
}

.dh-duplicate-dialog-card,
.dh-search-auth-card,
.dh-whatsapp-share-card {
  border-color: hsl(var(--border));
  border-radius: 1rem;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 22px 60px hsl(220 30% 8% / .24);
}

.dh-duplicate-dialog-title,
.dh-search-auth-card h2,
.dh-whatsapp-share-card h2 {
  color: hsl(var(--foreground));
}

.dh-duplicate-dialog-detail,
.dh-search-auth-card p,
.dh-whatsapp-share-detail {
  color: hsl(var(--muted-foreground));
}

@media (max-width: 700px) {
  html {
    scroll-behavior: auto;
  }

  .topbar > div {
    gap: .45rem;
  }

  .topbar .header-action {
    min-width: 2.75rem;
    padding-inline: .65rem;
  }

  .home-page {
    min-height: 100dvh;
  }

  .home-hero {
    border-radius: 1.15rem;
  }

  .dh-search-auth-actions,
  .dh-whatsapp-share-actions,
  .dh-duplicate-dialog-actions {
    align-items: stretch;
  }

  .dh-search-auth-actions button,
  .dh-whatsapp-share-actions button,
  .dh-duplicate-dialog-actions > * {
    min-height: 2.8rem;
  }
}

@media (max-width: 380px) {
  .topbar > div {
    gap: .3rem;
  }

  .topbar .header-action {
    width: 2.65rem;
    min-width: 2.65rem;
    padding-inline: .35rem;
  }

  .home-quick-link {
    min-width: 0;
    padding-inline: .45rem;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Final interaction layer: strong, predictable actions across public routes. */
.btn-primary, .home-primary-action, .dh-search-auth-submit, .dh-whatsapp-share-send, .dh-duplicate-call {
  min-height: 2.8rem;
  border: 1px solid hsl(349 68% 36%);
  background: hsl(349 68% 36%);
  color: #fff;
  box-shadow: 0 3px 8px hsl(349 54% 27% / .14);
}

.home-primary-action {
  padding: .8rem 1.15rem;
}

.home-hero .home-primary-action {
  border-color: hsl(39 83% 74%);
  background: hsl(39 77% 58%);
  color: #272d38;
  box-shadow: 0 6px 16px hsl(218 31% 11% / .24);
}

.home-hero .home-primary-action:hover:not(:disabled) {
  border-color: hsl(39 85% 77%);
  background: hsl(39 82% 64%);
  color: #272d38;
}

.btn-primary:hover:not(:disabled), .home-primary-action:hover:not(:disabled), .dh-search-auth-submit:hover:not(:disabled), .dh-whatsapp-share-send:hover:not(:disabled), .dh-duplicate-call:hover:not(:disabled) {
  border-color: hsl(349 70% 30%);
  background: hsl(349 70% 30%);
  color: #fff;
}

.btn-secondary, .btn-ghost, .dh-search-auth-cancel, .dh-whatsapp-share-cancel, .dh-duplicate-close {
  min-height: 2.8rem;
  border: 1px solid hsl(166 30% 69%);
  background: hsl(165 34% 91%);
  color: hsl(174 44% 22%);
}

.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled), .dh-search-auth-cancel:hover:not(:disabled), .dh-whatsapp-share-cancel:hover:not(:disabled), .dh-duplicate-close:hover:not(:disabled) {
  border-color: hsl(166 33% 54%);
  background: hsl(165 36% 86%);
  color: hsl(174 48% 19%);
}

.btn-success, .button.good, button.success {
  border: 1px solid hsl(157 66% 29%);
  background: hsl(157 66% 29%);
  color: #fff;
}

.btn-danger, .button.danger, button.danger, .btn-destructive {
  border: 1px solid hsl(0 67% 39%);
  background: hsl(0 67% 39%);
  color: #fff;
}

.btn-success:hover:not(:disabled), .button.good:hover:not(:disabled), button.success:hover:not(:disabled),
.btn-danger:hover:not(:disabled), .button.danger:hover:not(:disabled), button.danger:hover:not(:disabled), .btn-destructive:hover:not(:disabled) {
  filter: brightness(.92);
}

button, .btn-primary, .btn-secondary, .btn-ghost, .header-action, .dh-camp-gps-button, [role="button"] {
  min-height: 2.8rem;
  touch-action: manipulation;
}

button:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .header-action:disabled, .dh-camp-gps-button:disabled,
button[aria-disabled="true"], .btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"], .btn-ghost[aria-disabled="true"], .header-action[aria-disabled="true"], .dh-camp-gps-button[aria-disabled="true"] {
  box-shadow: none;
  opacity: .62;
}

/* Keep action labels readable instead of clipping them inside fixed-height buttons. */
button,
button[class],
[role="button"],
[role="button"][class],
.btn-primary,
.btn-secondary,
.btn-ghost,
.home-primary-action,
.header-action,
.dh-camp-gps-button,
a[class*="rounded"] {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  min-height: 2.8rem;
  overflow: visible !important;
  align-items: center;
  justify-content: center;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
  line-height: 1.35;
  text-align: center;
}

button,
button[class],
[role="button"],
[role="button"][class],
.btn-primary,
.btn-secondary,
.btn-ghost,
.home-primary-action,
.header-action,
.dh-camp-gps-button,
a[class*="rounded"] {
  display: inline-flex;
  gap: .5rem;
}

button .truncate,
[role="button"] .truncate,
.btn-primary .truncate,
.btn-secondary .truncate,
.btn-ghost .truncate,
.home-primary-action .truncate,
.header-action .truncate,
.dh-camp-gps-button .truncate,
a[class*="rounded"] .truncate {
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
}

:where(input[type="button"], input[type="submit"], input[type="reset"]) {
  box-sizing: border-box;
  max-width: 100%;
  height: auto !important;
  min-height: 2.8rem;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}