/* ===============================
   MEMBER STATEMWNT jS
   =============================== */

.group-a { background:#ffffff; }
.group-b { background:#f7f9fc; }

.ms-collapse {
    font-size:13px;
    background:#eef2f7;
    color:#333;
}

/* ===============================
   2. BASE COMPONENTS (GLOBAL)
   =============================== */

/* Card Component */
.shg-card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  
}

.shg-card + .shg-card {
  margin-top: 16px;
}
/* ===============================
   SHG GLOBAL ALERT
   =============================== */

.shg-alert {
  display: none;
  position: relative;
  padding: 14px 44px 14px 16px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius);
  font-size: 14px;
}

/* Types */
.shg-alert-success {
  background: #eaf7ee;
  border-left: 4px solid var(--color-success);
  color: #14532d;
}

.shg-alert-error {
  background: #fdecea;
  border-left: 4px solid var(--color-danger);
  color: #7f1d1d;
}

/* Close */
.shg-alert-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
}


/* Info */
.shg-alert-info {
    background: #e3f2fd;
    color: #0d47a1;
    border-left: 4px solid #2196f3;
}

/* =====================================================
   SHG DASHBOARD ALERTS – FINAL SHG STYLE
   ===================================================== */

.shg-dashboard-alerts {
  margin: 10px 0 16px;
}

/* Base alert strip */
.shg-dashboard-alerts .shg-alert {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  margin-bottom: 8px;

  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;

  background: #fff5f5;           /* default soft */
  border-left: 4px solid transparent;

  box-shadow: none;              /* 🚫 card feel remove */
}

/* Alert text */
.shg-dashboard-alerts .shg-alert-text {
  flex: 1;
}

/* ===============================
   ALERT TYPES (SHG PALETTE)
   =============================== */

/* 🔴 DUE / CRITICAL */
.shg-dashboard-alerts .shg-alert-red {
  background: #fff1f1;
  border-left-color: #e53935;
  color: #7f1d1d;
}

/* 🟡 WARNING / PENDING */
.shg-dashboard-alerts .shg-alert-yellow {
  background: #fff9e6;
  border-left-color: #f59e0b;
  color: #7a4a00;
}

/* 🟢 SUCCESS / INFO */
.shg-dashboard-alerts .shg-alert-green {
  background: #eefaf2;
  border-left-color: #16a34a;
  color: #14532d;
}

/* 🔵 SYSTEM / ANNOUNCEMENT */
.shg-dashboard-alerts .shg-alert-blue {
  background: #eef6ff;
  border-left-color: #2563eb;
  color: #0d47a1;
}

/* ===============================
   CTA BUTTON – PRIMARY GREEN
   =============================== */

.shg-dashboard-alerts .shg-alert-btn {
  padding: 6px 14px;
  border-radius: 20px;

  background: #16a34a;           /* ✅ SHG primary green */
  color: #ffffff;

  border: none;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  white-space: nowrap;
}

/* Hover (optional) */
.shg-dashboard-alerts .shg-alert-btn:hover {
  background: #15803d;
}

/* ===============================
   CLOSE ICON
   =============================== */

.shg-dashboard-alerts .shg-alert-close {
  margin-left: 8px;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
}
/* Metric Component */
.shg-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shg-metric-label {
  font-size: 13px;
  color: var(--text-muted);
}

.shg-metric-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
}

/* Metric States */
.shg-metric.success .shg-metric-value,
.shg-success .shg-metric-value {
  color: var(--color-success);
}

.shg-metric.warning .shg-metric-value,
.shg-warning .shg-metric-value {
  color: var(--color-warning);
}

.shg-metric.muted .shg-metric-value,
.shg-muted .shg-metric-value {
  color: var(--text-muted);
}


/* ===============================
   SHG STATIC WARNING (PROFILE)
   =============================== */

.shg-static-alert {
  display: block;
  padding: 12px 14px;
  margin-bottom: 16px;

  background-color: #fff7e6;
  border: 1px solid #ffe0a3;
  border-left: 4px solid #f4b400;

  color: #7a4f01;
  font-size: 14px;
  line-height: 1.4;

  border-radius: 6px;
}

.shg-static-alert strong {
  font-weight: 600;
}

.shg-static-alert::before {
  content: "⚠️";
  margin-right: 8px;
}

