/* /Components/Features/Admin/Accounting/AccountingChartPanel.razor.rz.scp.css */
/* The toolbar's search and filter share the row; on a phone the kit's toolbar wraps them. */
.toolbar[b-4qeuo0suv5]  .toolbar-field { flex: 1 1 220px; min-width: 0; margin: 0; }
/* /Components/Features/Admin/Accounting/AccountingJournalsPanel.razor.rz.scp.css */
/* A journal's description is the button that shows its lines; it wraps like text. The chosen row is tinted, the total
   row of the lines is bold (the kit's table.tbl tr.total look). */
.journal-link[b-tkhqt5xtow] { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--upos-primary); text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.journal-link:focus-visible[b-tkhqt5xtow] { outline: 2px solid var(--upos-primary); outline-offset: 2px; }
.grid[b-tkhqt5xtow]  tr.sel > td { background: var(--upos-primary-tint); }
.grid[b-tkhqt5xtow]  tr.total > td { font-weight: 700; background: var(--upos-surface-muted); }
.journal-facts[b-tkhqt5xtow] { display: grid; gap: 10px; padding: 12px 18px 16px; }
/* /Components/Features/Admin/Accounting/AccountingPeriodsPanel.razor.rz.scp.css */
/* The collapsed section of the kit (.xp): its title is the section's h2 in the kit's .xt font; the reopen requests have
   their own h3 under the periods. */
.xp-title[b-6fi239phoh] { margin: 0; font: inherit; }
.xp-subtitle[b-6fi239phoh] { margin: 16px 0 8px; font-size: 14.5px; font-weight: 700; }
/* /Components/Features/Admin/Accounting/AccountingReportsPanel.razor.rz.scp.css */
/* A journal kind or reference is one long token that breaks anywhere; the trial balance's total row is bold (the kit's
   table.tbl tr.total look, which does not reach a MudTable). */
.report-id[b-m537uey2b1] { overflow-wrap: anywhere; }
.accounting-reports[b-m537uey2b1]  tr.total > td { font-weight: 700; background: var(--upos-surface-muted); }
/* /Components/Features/Admin/Accounting/JournalCreateDialog.razor.rz.scp.css */
/* One journal line per row: the account, the debit, the credit and the remove button. On a phone the account takes the
   whole row and the two amounts share the next one, so 390 px never scrolls sideways. */
.journal-lines[b-pf1bfqc7kz] { display: grid; gap: 10px; margin-block: 8px; }
.journal-line[b-pf1bfqc7kz] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.journal-line > div[b-pf1bfqc7kz] { min-width: 0; }
.jl-remove[b-pf1bfqc7kz] { padding-block-start: 6px; }

@media (max-width: 600px) {
    .journal-line[b-pf1bfqc7kz] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding-block-end: 10px; border-block-end: 1px solid var(--upos-border); }
    .jl-account[b-pf1bfqc7kz] { grid-column: 1 / -1; }
}
/* /Components/Features/Admin/Common/AdminCard.razor.rz.scp.css */
/* A MudTable in a card (ours, .admin-table, or the kit's PagedTable, .paged-table) takes the kit's table look (upos-kit.css table.tbl): a muted header row and 14 px cells; a cell's
   second line (.cell-sub) is small and muted. On a phone MudTable draws labelled cards and hides the header.
   Nothing in a cell may push the card wider than the screen: a header may wrap, a body cell breaks a long word, and a
   technical value (bdi.tech: a settlement or bank reference) wraps inside its cell; an amount (bdi.num) stays whole. */
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) { background: transparent; }
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) .mud-table-head .mud-table-cell { font-size: 12.5px; font-weight: 700; color: var(--upos-text-muted); background: var(--upos-surface-muted); }
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) .mud-table-body .mud-table-cell { font-size: 14px; overflow-wrap: anywhere; }
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) .mud-table-cell bdi.tech { white-space: normal; }
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) .cell-sub { display: block; font-size: 12px; color: var(--upos-text-muted); }
/* On a phone a cell's label (MudTable's ::before) breaks only between words: "anywhere" is for the value. */
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) .mud-table-body .mud-table-cell::before { overflow-wrap: normal; }
/* A chosen row (tr.sel) and a row to follow up (tr.warnrow) take the kit's table tints (upos-kit.css table.tbl). */
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) tr.sel > td { background: var(--upos-primary-tint); }
.card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) tr.warnrow > td { background: var(--upos-danger-tint); }
/* A check code (bdi.check-code: PROVIDER_HOLD_EQUALS_OPEN_RESERVATIONS) stays on one line where the table has room; on a
   phone the table is labelled cards and the code wraps inside its card. */
