/* ─────────────────────────────────────────────────────────────
   Patient portal — "my health record" chrome, built on the site's
   design tokens (navy / sun / mint, round white cards, pills).
   ───────────────────────────────────────────────────────────── */

.portal { padding: 32px 0 56px; }
.portal__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: start; }

/* Greeting header */
.phead {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #eaf0fb; border-radius: var(--r-xxl); padding: 26px 30px; position: relative; overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 22px;
}
.phead__moon { position: absolute; inset-inline-end: -40px; inset-block-start: -40px; opacity: .5; }
.phead h1 { color: #fff; font-size: 1.5rem; margin: 0 0 4px; }
.phead p { margin: 0; color: #b9c6df; font-size: .92rem; }
.phead .chip { background: rgba(255,255,255,.14); color: #fff; }

/* Section nav */
.pnav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: var(--r-xl); padding: 12px; box-shadow: var(--shadow); }
.pnav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md);
  font-weight: 600; color: var(--text); transition: background .15s, color .15s, padding .2s;
}
.pnav a .i { color: var(--navy); width: 22px; height: 22px; flex: none; }
.pnav a:hover { background: var(--bg); padding-inline-start: 18px; }
.pnav a.on { background: var(--navy); color: #fff; }
.pnav a.on .i { color: var(--sun); }
.pnav a .n { margin-inline-start: auto; background: var(--sun); color: var(--navy); font-size: .74rem; font-weight: 800; min-width: 22px; height: 22px; border-radius: var(--pill); display: inline-grid; place-items: center; padding: 0 6px; }
.pnav a.on .n { background: var(--sun); color: var(--navy); }
.pnav__logout { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.pnav__logout button { width: 100%; justify-content: flex-start; gap: 12px; background: none; border: 0; font: inherit; color: var(--rose-ink); cursor: pointer; padding: 11px 14px; border-radius: var(--r-md); display: flex; align-items: center; font-weight: 600; }
.pnav__logout button:hover { background: var(--rose); }

/* Dashboard tiles */
.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ptile {
  background: #fff; border-radius: var(--r-xl); padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.ptile:hover { transform: translateY(-3px); box-shadow: var(--shadow), 0 14px 30px -18px rgba(11,42,91,.4); }
.ptile__ic { width: 48px; height: 48px; border-radius: 16px; background: var(--sky-2); color: var(--navy); display: grid; place-items: center; margin-bottom: 6px; }
.ptile__ic .i { width: 26px; height: 26px; }
.ptile b { font-size: 1.9rem; color: var(--navy); line-height: 1; font-weight: 900; }
.ptile small { color: var(--muted); font-size: .9rem; }
.ptile--sun .ptile__ic { background: var(--sun-soft); color: var(--sun-ink); }
.ptile--mint .ptile__ic { background: var(--mint); color: var(--mint-ink); }
.ptile--rose .ptile__ic { background: var(--rose); color: var(--rose-ink); }
.ptile .dot { position: absolute; inset-inline-end: 16px; inset-block-start: 16px; width: 10px; height: 10px; border-radius: 50%; background: #e0392b; }

/* Content card + section title */
.pcard { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 26px 28px; }
.pcard + .pcard { margin-top: 20px; }
.psec-title { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.psec-title h2 { font-size: 1.25rem; margin: 0; }
.psec-title .i { color: var(--navy); }

/* Record list (labs / rx / records / appointments) */
.reclist { display: flex; flex-direction: column; gap: 12px; }
.prec {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; transition: border-color .2s, box-shadow .2s, transform .15s;
}
a.prec:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); transform: translateX(-3px); }
html[dir=ltr] a.prec:hover { transform: translateX(3px); }
.prec__ic { width: 46px; height: 46px; border-radius: 14px; background: var(--sky-2); color: var(--navy); display: grid; place-items: center; flex: none; }
.prec__ic .i { width: 24px; height: 24px; }
.prec__body { min-width: 0; flex: 1; }
.prec__body b { display: block; color: var(--navy); font-size: 1.02rem; }
.prec__body small { color: var(--muted); font-size: .85rem; }
.prec__meta { display: flex; align-items: center; gap: 10px; flex: none; }
.prec__chev { color: var(--muted); }

/* Structured lab table */
.labtable { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line); font-size: .95rem; }
.labtable th, .labtable td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); }
.labtable th { background: var(--sky-2); color: var(--navy); font-weight: 800; }
.labtable tr:last-child td { border-bottom: 0; }
.labtable td.num { font-variant-numeric: tabular-nums; }

/* Same card-stack treatment as the public site's .tbl (site.css) below 700px. */
@media (max-width: 700px) {
    .labtable { box-shadow: none; background: none; }
    .labtable thead { display: none; }
    .labtable tr { display: block; background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); overflow: hidden; margin-bottom: 12px; }
    .labtable td { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: end; }
    .labtable td::before { content: attr(data-label); font-weight: 700; color: var(--navy); text-align: start; }
    .labtable td:empty::before { content: none; }
}
.flag { display: inline-flex; padding: 2px 10px; border-radius: var(--pill); font-size: .78rem; font-weight: 800; }
.flag--high { background: var(--rose); color: var(--rose-ink); }
.flag--low { background: var(--sun-soft); color: var(--sun-ink); }
.flag--normal { background: var(--mint); color: var(--mint-ink); }

