/* BloodLink theme — trustworthy, medical, civic, modern, simple.
   Blood-red accent is used sparingly on a white/light-neutral canvas. */
:root {
  --blood: #b31224;
  --blood-dark: #8f0f1e;
  --blood-soft: #fce9ec;
  --ink: #23272b;
  --muted: #6b7280;
  --bg-soft: #f6f7f9;
  --border: #e5e7eb;
  --teal: #0f766e;
  --radius: 0.65rem;
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: #ffffff;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main-content { flex: 1 0 auto; }

a { color: var(--blood); }
a:hover { color: var(--blood-dark); }

/* Navbar */
.bloodlink-navbar { background-color: var(--blood-dark); }
.bloodlink-navbar .nav-link { color: rgba(255,255,255,0.92); font-weight: 500; }
.bloodlink-navbar .nav-link:hover { color: #fff; }

.blood-drop {
  display: inline-block;
  width: 14px; height: 18px;
  background: #fff;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #7f0f1e 0%, var(--blood) 55%, #d3233a 100%);
  color: #fff;
  padding: 4.5rem 0;
}
.hero .display-lead { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; }

/* Sections */
.section-pad { padding: 3.5rem 0; }
.bg-soft { background-color: var(--bg-soft); }
.section-title { font-weight: 700; letter-spacing: -0.01em; }
.eyebrow { color: var(--blood); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }

/* Cards */
.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,24,40,0.06); }
.status-badge { font-size: 0.72rem; font-weight: 600; }

/* Buttons */
.btn-blood { background-color: var(--blood); border-color: var(--blood); color: #fff; }
.btn-blood:hover, .btn-blood:focus { background-color: var(--blood-dark); border-color: var(--blood-dark); color: #fff; }
.btn-outline-blood { color: var(--blood); border-color: var(--blood); }
.btn-outline-blood:hover { background-color: var(--blood); color: #fff; }

/* Landmark chips */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot-donor { background: #2563eb; }
.dot-bank { background: var(--blood); }
.dot-hospital { background: #0891b2; }
.dot-campaign { background: #7c3aed; }
.dot-request { background: #dc2626; }

/* Tables */
.table-responsive th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* Forms */
.form-label { font-weight: 600; font-size: 0.9rem; }
.form-control:focus, .form-select:focus { border-color: var(--blood); box-shadow: 0 0 0 0.2rem rgba(179,18,36,0.12); }

/* Maps */
.leaflet-container { border-radius: var(--radius); }
.map-fixed-height { height: 440px; }
.map-medium-height { height: 320px; }

/* Notifications */
.notification-menu { width: 320px; max-height: 420px; overflow-y: auto; }
.notification-badge { font-size: 0.6rem; }

/* Footer */
.footer { background-color: #1f2427; }
.footer h6 { font-size: 0.85rem; letter-spacing: 0.04em; }

/* Misc utilities */
.text-blood-color { color: var(--blood); }
.bg-blood-soft { background-color: var(--blood-soft); border: 1px solid #f3c6cd; }
.urgent-critical { background-color: var(--blood-soft); }
.disclaimer-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .hero { padding: 3rem 0; }
  .section-pad { padding: 2.5rem 0; }
}