/* ===============================
   3. DASHBOARD LAYOUT
   =============================== */

.shg-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.shg-page-title {
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--text-main);
}

.shg-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}


/* ===============================
   4. SIDEBAR (DESKTOP ONLY)
   =============================== */

.shg-admin-submenu {
  display: flex !important;
  gap: 8px;
  margin-bottom: 12px;
  z-index: 10;
}

.shg-admin-submenu button {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}

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

/* 1. Main Container - Fixed width & Stick to left */

.shg-sidebar {
  float: left !important;
  width: 260px !important;
  min-height: 100vh !important;
  margin-top: -20px !important; /* Agar upar gap hai to negative margin */
  margin-left: -20px !important; /* Agar left me gap hai */
}

.shg-sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid var(--color-border, #e5e5e5);
  display: flex;
  flex-direction: column;
  height: 100vh;          /* Full viewport height */
  position: sticky;       /* Stays visible while scrolling */
  top: 0;
  z-index: 100;
  flex-shrink: 0;         /* Prevent shrinking if flex container */
}

/* 2. User Profile Section */
.shg-sidebar-user {
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 12px;
}

.shg-user-avatar {
  width: 38px;
  height: 38px;
  background: #f0f2f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.shg-user-name {
  font-weight: 600;
  color: var(--text-main, #333);
  font-size: 15px;
  line-height: 1.2;
}

/* 3. Navigation List Reset */
.shg-sidebar ul,
.shg-sidebar nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Main Menu Items */
.shg-sidebar li[data-screen] {
  padding: 12px 24px;
  cursor: pointer;
  color: var(--text-main, #4b5563);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

/* Hover Effect */
.shg-sidebar li[data-screen]:hover {
  background-color: #f6f7fb;
  color: var(--color-success, #146c43);
}

/* Active State (Add 'active' class via JS if needed, or use logic) */
.shg-sidebar li[data-screen].active {
  background-color: #e7f6ec;
  color: var(--color-success, #146c43);
  border-left-color: var(--color-success, #146c43);
  font-weight: 600;
}

/* 5. Submenu Headers (e.g. SHG FINANCE) */
.shg-menu-parent {
  margin-top: 16px;
}

.shg-menu-title {
  display: block;
  padding: 0 24px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9ca3af; /* Muted grey text */
  font-weight: 700;
}

/* 6. Submenu Items */
.shg-submenu li[data-screen] {
  padding: 10px 24px 10px 44px; /* Indented padding */
  font-size: 13.5px;
  color: #6b7280;
}

.shg-submenu li[data-screen]:hover {
  background-color: transparent; /* Usually submenus don't have block bg hover */
  color: var(--color-success, #146c43);
}

.shg-submenu li[data-screen].active {
  background: transparent;
  color: var(--color-success, #146c43);
  border-left-color: transparent;
  font-weight: 600;
}

/* 7. Logout Section (Pushed to bottom) */
.shg-sidebar-logout {
  margin-top: auto; /* Pushes this section to the very bottom */
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.shg-sidebar-logout a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  color: #ef4444; /* Red warning color */
  font-weight: 500;
  font-size: 14px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #fee2e2;
  transition: background 0.2s;
}

.shg-sidebar-logout a:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

/* 8. Mobile Responsive (Hidden by default) */
@media (max-width: 1023px) {
  .shg-sidebar {
    display: none !important;
  }
}


/* ===============================
   5. BOTTOM NAVIGATION (MOBILE ONLY)
   =============================== */
.shg-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 65px; /* Final locked height */
  width: 100%;

  display: flex;
  justify-content: space-around;
  align-items: center;

  background: #ffffff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);

  padding-bottom: env(safe-area-inset-bottom);

  z-index: 1002;
}
  
.shg-open-finance.active {
  color: #007cba;   /*Blue active color */
}

.shg-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #007cba;
}

.shg-nav-icon {
  font-size: 20px !important; /* ✅ correct size */
  margin-bottom: 4px;
  color: inherit;
  line-height: 1;
}


.shg-nav-label {
  margin-top: 4px;
  white-space: nowrap;
}

.shg-nav-icon svg {
  fill: none !important;          /* no solid fill */
  stroke: currentColor !important;
  stroke-width: 1.8;
}
/* ===============================
   PATCH: BOTTOM NAV IMPROVEMENT
   =============================== */



/* 2. Nav Item - Default Grey Color */
.shg-nav-item {
  color: #94a3b8; /* Muted Grey (Inactive) */
  transition: color 0.2s ease;
  min-width: 30px;
  opacity: 1; /* Remove transparency if any */
}

/* 5. Active State - Deep Green */
.shg-nav-item.active {
  color: var(--shg-finance-green, #004d40) !important;
  font-weight: 600;
  position: relative;
}

/* Optional: Top Green Indicator Bar for Active Tab */
.shg-nav-item.active::after {
  content: "";
  position: absolute;
  top: 0px; /* Container ke border ke pass */
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 4px;
  background-color: var(--shg-finance-green, #004d40);
  border-radius: 0 0 4px 4px;
}

/* 4. Text - Readable Font */
.shg-nav-label {
  font-size: 11px !important; /* Readable Size */
  font-weight: 500;
  letter-spacing: 0.3px;
  color: inherit;
}


/* ===============================
   SHG BOTTOM NAV – HARD LOCKED
   =============================== */

.shg-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 64px;              /* 🔒 HARD LOCK */
  min-height: 64px;
  max-height: 64px;

  display: flex;
  justify-content: space-around;
  align-items: center;

  background: #ffffff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);

  padding: 0;                /* 🔒 NO dynamic padding */
  margin: 0;

  z-index: 9999;

  transform: translateZ(0);  /* 🔒 GPU lock */
  will-change: transform;
}



/* ===============================
   BOTTOM NAV ICON NORMALIZATION
   =============================== */

/* Target all bottom-nav SVG icons */
.shg-nav-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* Force outline-only look */
.shg-nav-icon * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.4 !important;   /* 🔑 lighter stroke */
  vector-effect: non-scaling-stroke;
}

/* Slightly lighter inactive state */
.shg-nav-item {
  height: 100%;
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;
}


/* Prevent any accidental background illusion */
.shg-nav-icon rect {
  rx: 2;
  ry: 2;
}

@media (max-width: 768px) {
  .shg-content {
    padding-bottom: 80px; /* > nav height */
  }
}


@media (orientation: landscape) {
  .shg-bottom-nav {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
  }
}

/* ===============================
   FINANCE BOTTOM SHEET WRAPPER
================================ */
#shg-finance-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    background: #ffffff;
    border-radius: 18px 18px 0 0;

    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;

    transform: translateY(100%);
    transition: transform 0.25s ease;
    overflow: hidden;
}

/* Open state */
body.finance-open #shg-finance-sheet {
    transform: translateY(0);
}

/* ===============================
   FINANCE SHEET
================================ */
#shg-finance-sheet .sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 2px 20px;
    min-height: 10px;
    background: #f5f6f7;
    border-bottom: 1px solid #e5e7eb;
}

#shg-finance-sheet .sheet-header strong {
    font-size: 15px;
    font-weight: 600;
    color: #6b7280; /* muted grey */
}

#close-sheet {
    border: none;
    background: transparent;
    font-size: 18px;
    color: #9ca3af;
    cursor: pointer;
}

/* ===============================
   MENU GRID (TABLE STYLE)
================================ */
#shg-finance-sheet .sheet-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Cell */
#shg-finance-sheet .sheet-row {
    padding: 18px 12px;
    text-align: center;

    font-size: 14px;
    font-weight: 500;
    color: #111827;

    border-bottom: 1px solid #eef0f2;
    border-right: 1px solid #eef0f2;

    cursor: pointer;
    background: #ffffff;
}

