/* ===================================================================
   Additions for the PHP/MySQL portal (no inline styles: strict CSP)
   Loaded after app.css (the original demo styles).
   =================================================================== */
.pill.neutral{background:#eceeed;color:#5c6b64}
a.nav-item,a.btn,a.tb-icon,a.dh-btn{text-decoration:none}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.danger{background:var(--urgent)}.btn.danger:hover{background:#a63d26}
.btn.ghost.danger{background:transparent;color:var(--urgent);border-color:rgba(192,73,47,.4)}
.btn.ghost.danger:hover{background:var(--urgent-bg)}
.btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.loading .spin{display:inline-block}
.btn.loading{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* utilities */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex{display:flex}.items-center{align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.gap-1{gap:8px}.gap-2{gap:14px}.gap-3{gap:24px}.grow{flex:1;min-width:0}
.right{text-align:right}.center{text-align:center}.muted{color:var(--mut)}.small{font-size:.82rem}.xs{font-size:.74rem}.bold{font-weight:700}.nowrap{white-space:nowrap}
.w-full{width:100%}.maxw-sm{max-width:480px}.maxw-md{max-width:680px}.maxw-lg{max-width:900px}
.link-plain{color:var(--green-soft);font-weight:600}.link-plain:hover{color:var(--brass)}
.eyebrow{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:700;color:var(--mut)}
.divider{border-top:1px solid var(--line);margin:18px 0}
.hidden{display:none!important}

/* alerts / flashes */
.flashes{display:grid;gap:10px;margin-bottom:20px}
.alert{border-radius:12px;padding:13px 16px;font-size:.9rem;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start}
.alert.success{background:var(--ok-bg);color:#1f5a38;border-color:rgba(63,143,95,.25)}
.alert.error{background:var(--urgent-bg);color:#8a2f1b;border-color:rgba(192,73,47,.25)}
.alert.info{background:var(--info-bg);color:#264d78;border-color:rgba(58,110,165,.25)}
.alert.warn{background:var(--warn-bg);color:#7a5314;border-color:rgba(201,138,46,.3)}
.field .err{color:var(--urgent);font-size:.78rem;font-weight:600}
.field .hint{color:var(--mut);font-size:.78rem}
.inp.invalid{border-color:var(--urgent)}
.inp-money{position:relative}
.inp-money .sym{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut);font-weight:600}
.inp-money .inp{padding-left:32px;font-size:1.1rem;font-weight:600}
.pw-wrap{position:relative}
.pw-wrap .inp{padding-right:64px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.74rem;font-weight:700;color:var(--green-soft);padding:6px}
.meter{height:5px;border-radius:4px;background:var(--sand);overflow:hidden;margin-top:6px}
.meter>span{display:block;height:100%;width:0;background:var(--urgent);transition:width .25s,background .25s}
.meter>span.w1{width:25%}.meter>span.w2{width:50%;background:var(--warn)}.meter>span.w3{width:75%;background:var(--info)}.meter>span.w4{width:100%;background:var(--ok)}

/* auth pages */
.gate-card form{text-align:left}
.gate-card .gate-field .err{color:var(--urgent);font-size:.76rem;margin-top:4px;display:block;font-weight:600}
.gate-links{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:.84rem;flex-wrap:wrap}
.gate-links a{color:var(--green-soft);font-weight:600}
.gate-links a:hover{color:var(--brass)}
.gate-card .alert{text-align:left;margin-bottom:16px}
.gate-card.wide{max-width:540px}
.gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.gate-input select{flex:1;border:none;outline:none;background:none;padding:13px 0}
.gate-btn:disabled{opacity:.6;cursor:not-allowed}
.gate-btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.gate-btn.loading .spin{display:inline-block}
.gate-btn.loading{pointer-events:none;opacity:.85}
.gate-card .sub a{color:var(--green-soft);font-weight:600}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.sortable:hover{color:var(--green)}
.tbl th.sortable::after{content:"\2195";margin-left:6px;opacity:.35}
.tbl th.sorted-asc::after{content:"\25B2";opacity:.8}
.tbl th.sorted-desc::after{content:"\25BC";opacity:.8}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.total td{font-weight:700;color:var(--green);border-top:2px solid var(--line2)}
.tbl a.row-link{color:var(--green);font-weight:600}
.tbl a.row-link:hover{color:var(--brass)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;margin-bottom:18px}
.filters .field{margin-bottom:0}
.filters .actions{display:flex;gap:8px}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.search-box{position:relative;max-width:320px;flex:1;min-width:200px}
.search-box .inp{padding-left:38px}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:2}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border-radius:9px;border:1px solid var(--line2);font-size:.84rem;font-weight:600}
.pager a:hover{background:var(--sand)}
.pager .cur{background:var(--green);color:var(--ivory);border-color:var(--green)}
.empty .btn{margin-top:4px}

/* key/value list */
.kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;font-size:.9rem}
.kv>div{padding:10px 0;border-bottom:1px solid var(--line)}
.kv>div:nth-child(odd){color:var(--mut)}
.kv>div:nth-child(even){font-weight:600;word-break:break-word}

/* payment forms */
.pay-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.method-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.method-tabs a{border:1.5px solid var(--line2);border-radius:13px;padding:14px 16px;font-weight:600;display:flex;align-items:center;gap:10px;background:var(--white)}
.method-tabs a.active{border-color:var(--green);background:var(--green);color:var(--ivory)}
.method-tabs svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line2);border-radius:50px;padding:7px 14px;font-size:.82rem;font-weight:600;background:var(--white)}
.chip:hover{border-color:var(--brass)}
.card-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.card-fields .full{grid-column:1/-1}
.secure-note{font-size:.76rem;color:var(--mut);display:flex;gap:6px;align-items:center;justify-content:center;margin-top:14px}
.secure-note svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.dropzone{border:2px dashed var(--line2);border-radius:13px;padding:18px;text-align:center;color:var(--mut);font-size:.86rem}
.dropzone input{margin-top:8px;max-width:100%}
.summary-box{background:var(--cream);border-radius:14px;padding:18px 20px}
.summary-box .row{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem;gap:12px}
.summary-box .row.total{border-top:1px solid var(--line2);margin-top:6px;padding-top:12px;font-weight:700;font-size:1rem;color:var(--green)}

/* balance card extras */
.bc-split{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;position:relative}
.bc-split div{background:rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.bc-split small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brass-bright);font-weight:700}
.bc-split b{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600}
.balance-card .bc-status{position:relative;margin-top:10px}

/* admin */
.sidebar.admin{background:#12141d}
.role-tag{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.58rem;font-weight:700;background:var(--brass);color:var(--green-deep);padding:2px 8px;border-radius:50px;margin-left:6px}
.admin .content{max-width:1280px}
.stat-row.three{grid-template-columns:repeat(3,1fr)}
.stat .st-sub{font-size:.72rem;color:var(--mut);margin-top:2px}
.bars{width:100%;height:auto}
.bars .bar-c{fill:#444a63}.bars .bar-e{fill:#ed7a2e}
.bars text{font-size:10px;fill:#6f8579;font-family:'Archivo',sans-serif}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--mut);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.legend i.c{background:#444a63}.legend i.e{background:#ed7a2e}
.audit-json{font-family:Consolas,monospace;font-size:.74rem;color:var(--mut);word-break:break-all;max-width:320px}
.callout{border-left:4px solid var(--brass);background:var(--warn-bg);padding:12px 16px;border-radius:0 12px 12px 0;font-size:.88rem}
.attachment-preview{max-width:100%;border:1px solid var(--line);border-radius:12px}
.tabs-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs-row a{padding:8px 16px;border-radius:50px;border:1.5px solid var(--line2);font-size:.84rem;font-weight:600;background:var(--white)}
.tabs-row a.active{background:var(--green);color:var(--ivory);border-color:var(--green)}

/* confirm dialog (built by app.js) */
.modal.sm{max-width:440px}
.modal-body .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal-body textarea.inp{min-height:80px}

/* receipt-ish / stat inside client */
.status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

@media(max-width:920px){
  .pay-grid{grid-template-columns:1fr}
  .stat-row.three{grid-template-columns:1fr 1fr}
  .gate-grid{grid-template-columns:1fr}
  .bc-split{grid-template-columns:1fr}
  .tbl td,.tbl th{padding-left:10px;padding-right:10px}
  .hide-mobile{display:none}
}
@media(max-width:520px){
  .stat-row.three{grid-template-columns:1fr}
  .card-fields{grid-template-columns:1fr}
  .card{padding:18px}
  .gate-card{padding:30px 22px}
  .method-tabs{grid-template-columns:1fr}
}
@media print{.sidebar,.topbar,.btn,.filters,.tabs-row{display:none!important}#app{display:block}.content{padding:0}}

/* brand logo (white artwork) sits on a dark banner */
.gate-logo{display:block;width:100%;max-width:320px;height:auto;margin:-8px auto 22px;background:var(--green-deep);padding:12px 18px;border-radius:14px;box-sizing:border-box}
.side-brand img{height:auto;width:100%;max-width:190px;border-radius:0}
a.gate-btn{text-decoration:none}

.pre{white-space:pre-line}
#msg.alert{margin-bottom:16px}
.gate-card .alert.hidden{display:none}

#content.loading-page{opacity:.55;transition:opacity .15s}

/* sidebar: the menu scrolls when it is taller than the screen (footer stays pinned) */
.sidebar{overflow:hidden}
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:-8px;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
.side-brand,.side-foot{flex:0 0 auto}
@media (max-height:760px){.nav-item{padding:8px 12px}.nav-group-label{padding:10px 12px 6px}.side-brand{padding-bottom:14px;margin-bottom:10px}}

/* ---------- animated payment card ---------- */
.cc-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 22px;perspective:1200px}
.cc{position:relative;width:100%;max-width:380px;aspect-ratio:1.586;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.cc.flipped{transform:rotateY(180deg)}
.cc.pop{animation:ccPop .5s ease}
@keyframes ccPop{40%{transform:scale(1.04)}}
.cc-face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0c2a5b 0%,#0b1a33 55%,#1b1e2b 100%);box-shadow:0 22px 40px -18px rgba(12,26,51,.65)}
.cc-glow{position:absolute;width:70%;height:90%;right:-15%;bottom:-35%;border-radius:50%;background:radial-gradient(circle,rgba(237,122,46,.55),transparent 65%);animation:ccGlow 6s ease-in-out infinite alternate}
@keyframes ccGlow{to{transform:translate(-18%,-12%) scale(1.15)}}
.cc-front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);transform:translateX(-100%);animation:ccShine 5s ease-in-out infinite}
@keyframes ccShine{55%,100%{transform:translateX(100%)}}
.cc-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center}
.cc-chip{width:46px;height:34px;border-radius:7px;background:linear-gradient(135deg,#e9c46a,#b8862f)}
.cc-brand{font-family:'Archivo Narrow',sans-serif;font-weight:700;letter-spacing:.14em;font-size:.82rem}
.cc-num{position:absolute;left:24px;right:24px;top:47%;font-family:Consolas,'Courier New',monospace;font-size:clamp(1rem,4.4vw,1.32rem);letter-spacing:.12em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.cc-row{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:12px;font-family:Consolas,'Courier New',monospace;font-size:.82rem;letter-spacing:.08em}
.cc-row small{display:block;font-family:'Archivo',sans-serif;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.cc-row span{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-back{transform:rotateY(180deg);background:linear-gradient(135deg,#0c2a5b 0%,#0b1a33 60%,#1c2b14 100%)}
.cc-stripe{position:absolute;top:26px;left:0;right:0;height:46px;background:#06101f}
.cc-sig{position:absolute;top:96px;left:24px;right:24px;height:38px;border-radius:6px;background:repeating-linear-gradient(45deg,#f4f4f4 0 6px,#e7e7e7 6px 12px);display:flex;align-items:center;justify-content:flex-end;padding:0 14px}
.cc-sig span{background:#fff;color:#111;font-family:Consolas,monospace;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:.2em}
.cc-back-note{position:absolute;right:26px;top:142px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.cc.brand-visa .cc-front{background:linear-gradient(135deg,#0c2a5b,#0b1a33 60%,#1b1e2b)}
.cc.brand-mastercard .cc-front{background:linear-gradient(135deg,#2b1c3f,#1b1e2b 60%,#3a1d10)}
.cc.brand-american-express .cc-front{background:linear-gradient(135deg,#0e4d5c,#0b2a33 60%,#1b1e2b)}
.cc.brand-discover .cc-front{background:linear-gradient(135deg,#3b2a12,#1b1e2b 60%,#4a2a10)}
.link-btn{color:#0c4a9e;font-weight:600;text-decoration:underline;text-underline-offset:4px;font-size:.92rem;padding:2px 4px}
.link-btn:hover{color:var(--brass)}
@media (prefers-reduced-motion:reduce){.cc{transition:none}.cc-glow,.cc-front::after{animation:none}}

/* ---------- owner directory / approvals ---------- */
.pill.role-admin{background:#fde7d7;color:#b5531a}
.pill.role-owner{background:var(--info-bg);color:var(--info)}
.pill.you{background:#fde7d7;color:#b5531a;margin-left:6px}
.row-actions{position:relative;display:inline-flex;gap:6px;align-items:center}
.btn.icon-only{padding:8px 10px}
.btn.icon-only svg,.row-actions .btn svg{width:16px;height:16px}
.row-menu{position:fixed;z-index:60;min-width:250px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;text-align:left}
.row-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:9px;font-size:.9rem;color:var(--ink);text-align:left}
.row-menu button:hover{background:var(--cream)}
.row-menu svg{width:17px;height:17px;stroke:var(--green-soft);fill:none;stroke-width:1.8;flex:0 0 17px}
.card-head.wrap{flex-wrap:wrap}
.diag{display:grid;gap:10px}
.diag-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:.9rem}
.modal-ov.open{opacity:1;visibility:visible}

/* ---------- use the full page width ---------- */
.content,.admin .content{max-width:none}
.content{padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}

/* ---------- Pay Dues ---------- */
.dues-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.dues-grid .balance-card{display:flex;flex-direction:column;min-height:300px}
.dues-grid .bc-actions{margin-top:auto;padding-top:22px;flex-wrap:wrap}
.btn.ghost.light{color:var(--ivory);border-color:rgba(255,255,255,.35)}
.btn.ghost.light:hover{background:rgba(255,255,255,.12)}
#pay-options .method-tabs a{cursor:pointer}
#pay-area .pay-grid{margin-top:4px}
#pay-area>.card,#pay-area .pay-grid>.card{box-shadow:none;border-color:var(--line)}
@media(max-width:920px){.dues-grid{grid-template-columns:1fr}}

/* card form: animated card on the left, fields on the right (stacks on small screens) */
@media(min-width:1000px){
  #card-form{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:0 36px;align-items:start}
  #card-form>*{grid-column:2}
  #card-form>.cc-wrap{grid-column:1;grid-row:1/span 6;margin-top:6px;position:sticky;top:90px}
}