/* ================================================================
   B60 OS redesign (2026-10)

   Loaded last, after every other sheet, so each rule here is an
   override of a known rule elsewhere rather than a competing copy.
   Sections follow the design canvas: shell, till, charge, floor,
   settings. Tokens only from design-system.css (--ds-*).
   ================================================================ */

/* ---------------------------------------------------------------
   1. SHELL - a label under every icon in the collapsed rail

   The collapsed rail was eleven bare icons. Orders and Customer
   Invoices were the same sheet of paper and Tables was a # glyph,
   so the only way to learn the rail was to hover each one -- which a
   touch till cannot do. Labels are always on; the hover tooltip is
   dropped because it now repeats the label.
   --------------------------------------------------------------- */

/* 80px, not 72px: room for "Dashboard" and "Inventory" on one line. */
:root {
    --sidebar-width: 80px;
    --sidebar-collapsed: 80px;
}

#sidebar.collapsed .sidebar-nav {
    padding-inline: 6px;
}

#sidebar.collapsed .nav-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    padding: 5px 2px;
    text-align: center;
}

#sidebar.collapsed .nav-item svg {
    flex-shrink: 0;
}

#sidebar.collapsed .nav-item span {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: var(--ds-fw-medium);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    overflow: visible;
    text-overflow: clip;
}

#sidebar.collapsed .nav-item[data-tooltip]:hover::after {
    content: none;
}

#sidebar.collapsed .workspace-more-toggle {
    flex-direction: column;
    gap: 3px;
    min-height: 52px;
}

#sidebar.collapsed .workspace-more-label {
    display: block;
    font-size: 11px;
    line-height: 1.15;
}

#sidebar.collapsed .workspace-more-toggle:hover::after {
    content: none;
}

/* ---------------------------------------------------------------
   2. SHELL - sync status chip (js/pos/queue-panel.js)
   --------------------------------------------------------------- */