/* Remove right border on even columns */
#shg-finance-sheet .sheet-row:nth-child(2n) {
    border-right: none;
}

/* Hover / Tap */
#shg-finance-sheet .sheet-row:hover {
    background: #f9fafb;
}

/* Disabled row */
#shg-finance-sheet .sheet-row.disabled {
    color: #9ca3af;
    cursor: not-allowed;
    background: #fafafa;
}

/* ===============================
   BACKDROP
================================ */
#sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

body.finance-open #sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
}



/* ===============================
   7. MOBILE RESPONSIVE (max-width: 1023px)
   =============================== */

@media (max-width: 1023px) {
  
  /* Hide Sidebar on Mobile */
  .shg-sidebar {
    display: none !important;
  }



  /* Bottom Sheet - Default Hidden */
  #shg-finance-sheet {
    bottom: calc(-100% + var(--shg-bottom-nav-height));
  }

  /* Bottom Sheet - Open State */
  body.finance-open #shg-finance-sheet {
    bottom: var(--shg-bottom-nav-height);
  }

  /* Backdrop - Open State */
  body.finance-open #sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===============================
   PATCH: MOBILE 2-COLUMN GRID
   =============================== */

@media (max-width: 768px) {
  
  .shg-dashboard-grid {
    /* Force 2 columns layout on mobile */
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important; /* Thoda gap kam kiya taaki fit ho */
  }

  /* Cards ko thoda compact banaya */
  .shg-card {
    padding: 12px !important;
  }

  /* Text size adjust kiya taaki 2 line me na tute */
  .shg-metric-label {
    font-size: 11px !important;
    white-space: nowrap;
  }

  .shg-metric-value {
    font-size: 18px !important;
    margin-top: 4px;
  }
}


