/* =====================================================================
   Member portal + admin area — mobile first.
   Phones: top bar, bottom tabs, slide-out menu. ≥1024px: fixed sidebar.
   Loaded after style.css and only on portal pages.
   ===================================================================== */

.portal{
  --side-w:264px;
  --top-h:56px;
  --tabs-h:64px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --side-bg:#0B1220;
  --side-text:#AEBBD0;
  --side-hover:rgba(255,255,255,.06);
  background:var(--bg-soft);
  min-height:100vh;
  padding-bottom:0;
}
.portal .skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:700;}
.portal .skip-link:focus{left:8px;}
.portal :focus-visible{outline:3px solid rgba(0,133,74,.45);outline-offset:2px;}

.icon-btn{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:0;background:transparent;color:inherit;cursor:pointer;flex:none;
}
.icon-btn:hover{background:rgba(11,18,32,.06);}
.ico{width:22px;height:22px;flex:none;}

/* ------------------------------------------------------------ app shell */
.app{min-height:100vh;}
.app-body{min-width:0;display:flex;flex-direction:column;min-height:100vh;}

/* top bar (phones and tablets) */
.app-top{
  position:sticky;top:0;z-index:30;height:var(--top-h);
  display:flex;align-items:center;gap:10px;padding:0 6px 0 12px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.top-brand img{width:34px;height:34px;border-radius:10px;}
.top-title{flex:1;min-width:0;font-weight:800;font-size:.92rem;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-title small{display:block;font-size:.7rem;font-weight:600;color:var(--text-mute);}

/* main column */
.app-main{
  width:100%;max-width:1120px;margin:0 auto;flex:1;
  padding:18px 16px calc(var(--tabs-h) + var(--safe-b) + 28px);
}
.app-main.portal-narrow{max-width:640px;}
.app-foot{
  text-align:center;color:var(--text-mute);font-size:.78rem;
  padding:0 16px calc(var(--tabs-h) + var(--safe-b) + 16px);margin-top:-14px;
}
.app-foot a,.auth-foot a{color:var(--green);font-weight:600;}

/* bottom tab bar */
.app-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  height:calc(var(--tabs-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(11,18,32,.06);
}
.app-tabs .tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;font:inherit;cursor:pointer;
  color:var(--text-mute);font-size:.68rem;font-weight:700;position:relative;min-width:0;
}
.app-tabs .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;}
.app-tabs .tab.is-active{color:var(--green);}
.app-tabs .tab.is-active::before{
  content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 4px 4px;background:var(--green);
}

/* slide-out menu (becomes the sidebar on desktop) */
.app-side{
  position:fixed;inset:0 auto 0 0;z-index:60;width:min(86vw,var(--side-w));
  display:flex;flex-direction:column;background:var(--side-bg);color:var(--side-text);
  transform:translateX(-102%);transition:transform .26s ease;visibility:hidden;
  padding-bottom:var(--safe-b);
}
.nav-open .app-side{transform:none;visibility:visible;box-shadow:24px 0 60px rgba(0,0,0,.3);}
.app-scrim{position:fixed;inset:0;z-index:55;background:rgba(11,18,32,.5);}
.nav-open{overflow:hidden;}
@media (prefers-reduced-motion:reduce){.app-side{transition:none;}}

.side-head{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 10px 16px;}
.side-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:.95rem;line-height:1.2;}
.side-brand img{width:38px;height:38px;border-radius:10px;}
.side-brand small,.auth-brand small{display:block;font-size:.72rem;font-weight:600;color:#8FA0B8;}
.side-close{color:#fff;}
.side-close:hover{background:var(--side-hover);}

.side-nav{flex:1;overflow-y:auto;padding:4px 10px 16px;overscroll-behavior:contain;}
.side-group{margin:16px 10px 6px;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5F7089;}
.side-link{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;
  color:var(--side-text);font-weight:600;font-size:.92rem;
}
.side-link:hover{background:var(--side-hover);color:#fff;}
.side-link.is-active{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(0,133,74,.35);}
.side-link.is-quiet{color:#FDA29B;}
.side-link.is-quiet:hover{background:rgba(253,162,155,.08);}

.side-user{display:flex;align-items:center;gap:10px;margin:0 10px 12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);}
.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;background:var(--gold);color:#241D06;font-weight:800;}
.side-user-text{min-width:0;line-height:1.3;}
.side-user-text b{display:block;color:#fff;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-user-text small{color:#8FA0B8;font-size:.72rem;}

/* ------------------------------------------------------ sign-in pages */
.portal-auth{display:flex;flex-direction:column;}
.auth-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;background:var(--ink);
}
.auth-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:.95rem;line-height:1.2;}
.auth-brand img{width:36px;height:36px;border-radius:10px;}
.auth-links{display:flex;gap:4px;}
.auth-links a{padding:10px 12px;border-radius:10px;color:#C7D2E3;font-size:.85rem;font-weight:700;}
.auth-links a:hover,.auth-links a[aria-current]{background:rgba(255,255,255,.08);color:#fff;}
.auth-main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:28px 16px 32px;}
.auth-foot{text-align:center;color:var(--text-mute);font-size:.78rem;padding:0 16px 24px;}

/* ------------------------------------------------------ page content */
.page-head{margin-bottom:18px;}
.portal h1{font-size:1.45rem;line-height:1.2;margin:0 0 4px;word-break:break-word;}
.portal-lead{color:var(--text-mute);font-size:.92rem;margin:0;}
.portal .notice{border-radius:14px;}

.portal-card{
  container:card / inline-size;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:18px 16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(11,18,32,.04);
}
.portal-card h2{font-size:1.02rem;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
details.portal-card > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:28px;}
details.portal-card > summary::-webkit-details-marker{display:none;}
details.portal-card > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--text-mute);border-bottom:2px solid var(--text-mute);transform:rotate(45deg);transition:transform .2s;margin-right:4px;}
details.portal-card[open] > summary::after{transform:rotate(-135deg);}

/* forms: 16px text so phones don't zoom, 48px targets */
.portal .form-grid{grid-template-columns:1fr;gap:16px;}
.portal .field{min-width:0;}
.portal .field input,.portal .field select,.portal .field textarea{font-size:16px;min-height:48px;border-radius:12px;width:100%;max-width:100%;}
.portal .field textarea{min-height:auto;}
.portal .field input[type=checkbox],.portal .field input[type=radio]{min-height:0;width:20px;height:20px;flex:none;accent-color:var(--green);}
.portal .checkline{font-size:.9rem;line-height:1.5;padding:6px 0;}
.portal .checkline input{margin-top:1px;}

/* buttons: comfortable to tap, full width in action rows on phones */
.portal .btn{min-height:46px;border-radius:12px;box-shadow:none;}
.portal .btn-primary:hover{transform:none;}
.portal .btn-sm{padding:10px 16px;font-size:.88rem;}
.portal .about-actions{gap:10px;margin-top:16px;}
.portal .about-actions > .btn,.portal .about-actions > button.btn{flex:1 1 auto;justify-content:center;text-align:center;}
.portal .btn-ghost{display:inline-flex;align-items:center;min-height:36px;padding:0 4px;background:none;border:0;font:inherit;font-size:.85rem;font-weight:700;color:var(--green);cursor:pointer;}
.portal .mt-24{margin-top:18px;}

/* list pages: toolbar, filter chips, search */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.toolbar .btn{flex:1 1 100%;}
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--ink-soft);
}
.chip b{background:#B42318;color:#fff;border-radius:100px;padding:0 7px;font-size:.72rem;line-height:1.6;}
.chip:hover{border-color:var(--green);color:var(--green);}
.chip.is-on{background:var(--green-light);border-color:rgba(0,133,74,.35);color:var(--green-dark);}
.filter-card{padding:14px 14px 10px;}
.search-row{display:flex;gap:8px;}
.search-row input{
  flex:1;min-width:0;min-height:48px;font-size:16px;font-family:inherit;padding:0 14px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
}
.search-row input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-light);}
.search-row .btn{flex:none;}
.filter-more{margin-top:10px;}
.filter-more > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;
  font-weight:700;font-size:.88rem;color:var(--green);
}
.filter-more > summary::-webkit-details-marker{display:none;}
.filter-more > summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;}
.filter-more[open] > summary::before{transform:rotate(45deg);}
.export-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:.82rem;color:var(--text-mute);}