.sync-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-inline: 12px;
    border: 1px solid var(--ds-border);
    border-radius: 18px;
    background: var(--ds-surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--ds-fw-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.sync-chip:hover {
    border-color: var(--ds-border-strong);
}

.sync-chip.is-ok {
    color: #047857;
}

.sync-chip.is-waiting {
    color: #B45309;
    background: #FFFBEB;
    border-color: #F5D9A8;
}

.sync-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Waiting gets a square: the state is not carried by colour alone. */
.sync-chip.is-waiting .sync-chip-dot {
    border-radius: 2px;
}

.sync-chip .collect-badge {
    display: none;
}

@media (max-width: 719px) {
    .sync-chip-label {
        display: none;
    }
    .sync-chip {
        padding-inline: 10px;
    }
}

/* ---------------------------------------------------------------
   3. TILL - photo-first tiles

   The product photo is the tile. No card box: the cut-out sits on a
   soft round plate, with the name and price under it. A tile that is
   already in the order gets a ring and a count (POS._syncTileQty).
   Text-only tiles (compact view, or a catalogue mostly without
   photos) keep their card: they have no picture to carry them.
   --------------------------------------------------------------- */

.pos-counter-screen .pos-product-card:not(.is-text-only) {
    position: relative;
    align-items: center;
    text-align: center;
    padding: 4px 4px 10px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
}

.pos-counter-screen .pos-product-card:not(.is-text-only):hover {
    border: 0;
    background: rgba(79, 70, 229, 0.05);
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well {
    position: relative;
    width: 100%;
    max-width: 148px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

/* The plate. Decorative, so a pseudo-element: nothing to press in it. */
.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well::before {
    content: '';
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background: #EDECF6;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-counter-screen .pos-product-card:not(.is-text-only):hover .product-img-well::before {
    background: #E3E1F3;
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well .product-img {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 3%;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(30, 27, 57, 0.16));
}

/* No photo: the initials sit on the same plate. */
.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well.product-monogram,
.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well.show-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--ds-primary-press, #3730A3);
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well.show-initials::after {
    content: attr(data-initials);
    position: relative;
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well.product-monogram {
    isolation: isolate;
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-img-well.product-monogram::before {
    z-index: -1;
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-name {
    width: 100%;
    padding: 6px 4px 0;
    min-height: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.pos-counter-screen .pos-product-card:not(.is-text-only) .product-price {
    justify-content: center;
    padding: 2px 4px 0;
    margin-top: 0;
    font-size: 14px;
}

/* Low stock: a word under the price, in flow, never over the photo. */
.pos-counter-screen .pos-product-card:not(.is-text-only) > .product-stock {
    position: static;
    order: 10;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #B45309;
}

.pos-counter-screen .pos-product-card:not(.is-text-only) > .product-stock.negative-stock {
    color: var(--ds-danger);
}

/* In the order: ring on the plate, count on the corner, name in accent. */
.pos-counter-screen .pos-product-card.in-order:not(.is-text-only) .product-img-well::before {
    background: #E0E7FF;
    box-shadow: 0 0 0 3px var(--ds-primary);
}

.pos-counter-screen .pos-product-card.in-order .product-name {
    color: var(--ds-primary-press, #3730A3);
}

.pos-counter-screen .pos-product-card.is-text-only.in-order {
    border-color: var(--ds-primary);
    box-shadow: inset 0 0 0 1px var(--ds-primary);
}

.pos-counter-screen .pos-product-card .product-qty {
    position: absolute;
    top: 4px;
    inset-inline-end: 6px;
    min-width: 30px;
    height: 30px;
    padding-inline: 8px;
    border-radius: 15px;
    background: var(--ds-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--ds-canvas);
    z-index: 2;
    pointer-events: none;
}

/* ---------------------------------------------------------------
   4. TILL - tabs bar, order header, totals, action row
   --------------------------------------------------------------- */

.pos-counter-screen .pos-toolbar-btn.pos-labelled-btn {
    width: auto;
    min-width: 0;
    gap: 8px;
    padding-inline: 14px;
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
    white-space: nowrap;
}

.pos-counter-screen .pos-toolbar-btn.pos-new-sale-btn {
    border: 1px dashed var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary-press, #3730A3);
}

.pos-order-tab .tab-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
}

.pos-order-tab .tab-text .tab-label {
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
}

/* pos.css hides .tab-meta; here it is the one line that explains the tab. */
.pos-order-tab .tab-text .tab-meta {
    display: block;
    font-size: 12px;
    color: var(--ds-text-secondary);
    white-space: nowrap;
}

.pos-order-tab .tab-text .tab-amount {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    padding: 0;
    background: none;
}

.pos-order-panel-title {
    font-size: 18px;
    font-weight: 700;
}

.pos-order-context {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pos-context-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 10px;
    border: 1px dashed #B8BCD4;
    border-radius: 10px;
    background: transparent;
    color: var(--ds-text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
    cursor: pointer;
}

.pos-context-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-context-btn:hover {
    background: #F0F1F8;
    color: var(--ds-text-primary);
}

.pos-context-btn.is-set {
    border-style: solid;
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary-press, #3730A3);
}

/* Totals: every row readable. Service charge was tan on white (~3:1). */
.pos-order-summary .pos-summary-row:not(.total-row):not(.is-discount),
.pos-order-summary .pos-summary-row:not(.total-row):not(.is-discount) .label,
.pos-order-summary .pos-summary-row:not(.total-row):not(.is-discount) .value {
    color: var(--ds-text-secondary);
}

.pos-order-summary .pos-summary-row.is-discount,
.pos-order-summary .pos-summary-row.is-discount .label,
.pos-order-summary .pos-summary-row.is-discount .value {
    color: #047857;
    font-weight: var(--ds-fw-semibold);
}

.pos-order-summary .total-row .label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text-primary);
}

/* Action row: Hold, Print, Discount, (Debt,) More -- equal columns. */
.pos-counter-screen .pos-utility-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pos-counter-screen .pos-utility-grid.has-debt {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pos-counter-screen .pos-utility-tile {
    min-height: 52px;
    font-size: 13px;
    font-weight: var(--ds-fw-semibold);
}

.pos-counter-screen .pos-utility-grid .pos-screen-overflow-wrap {
    position: relative;
    display: flex;
    min-width: 0;
}

.pos-counter-screen .pos-utility-grid .pos-screen-overflow-btn {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
}

/* More opens upwards, over the order, and lines up with the panel edge. */
.pos-counter-screen .pos-utility-grid .pos-screen-overflow-menu {
    position: absolute;
    top: auto;
    bottom: calc(100% + 6px);
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-width: 240px;
    z-index: 60;
}

.pos-counter-screen .pos-utility-grid .pos-screen-overflow-item {
    min-height: 44px;
    font-size: 15px;
}

/* ---------------------------------------------------------------
   5. CHARGE (js/pos/paybill.js)

   The change readout was green even at zero and as small as a label;
   it is the number the cashier reads aloud, so it is large and in ink.
   Quick cash buttons are touch-sized, and the discount field is in
   the body face (in monospace it read like a button).
   --------------------------------------------------------------- */

.pay-bill-change .value {
    min-height: 44px;
    font-size: 28px;
    color: var(--ds-text-primary);
}

.pay-bill-cash-field input {
    min-height: 48px;
    font-size: 24px;
}

/* Received over Change, not side by side. Two equal columns let a long
   change figure ("978,550 IQD") take the row and squeeze the input to a
   sliver showing "1,(". Received gets the full width; Change is one line
   under it, label at the start and the figure at the end. */
.pay-bill-cash-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.pay-bill-change {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.pay-bill-change > span:first-child {
    margin-bottom: 0;
    font-size: 14px;
}

.pay-bill-change .value {
    min-height: 0;
    white-space: nowrap;
}

.pay-bill-cash-field input {
    text-align: end;
}

.pay-bill-quick-tender .btn {
    min-height: 52px;
    font-size: 16px;
    font-weight: var(--ds-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.pay-bill-method-btn {
    font-size: 14px;
}

.pay-bill-disc input,
.pay-bill-disc-row .pay-bill-disc input {
    font-family: inherit;
    font-weight: var(--ds-fw-semibold);
}

.pay-bill-line-amt,
.pay-bill-total-row .value {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   6. TABLE SERVICE - floor home and table orders
   --------------------------------------------------------------- */

.pos-floor-lane .pos-counter-chip:not(.pos-counter-chip-sm) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding-inline: 18px;
    border-width: 2px;
    border-radius: 12px;
    font-size: 15px;
}

.pos-counter-chip-sm {
    min-height: 40px;
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
}

.tbl-shape-label {
    font-weight: 700;
}

.tbl-shape-status {
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

/* Zero counts were faded to near invisible; muted is enough. */
.tbl-status-chip.is-zero {
    opacity: 1;
    color: var(--ds-text-secondary);
}

/* Table order: Send is the main button; Pay bill is the quieter one. */
.pos-charge-btn.pos-send-btn {
    margin-bottom: 8px;
}

.pos-charge-btn.is-secondary {
    min-height: 48px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    border: 1px solid var(--ds-border);
    box-shadow: none;
}

.pos-charge-btn.is-secondary:hover:not(:disabled) {
    background: #F0F1F8;
}

/* On the POS floor (visit mode) "occupied" is the Seated state, and the
   legend draws Seated in the info colour; the table was drawn in danger red,
   the same as Bill requested. Now a seated table matches its legend and red
   is left for the table that is waiting for its bill. */
#posInlineFloor .tbl-shape.is-occupied {
    border-color: var(--ds-info);
    background: var(--ds-info-tint);
}

.tbl-shape-meta {
    font-size: 11px;
}

/* ---------------------------------------------------------------
   7. SETTINGS - service mode cards, full-width forms
   --------------------------------------------------------------- */

.settings-mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-block: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
}

.settings-mode-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.settings-mode-card:hover:not(:disabled) {
    border-color: var(--ds-border-strong);
}

.settings-mode-card.is-on {
    border: 2px solid var(--ds-primary);
    padding: 17px;
    background: #FAFAFF;
    box-shadow: 0 0 0 4px #E0E7FF;
}

.settings-mode-card:disabled {
    cursor: default;
    opacity: 0.75;
}

.settings-mode-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.settings-mode-card-title {
    font-size: 18px;
    font-weight: 700;
}

.settings-mode-card-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #B8BCD4;
    background: var(--ds-surface);
    flex-shrink: 0;
}

.settings-mode-card.is-on .settings-mode-card-radio {
    border: 7px solid var(--ds-primary);
}

.settings-mode-card-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-primary-press, #3730A3);
}

.settings-mode-card-desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ds-text-secondary);
}

/* The real control, kept for the save path and the unsaved-changes check. */
.settings-mode-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-mode-options-title {
    margin: var(--ds-space-4, 16px) 0 0;
    font-size: 16px;
    font-weight: 700;
}

/* .ds-field sets display, which beats the hidden attribute. */
[data-mode-only][hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------
   8. RTL - money and clock keep their own direction

   "12,500 IQD" is a left-to-right run. Inside an Arabic line the
   bidi algorithm flipped it to "IQD 12,500", and the clock to
   "PM 2:30". Isolating the run keeps it as written.
   --------------------------------------------------------------- */

[dir="rtl"] .ds-tabular,
[dir="rtl"] .product-price,
[dir="rtl"] .item-total,
[dir="rtl"] .tab-amount,
[dir="rtl"] #panelIngotTotal,
[dir="rtl"] .pay-bill-line-amt,
[dir="rtl"] .pay-bill-total-row .value,
[dir="rtl"] .pay-bill-change .value,
[dir="rtl"] .datetime-time,
[dir="rtl"] .tbl-shape-meta,
[dir="rtl"] .tbl-money,
[dir="rtl"] .table-open-meta {
    unicode-bidi: isolate;
    direction: ltr;
}

/* ---------------------------------------------------------------
   9. PRODUCTS - Items / Categories, and quiet delete buttons

   A solid red Delete beside every Edit gave the destructive action the
   same weight as the everyday one. Outlined red keeps it findable.
   --------------------------------------------------------------- */

.products-sections {
    align-self: flex-start;
}

.settings-cat-table .ds-btn-danger,
.products-page .ds-btn-danger.ds-btn-sm {
    background: transparent;
    color: var(--ds-danger);
    border: 1px solid currentColor;
    box-shadow: none;
}

.settings-cat-table .ds-btn-danger:hover,
.products-page .ds-btn-danger.ds-btn-sm:hover {
    background: var(--ds-danger-tint);
}

/* ---------------------------------------------------------------
   10. SETTINGS - one save bar (Settings._hideCardSaveButtons)
   --------------------------------------------------------------- */

.settings-page .settings-bar-managed {
    display: none !important;
}

/* ---------------------------------------------------------------
   11. CHARGE - keypad, US dollars, split the bill
   --------------------------------------------------------------- */

.pay-bill-cash-extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.pay-bill-cash-extras[hidden] {
    display: none;
}

.pay-bill-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pay-bill-key {
    min-height: 52px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-family: inherit;
    font-size: 22px;
    font-weight: var(--ds-fw-semibold);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.pay-bill-key:hover {
    background: #F0F1F8;
}

.pay-bill-key:active {
    background: var(--ds-primary-tint);
}

.pay-bill-usd {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: #FAFAFE;
}

.pay-bill-usd label {
    font-size: 14px;
    font-weight: var(--ds-fw-semibold);
}

.pay-bill-usd input {
    min-height: 44px;
    font-size: 18px;
    font-weight: 700;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.pay-bill-usd-eq {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.pay-bill-split-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 8px 14px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--ds-fw-semibold);
    text-align: start;
    cursor: pointer;
}

.pay-bill-split-btn svg {
    grid-row: span 2;
}

.pay-bill-split-btn small {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.pay-bill-split-btn:hover {
    background: #F0F1F8;
}

[dir="rtl"] .pay-bill-usd input,
[dir="rtl"] .pay-bill-usd-eq {
    unicode-bidi: isolate;
    direction: ltr;
}

/* Wide till: the keypad gets its own column beside the cash fields, so it
   does not push the Take payment button below a 768px screen. */
@media (min-width: 901px) and (orientation: landscape) {
    .modal:has(.pay-bill-modal.is-split) {
        max-width: 1120px;
    }

    .pay-bill-modal.is-split .pay-bill-col-pay {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        column-gap: 16px;
        align-content: start;
    }

    .pay-bill-modal.is-split .pay-bill-col-pay > * {
        grid-column: 1;
    }

    .pay-bill-modal.is-split .pay-bill-col-pay > .pay-bill-side {
        grid-column: 2;
        grid-row: 1 / span 6;
        align-self: start;
    }

    .pay-bill-modal.is-split .pay-bill-side .pay-bill-cash-extras {
        margin-top: 0;
    }
}

.pay-bill-usd[hidden] {
    display: none;
}

/* ---------------------------------------------------------------
   12. DASHBOARD - neutral comparisons, empty cards with a next step
   --------------------------------------------------------------- */

/* "Nothing last week to compare" is not good or bad news: grey, not the
   near-black the stat itself uses. */
.ds-stat-card-delta:not(.is-up):not(.is-down) {
    color: var(--ds-text-secondary);
    font-weight: 500;
}

.dash-empty-action {
    margin-top: var(--ds-space-3);
    align-self: center;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   13. TABLES - page gutter, toolbar buttons, floor overview panel
   --------------------------------------------------------------- */

/* The page runs full-bleed for the canvas, which put the first floor tab
   against the rail. Same side gutter as the page title above it. */
body[data-page="tables"] .main-content .page-content {
    padding-inline: var(--ds-pad-page-inline);
}

/* "+ Add Floor" and "Waiter assignments" read as loose links next to the
   floor tabs; they are actions, so they look like the Filter button. */
.tbl-floor-add {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-surface);
    padding: var(--ds-space-2) var(--ds-space-3);
}

.tbl-floor-add:hover {
    border-color: var(--ds-primary);
}

.tbl-overview-hint {
    margin: var(--ds-space-1) 0 var(--ds-space-4);
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.tbl-overview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-4);
}

.tbl-overview-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    min-width: 0;
}

.tbl-overview-stat strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--ds-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbl-overview-stat.is-money strong {
    font-size: 16px;
    line-height: 25px;
}

.tbl-overview-stat span {
    font-size: 12px;
    color: var(--ds-text-secondary);
}

.tbl-overview-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
}

.tbl-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--ds-space-3);
    width: 100%;
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.tbl-overview-row:hover {
    border-color: var(--ds-primary);
}

.tbl-overview-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 700;
    min-width: 0;
}

.tbl-overview-flag {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-warning-text, var(--ds-warning));
}

.tbl-overview-time {
    font-size: 12px;
    color: var(--ds-text-secondary);
}

.tbl-overview-row .tbl-money {
    font-weight: 700;
    white-space: nowrap;
}

.tbl-overview-none {
    margin: 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

/* ---------------------------------------------------------------
   14. ORDERS - one filter row, no gap under the view tabs
   css/orders.css is injected when the page opens, after this file,
   so these rules carry the extra .orders-page class to win.
   --------------------------------------------------------------- */

.orders-page > .orders-view-tabs + .ds-list-card {
    margin-top: 0;
}

/* Each select already says what it filters ("All Status", "All Types"),
   so the label above it is for screen readers only. That turns two rows of
   label-plus-field into one row the height of a field. */
.orders-page .orders-toolbar {
    align-items: center;
    gap: var(--ds-space-2);
}

.orders-page .orders-toolbar .orders-filter-field .ds-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.orders-page .orders-toolbar .orders-filter-field {
    margin: 0;
}

/* ---------------------------------------------------------------
   15. TILL - customer picker

   The picker reuses the product grid, which is a flex column, so
   each customer was a full-width card with the initial as a loose
   letter and the profile link floating above the name. Customers
   are a grid of compact rows: avatar, name and phone, discount.
   --------------------------------------------------------------- */

.pos-product-grid:has(> .pos-client-card),
.pos-counter-screen .pos-product-grid:has(> .pos-client-card) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-content: start;
    gap: 10px;
}

.pos-product-grid > .pos-client-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 12px 36px 12px 12px;
    text-align: start;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    min-height: 64px;
}

[dir="rtl"] .pos-product-grid > .pos-client-card {
    padding: 12px 12px 12px 36px;
}

.pos-product-grid > .pos-client-card:hover {
    border-color: var(--ds-primary);
    background: var(--ds-surface);
}

.pos-product-grid > .pos-client-card.selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint, var(--ds-surface));
    color: var(--ds-text-primary);
}

