/* ============================================================
   RCY Blood Donor — Main Stylesheet
   Design: Official Glassmorphism · RCY Green + Blood Red
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ─── CSS Variables ──────────────────────────────────────────── */
:root {
  --bg:           #060d06;
  --bg2:          #0b160b;
  --surface:      rgba(255,255,255,0.055);
  --surface-hov:  rgba(255,255,255,0.09);
  --surface-act:  rgba(34,197,94,0.12);
  --border:       rgba(255,255,255,0.09);
  --border-green: rgba(34,197,94,0.25);
  --border-red:   rgba(239,68,68,0.25);

  --green:        #16a34a;
  --green-l:      #22c55e;
  --green-xl:     #4ade80;
  --red:          #dc2626;
  --red-l:        #ef4444;
  --red-xl:       #f87171;

  --text:         #f0fdf4;
  --text-dim:     rgba(240,253,244,0.6);
  --text-mute:    rgba(240,253,244,0.35);

  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    24px;
  --radius-xl:    32px;

  --blur:         blur(28px);
  --blur-sm:      blur(16px);

  --shadow:       0 8px 32px rgba(0,0,0,0.45);
  --shadow-green: 0 4px 24px rgba(22,163,74,0.2);
  --shadow-red:   0 4px 24px rgba(220,38,38,0.2);

  --transition:   0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── Background mesh ────────────────────────────────────────── */
body::before {
  content:'';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(22,163,74,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(220,38,38,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 60% 10%, rgba(34,197,94,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ─── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family: 'Outfit', sans-serif; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { color: var(--text-dim); }
a  { color: var(--green-l); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-xl); }

/* ─── Glass Card ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--border-green); box-shadow: var(--shadow-green); }
.card-sm { padding: 18px; border-radius: var(--radius); }

/* ─── Navbar ─────────────────────────────────────────────────── */
nav#nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 24px;
  background: rgba(6,13,6,0.7);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}
.nav-brand { display:flex; align-items:center; gap:10px; flex:1; }
.nav-logo  { height:32px; width:auto; object-fit:contain; }
.nav-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
  letter-spacing: -0.3px;
}
.nav-title-thin { font-weight: 400; color: var(--green-l); }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition);
  display:flex; align-items:center; gap:6px;
}
.nav-link:hover  { background: var(--surface-hov); color: var(--text); }
.nav-link.active { background: var(--surface-act); color: var(--green-xl); }
.nav-signout {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border-red);
  border-radius: var(--radius-sm);
  color: var(--red-l);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.nav-signout:hover { background: rgba(220,38,38,0.1); }

/* ─── Page layout ────────────────────────────────────────────── */
.page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 80px; }
.page-sm { max-width: 520px; margin: 0 auto; padding: 40px 20px; }
.page-md { max-width: 800px; margin: 0 auto; padding: 40px 24px; }

