/* Vaulex Group – portal theme (shared by the client and ops panels).
   Palette from vaulex.co.uk: navy #0b1b3d, slate #0f172a, cyan #0ea5ce / #0284c7,
   light grounds #f7fafc / #f1f7fa, borders #e2e8f0. Inter throughout. */

:root {
  --vx-navy: #0b1b3d;
  --vx-navy-2: #060f21;
  --vx-cyan: #0ea5ce;
  --vx-cyan-2: #0284c7;
  --vx-ink: #0f172a;
  --vx-muted: #5a6b80;
  --vx-line: #e2e8f0;
  --vx-ground: #f4f8fb;
}

.fi-body { background: var(--vx-ground); }

/* Sidebar: navy for ops, white for clients (Filament 4 class names) */
.fi-panel-ops .fi-sidebar { background: linear-gradient(180deg, var(--vx-navy) 0%, var(--vx-navy-2) 100%) !important; border-color: rgba(255,255,255,.06) !important; }
.fi-panel-ops .fi-sidebar-header { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.fi-panel-ops .fi-sidebar-group-label { color: rgba(255,255,255,.55) !important; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; }
.fi-panel-ops .fi-sidebar-group-btn, .fi-panel-ops .fi-sidebar-group-btn svg { color: rgba(255,255,255,.5) !important; }
.fi-panel-ops .fi-sidebar-item-btn { color: rgba(255,255,255,.82) !important; }
.fi-panel-ops .fi-sidebar-item-btn svg { color: rgba(255,255,255,.55) !important; }
.fi-panel-ops .fi-sidebar-item-btn:hover { background: rgba(255,255,255,.07) !important; }
.fi-panel-ops .fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: rgba(14,165,206,.22) !important; box-shadow: inset 0 0 0 1px rgba(14,165,206,.35); }
.fi-panel-ops .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-panel-ops .fi-sidebar-item.fi-active .fi-sidebar-item-btn svg,
.fi-panel-ops .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #fff !important; }
.fi-panel-ops .fi-sidebar-item-label { color: inherit; }

/* Client sidebar stays light; active row is a soft cyan card */
.fi-panel-client .fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: rgba(14,165,206,.12) !important; box-shadow: inset 0 0 0 1px rgba(14,165,206,.25); }
.fi-panel-client .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-panel-client .fi-sidebar-item.fi-active .fi-sidebar-item-btn svg { color: var(--vx-cyan-2) !important; }

/* "Ops" pill after the logo in the top bar (the logo itself is the shared brand) */
.vx-ops-pill { display: inline-block; margin-left: .55rem; padding: .15rem .5rem; border-radius: 999px; background: var(--vx-navy); color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; vertical-align: middle; }

/* Nav rows as soft cards (both panels) */
.fi-sidebar-nav-groups { gap: .35rem; }
.fi-sidebar-item-btn { border-radius: .7rem !important; }

