/* Customer dashboard only. dashboard.css holds the shared shell (field, app card, header, grid, panes, tables); everything
   specific to the customer's pages lives here, so the customer and bank dashboards can evolve independently. */

/* subpages: the overview, and one page each for an agent's mandate, a record, the evidence trail, transactions, a new agent */
.fx-hdr-back { display: none; }
body:not([data-cupage="overview"]) .fx-hdr-back { display: inline-flex; order: -1; flex-basis: 100%; margin: 0; }
.fx-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--fx-line); background: #fff; color: var(--fx-ink); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.fx-pill:hover { background: var(--fx-tint); text-decoration: none; }
body:not([data-cupage="overview"]) .fx-pill { display: none; }
body[data-cupage="overview"] #ac-trail, body[data-cupage="overview"] #cu-mandate, body[data-cupage="overview"] #cu-event { display: none; }
body[data-cupage="overview"] #cu-add-form { display: none !important; }
body[data-cupage="trail"] .fx-col--left, body[data-cupage="trail"] .fx-col--right, body[data-cupage="trail"] .fx-col--mid > .pane { display: none; }
body[data-cupage="trail"] .fx .fx-grid.cu-split { grid-template-columns: minmax(0, 1fr); }
body[data-cupage="trail"] #cu-trail-hint { display: block; }
body[data-cupage="new"] .fx-col--mid, body[data-cupage="new"] .fx-col--right, body[data-cupage="new"] .fx-balance, body[data-cupage="new"] #cu-agents, body[data-cupage="new"] #cu-add-toggle, body[data-cupage="new"] #cu-empty { display: none; }
body[data-cupage="new"] .fx .fx-grid.cu-split { grid-template-columns: minmax(0, 34rem); }
body[data-cupage="new"] #cu-add-form { margin-top: 0; padding-top: 0; border-top: 0; }
body[data-cupage="new"] .cu-add { display: none; }
body[data-cupage="transactions"] #ac-transactions .glass { margin: 0; }
/* header back link only on subpages (beats .fx .back) */
.fx .fx-hdr-back { display: none; }
body:not([data-cupage="overview"]) .fx .fx-hdr-back { display: inline-flex; }
/* overview: balance and agents on the left, statistics compact on top of the notifications, which run two across */
body[data-cupage="overview"] .fx-col--mid > .pane { flex: 0 0 auto; }
body[data-cupage="overview"] .fx-col--mid .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { body[data-cupage="overview"] .fx .fx-grid.cu-split { grid-template-columns: minmax(0, 1fr); } body[data-cupage="overview"] .fx-col--left { grid-row: auto; } body[data-cupage="overview"] .fx-col--mid, body[data-cupage="overview"] .fx-col--right { grid-column: auto; } }
/* one back link, in the header */
.fx .fx-section .fx-back { display: none; }

/* overview: agents left, transactions in the middle, needs-your-attention on the right */
body[data-cupage="overview"] .fx .fx-grid.cu-split { grid-template-columns: minmax(290px, 3fr) minmax(0, 6fr) minmax(290px, 3fr); }
@media (max-width: 1240px) { body[data-cupage="overview"] .fx .fx-grid.cu-split { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); } body[data-cupage="overview"] .fx-col--right { grid-column: 1 / -1; } }
body[data-cupage="overview"] .cu-notes { display: grid; gap: 8px; align-content: start; }
body[data-cupage="overview"] .fx .cu-notify { justify-content: flex-start; }
body[data-cupage="overview"] .fx .cu-notify > .cu-notes { flex: 0 0 auto; }

/* the agent page as a passport: three signed parts side by side; the long mandate record and the form stay for amending */
body[data-cusigned="1"] .cu-agent-grid, body[data-cusigned="1"] #cu-card, body[data-cusigned="1"] #cu-after, body[data-cusigned="1"] #cu-jwt-wrap, body[data-cusigned="1"] #cu-versions, body[data-cusigned="1"] #cu-actions, body[data-cusigned="1"] #cu-manage .actions__note { display: none; }
.pp { border: 1.5px solid var(--fx-ink); border-radius: var(--fx-radius); overflow: hidden; margin: 0 0 16px; background: #fff; }
.pp__strip { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--fx-tint); border-bottom: 1px solid var(--fx-line); font-size: .8125rem; }
.pp__name { font-weight: 800; font-size: .8125rem; }
.pp__verify { margin-left: auto; color: var(--fx-ink-2); }
.pp__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp__part { padding: 16px 20px 18px; border-left: 1px solid var(--fx-line); min-width: 0; }
.pp__part:first-child { border-left: 0; }
.pp__by { display: block; font-size: .75rem; font-weight: 600; color: var(--fx-ink-2); }
.pp__h { margin: 4px 0 8px; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.pp__h .small { font-weight: 500; color: var(--fx-ink-2); }
.pp .kv div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--fx-line); font-size: .8125rem; }
.pp .kv div:last-child { border-bottom: 0; }
.pp .kv dt { color: var(--fx-ink-2); } .pp .kv dd { margin: 0; overflow-wrap: anywhere; }
.pp__payees { display: grid; gap: 3px; }
.pp__payee .mono { color: var(--fx-ink-3); font-size: .75rem; }
@media (max-width: 899px) { .pp__cols { grid-template-columns: minmax(0, 1fr); } .pp__part { border-left: 0; border-top: 1px solid var(--fx-line); } .pp__part:first-child { border-top: 0; } }
body[data-cupage="new"] #ac-agents > .ws-h { display: none; }
body:not([data-cupage="overview"]) .fx-hello { display: none; }