.pos-client-card .client-card-avatar {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.pos-client-card .client-card-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-primary-tint, var(--ds-surface-alt));
    color: var(--ds-primary);
    font-weight: 700;
    font-size: 16px;
}

.pos-client-card .client-card-name {
    grid-column: 2;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-client-card .client-card-phone {
    grid-column: 2;
    font-size: 12px;
    color: var(--ds-text-secondary);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.pos-client-card .client-card-phone:empty,
.pos-client-card .client-card-meta:empty {
    display: none;
}

.pos-client-card .client-card-meta {
    grid-column: 2;
    display: flex;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.pos-client-card .client-card-discount {
    color: var(--ds-success-text, var(--ds-success));
}

.pos-client-card .client-card-selected {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ds-primary);
}

.pos-client-card .client-profile-btn {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ds-text-tertiary, var(--ds-text-secondary));
    cursor: pointer;
}

.pos-client-card .client-profile-btn:hover {
    background: var(--ds-surface-alt);
    color: var(--ds-primary);
}

.pos-client-picker-header {
    color: var(--ds-text-secondary);
    font-size: 13px;
    border-bottom: none;
}

/* While the customer list is open the button says so in the app's own
   colour; it was an inline orange from an older palette. */
#quickClientBtn.is-picking {
    background: var(--ds-primary-tint);
    border-color: var(--ds-primary);
    border-style: solid;
    color: var(--ds-primary);
}