/* ===============================
   8. TABLET RESPONSIVE (max-width: 768px)
   =============================== */

@media (max-width: 768px) {
  .shg-page-title {
    font-size: 18px;
  }
}


/* ===============================
   9. DESKTOP RESPONSIVE (min-width: 1024px)
   =============================== */

@media (min-width: 1024px) {
  
  /* Hide Bottom Navigation on Desktop */
  .shg-bottom-nav {
    display: none !important;
  }

.shg-bottom-nav .shg-open-finance.active {
    color: inherit;
    background: transparent;
}

  /* Hide Bottom Sheet on Desktop */
  #shg-finance-sheet,
  #sheet-backdrop {
    display: none !important;
  }
}
/* ===============================
   ADD PAYMENT – DUE SUMMARY
   =============================== */

#shg-due-summary.shg-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Common row */
.shg-due-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

/* Labels & values */
.shg-label {
  color: var(--text-muted);
  font-size: 14px;
}

.shg-value {
  color: var(--text-main);
  font-weight: 600;
  font-size: 15px;
}

/* Full width rows */
.shg-due-row-full {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

/* Split row (Interest + Penalty) */
.shg-due-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.shg-due-split-item {
  display: flex;
  justify-content: space-between;
}

/* Total Due – muted highlight */
.shg-due-total {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
}

/* Mobile handling */
@media (max-width: 480px) {
  .shg-due-row-split {
    grid-template-columns: 1fr;
  }
}


.shg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shg-alloc-list {
  list-style: none;
  padding-left: 0;
  margin-top: 6px;
}

.shg-alloc-list li {
  font-size: 14px;
  padding: 3px 0;
}


/* ---------- FORM ELEMENTS ---------- */
#shg-payment-form label {
    font-weight: 500;
    color: #374151;
}

#shg-payment-form input,
#shg-payment-form select {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    padding: 10px 12px;
    font-size: 14px;
    background: #ffffff;
}


.shg-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .shg-form-grid {
    grid-template-columns: 1fr;
  }
}


/* ===============================
   SHG PRIMARY BUTTON (UNIVERSAL)
   =============================== */

.shg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--color-primary);
  color: var(--shg-text-white);

  border: none;
  border-radius: var(--radius);

  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  transition: background 0.2s ease, opacity 0.2s ease;
}

/* Hover */
.shg-btn-primary:hover {
  background: var(--color-secondary);
}

/* Disabled */
.shg-btn-primary:disabled,
.shg-btn-primary[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Full width helper (optional) */
.shg-btn-block {
  width: 100%;
}


/* ---------- BANK INFO BOX (MUTED) ---------- */
.shg-bank-info-box {
    background: #f9fafb !important;
    border-left: 3px solid #9ca3af !important;
    color: #374151;
}

/* ---------- MOBILE REFINEMENT ---------- */
@media (max-width: 600px) {
    #shg-due-summary {
        padding: 16px;
    }

    #shg-due-summary .due-grid {
        grid-template-columns: 1fr;
    }
}




/* ===============================
   TABLE – SHG STYLE
   =============================== */

/* Wrapper enables horizontal scroll */
.shg-table-wrapper {
  overflow-x: auto;
}

/* Table base */
.shg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* No width restriction, no wrap */
.shg-table-nowrap th,
.shg-table-nowrap td {
  white-space: nowrap;
}