/* Cards and sections */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn { border-radius: 1rem; border: 1px solid var(--vx-line); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.fi-section-header-heading { color: var(--vx-navy); }

/* Nothing ever runs off the right-hand edge.
   Filament lays action rows out as one nowrap flex line; on a screen narrower
   than the row, the last buttons simply leave the page. Every row of actions
   in either panel wraps instead, and every wide table scrolls inside its own
   box rather than pushing the page sideways. */
.fi-header { flex-wrap: wrap; row-gap: .75rem; }
.fi-header > * { min-width: 0; max-width: 100%; }
.fi-header > .shrink-0 { flex-shrink: 1; }
.fi-header-actions-ctn,
.fi-header .fi-ac,
.fi-ac.fi-align-start,
.fi-ac.fi-align-end,
.fi-modal-footer-actions,
.fi-fo-actions,
.fi-form-actions,
.fi-ta-header-toolbar,
.fi-ta-actions,
.fi-in-actions {
    display: flex;
    flex-wrap: wrap !important;
    row-gap: .5rem;
    min-width: 0;
    max-width: 100%;
}
/* A button whose label is long stays inside the row rather than forcing it wider. */
.fi-btn { max-width: 100%; }
.fi-btn .fi-btn-label { overflow-wrap: anywhere; }
/* Wide tables scroll in their own box. */
.fi-ta-ctn { max-width: 100%; }
.fi-ta-content { overflow-x: auto; }
/* Long words and references never widen a card. */
.fi-section-content, .fi-in-entry, .fi-ta-text { min-width: 0; overflow-wrap: anywhere; }
/* Build 17: tables fit the page. Filament keeps every table cell on one line, which on a
   laptop made most ops lists wider than the screen – a sideways scrollbar inside each one.
   Cells now wrap between words, as a document would; an email address or reference breaks
   only if it must (vx-break); a reference stays whole (vx-keep: the first line of the cell)
   and so do dates and a row's buttons (vx-nowrap: the whole cell).
   Filament's own CSS sits in cascade layers, so these plain rules win over it. */
.fi-ta-ctn .fi-ta-table > tbody,
.fi-ta-ctn .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody { white-space: normal; }
.fi-ta-ctn .fi-ta-table > tbody .fi-ta-text,
.fi-ta-ctn .fi-ta-table > tbody .fi-ta-text-item { overflow-wrap: break-word; word-break: normal; }
.fi-ta-ctn .fi-ta-table .fi-ta-header-cell:not(.fi-wrapped) { white-space: normal; }
.fi-ta-ctn .fi-ta-table > tbody .vx-break,
.fi-ta-ctn .fi-ta-table > tbody .vx-break .fi-ta-text-item,
.fi-ta-ctn .fi-ta-table > tbody .vx-break .fi-ta-text-description { overflow-wrap: anywhere; }
.fi-ta-ctn .fi-ta-table > tbody .vx-nowrap { white-space: nowrap; }
.fi-ta-ctn .fi-ta-table > tbody .vx-keep .fi-ta-text-item { white-space: nowrap; }
/* On a smaller laptop, a little less space between columns (the first and last keep theirs).
   Not on a phone, where the lists are stacked into cards with their own spacing. */
@media (min-width: 40rem) and (max-width: 1279.98px) {
    .fi-ta-ctn .fi-ta-table > tbody .fi-ta-cell:not(:first-child) .fi-ta-text:not(.fi-inline) { padding-inline: .5rem; }
    .fi-ta-ctn .fi-ta-table .fi-ta-header-cell:not(:first-of-type):not(:last-of-type) { padding-inline: .5rem; }
}

@media (max-width: 1024px) {
    .fi-header-actions-ctn, .fi-header .fi-ac { width: 100%; }
}

/* Login page */
.fi-simple-layout { background: radial-gradient(1200px 600px at 20% -10%, rgba(14,165,206,.18), transparent 60%), linear-gradient(160deg, var(--vx-navy) 0%, var(--vx-navy-2) 100%); }
.fi-simple-main { border-radius: 1.25rem; box-shadow: 0 30px 60px -30px rgba(2,6,23,.6); }
.fi-simple-header .fi-logo { height: 3.25rem !important; }
.vx-login-intro { text-align: center; margin: -.25rem 0 1rem; }
.vx-login-kicker { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vx-cyan-2); font-weight: 700; }
.vx-login-text { color: var(--vx-muted); font-size: .9rem; margin-top: .25rem; }
.vx-login-help { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: .8rem; background: #f1f7fa; border: 1px solid #d7e1ec; font-size: .8rem; line-height: 1.55; color: #31465c; }
.vx-login-help p + p { margin-top: .5rem; }
.vx-login-help a { color: var(--vx-cyan-2); font-weight: 600; text-decoration: underline; }

/* Client dashboard */
.vx-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: 1.1rem; color: #fff; background: linear-gradient(135deg, #0284c7 0%, var(--vx-navy) 78%); }
.vx-hero-kicker { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.vx-hero-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: .2rem 0 .3rem; }
.vx-hero-sub { opacity: .9; font-size: .95rem; }
.vx-hero-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.vx-badge { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.vx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.vx-card { display: block; padding: 1rem 1.1rem; border-radius: .9rem; border: 1px solid var(--vx-line); background: #fff; text-decoration: none; color: var(--vx-ink); transition: border-color .15s, box-shadow .15s; }
.vx-card:hover { border-color: var(--vx-cyan); box-shadow: 0 8px 24px -16px rgba(14,165,206,.6); }
.vx-card-title { font-weight: 700; color: var(--vx-navy); }
.vx-card-meta { font-size: .8rem; color: var(--vx-muted); margin-top: .15rem; }
.vx-card-addr { font-size: .85rem; margin-top: .5rem; color: #31465c; }

@media (max-width: 640px) {
  .vx-hero { flex-direction: column; align-items: flex-start; }
  .vx-hero-title { font-size: 1.25rem; }
}

/* Client "what we need from you" */
.vx-next { background: #fff; border: 1px solid var(--vx-line); border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.vx-next-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.vx-next-title { font-size: 1.15rem; font-weight: 800; color: var(--vx-navy); margin: .15rem 0 0; }
.vx-next-open { font-size: .85rem; font-weight: 700; color: var(--vx-cyan-2); text-decoration: none; white-space: nowrap; }
.vx-next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.vx-next-steps li { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; border-radius: .8rem; border: 1px solid var(--vx-line); background: #f8fafc; }
.vx-next-steps li.is-done { opacity: .72; background: #f0fdf4; border-color: #bbf7d0; }
.vx-next-steps li.is-waiting { background: #f1f7fa; border-color: #bae6fd; }
.vx-next-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--vx-navy); color: #fff; font-size: .75rem; font-weight: 800; flex: none; margin-top: .1rem; }
.is-done .vx-next-n { background: #10b981; }
.vx-next-body { min-width: 0; }
.vx-next-step-title { font-weight: 700; color: var(--vx-navy); }
.vx-next-step-text { font-size: .85rem; color: #31465c; margin-top: .15rem; }
.vx-next-cta { display: inline-block; margin-top: .5rem; background: var(--vx-cyan-2); color: #fff !important; font-size: .8rem; font-weight: 700; padding: .4rem .8rem; border-radius: .5rem; text-decoration: none; }
.vx-next-cta:hover { background: #0369a1; }
.vx-next-wait { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 600; color: #0369a1; }

/* Needs-you bar */
.vx-needs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .85rem; margin-bottom: 1rem; border-radius: .9rem; background: #0f172a; border: 1px solid #1e293b; }
.vx-needs-label { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #f5b840; margin-right: .25rem; }
.vx-needs-label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f5b840; margin-right: .45rem; box-shadow: 0 0 8px rgba(245,184,64,.7); }
.vx-chip { display: inline-flex; flex-direction: column; gap: .05rem; padding: .35rem .7rem; border-radius: .6rem; text-decoration: none; border: 1px solid transparent; line-height: 1.2; }
.vx-chip strong { font-size: .8rem; }
.vx-chip span { font-size: .7rem; opacity: .8; }
.vx-chip-gold { background: rgba(245,184,64,.14); border-color: rgba(245,184,64,.45); color: #fbd38d; }
.vx-chip-red { background: rgba(225,29,72,.14); border-color: rgba(225,29,72,.45); color: #fda4af; }
.vx-chip-teal { background: rgba(14,165,206,.14); border-color: rgba(14,165,206,.45); color: #7dd3fc; }
.vx-chip-green { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.45); color: #6ee7b7; }
.vx-chip:hover { filter: brightness(1.15); }
.fi-panel-client .vx-needs { background: #fff7e6; border-color: #fbd38d; }
.fi-panel-client .vx-needs-label { color: #b7791f; }
.fi-panel-client .vx-chip-gold { background: #fff; border-color: #f5b840; color: #7c4a03; }

/* Client thread */
.vx-thread { display: flex; flex-direction: column; gap: .75rem; }
.vx-msg { padding: .8rem 1rem; border-radius: .9rem; border: 1px solid var(--vx-line); max-width: 780px; }
.vx-msg-me { background: #f1f7fa; border-color: #d7e1ec; margin-left: 2rem; }
.vx-msg-them { background: #fff; }
.vx-msg-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; color: var(--vx-muted); margin-bottom: .35rem; }
.vx-msg-meta strong { color: var(--vx-navy); }
.vx-msg-body { white-space: pre-wrap; line-height: 1.55; font-size: .9rem; }
.vx-msg-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.vx-msg-files a { font-size: .75rem; border: 1px solid #cbd5e1; border-radius: 999px; padding: .15rem .6rem; text-decoration: none; color: var(--vx-navy); }
.vx-msg-files a span { color: var(--vx-muted); }
.vx-thread-empty { color: var(--vx-muted); font-size: .9rem; }
.vx-form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.vx-form-hint { font-size: .8rem; color: var(--vx-muted); }

/* Client verify / formation pages */
.vx-verify-intro { background: #fff; border: 1px solid var(--vx-line); border-left: 3px solid var(--vx-cyan); border-radius: .9rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-size: .9rem; color: #31465c; line-height: 1.55; }
.vx-verify-intro p { margin: 0; }
.vx-verify-intro p + p { margin-top: .5rem; }
.vx-verify-intro strong { color: var(--vx-navy); }

/* ---- the post widget on the client dashboard ---- */
.vx-post-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: .25rem; }
.vx-post-stat { padding: .8rem 1rem; border-radius: .8rem; border: 1px solid var(--vx-line); background: #f8fafc; display: flex; flex-direction: column; gap: .1rem; }
.vx-post-n { font-size: 1.5rem; font-weight: 800; color: var(--vx-navy); line-height: 1.1; }
.vx-post-l { font-size: .78rem; color: var(--vx-muted); }
.vx-post-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.vx-post-row { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; border-radius: .7rem; border: 1px solid var(--vx-line); background: #fff; text-decoration: none; color: var(--vx-ink); transition: border-color .15s; }
.vx-post-row:hover { border-color: var(--vx-cyan); }
.vx-post-row.is-new { border-left: 3px solid var(--vx-cyan); }
.vx-post-row.is-new .vx-post-title { font-weight: 700; }
.vx-post-title { font-size: .95rem; }
.vx-post-meta { font-size: .78rem; color: var(--vx-muted); }

/* ---- shared helpers for HTML blocks rendered inside Filament (its Tailwind build does not carry arbitrary utilities) ---- */
.vx-doclist { list-style: none; margin: 0; padding: 0; }
.vx-doclist li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .4rem 0; border-bottom: 1px solid var(--vx-line); font-size: .9rem; }
.vx-doclist li:last-child { border-bottom: 0; }
.vx-doclist a { color: var(--vx-cyan-2); text-decoration: underline; font-weight: 600; }
.vx-doclist a.vx-doc-dl { color: var(--vx-muted); font-weight: 400; }
.vx-doclist .vx-doc-meta { color: var(--vx-muted); font-size: .8rem; }
.vx-kv { display: grid; grid-template-columns: 1fr; gap: .45rem 1.5rem; font-size: .9rem; margin: 0; }
@media (min-width: 900px) { .vx-kv { grid-template-columns: 1fr 1fr; } }
.vx-kv > div { display: flex; gap: .75rem; }
.vx-kv dt { flex: 0 0 8.5rem; color: var(--vx-muted); margin: 0; }
.vx-kv dd { margin: 0; color: var(--vx-ink); }
.vx-prose { font-size: .92rem; line-height: 1.6; color: var(--vx-ink); }
.vx-prose p { margin: 0 0 .6rem; }
.vx-prose .vx-note { color: var(--vx-muted); font-size: .85rem; margin-top: .75rem; }
.vx-callout { font-size: .9rem; border-radius: .6rem; background: #f8fafc; border: 1px solid var(--vx-line); padding: .7rem .9rem; margin-bottom: .75rem; }
.vx-empty { font-size: .9rem; color: var(--vx-muted); margin: 0; }

/* ---- Billing & invoices (client) ---- */
.vx-bill { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1000px) { .vx-bill { grid-template-columns: 1fr 1fr; } .vx-bill-wide { grid-column: 1 / -1; } }
.vx-bill-card { background: #fff; border: 1px solid var(--vx-line); border-radius: .9rem; padding: 1.1rem 1.25rem; }
.vx-bill-h2 { font-size: 1.05rem; font-weight: 800; color: var(--vx-ink); margin: 0 0 .75rem; }
.vx-bill-h3 { font-size: .9rem; font-weight: 700; color: var(--vx-ink); margin: 1.1rem 0 .4rem; }
.vx-bill-plan { padding: .75rem 0; border-top: 1px solid var(--vx-line); }
.vx-bill-plan:first-of-type { border-top: 0; padding-top: 0; }
.vx-bill-plan-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.vx-bill-plan-name { font-weight: 800; color: var(--vx-ink); }
.vx-bill-plan-meta { font-size: .82rem; color: var(--vx-muted); margin-top: .15rem; }
.vx-bill-plan-price { font-weight: 900; font-size: 1.35rem; color: var(--vx-ink); letter-spacing: -.02em; white-space: nowrap; }
.vx-bill-plan-price span { font-size: .8rem; font-weight: 600; color: var(--vx-muted); }
.vx-bill-lines { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .88rem; }
.vx-bill-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; border-top: 1px dashed var(--vx-line); color: var(--vx-ink); }
.vx-bill-lines li span:last-child { font-weight: 600; white-space: nowrap; }
.vx-bill-lines li.is-total { font-weight: 800; border-top: 1px solid var(--vx-line); }
.vx-bill-cardrow { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: .7rem; background: linear-gradient(135deg, #0b1b3d, #0f2a5c); color: #fff; }
.vx-bill-brand { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.vx-bill-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; letter-spacing: .06em; }
.vx-bill-exp { font-size: .8rem; opacity: .85; }
.vx-bill-twrap { overflow-x: auto; }
.vx-bill-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vx-bill-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vx-muted); padding: .4rem .5rem; border-bottom: 1px solid var(--vx-line); }
.vx-bill-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--vx-line); vertical-align: top; color: var(--vx-ink); }
.vx-bill-what { color: var(--vx-muted); font-size: .82rem; max-width: 34rem; }
.vx-bill-status { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 999px; background: #f1f5f9; color: #475569; }
.vx-bill-status.is-paid { background: #dcfce7; color: #166534; }
.vx-bill-status.is-open { background: #fef3c7; color: #92400e; }
.vx-bill-status.is-void { background: #fee2e2; color: #991b1b; }
.vx-bill-links a { color: var(--vx-cyan-2); font-weight: 600; text-decoration: underline; margin-right: .6rem; }
.vx-login-notice { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: .6rem; background: #fef3c7; color: #92400e; font-size: .88rem; font-weight: 600; }

/* The "you have named more people than your plan covers" notice on the company-details form. */
.vx-verify-note { padding:.85rem 1rem; border-radius:.75rem; background:#fef3c7; border:1px solid #fcd34d; color:#78350f; font-weight:600; line-height:1.55; }

/* Client "Add a service" */
.vx-svc-picker { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; font-size:.9rem; }
.vx-svc-picker select { padding:.45rem .6rem; border:1px solid var(--vx-line); border-radius:.55rem; background:#fff; color:var(--vx-ink); font:inherit; }
.vx-svc-lede { color:var(--vx-muted); max-width:70ch; margin:0 0 1.25rem; }
.vx-svc-empty { color:var(--vx-muted); }
.vx-svc-h2 { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vx-muted); font-weight:800; margin:1.6rem 0 .6rem; }
.vx-svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.85rem; }
.vx-svc-card { display:flex; flex-direction:column; gap:.4rem; background:#fff; border:1px solid var(--vx-line); border-radius:.9rem; padding:1rem 1.1rem; box-shadow:0 1px 2px rgba(15,23,42,.04); min-width:0; }
.vx-svc-top { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.vx-svc-top h3 { margin:0; font-size:1rem; font-weight:800; color:var(--vx-ink); }
.vx-svc-price { font-weight:800; color:var(--vx-navy); white-space:nowrap; font-size:.9rem; }
.vx-svc-strap { margin:0; font-size:.9rem; color:var(--vx-ink); }
.vx-svc-desc { margin:0; font-size:.85rem; color:var(--vx-muted); line-height:1.55; }
.vx-svc-act { margin-top:auto; padding-top:.6rem; }

/* Customer tools */
.vx-tool-btn { display:inline-block; padding:.6rem 1.1rem; border-radius:.6rem; background:var(--vx-navy); color:#fff !important; font-weight:700; font-size:.9rem; text-decoration:none; border:1px solid var(--vx-navy); cursor:pointer; }
.vx-tool-btn:hover { filter:brightness(1.12); }
.vx-tool-btn[disabled] { opacity:.6; cursor:progress; }
.vx-tool-btn.ghost { background:#fff; color:var(--vx-navy) !important; border-color:var(--vx-line); }
.vx-tool-run { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:1.1rem 0 0; }
.vx-tool-note { font-size:.85rem; color:var(--vx-muted); }
.vx-tool-spend { font-size:.85rem; color:var(--vx-muted); margin:.9rem 0 0; }
.vx-tool-out { margin-top:1.5rem; background:#fff; border:1px solid var(--vx-line); border-radius:1rem; padding:1.25rem 1.4rem; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.vx-tool-out h2 { margin:0 0 .75rem; font-size:1.05rem; font-weight:800; color:var(--vx-ink); }
.vx-tool-body { color:var(--vx-ink); line-height:1.65; font-size:.95rem; overflow-wrap:anywhere; }
.vx-tool-caveat { margin:1rem 0 0; font-size:.82rem; color:var(--vx-muted); line-height:1.55; }
.vx-tool-img { max-width:min(100%,520px); border-radius:.8rem; border:1px solid var(--vx-line); display:block; }

/* Build 14 (28 Sep 2026): copy panels – values to paste into nCino, Companies House, WebFiling, Stripe */
.vx-copy { font-size: .875rem; }
.vx-copy + .vx-copy { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--vx-line); }
.vx-copy-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; }
.vx-copy-title { font-weight: 700; color: var(--vx-navy); }
.vx-copy-intro { color: var(--vx-muted); font-size: .8125rem; margin-top: .15rem; max-width: 60ch; }
.vx-copy-status { display: inline-block; margin-top: .4rem; padding: .15rem .55rem; border-radius: 999px; background: #eef6fb; color: var(--vx-cyan-2); font-size: .75rem; font-weight: 600; }
.vx-copy-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.vx-copy-open, .vx-copy-all { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .8rem; border-radius: .6rem; font-size: .8125rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--vx-line); background: #fff; color: var(--vx-navy); }
.vx-copy-open { background: var(--vx-navy); color: #fff; border-color: var(--vx-navy); }
.vx-copy-all:hover, .vx-copy-btn:hover { border-color: var(--vx-cyan); color: var(--vx-cyan-2); }
.vx-copy-rows { border: 1px solid var(--vx-line); border-radius: .75rem; overflow: hidden; background: #fff; }
.vx-copy-row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr auto; align-items: center; gap: .75rem; padding: .45rem .75rem; border-top: 1px solid var(--vx-line); }
.vx-copy-row:first-child { border-top: 0; }
.vx-copy-row:nth-child(even) { background: #fafcfd; }
.vx-copy-label { color: var(--vx-muted); font-size: .8125rem; }
.vx-copy-value { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; color: var(--vx-ink); font-weight: 600; }
.vx-copy-missing { color: #b45309; font-weight: 500; font-style: italic; }
.vx-copy-btn { padding: .25rem .7rem; border-radius: .5rem; border: 1px solid var(--vx-line); background: #fff; color: var(--vx-navy); font-size: .75rem; font-weight: 700; cursor: pointer; min-width: 4.5rem; }
@media (max-width: 640px) { .vx-copy-row { grid-template-columns: 1fr auto; } .vx-copy-label { grid-column: 1 / -1; } }

/* Quick-reply template picker hint */
.vx-fill-hint { color: #b45309; font-size: .8125rem; }

/* Where orders come from (ops dashboard) */
.vx-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.vx-source-row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 2rem; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .875rem; color: var(--vx-ink); }
.vx-source-row b { text-align: right; }
.vx-source-bar { height: .5rem; border-radius: 999px; background: #eef3f7; overflow: hidden; }
.vx-source-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0284c7, #0ea5ce); }
@media (max-width: 900px) { .vx-sources { grid-template-columns: 1fr; } }

/* Build 17: what the photo check said, under the upload */
.vx-photo-note { display: block; font-weight: 500; }
.vx-photo-note-refuse { color: #be123c; }
.vx-photo-note-soft { color: #b45309; }
.vx-photo-note-ok { color: #047857; }

/* Build 23: the "Sharing your Mailroom" guide */
.vx-guide-list { margin: .35rem 0 0; padding-left: 1.1rem; list-style: disc; font-size: .9rem; line-height: 1.5; color: var(--vx-ink, #0f172a); }
.vx-guide-list li { margin: .2rem 0; }
.vx-link { color: var(--vx-navy); font-weight: 700; text-decoration: underline; }

/* Build 24: the case screen – the facts column beside the work, compact sections.
   Build 26.1: the column flows with the page – it was pinned with its own scrollbar, which on a
   short window meant a scrollbar inside the page ("No scrolling" – Zak, 12 Oct 2026). */
@media (min-width: 1280px) {
  .vx-case-side { align-self: start; padding-right: .15rem; }
}
.vx-case-side .fi-sc-section-content { font-size: .85rem; }
/* copy lists in the narrow column and under a step: label above value, Copy on the right */
.vx-case-side .vx-copy-row, .vx-step-panel .vx-copy-row { grid-template-columns: 1fr auto; row-gap: .1rem; padding: .4rem .6rem; }
.vx-case-side .vx-copy-label, .vx-step-panel .vx-copy-label { grid-column: 1 / -1; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.vx-case-side .vx-copy-value, .vx-step-panel .vx-copy-value { font-size: .84rem; }
.vx-case-side .vx-copy-btn, .vx-step-panel .vx-copy-btn { min-width: 3.6rem; padding: .2rem .5rem; }
.vx-case-side .vx-copy-head, .vx-step-panel .vx-copy-head { margin-bottom: .4rem; }
.vx-step-panel .vx-copy-title { font-size: .8rem; }
.vx-next b { font-weight: 700; }

/* Build 25: a small button beside a field ("Draft again") keeps its words on one line. */
.fi-btn.vx-nowrap, .fi-btn.vx-nowrap .fi-btn-label { white-space: nowrap; }

/* Build 27: the review card on the client dashboard – once a service has been delivered */
.vx-review .vx-next-head { align-items: center; gap: 1rem; }
.vx-review-text { margin: .35rem 0 0; font-size: .9rem; color: #475569; max-width: 48rem; }
.vx-review-cta { margin-top: 0; white-space: nowrap; }
@media (max-width: 640px) { .vx-review .vx-next-head { flex-direction: column; align-items: flex-start; } }