/* ---- صفحهٔ تسویهٔ اعضا ------------------------------------------------------
   A money page, so the numbers are the thing that has to be readable: one row per person, the
   figure on the left of each cell and what it means under it in small type, and nothing between
   them competing for the eye. */

/* auto-fit rather than a fixed count: the card that reports transfer fees joined four others, and a
   hard `repeat(5,1fr)` would squeeze «۴۲٬۳۰۰ تومان» onto two lines on a laptop. The tiles keep a
   floor of 190px and wrap when they run out of room. */
.settle-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:13px; margin-top:18px; }
.settle-summary article { padding:15px 16px; border:1px solid var(--line); border-radius:15px; background:#ffffff07; }
.settle-summary span { display:block; color:#938da8; font-size:12.5px; }
.settle-summary strong { display:block; margin:6px 0 3px; color:#c8bcff; font-size:20px; font-weight:800; }
.settle-summary small { color:var(--muted); font-size:12px; }
.settle-rates { margin:11px 0 0; color:var(--muted); font-size:12.5px; line-height:1.95; }
.settle-count { margin:0 0 10px; color:#938da8; font-size:12.5px; }

/* The three lists this page carries, side by side instead of stacked down it. Bigger than an
   ordinary filter chip because this is the page's own navigation and not a narrowing of a list, and
   because on a phone it is the one row that has to be noticed. `[hidden]` on the panels needs no
   help — a <section> is display:block and the browser's own rule wins — but it is spelled out here
   next to the forms above that did need it. */
.settle-tabs { margin:20px 0 0; }
.settle-tabs .filter { flex:1 1 auto; padding:11px 13px; border-radius:11px; font-size:13.5px; font-weight:700; text-align:center; }
.settle-tabs .filter.is-warn { border-color:#7a5a24; color:#ffcf85; background:#ffb84d10; }
.settle-tabs .filter.is-warn.active { border-color:#c08a2e; background:#ffb84d24; }
.settle-panel[hidden] { display:none; }

/* One grid, shared by the header strip and every row, so a column heading is over its own column
   without either side being told the widths twice. It scrolls inside its own box rather than
   widening the page — the same trap the action rows fell into on a phone. */
.settle-table { overflow-x:auto; }
.settle-head, .settle-cells { display:grid; grid-template-columns:minmax(180px,2.2fr) 100px minmax(140px,1.2fr) minmax(150px,1.3fr) minmax(130px,1fr) 96px; gap:10px; align-items:center; min-width:840px; }
.settle-head { padding:0 4px 9px; border-bottom:1px solid var(--line); color:#938da8; font-size:12.5px; }
.settle-row { border-bottom:1px solid var(--line); padding:12px 4px; }
.settle-row:last-child { border-bottom:0; }
/* Somebody we owe nothing to is still on the page — that is how «همه را دیدم» stays true — but it
   is not what anyone came here to read. */
.settle-row.is-clear { opacity:.55; }
.settle-who strong { display:block; color:#e8e3f7; font-size:14.5px; }
.settle-who p { margin:3px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.settle-cell b { display:block; color:#e1ddec; font-size:14px; font-weight:700; }
.settle-cell.money b { color:#69d5ff; }
.settle-cell span { display:block; margin-top:2px; color:#827c98; font-size:11.5px; }
.settle-clear { color:#65d7ae; font-size:12px; font-weight:700; }
/* A member we are not supposed to pay yet. Amber and on the row itself, because this is the last
   place anybody looks before making a transfer, and the check it replaced used to happen on a form
   the member filled in themselves. */
.settle-follow-gap { margin:8px 4px 0; padding:7px 10px; border:1px solid #6b5a1f; border-radius:10px; background:#ffb84d0f; color:#e8d3a6; font-size:12px; line-height:1.8; }
/* Written as a descendant of the cell on purpose: `.settle-cell span` above sets every sub-label to
   block and grey, and a bare class here would lose to it and print a grey full-width line. */
.settle-cell .settle-gap-mark { display:inline-block; margin-top:5px; padding:2px 6px; border-radius:7px; background:#ffb84d1f; color:#f0c36a; font-size:11px; font-weight:700; white-space:nowrap; }
/* Under the floor the monthly pass pays above. Grey rather than amber: it is not a fault and needs
   no fixing, it is a row that waits for next month. */
.settle-cell .settle-below-mark { display:inline-block; margin-top:5px; padding:2px 6px; border-radius:7px; background:#ffffff0d; color:#9b95b4; font-size:11px; font-weight:700; white-space:nowrap; }
.settle-row.is-below { opacity:.72; }
.settle-summary article.is-ready { border-color:#3c6f57; background:#65d7ae0d; }
.settle-summary article.is-ready strong { color:#8fe0b4; }
.settle-act { text-align:start; }

/* A note on the account cell, and the two it can carry pull in opposite directions: a شبا that
   belongs to a different bank than the one picked has to stop somebody before they send money, and a
   free transfer is worth seeing at a glance. Amber and green rather than one neutral badge, because
   an operator scanning forty rows reads the colour first and the words second. */
.settle-bank-flag { display:inline-block; margin-top:4px; padding:2px 7px; border-radius:6px; font-size:11px; font-weight:700; }
.settle-bank-flag.is-warn { background:#ffb84d24; color:#ffb84d; }
.settle-bank-flag.is-free { background:#65d7ae1f; color:#8fe0b4; }

.settle-sort { border:0; background:transparent; padding:0; color:#938da8; font-size:12.5px; font-weight:700; }
.settle-sort.is-active { color:#a995ff; }

/* The settlement itself: full width under the row it belongs to, never squeezed into the action
   column, because it carries three fields and a warning. */
.settle-form, .settle-void-form { margin-top:11px; padding:13px 14px; border:1px solid #7657ec3d; border-radius:13px; background:#7657ec12; display:grid; gap:10px; }
/* `display:grid` on a class outranks the browser's own `[hidden]{display:none}`, so without this
   line every one of these forms ships open — which on the settlements page means forty payment
   forms stacked down the screen, each with a live «ثبت تسویه» button. */
.settle-form[hidden], .settle-void-form[hidden] { display:none; }
.settle-form-head { margin:0; color:#c8bcff; font-size:13.5px; }
.settle-form label, .settle-void-form label { display:grid; gap:5px; color:#b6b0cb; font-size:13px; }
.settle-form input, .settle-form select, .settle-void-form input { width:100%; border:1px solid #36304f; border-radius:9px; padding:10px; background:#110f21; color:#fff; outline:none; font-family:inherit; font-size:14px; }
.settle-form input:focus, .settle-form select:focus, .settle-void-form input:focus { border-color:#8469ff; }
.settle-form .form-help, .settle-void-form .form-help { margin:0; }
/* What the transfer costs, directly under the two fields that decide it, and redrawn in place as
   they change. It is a box rather than a line of help text because it carries a number the operator
   is about to spend, and help text is the thing on a form nobody reads. */
.settle-fee-line { margin:0; }
.settle-fee { display:block; padding:9px 11px; border:1px solid #36304f; border-radius:9px; background:#110f21; color:#d8d3ea; font-size:13px; font-feature-settings:"tnum"; }
.settle-fee small { display:block; margin-top:3px; color:#827c98; font-size:11.5px; font-feature-settings:normal; }
.settle-fee.is-free { border-color:#3c6f57; background:#1a3b2c33; color:#8fe0b4; }
.settle-fee.is-assumed { border-color:#7a5a24; background:#ffb84d12; color:#ffcf85; }
.settle-fee.is-unknown { color:#9b95b4; }
.settle-void-form { border-color:#ff6b8a45; background:#ff6b8a10; }

/* ---- ردیف‌های تسویه و صندوق ---------------------------------------------------
   A settlement row is a block of text on one side and a badge with two or three buttons on the
   other. `.data-row` gives the text block `flex:1`, which is a basis of zero: it yields every pixel
   the buttons ask for, and the buttons ask for the same width whatever the screen is. On a phone
   that left the text 90px of a 390px row, so a name and «۲۴۰٬۰۰۰ تومان» came down the screen a word
   per line for a thousand pixels and the receipt under them was a thumbnail of a thumbnail.

   A real basis makes the row decide for itself. While the text and the buttons both fit they sit
   side by side exactly as before; when they do not, the text takes the whole line and the buttons
   drop underneath it. 280px is where the first line of a row stops breaking mid-figure, and it is a
   width of text rather than a width of phone, so the same rule covers a narrow desktop window and
   the brand panel's narrower column without a breakpoint of its own.

   The buttons align to the top of the row, not its middle: a row carrying a receipt is three hundred
   pixels tall, and centred buttons floated halfway down it beside the picture, level with nothing.
   At the top they are next to the name they act on. */
.settle-ledger-row, .settle-mismatch-row, .cash-move { flex-wrap:wrap; align-items:flex-start; }
.settle-ledger-row>div:first-child, .settle-mismatch-row>div:first-child, .cash-move>div:first-child { flex:1 1 280px; }
/* The badge and the buttons are one thing to look at, so they are one thing to lay out. Loose in the
   row they wrapped one at a time, and between about 450px and 640px that left «ابطال» alone on a
   line under the text with the other two still up beside it. Together they either fit next to the
   text or move under it as a block.
   The margins go because both the badge and every text button carry `margin-right:auto` from the
   panel's base sheet: with nothing on their line growing to absorb it, the free space was split
   between them and pushed them apart into three unrelated things. Spacing here is the gap. */
.settle-row-actions { display:flex; flex:0 1 auto; flex-wrap:wrap; align-items:center; gap:7px 14px; }
.settle-row-actions .status, .settle-row-actions .text-button { margin:0; }

/* The void form is a grid with a field in it, so left in the middle of the row it would take its own
   max-content width and leave the receipt beside it one word per line. It goes on a full-width line
   of its own instead, the same answer the proof panel needed. */
.settle-ledger-row .settle-void-form { flex:1 0 100%; }
.settle-ledger-row.is-void strong { text-decoration:line-through; color:#9d92c4; }
.settle-rate-note { margin:4px 0 0; color:#827c98; font-size:11.5px; }
.settle-void-note { margin:5px 0 0; color:#ff9db0; font-size:12px; line-height:1.9; }

/* ---- مغایرت فیش با سند -------------------------------------------------------
   Three states and three colours, because the whole point of the line is that «they agree» and
   «nobody has looked» are different answers. Grey is the unread one and it is deliberately the
   quietest: it is a to-do, not a fault. */
.settle-receipt-check { margin:5px 0 0; }
.settle-receipt-check small { display:block; margin-top:2px; color:#827c98; font-size:11.5px; }
.settle-receipt-line { display:inline-block; padding:4px 9px; border:1px solid #36304f; border-radius:8px; font-size:12.5px; line-height:1.8; font-feature-settings:"tnum"; }
.settle-receipt-line.is-unchecked { color:#9b95b4; }
.settle-receipt-line.is-ok { border-color:#3c6f57; background:#1a3b2c33; color:#8fe0b4; }
.settle-receipt-line.is-mismatch { border-color:#7a5a24; background:#ffb84d12; color:#ffcf85; }

/* Same skeleton as the void form; amber rather than red, because reading a slip is not undoing
   anything. Both need the [hidden] line for the same reason the forms above do: `display:grid` on a
   class beats the browser's own `[hidden]{display:none}`. */
.settle-receipt-form, .settle-reconcile-form { margin-top:10px; padding:13px 14px; border:1px solid #ffb84d3d; border-radius:13px; background:#ffb84d0f; display:grid; gap:10px; }
.settle-receipt-form[hidden], .settle-reconcile-form[hidden] { display:none; }
.settle-receipt-form label, .settle-reconcile-form label { display:grid; gap:5px; color:#b6b0cb; font-size:13px; }
.settle-receipt-form input, .settle-reconcile-form input { width:100%; border:1px solid #36304f; border-radius:9px; padding:10px; background:#110f21; color:#fff; outline:none; font-family:inherit; font-size:14px; }
.settle-receipt-form input:focus, .settle-reconcile-form input:focus { border-color:#8469ff; }
.settle-receipt-form .form-help, .settle-reconcile-form .form-help { margin:0; }
.settle-reconcile-form { border-color:#ff6b8a45; background:#ff6b8a10; }
.settle-reconcile-form .form-help.is-warn { color:#ffcf85; }
.settle-reconcile-form button[disabled] { opacity:.5; cursor:not-allowed; }

.settle-mismatch-what { margin:4px 0 0; color:#ffcf85; font-size:13px; line-height:1.9; font-feature-settings:"tnum"; }
/* The one figure on the summary strip that is a fault rather than a fact. Coloured only when it is
   non-zero, so a clean page does not carry a warning about nothing. */
.settle-summary article.is-warn { border-color:#7a5a24; background:#ffb84d0f; }
.settle-summary article.is-warn strong { color:#ffcf85; }
/* Money owed one way or the other, on the brands page. The strip already said «طلب ما از برندها» in
   words; these two rules are what makes the answer readable before the words are, which on a strip
   of six figures is the difference between noticing a debt and scrolling past it. Both were written
   into the markup long before this rule existed and did nothing at all until it did. */
.settle-summary article.is-negative { border-color:#ff6b8a55; background:#ff6b8a12; }
.settle-summary article.is-negative strong { color:#ff9db0; }
.settle-summary article.is-positive { border-color:#3fbf8f55; background:#3fbf8f10; }
.settle-summary article.is-positive strong { color:#65d7ae; }

/* ---- صفحهٔ صندوق اپراتور ----------------------------------------------------
   The same visual family as the page above, because it is the other side of the same money: the
   summary strip is the settlement page's, one line taller so every figure can carry its dirham. */

.cash-summary article b { display:block; margin-bottom:4px; color:#69d5ff; font-size:13px; font-weight:700; }
/* The one card that is allowed to shout. A shortfall and a surplus are the same layout in two
   colours, so the answer is readable from across the room without reading the label. */
.cash-summary article.is-negative { border-color:#ff6b8a55; background:#ff6b8a12; }
.cash-summary article.is-negative strong { color:#ff9db0; }
.cash-summary article.is-positive { border-color:#3fbf8f55; background:#3fbf8f10; }
.cash-summary article.is-positive strong { color:#65d7ae; }

.cash-boxes { display:grid; gap:13px; }
.cash-box { padding:15px 16px; border:1px solid var(--line); border-radius:15px; background:#ffffff05; }
.cash-box.is-negative { border-color:#ff6b8a3d; }
.cash-box > header { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; justify-content:space-between; }
.cash-box header strong { display:block; color:#e8e3f7; font-size:15px; }
.cash-box header p { margin:3px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.cash-balance { text-align:start; }
.cash-balance span { display:block; color:#938da8; font-size:12px; }
.cash-balance strong { display:block; margin-top:3px; color:#c8bcff; font-size:19px; font-weight:800; }
.cash-balance b { display:block; color:#69d5ff; font-size:12.5px; font-weight:700; }
.cash-box.is-negative .cash-balance strong { color:#ff9db0; }
/* Four cells since the transfer fee joined them, and auto-fit rather than a fourth fixed column so a
   narrow desktop window wraps to two rows instead of squeezing four figures past legibility. */
.cash-box-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:10px; margin-top:13px; }
.cash-box-grid div { padding:10px 11px; border:1px solid var(--line); border-radius:12px; }
.cash-box-grid span { display:block; color:#938da8; font-size:12px; }
.cash-box-grid b { display:block; margin:4px 0 2px; color:#e1ddec; font-size:14.5px; font-weight:700; }
.cash-box-grid small { color:#827c98; font-size:11.5px; }
.cash-warn { margin:11px 0 0; color:#ff9db0; font-size:12.5px; line-height:1.9; }

/* Same shape and same reason as the settlement form: full width under the card it belongs to, and
   `display:grid` on the class would outrank `[hidden]` if the second rule were missing. */
.cash-form { margin-top:12px; padding:13px 14px; border:1px solid #7657ec3d; border-radius:13px; background:#7657ec12; display:grid; gap:10px; }
.cash-form[hidden] { display:none; }
.cash-form.is-expense { border-color:#ffb84d3d; background:#ffb84d0f; }
.cash-form-head { margin:0; color:#c8bcff; font-size:13.5px; }
.cash-form.is-expense .cash-form-head { color:#ffcf8a; }
.cash-form-row { display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:10px; }
/* A row that carries two boxes instead of three, so the pair sits full width rather than leaving a
   third of the card empty. */
.cash-form-row.pair { grid-template-columns:1.2fr 1fr; }
.cash-form label { display:grid; gap:5px; color:#b6b0cb; font-size:13px; }
/* Under the box, not beside the title: a label long enough to say what the field is would wrap into
   the next column and stop lining up with the box it names. */
.cash-form .field-hint { color:#8f88ab; font-size:11.5px; line-height:1.85; }
.cash-form .field-hint code { font-family:inherit; color:#b6a4ff; }
.cash-form input, .cash-form select { width:100%; border:1px solid #36304f; border-radius:9px; padding:10px; background:#110f21; color:#fff; outline:none; font-family:inherit; font-size:14px; }
.cash-form input:focus, .cash-form select:focus { border-color:#8469ff; }
.cash-form .form-help { margin:0; }
/* A row carrying one full-width field. The reseller picker is one of them: the list it drops open is
   the width of the names in it, and a third of a card is not enough for a name and a share. */
.cash-form-row.solo { grid-template-columns:1fr; }

/* ---- تیک داخل فرم --------------------------------------------------------------
   A checkbox in one of these forms needs both rules above undone. `.cash-form label` is a grid, so
   the box lands on a line of its own above its sentence; `.cash-form input` is 100% wide, so it then
   stretches the width of the card and reads as an empty text field somebody broke, which is exactly
   how the first one looked. This is a row instead: the box first, the sentence beside it, both on
   the same baseline whatever the sentence wraps to.
   The size is deliberate rather than inherited. A browser draws a checkbox at about 13px, which next
   to a paragraph of Persian is a control an operator misses; 33px is that at two and a half times,
   big enough to be the thing the eye lands on when the card opens. The sentence is bold for the same
   reason: it is a switch that changes what every member sees, not another field to fill in. */
.cash-form .check-toggle { display:flex; align-items:center; gap:12px; color:#e9e6f5; font-size:14px; font-weight:700; line-height:1.7; cursor:pointer; }
/* The text-field paint has to come off with it. `.cash-form input` gives every input a dark
   background, a border and a radius, and on a checkbox that is a small filled square the browser
   then draws its tick inside: the control ends up invisible against the card. Cleared back to the
   native control, which accent-color colours properly. */
.cash-form .check-toggle input[type="checkbox"] { flex:none; width:33px; height:33px; margin:0; padding:0; border:0; border-radius:0; background:none; accent-color:#7657ec; cursor:pointer; }

/* ---- انتخابگر با جست‌وجو، سمت کارکنان -----------------------------------------
   Same shape as the member's bank field and deliberately the same look, so an operator who has seen
   one has seen both. The list is absolutely positioned: opening it must not push the fields under it
   down the card, and `position:relative` on the wrapper is what anchors it. The z-index only has to
   beat the fields below, except inside the «معرف تازه» lightbox, where it also has to beat the card
   itself, and that is what the last rule is for. */
.combo-select { position:relative; display:grid; gap:5px; }
.combo-label { color:#b6b0cb; font-size:13px; }
.combo-box { position:relative; display:flex; align-items:center; }
.combo-search { width:100%; border:1px solid #36304f; border-radius:9px; padding:10px 34px 10px 10px; background:#110f21; color:#fff; font-family:inherit; font-size:14px; outline:none; }
.combo-search:focus { border-color:#8469ff; }
/* The arrow sits on the right because the field is RTL and that is where the text ends. */
.combo-toggle { position:absolute; inset-inline-start:8px; border:0; background:none; color:#8a83a6; cursor:pointer; font-size:13px; line-height:1; padding:4px; }
.combo-options { position:absolute; z-index:30; top:100%; inset-inline-start:0; inset-inline-end:0; max-height:280px; overflow-y:auto; margin:4px 0 0; padding:5px; list-style:none; border:1px solid #4a3f7a; border-radius:11px; background:#15122b; box-shadow:0 18px 40px #05030fbf; }
.combo-options[hidden] { display:none; }
.combo-option { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
/* Filtering hides a row by setting its `hidden` property, and `display:flex` on the class above beats
   the browser's own `[hidden]{display:none}`. Without this line the search box filters nothing that
   the eye can see, while everything underneath behaves as though it had. */
.combo-option[hidden] { display:none; }
.combo-option b { color:#e6e2f2; font-size:13.5px; font-weight:600; overflow-wrap:anywhere; }
/* The line that tells two people with the same name apart: the email, the handle, the share. Quiet,
   because nobody picks by it, and unreadable is worse than absent, so it wraps rather than clips. */
.combo-option span { color:#7d7796; font-size:11.5px; font-feature-settings:"tnum"; text-align:end; overflow-wrap:anywhere; }
.combo-option:hover, .combo-option.is-active { background:#7657ec2e; }
.combo-option.is-chosen b { color:#c8bcff; }
.combo-option.is-chosen::after { content:'✓'; color:#8fe0b4; font-size:12px; }
/* Pinned under the rows and separated from them, because it is not one of the answers: it is the
   door out of the list, and it stays on screen when the search leaves no rows at all. */
.combo-action-row { margin-top:4px; padding-top:5px; border-top:1px solid #362e5c; list-style:none; }
.combo-action { width:100%; border:0; border-radius:8px; padding:9px 10px; background:#7657ec1f; color:#c8bcff; font-family:inherit; font-size:13px; text-align:start; cursor:pointer; }
.combo-action:hover { background:#7657ec38; }
.combo-empty { margin:4px 0 0; color:#ffb84d; font-size:12.5px; line-height:1.8; }

/* The lightbox that makes a reseller without leaving the brand form. Wider than the task card the
   modal shell was built for, because this one holds a form with paired fields rather than a
   paragraph and a button. */
.reseller-new-card { width:min(640px,100%); }
.reseller-new-card h2 { padding-inline-end:38px; }
.reseller-new-card .cash-form { margin-top:14px; }
.reseller-new-card .combo-options { z-index:40; }

/* The bank's cut, under the settlement it was charged for. Dimmer than the amount above it: it is
   the reason the box is a little smaller than the payments add up to, not a payment of its own. */
.cash-move-fee { margin:3px 0 0; color:#b6a4ff; font-size:12px; line-height:1.8; }
.cash-move-fee.is-free { color:#65d7ae; }
.cash-move-fee.is-unknown { color:#ffcf85; }

.cash-move .settle-void-form { flex:1 0 100%; }
.cash-move.is-void strong { text-decoration:line-through; color:#9d92c4; }

/* «ورود به پنل این برند». Boxed and warm-edged rather than a bare link in the paragraph, because it
   is the one control on this page that takes the operator out of the staff panel entirely. */
.brand-enter { margin:14px 0 4px; padding:13px 15px; border:1px solid #4a3f77; border-radius:13px; background:#ffffff06; }
.brand-enter .text-button { margin:0 0 4px; font-size:14px; font-weight:700; }
.brand-enter .form-help { margin:0; }

/* ---- کارت هر برند در «برندها و پرداخت‌ها» ------------------------------------
   A customer is a box of their own here, not a row under a hairline. The list is short and every
   entry on it carries eight figures, so what the eye needs is the edge of the record: which balance,
   which page and which warning belong to which name. A rule between rows says «next» and nothing
   else, and on a phone, where a record is a dozen lines tall, it stopped saying even that.

   The facts inside pack sideways and wrap like words in a sentence, rather than taking a line each.
   A line each is what the old row looked like it was doing and it is what made the page long: the
   badges and the button took their own width whatever the screen was, the text was given the ~130px
   left over on a phone, and every figure came down the page two words at a time. Packed, four or
   five of the eight facts share a line on a phone and the whole record is a third of the height. A
   fact never breaks across a line; only one too long for a line of its own wraps inside itself. */
.brand-client-list { display:grid; gap:12px; }
.brand-client-card { padding:15px 16px; border:1px solid var(--line); border-radius:14px; background:#ffffff05; transition:border-color .18s ease, background .18s ease; }
.brand-client-card:hover { border-color:#4a3f77; background:#ffffff08; }
.brand-client-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 14px; }
/* The name and what the account stands at are one sentence and share a line while there is room for
   one; they part on a phone. Written as two stacked blocks they cost every card a line it did not
   need, on every screen, to say something four words long. */
.brand-client-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px; min-width:0; }
.brand-client-head strong { font-size:16px; overflow-wrap:anywhere; }
.brand-client-standing { margin:0; color:var(--muted); font-size:13px; font-feature-settings:"tnum"; }
.brand-client-standing.is-positive { color:#8fe0b4; }
.brand-client-standing.is-negative { color:#ff9db0; }
/* The two badges and the button are one thing to read, so they wrap as one thing; loose in the
   header they came apart one at a time and left «فعال» stranded on a line of its own. The margins
   go because both .status and .text-button carry margin-right:auto from the panel's base sheet,
   which pushes them into three unrelated pieces once nothing on their line grows. */
.brand-client-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.brand-client-actions .status, .brand-client-actions .text-button { margin:0; }
.brand-client-actions .text-button { font-weight:700; }
.brand-facts { display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.brand-fact { display:flex; gap:5px; min-width:0; max-width:100%; font-size:13px; line-height:1.85; }
.brand-fact span { flex:0 0 auto; color:#827c98; }
.brand-fact b { min-width:0; color:#d3cee6; font-weight:600; font-feature-settings:"tnum"; overflow-wrap:anywhere; }
/* The warnings keep their own colours and sizes; all this does is stop the first of them carrying
   the top margin it was given for sitting under a paragraph. .cost-line's margin is !important. */
.brand-client-notes { margin-top:10px; }
.brand-client-notes>:first-child { margin-top:0!important; }
/* The four ways in, along the bottom edge of the card. They are equal-width and they are all on the
   card, because there is no first among them: an operator comes to this page to issue a sign-in as
   often as to correct a figure, and the old single «باز کردن» made one of those two presses and the
   other three plus a hunt. They stretch to fill the row on a wide card and fall to two-by-two on a
   phone, which keeps every one of them a full-thumb target instead of a link in a line of links. */
.brand-client-keys { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }
.brand-key { flex:1 1 130px; padding:9px 10px; border:1px solid #3b3560; border-radius:10px; background:#ffffff08; color:#cfc9e8; font:inherit; font-size:13px; font-weight:700; text-align:center; cursor:pointer; transition:.16s; }
.brand-key:hover { border-color:#7657ec; background:#7657ec1f; color:#fff; }
.brand-key:focus-visible { outline:2px solid #8469ff; outline-offset:2px; }
/* The number of sign-in accounts rides on its own key, because zero of them is the reason a customer
   who has paid still cannot get in, and it is worth seeing without opening anything. */
.brand-key b { display:inline-block; min-width:18px; margin-inline-start:4px; padding:1px 5px; border-radius:6px; background:#7657ec2e; color:#c3b4ff; font-size:11.5px; }

/* «برند تازه», folded. The summary is the whole clickable strip, styled as the card's own heading so
   the closed state reads as a section rather than as a stray link. The marker goes because the
   browser's own triangle points the wrong way on an RTL line in two of the three engines. */
.brand-new { padding:0; }
.brand-new>summary { display:flex; align-items:center; gap:9px; padding:17px 21px; color:#e8e3f7; font-size:16px; font-weight:700; cursor:pointer; list-style:none; }
.brand-new>summary::-webkit-details-marker { display:none; }
.brand-new>summary span { display:grid; place-items:center; width:26px; height:26px; border-radius:9px; background:#7657ec2e; color:#c3b4ff; font-size:14px; }
.brand-new>summary:hover { color:#fff; }
.brand-new[open]>summary { border-bottom:1px solid var(--line); }
.brand-new>:not(summary) { margin:0 21px; }
.brand-new>form { margin-bottom:21px; padding-top:17px; }

/* ---- یک برندِ بازشده ---------------------------------------------------------
   With a brand open the list is gone, so this header is the only thing saying whose money is on the
   screen. It repeats the standing rather than only the name: every section under it changes that
   figure, and the operator who opened the payments is usually looking at it while typing. */
.brand-open-intro { padding-bottom:18px; }
.brand-open-intro h1 { margin:8px 0 0; }
.page-intro>.brand-back { margin:0; padding:0; font-size:14px; font-weight:700; }
.page-intro>.brand-back:hover { color:#c3b4ff; }
.page-intro>.brand-open-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 0; color:var(--muted); font-size:13.5px; }
.brand-open-line b { font-weight:700; color:#d3cee6; font-feature-settings:"tnum"; }
.brand-open-line b.is-positive { color:#8fe0b4; }
.brand-open-line b.is-negative { color:#ff9db0; }
/* Five sections is one too many for equal columns on a laptop, so they size to their own labels and
   wrap; the strip stays one line where it fits and never becomes five stacked buttons except on a
   phone, where .settle-tabs already stacks them. */
.brand-tabs { flex-wrap:wrap; margin:18px 0 4px; }
.brand-tabs .filter { flex:0 1 auto; }

@media (max-width:900px) {
  .settle-summary { grid-template-columns:repeat(2,1fr); }
  .cash-form-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .settle-summary { grid-template-columns:1fr; }
  /* Six tiles one per row is half a phone screen of scrolling before the tab strip underneath them
     is reached, which is how the discrepancy list stayed unfound in the first place. Two per row on
     this page only: the cash box and the brand strip carry a taller tile and stay stacked. */
  .settle-totals { grid-template-columns:repeat(2,1fr); }
  .settle-totals strong { font-size:17px; }
  /* Three names of that length do not fit across a phone, and wrapping them leaves one tab alone on
     a second line looking like something else. Stacked, each one is a full-width target. */
  .settle-tabs { display:grid; grid-template-columns:1fr; }
  /* Five of them stacked is a screen of buttons before the section they choose between. Two by two
     they are still full-thumb targets and the whole strip is one glance. The grid is undone rather
     than narrowed, because these labels are short enough to pair and the settlement ones are not. */
  .brand-tabs { display:flex; }
  .brand-tabs .filter { flex:1 1 44%; }
  /* Four tiles one per row put the tab strip below the fold on an opened brand, which is how the
     section keys ended up looking like they had done nothing. */
  .brand-open-summary, .brand-list-summary { grid-template-columns:repeat(2,1fr); gap:9px; }
  .brand-open-summary article, .brand-list-summary article { padding:11px 12px; }
  .brand-open-summary strong, .brand-list-summary strong { font-size:16px; }
  .cash-box-grid, .cash-form-row, .cash-form-row.pair { grid-template-columns:1fr; }
  /* On a phone the table stops pretending to be a table: the header strip has nothing to align to
     once each row is a stack, and leaving it there prints five headings over one column. */
  .settle-head { display:none; }
  .settle-cells { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; min-width:0; }
  .settle-who, .settle-act { grid-column:1 / -1; }
}