/* Vishesa client portal — /portal. Loaded on every website page via web_include_css; everything is scoped under .vp */
:root {
	--vp-navy: #1f3a5f;
	--vp-navy-deep: #16294a;
	--vp-navy-soft: #2c4d7a;
	--vp-gold: #c9a45c;
	--vp-bg: #f3f5f8;
	--vp-card: #ffffff;
	--vp-text: #1b2230;
	--vp-muted: #6a7482;
	--vp-border: #e2e7ee;
	--vp-border-strong: #cdd5df;
	--vp-ok: #1f7a4d;   --vp-ok-bg: #e6f4ec;
	--vp-warn: #9a6400; --vp-warn-bg: #fff4dc;
	--vp-bad: #b3261e;  --vp-bad-bg: #fdeaea;
	--vp-info: #1f3a5f; --vp-info-bg: #e8eef7;
	--vp-shadow: 0 1px 2px rgba(20, 32, 56, .06), 0 4px 16px rgba(20, 32, 56, .05);
	--vp-radius: 12px;
	--vp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vp-header-h: 64px;
}

/* ---------------------------------------------------------------- page shell */
#page-portal { background: var(--vp-bg); min-height: 100vh; }
#page-portal .page-content-wrapper { padding: 0; margin: 0; }
#page-portal .page_content { padding: 0; }
.vp { font-family: var(--vp-font); color: var(--vp-text); background: var(--vp-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; font-size: 14.5px; line-height: 1.5; }
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp a { color: var(--vp-navy); text-decoration: none; }
.vp a:hover { text-decoration: underline; }
.vp h1, .vp h2, .vp h3, .vp h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--vp-text); }
.vp p { margin: 0; }
.vp table { border-collapse: collapse; width: 100%; }
.vp [hidden] { display: none !important; }

/* ---------------------------------------------------------------- header */
.vp-header { background: linear-gradient(90deg, var(--vp-navy-deep), var(--vp-navy) 60%, var(--vp-navy-soft)); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(10, 20, 40, .25); }
.vp-header__inner { max-width: 1400px; margin: 0 auto; height: var(--vp-header-h); display: flex; align-items: center; gap: 20px; padding: 0 24px; }
.vp-brand { display: flex; align-items: center; gap: 12px; color: #fff; flex: 0 0 auto; }
.vp-brand:hover { text-decoration: none; }
.vp-brand img { height: 30px; width: auto; display: block; }
.vp-brand__tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 12px; }
.vp-header__client { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.vp-client-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-switcher { display: flex; align-items: center; gap: 10px; margin: 0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 6px 4px 14px; max-width: 100%; }
.vp-switcher__label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.vp-switcher select { background: #fff; color: var(--vp-text); border: 0; border-radius: 999px; padding: 6px 30px 6px 12px; font: inherit; font-weight: 600; font-size: 13px; max-width: 320px; appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.vp-header__user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vp-user { font-size: 13px; color: rgba(255, 255, 255, .85); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-header .vp-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.vp-header .vp-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- body: left nav + main */
.vp-body { max-width: 1400px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0; }
.vp-nav { flex: 0 0 232px; position: sticky; top: var(--vp-header-h); height: calc(100vh - var(--vp-header-h)); overflow-y: auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--vp-border); background: #fbfcfd; }
.vp-nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: #3b4656; font-weight: 500; font-size: 14px; transition: background .15s, color .15s; }
.vp-nav__item:hover { background: #eef2f7; text-decoration: none; color: var(--vp-navy); }
.vp-nav__item.is-active { background: var(--vp-navy); color: #fff; box-shadow: 0 3px 10px rgba(31, 58, 95, .28); }
.vp-nav__item .vp-icon { flex: 0 0 auto; opacity: .85; }
.vp-nav__foot { margin-top: auto; padding-top: 24px; }
.vp-nav__firm { margin-top: 18px; font-size: 12px; color: var(--vp-muted); line-height: 1.4; }
.vp-main { flex: 1 1 auto; min-width: 0; padding: 28px 32px 64px; }

/* ---------------------------------------------------------------- page header */
.vp-page { display: flex; flex-direction: column; gap: 20px; }
.vp-page--narrow { max-width: 760px; }
.vp-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vp-page__title { font-size: 26px; font-weight: 700; color: var(--vp-navy-deep); }
.vp-page__sub { color: var(--vp-muted); margin-top: 4px; }
.vp-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--vp-gold); font-weight: 600; margin-bottom: 4px; }
.vp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vp-muted); }
.vp-back .vp-icon { transform: rotate(180deg); width: 14px; height: 14px; }
.vp-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- cards / sections */
.vp-card { background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); padding: 20px 22px; }
.vp-card--flush { padding: 0; overflow: hidden; }
.vp-card--flush .vp-section__head { padding: 18px 22px 8px; }
.vp-card--accent { border-left: 4px solid var(--vp-gold); }
.vp-card--sticky { position: sticky; top: calc(var(--vp-header-h) + 20px); }
.vp-grid { display: grid; gap: 20px; }
.vp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-grid--msg { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; }
/* the money summary is a handful of lines and the feed is long; stretching the short one
   to match leaves a tall empty card, so this row sizes each card to its own content. */