.chip b.n{background:var(--bg-soft);color:var(--text-mute);}
.chip.is-on b.n{background:#fff;color:var(--green-dark);}
.filter-grid{margin-top:14px;}

/* table contents */
.row-title{color:var(--green);font-weight:700;}
.row-title:hover{text-decoration:underline;}
.muted{color:var(--text-mute);}
.nowrap{white-space:nowrap;}
.empty{color:var(--text-mute);padding:8px 0;}
.empty a{color:var(--green);font-weight:700;}
.code-link{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--ink-soft);}
.code-link:hover{color:var(--green);}
.cell-check input,.list-select-page input{width:22px;height:22px;accent-color:var(--green);}
.portal-table tr.is-selected td{background:var(--green-light)!important;}
.portal-table tr.is-selected{border-radius:12px;}
.list-select-page{margin:0 0 6px;padding:4px 0 10px;border-bottom:1px solid var(--line);}
@container card (min-width:720px){ .list-select-page{display:none!important;} }

/* bulk action bar: floats above the tab bar (bottom of the screen on desktop) once something is ticked */
.bulk-bar{
  position:fixed;z-index:45;left:10px;right:10px;bottom:calc(var(--tabs-h) + var(--safe-b) + 8px);max-width:1080px;margin:0 auto;
  display:flex;flex-direction:column;gap:10px;padding:12px;
  background:var(--ink);color:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(11,18,32,.35);
}
.bulk-bar[hidden]{display:none;}
.bulk-info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:.88rem;}
.bulk-count b{font-size:1rem;color:var(--gold);}
.bulk-link{background:none;border:0;padding:6px 0;font:inherit;font-size:.84rem;font-weight:700;color:#9FE3BF;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.bulk-link[hidden]{display:none;}
.bulk-controls{display:flex;flex-wrap:wrap;gap:8px;}
.bulk-controls select,.bulk-field select,.bulk-field input{
  flex:1 1 180px;min-height:44px;min-width:0;font:inherit;font-size:16px;padding:0 12px;border-radius:10px;border:0;background:#fff;color:var(--ink);
}
.bulk-field{display:flex;flex:1 1 180px;}
.bulk-field[hidden]{display:none;}
.bulk-controls .btn{flex:0 0 auto;min-height:44px;}
.bulk-bar.is-busy{opacity:.7;pointer-events:none;}
body.has-bulk .app-main{padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 200px);}
.bulk-bar{animation:bulk-in .18s ease-out;}
@keyframes bulk-in{from{transform:translateY(12px);opacity:0;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.bulk-bar{animation:none;}}
.bulk-bar.is-busy .btn::after{content:"…";}
@media (min-width:1024px){
  .bulk-bar{left:calc(var(--side-w) + 32px);right:32px;bottom:18px;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px;}
  body.has-bulk .app-main{padding-bottom:110px;}
  .bulk-controls{flex-wrap:nowrap;}
  .bulk-controls select{flex:0 1 240px;}
  .bulk-field{flex:0 1 220px;}
}
/* in card mode the tick box sits top-right and the next cell is the row title */
.portal-table td.cell-check{float:right;padding:2px 0 0 12px!important;}
.portal-table td.cell-check::before{display:none!important;}
.portal-table td.cell-check + td[data-label]{padding-left:0;font-size:1rem;margin-bottom:4px;}
.portal-table td.cell-check + td[data-label]::before{display:none;}

/* sortable headers */
.th-sort{display:inline-flex;align-items:center;gap:4px;color:inherit;white-space:nowrap;}
.th-sort:hover{color:var(--green);}
.th-sort.is-current{color:var(--ink);}
.th-arrow{font-size:.8rem;opacity:.45;}
.th-sort.is-current .th-arrow{opacity:1;color:var(--green);}

/* pagination */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.pager-count{font-size:.84rem;color:var(--text-mute);}
.pager-count b{color:var(--ink);}
.pager-links{display:flex;flex-wrap:wrap;gap:4px;}
.pg{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-weight:700;font-size:.88rem;color:var(--ink-soft);}
a.pg:hover{border-color:var(--green);color:var(--green);}
.pg.is-current{background:var(--green);border-color:var(--green);color:#fff;}
.pg.is-disabled{opacity:.35;}
.pg-gap{display:inline-grid;place-items:center;min-width:24px;color:var(--text-mute);}
@media (max-width:480px){
  .pager{justify-content:center;text-align:center;}
  .pager-links a.pg:not(.is-current):not([aria-label^="Previous"]):not([aria-label^="Next"]):not([aria-label^="First"]):not([aria-label^="Last"]){display:none;}
  .pg-gap{display:none;}
}

@container card (min-width:720px){ .portal .form-grid.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@container card (min-width:980px){ .portal .form-grid.filter-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }

/* stats */
.portal .grid-4{grid-template-columns:repeat(2,1fr);gap:12px;}
.portal .stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(11,18,32,.04);}
.portal .stat-card b{font-size:1.6rem;line-height:1.1;margin-bottom:4px;}
.portal .stat-card span{font-size:.8rem;line-height:1.35;display:block;}

/* details lists */
.portal .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;}
.portal .dl-grid > div{min-width:0;}
.portal .dl-grid dd{word-break:break-word;}

.portal .pill{white-space:nowrap;}
.portal code{background:var(--bg-soft);padding:2px 6px;border-radius:6px;font-size:.85em;word-break:break-all;}

/* tables → stacked cards on phones (labels come from the header row, see layout.php) */
.portal-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.portal-table,.portal-table tbody,.portal-table tr,.portal-table td{display:block;}
.portal-table tr.head-row,.portal-table tr:has(> th){display:none;}
.portal-table tr{padding:14px 0;border-bottom:1px solid var(--line);}
.portal-table tr:first-child,.portal-table tr.head-row + tr{padding-top:0;}
.portal-table tr:last-child{border-bottom:0;padding-bottom:0;}
.portal-table td{padding:3px 0;border:0;overflow-wrap:anywhere;white-space:normal!important;max-width:none!important;}
/* label on the left, value (which may wrap onto several lines) on the right */
.portal-table td[data-label]{position:relative;padding-left:min(36%,130px);min-height:24px;}
.portal-table td[data-label]::before{
  content:attr(data-label);position:absolute;left:0;top:6px;width:calc(min(36%,130px) - 10px);
  font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);line-height:1.3;
}
.portal-table td[data-label=""]{padding-left:0;}
.portal-table td[data-label=""]::before{display:none;}
/* the first cell is the row's title: no label, a little larger */
.portal-table td[data-label]:first-child{padding-left:0;font-size:1rem;margin-bottom:4px;}
.portal-table td[data-label]:first-child::before{display:none;}
.portal-table.no-head tr{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;}
.portal-table.no-head td:first-child{flex:1 1 100%;font-weight:600;}
.portal-table.no-head td{white-space:normal!important;}
.portal-table td form{display:flex!important;flex-wrap:wrap;gap:2px 12px;}

