/* ================================================================
   Client Portal (portal.html) — companion PWA styles.
   Reuses the site design tokens + base components from css/styles.css.
   ================================================================ */

body.portal { min-height: 100vh; }

/* ---------- header / nav ---------- */
.portal-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 248, 242, .88); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Vertical padding only (longhand) so the .wrap horizontal padding survives —
   gives the logo the same edge spacing as the main site header. */
.portal-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.portal-brand img { height: 46px; width: auto; display: block; }
.portal-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  background: var(--green-tint); border: 1px solid rgba(23, 105, 74, .2); padding: 3px 9px; border-radius: 999px;
}
.portal-navlinks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal-navbtn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  color: var(--ink-soft); background: none; border: none; padding: 9px 10px; border-radius: 10px; white-space: nowrap;
  transition: color .15s, background .15s;
}
.portal-navbtn:hover { color: var(--green); background: var(--green-tint); }
.portal-logout { color: #b42318; }
.portal-logout:hover { color: #b42318; background: #fbe9e7; }
.portal-install {
  font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--green-deep); background: var(--green-tint); border: 1.5px solid rgba(23, 105, 74, .28);
  border-radius: 999px; padding: 7px 13px; white-space: nowrap;
}
.portal-install:hover { background: #d8e7da; border-color: var(--green); }
.portal-install[hidden] { display: none; }

/* hamburger button */
.portal-hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 38px; padding: 0 9px; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 10px; transition: background .15s, border-color .15s;
}
/* The explicit display above would otherwise override the [hidden] attribute, so
   the menu (admin-only) needs this to actually hide on the client/auth views. */
.portal-hamburger[hidden] { display: none; }
/* Same reason: .btn sets display:inline-flex, so buttons hidden via the [hidden]
   attribute (e.g. role-gated Add-member / Edit-details for dependent members)
   need this to actually disappear. */
.btn[hidden] { display: none; }
.portal-hamburger:hover { background: var(--green-tint); border-color: rgba(23, 105, 74, .28); }
.portal-hamburger span { display: block; height: 2.5px; border-radius: 2px; background: var(--ink); transition: background .15s; }
.portal-hamburger:hover span { background: var(--green-deep); }

/* slide-in drawer + overlay */
.portal-drawer-overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(13, 59, 42, .45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.portal-drawer-overlay.is-visible { opacity: 1; visibility: visible; }
.portal-drawer {
  position: fixed; top: 0; right: 0; z-index: 50; height: 100vh; width: min(300px, 82vw);
  background: rgba(247, 248, 242, .98); backdrop-filter: saturate(140%) blur(8px);
  border-left: 1px solid var(--line); box-shadow: -10px 0 34px rgba(13, 59, 42, .14);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column; padding: 16px;
}
.portal-drawer.is-open { transform: translateX(0); }
.portal-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.portal-drawer-title { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--green-deep); }
.portal-drawer-close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink-mute); padding: 0 4px; }
.portal-drawer-close:hover { color: var(--ink); }
.portal-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.portal-drawer-links .portal-navbtn { display: block; width: 100%; text-align: left; font-size: 15px; padding: 13px 12px; border-radius: 10px; }

/* ---------- main / views ---------- */
.portal-main { padding: clamp(24px, 5vw, 48px) 0 60px; }
.pv[hidden] { display: none; }

/* status banner */
.portal-status { margin: 0 auto 18px; max-width: 620px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.portal-status[hidden] { display: none; }
.portal-status.ok { background: var(--green-tint); color: var(--green-deep); border: 1px solid rgba(23, 105, 74, .2); }
.portal-status.err { background: #fbe9e7; color: #b42318; border: 1px solid #f5c6bf; }

/* ---------- cards (auth + hero) ---------- */
.portal-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: clamp(24px, 4vw, 36px);
}
.portal-hero { max-width: 560px; margin: 0 auto; text-align: center; }
.portal-hero h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 5vw, 42px); line-height: 1.12;
  letter-spacing: -0.015em; margin-top: 14px;
}
.portal-hero h1 em { font-style: italic; color: var(--green); }
.portal-hero p { margin-top: 14px; font-size: 15.5px; color: var(--ink-soft); }
.portal-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.portal-cta-row .btn { min-width: 140px; }