/* Muted header */
.shg-table thead th {
  color: var(--text-muted);
  font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

/* Table cells */
.shg-table td {
  padding: 10px 12px;
  color: var(--text-main);
  border-bottom: 1px solid var(--color-border);
}

/* Alternate row colors */
.shg-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

/* Status badges */
.shg-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.shg-badge-pending {
  background: #eef2f7;
  color: #374151;
}

.shg-badge-approved {
  background: #eaf7ee;
  color: var(--color-success);
}

.shg-badge-rejected {
  background: #fdecea;
  color: var(--color-danger);
}

/* ===============================
   MEMBER INFO
================================ */
.shg-member-info .member-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8f3ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #2e7d6b;
}

.member-name {
  font-weight: 600;
  font-size: 15px;
}

.member-meta {
  font-size: 13px;
  color: #666;
}


/* ===============================
   SECTION TITLE
================================ */
.shg-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #777;
  margin-bottom: 10px;
  text-align: left;
}


/* =====================================================
   ADMIN ASSIST PAYMENT – LOCKED GRID FIX
   ===================================================== */

/* =====================================================
   ADMIN ASSIST – HARD GRID UNLOCK FIX
   ===================================================== */

/* Break flex inheritance */
.shg-admin-assist-payment .shg-grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;

  /* 🔑 CRITICAL */
  width: 100% !important;
  align-self: stretch !important;
}

/* Ensure parent does NOT force column layout */
.shg-admin-assist-payment .shg-card {
  display: block !important;
}

/* Cell lock */
.shg-admin-assist-payment .shg-grid-2x2 > .shg-cell {
  display: block !important;
  min-width: 0 !important;
  background: #f9fafb;
  padding: 12px;
  border-radius: 10px;
}

/* Text safety */
.shg-admin-assist-payment .shg-cell strong {
  display: block;
  white-space: nowrap;
}

/* Highlight */
.shg-admin-assist-payment .shg-cell.highlight {
  background: #eef7f5;
}

/* MOBILE – still 2 columns */
@media (max-width: 768px) {
  .shg-admin-assist-payment .shg-grid-2x2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===============================
   2 COLUMN FINANCE TABLE (SAFE)
================================ */

.shg-two-col-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px;
}

.shg-two-col-table td {
  width: 50%;
  background: #f9fafb;
  border-radius: 10px;
  padding: 12px;
  vertical-align: top;
}

.shg-two-col-table .label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.shg-two-col-table strong {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.shg-two-col-table td.highlight {
  background: #eef7f5;
}

/* ===============================
   2-COLUMN SUMMARY TABLE (CLEAN)
   =============================== */

.shg-two-col-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px; /* gap between boxes */
}

.shg-two-col-table td {
    border: none !important;
    padding: 0;
}

/* Inner box look */
.shg-two-col-table td > * {
    display: block;
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px #e5e7eb;
}
/* =====================================
   ADMIN ASSIST – DEFAULT HIDDEN SECTIONS
   ===================================== */
/* ===============================
   ADMIN ASSIST – HARD HIDE (LOCKED)
   =============================== */

.shg-admin-assist-payment #admin-member-summary,
.shg-admin-assist-payment #admin-due-summary,
.shg-admin-assist-payment #admin-allocation-preview,
.shg-admin-assist-payment #admin-excess-allocation,
.shg-admin-assist-payment #admin-payment-form {
    display: none !important;
    visibility: hidden !important;
}



/* ===============================
   AUTH TABS – VISIBILITY FIX
   =============================== */

.shg-auth-panel {
    display: none;
}

.shg-auth-panel.active {
    display: block;
}

/* Optional: tab button visual */
.shg-auth-tab {
    cursor: pointer;
    opacity: 0.7;
}

.shg-auth-tab.active {
    opacity: 1;
}


/* FIX DATE INPUT OVERFLOW (iOS / PWA SAFE) */
.shg-form-group input[type="date"] {
  width: 100%;
  box-sizing: border-box;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 12px 14px;
  border-radius: 8px;

  line-height: normal;
}

.form-control {
  width: 100%;
  box-sizing: border-box;
}



/* ======================================================
   ADMIN ASSIST V2 – SCOPED STYLES
   Container: .shg-admin-assist-v2
   ====================================================== */
  /* ======================================================
   ADMIN ASSIST V2 — ISOLATED & COMPACT UI
   Scope: .shg-admin-assist-v2 ONLY
   ====================================================== */