/* ─── Auth layout ────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.auth-logos { display:flex; justify-content:center; gap:16px; margin-bottom:24px; }
.auth-logos img { height:52px; width:auto; }
.auth-title { text-align:center; margin-bottom:6px; }
.auth-sub   { text-align:center; color:var(--text-mute); font-size:0.9rem; margin-bottom:28px; }

/* ─── Form elements ──────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display:block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: var(--text-dim);
  margin-bottom:8px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-input::placeholder { color: var(--text-mute); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.form-select option { background: #0f1f0f; color: var(--text); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-hint { font-size:0.78rem; color:var(--text-mute); margin-top:5px; }
.form-error { font-size:0.8rem; color:var(--red-l); margin-top:5px; display:none; }
.form-error.show { display:block; }

/* Phone inputs dynamic list */
.phone-list { display:flex; flex-direction:column; gap:8px; }
.phone-row  { display:flex; gap:8px; }
.phone-row .form-input { flex:1; }
.btn-icon {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor:pointer;
  padding: 0 12px;
  font-size: 1.1rem;
  transition: all var(--transition);
}
.btn-icon:hover { background: var(--surface-hov); color: var(--text); }
.btn-icon.danger:hover { border-color:var(--border-red); color:var(--red-l); }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--green), #15803d);
  color: #fff;
  box-shadow: var(--shadow-green);
}
.btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow: 0 8px 32px rgba(22,163,74,0.35); }
.btn-danger  { background: linear-gradient(135deg, var(--red), #b91c1c); color:#fff; box-shadow:var(--shadow-red); }
.btn-danger:hover:not(:disabled) { transform:translateY(-1px); }
.btn-ghost   { background: var(--surface); border:1px solid var(--border); color:var(--text-dim); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-hov); color:var(--text); }
.btn-sm { padding:8px 16px; font-size:0.85rem; }
.btn-full { width:100%; }

/* ─── Spinner ────────────────────────────────────────────────── */
.spinner {
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Toast ──────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  padding:14px 20px; border-radius:var(--radius-sm);
  font-size:0.9rem; font-weight:500;
  backdrop-filter:var(--blur-sm);
  border:1px solid var(--border);
  opacity:0; transform:translateY(12px);
  transition:all 0.28s ease;
  max-width:320px;
}
.toast.show   { opacity:1; transform:translateY(0); }
.toast-success { background:rgba(22,163,74,0.25); border-color:var(--border-green); color:var(--green-xl); }
.toast-error   { background:rgba(220,38,38,0.25);  border-color:var(--border-red);  color:var(--red-xl); }
.toast-info    { background:rgba(59,130,246,0.2);  border-color:rgba(59,130,246,0.3); color:#93c5fd; }

/* ─── Blood group badge ──────────────────────────────────────── */
.blood-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:28px; padding:0 8px;
  border-radius:8px; font-size:0.8rem; font-weight:700;
  font-family:'Outfit',sans-serif; letter-spacing:0.03em;
}

/* ─── Role badges ────────────────────────────────────────────── */
.role-badge { display:inline-flex; align-items:center; gap:4px; }
.badge-logo { height:18px; width:auto; }
.admin-badge .badge-logo { filter:drop-shadow(0 0 4px rgba(251,191,36,0.6)); }

/* ─── Status pill ────────────────────────────────────────────── */
.status-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:600;
}
.status-active   { background:rgba(34,197,94,0.15); color:var(--green-xl); border:1px solid rgba(34,197,94,0.25); }
.status-inactive { background:rgba(107,114,128,0.15); color:#9ca3af; border:1px solid rgba(107,114,128,0.2); }
.status-dot {
  width:6px; height:6px; border-radius:50%;
  background:currentColor; display:inline-block;
}

/* ─── Donor Card ─────────────────────────────────────────────── */
.donor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.donor-card {
  background: var(--surface);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.donor-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--green), var(--red));
  opacity:0; transition:opacity var(--transition);
}
.donor-card:hover { border-color:var(--border-green); transform:translateY(-2px); box-shadow:var(--shadow-green); }
.donor-card:hover::before { opacity:1; }

.donor-card-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.donor-card-info { flex:1; min-width:0; }
.donor-card-name {
  font-family:'Outfit',sans-serif; font-weight:700;
  font-size:1rem; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.donor-card-code { font-size:0.75rem; color:var(--text-mute); font-family:'Outfit',sans-serif; }
.donor-card-badges { display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.donor-card-meta { display:flex; gap:10px; font-size:0.8rem; color:var(--text-dim); flex-wrap:wrap; }
.donor-card-meta span { display:flex; align-items:center; gap:4px; }

.donor-avatar-wrap { position:relative; flex-shrink:0; }
.donor-avatar-wrap .role-badge {
  position:absolute; bottom:-4px; right:-4px;
  background:var(--bg2); border-radius:50%; padding:2px;
  font-size:0.7rem; border:1px solid var(--border);
}

/* ─── Search + filter bar ─────────────────────────────────────── */
.filter-bar {
  display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; margin-bottom:24px;
}
.search-wrap { position:relative; flex:1; min-width:200px; }
.search-wrap .form-input { padding-left:40px; }
.search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-mute); font-size:1rem; pointer-events:none;
}
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding:6px 14px; border-radius:999px; font-size:0.8rem; font-weight:500;
  border:1px solid var(--border); color:var(--text-dim); cursor:pointer;
  background:var(--surface); transition:all var(--transition);
}
.chip:hover { border-color:var(--border-green); color:var(--green-l); }
.chip.active { background:var(--surface-act); border-color:var(--border-green); color:var(--green-xl); }
.chip.blood-chip.active { background:rgba(239,68,68,0.12); border-color:var(--border-red); color:var(--red-xl); }

/* ─── Stats row ──────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card {
  background:var(--surface);
  backdrop-filter:var(--blur-sm);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px 18px;
  text-align:center;
}
.stat-number { font-family:'Outfit',sans-serif; font-size:2rem; font-weight:800; line-height:1; }
.stat-label  { font-size:0.78rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }
.stat-green  { border-color:rgba(34,197,94,0.2); }
.stat-red    { border-color:rgba(239,68,68,0.2); }
.stat-number.green { color:var(--green-l); }
.stat-number.red   { color:var(--red-l); }

/* ─── Section header ─────────────────────────────────────────── */
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:12px; flex-wrap:wrap;
}
.section-title { font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:700; }
.divider { height:1px; background:var(--border); margin:24px 0; }