.portal-auth { max-width: 480px; margin: 0 auto; }
.portal-auth .section-title { font-family: var(--serif); font-weight: 700; font-size: 24px; }
.portal-auth .section-sub { margin: 6px 0 20px; font-size: 14px; color: var(--ink-soft); }
.portal-auth .f-label { display: block; margin: 14px 0 6px; }
.portal-auth .f-label:first-of-type { margin-top: 0; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-grid .f-label { margin-top: 0; }
.portal-block { width: 100%; margin-top: 20px; }
.portal-err { margin-top: 12px; font-size: 13px; font-weight: 600; color: #b42318; }
.portal-err[hidden] { display: none; }
.portal-switch { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.linkbtn { background: none; border: none; padding: 0; cursor: pointer; color: var(--green); font-weight: 700; font-family: var(--sans); font-size: inherit; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- dashboards ---------- */
.portal-welcome { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.portal-welcome h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 4vw, 34px); }
.portal-welcome p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }

.portal-folders { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto; }
@media (max-width: 720px) { .portal-folders { grid-template-columns: 1fr; } .portal-grid { grid-template-columns: 1fr; } }
.portal-folder {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 24px); display: flex; flex-direction: column;
}
.portal-folder[hidden] { display: none; }
/* When the read-only policies card is hidden (Family Mode), let Uploads span full width. */
#individualFolders:has(> #policiesFolder[hidden]) { grid-template-columns: 1fr; }
.portal-folder-head { margin-bottom: 14px; }
.portal-folder-head h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.portal-folder-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-mute); }

.portal-doclist, .portal-userlist { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-doclist li, .portal-userlist li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ivory); font-size: 14px;
}
.portal-doc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.portal-doclist a { color: var(--green-deep); font-weight: 700; text-decoration: none; word-break: break-word; }
.portal-doclist a:hover { text-decoration: underline; }
.portal-doc-meta { font-size: 11.5px; color: var(--ink-mute); }
.portal-doc-del {
  flex: none; font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: #b42318; background: #fbe9e7; border: 1px solid #f5c6bf; border-radius: 9px; padding: 6px 11px;
  transition: background .15s;
}
.portal-doc-del:hover { background: #f6d2cc; }
.portal-doc-del:disabled { opacity: .55; cursor: default; }
.portal-empty { color: var(--ink-mute); font-style: italic; justify-content: center !important; }
.portal-user-name { font-weight: 700; color: var(--ink); }
.portal-user-email { font-size: 12.5px; color: var(--ink-mute); }

/* admin: right column stacks Send + Viewing */
.portal-admin-right { display: flex; flex-direction: column; gap: 18px; }

/* admin: client search */
.portal-search { width: 100%; margin-bottom: 12px; }

/* admin: pagination */
.portal-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 4px 0 10px; }
.portal-pager[hidden] { display: none; }
.portal-pager + .portal-userlist { margin-top: 2px; }
.portal-page-btn {
  min-width: 34px; padding: 6px 10px; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: color .15s, border-color .15s, background .15s;
}
.portal-page-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.portal-page-btn.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.portal-page-btn:disabled { opacity: .4; cursor: default; }

/* admin: clickable client rows */
.portal-user-row { cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.portal-user-row:hover { border-color: var(--green); background: #fff; }
.portal-user-row.is-selected { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(23, 105, 74, .12); }
.portal-user-row:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 105, 74, .16); }
.portal-user-view { font-size: 12px; font-weight: 800; color: var(--green); white-space: nowrap; }

/* admin: viewing panel */
.portal-viewing { border-color: rgba(23, 105, 74, .3); }
.portal-viewing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.portal-viewing-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-mute); padding: 0 2px; }
.portal-viewing-close:hover { color: var(--ink); }
.portal-view-group + .portal-view-group { margin-top: 16px; }
.portal-view-label { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }

.portal-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.portal-file-name { margin-top: 10px; font-size: 13px; color: var(--green-deep); font-weight: 600; word-break: break-word; }
.portal-folder-note { margin-top: 8px; font-size: 12px; color: var(--ink-mute); text-align: center; }

.portal-select {
  width: 100%; appearance: none; -webkit-appearance: none; padding: 13px 40px 13px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317694A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.portal-select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(23, 105, 74, .12); }
#adminSendForm .f-label { display: block; margin-bottom: 6px; }

