/* ============================================================
   rec-pck.org — Portal (authenticated area) styles
   ============================================================ */

.portal-body { background: var(--paper-2); min-height: 100vh; }

/* Portal top bar */
.p-top { background: var(--navy-800); border-bottom: 3px solid var(--gold-500); position: sticky; top:0; z-index:40; }
.p-top .wrap { display:flex; align-items:center; gap:18px; height:64px; }
.p-top .brand img { width:42px; height:42px; }
.p-top .brand .b1 { font-size:.98rem; }
.p-top .p-right { margin-inline-start:auto; display:flex; align-items:center; gap:14px; }
.p-user { display:flex; align-items:center; gap:10px; color:#fff; font-size:.88rem; }
.p-user .av { width:34px; height:34px; border-radius:50%; background:var(--gold-500); color:var(--navy-900); display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.p-user .meta { line-height:1.2; }
.p-user .meta .nm { font-weight:600; }
.p-user .meta .rl { font-size:.74rem; color:var(--gold-200); }

/* Layout with sidebar */
.p-shell { display:grid; grid-template-columns: 248px 1fr; gap:0; max-width:1280px; margin:0 auto; min-height: calc(100vh - 64px); }
.p-side { background:var(--navy-900); padding:24px 16px; }
.p-side .grp { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-300); margin:18px 12px 8px; }
.p-side a { display:flex; align-items:center; gap:11px; color:#d7dbea; padding:10px 13px; border-radius:var(--radius); font-size:.92rem; font-weight:500; margin-bottom:2px; }
.p-side a:hover { background:rgba(255,255,255,.07); color:#fff; }
.p-side a.active { background:var(--navy-700); color:#fff; box-shadow: inset 3px 0 0 var(--gold-500); }
html[dir="rtl"] .p-side a.active { box-shadow: inset -3px 0 0 var(--gold-500); }
.p-side .ic { width:18px; text-align:center; flex:none; }
.p-main { padding:34px 40px; }
@media (max-width:880px){ .p-shell{ grid-template-columns:1fr; } .p-side{ display:flex; flex-wrap:wrap; gap:4px; padding:12px; } .p-side .grp{ display:none; } .p-main{ padding:22px; } }

.p-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.p-head h1 { font-size:1.8rem; margin:0; }
.p-head .sub { color:var(--ink-500); font-size:.92rem; margin-top:4px; }

/* Stat tiles */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; }
.stat .n { font-family:var(--serif); font-size:2rem; color:var(--navy-700); line-height:1; }
.stat .l { font-size:.82rem; color:var(--ink-500); margin-top:6px; }
.stat .l b { color: var(--ink-700); }
@media (max-width:760px){ .stat-row{ grid-template-columns:1fr 1fr; } }

.panel-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:24px; }
.panel-box .ph { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.panel-box .ph h3 { margin:0; font-family:var(--sans); font-size:1.02rem; color:var(--navy-800); }
.panel-box .pb { padding:6px 0; }

.ref { font-family:var(--mono); font-size:.84rem; color:var(--navy-600); }

/* Stepper for new application */
.stepper { display:flex; gap:0; margin-bottom:28px; }
.stepper .s { flex:1; text-align:center; position:relative; padding-top:34px; font-size:.82rem; color:var(--ink-500); }
.stepper .s::before { content:counter(none); }
.stepper .s .b { position:absolute; top:0; left:50%; transform:translateX(-50%); width:28px; height:28px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); display:grid; place-items:center; font-size:.8rem; font-weight:700; color:var(--ink-500); z-index:1; }
.stepper .s::after { content:""; position:absolute; top:13px; left:0; width:100%; height:2px; background:var(--line-2); z-index:0; }
.stepper .s:first-child::after{ left:50%; width:50%; }
.stepper .s:last-child::after{ width:50%; }
.stepper .s.active .b { background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.stepper .s.done .b { background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); }
.stepper .s.active { color:var(--navy-800); font-weight:600; }

.branch-pick { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.branch-opt { border:2px solid var(--line); border-radius:var(--radius); padding:24px; cursor:pointer; transition:all .15s; background:var(--surface); }
.branch-opt:hover { border-color:var(--navy-500); }
.branch-opt.sel { border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(40,58,125,.12); }
.branch-opt h4 { margin:10px 0 4px; font-family:var(--serif); color:var(--navy-800); }
.branch-opt p { margin:0; font-size:.86rem; color:var(--ink-500); }
@media (max-width:620px){ .branch-pick{ grid-template-columns:1fr; } .stat-row{ grid-template-columns:1fr 1fr; } }

.upload { border:2px dashed var(--line-2); border-radius:var(--radius); padding:22px; text-align:center; color:var(--ink-500); font-size:.88rem; background:#fbfaf6; }
.upload b { color:var(--navy-600); }

/* Checklist (review) */
.chk-row { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.chk-row:last-child{ border-bottom:0; }
.chk-row .q { flex:1; font-size:.92rem; color:var(--ink-700); }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; flex:none; }
.seg button { border:0; background:var(--surface); padding:6px 13px; font-size:.8rem; font-weight:600; cursor:pointer; color:var(--ink-500); font-family:var(--sans); }
.seg button + button { border-inline-start:1px solid var(--line-2); }
.seg button.on-yes { background:var(--ok); color:#fff; }
.seg button.on-no { background:var(--danger); color:#fff; }
.seg button.on-na { background:var(--ink-300); color:#fff; }

.role-switch { display:flex; gap:6px; background:var(--navy-900); padding:4px; border-radius:999px; }
.role-switch button { border:0; background:transparent; color:#cfd4e6; padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:600; cursor:pointer; font-family:var(--sans); white-space:nowrap; }
.role-switch button.active { background:var(--gold-500); color:var(--navy-900); }

.gate-msg { font-size:.84rem; margin-top:6px; display:flex; align-items:center; gap:7px; }
.gate-msg.bad { color:var(--danger); }
.gate-msg.good { color:var(--ok); }

/* role-gated nav items: hidden until JS confirms the user's roles */
.role-gate { display: none; }

/* mini activity-log timeline */
.tlm-row { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.tlm-row:last-child { border-bottom:0; }
.tlm-dot { flex:none; margin-top:6px; }
.tlm-ev { font-weight:600; color:var(--navy-800); font-size:.9rem; }
.tlm-de { font-size:.85rem; color:var(--ink-700); }
.tlm-dt { font-size:.76rem; color:var(--ink-500); margin-top:2px; }