.shg-admin-assist-v2 {
  font-size: 14px;
  line-height: 1.4;
}

/* ------------------------------------------------------
   RESET GLOBAL CARD / BOX EFFECTS (CRITICAL)
   ------------------------------------------------------ */

.shg-admin-assist-v2 .shg-card,
.shg-admin-assist-v2 .shg-two-col-table,
.shg-admin-assist-v2 .shg-two-col-table td,
.shg-admin-assist-v2 .shg-two-col-table strong {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ------------------------------------------------------
   SECTION CONTAINER (VERY LIGHT)
   ------------------------------------------------------ */

.shg-admin-assist-v2 .shg-card {
  padding: 10px 8px;
  margin-bottom: 10px;
  border-left: 2px solid #e5e7eb;
}

/* ------------------------------------------------------
   SECTION TITLES
   ------------------------------------------------------ */

.shg-admin-assist-v2 .shg-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------
   TWO COLUMN GRID (MOBILE FIRST)
   ------------------------------------------------------ */

.shg-admin-assist-v2 .shg-two-col-table tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 6px;
  margin-bottom: 6px;
}

.shg-admin-assist-v2 .shg-two-col-table td {
  padding: 0 !important;
}

/* ------------------------------------------------------
   LABEL + VALUE INLINE (SPACE SAVER)
   ------------------------------------------------------ */

.shg-admin-assist-v2 .shg-two-col-table .label {
  display: inline;
  font-weight: 500;
  color: #374151;
  margin-right: 6px;
}

.shg-admin-assist-v2 .shg-two-col-table strong {
  font-weight: 600;
  color: #111827;
}

/* ------------------------------------------------------
   ACTIVE STATE — PAYMENT ALLOCATION (GREEN)
   ------------------------------------------------------ */

.shg-admin-assist-v2 #aa2-excess-payment {
  background: #f0fdf4;
  border-left: 3px solid #16a34a !important;
}

.shg-admin-assist-v2 #aa2-excess-payment strong {
  color: #15803d;
}

/* ------------------------------------------------------
   ACTIVE STATE — LOAN CAPITALISED (AMBER / RED)
   ------------------------------------------------------ */

.shg-admin-assist-v2 #aa2-capitalisation {
  background: #fffbeb;
  border-left: 3px solid #d97706 !important;
}

.shg-admin-assist-v2 #aa2-capitalisation strong {
  color: #b45309;
}

/* ------------------------------------------------------
   MEMBER HEADER (PLAIN)
   ------------------------------------------------------ */

.shg-admin-assist-v2 #aa2-member-card {
  padding: 8px 6px;
  border-left: 2px solid #e5e7eb;
}

.shg-admin-assist-v2 .member-name {
  font-size: 14px;
  font-weight: 600;
}

.shg-admin-assist-v2 .member-meta {
  font-size: 12px;
  color: #6b7280;
}

/* ------------------------------------------------------
   PAYMENT FORM (KEEP COMPACT)
   ------------------------------------------------------ */

.shg-admin-assist-v2 #aa2-payment-form {
  padding-top: 6px;
}

.shg-admin-assist-v2 #aa2-payment-amount {
  margin-top: 4px;
  margin-bottom: 10px;
}

/* ------------------------------------------------------
   VISIBILITY SAFETY
   ------------------------------------------------------ */

.shg-admin-assist-v2 [style*="display:none"] {
  display: none !important;
}

/* ------------------------------------------------------
   MOBILE TUNING
   ------------------------------------------------------ */

@media (max-width: 480px) {
  .shg-admin-assist-v2 {
    padding: 0 6px;
  }
}
/* ======================================================
   ADMIN ASSIST V2 — ULTRA COMPACT INNER ROWS
   Keeps outer box, compresses inner content
   ====================================================== */

/* Ensure outer container remains */
.shg-admin-assist-v2 .shg-card {
  padding: 10px 10px;
}

/* Two-column grid stays */
.shg-admin-assist-v2 .shg-two-col-table tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-bottom: 4px;
}

/* 🔥 KEY FIX: label + value in ONE LINE */
.shg-admin-assist-v2 .shg-two-col-table td {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 !important;
}

