:root{
  --navy:#071f39;--navy2:#0b3154;
  --green:#12a477;--green2:#087e5b;
  --canvas:#f5f8f7;--white:#fff;--ink:#132238;--muted:#6d7888;--line:#e0e7e4;
  --blue:#246bce;--orange:#e98218;--violet:#7547c8;--red:#c43d4e;
  --radius:14px;--radius-sm:8px;
  --shadow:0 7px 28px rgba(17,35,54,.06);--shadow-sm:0 1px 3px rgba(17,35,54,.05);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--green2);}

/* ---------- ChurchApp wordmark ---------- */
.logo-mark{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:8px;}
.logo-mark .biz{color:#132238;}
.logo-mark .support{color:#3b6fed;}
.logo-icon{height:1.6em;width:1.6em;border-radius:6px;flex-shrink:0;}
.logo-bar{width:46px;height:3px;border-radius:2px;background:#3b6fed;margin-top:6px;}
.sidebar .logo-mark .biz{color:#fff;}

/* ---------- app shell: sidebar + main ---------- */
.app-shell{min-height:100vh;}
.sidebar{position:fixed;inset:0 auto 0 0;width:220px;background:linear-gradient(180deg,#061a30,#082d50);
  color:#fff;padding:24px 14px 18px;display:flex;flex-direction:column;z-index:100;overflow-y:auto;}
.sidebar-brand{padding:0 8px 20px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px;}
.nav-label{padding:0 10px 8px;color:#7891a8;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;}
.side-nav{display:flex;flex-direction:column;gap:4px;}
.side-nav a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;color:#dce6ef;
  text-decoration:none;font-size:13px;font-weight:500;transition:.15s;}
.side-nav a i{font-size:15px;width:18px;text-align:center;color:#b9cad8;}
.side-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.side-nav a.active{background:linear-gradient(135deg,#109e74,#1ab889);box-shadow:0 8px 20px rgba(18,164,119,.25);color:#fff;}
.side-nav a.active i{color:#fff;}
.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:14px 8px 0;}
.tenant-name{font-size:12px;font-weight:700;}
.tenant-meta{font-size:9.5px;color:#9fb1c1;margin-top:3px;}
.sidebar-logout{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:#f3a9a9;
  text-decoration:none;font-size:13px;font-weight:500;}
.sidebar-logout:hover{background:rgba(220,53,69,.16);}
.sidebar-logout i{font-size:15px;width:18px;text-align:center;}

.app-main{margin-left:220px;min-height:100vh;}
.topbar{height:62px;padding:0 22px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);}
.tenant-pill{display:flex;flex-direction:row;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;padding:6px 14px 6px 6px;font-size:13px;font-weight:700;color:var(--ink);}
.tenant-pill img{height:36px;width:36px;object-fit:contain;border-radius:6px;flex-shrink:0;display:inline-block;}
.tenant-pill i{font-size:18px;color:var(--muted);flex-shrink:0;}
.who{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);margin-left:auto;}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#dff3ec;color:var(--green2);font-weight:700;font-size:13px;flex-shrink:0;}
.who strong{display:block;color:var(--ink);font-size:12px;}
.who a{color:var(--red);text-decoration:none;margin-left:4px;}
.who a:hover{text-decoration:underline;}
.mobile-menu{display:none;background:transparent;border:0;color:var(--ink);box-shadow:none;font-size:22px;padding:4px;cursor:pointer;}

/* ---------- page shell (logged out / login) ---------- */
.wrap{max-width:min(1760px, 96vw);margin:0 auto;padding:26px 24px 58px;}
header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);
  padding-bottom:16px;margin-bottom:20px;gap:16px;flex-wrap:wrap;}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px;}
.eyebrow,.sched-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700;margin:0 0 5px;}
h1{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;line-height:1.2;margin:0;color:var(--ink);letter-spacing:-.02em;}
h2{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ink);}
.page-head p{font-size:12px;color:var(--muted);margin:5px 0 0;}
.panel{background:transparent;padding:0;}
.who-inline{font-size:12.5px;color:var(--muted);}
.who-inline a{color:var(--red);text-decoration:none;}
.legal{font-size:12px;color:var(--muted);margin:0 0 18px;line-height:1.6;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--green);padding:10px 13px;border-radius:0 8px 8px 0;}

/* ---------- tabs (module sub-nav) — styled as a contained button group ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:none;padding:0;margin-bottom:20px;}
.tab{font-size:12.5px;font-weight:600;padding:9px 15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);text-decoration:none;border-radius:8px;transition:.15s;box-shadow:var(--shadow-sm);}
.tab:hover{background:#e8f5f0;color:var(--green2);border-color:#b7dfd0;}
.tab.active{background:var(--green);color:#fff;border-color:var(--green);}
.tab i{margin-right:6px;font-size:.95em;}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 21px;margin-bottom:17px;box-shadow:var(--shadow-sm);}
.card:hover{box-shadow:var(--shadow);}

/* ---------- forms ---------- */
.field-row{display:flex;gap:13px;flex-wrap:wrap;}
.field{flex:1;min-width:160px;}
label{display:block;font-size:12px;font-weight:600;color:#5d6978;margin-bottom:5px;}
input[type=text],input[type=date],input[type=number],input[type=password],input[type=email],input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #d5ddda;border-radius:var(--radius-sm);background:#fff;
  font-family:'Inter',sans-serif;font-size:13px;color:var(--ink);}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(18,164,119,.13);}
button,.btn{font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;background:var(--green);color:#fff;
  border:1px solid var(--green);border-radius:7px;padding:9px 14px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:.15s;}
button:hover,.btn:hover{background:var(--green2);border-color:var(--green2);}
.btn.secondary{background:#fff;color:var(--ink);border-color:#d6deda;}
.btn.secondary:hover{background:var(--canvas);}
.btn.rust{background:var(--red);border-color:var(--red);}
.btn.link{background:none;border:0;color:var(--green2);text-decoration:underline;padding:0;margin:0 0 0 10px;font-size:12px;font-weight:500;}
.btn.link.edit{color:var(--blue);}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:#fff;}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin:0;}
th,td{text-align:left;padding:10px 11px;border-bottom:1px solid #edf1ef;}
tr:last-child td{border-bottom:0;}
tbody tr:hover{background:#f9fbfa;}
.module-detail{display:none;width:100%;flex-basis:100%;}
.module-toggle-checkbox:checked ~ .module-detail{display:block;}
.module-toggle-checkbox{width:17px;height:17px;flex-shrink:0;}
.module-toggle-block{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.module-toggle-block label{flex:1;min-width:0;}
tr.row-suspended{background:#fdf1f2;}
tr.row-suspended:hover{background:#fbe6e8;}
tr.row-expiring{background:#fff8ee;}
tr.row-expiring:hover{background:#fff1db;}
th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#7b8694;font-weight:700;background:#fbfcfc;}
td.num{font-variant-numeric:tabular-nums;}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--muted);word-break:break-all;}
.neg{color:var(--red);font-weight:700;}
.empty-state{padding:22px;color:var(--muted);font-size:12px;text-align:center;border:1px dashed #cad4d0;border-radius:10px;}

/* ---------- stats ---------- */
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.stat{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);}
.stat-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#dff3ec;color:var(--green2);font-size:15px;margin-bottom:10px;}
.stat:nth-child(2) .stat-icon{background:#fff0df;color:#d16e09;}
.stat:nth-child(3) .stat-icon{background:#e7f0fd;color:var(--blue);}
.stat:nth-child(4) .stat-icon{background:#eee9fb;color:var(--violet);}
.stat .n{font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.stat .l{font-size:10.5px;color:var(--muted);font-weight:700;margin-top:4px;}

/* ---------- badges ---------- */
.badge{display:inline-flex;padding:3px 9px;font-size:10px;font-weight:700;border-radius:20px;letter-spacing:.03em;}
.badge.active{background:#dff3ec;color:var(--green2);}
.badge.pending,.badge.trialing{background:#fff0df;color:#a95d0c;}
.badge.suspended,.badge.cancelled,.badge.past_due{background:#fde6e8;color:#a72d3b;}

/* ---------- notes / alerts ---------- */
.note{font-size:12px;color:#586576;background:#fff;border:1px solid var(--line);padding:10px 13px;margin:12px 0;line-height:1.6;border-radius:8px;}
.warn{border-left:3px solid var(--orange);background:#fff7ed;color:#8b500f;}
.ok{border-left:3px solid var(--green);background:#eefaf5;color:var(--green2);}
.error-box{font-size:12.5px;color:#a72d3b;background:#fde6e8;border:1px solid #f3b6bd;padding:10px 13px;margin-bottom:16px;border-radius:8px;}
.success-box{font-size:12.5px;color:var(--green2);background:#eefaf5;border:1px solid #a3d9c6;padding:10px 13px;margin-bottom:16px;border-radius:8px;}

.footer-note{font-size:11px;color:var(--muted);text-align:center;margin-top:24px;line-height:1.6;}
.pie{width:145px;height:145px;border-radius:50%;flex-shrink:0;}
.legend{display:flex;flex-direction:column;gap:8px;justify-content:center;}
.legend .row{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.swatch{width:11px;height:11px;border-radius:3px;}
.tally{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 4px;}
.tblock{width:13px;height:13px;border:1px solid #cbd5d1;border-radius:2px;}
.tblock.used{background:var(--orange);border-color:var(--orange);}
.tblock.accrued{background:var(--green);border-color:var(--green);}
.tblock.empty{background:transparent;}

/* ---------- login page ---------- */
.login-page{min-height:100vh;background:radial-gradient(circle at 14% 18%,rgba(18,164,119,.24),transparent 32%),
  linear-gradient(145deg,#061a30,#0a3155);display:flex;align-items:center;justify-content:center;padding:24px;}
.login-shell{width:min(880px,100%);display:grid;grid-template-columns:1fr 380px;overflow:hidden;border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);}
.login-intro{padding:48px;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));}
.login-intro h1{color:#fff;font-size:30px;margin:18px 0 10px;}
.login-intro p{color:#bed0df;line-height:1.7;font-size:13px;}
.login-wrap{margin:0;background:#fff;padding:40px 34px;max-width:none;}
.login-wrap .card{padding:0;border:0;box-shadow:none;margin:0;}
.login-wrap h2{font-size:22px;}
.login-page>.wrap{width:min(440px,100%);padding:0;}
.login-page>.wrap .login-wrap{border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);}

.table-scroll::-webkit-scrollbar{height:6px;}
.table-scroll::-webkit-scrollbar-thumb{background:#cbd5d1;border-radius:3px;}

@media(max-width:900px){
  .stat-row{gap:10px;}
}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 8px 24px rgba(0,0,0,.2);}
  .sidebar.open{transform:translateX(0);}
  .app-main{margin-left:0;}
  .mobile-menu{display:block;}
  .topbar{height:56px;padding:0 14px;}
  .who .who-copy{display:none;}
  .wrap{padding:20px 14px 40px;}
  .page-head{display:block;}
  h1{font-size:20px;}
  .card{padding:15px;}
  .field{min-width:100% !important;}
  .stat-row{gap:9px;}
  .stat{min-width:calc(50% - 5px);flex:none;padding:13px;}
  .stat .n{font-size:20px;}
  .login-shell{grid-template-columns:1fr;}
  .login-intro{display:none;}
  .login-wrap{padding:32px 22px;}
  .tabs{flex-wrap:nowrap;overflow-x:auto;}
  .tab{flex:none;}
  table{font-size:11.5px;}
  th,td{padding:8px 7px;white-space:nowrap;}
  button,.btn{width:100%;text-align:center;margin-bottom:8px;}
  .form-inline button,.form-inline .btn,
  form[style*="display:inline"] button,form[style*="display:inline"] .btn{width:auto;margin-bottom:0;}
  .btn.link{width:auto;display:inline;margin-bottom:0;}
}
@media(max-width:430px){
  .stat-row{grid-template-columns:1fr;}
}

/* ---------- switch-user ("view as a member") banner ---------- */
.impersonation-banner{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;background:#3b2a08;color:#ffe3b0;padding:9px 20px;font-size:12.5px;font-weight:600;}
.impersonation-banner form{margin:0;}
.impersonation-banner .btn.secondary{background:#ffe3b0;color:#3b2a08;border-color:#ffe3b0;padding:6px 12px;}
.impersonation-banner .btn.secondary:hover{background:#fff2d9;}

/* ---------- bulk-action toolbar (e.g. bulk module access on Members) ---------- */
.bulk-toolbar{background:#f5faf8;border-style:dashed;}

/* ---------- Connect: public landing choice cards ---------- */
.connect-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
.connect-choice-card{display:flex;flex-direction:column;gap:6px;padding:20px 18px;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);background:#fff;transition:.15s;}
.connect-choice-card:hover{border-color:var(--green);box-shadow:var(--shadow);}
.connect-choice-card strong{font-size:14.5px;}
.connect-choice-card span{font-size:12px;color:var(--muted);line-height:1.5;}
.connect-choice-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#dff3ec;color:var(--green2);font-size:17px;margin-bottom:2px;}
@media(max-width:640px){.connect-choice-grid{grid-template-columns:1fr;}}

/* ---------- Connect: repeatable household-member rows ---------- */
.hh-row{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px;background:#fbfcfc;position:relative;}
.hh-row-remove{position:absolute;top:10px;right:10px;background:none;border:0;color:var(--red);font-weight:700;
  font-size:12px;cursor:pointer;padding:2px 6px;}
.hh-search-results{border:1px solid var(--line);border-radius:8px;margin-top:4px;background:#fff;max-height:160px;
  overflow-y:auto;display:none;}
.hh-search-results div{padding:8px 11px;font-size:12.5px;cursor:pointer;border-bottom:1px solid #f0f3f2;}
.hh-search-results div:last-child{border-bottom:0;}
.hh-search-results div:hover{background:#eefaf5;}
.hh-picked{display:none;align-items:center;justify-content:space-between;background:#eefaf5;border:1px solid #a3d9c6;
  border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--green2);font-weight:600;margin-top:4px;}
.hh-picked button{background:none;border:0;color:var(--red);font-weight:700;cursor:pointer;font-size:11px;}

/* ---------- Connect: redemption code display + connect card ---------- */
.redemption-code{font-family:ui-monospace,Consolas,monospace;font-size:32px;font-weight:700;letter-spacing:.12em;
  color:var(--green2);background:#eefaf5;border:2px dashed #a3d9c6;border-radius:12px;padding:18px;text-align:center;
  margin:16px 0;}
.connect-link-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.connect-link-row input{flex:1;min-width:200px;font-family:ui-monospace,Consolas,monospace;font-size:12px;}
.qr-box{display:inline-block;background:#fff;padding:10px;border:1px solid var(--line);border-radius:10px;margin-top:12px;}