/* ==========================================================================
   DIM member portal & admin console.
   Layers on top of dim.css — same tokens, denser layout: this is a work
   surface, not a marketing page.
   ========================================================================== */

body.portal{background:var(--tint);color:var(--body)}

/* ---------- nav ---------- */
.pnav{background:var(--navy-900);position:sticky;top:0;z-index:80;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.portal--admin .pnav{background:linear-gradient(90deg,#101033 0%,#33327a 100%)}
.pnav__inner{max-width:1220px;margin-inline:auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:18px}
.pnav__brand{display:flex;align-items:center;gap:12px;flex:none}
.pnav__tag{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.pnav__links{margin-left:auto;display:flex;align-items:center;gap:6px}
.pnav__links a{padding:8px 12px;border-radius:999px;font-size:15px;font-weight:600;color:#c9c9e4;white-space:nowrap}
.pnav__links a:hover{background:rgba(255,255,255,.12);color:#fff}
.pnav__util{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.pnav__lang{display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.25);border-radius:999px;flex:none}
.pnav__lang a{padding:5px 9px;font-size:14px;color:#b9b9db;white-space:nowrap}
.pnav__lang a.is-on{background:var(--gold);color:#2a1d00}
.pnav__out{color:#ffd9d9 !important;white-space:nowrap}

/* ---------- responsive nav ----------
   Below 860px the page links get their own full-width row that scrolls
   horizontally, while logo + language + logout stay pinned. Previously all of
   it shared one fixed 64px row with no breakpoint at all, so the language
   toggle sat up to 100px off-screen at 320px. */
@media (max-width:860px){
  .pnav__inner{height:auto;min-height:58px;flex-wrap:wrap;padding-block:9px;gap:10px}
  .pnav__links{
    order:3;width:100%;margin-left:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;gap:4px;
    scrollbar-width:none;
  }
  .pnav__links::-webkit-scrollbar{height:0}
  .pnav__links a{flex:0 0 auto;font-size:14.5px;padding:7px 11px;background:rgba(255,255,255,.07)}
}
@media (max-width:430px){
  .pnav__tag{display:none}
  .pnav__brand img{height:32px;width:auto}
  .pnav__lang a{padding:5px 7px}
  .pnav__out{font-size:14px}
}

/* ---------- shell ---------- */
.pmain{padding:clamp(22px,4vw,44px) 0 64px}
.pwrap{max-width:1220px;margin-inline:auto;padding-inline:20px}
.pfoot{background:var(--navy-900);color:#8f8fbb;padding:22px 0;font-size:14px}
.pfoot a{color:var(--gold-200)}
.pfoot p{margin:0 0 4px}

.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.phead h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
.phead p{margin:6px 0 0;color:var(--muted);font-size:16px}

/* ---------- panels ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);margin-bottom:20px}
.panel__t{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin:0 0 16px}
.pgrid{display:grid;gap:20px}
.pgrid--2{grid-template-columns:1.4fr 1fr}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
/* Grid and flex children default to min-width:auto, so a wide invoice table
   refuses to shrink and drags its whole column past the viewport — the same
   blowout already fixed in dim.css, on classes that live only in this file. */
.pgrid > *,.stat-mini > *,.frow > *,.mcard__row > *{min-width:0}
.panel,.mcard{overflow-wrap:anywhere}
@media (max-width:900px){.pgrid--2,.pgrid--3{grid-template-columns:1fr}}

/* ---------- membership card ---------- */
.mcard{background:var(--grad-band);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);position:relative;overflow:hidden}
.mcard__no{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;letter-spacing:.04em;color:#fff}
.mcard__tier{font-size:15px;color:var(--gold-200);margin-top:2px}
.mcard__row{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px}
.mcard__k{display:block;font-size:14px;color:#b0b0d6;letter-spacing:.06em;text-transform:uppercase}
.mcard__v{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;margin-top:3px}
.mcard__bar{height:8px;border-radius:4px;background:rgba(255,255,255,.18);margin-top:18px;overflow:hidden}
.mcard__bar i{display:block;height:100%;background:var(--grad-gold)}

/* ---------- status pill ---------- */
.pill{display:inline-block;padding:5px 13px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.04em}
.pill--ok{background:#e6f6ec;color:#136c35}
.pill--warn{background:#fff3d9;color:#8a5a00}
.pill--bad{background:#fdeaea;color:#8f1d1d}
.pill--info{background:#ececf7;color:#3a3a76}

/* ---------- alerts ---------- */
.alert{padding:14px 18px;border-radius:var(--r-xs);margin-bottom:20px;font-size:16px;border:1px solid}
.alert--info{background:#eef1fb;border-color:#c9d3f2;color:#26346b}
.alert--ok{background:#e9f7ef;border-color:#b7e2c8;color:#12633a}
.alert--warn{background:#fff6e5;border-color:#f0d9a6;color:#7a5200}
.alert--bad{background:#fdecec;border-color:#f2c2c2;color:#8c1c1c}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th{text-align:left;font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:hover td{background:#fafbff}
.tbl__scroll{overflow-x:auto}
.tbl code{font-size:14px;background:var(--tint);padding:2px 6px;border-radius:5px}
.muted-sm{color:var(--muted);font-size:14px}

/* ---------- forms ---------- */
.frow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:680px){.frow{grid-template-columns:1fr}}
.f{margin-bottom:16px}
.f label{display:block;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xs)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(75,63,143,.12)}
.f small{display:block;margin-top:5px;color:var(--muted);font-size:14px}
.f--err input,.f--err select{border-color:#c33}
.errlist{margin:0 0 16px;padding:12px 16px;background:#fdecec;border:1px solid #f2c2c2;border-radius:var(--r-xs);color:#8c1c1c;font-size:15px}
.errlist li{margin:3px 0;list-style:disc;margin-left:18px}

.btn-sm{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer}
.btn-sm--gold{background:var(--grad-gold);color:#2a1d00}
.btn-sm--navy{background:var(--navy-800);color:#fff}
.btn-sm--ghost{border-color:var(--line);color:var(--body);background:#fff}
.btn-sm--danger{background:#a32020;color:#fff}
.btn-sm:hover{transform:translateY(-1px)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- benefits ---------- */
.blist{display:grid;gap:12px}
.bitem{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 16px;background:var(--tint);
  border:1px solid var(--line);border-radius:var(--r-xs)}
.bitem__d{width:10px;height:10px;border-radius:3px;background:var(--gold);transform:rotate(45deg);margin-top:7px}
.bitem h4{margin:0 0 3px;font-size:16px}
.bitem p{margin:0;font-size:15px;color:var(--muted)}

/* ---------- bank instructions ---------- */
.bank{background:#fffdf6;border:1px solid rgba(242,168,0,.45);border-radius:var(--r);padding:20px}
.bank dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.bank dt,.bank dd{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.bank dl{grid-template-columns:1fr;gap:2px 0}.bank dd{margin-bottom:10px}}
.bank dt{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.bank dd{margin:0;font-family:var(--display);font-weight:700;color:var(--ink)}
.bank .amt{font-size:1.3rem;color:var(--violet)}

.stat-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat-mini div{background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);padding:16px}
.stat-mini b{display:block;font-family:var(--display);font-size:1.8rem;color:var(--violet);line-height:1}
.stat-mini span{display:block;margin-top:5px;font-size:14px;color:var(--muted)}

.authbox{max-width:460px;margin:clamp(20px,6vw,60px) auto}
.authbox .panel{padding:clamp(24px,3vw,34px)}
.authbox h1{font-size:1.6rem;margin:0 0 6px}
.authbox p.sub{margin:0 0 22px;color:var(--muted);font-size:16px}
.authlinks{margin-top:16px;font-size:15px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.authlinks a{color:var(--violet);font-weight:600}