.vp-grid--feed { align-items: start; }
.vp-grid--feed .vp-timeline { max-height: 520px; overflow-y: auto; }
.vp-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vp-section__title { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--vp-navy); }
.vp-count { display: inline-block; min-width: 20px; padding: 0 7px; margin-left: 4px; border-radius: 999px; background: #eef2f7; color: var(--vp-navy); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; vertical-align: 1px; }
.vp-nav__item .vp-count { margin-left: auto; }
.vp-link--action { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vp-link--action .vp-icon { width: 14px; height: 14px; }
.vp-link--strong { font-weight: 600; }
.vp-h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--vp-muted); margin: 22px 0 10px; }
.vp-note { background: var(--vp-info-bg); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--vp-navy); margin-bottom: 14px; }
.vp-muted { color: var(--vp-muted); }
.vp-block { display: block; }
.vp-prose { white-space: pre-line; line-height: 1.6; }
.vp-prose--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.vp-prose--clamp.is-open { display: block; -webkit-line-clamp: unset; }

/* ---------------------------------------------------------------- KPIs */
/* auto-fit rather than a fixed count: the row holds 5 or 6 tiles depending on whether
   this portal user may see invoices, and it has to reflow at every tablet width. */
.vp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; }
.vp-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); color: var(--vp-text); position: relative; transition: transform .15s, box-shadow .15s; }
a.vp-kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 32, 56, .10); }
span.vp-kpi { cursor: default; }
.vp-kpi__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--vp-info-bg); color: var(--vp-navy); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.vp-kpi__value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--vp-navy-deep); letter-spacing: -.02em; }
.vp-kpi__value--money { font-size: 22px; }
.vp-kpi__label { font-size: 13px; color: var(--vp-muted); }
.vp-kpi__label small { display: block; color: var(--vp-text); font-weight: 600; }
.vp-kpi--attention { border-color: #f0d9a8; background: linear-gradient(180deg, #fffdf7, #fff); }
.vp-kpi--attention .vp-kpi__icon { background: var(--vp-warn-bg); color: var(--vp-warn); }

/* ---------------------------------------------------------------- lists */
.vp-list { list-style: none; margin: 0; padding: 0; }
.vp-list__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--vp-border); }
.vp-list__item:first-child { border-top: 0; }
.vp-list__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: #eef2f7; color: var(--vp-navy); display: inline-flex; align-items: center; justify-content: center; }
.vp-list__icon--warn { background: var(--vp-warn-bg); color: var(--vp-warn); }
.vp-list__icon--bad { background: var(--vp-bad-bg); color: var(--vp-bad); }
.vp-list__icon--info { background: var(--vp-info-bg); color: var(--vp-info); }
.vp-list__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vp-list__title { font-weight: 600; color: var(--vp-text); overflow: hidden; text-overflow: ellipsis; }
.vp-list__meta { font-size: 12.5px; color: var(--vp-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vp-date { flex: 0 0 52px; width: 52px; text-align: center; border-radius: 10px; background: #eef2f7; padding: 6px 0; line-height: 1.1; }
.vp-date b { display: block; font-size: 20px; color: var(--vp-navy-deep); }
.vp-date small { font-size: 11px; text-transform: uppercase; color: var(--vp-muted); letter-spacing: .06em; }
.vp-date.is-today { background: var(--vp-navy); }
.vp-date.is-today b, .vp-date.is-today small { color: #fff; }

/* ---------------------------------------------------------------- facts / matter */
.vp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vp-fact { background: var(--vp-card); border: 1px solid var(--vp-border); border-radius: 10px; padding: 12px 14px; }
.vp-fact__label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--vp-muted); }
.vp-fact__value { display: block; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.vp-subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--vp-border); position: sticky; top: var(--vp-header-h); background: var(--vp-bg); z-index: 5; padding: 6px 0; }
.vp-subnav a { padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #3b4656; }
.vp-subnav a:hover, .vp-subnav a.is-active { background: #e8eef7; color: var(--vp-navy); text-decoration: none; }

/* ---------------------------------------------------------------- tables */
.vp-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--vp-muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--vp-border-strong); background: #fafbfc; white-space: nowrap; }
.vp-table td { padding: 12px 14px; border-bottom: 1px solid var(--vp-border); vertical-align: middle; }
.vp-table tbody tr:last-child td { border-bottom: 0; }
.vp-table tbody tr:hover td { background: #fafcff; }
.vp-table .vp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-td-actions { text-align: right; white-space: nowrap; }
.vp-table__none { padding: 20px 22px; }
.vp-card:not(.vp-card--flush) .vp-table th:first-child, .vp-card:not(.vp-card--flush) .vp-table td:first-child { padding-left: 0; }
.vp-card:not(.vp-card--flush) .vp-table th { background: transparent; }

/* ---------------------------------------------------------------- corporate register */
.vp-entity + .vp-entity { margin-top: 0; }
.vp-entity .vp-facts { margin-bottom: 4px; }
.vp-regoffice { margin-top: 10px; margin-bottom: 4px; font-size: 13px; }
/* One entity card carries five stacked registers; a rule between them is what makes
   the card readable as sections rather than as one long run of tables. */
.vp-entity .vp-h3 { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--vp-border); }
.vp-entity .vp-h3:first-of-type { }
.vp-entity .vp-table { margin-bottom: 2px; }
.vp-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; letter-spacing: .02em; }

/* group structure: indent carries the hierarchy, so it survives any wrap */
.vp-tree, .vp-tree__branch { list-style: none; margin: 0; padding: 0; }
.vp-tree__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--vp-text);
	margin-left: calc(var(--depth, 0) * 26px); border-left: 3px solid transparent; }
