/* Identity mode of the workspace: sign-in, invitation and own account.
   Additive layout only; every visual value comes from the shared tokens. */
.identity-panel { max-width: var(--np-refund-login-width); }
.identity-panel h2 { font-size: var(--np-text-2xl); }
.identity-panel .identity-facts { margin-block: var(--np-space-4); }
.identity-form { display: grid; gap: var(--np-space-5); margin-top: var(--np-space-5); }
.identity-form p { margin: 0; }
/* An empty status line under the form takes no room until it has a message. */
.identity-form .workspace-load:empty { min-height: 0; margin-top: calc(var(--np-space-5) * -1); }
.identity-code input { font-family: var(--np-font-code); font-variant-numeric: tabular-nums; letter-spacing: var(--np-tracking-identity); }
.identity-notice { margin-block: var(--np-space-4); }
.identity-or { display: flex; align-items: center; gap: var(--np-space-3); margin: var(--np-space-2) 0 var(--np-space-4); color: var(--np-color-text-muted); font-size: var(--np-text-sm); }
.identity-or::before, .identity-or::after { content: ""; flex: 1; height: var(--np-border-hairline); background: var(--np-color-border); }
.identity-google { width: 100%; }
/* Who is signed in and the one sign-out live at the bottom of the sidebar,
   on every page, above the development block. */
.sidebar-account { display: grid; gap: var(--np-space-3); margin-top: auto; padding: var(--np-space-4) var(--np-space-3) 0; border-top: var(--np-border-hairline) solid var(--np-color-border-inverse); }
.sidebar-account + * { margin-top: 0; }
.identity-user { min-width: 0; overflow-wrap: anywhere; color: var(--np-color-text-inverse-muted); font-size: var(--np-text-sm); line-height: var(--np-leading-compact); }
.identity-user:empty { display: none; }
.sidebar-account .btn { width: 100%; background: var(--np-color-transparent); border-color: var(--np-color-border-inverse); color: var(--np-color-text-inverse); }
.sidebar-account .btn:hover:enabled { background: var(--np-color-sidebar-hover); border-color: var(--np-color-text-inverse-subtle); }
/* Signed in: the sidebar already names the page and holds the sign-out, so
   the repeated page title (kept for screen readers) and the second sign-out
   in the transactions toolbar are not shown. */
