/* GAZEBO GIC — App stylesheet */
:root{
  /* Navy + Gold canonical chrome (see kov3d.css for the full token system) */
  --sidebar-bg: #0b1e3a;
  --sidebar-bg-2: #071428;
  --sidebar-fg: #eaf0f8;
  --sidebar-muted: #93a4bd;
  --sidebar-active: #14315a;
  --accent: #1e3a5f;
  --accent-2: #0b1e3a;
  --gold: #d0a245;
  --danger: #dc2626;
  --warn: #d97706;
  --info: #2563eb;
  --bg: #eef1f7;
  --card: #ffffff;
  --border: #e3e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
}

*{box-sizing:border-box}
html,body{height:100%}
.ph{
  line-height:1;
  vertical-align:-0.125em;
}
body.app-body{
  background:var(--bg);
  color:var(--text);
  font-family:"Manrope","Segoe UI",sans-serif;
  font-size:14.5px;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* ===== App shell ===== */
.app-shell{display:flex;min-height:100vh}
.app-content{flex:1;display:flex;flex-direction:column;min-width:0}
.app-main{flex:1;padding:24px 28px;max-width:1400px;width:100%}
.app-footer{padding:14px 28px;color:var(--text-muted);font-size:12.5px;border-top:1px solid var(--border);background:#fff}

/* ===== Sidebar ===== */
.app-sidebar{
  width:255px;flex-shrink:0;
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  color:var(--sidebar-fg);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{
  width:50px;height:50px;object-fit:contain;flex-shrink:0;
  border-radius:10px;background:rgba(255,255,255,.95);
  padding:4px;box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.brand-text{margin-left:10px;line-height:1.1}
.brand-name{font-family:"Space Grotesk","Manrope",sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;color:#fff}
.brand-sub{font-size:11px;color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

.user-card{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15)}
.user-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#1e3a5f,#0b1e3a);
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;
  overflow:hidden;border:1.5px solid rgba(208,162,69,.5);
}
.avatar-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.user-meta{margin-left:10px;min-width:0;flex:1}
.user-name{font-weight:600;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{margin-top:2px}

.role-badge{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:.4px;
  padding:2px 7px;border-radius:10px;text-transform:uppercase;
}
.role-it_admin{background:#7b1fa2;color:#fff}
.role-chairman{background:var(--gold);color:#000}
.role-secretary{background:#0277bd;color:#fff}
.role-treasurer{background:#2e7d32;color:#fff}
.role-committee{background:#455a64;color:#fff}
.role-member{background:#546e7a;color:#fff}

.app-nav{padding:10px 0;flex:1}
.nav-section{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--sidebar-muted);padding:14px 18px 6px;font-weight:600;
}
.nav-link{
  display:flex;align-items:center;padding:9px 18px;color:var(--sidebar-fg) !important;
  text-decoration:none;font-size:13.5px;border-left:3px solid transparent;
  transition:background .15s,border-color .15s;
}
.nav-link i{
  width:22px;height:22px;border-radius:7px;
  font-size:15px;margin-right:8px;opacity:1;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);color:#f3ece0;
}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff !important}
.nav-link.active{background:var(--sidebar-active);border-left-color:var(--gold);color:#fff !important}
.nav-link.active i{background:linear-gradient(135deg,#d0a245,#b68931);color:#1f2d38}
.nav-logout{color:#ffb4b4 !important;margin-top:4px}
.nav-logout:hover{background:rgba(198,40,40,.18);color:#ffd9d9 !important}
.nav-badge-exp{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:#e65100;color:#fff;font-size:10px;font-weight:800;
  padding:1px 6px;border-radius:99px;line-height:1.6;
}

.sidebar-footer{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:var(--sidebar-muted)}

/* ===== Topbar ===== */
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:#ffffff;border-bottom:1px solid var(--border);padding:12px 24px;
  position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.topbar-title{font-family:"Space Grotesk","Manrope",sans-serif;font-weight:700;font-size:16px;color:var(--text)}
.topbar-actions{display:flex;align-items:center;gap:16px;margin-right:8px}

.sidebar-toggle{
  width:44px;
  height:40px;
  padding:0;
  border-radius:10px;
  border:1px solid #c8baa7;
  background:#fff;
  color:#243340;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(34,45,58,.1);
}

.sidebar-toggle i{
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus{
  background:#f8f2e8;
  border-color:#bfae97;
  color:#1f2c3b;
}

/* ===== Cards ===== */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 4px 14px rgba(55,46,36,.06);
}
.card-header{
  background:#f7f9fc;border-bottom:1px solid var(--border);
  font-weight:700;padding:12px 16px;font-size:14px;
}

.card-header i,
.page-header .btn i,
.nav-tabs .nav-link i{
  margin-right:6px;
  color:var(--accent-2);
}

/* ===== Stat cards ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:#fbf8f2;border:1px solid var(--border);border-radius:10px;padding:18px 18px;
  box-shadow:0 4px 12px rgba(55,46,36,.05);position:relative;overflow:hidden;
}
.stat-card .label{
  font-size:11px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.8px;font-weight:600;
}
.stat-card .value{
  font-size:24px;font-weight:700;color:var(--text);margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.stat-card .sub{font-size:12px;color:var(--text-muted);margin-top:4px}
.stat-card.accent{border-left:4px solid var(--accent)}
.stat-card.danger{border-left:4px solid var(--danger)}
.stat-card.warn{border-left:4px solid var(--warn)}
.stat-card.info{border-left:4px solid var(--info)}
.stat-card.gold{border-left:4px solid var(--gold)}

.stat-card .ico{
  position:absolute;top:14px;right:14px;font-size:22px;color:var(--text-muted);opacity:.25;
}

/* ===== Page header ===== */
.page-header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-bottom:18px;
}
.page-header h1{font-size:22px;font-weight:700;margin:0;color:var(--text)}
.page-header .subtitle{font-size:13px;color:var(--text-muted);margin-top:2px}

/* ===== Tables ===== */
.table{font-size:13.5px;margin-bottom:0}
.table thead th{
  background:#f3f6fb;font-weight:800;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.5px;color:#3f5777;border-bottom:1px solid var(--border);
  padding:10px 12px;
}
.table tbody td{padding:10px 12px;vertical-align:middle;border-bottom:1px solid #eef2f7}
.table tbody tr:hover{background:#f5f9ff}
.table-money{font-variant-numeric:tabular-nums;text-align:right;font-weight:500}

/* ===== Status badges ===== */
.badge-pill{
  display:inline-block;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:12px;letter-spacing:.3px;
}
.badge-pending{background:#fff3e0;color:#e65100}
.badge-active{background:#e3f2fd;color:#0277bd}
.badge-cleared{background:#e8f5e9;color:#2e7d32}
.badge-declined{background:#eceff1;color:#455a64}
.badge-defaulted{background:#ffebee;color:#c62828}
.badge-exited{
  background:linear-gradient(180deg,#f57b7b 0%,#c62828 100%);
  color:#fff;
  font-weight:800;
  border:1px solid #8f1a1a;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(82,18,18,.35);
}
.badge-overdue{background:#ffebee;color:#c62828}
.badge-paid{background:#e8f5e9;color:#2e7d32}
.badge-unpaid{background:#fff3e0;color:#e65100}

/* ===== Forms ===== */
.form-label{font-weight:500;font-size:13px;margin-bottom:4px;color:var(--text)}
.form-text{font-size:12px}
.form-control,.form-select{font-size:14px}

/* ===== Buttons ===== */
.btn-primary{
  background:linear-gradient(135deg,#1e3a5f 0%, #0b1e3a 100%);
  border-color:#0b1e3a;
  color:#fdfcf8;
  font-weight:800;
  letter-spacing:.15px;
  text-shadow:0 1px 1px rgba(4,20,40,.3);
  box-shadow:0 10px 22px rgba(11,30,58,.22);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary:hover,
.btn-primary:focus{
  background:linear-gradient(135deg,#27497a 0%, #112645 100%);
  border-color:#112645;
  color:#fffefa;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(11,30,58,.3);
}
.btn-primary i,
.module-highlight-btn i,
.savings-module-tabs .nav-link.active i{
  color:inherit;
  opacity:1;
  filter:drop-shadow(0 1px 1px rgba(10,44,32,.18));
}
.btn-outline-primary{
  color:var(--accent-2);
  border-color:rgba(31,143,104,.5);
  background:rgba(31,143,104,.12);
  font-weight:700;
  box-shadow:0 10px 22px rgba(55,46,36,.08);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:linear-gradient(135deg,#43b58b 0%, #24916d 100%);
  border-color:#24916d;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(31,143,104,.18);
}

.savings-module-actions .btn{
  border-width:1px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(31,143,104,.14);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.savings-module-actions .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(31,143,104,.22);
}

.savings-module-actions .btn-primary{
  background:linear-gradient(135deg,#1f6f57 0%, #145640 100%);
  border-color:#114d39;
  color:#fffef7;
}

.savings-module-actions .btn-primary:hover,
.savings-module-actions .btn-primary:focus{
  background:linear-gradient(135deg,#1a634d 0%, #104735 100%);
  border-color:#0f3f2f;
  color:#fffef7;
}

.savings-module-actions .btn-outline-primary{
  background:linear-gradient(135deg,#2a7b62 0%, #1b5e48 100%);
  border-color:#16513d;
  color:#f6f2e8;
}

.savings-module-actions .btn-outline-primary:hover,
.savings-module-actions .btn-outline-primary:focus{
  background:linear-gradient(135deg,#236d55 0%, #144b39 100%);
  border-color:#124231;
  color:#fffef7;
}

.module-highlight-btn,
.module-year-btn,
.module-warn-btn{
  font-weight:700;
  box-shadow:0 10px 24px rgba(55,46,36,.12);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.module-highlight-btn:hover,
.module-year-btn:hover,
.module-warn-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(55,46,36,.18);
}

.module-highlight-btn{
  background:linear-gradient(135deg,#2aa67b 0%, var(--accent) 100%);
  border-color:#238c68;
  color:#fdfcf8;
}

.module-highlight-btn:hover,
.module-highlight-btn:focus{
  background:linear-gradient(135deg,#23936d 0%, var(--accent-2) 100%);
  border-color:var(--accent-2);
  color:#fffefa;
}

.savings-calendar-actions .btn{
  min-width:104px;
}

.module-year-btn{
  background:rgba(255,255,255,.72);
  border-color:#c8baa7;
  color:#4f5f57;
}

.module-year-btn:hover,
.module-year-btn:focus{
  background:rgba(31,143,104,.14);
  border-color:rgba(31,143,104,.4);
  color:var(--accent-2);
}

.module-warn-btn{
  background:linear-gradient(135deg,#fff2d8 0%, #f6ddb0 100%);
  border-color:#e0b86e;
  color:#8e5b12;
}

.module-warn-btn:hover,
.module-warn-btn:focus{
  background:linear-gradient(135deg,#f5e0b8 0%, #efcf8e 100%);
  border-color:#d7a84e;
  color:#7b4d08;
}

.loan-pools-panel{
  border-color:#d4c39f;
}

.loan-pools-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.loan-pools-amount{
  font-size:30px;
  font-weight:800;
  color:#0f7d59;
  font-variant-numeric:tabular-nums;
}

.loan-pools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}

.loan-pool-box{
  background:#fbf8f2;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
}

.loan-pool-link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.loan-pool-link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(30,40,50,.08);
  text-decoration:none;
  color:inherit;
}

.loan-pool-link.pool-active{
  border-color:#2f6c8f;
  box-shadow:0 0 0 2px rgba(47,108,143,.15);
}

.loan-pool-box .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-muted);
  font-weight:700;
}

.loan-pool-box .value{
  margin-top:5px;
  font-size:20px;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.loan-pool-progress{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#e9e3d9;
  overflow:hidden;
}

.loan-pool-progress-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#0f7d59,#2aa67b);
}

.loan-strip-wrap{
  border-bottom:1px solid var(--border);
}

.loan-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.loan-strip .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:1px solid #d3c8b7;
  color:#53606a;
  background:#f6f1e9;
  border-radius:999px;
  padding:5px 12px;
  font-size:12px;
  font-weight:700;
  transition:all .15s ease;
}

.loan-strip .chip:hover{
  color:#2f5f4f;
  border-color:#a9c4b8;
  background:#eef6f2;
}

.loan-strip .chip.active{
  color:#fff;
  border-color:#1b664d;
  background:linear-gradient(135deg,#1f6f57,#145640);
}

.loan-strip-sort .chip-sort{
  font-size:11.5px;
  padding:4px 10px;
  color:#5a6673;
  background:#f0ece4;
  border-color:#c9bfaf;
  gap:4px;
}

.loan-strip-sort .chip-sort i{
  font-size:13px;
}

.loan-strip-sort .chip-sort.active{
  color:#fff;
  background:linear-gradient(135deg,#3a5c6e,#243d4d);
  border-color:#1b3040;
}

.interest-cleared-wrap{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
}

.interest-cleared-line{
  color:#0f7d59;
  font-weight:800;
  text-decoration-line:line-through;
  text-decoration-color:rgba(31,143,104,.85);
  text-decoration-thickness:1px;
  text-decoration-skip-ink:auto;
}

.interest-cleared-note{
  color:#0f7d59;
  font-weight:800;
  letter-spacing:.25px;
  font-size:11px;
}

.repay-quick-panel{
  border:1px solid #d4e7dc;
  background:linear-gradient(135deg,#f7fcf8 0%, #edf7f1 100%);
  border-radius:10px;
  padding:10px;
}

/* ===== Loan stat strip ===== */
.loan-stat-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
}

.loan-stat-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
}

.lst-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-muted);
  font-weight:700;
}

.lst-label i{
  font-size:13px;
  vertical-align:-2px;
  margin-right:3px;
}

.lst-value{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
  line-height:1;
}

.lst-warn{ color:#b73e3e; }
.lst-ok{ color:#0f7d59; }

.lst-bar-track{
  height:4px;
  border-radius:999px;
  background:#e0d9d0;
  overflow:hidden;
}

.lst-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#1f8f68,#2fba8c);
}

/* ===== Loan pool info bar ===== */
.loan-pool-info-bar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 16px;
  font-size:13.5px;
  color:var(--text);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}

.loan-pool-info-bar strong{
  font-variant-numeric:tabular-nums;
}

.loan-pool-info-bar .pipe{
  color:var(--border);
  margin:0 4px;
}

.loan-pool-info-bar .loan-pool-progress{
  width:100%;
  margin-top:6px;
}

/* ===== Loan overdue alert ===== */
.loan-overdue-alert{
  background:#fcf0ef;
  border:1.5px solid #e08080;
  border-radius:10px;
  color:#8b2424;
  padding:10px 16px;
  font-size:13.5px;
  display:flex;
  align-items:center;
  gap:10px;
}

.loan-overdue-alert i{
  font-size:20px;
  flex-shrink:0;
}

/* ===== Loan detail table ===== */
.loan-detail-table tr.detail-section td{
  background:#f3efe8;
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--text-muted);
  padding:5px 12px;
  border-top:1px solid var(--border);
}

.loan-detail-table tr.detail-key td{
  background:#f8f5f0;
  font-weight:700;
  color:var(--text);
}

/* ===== Repayment progress bar ===== */
.repay-progress-track{
  height:10px;
  border-radius:999px;
  background:#e4ddd4;
  overflow:hidden;
}

.repay-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#1f8f68,#2fba8c);
  transition:width .4s ease;
}

.repay-progress-fill.fill-cleared{
  background:linear-gradient(90deg,#0f7d59,#17a86e);
}

.repay-progress-fill.fill-overdue{
  background:linear-gradient(90deg,#b73e3e,#d9605d);
}

/* ===== Documentation panel ===== */
.doc-icon-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.doc-icon-badge{
  width:48px;
  height:48px;
  border-radius:10px;
  background:#fdf6ee;
  border:1.5px solid #e8d9c4;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#c17f3a;
  flex-shrink:0;
}

/* ===== Sortable table headers ===== */
.sort-th{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:inherit;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
  padding:0;
  transition:color .15s;
}

.sort-th:hover{
  color:var(--accent);
  text-decoration:none;
}

.sort-th.sort-active{
  color:var(--accent);
}

.sort-th .sort-idle{
  opacity:.35;
}

/* ===== Approval trail ===== */
.approval-dots{
  display:flex;
  gap:6px;
  align-items:center;
}

.approval-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ddd5c8;
  border:2px solid #c8bfb0;
  display:inline-block;
}

.approval-dot.filled{
  background:#1f8f68;
  border-color:#156d4f;
}

/* ===== Pool box color variants ===== */
.pool-box-icon{
  font-size:20px;
  margin-bottom:4px;
  opacity:.65;
}

.pool-box-danger{ border-top:3px solid #e07070; }
.pool-box-danger .pool-box-icon{ color:#b73e3e; }
.pool-box-danger .value{ color:#8b2424; }

.pool-box-warn{ border-top:3px solid #e0b870; }
.pool-box-warn .pool-box-icon{ color:#bf7a2a; }

.pool-box-info{ border-top:3px solid #7ab0d0; }
.pool-box-info .pool-box-icon{ color:#2f6c8f; }

.pool-box-success{ border-top:3px solid #70c49a; }
.pool-box-success .pool-box-icon{ color:#0f7d59; }
.pool-box-success .value{ color:#0f7d59; }

.savings-module-tabs{
  gap:8px;
  border-bottom:none;
}

.nav-tabs.savings-module-tabs .nav-item{
  margin-bottom:0;
}

.nav-tabs.savings-module-tabs .nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid rgba(20,86,64,.45);
  border-radius:999px;
  background:linear-gradient(135deg,#2d7c63 0%, #1f6b54 100%);
  color:#f4efe3;
  font-weight:800;
  letter-spacing:.15px;
  text-shadow:0 1px 1px rgba(8,34,25,.22);
  box-shadow:0 10px 20px rgba(20,86,64,.2);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.nav-tabs.savings-module-tabs .nav-link i{
  color:inherit;
}

.nav-tabs.savings-module-tabs .nav-link:hover,
.nav-tabs.savings-module-tabs .nav-link:focus{
  background:linear-gradient(135deg,#286f59 0%, #165641 100%);
  border-color:rgba(20,86,64,.68);
  color:#fffef7;
  transform:translateY(-1px);
  box-shadow:0 13px 26px rgba(20,86,64,.24);
}

.nav-tabs.savings-module-tabs .nav-link.active{
  background:linear-gradient(135deg,#155643 0%, #0f4333 100%);
  border-color:#0e3b2d;
  color:#fffef7;
  text-shadow:0 1px 1px rgba(10,44,32,.24);
  box-shadow:0 14px 28px rgba(11,56,41,.3);
}

.nav-tabs.savings-module-tabs .nav-link.active i{
  color:#fffef7;
}

.nav-tabs{
  border-bottom:1px solid #cabfae;
}
.nav-tabs .nav-link{
  color:#6a6f78;
  border:none;
  border-bottom:2px solid transparent;
  background:transparent;
  font-weight:700;
  letter-spacing:.1px;
}
.nav-tabs .nav-link.active{
  color:#1f2e3a;
  background:transparent;
  border-color:#1f8f68;
}

/* ===== Money helpers ===== */
.money{font-variant-numeric:tabular-nums;font-weight:500}
.money-positive{color:var(--accent-2)}
.money-negative{color:var(--danger)}
.money-amount-large{font-size:20px;font-weight:700}

/* ===== Auth pages ===== */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f1e35 0%,#14274a 100%);
  padding:20px;
}
.auth-card{
  background:#fff;border-radius:12px;padding:32px;width:100%;max-width:420px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.auth-brand{text-align:center;margin-bottom:24px}
.auth-brand .auth-logo-wrap{
  width:min(290px,100%);margin:0 auto 14px;border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%, #f6f6f6 100%);
  border:1px solid #e5e7eb;padding:10px 14px;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
}
.auth-brand .auth-logo{
  width:100%;max-height:92px;object-fit:contain;display:block;margin:0 auto;
}
.auth-brand h1{font-size:20px;font-weight:700;margin:0;color:var(--text)}
.auth-brand p{font-size:12.5px;color:var(--text-muted);margin:4px 0 0;text-transform:uppercase;letter-spacing:1px}

/* ===== Misc ===== */
.flash-stack{margin-bottom:18px}
.section-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 10px}
.read-only-banner{
  background:#e3f2fd;color:#01579b;padding:10px 14px;border-radius:8px;
  font-size:13px;margin-bottom:18px;border-left:4px solid var(--info);
}
.empty-state{
  text-align:center;padding:40px 20px;color:var(--text-muted);
}
.empty-state i{font-size:42px;opacity:.3;display:block;margin-bottom:10px}
.kv-list{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;font-size:13.5px}
.kv-list dt{color:var(--text-muted);font-weight:500}
.kv-list dd{margin:0;font-weight:500}

.member-name-cell{display:flex;align-items:center;gap:8px}
.member-avatar-sm{
  width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:1px solid #d9e1ef;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.member-avatar-fallback{background:#e7eef9;color:#244d85}

.member-profile-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.member-dashboard-head{display:flex;align-items:center;gap:10px}
.member-profile-photo{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid #d9e1ef;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#244d85;background:#e7eef9;
}
.member-profile-photo-sm{width:44px;height:44px}

.bar-chart{display:flex;align-items:flex-end;height:120px;gap:8px;padding:10px 6px}
.bar{flex:1;background:linear-gradient(180deg,#4caf50,#2e7d32);border-radius:4px 4px 0 0;position:relative;min-height:4px}
.bar-label{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10px;color:var(--text-muted)}
.bar-value{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--text);font-weight:600}

/* ===== Sidebar overlay backdrop ===== */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:999;
  -webkit-tap-highlight-color:transparent;
}
.sidebar-overlay.show{display:block}

/* ===== Responsive: ensure all table containers scroll ===== */
.table-responsive,
[class$="-table-wrap"],
[class*="-table-wrap"]{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ===== Mobile / Tablet ===== */
@media (max-width:991.98px){
  /* ── Layout ── */
  .app-sidebar{
    position:fixed;left:-280px;top:0;height:100vh;z-index:1000;
    transition:left .25s;
  }
  .app-sidebar.open{left:0;box-shadow:0 0 30px rgba(0,0,0,.4)}
  .app-main{padding:16px 14px}
  .app-footer{padding:12px 16px}
  .app-topbar{padding:10px 14px;gap:10px}
  .topbar-title{font-size:15px}

  /* ── Nav ── */
  .nav-link{padding:11px 18px;font-size:14.2px}
  .nav-link i{width:24px;height:24px;font-size:16px;margin-right:10px}

  /* ── Page header ── */
  .page-header{flex-direction:column;align-items:flex-start;gap:8px}

  /* ── Stat grids ── */
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card .value{font-size:20px}
  .loan-stat-strip{grid-template-columns:repeat(2,1fr)}

  /* ── Member hero & dash ── */
  .member-hero{padding:16px;border-radius:14px}
  .member-hero h1{font-size:24px}
  .member-dash-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  /* ── Generic hero sections (fines, savings, loans, assets) ── */
  .hero-inner{flex-direction:column !important;gap:14px !important}
  .hero-actions{width:100%;flex-wrap:wrap !important}
  .hero-title{font-size:20px !important}
  .hero-sub{font-size:12px !important;max-width:100% !important}
  .hero-pills{flex-wrap:wrap}

  /* ── Year bar ── */
  .year-bar{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .year-chip{flex-shrink:0;font-size:11px;padding:4px 11px}

  /* ── Table toolbar ── */
  .table-toolbar{flex-wrap:wrap;gap:6px;padding:10px 12px !important}
  .search-input{min-width:0;flex:1}

  /* ── Filter panel grid ── */
  .filter-panel-grid{grid-template-columns:1fr 1fr !important}

  /* ── Action buttons in tables ── */
  .action-wrap{flex-wrap:wrap;gap:4px}
  .abtn{font-size:11px !important;padding:4px 9px !important}

  /* ── Member cards scroll (remove fixed height on tablet) ── */
  .member-cards-scroll{max-height:none !important}

  /* ── kv list ── */
  .kv-list{grid-template-columns:130px 1fr}
}

@media (max-width:767.98px){
  /* ── Layout ── */
  .app-main{padding:12px 10px}

  /* ── Stat grids ── */
  .stat-grid{grid-template-columns:1fr}
  .stat-card .value{font-size:18px}
  .loan-stat-strip{grid-template-columns:repeat(2,1fr)}

  /* ── Member dash ── */
  .member-dash-grid{grid-template-columns:1fr}
  .member-dash-tile{padding:12px}
  .member-dash-tile .value{font-size:22px}

  /* ── Hero ── */
  .hero-title{font-size:18px !important}
  div[class$="-hero"],div[class*="-hero "]{
    padding:16px !important;border-radius:12px !important
  }

  /* ── Filter panel ── */
  .filter-panel-grid{grid-template-columns:1fr !important}
  .fp-group{min-width:0}

  /* ── Table font ── */
  .table,table.ft{font-size:12px}

  /* ── Action buttons: stack ── */
  .action-wrap{flex-direction:column;align-items:flex-end}

  /* ── kv list ── */
  .kv-list{grid-template-columns:1fr}

  /* ── Loan stat strip ── */
  .loan-stat-strip{grid-template-columns:1fr 1fr}

  /* ── Bootstrap row side-by-side → stack on small ── */
  .row>[class*="col-md"]{width:100% !important;max-width:100% !important}
}

@media (max-width:480px){
  /* ── Layout ── */
  .app-main{padding:10px 8px}
  .topbar-title{font-size:13px}

  /* ── Stat grids ── */
  .stat-grid{grid-template-columns:1fr}
  .member-hero h1{font-size:21px}

  /* ── Loan strips ── */
  .loan-stat-strip{grid-template-columns:1fr}
  .loan-pools-grid{grid-template-columns:1fr !important}

  /* ── Hero ── */
  .hero-title{font-size:17px !important}
  .btn-accent{font-size:12px !important;padding:8px 14px !important}

  /* ── Year bar chips ── */
  .year-chip{font-size:10px;padding:3px 9px}
}

/* ===== Member portal revamp ===== */
.member-portal-hero{
  position:relative;overflow:hidden;border-radius:22px;padding:1.5rem 1.6rem 1.25rem;
  margin-bottom:1.15rem;color:#fff;
  background:radial-gradient(circle at 12% 18%, rgba(14,165,233,.22), transparent 38%),
             radial-gradient(circle at 88% 16%, rgba(45,212,191,.18), transparent 35%),
             linear-gradient(135deg,#050f1f 0%,#071428 30%,#0b1e3a 68%,#0e2d5a 100%);
  box-shadow:0 18px 42px rgba(10,18,34,.24);
}
.member-portal-hero::after{
  content:"";position:absolute;right:-20px;bottom:-18px;width:280px;height:130px;
  background:url('../img/kov-logo.svg') no-repeat center/contain;
  opacity:.07;filter:grayscale(1) brightness(1.45);pointer-events:none;z-index:1;
}
.member-portal-hero > *{position:relative;z-index:2}
.member-portal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.member-portal-eyebrow{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#93c5fd}
.member-portal-title{margin:.25rem 0 0;font-size:clamp(1.4rem,3vw,2rem);font-weight:900;line-height:1.05;color:#fff}
.member-portal-sub{margin-top:.35rem;font-size:.82rem;color:#bfdbfe;max-width:58ch}
.member-portal-actions{display:flex;flex-wrap:wrap;gap:.45rem}
.member-portal-actions .btn{border-radius:11px;font-weight:700;box-shadow:0 8px 18px rgba(15,23,42,.18)}
.member-portal-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.member-portal-badge{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.22rem .65rem;font-size:.7rem;font-weight:800;letter-spacing:.02em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#e0f2fe}
.member-portal-badge.ok{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.24);color:#dcfce7}
.member-portal-badge.warn{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.26);color:#fef3c7}
.member-portal-badge.bad{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.26);color:#fee2e2}
.member-portal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.95rem;margin-bottom:1.1rem}
@media (max-width:1100px){.member-portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.member-portal-grid{grid-template-columns:1fr;}}
.member-portal-card{
  background:#fff;border:1px solid #dbe5ef;border-radius:18px;padding:1rem 1.05rem 1.05rem;
  box-shadow:0 8px 20px rgba(30,50,80,.06);position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.member-portal-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(30,50,80,.1);border-color:#b8cbe0;color:inherit}
.member-portal-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--card-accent,#2563eb)}
.member-portal-card .mp-k{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--card-label,#64748b)}
.member-portal-card .mp-v{margin-top:.3rem;font-size:1.35rem;font-weight:900;color:var(--card-value,#0f172a);line-height:1.1;font-variant-numeric:tabular-nums}
.member-portal-card .mp-s{margin-top:.2rem;font-size:.75rem;line-height:1.45;color:#64748b}
.member-portal-card .mp-i{position:absolute;right:.95rem;top:.85rem;font-size:1.1rem;opacity:.22;color:var(--card-value,#0f172a)}
.member-portal-card.blue{--card-accent:#2563eb;--card-label:#2563eb;--card-value:#1d4ed8;background:linear-gradient(135deg,#f8fbff,#eef5ff)}
.member-portal-card.green{--card-accent:#059669;--card-label:#059669;--card-value:#064e3b;background:linear-gradient(135deg,#f7fffb,#eefaf3)}
.member-portal-card.gold{--card-accent:#d97706;--card-label:#b45309;--card-value:#78350f;background:linear-gradient(135deg,#fffdf6,#fff5e4)}
.member-portal-card.violet{--card-accent:#7c3aed;--card-label:#6d28d9;--card-value:#4c1d95;background:linear-gradient(135deg,#fbfaff,#f3efff)}
.member-portal-card.red{--card-accent:#dc2626;--card-label:#b91c1c;--card-value:#7f1d1d;background:linear-gradient(135deg,#fff7f7,#ffecec)}
.member-portal-card.slate{--card-accent:#64748b;--card-label:#64748b;--card-value:#1e293b;background:linear-gradient(135deg,#fbfcfe,#f6f8fb)}
.member-shell{background:#fff;border:1px solid #dbe5ef;border-radius:18px;box-shadow:0 8px 20px rgba(30,50,80,.06);overflow:hidden;margin-bottom:1.1rem}
.member-shell-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.9rem 1rem;background:linear-gradient(180deg,#f8fbff,#f5f8fc);border-bottom:1px solid #e2eaf0}
.member-shell-title{font-size:.9rem;font-weight:800;color:#17324b;display:flex;align-items:center;gap:.45rem}
.member-shell-title i{color:#2563eb}
.member-shell-body{padding:1rem 1rem 1.1rem}
.member-mini-tabs{display:flex;flex-wrap:wrap;gap:.45rem}
.member-mini-tab{display:inline-flex;align-items:center;gap:.35rem;padding:.33rem .72rem;border-radius:999px;border:1px solid #dbe5ef;background:#fff;color:#334155 !important;text-decoration:none !important;font-size:.77rem;font-weight:700;transition:all .15s}
.member-mini-tab:hover{border-color:#93c5fd;background:#eff6ff;color:#1d4ed8 !important}
.member-mini-tab.active{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8 !important}
.member-tab-panel{display:none}
.member-tab-panel.active{display:block}
.member-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem}
.member-kv dt{font-size:.67rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.member-kv dd{margin:0;color:#0f172a;font-weight:600;font-size:.9rem}
.member-table{width:100%;border-collapse:collapse}
.member-table thead th{background:#0f172a;color:#cbd5e1;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;padding:.72rem .95rem;border-bottom:2px solid #1e293b}
.member-table tbody td{padding:.72rem .95rem;border-bottom:1px solid #eef2f7;font-size:.88rem;color:#243447;vertical-align:middle}
.member-table tbody tr:hover td{background:rgba(37,99,235,.035)}
.member-stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}
@media (max-width:900px){.member-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:540px){.member-stat-strip{grid-template-columns:1fr;}}
.member-stat{border-radius:16px;padding:.95rem 1rem;background:#fff;border:1px solid #dbe5ef;box-shadow:0 8px 18px rgba(30,50,80,.05)}
.member-stat .k{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.member-stat .v{margin-top:.28rem;font-size:1.45rem;font-weight:900;color:#0f172a;line-height:1.1;font-variant-numeric:tabular-nums}
.member-stat .s{margin-top:.16rem;font-size:.76rem;color:#64748b;line-height:1.45}
.member-stat.blue{border-left:4px solid #2563eb;background:linear-gradient(135deg,#f8fbff,#eef5ff)}
.member-stat.green{border-left:4px solid #059669;background:linear-gradient(135deg,#f7fffb,#eefaf3)}
.member-stat.gold{border-left:4px solid #d97706;background:linear-gradient(135deg,#fffdf6,#fff5e4)}
.member-stat.red{border-left:4px solid #dc2626;background:linear-gradient(135deg,#fff7f7,#ffecec)}
.member-panel{background:#fff;border:1px solid #dbe5ef;border-radius:18px;box-shadow:0 8px 20px rgba(30,50,80,.06);overflow:hidden;margin-bottom:1rem}
.member-panel-head{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.9rem 1rem;background:linear-gradient(180deg,#fbfdff,#f4f8fc);border-bottom:1px solid #e2eaf0}
.member-panel-title{font-size:.88rem;font-weight:800;color:#17324b;display:flex;align-items:center;gap:.45rem}
.member-panel-body{padding:1rem}
.member-soft-link{color:inherit;text-decoration:none;display:block}
.member-soft-link:hover{color:inherit}
.member-icon-dot{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#dbeafe;color:#1d4ed8;font-size:1rem;flex-shrink:0}
.member-ring-shell{display:grid;grid-template-columns:180px 1fr;gap:1rem;align-items:center}
@media (max-width:680px){.member-ring-shell{grid-template-columns:1fr;justify-items:center}}
.member-ring{position:relative;width:180px;height:180px}
.member-ring svg{transform:rotate(-90deg)}
.member-ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.member-ring-pct{font-size:1.8rem;font-weight:900;color:#0f172a;line-height:1}
.member-ring-sub{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-top:.18rem}
.member-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (max-width:540px){.member-health-grid{grid-template-columns:1fr}}
.member-chip{display:inline-flex;align-items:center;gap:.28rem;padding:.22rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;border:1px solid transparent}
.member-chip.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.member-chip.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}
.member-chip.bad{background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* ── Table pager (makePager) ────────────────────────────────────────────── */
.pager-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:.55rem 1rem}
.pager-bar .pager-label{font-size:.78rem;color:#6b7280}
.pager-bar .pager-btns{display:flex;gap:.3rem;align-items:center}
.pager-btn{border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:.2rem .6rem;font-size:.78rem;font-weight:600;cursor:pointer;color:#374151;min-width:32px;text-align:center;line-height:1.6;transition:.12s}
.pager-btn:hover:not(:disabled){background:#f1f5f9;border-color:#a5b4fc}
.pager-btn.active{background:#6366f1;color:#fff;border-color:#6366f1;cursor:default}
.pager-btn:disabled{opacity:.4;cursor:default}
.pager-dots{color:#9ca3af;font-size:.78rem;padding:0 .15rem}

/* ===== Member motion + quick rail polish ===== */
@keyframes mp-fade-up{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media (prefers-reduced-motion:no-preference){
  .member-page .member-portal-hero{
    opacity:0;
    animation:mp-fade-up .48s cubic-bezier(.21,.84,.33,1) .04s forwards;
  }
  .member-page .member-portal-grid > .member-portal-card,
  .member-page .member-stat-strip > .member-stat,
  .member-page .member-panel,
  .member-page .member-shell{
    opacity:0;
    animation:mp-fade-up .42s ease-out forwards;
    will-change:transform,opacity;
  }
  .member-page .member-portal-grid > :nth-child(1),
  .member-page .member-stat-strip > :nth-child(1){animation-delay:.08s}
  .member-page .member-portal-grid > :nth-child(2),
  .member-page .member-stat-strip > :nth-child(2){animation-delay:.14s}
  .member-page .member-portal-grid > :nth-child(3),
  .member-page .member-stat-strip > :nth-child(3){animation-delay:.20s}
  .member-page .member-portal-grid > :nth-child(4),
  .member-page .member-stat-strip > :nth-child(4){animation-delay:.26s}
  .member-page .member-panel:nth-of-type(1),
  .member-page .member-shell:nth-of-type(1){animation-delay:.18s}
  .member-page .member-panel:nth-of-type(2),
  .member-page .member-shell:nth-of-type(2){animation-delay:.24s}
  .member-page .member-panel:nth-of-type(3),
  .member-page .member-shell:nth-of-type(3){animation-delay:.30s}
}

/* ================================================================
   MEMBER QUICK RAIL  (revamped — floating)
   • Desktop (>1024px):  floating vertical glass rail on the right.
   • Phones + tablets (≤1024px):  floating glass BOTTOM TAB BAR —
     5 labelled tabs, ≥48px touch targets, safe-area aware, filled
     icon + pill on the active tab, springy press feedback.
   Reference: Apple HIG tab bar · Material bottom-nav (≤5) · glassmorphism.
   ================================================================ */
.member-quick-rail{
  position:fixed; z-index:95;
  display:flex; flex-direction:column; gap:.3rem;
  right:16px; top:50%; transform:translateY(-50%);
  padding:.5rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 14px 38px rgba(11,30,58,.20), inset 0 1px 0 rgba(255,255,255,.8);
}
.member-quick-link{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:48px; min-height:48px;
  padding:.45rem .35rem;
  border-radius:14px;
  color:#5b6677; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), color .15s ease;
}
.member-quick-link .mqr-ic{
  display:grid; place-items:center; font-size:1.34rem; line-height:1;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
/* Desktop rail is icon-only (title tooltip); labels show on the mobile bar. */
.member-quick-link .mqr-label{ font-size:.6rem; font-weight:800; letter-spacing:.01em; line-height:1; display:none; }
/* Active pill sits behind the icon + label. */
.member-quick-link::before{
  content:""; position:absolute; inset:4px; border-radius:11px; z-index:-1;
  background:linear-gradient(135deg, rgba(208,162,69,.22), rgba(37,99,235,.16));
  box-shadow:inset 0 0 0 1px rgba(208,162,69,.38);
  opacity:0; transform:scale(.8);
  transition:opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.member-quick-link:hover{ color:#1d4ed8; }
.member-quick-link:hover .mqr-ic{ transform:translateY(-2px); }
.member-quick-link:active{ transform:scale(.88); }
.member-quick-link:focus-visible{ outline:2px solid #2563eb; outline-offset:3px; }
.member-quick-link.active{ color:#0b1e3a; }
.member-quick-link.active .mqr-ic{ color:#b8860b; }
.member-quick-link.active .mqr-label{ color:#0b1e3a; }
.member-quick-link.active::before{ opacity:1; transform:scale(1); }

/* Keep desktop content clear of the side rail. */
@media (min-width:1025px){ .member-page .app-main{ padding-right:88px; } }

/* ── Phones + tablets: floating bottom tab bar ── */
@media (max-width:1024px){
  .member-quick-rail{
    flex-direction:row; gap:.1rem;
    top:auto; left:50%; right:auto;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);
    width:max-content; max-width:calc(100vw - 24px);
    padding:.4rem .5rem;
    border-radius:24px;
  }
  .member-quick-link.mqr-secondary{ display:none; }     /* → 5 tabs (HIG/Material bottom-nav ≤5) */
  .member-quick-link{ min-width:62px; min-height:50px; }
  .member-quick-link .mqr-label{ display:block; }       /* icon + label */
  .member-quick-link:active{ transform:scale(.93); }
  .member-page .app-main{
    padding-right:14px;
    padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Small phones: stretch the bar edge-to-edge, distribute evenly ── */
@media (max-width:560px){
  .member-quick-rail{
    left:10px; right:10px; transform:none;
    width:auto; max-width:none; justify-content:space-between;
    border-radius:22px;
  }
  .member-quick-link{ flex:1 1 0; min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  .member-quick-link, .member-quick-link .mqr-ic, .member-quick-link::before{ transition:none; }
  .member-quick-link:hover .mqr-ic, .member-quick-link:active{ transform:none; }
}

/* ===== Member portal responsive hardening ===== */
@media (max-width:1024px){
  .member-portal-hero{padding:1.15rem 1.05rem .95rem;border-radius:18px}
  .member-portal-head{gap:.75rem}
  .member-portal-sub{max-width:none}
  .member-portal-actions{width:100%}
  .member-portal-actions .btn{flex:1 1 auto;min-width:128px}
  .member-panel-head,.member-shell-head{padding:.7rem .8rem}
  .member-panel-body,.member-shell-body{padding:.85rem .8rem}
  .member-kv{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.55rem}
}

@media (max-width:768px){
  .member-page .app-main{padding-left:10px;padding-right:10px}
  .member-portal-title{font-size:clamp(1.15rem,6vw,1.45rem)}
  .member-portal-badges{gap:.35rem}
  .member-portal-badge{font-size:.64rem;padding:.2rem .52rem}
  .member-mini-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
  .member-mini-tab{justify-content:center;padding:.35rem .55rem}
  .member-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.5rem !important}
  .member-portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .member-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .member-portal-card{padding:.78rem .8rem .85rem;border-radius:14px}
  .member-portal-card .mp-v{font-size:1.1rem}
  .member-portal-card .mp-s{font-size:.69rem;line-height:1.3}
  .member-stat{padding:.75rem .8rem;border-radius:14px}
  .member-stat .v{font-size:1.08rem}
  .member-stat .s{font-size:.69rem}
  .member-panel,.member-shell{border-radius:14px}
  .member-panel-head,.member-shell-head{flex-direction:column;align-items:flex-start;gap:.45rem}
  .member-panel-head .btn,.member-shell-head .btn{width:100%}
  .member-ring{width:152px;height:152px}
  .member-ring-pct{font-size:1.45rem}
  .member-health-grid{grid-template-columns:1fr}
  .member-chip{font-size:.66rem;padding:.18rem .48rem}
  .member-table thead th,.member-table tbody td{padding:.58rem .62rem}
  .member-shell-body.table-responsive > .member-table,
  .member-panel-body .table-responsive > .member-table,
  .table-responsive > .member-table{min-width:600px}
}

@media (max-width:520px){
  .member-page .app-main{padding-left:8px;padding-right:8px}
  .member-mini-tabs{grid-template-columns:1fr}
  .member-grid{grid-template-columns:1fr !important}
  .member-portal-grid,.member-stat-strip{grid-template-columns:1fr}
  .member-portal-actions .btn{flex:1 1 100%;min-width:0}
  .member-panel-title,.member-shell-title{font-size:.82rem}
  .member-kv{grid-template-columns:1fr}
  .member-shell-body.table-responsive > .member-table,
  .member-panel-body .table-responsive > .member-table,
  .table-responsive > .member-table{min-width:540px}
}

/* ===== Member template micro-fixes ===== */
.member-head-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;max-width:100%}
.member-head-actions .btn{white-space:normal}
.member-table.mobile-wide{min-width:640px}
.member-table .subline{display:block;font-size:.74rem;color:#64748b;line-height:1.24;margin-top:.06rem}

@media (max-width:768px){
  .member-table.mobile-wide{min-width:580px}
  .member-head-actions{width:100%;justify-content:flex-start}
  .member-head-actions .pager-label{order:2;width:100%}
  .member-head-actions .btn{order:1;width:100%}
}

@media (max-width:420px){
  .member-table.mobile-wide{min-width:540px}
}