/* ==========================================================================
   AFC Members Management — Design System
   "Refined organic fintech" · Jade green
   ========================================================================== */

:root {
  /* —— Jade palette ——————————————————————————————————————————————— */
  --jade-50:  #e9f8f0;
  --jade-100: #d2f0e1;
  --jade-200: #a4e2c4;
  --jade-300: #6fd0a3;
  --jade-400: #2bb985;
  --jade:     #00a86b;   /* primary brand jade */
  --jade-600: #00935c;
  --jade-700: #007a4d;
  --jade-800: #015c3b;
  --jade-900: #013d28;

  /* —— Warm neutral canvas —————————————————————————————————————— */
  --ivory:    #f5f8f3;
  --cream:    #eef4ec;
  --surface:  #ffffff;
  --surface-2:#f7faf6;
  --line:     #e3ece2;

  /* —— Ink ——————————————————————————————————————————————————————— */
  --ink:      #102219;
  --ink-2:    #2f4338;
  --muted:    #6a7d70;

  /* —— Accents ——————————————————————————————————————————————————— */
  --gold:     #c79a3b;     /* warm contrast — ROI / highlights */
  --danger:   #d6453f;
  --danger-bg:#fdecec;
  --warning:  #d98a14;
  --warning-bg:#fdf3e2;
  --info:     #2b7bb9;
  --info-bg:  #e8f2fb;
  --ok:       var(--jade-700);
  --ok-bg:    var(--jade-50);

  /* —— Form ——————————————————————————————————————————————————————— */
  --radius:   18px;
  --radius-lg:28px;
  --radius-pill:999px;
  --shadow-sm: 0 2px 8px rgba(1, 60, 38, .06);
  --shadow:    0 18px 40px -22px rgba(1, 60, 38, .35);
  --shadow-lg: 0 30px 60px -28px rgba(1, 60, 38, .45);
  --ring: 0 0 0 4px rgba(0, 168, 107, .18);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  background:
    radial-gradient(1100px 600px at 12% -8%, var(--jade-100) 0%, transparent 55%),
    radial-gradient(900px 600px at 105% 0%, #dff0e6 0%, transparent 50%),
    linear-gradient(160deg, var(--ivory) 0%, var(--cream) 100%);
  background-attachment: fixed;
}

/* faint grain overlay for depth */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--jade-700); text-decoration: none; }
a:hover { color: var(--jade-800); }

/* —— Layout ———————————————————————————————————————————————————— */
.page { max-width: 1180px; margin: 0 auto; padding: 1.6rem; }
.page--narrow { max-width: 620px; }
.page--wide { max-width: 1380px; }
.center-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.6rem;
}

/* —— Brand / top bar ———————————————————————————————————————————— */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.4rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.6rem;
}
.brand { display: flex; align-items: center; gap: .85rem; }
.brand img {
  height: 46px; width: 46px; object-fit: cover; border-radius: 13px;
  box-shadow: var(--shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.18rem; color: var(--jade-800);
  font-optical-sizing: auto;
}
.brand-text .name span { color: var(--jade); }
.brand-text .sub { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* —— Headings ——————————————————————————————————————————————————— */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  color: var(--jade-900);
  line-height: 1.1;
}
h1.display { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h2.display { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--jade-700);
  background: var(--jade-50); border: 1px solid var(--jade-100);
  padding: .35rem .8rem; border-radius: var(--radius-pill);
}
.lead { color: var(--ink-2); }
.muted { color: var(--muted); }

/* —— Cards ——————————————————————————————————————————————————————— */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.8rem;
}
.card--pad-sm { padding: 1.25rem; }
.card-title {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.12rem; color: var(--jade-900);
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.1rem;
}
.card-title i { color: var(--jade); }

/* —— Buttons ————————————————————————————————————————————————————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.5rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--jade) 0%, var(--jade-700) 100%);
  color: #fff; box-shadow: 0 12px 24px -12px rgba(0,168,107,.7);
}
.btn-primary:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(0,168,107,.75); }
.btn-ghost {
  background: var(--surface); color: var(--jade-800); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--jade-50); border-color: var(--jade-200); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--jade-700); border-color: var(--jade-300); }
.btn-outline:hover { background: var(--jade-50); transform: translateY(-2px); }
.btn-danger { background: var(--danger); color:#fff; }
.btn-danger:hover { background:#b8332e; color:#fff; transform: translateY(-2px); }
.btn-muted { background: var(--surface); color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-muted:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--center { justify-content: center; }

/* —— Forms ——————————————————————————————————————————————————————— */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-weight: 600; font-size: .85rem; color: var(--ink-2);
  margin-bottom: .45rem;
}
.field label i { color: var(--jade); margin-right: .4rem; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: .96rem; color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: .8rem 1rem; transition: border-color .2s, box-shadow .2s, background .2s;
}
.textarea { border-radius: 16px; resize: vertical; min-height: 110px; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--jade); background: #fff; box-shadow: var(--ring);
}
.input::placeholder, .textarea::placeholder { color: #9aa89e; }

.input-icon { position: relative; }
.input-icon i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--jade-300); }
.input-icon .input { padding-left: 2.6rem; }

/* file picker */
.filedrop {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border: 2px dashed var(--jade-200); background: var(--jade-50);
  color: var(--jade-700); font-weight: 600; padding: .9rem;
  border-radius: 14px; cursor: pointer; transition: .2s;
}
.filedrop:hover { background: var(--jade-100); border-color: var(--jade-300); }
input[type="file"].hidden-file { display: none; }
.avatar-preview {
  display: none; margin: .9rem auto 0; width: 96px; height: 96px;
  border-radius: 50%; object-fit: cover; border: 3px solid var(--jade-100);
}