.app-shell:not(:has(#identity-nav[hidden])) .page-heading { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-shell:not(:has(#identity-nav[hidden])) [data-workspace-action="logout"] { display: none; }
.np-info-surface h3 { margin-top: 0; }
/* Team (U2): the shared panel, table, badge and button styles, only spaced. */
.team-limits { margin: 0 0 var(--np-space-3); font-size: var(--np-text-sm); }
.team-form { max-width: var(--np-refund-login-width); }
.team-table td { vertical-align: middle; }
.team-panel-row > td { white-space: normal; }
.team-panel-row .np-info-surface, .team-panel-row .identity-notice { margin-block: var(--np-space-2); }
/* Before sign-in the navigation stays hidden. Sign-in, code, invitation and
   their errors then split the page: the brand half on petrol with the logo,
   the card and QR illustration and the claim, and the form half on white,
   without a card frame. The page heading repeats the form title, so it stays
   for screen readers only. On a phone the brand half is a band above. */
.identity-art, .identity-claim { display: none; }
.app-shell:has(#identity-nav[hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--np-viewport-height); padding: 0; background: var(--np-color-surface); }
.app-shell:has(#identity-nav[hidden]) .sidebar { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--np-space-8); width: auto; height: auto; min-height: var(--np-viewport-height); padding: var(--np-space-12) var(--np-space-14); background: var(--np-color-ink); overflow: hidden; transform: none; visibility: visible; transition: none; }
.app-shell:has(#identity-nav[hidden]) .brand { margin: 0; padding: 0; }
.app-shell:has(#identity-nav[hidden]) .sidebar > :not(.brand, .identity-art, .identity-claim), .app-shell:has(#identity-nav[hidden]) .topbar { display: none; }
.app-shell:has(#identity-nav[hidden]) .identity-art { position: relative; display: block; width: 100%; max-width: var(--np-identity-art-width); margin: 0 auto; aspect-ratio: var(--np-identity-art-ratio); }
.identity-art-glow { position: absolute; inset: 10% 6%; border-radius: var(--np-radius-circle); background: radial-gradient(closest-side, var(--np-color-identity-glow), var(--np-color-transparent)); filter: blur(var(--np-identity-art-blur)); }
.identity-art-card { position: absolute; left: 0; top: 8%; width: 86%; height: auto; rotate: var(--np-identity-art-tilt-card); filter: drop-shadow(var(--np-shadow-identity-card)); animation: identity-float var(--np-motion-float) var(--np-ease-in-out) infinite; }
.identity-art-qr { position: absolute; right: 2%; top: 0; width: 30%; padding: 4%; border-radius: var(--np-radius-qr); background: var(--np-color-surface); box-shadow: var(--np-shadow-identity-qr); rotate: var(--np-identity-art-tilt-qr); animation: identity-float var(--np-motion-float) var(--np-ease-in-out) var(--np-motion-float-offset) infinite; }
.identity-art-qr img { display: block; width: 100%; height: auto; }
@keyframes identity-float { 50% { translate: 0 calc(var(--np-identity-art-float) * -1); } }
@media(prefers-reduced-motion:reduce) { .identity-art-card, .identity-art-qr { animation: none; } }
.app-shell:has(#identity-nav[hidden]) .identity-claim { display: block; margin: 0; color: var(--np-color-text-inverse); font-size: var(--np-text-7xl); font-weight: var(--np-weight-bold); line-height: var(--np-leading-heading); letter-spacing: var(--np-tracking-heading); }
.app-shell:has(#identity-nav[hidden]) .workspace { display: grid; place-items: center; width: auto; max-width: none; margin: 0; padding: var(--np-space-12) var(--np-space-6); }
.app-shell:has(#identity-nav[hidden]) main { width: 100%; min-height: 0; max-width: var(--np-identity-form-width); padding: 0; }
.app-shell:has(#identity-nav[hidden]) .page-heading { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-shell:has(#identity-nav[hidden]) .panel { max-width: none; margin-bottom: var(--np-space-6); padding: 0; border: 0; background: var(--np-color-transparent); box-shadow: none; }
.app-shell:has(#identity-nav[hidden]) .panel h2 { margin-top: 0; }
@media(max-width:900px) {
  .app-shell:has(#identity-nav[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .app-shell:has(#identity-nav[hidden]) .sidebar { align-items: center; gap: var(--np-space-7); min-height: 0; padding: var(--np-space-7) var(--np-space-4) var(--np-space-6); }
  .app-shell:has(#identity-nav[hidden]) .identity-art { width: 70%; max-width: var(--np-identity-art-width-small); }
  .app-shell:has(#identity-nav[hidden]) .identity-claim { display: none; }
  .app-shell:has(#identity-nav[hidden]) .workspace { place-items: start center; padding: var(--np-space-8) var(--np-space-4) var(--np-space-12); }
}
/* Transactions: freshness and refresh share the search row inside the list
   panel, so no separate toolbar row sits above it. The search label stays for
   screen readers; the field's placeholder says what to type. */
body[data-workspace="identity"] main:has(> .transaction-list) > .page-toolbar { grid-column: 2; grid-row: 1; z-index: var(--np-z-panel-toolbar); align-self: start; justify-self: end; margin: var(--np-space-5) calc(var(--np-space-6) + var(--np-border-hairline) * 2) 0 0; }
body[data-workspace="identity"] main:has(> .transaction-list) > .transaction-list { grid-row: 1; }
body[data-workspace="identity"] .transaction-list .workspace-filter { margin-right: var(--np-workspace-toolbar-width); }
body[data-workspace="identity"] .transaction-list .workspace-filter .field > span { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Payment filters: compact pills with a small rail icon, the label and the
   count side by side, instead of wide tabs with the count far right. */
body[data-workspace="identity"] .workspace-tabs { gap: var(--np-space-2); }
body[data-workspace="identity"] .workspace-tabs button { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; justify-content: flex-start; gap: var(--np-space-2); padding-inline: var(--np-space-3); }
body[data-workspace="identity"] .workspace-tabs .workspace-count { flex: none; width: auto; min-width: var(--np-space-6); padding: 0 var(--np-space-1-5); border-radius: var(--np-radius-pill); background: var(--np-color-surface-muted); color: var(--np-color-text-muted); font-size: var(--np-text-xs); text-align: center; }
body[data-workspace="identity"] .workspace-tabs [aria-pressed="true"] .workspace-count { background: var(--np-color-surface); color: var(--np-color-success); }
/* Lucide icons (assets/icons), drawn as a mask over currentColor so they
   take the text colour of their control from the tokens. The rails get the
   QR and card icons in the filters and in the method column, where the
   row's detail link names the rail. */
body[data-workspace="identity"] #identity-nav a::before,
.sidebar-account .btn::before,
body[data-workspace="identity"] [data-workspace-action="refresh"]::before,
body[data-workspace="identity"] [data-workspace-action="export"]::before,
body[data-workspace="identity"] [data-export-action]::before,
body[data-workspace="identity"] [data-workspace-action="previous"]::before,
body[data-workspace="identity"] [data-workspace-action="next"]::after,
body[data-workspace="identity"] [data-workspace-rail="ips"]::before,
body[data-workspace="identity"] [data-workspace-rail="card"]::before,
body[data-workspace="identity"] .workspace-table tr:has(a[href*="rail=ips"]) td:nth-child(2) .badge::before,
body[data-workspace="identity"] .workspace-table tr:has(a[href*="rail=card"]) td:nth-child(2) .badge::before { content: ""; flex: none; width: var(--np-icon-size); height: var(--np-icon-size); background: currentColor; mask: var(--np-icon-none) center / contain no-repeat; }
body[data-workspace="identity"] #identity-nav a { justify-content: flex-start; gap: var(--np-space-3); }
body[data-workspace="identity"] #identity-nav a::before { width: var(--np-icon-size-nav); height: var(--np-icon-size-nav); }
body[data-workspace="identity"] #identity-nav a:not(.active)::before { opacity: var(--np-icon-nav-opacity); }
body[data-workspace="identity"] #identity-nav [data-identity-nav="transactions"]::before { mask-image: url("assets/icons/receipt.svg"); }
body[data-workspace="identity"] #identity-nav [data-identity-nav="store"]::before { mask-image: url("assets/icons/store.svg"); }
body[data-workspace="identity"] #identity-nav [data-identity-nav="team"]::before { mask-image: url("assets/icons/users.svg"); }
body[data-workspace="identity"] #identity-nav [data-identity-nav="account"]::before { mask-image: url("assets/icons/user.svg"); }
.sidebar-account .btn::before { mask-image: url("assets/icons/log-out.svg"); }
body[data-workspace="identity"] [data-workspace-action="refresh"]::before { mask-image: url("assets/icons/refresh-cw.svg"); }
body[data-workspace="identity"] [data-workspace-action="export"]::before, body[data-workspace="identity"] [data-export-action="csv"]::before { mask-image: url("assets/icons/download.svg"); }
/* XLSX uses the download icon until the design session adds Lucide
   file-spreadsheet (a new served file). */
body[data-workspace="identity"] [data-export-action="xlsx"]::before { mask-image: url("assets/icons/download.svg"); }
body[data-workspace="identity"] [data-export-action="print"]::before { mask-image: url("assets/icons/file-text.svg"); }
body[data-workspace="identity"] [data-workspace-action="previous"]::before { mask-image: url("assets/icons/chevron-left.svg"); }
body[data-workspace="identity"] [data-workspace-action="next"]::after { mask-image: url("assets/icons/chevron-right.svg"); }
body[data-workspace="identity"] [data-workspace-rail="ips"]::before, body[data-workspace="identity"] .workspace-table tr:has(a[href*="rail=ips"]) td:nth-child(2) .badge::before { mask-image: url("assets/icons/qr-code.svg"); }
body[data-workspace="identity"] [data-workspace-rail="card"]::before, body[data-workspace="identity"] .workspace-table tr:has(a[href*="rail=card"]) td:nth-child(2) .badge::before { mask-image: url("assets/icons/credit-card.svg"); }
body[data-workspace="identity"] .workspace-table td:nth-child(2) .badge { display: inline-flex; align-items: center; gap: var(--np-space-1-5); }
body[data-workspace="identity"] .workspace-table td:nth-child(2) .badge::before { width: var(--np-icon-size-sm); height: var(--np-icon-size-sm); }
/* The way back from a detail: a chevron instead of the text arrow. */
body[data-workspace="identity"] .workspace-detail .panel-head .btn.ghost::before { content: ""; flex: none; width: var(--np-icon-size); height: var(--np-icon-size); background: currentColor; mask: url("assets/icons/chevron-left.svg") center / contain no-repeat; }
/* Search: a magnifier inside the field, left of the typed text. */
body[data-workspace="identity"] .transaction-list .workspace-filter .field { position: relative; }
body[data-workspace="identity"] .transaction-list .workspace-filter .field::after { content: ""; position: absolute; left: var(--np-space-3); bottom: calc((var(--np-control-height) - var(--np-icon-size)) / 2); width: var(--np-icon-size); height: var(--np-icon-size); background: var(--np-color-text-muted); mask: url("assets/icons/search.svg") center / contain no-repeat; pointer-events: none; }
body[data-workspace="identity"] .transaction-list .workspace-filter .field input { padding-left: calc(var(--np-space-3) * 2 + var(--np-icon-size)); }
/* Created: date and time on one line, the time quieter, so the cell reads as
   one fact. It wraps on its own when the column is narrow. */
body[data-workspace="identity"] .workspace-table .np-datetime--stack { display: inline-flex; flex-wrap: wrap; column-gap: var(--np-space-2); }
/* Order: only the order number is shown. The IPS reference stays for screen
   readers, in the transaction detail and in search. */
body[data-workspace="identity"] .workspace-table .workspace-reference { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Transaction detail: "back" on the left and freshness with refresh on the
   right share the first row of the first panel; the order, amount and
   state follow, then the facts as a compact grid of label over value. */
body[data-workspace="identity"] main:has(> .workspace-detail) > .page-toolbar { grid-column: 2; grid-row: 1; z-index: var(--np-z-panel-toolbar); align-self: start; justify-self: end; margin: calc(var(--np-space-6) + var(--np-border-hairline) * 2) calc(var(--np-space-6) + var(--np-border-hairline) * 2) 0 0; }
body[data-workspace="identity"] main > .workspace-detail:first-of-type { grid-row: 1; }
body[data-workspace="identity"] main > .workspace-detail:first-of-type > .panel-head { flex-direction: column; align-items: flex-start; gap: var(--np-space-5); margin-bottom: 0; }
body[data-workspace="identity"] main > .workspace-detail:first-of-type > .panel-head > .btn { order: -1; }
body[data-workspace="identity"] .workspace-detail .transaction-detail-summary { justify-content: flex-start; gap: var(--np-space-3); margin: var(--np-space-3) 0 var(--np-space-5); }
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--np-detail-fact-min-width), 1fr)); gap: var(--np-space-4) var(--np-space-6); margin-block: var(--np-space-4) 0; padding-top: var(--np-space-4); border-top: var(--np-border-hairline) solid var(--np-color-border-subtle); }
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .detail-list > div { flex-direction: column; justify-content: flex-start; gap: var(--np-space-1); padding: 0; border: 0; }
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .detail-list dt { font-size: var(--np-text-xs); }
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .detail-list dd { min-width: 0; margin-left: 0; overflow-wrap: anywhere; text-align: left; }
/* One line per date: the value reads as "02.11.2026. 00:14:59"; the
   "Datum" and "Vreme" labels stay for screen readers only. */
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .np-datetime--stack.np-datetime--labeled { display: inline-flex; flex-wrap: wrap; column-gap: var(--np-space-2); }
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .np-datetime--labeled .np-datetime-label { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .np-datetime--labeled .np-datetime-date,
body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .np-datetime--labeled .np-datetime-clock { text-align: left; }
/* My account: the facts use the same compact grid as the transaction
   detail. The plain sign-out repeats the sidebar, so it is not shown here. Google and
   sessions sit side by side below the account facts. */
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:not(:first-of-type) { grid-column: auto; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) [data-identity-action="sign-out"] { display: none; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list { margin-top: 0; padding-top: 0; border-top: 0; }
/* Account facts as a profile header: the address large with the role as a
   tag on one line, then under a hairline one quiet line about this sign-in
   (label beside value). The portal is already named in the sidebar card,
   and the first three labels stay for screen readers only. */
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--np-space-2) var(--np-space-6); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div { flex-direction: row; align-items: baseline; gap: var(--np-space-2); padding: 0; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(-n+3) { order: 1; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list::after { content: ""; order: 2; flex-basis: 100%; margin-block: var(--np-space-3); border-top: var(--np-border-hairline) solid var(--np-color-border-subtle); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(n+4) { order: 3; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(-n+3) dt { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(3) { display: none; }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:first-child { margin-right: var(--np-space-1); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:first-child dd { font-size: var(--np-text-xl); font-weight: var(--np-weight-semibold); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(2) dd { padding: 0 var(--np-space-2-5); border-radius: var(--np-radius-pill); background: var(--np-color-success-soft); color: var(--np-color-success); font-size: var(--np-text-sm); font-weight: var(--np-weight-semibold); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(n+4) dt { font-size: var(--np-text-sm); }
body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) > .panel:first-of-type .detail-list > div:nth-child(n+4) dd { font-size: var(--np-text-sm); }
/* Row actions look like buttons, so a row reads as a set of choices. */
.team-table .row-actions .btn.ghost { border-color: var(--np-color-border); }
.team-table .row-actions .btn.ghost:hover:enabled { border-color: var(--np-color-success-border); }
/* Narrow content: the search needs the whole row, so the freshness and
   refresh bar goes back above the list panel. */
@media(max-width:900px) {
  body[data-workspace="identity"] main:has(> .transaction-list) > .page-toolbar,
  body[data-workspace="identity"] main:has(> .workspace-detail) > .page-toolbar { grid-column: 1 / -1; grid-row: auto; margin: 0 0 var(--np-space-4); }
  body[data-workspace="identity"] main:has(> .transaction-list) > .transaction-list,
  body[data-workspace="identity"] main > .workspace-detail:first-of-type { grid-row: auto; }
  body[data-workspace="identity"] .transaction-list .workspace-filter { margin-right: 0; }
  body[data-workspace="identity"] main:has([data-identity-action="sign-out-everywhere"]) { grid-template-columns: minmax(0, 1fr); }
}
/* Store logo (docs/MERCHANT_LOGO.md): the payment page header's frame, at
   most 112 x 40 px (8 x 3.5 and 10 spacing units) left of the store name. */
.store-logo-panel { max-width: var(--np-refund-login-width); }
.store-logo-preview { display: flex; align-items: center; gap: var(--np-space-3); margin-block: var(--np-space-4); padding: var(--np-space-4); border: var(--np-border-hairline) solid var(--np-color-border); border-radius: var(--np-radius-md); }
.store-logo-image { flex-shrink: 0; width: auto; max-width: calc(var(--np-space-8) * 3.5); height: var(--np-space-10); object-fit: contain; }
.store-logo-name { min-width: 0; overflow-wrap: anywhere; }
@media(max-width:760px) {
  body[data-workspace="identity"] .workspace-tabs { display: flex; flex: 1 1 100%; flex-wrap: wrap; width: auto; gap: var(--np-space-1-5); }
  body[data-workspace="identity"] .workspace-tabs button { gap: var(--np-space-1-5); padding-inline: var(--np-space-2); }
  body[data-workspace="identity"] :is(.workspace-detail, main:has([data-identity-action="sign-out-everywhere"]) > .panel) .detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--np-space-4); }
  .identity-panel .row-actions .btn { flex: 1 1 100%; }
  /* Team on a phone: every member or invitation is one card. The header
     stays for screen readers only; role and state speak for themselves. */
  .table-wrap .team-table, .team-table tbody { display: block; width: 100%; min-width: 0; }
  .team-table thead { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .team-table tbody tr:not(.team-panel-row) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--np-space-2) var(--np-space-3); padding: var(--np-space-4) 0; border-bottom: var(--np-border-hairline) solid var(--np-color-border-subtle); }
  .team-table tbody tr:last-child { border-bottom: 0; }
  .team-table td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; }
  .team-table td:first-child, .team-table td:nth-child(4) { grid-column: 1 / -1; }
  .team-table td:first-child strong { overflow-wrap: anywhere; }
  .team-table td:nth-child(2) { color: var(--np-color-text-muted); }
  .team-table td:nth-child(4) { margin-top: var(--np-space-1); }
  .team-table .row-actions .btn { flex: 1 1 auto; }
  .team-table .team-panel-row, .team-table .team-panel-row > td { display: block; }
}
/* Period view and export (docs/WORKSPACE_PERIOD_EXPORT.md). Main session
   2026-11-02 (function), design session 2026-11-03 (look). Rail pills and
   Po strani share the first row; the period is its own quiet strip below:
   calendar icon, the quick picks and the month as pills, then Od and Do with
   Primeni after a divider. The applied period reads as a line with a check. */
body[data-workspace="identity"] main:has(#workspace-export) .transaction-list .workspace-filter { margin-right: var(--np-workspace-toolbar-width-export); }
body[data-workspace="identity"] .workspace-filters-bottom > .workspace-tabs { order: 1; }
body[data-workspace="identity"] .workspace-filters-bottom > .transaction-page-size { order: 2; margin-left: auto; }
body[data-workspace="identity"] .workspace-filters-bottom > .workspace-period { order: 3; flex: 1 1 100%; }
body[data-workspace="identity"] .workspace-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--np-space-2) var(--np-space-4); padding: var(--np-space-2) var(--np-space-3); border: var(--np-border-hairline) solid var(--np-color-border-subtle); border-radius: var(--np-radius-lg); background: var(--np-color-surface-subtle); }
body[data-workspace="identity"] .workspace-period::before { content: ""; flex: none; width: var(--np-icon-size); height: var(--np-icon-size); background: var(--np-color-text-muted); mask: url("assets/icons/calendar.svg") center / contain no-repeat; }
body[data-workspace="identity"] .workspace-period-quick, body[data-workspace="identity"] .workspace-period-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--np-space-2); }
body[data-workspace="identity"] .workspace-period-range { padding-left: var(--np-space-4); border-left: var(--np-border-hairline) solid var(--np-color-border); }
body[data-workspace="identity"] .workspace-period .transaction-quick-filter { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; min-height: var(--np-control-height-small); padding: 0 var(--np-space-3); border-color: var(--np-color-border); border-radius: var(--np-radius-pill); background: var(--np-color-surface); font-size: var(--np-text-sm); }
body[data-workspace="identity"] .workspace-period .transaction-quick-filter:hover { background: var(--np-color-surface-hover); }
body[data-workspace="identity"] .workspace-period .transaction-quick-filter[aria-pressed="true"] { border-color: var(--np-color-success-border); background: var(--np-color-success-soft); color: var(--np-color-success); font-weight: var(--np-weight-medium); }
body[data-workspace="identity"] .workspace-period-field { display: inline-flex; align-items: center; gap: var(--np-space-1-5); font-size: var(--np-text-sm); color: var(--np-color-text-muted); white-space: nowrap; }
body[data-workspace="identity"] .workspace-period-field :is(input, select) { min-height: var(--np-control-height-small); padding: 0 var(--np-space-2); border: var(--np-border-hairline) solid var(--np-color-border-input); border-radius: var(--np-radius-md); background: var(--np-color-surface); color: var(--np-color-text); font: inherit; font-variant-numeric: tabular-nums; }
body[data-workspace="identity"] .workspace-period-quick .workspace-period-field select { border-radius: var(--np-radius-pill); padding-inline: var(--np-space-3); cursor: pointer; }
/* The month list says "Mesec" itself, so its label stays for screen readers only. */
body[data-workspace="identity"] .workspace-period-quick .workspace-period-field:has(select) > span { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A chosen month reads as selected, like a pressed quick pick. */
body[data-workspace="identity"] .workspace-period-quick #workspace-period-month.is-set { border-color: var(--np-color-success-border); background: var(--np-color-success-soft); color: var(--np-color-success); font-weight: var(--np-weight-medium); }
body[data-workspace="identity"] .workspace-period [data-workspace-period="none"] { margin-left: auto; }
body[data-workspace="identity"] .workspace-period [data-workspace-period="none"]::before { content: ""; flex: none; width: var(--np-icon-size-sm); height: var(--np-icon-size-sm); background: currentColor; mask: url("assets/icons/x.svg") center / contain no-repeat; }
body[data-workspace="identity"] .workspace-period-note { position: relative; display: inline-block; margin: 0 var(--np-space-4) var(--np-space-3) 0; padding-left: calc(var(--np-icon-size) + var(--np-space-2)); color: var(--np-color-text); font-size: var(--np-text-sm); font-weight: var(--np-weight-medium); }
body[data-workspace="identity"] .workspace-period-note .np-datetime { display: inline; }
body[data-workspace="identity"] .workspace-period-note::before { content: ""; position: absolute; left: 0; top: calc(50% - var(--np-icon-size) / 2); width: var(--np-icon-size); height: var(--np-icon-size); background: var(--np-color-success); mask: url("assets/icons/check.svg") center / contain no-repeat; }
body[data-workspace="identity"] .workspace-period-note + .workspace-help { display: inline-block; margin: 0 0 var(--np-space-3); }
body[data-workspace="identity"] .workspace-period-note + .workspace-help[open] { display: block; max-width: var(--np-view-help-width); }
/* Export: a dropdown menu under the Izvoz button, not a row in the list.
   Title and close on top, the status in small type, then one menu row per
   format with its icon. The report document stays for print only; on
   screen it is not shown. */
body[data-workspace="identity"] .transaction-list { position: relative; }
body[data-workspace="identity"] .workspace-export { position: absolute; top: calc(var(--np-space-5) + var(--np-control-height) + var(--np-space-2)); right: calc(var(--np-space-6) + var(--np-border-hairline) * 2); z-index: var(--np-z-export-menu); display: grid; gap: var(--np-space-1); width: var(--np-export-menu-width); margin: 0; padding: var(--np-space-2); border: var(--np-border-hairline) solid var(--np-color-border); border-radius: var(--np-radius-lg); background: var(--np-color-surface); box-shadow: var(--np-shadow-toast); }
body[data-workspace="identity"] .workspace-export > .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--np-space-2); margin: 0; padding: var(--np-space-1) var(--np-space-1) 0 var(--np-space-2); }
body[data-workspace="identity"] .workspace-export h2 { margin: 0; color: var(--np-color-text-muted); font-size: var(--np-text-xs); font-weight: var(--np-weight-medium); letter-spacing: var(--np-tracking-label); text-transform: uppercase; }
body[data-workspace="identity"] .workspace-export [data-workspace-action="export-close"] { min-height: 0; padding: var(--np-space-1); border: 0; font-size: 0; }
body[data-workspace="identity"] .workspace-export [data-workspace-action="export-close"]::before { content: ""; flex: none; width: var(--np-icon-size); height: var(--np-icon-size); background: currentColor; mask: url("assets/icons/x.svg") center / contain no-repeat; }
body[data-workspace="identity"] .workspace-export > .workspace-load { min-height: 0; margin: 0; padding: 0 var(--np-space-2) var(--np-space-1); font-size: var(--np-text-xs); }
body[data-workspace="identity"] .workspace-export > .workspace-load:empty { display: none; }
body[data-workspace="identity"] .workspace-export > .inline { display: grid; gap: var(--np-space-0-5); margin: 0; padding-top: var(--np-space-1); border-top: var(--np-border-hairline) solid var(--np-color-border-subtle); }
body[data-workspace="identity"] .workspace-export > .inline .btn { justify-content: flex-start; gap: var(--np-space-3); width: 100%; min-height: var(--np-control-nav-height); padding: 0 var(--np-space-2); border: 0; border-radius: var(--np-radius-md); background: var(--np-color-transparent); color: var(--np-color-text); font-weight: var(--np-weight-medium); }
body[data-workspace="identity"] .workspace-export > .inline .btn:hover:enabled { background: var(--np-color-surface-hover); }
body[data-workspace="identity"] .workspace-export > .inline .btn::before { color: var(--np-color-success); }
body[data-workspace="identity"] .workspace-export > .inline .btn:disabled { color: var(--np-color-text-disabled); }
body[data-workspace="identity"] .workspace-export > .inline .btn:disabled::before { color: var(--np-color-text-disabled); }
body[data-workspace="identity"] .workspace-export > :not(.panel-head, .workspace-load, .inline) { margin: 0; font-size: var(--np-text-xs); }
body[data-workspace="identity"] .workspace-export > #workspace-export-feedback { padding: 0 var(--np-space-2); }
body[data-workspace="identity"] .workspace-export > #workspace-export-feedback:empty { display: none; }
body[data-workspace="identity"] main:has(.workspace-export) #workspace-export { border-color: var(--np-color-success-border); background: var(--np-color-success-soft); }
/* Without a period there is nothing to export: the button looks disabled
   and says why (its title) under itself on hover, focus or click. */
body[data-workspace="identity"] #workspace-export { position: relative; }
body[data-workspace="identity"] #workspace-export[aria-disabled="true"] { border-color: var(--np-color-border-disabled); background: var(--np-color-surface-disabled); color: var(--np-color-text-disabled); cursor: not-allowed; }
body[data-workspace="identity"] #workspace-export[aria-disabled="true"]:is(:hover, :focus, :active)::after { content: attr(title); position: absolute; top: calc(100% + var(--np-space-2)); right: 0; z-index: var(--np-z-export-menu); padding: var(--np-space-1-5) var(--np-space-2-5); border-radius: var(--np-radius-sm); background: var(--np-color-ink); color: var(--np-color-text-inverse); font-size: var(--np-text-xs); font-weight: var(--np-weight-medium); white-space: nowrap; pointer-events: none; }
@media screen { body[data-workspace="identity"] main > .report-preview { display: none; } }
/* In a period the confirmation time matters; creation is quieter. */
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) td:nth-child(3) { color: var(--np-color-text-muted); }
@media(max-width:1100px) {
  body[data-workspace="identity"] main:has(#workspace-export) > .page-toolbar { grid-column: 1 / -1; grid-row: auto; margin: 0 0 var(--np-space-4); }
  body[data-workspace="identity"] main:has(#workspace-export) > .transaction-list { grid-row: auto; }
  body[data-workspace="identity"] main:has(#workspace-export) .transaction-list .workspace-filter { margin-right: 0; }
  body[data-workspace="identity"] .workspace-export { top: calc(var(--np-space-2) * -1); right: 0; }
}
/* Seven columns with Potvrđeno (only in a period). */
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(1) { width: 19%; }
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(2) { width: 8%; }
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(3) { width: 14%; }
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(4) { width: 14%; }
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(5) { width: 19%; }
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(6) { width: 11%; }
body[data-workspace="identity"] .workspace-table:has(th:nth-child(7)) th:nth-child(7) { width: 15%; }
@media(max-width:760px) {
  body[data-workspace="identity"] .workspace-table tr:has(td:nth-child(7)) td:nth-child(4) { grid-column: 1; grid-row: 3; }
  body[data-workspace="identity"] .workspace-table tr:has(td:nth-child(7)) td:nth-child(5) { grid-column: 1; grid-row: 4; text-align: left; }
  body[data-workspace="identity"] .workspace-table tr:has(td:nth-child(7)) td:nth-child(6) { grid-column: 2; grid-row: 4; align-self: auto; text-align: right; }
  body[data-workspace="identity"] .workspace-table tr:has(td:nth-child(7)) td:nth-child(7) { grid-column: 2; grid-row: 2; align-self: center; }
  body[data-workspace="identity"] .workspace-table tr:has(td:nth-child(7)) td:nth-child(6):has([aria-label="Nema oznake za proveru"]) { display: none; }
}
/* Period and export on a phone: the freshness line on top with both buttons
   below it side by side; the period strip stacks the quick picks, then Od
   and Do side by side with Primeni under them. */
@media(max-width:760px) {
  body[data-workspace="identity"] main:has(#workspace-export) > .page-toolbar .inline > :not(button) { flex-basis: 100%; }
  body[data-workspace="identity"] .workspace-period { gap: var(--np-space-3); padding: var(--np-space-3); }
  body[data-workspace="identity"] .workspace-period::before { display: none; }
  body[data-workspace="identity"] .workspace-period-quick, body[data-workspace="identity"] .workspace-period-range { flex: 1 1 100%; }
  body[data-workspace="identity"] .workspace-period-quick .workspace-period-field { flex: 1 1 100%; }
  body[data-workspace="identity"] .workspace-period-quick .workspace-period-field select { flex: 1; min-width: 0; }
  body[data-workspace="identity"] .workspace-period-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--np-space-3) 0 0; border-left: 0; border-top: var(--np-border-hairline) solid var(--np-color-border); }
  body[data-workspace="identity"] .workspace-period-range .workspace-period-field { min-width: 0; }
  body[data-workspace="identity"] .workspace-period-range .workspace-period-field input { flex: 1; width: 100%; min-width: 0; padding-inline: var(--np-space-1); }
  body[data-workspace="identity"] .workspace-period-range .btn { grid-column: 1 / -1; }
  body[data-workspace="identity"] .workspace-period [data-workspace-period="none"] { margin-left: 0; }
  body[data-workspace="identity"] .workspace-export > .inline { margin-left: 0; }
}
/* Export document (Sačuvaj PDF), design session 2026-11-03. The heading
   already names the portal and the days of the period, so the facts box
   holds four: method, search, read time and currency with zone, in one row
   (main session 2026-11-03: the markup has only these four now); the exact
   period bounds stay in the CSV and XLSX. The five totals share one row;
   a confirmation time is one line with the creation time quieter under it. */
body[data-workspace="identity"] .report-document .report-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--np-space-3) var(--np-space-6); padding: var(--np-space-4) var(--np-space-5); border-radius: var(--np-radius-md); background: var(--np-color-surface-subtle); }
body[data-workspace="identity"] .report-document .report-meta dt { font-size: var(--np-text-xs); }
body[data-workspace="identity"] .report-document .report-meta dd { font-size: var(--np-text-body); }
body[data-workspace="identity"] .report-document .np-datetime--stack { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--np-space-1-5); }
body[data-workspace="identity"] .report-document .np-datetime--labeled .np-datetime-label { position: absolute; width: var(--np-border-hairline); height: var(--np-border-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-workspace="identity"] .report-document .np-datetime--labeled :is(.np-datetime-date, .np-datetime-clock, .np-datetime-part) { display: inline; margin: 0; padding: 0; text-align: left; }
body[data-workspace="identity"] .report-document .report-summary { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
body[data-workspace="identity"] .report-document .report-stat:nth-child(2) { order: 1; }
body[data-workspace="identity"] .report-document .report-stat:nth-child(3), body[data-workspace="identity"] .report-document .report-stat:nth-child(4) { order: 2; }
body[data-workspace="identity"] .report-document .report-stat:nth-child(5) { order: 3; }
body[data-workspace="identity"] .report-document .report-stat:first-child { order: 0; }
body[data-workspace="identity"] .report-document .report-stat > span, body[data-workspace="identity"] .report-document .report-stat > strong { white-space: nowrap; }
body[data-workspace="identity"] .report-document .report-table { table-layout: fixed; }
body[data-workspace="identity"] .report-document .report-table th { white-space: nowrap; }
body[data-workspace="identity"] .report-document .report-table th:nth-child(1) { width: 22%; }
body[data-workspace="identity"] .report-document .report-table th:nth-child(2) { width: 9%; }
body[data-workspace="identity"] .report-document .report-table th:nth-child(3) { width: 29%; }
body[data-workspace="identity"] .report-document .report-table th:nth-child(4) { width: 24%; }
body[data-workspace="identity"] .report-document .report-table th:nth-child(5) { width: 16%; }
/* Confirmation: date and time read as one value, same colour and size,
   with even digits; creation is one quieter, smaller line under it. */
body[data-workspace="identity"] .report-document .report-table td:nth-child(3) { font-variant-numeric: tabular-nums; }
body[data-workspace="identity"] .report-document .report-table td:nth-child(3) > .np-datetime { display: inline-flex; column-gap: var(--np-space-2); }
body[data-workspace="identity"] .report-document .report-table td:nth-child(3) > .np-datetime :is(.np-datetime-date, .np-datetime-clock) { color: var(--np-color-text); font-size: inherit; font-weight: var(--np-weight-book); }
body[data-workspace="identity"] .report-document .report-table td:nth-child(3) > small { display: block; margin-top: var(--np-space-1); color: var(--np-color-text-muted); font-size: var(--np-text-xs); white-space: nowrap; }
body[data-workspace="identity"] .report-document .report-table td:nth-child(3) > small .np-datetime { display: inline; }
body[data-workspace="identity"] .report-document .report-table td:nth-child(3) > small :is(.np-datetime-date, .np-datetime-clock) { color: inherit; font-size: inherit; font-weight: var(--np-weight-regular); }
/* A narrow screen: facts in two columns, totals in a grid of two that
   keeps the gross amount on its own row. Paper always keeps the wide rows. */
@media screen and (max-width:900px) {
  body[data-workspace="identity"] .report-document .report-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-workspace="identity"] .report-document .report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--np-space-4); }
  body[data-workspace="identity"] .report-document .report-stat:first-child { grid-column: 1 / -1; }
  body[data-workspace="identity"] .report-document .report-stat, body[data-workspace="identity"] .report-document .report-stat + .report-stat { padding: 0; border-left: 0; }
  body[data-workspace="identity"] .report-document .report-stat > span, body[data-workspace="identity"] .report-document .report-stat > strong { white-space: normal; }
}
/* Print: a page without the browser's own date, title and address lines
   (those appear only in a page margin), the paper margin kept as padding on
   every page. */
@page nerapay-export { size: A4 portrait; margin: 0; }
@media print {
  html:has(> body[data-workspace="identity"][data-route="reports"]), body[data-workspace="identity"][data-route="reports"] { background: var(--np-color-surface); }
  body[data-workspace="identity"][data-route="reports"] .report-document { page: nerapay-export; padding: var(--np-print-page-margin); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  body[data-workspace="identity"][data-route="reports"] .report-meta { gap: var(--np-print-space-3) var(--np-print-space-6); padding: var(--np-print-space-4) var(--np-print-space-5); }
  body[data-workspace="identity"][data-route="reports"] .report-meta dd { font-size: var(--np-print-text-table); }
  body[data-workspace="identity"][data-route="reports"] .report-document .report-table td:nth-child(3) > .np-datetime .np-datetime-clock { font-size: var(--np-print-text-table); }
  body[data-workspace="identity"][data-route="reports"] .report-document .report-table td:nth-child(3) > small .np-datetime-clock { font-size: inherit; }
}
/* Card facts (docs/CARD_FACTS.md). Main session 2026-11-02 (function),
   design session 2026-11-03 (look). In a row the brand sits in a small white
   card frame of one size for every mark, beside the last four digits; a
   brand without its own SVG gets the card icon in the same box. In the
   detail the card facts are a quiet strip with the card icon on its title. */
body[data-workspace="identity"] .workspace-card-facts { display: flex; align-items: center; gap: var(--np-space-2); margin-top: var(--np-space-1); font-size: var(--np-text-sm); color: var(--np-color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-workspace="identity"] .workspace-card-mark { flex: none; box-sizing: border-box; width: var(--np-card-mark-width); height: var(--np-card-mark-height); padding: var(--np-space-0-5) var(--np-space-1); border: var(--np-border-hairline) solid var(--np-color-border); border-radius: var(--np-radius-xs); background: var(--np-color-surface); object-fit: contain; }
body[data-workspace="identity"] .workspace-card-generic { padding: 0; border: 0; background: var(--np-color-text-muted); mask: url("assets/icons/credit-card.svg") center / var(--np-icon-size) no-repeat; }
body[data-workspace="identity"] .workspace-card-last4 { letter-spacing: var(--np-tracking-stat); }
body[data-workspace="identity"] .workspace-card-last4 > [aria-hidden="true"] { color: var(--np-color-text-disabled); }
body[data-workspace="identity"] .workspace-card-instrument .panel-head h3 { display: inline-flex; align-items: center; gap: var(--np-space-2); }
body[data-workspace="identity"] .workspace-card-instrument .panel-head h3::before { content: ""; flex: none; width: var(--np-icon-size); height: var(--np-icon-size); background: var(--np-color-text-muted); mask: url("assets/icons/credit-card.svg") center / contain no-repeat; }