/* ---------- modals ---------- */
.pmodal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(13, 59, 42, .45); }
.pmodal[hidden] { display: none; }
.pmodal-box { position: relative; background: #fff; border-radius: 20px; box-shadow: var(--shadow); max-width: 460px; width: 100%; padding: 28px; max-height: calc(100vh - 40px); overflow-y: auto; }
.pmodal-box h3 { font-family: var(--serif); font-weight: 700; font-size: 22px; margin-bottom: 10px; color: var(--green-deep); }
.pmodal-box p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.pmodal-box p + p { margin-top: 10px; }
.pmodal-box a { color: var(--green); font-weight: 700; }
.pmodal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-mute); }
.pmodal-close:hover { color: var(--ink); }

/* ================================================================
   Family Organizer (POC mode) — opt-in banner, toggle, and the hub.
   ================================================================ */

/* opt-in banner */
.portal-optin {
  position: relative; max-width: 900px; margin: 0 auto 20px; display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap; padding: 16px 44px 16px 18px; border-radius: 16px;
  background: var(--green-tint); border: 1px solid rgba(23, 105, 74, .22);
}
.portal-optin[hidden] { display: none; }
.portal-optin-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.portal-optin-text strong { font-family: var(--serif); font-size: 16px; color: var(--green-deep); }
.portal-optin-text span { font-size: 13px; color: var(--ink-soft); }
.portal-optin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-optin-actions .btn { padding: 9px 16px; font-size: 13.5px; }
.portal-optin-dismiss {
  position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--ink-mute); padding: 0 2px;
}
.portal-optin-dismiss:hover { color: var(--ink); }

/* family mode toggle row */
.portal-familytoggle {
  max-width: 900px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px;
}
.portal-familytoggle[hidden] { display: none; }
.portal-familytoggle-label { font-family: var(--sans); font-size: 13.5px; font-weight: 800; color: var(--ink-soft); }
.portal-switch { position: relative; display: inline-block; cursor: pointer; }
.portal-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.portal-switch-track {
  display: block; width: 46px; height: 26px; border-radius: 999px; background: var(--line);
  transition: background .18s; position: relative;
}
.portal-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(13, 59, 42, .3); transition: transform .18s;
}
.portal-switch input:checked + .portal-switch-track { background: var(--green); }
.portal-switch input:checked + .portal-switch-track .portal-switch-knob { transform: translateX(20px); }
.portal-switch input:focus-visible + .portal-switch-track { box-shadow: 0 0 0 3px rgba(23, 105, 74, .2); }

/* hub layout */
.portal-familyhub { max-width: 900px; margin: 0 auto 22px; display: flex; flex-direction: column; gap: 18px; }
.portal-familyhub[hidden] { display: none; }

/* stat widgets */
.portal-hub-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .portal-hub-stats { grid-template-columns: 1fr; } }
.portal-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 3px;
}
.portal-stat-cover { background: linear-gradient(140deg, var(--green-deep), var(--green)); border-color: transparent; }
.portal-stat-cover .portal-stat-label,
.portal-stat-cover .portal-stat-sub { color: rgba(255, 255, 255, .82); }
.portal-stat-cover .portal-stat-value { color: #fff; }
.portal-stat-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.portal-stat-value { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 4vw, 32px); color: var(--ink); line-height: 1.1; }
.portal-stat-sub { font-size: 12px; color: var(--ink-mute); }

/* member filter tabs */
.portal-memtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-memtab {
  font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: var(--ink-soft); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 15px;
  transition: color .15s, border-color .15s, background .15s;
}
.portal-memtab:hover { border-color: var(--green); color: var(--green); }
.portal-memtab.is-active { background: var(--green); color: #fff; border-color: var(--green); }

/* shared list rows inside the hub */
.portal-timeline, .portal-ledger, .portal-claims {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.portal-timeline li, .portal-ledger li, .portal-claims li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ivory); font-size: 14px;
}