@media (min-width: 960px) {
    .card-body[b-4h34w1g25k]  :is(.admin-table, .paged-table) .mud-table-cell bdi.check-code { white-space: nowrap; overflow-wrap: normal; }
}
/* /Components/Features/Admin/Common/ApiImage.razor.rz.scp.css */
/* The image fits its card; a tall receipt scrolls inside its box. */
.api-image[b-9xea1cairz] { max-height: 420px; overflow: auto; border: 1px solid var(--upos-border); border-radius: var(--upos-radius-s); background: var(--upos-surface-muted); }
.api-image[b-9xea1cairz]  img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.api-image.empty[b-9xea1cairz] { display: none; }
/* /Components/Features/Admin/Common/ImageFileField.razor.rz.scp.css */
/* The kit's dashed upload box (upos-kit.css .upload) as a label: the whole box opens the file picker. */
.upload[b-hpm5od83bc] { cursor: pointer; margin-block: 4px 8px; }
.upload:focus-within[b-hpm5od83bc] { outline: 3px solid var(--upos-focus); outline-offset: 2px; }
.upload-text[b-hpm5od83bc] { min-width: 0; }
.picked-file[b-hpm5od83bc] { font-size: 14px; }
/* /Components/Features/Admin/Common/SectionTitle.razor.rz.scp.css */
/* MudExpansionPanel's header sets line-height 1: the title and its subtitle keep their own, so the two lines never meet. */
.section-title-text[b-1y9v5l4ge4] { min-width: 0; line-height: 1.4; }
.section-title-text .small[b-1y9v5l4ge4] { margin-block-start: 2px; line-height: 1.45; }
/* /Components/Features/Admin/Common/SummaryCard.razor.rz.scp.css */
/* The value's skeleton while the figure loads (SCREEN-MAP 1.3 LD: never 0.00). */
.summary-skel[b-r6k8yk5lo2] { display: block; height: 26px; width: 60%; margin-block: 4px; }
/* /Components/Features/Admin/Funding/FundingAuthorizationPanel.razor.rz.scp.css */
/* The From and Through days share one row on a desktop, as ADM-14's report filter (ReportPeriodFilter); on a phone they
   wrap under each other. KhartoumDateRangeField draws its two fields in a .date-range block of its own. */
.funding-dates[b-jvy7ugdz1y] { flex: 1 1 320px; max-width: 560px; min-width: 0; }
.funding-dates[b-jvy7ugdz1y]  .date-range { display: flex; flex-wrap: wrap; gap: 12px; }
.funding-dates[b-jvy7ugdz1y]  .date-range > * { flex: 1 1 200px; min-width: 0; }
/* /Components/Features/Admin/Funding/FundingChargePanel.razor.rz.scp.css */
/* The history's reference is the way into the request's detail: a link-looking button (44 px target from its cell). */
.reference-link[b-4mx2rapnre] { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--upos-primary); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 32px; }
.reference-link:focus-visible[b-4mx2rapnre] { outline: 3px solid var(--upos-focus); outline-offset: 2px; }
/* /Components/Features/Admin/LogViewer/LogsViewerPanel.razor.rz.scp.css */
/* ADM-20: the toolbar fields share the row and wrap on a phone; log lines are left-to-right monospace in both languages,
   in a terminal box (the design's colours in every theme) that scrolls inside itself, so the page never scrolls sideways. */
