/* ================================================================
   components.css  —  All reusable UI components
   ✏️  Sections:
       PANELS, TWO-COL, TOOLBAR, EXPENSE ITEM, MEMBER ROW,
       CAT BARS, SETTLE, MODAL, MEMBER CHECKLIST, SPLIT TYPE,
       ANALYTICS, BUDGET RING, INFO BOXES, DAY GROUP TOGGLE
================================================================ */
/* PANELS */
.pnl{background:var(--ink2);border:1px solid var(--rim);border-radius:var(--r);overflow:hidden;margin-bottom:10px;}
.ph{padding:11px 14px;border-bottom:1px solid var(--rim);display:flex;justify-content:space-between;align-items:center;gap:8px;}
.pt{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;letter-spacing:-.2px;}
.pb{padding:12px 14px;}

/* TWO-COL: single col on mobile, two-col on desktop */
.two{display:flex;flex-direction:column;gap:0;}
@media(min-width:768px){.two{display:grid;grid-template-columns:1fr 320px;gap:12px;}}

/* TOOLBAR / SEARCH */
.tbar{padding:8px 14px 0;display:flex;gap:7px;align-items:center;}
.si{flex:1;padding:8px 11px;background:var(--ink3);border:1px solid var(--rim);border-radius:var(--rsm);color:var(--txt);font-size:13px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;-webkit-appearance:none;}
.si:focus{border-color:rgba(124,95,255,.5);}
.si::placeholder{color:var(--sub);}
.fsel{padding:8px 28px 8px 10px;background:var(--ink3);border:1px solid var(--rim);border-radius:var(--rsm);color:var(--txt);font-size:12px;font-family:'Plus Jakarta Sans',sans-serif;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b90' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;}

/* EXPENSE ITEM */
.ei{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--rim3);}
.ei:last-child{border-bottom:none;}
.eico{width:38px;height:38px;border-radius:10px;background:var(--ink3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;border:1px solid var(--rim);}
.en{font-weight:700;font-size:13px;line-height:1.3;}
.em{font-size:11px;color:var(--sub2);margin-top:2px;}
.ea{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;color:var(--lime);}
.eper{font-size:10px;color:var(--sub2);}
.ebtns{display:flex;gap:4px;margin-top:5px;}

/* MEMBER ROW */
.mr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rim3);}
.mr:last-child{border-bottom:none;}
.mav{display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;flex-shrink:0;color:#000;}
.mname{font-weight:700;font-size:13px;}
.msub{font-size:11px;color:var(--sub2);}
.pos{color:var(--green);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;}
.neg{color:var(--rose);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;}

/* CAT BARS */
.catrow{margin-bottom:10px;}
.catrow:last-child{margin-bottom:0;}
.cattop{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;font-weight:600;}
.catbar{height:4px;background:var(--ink5);border-radius:2px;overflow:hidden;}
.catfill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--lime));}