/* renewal timeline */
.portal-tl-main, .portal-ledger-main, .portal-claim-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.portal-tl-title, .portal-ledger-title, .portal-claim-title { font-weight: 700; color: var(--ink); word-break: break-word; }
.portal-tl-meta, .portal-ledger-meta, .portal-claim-meta { font-size: 12px; color: var(--ink-mute); }
.portal-tl-pill {
  flex: none; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--green-deep);
  background: var(--green-tint); border-radius: 999px; padding: 5px 11px;
}
.portal-tl-pill.is-soon { color: #92400e; background: #fef3c7; }

/* premium ledger */
.portal-ledger-right { flex: none; display: flex; align-items: center; gap: 10px; }
.portal-ledger-amt { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; }
.portal-share-btn {
  flex: none; font-family: var(--sans); font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
  color: #fff; background: #25d366; border: 1px solid #1eb257; border-radius: 9px; padding: 7px 13px;
  transition: background .15s;
}
.portal-share-btn:hover { background: #1eb257; }

/* claims tracker */
.portal-claim-action { font-size: 12.5px; color: var(--ink-soft); }
.portal-claim-status {
  flex: none; font-size: 12px; font-weight: 800; white-space: nowrap; text-align: center; color: #92400e;
  background: #fef3c7; border-radius: 999px; padding: 6px 12px;
}
.portal-claim-status.is-done { color: var(--green-deep); background: var(--green-tint); }

/* family members roster + add form */
.btn[hidden] { display: none; } /* the hidden attr must beat .btn's display */
.portal-memberlist { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ivory); font-size: 14px;
}
.portal-member-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.portal-member-name { font-weight: 700; color: var(--ink); }
.portal-member-rel {
  font-size: 11.5px; font-weight: 800; color: var(--green-deep); background: var(--green-tint);
  border-radius: 999px; padding: 3px 9px;
}
.portal-member-form { margin-top: 14px; padding: 16px; border-radius: 14px; border: 1.5px dashed var(--green); background: var(--green-tint); }
.portal-member-form[hidden] { display: none; }
.portal-member-form .f-label { display: block; margin-bottom: 6px; }
.portal-member-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.portal-member-form-actions .btn { padding: 10px 18px; font-size: 13.5px; }

/* educational modal */
.pmodal-lead { margin-bottom: 14px; }
.portal-benefits { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-benefits li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.portal-benefits li::before {
  content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-tint); color: var(--green-deep); font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.portal-benefits strong { color: var(--ink); }

/* ================================================================
   Dashboard navigation & panels — phone warning, Claims / Expired.
   ================================================================ */

/* missing-phone warning banner (a full-width clickable button) */
.portal-warning {
  display: block; width: 100%; max-width: 900px; margin: 0 auto 18px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1.5; color: #92400e;
  background: #fef3c7; border: 1px solid #fcd66b; border-radius: 14px; padding: 14px 18px;
  transition: background .15s, border-color .15s;
}
.portal-warning:hover { background: #fde9a8; border-color: #f5c443; }
.portal-warning[hidden] { display: none; }

.f-optional { font-weight: 500; color: var(--ink-mute); font-size: 12px; }

/* Claims + Expired action buttons and their panels */
.portal-dashpanels { max-width: 900px; margin: 0 auto 20px; }
.portal-dash-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .portal-dash-btns { grid-template-columns: 1fr; } }
.portal-dash-btn {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 16px 18px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.portal-dash-btn:hover { border-color: var(--green); }
.portal-dash-btn.is-open { border-color: var(--green); background: var(--green-tint); box-shadow: 0 0 0 3px rgba(23, 105, 74, .12); }
.portal-dash-btn-ico { font-size: 22px; line-height: 1; }
.portal-dash-btn-txt { display: flex; flex-direction: column; font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.portal-dash-btn-sub { font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

.portal-panel {
  margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 24px);
}
.portal-panel[hidden] { display: none; }
.portal-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.portal-panel-head h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.portal-panel-close {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--ink-soft); background: var(--ivory); border: 1px solid var(--line); transition: background .15s, color .15s;
}
.portal-panel-close:hover { background: #f3d9d4; color: #b42318; border-color: #f5c6bf; }

/* expired policies list + revive CTA */
.portal-expired { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-expired-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid #f5c6bf; background: #fdf3f1; font-size: 14px;
}
.portal-revive-btn {
  flex: none; font-family: var(--sans); font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
  text-decoration: none; text-align: center; color: #fff; background: #25d366; border: 1px solid #1eb257;
  border-radius: 9px; padding: 8px 13px; transition: background .15s;
}
.portal-revive-btn:hover { background: #1eb257; }

/* ================================================================
   Notifications — bell, badge, notification centre, push opt-in.
   ================================================================ */
.portal-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 38px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1;
  background: none; border: 1px solid var(--line); border-radius: 10px; transition: background .15s, border-color .15s;
}
.portal-bell:hover { background: var(--green-tint); border-color: rgba(23, 105, 74, .28); }
.portal-bell[hidden] { display: none; }
.portal-bell-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10.5px;
  font-weight: 800; color: #fff; background: #e5484d; border: 2px solid var(--ivory); border-radius: 999px;
}
.portal-bell-badge[hidden] { display: none; }

.portal-notifcenter {
  position: absolute; top: 68px; right: max(16px, calc((100% - 1120px) / 2)); z-index: 45; width: min(360px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(13, 59, 42, .18);
  overflow: hidden;
}
.portal-notifcenter[hidden] { display: none; }
.portal-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.portal-notif-title { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.portal-notif-markall { font-size: 12.5px; font-weight: 700; color: var(--green); }
.portal-notif-list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 70vh); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.portal-notif-item {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 11px 12px; border-radius: 11px;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.portal-notif-item:hover { background: var(--ivory); border-color: var(--line); }
.portal-notif-item.is-unread { background: #eef5f1; }
.portal-notif-item.is-unread:hover { background: #e3efe7; }
.portal-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.portal-notif-itemtitle { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.portal-notif-item.is-unread .portal-notif-itemtitle { color: var(--green-deep); }
.portal-notif-msg { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.portal-notif-time { font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.portal-notif-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #e5484d; }

/* push opt-in reuses .portal-optin; give it a bell-blue tint */
.portal-pushoptin { background: #eaf1fb; border-color: #c9dcf5; }
.portal-pushoptin .portal-optin-text strong { color: #1e4a8a; }

/* profile modal */
.portal-profile-note {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  color: #1e4a8a; background: #eaf1fb; border: 1px solid #c9dcf5;
}
.portal-profile-note[hidden] { display: none; }
.portal-profile-field { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.portal-profile-label { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.portal-profile-value { font-size: 15px; font-weight: 600; color: var(--ink); word-break: break-word; }
#profileForm { margin-top: 16px; }
#profileForm .f-label { display: block; margin-bottom: 6px; }

/* claim document upload (inside the Claims panel, for pending-docs claims) */
.portal-claim-item.has-upload { flex-wrap: wrap; }
.portal-claim-upload {
  width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.portal-claim-upload-btn { padding: 8px 14px; font-size: 13px; }
.portal-claim-upload-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.portal-claim-upload-status[hidden] { display: none; }
.portal-claim-upload-status.busy { color: var(--ink-soft); }
.portal-claim-upload-status.ok { color: var(--green-deep); }
.portal-claim-upload-status.err { color: #b42318; }
.portal-check {
  flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center;
}
.portal-spinner {
  flex: none; width: 15px; height: 15px; border: 2px solid rgba(23, 105, 74, .25); border-top-color: var(--green);
  border-radius: 50%; animation: portal-spin .7s linear infinite;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }

/* ================================================================
   Family sub-profiles — admin accordion, client cards, modal.
   ================================================================ */
/* admin user row now wraps a row + a nested accordion */
.portal-userlist > .portal-user-li { display: block; padding: 0; border: none; background: none; }
.portal-user-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--ivory);
}
.portal-user-box { flex: 1; min-width: 0; }
.portal-user-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.portal-user-chevron {
  flex: none; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
  transition: transform .18s, background .15s, color .15s;
}
.portal-user-chevron:hover { background: var(--green-tint); color: var(--green-deep); }
.portal-user-li.is-expanded .portal-user-chevron { transform: rotate(90deg); }
.portal-user-create {
  font-family: var(--sans); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap;
  color: var(--green-deep); background: var(--green-tint); border: 1px solid rgba(23, 105, 74, .28);
  border-radius: 8px; padding: 6px 10px; transition: background .15s;
}
.portal-user-create:hover { background: #d8e7da; }

.portal-subaccordion { padding: 8px 8px 10px 40px; display: flex; flex-direction: column; gap: 6px; }
.portal-subaccordion[hidden] { display: none; }
.portal-subrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.portal-subrow-info { min-width: 0; flex: 1; }
.portal-subrow-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal-subrow-meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; word-break: break-word; }
.portal-subrow-actions { display: flex; gap: 8px; flex: none; }
.portal-subrow-btn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: var(--green-deep); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  transition: border-color .15s, color .15s;
}
.portal-subrow-btn:hover { border-color: var(--green); color: var(--green); }
/* plain (non-link) policy title in the viewing panel */
.portal-doc-poltitle { color: var(--green-deep); font-weight: 700; word-break: break-word; }

/* client "Family Profiles" section */
.portal-famprofiles { max-width: 1100px; margin: 0 auto 20px; }
.portal-famprofiles-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.portal-famprofiles-head h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.portal-famprofiles-add { padding: 9px 15px; font-size: 13px; white-space: nowrap; }
.portal-famprofiles-list { display: flex; flex-direction: column; gap: 10px; }
.portal-famcard { border: 1px solid var(--line); border-radius: 12px; background: var(--ivory); padding: 12px 14px; }
.portal-famcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portal-famcard-info { min-width: 0; flex: 1; }
.portal-famcard-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal-famcard-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; word-break: break-word; }
.portal-famcard-actions { display: flex; gap: 8px; flex: none; }
.portal-famcard-btn {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: var(--green-deep); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px;
  transition: border-color .15s, color .15s;
}
.portal-famcard-btn:hover { border-color: var(--green); color: var(--green); }
.portal-famcard-docs { margin-top: 12px; }
.portal-famcard-docs[hidden] { display: none; }
/* POC identity card (shown at the top of a dependent member's family roster). */
.portal-famcard-poc { background: var(--green-tint); border-color: rgba(23, 105, 74, .28); }
/* "You" badge marking the viewing member's own card. */
.portal-member-you { font-size: 11.5px; font-weight: 800; color: #fff; background: var(--green); border-radius: 999px; padding: 3px 9px; }

/* Claim-submitted success popup */
.pmodal-success { text-align: center; }
.pmodal-success-ico {
  width: 60px; height: 60px; margin: 4px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 32px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--green); box-shadow: 0 10px 24px -10px rgba(23, 105, 74, .6);
}
.pmodal-success h3 { margin-bottom: 8px; }
.pmodal-success p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 18px; }

/* "Linked via Family Account" tag on inherited documents */
.portal-doc-tag {
  display: inline-block; margin-top: 4px; width: fit-content; font-size: 10.5px; font-weight: 800; color: #1e4a8a;
  background: #eaf1fb; border: 1px solid #c9dcf5; border-radius: 999px; padding: 2px 8px;
}

/* sub-profile modal */
#subProfileForm .f-label { display: block; margin: 12px 0 6px; }
#subProfileForm .f-label:first-of-type { margin-top: 0; }
.portal-subprofile-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.portal-subprofile-spacer { flex: 1; }
.btn-danger { color: #fff; background: #b42318; border: 1px solid #9a1d14; }
.btn-danger:hover { background: #9a1d14; }
.portal-sp-delete[hidden] { display: none; }

/* ================================================================
   Staged uploader (browse → preview → verify) + verify modal.
   ================================================================ */
.portal-uploader {
  margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--ivory);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.portal-uploader[hidden] { display: none; }
.portal-uploader-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-uploader-title { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.portal-uploader-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line); transition: background .15s, color .15s;
}
.portal-uploader-close:hover { background: #f3d9d4; color: #b42318; border-color: #f5c6bf; }
.portal-uploader-close:disabled { opacity: .5; cursor: default; }

.portal-dropzone {
  border: 2px dashed var(--line); border-radius: 12px; background: #fff; padding: 22px 16px; text-align: center;
  transition: border-color .15s, background .15s;
}
.portal-dropzone.is-drag { border-color: var(--green); background: var(--green-tint); }
.portal-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.portal-dropzone-ico { font-size: 22px; color: var(--green); }
.portal-dropzone-browse {
  cursor: pointer; font-family: var(--sans); font-weight: 800; font-size: 14px; color: #fff; background: var(--green);
  border-radius: 999px; padding: 8px 20px; transition: background .15s;
}
.portal-dropzone-browse:hover { background: var(--green-deep); }
.portal-dropzone-hint { font-size: 12px; color: var(--ink-mute); }

.portal-staged-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-staged-list:empty { display: none; }
.portal-staged-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 13.5px;
}
.portal-staged-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.portal-staged-name { font-weight: 700; color: var(--ink); word-break: break-word; }
.portal-staged-size { flex: none; font-size: 11.5px; color: var(--ink-mute); }
.portal-staged-remove {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
  color: #b42318; background: #fbe9e7; border: 1px solid #f5c6bf; transition: background .15s;
}
.portal-staged-remove:hover { background: #f6d2cc; }
/* Per-file expiry date input in the admin "Send a Policy" staging list.
   NB: the compound selector out-specifies the shared `input.f { width:100% }`
   rule — without it the date field went full-width and collapsed the filename
   column to one character per line. */
.portal-staged-item .portal-staged-expiry { flex: none; width: 150px; padding: 7px 9px; font-size: 12.5px; }
.portal-staged-item .portal-staged-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .portal-staged-item { flex-wrap: wrap; }
  .portal-staged-item .portal-staged-meta { flex: 1 1 100%; }
  .portal-staged-item .portal-staged-expiry { flex: 1 1 auto; width: auto; }
}

/* Account Sum Insured editor in the admin viewing panel. */
.portal-si-row { margin: 4px 0 14px; }
.portal-si-input { display: flex; gap: 8px; align-items: center; }
.portal-si-input .f { flex: 1; }
.portal-si-hint { font-size: 12px; color: var(--ink-mute); margin-top: 5px; min-height: 1em; }

.portal-uploader-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.portal-uploader-status[hidden] { display: none; }
.portal-uploader-status.busy { color: var(--ink-soft); }
.portal-uploader-status.ok { color: var(--green-deep); }
.portal-uploader-status.err { color: #b42318; }
.portal-uploader-continue { align-self: flex-start; padding: 10px 22px; }
.portal-uploader-continue:disabled { opacity: .5; cursor: default; }

/* verify modal Yes/No row */
.portal-verify-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.portal-verify-actions .btn { padding: 11px 20px; font-size: 14px; }

/* ================================================================
   Client SPA tabs + fixed bottom navigation (5-tab refactor)
   ================================================================ */
.ptab[hidden] { display: none; }
/* Keep client content clear of the fixed bottom bar. */
#client-dashboard-view { padding-bottom: 100px; }

.portal-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: #fff; border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px -12px rgba(13, 59, 42, .25);
}
.portal-bn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  color: var(--ink-mute); font-family: var(--sans); font-size: 11px; font-weight: 700;
  transition: color .15s;
}
.portal-bn-ico { font-size: 20px; line-height: 1; }
.portal-bn-lbl { white-space: nowrap; }
.portal-bn.is-active { color: var(--green); }
.portal-bn:hover { color: var(--green-deep); }
/* Center raised "Add Policy" action. */
.portal-bn-center .portal-bn-plus {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 28px; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 20px -6px rgba(23, 105, 74, .5); margin-top: -26px;
  transition: background .15s, transform .15s;
}
.portal-bn-center:hover .portal-bn-plus { background: var(--green-deep); transform: translateY(-2px); }
.portal-bn-center .portal-bn-lbl { color: var(--green-deep); }

/* ---------- Add Policy cards ---------- */
.portal-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.portal-addcard {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.portal-addcard:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.portal-addcard-ico { font-size: 26px; }
.portal-addcard-title { font-weight: 800; color: var(--ink); font-size: 15px; }
.portal-addcard-sub { font-size: 12px; color: var(--ink-mute); }

/* ---------- Profile card ---------- */
.portal-profilecard { display: grid; gap: 2px; }
.portal-profilerow { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.portal-profilelabel { color: var(--ink-mute); font-weight: 600; }
.portal-profilecard .btn { margin-top: 12px; }
.portal-profile-logout { margin-top: 10px; color: #b42318; background: #fbe9e7; border: 1px solid #f5c6bf; }
.portal-profile-logout:hover { background: #f6d5cf; border-color: #efb4aa; }
.portal-claim-cta { margin-bottom: 16px; }

/* ---------- "Your Policies" Active/Expired atomic filter ---------- */
.portal-filter { display: inline-flex; gap: 6px; margin: 12px 0 14px; padding: 4px; border-radius: 999px; }
.portal-filter-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: var(--ink-soft); background: none; border: none; border-radius: 999px; padding: 7px 18px;
  transition: color .15s, background .15s;
}
.portal-filter-btn:hover { color: var(--green); }
.portal-filter-btn.is-active { background: var(--green); color: #fff; }

/* ---------- Add Policy upload overlay (uploader hosted in a modal) ---------- */
#addPolicyMount .portal-uploader { margin-top: 4px; border: none; background: none; padding: 0; }
#addPolicyMount .portal-uploader-close { display: none; }
#addPolicyMount .portal-uploader-title { display: none; }