/* ─── Table ──────────────────────────────────────────────────── */
.table-wrap {
  overflow-x:auto;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
}
table {
  width:100%; border-collapse:collapse;
  font-size:0.88rem;
}
thead tr { background:rgba(255,255,255,0.04); }
th {
  padding:12px 16px; text-align:left;
  font-size:0.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-mute); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td {
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  vertical-align:middle;
}
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:var(--surface-hov); }
tbody tr:last-child td { border-bottom:none; }
td .user-cell { display:flex; align-items:center; gap:10px; }

/* ─── Tabs ───────────────────────────────────────────────────── */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tab-btn {
  padding:10px 18px; font-size:0.9rem; font-weight:500;
  color:var(--text-dim); cursor:pointer; border:none;
  background:transparent; border-bottom:2px solid transparent;
  transition:all var(--transition); margin-bottom:-1px;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--green-l); border-bottom-color:var(--green-l); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ─── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:rgba(11,22,11,0.95);
  backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:32px;
  max-width:520px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-title  { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:700; }
.modal-close  {
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text-dim);
  cursor:pointer; width:32px; height:32px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition); font-size:1rem;
}
.modal-close:hover { background:var(--surface-hov); color:var(--text); }

/* ─── Avatar upload ──────────────────────────────────────────── */
.avatar-upload {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin-bottom:20px;
}
.avatar-preview {
  width:88px; height:88px; border-radius:50%;
  object-fit:cover; border:2px solid var(--border-green);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--text-mute); overflow:hidden;
}
.avatar-preview img { width:100%; height:100%; object-fit:cover; }

/* ─── Signup steps ───────────────────────────────────────────── */
.steps-indicator { display:flex; gap:0; margin-bottom:28px; }
.step-dot {
  flex:1; height:4px; border-radius:2px;
  background:var(--border); transition:background 0.3s;
  margin:0 2px;
}
.step-dot.done { background:var(--green); }
.step-dot.active { background:var(--green-l); }

.step-form { display:none; }
.step-form.active { display:block; }

/* ─── Toggle switch ──────────────────────────────────────────── */
.toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-input { display:none; }
.toggle-slider {
  width:44px; height:24px; border-radius:12px;
  background:rgba(255,255,255,0.1); border:1px solid var(--border);
  position:relative; transition:background 0.25s;
  cursor:pointer;
}
.toggle-slider::after {
  content:''; position:absolute;
  width:18px; height:18px; border-radius:50%;
  background:#fff; top:2px; left:2px;
  transition:transform 0.25s; box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.toggle-input:checked + .toggle-slider { background:var(--green); border-color:var(--green); }
.toggle-input:checked + .toggle-slider::after { transform:translateX(20px); }
.toggle-label { font-size:0.9rem; color:var(--text-dim); }

/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
  text-align:center; padding:60px 20px;
  color:var(--text-mute);
}
.empty-state .empty-icon { font-size:3rem; margin-bottom:12px; opacity:0.4; }
.empty-state h3 { color:var(--text-dim); margin-bottom:6px; }

/* ─── Profile page ───────────────────────────────────────────── */
.profile-header {
  display:flex; align-items:center; gap:20px;
  padding:28px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  margin-bottom:24px;
}
.profile-header-info h2 { margin-bottom:4px; }
.profile-header-info p  { color:var(--text-dim); font-size:0.9rem; }
.profile-badges { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.user-code-badge {
  font-family:'Outfit',sans-serif; font-size:0.75rem; font-weight:700;
  padding:3px 10px; border-radius:6px;
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2);
  color:var(--green-xl); letter-spacing:0.1em;
}

/* ─── Donor detail modal ─────────────────────────────────────── */
.donor-detail-top { display:flex; gap:20px; align-items:flex-start; margin-bottom:20px; }
.donor-detail-name { font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:700; }
.contact-blur {
  filter:blur(5px); transition:filter 0.3s; cursor:pointer;
  background:var(--surface); border-radius:6px; padding:2px 8px;
  user-select:none;
}
.contact-blur.revealed { filter:none; }
.reveal-hint { font-size:0.75rem; color:var(--text-mute); margin-top:2px; }

/* ─── Admin toggles ──────────────────────────────────────────── */
.admin-row-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav-title-thin { display:none; }
  .page { padding:20px 14px 60px; }
  .auth-card { padding:28px 22px; }
  .form-row { grid-template-columns:1fr; }
  .donor-grid { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .profile-header { flex-direction:column; text-align:center; }
}
@media (max-width: 420px) {
  .donor-grid { grid-template-columns:1fr; }
}

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp 0.4s ease both; }
.fade-up-1 { animation-delay:0.05s; }
.fade-up-2 { animation-delay:0.10s; }
.fade-up-3 { animation-delay:0.15s; }
.fade-up-4 { animation-delay:0.20s; }
.fade-up-5 { animation-delay:0.25s; }