/* =====================================================================
   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: 190px; height: auto; margin-inline: auto; }
.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; }

/* ---------------------------------------------------------------- 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 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-qr { text-align: center; }
.receipt-qr svg { width: 30mm; height: 30mm; }
.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 { text-align: center; margin: 1rem 0; }
@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; }
}
.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);
}

/* ---------- item pictures ---------- */
.item-picture { position: relative; width: 7.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; }
.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; }
/* 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; }
}

/* 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; }
}

/* ---------- A4 invoice ---------- */
.invoice-a4 { max-width: 190mm; margin: 0 auto; padding: 8mm 0; color: #000; background: #fff; font-size: 13px; }
.ia4-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 4mm; border-bottom: 2px solid var(--rn-primary); }
.ia4-head h1 { font-size: 22px; font-weight: 800; margin: 0; color: var(--rn-primary); }
.ia4-title { text-align: end; }
.ia4-doc { font-size: 18px; font-weight: 800; margin-bottom: 1mm; }
.ia4-title table td { padding: .2mm 0 .2mm 4mm; }
.ia4-title table td:first-child { color: #555; }
.ia4-party { margin: 5mm 0; padding: 3mm 4mm; background: #f4f7f8; border-radius: 6px; }
.ia4-label { color: #555; margin-inline-end: 3mm; }
.ia4-lines { width: 100%; border-collapse: collapse; }
.ia4-lines th { background: color-mix(in srgb, var(--rn-primary) 10%, #fff); color: var(--rn-primary); font-weight: 700; padding: 2mm; border-bottom: 2px solid var(--rn-primary); text-align: start; }
.ia4-lines td { padding: 1.8mm 2mm; border-bottom: 1px solid #ddd; }
.ia4-lines .end, .ia4-totals .end { text-align: end; }
.ia4-totals { width: 75mm; margin-inline-start: auto; margin-top: 5mm; border-collapse: collapse; }
.ia4-totals td { padding: 1.2mm 2mm; }
.ia4-totals .grand td { border-top: 2px solid #000; border-bottom: 2px solid #000; font-size: 16px; font-weight: 800; }
.ia4-foot { margin-top: 12mm; text-align: center; color: #555; }
@media print {
    .invoice-a4 { padding: 0; max-width: none; }
    .ia4-lines th, .ia4-party { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- 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 .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; }
.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; }
}
/* Narrower, the table scrolls inside its box: a heading pinned under the top bar would land inside the rows. */
@media (max-width: 991.98px) {
    .app-content .table-responsive .table > thead > tr > th,
    .table-responsive .inv-table thead th { position: static; }
}
@media print {
    .app-content .table > thead > tr > th { position: static; background: #fff; color: #000; }
}

/* ---------- 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 A4 invoice: the brand logo at the top */
.ia4-powered { margin-top: 4mm; opacity: .7; }
.ia4-powered img { height: 22px; width: auto; }

/* ---------- 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); } }
.ia4-business { display: flex; align-items: center; gap: 4mm; }
.ia4-logo { max-height: 22mm; max-width: 60mm; object-fit: contain; }

/* ---------- 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; }
.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; }
.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; }
    .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); }
/* 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: 52px; 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); }
.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); }
.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; }
.setup-rate-hint { margin-top: .35rem; font-size: .85rem; color: var(--rn-text-muted); min-height: 1.3em; }
.setup-rate-hint.is-odd { color: var(--rn-danger); font-weight: 600; }

/* Rates page: a rate that moved more than 20% from the board in force. */
.form-control.rate-jump { border-color: var(--rn-accent); background: var(--rn-accent-soft); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--rn-accent) 30%, transparent); }

/* ---------- sign-in brand panel: the logo large and centred, the slogan under it ---------- */
.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(460px, 82%); 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-line { display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--rn-accent); margin: 2rem 0 1.25rem; }
.auth-hero .auth-hero-slogan { font-size: clamp(1rem, 1.6vw, 1.45rem); font-weight: 400; color: rgba(255, 255, 255, .92); line-height: 1.6; margin: 0; opacity: 1; white-space: nowrap; letter-spacing: -.005em; }
.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; } }


/* ======================================================================= Terazu: the counter ===== */

/* Today's board on the dashboard: one chip per quote, buy in green and sell in red. */
.rate-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.rate-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border-radius: var(--rn-radius-sm);
    background: var(--rn-surface); border: 1px solid var(--rn-border); box-shadow: var(--rn-shadow); color: var(--rn-text); text-decoration: none; }
.rate-chip:hover { border-color: var(--rn-primary); color: var(--rn-text); }
.rate-chip-code { font-weight: 700; direction: ltr; }
.rate-chip-prices { display: inline-flex; gap: .55rem; font-weight: 700; direction: ltr; }
.rate-chip-quote { font-size: .75rem; color: var(--rn-text-muted); }
.rate-chip-empty { border-color: var(--rn-accent); background: var(--rn-accent-soft); color: var(--rn-accent-text); font-weight: 600; }

/* How well the vaults cover what depositors left with us. */
.coverage { display: inline-block; min-width: 4.2rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem; text-align: center; }
.coverage-ok { background: var(--rn-success-soft); color: var(--rn-success); }
.coverage-warn { background: var(--rn-accent-soft); color: var(--rn-accent-text); }
.coverage-bad { background: var(--rn-danger-soft); color: var(--rn-danger); }

/* Trade pages: the switches sit in the card headers; the deal is one row of fields on a wide screen; what comes in
   and goes out shows next to Save. */
.deal-head { flex-wrap: wrap; padding-bottom: .5rem; }
.deal-head > div:not(.deal-switch) { flex: 1 1 16rem; min-width: 0; }
.deal-switch {
    display: inline-flex; gap: .25rem; padding: .25rem; margin-inline-start: auto;
    background: var(--bs-tertiary-bg); border: 1px solid var(--rn-border); border-radius: 12px;
}
.deal-switch label {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 8.5rem;
    padding: .55rem 1.1rem; border-radius: 9px; font-weight: 700; cursor: pointer; user-select: none;
    color: var(--rn-text-muted); transition: background .15s, color .15s, box-shadow .15s;
}
.deal-switch label:hover { color: var(--rn-text); background: var(--rn-surface); }
.deal-switch .btn-check:focus-visible + label { outline: 2px solid var(--rn-primary); outline-offset: 1px; }
.deal-switch .btn-check:checked + label { color: #fff; background: var(--rn-primary); box-shadow: 0 1px 3px rgba(16, 24, 40, .2); }
.deal-switch .btn-check:checked + .deal-switch-buy { background: var(--rn-success); }
.deal-switch .btn-check:checked + .deal-switch-sell { background: var(--rn-danger); }
.deal-switch-plain label { min-width: 0; font-weight: 600; }
@media (max-width: 575.98px) {
    .deal-switch { width: 100%; }
    .deal-switch label { flex: 1; min-width: 0; padding-inline: .5rem; }
}

/* The deal row follows the card's own width (the sidebar takes part of the screen): two fields a row in a narrow
   card, three in a middling one, all of them in one row when they fit. */
.deal-body { container-type: inline-size; }
.deal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
@container (min-width: 600px) { .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 820px) { .deal-grid-currency { grid-template-columns: .8fr 1.2fr 1.2fr 1.4fr; } }
@container (min-width: 1240px) { .deal-grid-metal { grid-template-columns: 1fr 1.3fr .75fr .75fr 1.5fr 1.35fr; } }
/* Narrow: the fields with a unit get the whole width; currency and total pair up last ("USD | 3,727.48"). */
@container (max-width: 599.98px) {
    .dg-weight, .dg-price { grid-column: 1 / -1; }
    .dg-karat { order: 1; } .dg-purity { order: 2; } .dg-weight { order: 3; } .dg-price { order: 4; } .dg-currency { order: 5; } .dg-total { order: 6; }
}
.deal-grid .form-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-unit { flex: 0 0 auto; width: auto; padding-inline: .75rem 1.9rem; font-size: .95rem; background-color: var(--bs-tertiary-bg); }
.deal-total {
    background: var(--rn-primary-soft); border-color: color-mix(in srgb, var(--rn-primary) 30%, var(--rn-border));
    color: var(--rn-primary); font-weight: 800 !important;
}
.deal-total:focus { background: var(--rn-surface); }
.deal-grid [data-show-quote-code] { color: var(--rn-text-muted); }
.deal-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .65rem; font-size: .85rem; color: var(--rn-text-muted); }
.deal-fact { display: inline-flex; align-items: center; gap: .4rem; }
.deal-fact:has(> span:empty) { display: none; }

.deal-settle { display: flex; flex-wrap: wrap; gap: .25rem 0; }
.deal-settle[hidden], .deal-party[hidden], .deal-party > [hidden] { display: none !important; }
.deal-party { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.deal-settle:not([hidden]) + .deal-party { margin-top: .85rem; }
@media (min-width: 768px) { .deal-party { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.trade-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; font-size: 1.05rem; }
.trade-summary .trade-in { color: var(--rn-success); }
.trade-summary .trade-out { color: var(--rn-danger); }
.trade-summary strong { color: var(--rn-text); }
.trade-form .form-control-lg.num { font-weight: 600; }
.saved-banner { box-shadow: var(--rn-shadow); }

/* Party form, compact (fits one screen): a header with the contact's initial, sections divided by hairlines,
   roles as pill chips. */
.pf2-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.pf2-head h1 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.pf2-head p { margin: 0; font-size: .82rem; color: var(--rn-text-muted); }
.pf2-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
              background: linear-gradient(135deg, var(--rn-primary), #2d6cb5); color: #fff; font-size: 1.3rem; font-weight: 800;
              box-shadow: 0 4px 12px rgba(17, 73, 135, .25); }
.pf2-avatar:empty::before { content: "\F4E1"; font-family: bootstrap-icons; font-weight: 400; }
.pf2-card { display: flex; flex-direction: column; }
.pf2-section { padding: .85rem 1.15rem; }
.pf2-section + .pf2-section { border-top: 1px solid var(--rn-border); }
.pf2-section h2 { display: flex; align-items: baseline; gap: .45rem; font-size: .92rem; font-weight: 800; margin: 0 0 .6rem; }
.pf2-section h2 > i { color: var(--rn-primary); font-size: 1rem; }
.pf2-section h2 small { font-size: .74rem; font-weight: 400; color: var(--rn-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf2 .form-label { font-size: .78rem; font-weight: 600; color: var(--rn-text-muted); margin-bottom: .2rem; }
.pf2-note { font-size: .76rem; color: var(--rn-text-muted); margin: -.3rem 0 .6rem; }
.pf2-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf2-chip { position: relative; }
.pf2-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pf2-chip label { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .95rem; border: 1px solid var(--rn-border);
                  border-radius: 999px; background: var(--bs-body-bg); font-size: .86rem; font-weight: 600; cursor: pointer; user-select: none;
                  transition: background .15s, border-color .15s, color .15s; }
.pf2-chip label:hover { border-color: color-mix(in srgb, var(--rn-primary) 45%, var(--rn-border)); }
.pf2-chip label > i:first-child { color: var(--rn-text-muted); }
.pf2-chip input:checked + label { background: var(--rn-primary); border-color: var(--rn-primary); color: #fff; }
.pf2-chip input:checked + label > i:first-child { color: #fff; }
.pf2-chip input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(17, 73, 135, .25); }
.pf2-tick { display: none; }
.pf2-chip input:checked + label .pf2-tick { display: inline; }
.pf2-hint { min-height: 1.1rem; margin-top: .45rem; font-size: .76rem; color: var(--rn-text-muted); }
.pf2-share { margin-top: .75rem; padding: .75rem .85rem; border-radius: var(--rn-radius-sm); background: var(--rn-primary-soft); }
.pf2-share .input-group { max-width: 12rem; }
.pf2-active { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .85rem; margin: 0;
              border-radius: var(--rn-radius-sm); background: var(--bs-tertiary-bg); cursor: pointer; }
.pf2-active small { color: var(--rn-text-muted); font-size: .76rem; }
.pf2-active .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }

/* List pages: the filters in one row (smaller controls so they fit), with the period navigator first:
   day / month / year, ‹ › to step back and forth, the label opens a calendar, and "today". */
.filter-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.filter-bar .form-control, .filter-bar .form-select, .filter-bar .input-group-text, .filter-bar .btn { font-size: .85rem; padding-block: .32rem; }
.filter-bar .form-check { font-size: .85rem; white-space: nowrap; }
.filter-bar .filter-grow { flex: 1 1 10rem; min-width: 8rem; width: auto; }
.filter-bar .filter-auto { flex: 0 0 auto; width: auto; }
@media (max-width: 1199.98px) { .filter-bar { flex-wrap: wrap; } .filter-bar .filter-grow { flex-basis: 14rem; } }

.period-nav { position: relative; display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.period-kind { display: inline-flex; gap: 2px; padding: 2px; background: var(--bs-tertiary-bg); border: 1px solid var(--rn-border); border-radius: 9px; }
.period-kind a { padding: .2rem .55rem; border-radius: 7px; font-size: .8rem; font-weight: 600; color: var(--rn-text-muted); text-decoration: none; white-space: nowrap; }
.period-kind a:hover { color: var(--rn-text); }
.period-kind a.active { background: var(--rn-primary); color: #fff; }
.period-step { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px;
               border: 1px solid var(--rn-border); background: var(--rn-surface); color: var(--rn-text); text-decoration: none; }
.period-step:hover { border-color: var(--rn-primary); color: var(--rn-primary); }
.period-step.disabled { opacity: .35; pointer-events: none; }
.period-label { min-width: 9rem; padding: .2rem .45rem; border: 0; border-radius: 8px; background: transparent; color: var(--rn-text);
                font-size: .86rem; font-weight: 700; white-space: nowrap; text-align: center; cursor: pointer; }
.period-label:hover { background: var(--rn-primary-soft); color: var(--rn-primary); }
.period-today { padding: .22rem .55rem; border: 1px solid var(--rn-border); border-radius: 8px; font-size: .8rem; font-weight: 600;
                color: var(--rn-primary); text-decoration: none; white-space: nowrap; }
.period-today.disabled { opacity: .45; pointer-events: none; color: var(--rn-text-muted); }
.period-date { position: absolute; inset-inline-start: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.period-range { width: 9.2rem; flex: 0 0 auto; font-size: .85rem; padding-block: .32rem; }
.filter-bar .form-select { min-width: 6rem; }
/* Phones: the navigator takes its own line and its label shrinks; nothing runs off the screen. */
@media (max-width: 575.98px) {
    .filter-bar .period-nav { flex: 1 1 100%; flex-wrap: wrap; row-gap: .4rem; }
    .period-label { min-width: 0; flex: 1 1 auto; }
    .period-range { width: calc(50% - 1rem); }
}

/* ---------- Trade sheet (exchange, gold and silver): the deal, for whom and the details on one sheet divided by
   hairlines; soft fields with a focus ring; the total stands out; the board and the fine grams as chips; the bar
   below sums up what comes in and goes out beside a large Save. ---------- */
.trade-sheet {
    margin-bottom: .75rem; background: var(--rn-surface); border: 1px solid var(--rn-border); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -20px rgba(16, 24, 40, .22);
}
.ts-section { padding: 1.25rem 1.5rem; }
.ts-section + .ts-section { border-top: 1px solid var(--rn-border); }
.ts-head { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.ts-head > div:not(.deal-switch) { flex: 1 1 16rem; min-width: 0; }
.ts-head h2 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.ts-head p { margin: .1rem 0 0; font-size: .8rem; color: var(--rn-text-muted); }
.ts-icon {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-size: 1.15rem;
    background: var(--rn-primary-soft); color: var(--rn-primary);
}
.ts-icon-accent { background: var(--rn-accent-soft); color: var(--rn-accent-text); }
.ts-details { padding-block: 1rem 1.15rem; border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--rn-bg) 55%, var(--rn-surface)); }

.trade-sheet .form-label { margin-bottom: .35rem; font-size: .8rem; font-weight: 600; color: var(--rn-text-muted); }
.trade-sheet .form-label i { color: var(--rn-primary); opacity: .75; }
.trade-sheet .form-control, .trade-sheet .form-select, .trade-sheet .input-group-text {
    border-color: color-mix(in srgb, var(--rn-border) 65%, #94a3b8); border-radius: 11px;
}
.trade-sheet .form-control, .trade-sheet .form-select {
    background-color: color-mix(in srgb, var(--rn-surface) 88%, var(--rn-bg));
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.trade-sheet .form-control:hover, .trade-sheet .form-select:hover { border-color: color-mix(in srgb, var(--rn-primary) 40%, var(--rn-border)); }
.trade-sheet .form-control:focus, .trade-sheet .form-select:focus {
    background-color: var(--rn-surface); border-color: var(--rn-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rn-primary) 14%, transparent);
}
.trade-sheet .form-control[readonly] { background-color: var(--bs-tertiary-bg); }
.trade-sheet .form-control-lg, .trade-sheet .input-group-lg > .form-control { font-size: 1.15rem; font-weight: 600; }
.trade-sheet .deal-unit { color: var(--rn-text-muted); font-weight: 600; background-color: var(--bs-tertiary-bg); }
.trade-sheet .deal-total {
    font-size: 1.3rem; font-weight: 800 !important; color: var(--rn-primary);
    background-color: var(--rn-primary-soft); border-color: color-mix(in srgb, var(--rn-primary) 35%, var(--rn-border));
}
.trade-sheet .deal-total:focus { background-color: var(--rn-surface); }

.trade-sheet .deal-facts { gap: .5rem; margin-top: .9rem; }
.trade-sheet .deal-fact {
    padding: .28rem .75rem; border-radius: 999px; font-size: .8rem; color: var(--rn-text-muted);
    background: var(--bs-tertiary-bg); border: 1px solid var(--rn-border);
}
.trade-sheet .deal-fact i { color: var(--rn-primary); }

.deal-settle { gap: .5rem; }
.ts-pill {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
    font-size: .9rem; font-weight: 600; color: var(--rn-text-muted); background: var(--rn-surface); border: 1px solid var(--rn-border);
    transition: border-color .15s, background-color .15s, color .15s;
}
.ts-pill:hover { color: var(--rn-text); border-color: color-mix(in srgb, var(--rn-primary) 40%, var(--rn-border)); }
.btn-check:checked + .ts-pill {
    color: var(--rn-primary); background: var(--rn-primary-soft); border-color: var(--rn-primary); box-shadow: inset 0 0 0 1px var(--rn-primary);
}
.btn-check:focus-visible + .ts-pill { outline: 2px solid var(--rn-primary); outline-offset: 2px; }

.trade-bar { align-items: center; gap: 1rem; padding: .6rem 0 .9rem; }
.trade-bar .trade-summary { flex: 1 1 auto; gap: .6rem; font-size: .95rem; }
.trade-bar .trade-summary > span {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 12px;
    border: 1px solid transparent; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.trade-bar .trade-summary .trade-in { background: var(--rn-success-soft); border-color: color-mix(in srgb, var(--rn-success) 22%, transparent); }
.trade-bar .trade-summary .trade-out { background: var(--rn-danger-soft); border-color: color-mix(in srgb, var(--rn-danger) 22%, transparent); }
.trade-bar .trade-summary strong { font-size: 1.1rem; }
.trade-save {
    min-width: 13rem; padding-block: .8rem; border-radius: 12px; font-weight: 700;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--rn-primary) 70%, transparent);
}
@media (max-width: 575.98px) {
    .ts-section { padding: 1rem; }
    .trade-save { min-width: 0; flex: 1 1 100%; }
    .trade-bar { flex-wrap: wrap; }
}

/* ---------- Receipt, redesigned: a black title band, details in two columns, what moved as a list with a heading
   row and dotted lines, the rate below it; boxes for a transfer or custody. Pure black on white for thermal paper;
   on screen it sits on a grey desk like a slip of paper. ---------- */
.receipt { font-size: 11.5px; line-height: 1.45; }
.receipt h1 { font-size: 17px; margin-bottom: 1.5mm; letter-spacing: .01em; }
.rc-head { text-align: center; }
.rc-title {
    margin: 0 0 3mm; padding: 1.3mm 2mm; border-radius: 1.5mm; background: #000; color: #fff;
    font-size: 12.5px; font-weight: 800; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rc-stamp { margin: -1mm 0 3mm; padding: 1mm; border: 2px solid #000; border-radius: 1.5mm; text-align: center; font-weight: 800; letter-spacing: .05em; }
.rc-meta, .rc-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7mm 3mm; margin: 0; }
.rc-meta dt, .rc-sum dt { font-weight: 400; color: #444; white-space: nowrap; }
.rc-meta dd, .rc-sum dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; }
.rc-sum { margin-top: 2mm; padding-top: 2mm; border-top: 1px dotted #777; }
.rc-rule { margin: 2.5mm 0; border-top: 1px dashed #000; }
.rc-caption { margin-bottom: 1mm; font-size: 10.5px; font-weight: 700; color: #222; }
.rc-list { width: 100%; border-collapse: collapse; }
.rc-list thead th { padding: 0 0 1.2mm; border-bottom: 1.5px solid #000; font-size: 10px; font-weight: 700; color: #222; white-space: nowrap; }
.rc-list tbody td { padding: 1.5mm 0; border-bottom: 1px dotted #999; vertical-align: middle; }
.rc-list tbody tr:last-child td { border-bottom: 0; }
.rc-list tfoot td { padding-top: 1.5mm; border-top: 1.5px solid #000; font-weight: 800; }
.rc-list td + td, .rc-list th + th { padding-inline-start: 2.5mm; }
.rc-dir { white-space: nowrap; font-weight: 700; }
.rc-dir i { margin-inline-end: 1mm; }
.rc-amount { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.rc-sub { font-size: 10px; color: #555; }
.rc-box { margin-top: 2.5mm; padding: 2mm 2.5mm; border: 1px dashed #000; border-radius: 2mm; }
.rc-box-title { display: flex; justify-content: space-between; margin-bottom: 1mm; font-weight: 800; }
.rc-code { margin-top: 2mm; padding-top: 1.5mm; border-top: 1px dotted #777; text-align: center; }
.rc-code-value { font-size: 22px; font-weight: 800; letter-spacing: .12em; }
.rc-note { margin: 2.5mm 0 0; padding: 1.5mm 2mm; border-inline-start: 2px solid #000; color: #333; }
.receipt .receipt-qr { margin-top: 2.5mm; }
.rc-thanks { margin: 3mm 0 0; text-align: center; font-weight: 700; }
@media screen {
    body.receipt-page { background: #e9edf3; min-height: 100vh; padding-bottom: 2rem; }
    body.receipt-page .receipt { border-radius: 3px; box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 18px 40px -18px rgba(16, 24, 40, .35); }
}
/* Numbers are written left to right, so "end" inside them is the wrong side: line values up by the page's direction. */
[dir="rtl"] .receipt .end, [dir="rtl"] .rc-meta dd, [dir="rtl"] .rc-sum dd { text-align: left; }
[dir="ltr"] .receipt .end, [dir="ltr"] .rc-meta dd, [dir="ltr"] .rc-sum dd { text-align: right; }
[dir="rtl"] .receipt td.num.end, [dir="rtl"] .receipt th.num.end { text-align: left; }
[dir="ltr"] .receipt td.num.end, [dir="ltr"] .receipt th.num.end { text-align: right; }
/* The gap between receipt columns on the side facing the previous column, also in left-to-right number cells. */
[dir="rtl"] .receipt td + td, [dir="rtl"] .receipt th + th { padding-inline-start: 0; padding-right: 2.5mm; padding-left: 0; }
[dir="ltr"] .receipt td + td, [dir="ltr"] .receipt th + th { padding-inline-start: 0; padding-left: 2.5mm; padding-right: 0; }
.rc-dir i { color: #000; }

/* Lists: an amount over its currency or metal, a date over its time, a note under a kind. Keeps left-to-right
   numbers away from right-to-left words, so "170,000 IQD" never reads as "QD 170,000". */
.amt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; vertical-align: middle; }
.amt + .amt { margin-inline-start: .9rem; }
.amt-n { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: 600; white-space: nowrap; }
.amt-c { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--rn-text-muted); direction: ltr; unicode-bidi: isolate; }
/* A profit with its explanation (tooltip): received, cost, average cost. */
.profit-hint { cursor: help; display: inline-flex; gap: .9rem; border-radius: .35rem; outline-offset: 3px; }
.profit-hint .amt-n { text-decoration: underline dotted; text-decoration-color: var(--rn-text-muted); text-underline-offset: 4px; }
.profit-hint .amt + .amt { margin-inline-start: 0; }
.tooltip { --bs-tooltip-bg: #1b2636; --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; --bs-tooltip-font-size: .8rem; --bs-tooltip-padding-x: .75rem; --bs-tooltip-padding-y: .5rem; --bs-tooltip-max-width: 340px; }
.tooltip-inner { white-space: pre-line; text-align: start; line-height: 1.7; box-shadow: 0 6px 20px rgba(16, 24, 40, .25); }
.dt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.dt-d { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: 600; white-space: nowrap; }
.dt-t { font-size: .74rem; color: var(--rn-text-muted); direction: ltr; unicode-bidi: isolate; }
.cell-sub { margin-top: .1rem; font-size: .76rem; color: var(--rn-text-muted); }
.th-sub { font-weight: 600; opacity: .75; }
/* The currency under an amount and the time under a date sit in the middle. */
.amt, .dt { align-items: center; }