/* ---------------------------------------------------------------
   16. SETTINGS - one rhythm on every tab

   Each tab had its own spacing: fields stopped at 720px inside
   cards that ran on to 970px, a switch's note sat as far from
   its switch as from the next one, sub-headings touched the line
   above them, and Add buttons stretched to half the card. One
   column width, one card padding, one gap scale.
   --------------------------------------------------------------- */

/* (Section 17 below sets the panel's width and scrolling.) */
.settings-page .settings-panel-stack {
    gap: var(--ds-space-4);
}

.settings-page .ds-field,
.settings-page .settings-form-row,
.settings-page .settings-form-row-3 {
    max-width: none;
}

.settings-page .settings-section {
    padding: 24px;
}

.settings-page .settings-section-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 4px;
}

.settings-page .settings-section-desc {
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Fields in a card: 16px between rows, 6px from label to control. */
.settings-page .settings-section > .ds-field + .ds-field,
.settings-page .settings-section > .settings-form-row + .ds-field,
.settings-page .settings-section > .ds-field + .settings-form-row,
.settings-page .settings-section > .settings-form-row + .settings-form-row {
    margin-top: 16px;
}

.settings-page .settings-form-row {
    column-gap: 16px;
    row-gap: 16px;
}

.settings-page .ds-field > .ds-label {
    margin-bottom: 0;
}

.settings-page textarea.ds-input {
    padding: 10px 12px;
    line-height: 1.5;
}

/* Switches: the switch, then its label 12px away, on a 44px row. */
.ds-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    font-weight: 500;
    color: var(--ds-text-primary);
}

.settings-page .settings-toggle-row {
    gap: 12px;
}

/* A switch's note hangs under the switch's label and close to it, so it
   reads as that switch's footnote and not the next one's. */
.settings-page :is(.settings-toggle-row, .ds-toggle-row) + .settings-field-hint {
    margin-top: -6px;
    margin-bottom: 8px;
    padding-inline-start: 56px;
}

/* Sub-headings inside a card get room above them. */
.settings-page .ds-seam {
    margin: 24px 0 16px;
}

.settings-page .settings-section h4.ds-h4 {
    margin: 24px 0 8px;
    font-size: 15px;
}

.settings-page .ds-seam + h4.ds-h4 {
    margin-top: 0 !important;
}

/* Buttons keep their own width; they were stretched to a grid cell. */
.settings-page .settings-form-row > .ds-field.settings-align-end {
    justify-content: flex-end;
    align-items: flex-start;
}

.settings-page .settings-form-row > .ds-field.settings-align-end > .ds-btn,
.settings-page .settings-link-row > .ds-btn {
    width: auto;
}

.settings-page .settings-link-row {
    margin-top: 16px;
}

/* Kitchen printing steps: numbered heading, then its controls. */
.settings-page .print-setup-step {
    padding-block: 20px;
}

.settings-page .print-setup-step-title {
    margin: 0 0 6px;
    font-size: 15px;
}

/* Payment methods: one list, switch first on every row. */
.settings-page .settings-method-row {
    min-height: 52px;
    gap: 12px;
}

.settings-page .settings-method-add {
    margin-top: 4px;
}

/* Advanced cards open on demand. */
.settings-advanced > .settings-advanced-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    cursor: pointer;
    list-style: none;
}

.settings-advanced > .settings-advanced-summary::-webkit-details-marker {
    display: none;
}

.settings-advanced > .settings-advanced-summary::after {
    content: '';
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ds-text-secondary);
    border-bottom: 2px solid var(--ds-text-secondary);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.settings-advanced[open] > .settings-advanced-summary::after {
    transform: rotate(-135deg);
}

.settings-advanced > .settings-advanced-summary > .settings-section-title,
.settings-advanced > .settings-advanced-summary > .settings-section-desc {
    display: block;
    grid-column: 1;
}