/* Prescription drug cards */
.rxlist { display: flex; flex-direction: column; gap: 12px; }
.rxdrug { background: var(--bg); border-radius: var(--r-lg); padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start; }
.rxdrug__no { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; font-size: .85rem; }
.rxdrug b { color: var(--navy); font-size: 1.05rem; }
.rxdrug .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Thread (tickets) */
.thread { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.bubble { max-width: 82%; padding: 14px 18px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); position: relative; }
.bubble__who { font-size: .8rem; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.bubble__body { white-space: pre-line; line-height: 1.75; }
.bubble time { display: block; font-size: .74rem; color: var(--muted); margin-top: 8px; }
.bubble--me { align-self: flex-start; background: var(--sky-2); }
.bubble--me .bubble__who { color: var(--navy); }
.bubble--staff { align-self: flex-end; background: var(--mint); }
.bubble--staff .bubble__who { color: var(--mint-ink); }
.bubble--doctor { align-self: flex-end; background: var(--sun-soft); }
.bubble--doctor .bubble__who { color: var(--sun-ink); }
.bubble__file { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .85rem; font-weight: 700; color: var(--navy); background: #fff; padding: 6px 12px; border-radius: var(--pill); }

/* Portal status pills */
.pstat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--pill); font-weight: 700; font-size: .82rem; }
.pstat--Open, .pstat--Requested { background: var(--sky); color: var(--navy); }
.pstat--Answered, .pstat--Confirmed { background: var(--mint); color: var(--mint-ink); }
.pstat--Done { background: var(--sun-soft); color: var(--sun-ink); }
.pstat--Closed, .pstat--Cancelled { background: #e8e8ea; color: #555; }
.pstat--Draft { background: #e8e8ea; color: #555; }
.pstat--SentForSignature { background: var(--sky); color: var(--navy); }
.pstat--Signed { background: var(--mint); color: var(--mint-ink); }
.pstat--Declined, .pstat--Voided { background: var(--rose); color: var(--rose-ink); }
.pstat--Expired { background: var(--sun-soft); color: var(--sun-ink); }

/* Login card */
.plogin { min-height: 62vh; display: grid; place-items: center; padding: 40px 0; }
.plogin__card { width: min(440px, 100% - 40px); background: #fff; border-radius: var(--r-xxl); box-shadow: var(--shadow); padding: 38px 34px; position: relative; overflow: hidden; }
.plogin__moon { position: absolute; inset-inline-start: -55px; inset-block-end: -55px; inset-block-start: auto; opacity: .28; z-index: 0; pointer-events: none; }
.plogin__card > *:not(.plogin__moon) { position: relative; z-index: 1; }
.plogin h1 { font-size: 1.5rem; margin-bottom: 6px; }
.plogin .sub { color: var(--muted); margin-bottom: 24px; }
.otp-input { text-align: center; letter-spacing: .5em; font-size: 1.7rem; font-weight: 800; direction: ltr; }
.otp-input::placeholder { letter-spacing: .3em; }
.devcode { background: var(--sun-soft); color: var(--sun-ink); border-radius: var(--r-md); padding: 10px 14px; font-size: .85rem; margin-bottom: 16px; text-align: center; }
.perr { background: var(--rose); color: var(--rose-ink); border-radius: var(--r-md); padding: 11px 16px; font-size: .9rem; margin-bottom: 16px; font-weight: 600; }

/* Data pairs (profile / record details) */
.pdl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 20px; }
.pdl > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pdl dt { font-size: .82rem; color: var(--muted); margin-bottom: 3px; }
.pdl dd { margin: 0; font-weight: 600; color: var(--navy); }

.rimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.rimg { display: block; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--navy-deep); aspect-ratio: 1; }
.rimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease); }
.rimg:hover img { transform: scale(1.05); }

/* Modal (native <dialog>) */
.pmodal { border: 0; border-radius: var(--r-xxl); padding: 0; width: min(560px, 94vw); max-height: 92vh; overflow: auto; background: #fff; color: var(--text); box-shadow: 0 40px 90px -35px rgba(7, 20, 42, .65); }
.pmodal::backdrop { background: rgba(7, 20, 42, .5); backdrop-filter: blur(3px); }
.pmodal[open] { animation: pmodal-in .22s var(--ease); }
@keyframes pmodal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pmodal__in { padding: 26px 28px; }
.pmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pmodal__head h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.pmodal__x { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.pmodal__x:hover { background: var(--rose); color: var(--rose-ink); }
.pmodal__x .i { width: 20px; height: 20px; }

.pnote { background: var(--sky-2); border-radius: var(--r-md); padding: 14px 18px; color: var(--navy-ink); line-height: 1.8; }
.pback { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }

@media (max-width: 900px) {
  .portal__grid { grid-template-columns: minmax(0,1fr); }
  .pnav { position: static; flex-direction: row; overflow-x: auto; }
  .pnav a { flex-direction: column; gap: 4px; font-size: .78rem; text-align: center; padding: 10px 12px; white-space: nowrap; }
  .pnav a .n { margin: 0; position: absolute; }
  .pnav a:hover { padding-inline-start: 12px; }
  .pnav__logout { border-top: 0; border-inline-start: 1px solid var(--line); padding-top: 0; padding-inline-start: 8px; margin: 0; }
  .pnav__logout button { flex-direction: column; gap: 4px; font-size: .78rem; }
  .ptiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pdl { grid-template-columns: minmax(0,1fr); }
  .bubble { max-width: 92%; }
}
@media (max-width: 520px) { .ptiles { grid-template-columns: minmax(0,1fr); } }