/* ============================================================
   Kimwanyi SACCO – Light Green Design System
   Based on Tailwind CSS custom theme tokens
   ============================================================ */

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

/* ── Design Tokens ── */
:root {
  --background:               oklch(0.9711 0.0074 80.7211);
  --foreground:               oklch(0.3000 0.0358 30.2042);
  --card:                     oklch(0.9711 0.0074 80.7211);
  --card-foreground:          oklch(0.3000 0.0358 30.2042);
  --popover:                  oklch(0.9711 0.0074 80.7211);
  --popover-foreground:       oklch(0.3000 0.0358 30.2042);
  --primary:                  oklch(0.5234 0.1347 144.1672);
  --primary-foreground:       oklch(1.0000 0 0);
  --secondary:                oklch(0.9571 0.0210 147.6360);
  --secondary-foreground:     oklch(0.4254 0.1159 144.3078);
  --muted:                    oklch(0.9370 0.0142 74.4218);
  --muted-foreground:         oklch(0.4495 0.0486 39.2110);
  --accent:                   oklch(0.8952 0.0504 146.0366);
  --accent-foreground:        oklch(0.4254 0.1159 144.3078);
  --destructive:              oklch(0.5386 0.1937 26.7249);
  --destructive-foreground:   oklch(1.0000 0 0);
  --border:                   oklch(0.8805 0.0208 74.6428);
  --input:                    oklch(0.8805 0.0208 74.6428);
  --ring:                     oklch(0.5234 0.1347 144.1672);
  --chart-1:                  oklch(0.6731 0.1624 144.2083);
  --chart-2:                  oklch(0.5752 0.1446 144.1813);
  --chart-3:                  oklch(0.5234 0.1347 144.1672);
  --chart-4:                  oklch(0.4254 0.1159 144.3078);
  --chart-5:                  oklch(0.2157 0.0453 145.7256);
  --sidebar:                  oklch(0.9370 0.0142 74.4218);
  --sidebar-foreground:       oklch(0.3000 0.0358 30.2042);
  --sidebar-primary:          oklch(0.5234 0.1347 144.1672);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent:           oklch(0.8952 0.0504 146.0366);
  --sidebar-accent-foreground: oklch(0.4254 0.1159 144.3078);
  --sidebar-border:           oklch(0.8805 0.0208 74.6428);
  --sidebar-ring:             oklch(0.5234 0.1347 144.1672);

  /* Typography */
  --font-sans:  Poppins, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Merriweather, serif;
  --font-mono:  "Source Code Pro", monospace;

  /* Radius */
  --radius:    0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Shadows */
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs:  0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow:     0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Semantic aliases for legacy code */
  --bg-base:        var(--background);
  --bg-sidebar:     var(--sidebar);
  --bg-card:        var(--card);
  --bg-card-2:      var(--muted);
  --bg-input:       var(--background);
  --bg-hover:       var(--accent);
  --text-1:         var(--foreground);
  --text-2:         var(--muted-foreground);
  --text-3:         oklch(0.6 0.03 80);

  --purple:   var(--primary);
  --purple-2: oklch(0.4254 0.1159 144.3078);
  --pink:     oklch(0.5386 0.1937 26.7249);
  --blue:     oklch(0.55 0.15 220);
  --green:    var(--primary);
  --orange:   oklch(0.7 0.18 55);
  --red:      var(--destructive);
  --yellow:   oklch(0.85 0.18 95);

  /* Layout */
  --sidebar-w: 240px;
  --header-h:  64px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--border);
  outline-color: oklch(from var(--ring) l c h / 0.5);
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: 0em;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   SIDEBAR
   ============================================================ */

.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand-icon {
  width: 36px; height: 36px;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  color: var(--primary-foreground);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sidebar-foreground);
  line-height: 1.2;
}

.sidebar-brand-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 10px 10px 4px;
  margin-top: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.nav-item.active {
  background: var(--secondary);
  color: var(--sidebar-primary);
  font-weight: 600;
}

.nav-badge {
  margin-left: auto;
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 10px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.sidebar-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 8px 10px;
}

.sidebar-bottom {
  padding: 12px 10px 20px;
}

/* ============================================================
   MAIN CONTENT + HEADER
   ============================================================ */

.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.top-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--background);
  position: sticky; top: 0;
  z-index: 100;
}

.header-greeting {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--foreground);
}

.header-greeting span {
  color: var(--primary);
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: flex-end;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: 9999px;
  padding: 8px 16px;
  min-width: 210px;
  max-width: 280px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-box:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
}