.settings-advanced:not([open]) > .settings-advanced-summary > .settings-section-desc {
    margin-bottom: 0;
}

/* Hours: day, open, close, Closed on one line with even gaps. */
.settings-page .settings-hours-grid {
    gap: 8px;
}

.settings-page .settings-form-row + .settings-form-row {
    margin-top: 16px;
}

.settings-page .settings-field-hint + .print-setup-cats,
.settings-page .settings-layout-cards + .settings-field-hint {
    margin-top: 10px;
}

.settings-page .print-setup-station {
    max-width: 320px;
}

/* Clear all data sat flush against Export and Import in the same solid
   weight as a primary action. It is the one button here that cannot be
   undone: outlined in red and set apart. */
.settings-page .ds-btn.ds-btn-danger:not(.ds-btn-sm) {
    background: var(--ds-surface);
    color: var(--ds-danger-text, var(--ds-danger));
    border: 1px solid currentColor;
    margin-inline-start: 12px;
}

.settings-page .ds-btn.ds-btn-danger:not(.ds-btn-sm):hover {
    background: var(--ds-danger-tint, var(--ds-surface));
}

/* ---------------------------------------------------------------
   17. SETTINGS - as designed: full width, one scroll, every tab
   says what it is for, every switch is a row

   The cards scrolled inside a fixed-height box and the tab list
   scrolled inside another, while the page itself did not, so the
   wheel moved a different thing depending on where the pointer
   was. Now the page scrolls; the tab list stays pinned beside it
   and only scrolls itself on a screen too short to show it.
   --------------------------------------------------------------- */

.settings-page > .settings-shell {
    align-items: flex-start;
    flex: 0 0 auto;
}

.settings-page .settings-main {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-page .settings-panel-stack {
    flex: 0 0 auto;
    overflow: visible;
    max-width: none;
    padding-bottom: 96px;
}

body[data-page="settings"] .main-content .page-content {
    overflow-y: auto;
}

.settings-page .settings-tab-rail {
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: calc(100dvh - var(--topbar-height, 56px) - 112px);
}

/* Compact enough that all sixteen entries fit a 768px till without
   scrolling the list: 36px rows, tighter group headings. */
.settings-page .settings-tab-rail .settings-tab-btn {
    min-height: 36px;
    padding-block: 6px;
}

.settings-page .settings-tab-rail {
    gap: 2px;
    padding: 10px;
}

.settings-page .settings-rail-group {
    gap: 2px;
    margin-block-end: 4px;
}

.settings-page .settings-rail-heading {
    padding: 8px 4px 2px;
}

.settings-page .settings-rail-heading-icon {
    width: 20px;
    height: 20px;
}

.settings-page .settings-rail-search {
    margin-block-end: 4px;
}

/* What this tab is for, before any field. */
.settings-tab-intro {
    padding: 4px 4px 4px;
}

.settings-tab-intro-group {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary);
}

.settings-tab-intro-title {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ds-text-primary);
}

.settings-tab-intro-text {
    margin: 6px 0 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ds-text-secondary);
}

/* Fields flow in cells of at least 260px across the full width. */
.settings-page .settings-form-row,
.settings-page .settings-form-row-3 {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* A field on its own row stops at a readable length. */
.settings-page .settings-section > .ds-field:not(.settings-switch-host),
.settings-page .settings-receipt-form > .ds-field {
    max-width: 640px;
}

/* Every switch: label and note at the start, the switch at the end,
   in one bordered row. */
.settings-page .settings-switch {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    max-width: 880px;
}

.settings-page .settings-switch + .settings-switch,
.settings-page .ds-field + .settings-switch,
.settings-page .settings-switch + .ds-field,
.settings-page .settings-switch + .settings-form-row,
.settings-page .settings-form-row + .settings-switch {
    margin-top: 12px;
}

.settings-page .settings-switch > label.settings-toggle-row,
.settings-page .settings-switch > label.ds-toggle-row {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 32px;
    padding: 0;
    border: 0;
    margin: 0;
    max-width: none;
}

.settings-page .settings-switch > label > span,
.settings-page .settings-switch > label > .ds-label {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-primary);
}

.settings-page .settings-switch > .settings-field-hint {
    margin: 0;
    padding: 0 60px 0 0;
    font-size: 13px;
    max-width: none;
}

[dir="rtl"] .settings-page .settings-switch > .settings-field-hint {
    padding: 0 0 0 60px;
}

/* The receipt preview goes beside the form only when both fit. */
@container settings-panel (min-width: 1240px) {
    .settings-page .settings-receipt-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    }
}

.settings-page .settings-section-desc.is-same-as-tab,
.settings-page .settings-section-title.is-same-as-tab {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   18. CHARGE - as designed

   A line under the title (items, how it is served, when it was
   opened); the bill with photos, options and notes; Total to pay
   at the foot of the bill; Received and Change as two equal boxes
   whose figures step down a size rather than overflow; dollars
   behind one button; the pay button says the amount.
   --------------------------------------------------------------- */

.pay-bill-subtitle {
    grid-column: 1 / -1;
    margin: -6px 0 4px;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.pay-bill-line {
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.pay-bill-line-thumb {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--ds-surface-alt);
}

.pay-bill-line-thumb.is-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-text-secondary);
    background: var(--ds-primary-tint);
}

.pay-bill-line-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pay-bill-line-name {
    font-weight: 600;
}

.pay-bill-line-mods {
    font-size: 12px;
    color: var(--ds-text-secondary);
}

.pay-bill-line-note {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-warning-text);
}

.pay-bill-total-row.is-payable {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ds-border);
    align-items: baseline;
}

.pay-bill-total-row.is-payable > span:first-child {
    font-size: 17px;
    font-weight: 600;
}

.pay-bill-total-row.is-payable .value {
    font-size: 30px;
    font-weight: 700;
}

/* Received and Change: two equal boxes. */
.pay-bill-cash-row {
    padding: 0;
    background: transparent;
    border: 0;
}

.pay-bill-cash-field,
.pay-bill-change {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid var(--ds-primary);
    background: var(--ds-surface);
}

.pay-bill-cash-field label,
.pay-bill-change > span:first-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text-secondary);
    margin: 0 0 2px;
}

.pay-bill-cash-field input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 28px;
    font-weight: 700;
    text-align: start;
}

.pay-bill-cash-field input:focus {
    outline: none;
}

.pay-bill-cash-field:focus-within {
    box-shadow: 0 0 0 3px var(--ds-primary-tint);
}