/* SETTLE */
.stlc{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;background:var(--ink3);border:1px solid var(--rim);margin-bottom:8px;transition:opacity .2s;gap:8px;}
.stlc.done{opacity:.3;}
.stlarr{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.stlamt{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;color:var(--lime);}
.aline{width:28px;height:2px;background:linear-gradient(90deg,var(--violet),var(--lime));border-radius:2px;position:relative;flex-shrink:0;}
.aline::after{content:'▶';position:absolute;right:-7px;top:-7px;font-size:8px;color:var(--lime);}

/* MODAL */
.modal{position:fixed;inset:0;z-index:20000;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:none;align-items:flex-end;justify-content:center;padding:0;}
@media(min-width:500px){.modal{align-items:center;padding:20px;}}
.modal.on{display:flex;}
.mbox{background:var(--ink2);border:1px solid var(--rim);border-top-left-radius:20px;border-top-right-radius:20px;padding:24px 20px;padding-bottom:calc(24px + var(--safe-bot));width:100%;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slideUp .22s ease;}
@media(min-width:500px){.mbox{border-radius:18px;max-width:440px;max-height:90dvh;padding:24px;}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.mbox::before{content:'';display:block;width:36px;height:4px;background:var(--rim);border-radius:2px;margin:0 auto 18px;}
@media(min-width:500px){.mbox::before{display:none;}}
.mtitle{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.4px;margin-bottom:16px;}
.dvd{height:1px;background:var(--rim);margin:12px 0;}

/* MEMBER CHECKLIST */
.mck-list{border:1px solid var(--rim);border-radius:var(--rsm);overflow:hidden;margin-bottom:10px;max-height:160px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mck{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--rim3);}
.mck:last-child{border-bottom:none;}
.mck.on{background:rgba(124,95,255,.07);}
.mck-cb{width:16px;height:16px;border-radius:4px;border:2px solid var(--rim);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s;}
.mck.on .mck-cb{background:var(--violet);border-color:var(--violet);}
.mck.on .mck-cb::after{content:'✓';font-size:9px;color:#fff;font-weight:900;}
.mck-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#000;flex-shrink:0;}

/* SPLIT TYPE */
.sptog{display:flex;gap:5px;margin-bottom:10px;}
.spopt{flex:1;padding:8px 5px;border-radius:7px;border:1px solid var(--rim);background:var(--ink3);color:var(--sub);font-weight:700;font-size:12px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .15s;}
.spopt.on{border-color:rgba(124,95,255,.5);background:rgba(124,95,255,.1);color:#c0b0ff;}

/* ANALYTICS */
.chart-wrap{height:110px;display:flex;align-items:flex-end;gap:2px;overflow:hidden;}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.bfill{width:100%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--violet),rgba(124,95,255,.3));min-height:2px;position:relative;}
.btip{display:none;position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--ink4);border:1px solid var(--rim);border-radius:5px;padding:2px 6px;font-size:9px;font-weight:700;white-space:nowrap;z-index:5;pointer-events:none;color:var(--txt);}
.bfill:hover .btip,.bfill:active .btip{display:block;}
.blbl{font-size:8px;color:var(--sub);font-weight:600;text-align:center;}

/* BUDGET RING */
.ring-wrap{display:flex;align-items:center;gap:16px;}
.ring-pct{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:800;letter-spacing:-1px;}
.ring-lbl{font-size:11px;color:var(--sub2);margin-top:2px;}

/* INFO BOXES */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.ibox{background:var(--ink3);border:1px solid var(--rim);border-radius:9px;padding:11px;text-align:center;}
.ibox-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--sub);margin-bottom:3px;}
.ibox-v{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.4px;}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--rim3);font-size:12px;}
.row:last-child{border-bottom:none;}
.rl{color:var(--sub2);}
.rv{font-weight:700;}
.badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700;}
.bg-g{background:rgba(34,208,122,.12);color:var(--green);}
.bg-r{background:rgba(255,82,115,.12);color:var(--rose);}
.bg-v{background:rgba(124,95,255,.12);color:#c0b0ff;}
.empty{text-align:center;padding:28px;color:var(--sub2);}
.ei-ico{font-size:30px;margin-bottom:8px;opacity:.4;}
.toast{position:fixed;bottom:calc(24px + var(--safe-bot));left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink2);border:1px solid var(--rim);border-radius:40px;padding:10px 18px;font-weight:700;font-size:13px;z-index:99999;transition:transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ── ADMIN ── */
.trip-card{
  background:var(--ink2);border:1px solid var(--rim);border-radius:var(--r);
  overflow:hidden;margin-bottom:12px;transition:border-color .18s;
}
.trip-card:hover{border-color:rgba(124,95,255,.35);}
.trip-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;cursor:pointer;user-select:none;gap:10px;
}
.trip-card-head:active{background:var(--ink3);}
.trip-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.4px;}
.trip-card-meta{font-size:11px;color:var(--sub2);margin-top:2px;}
.trip-code-tag{
  background:rgba(124,95,255,.15);border:1px solid rgba(124,95,255,.3);
  border-radius:20px;padding:4px 12px;font-size:12px;color:#c0b0ff;
  font-weight:800;letter-spacing:1px;cursor:pointer;flex-shrink:0;
  font-family:'Bricolage Grotesque',sans-serif;
  transition:all .15s;
}
.trip-code-tag:hover{background:rgba(124,95,255,.28);}
.trip-code-tag:active{transform:scale(.95);}
.trip-card-body{
  padding:0 16px 14px;border-top:1px solid var(--rim);
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.trip-card-body.hidden{display:none;}
.adm-mem-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--rim3);
}
.adm-mem-row:last-child{border-bottom:none;}
.adm-stat-row{display:flex;gap:8px;flex-wrap:wrap;padding:10px 0 4px;}
.adm-stat{background:var(--ink3);border:1px solid var(--rim);border-radius:8px;padding:8px 12px;flex:1;min-width:80px;}
.adm-stat-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--sub);margin-bottom:3px;}
.adm-stat-v{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;}
.adm-chevron{font-size:12px;color:var(--sub);transition:transform .2s;}
.adm-chevron.open{transform:rotate(180deg);}


/* ── DAY GROUP TOGGLE ── */
.day-group { margin-bottom: 8px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rim); }
.day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; cursor: pointer; user-select: none;
  background: var(--ink3); transition: background .15s;
}
.day-header:active { background: var(--ink4); }
.day-header-left { display: flex; align-items: center; gap: 10px; }
.day-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: -.2px;
}
.day-badge {
  font-size: 10px; font-weight: 700; color: var(--sub2);
  background: var(--ink4); border-radius: 20px; padding: 2px 8px;
}
.day-total {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px; font-weight: 800; color: var(--lime);
}
.day-chevron { font-size: 11px; color: var(--sub); transition: transform .2s; }
.day-chevron.open { transform: rotate(180deg); }
.day-body { background: var(--ink2); }
.day-body.collapsed { display: none; }

/* ── DAY GROUP TOGGLE ── */
.day-group{margin-bottom:8px;border-radius:var(--r);overflow:hidden;border:1px solid var(--rim);}
.day-header{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;cursor:pointer;user-select:none;
  background:var(--ink3);transition:background .15s;}
.day-header:active{background:var(--ink4);}
.day-header-left{display:flex;align-items:center;gap:10px;}
.day-label{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;letter-spacing:-.2px;}
.day-badge{font-size:10px;font-weight:700;color:var(--sub2);background:var(--ink4);border-radius:20px;padding:2px 8px;}
.day-total{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;color:var(--lime);}
.day-chevron{font-size:11px;color:var(--sub);transition:transform .2s;}
.day-chevron.open{transform:rotate(180deg);}
.day-body{background:var(--ink2);}
.day-body.collapsed{display:none;}