.logs-field[b-z8a1xjzkor] { flex: 1 1 200px; min-width: 0; }
.logs-actions[b-z8a1xjzkor] { align-self: center; }
.logs-note[b-z8a1xjzkor] { margin: 0; padding: 0 18px 12px; }
.tail-status[b-z8a1xjzkor] { margin-block-end: 10px; }
.log-lines[b-z8a1xjzkor] {
    direction: ltr; text-align: left; unicode-bidi: isolate;
    font-family: Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.7;
    background: #0f1a2a; color: #d5e2f3; border-radius: 8px; padding: 10px 14px;
    max-width: 100%; max-height: 420px; overflow: auto; white-space: pre;
}
.log-place[b-z8a1xjzkor] { color: #8fb3d9; }
.log-exchange[b-z8a1xjzkor] {
    direction: ltr; text-align: left; unicode-bidi: isolate;
    font-family: Consolas, "Courier New", monospace; font-size: 12px; word-break: break-all;
}
.simulation[b-z8a1xjzkor] { margin-block-end: 16px; }
.simulation[b-z8a1xjzkor]  .mud-expand-panel { border: 1px solid var(--upos-border); border-radius: var(--upos-radius-m); background: var(--upos-surface); }
.simulation-form[b-z8a1xjzkor] { align-items: flex-start; margin-block-end: 12px; }
/* The kit's table look and its wrapping (as AdminCard.razor.css gives a table in a card). */
.simulation[b-z8a1xjzkor]  .admin-table { background: transparent; margin-block-end: 12px; }
.simulation[b-z8a1xjzkor]  .admin-table .mud-table-head .mud-table-cell { font-size: 12.5px; font-weight: 700; color: var(--upos-text-muted); background: var(--upos-surface-muted); }
.simulation[b-z8a1xjzkor]  .admin-table .mud-table-body .mud-table-cell { overflow-wrap: anywhere; }
.simulation[b-z8a1xjzkor]  .admin-table .mud-table-cell bdi.tech { white-space: normal; }
.simulation[b-z8a1xjzkor]  .admin-table .cell-sub { display: block; font-size: 12px; color: var(--upos-text-muted); }
@media (max-width: 767.98px) {
    .logs-note[b-z8a1xjzkor] { padding: 0 14px 10px; }
    .logs-actions[b-z8a1xjzkor] { width: 100%; }
}
/* /Components/Features/Admin/PrivacyReview/PrivacyReviewPanel.razor.rz.scp.css */
/* A request's decisions (Review, Hold) stack, so the column is as wide as one button and the kind and subject columns keep
   their words whole. */
.decision-actions[b-ibkrd8le2x] { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
/* /Components/Features/Admin/ProviderCalls/ProviderCallDialog.razor.rz.scp.css */
/* ADM-27's call dialog: each HTTP exchange is a bordered block; the URL, headers and bodies are left-to-right monospace in
   both languages (as ADM-20's log lines), in a box that scrolls inside itself, so a long body never widens the dialog or
   the page. */
/* A long technical fact (the safe summary, the trace id) wraps inside its value instead of running past the dialog's edge
   (bdi.tech stays on one line in upos-kit.css); the live check showed the summary cut at the dialog's right edge. */
.call-facts .v bdi.tech[b-py3gm8l1nq] { white-space: normal; overflow-wrap: anywhere; }
.exchange[b-py3gm8l1nq] { border: 1px solid var(--upos-border); border-radius: var(--upos-radius-s); padding: 12px 14px; margin-block-start: 14px; }
.exchange-head[b-py3gm8l1nq] { margin-block-end: 6px; }
.exchange-title[b-py3gm8l1nq] { margin: 0; font-size: 15px; font-weight: 700; }
.exchange-url[b-py3gm8l1nq] {
    direction: ltr; text-align: left; unicode-bidi: isolate;
    font-family: Consolas, "Courier New", monospace; font-size: 12.5px; overflow-wrap: anywhere; margin-block-end: 8px;
}
.exchange-facts[b-py3gm8l1nq] { margin-block-end: 8px; }
.exchange-part[b-py3gm8l1nq] { padding-block-start: 10px; }
.part-label[b-py3gm8l1nq] { margin-block: 8px 4px; }
.exchange-text[b-py3gm8l1nq] {
    direction: ltr; text-align: left; unicode-bidi: isolate;
    font-family: Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.6;
    background: #0f1a2a; color: #d5e2f3; border-radius: 8px; padding: 10px 14px; margin: 0;
    max-width: 100%; max-height: 360px; overflow: auto; white-space: pre;
}
.exchange-text.headers[b-py3gm8l1nq] { max-height: 160px; }
/* On a phone the facts (.kv.wide) take two columns from upos-kit.css. */
@media (max-width: 767.98px) {
    .exchange[b-py3gm8l1nq] { padding: 10px; }
}
/* /Components/Features/Admin/Reconciliation/AgentNetworksPanel.razor.rz.scp.css */
/* ADM-24: an agent's name is the button that drills into its network, wrapping like text; the drill's total closes the card
   under its wallets. The row tints are AdminCard's (tr.sel, tr.warnrow). */
.networks-table[b-w0tk7b7nze]  .network-open { padding-inline: 0; text-align: start; white-space: normal; }
.list[b-w0tk7b7nze]  .statement-check { margin-block-start: 4px; }
.drill-total[b-w0tk7b7nze] { padding: 14px 18px; border-block-start: 1px solid var(--upos-border); }
.drill-note[b-w0tk7b7nze] { padding: 10px 18px; margin: 0; }
/* /Components/Features/Admin/Reconciliation/ReconciliationRunDetail.razor.rz.scp.css */
/* The tabs of a run sit under its facts. */
.run-detail[b-2pmhud5ht1] { margin-block-start: 12px; }
/* /Components/Features/Admin/Reports/ReportPeriodFilter.razor.rz.scp.css */
/* The report filters share one toolbar row on a desktop; on a phone the kit's toolbar wraps them, the two days side by
   side. KhartoumDateRangeField draws its two fields in a .date-range block of its own; the owner's fields are div.rf-field. */
.rf-dates[b-zb51s16k9w] { flex: 2 1 320px; min-width: 0; }
.rf-dates[b-zb51s16k9w]  .date-range { display: flex; gap: 12px; }
.rf-dates[b-zb51s16k9w]  .date-range > * { flex: 1 1 0; min-width: 0; }
.report-filters[b-zb51s16k9w]  .rf-field { flex: 1 1 180px; min-width: 0; }
.report-filters .btn-row[b-zb51s16k9w] { flex: none; }
/* /Components/Features/Admin/Reports/ReportsCommissionsPanel.razor.rz.scp.css */
/* An order id is one long token: it breaks anywhere rather than widening the table or a phone card. */
.report-id[b-zvb1zhrkzg] { overflow-wrap: anywhere; }
/* /Components/Features/Admin/Reports/ReportsSalesPanel.razor.rz.scp.css */
/* An order id is one long token: it breaks anywhere rather than widening the table or a phone card. */
.report-id[b-s5w5gukui2] { overflow-wrap: anywhere; }
/* /Components/Features/Admin/Reports/ReportsTabs.razor.rz.scp.css */
/* The tabs sit on the page (no card around them): a line under the tab row, then the active tab's content. */
.report-tabs[b-c5e4ubl9mt]  .mud-tabs-tabbar { background: transparent; border-block-end: 1px solid var(--upos-border); }
.report-tabs[b-c5e4ubl9mt]  .mud-tabs-panels { padding-block-start: 16px; }
/* /Components/Features/Admin/SalesOutcomes/ReconciliationProviderBalancesPanel.razor.rz.scp.css */
/* The board sits inside the flush card body of ADM-08: its notes and the connection test take the card's side padding. */
.balances[b-i044rjh2qe], .connection-test[b-i044rjh2qe] { padding-inline: 18px; }
.balances[b-i044rjh2qe] { padding-block-start: 10px; }
.connection-test[b-i044rjh2qe] { padding-block: 4px 16px; border-block-start: 1px solid var(--upos-border); }
.connection-title[b-i044rjh2qe] { margin: 12px 0 2px; font-size: 15.5px; font-weight: 700; }
.connection-result[b-i044rjh2qe] { margin-block-start: 12px; }
.connection-result .kv[b-i044rjh2qe] { margin-block-start: 10px; }
@media (max-width: 767.98px) {
    .balances[b-i044rjh2qe], .connection-test[b-i044rjh2qe] { padding-inline: 14px; }
}
/* /Components/Features/Admin/SalesOutcomes/ReconciliationQueuePanel.razor.rz.scp.css */
/* The notes and the reference lookup sit inside the flush card body: they take the card's side padding. */
.queue-note[b-hjka6tg0mn], .lookup[b-hjka6tg0mn] { padding-inline: 18px; }
.queue-note[b-hjka6tg0mn] { margin-block: 10px; }
.lookup[b-hjka6tg0mn] { padding-block: 4px 16px; border-block-start: 1px solid var(--upos-border); }
.lookup-title[b-hjka6tg0mn] { margin: 12px 0 2px; font-size: 15.5px; font-weight: 700; }
.lookup-form[b-hjka6tg0mn] { align-items: flex-start; margin-block-end: 8px; }
.lookup[b-hjka6tg0mn]  .lookup-field { flex: 1 1 260px; max-width: 360px; }
@media (max-width: 767.98px) {
    .queue-note[b-hjka6tg0mn], .lookup[b-hjka6tg0mn] { padding-inline: 14px; }
}
/* /Components/Features/Admin/Settings/SettingsSection.razor.rz.scp.css */
/* The kit's section head (upos-kit.css .xp .xhead) as the summary of a <details>: no browser marker, a chevron that turns
   when the section is open, and the kit's focus ring. */
summary[b-h3bpvpu3nq] { list-style: none; cursor: pointer; }
summary[b-h3bpvpu3nq]::-webkit-details-marker { display: none; }
summary:focus-visible[b-h3bpvpu3nq] { outline: 3px solid var(--upos-focus); outline-offset: 2px; border-radius: var(--upos-radius-m); }
.xicon[b-h3bpvpu3nq] { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--upos-primary-tint); color: var(--upos-primary); }
h2[b-h3bpvpu3nq] { margin: 0; line-height: 1.35; }
.xs[b-h3bpvpu3nq] { display: block; }
.xchevron[b-h3bpvpu3nq] { display: inline-flex; flex: none; color: var(--upos-text-muted); transition: transform .15s ease; }
details[open] > summary .xchevron[b-h3bpvpu3nq] { transform: rotate(180deg); }
/* /Components/Features/Admin/Users/UserSecurityDialog.razor.rz.scp.css */
/* The security view's tables sit in a dialog, not in an AdminCard, so the card's table rules (AdminCard.razor.css) are
   given here too: the kit's muted header, a small muted second line (.cell-sub), and nothing in a cell may push the table
   wider than the dialog: a body cell breaks a long word and a technical value (bdi.tech: a user agent, a device) wraps
   inside its cell; an address (bdi.num) stays whole. The live check found the sign-in history's user agent 1,400 px wide
   in a 912 px dialog (tests/browser/admin_screens_check.py, "no table wider than its card"). */
.security-tabs[b-f33jmrtcpb]  :is(.admin-table, .paged-table) { background: transparent; }
.security-tabs[b-f33jmrtcpb]  :is(.admin-table, .paged-table) .mud-table-head .mud-table-cell { font-size: 12.5px; font-weight: 700; color: var(--upos-text-muted); background: var(--upos-surface-muted); }
.security-tabs[b-f33jmrtcpb]  :is(.admin-table, .paged-table) .mud-table-body .mud-table-cell { font-size: 14px; overflow-wrap: anywhere; }
.security-tabs[b-f33jmrtcpb]  :is(.admin-table, .paged-table) .mud-table-cell bdi.tech { white-space: normal; }
.security-tabs[b-f33jmrtcpb]  :is(.admin-table, .paged-table) .cell-sub { display: block; font-size: 12px; color: var(--upos-text-muted); }
/* On a phone a cell's label (MudTable's ::before) breaks only between words: "anywhere" is for the value. */
.security-tabs[b-f33jmrtcpb]  :is(.admin-table, .paged-table) .mud-table-body .mud-table-cell::before { overflow-wrap: normal; }
/* /Components/Features/Network/PeriodField.razor.rz.scp.css */
/* The period takes the room of two toolbar fields; its two dates are laid out by the kit's .date-range (upos.css). */
.period-field[b-pf6m17hhew] {
    flex: 2 1 320px;
    min-width: 0;
}
/* /Components/Features/Pos/PosReceiptView.razor.rz.scp.css */
/* Tests: tests/browser/pos_screens_check.py and tests/browser/voucher_screens_check.py (the receipt drawn and printed, live).
   The receipt of the receipt page (the kit's .receipt): 80 mm thermal or A4. Logical properties only: one sheet for RTL and
   LTR; the receipt keeps its own light colours in every theme, as paper does. */
.pos-receipt.paper-80[b-46ec5383kz] { width: 340px; }
.pos-receipt.paper-a4[b-46ec5383kz] { width: 640px; }
.pos-receipt[b-46ec5383kz] { max-width: 100%; }
.rhead[b-46ec5383kz] { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rhead .logo-plate img[b-46ec5383kz] { height: 36px; width: auto; }
.rrows[b-46ec5383kz] { margin: 0; }
.rrow[b-46ec5383kz] { display: flex; justify-content: space-between; gap: 10px; padding-block: 2px; }
.rrow dt[b-46ec5383kz] { margin: 0; color: #42526e; }
.rrow dd[b-46ec5383kz] { margin: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; }
/* A long reference or invoice wraps inside the 80 mm receipt instead of running past its edge. */
.rrow dd bdi[b-46ec5383kz] { white-space: normal; overflow-wrap: anywhere; }
.rrow.total[b-46ec5383kz] { font-weight: 700; }
.rmark[b-46ec5383kz] { margin: 0 0 8px; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; text-align: center; }
.rmark.simulated[b-46ec5383kz] { background: #fef3f2; color: #b42318; }
.rmark.reprint[b-46ec5383kz] { background: #fffaeb; color: #7a2e0e; font-weight: 700; }
.rtoken[b-46ec5383kz] { display: flex; flex-direction: column; gap: 4px; }
.rtoken .pin-box[b-46ec5383kz] { font-size: 15px; text-align: center; padding: 6px 8px; color: #172b4d; }
.rextra[b-46ec5383kz] { margin: 4px 0 0; padding-inline-start: 18px; }
.rextra .pin-box[b-46ec5383kz] { color: #172b4d; }
/* A scratch receipt's cards (plan B V13): the numbered serial, then its PIN; a long serial wraps inside the 80 mm paper. */
.rcardlist[b-46ec5383kz] { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rcardlist li[b-46ec5383kz] { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rcardlist li > bdi:first-child[b-46ec5383kz] { min-width: 0; overflow-wrap: anywhere; }
.rcardlist .pin-box[b-46ec5383kz] { color: #172b4d; font-size: 13px; }
.rfoot[b-46ec5383kz] { text-align: center; color: #5e6c84; display: flex; flex-direction: column; gap: 2px; }

@media print {
    .pos-receipt[b-46ec5383kz] { border: 0; box-shadow: none; margin: 0; padding: 0; }
    .pos-receipt.paper-80[b-46ec5383kz] { width: 72mm; }
    .pos-receipt.paper-a4[b-46ec5383kz] { width: 100%; }
}
/* /Components/Features/Pos/SegmentedChoice.razor.rz.scp.css */
/* Tests: tests/browser/voucher_screens_check.py (drawn in both directions, phone and desktop, live).
   The kit's .seg draws spans; this control is made of buttons, drawn the same way with a 44 px target. On a phone the
   choices wrap instead of running past the screen. */
.seg-choice[b-jallg9p0j1] { flex-wrap: wrap; max-width: 100%; }
.seg-choice button[b-jallg9p0j1] {
    border: 0; background: transparent; padding: 0 14px; min-height: var(--upos-target, 44px); display: inline-flex; align-items: center;
    font: inherit; font-weight: 600; font-size: 14px; color: var(--upos-text-secondary); cursor: pointer;
}
.seg-choice button + button[b-jallg9p0j1] { border-inline-start: 1px solid var(--upos-control-border); }
.seg-choice button.on[b-jallg9p0j1] { background: var(--upos-primary-tint); color: var(--upos-primary); }
.seg-choice button:disabled[b-jallg9p0j1] { cursor: default; opacity: .6; }
/* /Components/Features/Statements/BalanceStatementPanel.razor.rz.scp.css */
/* The filters of a statement sit on the kit's toolbar (wrapping, aligned to the field bottoms); the organization takes
   the room left, the wallet choice and Show their own width. On a phone every filter takes the whole row. */
.statement-organization[b-sj9qie0oqy] {
    flex: 1 1 240px;
    min-width: 0;
}

.statement-wallet[b-sj9qie0oqy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: none;
}

.statement-show[b-sj9qie0oqy] {
    flex: none;
    padding-block-end: 4px;
}

.statement-total[b-sj9qie0oqy] {
    margin-block-end: 12px;
}

/* The count of Ok or Mismatch lines goes under the title when both do not fit on one row. */
.statement-lines-head[b-sj9qie0oqy] {
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .statement-filters > *[b-sj9qie0oqy],
    .statement-filters[b-sj9qie0oqy]  .period-field {
        flex: 1 1 100%;
    }

    .statement-show[b-sj9qie0oqy]  .mud-button-root {
        width: 100%;
    }

    /* The two dates one under the other: side by side a phone cut the year's last digit. */
    .statement-filters[b-sj9qie0oqy]  .date-range > * {
        flex: 1 1 100%;
    }
}
/* /Components/Features/Statements/LatestLinesCard.razor.rz.scp.css */
/* The wallet tabs of an agent only switch the lines below them: their panels stay empty and take no room. MudTabs is a
   child component, so its classes are reached through ::deep. */
[b-j05hefkgg1] .latest-lines-tabs {
    margin-block-start: 8px;
}

/* The wallet names keep their case, as the design's tabs do (MudTabs writes them in capitals). */
[b-j05hefkgg1] .latest-lines-tabs .mud-tab {
    text-transform: none;
}

[b-j05hefkgg1] .latest-lines-panel {
    display: none;
}
/* /Components/Features/Statements/StatementSummary.razor.rz.scp.css */
/* The categories of the statement under the equation, separated from it as in the design. */
.statement-categories[b-v5i17nvjdu] {
    margin-block: 14px 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--upos-border);
}

/* On a phone each category's label sits above its money in / out, so neither is squeezed into a narrow column. */
@media (max-width: 767.98px) {
    .statement-categories[b-v5i17nvjdu] {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 2px;
    }

    .statement-categories dd[b-v5i17nvjdu] {
        margin-block-end: 8px;
    }
}
/* /Components/Features/Vouchers/VoucherBatchReview.razor.rz.scp.css */
/* Tests: tests/browser/voucher_screens_check.py (no horizontal overflow at 390 px, both directions, live).
   The batch's facts: the label column never takes more than two fifths of the card, and a long value (the serial range, the
   cost line) wraps inside its column instead of running past a phone's screen. */
.review-facts[b-sopkgb4pym] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.review-facts .v[b-sopkgb4pym], .review-facts .v bdi[b-sopkgb4pym] { overflow-wrap: anywhere; }
/* /Components/Features/Vouchers/VoucherClaimsScreen.razor.rz.scp.css */
/* Tests: tests/browser/voucher_screens_check.py (no horizontal overflow at 1440 and 390 px, both directions, live).
   ADM-25: the four claim figures in one row on a desktop, two on a phone (the kit's phone rule). */
.claims-kpis[b-lm2ocysl6a] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1279.98px) {
    .claims-kpis[b-lm2ocysl6a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Features/Vouchers/VoucherStockScreen.razor.rz.scp.css */
/* Tests: tests/browser/voucher_screens_check.py (no horizontal overflow at 1440 and 390 px, both directions, live).
   ADM-21: the six status counts in one row on a wide screen, three on a narrow desktop, two on a phone (the kit's phone
   rule); the batches beside the review card, stacked below 1280 px. */
.voucher-kpis[b-6i8qldjc8h] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.voucher-grid[b-6i8qldjc8h] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

@media (max-width: 1279.98px) {
    .voucher-kpis[b-6i8qldjc8h] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .voucher-grid[b-6i8qldjc8h] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Portal/Admin/Adm17AuditPage.razor.rz.scp.css */
/* ADM-17's tabs sit on the page (no card around them), as ADM-14's: a line under the tab row, then the active tab's
   content. */
.adm17-tabs[b-0j068g2q3g]  .mud-tabs-tabbar { background: transparent; border-block-end: 1px solid var(--upos-border); }
.adm17-tabs[b-0j068g2q3g]  .mud-tabs-panels { padding-block-start: 16px; }
/* /Components/Pages/Portal/Pos/NotificationsPage.razor.rz.scp.css */
/* POS-11: the unread marker sits at the start of the line in both directions (contract POS-11). */
.unread-dot[b-o9wlbti53u] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--upos-primary); margin-inline-end: 8px; vertical-align: middle; }
.notice-row[b-o9wlbti53u] { display: flex; flex-direction: column; gap: 2px; }