.search-box svg {
  width: 15px; height: 15px;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.search-box input {
  background: none; border: none; outline: none;
  color: var(--foreground); font-size: 13px; width: 100%;
}

.search-box input::placeholder { color: var(--muted-foreground); }

.header-avatar-wrap {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}

.header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: var(--primary-foreground);
  border: 2px solid var(--accent);
  flex-shrink: 0;
}

.header-user-name { font-size: 13px; font-weight: 600; color: var(--foreground); }
.header-user-role { font-size: 11px; color: var(--muted-foreground); }

/* ============================================================
   PAGE BODY
   ============================================================ */

.page-body {
  padding: 24px 28px 40px;
  flex: 1;
}

.page-title {
  font-size: 18px; font-weight: 700;
  margin-bottom: 4px;
  color: var(--foreground);
}

.page-sub {
  font-size: 13px; color: var(--muted-foreground);
  margin-bottom: 24px;
}

/* ============================================================
   CARD BASE  — GitHub-style: clean bordered surface
   ============================================================ */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  color: var(--card-foreground);
}

.card-hd {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.card-label {
  font-size: 12px; font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-meta {
  font-size: 11px; color: var(--muted-foreground);
  background: var(--muted);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border);
}

.card-val {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--foreground);
}

.card-val.sm { font-size: 19px; }

.trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 9999px;
  margin-top: 6px;
  border: 1px solid transparent;
}

.trend.up   {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--accent);
}
.trend.down {
  background: oklch(from var(--destructive) l c h / 0.10);
  color: var(--destructive);
  border-color: oklch(from var(--destructive) l c h / 0.25);
}

/* ============================================================
   STAT CARD  — GitHub-style metric card with header stripe
   ============================================================ */

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.stat-card-inner {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* left side: label + trend stacked */
.stat-card-inner .stat-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* right side: the big number */
.stat-card-inner .stat-right {
  flex-shrink: 0;
  text-align: right;
}

/* ── stat card header row ── */
.stat-card .card-hd {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Compact square tile variant (admin overview row) ── */
.stat-tile {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.stat-tile-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-tile-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
  border-color: var(--primary);
}

.stat-tile-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-tile-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.stat-tile-val {
  font-size: 28px; font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--foreground);
  margin: 2px 0;
}

.stat-tile-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted-foreground);
}

.stat-tile-sub {
  font-size: 12px; font-weight: 500;
  color: var(--muted-foreground);
}

/* ============================================================
   DASHBOARD GRID
   ============================================================ */

.dash-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.cols-5  { grid-template-columns: repeat(5, 1fr); }
.cols-4  { grid-template-columns: repeat(4, 1fr); }
.cols-3  { grid-template-columns: repeat(3, 1fr); }
.cols-2  { grid-template-columns: repeat(2, 1fr); }
.cols-1  { grid-template-columns: 1fr; }
.cols-21 { grid-template-columns: 2fr 1fr; align-items: start; }
.cols-12 { grid-template-columns: 1fr 2fr; }
.cols-13 { grid-template-columns: 1fr 3fr; }
.cols-31 { grid-template-columns: 3fr 1fr; }
.cols-211{ grid-template-columns: 2fr 1fr 1fr; }

.sparkline-wrap { height: 44px; margin-top: 10px; }

/* ============================================================
   CREDIT CARD WIDGET  — GitHub-style outlined card with green top
   ============================================================ */

.credit-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.credit-card::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.credit-card > div {
  padding: 16px 20px;
}

.credit-card > div:first-of-type { padding-bottom: 4px; }
.credit-card > div:last-of-type  { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

.credit-card-chip {
  width: 28px; height: 20px;
  background: linear-gradient(135deg, oklch(0.8 0.1 85), oklch(0.65 0.12 80));
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

.credit-card-number {
  font-size: 11px; letter-spacing: 2px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
  font-family: var(--font-mono);
}

.credit-card-amount {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--foreground);
}

.credit-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.credit-card-bank { font-size: 11px; color: var(--muted-foreground); font-weight: 600; }
.credit-card-exp  { font-size: 11px; color: var(--muted-foreground); }

.visa-logo {
  font-size: 12px; font-weight: 800; font-style: italic;
  color: var(--primary);
  letter-spacing: 1px;
  background: var(--secondary);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--accent);
}

/* ============================================================
   SACCO DIGITAL CARD  —  ISO/IEC 7810 ID-1 ratio 85.6×54mm
   Industry layout: contactless → chip → number → holder → footer+QR
   ============================================================ */

.sacco-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5858;           /* exact ISO ID-1 */
  border-radius: 12px;
  overflow: hidden;
  /* Deep navy-to-teal gradient — Visa/Mastercard premium feel */
  background: linear-gradient(135deg,
    #0a1628 0%, #0f2d52 35%, #0e3d6e 60%, #0b2844 100%);
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.3);
  padding: 4.5% 5.5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  /* Subtle card-face texture */
  background-image:
    linear-gradient(135deg, #0a1628 0%, #0f2d52 35%, #0e3d6e 60%, #0b2844 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,.015) 2px,
      rgba(255,255,255,.015) 4px
    );
  background-blend-mode: normal;
}