/* ------------------------------------------------------------ ≥640px */
@media (min-width:640px){
  .app-main{padding-left:24px;padding-right:24px;}
  .portal-card{padding:22px 24px;}
  .portal .form-grid{grid-template-columns:1fr 1fr;gap:18px 20px;}
  .portal .grid-4{grid-template-columns:repeat(4,1fr);gap:16px;}
  .portal .dl-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
  .portal .about-actions > .btn,.portal .about-actions > button.btn{flex:0 0 auto;}
  .toolbar .btn{flex:0 0 auto;margin-right:6px;}
  .filter-card{padding:18px 20px 14px;}
  .portal h1{font-size:1.7rem;}

}

/* -------- real tables once the card itself is wide enough (container query) */
@container card (min-width:720px){
  .portal-table{display:table;}
  .portal-table tbody{display:table-row-group;}
  .portal-table tr,.portal-table tr.head-row,.portal-table tr:has(> th),.portal-table.no-head tr{display:table-row;padding:0;}
  .portal-table th,.portal-table td,.portal-table td[data-label]{display:table-cell;padding:12px;border-bottom:1px solid var(--line);vertical-align:top;}
  .portal-table td[data-label]:first-child,.portal-table td.cell-check + td[data-label]{padding-left:12px;font-size:.9rem;margin:0;}
  .portal-table td.cell-check{float:none;padding:12px 4px 12px 12px!important;width:36px;}
  .portal-table td{overflow-wrap:break-word;}
  .portal-table td[data-label]::before{display:none;}
  .portal-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);text-align:left;background:var(--bg-soft);}
  .portal-table th:first-child{border-radius:10px 0 0 10px;}
  .portal-table th:last-child{border-radius:0 10px 10px 0;}
  .portal-table tr:last-child td{border-bottom:0;}
  .portal-table tbody tr:hover td{background:#FAFBFC;}
  .portal-table.no-head td:first-child{font-weight:600;}
}

/* ------------------------------------------------ ≥1024px: sidebar */
@media (min-width:1024px){
  .app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);}
  .app-side{position:sticky;top:0;height:100vh;width:auto;transform:none;visibility:visible;transition:none;}
  .nav-open{overflow:auto;}
  .app-scrim,.side-close,.app-top,.app-tabs{display:none!important;}
  .app-main{padding:36px 40px 40px;}
  .app-foot{padding:0 40px 24px;margin-top:0;}
  .page-head{margin-bottom:24px;}
  .portal h1{font-size:1.9rem;}
}

@media print{
  .app-side,.app-top,.app-tabs,.app-foot{display:none!important;}
  .app{display:block;}
}