/* =====================================================================
   Ranma design system. All colours are tokens: change the brand here.
   Works in RTL (Kurdish, Arabic) and LTR (English) through logical
   properties (inline-start / inline-end) instead of left / right.
   ===================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../lib/fonts/inter.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../lib/fonts/noto-sans-arabic.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Brand: Ranma blue (#114987) and Ranma amber (#F9AA33). Everything else is derived from these. */
    --rn-primary: #114987;
    --rn-primary-hover: #0c3768;
    --rn-primary-soft: #e8eef7;
    --rn-accent: #f9aa33;
    --rn-accent-hover: #e8951a;
    --rn-accent-soft: #fff4e0;
    --rn-accent-text: #8a5300;

    /* Meaning */
    --rn-success: #15803d;
    --rn-success-soft: #dcfce7;
    --rn-danger: #b91c1c;
    --rn-danger-soft: #fee2e2;

    /* Surfaces and text */
    --rn-bg: #f5f7fb;
    --rn-surface: #ffffff;
    --rn-border: #e2e8f0;
    --rn-text: #1b2636;
    --rn-text-muted: #64748b;
    /* The menu is a deeper shade of the brand blue, so the white logo and the amber marker stand out. */
    --rn-sidebar: #0b2f57;
    --rn-sidebar-text: #c5d3e6;
    --rn-sidebar-active: #ffffff;

    --rn-radius: 12px;
    --rn-radius-sm: 8px;
    --rn-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --rn-sidebar-width: 260px;
    --rn-topbar-height: 60px;
    --rn-bottomnav-height: 64px;

    /* Latin letters and digits use Inter; Arabic-script letters fall through to Noto Sans Arabic. */
    --rn-font: "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

    /* Bootstrap integration */
    --bs-primary: var(--rn-primary);
    --bs-primary-rgb: 17, 73, 135;
    --bs-link-color: var(--rn-primary);
    --bs-link-color-rgb: 17, 73, 135;
    --bs-link-hover-color: var(--rn-primary-hover);
    --bs-body-font-family: var(--rn-font);
    --bs-body-bg: var(--rn-bg);
    --bs-body-color: var(--rn-text);
    --bs-border-color: var(--rn-border);
    --bs-border-radius: var(--rn-radius-sm);
}

html { font-size: 15px; }
body { font-family: var(--rn-font); background: var(--rn-bg); color: var(--rn-text); -webkit-font-smoothing: antialiased; }

/* Kurdish / Arabic script reads better a little larger and with more line height. */
html[dir="rtl"] body { font-size: 1.02rem; line-height: 1.75; }

/* Numbers always line up in columns. */
.num, .table td.num, .kpi-value { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* A number cell is written left-to-right, but it still lines up with its column heading on the page's side. */
[dir="rtl"] td.num:not(.text-end):not(.text-center), [dir="rtl"] th.num:not(.text-end):not(.text-center) { text-align: right; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: var(--rn-radius-sm); font-weight: 600; padding: .55rem 1.1rem; }
.btn-primary { --bs-btn-bg: var(--rn-primary); --bs-btn-border-color: var(--rn-primary); --bs-btn-hover-bg: var(--rn-primary-hover);
               --bs-btn-hover-border-color: var(--rn-primary-hover); --bs-btn-active-bg: var(--rn-primary-hover); --bs-btn-disabled-bg: var(--rn-primary); }
.btn-outline-primary { --bs-btn-color: var(--rn-primary); --bs-btn-border-color: var(--rn-primary); --bs-btn-hover-bg: var(--rn-primary);
                       --bs-btn-hover-border-color: var(--rn-primary); --bs-btn-active-bg: var(--rn-primary); }
.btn-lg { padding: .75rem 1.4rem; }
.form-control, .form-select { border-radius: var(--rn-radius-sm); padding: .6rem .85rem; border-color: var(--rn-border); }
.form-control:focus, .form-select:focus { border-color: var(--rn-primary); box-shadow: 0 0 0 .2rem rgba(17, 73, 135, .15); }
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }

/* ---------------------------------------------------------------- cards */
.card { border: 1px solid var(--rn-border); border-radius: var(--rn-radius); box-shadow: var(--rn-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--rn-border); font-weight: 700; padding: .9rem 1.1rem; }

/* ---------------------------------------------------------------- app shell */
.app { min-height: 100vh; }

.app-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--rn-sidebar-width);
    background: var(--rn-sidebar); color: var(--rn-sidebar-text); flex-direction: column; z-index: 1030;
}
.app-brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.1rem 1.25rem .9rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-brand-logo { display: block; width: 220px; height: auto; margin-inline: auto; } /* the whole logo with its taglines */
.app-brand-business {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: .78rem; color: #fff; opacity: .85; line-height: 1.3;
}
.app-brand-business::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rn-accent); }
.offcanvas .app-brand { border-bottom: 0; padding: 0; }

.app-nav { list-style: none; margin: 0; padding: .5rem .75rem; overflow-y: auto; flex: 1; }
.app-nav-link {
    display: flex; align-items: center; gap: .75rem; padding: .62rem .85rem; margin-bottom: 2px;
    border-radius: var(--rn-radius-sm); color: var(--rn-sidebar-text); text-decoration: none; font-weight: 500;
}
.app-nav-link i { font-size: 1.15rem; width: 1.3rem; text-align: center; }
.app-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.app-nav-link { position: relative; }
.app-nav-link.active { background: rgba(255, 255, 255, .10); color: var(--rn-sidebar-active); font-weight: 700; }
.app-nav-link.active::before {
    content: ""; position: absolute; inset-inline-start: -.75rem; top: 20%; bottom: 20%; width: 4px;
    border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--rn-accent);
}
.app-nav-link.active i { color: var(--rn-accent); }
.app-nav-link.disabled { opacity: .45; pointer-events: none; }
.app-nav-soon { margin-inline-start: auto; font-size: .68rem; padding: .1rem .45rem; border-radius: 99px; background: rgba(255, 255, 255, .12); }

.app-main { min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 992px) { .app-main { margin-inline-start: var(--rn-sidebar-width); } }

.app-topbar {
    position: sticky; top: 0; z-index: 1020; height: var(--rn-topbar-height);
    display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rn-border);
}
.app-topbar-title { font-weight: 700; font-size: 1.05rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar .btn-icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 10px; }

.app-content { flex: 1; padding: .5rem 1rem calc(var(--rn-bottomnav-height) + 1rem); max-width: 1400px; width: 100%; }
@media (min-width: 992px) { .app-content { padding: .5rem 1.5rem 1.5rem; } }

/* Mobile bottom navigation: the five things done most, one thumb away. */
.app-bottomnav {
    position: fixed; inset-inline: 0; bottom: 0; height: var(--rn-bottomnav-height); z-index: 1030;
    display: flex; background: var(--rn-surface); border-top: 1px solid var(--rn-border);
    padding-bottom: env(safe-area-inset-bottom);
}
.app-bottomnav a, .app-bottomnav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--rn-text-muted); text-decoration: none; font-size: .72rem; font-weight: 600; border: 0; background: none;
}
.app-bottomnav i { font-size: 1.3rem; }
.app-bottomnav .active { color: var(--rn-primary); }
.app-bottomnav .app-bottomnav-sell i {
    width: 48px; height: 48px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--rn-primary); color: #fff; box-shadow: 0 4px 12px rgba(17, 73, 135, .35);
}

.offcanvas.app-menu { background: var(--rn-sidebar); color: var(--rn-sidebar-text); width: 280px; }

/* ---------------------------------------------------------------- page parts */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.page-header h1 { font-size: 1.45rem; font-weight: 800; margin: 0; }
.page-header p { margin: .15rem 0 0; color: var(--rn-text-muted); }

.kpi { padding: 1.1rem 1.2rem; height: 100%; }
.kpi-label { color: var(--rn-text-muted); font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.kpi-value { font-size: 1.6rem; font-weight: 800; margin-top: .35rem; display: block; text-align: start; }
.kpi-sub { font-size: .8rem; color: var(--rn-text-muted); }
.kpi-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1.05rem; }
.kpi-icon.primary { background: var(--rn-primary-soft); color: var(--rn-primary); }
.kpi-icon.success { background: var(--rn-success-soft); color: var(--rn-success); }
.kpi-icon.danger { background: var(--rn-danger-soft); color: var(--rn-danger); }
.kpi-icon.accent { background: var(--rn-accent-soft); color: #b45309; }

.quick-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center;
    padding: 1.1rem .5rem; border-radius: var(--rn-radius); background: var(--rn-surface); border: 1px solid var(--rn-border);
    color: var(--rn-text); text-decoration: none; font-weight: 600; font-size: .9rem; height: 100%;
    transition: border-color .15s, transform .15s;
}
.quick-action i { font-size: 1.6rem; color: var(--rn-primary); }
.quick-action:hover { border-color: var(--rn-primary); transform: translateY(-1px); color: var(--rn-text); }
.quick-action.disabled { opacity: .5; pointer-events: none; }

.text-success-strong { color: var(--rn-success) !important; }
.text-danger-strong { color: var(--rn-danger) !important; }
/* Amber that reads on white (a cheque due within the week). */
.text-warning-strong { color: #b45309 !important; }
/* The cheque window's supplier list, under its search box. */
.chq-results { z-index: 5; max-height: 16rem; overflow-y: auto; }

/* ---------------------------------------------------------------- sign-in / setup */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
        background: radial-gradient(1200px 600px at 100% 0%, var(--rn-primary-soft), transparent 60%), var(--rn-bg); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card.wide { max-width: 720px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-bottom: 1.5rem; text-decoration: none; }
.auth-brand .app-brand-logo { width: 220px; height: auto; }
.auth .card-body { padding: 1.75rem; }
@media (min-width: 576px) { .auth .card-body { padding: 2.25rem; } }

.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice label {
    display: block; padding: .9rem 1rem; border: 2px solid var(--rn-border); border-radius: var(--rn-radius-sm);
    cursor: pointer; height: 100%; transition: border-color .15s, background .15s;
}
.choice label strong { display: block; }
.choice label small { color: var(--rn-text-muted); }
.choice input:checked + label { border-color: var(--rn-primary); background: var(--rn-primary-soft); }
.choice input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(17, 73, 135, .25); }