/* Holographic diagonal shimmer */
.sacco-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 30%,
    rgba(255,255,255,.06) 48%,
    rgba(255,255,255,.1)  50%,
    rgba(255,255,255,.06) 52%,
    transparent 70%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ── Row 1: logo (top-left) + contactless symbol (top-right) ── */
.sacco-card-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 14%;
}

.sacco-card-logo {
  height: clamp(22px, 5.5%, 32px);
  width: auto;
  object-fit: contain;
  /* Invert to white so the logo reads on the dark card background */
  filter: brightness(0) invert(1);
  opacity: 0.92;
  display: block;
  flex-shrink: 0;
}
.sacco-card-network {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  opacity: .75;
}
.sacco-net-ring {
  display: block;
  border: 1.5px solid rgba(255,255,255,.8);
  border-radius: 50%;
}
.sacco-net-ring.r1 { width:  8px; height:  8px; }
.sacco-net-ring.r2 { width: 13px; height: 13px; }
.sacco-net-ring.r3 { width: 18px; height: 18px; }

/* ── Row 2: chip ── */
.sacco-card-chiprow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 18%;
  justify-content: space-between;  /* chip+label left, valid thru right */
}
.sacco-chip {
  width: 11.5%;
  aspect-ratio: 1.35;
  background: linear-gradient(135deg, #c8902f, #f0c96a 40%, #d4a843 65%, #b8802a);
  border-radius: 3px;
  position: relative;
  box-shadow: 0 1px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  flex-shrink: 0;
}
.sacco-chip-line {
  position: absolute;
  background: rgba(0,0,0,.2);
}
.sacco-chip-line.h {
  left: 8%; right: 8%; top: 50%;
  height: 1px; transform: translateY(-50%);
}
.sacco-chip-line.v {
  top: 8%; bottom: 8%; left: 50%;
  width: 1px; transform: translateX(-50%);
}
.sacco-card-type-pill {
  font-size: clamp(6px, 1.1vw, 9px);
  letter-spacing: 2px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  text-transform: uppercase;
  flex: 1;               /* takes available space so valid-thru stays far right */
}
.sacco-card-validthru {
  text-align: right;
  flex-shrink: 0;
}

/* ── Row 3: membership number (embossed look) ── */
.sacco-card-number {
  font-size: clamp(13px, 2.8vw, 20px);
  font-weight: 700;
  letter-spacing: 5px;
  font-family: 'Courier New', 'OCR A Std', monospace;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.6),
    0 -1px 0 rgba(255,255,255,.12);
  text-align: center;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Row 4: cardholder + valid thru ── */
.sacco-card-holder-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 18%;
  padding-bottom: 4px;   /* small gap between date row and QR below */
}
.sacco-card-lbl {
  font-size: clamp(5px, .9vw, 7px);
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.5);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.sacco-card-val {
  font-size: clamp(9px, 1.6vw, 12px);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

/* ── Row 5: bank name (QR is absolutely positioned) ── */
.sacco-card-footer-row {
  display: flex;
  align-items: flex-end;
  height: 26%;
  padding-top: 6px;
}
.sacco-card-bank-block { display: flex; flex-direction: column; justify-content: flex-end; }
.sacco-card-bank {
  font-size: clamp(9px, 1.8vw, 13px);
  font-weight: 800;
  letter-spacing: .8px;
  color: #fff;
}
.sacco-card-bank-sub {
  font-size: clamp(6px, 1vw, 8px);
  color: rgba(255,255,255,.45);
  margin-top: 1px;
  letter-spacing: .5px;
}

/* ── QR code — pinned to the bottom-right edge of the card ── */
.sacco-card-qr {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 10px 10px;   /* breathing room inside the corner */
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255,255,255,.04) 100%
  );
  border-top-left-radius: 12px;  /* soft inner corner to match card radius */
}
.sacco-card-qr img {
  width: clamp(62px, 18%, 80px);
  height: clamp(62px, 18%, 80px);
  border-radius: 6px;
  display: block;
  background: #fff;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
}
.sacco-qr-hint {
  font-size: clamp(5px, .9vw, 7px);
  color: rgba(255,255,255,.5);
  letter-spacing: .8px;
  text-align: center;
  text-transform: uppercase;
}

/* ── Wrapper + download button ── */
.sacco-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;   /* wide enough for QR to be clearly visible */
  width: 100%;
  margin: 0 auto;     /* centre inside its grid cell */
}
.sacco-card-dl-btn {
  width: 100%;
  font-size: 12px;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
}