/* —— Alerts ————————————————————————————————————————————————————— */
.alert {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .85rem 1.1rem; border-radius: 14px; font-weight: 500;
  font-size: .92rem; margin-bottom: 1.2rem; border: 1px solid transparent;
}
.alert i { margin-top: .15rem; }
.alert-ok { background: var(--ok-bg); color: var(--jade-800); border-color: var(--jade-200); }
.alert-error { background: var(--danger-bg); color: #a32f2a; border-color: #f3c9c7; }
.alert-warn { background: var(--warning-bg); color: #9a5e07; border-color: #f0d9aa; }
.alert-info { background: var(--info-bg); color: #1f5d8c; border-color: #c6e0f4; }

/* —— Stats grid ————————————————————————————————————————————————— */
.stat-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 1.6rem;
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.stat::after {
  content:""; position:absolute; right:-30px; top:-30px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--jade-50);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--jade-50); color: var(--jade-700); font-size: 1.05rem;
  margin-bottom: .8rem; position: relative; z-index: 1;
}
.stat .value { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--jade-900); position: relative; z-index: 1; }
.stat .label { color: var(--muted); font-size: .85rem; margin-top: .15rem; position: relative; z-index: 1; }
.stat.is-warning .ico { background: var(--warning-bg); color: var(--warning); }
.stat.is-gold .ico { background: #f7efd9; color: var(--gold); }
.stat.is-danger .value { color: var(--danger); }

/* —— Tables ————————————————————————————————————————————————————— */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); }
.table th {
  text-align: left; padding: .85rem 1rem; background: var(--jade-50);
  color: var(--jade-800); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--jade-100);
}
.table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table .amount { font-weight: 700; color: var(--jade-800); white-space: nowrap; }

/* —— Badges ————————————————————————————————————————————————————— */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .75rem; border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.badge-ok { background: var(--jade); color: #fff; }
.badge-no { background: var(--danger); color: #fff; }
.badge-pending  { background: var(--warning-bg); color: var(--warning); }
.badge-approved { background: var(--jade-50); color: var(--jade-700); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
.badge-role { background: var(--jade-50); color: var(--jade-700); text-transform: capitalize; }

/* —— Member / partner cards grid ————————————————————————————————— */
.grid-cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.member-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .22s, box-shadow .22s;
}
.member-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.member-card img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--jade-100); margin-bottom: .9rem; background: var(--jade-50);
}
.member-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--jade-900); }
.member-card .meta { color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.member-card .story { color: var(--ink-2); font-size: .85rem; margin: .7rem 0; min-height: 2.4em; }

/* —— Two-column layout ———————————————————————————————————————————— */
.cols-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); margin-bottom: 1.5rem; }

/* —— Profile header band ———————————————————————————————————————— */
.profile-band {
  background: linear-gradient(135deg, var(--jade-700) 0%, var(--jade-900) 100%);
  color: #fff; padding: 2.2rem; text-align: center; position: relative; overflow: hidden;
}
.profile-band::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(420px 220px at 80% -20%, rgba(255,255,255,.18), transparent 60%);
}
.profile-band img {
  width: 122px; height: 122px; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(255,255,255,.85); background:#fff; margin-bottom: .9rem; position: relative; z-index:1;
}
.profile-band h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; position: relative; z-index:1; }
.chip {
  display: inline-flex; gap: .4rem; align-items:center; margin-top: .6rem; position: relative; z-index:1;
  background: rgba(255,255,255,.16); padding: .35rem .9rem; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 500;
}

/* —— Info rows (profile body) ——————————————————————————————————— */
.info-row { display:flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: none; }
.info-row .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--jade-50); color: var(--jade-700); display: grid; place-items: center; flex: none; }
.info-row .lbl { font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.info-row .val { color: var(--ink); }

.amount-box {
  background: linear-gradient(135deg, var(--jade-50), var(--jade-100));
  border: 1px solid var(--jade-200); border-radius: var(--radius);
  text-align: center; padding: 1.3rem; margin: 1.3rem 0;
}
.amount-box .big { font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--jade-800); }

/* —— Captcha box ———————————————————————————————————————————————— */
.captcha {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: 14px; padding: .55rem .7rem;
}
.captcha .q {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--jade-900);
  background: #fff; border: 1px solid var(--line); padding: .35rem .9rem; border-radius: 10px;
}
.captcha .input { flex: 1; min-width: 120px; }
.captcha .refresh { background: none; border: none; color: var(--jade-700); font-weight: 700; cursor: pointer; font-size: .85rem; }

/* —— Footer note ———————————————————————————————————————————————— */
.foot-note { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 2rem; }
.foot-note i { color: var(--jade); }

/* —— Page-load reveal ——————————————————————————————————————————— */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }
.reveal:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* —— Utilities —————————————————————————————————————————————————— */
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; }
.mb-2 { margin-bottom: 1rem; }
.flex-between { display:flex; align-items:center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack { display:flex; flex-direction: column; gap: 1rem; }

canvas { max-height: 270px; width: 100% !important; }

@media (max-width: 640px) {
  .page { padding: 1rem; }
  .card { padding: 1.3rem; }
  .topbar { padding: .85rem 1rem; }
}