/* Labels compact */
.shg-admin-assist-v2 .shg-two-col-table .label,
.shg-admin-assist-v2 .shg-two-col-table td:not(:has(strong)) {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

/* Values compact */
.shg-admin-assist-v2 .shg-two-col-table strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------
   Capitalised (Amber)
   ------------------------------------------------------ */
.shg-admin-assist-v2 #aa2-capitalisation {
  padding: 8px 10px;
}

.shg-admin-assist-v2 #aa2-capitalisation strong {
  color: #b45309;
}

/* ------------------------------------------------------
   Payment Allocation (Green)
   ------------------------------------------------------ */
.shg-admin-assist-v2 #aa2-excess-payment {
  padding: 8px 10px;
}

.shg-admin-assist-v2 #aa2-excess-payment strong {
  color: #15803d;
}

/* ------------------------------------------------------
   Reduce section title spacing
   ------------------------------------------------------ */
.shg-admin-assist-v2 .shg-section-title {
  margin-bottom: 4px;
}

/* ------------------------------------------------------
   Mobile micro-tuning
   ------------------------------------------------------ */
@media (max-width: 480px) {
  .shg-admin-assist-v2 {
    font-size: 13px;
  }

  .shg-admin-assist-v2 .shg-card {
    margin-bottom: 8px;
  }
}

/* ======================================================
   ADMIN ASSIST V2 — FINAL SPACE COMPRESSION
   ====================================================== */

/* OUTER BOX — minimum vertical padding */
.shg-admin-assist-v2 .shg-card {
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
}

/* SECTION TITLE — tighter */
.shg-admin-assist-v2 .shg-section-title {
  margin: 0 0 4px 0 !important;
  padding-bottom: 4px !important;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* TWO-COLUMN GRID — tighter rows */
.shg-admin-assist-v2 .shg-two-col-table tr {
  margin-bottom: 2px !important;
  gap: 4px 12px !important;
}

/* LABEL + VALUE — single line, no vertical air */
.shg-admin-assist-v2 .shg-two-col-table td {
  padding: 1px 0 !important;
  line-height: 1.3;
}

/* LABEL TEXT */
.shg-admin-assist-v2 .shg-two-col-table td .label,
.shg-admin-assist-v2 .shg-two-col-table td {
  font-size: 13px;
}

/* VALUE TEXT */
.shg-admin-assist-v2 .shg-two-col-table strong {
  font-size: 14px;
  font-weight: 600;
}

/* CAPITALISED BOX — keep highlight but thin */
.shg-admin-assist-v2 #aa2-capitalisation {
  padding: 6px 10px !important;
  border-left-width: 3px;
}

/* PAYMENT ALLOCATION — thin green highlight */
.shg-admin-assist-v2 #aa2-excess-payment {
  padding: 6px 10px !important;
}

/* REMOVE any accidental inner card feel */
.shg-admin-assist-v2 .shg-two-col-table td strong {
  background: none !important;
  box-shadow: none !important;
}




/* =========================
   MEMBER DASHBOARD (REFINED)
========================= */

.member-dashboard {
  padding: 16px;
}

/* Sections */
.md-section {
  margin-bottom: 16px;
}

/* Header */
.md-header h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

/* Cards grid */
.md-big-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Card base */
.md-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Card variants */
.md-card--primary {
  border-left: 4px solid #2e86de;
}

.md-card--secondary {
  border-left: 4px solid #6c757d;
}

.md-card--due {
  border-left: 4px solid #d9534f;
}

/* Labels & values */
.md-label {
  font-size: 12px;
  color: #666;
}

.md-value {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
}

/* Due section */
.md-due-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

/* Subtext */
.md-subtext {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #2e7d32;
}

.md-hidden {
  display: none;
}

/* Button */
.md-btn {
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
}

.md-btn--pay {
  background: #d9534f;
  color: #fff;
  opacity: 0.6;
}

.md-btn--pay:enabled {
  opacity: 1;
  cursor: pointer;
}

/* Chart placeholder */
.md-chart-placeholder {
  margin-top: 10px;
  height: 120px;
  border-radius: 6px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #999;
}

/* =========================
   MEMBER DASHBOARD – GRID
========================= */



.md-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 🔒 ALL CARDS SAME HEIGHT */
.md-card {
  height: 80px;              /* 🔑 adjust if needed */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* vertical centering */
  padding: 8px;
}


/* Variants */
.md-card--saving {
  border-left: 4px solid #2e86de;
}

.md-card--loan {
  border-left: 4px solid #6c757d;
}