/* ============================================================
   DONUT / GAUGE
   ============================================================ */

.donut-wrap {
  display: flex; align-items: center; gap: 18px;
}

.donut-canvas-wrap {
  flex-shrink: 0;
  width: 90px; height: 90px;
  position: relative;
}

.donut-legend { flex: 1; }

.legend-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}

.legend-row:last-child { border-bottom: none; }

.legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; flex-shrink: 0;
}

.legend-lbl {
  display: flex; align-items: center;
  color: var(--muted-foreground); flex: 1;
}

.legend-val { font-weight: 600; font-size: 12px; color: var(--foreground); }

/* Gauge rings */
.gauges-row {
  display: flex; gap: 16px;
  flex-wrap: wrap;
}

.gauge-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  flex: 1; min-width: 70px;
  padding: 10px 6px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.gauge-ring-wrap {
  position: relative;
  width: 72px; height: 72px;
}

.gauge-ring-wrap svg {
  transform: rotate(-90deg);
}

.gauge-pct {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--foreground);
}

.gauge-lbl {
  font-size: 11px; color: var(--muted-foreground);
  text-align: center;
  font-weight: 500;
}

.gauge-trend {
  font-size: 11px; font-weight: 600;
}

/* ============================================================
   TRANSACTION LIST  — GitHub contribution-style rows
   ============================================================ */

.tx-list { display: flex; flex-direction: column; gap: 0; }

.tx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--muted); margin: 0 -4px; padding: 11px 4px; border-radius: var(--radius-md); }

/* transaction type pill — plain text label, no icon */
.tx-type-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 68px;
  text-align: center;
  color: var(--muted-foreground);
  background: var(--muted);
}

.tx-type-pill.deposit    { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--accent); }
.tx-type-pill.withdrawal { background: oklch(from var(--destructive) l c h / 0.08); color: var(--destructive); border-color: oklch(from var(--destructive) l c h / 0.25); }
.tx-type-pill.loan       { background: oklch(0.93 0.02 220); color: oklch(0.38 0.10 220); border-color: oklch(0.80 0.04 220); }
.tx-type-pill.repayment  { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--accent); }
.tx-type-pill.interest   { background: oklch(from var(--orange) l c h / 0.10); color: var(--orange); border-color: oklch(from var(--orange) l c h / 0.25); }

.tx-info { flex: 1; min-width: 0; }

.tx-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--foreground);
}

.tx-date { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }

.tx-amt {
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

.tx-amt.cr { color: var(--primary); }
.tx-amt.dr { color: var(--destructive); }

/* ============================================================
   PROGRESS BARS
   ============================================================ */

.progress-item { margin-bottom: 14px; }
.progress-item:last-child { margin-bottom: 0; }

.progress-hd {
  display: flex; justify-content: space-between;
  margin-bottom: 6px; font-size: 13px;
}

.progress-lbl { font-weight: 500; color: var(--foreground); }
.progress-val { color: var(--muted-foreground); font-size: 12px; }

.progress-bar {
  height: 6px;
  background: var(--muted);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.6s ease;
}

.fill-purple { background: var(--primary); }
.fill-pink   { background: var(--destructive); }
.fill-blue   { background: oklch(0.55 0.15 220); }
.fill-green  { background: var(--chart-1); }
.fill-orange { background: var(--orange); }
.fill-red    { background: var(--destructive); }

/* ============================================================
   INVESTMENT / CONTRIBUTION LIST
   ============================================================ */

.invest-list { display: flex; flex-direction: column; gap: 0; }

.invest-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.invest-row:last-child { border-bottom: none; }

.invest-icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--muted);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}

.invest-name  { font-size: 13px; font-weight: 500; flex: 1; color: var(--foreground); }
.invest-sub   { font-size: 11px; color: var(--muted-foreground); }
.invest-bar   { flex: 1; }
.invest-val   { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }

.bar-track {
  height: 4px; background: var(--muted);
  border-radius: 2px; overflow: hidden;
  border: 1px solid var(--border);
}

.bar-fill { height: 100%; border-radius: 2px; }

/* ============================================================
   TABLE  — GitHub table style
   ============================================================ */

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 600;
  color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--muted); }

/* ============================================================
   BADGES / CHIPS
   ============================================================ */

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 9999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
}

.badge-pending  {
  background: oklch(from var(--orange) l c h / 0.12);
  color: var(--orange);
  border-color: oklch(from var(--orange) l c h / 0.25);
}
.badge-approved {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--accent);
}
.badge-rejected {
  background: oklch(from var(--destructive) l c h / 0.10);
  color: var(--destructive);
  border-color: oklch(from var(--destructive) l c h / 0.25);
}
.badge-active {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--accent);
}
.badge-paid {
  background: oklch(0.93 0.02 220);
  color: oklch(0.40 0.12 220);
  border-color: oklch(0.80 0.04 220);
}