.vp-tree__node > .vp-tree__link:hover { background: #eef2f7; text-decoration: none; border-left-color: var(--vp-gold); }
.vp-tree__mark { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; background: #eef2f7; color: var(--vp-navy);
	display: inline-flex; align-items: center; justify-content: center; }
.vp-tree__text { flex: 1 1 auto; min-width: 0; }
.vp-tree__branch .vp-tree__link { position: relative; }
.vp-tree__branch .vp-tree__link::before { content: ""; position: absolute; left: -13px; top: 50%; width: 11px; height: 1px; background: var(--vp-border-strong); }

/* shareholding: one bar a client can read at a glance, with a legend under it */
.vp-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: #eef2f7; margin: 4px 0 12px; }
.vp-bar__seg { display: block; min-width: 2px; }
.vp-bar__seg--0 { background: #1f3a5f; } .vp-bar__seg--1 { background: #c9a45c; }
.vp-bar__seg--2 { background: #2e7e85; } .vp-bar__seg--3 { background: #6b4f9e; }
.vp-bar__seg--4 { background: #a8562b; } .vp-bar__seg--5 { background: #3f6fae; }
.vp-bar__seg--6 { background: #9aa7b6; }
.vp-legend { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.vp-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.vp-legend__dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }

/* ---------------------------------------------------------------- money summary */
.vp-money { display: flex; flex-direction: column; gap: 10px; }
.vp-money__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vp-money__label { font-size: 13px; color: var(--vp-muted); }
.vp-money__value { font-size: 24px; font-weight: 700; color: var(--vp-navy-deep); letter-spacing: -.02em; white-space: nowrap; }
.vp-bar__seg--paid { background: var(--vp-ok); }
.vp-bar__seg--open { background: var(--vp-gold); }
.vp-bar__seg--late { background: var(--vp-bad); }
.vp-note--warn { background: var(--vp-warn-bg); color: var(--vp-warn); margin-bottom: 0; }

/* ---------------------------------------------------------------- activity timeline
   One rail down the left, a mark per event. The rail is drawn on the item rather than the
   list so the last event's line stops at its own mark instead of running into the padding. */
.vp-timeline { list-style: none; margin: 0; padding: 0; }
.vp-timeline__item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 10px 0 10px 0; }
.vp-timeline__item::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: -10px; width: 1px; background: var(--vp-border); }
.vp-timeline__item:last-child::before { display: none; }
.vp-timeline__mark { position: relative; z-index: 1; flex: 0 0 33px; width: 33px; height: 33px; border-radius: 50%;
	background: #eef2f7; color: var(--vp-navy); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--vp-card); }
.vp-timeline__item--invoice .vp-timeline__mark { background: var(--vp-warn-bg); color: var(--vp-warn); }
.vp-timeline__item--hearing .vp-timeline__mark { background: #e8eef7; color: var(--vp-navy); }
.vp-timeline__item--compliance .vp-timeline__mark { background: var(--vp-ok-bg); color: var(--vp-ok); }
.vp-timeline__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vp-timeline__title { font-weight: 600; color: var(--vp-text); overflow-wrap: anywhere; }
.vp-timeline__when { flex: 0 0 auto; font-size: 12.5px; color: var(--vp-muted); white-space: nowrap; padding-top: 2px; }

/* ---------------------------------------------------------------- people */
.vp-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.vp-person { display: flex; gap: 14px; padding: 18px 20px; background: var(--vp-card); border: 1px solid var(--vp-border);
	border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); }
.vp-person--lead { border-left: 4px solid var(--vp-gold); }
.vp-person__avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: var(--vp-navy); color: #fff;
	font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.vp-person--lead .vp-person__avatar { background: linear-gradient(140deg, var(--vp-navy), var(--vp-gold)); }
.vp-person__body { flex: 1 1 auto; min-width: 0; }
.vp-person__name { font-size: 16px; }
.vp-person__role { font-size: 12.5px; color: var(--vp-gold); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.vp-person__matters { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.vp-person__matters li { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- pills / due */
.vp-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; background: var(--vp-info-bg); color: var(--vp-info); }
.vp-pill--ok { background: var(--vp-ok-bg); color: var(--vp-ok); }
.vp-pill--warn { background: var(--vp-warn-bg); color: var(--vp-warn); }
.vp-pill--bad { background: var(--vp-bad-bg); color: var(--vp-bad); }
.vp-pill--muted { background: #eceff3; color: var(--vp-muted); }
.vp-due { white-space: nowrap; }
.vp-due small { display: inline-block; margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 999px; background: #eceff3; color: var(--vp-muted); line-height: 16px; }
.vp-due.is-soon small { background: var(--vp-warn-bg); color: var(--vp-warn); }
.vp-due.is-overdue { color: var(--vp-bad); font-weight: 600; }
.vp-due.is-overdue small { background: var(--vp-bad-bg); color: var(--vp-bad); }

/* ---------------------------------------------------------------- buttons / inputs / forms */
.vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; line-height: 1.2; transition: background .15s, box-shadow .15s, transform .1s; white-space: nowrap; }
.vp-btn:hover { text-decoration: none; }
.vp-btn:active { transform: translateY(1px); }
.vp-btn:disabled, .vp-btn.is-busy { opacity: .6; cursor: progress; }
.vp-btn--primary { background: var(--vp-navy); color: #fff; box-shadow: 0 2px 6px rgba(31, 58, 95, .3); }
.vp-btn--primary:hover { background: var(--vp-navy-deep); color: #fff; }
.vp-btn--ok { background: var(--vp-ok); color: #fff; }
.vp-btn--ok:hover { background: #17603c; color: #fff; }
.vp-btn--ghost { background: transparent; color: var(--vp-navy); border-color: var(--vp-border-strong); }
.vp-btn--ghost:hover { background: #eef2f7; }
.vp-btn--sm { padding: 6px 12px; min-height: 30px; font-size: 12.5px; border-radius: 7px; }
.vp-btn--block { width: 100%; }
/* `.vp a` (0,1,1) outranks `.vp-btn--primary` (0,1,0), so a button rendered as a link
   — "New request" in the sidebar — was drawing navy text on its navy fill. */
.vp a.vp-btn--primary, .vp a.vp-btn--ok { color: #fff; }
.vp a.vp-btn--primary:hover, .vp a.vp-btn--ok:hover { color: #fff; }
.vp-btn .vp-icon { width: 16px; height: 16px; }
.vp-iconbtn { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; color: var(--vp-navy); border: 1px solid var(--vp-border); background: #fff; }
.vp-iconbtn:hover { background: #eef2f7; text-decoration: none; }
.vp-input { width: 100%; padding: 9px 12px; border: 1px solid var(--vp-border-strong); border-radius: 9px; font: inherit; font-size: 14px; color: var(--vp-text); background: #fff; transition: border-color .15s, box-shadow .15s; }
.vp-input:focus { outline: 0; border-color: var(--vp-navy); box-shadow: 0 0 0 3px rgba(31, 58, 95, .15); }
select.vp-input { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7482' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.vp-toolbar .vp-input, .vp-page__head > .vp-input { width: auto; min-width: 160px; }
.vp-input--search { min-width: 220px; }
textarea.vp-input { resize: vertical; min-height: 80px; }
.vp-form { display: flex; flex-direction: column; gap: 16px; }
.vp-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vp-field__label { font-size: 12.5px; font-weight: 600; color: #3b4656; }
.vp-field__label em { color: var(--vp-bad); font-style: normal; }
.vp-form__row { display: flex; flex-direction: column; gap: 10px; }
.vp-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vp-form__row--actions { flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-form__row--actions .vp-file--inline { margin-right: auto; }
.vp-file { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.vp-file input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.vp-file__label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px dashed var(--vp-border-strong); border-radius: 9px; font-size: 13px; color: var(--vp-navy); background: #fff; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-file:hover .vp-file__label { background: #eef2f7; }
.vp-file.has-file .vp-file__label { border-style: solid; border-color: var(--vp-navy); font-weight: 600; }
.vp-compose { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--vp-border); }
.vp-approve { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* document requests */
.vp-reqs { display: flex; flex-direction: column; gap: 12px; }
.vp-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--vp-border); border-radius: 10px; background: #fbfcfd; }
.vp-req__title { display: block; }
.vp-req__desc { font-size: 13px; color: #3b4656; margin: 2px 0 4px; white-space: pre-line; }
.vp-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vp-upload .vp-input { width: 180px; }
.vp-req.is-done { opacity: .55; }

/* client requests */
.vp-reqcards { display: flex; flex-direction: column; gap: 14px; }
.vp-reqcard__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.vp-reqcard__title { font-size: 17px; }
.vp-response { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--vp-gold); background: #fbf8f1; border-radius: 0 8px 8px 0; }
.vp-response__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #7a5b1e; margin-bottom: 6px; }
.vp-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: #eef2f7; }

/* messages thread */
.vp-thread { display: flex; flex-direction: column; gap: 12px; }
.vp-msg { border: 1px solid var(--vp-border); border-radius: 12px; padding: 14px 16px; background: #fff; }
.vp-msg--client { background: #f6f8fb; border-color: #d9e2ee; margin-left: 24px; }
.vp-msg__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vp-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--vp-navy); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vp-msg--client .vp-avatar { background: var(--vp-gold); }
.vp-msg__subject { font-size: 14.5px; margin-bottom: 4px; }
.vp-msg__body { white-space: pre-line; line-height: 1.6; }

/* empty state */
.vp-empty { text-align: center; padding: 28px 16px; color: var(--vp-muted); }
.vp-empty__icon { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; background: #eef2f7; color: var(--vp-navy); display: flex; align-items: center; justify-content: center; }
.vp-empty__text { font-weight: 600; color: #3b4656; }
.vp-empty__hint { font-size: 13px; margin-top: 4px; }

/* toasts + dialog */
.vp-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.vp-toast { background: var(--vp-navy-deep); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: 13.5px; animation: vp-in .2s ease-out; }
.vp-toast--ok { background: var(--vp-ok); }
.vp-toast--bad { background: var(--vp-bad); }
@keyframes vp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vp-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 45, .55); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vp-dialog { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); font-family: var(--vp-font); color: var(--vp-text); }
.vp-dialog h3 { font-size: 17px; margin-bottom: 6px; }
.vp-dialog p { color: var(--vp-muted); font-size: 13.5px; margin-bottom: 12px; }
.vp-dialog .vp-form__row--actions { margin-top: 14px; }

/* ---------------------------------------------------------------- overflow guards
   Nothing in the portal may push the page sideways: a wide table scrolls inside
   its own card, and media and long unbroken strings are held to the column. */
/* Above the phone breakpoint a table stays a table and scrolls inside its card;
   at or below it the table collapses to cards (see the 767px block) and must be
   left alone, so this guard is scoped away from that. */
@media (min-width: 768px) {
	.vp-card--flush { overflow: hidden auto; }
	.vp-card--flush > .vp-table, .vp-card > .vp-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.vp-card--flush > .vp-table > thead, .vp-card > .vp-table > thead,
	.vp-card--flush > .vp-table > tbody, .vp-card > .vp-table > tbody { display: table; width: 100%; }
}
.vp img, .vp video, .vp canvas, .vp svg:not(.vp-icon) { max-width: 100%; height: auto; }
.vp pre { overflow-x: auto; }
.vp-prose, .vp-msg__body, .vp-list__title, .vp-req__desc { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.vp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-grid--msg { grid-template-columns: 1fr; }
	.vp-card--sticky { position: static; }
}
/* The client's own name is their identity on the page, so it never gets ellipsised to
   fit beside the brand. Below 1100px the header wraps and the name takes its own row. */
@media (max-width: 1100px) {
	.vp-header__inner { flex-wrap: wrap; height: auto; min-height: var(--vp-header-h); padding-top: 10px; padding-bottom: 10px; }
	.vp-header__client { order: 3; flex: 1 1 100%; justify-content: flex-start; min-width: 0; }
	.vp-client-name { white-space: normal; overflow: visible; }
	.vp-header__user { margin-left: auto; }
	/* A wrapped header has no fixed height, so nothing below it can offset against
	   --vp-header-h any more. Letting it scroll away keeps the rail's maths honest and
	   hands a tablet back the vertical room the extra row took. */
	.vp-header { position: static; }
	.vp-nav { top: 0; height: 100vh; }
	.vp-card--sticky, .vp-subnav { top: 0; }
}

@media (max-width: 900px) {
	.vp-grid--2 { grid-template-columns: 1fr; }
	.vp-nav { flex-basis: 200px; }
	.vp-main { padding: 22px 20px 56px; }
	.vp-brand__tag { display: none; }
}
@media (max-width: 767px) {
	.vp { font-size: 14px; }
	.vp-header { position: static; }
	.vp-header__inner { padding: 0 16px; gap: 12px; flex-wrap: wrap; height: auto; min-height: 56px; }
	.vp-brand img { height: 24px; }
	.vp-header__client { order: 3; flex: 1 1 100%; justify-content: flex-start; padding-bottom: 10px; }
	.vp-switcher { width: 100%; }
	.vp-switcher select { flex: 1 1 auto; max-width: none; }
	.vp-header__user { margin-left: auto; }
	.vp-user { display: none; }
	/* A column flex container still obeys align-items on the cross axis, so the
	   desktop `flex-start` (which keeps the sticky rail from stretching) made
	   .vp-main shrink-to-fit its widest child — the page then ran off screen. */
	.vp-body { flex-direction: column; align-items: stretch; }
	.vp-main { width: 100%; max-width: 100%; min-width: 0; }
	/* left nav becomes horizontally scrolling top tabs */
	.vp-nav { position: sticky; top: 0; height: auto; width: 100%; flex: none; flex-direction: row; gap: 4px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--vp-border); background: #fff; z-index: 40; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.vp-nav::-webkit-scrollbar { display: none; }
	.vp-nav__item { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }
	.vp-nav__foot { display: none; }
	.vp-main { padding: 16px 16px 48px; }
	.vp-page__title { font-size: 22px; }
	.vp-kpis, .vp-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vp-kpi { padding: 14px; }
	.vp-kpi__value { font-size: 24px; }
	.vp-card { padding: 16px; }
	.vp-form__row--2 { grid-template-columns: 1fr; }
	.vp-toolbar, .vp-toolbar .vp-input, .vp-input--search { width: 100%; }
	.vp-subnav { position: static; }
	.vp-req { grid-template-columns: 1fr; }
	.vp-upload { justify-content: flex-start; }
	.vp-upload .vp-input { width: 100%; }
	.vp-msg--client { margin-left: 0; }
	.vp-timeline__item { flex-wrap: wrap; }
	.vp-timeline__when { flex: 1 1 100%; margin-left: 47px; padding-top: 0; }
	.vp-timeline__item::before { bottom: -10px; }
	.vp-money__row { flex-direction: column; gap: 4px; }
	.vp-money__value { font-size: 21px; }
	/* deep nesting would push a name off a 320px screen; cap the indent instead */
	.vp-tree__link { margin-left: calc(min(var(--depth, 0), 2) * 14px); padding: 10px 8px; }
	.vp-legend { gap: 6px 12px; }
	/* A list row is icon + body + a trailing date or pill. On a phone the trailing part
	   squeezes the title into a column three words wide, so it drops to its own line,
	   indented to the body. A leading .vp-date chip stays where it is. */
	.vp-list__item { flex-wrap: wrap; align-items: flex-start; }
	.vp-list__body { flex: 1 1 calc(100% - 48px); }
	.vp-list__item > .vp-due, .vp-list__item > .vp-pill { flex: 1 1 100%; margin-left: 48px; }
	.vp-toasts { left: 16px; right: 16px; max-width: none; }
	/* tables collapse to cards */
	.vp-table thead { display: none; }
	.vp-table, .vp-table tbody, .vp-table tr, .vp-table td { display: block; width: 100%; }
	.vp-table tr { border: 1px solid var(--vp-border); border-radius: 10px; margin: 10px 14px; padding: 6px 0; background: #fff; }
	.vp-card:not(.vp-card--flush) .vp-table tr { margin: 10px 0; }
	.vp-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 14px; border: 0; text-align: right; }
	.vp-table td::before { content: attr(data-label); flex: 0 0 38%; text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--vp-muted); font-weight: 600; }
	/* A cell that holds more than one element (a title plus its file name) would
	   otherwise lay those out side by side against the label and clip the second. */
	.vp-table td { flex-wrap: wrap; }
	.vp-table td > * { min-width: 0; overflow-wrap: anywhere; }
	.vp-table td .vp-block { flex: 1 0 100%; }
	.vp-table td[data-label=""]::before, .vp-table td:not([data-label])::before { display: none; }
	.vp-table td:not([data-label]), .vp-table td[data-label=""] { justify-content: flex-end; }
	.vp-table td.vp-num { text-align: right; }
	.vp-table tbody tr:hover td { background: transparent; }
	.vp-card:not(.vp-card--flush) .vp-table td:first-child { padding-left: 14px; }
}
/* ---------------------------------------------------------------- touch ergonomics
   Clients read this portal on phones and tablets, so on a coarse pointer every control
   is at least 44px on its short side (WCAG 2.5.5 / the iOS and Material floor), and no
   text falls below 12px. The rules key off the POINTER, not the width: an iPad in
   landscape is 1194px wide and still operated with a thumb, and a 1368px Surface in
   tablet mode is the same. A desktop mouse keeps the tighter, denser layout. */
@media (pointer: coarse) {
	.vp-btn { min-height: 44px; padding: 11px 18px; }
	.vp-btn--sm { min-height: 44px; padding: 11px 16px; font-size: 13.5px; }
	.vp-iconbtn { width: 44px; height: 44px; }
	.vp-nav__item { min-height: 44px; }
	.vp-subnav a { min-height: 44px; display: inline-flex; align-items: center; }
	.vp-file__label { min-height: 44px; }
	/* 16px keeps iOS Safari from zooming the page in when a field takes focus, which is
	   what makes a portal feel broken on an iPhone — the zoom never comes back out. */
	.vp-input, select.vp-input, textarea.vp-input { font-size: 16px; min-height: 46px; }
	textarea.vp-input { min-height: 96px; }
	.vp-switcher select { font-size: 15px; padding: 10px 32px 10px 14px; }
	/* legibility floor */
	.vp { font-size: 15px; }
	.vp-brand__tag { font-size: 12px; }
	.vp-list__meta, .vp-kpi__label, .vp-req__desc, .vp-msg__body { font-size: 13.5px; }
	.vp-fact__label, .vp-eyebrow, .vp-table td::before { font-size: 12px; }
	.vp small, .vp-due small, .vp-empty__hint, .vp-nav__firm, .vp-attach, .vp-response__label { font-size: 12.5px; }
	.vp-pill, .vp-count { font-size: 12.5px; }
	.vp-table th { font-size: 12px; }
	/* hover states never fire on a touch screen and leave the last-tapped row shaded */
	.vp-table tbody tr:hover td { background: transparent; }
}

/* A nav that scrolls sideways must look like it does, or clients never find the tabs
   past the fold. The fade is drawn on the container and pinned to its right edge. */
@media (max-width: 767.98px) {
	.vp-nav { position: sticky; }
	.vp-nav::after {
		content: "";
		position: sticky;
		right: 0;
		flex: 0 0 28px;
		align-self: stretch;
		margin-left: -28px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 72%);
		pointer-events: none;
	}
}

@media print {
	.vp-header, .vp-nav, .vp-toolbar, .vp-btn, .vp-compose, .vp-upload, .vp-toasts { display: none !important; }
	.vp-main { padding: 0; }
	.vp-card { box-shadow: none; break-inside: avoid; }
}