/* the passport: one calm card. The cover carries the essentials; the signed parts are plain groups beside it */
.pp { border: 0; border-radius: 0; background: transparent; }
.pp__book { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--fx-line); }
.pp__cover { background: var(--fx-teal-deep); color: #fff; padding: 24px; display: grid; gap: 20px; align-content: start; }
.pp__wordmark { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--fx-lime); }
.pp__holder { display: grid; gap: 4px; }
.pp__holder b { font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
.pp__holder span { font-size: .875rem; color: rgba(255,255,255,.72); }
.pp__ids { margin: 0; display: grid; gap: 10px; }
.pp__ids div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: .875rem; }
.pp__ids dt { color: rgba(255,255,255,.6); }
.pp__ids dd { margin: 0; font-weight: 600; }
.pp__ids .tag { font-size: .68rem; }
.pp__issuer { font-size: .75rem; color: rgba(255,255,255,.55); margin-top: 4px; }
.pp__pages { display: grid; gap: 0; padding: 8px 0; }
.pp__page { padding: 16px 24px; border-bottom: 1px solid var(--fx-line); }
.pp__page:last-child { border-bottom: 0; }
.pp__h { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.pp__h span { font-weight: 500; color: var(--fx-ink-2); font-size: .875rem; }
.pp__signed { display: block; margin: 2px 0 10px; font-size: .78rem; color: var(--fx-ink-2); }
.pp__kv { margin: 0; display: grid; gap: 6px; }
.pp__kv div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 8px; font-size: .875rem; }
.pp__kv dt { color: var(--fx-ink-2); }
.pp__kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pp__payees { display: grid; gap: 3px; font-weight: 500; }
.pp__payee .mono { color: var(--fx-ink-3); font-size: .78rem; }
@media (max-width: 899px) { .pp__book { grid-template-columns: minmax(0, 1fr); } .pp__kv div, .pp__ids div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.fx .cu-note__head { flex-wrap: wrap; }
.fx .cu-note__head .mono { white-space: nowrap; margin-left: auto; }
.fx .tx__amt.pending { color: var(--fx-amber); }

/* approving a held payment: the banking-app screen. Amount first, one reason, approve or reject */
.fx .apv { max-width: 26rem; margin: 8px auto 0; }
.fx .apv__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.fx .apv__amt { display: block; font-size: 2.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; }
.fx .apv__amt small { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
.fx .apv__name { font-size: 1.125rem; font-weight: 700; }
.fx .apv__meta { margin-top: 4px; font-size: .875rem; color: var(--fx-ink-2); }
.fx .apv__avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--fx-line); display: grid; place-items: center; font-size: 1.375rem; font-weight: 800; color: var(--fx-ink-2); letter-spacing: .02em; }
.fx .apv__why { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--fx-line); font-size: .9375rem; line-height: 1.4; margin-bottom: 14px; }
.fx .apv__why p { margin: 0; }
.fx .apv__clock { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--fx-teal); color: #fff; display: grid; place-items: center; }
.fx .apv__clock svg { width: 20px; height: 20px; }
.fx .apv__q { margin: 0 0 22px; }
.fx .apv__q > summary { cursor: pointer; color: var(--fx-teal); font-weight: 700; font-size: .9375rem; list-style: none; }
.fx .apv__q > summary::-webkit-details-marker { display: none; }
.fx .apv__q p { margin: 8px 0 0; font-size: .875rem; color: var(--fx-ink-2); line-height: 1.5; }
.fx .apv__label { margin-top: 0; }
.fx .apv__actions { display: grid; gap: 10px; margin-top: 22px; }
.fx .apv__btn { appearance: none; border: 0; border-radius: 999px; background: var(--fx-teal-deep); color: #fff; font: inherit; font-weight: 800; font-size: 1.0625rem; padding: 16px 20px; cursor: pointer; }
.fx .apv__btn:hover { background: var(--fx-teal-2); }
.fx .apv__btn:focus-visible, .fx .apv__link:focus-visible { outline: 2px solid var(--fx-ink); outline-offset: 3px; }
.fx .apv__link { appearance: none; border: 0; background: none; color: var(--fx-teal); font: inherit; font-weight: 800; font-size: 1.0625rem; padding: 12px; cursor: pointer; }
.fx .apv__foot { margin: 14px 0 0; text-align: center; color: var(--fx-ink-2); }
body[data-cupage="event"] .fx #cu-event { max-width: 30rem; margin: 0 auto; }
/* the approval screen fills the page; the actions sit at the bottom */
body[data-cupage="event"] .fx { display: flex; flex-direction: column; }
body[data-cupage="event"] .fx #cu-event { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
body[data-cupage="event"] .fx #cu-event-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.fx .apv { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 60vh; }
.fx .apv__actions { margin-top: auto; padding-top: 28px; }
.fx .apv__label { margin-top: 12px; }
/* the note fills the space between the reason and the actions */
.fx .apv #cu-review-note { flex: 1 1 auto; min-height: 9rem; width: 100%; box-sizing: border-box; resize: none; }
.fx .apv__actions { margin-top: 0; }
body[data-cupage="new"] .fx .fx-grid.cu-split { justify-content: center; }
body:not([data-cupage="overview"]) .fx-tools { display: none; }
.fx #ac-trail { display: none; }
.fx .acct__tab[data-tab="trail"] { display: none !important; }

/* the mandate, as simple as approving a payment: four limits, who it may pay, one button */
body[data-cusigned="0"] .cu-agent-grid, body[data-cusigned="0"] #cu-card .mandate__head, body[data-cusigned="0"] #cu-kv, body[data-cusigned="0"] #cu-agent-kv, body[data-cusigned="0"] #cu-signer, body[data-cusigned="0"] .cu-agent-head, body[data-cusigned="0"] #cu-suppliers-signed { display: none; }
body[data-cusigned="0"] #cu-card { border: 0; background: transparent; padding: 0; margin: 0; }
body[data-cusigned="0"] #cu-card .mandate__body { padding: 0; }
body[data-cusigned="0"] .fx { display: flex; flex-direction: column; }
body[data-cusigned="0"] .fx #cu-mandate { flex: 1 1 auto; display: flex; flex-direction: column; max-width: 28rem; margin: 0 auto; width: 100%; }
body[data-cusigned="0"] .fx #cu-card { flex: 1 1 auto; }
.fx .cu-mform__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.fx .cu-mform__head .cu-new__title { margin: 0; }
.fx .cu-mform__head .link { font-size: .8125rem; }
.fx .cu-mform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.fx .cu-mform__grid .label { margin-top: 0; }
.fx .cu-mform__grid .input { width: 100%; box-sizing: border-box; }
.fx .cu-money { position: relative; }
.fx .cu-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fx-ink-2); font-weight: 600; }
.fx .cu-money .input { padding-left: 26px; }
.fx .cu-mform__max { margin: 8px 0 18px; color: var(--fx-ink-2); }
.fx .cu-mform__label { margin: 0 0 6px; }
.fx .cu-search { position: relative; margin-bottom: 10px; }
.fx .cu-search .input { width: 100%; box-sizing: border-box; }
.fx .cu-search__results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; box-shadow: 0 12px 28px -14px rgba(0,0,0,.25); }
.fx .cu-search__results button { display: grid; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--fx-ink); cursor: pointer; }
.fx .cu-search__results button:hover, .fx .cu-search__results button:focus-visible { background: var(--fx-tint); outline: none; }
.fx .cu-search__results small, .fx .cu-payee small { font-size: .78rem; color: var(--fx-ink-2); }
.fx .cu-search__none { padding: 8px 10px; }
.fx .cu-payees { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fx .cu-payee { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--fx-line-2); background: #fff; }
.fx .cu-payee__body { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; }
.fx .cu-payee__body b { font-size: .9375rem; }
.fx .cu-payee__body .input { width: 100%; box-sizing: border-box; margin-top: 4px; }
.fx .cu-payee__remove { font-size: .8125rem; flex: 0 0 auto; }
.fx .cu-payees__empty { padding: 10px 2px; color: var(--fx-ink-2); }
body[data-cusigned="0"] #cu-actions { display: grid; margin-top: auto; padding-top: 24px; }
body[data-cusigned="0"] #btn-sign-mandate { appearance: none; border: 0; border-radius: 999px; background: var(--fx-teal-deep); color: #fff; font: inherit; font-weight: 800; font-size: 1.0625rem; padding: 16px 20px; cursor: pointer; }
body[data-cusigned="0"] #btn-sign-mandate:disabled { background: var(--fx-line-2); color: var(--fx-ink-2); cursor: default; }
body[data-cusigned="0"] #btn-cancel-amend { margin-top: 8px; }
@media (max-width: 640px) { .fx .cu-mform__grid { grid-template-columns: minmax(0, 1fr); } }
.fx .apv__clock--ok { background: var(--fx-green); }
.fx .apv__clock--no { background: var(--fx-ink-2); }
.fx .apv__note { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--fx-tint); font-style: italic; color: var(--fx-ink-2); }
.fx .apv__result { margin: 0; font-size: 1rem; font-weight: 600; }
.fx .apv--done .apv__actions { margin-top: auto; padding-top: 28px; }
.fx .apv__actions a.apv__link { text-align: center; text-decoration: none; }
.fx .cu-payee__acct { color: var(--fx-ink); }
.fx .cu-payee__add { font-size: .8125rem; justify-self: start; }