/* Most styling comes from Theme/AppTheme.cs. This file is only for the login page and small fixes. */
html, body { margin: 0; }

.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1F5AA6 0%, #0F9D8A 100%);
    font-family: "Segoe UI", Tahoma, Cairo, Arial, sans-serif;
}
.login-card {
    width: 340px; background: #fff; border-radius: 10px; padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; flex-direction: column;
}
.login-logo { font-size: 28px; font-weight: 700; color: #1F5AA6; text-align: center; }
.login-sub { color: #6b7280; text-align: center; margin-bottom: 20px; }
.login-card label { font-size: 13px; color: #374151; margin: 8px 0 4px; }
.login-card input { padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; }
.login-card input:focus { outline: 2px solid #1F5AA6; border-color: transparent; }
.login-card button {
    margin-top: 20px; padding: 11px; border: 0; border-radius: 6px; background: #1F5AA6;
    color: #fff; font-size: 15px; cursor: pointer;
}
.login-card button:hover { background: #184a8a; }
.login-error { background: #fde8e8; color: #b42318; padding: 8px; border-radius: 6px; font-size: 13px; }
.login-info { background: #e7f6ec; color: #1e6b3a; padding: 8px; border-radius: 6px; font-size: 13px; }
.login-lang { margin-top: 16px; text-align: center; font-size: 13px; }
.login-lang a { color: #1F5AA6; text-decoration: none; }

#blazor-error-ui { display: none; }

/* Payment box: paid amount above the payment method, easy to see */
.pay-box {
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
    border: 2px solid var(--mud-palette-success); border-radius: 10px;
    background: rgba(var(--mud-palette-success-rgb), 0.06);
}
/* Amount starts on the same side as the method text below it, so the eye does not jump across */
.pay-amount input { font-size: 1.5rem; font-weight: 700; text-align: start; }

/* Payment section (PaymentSplit): one sale paid by many methods.
   Colors come from the theme: green = cash, blue = card / electronic, amber = open / on account. */
.pay-split {
    --pay-cash: var(--mud-palette-success); --pay-cash-rgb: var(--mud-palette-success-rgb);
    --pay-card: var(--mud-palette-info); --pay-card-rgb: var(--mud-palette-info-rgb);
    --pay-open: var(--mud-palette-warning); --pay-open-rgb: var(--mud-palette-warning-rgb);
    /* Cash back (negative cash line, given back to the customer): purple */
    --pay-back: #8e24aa; --pay-back-rgb: 142,36,170;
    display: flex; flex-direction: column; gap: 10px; padding: 14px;
    border-radius: 14px; border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 18px -12px rgba(0,0,0,.25);
}
.pay-split-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pay-split-title { font-weight: 600; font-size: .95rem; }
.pay-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    font-size: .9rem; white-space: nowrap;
}
.pay-status b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pay-status-open, .pay-status-account, .pay-status-credit { background: rgba(var(--pay-open-rgb), .14); color: var(--mud-palette-warning-darken); }
.pay-status-paid { background: rgba(var(--pay-cash-rgb), .14); color: var(--mud-palette-success-darken); }
.pay-status-change { background: rgba(var(--pay-card-rgb), .14); color: var(--mud-palette-info-darken); }
.pay-status-cashback { background: rgba(var(--pay-back-rgb), .14); color: var(--pay-back); font-weight: 600; }
.pay-status-action { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.pay-status-over { background: rgba(var(--mud-palette-error-rgb), .12); color: var(--mud-palette-error); white-space: normal; }

/* Coverage bar: one part per payment, amber stripes = still open */
.pay-meter {
    display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px;
    background: rgba(var(--pay-open-rgb), .12);
}
.pay-seg { height: 100%; transition: width .25s ease; }
.pay-seg-cash { background: var(--pay-cash); }
.pay-seg-card { background: var(--pay-card); }
.pay-seg-back { background: repeating-linear-gradient(135deg, var(--pay-back) 0 6px, rgba(var(--pay-back-rgb), .55) 6px 12px); }
.pay-seg-credit, .pay-seg-open {
    background: repeating-linear-gradient(135deg, rgba(var(--pay-open-rgb), .55) 0 6px, rgba(var(--pay-open-rgb), .25) 6px 12px);
}

/* Method tiles */
.pay-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pay-tile {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; padding: 6px 10px; cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    border-top: 4px solid var(--pay-tile-color); transition: transform .08s, background .15s;
}
.pay-tile:hover { background: rgba(var(--pay-tile-rgb), .08); }
.pay-tile:active { transform: scale(.97); }
.pay-tile-on { background: rgba(var(--pay-tile-rgb), .14); border-color: var(--pay-tile-color); }
.pay-tile-check { position: absolute; top: 2px; inset-inline-end: 4px; color: var(--pay-tile-color); font-size: 1rem !important; }
.pay-tile-cash { --pay-tile-color: var(--pay-cash); --pay-tile-rgb: var(--pay-cash-rgb); }
.pay-tile-card { --pay-tile-color: var(--pay-card); --pay-tile-rgb: var(--pay-card-rgb); }
.pay-tile-credit { --pay-tile-color: var(--pay-open); --pay-tile-rgb: var(--pay-open-rgb); }

/* Payment tickets: color edge + punched holes, amount large */
.pay-tickets { display: flex; flex-direction: column; gap: 8px; }
.pay-empty { padding: 10px; text-align: center; font-size: .85rem; color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default); border-radius: 10px; }
.pay-ticket {
    position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 0;
    border-radius: 10px; background: rgba(var(--pay-ticket-rgb), .07);
    border: 1px solid rgba(var(--pay-ticket-rgb), .35); border-inline-start: 6px solid var(--pay-ticket-color);
}
.pay-ticket::before, .pay-ticket::after {
    content: ""; position: absolute; inset-inline-start: 38px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--mud-palette-surface); border: 1px solid rgba(var(--pay-ticket-rgb), .35);
}
.pay-ticket::before { top: -7px; }
.pay-ticket::after { bottom: -7px; }
.pay-ticket-cash { --pay-ticket-color: var(--pay-cash); --pay-ticket-rgb: var(--pay-cash-rgb); }
.pay-ticket-card { --pay-ticket-color: var(--pay-card); --pay-ticket-rgb: var(--pay-card-rgb); }
.pay-ticket-back { --pay-ticket-color: var(--pay-back); --pay-ticket-rgb: var(--pay-back-rgb); border-style: dashed; border-inline-start-style: solid; }
.pay-ticket-back .pay-ticket-input input, .pay-ticket-back .pay-ticket-amount { color: var(--pay-back); }
.pay-ticket-back .pay-rest { background: var(--pay-back); color: #fff; white-space: nowrap; }
.pay-ticket-icon { width: 44px; display: flex; justify-content: center; border-inline-end: 2px dashed rgba(var(--pay-ticket-rgb), .35); padding: 4px 0; }
.pay-ticket-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; line-height: 1.2; }
.pay-rest { align-self: flex-start; margin-top: 2px; padding: 0 8px; border-radius: 999px; font-size: .7rem; font-weight: 600;
    color: var(--pay-ticket-color); border: 1px solid var(--pay-ticket-color); }
.pay-ticket-input { max-width: 150px; margin: 0 !important; }
.pay-ticket-input input { font-size: 1.25rem; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
/* Receipt / payment: narrow column, smaller amount box so the "Cash back" label fits */
.money-pay .pay-ticket-input { max-width: 120px; }
.pay-ticket-amount { font-size: 1.25rem; font-weight: 700; padding-inline-end: 8px; font-variant-numeric: tabular-nums; }

/* Sizes you can change in one place */
:root {
    /* Action pane buttons (cards): height, smallest width, icon size, empty space before Delete */
    --pane-button-height: 60px;
    --pane-button-min-width: 76px;
    --pane-icon-size: 26px;
    --pane-delete-gap: 32px;
    /* Receipt / payment: normal field width, wide fields (contact, description), last-5 box width */
    --money-field-width: 340px;
    --money-wide-field-width: 680px;
    --money-recent-width: 280px;
}

/* Receipt / payment: details column (date, contact, reference, description), amount column (balance, amount, method),
   last-5 box at the far right */
.money-layout {
    display: grid; gap: 24px; align-items: start;
    grid-template-columns: minmax(var(--money-field-width), var(--money-wide-field-width)) var(--money-field-width) minmax(var(--money-recent-width), 1fr);
}
.money-recent { justify-self: end; width: var(--money-recent-width); max-width: 100%; }
@media (max-width: 1200px) { .money-layout { grid-template-columns: minmax(0, var(--money-wide-field-width)); } .money-recent { justify-self: start; } }
.money-details > .money-field { width: var(--money-field-width); max-width: 100%; }
/* Receipt / payment balance box: current balance -/+ amount = balance after, numbers in one column */
.bal-calc {
    display: flex; flex-direction: column; padding: 6px 14px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface);
}
.bal-row {
    display: grid; grid-template-columns: 1fr auto 56px; align-items: center; column-gap: 10px; padding: 8px 0;
    font-variant-numeric: tabular-nums;
}
.bal-label { font-size: .9rem; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 6px; }
.bal-value { font-size: 1.05rem; font-weight: 600; text-align: end; }
.bal-side { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.bal-stack { display: flex; flex-direction: column; line-height: 1.2; }
.bal-stack small { font-size: .72rem; font-weight: 400; color: var(--mud-palette-text-secondary); }
.bal-op { font-size: 1.1rem; font-weight: 700; width: 14px; text-align: center; }
.bal-row + .bal-amount { border-top: 1px dashed var(--mud-palette-lines-default); }
.bal-amount .bal-label { color: var(--mud-palette-success-darken); font-weight: 600; }
.bal-amount .bal-value { font-size: 1.5rem; font-weight: 700; color: var(--mud-palette-success-darken); }
.bal-input { max-width: 150px; }
.bal-after { border-top: 2px solid var(--mud-palette-text-primary); }
.bal-after .bal-label { color: var(--mud-palette-text-primary); font-weight: 700; }
.bal-after .bal-value { font-size: 1.2rem; font-weight: 700; }
.recent-trans td, .recent-trans th { font-size: .78rem !important; white-space: nowrap; padding: 4px 6px !important; }
.paym-icon .mud-badge { transform: scale(.8); }

/* Entry date / user / branch, top right of entry forms */
.entry-info { font-size: .78rem; line-height: 1.35; color: var(--mud-palette-text-secondary); text-align: end; margin-inline-end: 12px; }
.entry-info span { font-weight: 600; }
/* Shift form: Opened / Closed / Salesman on one line above the accounts */
.shift-top { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; }
.shift-top span { font-weight: 600; color: var(--mud-palette-text-secondary); }
/* Shift footer: label | amount table, amounts end-aligned, total row bold */
.shift-sum-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 40px; max-width: 960px; }
@media (max-width: 760px) { .shift-sum-blocks { grid-template-columns: 1fr; } }
.shift-sum { border-collapse: collapse; font-size: .85rem; justify-self: start; align-self: start; }
.shift-sum td { padding: 3px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.shift-sum td:first-child { color: var(--mud-palette-text-secondary); font-weight: 600; }
.shift-sum td:last-child { text-align: right; font-variant-numeric: tabular-nums; padding-inline-start: 16px; }
/* labels wrap in a narrow column so the value sits next to its label */
.shift-sum tr:not(.shift-sum-total) td:first-child { white-space: normal; max-width: 130px; }
.shift-sum-total td { font-weight: 700 !important; font-size: 1.05rem; color: var(--mud-palette-primary) !important; background: var(--mud-palette-primary-hover); border-bottom: none; padding: 6px 8px; }
.shift-sum-total td:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.shift-sum-total td:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; padding-inline-start: 16px; }
.shift-close-time { font: inherit; padding: 2px 6px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }

/* Journal lines: small cell padding so the narrow columns (type, debit, credit) show full values */
.journal-lines td, .journal-lines th { padding: 4px 6px !important; }
.journal-lines { display: inline-block; width: fit-content; align-self: flex-start; max-width: 100%; overflow-x: auto; } /* grid only as wide as its columns */
.journal-lines table { width: auto; table-layout: fixed; }
.journal-lines th { white-space: nowrap; }
.journal-lines td:nth-child(6) input, .journal-lines td:nth-child(7) input { text-align: end; } /* debit, credit (flag is column 4) */
.journal-total td { background: var(--mud-palette-background-gray); }

/* Action pane, top left of header and list forms: Back, Add, Edit, Save, Delete, Export + the page's buttons */
/* Each button is a clickable card: icon above the text */
.action-pane { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.action-pane .mud-button-root {
    text-transform: none; height: var(--pane-button-height); min-width: var(--pane-button-min-width); padding: 4px 10px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; font-size: .85rem; line-height: 1.2;
}
.action-pane .mud-button-root:not(.mud-button-filled) { background: var(--mud-palette-surface); }
.action-pane .mud-button-root:not(:disabled):hover { border-color: var(--mud-palette-primary); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.action-pane .mud-button-root:disabled { opacity: .55; }
.action-pane .mud-button-label { flex-direction: column; gap: 2px; }
.action-pane .mud-button-icon-start { margin: 0 !important; }
.action-pane .mud-button-icon-start svg, .action-pane .mud-button-icon-start .mud-icon-root { font-size: var(--pane-icon-size) !important; width: var(--pane-icon-size); height: var(--pane-icon-size); }
.action-pane .action-pressed { border-color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), 0.10) !important; }
.action-pane .action-delete { margin-inline-start: var(--pane-delete-gap); }
.action-pane .mud-divider-vertical { height: calc(var(--pane-button-height) - 16px); align-self: center; }
/* Selected row on list and setup grids (Edit / Delete act on it) */
.mud-table-row.row-selected > td { background: rgba(var(--mud-palette-primary-rgb), 0.12) !important; }

/* Date fields: room for about 15 characters (dd/MM/yyyy + calendar icon).
   The calendar has no big header (ShowToolbar="false") so it fits under a field on short screens. */
.date-field { width: calc(15ch + 56px) !important; max-width: 100%; flex: 0 0 auto; }

/* Expenses: two aligned header columns (date | reference, paid from | description, fee), type and text columns the same width */
.exp-header { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 12px 24px; align-items: start; }
@media (max-width: 900px) { .exp-header { grid-template-columns: minmax(0, 320px); } }
.exp-small { width: calc(15ch + 56px) !important; max-width: 100%; flex: 0 0 auto; }
/* .trans-lines also sets a width: the double class wins, so the lines table is only as wide as its columns */
.trans-lines.exp-lines { width: fit-content; max-width: 100%; margin: 0; }
.exp-lines .exp-col { width: 300px; min-width: 200px; }
.exp-lines .exp-amt { width: 150px; }
.exp-lines td { padding: 4px 8px !important; }
/* Amounts on the right; totals end where the amount text ends (cell padding 8px + input padding 14px + border 1px) */
.exp-lines .exp-amt input, .exp-num input { text-align: end; font-variant-numeric: tabular-nums; }
.exp-lines .exp-total td.text-end { padding-inline-end: 23px !important; font-variant-numeric: tabular-nums; }
.exp-lines .exp-total td { border-bottom: none; }
.exp-lines .exp-grand td { font-weight: 600; border-top: 1px solid var(--mud-palette-lines-default); }
/* Internal transfer: sender box -> receiver box, amount out (red) / in (green) under each */
.trf-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.trf-box { width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); }
.trf-title { font-weight: 600; }
.trf-amount { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--mud-palette-lines-default); padding-bottom: 4px; }
.trf-amount b { font-size: 1.4rem; }
.trf-out { color: var(--mud-palette-error); }
.trf-in { color: var(--mud-palette-success); }
.trf-note { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.trf-arrow { font-size: 2rem !important; }
.trf-small { width: 400px; max-width: 100%; }

/* Posted transactions inquiry: read-only header boxes in rows (small, medium, large), compact lines grid */
/* Posted header: same column grid on every row (fields line up), small text, only a bottom line under each value */
/* Header group: small title on the side, its fields next to it (title on top on small screens) */
.posted-group { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--mud-palette-lines-default); padding-top: 6px; }
.posted-group:first-of-type { border-top: none; }
.posted-group-title { flex: 0 0 110px; font-size: 0.75rem; font-weight: 600; color: var(--mud-palette-primary); padding-top: 2px; }
.posted-group .posted-fields { flex: 1 1 auto; }
@media (max-width: 720px) { .posted-group { flex-direction: column; gap: 2px; } .posted-group-title { flex-basis: auto; } }
.posted-fields { display: grid; grid-template-columns: repeat(auto-fill, 130px); gap: 6px 16px; margin-bottom: 8px; }
.posted-fields .field-m { grid-column: span 2; }
.posted-fields .field-l { grid-column: span 4; }
.posted-field label { display: block; font-size: 0.7rem; color: var(--mud-palette-text-secondary); line-height: 1.2; }
.posted-value { font-size: 0.85rem; min-height: 1.5em; padding: 1px 2px; border-bottom: 1px solid var(--mud-palette-lines-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posted-fields .num .posted-value { text-align: end; }
@media (max-width: 720px) { .posted-fields .field-m, .posted-fields .field-l { grid-column: 1 / -1; } }
/* Posted list: one line per row, scroll sideways on small screens */
.posted-grid td, .posted-grid th { white-space: nowrap; }
.posted-lines { max-width: 100%; overflow-x: auto; }
.posted-lines td, .posted-lines th { font-size: .8rem !important; padding: 4px 6px !important; white-space: nowrap; }
.posted-lines td.cell-m { white-space: normal; min-width: 18ch; max-width: 26ch; }
/* Fee line under its item line: smaller, grey, description indented */
.posted-lines tr.posted-subline td { font-size: .75rem !important; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); }

/* Home page tiles: the whole card is the link */
.home-tile { display: block; width: 75%; text-decoration: none; }
.home-tile .mud-paper { height: 60px; transition: box-shadow .15s, background-color .15s; }
.home-tile:hover .mud-paper { background-color: var(--mud-palette-action-default-hover); box-shadow: var(--mud-elevation-4); }
@media (max-width: 599px) { .home-tile { width: 100%; } }

/* Report screens: filters in one row under the buttons (wrap on small screens) */
.report-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 4px 4px 8px; }
.report-filters > * { flex: 0 0 auto; }
.report-filters .filter-wide { width: 320px; max-width: 100%; }
.report-filters .filter-date { width: 170px; }
.report-filters .filter-select { width: 200px; }
/* Posted voucher tabs under the lines: account and contact names on one line, long descriptions wrap */
.posted-voucher .posted-lines td.cell-m { white-space: nowrap; min-width: 0; max-width: none; }
.posted-voucher .posted-lines td.cell-m:last-child { white-space: normal; min-width: 20ch; max-width: 40ch; }

/* Cell alignment used by the grids (MudBlazor has no text-end / text-center classes): numbers end-aligned in both languages */
.text-end { text-align: end !important; }
.text-center { text-align: center !important; }

/* Sales commission: a typed value (not from the item) shows in italic; the total is apart (not in the invoice total) */
.commission-typed input { font-style: italic; color: var(--mud-palette-warning-darken); }
.fee-cost, .commission-line { color: var(--mud-palette-text-secondary); font-size: .85rem; }
/* Fee line = child of the item line: no colors, only a symbol after a 10 chars indent */
.fee-row td { color: var(--mud-palette-text-secondary); }
.fee-row-cost td { font-style: italic; opacity: .8; }
.fee-mark { display: inline-block; padding-inline-start: 10ch; padding-inline-end: .5ch; color: var(--mud-palette-text-secondary); }
/* POS cost of sales beside the service provider: about 10 chars wide (room for its label) */
.pos-cost { width: 16ch; flex: none; }
.pos-cost label, .pos-cost legend { max-width: none !important; overflow: visible !important; }
/* POS typed price (e.g. transfer amount): keeps its width when the item cell is wide */
.pos-price { min-width: 110px; }
/* Item line + its fee lines: total under the last fee line */
.fee-total td { font-weight: 500; border-top: 1px dashed var(--mud-palette-lines-default); }
.commission-total { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); font-size: .9rem; }

/* POS quick sale buttons (PosQuickButton). No color = outlined like before; a color = filled with that color. */
.pos-quick-btn {
    --btn-bg: transparent; --btn-fg: var(--mud-palette-secondary);
    display: inline-flex; align-items: center; gap: 8px; min-width: 120px; max-width: 220px; height: 56px; padding: 4px 12px;
    border: 1px solid var(--mud-palette-secondary); border-radius: var(--mud-default-borderradius, 4px);
    background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; font: inherit; font-weight: 500;
    text-transform: uppercase; letter-spacing: .02em; transition: filter .15s, background-color .15s;
}
/* POS button group title (ItemTable.GroupCaption) */
.pos-quick-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; margin-top: 16px; }
.pos-quick-group { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.pos-quick-group-plain { flex-basis: 100%; } /* no caption: own line, last */
.pos-quick-title { margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); border-bottom: 1px solid var(--mud-palette-lines-default); padding-bottom: 4px; }
/* Item group button: a small corner mark (click = box with the group items) */
.pos-quick-group-btn { position: relative; }
.pos-quick-group-btn::after { content: ""; position: absolute; inset-inline-end: 4px; bottom: 4px; border: 5px solid transparent;
    border-inline-end-color: currentColor; border-bottom-color: currentColor; opacity: .7; }
/* Group box: one column per caption, side by side; more than fit = next row */
/* Group box: a border around each caption, caption title bold 14pt */
.pos-group-column { border: 2px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 10px; min-width: 0; }
.pos-group-title { font-size: 14pt; font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: 8px; }
.pos-group-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px; align-items: start; }
.pos-group-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-group-buttons .pos-quick-btn { flex: 1 1 200px; max-width: none; min-width: 0; }
.pos-qty-one { display: inline-block; min-width: 70px; text-align: center; font-weight: 500; }
.pos-quick-btn:hover { background-color: rgba(var(--mud-palette-secondary-rgb), .06); }
.pos-quick-btn[class*="pos-color-"] { border-color: transparent; background: var(--btn-bg); }
.pos-quick-btn[class*="pos-color-"]:hover { filter: brightness(1.1); }
.pos-quick-btn:active { filter: brightness(.92); }
.pos-quick-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pos-quick-btn img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; flex: none; background: rgba(255,255,255,.85); }
.pos-quick-text { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; line-height: 1.25; }
.pos-quick-name { font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-quick-text small { font-size: .75rem; opacity: .9; }
.pos-color-blue   { --btn-bg: #1e63b5; --btn-fg: #fff; }
.pos-color-green  { --btn-bg: #2e7d32; --btn-fg: #fff; }
.pos-color-teal   { --btn-bg: #00796b; --btn-fg: #fff; }
.pos-color-orange { --btn-bg: #e65100; --btn-fg: #fff; }
.pos-color-yellow { --btn-bg: #f9c623; --btn-fg: #2b2b2b; }
.pos-color-red    { --btn-bg: #c62828; --btn-fg: #fff; }
.pos-color-pink   { --btn-bg: #ad1457; --btn-fg: #fff; }
.pos-color-purple { --btn-bg: #6a1b9a; --btn-fg: #fff; }
.pos-color-brown  { --btn-bg: #6d4c41; --btn-fg: #fff; }
.pos-color-gray   { --btn-bg: #546e7a; --btn-fg: #fff; }

/* Item form: POS button color swatches */
.color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatch {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2px solid var(--mud-palette-lines-default); background: var(--btn-bg, transparent); color: var(--btn-fg);
    display: inline-flex; align-items: center; justify-content: center;
}
.color-swatch.selected { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.color-swatch:disabled { cursor: default; opacity: .6; }
.color-swatch.selected:disabled { opacity: 1; }
.color-swatch-none { color: var(--mud-palette-text-secondary); }

/* POS: sale description under the customer, small text and low height */
.pos-desc .mud-input-slot { font-size: .8rem !important; padding-top: 7px !important; padding-bottom: 7px !important; }
/* POS cart: less side padding so the item cell (provider + payment amount) and "- qty +" fit without a scroll bar */
.pos-cart th, .pos-cart td { padding-inline: 6px !important; }
/* Message boxes (MsgBox): one big design. Default button(s) at the start (left; right in Arabic), Cancel/Delete/Leave at the end */
.qp-msgbox .mud-dialog-title { padding-bottom: 4px; }
.qp-msgbox-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); flex: none; }
.qp-msgbox-text { font-size: 1.1rem; line-height: 1.6; padding-inline-start: 64px; }
.qp-msgbox .mud-dialog-actions { padding: 12px 24px 20px; }
.qp-msgbox-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; flex-wrap: wrap; }
.qp-msgbox-actions .mud-button-root { min-width: 130px; }

/* Cash confirm box: big picture (money into / out of the drawer), big amount, the question. Picture always left to right. */
.cash-confirm-box .qp-msgbox-text { padding-inline-start: 0; text-align: center; }
.cash-confirm-pic { direction: ltr; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 0 8px; border-radius: 12px; background: color-mix(in srgb, currentColor 10%, transparent); }
.cash-confirm-pic .cash-confirm-icon { font-size: 96px; }
.cash-confirm-pic .cash-confirm-arrow { font-size: 64px; }
.cash-confirm-amount { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-top: 14px; direction: ltr; }
.cash-confirm-currency { font-size: 1.6rem; font-weight: 600; }
.cash-confirm-text { font-size: 1.35rem; font-weight: 600; margin-top: 8px; }

/* POS line box (item "POS dialog"): instructions, fields, fees and total, commission */
.pos-line-box .qp-msgbox-text { padding-inline-start: 0; font-size: 1rem; line-height: 1.4; }
.pos-line-help { background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent); border-inline-start: 4px solid var(--mud-palette-info); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: .92rem; }
.pos-line-help-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--mud-palette-info); margin-bottom: 4px; }
.pos-line-help ol { margin: 0; padding-inline-start: 22px; }
.pos-line-help-note { margin-top: 6px; color: var(--mud-palette-text-secondary); }
.pos-line-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pos-line-fields > * { min-width: 0; margin: 0 !important; }
.pos-line-fields .pos-line-col1 { grid-column: 1; }
.pos-line-fields .pos-line-amount { grid-column: 2; }
.pos-line-amount input { font-size: 1.3rem; font-weight: 600; }
.pos-line-sum { margin-top: 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px 14px; }
.pos-line-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.pos-line-fee { color: var(--mud-palette-text-secondary); }
.pos-line-fee-mark { padding-inline-end: .6ch; }
.pos-line-fee-box { max-width: 14ch; flex: none; margin: 0 !important; }
.pos-line-fee-was { display: block; padding-inline-start: 1.6ch; }
.pos-line-fee-value { display: inline-flex; align-items: center; gap: .4ch; }
.pos-line-fee-waive { margin: 0; }
.pos-line-fee-waive .mud-typography { font-size: .8rem; white-space: nowrap; }
.pos-line-deduct { padding: 0 0 2px; }
.pos-line-deduct .mud-input-control { margin: 0; }
.pos-line-fee-cost { font-style: italic; border-top: 1px dashed var(--mud-palette-lines-default); }
.pos-line-fee-cost + .pos-line-fee-cost { border-top: 0; }
.pos-line-profit { border-top: 1px dashed var(--mud-palette-lines-default); font-weight: 600; color: var(--mud-palette-success); }
.pos-line-fee-cost + .pos-line-profit { border-top: 0; }
.pos-line-total { border-top: 1px dashed var(--mud-palette-lines-default); margin-top: 4px; padding-top: 8px; font-size: 1.25rem; font-weight: 700; color: var(--mud-palette-primary); }
.pos-line-commission { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.pos-line-commission .mud-input-control { flex: none; width: 20ch; }
.pos-line-note { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.pos-line-desc { margin-top: 12px; }
.pos-line-sum-row.pos-line-total:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
/* All amounts on one side: typed boxes at the end, like the fees and the total */
.pos-line-box input[inputmode="decimal"], .pos-line-box .pos-line-amount input { text-align: end; }
.qp-msgbox-img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; }
.pos-locked-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--mud-palette-text-secondary); font-size: .85rem; }
/* POS group box: service provider under the group picture and title, bold 14pt */
.pos-group-provider { width: 320px; max-width: 100%; margin-bottom: 16px; }
.pos-group-provider input.mud-input-root { font-weight: 700 !important; font-size: 14pt !important; }

/* Purchase invoice header: description box 50% on wide screens */
@media (min-width: 960px) {
    .w-md-50 { width: 50%; }
}

/* Main accounts balances inquiry: numbers at the end of the cell, totals in the grid footer under their columns */
.mud-table-cell.num { text-align: end; font-variant-numeric: tabular-nums; }
.main-balances-grid td.mud-table-cell { white-space: nowrap; }
.main-balances-grid th.num .column-header { justify-content: flex-end; text-align: end; }

/* POS page layout. Small screens (one column): normal page scroll.
   Wide screens (two columns, 960px+): the page is the window height (app bar 48px + page padding 32px);
   the quick buttons and the cart scroll inside their panel, the right panel scrolls alone,
   so the cart, the total and Pay are always on screen (laptop 1366x768 and 1920x1080 at 125-150%). */
.pos-page { display: flex; flex-direction: column; gap: 12px; }
.pos-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pos-panel { padding: 16px; }
.pos-cart-wrap { margin-top: 16px; }
.pos-cart thead th { position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface); }
.pos-pay { height: 64px; font-size: 1.3rem !important; flex: none; }
@media (min-width: 960px) {
    .pos-page { height: calc(100dvh - 80px); min-height: 440px; }
    .pos-head { flex: none; }
    .pos-body { flex: 1; min-height: 0; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
    .pos-left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .pos-left > * { flex: none; }
    .pos-quick-area { flex: 0 1 auto; max-height: 55%; overflow-y: auto; padding-bottom: 2px; }
    .pos-left > .pos-cart-wrap { flex: 1 1 auto; min-height: 120px; overflow-y: auto; border-top: 1px solid var(--mud-palette-lines-default); }
    .pos-right { min-height: 0; overflow-y: auto; }
    .pos-right > * { flex: none !important; }
    /* Customer lookup is inside a display:contents span (Tab key), so its box is a flex item too: keep it from growing */
    .pos-right > span > *, .pos-right > .lookup-plain > span > * { flex: none !important; }
}
/* Laptop screens (low or narrow window): smaller buttons, text and padding. Large screens keep the big design. */
@media (max-height: 900px), (max-width: 1600px) {
    .pos-page { --pane-button-height: 34px; --pane-button-min-width: 0px; --pane-icon-size: 18px; --pane-delete-gap: 16px; gap: 8px; }
    .pos-page .action-pane .mud-button-root { font-size: .78rem; padding: 2px 8px; }
    .pos-panel { padding: 10px 12px; }
    .pos-right.gap-3 { gap: 8px !important; }
    .pos-quick-groups { gap: 8px 18px; margin-top: 8px; }
    .pos-quick-title { margin-bottom: 4px; padding-bottom: 2px; font-size: .75rem; }
    .pos-page .pos-quick .gap-2, .pos-page .pos-quick.gap-2 { gap: 6px !important; }
    /* More room for the cart lines: thin header (icon beside text), entry info on one line,
       item buttons at most 35% of the left panel, one row per cart line, Pay always visible */
    .pos-page .action-pane { gap: 4px; }
    .pos-page .action-pane .mud-button-label { flex-direction: row; gap: 4px; }
    .pos-page .pos-head { padding: 4px 8px !important; }
    .pos-page .pos-head .mud-button-root { padding-block: 2px; }
    .pos-page .entry-info { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 12px; font-size: .74rem; }
    .pos-page .pos-quick-area { max-height: 35%; }
    .pos-page .pos-item-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    .pos-page .pos-item-cell > .pos-item-name { flex: 0 1 auto; min-width: 8ch; }
    .pos-page .pos-item-cell > div { margin-top: 0 !important; }
    .pos-page .pos-item-cell .commission-line { width: 150px; }
    .pos-page .pos-item-cell .pos-locked-info { flex-basis: 100%; }
    .pos-page .pos-cart td { padding-block: 3px !important; }
    .pos-page .pos-cart .mud-input-outlined .mud-input-slot { padding-top: 6px !important; padding-bottom: 6px !important; }
    .pos-page .pos-cart .mud-input-control { margin-top: 4px; }
    .pos-page .pos-right .pos-pay { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 10px -4px var(--mud-palette-surface); }
    .pos-page .pos-quick-btn { height: 44px; min-width: 96px; max-width: 190px; padding: 2px 8px; gap: 6px; }
    .pos-page .pos-quick-btn img { width: 30px; height: 30px; }
    .pos-page .pos-quick-name { font-size: .78rem; }
    .pos-page .pos-quick-text small { font-size: .7rem; }
    .pos-cart-wrap { margin-top: 10px; }
    .pos-total .mud-typography-h6 { font-size: 1.1rem; }
    .pos-total-amount.mud-typography-h4 { font-size: 1.8rem; }
    .pos-pay { height: 52px; font-size: 1.15rem !important; }
    .pos-page .pay-tile { min-height: 40px; padding: 4px 8px; font-size: .85rem; }
    .pos-page .pay-split { gap: 8px; padding: 10px; }
}

/* List grids (ListPage, SetupGrid, inquiries): on wide screens the action pane, grid and pager fit the window height.
   Rows scroll inside the grid with a fixed header, so the pager is always on the screen (no page scroll to reach Next).
   A short list stays short: the grid only grows up to the window height.
   Short windows (phone in landscape, under 560px high): no fit, the page scrolls so all rows can be seen. */
@media (min-width: 960px) and (min-height: 560px) {
    .fit-page { display: flex; flex-direction: column; max-height: calc(100dvh - 80px); }
    .fit-page > * { flex: none; }
    .fit-page > .fit-grid { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .fit-grid > * { flex: none; }
    .fit-grid > .mud-table-container { flex: 0 1 auto; min-height: 0; overflow: auto; }
}

/* Transactions form: list on the left, details of the clicked row on the right (below on small screens) */
.trans-pane { position: relative; }
.trans-split { display: flex; gap: 8px; align-items: flex-start; }
.trans-list { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trans-foot { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 6px 12px; font-size: .85rem; background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default); }
.trans-details { width: 300px; flex: none; }
.trans-details-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px; }
.trans-tab { padding: 0 !important; }
.trans-chip { border-radius: 10px; padding: 1px 8px; font-size: .72rem; font-weight: 500; white-space: nowrap; }
.trans-chip.open { background: #fff3e0; color: #b45309; }
.trans-chip.posted { background: #e6f4ea; color: #1b7a34; }
.trans-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; padding: 6px 10px; font-size: .85rem; }
.trans-kv span { color: var(--mud-palette-text-secondary); }
.trans-kv b { font-weight: 500; overflow-wrap: anywhere; }
.trans-lines { width: calc(100% - 12px); margin: 0 6px; border-collapse: collapse; font-size: .8rem; }
.trans-lines th { font-weight: 500; text-align: start; padding: 3px 4px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.trans-lines td { padding: 3px 4px; border-bottom: 1px solid var(--mud-palette-table-lines); }
.trans-lines th.text-end, .trans-lines td.text-end { text-align: end; }
.trans-lines tr.fee td { color: var(--mud-palette-text-secondary); }
.trans-lines tfoot td { border-bottom: 0; }
/* Purchase lines: number boxes and their titles end-aligned (the title lines up with the number in the box) */
.purch-lines td input[inputmode="decimal"] { text-align: end; font-variant-numeric: tabular-nums; }
.purch-lines th.num-head { text-align: end; padding-inline-end: 18px; }
.trans-totals { display: grid; grid-template-columns: 1fr max-content; gap: 2px 0; margin: 6px 10px 8px; padding-top: 6px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .85rem; }
.trans-totals span { text-align: end; padding-inline-end: 12px; color: var(--mud-palette-text-secondary); }
.trans-totals b { text-align: end; font-weight: 500; }
.trans-totals .big { font-size: 1rem; font-weight: 700; color: var(--mud-palette-primary); }
@media (min-width: 960px) and (min-height: 560px) {
    .trans-list .fit-grid .mud-table-container { max-height: calc(100dvh - 290px); }
}
@media (max-width: 1100px) {
    .trans-split { flex-direction: column; align-items: stretch; }
    .trans-details { width: auto; }
}

/* Home page: old forms as small links at the bottom */
.home-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .8rem; color: var(--mud-palette-text-secondary); }
.trans-grid .mud-table-cell { padding: 6px 8px !important; }
.trans-grid td.mud-table-cell { white-space: nowrap; }
.trans-grid th.mud-table-cell { line-height: 1.2; }
.trans-grid .mud-sort-index { display: none; }
.trans-grid td.trans-contact { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.trans-grid td.trans-help { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trans-tabs .mud-tab { text-transform: none; }
.trans-status .mud-toggle-item { text-transform: none; padding-inline: 14px; }
.home-footer .mud-button-root { text-transform: none; }
/* Dashboard: filters, status tiles, notes line, profit chart (SVG), expenses and items tables */
.dash-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dash-filters .dash-period, .dash-filters .dash-branch { flex: 0 0 200px; }
.dash-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-tile { padding: 10px 14px; border-top: 3px solid var(--mud-palette-primary); }
.dash-tile.dash-net { border-top-color: var(--mud-palette-success); }
.dash-value { font-size: 1.4rem; font-weight: 600; margin: 4px 0; white-space: nowrap; }
.dash-change { font-size: .8rem; }
.dash-muted { color: var(--mud-palette-text-secondary); }
.dash-up { color: var(--mud-palette-success); }
.dash-down { color: var(--mud-palette-error); }
.dash-notes { background: rgba(240, 160, 40, .12); border: 1px solid rgba(240, 160, 40, .45); border-radius: 6px; padding: 8px 12px; font-size: .9rem; }
.dash-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.dash-title span { font-weight: 400; font-size: .8rem; color: var(--mud-palette-text-secondary); margin-inline-start: 8px; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; }
.dash-chart { width: 100%; height: auto; max-height: 340px; direction: ltr; }
.dash-chart .dash-grid { stroke: var(--mud-palette-lines-default); }
.dash-chart .dash-zero { stroke: var(--mud-palette-text-secondary); }
.dash-chart .dash-axis { font-size: 11px; fill: var(--mud-palette-text-secondary); }
.dash-chart .dash-point { stroke: var(--mud-palette-surface); stroke-width: 1.5; }
.dash-chart .dash-hit { fill: transparent; cursor: pointer; }
.dash-chart .dash-hit:hover { fill: rgba(128, 128, 128, .08); }
.dash-tip { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 960px) { .dash-two { grid-template-columns: 1fr; } }
.dash-scroll { max-height: 420px; overflow-y: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dash-table th { font-weight: 500; font-size: .75rem; color: var(--mud-palette-text-secondary); text-align: start; padding: 6px; border-bottom: 1px solid var(--mud-palette-lines-default); position: sticky; top: 0; background: var(--mud-palette-surface); }
.dash-table td { padding: 5px 6px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dash-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-click { cursor: pointer; }
.dash-click:hover { background: var(--mud-palette-action-default-hover); }
.dash-sub td:first-child { padding-inline-start: 34px; color: var(--mud-palette-text-secondary); }
.dash-total td { font-weight: 600; }
.dash-expand { vertical-align: middle; }
.dash-bar { height: 5px; background: var(--mud-palette-lines-default); border-radius: 3px; margin-top: 3px; margin-inline-start: 24px; }
.dash-bar i { display: block; height: 5px; border-radius: 3px; background: #E0892E; }
/* Home: Dashboard tile, shifts box and reports box side by side */
.home-boxes { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.home-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.home-box-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.home-group { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 8px 0 2px; }
.home-link { display: flex; justify-content: flex-start; text-transform: none; }
.home-my-shift { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(46, 166, 90, .12); font-size: .9rem; }

/* Arabic pages: number boxes read left to right, so a minus stays on the left (-5.000, not 5.000-).
   Left to right turns start / end around, so the same place in the box is given as right / left. */
[dir="rtl"] input[inputmode="decimal"], [dir="rtl"] input[inputmode="numeric"] { direction: ltr; text-align: right; }
[dir="rtl"] .pay-ticket-input input, [dir="rtl"] .journal-lines td:nth-child(6) input, [dir="rtl"] .journal-lines td:nth-child(7) input,
[dir="rtl"] .exp-lines .exp-amt input, [dir="rtl"] .exp-num input,
[dir="rtl"] .pos-line-box input[inputmode="decimal"], [dir="rtl"] .pos-line-box .pos-line-amount input,
[dir="rtl"] .purch-lines td input[inputmode="decimal"] { text-align: left; }

/* Field labels always on top of the box (same as when the box has a value), even when empty.
   One global rule for all forms; copies MudBlazor's own "shrink" look. */
.mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, 1.5px) scale(0.75); transform-origin: top left; max-width: 133.333%;
    color: var(--mud-palette-text-primary);
}
.mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(12px, 10px) scale(0.75); max-width: calc((100% - 12px) / .75);
}
.mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense {
    transform: translate(12px, 7px) scale(0.75);
}
.mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75); max-width: calc((100% - 14px) / .75);
}
.mud-input-control .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol { color: var(--mud-palette-primary); }
.mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-disabled { color: var(--mud-palette-text-disabled); }
.mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-error { color: var(--mud-palette-error); }
/* Gap in the outlined border for the label */
.mud-input.mud-input-outlined:has(~ label) > .mud-input-outlined-border legend { width: auto; padding: 0 5px; }
/* Arabic (RTL) */
.mud-application-layout-rtl .mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol { transform-origin: top right; }
.mud-application-layout-rtl .mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled { transform: translate(-12px, 10px) scale(0.75); }
.mud-application-layout-rtl .mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled.mud-input-label-margin-dense { transform: translate(-12px, 7px) scale(0.75); }
.mud-application-layout-rtl .mud-input-control .mud-input ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(-14px, -6px) scale(0.75); }

/* Setup page: setup forms in boxes */
.setup-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; max-width: 1100px; align-items: start; }

/* Shift cash difference: Cash over (dark yellow) / Cash short (red) / Matched exactly (green) */
.cash-diff { display: inline-flex; align-items: center; gap: 6px; border-radius: 14px; padding: 2px 10px; font-weight: 500; white-space: nowrap; }
.cash-diff-lg { font-size: 1.05rem; padding: 3px 12px; }
.cash-over { color: #9a6700; background: #fff4cc; }
.cash-short { color: #c62828; background: #ffebee; }
.cash-ok { color: #2e7d32; background: #e8f5e9; }
.cash-in-range { color: #1565c0; background: #e3f2fd; }

/* Shift form lines: amounts and counted boxes on the right in EN and AR, so the decimals line up */
.shift-lines td.num-r, .shift-lines th.num-r { text-align: right !important; font-variant-numeric: tabular-nums; }
.shift-lines td.num-r input { direction: ltr; text-align: right !important; font-variant-numeric: tabular-nums; }
.shift-lines .cash-diff { padding: 2px 8px; gap: 4px; }
/* lines table only as wide as its columns: account names stay close to their amounts, free space stays at the row end */
.mud-table.trans-lines.shift-lines { width: fit-content; max-width: 100%; margin: 0; }
.mud-table.shift-lines table { width: auto !important; }
.shift-lines td:first-child { white-space: nowrap; }
/* lines table only as wide as its columns (no empty space inside amount columns) */
.trans-lines.shift-lines { width: fit-content; max-width: 100%; margin: 0; }

/* Shift notes: large box, small font */
.shift-comments { max-width: 600px; }
.shift-comments textarea { font-size: .8rem !important; line-height: 1.4; }

/* Shifts list: fits the screen (dates on one line, narrow number columns, numbers at the end) */
.mud-table-cell.shifts-date { white-space: nowrap; }
th.shifts-narrow { width: 1%; }
.mud-table-cell.shifts-col { padding: 6px 6px !important; }
th.shifts-col .mud-icon-button { padding: 0; }
th.shifts-col .mud-icon-button svg { width: 18px; height: 18px; }
th.shifts-col .mud-sort-index.invisible { display: none; }
/* Numbers on the right in English and Arabic (Shifts list, Home shifts box) */
.num-r, .mud-table-cell.num-r { text-align: right !important; font-variant-numeric: tabular-nums; }
td.num-r { white-space: nowrap; }
.mud-table-cell.shifts-total { font-weight: 700; white-space: nowrap; }
th.num-r .column-header { justify-content: flex-end; text-align: right; }
.mud-application-layout-rtl th.num-r .column-header { justify-content: flex-start; }

/* Record lookup: plain = no wrapper box (the lookup is laid out as before); with card = the box + the small contact card button */
.lookup-plain { display: contents; }
.lookup-with-card { display: flex; align-items: center; gap: 2px; min-width: 0; }
.lookup-with-card > span > * { flex: 1 1 auto; min-width: 0; }
.lookup-with-card > .mud-tooltip-root { flex: none; }
/* Contact card box: wide statement text, amounts kept on one line */
.contact-card-box .contact-card-trans td:last-child { white-space: nowrap; }
.contact-card-box .contact-card-trans td:first-child { white-space: nowrap; }
.contact-card-box .contact-card-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 700px) { .contact-card-box .contact-card-head { grid-template-columns: 1fr; } }
.contact-card-box .contact-card-info td:first-child { width: 40%; color: var(--mud-palette-text-secondary); }
.contact-card-box .contact-card-grid { max-height: 45vh; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
.contact-card-box .contact-card-trans td:nth-child(2) { white-space: nowrap; }
.contact-card-box .contact-card-total td { border-top: 2px solid var(--mud-palette-lines-default); }