:root {
  --red: #C62828;
  --red-dark: #8E0000;
  --red-tint: #FDECEA;
  --green: #2E7D32;
  --ink: #1F2328;
  --muted: #6B7280;
  --line: #E5E7EB;
  --bg: #FAFAFA;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4, h5, .navbar-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

/* Buttons & helpers */
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover, .btn-red:focus { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-outline-red { border-color: var(--red); color: var(--red); }
.btn-outline-red:hover { background: var(--red); color: #fff; }
.text-red { color: var(--red) !important; }
.bg-tint { background: var(--red-tint); }
.text-muted-2 { color: var(--muted); }

/* Navbar */
.navbar { background: #fff; border-bottom: 1px solid var(--line); }
.navbar-brand { color: var(--red) !important; }
.navbar .nav-link.active { color: var(--red) !important; font-weight: 600; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  color: #fff;
  padding: 72px 0 96px;
}
.hero p.lead { opacity: .9; }
.search-card {
  margin-top: -56px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Blood group chip */
.bg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  flex-shrink: 0;
}
.bg-chip.sm { width: 36px; height: 36px; font-size: .85rem; }

/* Cards */
.card { border: 1px solid var(--line); border-radius: 12px; }
.card-hover { transition: box-shadow .15s, transform .15s; }
.card-hover:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.stat-num { font-family: "Poppins", sans-serif; font-size: 2rem; font-weight: 600; color: var(--red); }

.badge-urgent { background: var(--red); }
.badge-available { background: #E8F5E9; color: var(--green); }
.badge-unavailable { background: #F3F4F6; color: var(--muted); }

.step-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-tint); color: var(--red); font-size: 1.5rem;
}

/* Dashboards */
.sidebar .list-group-item { border: 0; border-radius: 8px !important; }
.sidebar .list-group-item.active { background: var(--red-tint); color: var(--red); font-weight: 600; }

.form-control:focus, .form-select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 .2rem rgba(198, 40, 40, .15);
}
.form-check-input:checked { background-color: var(--red); border-color: var(--red); }

.auth-wrap { max-width: 520px; }

footer { background: #1F2328; color: #C9CDD2; }
footer a { color: #C9CDD2; text-decoration: none; }
footer a:hover { color: #fff; }

@media (max-width: 576px) {
  .hero { padding: 48px 0 80px; }
  .hero h1 { font-size: 1.9rem; }
}

/* ---------- Panels (user + admin) ---------- */
.panel-body { background: #F5F6F8; }
.panel-sidebar, .admin-sidebar { min-height: calc(100vh - 57px); }
.panel-sidebar { background: #fff; border-right: 1px solid var(--line); }
@media (min-width: 992px) {
  .panel-sidebar, .admin-sidebar { position: sticky; top: 57px; }
}
.page-title { font-size: 1.4rem; margin-bottom: .25rem; }
.page-sub { color: var(--muted); margin-bottom: 1.25rem; }

/* Admin */
.admin-topbar { background: #1F2328; border-bottom: 0; }
.admin-sidebar { background: #262B31; }
.admin-sidebar .nav-link { color: #C9CDD2; border-radius: 8px; padding: .55rem .75rem; margin-bottom: 2px; }
.admin-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.admin-sidebar .nav-link.active { background: var(--red); color: #fff; }
.admin-sidebar .nav-link i { width: 1.4rem; display: inline-block; }
@media (max-width: 991.98px) {
  .admin-sidebar.offcanvas-lg { background: #262B31; }
}

.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.empty-state { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.nav-pills .nav-link.active { background: var(--red); }
.nav-pills .nav-link { color: var(--ink); }
.page-link { color: var(--red); }
.page-item.active .page-link { background: var(--red); border-color: var(--red); }
.admin-login { background: linear-gradient(135deg, #1F2328, #3A1010); }
.min-w-0 { min-width: 0; }

/* Selected/active states for the custom red buttons (radio toggles and the mode switch). */
.btn-check:checked + .btn-outline-red,
.btn-outline-red.active,
.btn-red:disabled, .btn-red.disabled {
  background: var(--red); border-color: var(--red); color: #fff;
}
.btn-check:focus-visible + .btn-outline-red { box-shadow: 0 0 0 .2rem rgba(198, 40, 40, .25); }
/* The current mode is shown as a disabled button; keep it fully coloured instead of faded. */
.mode-switch .btn:disabled { opacity: 1; }

/* Bootstrap makes .offcanvas-lg transparent on desktop; keep the admin sidebar dark. */
.admin-sidebar.offcanvas-lg { background: #262B31 !important; }
.panel-sidebar.offcanvas-lg { background: #fff !important; }