.type-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 500;
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-group { margin-bottom: 16px; }

.form-lbl {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--foreground); margin-bottom: 6px;
}

.form-ctrl {
  width: 100%;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  color: var(--foreground);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.form-ctrl:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
}

.form-ctrl::placeholder { color: var(--muted-foreground); }

textarea.form-ctrl { resize: vertical; min-height: 90px; }

.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer; border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: oklch(from var(--primary) calc(l - 0.05) c h);
  border-color: oklch(from var(--primary) calc(l - 0.05) c h);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}

.btn-secondary:hover { background: var(--accent); }

.btn-danger {
  background: oklch(from var(--destructive) l c h / 0.10);
  color: var(--destructive);
  border-color: oklch(from var(--destructive) l c h / 0.25);
}

.btn-danger:hover {
  background: oklch(from var(--destructive) l c h / 0.18);
}

.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* outlined — border only, transparent bg */
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--secondary);
}

/* ghost — no border, subtle bg on hover */
.btn-ghost {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--muted);
}

/* ============================================================
   QUICK ACTIONS BAR  (dashboard top)
   ============================================================ */

.quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn-action {
  padding: 9px 20px;
  font-size: 13px;
}

/* ============================================================
   ACTION CARD  (savings deposit / withdraw)
   ============================================================ */

.action-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.action-card-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
}

.action-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 3px;
}

.action-card-subtitle {
  font-size: 12px;
  color: var(--muted-foreground);
}

.action-card-body {
  padding: 20px 22px;
}

/* larger amount input */
.form-ctrl-lg {
  font-size: 22px;
  font-weight: 700;
  padding: 12px 16px;
  letter-spacing: -0.5px;
}

/* quick-amount chip row */
.amount-chips {
  margin-bottom: 16px;
}

.amount-chip-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.amount-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.amount-chip {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.amount-chip:hover {
  background: var(--accent);
  border-color: var(--primary);
  color: var(--primary);
}

.amount-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* notice / hint row inside action card */
.action-card-notice {
  font-size: 12px;
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  margin-bottom: 14px;
}

/* ============================================================
   SAVINGS ACTION BUTTONS  (trigger row)
   ============================================================ */

.savings-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* ============================================================
   MODAL  — CSS-only, checkbox-toggle pattern
   ============================================================ */

/* hide the checkbox completely */
.modal-toggle {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}

/* overlay + box default: hidden */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* backdrop (semi-transparent) */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.35);
  cursor: pointer;
}

/* when the checkbox is checked → show overlay (CSS-toggle pattern) */
.modal-toggle:checked + .modal-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* JS-toggle pattern: add .open class directly on .modal-overlay */
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}

/* dialog box */
.modal-box {
  position: relative;
  z-index: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 32px);   /* never taller than the viewport */
  margin: 16px;
  overflow-y: auto;                   /* scroll inside the box if needed */
  overflow-x: hidden;
  /* slide-in */
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.modal-toggle:checked + .modal-overlay .modal-box {
  transform: translateY(0) scale(1);
}

/* modal header */
.modal-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.3;
}

.modal-subtitle {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.modal-close {
  margin-left: auto;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted-foreground);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* modal body */
.modal-body {
  padding: 22px 22px 6px;
}

/* modal footer — right-aligned button row */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* ============================================================
   MESSAGES
   ============================================================ */

.messages { margin-bottom: 16px; }

.messages li,
.ui-messages-error,
.ui-messages-info {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 6px;
}

.messages table { width: 100%; }

.messages .ui-messages-error-summary,
.messages .ui-messages-info-summary {
  display: block;
}

.msg-error {
  background: oklch(from var(--destructive) l c h / 0.08);
  border: 1px solid oklch(from var(--destructive) l c h / 0.2);
  color: var(--destructive);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 8px;
}

.msg-ok {
  background: var(--secondary);
  border: 1px solid var(--accent);
  color: var(--secondary-foreground);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 8px;
}

tr.ui-messages-error td,
tr.ui-messages-info td {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
}

.field-error {
  display: block;
  color: var(--destructive);
  font-size: 12px;
  margin-top: 4px;
}

tr.ui-messages-error td {
  color: var(--destructive);
  background: oklch(from var(--destructive) l c h / 0.08);
  border: 1px solid oklch(from var(--destructive) l c h / 0.2);
}
tr.ui-messages-info td {
  color: var(--secondary-foreground);
  background: var(--secondary);
  border: 1px solid var(--accent);
}

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  padding: 24px;
}