.section-title { font-weight: 800; font-size: 1rem; margin: 1.5rem 0 .85rem; display: flex; align-items: center; gap: .5rem; }
.section-title:first-child { margin-top: 0; }
.section-title .step { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
                       background: var(--rn-primary); color: #fff; }

.lang-switch .btn { padding: .3rem .7rem; font-size: .85rem; }

/* ---------------------------------------------------------------- point of sale */
.pos-search { position: relative; }
.pos-search .form-control { font-size: 1.1rem; }
.pos-results { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1010; max-height: 60vh; overflow-y: auto; }
.pos-results .active-hint { background: var(--rn-primary-soft); }
/* the chosen customer's debt, inside the customer box at its far end (the name keeps its room: pos.js pads the box) */
.pos-debt { position: absolute; inset-inline-end: .35rem; top: 50%; transform: translateY(-50%); display: flex; gap: .25rem;
    max-width: 70%; overflow: hidden; white-space: nowrap; pointer-events: none; }
.pos-debt > span { font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.pos-debt-owes { background: #fdecec; color: #b42318; }
.pos-debt-credit { background: #e7f6ee; color: #1e7b4a; }
/* the customer's markup, beside the customer box */
.pos-markup-w { width: 6rem; flex: 0 0 auto; }
/* sale footer: the customer's old debt plus this sale; on phones one thin line above the other figures */
#pos-debt-total-sum:not(:empty) + #pos-debt-total-after:not(:empty)::before { content: "·"; margin-inline: .3rem; }
@media (max-width: 767.98px) {
    #pos #pos-debt-total { order: -1; flex-basis: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35rem; }
    #pos #pos-debt-total-value { font-size: .9rem !important; }
    #pos #pos-debt-total-sum { display: none; }
    #pos #pos-debt-total-after:not(:empty)::before { content: "·"; margin-inline: 0 .3rem; }
}

/* The sale page now uses the shared document layout (.doc-page): table lines and the bottom totals bar. */
.pos-qty .btn { width: 2rem; }

/* ---------------------------------------------------------------- reports */
.report-card { transition: border-color .15s, transform .15s; }
.report-card:hover { border-color: var(--rn-primary); transform: translateY(-1px); }

/* Printing a page of the app (reports): only the content, no menus. */
@media print {
    .app-sidebar, .app-topbar, .app-bottomnav, .pos-mobilebar, .no-print, .alert-dismissible .btn-close { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content { padding: 0 !important; max-width: none; }
    .card { box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
    a { text-decoration: none; color: inherit !important; }
}

/* ---------------------------------------------------------------- receipt (80 mm thermal paper) */
.receipt { width: 76mm; margin: 0 auto; padding: 4mm 2mm; font-size: 12px; line-height: 1.5; color: #000; background: #fff; }
.receipt h1 { font-size: 16px; font-weight: 800; text-align: center; margin: 0 0 2mm; }
.receipt .muted { color: #444; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt th, .receipt td { padding: 1mm 0; vertical-align: top; }
.receipt thead th { border-bottom: 1px dashed #000; font-weight: 700; }
.receipt .totals td { padding: .5mm 0; }
.receipt .grand td { border-top: 1px dashed #000; font-size: 15px; font-weight: 800; padding-top: 1.5mm; }
.receipt .end { text-align: end; }
.receipt td + td, .receipt th + th { padding-inline-start: 3mm; }
.receipt-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: 1rem 0; padding: 0 1rem; }
/* the 80 mm receipt's head: branch line and the kind of invoice in a band */
.receipt .rc-branch { text-align: center; font-size: 11px; color: #333; margin-bottom: 2mm; }
.receipt .rc-title { text-align: center; font-weight: 800; letter-spacing: .04em; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 1mm 0; margin: 0 0 2mm; }
/* the 80 mm head and foot with a print design (2026-11-07): second name, line about the work, phones with names, contacts, footer */
.rh-name { font-size: 16px; font-weight: 800; text-align: center; margin: 0 0 1mm; line-height: 1.3; }
.rh-design { text-align: center; font-size: 11px; color: #222; margin-bottom: 2mm; line-height: 1.45; }
.rh-name2 { font-size: 12px; font-weight: 700; }
.rh-tagline { font-weight: 600; }
.rh-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 3mm; }
.rh-phones > span { white-space: nowrap; }
.rh-phones b { font-weight: 700; margin-inline-end: 1mm; }
.rh-branch { margin-top: .5mm; font-size: 10.5px; color: #333; }
.rh-foot { text-align: center; margin-top: 3mm; padding-top: 1.5mm; border-top: 1px dashed #000; font-size: 11px; }
@media print {
    @page { size: 80mm auto; margin: 0; }
    body { background: #fff; }
    .receipt-actions { display: none; }
}

/* ---------- item form: compact, only the units list scrolls, save always visible ---------- */
/* .row pulls itself up by the gutter; cancelling that leaves exactly one gutter (.5rem) between units. */
.item-form #unit-rows .unit-row { margin-top: 0; }
/* One line per unit on tablets and up: three fit, a fourth makes only this list scroll. */
@media (min-width: 768px) {
    .item-form .unit-scroll { max-height: calc(3 * 2.375rem + 2 * .5rem + 2px); overflow-y: auto; overflow-x: hidden; padding-inline-end: .25rem; }
}
/* On phones a unit wraps onto two lines, so units are separated by a line instead. */
@media (max-width: 767.98px) {
    .item-form #unit-rows .unit-row { border-top: 1px solid var(--bs-border-color); padding-top: .5rem; }
}
/* ---------- item page: a record page as in Zoho / Odoo ----------
   Wide screens: the fields (the picture beside the name) in the main column; status, then the stock cards, in a side
   column. Narrower: the fields first, then status, then the stock cards. */
.item-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "top" "side"; }
.item-main, .item-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.item-main { grid-area: main; }
.item-side { grid-area: side; }
.item-side:empty { display: none; }
.item-top { grid-area: top; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-content: start; }
.item-layout .card { margin: 0; }
@media (min-width: 1200px) {
    .item-layout { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-rows: auto 1fr; grid-template-areas: "main top" "main side"; }
}
.item-form .form-label { font-size: .8rem; font-weight: 600; color: var(--rn-text-muted); margin-bottom: .3rem; }
.item-form .form-label .bi-info-circle { opacity: .7; }
.item-form .input-group-text { background: var(--bs-tertiary-bg); color: var(--rn-text-muted); }
.item-name { font-size: 1.1rem; font-weight: 700; }
.unit-head { font-size: .75rem; font-weight: 700; color: var(--rn-text-muted); border-bottom: 1px solid var(--rn-border); padding-bottom: .4rem; margin-bottom: .5rem; }
/* Status switches: small text, one line each (the full text is in the title when it is cut). */
.item-flag { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem 0; cursor: pointer; font-size: .8rem; font-weight: 600; }
.item-flag + .item-flag { border-top: 1px solid var(--rn-border); }
.item-flag-icon { width: 1.75rem; height: 1.75rem; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: .9rem; }
.item-flag-active { background: var(--rn-success-soft); color: var(--rn-success); }
.item-flag-favorite { background: var(--rn-accent-soft); color: var(--rn-accent); }
.item-flag-serial { background: var(--rn-primary-soft); color: var(--rn-primary); }
.item-flag-field { cursor: default; }
.item-flag-field .item-warranty { width: 4.5rem; flex-shrink: 0; text-align: center; }
/* Real weight of each piece: the two choices keep their names beside them. */
.item-flag-field .item-catch-select { width: 8.5rem; flex-shrink: 0; }
.item-flag-field .catch-unit { flex-shrink: 0; }
#catch-more > .item-flag { border-top: 1px solid var(--rn-border); }
.item-flag-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-flag .form-switch { margin: 0; padding: 0; min-height: 0; flex-shrink: 0; }
.item-flag .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.3em; cursor: pointer; }
/* Label-and-value lines: stock now, held bonus. */
.item-stats { display: grid; gap: .4rem; margin: 0; }
.item-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .45rem .75rem;
    border-radius: var(--rn-radius-sm); background: var(--bs-tertiary-bg); }
.item-stats dt { font-size: .8rem; font-weight: 500; color: var(--rn-text-muted); }
.item-stats dd { margin: 0; font-weight: 800; }
.item-stats dd small { font-weight: 500; color: var(--rn-text-muted); }

.save-bar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; justify-content: flex-end;
    padding: .75rem 0;
    background: linear-gradient(to top, var(--rn-bg) 75%, transparent);
}

/* ---------- pager under every list (100 rows a page) ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.pager-info { font-size: .85rem; color: var(--rn-text-muted); }
.pager .pagination {
    --bs-pagination-color: var(--rn-primary); --bs-pagination-hover-color: var(--rn-primary-hover);
    --bs-pagination-active-bg: var(--rn-primary); --bs-pagination-active-border-color: var(--rn-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rn-primary) 25%, transparent);
    gap: .25rem;
}
.pager .page-link { min-width: 2.1rem; text-align: center; border-radius: var(--rn-radius-sm) !important; margin: 0 !important; }
@media print { .pager { display: none; } }

/* ---------- item pictures ---------- */
.item-picture { position: relative; width: 8.5rem; flex-shrink: 0; align-self: center; }
@media (min-width: 768px) { .item-picture { align-self: flex-start; } }
.item-picture-frame {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    aspect-ratio: 1; margin: 0; overflow: hidden; cursor: pointer;
    border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
}
.item-picture-frame:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.item-picture-frame img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.item-picture-empty { display: flex; flex-direction: column; align-items: center; }
.item-picture-empty[hidden], .item-picture-frame img[hidden] { display: none; }
.item-picture-clear { position: absolute; top: .25rem; inset-inline-end: .25rem; padding: .1rem .35rem; }
.item-thumb {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius);
    object-fit: cover; background: #fff; border: 1px solid var(--bs-border-color-translucent);
}
.item-thumb-empty { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

/* ---------- document header in one row (purchase) ---------- */
@media (min-width: 1200px) {
    .doc-head .dh-date { width: 9.5rem; }
    .doc-head .dh-currency { width: 6.5rem; }
    .doc-head .dh-rate { width: 7rem; }
    .doc-head .dh-notes { width: 8rem; }
    .doc-head .dh-place { width: 9.5rem; }
    .doc-head .col-xl { min-width: 11rem; }
}

/* ---------- focus mode: sale / purchase entry use the whole screen ---------- */
.app-focus .app-main { margin-inline-start: 0 !important; }
/* A slimmer top bar with the page's title in the middle, larger and bold (user's request, 2026-10-20). */
.app-focus { --rn-topbar-height: 46px; }
.app-focus .app-topbar { padding: 0 .6rem; gap: .5rem; }
.app-focus .app-topbar .btn-icon { width: 34px; height: 34px; border-radius: 8px; }
.app-topbar-center {
    position: absolute; inset-inline: 6rem; text-align: center; pointer-events: none;
    font-size: 1.3rem; font-weight: 800; letter-spacing: 0;
}
/* Phones: the title keeps between the close button and the buttons on the other side (account, language, the offline
   dot), cut with … rather than running under them. */
@media (max-width: 575.98px) {
    .app-topbar-center { font-size: 1.1rem; inset-inline: 3.25rem 9.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* The back button (2026-11-03) beside the close button: the centred title keeps clear of both. */
@media (max-width: 575.98px) {
    .app-focus .app-topbar:has(.app-back:not([hidden])) .app-topbar-center { inset-inline-start: 5.6rem; }
}
.app-focus .app-content { max-width: none; padding: .5rem .75rem; }
@media (max-width: 991.98px) {
    .app-focus .app-content { padding: .5rem .5rem 0; }
}

/* ---------- document footer: totals and save always visible at the bottom ---------- */
.doc-footer {
    position: sticky; bottom: 0; z-index: 20;
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .10);
}
.doc-footer-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.5rem; }
.doc-footer .df-amount { width: 8rem; }
.doc-footer .df-cashbox { width: 10rem; }
.doc-footer-save { margin-inline-start: auto; min-width: 12rem; }
@media (max-width: 767.98px) {
    .doc-footer { bottom: 0; border-radius: 0; margin-inline: -.75rem; }
    .doc-footer-row { gap: .5rem .75rem; }
    .doc-footer .df-amount { width: 6.5rem; }
    .doc-footer .df-cashbox { width: 8rem; }
    .doc-footer-save { width: 100%; }
}

/* ---------- purchase page: compact ---------- */
/* The app-wide .form-control padding (.6rem) also hits the -sm controls; give them their real small size here. */
.doc-page .form-control-sm { padding: .25rem .5rem; }
.doc-page .form-select-sm { padding-top: .25rem; padding-bottom: .25rem; padding-inline-start: .5rem; }
.doc-page .doc-head .form-control, .doc-page .doc-head .form-select, .doc-page .pos-search .form-control { padding-top: .4rem; padding-bottom: .4rem; }
.doc-page .pos-search .form-control { font-size: 1rem; }
.doc-page .doc-head .btn-group .btn { padding-top: .4rem; padding-bottom: .4rem; }
/* 3: a slim heading row in a soft tint of the brand colour */
.doc-lines thead th {
    padding: .4rem .5rem; font-size: .8rem; font-weight: 700; white-space: nowrap;
    background: color-mix(in srgb, var(--rn-primary) 9%, var(--rn-surface)); color: var(--rn-primary);
    border-bottom: 2px solid color-mix(in srgb, var(--rn-primary) 25%, transparent);
}
.doc-lines thead th:first-child { border-start-start-radius: var(--rn-radius-sm); }
.doc-lines thead th:last-child { border-start-end-radius: var(--rn-radius-sm); }
/* 4: low rows */
.doc-lines tbody td { padding: .2rem .5rem; }
.doc-lines tbody .btn-sm { padding: .15rem .45rem; }

/* 1: transport / customs costs, one small line each */
.doc-page .cost-row { display: flex; align-items: center; gap: .3rem; padding: .3rem 0; border-bottom: 1px solid var(--rn-border); }
.doc-page .cost-row .form-control-sm, .doc-page .cost-row .form-select-sm { font-size: .8rem; min-height: 0; }
.doc-page .cost-row .cost-desc { flex: 1 1 5rem; min-width: 0; }
.doc-page .cost-row .cost-amount { flex: 0 0 5.5rem; }
.doc-page .cost-row .cost-select { flex: 0 1 7.5rem; min-width: 0; padding-inline-end: 1.6rem; background-position: left .4rem center; }
[dir="ltr"] .doc-page .cost-row .cost-select { background-position: right .4rem center; }
.doc-page .cost-row .btn-sm { padding: .1rem .4rem; font-size: .8rem; }

/* 2: the page fills the screen, so the totals bar sits at the bottom even when there are few lines */
.app-focus .app-content { display: flex; flex-direction: column; }
.doc-page { flex: 1; display: flex; flex-direction: column; }
.doc-page .doc-footer { margin-top: auto; }

/* 5: the line list scrolls in its own box; its heading row stays at the top of that box */
.doc-lines-scroll { overflow: auto; max-height: 55vh; }
.doc-lines thead th { position: sticky; top: 0; z-index: 2; }
.doc-costs-scroll { overflow-y: auto; max-height: 40vh; }
.doc-side { display: flex; flex-direction: column; gap: .5rem; }
/* The two cards beside the purchase lines: slim headings with small buttons. */
.doc-side > .card > .card-header { padding: .3rem .6rem; font-size: .875rem; min-height: 2.25rem; }
.doc-side > .card > .card-header .btn-sm { padding: .1rem .5rem; font-size: .75rem; }
/* ---------- purchase page on phones and upright tablets (below 992px), like Zoho / Odoo on a phone ---------- */
/* The lines are cards (a tap opens the line's window); the header folds behind one line; the footer keeps the total and
   Save on one line with the rest behind "Details"; the last purchases are in the line's window instead of beside it. */
.pc-list { display: flex; flex-direction: column; gap: .5rem; }
.pc-card {
    display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: start; padding: .6rem .8rem;
    border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm); background: var(--rn-surface); color: var(--rn-text);
}
.pc-card:active { background: color-mix(in srgb, var(--rn-primary) 6%, var(--rn-surface)); }
.pc-card.pos-row-new { animation: pos-flash .8s ease; }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.pc-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.pc-total { font-weight: 800; color: var(--rn-primary); white-space: nowrap; }
.pc-sub { font-size: .85rem; color: var(--rn-text-muted); }
.pc-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.pc-meta:empty { display: none; }
.dh-summary { display: flex; align-items: center; text-align: start; border: 1px solid var(--rn-border); font-size: .9rem; }
.dh-chevron { transition: transform .15s; }
.doc-head.dh-open .dh-chevron { transform: rotate(180deg); }
.df-toggle { font-size: .75rem; text-decoration: none; vertical-align: baseline; }
.doc-footer.df-open .df-toggle .bi { transform: rotate(180deg); display: inline-block; }
@media (min-width: 992px) { #pur-cards { display: none; } }
@media (max-width: 991.98px) {
    #purchase .doc-lines { display: none; }
    #purchase .doc-side > [data-field="lastPurchases"] { display: none !important; }
    #purchase .doc-head:not(.dh-open) .dh-more { display: none !important; }
    #purchase .doc-footer:not(.df-open) .df-more { display: none !important; }
    #purchase .doc-footer-row { align-items: center; }
    #purchase .doc-footer-save { width: auto; flex: 1 1 10rem; min-width: 0; }
    #purchase .doc-lines-scroll { max-height: none; }
}

/* A window that rises from the bottom on phones (a "sheet"); a normal window on wider screens. */
.sheet .form-control, .sheet .form-select { min-height: 2.6rem; }
.pl-stepper .btn { min-width: 2.75rem; }
.pl-stepper .form-control { font-weight: 700; }
.pl-total {
    display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; padding: .5rem .7rem;
    border-radius: var(--rn-radius-sm); background: color-mix(in srgb, var(--rn-primary) 7%, var(--rn-surface)); color: var(--rn-primary);
}
.pl-hist { margin-top: .75rem; }
.pl-hist-row { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--rn-border); font-size: .85rem; }
.pl-hist-row:last-child { border-bottom: 0; }
@media (max-width: 575.98px) {
    .modal.sheet .modal-dialog { position: fixed; inset-inline: 0; bottom: 0; margin: 0; width: 100%; max-width: none; }
    .modal.sheet.fade .modal-dialog { transform: translateY(100%); transition: transform .22s ease-out; }
    .modal.sheet.show .modal-dialog { transform: none; }
    .modal.sheet .modal-dialog-scrollable { height: auto; max-height: 92vh; }
    .modal.sheet .modal-content { border: 0; border-radius: 1rem 1rem 0 0; max-height: 92vh; }
    .sheet .form-control, .sheet .form-select { font-size: 16px; } /* iPhones zoom into smaller boxes */
}

/* ---------- quick purchase: the purchase page's picture view (like the sale page) ---------- */
#purchase.pur-mode-list #pur-browse { display: none !important; }
#purchase.pur-mode-grid .doc-lines-scroll, #purchase.pur-mode-grid .cols-dd { display: none !important; }
.pos-tab[data-tab="low"] i { color: #d92d20; }
.pos-tab.active[data-tab="low"] i { color: #ffd2cc; }
.pur-tile { cursor: pointer; }
.pur-tile.pos-tile-out .pos-tile-pic { opacity: 1; } /* nothing in stock is what a purchase is for: not dimmed */
.pur-tile-minus { /* left in every language: the count (a left-to-right .num) is always on the right */
    position: absolute; top: 6px; left: 6px; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
    border-radius: 999px; background: #fff; border: 1px solid var(--rn-border); color: var(--rn-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .14);
}
.pur-tile-minus[hidden] { display: none; }
.pur-lines-count {
    position: absolute; top: -.5rem; inset-inline-end: -.5rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .25rem;
    display: grid; place-items: center; border-radius: 999px; background: var(--rn-accent); color: #2b1a00; font-size: .7rem; font-weight: 800;
}
.pur-lines-count[hidden] { display: none; }

/* The camera window (barcode-scan.js): the camera's picture across the window, black around it. */
.scan-body { background: #000; }
.scan-view { width: 100%; min-height: 18rem; }
.scan-view video { width: 100% !important; height: auto !important; display: block; }
@media (max-width: 575.98px) { .scan-modal .modal-body { display: flex; align-items: center; } }

/* The search's items as a list or as pictures (purchase page). */
.pr-switch { position: sticky; top: 0; z-index: 2; display: flex; gap: .3rem; padding: .35rem; background: var(--rn-surface); border-bottom: 1px solid var(--rn-border); }
.pr-switch button { flex: 1; border: 1px solid var(--rn-border); background: transparent; border-radius: .45rem; padding: .25rem .5rem; font-size: .8rem; color: var(--rn-text); }
.pr-switch button.active { background: var(--rn-primary); border-color: var(--rn-primary); color: #fff; }
.pr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); gap: .45rem; padding: .45rem; background: var(--rn-surface); }

/* The item's last purchases: small; the invoice's day under its number. */
.hist-table { font-size: .8rem; }
.hist-table th { font-weight: 600; white-space: nowrap; }
/* Every table head sticks under the top bar; inside this box it sticks to the top of the box, and it is low. */
.app-content .doc-side .table.hist-table > thead > tr > th { top: 0; padding: .25rem .4rem; }
.hist-table td { white-space: nowrap; padding: .2rem .4rem; }
.hist-table .hist-party { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.hist-table .exp-chip { font-size: .72rem; }
/* Narrow: the supplier may wrap and the expiry chip loses its icon, so the price stays in view. */
@media (max-width: 575.98px), (min-width: 1200px) and (max-width: 1399.98px) {
    .app-content .doc-side .table.hist-table > thead > tr > th, .hist-table td { padding-inline: .25rem; }
    .hist-table .hist-party { white-space: normal; }
    .hist-table .exp-chip i { display: none; }
}
.hist-sub { display: block; font-size: .7rem; color: var(--bs-secondary-color); }
/* Return slip (Returns/Slip): columns with nothing in them close up; goods without an invoice in a box of their own. */
.rs-lines.rs-no-expiry .rs-col-expiry, .rs-lines.rs-no-free .rs-col-free, .rs-lines.rs-no-held .rs-col-held { display: none; }
.rs-sources { font-size: .85rem; }
.rs-sources td { white-space: nowrap; }
.rs-sources .rs-party-cell { white-space: normal; max-width: 12rem; }
.rs-loose { border: 1px dashed var(--rn-border); border-radius: var(--rn-radius-sm); padding: .5rem .6rem; }
/* A table head in a window sticks to the top of the window's own scroll box, not under the page's top bar. */
.app-content .modal .table > thead > tr > th { top: 0; }
.slip-cancelled td { text-decoration: line-through; color: #9ca3af; }
/* A document handed to someone (expired goods sent back): two lines to sign under it. */
.doc-view-sign { display: flex; gap: 3rem; margin-top: 3.5rem; }
.doc-view-sign > div { flex: 1; border-top: 1px solid var(--rn-text-muted); padding-top: .4rem; text-align: center; font-size: .85rem; color: var(--rn-text-muted); }
/* Phones: the window's invoices and the slip's lines are cards (doc-stack); a card's empty cell takes no room. */
@media (max-width: 767.98px) {
    .rs-sources.doc-stack td, .rs-lines.doc-stack td { white-space: normal; text-align: start !important; }
    .rs-sources.doc-stack td:empty, .rs-lines.doc-stack td:empty { display: none; }
    .rs-lines.doc-stack .dl-remove { display: flex; gap: .2rem; }
    .rs-lines.doc-stack .dl-item { padding-inline-end: 5rem; }
}
/* Wide screens: the purchase page is exactly one screen high - header on top, totals at the bottom,
   and the lines and costs share the middle, each scrolling by itself. */
@media (min-width: 1200px) {
    .app-focus .app-main:has(.doc-page) { height: 100vh; height: 100dvh; min-height: 0; }
    .app-focus .app-content:has(.doc-page) { min-height: 0; }
    .doc-page { min-height: 0; }
    .doc-page .doc-body { flex: 1; min-height: 0; }
    .doc-page .doc-body > [class*="col-"] { height: 100%; }
    .doc-page .doc-lines-body, .doc-page .doc-costs-body { display: flex; flex-direction: column; min-height: 0; }
    .doc-page .doc-body .card { min-height: 0; }
    .doc-page .doc-lines-scroll, .doc-page .doc-costs-scroll { flex: 1; max-height: none; min-height: 0; }
    /* The column beside the lines: the last purchases take the room (five rows), transport and customs below keep
       three rows (then they scroll); alone in the column, either takes it all. */
    .doc-page .doc-side > .card { flex: 1 1 0; display: flex; flex-direction: column; }
    .doc-page .doc-side > .card > .card-body { flex: 1; }
    .doc-page .doc-side > [data-field="costs"] { flex: 0 0 auto; }
    .doc-page .doc-side > [data-field="costs"] > .card-body { flex: none; height: calc(3 * var(--cost-row, 2.5rem) + 1rem); }
    .doc-page .doc-side:has(> [data-field="lastPurchases"].field-off) > [data-field="costs"] { flex: 1 1 0; }
    .doc-page .doc-side:has(> [data-field="lastPurchases"].field-off) > [data-field="costs"] > .card-body { flex: 1; height: auto; }
}

/* sale page: the quantity stepper in a table cell */
.doc-page .pos-qty .btn { padding: .15rem .45rem; }
.doc-page .pos-qty .form-control { padding: .2rem .3rem; min-width: 3rem; }

/* sale page: the save / print buttons */
.doc-footer-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767.98px) {
    .doc-footer-actions { width: 100%; }
    .doc-footer-actions #pos-save { flex: 1; }
}


/* ---------- invoice lists (sales, purchases, returns) ---------- */
.inv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 991.98px) { .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }
.inv-kpi {
    display: flex; align-items: center; gap: .75rem; padding: .55rem .9rem;
    background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: var(--rn-radius); box-shadow: var(--rn-shadow);
}
.inv-kpi-icon {
    display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 12px; font-size: 1.2rem;
    background: color-mix(in srgb, var(--rn-primary) 10%, transparent); color: var(--rn-primary);
}
.inv-kpi-good .inv-kpi-icon { background: #e7f6ee; color: #1e7b4a; }
.inv-kpi-warn .inv-kpi-icon { background: #fdf0e3; color: #b25e09; }
.inv-kpi-label { font-size: .8rem; color: var(--rn-text-muted); }
.inv-kpi-value { font-weight: 800; font-size: 1.15rem; line-height: 1.3; }
.inv-kpi-value small { font-size: .7rem; font-weight: 600; color: var(--rn-text-muted); }

/* The heading row stays just under the sticky top bar while the page scrolls. */
.inv-table-card { overflow: visible; }
.inv-table thead th {
    position: sticky; top: var(--rn-topbar-height); z-index: 5;
    padding: .65rem .75rem; font-size: .78rem; font-weight: 700; white-space: nowrap; letter-spacing: .01em;
    background: color-mix(in srgb, var(--rn-primary) 9%, var(--rn-surface)); color: var(--rn-primary);
    border-bottom: 2px solid color-mix(in srgb, var(--rn-primary) 25%, transparent);
}
.inv-table thead th:first-child { border-start-start-radius: var(--rn-radius); }
.inv-table thead th:last-child { border-start-end-radius: var(--rn-radius); }
.inv-table tbody td { padding: .4rem .75rem; border-color: var(--rn-border); }
.inv-table tbody tr:hover td { background: color-mix(in srgb, var(--rn-primary) 3%, transparent); }
.inv-table tbody tr:last-child td { border-bottom: 0; }
.inv-cancelled td, .inv-card.inv-cancelled { opacity: .62; }
.inv-cancelled .num.fw-bold { text-decoration: line-through; }

.inv-pill {
    display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.inv-pill-paid { background: #e7f6ee; color: #1e7b4a; }
.inv-pill-partial { background: #fff4d6; color: #8a5a00; }
.inv-pill-credit { background: #fdecec; color: #b42318; }
.inv-pill-cancelled { background: #eef0f2; color: #5b6470; }
.inv-pill-edited { background: #fff4d6; color: #8a5a00; }
.inv-pill-edited:hover { background: #ffe9a8; color: #6b4600; }

.inv-actions { display: inline-flex; gap: .25rem; }
.inv-act {
    width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; border-radius: 8px;
    color: var(--rn-text-muted); background: transparent; border: 1px solid transparent;
}
.inv-act:hover { color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 8%, transparent); border-color: color-mix(in srgb, var(--rn-primary) 20%, transparent); }
.inv-act-danger:hover { color: #b42318; background: #fdecec; border-color: #f6c9c5; }

/* tabs and the new-document button on one line */
.inv-tabs { display: flex; align-items: flex-end; gap: .75rem; border-bottom: 1px solid var(--bs-border-color); }
.inv-tabs .nav-tabs { border-bottom: 0; }
.inv-tabs .inv-new { margin-bottom: .3rem; }

/* free quantity (bonus) column: a soft green so it reads as "given", hidden when the business does not use it */
.doc-lines.no-bonus .col-bonus { display: none; }
.doc-lines.no-expiry .col-expiry { display: none; } /* expiry dates switched off for the business */
.doc-lines.no-expiry .col-batch, .doc-lines.no-batch .col-batch { display: none; } /* batch numbers part off (2026-11-05) */
.doc-lines .input-bonus { background: #f0faf4; border-color: #cfe9da; color: #1e7b4a; }
.doc-lines .input-bonus[readonly] { background: var(--bs-tertiary-bg); color: var(--rn-text-muted); }

/* ---------- picture point of sale ---------- */
.pos-mode-list .pos-browse, .pos-mode-list .pos-side, .pos-mode-list .pos-cart-button { display: none !important; }
.pos-mode-grid .pos-list { display: none !important; }
.pos-side { display: none; }
@media (min-width: 1200px) {
    .pos-mode-grid .pos-main { width: 66.6667%; }
    .pos-mode-grid .pos-side { display: block; height: 100%; }
    .pos-cart-button { display: none !important; }
}
.pos-mode-switch .btn.active { background: var(--rn-primary); border-color: var(--rn-primary); color: #fff; }

.pos-browse { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pos-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
.pos-tab {
    flex-shrink: 0; border: 1px solid var(--rn-border); background: var(--rn-surface); color: var(--rn-text);
    border-radius: 999px; padding: .25rem .85rem; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.pos-tab:hover { border-color: var(--rn-primary); color: var(--rn-primary); }
.pos-tab.active { background: var(--rn-primary); border-color: var(--rn-primary); color: #fff; }
.pos-tab[data-tab="fav"] i { color: #f5b301; }
.pos-tab.active[data-tab="fav"] i { color: #ffe08a; }
.pos-tab[data-tab="top"] i { color: #e8590c; }
.pos-tab.active[data-tab="top"] i { color: #ffc9a8; }

.pos-grid-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
@media (max-width: 1199.98px) { .pos-grid-scroll { overflow: visible; } }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .pos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } }

.pos-tile {
    display: flex; flex-direction: column; text-align: start; padding: 0; overflow: hidden;
    background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.pos-tile:hover { border-color: color-mix(in srgb, var(--rn-primary) 45%, transparent); box-shadow: 0 6px 16px rgba(16, 24, 40, .10); transform: translateY(-1px); }
.pos-tile:active { transform: scale(.97); }
.pos-tile-pic { position: relative; display: block; aspect-ratio: 3 / 2; background: #fff; }
.pos-tile-pic img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.pos-tile-initials { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.4rem; letter-spacing: .03em; }
.pos-tile-name { padding: .25rem .5rem 0; font-weight: 600; font-size: .8rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.pos-tile-price { padding: 0 .5rem .35rem; font-weight: 800; color: var(--rn-primary); font-size: .85rem; }
.pos-tile-stock {
    position: absolute; bottom: 6px; inset-inline-start: 6px; padding: 0 .4rem; border-radius: 999px;
    background: rgba(255, 255, 255, .9); border: 1px solid var(--rn-border); font-size: .7rem; color: var(--rn-text-muted);
}
.pos-tile-out .pos-tile-pic { opacity: .55; }
.pos-tile-out .pos-tile-stock { background: #fdecec; border-color: #f6c9c5; color: #b42318; font-weight: 700; }
.pos-tile-count {
    position: absolute; top: 6px; inset-inline-end: 6px; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem;
    display: grid; place-items: center; border-radius: 999px; background: var(--rn-primary); color: #fff;
    font-size: .8rem; font-weight: 800; box-shadow: 0 2px 6px rgba(17, 73, 135, .35);
}
.pos-tile-count[hidden] { display: none; }
@keyframes pos-bump { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }
.pos-bump { animation: pos-bump .25s ease; border-color: var(--rn-primary); }

/* the cart beside the grid, and the same list in the phone sheet */
.pos-cart-card { display: flex; flex-direction: column; min-height: 0; }
.pos-cart-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.pos-cline { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-bottom: 1px solid var(--rn-border); }
.pos-cline .item-thumb { width: 2.2rem; height: 2.2rem; }
.pos-cline-main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: start; background: none; border: 0; padding: 0; }
.pos-cline-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cline-sub { font-size: .75rem; color: var(--rn-text-muted); }
.pos-cline .pos-qty { width: 6.5rem; flex-shrink: 0; }
.pos-cline .pos-qty .btn { width: 1.7rem; padding: .1rem 0; }
.pos-cline .pos-qty .form-control { padding: .15rem .2rem; }
.pos-cline-total { width: 5rem; text-align: end; font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.pos-cline-remove { color: var(--rn-text-muted); padding: .1rem .3rem; }
.pos-cline-remove:hover { color: #b42318; }
@keyframes pos-flash { from { background: color-mix(in srgb, var(--rn-primary) 14%, transparent); } to { background: transparent; } }
.pos-cline-new { animation: pos-flash .8s ease; }
/* the lines table: the line just added (or added again) flashes */
.pos-row-new > td { animation: pos-flash .8s ease; }
.pos-cart-sheet { height: 70vh; border-radius: 16px 16px 0 0; }

.pos-quick-cash { display: flex; flex-wrap: wrap; gap: .3rem; align-self: flex-end; }
.pos-quick-cash:empty { display: none; }

/* tiles: the picture box keeps its 4:3 shape whatever the image's own size, so all tiles line up */
.pos-tile-pic { overflow: hidden; }
.pos-tile-pic img { position: absolute; inset: 0; }

/* sale page on phones: header in two short rows, footer as compact as it can be, so the tiles keep the screen */
@media (max-width: 767.98px) {
    #pos .doc-head .form-label { display: none !important; }
    #pos .doc-head .card-body { padding: .4rem .5rem; }
    #pos .doc-head .form-control, #pos .doc-head .form-select, #pos .doc-head .btn { padding-top: .35rem; padding-bottom: .35rem; font-size: .9rem; }
    #pos .doc-footer .card-body { padding: .35rem .5rem; }
    #pos .doc-footer-row { gap: .25rem .6rem; align-items: center; }
    #pos .doc-footer-row label, #pos .doc-footer-row .small { font-size: .7rem; line-height: 1.1; }
    #pos .doc-footer-row #pos-total { font-size: 1.15rem !important; }
    #pos .doc-footer .df-amount { width: 5.25rem; padding: .15rem .35rem; }
    #pos .pos-quick-cash { order: 5; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
    #pos .pos-quick-cash .btn { padding: .15rem .55rem; flex-shrink: 0; }
    #pos .doc-footer-actions { order: 6; gap: .35rem; }
    #pos .doc-footer-actions .btn-lg { padding: .4rem .75rem; font-size: 1rem; }
    #pos #pos-saved { width: 100%; order: -1; }
}

/* 1: cart line - price on its own line, the unit under it */
.pos-cline-price { font-size: .8rem; font-weight: 700; color: var(--rn-text); line-height: 1.2; text-align: start; }
.pos-cline-sub { line-height: 1.2; }
[dir="rtl"] .pos-cline-price { text-align: right; }

/* 2: the save / print buttons of the sale page a little smaller */
#pos .doc-footer-actions .btn-lg { padding: .5rem 1rem; font-size: 1rem; border-radius: var(--rn-radius-sm); }
#pos .doc-footer-actions #pos-save { padding-inline: 1.4rem; }

/* ---------- every list table: a coloured heading row that stays in view ---------- */
/* The heading sticks just under the top bar while the page scrolls. The document line tables (.doc-lines)
   scroll inside their own box and keep their own rule. */
.app-content .table:not(.doc-lines) > thead > tr > th {
    position: sticky; top: var(--rn-topbar-height); z-index: 5;
    --bs-table-bg: color-mix(in srgb, var(--rn-primary) 9%, var(--rn-surface));
    background: color-mix(in srgb, var(--rn-primary) 9%, var(--rn-surface));
    color: var(--rn-primary); font-size: .8rem; font-weight: 700; white-space: nowrap;
    padding-top: .6rem; padding-bottom: .6rem;
    border-bottom: 2px solid color-mix(in srgb, var(--rn-primary) 25%, transparent);
}
/* A scroll box around a table would hold the heading inside it; on wide screens the tables fit, so it can go. */
@media (min-width: 992px) {
    .app-content .table-responsive { overflow: visible; }
}
@media print {
    /* as specific as the sticky rule above, or the heading stays sticky on paper and covers the first row */
    .app-content .table:not(.doc-lines) > thead > tr > th { position: static; background: #fff; color: #000; }
}

/* ---------- a page of the app printed as it is (reports, statements, a document's view; 2026-11-07, body.rx-letter):
   no buttons or pager on paper, and the print design's letterhead and footer (_PrintLetterhead / _PrintLetterfoot) ---------- */
.print-letterhead, .print-letterfoot { display: none; }
@media print {
    .print-letterhead { display: block; margin-bottom: 2mm; font-size: 12.5px; line-height: 1.45; color: #1f2937; }
    .print-letterhead * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-letterhead .ia4-accent { margin: 4mm 0 2mm; }
    .print-letterfoot { display: block; }
    body.rx-letter .btn, body.rx-letter .btn-group, body.rx-letter .pagination { display: none !important; }
}

/* ---------- brand accent (Ranma amber) where something needs to catch the eye ---------- */
.btn-accent { --bs-btn-bg: var(--rn-accent); --bs-btn-border-color: var(--rn-accent); --bs-btn-color: #2b1a00;
    --bs-btn-hover-bg: var(--rn-accent-hover); --bs-btn-hover-border-color: var(--rn-accent-hover); --bs-btn-hover-color: #2b1a00;
    --bs-btn-active-bg: var(--rn-accent-hover); --bs-btn-active-border-color: var(--rn-accent-hover); font-weight: 700; }
.text-accent { color: var(--rn-accent-text) !important; }
/* the main "do it" buttons: sale save, new sale / purchase */
#pos-save, .inv-new { box-shadow: 0 4px 12px rgba(17, 73, 135, .22); }
/* counts on tiles and in the cart: amber, so the eye finds what is already chosen */
.pos-tile-count { background: var(--rn-accent); color: #2b1a00; box-shadow: 0 2px 6px rgba(249, 170, 51, .45); }
[data-cart-count].badge { background: var(--rn-accent) !important; color: #2b1a00 !important; }
.pos-tab.active[data-tab="fav"] i { color: var(--rn-accent); }

/* ---------- the business's own logo ---------- */
.logo-picker { position: relative; width: 9rem; flex-shrink: 0; }
.logo-frame {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    aspect-ratio: 3 / 2; margin: 0; overflow: hidden; cursor: pointer; padding: .4rem;
    border: 1px dashed var(--bs-border-color); border-radius: var(--rn-radius); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
}
.logo-frame:hover { border-color: var(--rn-primary); color: var(--rn-primary); }
.logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { display: flex; flex-direction: column; align-items: center; }
.logo-empty[hidden], .logo-frame img[hidden] { display: none; }
.logo-clear { position: absolute; top: .25rem; inset-inline-end: .25rem; padding: .1rem .35rem; }
/* receipts: the logo at the top, in black on thermal paper */
.receipt-logo { display: block; max-width: 48mm; max-height: 22mm; margin: 0 auto 2mm; object-fit: contain; }
@media print { .receipt-logo { filter: grayscale(1) contrast(1.2); } }

/* ---------- dashboard welcome banner ---------- */
.welcome {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.4rem; border-radius: var(--rn-radius); color: #fff;
    border: 1px solid color-mix(in srgb, var(--rn-primary) 60%, #000);
    background: linear-gradient(120deg, var(--rn-primary) 0%, var(--rn-sidebar) 100%);
    box-shadow: 0 8px 24px rgba(17, 73, 135, .22);
}
/* rings in the corner, echoing the logo */
.welcome::before, .welcome::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
    border: 14px solid rgba(255, 255, 255, .06);
}
.welcome::before { width: 220px; height: 220px; inset-inline-end: -60px; top: -90px; }
.welcome::after { width: 140px; height: 140px; inset-inline-end: 90px; bottom: -95px; border-color: rgba(249, 170, 51, .18); }
.welcome-avatar {
    flex-shrink: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 1.2rem; color: var(--rn-primary); background: #fff;
    box-shadow: 0 0 0 3px var(--rn-accent), 0 4px 12px rgba(0, 0, 0, .2);
}
.welcome-text { flex: 1; min-width: 0; position: relative; }
.welcome-greet { font-size: .85rem; opacity: .85; }
.welcome-name { font-size: 1.45rem; font-weight: 800; margin: .1rem 0; color: #fff; }
.welcome-sub { margin: 0; font-size: .85rem; opacity: .8; }
.welcome-date {
    position: relative; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem;
    border-radius: var(--rn-radius-sm); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(4px); white-space: nowrap;
}
.welcome-date i { font-size: 1.3rem; color: var(--rn-accent); }
.welcome-day { font-weight: 700; font-size: .9rem; }
.welcome-date .num { font-size: .8rem; opacity: .85; }
@media (max-width: 575.98px) {
    .welcome { flex-wrap: wrap; padding: 1rem; }
    .welcome-date { width: 100%; justify-content: center; }
    .welcome-name { font-size: 1.2rem; }
}

/* ---------- party form: section headers with an icon, role cards with a tick ---------- */
.pf-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem .25rem; }
.pf-head h2 { font-size: 1rem; font-weight: 800; margin: 0; }
.pf-head p { margin: 0; font-size: .8rem; color: var(--rn-text-muted); }
.pf-head-icon {
    width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.15rem;
    background: var(--rn-primary-soft); color: var(--rn-primary);
}
.pf-head-icon-accent { background: var(--rn-accent-soft); color: var(--rn-accent-text); }
.party-form .input-group-text { background: var(--bs-tertiary-bg); color: var(--rn-text-muted); }

.pf-roles .choice label { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; }
.pf-role-icon {
    width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; margin-bottom: .35rem;
    background: var(--bs-tertiary-bg); color: var(--rn-text-muted); transition: background .15s, color .15s;
}
.pf-roles .choice input:checked + label .pf-role-icon { background: var(--rn-primary); color: #fff; }
.pf-check { position: absolute; top: .65rem; inset-inline-end: .7rem; color: var(--rn-primary); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.pf-roles .choice input:checked + label .pf-check { opacity: 1; transform: scale(1); }
.pf-roles .choice label:hover { border-color: color-mix(in srgb, var(--rn-primary) 40%, var(--rn-border)); }

.pf-active { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem .9rem; border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm); background: var(--bs-tertiary-bg); }
.pf-active .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }

/* phones: the bottom menu covers the screen's last 64px, so a save bar that stays in view sits above it */
@media (max-width: 991.98px) {
    .app:not(.app-focus) .save-bar { bottom: calc(var(--rn-bottomnav-height) + env(safe-area-inset-bottom)); }
}

/* ---------- cash list ---------- */
.cash-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cash-chip {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px;
    background: var(--rn-surface); border: 1px solid var(--rn-border); box-shadow: var(--rn-shadow); font-size: .85rem;
}
.cash-chip > i { color: var(--rn-primary); }
.cash-kinds { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .1rem; }
.cash-kinds .pos-tab { text-decoration: none; }
/* stock documents: what each kind is worth, beside the kind tabs */
.stock-sums { display: flex; flex-wrap: wrap; gap: .4rem; }
.stock-sum { display: flex; flex-direction: column; justify-content: center; min-width: 6.5rem; padding: .2rem .7rem; line-height: 1.25;
    border: 1px solid var(--rn-border); border-radius: .6rem; background: var(--rn-surface); }
.stock-sum span { font-size: .72rem; color: var(--rn-text-muted); white-space: nowrap; }
.stock-sum b { font-size: .92rem; }
@media (max-width: 575.98px) { .stock-sums { width: 100%; } .stock-sum { flex: 1 1 0; min-width: 5.5rem; } }
/* stock document lines on phones: every line a card — the item on top (remove in its corner), the stock under it,
   then the fields two by two with their names (data-label) above them; 16px inputs so phones do not zoom in */
@media (max-width: 767.98px) {
    .doc-stack thead { display: none; }
    .doc-stack, .doc-stack tbody { display: block; }
    .doc-stack tr {
        position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem .6rem;
        padding: .65rem .75rem .75rem; margin-bottom: .6rem;
        border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm);
        background: color-mix(in srgb, var(--rn-primary) 3%, var(--rn-surface));
    }
    .doc-stack > :not(caption) > * > * { display: block; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
    .doc-stack td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: .2rem;
        font-size: .72rem; font-weight: 600; color: var(--rn-text-muted);
    }
    .doc-stack .dl-item { grid-column: 1 / -1; padding-inline-end: 2.5rem; font-size: .95rem; line-height: 1.35; }
    .doc-stack .dl-stock { grid-column: 1 / -1; margin-top: -.4rem; font-size: .82rem; text-align: start !important; }
    .doc-stack td.dl-stock::before { content: attr(data-label) ":"; display: inline; margin-inline-end: .3rem; font-size: inherit; }
    .doc-stack .dl-wide { grid-column: 1 / -1; }
    .doc-stack .dl-remove { position: absolute; top: .3rem; inset-inline-end: .3rem; }
    .doc-stack .dl-remove .btn { background: transparent; border-color: transparent; font-size: 1rem; }
    .doc-stack .form-control, .doc-stack .form-select { min-height: 2.5rem; font-size: 16px; }
    #stockdoc > .card > .card-body { padding: .75rem; }
}
@media (max-width: 575.98px) { #stockdoc .save-bar .btn { flex: 1; } }
/* the delivery note's save bar: the total and both buttons on one line; on phones the total above, the buttons side by side */
.dl-save-bar { flex-wrap: nowrap; }
@media (max-width: 575.98px) {
    .dl-save-bar { flex-wrap: wrap; }
    .dl-save-bar > .me-auto { flex-basis: 100%; }
    .dl-save-bar > .btn { flex: 1; }
}
.inv-kpi-bad .inv-kpi-icon { background: #fdecec; color: #b42318; }
.cash-type { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.cash-type-in { background: #e7f6ee; color: #1e7b4a; }
.cash-type-out { background: #fdecec; color: #b42318; }
.cash-type-move { background: var(--rn-primary-soft); color: var(--rn-primary); }
.cash-table tfoot td { background: color-mix(in srgb, var(--rn-primary) 5%, var(--rn-surface)); border-top: 2px solid color-mix(in srgb, var(--rn-primary) 25%, transparent); padding: .6rem .75rem; }

/* cash page: eight create buttons in one row on wide screens, a little tighter so they fit */
@media (min-width: 1200px) {
    .cash-actions .btn { padding: .45rem .75rem; font-size: .88rem; white-space: nowrap; }
}

/* ---------- money voucher form: the main facts in one row on wide screens ---------- */
.voucher-form .input-group-text { background: var(--bs-tertiary-bg); color: var(--rn-text-muted); }
.voucher-form .vf-amount { font-size: 1.15rem; font-weight: 700; }
@media (min-width: 1200px) {
    .voucher-form .vf-amount { width: 11rem; }
    .voucher-form .vf-currency { width: 6.5rem; }
    .voucher-form .vf-rate { width: 8rem; }
    .voucher-form .vf-date { width: 10rem; }
    .voucher-form .vf-cashbox { width: 11rem; }
    .voucher-form .col-xl { min-width: 14rem; }
}

/* ---------- items list ---------- */
.item-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.item-pill-service { background: #e0f2fe; color: #075985; }
.item-pill-muted { background: #eef0f2; color: #5b6470; }
.item-pill-model { background: var(--rn-primary-soft); color: var(--rn-primary); } /* a size and colour of a model */
/* The sale page's pictures: a model shows once, with a sizes mark; its window lists the sizes by colour. */
/* Cashiers' shifts (Cash/Shift, Cash/Shifts): the count boxes, count by notes, the report's totals; the sale page's pill. */
.inv-pill-open { background: #e7f6ee; color: #1e7b4a; }
.inv-pill-done { background: #eef1f5; color: #475467; }
.shift-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.shift-count .shift-counted { font-weight: 700; }
.shift-notes { display: grid; gap: .35rem; margin-top: .5rem; padding: .6rem; border: 1px solid var(--rn-border); border-radius: .6rem; background: #f8fafc; }
.shift-note { display: grid; grid-template-columns: 5.5rem 1fr 6.5rem; align-items: center; gap: .5rem; margin: 0; }
.shift-note-face { font-weight: 700; text-align: end; }
.shift-note-sum { color: var(--rn-text-muted); text-align: end; }
.shift-table td { padding-top: .45rem; padding-bottom: .45rem; }
.shift-table .shift-total td { font-weight: 800; border-top: 2px solid var(--rn-border); }
.shift-pill { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .35rem; padding: 0 .45rem; border-radius: 1rem;
    font-size: .7rem; font-weight: 700; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.shift-pill-on { background: #e7f6ee; color: #1e7b4a; }
.shift-pill-off { background: #fdf0e3; color: #b25e09; }
/* The printed X / Z report (Cash/ShiftPrint): sections, signature lines; A4 is the same strip, wider. */
.receipt .rc-section { font-weight: 800; border-bottom: 1px dashed #000; margin: 3mm 0 1mm; padding-bottom: .5mm; }
.receipt .rc-signs { display: flex; gap: 6mm; margin-top: 10mm; }
.receipt .rc-signs > div { flex: 1; border-top: 1px solid #000; padding-top: 1mm; text-align: center; font-size: 11px; }
.receipt.receipt-wide { width: 160mm; font-size: 14px; }
/* An alert with Bootstrap's d-flex (display: flex !important) ignored its hidden attribute: the quotation and purchase order
   banners showed empty on every sale and purchase. */
.alert[hidden] { display: none !important; }
/* Bootstrap's d-flex (!important) beat the hidden attribute: the size box, the restaurant's "Paid" row and others showed while hidden. */
.d-flex[hidden], .d-inline-flex[hidden] { display: none !important; }
/* Settings → Restaurant: an area's tables as small chips that open to edit. */
.rt-area { border-bottom: 1px solid var(--rn-border); padding-bottom: .25rem; margin-bottom: .75rem; }
.rt-area:last-child { border-bottom: 0; }
.rt-tables { display: flex; flex-wrap: wrap; gap: .4rem; }
.rt-table { border: 1px solid var(--rn-border); border-radius: .6rem; background: #fff; }
.rt-table > summary { list-style: none; cursor: pointer; padding: .3rem .65rem; }
.rt-table > summary::-webkit-details-marker { display: none; }
.rt-table[open] { flex-basis: 100%; }
.rt-table.rt-off { opacity: .5; }
.rt-table-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .4rem .65rem .6rem; }
.rt-table-form input[name=name] { max-width: 10rem; }
.rt-table-form input[name=seats] { width: 4rem; }

/* Restaurant floor (Restaurant/Index): a tile per table, its colour by its state; the counter's orders the same way. */
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
@media (max-width: 575.98px) { .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rf-table { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 6.2rem; padding: .6rem .75rem; border-radius: 14px;
    border: 2px solid var(--rn-border); background: #fff; text-align: start; color: inherit; text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.rf-table:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .10); transform: translateY(-1px); color: inherit; }
.rf-table:active { transform: scale(.97); }
.rf-name { font-weight: 800; font-size: 1.15rem; }
.rf-sub, .rf-time { font-size: .78rem; color: var(--rn-text-muted); }
.rf-total { font-weight: 700; margin-top: auto; }
.rf-free { border-color: #b7e4c7; background: #f3fbf6; }
.rf-free .rf-total { color: var(--rn-success); font-weight: 600; }
.rf-busy { border-color: #f9c784; background: #fff8ec; }
.rf-bill { border-color: #b8c7e8; background: #eef3fc; }


/* Restaurant order (Restaurant/Order): the menu beside the order on wide screens; on phones the order opens over the menu. */
.ro-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ro-title { display: flex; flex-direction: column; line-height: 1.2; margin-inline-end: .5rem; }
.ro-title > span { font-size: 1.15rem; }
.ro-body { display: flex; gap: 1rem; flex: 1; min-height: 0; }
.ro-menu { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ro-cats { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .4rem; scrollbar-width: thin; }
.ro-cats .pos-tab { flex: 0 0 auto; }
.ro-grid-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.ro-order { width: 25rem; flex: 0 0 25rem; display: flex; flex-direction: column; min-height: 0; padding: .75rem; }
.ro-lines { flex: 1; min-height: 6rem; overflow-y: auto; overflow-x: hidden; }
.ro-round { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--rn-text-muted); border-bottom: 1px solid var(--rn-border);
    padding: .35rem 0 .2rem; margin-top: .35rem; }
.ro-round-new { color: #b7791f; }
.ro-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px dashed var(--rn-border); }
.ro-line .ro-qty { font-weight: 700; min-width: 2rem; }
.ro-line .ro-name { min-width: 0; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ro-line .ro-name small { display: block; font-weight: 400; }
.ro-line .ro-amount { font-weight: 700; }
.ro-sent .ro-name, .ro-sent .ro-qty { color: var(--rn-text-muted); }
.ro-void .ro-name > div, .ro-void .ro-amount, .ro-void .ro-qty { text-decoration: line-through; opacity: .6; }
.ro-new { background: #fffbeb; }
.ro-step { width: auto; }
.ro-step .input-group-text { min-width: 2.2rem; justify-content: center; font-weight: 700; }
.ro-foot { border-top: 1px solid var(--rn-border); padding-top: .6rem; }
.ro-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ro-actions #ro-send { grid-column: 1 / -1; }
.ro-order-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
#ro-mod fieldset.ro-missing legend { color: var(--rn-danger); }
.ro-phone-bar { position: fixed; inset-inline: .75rem; bottom: .75rem; z-index: 1030; display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 1.1rem; border: 0; border-radius: 14px; background: var(--rn-primary); color: #fff; font-size: 1.05rem; box-shadow: 0 8px 22px rgba(17, 73, 135, .35); }
@media (min-width: 992px) {
    .app-focus .app-main:has(.ro) { height: 100vh; height: 100dvh; min-height: 0; }
    .app-focus .app-content:has(.ro) { min-height: 0; display: flex; flex-direction: column; }
    .ro { min-height: 0; }
}
@media (max-width: 991.98px) {
    .ro-body { display: block; }
    .ro-menu { padding-bottom: 5rem; }
    .ro-grid-scroll { overflow: visible; }
    .ro-order { display: none; }
    .ro-show-order .ro-order { display: flex; position: fixed; inset: 0; z-index: 1040; width: auto; border-radius: 0; }
    .ro-show-order .ro-phone-bar { display: none; }
}
/* Kitchen screen (Kitchen/Index): a card per order, round and station; its top edge by how long it waits, green when ready. */
.ks-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.ks-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; }
.ks-tabs .pos-tab { flex: 0 0 auto; }
.ks-n:not(:empty) { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; margin-inline-start: .25rem; border-radius: 999px;
    background: var(--rn-accent); color: #3b2500; font-size: .75rem; font-weight: 800; text-align: center; }
.ks-clock { font-weight: 800; font-size: 1.1rem; }
.ks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; align-items: start; }
.ks-ticket { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rn-border); border-top: 6px solid var(--rn-primary);
    border-radius: 12px; box-shadow: 0 2px 8px rgba(16, 24, 40, .06); overflow: hidden; }
.ks-ticket.ks-warn { border-top-color: var(--rn-accent); }
.ks-ticket.ks-late { border-top-color: var(--rn-danger); }
.ks-ticket.ks-late .ks-time { color: var(--rn-danger); }
.ks-ticket.ks-ready { border-top-color: var(--rn-success); background: #f3fbf6; }
.ks-head { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .75rem .45rem; border-bottom: 1px solid var(--rn-border); }
.ks-head-main { min-width: 0; }
.ks-head small { color: var(--rn-text-muted); }
.ks-where { font-weight: 800; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.ks-time { display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; }
.ks-time .num { font-size: 1.6rem; }
.ks-time small { font-size: .7rem; font-weight: 600; color: var(--rn-text-muted); }
.ks-station { padding: .25rem .75rem; font-size: .78rem; font-weight: 700; color: #9a3412; background: #fff7ed; }
.ks-lines { list-style: none; margin: 0; padding: .25rem 0; }
.ks-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: start; width: 100%; padding: .45rem .75rem; border: 0;
    background: transparent; text-align: start; color: inherit; font-size: 1.1rem; touch-action: manipulation; }
.ks-line:hover:not(:disabled) { background: #f6f8fb; }
.ks-qty { font-weight: 800; min-width: 2.2rem; }
.ks-item { font-weight: 700; overflow-wrap: anywhere; }
.ks-item small { display: block; font-size: .85rem; font-weight: 500; color: var(--rn-text-muted); }
.ks-note { display: block; font-style: normal; font-size: .9rem; font-weight: 700; color: var(--rn-danger); }
.ks-mark { font-size: 1.2rem; color: #c3cad5; }
.ks-cooking .ks-mark { color: #ea580c; }
.ks-done .ks-mark { color: var(--rn-success); }
.ks-done .ks-item, .ks-done .ks-qty { color: var(--rn-text-muted); text-decoration: line-through; }
.ks-void { opacity: .55; }
.ks-void .ks-item, .ks-void .ks-qty { text-decoration: line-through; }
.ks-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .55rem .75rem .7rem; margin-top: auto; border-top: 1px solid var(--rn-border); }
.ks-foot .btn:not(.btn-sm) { flex: 1; padding: .6rem; font-weight: 700; }
.ks-ready-note { flex: 1; font-weight: 700; color: var(--rn-success); }
.ks-empty { text-align: center; padding: 4rem 1rem; color: var(--rn-text-muted); }
.ks-empty i { font-size: 3rem; }
/* The floor and the order page: dishes the kitchen made, waiting to be taken to the guests. */
.rf-ready { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 999px; background: var(--rn-success); color: #fff;
    font-size: .75rem; font-weight: 800; animation: rf-ready-pulse 1.6s ease-in-out infinite; }
@keyframes rf-ready-pulse { 50% { box-shadow: 0 0 0 4px rgba(21, 128, 61, .25); } }
@media (prefers-reduced-motion: reduce) { .rf-ready { animation: none; } }
.ro-state { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.ro-state-cooking { color: #ea580c; }
.ro-state-ready { color: var(--rn-success); }
.ro-ready-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; margin-bottom: .4rem; border-radius: 10px;
    background: var(--rn-success-soft); color: var(--rn-success); font-weight: 700; }
/* Deliveries (phase 6b): the order page's delivery card, the floor's state on a counter tile, and Restaurant/Deliveries. */
.ro-delivery { display: flex; flex-direction: column; gap: .4rem; padding: .5rem .6rem; margin-bottom: .5rem; border: 1px solid var(--rn-border); border-radius: 10px; background: #f8fafc; }
.ro-d-main { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; border: 0; background: transparent; padding: 0; text-align: start; color: inherit; }
.ro-d-where { font-weight: 700; }
.ro-d-address { overflow-wrap: anywhere; }
.ro-d-status, .dl-status { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: #e2e8f0; color: #334155; }
.ro-d-s1, .dl-s1 .dl-status { background: #fff3d6; color: #8a5a00; }
.ro-d-s2, .dl-s2 .dl-status { background: #dbeafe; color: #1e40af; }
.ro-d-s3, .dl-s3 .dl-status { background: var(--rn-success-soft); color: var(--rn-success); }
.ro-d-steps { display: flex; flex-wrap: wrap; gap: .4rem; }
.ro-fee .ro-name, .ro-fee .ro-qty { color: var(--rn-text-muted); }
.rf-delivery { font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: #fff3d6; color: #8a5a00; }
.rf-delivery.rf-d2 { background: #dbeafe; color: #1e40af; }
.rf-delivery.rf-d3 { background: var(--rn-success-soft); color: var(--rn-success); }
.dl-drivers { display: flex; flex-wrap: wrap; gap: .5rem; }
.dl-driver { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .8rem; border: 1px solid var(--rn-border); border-radius: 12px; background: #fff; min-width: 12rem; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .75rem; align-items: start; }
@media (max-width: 575.98px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }
.dl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rn-border); border-top: 5px solid #f9c784; border-radius: 12px; overflow: hidden; }
.dl-card.dl-s2 { border-top-color: #93c5fd; }
.dl-card.dl-s3 { border-top-color: #86efac; }
.dl-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--rn-border); }
.dl-body { padding: .5rem .75rem; }
.dl-address { overflow-wrap: anywhere; }
.dl-foot { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .5rem .75rem; border-top: 1px solid var(--rn-border); background: #fafbfc; }
/* A split bill (Restaurant/Order's pay window): the dishes paid now, and each guest's share. */
.ro-pay-lines { max-height: 16rem; overflow-y: auto; border: 1px solid var(--rn-border); border-radius: 10px; padding: 0 .5rem; }
.ro-pay-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--rn-border); }
.ro-pay-line:last-child { border-bottom: 0; }
.ro-pay-line .ro-name { font-weight: 600; overflow-wrap: anywhere; }
.ro-pay-line .ro-amount { min-width: 4.5rem; text-align: end; font-weight: 700; }
.ro-pay-on { background: #f3fbf6; }
.ro-split { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--rn-border); }
.ro-state-paid { color: var(--rn-success); }
/* Waiters (phase 6b): "My tables" hides the tables others serve; a sent dish's actions (one more, take off). */
.rf-mine-on .rf-theirs { display: none !important; }
.ro-line-acts { display: inline-flex; gap: .25rem; }
/* The sale page's loyalty points: the customer's points as a button; spent, it shows what they took off. */
.pos-points-btn { white-space: nowrap; font-weight: 600; }
/* The dashboard's "Needs attention today" (_TodayAlerts): a tile per alert, its colour by how pressing it is. */
.today-head { font-weight: 700; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.today-head > .bi { color: var(--rn-accent); }
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.today-item { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; min-height: 3.6rem; border-radius: .75rem;
    background: #fff; border: 1px solid var(--rn-border); border-inline-start-width: 4px; color: inherit; text-decoration: none;
    transition: box-shadow .15s, transform .15s; }
.today-item:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); transform: translateY(-1px); color: inherit; }
.today-icon { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; }
.today-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.today-title { font-weight: 600; }
.today-detail { font-size: .82rem; color: var(--rn-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-go { color: var(--rn-text-muted); }
.today-danger { border-inline-start-color: var(--rn-danger); }
.today-danger .today-icon { background: #fdecec; color: var(--rn-danger); }
.today-warn { border-inline-start-color: var(--rn-accent); }
.today-warn .today-icon { background: #fff4e0; color: #b7791f; }
.today-info { border-inline-start-color: var(--rn-primary); }
.today-info .today-icon { background: #e8f0fa; color: var(--rn-primary); }
.today-clear { display: flex; align-items: center; gap: .5rem; color: var(--rn-success); font-weight: 600; padding: .25rem 0; }
.today-grid .placeholder.today-item { border: 0; }
/* Installments (Sales/Installments, Sales/Installment): a thin paid bar, late rows tinted. */
.inst-progress { height: 6px; min-width: 5rem; border-radius: 3px; background: var(--rn-border, #e5e7eb); overflow: hidden; }
.inst-progress-bar { height: 100%; background: var(--rn-success); }
.inst-schedule tr.inst-late > td { background: #fdf0f0; }
/* Change history (Items/History, Parties/History): one line per field, the old value struck through. */
.history-field { line-height: 1.6; }
.history-from { color: var(--rn-text-muted); text-decoration: line-through; }
.history-to { font-weight: 600; }
/* Promotions: a small tag with the promotion's name on a sale line, and on the promotions list. */
.promo-chip { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .45rem; border-radius: 1rem; background: #fdf0e3; color: #b25e09;
    font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
/* The wholesale price (2026-10-26): a line priced at a level, or one whose item has no price there (retail); the sale's switch. */
.level-chip { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .45rem; border-radius: 1rem; background: var(--rn-primary-soft);
    color: var(--rn-primary); font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.level-chip-none { background: #f1f3f5; color: var(--rn-text-muted); font-weight: 600; }
/* The sale table: a "Retail / Wholesale" button beside each line's price (whoever may sell at levels; a click takes the next). */
.pos-price-group .pos-price { min-width: 5.5rem; } /* a table cell sized by its content would squeeze it to nothing */
.pos-level-line { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem; padding: 0 .55rem; font-size: .75rem; font-weight: 700;
    white-space: nowrap; border: 1px solid var(--bs-border-color); }
.pos-level-line.lvl-retail { background: #f8f9fa; color: var(--rn-text-muted); }
.pos-level-line.lvl-on { background: var(--rn-primary-soft); color: var(--rn-primary); border-color: color-mix(in srgb, var(--rn-primary) 25%, transparent); }
.pos-level-line.lvl-none { background: #f1f3f5; color: var(--rn-text-muted); border-style: dashed; }
.pos-level-line:hover { filter: brightness(.95); }
/* IMEI / serial numbers (2026-10-28): a line's pieces as chips, the button that opens their window, the window's list. */
.sn-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; align-items: center; }
.sn-chip { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .15rem 0 .45rem; border-radius: 1rem; background: #eef2f7;
    color: var(--rn-text); font-size: .74rem; line-height: 1.5; }
.sn-x { border: 0; background: none; color: var(--rn-text-muted); padding: 0 .3rem; line-height: 1; font-size: .9rem; }
.sn-x:hover { color: var(--bs-danger); }
.sn-pick-btn { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; font-size: .74rem; font-weight: 700; border-radius: 1rem;
    border: 1px dashed color-mix(in srgb, var(--rn-primary) 45%, transparent); color: var(--rn-primary); background: var(--rn-primary-soft); }
td > .sn-pick-btn { margin-inline-start: .4rem; }
.sn-pick-btn.sn-missing { border-color: var(--bs-danger); color: var(--bs-danger); background: #fdf0f0; }
/* Real weight of each piece (2026-11-07): the line's pieces and weight, a button that opens the weights window (red while the weight is missing). */
.cw-chips { margin-top: .2rem; }
.cw-open { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .55rem; font-size: .74rem; font-weight: 700; border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--rn-primary) 40%, transparent); color: var(--rn-primary); background: var(--rn-primary-soft); }
.cw-open.cw-missing { border-style: dashed; border-color: var(--bs-danger); color: var(--bs-danger); background: #fdf0f0; }
.pos-cline .cw-chips, .pc-card .cw-chips { margin-top: 0; flex-shrink: 0; }
#cw-rows .cw-n { min-width: 1.8rem; text-align: end; }
/* Batch numbers (2026-11-05): the lots a sale line takes, the batch box on purchases and opening stock. */
.lot-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; align-items: center; }
.lot-chip { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; border-radius: 1rem; background: #eef6f0;
    color: #1d5b33; font-size: .74rem; line-height: 1.5; white-space: nowrap; }
.lot-chip.lot-past { background: #fdf0f0; color: var(--bs-danger); }
.lot-chip.lot-none { background: #f3f4f6; color: var(--rn-text-muted); }
.lot-pick-btn { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; font-size: .74rem; font-weight: 700; border-radius: 1rem;
    border: 1px dashed color-mix(in srgb, var(--rn-primary) 45%, transparent); color: var(--rn-primary); background: var(--rn-primary-soft); }
.lot-pick-btn.lot-chosen { border-style: solid; }
.batch-chip { display: inline-flex; align-items: center; padding: 0 .45rem; border-radius: 1rem; background: #eef6f0; color: #1d5b33; font-size: .74rem; }
.batch-input { text-transform: uppercase; }
.lot-table td, .lot-table th { white-space: nowrap; }
/* An old debt stops credit sales (2026-11-05): beside the customer box on the sale page. */
.pos-overdue { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 1rem; background: #fdf0f0; color: var(--bs-danger);
    font-size: .74rem; font-weight: 700; white-space: nowrap; }
/* Inside its window the heading stays at the window's top (the lists' sticky heading sits under the top bar and hid the first lot). */
.app-content .table.lot-table > thead > tr > th, .table.lot-table > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.sn-list { max-height: 50vh; overflow: auto; }
.sn-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-bottom: 1px solid var(--bs-border-color); }
.sn-row:last-child { border-bottom: 0; }
.sn-pick { cursor: pointer; margin: 0; }
.sn-pick:hover { background: #f6f8fb; }
.sn-no { width: 1.8rem; color: var(--rn-text-muted); font-size: .8rem; }
.sn-imei { flex: 1; font-weight: 600; letter-spacing: .02em; }
.sn-imei small { color: var(--rn-text-muted); font-weight: 400; }
/* The tag beside the name only while the price column (and its button) is hidden. */
.doc-lines:not([data-hide~="price"]) .level-chip-alt { display: none; }
.pos-level .btn { white-space: nowrap; }
.pos-level .btn:disabled.active { opacity: 1; }
.input-wholesale::placeholder { color: #b8c2cf; }
.promo-item { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .6rem; border-radius: 1rem;
    background: var(--rn-primary-soft); font-size: .85rem; }
.promo-item .btn-close { font-size: .55rem; }
/* An exchange on the sale page: the search turns red while taking goods back; what comes back is listed above the totals. */
.pos-search-return .input-group-text, .pos-search-return .form-control { border-color: #d92d20; }
.pos-search-return .input-group-text { background: #fdecec; color: #b42318; }
.pos-returns { border: 1px solid #f5c2c0; background: #fff7f6; border-radius: .6rem; padding: .35rem .6rem; margin-bottom: .5rem; }
.pos-returns-head { font-size: .78rem; font-weight: 800; color: #b42318; margin-bottom: .2rem; }
#pos-returns-list { max-height: 7.5rem; overflow-y: auto; }
.pos-return-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .2rem 0; border-top: 1px dashed #f5c2c0; }
.pos-return-row:first-child { border-top: 0; }
.pos-return-name { flex: 1 1 12rem; min-width: 0; }
.pos-return-name small { margin-inline-start: .35rem; }
.pos-return-qty { width: 7.5rem; flex-wrap: nowrap; }
/* A scale's label found in the sale page's search: the weight it brings. */
.scale-chip { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .4rem; padding: 0 .4rem; border-radius: 1rem;
    background: var(--rn-primary-soft); color: var(--rn-primary); font-weight: 700; font-size: .75rem; }
.pos-tile-sizes { position: absolute; bottom: .3rem; right: .3rem; /* the stock (a left-to-right number) is bottom left */ display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border-radius: .45rem; background: var(--rn-primary); color: #fff; font-size: .8rem; }
.pv-colour { font-weight: 800; margin: .5rem .25rem .3rem; }
.pv-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .4rem; }
.pv-size { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem .25rem; border: 1.5px solid var(--rn-border);
    border-radius: .6rem; background: var(--rn-surface); font-weight: 800; font-size: 1.05rem; }
.pv-size:hover, .pv-size:focus-visible { border-color: var(--rn-primary); background: var(--rn-primary-soft); }
.pv-size-stock { font-size: .72rem; font-weight: 600; color: var(--rn-text-muted); }
.pv-size.pv-out { opacity: .5; }
.stock-pill { display: inline-block; min-width: 3rem; padding: .15rem .6rem; border-radius: 999px; font-weight: 700; font-size: .85rem; text-align: center; }
.stock-ok { background: #e7f6ee; color: #1e7b4a; }
.stock-low { background: #fff4d6; color: #8a5a00; }
.stock-out { background: #fdecec; color: #b42318; }
a.inv-kpi:hover { border-color: color-mix(in srgb, var(--rn-primary) 35%, var(--rn-border)); }
.min-w-0 { min-width: 0; }
/* a row button that cannot be used (a used item's delete): faint, without the disabled-button frame */
.inv-act:disabled, .inv-act.disabled { border-color: transparent; background: transparent; opacity: .3; }
/* the code is a left-to-right number: keep it centred in its cell all the same */
.item-code .num { text-align: center; }

/* ---------- list pages that fit the screen: only the rows scroll ---------- */
@media (min-width: 992px) {
    .app-main:has(.list-page) { height: 100vh; height: 100dvh; min-height: 0; }
    .app-content:has(.list-page) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: .75rem; }
    .list-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .list-page > * { flex-shrink: 0; }
    /* a filter form is also a .card-body (flex: 1 1 auto): only the list may take the free height of a short list */
    .list-page > :not(.list-fill) { flex-grow: 0; }
    .list-page > .list-fill { flex: 1 1 auto; min-height: 0; overflow: auto; }
    /* inside its own scroll box the heading sticks to the box's top, the totals to its bottom */
    .app-content .list-page .list-fill .table > thead > tr > th { top: 0; }
    .list-page .list-fill tfoot td { position: sticky; bottom: 0; z-index: 4; }
}

/* ---------- profit and loss ---------- */
.pl-table td { padding: .6rem .25rem; border-color: var(--rn-border); }
.pl-subtotal td { font-weight: 800; background: color-mix(in srgb, var(--rn-primary) 5%, transparent); }
.pl-total td { font-weight: 800; font-size: 1.15rem; border-bottom: 0; }
.pl-total-good td { background: #e7f6ee; color: #14532d; }
.pl-total-bad td { background: #fdecec; color: #7f1d1d; }
.pl-total td:first-child { border-start-start-radius: var(--rn-radius-sm); border-end-start-radius: var(--rn-radius-sm); }
.pl-total td:last-child { border-start-end-radius: var(--rn-radius-sm); border-end-end-radius: var(--rn-radius-sm); }
/* Statements (balance sheet, cash flow): section headings, breakdown rows, plain totals, links to the detail report. */
.pl-total-plain td { background: color-mix(in srgb, var(--rn-primary) 9%, transparent); color: var(--rn-primary); }
.pl-section td { padding-top: 1rem; border-bottom: 0; font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--rn-text-muted); }
.pl-section:first-child td { padding-top: .35rem; }
.pl-section-hint { font-weight: 500; margin-inline-start: .35rem; }
.pl-sub td { font-size: .82rem; color: var(--rn-text-muted); padding-top: .3rem; padding-bottom: .3rem; }
.pl-link { color: inherit; text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--rn-primary) 40%, transparent); }
.pl-link:hover { color: var(--rn-primary); border-bottom-style: solid; }
.pl-empty td { font-size: .82rem; color: var(--rn-text-muted); font-style: italic; }
/* bar list: thin bars, rounded ends, recessive track; values in text ink, never in the bar colour */
.pl-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.pl-bar-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .3rem; font-size: .88rem; }
.pl-bar-value { font-weight: 700; white-space: nowrap; }
.pl-bar-value small { color: var(--rn-text-muted); font-weight: 600; margin-inline-start: .35rem; }
.pl-track { height: 10px; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.pl-fill { height: 100%; border-radius: 999px; background: var(--rn-primary); min-width: 2px; }
.pl-fill-good { background: #1e7b4a; }
.pl-fill-bad { background: #b42318; }
.pl-bars-total { padding-top: .9rem; border-top: 1px dashed var(--rn-border); }

/* ---------- roles ---------- */
/* One tint per level, the same everywhere: nothing (grey), own (amber), branches (blue), whole business (green). */
.role-level, .role-chip { --lvl-bg: var(--bs-tertiary-bg); --lvl-fg: var(--rn-text-muted); }
.role-level[data-level="1"], .role-chip[data-level="1"] { --lvl-bg: #fff4dc; --lvl-fg: #8a5300; }
.role-level[data-level="2"], .role-chip[data-level="2"] { --lvl-bg: #e6eef8; --lvl-fg: #114987; }
.role-level[data-level="3"], .role-chip[data-level="3"] { --lvl-bg: #e7f6ee; --lvl-fg: #14532d; }
.role-level { background-color: var(--lvl-bg); color: var(--lvl-fg); font-weight: 700; border-color: transparent; min-width: 9.5rem; }
.role-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--lvl-bg); color: var(--lvl-fg); white-space: nowrap; }
.role-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.role-matrix thead th { font-size: .82rem; white-space: nowrap; }
.role-matrix tbody th { font-weight: 700; white-space: nowrap; }
.role-matrix td, .role-matrix th { padding: .45rem .5rem; border-color: var(--rn-border); }
.role-special, .role-pick { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm); cursor: pointer; height: 100%; margin: 0; }
.role-special:has(input:checked), .role-pick:has(input:checked) { border-color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 6%, transparent); }
.role-pick .form-check-input { margin: 0; flex-shrink: 0; }
.role-card-name { font-size: 1.05rem; font-weight: 800; margin: 0; }
.role-views { list-style: none; padding: 0; margin: .75rem 0; display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; }
.role-views li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.role-badge { background: color-mix(in srgb, var(--rn-primary) 10%, transparent); color: var(--rn-primary); font-weight: 700; }

/* ---------- user form ---------- */
.d-contents { display: contents; }
.user-switch, .user-branch { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm); cursor: pointer; margin: 0; min-height: calc(1.5em + .75rem + 2px); white-space: nowrap; }
.user-switch { width: 100%; }
.user-branches { display: flex; flex-wrap: wrap; gap: .5rem; }
.user-branch:has(input:checked) { border-color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 6%, transparent); color: var(--rn-primary); font-weight: 600; }

/* ---------- user profile ---------- */
.min-w-0 { min-width: 0; }
.user-hero { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--rn-radius);
    background: linear-gradient(120deg, var(--rn-primary), var(--rn-sidebar)); color: #fff; box-shadow: 0 6px 18px rgba(17, 73, 135, .18); }
.user-avatar { flex-shrink: 0; width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem;
    color: var(--rn-primary); background: #fff; box-shadow: 0 0 0 3px var(--rn-accent); }
.user-hero-name { font-size: 1.3rem; font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-hero-sub { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; opacity: .95; }
.user-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.user-pill-on { background: #d1fadf; color: #14532d; }
.user-pill-off { background: rgba(255, 255, 255, .2); color: #fff; }
.user-pill-owner { background: var(--rn-accent); color: #3b2500; }
.user-hero-stats { display: flex; gap: .5rem; }
.user-hero-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; padding: .35rem .6rem; border-radius: var(--rn-radius-sm);
    background: rgba(255, 255, 255, .12); }
.user-hero-stats span { font-size: 1.25rem; font-weight: 800; }
.user-hero-stats small { font-size: .72rem; opacity: .85; }
.role-option { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm);
    cursor: pointer; margin: 0; height: 100%; transition: border-color .15s, background-color .15s; }
.role-option > .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.role-option-icon { flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--bs-tertiary-bg); color: var(--rn-text-muted); }
.role-option-tick { color: var(--rn-border); font-size: 1.2rem; }
.role-option:has(input:checked) { border-color: var(--rn-primary); background: color-mix(in srgb, var(--rn-primary) 6%, transparent); }
.role-option:has(input:checked) .role-option-icon { background: var(--rn-primary); color: #fff; }
.role-option:has(input:checked) .role-option-tick { color: var(--rn-primary); }
.role-option:has(input:focus-visible) { outline: 2px solid var(--rn-primary); outline-offset: 2px; }
.access-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.access-list li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px dashed var(--rn-border); font-size: .88rem; }
.access-list li.access-off .access-name { color: var(--rn-text-muted); }
.access-name { flex-grow: 1; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.access-acts { display: inline-flex; gap: .3rem; }
.access-act { color: var(--rn-border); font-size: .95rem; }
.access-act.on { color: var(--rn-primary); }
.access-level { min-width: 6.5rem; justify-content: center; }
.access-specials { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.access-special { display: none; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
    background: color-mix(in srgb, var(--rn-primary) 10%, transparent); color: var(--rn-primary); }
.access-special.on { display: inline-flex; gap: .25rem; align-items: center; }
@media (max-width: 575.98px) {
    .user-hero { flex-wrap: wrap; }
    .user-hero-stats { width: 100%; }
    .user-hero-stats > div { flex: 1; }
}

/* ---------- sign-in: split screen ---------- */
.auth-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: #fff; }
@media (min-width: 992px) { .auth-split { grid-template-columns: minmax(460px, 44%) 1fr; } }
.auth-pane { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1rem; min-height: 100vh; min-height: 100dvh; }
@media (min-width: 576px) { .auth-pane { padding: 1.75rem 3rem 1.25rem; } }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth-top-logo img { height: 46px; width: auto; }
.auth-top .lang-switch .btn { border-radius: 999px !important; border: 0; font-weight: 600; padding: .3rem .8rem; }
.auth-top .lang-switch { background: var(--bs-tertiary-bg); border-radius: 999px; padding: .2rem; gap: .1rem; }
.auth-top .lang-switch .btn-outline-primary { color: var(--rn-text-muted); background: transparent; }
.auth-top .lang-switch .btn-outline-primary:hover { color: var(--rn-primary); background: #fff; }
.auth-form { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin: 2rem auto; }
.auth-heading { margin-bottom: 1.75rem; }
.auth-hello { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
    background: var(--rn-accent-soft); color: var(--rn-accent-text); margin-bottom: .75rem; }
.auth-heading h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 .35rem; letter-spacing: -.01em; }
.auth-heading p { color: var(--rn-text-muted); margin: 0; }
.auth-fields .form-label { font-weight: 600; font-size: .9rem; }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > .bi { position: absolute; inset-inline-start: .95rem; color: var(--rn-text-muted); font-size: 1.05rem; pointer-events: none; }
.auth-input .form-control { height: 3.1rem; padding-inline: 2.75rem; border-radius: .7rem; border: 1.5px solid var(--rn-border); background: #fff; font-size: 1rem; }
.auth-input .form-control:focus { border-color: var(--rn-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rn-primary) 14%, transparent); }
.auth-input:focus-within > .bi { color: var(--rn-primary); }
/* A list in the same style (the type of business): the icon on one side, the arrow on the other. */
.auth-input .form-select { height: 3.1rem; padding-inline-start: 2.75rem; border-radius: .7rem; border: 1.5px solid var(--rn-border); font-size: 1rem; }
.auth-input .form-select:focus { border-color: var(--rn-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rn-primary) 14%, transparent); }
.auth-input .form-control[type="password"], .auth-input:has(.auth-eye) .form-control { padding-inline-end: 3rem; }
.auth-eye { position: absolute; inset-inline-end: .4rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: .5rem; background: transparent; color: var(--rn-text-muted); }
.auth-eye:hover { background: var(--bs-tertiary-bg); color: var(--rn-primary); }
.auth-caps { color: #8a5300; }
.auth-submit { height: 3.2rem; border-radius: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--rn-primary) 28%, transparent); transition: transform .12s, box-shadow .12s; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--rn-primary) 34%, transparent); }
.auth-submit.is-busy { pointer-events: none; opacity: .85; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; color: var(--rn-text-muted); font-size: .82rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--rn-border); }
.auth-alt { height: 3rem; border-radius: .7rem; font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.auth-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--rn-text-muted); }
.auth-foot-secure { display: inline-flex; align-items: center; gap: .3rem; }

.auth-hero { display: none; position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #155ba6 0%, var(--rn-primary) 40%, var(--rn-sidebar) 100%); }
@media (min-width: 992px) { .auth-hero { display: flex; align-items: center; justify-content: center; } }
.auth-hero-glow { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px 420px at 85% 10%, rgba(249, 170, 51, .35), transparent 70%),
                radial-gradient(520px 520px at 10% 95%, rgba(255, 255, 255, .12), transparent 70%); }
.auth-hero::after { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12);
    inset-inline-end: -220px; bottom: -260px; box-shadow: 0 0 0 70px rgba(255, 255, 255, .03), 0 0 0 140px rgba(255, 255, 255, .025); }
.auth-hero-inner { position: relative; z-index: 1; max-width: 520px; padding: 3rem; }
.auth-hero-logo { height: 64px; width: auto; margin-bottom: 2.25rem; }
.auth-hero h2 { font-size: 2.1rem; font-weight: 800; line-height: 1.35; margin-bottom: .75rem; }
.auth-hero p { font-size: 1.05rem; opacity: .85; margin-bottom: 1.75rem; }
.auth-features { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; }
.auth-features li { display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.auth-features li span { width: 2.2rem; height: 2.2rem; border-radius: .6rem; display: grid; place-items: center; flex-shrink: 0;
    background: rgba(255, 255, 255, .12); color: var(--rn-accent); }
.auth-glimpse { padding: 1rem 1.1rem; border-radius: 1rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); max-width: 360px; }
.auth-glimpse-head { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; margin-bottom: .75rem; }
.auth-glimpse-up { color: #9fe0b8; font-weight: 800; }
.auth-glimpse-bars { display: flex; align-items: flex-end; gap: .4rem; height: 70px; }
.auth-glimpse-bars span { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, .35); }
.auth-glimpse-bars span:last-child { background: var(--rn-accent); }

/* ---------- create a business (same split screen as sign-in) ---------- */
@media (min-width: 992px) {
    .auth-split:has(.auth-form-wide) { grid-template-columns: minmax(560px, 52%) 1fr; }
    .auth-hero { position: sticky; top: 0; height: 100vh; height: 100dvh; }
}
.auth-form.auth-form-wide { max-width: 560px; }
.setup-steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; gap: .5rem; counter-reset: none; }
.setup-steps li { flex: 1; display: flex; align-items: center; gap: .45rem; padding-bottom: .55rem; font-size: .82rem; font-weight: 700;
    color: var(--rn-text-muted); border-bottom: 3px solid var(--rn-border); transition: color .2s, border-color .2s; }
.setup-steps li span, .setup-title span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    font-size: .8rem; font-weight: 800; background: var(--bs-tertiary-bg); color: var(--rn-text-muted); transition: background .2s, color .2s; }
.setup-steps li.is-done { color: var(--rn-primary); border-color: var(--rn-primary); }
.setup-steps li.is-done span, .setup-section.is-done .setup-title span { background: var(--rn-primary); color: #fff; }
.setup-section { padding: 1.1rem 0; border-top: 1px dashed var(--rn-border); }
.setup-section:first-of-type { border-top: 0; padding-top: 0; }
.setup-title { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; font-size: 1.02rem; font-weight: 800; margin-bottom: .85rem; }
.setup-title small { flex-basis: 100%; font-size: .78rem; font-weight: 500; color: var(--rn-text-muted); padding-inline-start: 2.15rem; margin-top: -.35rem; }
.setup-strength { display: flex; gap: .25rem; margin-top: .45rem; }
.setup-strength span { flex: 1; height: 4px; border-radius: 4px; background: var(--rn-border); transition: background .2s; }
.setup-strength[data-score="1"] span:nth-child(-n+1) { background: #d92d20; }
.setup-strength[data-score="2"] span:nth-child(-n+2) { background: #f79009; }
.setup-strength[data-score="3"] span:nth-child(-n+3) { background: #2e90fa; }
.setup-strength[data-score="4"] span { background: #12b76a; }
.setup-match.ok { color: var(--rn-success); }
.setup-match.bad { color: var(--rn-danger); }
.setup-currency label { display: flex !important; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: .8rem; height: 100%; }
.setup-currency label strong { display: block; }
.setup-currency label small { display: block; font-size: .78rem; }
.setup-currency-code { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: .7rem; display: grid; place-items: center; font-weight: 800; font-size: .85rem;
    background: var(--bs-tertiary-bg); color: var(--rn-primary); letter-spacing: .02em; }
.setup-currency input:checked + label .setup-currency-code { background: var(--rn-primary); color: #fff; }
.setup-tick { margin-inline-start: auto; font-size: 1.2rem; color: var(--rn-border); }
.setup-currency input:checked + label .setup-tick { color: var(--rn-primary); }
/* Settings → Business type: one tile per kind of business, its icon on a tinted square. */
.business-types .choice label { display: flex; align-items: center; gap: .6rem; height: 100%; padding: .6rem .75rem; border-radius: .75rem; font-weight: 600; font-size: .9rem; }
.business-type-icon { flex-shrink: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; font-size: 1.1rem;
    background: color-mix(in srgb, var(--rn-primary) 10%, transparent); color: var(--rn-primary); }
.business-types .choice input:checked + label .business-type-icon { background: var(--rn-primary); color: #fff; }
.business-types .choice input:checked + label .setup-tick { color: var(--rn-primary); }
.business-types .choice label:hover { border-color: color-mix(in srgb, var(--rn-primary) 40%, var(--rn-border)); }
.setup-rate { display: flex; align-items: center; max-width: 320px; border: 1.5px solid var(--rn-border); border-radius: .7rem; overflow: hidden; background: #fff; }
.setup-rate:focus-within { border-color: var(--rn-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rn-primary) 14%, transparent); }
.setup-rate span { padding: 0 .9rem; font-weight: 700; color: var(--rn-text-muted); background: var(--bs-tertiary-bg); align-self: stretch; display: grid; place-items: center; white-space: nowrap; }
.setup-rate .form-control { border: 0; height: 3rem; font-size: 1.1rem; font-weight: 700; text-align: center; box-shadow: none; }

/* ---------- sign-in brand panel: the whole logo large and centred ---------- */
.auth-hero { flex-direction: column; }
.auth-hero .auth-hero-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    max-width: 640px; padding: 3rem 2.5rem; }
.auth-hero .auth-hero-logo { width: min(440px, 80%); height: auto; margin: 0; opacity: .96; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .18));
    animation: auth-float 6s ease-in-out infinite; }
.auth-hero-chips { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 2rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.auth-hero-chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.auth-hero-chips i { color: var(--rn-accent); }
@keyframes auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .auth-hero .auth-hero-logo { animation: none; } }
/* The big logo is on the brand panel; the small one at the top of the form is for phones, where the panel is hidden. */
@media (min-width: 992px) { .auth-top { justify-content: flex-end; } .auth-top-logo { display: none; } }

/* ---------- discounts (an amount or a percent) and the column chooser of the sale / purchase lines ---------- */
.disc-box { flex-wrap: nowrap; }
.disc-box .disc-mode {
    min-width: 2.75rem; padding: 0 .45rem; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
    border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--rn-text-muted);
}
.disc-box .disc-mode:hover:not(:disabled) { color: var(--rn-primary); border-color: var(--rn-primary); }
.disc-box.is-percent .disc-mode {
    font-size: .9rem; background: var(--rn-accent-soft); color: var(--rn-accent-text);
    border-color: color-mix(in srgb, var(--rn-accent) 60%, transparent);
}
.disc-box.is-percent .form-control { border-color: color-mix(in srgb, var(--rn-accent) 60%, transparent); }
.doc-footer .df-disc { width: 9.5rem; }
.doc-lines .net-discounted { color: var(--rn-primary); font-weight: 700; }
.disc-hint { font-size: .72rem; line-height: 1.15; margin-top: .15rem; }
@media (max-width: 767.98px) { .doc-footer .df-disc { width: 8rem; } }

.doc-lines.no-discount .col-discount,
.doc-lines.no-discount .col-net,
.doc-lines[data-hide~="net"] .col-net,
.doc-lines[data-hide~="code"] .col-code,
.doc-lines[data-hide~="unit"] .col-unit,
.doc-lines[data-hide~="bonus"] .col-bonus,
.doc-lines[data-hide~="price"] .col-price,
.doc-lines[data-hide~="discount"] .col-discount,
.doc-lines[data-hide~="total"] .col-total,
.doc-lines[data-hide~="sale"] .col-sale,
.doc-lines[data-hide~="wholesale"] .col-wholesale { display: none; }

/* The purchase lines' sale price (2026-11-03): a price or a percent on the cost; the words under it say the new price, the one
   before (struck), the rounded price to take and, in red, a price at or below the cost. */
.sale-box .form-control.is-changed { border-color: var(--rn-primary); font-weight: 700; color: var(--rn-primary); }
.sale-hint { font-size: .72rem; line-height: 1.2; margin-top: .15rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: .35rem; }
.sale-hint:empty { display: none; }
.sale-hint .sale-round { font-size: inherit; font-weight: 700; text-decoration: none; }
/* The item's usual markup (2026-11-04): the price it gives, offered under the box ("25% → 1,250"). */
.sale-hint .sale-usual { font-size: inherit; font-weight: 600; text-decoration: none; color: #9a5b00; }
.sale-hint .sale-why { flex-basis: 100%; color: var(--rn-text-muted); }
:is(.col-sale, .col-wholesale).sale-loss .form-control, :is(.col-sale, .col-wholesale).sale-loss .sale-now { border-color: var(--bs-danger); color: var(--bs-danger); }
.pc-sale { font-size: .8rem; font-weight: 600; }
/* With the sale price beside them, the quantity and the price would shrink until 1,000 no longer shows: they keep their room, long
   headings take two lines instead, and the lines never push the side cards below them (the table scrolls in its card at worst). */
#purchase .doc-lines td .form-control:is([data-f=qty], [data-f=price], [data-f=sale], [data-f=whole]) { min-width: 4.25rem; }
#purchase .doc-lines .sale-box .disc-mode { padding-inline: .3rem; }
#purchase .doc-lines thead th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
#purchase .doc-body > .col-xl { min-width: 0; }
/* The wholesale price beside the sale price (2026-11-04): narrower side padding in the cells and a tighter expiry box keep every column of a
   line beside the side cards at 1440 px (the total no longer scrolls out of sight). */
#purchase .doc-lines > :not(caption) > * > * { padding-inline: .3rem; }
/* The expiry date's column is narrow (2026-11-06, user's screenshot): its heading takes two lines like the held bonus's, the date a
   smaller type and the calendar button close to it, so the whole date still shows. */
#purchase .doc-lines .exp-input { padding-inline: .2rem; font-size: .8rem; width: 6.25rem; min-width: 0; }
#purchase .doc-lines .exp-input::-webkit-calendar-picker-indicator { margin-inline-start: .1rem; padding: 0; }

.cols-btn { white-space: nowrap; display: inline-flex; align-items: center; }
.cols-btn.has-hidden { border-color: var(--rn-primary); color: var(--rn-primary); }
.cols-count {
    margin-inline-start: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 800;
    background: var(--rn-primary); color: #fff;
}
.cols-menu { min-width: 16rem; padding: .35rem 0; border-radius: .8rem; border: 1px solid var(--rn-border); box-shadow: 0 14px 36px rgba(15, 23, 42, .16); }
/* a long menu (the fields chooser with the owner's role part) scrolls inside the screen */
.cols-menu { max-height: min(75vh, 40rem); overflow-y: auto; overscroll-behavior: contain; }
.cols-head {
    padding: .5rem 1rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid var(--rn-border);
    font-size: .78rem; font-weight: 800; color: var(--rn-text-muted);
}
.cols-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem 1rem; cursor: pointer; font-size: .9rem; }
.cols-item:hover { background: var(--bs-tertiary-bg); }
.cols-item i { color: var(--rn-text-muted); }
.cols-item .form-check-input { cursor: pointer; }
.cols-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: .25rem; padding: .5rem 1rem .2rem; border-top: 1px solid var(--rn-border); font-size: .72rem; color: var(--rn-text-muted);
}
.cols-foot .btn-link { font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* the "Fields" chooser: a hidden part of a page, and the group titles in its menu */
.field-off { display: none !important; }
.cols-group { padding: .5rem 1rem .15rem; margin-top: .25rem; border-top: 1px solid var(--rn-border); font-size: .72rem; font-weight: 800; color: var(--rn-text-muted); }
/* a part the owner hides for the user's roles: shown greyed with a lock; the owner's own part of the menu below */
.cols-locked { opacity: .55; cursor: not-allowed; }
.cols-lock { font-size: .7rem; color: var(--rn-text-muted); }
.cols-role { border-top: 1px solid var(--rn-border); margin-top: .35rem; padding: .35rem .6rem .5rem; }
.cols-role .cols-group { padding-inline: 0; border-top: 0; margin-top: 0; }
.cols-role-now { margin-top: .3rem; line-height: 1.35; }
.cols-head + .cols-group { margin-top: 0; border-top: 0; }
/* rows of small fields below xl (entry page headers, the voucher form): they share the row by weight, so a hidden one
   leaves no gap (Bootstrap loads first, so these win over .col) */
@media (max-width: 1199.98px) {
    .dh-w3 { flex: 3 1 0; min-width: 6.5rem; }
    .dh-w4 { flex: 4 1 0; min-width: 8rem; }
    .dh-w5 { flex: 5 1 0; min-width: 9.5rem; }
}
/* a block whose every chooser field is hidden goes too (a card with only its title left) */
.field-group:not(:has([data-field]:not(.field-off))) { display: none !important; }
#pos.pos-mode-grid .cols-dd { display: none; }

/* ---------- expiry dates ---------- */
.exp-chip {
    display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .4rem; padding: .05rem .45rem; vertical-align: middle;
    border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.exp-ok { background: var(--bs-tertiary-bg); color: var(--rn-text-muted); }
.exp-soon { background: var(--rn-accent-soft); color: var(--rn-accent-text); }
.exp-expired { background: var(--rn-danger-soft); color: var(--rn-danger); }
.exp-input.is-past { border-color: var(--rn-danger); color: var(--rn-danger); }
.doc-lines[data-hide~="expiry"] .col-expiry { display: none; }
.doc-lines[data-hide~="batch"] .col-batch { display: none; }
.pos-tile-pic .exp-chip { position: absolute; top: .3rem; inset-inline-start: .3rem; margin: 0; font-size: .6rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.pos-cline-sub .exp-chip { font-size: .62rem; }
@media (min-width: 1200px) { .inv-kpis.inv-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* a wide card with two figures side by side (stock value at cost | at sale price) and a small line under them: it takes
   two places, so the row holds six on a wide screen; "dense" lets a small card fill the gap left before it on phones */
.inv-kpis.inv-kpis-pair { grid-auto-flow: row dense; }
@media (min-width: 1400px) { .inv-kpis.inv-kpis-pair { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* summary cards with a "Fields" chooser: they close up when some are hidden (wide screens; phones keep two a row) */
.inv-kpis.inv-kpis-fit { grid-auto-flow: row dense; }
@media (min-width: 992px) { .inv-kpis.inv-kpis-fit { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.inv-kpi-wide { grid-column: span 2; }
.inv-kpi-pair { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 1rem; min-width: 0; }
.inv-kpi-pair > div:nth-child(2) { padding-inline-start: 1rem; border-inline-start: 1px solid var(--rn-border); }
.inv-kpi-pair > .inv-kpi-note { grid-column: 1 / -1; margin-top: .1rem; }
@media (max-width: 575.98px) { .inv-kpi-wide .inv-kpi-icon { display: none; } } /* phones: the room goes to the two figures */
/* a small second line under a card's figure (expected profit, a warning) */
.inv-kpi-note { font-size: .75rem; color: var(--rn-text-muted); line-height: 1.35; }
@media (max-width: 575.98px) { .inv-kpi-note { font-size: .7rem; } }
.exp-lots { display: flex; flex-wrap: wrap; gap: .5rem; }
.exp-lot { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .6rem .8rem; min-width: 10rem;
    border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm); }
.exp-lot .exp-chip { margin: 0; }
.exp-row-expired td { background: color-mix(in srgb, var(--rn-danger) 5%, transparent); }

/* ---------- held bonus ---------- */
.doc-lines.no-bonus .col-held, .doc-lines[data-hide~="held"] .col-held { display: none; }
.input-held { background: color-mix(in srgb, var(--rn-primary) 6%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--rn-primary) 30%, transparent); }
/* Too much held bonus: the red border says it; Bootstrap's icon would cover the number in a narrow box. */
.form-control.input-held.is-invalid { background-image: none; padding-left: .5rem; padding-right: .5rem; border-color: var(--bs-form-invalid-border-color); }
.rule-chip {
    display: inline-flex; align-items: center; gap: .2rem; margin-inline-start: .4rem; padding: .05rem .45rem; vertical-align: middle;
    border-radius: 999px; font-size: .7rem; font-weight: 800; background: color-mix(in srgb, var(--rn-primary) 10%, transparent); color: var(--rn-primary);
}
.held-left { display: block; color: var(--rn-primary); font-weight: 600; }
.bonus-rule .input-group-text { font-size: .8rem; }
.held-pill { display: inline-block; min-width: 2.5rem; padding: .1rem .55rem; border-radius: 999px; font-weight: 800; text-align: center;
    background: color-mix(in srgb, var(--rn-primary) 10%, transparent); color: var(--rn-primary); }

/* ---------- A4 invoice (sales, purchases, returns): letterhead, bill-to and details, lines, summary ---------- */
.invoice-a4 {
    --ia4: var(--rn-primary);
    position: relative; overflow: hidden; width: 186mm; margin: 0 auto; background: #fff; color: #1f2937;
    font-size: 12.5px; line-height: 1.45;
}
@media screen {
    body.rx-a4 { background: #e7ebf0; }
    /* on screen: a sheet of paper */
    .invoice-a4 { width: 210mm; min-height: 297mm; padding: 14mm 12mm 10mm; margin-bottom: 2rem; border-radius: 4px; box-shadow: 0 12px 40px rgba(15, 23, 42, .16); }
}
.invoice-a4 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ia4-muted { color: #6b7280; font-size: 11px; }
.receipt-serials { color: #4b5563; font-size: 11px; word-break: break-all; }
/* letterhead: business and branch | logo in the middle | the document's title and number */
.ia4-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6mm; }
.ia4-brand { min-width: 0; }
.ia4-logo-box { align-self: center; text-align: center; }
.ia4-logo { display: block; max-height: 24mm; max-width: 58mm; margin: 0 auto; object-fit: contain; }
.ia4-brand-name { font-size: 20px; font-weight: 800; color: var(--ia4); line-height: 1.2; }
.ia4-brand-meta { margin-top: 1.2mm; color: #4b5563; font-size: 11.5px; }
.ia4-brand-meta div, .ia4-party-meta div { display: flex; align-items: center; gap: 1.5mm; }
.ia4-brand-meta i, .ia4-party-meta i { color: var(--ia4); font-size: 10px; }
.ia4-doc { text-align: end; }
.ia4-doc-title { font-size: 25px; font-weight: 800; line-height: 1.1; color: #111827; text-transform: uppercase; letter-spacing: .02em; }
.ia4-doc-no { margin-top: 1.5mm; color: #6b7280; }
.ia4-doc-no strong { color: #111827; font-size: 14px; }
.ia4-chip { display: inline-block; margin-top: 2mm; padding: .4mm 3mm; border-radius: 999px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.ia4-chip + .ia4-chip { margin-inline-start: 1.5mm; }
.ia4-chip-paid { color: #047857; border-color: #6ee7b7; background: #ecfdf5; }
.ia4-chip-part { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.ia4-chip-credit { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.ia4-chip-cancelled { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
.ia4-accent { height: 3px; margin: 5mm 0 6mm; border-radius: 2px; background: linear-gradient(90deg, var(--ia4), color-mix(in srgb, var(--ia4) 25%, #fff)); }
[dir="rtl"] .ia4-accent { background: linear-gradient(270deg, var(--ia4), color-mix(in srgb, var(--ia4) 25%, #fff)); }
.ia4-info { display: grid; grid-template-columns: 1fr 72mm; gap: 8mm; margin-bottom: 6mm; align-items: start; }
.ia4-box-label { font-size: 10.5px; font-weight: 800; color: var(--ia4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.2mm; }
.ia4-party { padding: 3mm 4mm; border-inline-start: 3px solid var(--ia4); background: color-mix(in srgb, var(--ia4) 5%, #fff); border-radius: 0 6px 6px 0; }
[dir="rtl"] .ia4-party { border-radius: 6px 0 0 6px; }
.ia4-party-name { font-size: 15px; font-weight: 800; color: #111827; }
.ia4-party-meta { margin-top: .8mm; color: #4b5563; }
.ia4-meta { width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; border-radius: 6px; }
.ia4-meta td { padding: 1.4mm 3mm; border-bottom: 1px solid #f0f2f5; }
.ia4-meta tr:last-child td { border-bottom: 0; }
.ia4-meta td:first-child { color: #6b7280; white-space: nowrap; }
.ia4-meta td:last-child { text-align: end; font-weight: 600; color: #111827; }
.ia4-meta .num { white-space: nowrap; }
.ia4-lines { width: 100%; border-collapse: separate; border-spacing: 0; }
.ia4-lines th { background: var(--ia4); color: #fff; font-weight: 700; font-size: 11.5px; padding: 2.2mm 2mm; text-align: start; white-space: nowrap; }
.ia4-lines th:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.ia4-lines th:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.ia4-lines td { padding: 2mm; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.ia4-lines tbody tr:nth-child(even) td { background: #f8fafc; }
.ia4-lines tr { break-inside: avoid; }
.ia4-lines .end, .ia4-totals .end { text-align: end; }
.ia4-no { width: 8mm; color: #6b7280; }
.ia4-item { font-weight: 600; color: #111827; }
.ia4-strong { font-weight: 700; color: #111827; }
.ia4-lines[data-hide~="code"] .col-code, .ia4-lines[data-hide~="unit"] .col-unit, .ia4-lines[data-hide~="bonus"] .col-bonus,
.ia4-lines[data-hide~="held"] .col-held, .ia4-lines[data-hide~="expiry"] .col-expiry, .ia4-lines[data-hide~="price"] .col-price,
.ia4-lines[data-hide~="discount"] .col-discount, .ia4-lines[data-hide~="net"] .col-net { display: none; }
.ia4-bottom { display: grid; grid-template-columns: 1fr 80mm; gap: 8mm; margin-top: 6mm; align-items: start; break-inside: avoid; }
.ia4-notes p { margin: 0; color: #374151; white-space: pre-line; }
.ia4-totals { width: 100%; border-collapse: separate; border-spacing: 0; } /* separate: the rounded total row has no seam */
.ia4-totals td { padding: 1.5mm 3mm; }
.ia4-totals td:first-child { color: #4b5563; }
.ia4-totals .ia4-grand td { background: var(--ia4); color: #fff; font-size: 15px; font-weight: 800; padding: 2.5mm 3mm; }
.ia4-totals .ia4-grand td:first-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.ia4-totals .ia4-grand td:last-child { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.ia4-totals small { font-size: 10.5px; font-weight: 600; }
.ia4-totals .ia4-due td { font-weight: 800; color: #b91c1c; border-top: 1px solid #e5e7eb; }
.ia4-totals .ia4-account td { color: #6b7280; font-size: 11.5px; border-top: 1px dashed #e5e7eb; }
.ia4-sign { display: flex; justify-content: space-between; gap: 30mm; margin-top: 18mm; break-inside: avoid; }
.ia4-sign div { flex: 1; padding-top: 1.5mm; border-top: 1px solid #9ca3af; text-align: center; color: #6b7280; font-size: 11px; }
.ia4-foot { margin-top: 10mm; padding-top: 3mm; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 11px; }
/* a print design (Settings → Print design, 2026-11-07): second name and a line about the work under the name, the logo beside it,
   the contacts (phones with names, e-mail, website, address) on a tinted line under the letterhead, the footer's lines */
.ia4-top-start { grid-template-columns: 1fr auto; }
.ia4-top-start .ia4-brand { display: flex; align-items: center; gap: 4mm; }
.ia4-logo-start { max-height: 20mm; max-width: 40mm; margin: 0; flex-shrink: 0; }
.ia4-brand-text { min-width: 0; }
.ia4-brand-name2 { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--ia4) 70%, #111827); line-height: 1.25; }
.ia4-tagline { margin-top: .6mm; color: #4b5563; font-size: 11.5px; font-weight: 600; }
.ia4-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1mm 5mm; margin-top: 4mm; padding: 1.6mm 3mm; border-radius: 6px;
    background: color-mix(in srgb, var(--ia4) 6%, #fff); color: #374151; font-size: 11px; }
.ia4-contact { display: inline-flex; align-items: center; gap: 1.2mm; white-space: nowrap; }
.ia4-contact-wide { white-space: normal; }
.ia4-contact i { color: var(--ia4); font-size: 10.5px; }
.ia4-contact b { font-weight: 700; color: #111827; }
.ia4-contacts + .ia4-accent { margin-top: 3mm; }
.ia4-foot-design div + div { margin-top: .6mm; }
.doc-a5 .ia4-contacts { font-size: 9.5px; gap: .6mm 3mm; margin-top: 2.5mm; padding: 1.2mm 2mm; }
.doc-a5 .ia4-brand-name2 { font-size: 11px; }
.doc-a5 .ia4-tagline { font-size: 10px; }
.doc-a5 .ia4-logo-start { max-height: 13mm; max-width: 26mm; }
/* a cancelled invoice says so across the page */
.ia4-stamp {
    position: absolute; top: 42%; inset-inline: 0; text-align: center; transform: rotate(-18deg); pointer-events: none;
    font-size: 72px; font-weight: 900; letter-spacing: .08em; color: rgba(220, 38, 38, .12); text-transform: uppercase;
}
@media print {
    body.rx-a4 { background: #fff; }
    .invoice-a4 { width: auto; min-height: 0; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
}

/* ---------- Settings → Print design (2026-11-07): the form beside a preview of an A4 invoice and an 80 mm receipt ---------- */
.pd-preview-box { position: sticky; top: calc(var(--rn-topbar-height) + 1rem); max-height: calc(100vh - var(--rn-topbar-height) - 2rem); overflow: auto;
    padding: .75rem; border-radius: var(--rn-radius); background: #e7ebf0; }
.pd-preview-box .invoice-a4 { min-height: 0; margin-bottom: 0; }
.pd-80 .receipt { box-shadow: 0 8px 24px rgba(15, 23, 42, .14); border-radius: 4px; }
.pd-pageno { margin-top: 4mm; text-align: center; color: #6b7280; font-size: 10px; }
.pd-brand { display: flex; align-items: center; gap: .75rem; }
.pd-brand-logo { width: 4rem; height: 3rem; object-fit: contain; flex-shrink: 0; border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm); background: #fff; }
.pd-brand-none { display: inline-flex; align-items: center; justify-content: center; color: var(--rn-text-muted); font-size: 1.3rem; }
.pd-phone + .pd-phone { margin-top: .5rem; }
.pd-wa { padding-top: .45rem; }
.pd-swatch { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rn-border); }
.pd-swatch.active { box-shadow: 0 0 0 2px var(--rn-text); }
@media (max-width: 1199.98px) { .pd-preview-box { position: static; max-height: none; } }

/* ---------- printed money voucher (Cash/Print): the invoice's letterhead and look, an amount band; A5 or A4 ---------- */
.vp-move { display: flex; align-items: center; gap: 4mm; flex-wrap: wrap; }
.vp-move > i { color: var(--ia4); font-size: 18px; }
.vp-amount { margin: 0 0 6mm; border: 1px solid color-mix(in srgb, var(--ia4) 25%, #fff); border-radius: 8px; overflow: hidden; break-inside: avoid; }
.vp-amount-main { display: flex; justify-content: space-between; align-items: center; gap: 4mm; padding: 4mm 5mm; background: var(--ia4); color: #fff; }
.vp-amount-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vp-amount-value { font-size: 26px; font-weight: 800; line-height: 1.1; }
.vp-amount-value small { font-size: 13px; font-weight: 600; }
.vp-amount-row { display: flex; justify-content: space-between; gap: 4mm; padding: 2mm 5mm; border-top: 1px solid #eef0f3; color: #374151; }
.vp-amount-row .num { font-weight: 700; color: #111827; }
.vp-balance { background: #f8fafc; }
.vp-owes-us, .vp-owes-us .num { color: #047857 !important; font-weight: 700; }
.vp-we-owe, .vp-we-owe .num { color: #b91c1c !important; font-weight: 700; }
.vp-notes { margin-bottom: 4mm; }
.vp-notes p { margin: 0; color: #374151; white-space: pre-line; }
/* A5: the same page, smaller */
.invoice-a4.doc-a5 { width: 132mm; font-size: 11px; }
@media screen { .invoice-a4.doc-a5 { width: 148mm; min-height: 210mm; padding: 9mm 8mm; } }
.doc-a5 .ia4-top { gap: 3mm; }
.doc-a5 .ia4-brand-name { font-size: 15px; }
.doc-a5 .ia4-brand-meta { font-size: 10px; }
.doc-a5 .ia4-logo { max-height: 15mm; max-width: 34mm; }
.doc-a5 .ia4-doc-title { font-size: 15px; }
.doc-a5 .ia4-doc-no strong { font-size: 12px; }
.doc-a5 .ia4-accent { margin: 3mm 0 4mm; }
.doc-a5 .ia4-info { grid-template-columns: 1fr 64mm; gap: 4mm; margin-bottom: 4mm; }
.doc-a5 .ia4-party { padding: 2.5mm 3mm; }
.doc-a5 .ia4-party-name { font-size: 13px; }
.doc-a5 .ia4-meta td { padding: 1.1mm 2mm; }
.doc-a5 .vp-amount { margin-bottom: 4mm; }
.doc-a5 .vp-amount-main { padding: 3mm 4mm; }
.doc-a5 .vp-amount-value { font-size: 19px; }
.doc-a5 .vp-amount-row { padding: 1.6mm 4mm; }
.doc-a5 .ia4-sign { margin-top: 12mm; gap: 14mm; }
.doc-a5 .ia4-stamp { font-size: 44px; }
/* a page printed from the background (the cash list's "Save and print") */
.print-frame { position: fixed; width: 0; height: 0; border: 0; inset-inline-start: -9999px; }


/* ---------- WhatsApp: the button, the "PDF ready" panel, a short message, a link that cannot open ---------- */
.btn-whatsapp { --bs-btn-bg: #1fa855; --bs-btn-border-color: #1fa855; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #178f47; --bs-btn-hover-border-color: #178f47; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #137a3c; --bs-btn-active-border-color: #137a3c; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #1fa855; --bs-btn-disabled-border-color: #1fa855; --bs-btn-disabled-color: #fff; font-weight: 600; }
.share-wa .dropdown-item small { font-size: .78rem; }
.share-toast { position: fixed; bottom: 1.25rem; inset-inline: 0; width: fit-content; max-width: calc(100% - 2rem); margin: 0 auto; z-index: 2000;
    padding: .55rem 1rem; border-radius: 999px; background: #1f2937; color: #fff; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.share-ready { position: fixed; bottom: 1rem; inset-inline: 0; width: min(380px, calc(100% - 2rem)); margin: 0 auto; z-index: 2000;
    padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--rn-border); box-shadow: 0 16px 40px rgba(15, 23, 42, .25); }
.share-ready-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.share-ready-head > i { font-size: 1.6rem; color: #b42318; }
@media print { .share-toast, .share-ready { display: none !important; } .invoice-a4 { zoom: 1 !important; } }
/* A tile's small second line on My day (2026-11-11: the car's last load request). */
.sm-action-note { display: block; font-size: .72rem; font-weight: 500; color: #667085; margin-top: .1rem; }

/* A salesman's workday (2026-11-11, workday.js): the card on My day. */
#sm-workday:empty { display: none; }
.sm-wd { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: .85rem 1rem; }
.sm-wd.is-open { border-color: #86d8a8; background: #f3fbf6; }
.sm-wd-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.sm-wd-head > i { font-size: 1.25rem; color: #d97706; }
.sm-wd-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #16a34a; margin-inline-end: .4rem; animation: sm-wd-pulse 2s infinite; }
@keyframes sm-wd-pulse { 50% { opacity: .35; } }
.sm-wd-km { margin-bottom: .6rem; }
.sm-wd-km label { font-size: .8rem; color: #667085; }
.sm-wd-km input { max-width: 14rem; direction: ltr; }
.sm-wd-note { display: block; color: #667085; margin-top: .45rem; font-size: .75rem; }
.sm-wd-wait { font-size: .8rem; color: #b54708; }
.sm-wd-wait[hidden] { display: none; }

/* Maps inside the app (2026-11-11, ranma-map.js / Leaflet): kept below menus and sticky bars. */
.rn-map { position: relative; z-index: 0; isolation: isolate; border-radius: 10px; overflow: hidden; background: #eef2f7; }
.rn-map-off { display: grid; place-items: center; color: #667085; font-size: .9rem; }
.rn-map-pin { background: none; border: 0; direction: ltr; width: 0; height: 0; }
.rn-map-pin span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-width: 24px;
  height: 24px; padding: 0 6px; border-radius: 12px; border: 2px solid #fff; color: #fff; font: 700 12px/1 system-ui, Tahoma, sans-serif;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .4); white-space: nowrap; }
.rn-map-pin span.is-big { min-width: 30px; height: 30px; border-radius: 15px; font-size: 13px; }
.rn-map-key { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-inline-end: .35rem; vertical-align: middle; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content { margin: .55rem .75rem; line-height: 1.45; }

/* This device's printer (2026-11-11, printer.js): the print window or a Bluetooth receipt printer. */
.printer-dialog { border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100% - 2rem)); box-shadow: 0 18px 50px rgba(16, 24, 40, .25); color: #1f2937; }
.printer-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.printer-dialog form { margin: 0; }
.printer-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid #e5e7eb; }
.printer-head > i { font-size: 1.3rem; color: var(--rn-primary, #114987); }
.printer-body { padding: .9rem 1rem 1rem; }
.printer-way { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: .5rem; cursor: pointer; }
.printer-way:has(input:checked) { border-color: var(--rn-primary, #114987); background: #f0f5fb; }
.printer-way input { margin-top: .3rem; }
.printer-way small { display: block; color: #667085; font-size: .8rem; }
.printer-way.is-off { opacity: .55; cursor: not-allowed; }
.printer-more { padding: .4rem .1rem 0; }
.printer-device { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; padding: .45rem .6rem; background: #f8fafc; border-radius: 8px; }
.printer-device[hidden], .printer-more[hidden] { display: none; }
@media print { .printer-dialog, #printer-panel, #printer-toast, #printer-busy { display: none !important; } }
.share-problem { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: var(--rn-bg); }
.share-problem-card { width: min(420px, 100%); padding: 2rem 1.5rem; text-align: center; background: #fff; border: 1px solid var(--rn-border);
    border-radius: 16px; box-shadow: var(--rn-shadow); }
.share-problem-logo { height: 44px; width: auto; margin-bottom: 1.5rem; }
.share-problem-icon { display: block; font-size: 2.4rem; color: var(--rn-primary); margin-bottom: .5rem; }
.share-problem-card h1 { font-size: 1.2rem; font-weight: 800; margin-bottom: .4rem; }
.share-problem-card p { color: var(--rn-text-muted); margin: 0; }

/* ---------- Reports/Summary: a day, a month and a year side by side, each with its own arrows ---------- */
.sum-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.sum-card { overflow: hidden; }
.sum-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-bottom: 1px solid var(--rn-border);
    background: color-mix(in srgb, var(--rn-primary) 6%, var(--rn-surface)); }
.sum-nav { width: 2.3rem; height: 2.3rem; padding: 0; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px;
    background: var(--rn-surface); border: 1px solid var(--rn-border); color: var(--rn-primary); font-size: 1rem; }
.sum-nav:hover { border-color: var(--rn-primary); color: var(--rn-primary); background: var(--rn-surface); }
.sum-nav.disabled { opacity: .35; }
.sum-when { flex: 1; min-width: 0; text-align: center; line-height: 1.3; }
.sum-kind { display: block; font-size: .72rem; font-weight: 700; color: var(--rn-text-muted); }
.sum-when b { display: block; font-size: 1rem; }
.sum-when small { display: block; font-size: .75rem; color: var(--rn-text-muted); }
.sum-main { padding: .85rem 1rem .55rem; }
.sum-label { font-size: .8rem; font-weight: 600; color: var(--rn-text-muted); }
.sum-big { font-size: 1.65rem; font-weight: 800; line-height: 1.25; color: var(--rn-primary); }
.sum-big small { font-size: .85rem; font-weight: 600; color: var(--rn-text-muted); }
.sum-note { font-size: .78rem; color: var(--rn-text-muted); }
.sum-rows { padding: 0 1rem .35rem; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .42rem 0;
    border-top: 1px dashed var(--rn-border); font-size: .9rem; }
.sum-row > b { font-weight: 700; white-space: nowrap; }
.sum-net { font-weight: 800; }
.sum-net > b { font-weight: 800; }
.sum-good > b { color: #047857; }
.sum-bad > b { color: #b42318; }
.sum-more { display: flex; align-items: center; justify-content: space-between; padding: .55rem 1rem; border-top: 1px solid var(--rn-border);
    font-size: .82rem; font-weight: 600; text-decoration: none; }
.sum-more:hover { background: color-mix(in srgb, var(--rn-primary) 5%, var(--rn-surface)); }
/* the cashboxes: money in and out by kind of dealing, then what is left */
.sum-cash { margin: 0 1rem .6rem; padding: .2rem .7rem .3rem; border-radius: var(--rn-radius-sm); background: color-mix(in srgb, var(--rn-primary) 4%, var(--rn-surface)); }
.sum-sec { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem 0 .3rem; font-size: .88rem; font-weight: 700; }
.sum-sec > b { white-space: nowrap; }
.sum-sec-in, .sum-sec-in > b { color: #047857; }
.sum-fold-out { border-top: 1px solid var(--rn-border); margin-top: .25rem; }
/* money in / out fold: the heading is the button (its chevron turns when open) */
.sum-fold > summary { cursor: pointer; list-style: none; }
.sum-fold > summary::-webkit-details-marker { display: none; }
.sum-fold-icon { display: inline-block; font-size: .7rem; margin-inline-end: .35rem; transition: transform .15s; color: var(--rn-text-muted); }
.sum-fold:not([open]) .sum-fold-icon { transform: rotate(var(--sum-fold-turn, 90deg)); }
[dir="rtl"] .sum-fold { --sum-fold-turn: 90deg; }
[dir="ltr"] .sum-fold { --sum-fold-turn: -90deg; }
.sum-fold[open] > summary .sum-sec { padding-bottom: .2rem; }
#dash-summary.sum-busy { opacity: .6; transition: opacity .15s; }
@media print { .sum-fold-icon { display: none; } }
.sum-sec-out, .sum-sec-out > b { color: #b42318; }
.sum-cash-net { border-top: 1px solid var(--rn-border); margin-top: .25rem; color: var(--rn-text); }
.sum-sub { display: flex; justify-content: space-between; gap: .75rem; padding: .16rem 0 .16rem; padding-inline-start: 1.35rem; font-size: .82rem; color: var(--rn-text); }
.sum-sub .num { font-weight: 600; white-space: nowrap; }
.sum-zero { color: var(--rn-text-muted); }
.sum-zero .num { font-weight: 400; }
@media print { .sum-nav { display: none !important; } .sum-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .sum-big { font-size: 1.45rem; } .sum-row { padding: .32rem 0; } .sum-main { padding: .7rem 1rem .45rem; } }

/* Companies and representatives (Customers & suppliers): the tabs' last two sit at the far end; a company's
   representatives as chips; a list filtered by one of them shows a chip with × above the rows. */
.party-tabs { gap: .25rem; row-gap: .35rem; }
.company-rep { display: inline-flex; align-items: center; padding: .3rem .7rem; border: 1px solid var(--rn-border);
    border-radius: 999px; background: var(--bs-tertiary-bg); color: inherit; text-decoration: none; font-size: .9rem; }
.company-rep:hover { border-color: var(--rn-primary); color: var(--rn-primary); }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .7rem;
    border-radius: 999px; background: var(--rn-primary-soft); color: var(--rn-primary); font-size: .875rem; }
.filter-chip a { display: inline-flex; padding: .1rem .3rem; border-radius: 999px; color: inherit; }
.filter-chip a:hover { background: rgba(17, 73, 135, .12); }

/* Money received or paid: the party's unpaid invoices and loans, ticked ones get the money oldest first (cash.js). */
.od-card .table { --bs-table-bg: transparent; }
.od-table th { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; background: var(--bs-tertiary-bg); }
.od-table td, .od-table th { padding: .45rem .6rem; }
.od-table .od-tick { width: 2.2rem; text-align: center; }
.od-table .od-pay { width: 9.5rem; min-width: 8rem; }
.od-table tr.od-on td { background: var(--rn-primary-soft); }
.od-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.od-done { background: #dcfce7; color: #166534; }
.od-part { background: #fef3c7; color: #92400e; }
.od-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; padding: .6rem 1rem; border-top: 1px solid var(--rn-border); font-size: .9rem; }
.od-summary .od-note { flex-basis: 100%; }
@media (min-width: 768px) { .od-summary .od-note { flex-basis: auto; margin-inline-start: auto; } }

/* The voucher print: the invoices it paid. */
.vp-docs { margin-bottom: 5mm; break-inside: avoid; }
.vp-docs .ia4-lines td { padding: 1.6mm 2mm; }
.vp-doc-done { color: #166534; font-weight: 700; white-space: nowrap; }
.vp-docs-rest { margin-top: 2mm; font-size: 12px; color: #374151; }
.od-kind-inline { display: none; }
/* Phones: the buttons on their own line, each document a small card (number, date and kind, status; then after
   discount and remaining; then what is paid now). */
@media (max-width: 767.98px) {
    .od-card .pf-head { flex-wrap: wrap; }
    .od-card .od-actions { width: 100%; }
    .od-card .od-actions .btn { flex: 1; }
    .od-table thead { display: none; }
    .od-table tbody tr { display: grid; grid-template-columns: 2rem 1fr auto; grid-template-areas:
        "tick num status" "tick date date" ". total open" ". pay pay"; gap: .15rem .6rem; padding: .6rem .75rem; border-bottom: 1px solid var(--rn-border); }
    .od-table tbody td { display: block; padding: 0; border: 0; background: transparent !important; }
    .od-table tr.od-on { background: var(--rn-primary-soft); }
    .od-table .od-tick { grid-area: tick; width: auto; text-align: start; padding-top: .1rem; }
    .od-table .od-num { grid-area: num; }
    .od-table .od-status { grid-area: status; text-align: end; }
    .od-table .od-date { grid-area: date; font-size: .85rem; color: var(--bs-secondary-color); }
    .od-table .od-kind-inline { display: inline; }
    .od-table .od-total { grid-area: total; text-align: start !important; }
    .od-table .od-open { grid-area: open; }
    .od-table .od-pay { grid-area: pay; width: auto; display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
    .od-table .od-pay input { font-size: 16px; }
    .od-table [data-label]::before { content: attr(data-label) ": "; font-size: .78rem; font-weight: 400; color: var(--bs-secondary-color); white-space: nowrap; }
}

/* Held bonus given beyond what suppliers gave: owed by them until settled (Inventory → held bonus owed). */
.held-pill.held-owed { background: #fee2e2; color: #b91c1c; }
/* Item movements: stock, held bonus and owed side by side; on phones every movement is a card. */
.mv-table .mv-groups th { border-bottom: 0; padding-bottom: 0; }
.mv-table .mv-group { font-size: .72rem; letter-spacing: .02em; color: var(--rn-primary); border-bottom: 2px solid var(--rn-border) !important; }
.mv-table td.mv-held { background: #fbfaf5; }
@media (max-width: 767.98px) {
    .mv-table thead { display: none; }
    .mv-table, .mv-table tbody, .mv-table tr, .mv-table td { display: block; width: 100%; }
    .mv-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; padding: .6rem .75rem; border-bottom: 1px solid var(--rn-border); }
    .mv-table td { border: 0; padding: 0; text-align: start !important; background: none !important; }
    .mv-table td:nth-child(-n+2) { grid-column: 1 / -1; }
    .mv-table td:empty, .mv-table td.mv-zero { display: none; }
    .mv-table td[data-label]::before { content: attr(data-label) ": "; font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); }
}
/* Sale page: the part of a line's held bonus given from the stock, and what the stock has (red: not enough). */
.pos-held-note { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #b45309; white-space: normal; text-align: start; }
.pos-held-note.pos-held-short { color: #b91c1c; }

/* Held bonus settlement: "put the owed quantity back into the stock" — a quiet box under the ways. */
.restock-check { padding: .6rem .8rem .6rem 2.4rem; border: 1px dashed var(--rn-border); border-radius: .6rem; background: #f8fafc; }
[dir="rtl"] .restock-check { padding: .6rem 2.4rem .6rem .8rem; }
.restock-check .form-check-input { margin-inline-start: -1.6rem; }
/* "After saving" on the held bonus settlement: each figure now → after, as small tiles side by side. */
.after-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.after-tile { min-width: 0; padding: .55rem .8rem; border: 1px solid var(--rn-border); border-radius: .6rem; background: #f8fafc; }
.after-what { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .8rem; color: var(--bs-secondary-color); }
.after-what > i { color: var(--rn-primary); }
.after-what b { color: var(--bs-body-color); font-weight: 600; }
.after-values { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; margin-top: .15rem; }
.after-now { color: var(--bs-secondary-color); }
.after-arrow { font-size: .8rem; color: var(--bs-secondary-color); }
.after-new { font-size: 1.15rem; font-weight: 700; }
.after-new.after-good { color: #15803d; }
.after-new.after-bad { color: #b91c1c; }
.after-same { padding: .05rem .5rem; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: .72rem; }
.after-note { margin-top: .2rem; font-size: .75rem; color: var(--bs-secondary-color); }
.after-tile.after-muted { display: flex; align-items: center; color: var(--bs-secondary-color); font-size: .875rem; }
.after-tile.after-warn { display: flex; align-items: center; grid-column: 1 / -1; border-color: #fecaca; background: #fef2f2; color: #b91c1c;
    font-size: .875rem; font-weight: 600; }

/* An action card's count (Inventory: items whose held bonus suppliers owe). */
.quick-action { position: relative; }
/* Inventory with production: up to seven cards, all in one row on wide screens. */
@media (min-width: 1200px) { .inventory-actions-7 > * { flex: 1 0 0; width: auto; } }
.quick-badge { position: absolute; top: .5rem; inset-inline-end: .5rem; min-width: 1.5rem; padding: .1rem .45rem; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.3; }

/* Item page: the company's supplier and the representative's phone, small, inside their boxes. */
.link-tag { gap: .25rem; padding-inline: .45rem; max-width: 50%; min-width: 0; flex-shrink: 1; font-size: .75rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.link-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name keeps room to be read and typed; the note gives way first (…). */
.input-group:has(.link-tag) { flex-wrap: nowrap; }
.input-group:has(.link-tag:not([hidden])) > .form-control { min-width: 5.5rem; }

/* A stock document seen read-only (Inventory/View): its facts as label over value, as many to a row as fit. */
.doc-view-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.doc-view-facts dt { font-size: .78rem; font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.doc-view-facts dd { margin: 0; }
.doc-view-facts .doc-view-wide { grid-column: 1 / -1; }

/* ---------- offline work: the state in the top bar (offline.js) ---------- */
.net-pill { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; font-weight: 700; }
.net-dot { width: .62rem; height: .62rem; border-radius: 50%; background: #12b76a; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }
.net-pill.on .net-label { display: none; } /* everything sent: the green dot alone */
.net-pill.off { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.net-pill.off .net-dot { background: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .18); }
.net-pill.busy, .net-pill.warn { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.net-pill.busy .net-dot, .net-pill.warn .net-dot { background: #f79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, .2); }
.net-pill.busy .net-dot { animation: net-pulse 1s ease-in-out infinite; }
@keyframes net-pulse { 50% { opacity: .35; } }
.net-count { min-width: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.net-count[hidden] { display: none; }
@media (min-width: 576px) { .net-count { display: none; } } /* the label says it there */
.net-menu { min-width: 17rem; max-width: 22rem; }
/* A model's sizes and colours as chips, and its lines grouped by colour (a line not sold is greyed). */
.im-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1rem; }
.im-chip { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .25rem .2rem .65rem; border-radius: 999px;
    background: var(--rn-primary-soft); color: var(--rn-primary); font-weight: 700; font-size: .9rem; }
.im-chip button { border: 0; background: transparent; color: inherit; padding: 0 .2rem; line-height: 1; }
.im-variants .im-group td { background: var(--bs-tertiary-bg); padding-top: .4rem; padding-bottom: .4rem; }
.im-variants tr.im-off td:not(.dl-remove) { opacity: .45; }
@media (max-width: 767.98px) {
    .im-variants.doc-stack tr.im-group { display: block; border: 0; padding: .25rem 0; margin: .5rem 0 .25rem; background: transparent; }
    .im-variants.doc-stack tr.im-group td { background: transparent; padding: 0; }
}

/* Starting balances: one results box for the party search of every line, fixed under the box typed in (never cut off by
   the scrolling table); the footer's totals per currency, side by side. */
.ob-results { position: fixed; z-index: 1060; max-height: 50vh; overflow-y: auto; }
/* The purchase page's size × colour window: narrow boxes, the colour column kept in view. */
.pm-grid th, .pm-grid td { min-width: 3.6rem; }
/* inside its window: at the window's top, not under the page's top bar (the rule for list tables) */
.app-content .table.pm-grid > thead > tr > th { position: sticky; top: 0; z-index: 2; }
/* Items → Model: a colour's picture beside its name (a tap changes it); the sale page's sizes window shows it too. */
.im-pic { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .5rem; border: 1px dashed var(--rn-border);
    overflow: hidden; cursor: pointer; vertical-align: middle; margin-inline-end: .5rem; color: var(--rn-text-muted); background: #fff; }
.im-pic img { width: 100%; height: 100%; object-fit: cover; }
.pv-colour-pic { width: 2rem; height: 2rem; border-radius: .4rem; object-fit: cover; margin-inline-end: .5rem; vertical-align: middle; }
/* The item page's price level grid: a small table inside a card, its heading not sticky. */
.app-content .table.level-grid > thead > tr > th { position: static; }
.level-grid td input { min-width: 6rem; }
.pm-grid tbody th { background: var(--bs-tertiary-bg); position: sticky; inset-inline-start: 0; z-index: 1; }
.pm-grid .pm-qty { min-width: 3.2rem; padding-inline: .25rem; }
/* what each size has in stock, small under its box */
.pm-grid .pm-stock { font-size: .68rem; color: var(--rn-text-muted); text-align: center; line-height: 1.2; margin-top: .1rem; }
.ob-totals { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-self: center; }
.ob-lines .ob-roles:empty { display: none; }

/* What waits on this device: one row per record, its print page on a click. */
.net-list { margin-top: .5rem; max-height: 16rem; overflow-y: auto; border-top: 1px solid var(--bs-border-color); }
.net-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .15rem; border-bottom: 1px solid var(--bs-border-color-translucent);
    color: inherit; text-decoration: none; font-size: .82rem; }
a.net-row:hover { background: var(--bs-tertiary-bg); }
.net-row > .bi:first-child { color: var(--rn-primary); font-size: 1rem; }
.net-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.net-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-row-sub { color: var(--bs-secondary-color); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-row-amount { font-weight: 700; white-space: nowrap; }
.net-row-print { color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
    .net-pill { padding: .3rem .55rem; }
    .net-pill .net-label { display: none; } /* phones: the dot and the number waiting */
}

/* Import from Excel (phase 7): the rows as they were understood, in a box of their own with the heading kept in view. */
.imp-help summary { cursor: pointer; font-weight: 600; color: var(--rn-primary); }
.imp-step-head { flex-wrap: wrap; padding-bottom: .75rem; }
.imp-drop {
    display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; margin: 0; cursor: pointer;
    border: 2px dashed color-mix(in srgb, var(--rn-primary) 30%, var(--rn-border)); border-radius: .75rem;
    background: color-mix(in srgb, var(--rn-primary) 4%, var(--rn-surface)); color: var(--rn-text);
}
.imp-drop:hover, .imp-drop.imp-over { border-color: var(--rn-primary); background: var(--rn-primary-soft); }
.imp-drop > i { font-size: 1.6rem; color: var(--rn-primary); }
.imp-drop > span { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.imp-drop > small { color: var(--rn-text-muted); }
.imp-drop.imp-chosen { border-style: solid; }
.imp-progress { height: .9rem; border-radius: 999px; }
.imp-help th { font-weight: 600; width: 1%; }
.imp-table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--rn-border); border-radius: .5rem; }
.app-content .imp-table-wrap .table.imp-table > thead > tr > th { top: 0; }
.imp-table td { vertical-align: top; font-size: .85rem; }
.imp-table .imp-notes { min-width: 16rem; font-size: .78rem; }
.imp-row-error > td { background: #fff5f5; }
.inv-pill.imp-new { background: #e7f6ee; color: #1e7b4a; }
.inv-pill.imp-update { background: #e8f0fb; color: var(--rn-primary); }
.inv-pill.imp-same { background: #eef0f2; color: #5b6470; }
.inv-pill.imp-error { background: #fdecec; color: #b42318; }

/* Business type and parts shown only (user's rule, 2026-10-23: online, only the platform's owner changes them). */
.business-locked .choice label, .business-locked .form-check-label { cursor: default; }
.business-locked .choice input:disabled + label { opacity: 1; }
.business-locked .choice input:not(:checked) + label { opacity: .6; }
.business-locked .form-switch .form-check-input:disabled ~ .form-check-label { opacity: 1; }
/* The client's page: the form's cards sit inside the card, without a second frame. */
.client-type-form > .card { border: 0; box-shadow: none; background: transparent; }
.client-type-form > .card > .card-body { padding: 0 0 .75rem; }
@media (min-width: 1200px) { .client-type-form .business-types > .col-xl-3 { flex: 0 0 auto; width: 33.333%; } }

/* Invoice lists: today / this week / this month, then the arrows step by that period (2026-10-24). */
.inv-periods .btn { white-space: nowrap; }
.inv-period-range { width: auto; min-width: 11rem; background: var(--rn-surface); }
.inv-period-name { font-weight: 600; }

/* General journal (Accounting/Entries, phase 8): a rule between entries; credit accounts set in, as an accountant writes them. */
.gj-table .gj-entry { border-top: 2px solid var(--bs-border-color); }
.gj-table td.gj-credit { padding-inline-start: 2rem; }

/* The guests' QR menu (Guest/Menu, phase 10): a phone-first page of its own — the business on top, the table and its calls, sticky
   categories and search, dishes as cards with their pictures, and a bar at the bottom with the table and the order being made. */
.gm-body { background: var(--rn-bg); min-height: 100dvh; }
.gm { max-width: 760px; margin: 0 auto; padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .75rem;
    background: linear-gradient(135deg, var(--rn-primary), #0b2f57); color: #fff; }
.gm-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.gm-logo { height: 46px; width: 46px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; flex: 0 0 auto; }
.gm-brand-text { min-width: 0; }
.gm-brand-text h1 { font-size: 1.2rem; font-weight: 800; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-brand-text span { font-size: .8rem; opacity: .8; }
.gm-lang { display: inline-flex; align-items: center; gap: .35rem; color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.gm-lang:hover, .gm-lang:focus { color: #fff; background: rgba(255, 255, 255, .12); }
.gm-table-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--rn-border); }
.gm-table-chip { display: inline-flex; align-items: center; gap: .35rem; margin-inline-end: auto; color: var(--rn-primary); font-size: .95rem; }
.gm-table-chip b { font-weight: 800; }
.gm-call { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; background: var(--rn-accent-soft); color: var(--rn-accent-text);
    font-weight: 600; border: 1px solid #fde1b0; }
.gm-call:hover { background: #ffe9c4; color: var(--rn-accent-text); }
@media (max-width: 575.98px) {
    .gm-table-chip { flex: 1 1 100%; }
    .gm-call { flex: 1 1 0; justify-content: center; }
}
.gm-note { margin: .75rem 1rem 0; padding: .6rem .8rem; border-radius: var(--rn-radius-sm); background: var(--rn-accent-soft); color: var(--rn-accent-text); font-size: .9rem; }
.gm-tools { position: sticky; top: 0; z-index: 20; background: rgba(245, 247, 251, .96); backdrop-filter: blur(6px); padding: .6rem 1rem .4rem;
    border-bottom: 1px solid var(--rn-border); }
.gm-cats { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .45rem; }
.gm-cats::-webkit-scrollbar { display: none; }
.gm-cat { flex: 0 0 auto; border: 1px solid var(--rn-border); background: #fff; color: var(--rn-text); border-radius: 999px; padding: .35rem .9rem;
    font-weight: 600; font-size: .9rem; }
.gm-cat.active { background: var(--rn-primary); border-color: var(--rn-primary); color: #fff; }
.gm-search { position: relative; }
.gm-search i { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); color: var(--rn-text-muted); }
.gm-search .form-control { padding-inline-start: 2.3rem; border-radius: 999px; font-size: 16px; }
.gm-menu { padding: .25rem 1rem 1rem; }
.gm-section { scroll-margin-top: 7rem; }
.gm-section h2 { font-size: 1.05rem; font-weight: 800; margin: 1rem 0 .55rem; }
.gm-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 576px) { .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm-dish { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem; text-align: start; background: #fff;
    border: 1px solid var(--rn-border); border-radius: 14px; box-shadow: var(--rn-shadow); color: inherit; transition: transform .12s ease, border-color .12s ease; }
.gm-dish:active { transform: scale(.98); }
.gm-dish-in { border-color: var(--rn-primary); }
.gm-dish-bump { animation: gm-bump .3s ease; }
@keyframes gm-bump { 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .gm-dish-bump { animation: none; } }
.gm-dish-img { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--rn-primary-soft);
    display: grid; place-items: center; color: var(--rn-primary); font-size: 1.8rem; }
.gm-dish-img img { width: 100%; height: 100%; object-fit: cover; }
.gm-dish-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.gm-dish-name { font-weight: 700; line-height: 1.3; }
/* 2026-10-28: a dish's description (two lines on the card, all of it in its window) and the orders from home */
.gm-dish-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.3; }
.gm-dish-about { color: var(--bs-secondary-color); margin: .25rem 0 .5rem; white-space: pre-line; }
.gm-home-order { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .6rem .75rem; margin-bottom: .6rem; }
.gm-home-head { display: flex; align-items: center; gap: .4rem; }
.gm-home-head > i { font-size: 1.1rem; color: var(--rn-primary); }
.gm-home-declined .gm-home-head > i, .gm-home-cancelled .gm-home-head > i { color: #b42318; }
.gm-home-ready .gm-home-head > i, .gm-home-delivered .gm-home-head > i, .gm-home-done .gm-home-head > i { color: #1e7b4a; }
.gm-dish-meta { color: var(--rn-primary); font-weight: 800; }
.gm-dish-add { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--rn-primary); color: #fff;
    font-size: 1.15rem; }
.gm-dish-count { position: absolute; top: -.45rem; inset-inline-end: -.35rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--rn-accent); color: #3b2300; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.gm-dish[hidden], .gm-section[hidden], .gm-dish-count[hidden], .gm-dish-pic[hidden] { display: none !important; }
.gm-empty { text-align: center; color: var(--rn-text-muted); margin: 2rem 0; }
.gm-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; gap: .6rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--rn-border); box-shadow: 0 -6px 18px rgba(16, 24, 40, .08); max-width: 760px; margin: 0 auto; }
.gm-bar-table { position: relative; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rn-border); border-radius: 12px; font-weight: 600; }
.gm-dot { position: absolute; top: .3rem; inset-inline-end: .3rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rn-danger); }
.gm-dot[hidden] { display: none; }
.gm-bar-cart { flex: 1; display: flex; align-items: center; gap: .6rem; border-radius: 12px; font-weight: 700; padding: .65rem .9rem; }
.gm-bar-count { min-width: 1.7rem; height: 1.7rem; border-radius: 999px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: .85rem; }
.gm-bar-total { margin-inline-start: auto; }
.gm-toast { position: fixed; inset-inline: 1rem; bottom: calc(5.2rem + env(safe-area-inset-bottom)); z-index: 1100; max-width: 728px; margin: 0 auto;
    padding: .75rem 1rem; border-radius: 12px; background: #0f5132; color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(16, 24, 40, .25); }
.gm-toast[hidden] { display: none; }
.gm-toast-bad { background: var(--rn-danger); }
.gm-dish-pic { height: 200px; overflow: hidden; border-radius: var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius) 0 0; }
.gm-dish-pic img { width: 100%; height: 100%; object-fit: cover; }
.gm-dish-price { font-size: 1.15rem; font-weight: 800; color: var(--rn-primary); margin-bottom: .5rem; }
.gm-group { border: 0; margin: .75rem 0 0; padding: 0; }
.gm-group legend { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; float: none; }
.gm-option { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; margin-bottom: .35rem; border: 1px solid var(--rn-border); border-radius: 10px; cursor: pointer; }
.gm-option .form-check-input { margin: 0; flex: 0 0 auto; }
.gm-option:has(input:checked) { border-color: var(--rn-primary); background: var(--rn-primary-soft); }
.gm-dish-foot, .gm-cart-foot, .gm-table-foot { gap: .6rem; flex-wrap: nowrap; }
.gm-dish-foot[hidden] { display: none !important; }
.gm-qty { display: inline-flex; align-items: center; gap: .5rem; }
.gm-qty .btn { width: 2.6rem; height: 2.6rem; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.gm-qty span { min-width: 1.5rem; text-align: center; font-weight: 800; font-size: 1.1rem; }
.gm-qty-sm .btn { width: 2.1rem; height: 2.1rem; }
.gm-line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--rn-border); }
.gm-line-text { display: flex; flex-direction: column; min-width: 0; }
.gm-line-text small { color: var(--rn-text-muted); }
.gm-line-text .num { color: var(--rn-primary); font-weight: 700; font-size: .9rem; }
.gm-line-sum { border-bottom: 0; padding: .4rem 0; }
.gm-cart-sum { display: flex; flex-direction: column; line-height: 1.2; }
.gm-cart-sum span { font-size: .8rem; color: var(--rn-text-muted); }
.gm-cart-sum b { font-size: 1.15rem; }
.gm-sub { font-size: .95rem; font-weight: 800; margin: 1rem 0 .25rem; }
.gm-sent { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; margin-bottom: .45rem; border-radius: 10px; background: var(--rn-bg); }
.gm-sent > i { font-size: 1.2rem; color: var(--rn-primary); }
.gm-sent-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gm-sent-text small { color: var(--rn-text-muted); }
.gm-sent-1 { background: var(--rn-accent-soft); }
.gm-sent-2 { background: var(--rn-success-soft); }
.gm-sent-3 { background: var(--rn-danger-soft); }
.gm-state { flex: 0 0 auto; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--rn-bg); color: var(--rn-text-muted); }
.gm-state-cooking { background: var(--rn-accent-soft); color: var(--rn-accent-text); }
.gm-state-ready { background: var(--rn-success-soft); color: var(--rn-success); }
.gm-state-served { background: var(--rn-primary-soft); color: var(--rn-primary); }

/* Guests' requests on the floor and an order page (phase 10): a panel of cards (orders to review, calls to answer), a mark on the
   tables that called. */
.gr-panel { margin-bottom: .9rem; padding: .7rem .8rem; border-radius: var(--rn-radius); background: #fff; border: 2px solid #fde1b0;
    box-shadow: 0 6px 18px rgba(249, 170, 51, .18); }
.gr-panel[hidden] { display: none; }
.gr-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; color: var(--rn-accent-text); }
.gr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .gr-list { grid-template-columns: 1fr; } }
.gr-card { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; background: var(--rn-bg); }
.gr-kind-1 { background: var(--rn-primary-soft); }
.gr-kind-2, .gr-kind-3 { background: var(--rn-accent-soft); }
.gr-icon { font-size: 1.35rem; color: var(--rn-primary); }
.gr-kind-2 .gr-icon, .gr-kind-3 .gr-icon { color: var(--rn-accent-text); animation: rf-ready-pulse 1.6s ease-in-out infinite; border-radius: 50%; }
.gr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.gr-text small { color: var(--rn-text-muted); }
.gr-quote { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-note { padding: .5rem .7rem; margin-bottom: .6rem; border-radius: 10px; background: var(--rn-accent-soft); color: var(--rn-accent-text); }
.gr-note[hidden], .gr-error[hidden] { display: none; }
.gr-line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--rn-border); }
.gr-line-off { opacity: .45; text-decoration: line-through; }
.gr-line-text { display: flex; flex-direction: column; min-width: 0; }
.gr-line-text small { color: var(--rn-text-muted); }
.gr-qty { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.gr-qty .btn { width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.gr-qty span { min-width: 1.4rem; text-align: center; font-weight: 800; }
.gr-foot { gap: .5rem; flex-wrap: nowrap; }
.rf-table { position: relative; }
.rf-guest { position: absolute; top: -.55rem; inset-inline-end: -.4rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--rn-accent); color: #3b2300; box-shadow: 0 2px 8px rgba(16, 24, 40, .25); animation: rf-ready-pulse 1.4s ease-in-out infinite; }
.rf-guest[hidden] { display: none; }
.rf-calling { border-color: var(--rn-accent); }
@media (prefers-reduced-motion: reduce) { .rf-guest, .gr-kind-2 .gr-icon, .gr-kind-3 .gr-icon { animation: none; } }

/* Settings → Restaurant: the QR codes card; the printed table cards (Restaurant/QrCards). */
.qr-preview { width: 9rem; height: 9rem; flex: 0 0 auto; border: 1px solid var(--rn-border); border-radius: 10px; padding: .35rem; background: #fff; }
.qr-preview svg { width: 100%; height: 100%; display: block; }
.qr-link { font-size: .8rem; word-break: break-all; direction: ltr; text-align: start; }
.qr-cats { max-height: 12rem; overflow-y: auto; }
.qr-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5mm; padding: 5mm; background: #fff; }
.qr-card { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 1.5mm; height: 90mm; padding: 3mm 4mm;
    border: 1.5px dashed #c3ccd9; border-radius: 4mm; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.qr-card-brand { display: flex; align-items: center; gap: 2.5mm; max-width: 100%; }
.qr-card-brand img { height: 10mm; width: auto; max-width: 30mm; object-fit: contain; }
.qr-card-brand b { font-size: 13pt; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-card-code { width: 42mm; height: 42mm; }
.qr-card-code svg { width: 100%; height: 100%; display: block; }
.qr-card-table { font-size: 17pt; font-weight: 800; line-height: 1.1; color: var(--rn-primary); }
.qr-card-table small { display: block; font-size: 9pt; font-weight: 600; color: #475569; }
.qr-card-hint { font-size: 9.5pt; font-weight: 600; color: #1b2636; }
.qr-card-wifi { font-size: 8pt; color: #475569; direction: ltr; }
.qr-sheet-big { grid-template-columns: 1fr; }
.qr-sheet-big .qr-card { height: 255mm; gap: 8mm; padding: 14mm; border-width: 2px; }
.qr-sheet-big .qr-card-code { width: 120mm; height: 120mm; }
.qr-sheet-big .qr-card-brand img { height: 22mm; max-width: 70mm; }
.qr-sheet-big .qr-card-brand b { font-size: 26pt; }
.qr-sheet-big .qr-card-table { font-size: 30pt; }
.qr-sheet-big .qr-card-hint { font-size: 16pt; }

/* ---------- repairs (2026-10-28): what the customer wrote keeps its lines; the steps as a timeline ---------- */
.repair-text { white-space: pre-line; }
.repair-facts dt { font-weight: 600; color: var(--bs-secondary-color); }
.repair-facts dd { margin-bottom: .5rem; }
.repair-problem { max-width: 18rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.repair-steps li { display: flex; gap: .75rem; position: relative; padding-bottom: .9rem; }
.repair-steps li:last-child { padding-bottom: 0; }
.repair-steps li > i { flex: 0 0 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--rn-primary-soft, #e8eef7); color: var(--rn-primary); z-index: 1; }
.repair-steps li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--bs-border-color); }

/* ---------- hotels (phase 11): setup, rate plans, prices by day ---------- */
/* Short tables inside a scroll box on phones: the heading stays in its place (a sticky one would cover the first row). */
.app-content .table.hs-static > thead > tr > th { position: static; }
.hr-floor { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--rn-border); }
.hr-floor:last-child { border-bottom: 0; }
.hr-floor-name { flex: 0 0 5.5rem; font-weight: 600; font-size: .82rem; color: var(--bs-secondary-color); padding-top: .35rem; }
.hr-rooms { display: flex; flex-wrap: wrap; gap: .35rem; }
.hr-room { border: 1px solid var(--rn-border); border-radius: .5rem; background: var(--rn-surface); padding: .2rem .5rem; min-width: 3.4rem;
    font-weight: 700; line-height: 1.15; text-align: center; color: var(--rn-text); }
.hr-room small { display: block; font-weight: 500; font-size: .66rem; color: var(--bs-secondary-color); }
.hr-room:hover, .hr-room:focus-visible { border-color: var(--rn-primary); color: var(--rn-primary); }
.hr-room.hr-off { opacity: .45; text-decoration: line-through; }
@media (max-width: 575.98px) { .hr-floor { flex-direction: column; gap: .3rem; } .hr-floor-name { flex-basis: auto; padding-top: 0; } }
.hs-tax { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--rn-border); }
.hs-tax-icon { flex: 0 0 2.1rem; height: 2.1rem; border-radius: .6rem; display: grid; place-items: center;
    background: color-mix(in srgb, var(--rn-primary) 10%, var(--rn-surface)); color: var(--rn-primary); }
.hs-rooms-add { display: flex; flex-wrap: wrap; gap: .5rem; }
.hs-rooms-add .hs-numbers { flex: 2 1 14rem; }
.hs-rooms-add .hs-type { flex: 1 1 10rem; width: auto; }
.hs-rooms-add .hs-floor { flex: 0 1 7rem; }

.rp-derived-only, .rp-person-label { display: none; }
.rp-derived .rp-derived-only { display: block; }
.rp-derived .rp-own, .rp-derived .rp-price { display: none; }
.rp-person .rp-room-col, .rp-person .rp-room-label { display: none; }
.rp-person .rp-person-label { display: inline; }
.rp-prices .rp-price input { max-width: 9rem; }

.rg-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.rg-plans { display: flex; flex-wrap: wrap; gap: .35rem; }
.rg-plans .pos-tab { text-decoration: none; }
.rg-nav { flex-wrap: wrap; }
.rg-nav input[type=date] { width: 9.5rem; }
.rg-legend { display: inline-flex; align-items: center; gap: .3rem; }
.rg-swatch { display: inline-block; width: 1rem; height: .8rem; border-radius: .2rem; border: 1px solid var(--rn-accent); background: #fff4dc; }
.rg-wrap { overflow-x: auto; border-top: 1px solid var(--rn-border); }
.app-content .table.rate-grid > thead > tr > th { position: static; }
.rate-grid { width: max-content; min-width: 100%; }
.rate-grid th, .rate-grid td { text-align: center; vertical-align: middle; padding: .2rem .25rem; border-inline-start: 1px solid var(--rn-border); }
.rate-grid .rg-type { text-align: start; position: sticky; inset-inline-start: 0; z-index: 2; background: var(--rn-surface); min-width: 12rem;
    border-inline-start: 0; box-shadow: inset -1px 0 0 var(--rn-border); }
.app-content .table.rate-grid > thead > tr > th.rg-type { position: sticky; top: auto; z-index: 3; }
.rate-grid thead .rg-day { min-width: 4.7rem; line-height: 1.1; }
@media (max-width: 575.98px) { .rate-grid .rg-type { min-width: 7.5rem; max-width: 9.5rem; } }
.rate-grid thead .rg-day small { display: block; font-weight: 500; font-size: .68rem; opacity: .8; }
.rate-grid .rg-weekend { background: #fff8ea; }
.rate-grid thead .rg-weekend { background: color-mix(in srgb, var(--rn-accent) 18%, var(--rn-surface)); }
.rate-grid thead .rg-today { box-shadow: inset 0 -3px 0 var(--rn-accent); }
.rate-grid .rg-price-row td { padding-bottom: 0; border-bottom: 0; }
.rg-input { width: 4.4rem; text-align: center; padding: .2rem .2rem; font-size: .85rem; border: 1px solid var(--rn-border); border-radius: .35rem; background: var(--rn-surface); }
.rg-input:focus { outline: 2px solid color-mix(in srgb, var(--rn-primary) 45%, transparent); border-color: var(--rn-primary); }
.rg-value { font-size: .85rem; }
.rg-own .rg-input, .rg-own .rg-value { border-color: var(--rn-accent); background: #fff4dc; font-weight: 700; }
.rate-grid .rg-stop { background: #fdeeee; }
.rg-stop .rg-input, .rg-stop .rg-value { text-decoration: line-through; color: #b02a37; }
.rg-flags { font-size: .72rem; height: 1.45rem; white-space: nowrap; }
.rg-flags .badge { font-size: .66rem; padding: .1rem .3rem; }
.rg-change-types { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rg-week { display: flex; flex-wrap: wrap; gap: .3rem; }
.rg-week .btn { min-width: 4.5rem; }
.rg-check { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--rn-border); border-radius: 999px; padding: .2rem .65rem; font-size: .85rem; }

/* ---------- hotels 11a.2: a booking and the room chart ---------- */
.bk-results { inset-inline: calc(var(--bs-gutter-x) * .5); top: 100%; z-index: 30; max-height: 18rem; overflow-y: auto; }
.bk-chip { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--rn-border); border-radius: .5rem; padding: .375rem .75rem; min-height: 2.4rem;
    background: color-mix(in srgb, var(--rn-primary) 5%, var(--rn-surface)); }
.bk-stay { padding: .9rem 1rem; border-top: 1px solid var(--rn-border); }
.bk-stay:first-child { border-top: 0; }
.bk-stay.bk-closed { background: var(--bs-tertiary-bg); }
.bk-stay-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.bk-grid { display: grid; gap: .5rem; align-items: end;
    grid-template-columns: minmax(9rem, 1.5fr) repeat(2, minmax(8.5rem, 1fr)) auto repeat(2, 4.2rem) minmax(9rem, 1.5fr) minmax(7rem, 1fr) 6.5rem; }
@media (max-width: 1399.98px) { .bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk-f { display: flex; flex-direction: column; gap: .2rem; min-width: 0; margin: 0; }
.bk-f > span { font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; }
.bk-nights { padding-bottom: .45rem; }
.bk-quote { margin-top: .6rem; }
.bk-nightlist { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bk-night { display: inline-flex; flex-direction: column; align-items: center; border: 1px solid var(--rn-border); border-radius: .4rem; padding: .2rem .35rem; font-size: .8rem; margin: 0; }
.bk-night small { color: var(--bs-secondary-color); font-size: .68rem; }
.bk-night input { width: 5rem; text-align: center; }
.bk-night.bk-typed { border-color: var(--rn-accent); background: #fff4dc; }
.bk-history { margin-top: .5rem; }
.bk-history li { padding: .25rem 0; border-bottom: 1px dashed var(--rn-border); }
.bk-totals { font-size: 1.05rem; }

.tc-card { overflow: hidden; }
.tc-scroll { overflow-x: auto; }
.tc { --label: 7.5rem; --day-min: 3.4rem; position: relative; min-width: calc(var(--label) + var(--days) * var(--day-min)); }
.tc-row, .tc-marks { display: grid; grid-template-columns: var(--label) repeat(var(--halves), minmax(0, 1fr)); }
.tc-marks { position: absolute; inset: 0; pointer-events: none; }
.tc-marks i { grid-row: 1; border-inline-start: 1px solid var(--rn-border); }
.tc-marks .tc-weekend { background: #fff8ea; }
.tc-marks .tc-today { background: color-mix(in srgb, var(--rn-accent) 14%, transparent); }
.tc-row { position: relative; min-height: 2.2rem; border-bottom: 1px solid var(--rn-border); align-items: center; }
.tc-label { grid-column: 1; grid-row: 1; position: sticky; inset-inline-start: 0; z-index: 3; align-self: stretch; display: flex; align-items: center; gap: .35rem;
    padding: 0 .6rem; background: var(--rn-surface); border-inline-end: 1px solid var(--rn-border); font-size: .88rem; overflow: hidden; white-space: nowrap; }
.tc-head { min-height: 2.8rem; }
.tc-day { grid-row: 1; text-align: center; line-height: 1.1; z-index: 1; }
.tc-day small { display: block; font-size: .68rem; color: var(--bs-secondary-color); }
.tc-day-today b { color: #c77700; }
.tc-type { min-height: 1.9rem; font-weight: 600; background: color-mix(in srgb, var(--rn-primary) 5%, transparent); }
.tc-type .tc-label { background: color-mix(in srgb, var(--rn-primary) 8%, var(--rn-surface)); }
.tc-left { grid-row: 1; text-align: center; font-size: .78rem; color: var(--rn-primary); z-index: 1; }
.tc-left.tc-full { color: #b02a37; font-weight: 700; }
.tc-room { cursor: cell; }
.tc-waiting { min-height: 1.9rem; background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0, 0, 0, .03) 6px, rgba(0, 0, 0, .03) 12px); }
.tc-bar { grid-row: 1; z-index: 2; margin: 3px 1px; height: 1.6rem; min-width: 0; border-radius: .45rem; display: flex; align-items: center; gap: .25rem; padding: 0 .45rem;
    font-size: .76rem; font-weight: 600; color: #fff; text-decoration: none; overflow: hidden; white-space: nowrap; cursor: pointer; }
.tc-bar:hover { color: #fff; filter: brightness(1.08); }
.tc-bar span { overflow: hidden; text-overflow: ellipsis; }
.tc-bar .bi-star-fill { color: #ffd65a; font-size: .7rem; }
.tc-st-1 { background: var(--rn-primary); }
.tc-st-2 { background: #198754; }
.tc-st-3 { background: #8a94a6; }
.tc-bar.tc-before { border-start-start-radius: 0; border-end-start-radius: 0; }
.tc-bar.tc-after { border-start-end-radius: 0; border-end-end-radius: 0; }
.tc-bar[draggable=true] { cursor: grab; }
.tc-drop { outline: 2px dashed var(--rn-accent); outline-offset: -2px; }
.tc-hk { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.hk-clean { background: #198754; }
.hk-dirty { background: #dc3545; }
.hk-inspected { background: #0d6efd; }
.tc-legend { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; }
.tc-swatch { width: 1rem; height: .7rem; border-radius: .2rem; display: inline-block; }
@media (max-width: 575.98px) { .tc { --label: 4.5rem; --day-min: 2.6rem; } }

/* ---------- hotels 11a.3: a stay, its bill, check-in ---------- */
.stay-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; }
.stay-facts > div { border: 1px solid var(--rn-border); border-radius: .6rem; padding: .45rem .7rem; display: flex; flex-direction: column; min-width: 0; }
.stay-facts small { color: var(--bs-secondary-color); font-size: .74rem; }
.stay-facts b { font-size: 1.02rem; }
.stay-facts span { font-size: .8rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-guests input, .ci-guests select { min-width: 7rem; }
.ci-guests td:nth-child(2) input { min-width: 12rem; }
.bill-window { border-top: 1px solid var(--rn-border); padding: .75rem 1rem 1rem; }
.bill-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.bill-balance { font-size: .95rem; }
.bill-lines td { padding-top: .3rem; padding-bottom: .3rem; }
.bill-lines .bill-pay td { color: #146c43; }
.bill-lines .bill-voided td { text-decoration: line-through; color: var(--bs-secondary-color); }
.bill-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.inv-act-primary { color: var(--rn-primary); border-color: var(--rn-primary); }
.regcard-facts { width: 100%; margin-bottom: 1rem; }
.regcard-row td { height: 2.2rem; }

/* ---------- hotels 11a.5: housekeeping ---------- */
.hk-summary { display: flex; flex-wrap: wrap; gap: .4rem; }
.hk-chip { border: 1px solid var(--rn-border); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; background: var(--rn-surface); }
.hk-dirty-chip { border-color: #f1aeb5; background: #fdf0f1; }
.hk-clean-chip { border-color: #a3cfbb; background: #eef8f2; }
.hk-inspected-chip { border-color: #9ec5fe; background: #eef4ff; }
.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .hk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hk-room { position: relative; }
.hk-face { width: 100%; border: 1px solid var(--rn-border); border-inline-start: 5px solid #198754; border-radius: .7rem; background: var(--rn-surface);
    padding: .5rem .65rem; display: grid; grid-template-columns: 1fr auto; gap: .1rem .4rem; text-align: start; color: var(--rn-text); }
.hk-dirty .hk-face { border-inline-start-color: #dc3545; background: #fff7f7; }
.hk-inspected .hk-face { border-inline-start-color: #0d6efd; }
.hk-blocked .hk-face { border-inline-start-color: #6c757d; background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 6px, #ececec 6px, #ececec 12px); }
.hk-number { font-size: 1.25rem; font-weight: 800; }
.hk-type { font-size: .72rem; color: var(--bs-secondary-color); align-self: center; }
.hk-state, .hk-status, .hk-who { grid-column: 1 / -1; font-size: .78rem; }
.hk-status { font-weight: 700; }
.hk-dirty .hk-status { color: #b02a37; }
.hk-who { color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-menu { min-width: 15rem; }
.hk-btn-clean { border: 1px solid #198754; color: #198754; }
.hk-btn-dirty { border: 1px solid #dc3545; color: #dc3545; }
.hk-btn-inspected { border: 1px solid #0d6efd; color: #0d6efd; }
.hk-btn-clean.active { background: #198754; color: #fff; }
.hk-btn-dirty.active { background: #dc3545; color: #fff; }
.hk-btn-inspected.active { background: #0d6efd; color: #fff; }
.tc-block { grid-row: 1; z-index: 1; margin: 3px 0; height: 1.6rem; border-radius: .3rem; display: flex; align-items: center; justify-content: center; color: #6c757d;
    background: repeating-linear-gradient(45deg, #e9ecef, #e9ecef 5px, #dee2e6 5px, #dee2e6 10px); font-size: .75rem; }

/* The police guest list (phase 11a.7): A4 across when printed, a companion's row a little in. */
.gl-table th { white-space: nowrap; }
.gl-table td { font-size: .85rem; }
.gl-table td .num { white-space: nowrap; }
.gl-companion td:nth-child(2) { padding-inline-start: 1.2rem; font-weight: 500; }
.gl-print-head { justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #114987; padding-bottom: .4rem; margin-bottom: .6rem; }
.gl-print-hotel { font-size: 1.25rem; font-weight: 800; color: #114987; }
.gl-print-title { font-size: 1rem; font-weight: 700; }
.gl-sign { justify-content: space-around; margin-top: 2.5rem; }
.gl-sign > div { min-width: 14rem; text-align: center; border-top: 1px solid #333; padding-top: .3rem; font-size: .85rem; }
@media print {
    .gl-table { font-size: 8pt; width: 100% !important; }
    .gl-table thead th { position: static !important; white-space: normal !important; vertical-align: bottom; }
    .table-responsive:has(> .gl-table) { overflow: visible !important; }
    .gl-table th, .gl-table td { padding: 2px 4px !important; border: 1px solid #999 !important; }
    .gl-table a { color: inherit; }
    .gl-table .badge { border: 1px solid #999; color: #000; background: none !important; }
}

/* The room type window's notes (2026-10-29): what each field is for. */
.tm-help { padding-inline-start: 1.1rem; margin-top: .4rem; }
.tm-help li { margin-bottom: .15rem; }
/* The police's electronic guest list (/p/{token}, 2026-10-29): an official, plain page; the PIN first. */
.pz-body { background: #f3f5f8; min-height: 100vh; }
.pz-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.2rem; background: #fff;
    border-bottom: 3px solid var(--rn-primary); }
.pz-brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pz-brand h1 { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--rn-primary); }
.pz-brand span { font-size: .85rem; color: var(--bs-secondary-color); }
.pz-logo { height: 42px; width: auto; }
.pz-pin { display: flex; justify-content: center; padding: 3rem 1rem; }
.pz-pin form { max-width: 24rem; width: 100%; text-align: center; }
.pz-pin-icon { font-size: 2.6rem; color: var(--rn-primary); }
.pz-pin input { letter-spacing: .4em; font-weight: 700; }
.pz-main { padding: 1rem 1.2rem 2rem; }
.pz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.pz-title { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .6rem; }
.pz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.pz-cards > div { background: #fff; border: 1px solid var(--rn-border); border-radius: .6rem; padding: .5rem .8rem; display: flex; flex-direction: column;
    font-size: .8rem; color: var(--bs-secondary-color); }
.pz-cards .num { font-size: 1.35rem; font-weight: 800; color: var(--rn-text); }
.pz-came { border-inline-start: 4px solid #198754 !important; }
.pz-left { border-inline-start: 4px solid #6c757d !important; }
.pz-row-left td { color: #6c757d; }
.police-pin { font-size: 1.3rem; font-weight: 800; letter-spacing: .25em; background: #f1f4f8; border-radius: .4rem; padding: 0 .5rem; }
.police-views li { padding: .15rem 0; border-bottom: 1px dashed var(--rn-border); }
@media print {
    .pz-body { background: #fff; }
    .pz-head { padding: 0 0 .4rem; }
    .pz-main { padding: 0; }
    .pz-cards > div { padding: .2rem .5rem; }
}
/* ---------------------------------------------------------------- online payments (2026-11-01): FIB, ZainCash, FastPay */
.pay-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 4.6rem; padding: .15rem .55rem; border-radius: .45rem;
    font-weight: 800; font-size: .85rem; letter-spacing: 0; color: #fff; background: #5b6470; direction: ltr; }
.pay-logo.pay-fib { background: #0a8f83; }
.pay-logo.pay-zaincash { background: #1d1d1b; }
.pay-logo.pay-fastpay { background: #d7262f; }
.pay-body .pay-card { width: min(440px, 100%); padding: 1.5rem 1.25rem 1rem; }
.pay-brand { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: 1rem; }
.pay-brand-logo { max-height: 56px; max-width: 70%; object-fit: contain; }
.pay-brand-name { font-weight: 800; font-size: 1.05rem; }
.pay-what { font-weight: 700; }
.pay-party { color: var(--rn-text-muted); font-size: .9rem; margin-bottom: .5rem; }
.pay-amount-label { color: var(--rn-text-muted); font-size: .85rem; margin-top: .75rem; text-align: center; }
.pay-amount { font-size: 2rem; font-weight: 800; color: var(--rn-primary); text-align: center; line-height: 1.2; }
.pay-amount small { font-size: 1rem; font-weight: 600; color: var(--rn-text-muted); }
.pay-original { text-align: center; color: var(--rn-text-muted); font-size: .9rem; }
.pay-choose { margin: 1rem 0 .4rem; font-weight: 700; font-size: .9rem; }
.pay-providers { display: grid; gap: .5rem; }
.pay-provider { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .7rem .8rem;
    border: 1px solid var(--rn-border); border-radius: .6rem; background: #fff; color: inherit; font-weight: 600; }
.pay-provider:hover:not(:disabled) { border-color: var(--rn-primary); background: #f5f8fc; }
.pay-provider:disabled { opacity: .55; }
.pay-provider.pay-busy::after { content: ""; width: 1rem; height: 1rem; border: 2px solid var(--rn-primary); border-right-color: transparent;
    border-radius: 50%; animation: spinner-border .75s linear infinite; }
.pay-providers .pay-provider .pay-logo { min-width: 6rem; font-size: .95rem; padding: .3rem .7rem; }
.pay-note { margin-top: .9rem; font-size: .78rem; color: var(--rn-text-muted); text-align: center; }
.pay-qr { display: block; width: min(240px, 80%); height: auto; margin: .4rem auto .6rem; image-rendering: pixelated; }
.pay-code { font-size: 1.5rem; font-weight: 800; letter-spacing: .12em; direction: ltr; }
.pay-foot { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px dashed var(--rn-border); }
.pay-foot img { height: 24px; width: auto; opacity: .75; }
.gm-pay { margin-top: .75rem; padding: .6rem .7rem; border: 1px solid #cfe3d8; border-radius: .6rem; background: #f3faf6; }
.gm-pay-title { display: flex; align-items: center; gap: .25rem; font-weight: 700; margin-bottom: .45rem; }
.gm-pay-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.gm-pay-buttons .pay-provider { width: auto; flex: 1 1 6.5rem; justify-content: center; padding: .45rem .5rem; }
.gm-min-note { padding: .45rem .6rem; border-radius: .5rem; background: #fff4d6; color: #8a5a00; font-weight: 600; }
.zone-line { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; }
.zone-line .flex-grow-1 { min-width: 0; }
.zone-amount { flex: none; width: 5.8rem; }
.zone-btns { flex: none; width: 5.4rem; display: flex; gap: .25rem; justify-content: flex-end; }
.zone-head { padding-bottom: 0; }
.gr-wa-bar { position: fixed; inset-inline-start: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1090; display: flex; align-items: center; gap: .6rem;
    padding: .5rem .7rem; background: #fff; border: 1px solid #b7e3c6; border-radius: .7rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
[dir=rtl] .gr-wa-bar { transform: translateX(50%); }

/* The partners' equity (2026-11-06): its eleven columns fit beside the side menu — the headings wrap, the cells are narrower. */
#partners-table thead th { white-space: normal; vertical-align: bottom; padding-inline: .5rem; line-height: 1.25; }
#partners-table tbody td, #partners-table tfoot td { padding-inline: .5rem; }

/* The salesman's app (2026-11-06): big figures and big buttons, made for a phone in one hand. */
.sm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
.sm-kpis-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-kpi { background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: var(--rn-radius); padding: .6rem .75rem; display: flex; flex-direction: column; min-width: 0; }
.sm-kpis-board .sm-kpi { background: color-mix(in srgb, var(--rn-primary) 4%, var(--rn-surface)); }
.sm-kpi-wide { grid-column: span 2; }
.sm-kpi-label { font-size: .78rem; color: var(--rn-text-muted); }
.sm-kpi-value { font-weight: 800; font-size: 1.2rem; line-height: 1.3; }
.sm-kpi-value small { font-size: .7rem; font-weight: 600; color: var(--rn-text-muted); }
.sm-kpi-note { font-size: .75rem; color: var(--rn-text-muted); }
.sm-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.sm-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 5.25rem; padding: .6rem;
    border: 1px solid var(--rn-border); border-radius: var(--rn-radius); background: var(--rn-surface); color: var(--rn-primary);
    font-weight: 700; text-align: center; text-decoration: none; }
.sm-action i { font-size: 1.6rem; }
.sm-action:hover { background: color-mix(in srgb, var(--rn-primary) 6%, var(--rn-surface)); color: var(--rn-primary); }
.sm-action-primary { background: var(--rn-primary); border-color: var(--rn-primary); color: #fff; }
.sm-action-primary:hover { background: color-mix(in srgb, var(--rn-primary) 85%, #000); color: #fff; }
.sm-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem;
    background: color-mix(in srgb, var(--rn-primary) 9%, var(--rn-surface)); color: var(--rn-primary); }
.sm-chip-sale { background: color-mix(in srgb, #198754 12%, var(--rn-surface)); color: #146c43; }
.sm-chip-money { background: color-mix(in srgb, var(--rn-accent) 22%, var(--rn-surface)); color: #8a5a00; }
.sm-chip-none { background: color-mix(in srgb, #6c757d 12%, var(--rn-surface)); color: #495057; }
.sm-list { display: grid; gap: .5rem; }
.sm-shop-pic { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--rn-radius); border: 1px solid var(--rn-border); flex-shrink: 0; }
@media (max-width: 575.98px) {
    .sm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-head p { margin-bottom: 0; }
}

/* Scientific names and substitutes (2026-11-07) */
.generic-tag { display: inline-flex; align-items: center; gap: .2rem; margin-inline-start: .5rem; color: #0f766e; font-size: .78rem; }
.pos-subs { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .5rem; padding: .05rem .45rem; border: 1px solid #0f766e;
    border-radius: 999px; color: #0f766e; background: #f0fdfa; font-size: .75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pos-subs:hover { background: #ccfbf1; }
.pos-subs-out { opacity: .65; }
.held-orders { color: #b45309; font-size: .75rem; font-weight: 600; }
.pos-short { border-color: #b45309; color: #b45309; background: #fffbeb; }
.pos-short:hover { background: #fef3c7; }
/* The list's form holds the table card: the card stays a child of .list-page's column. */
#sh-form { display: contents; }
.item-subs-list a { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); text-decoration: none; }
.item-subs-list a:last-child { border-bottom: 0; }
/* Free goods offers (2026-11-07, "10+2" for a while): a tag on an item, and today's offers for salesmen. */
.offer-chip { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .35rem; padding: 0 .45rem; border-radius: 1rem;
    background: #e6f4ea; color: #1e7b3a; font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.offer-chip-lg { font-size: .8rem; padding: .1rem .55rem; margin-inline-start: 0; }
.pos-overdue.pos-licence-soon { background: var(--rn-accent-soft); color: var(--rn-accent-text); border-color: transparent; }
/* Proof of delivery (2026-11-07): the signature pad and the signature kept. */
.dl-pad { display: block; width: 100%; height: 220px; border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: #fff; touch-action: none; cursor: crosshair; }
.dl-signature { display: block; max-width: 100%; max-height: 160px; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: #fff; }
/* A customer's ordering page (2026-11-07, /o/{token}). */
.b2b-body { background: var(--bs-tertiary-bg); padding-bottom: 9rem; }
.b2b-head { background: #fff; border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 10; }
.b2b-bar { position: fixed; inset-inline: 0; bottom: 0; background: #fff; border-top: 1px solid var(--bs-border-color); box-shadow: 0 -4px 14px rgba(0,0,0,.06); z-index: 10; }
.b2b-pic { width: 52px; height: 52px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.b2b-pic-none { display: inline-flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); color: var(--rn-text-muted); font-size: 1.3rem; }
.b2b-qty { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.b2b-qty .b2b-q { width: 3.6rem; }
.sm-visit-photo { width: 96px; height: 96px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--bs-border-color); }

/* Returnable crates (crates part, 2026-11-08): the button lights up while crates are typed; the window's boxes. */
.crates-button.crates-on { border-color: var(--rn-accent); background: color-mix(in srgb, var(--rn-accent) 14%, transparent); color: #6b4300; }
.crate-table input { max-width: 7rem; }
/* Inside the window the lists' sticky heading would sit under the app's top bar, over the first row. */
.app-content .table.crate-table > thead > tr > th { top: 0; }
@media (max-width: 767.98px) {
    .crate-table input { max-width: none; font-size: 16px; }
    .crate-table td[data-after] { font-weight: 700; }
}
/* Returnable crates on a printed invoice (crates part): a small table under the notes; on the 80 mm receipt, a line per kind. */
.receipt-crates { margin-top: 3mm; }
.ia4-crates { width: 100%; border-collapse: collapse; font-size: 9pt; }
.ia4-crates th { font-weight: 600; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding: 1mm 1.5mm; text-align: start; }
.ia4-crates td { padding: 1mm 1.5mm; border-bottom: 1px solid #f1f5f9; }
.ia4-crates .end { text-align: end; }

/* Equipment lent to customers (2026-11-09): a piece at a customer's (blue), the search lists under their boxes. */
.eq-pill-out { background: #e8f0fb; color: #114987; }
.eq-party-list { z-index: 20; max-height: 16rem; overflow-y: auto; }

/* The note on a sale (2026-11-11): a thin amber line above the footer, the whole text on one line (… when longer). */
.pos-note-line { display: flex; align-items: center; gap: .5rem; background: #fff4e0; border: 1px solid #f9d58f; border-radius: .5rem;
    padding: .2rem .5rem; margin-bottom: .4rem; font-size: .875rem; }
.pos-note-line[hidden] { display: none; }
.pos-note-open { flex: 1; min-width: 0; text-align: start; border: 0; background: none; padding: 0; color: #8a4b00;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The sale's date (2026-11-11): amber while an old invoice is being entered. */
#pos-date.pos-date-old { background: #fff4e0; border-color: var(--rn-accent); color: #8a4b00; font-weight: 600; }

/* Looking things up without the internet (2026-11-10): an item's units, prices and stock open under its name. */
.ol-units > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.ol-units > summary::-webkit-details-marker { display: none; }
.ol-units > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .7em; font-weight: normal; color: var(--bs-secondary-color); }
.ol-units[open] > summary::after { content: "\F286"; }

/* The salesmen's performance (2026-11-11): the best of the period on cards, and gold / silver / bronze ranks. */
.perf-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.perf-leader { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; background: linear-gradient(135deg, #fff8e8, #fff);
    border: 1px solid #f6dfa8; }
.perf-leader-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--rn-accent); color: #fff; font-size: 1.15rem; }
.perf-leader-label { font-size: .75rem; color: #8a6200; font-weight: 600; }
.perf-leader-name { font-weight: 700; font-size: 1rem; color: var(--rn-primary); }
.perf-leader-value { font-size: .85rem; color: #475467; }
.perf-rank { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; font-weight: 700;
    background: #f2f4f7; color: #475467; }
.perf-rank-1 { background: #f9c33f; color: #5c3d00; }
.perf-rank-2 { background: #d0d5dd; color: #344054; }
.perf-rank-3 { background: #e7a978; color: #5a2d0c; }
#perf-table thead th { white-space: normal; vertical-align: bottom; }
.perf-rank-lg { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; flex: none; }

/* Teams and areas (2026-11-11): the salesman's area chips scroll on one line on a phone; a team's salesmen as ticks in two columns. */
.sm-areas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; }
.sm-areas > .btn { flex: none; white-space: nowrap; }
.team-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .75rem; max-height: 16rem; overflow-y: auto; }
/* New customers waiting (2026-11-11): the shop's picture beside the name. */
.nc-picture { width: 3rem; height: 3rem; object-fit: cover; border-radius: .5rem; flex: none; }
.pending-pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
    background: #fff4e0; color: #8a4b00; border: 1px solid #f6d29b; white-space: nowrap; }
/* A suggested order (2026-11-11): what the customer missed last time, and what is due by their usual days. */
.suggest-chip { display: inline-block; font-size: .7rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.suggest-missed { background: #fdecec; color: #b42318; border: 1px solid #f5c2c0; }
.suggest-due { background: #eef4ff; color: #114987; border: 1px solid #c9dafc; }

/* Doctors (2026-11-11): the class as a coloured letter, the doctor's answer, the visit page's search lists. */
.doctor-class { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 700; font-size: .8rem; }
.doctor-class-A { background: #114987; color: #fff; }
.doctor-class-B { background: #dbe7f7; color: #114987; }
.doctor-class-C { background: #f2f4f7; color: #475467; }
.doctor-answer { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.doctor-answer-Prescribes { background: #e8f5ee; color: #027a48; }
.doctor-answer-WillPrescribe { background: #eef4ff; color: #114987; }
.doctor-answer-Interested { background: #fff4e0; color: #8a4b00; }
.doctor-answer-NotInterested { background: #f2f4f7; color: #475467; }
.dv-results { z-index: 20; max-height: 18rem; overflow-y: auto; }
.dv-chip { font-size: .85rem; padding: .35rem .55rem; }
.btn-close-sm { width: .55em; height: .55em; font-size: .7rem; vertical-align: middle; }