.pay-bill-change {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    border-color: var(--ds-success, #10B981);
    background: var(--ds-success-tint, var(--ds-surface));
}

.pay-bill-change > span:first-child {
    color: var(--ds-success-text, var(--ds-text-secondary));
}

.pay-bill-change .value {
    min-height: 40px;
    font-size: 28px;
    color: var(--ds-success-text, var(--ds-text-primary));
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pay-bill-change.is-short {
    border-color: var(--ds-warning);
    background: var(--ds-warning-tint);
}

.pay-bill-change.is-short > span:first-child,
.pay-bill-change.is-short .value {
    color: var(--ds-warning-text);
}

/* Font size for long figures is fitted in paybill.js renderSummary. */
.pay-bill-change .value {
    display: block;
    width: 100%;
    text-align: end;
    white-space: nowrap;
    text-overflow: clip;
}

/* Dollars behind one button. */
.pay-bill-usd-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
}

.pay-bill-usd-toggle[hidden] {
    display: none;
}

.pay-bill-usd-toggle[aria-expanded="true"] {
    border-color: var(--ds-primary);
}

.pay-bill-usd-sign {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.pay-bill-usd-rate {
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.pay-bill-change .value.is-wrapped {
    white-space: normal;
    overflow-wrap: normal;
    line-height: 1.15;
}

.pay-bill-check-amount {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
    font-size: 13px;
    font-weight: 600;
}

.pay-bill-check-amount[hidden] {
    display: none;
}

/* ---------------------------------------------------------------
   19. TILL - as designed

   Category chips are 44px pills with a border, the chosen one
   filled; Collect Debt fits its label (it was boxed to an icon's
   40px and its words ran over All orders); the order header is
   title and time, then Customer and Table side by side, then how
   it is served; Charge reads "Charge ... 39,050 IQD".
   --------------------------------------------------------------- */

.pos-counter-screen .pos-categories .pos-cat-btn {
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 15px;
    font-weight: 600;
}

.pos-counter-screen .pos-categories .pos-cat-btn:hover {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
}

.pos-counter-screen .pos-categories .pos-cat-btn.active {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-text-on-accent, #fff);
}

.pos-counter-screen .pos-categories {
    gap: 8px;
}

.tab-actions .pos-toolbar-btn.collect-btn {
    width: auto;
    height: 40px;
    gap: 6px;
    padding: 0 12px;
    white-space: nowrap;
    font-size: 14px;
}

.tab-actions .pos-toolbar-btn.collect-btn:hover {
    transform: none;
}

.tab-actions {
    gap: 8px;
}

/* Order header: everything in one wrapping row, ordered as designed. */
.pos-counter-screen .pos-order-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pos-counter-screen .pos-order-header-meta,
.pos-counter-screen .pos-order-context {
    display: contents;
}

.pos-counter-screen .pos-order-header-row {
    order: 0;
    flex: 1 1 100%;
    min-width: 0;
}

.pos-counter-screen .pos-order-header .pos-table-open-meta {
    order: 1;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

/* Guests sit on the time's line, before it. */
.pos-counter-screen .pos-order-header .pos-order-header-meta > .pos-context-pill:not(#orderTypeSelector) {
    order: 1;
    height: 28px;
    font-size: 13px;
}

.pos-counter-screen .pos-order-header #quickClientBtn,
.pos-counter-screen .pos-order-header #tableSelectBtn,
.pos-counter-screen .pos-order-header #orderTypeSelector {
    order: 2;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 40px;
    justify-content: center;
    border: 1px solid var(--ds-border);
    border-style: solid;
    border-radius: 10px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 14px;
    font-weight: 600;
}

.pos-counter-screen .pos-order-header #quickClientBtn.is-picking {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.pos-counter-screen .pos-order-header #tableSelectBtn,
.pos-counter-screen .pos-order-header #orderTypeSelector {
    order: 3;
}

.pos-counter-screen .pos-order-header #tableSelectBtn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-counter-screen .pos-order-header #orderTypeTabs {
    order: 4;
    flex: 1 1 100%;
}

.pos-counter-screen .pos-order-header #orderTypeTabs > * {
    flex: 1 1 0;
}

/* Charge: the word at the start, the amount at the end. */
.pos-counter-screen .pos-charge-btn:not(.pos-send-btn) {
    min-height: 60px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 700;
}

.pos-counter-screen .pos-charge-btn:not(.pos-send-btn) > svg {
    display: none;
}