.auth-card {
  width: 100%; max-width: 460px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
}

.auth-card.wide { max-width: 580px; }

.auth-logo {
  display: flex; justify-content: center;
  margin-bottom: 16px;
}

.auth-logo-img {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  display: block;
}

.auth-title    { font-size: 24px; font-weight: 800; margin-bottom: 6px; color: var(--foreground); }
.auth-subtitle { font-size: 13.5px; color: var(--muted-foreground); margin-bottom: 24px; }

.auth-footer {
  text-align: center; margin-top: 20px;
  font-size: 13px; color: var(--muted-foreground);
}

.auth-footer a { color: var(--primary); font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

/* ============================================================
   SECTION PANELS
   ============================================================ */

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.panel h3 {
  font-size: 14px; font-weight: 700;
  margin-bottom: 16px;
  color: var(--foreground);
}

.panel-hd {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.panel-hd h3 { margin-bottom: 0; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */

.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

/* ============================================================
   INFO GRID
   ============================================================ */

.info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.info-item label {
  display: block;
  font-size: 10.5px; font-weight: 600;
  color: var(--muted-foreground); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 3px;
}

.info-item span { font-size: 14px; font-weight: 500; color: var(--foreground); }

/* ============================================================
   LOANS PAGE
   ============================================================ */

/* individual stat tile inside the current-loan card */
.loan-stat {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.loan-stat-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.loan-stat-val {
  font-size: 18px; font-weight: 700;
  color: var(--foreground);
}

.loan-stat-val--outstanding {
  color: var(--destructive);
}

/* empty state card when no loan exists */
.loan-empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
}

.loan-empty-title {
  font-size: 16px; font-weight: 700;
  color: var(--foreground);
  margin-bottom: 6px;
}

.loan-empty-sub {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* pending / info notice bar */
.loan-notice {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 20px;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

/* initials avatar on the member card */
.member-avatar {
  width: 36px; height: 36px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: var(--primary-foreground);
  flex-shrink: 0;
}

/* policy stat tile */
.policy-stat {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.policy-stat-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.policy-stat-val {
  font-size: 24px; font-weight: 700;
  color: var(--foreground);
  line-height: 1.1;
}

.policy-stat-sub {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 4px;
}

/* policy bullet list */
.policy-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.policy-list li {
  font-size: 13px;
  color: var(--muted-foreground);
  padding-left: 14px;
  position: relative;
}

.policy-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty {
  text-align: center; padding: 40px 20px;
  color: var(--muted-foreground);
}

.empty-icon { font-size: 42px; margin-bottom: 12px; opacity: 0.5; }
.empty p { font-size: 13px; }

/* ============================================================
   CHART CONTAINERS
   ============================================================ */

.chart-wrap { position: relative; height: 240px; }
.chart-sm   { height: 180px; }

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1280px) {
  .cols-4   { grid-template-columns: repeat(2, 1fr); }
  .cols-211 { grid-template-columns: 1fr 1fr; }
  .cols-21  { grid-template-columns: 1fr; }
  .cols-12  { grid-template-columns: 1fr; }
  .cols-31  { grid-template-columns: 1fr; }
  .cols-13  { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 200px; }
  .cols-3 { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --sidebar-w: 0px; }
  /* sidebar, main-content, header, page-body, grids and form-row
     are all handled in the Mobile Breakpoint block further below */
}

/* ============================================================
   JSF OVERRIDES
   ============================================================ */

input[type="submit"], input[type="button"], button {
  font-family: inherit;
}

form[style*="display:contents"] { display: contents; }

.search-bar svg { width: 16px; height: 16px; }

/* ============================================================
   ADMIN PORTAL STYLES
   ============================================================ */

/* ── Admin brand / logo overrides ── */
.admin-logo-icon,
.admin-brand-icon {
  background: transparent;
}

/* ── Admin sidebar — same light theme as customer sidebar ── */
.admin-sidebar {
  background: var(--sidebar);
}

.admin-sidebar .sidebar-brand-name,
.admin-sidebar .sidebar-brand-sub { color: var(--sidebar-foreground); }

.admin-sidebar .nav-item {
  color: var(--sidebar-foreground);
}

.admin-sidebar .nav-item:hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.admin-sidebar .nav-item.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-primary);
}

.admin-sidebar .nav-section-label {
  color: var(--muted-foreground);
}

.admin-sidebar .sidebar-divider {
  border-color: var(--sidebar-border);
}

/* ── Admin header — same light theme as customer header ── */
.admin-header {
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.admin-header-meta {
  display: flex; align-items: center; gap: 10px;
}

.admin-role-badge {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-avatar {
  background: var(--sidebar-accent);
  color: var(--sidebar-primary);
}

/* ── Admin login button ── */
.btn-admin {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
}
.btn-admin:hover {
  background: var(--purple-2);
}

/* ── Filter bar ── */
.admin-filter-bar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}

.admin-search-input {
  min-width: 260px; max-width: 360px;
  padding: 8px 14px; font-size: 13px;
}

.filter-tabs {
  display: flex; gap: 4px;
  background: var(--muted); border-radius: var(--radius-md);
  padding: 3px;
  overflow-x: auto;                   /* scroll on narrow screens */
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.filter-tab {
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 500;
  color: var(--muted-foreground); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.filter-tab:hover { color: var(--foreground); }

.filter-tab.active {
  background: #fff;
  color: var(--foreground);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.admin-result-count {
  margin-left: auto; font-size: 12.5px;
  color: var(--muted-foreground); font-weight: 500;
}

/* ── Pending banner ── */
.admin-pending-banner {
  background: oklch(0.97 0.04 55);
  border: 1px solid oklch(0.88 0.08 55);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 13.5px;
  color: oklch(0.42 0.10 55);
  margin-bottom: 18px;
}

/* ── Member initials badge ── */
.member-initials-badge {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--secondary); color: var(--secondary-foreground);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--accent);
}

.member-name-cell {
  display: flex; align-items: center; gap: 10px;
}

/* ── Stat-card left-border accents ── */
.green-accent  { border-left: 3px solid var(--primary); }
.purple-accent { border-left: 3px solid oklch(0.55 0.18 290); }
.blue-accent   { border-left: 3px solid oklch(0.55 0.15 220); }
.pink-accent   { border-left: 3px solid oklch(0.60 0.20 10); }
.red-accent    { border-left: 3px solid var(--destructive); }

/* ── Overdue badge ── */
.badge-overdue {
  background: oklch(from var(--destructive) l c h / 0.10);
  color: var(--destructive);
  border-color: oklch(from var(--destructive) l c h / 0.30);
}

/* ── Overdue banner ── */
.admin-overdue-banner {
  background: oklch(from var(--destructive) 0.97 0.02 h);
  border: 1px solid oklch(from var(--destructive) 0.88 0.06 h);
  border-left: 4px solid var(--destructive);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 13.5px;
  color: oklch(from var(--destructive) 0.38 0.14 h);
  margin-bottom: 12px;
}

/* ── Danger filter tab (Overdue) ── */
.filter-tab-danger { color: var(--destructive) !important; }
.filter-tab-danger.active {
  background: oklch(from var(--destructive) l c h / 0.08) !important;
  color: var(--destructive) !important;
}

.filter-danger-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px;
  background: var(--destructive); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 9999px; padding: 0 5px;
  margin-left: 5px;
}

/* ── Table scroll wrapper (prevents breakout on small screens) ── */
.table-scroll-wrap { overflow-x: auto; }
.table-scroll-wrap .data-table { min-width: 700px; }

/* ── Responsive: cols-5 collapses ── */
@media (max-width: 1280px) {
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .cols-5 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MOBILE NAVIGATION  — hamburger + sidebar drawer
   ============================================================ */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.hamburger-btn span {
  display: block;
  width: 20px; height: 2px;
  background: var(--foreground);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Mobile backdrop */
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
  opacity: 0;
  pointer-events: none;          /* never block clicks while closed */
  transition: opacity 0.22s ease;
}

.mobile-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar close button — hidden on desktop */
.sidebar-close-btn {
  display: none;
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.sidebar-close-btn:hover { color: var(--foreground); }

/* ============================================================
   MOBILE BREAKPOINT  ≤ 700px
   ============================================================ */

@media (max-width: 700px) {

  /* Show hamburger, show backdrop */
  .hamburger-btn { display: flex; }
  .mobile-backdrop { display: block; }
  .sidebar-close-btn { display: block; }

  /* Sidebar becomes an off-canvas drawer */
  .sidebar {
    display: flex !important;   /* override the previous display:none */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 260px;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    z-index: 300;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Keep main content full-width since sidebar is overlaid */
  .main-content { margin-left: 0; }

  /* Header */
  .top-header {
    padding: 0 12px;
    gap: 10px;
  }

  .header-greeting {
    font-size: 15px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide the name/membership text in the member header — avatar stays */
  .header-user-info { display: none; }

  /* Page body */
  .page-body { padding: 14px 12px 32px; }

  /* Stat tiles: 2-column → 1-column at ≤ 400px (handled below) */
  .cols-5 { grid-template-columns: 1fr 1fr; }

  /* All multi-col grids become single column */
  .cols-2, .cols-3, .cols-4,
  .cols-21, .cols-12, .cols-31,
  .cols-13, .cols-211,
  .dash-row-stack { grid-template-columns: 1fr !important; }

  /* Charts */
  .chart-wrap { height: 200px; }

  /* Donut: stack canvas above legend */
  .donut-wrap {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .donut-canvas-wrap {
    width: 110px; height: 110px;
  }

  .donut-legend { width: 100%; }

  /* Tables */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll-wrap .data-table { min-width: 0; }

  /* Hide less-critical table columns */
  .hide-xs { display: none; }

  /* Member name cell: truncate on narrow screens */
  .member-name-text {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  /* Compact stat tile values on narrow screens */
  .stat-tile-val { font-size: 22px; }

  /* Card headers: allow wrapping */
  .card-hd { flex-wrap: wrap; gap: 6px; }

  /* Form row: always single column */
  .form-row { grid-template-columns: 1fr; }

  /* Admin filter bar — stack vertically, give tabs their own row */
  .admin-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .admin-search-input { min-width: 0; max-width: 100%; width: 100%; }
  .admin-result-count { margin-left: 0; }

  /* Filter tabs: keep as horizontal scroll row, don't shrink tabs */
  .filter-tabs { flex-shrink: 0; width: 100%; }
  .filter-tab  { white-space: nowrap; flex-shrink: 0; }

  /* Modal: full-width on mobile with safe margin */
  .modal-box {
    margin: 12px;
    border-radius: var(--radius-lg);
    max-height: calc(100dvh - 24px);
  }

  /* Page title */
  .page-title { font-size: 16px; }
  .page-sub   { font-size: 12px; margin-bottom: 16px; }
}

/* Very small screens ≤ 400px */
@media (max-width: 400px) {
  .cols-5 { grid-template-columns: 1fr; }
  .stat-tile-val { font-size: 20px; }
  .top-header { padding: 0 10px; }
  .page-body { padding: 12px 10px 28px; }
  .card { padding: 12px; }
}

/* ============================================================
   PROFILE PHOTO UPLOAD
   ============================================================ */

/* Section: avatar circle + upload controls side by side */
.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

/* The circle container */
.profile-avatar-wrap {
  flex-shrink: 0;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent);
  background: var(--secondary);
  display: flex; align-items: center; justify-content: center;
}

/* When a real photo is set */
.profile-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Fallback initials inside the circle */
.profile-avatar-initials {
  font-size: 28px; font-weight: 800;
  color: var(--secondary-foreground);
  line-height: 1;
  user-select: none;
}

/* Right side: name + controls */
.profile-avatar-info {
  flex: 1;
  min-width: 200px;
}

.profile-avatar-name {
  font-size: 17px; font-weight: 700;
  color: var(--foreground);
  margin-bottom: 2px;
}

.profile-avatar-meta {
  font-size: 12px; color: var(--muted-foreground);
  margin-bottom: 12px;
}

/* Row: hidden file input + Choose label + Upload button */
.photo-upload-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}

/* Hide the raw <input type="file"> — label acts as the trigger */
.photo-file-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-upload-hint {
  font-size: 11px; color: var(--muted-foreground);
  margin-top: 6px;
}

/* Avatar in header when a photo is set — make it fill the circle */
.header-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Make h:link avatars look like the div avatars */
.avatar-link {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

/* Responsive: stack on mobile */
@media (max-width: 500px) {
  .profile-avatar-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .profile-avatar-wrap { width: 72px; height: 72px; }
  .profile-avatar-initials { font-size: 22px; }
}

/* ── Notification badge (sidebar nav item) ── */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--destructive);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 6px;
}

/* ── Header notification bell button ── */
.header-notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.header-notif-btn:hover {
  background: var(--secondary);
}
.header-bell {
  font-size: 18px;
  line-height: 1;
}
.header-notif-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--destructive);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ── Notifications page ── */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notif-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 18px;
}
.notif-item--unread {
  border-left-color: var(--primary);
}
.notif-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.notif-icon--approved {
  background: oklch(0.92 0.08 142);
  color: oklch(0.38 0.14 142);
}
.notif-icon--rejected {
  background: oklch(from var(--destructive) 0.95 0.04 h);
  color: var(--destructive);
}
.notif-icon--deposit {
  background: oklch(0.92 0.08 142);
  color: oklch(0.35 0.16 142);
}
.notif-icon--withdrawal {
  background: oklch(0.94 0.06 60);
  color: oklch(0.42 0.16 60);
}
.notif-icon--info {
  background: oklch(0.93 0.04 240);
  color: oklch(0.38 0.14 240);
}
.notif-body {
  flex: 1;
  min-width: 0;
}
.notif-type-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.notif-message {
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.5;
}
.notif-time {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 4px;
}
.notif-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}