.md-card--due {
  border-left: 4px solid #d9534f;
  align-items: flex-start;
}

.md-card--wallet {
  border-left: 4px solid #20c997;
}

/* Labels & values */
.md-label {
  font-size: 12px;
  color: #666;
}

.md-value {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
}

/* Due card extras */
.md-subtext {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #2e7d32;
}

.md-hidden {
  display: none;
}

.md-btn--pay {
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #d9534f;
  color: #fff;
  opacity: 0.6;
}

.md-btn--pay:enabled {
  opacity: 1;
  cursor: pointer;
}

/* Due card tighter layout */
.md-card--due {
  min-height: 80px;   /* keeps card height consistent */
}

/* Center no-due state */
.md-card--due .md-subtext {
  margin-top: 5px;
  font-size: 10px;
}

/* Button spacing */
.md-card--due .md-btn--pay {
  margin-top: 10px;
}

/* ===============================
   MEMBER DASHBOARD – MONTHLY SUMMARY
   =============================== */

.md-monthly-summary {
  margin-top: 16px;
  padding: 16px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* Header */
.md-section-header {
  margin-bottom: 12px;
}

.md-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.md-section-subtitle {
  font-size: 13px;
  color: #6b7280;
}

/* ===============================
   SUMMARY GRID (2 COL – MOBILE)
   =============================== */

.md-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Summary Card */
.md-summary-item {
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 10px 12px;
}

/* Label */
.md-summary-label {
  font-size: 12px;
  color: #6b7280;
  display: block;
  margin-bottom: 4px;
}

/* Value */
.md-summary-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* ===============================
   STATUS (FULL WIDTH, NEUTRAL)
   =============================== */

.md-summary-status {
  grid-column: span 2;
  background: #f3f4f6;
  
}

.md-summary-status .md-summary-value {
  font-size: 14px;
  font-weight: 600;
}

/* ===============================
   CAPITALISATION NOTE (MUTED)
   =============================== */

.md-summary-note {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* Hide helper */
.md-hidden {
  display: none;
}

/* ===============================
   MEMBER DASHBOARD – CHART
   =============================== */

.md-chart-section {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-top: var(--space-lg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
/* ===============================
   CHART HEADER – RESPONSIVE FIX
   =============================== */

.md-section-header.md-flex {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-md);
}

/* Title */
.md-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}

/* Range container (desktop) */
.md-chart-range {
  margin-left: auto;     /* desktop right */
  display: flex;
  gap: var(--space-xs);
  flex-wrap: nowrap;
}

/* ---------- MOBILE FIX ---------- */
@media (max-width: 480px) {

  .md-section-header.md-flex {
    flex-direction: column;       /* 🔥 STACK */
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .md-chart-range {
    margin-left: 0;               /* reset auto */
    width: 100%;
    justify-content: flex-end;    /* 🔥 buttons right */
    flex-wrap: wrap;              /* allow next line if needed */
  }
}


/* ---------- Range Buttons ---------- */
.md-range-btn {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover → muted, readable */
.md-range-btn:hover {
  background: rgba(15, 118, 110, 0.08); /* soft teal tint */
  border-color: var(--color-primary);
  color: var(--color-primary);          /* readable */
}

/* Active → solid */
.md-range-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}


/* ---------- Chart Box ---------- */
.md-chart-box {
  margin-top: var(--space-md);
}

.md-chart-canvas {
  position: relative;
  width: 100%;
  height: 220px;
}

/* ---------- Legend ---------- */
.md-chart-legend {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  font-size: 13px;
  color: var(--text-muted);
}

.md-legend-saving {
  color: var(--color-success);
}

.md-legend-loan {
  color: var(--color-danger);
}

/* ---------- Note (NOT alert) ---------- */
.md-chart-note {
  margin-top: var(--space-sm);
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Mobile tweak ---------- */
@media (max-width: 480px) {
  .md-chart-canvas {
    height: 200px;
  }
}

/* ===============================
   SHG GROUP SUMMARY
   =============================== */

.md-shg-summary {
  margin-top: var(--space-md);
}

.md-shg-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.md-shg-summary-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
}

.md-ss-label {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

.md-ss-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.md-shg-rules-snapshot {
  margin-top: 20px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
}

.md-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.md-rules-list li {
  font-size: 12px;
  color: #334155;
  margin-bottom: 6px;
}