.pos-counter-screen .pos-charge-btn:not(.pos-send-btn) > span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-counter-screen .pos-order-header .pos-table-open-meta,
.pos-counter-screen .pos-order-header .pos-table-open-meta * {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.pos-counter-screen .pos-order-header .pos-table-open-meta {
    padding: 0;
    min-height: 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

/* ---------------------------------------------------------------
   20. DASHBOARD - as designed
   --------------------------------------------------------------- */

.dash-shift-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.dash-shift-chip.is-open {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.dash-shift-chip.is-closed {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.dash-shift-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.dash-shift-chip.is-closed .dash-shift-dot {
    border-radius: 2px;
}

#pageHeaderActions:has(.dash-shift-chip) {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* KPI cards: label, figure with a small unit, comparison. */
.dashboard-page .dash-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
}

.dashboard-page .dash-kpi .ds-stat-card-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

.dashboard-page .dash-kpi .ds-stat-card-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.dash-kpi-unit {
    margin-inline-start: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-secondary);
}

.dashboard-page .dash-kpi .ds-stat-card-delta {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
}

.dashboard-page .dash-kpi .ds-stat-card-delta.is-up {
    color: var(--ds-success-text);
}

.dashboard-page .dash-kpi .ds-stat-card-delta.is-down {
    color: var(--ds-warning-text);
}

/* Period buttons as one segmented control. */
.dash-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--ds-surface-sunken, #E9EBF5);
}

.dash-seg-btn {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.dash-seg-btn.is-on {
    background: var(--ds-surface);
    color: var(--ds-primary);
    box-shadow: 0 1px 3px rgba(30, 27, 57, 0.16);
}

/* Sales bars. */
.dash-bars-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 240px;
}

.dash-bars-peak {
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.dash-bars-peak strong {
    color: var(--ds-text-primary);
}

.dash-bars {
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-top: 8px;
    border-bottom: 1px solid var(--ds-border);
}

.dash-bars.is-thin {
    gap: 4px;
}

.dash-bar-col {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.dash-bar {
    border-radius: 6px 6px 0 0;
    background: color-mix(in srgb, var(--ds-primary) 60%, white);
}

.dash-bar.is-peak {
    background: var(--ds-primary);
}

.dash-bar-labels {
    display: flex;
    gap: 10px;
}

.dash-bar-labels.is-thin {
    gap: 4px;
}

.dash-bar-labels > span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    color: var(--ds-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Top sellers. */
.dash-sellers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-seller-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
}

.dash-seller-name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-seller-n {
    color: var(--ds-text-secondary);
    white-space: nowrap;
}

.dash-seller-track {
    height: 6px;
    margin-top: 6px;
    border-radius: 3px;
    background: var(--ds-surface-alt, #EEF0F6);
}

.dash-seller-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--ds-primary);
}

/* Orders by status. */
.dash-status {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-status-bar {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
}

.dash-status-bar .is-completed,
.dash-status-mark.is-completed {
    background: var(--ds-primary);
}

.dash-status-bar .is-open,
.dash-status-mark.is-open {
    background: var(--ds-warning);
}

.dash-status-bar .is-cancelled,
.dash-status-mark.is-cancelled {
    background: var(--ds-text-tertiary, #6B7280);
}

.dash-status-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

.dash-status-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dash-status-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dash-status-mark.is-open {
    border-radius: 2px;
}

.dash-status-mark.is-cancelled {
    border-radius: 2px;
    transform: rotate(45deg);
}

/* One 16px rhythm between the rows, as designed (it was 24px of margin
   on top of the grid gap). */
.dashboard-page {
    gap: 16px;
}

.dashboard-page > * + * {
    margin-top: 0;
}

.dashboard-page > .dash-main-grid,
.dashboard-page > .dash-bottom-grid,
.dashboard-page > .dash-mini-stat-row {
    margin-top: 0;
}

/* ---------------------------------------------------------------
   21. ORDERS - as designed
   --------------------------------------------------------------- */

#pageHeaderActions:has(.orders-view-tabs) {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Orders / Voids and cancels as one segmented control in the header. */
#pageHeaderActions .orders-view-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--ds-surface-sunken, #E9EBF5);
    border: 0;
}

#pageHeaderActions .orders-view-tabs .ds-tab {
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

#pageHeaderActions .orders-view-tabs .ds-tab.is-active {
    background: var(--ds-surface);
    color: var(--ds-primary);
    box-shadow: 0 1px 3px rgba(30, 27, 57, 0.16);
}

#pageHeaderActions .orders-view-tabs .ds-tab::after {
    display: none;
}

/* The card: no padding of its own, the bar and footer carry it. */
.orders-page .ds-list-card {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.orders-page .orders-toolbar {
    padding: 16px;
    border-bottom: 1px solid var(--ds-border);
    flex-wrap: wrap;
}

.orders-page .orders-toolbar .orders-search {
    height: 44px;
    max-width: 360px;
}

.orders-page .orders-toolbar .ds-select,
.orders-page .orders-toolbar .ds-input[type="date"] {
    height: 44px;
    border-radius: 12px;
}

.orders-page .orders-toolbar .orders-filter-field[hidden] {
    display: none;
}

.orders-period {
    display: flex;
    gap: 4px;
    margin-inline-start: auto;
    padding: 4px;
    border-radius: 12px;
    background: var(--ds-surface-sunken, #E9EBF5);
}

.orders-period-btn {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.orders-period-btn.is-active {
    background: var(--ds-surface);
    color: var(--ds-primary);
    box-shadow: 0 1px 3px rgba(30, 27, 57, 0.16);
}

/* Table. */
.orders-page .orders-desktop-table thead th {
    height: 44px;
    background: var(--ds-surface-alt, #FAFAFE);
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.orders-page .orders-desktop-table tbody td {
    height: 56px;
    font-size: 15px;
}

.orders-page .orders-desktop-table th:first-child,
.orders-page .orders-desktop-table td:first-child {
    padding-inline-start: 16px;
}

.orders-page .orders-no {
    font-weight: 600;
}

.orders-page .orders-time {
    color: var(--ds-text-secondary);
}

.orders-page .orders-num {
    text-align: end;
}

.orders-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.orders-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.orders-pill-dot {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 2px;
}

.orders-pill.is-paid {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.orders-pill.is-paid .orders-pill-dot {
    border-radius: 50%;
}

.orders-pill.is-open,
.orders-pill.is-debt {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.orders-pill.is-void {
    background: var(--ds-danger-tint);
    color: var(--ds-danger-text);
}

.orders-pill.is-void .orders-pill-dot {
    transform: rotate(45deg);
}

.orders-pill.is-cancel {
    background: var(--ds-surface-alt, #F3F4F6);
    color: var(--ds-text-secondary);
}

.orders-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--ds-border);
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.orders-page > .ds-list-card {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   22. TABLE SERVICE HOME - as designed

   The map with its filter chips above it (All / Free / Seated / QR
   order / Bill requested, each with its count), and a side panel
   for the tapped table: guests and "Seat 2 and start order" when
   it is free, what they have with Add items / Pay bill when not.
   --------------------------------------------------------------- */

.pos-floor-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 16px;
    padding: 0 12px 12px 0;
}

.pos-floor-body > .pos-inline-floor-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
}

.pos-floor-side {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    background: var(--ds-surface);
}

@media (max-width: 1023px) {
    .pos-floor-side {
        display: none;
    }
}

#posInlineFloor .tbl-floors { order: 0; }
#posInlineFloor .tbl-status-strip { order: 1; }
#posInlineFloor .tbl-canvas-wrap { order: 2; }

#posInlineFloor .tbl-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}

#posInlineFloor .tbl-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#posInlineFloor .tbl-status-chip.is-on {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

#posInlineFloor .tbl-status-chip .tbl-status-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pos-floor-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pos-floor-side-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ds-text-primary);
}

.pos-floor-side-sub {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.pos-floor-side-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.pos-floor-side-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.pos-floor-side-pill.is-seated {
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.pos-floor-side-pill.is-pending_qr,
.pos-floor-side-pill.is-bill_requested {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.pos-floor-side-q {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
}

.pos-floor-side-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-floor-side-step {
    width: 52px;
    height: 52px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    font-size: 24px;
    cursor: pointer;
}

.pos-floor-side-guests {
    flex: 1;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pos-floor-side-fill {
    flex: 1;
}

.pos-floor-side-primary,
.pos-floor-side-secondary {
    width: 100%;
    border-radius: 14px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pos-floor-side-primary {
    height: 56px;
    border: 0;
    background: var(--ds-primary);
    color: var(--ds-text-on-accent, #fff);
    font-size: 17px;
}

.pos-floor-side-secondary {
    height: 48px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 15px;
}

.pos-floor-side-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.pos-floor-side-item,
.pos-floor-side-total {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ds-border);
    font-size: 15px;
}

.pos-floor-side-total {
    border-bottom: 0;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
}

.pos-floor-side-amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[dir="rtl"] .pos-floor-side-amt {
    direction: ltr;
    unicode-bidi: isolate;
}

.pos-floor-side-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-floor-side-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    background: var(--ds-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.pos-floor-side-row:hover {
    border-color: var(--ds-primary);
}

.pos-floor-side-row-name {
    font-weight: 700;
}

.pos-floor-side-row-time {
    font-size: 12px;
    color: var(--ds-text-secondary);
}

.pos-floor-side-row-amt {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pos-floor-side-none {
    margin: 0;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

#posInlineFloor .tbl-status-chip.is-free .tbl-status-dot { background: var(--ds-success); }
#posInlineFloor .tbl-status-chip.is-seated .tbl-status-dot { background: var(--ds-primary); }
#posInlineFloor .tbl-status-chip.is-pending_qr .tbl-status-dot { background: var(--ds-warning); }
#posInlineFloor .tbl-status-chip.is-bill_requested .tbl-status-dot { background: var(--ds-danger); }
#posInlineFloor .tbl-status-chip .tbl-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ---------------------------------------------------------------
   23. TABLE ORDER - as designed
   --------------------------------------------------------------- */

.pos-order-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-secondary);
}

.pos-order-group-head.is-sent::before,
.pos-order-group-head.is-new::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-success);
}

.pos-order-group-head.is-new::before {
    background: var(--ds-warning);
    border-radius: 2px;
}

.pos-order-group-hint {
    margin: 0;
    padding: 6px 16px 10px;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

/* Pay bill is the second action at a table: a 48px outline button, not a
   second Charge. */
.pos-counter-screen .pos-charge-btn.is-secondary {
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font-size: 16px;
    font-weight: 600;
    box-shadow: none;
}

/* In the order header the debt button is its icon only; its words ran into
   the PRINTED badge. The full button stays in the tab bar. */
.pos-order-header .header-actions .collect-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

.pos-order-header .header-actions .collect-btn > span:not(.collect-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pos-order-header .header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Money keeps its own order inside Arabic. */
[dir="rtl"] .pay-bill-quick-tender .btn,
[dir="rtl"] .pay-bill-usd-rate,
[dir="rtl"] .pay-bill-usd-eq,
[dir="rtl"] .pay-bill-change .value,
[dir="rtl"] .pay-bill-subtitle {
    unicode-bidi: isolate;
}

[dir="rtl"] .pay-bill-quick-tender .btn,
[dir="rtl"] .pay-bill-usd-rate,
[dir="rtl"] .pay-bill-usd-eq,
[dir="rtl"] .pay-bill-change .value {
    direction: ltr;
}

[dir="rtl"] .pay-bill-change .value {
    text-align: start;
}

/* ---------------------------------------------------------------
   24. SEATS - "Seat for new items" on table orders
   --------------------------------------------------------------- */

.pos-counter-screen .pos-order-header .pos-seat-row {
    order: 5;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.pos-seat-label {
    margin-inline-end: 4px;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.pos-seat-btn {
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pos-seat-btn.is-on {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-text-on-accent, #fff);
}

.pos-seat-btn.is-add {
    border-style: dashed;
    color: var(--ds-text-secondary);
}

.item-seat-badge {
    margin-inline-start: 6px;
    padding: 1px 6px;
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-secondary);
}

/* ---------------------------------------------------------------
   25. FLOOR ALERTS - QR orders and bill requests over the map
   --------------------------------------------------------------- */

.pos-floor-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px;
}

.pos-floor-alerts[hidden] {
    display: none;
}

.pos-floor-alert {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 8px 6px 14px;
    border-radius: 12px;
    border: 1px solid var(--ds-warning);
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.pos-floor-alert.is-bill {
    border-color: var(--ds-primary);
    background: var(--ds-primary-tint);
    color: var(--ds-text-primary);
}

.pos-floor-alert-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
}

.pos-floor-alert-btn {
    height: 40px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: var(--ds-surface);
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pos-floor-alert-btn.is-strong {
    border-color: transparent;
    background: var(--ds-warning-text);
    color: #fff;
}

.pos-floor-alert.is-bill .pos-floor-alert-btn.is-strong {
    background: var(--ds-primary);
}

/* Table boxes on the till's floor: name and guests, a state word, then the
   time and the amount. */
#posInlineFloor .tbl-shape .tbl-shape-status.is-quiet {
    font-size: 10px;
    font-weight: 600;
    color: var(--ds-text-secondary);
}

.tbl-shape-guests {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: 4px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--ds-surface-alt, #F3F4F6);
    font-size: 10px;
    font-weight: 700;
    color: var(--ds-text-secondary);
}

.tbl-shape-guests::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}

.tbl-shape.is-selected .tbl-shape-status.is-quiet,
.tbl-shape.is-selected .tbl-shape-guests {
    color: inherit;
    background: transparent;
}

/* ---------------------------------------------------------------
   26. PRODUCTS - Arabic names in one window
   --------------------------------------------------------------- */

.arabic-names-hint {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--ds-text-secondary);
}

.arabic-names-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
}

.arabic-names-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 12px;
}

.arabic-names-en {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   27. SETTINGS - one printer list
   --------------------------------------------------------------- */

.printers-helper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    font-size: 14px;
}

.printers-helper.is-on {
    border-color: color-mix(in srgb, var(--ds-success) 40%, transparent);
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.printers-helper.is-off {
    border-color: color-mix(in srgb, var(--ds-warning) 50%, transparent);
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.printers-helper-text {
    flex: 1;
    min-width: 220px;
}

.printers-list {
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
}

.printers-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-height: 68px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-border);
}

.printers-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
}

.printers-main {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.printers-name {
    font-size: 15px;
    font-weight: 600;
}

.printers-detail {
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.printers-state {
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ds-surface-alt, #F3F4F6);
    color: var(--ds-text-secondary);
}

.printers-state.is-on {
    background: var(--ds-success-tint);
    color: var(--ds-success-text);
}

.printers-state.is-off {
    background: var(--ds-warning-tint);
    color: var(--ds-warning-text);
}

.printers-add {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--ds-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.printers-add:hover {
    background: var(--ds-primary-tint);
}