/* =========================================================
   MOYLI DESIGN SYSTEM  (v1.0.18)
   Loaded AFTER style.css. Single source of semantic tokens and
   shared primitives. New/modernized UI must use --ds-* tokens;
   do not add further per-module color overrides elsewhere.
   Themes: body.moyli-theme-dark (default) / moyli-theme-light.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
    /* brand */
    --ds-accent: #18c06a;
    --ds-accent-strong: #0b984e;
    --ds-accent-soft: rgba(24, 192, 106, 0.16);
    --ds-danger: #f01427;
    --ds-warning: #ff9a32;
    --ds-info: #1f9d6b;

    /* surfaces / text (dark) */
    --ds-bg: #03150d;
    --ds-surface: #072d19;
    --ds-surface-2: #0a3a22;
    --ds-border: #15683c;
    --ds-border-soft: rgba(24, 192, 106, 0.32);
    --ds-text: #f4fbf7;
    --ds-text-soft: #9cc5ae;
    --ds-text-dim: #6f9a82;
    --ds-wordmark: #ffffff;
    --ds-overlay: rgba(1, 12, 6, 0.78);

    /* shape / spacing / type */
    --ds-radius-sm: 10px;
    --ds-radius: 14px;
    --ds-radius-lg: 18px;
    --ds-gap: 12px;
    --ds-gutter: clamp(12px, 2.4vw, 24px);
    --ds-fs-body: clamp(14px, 0.35vw + 13px, 16px);
    --ds-fs-small: clamp(14px, 0.2vw + 13.5px, 14.5px);      /* v1.0.20.1: readable floor 14px */
    --ds-fs-title: clamp(18px, 0.9vw + 15px, 24px);
    --ds-focus: 0 0 0 3px rgba(24, 204, 131, 0.45);
}

body.moyli-theme-light {
    --ds-bg: #eef3f9;
    --ds-surface: #ffffff;
    --ds-surface-2: #f2f8f4;
    --ds-border: #d5e6dc;
    --ds-border-soft: rgba(11, 152, 78, 0.22);
    --ds-text: #0e1d16;
    --ds-text-soft: #3f5a4b;
    --ds-text-dim: #557362;                   /* v1.0.21: 5.2:1 on white (was #6b8577, 3.9:1) */
    --ds-wordmark: #0c1a2b;
    --ds-overlay: rgba(20, 35, 55, 0.5);
    --ds-accent: #0a7d3f;                     /* v1.0.21: white text on it is 5.2:1 (was #0b984e, 3.7:1) */
    --ds-accent-strong: #086a35;
    --ds-accent-soft: #ddf2e9;
    --ds-bg: #f4f8f8;
}

/* Pre-paint theme hint (set by inline script in <head>) avoids a dark flash */
html[data-moyli-theme="light"] body:not([class*="moyli-theme-"]) {
    background: #eef3f9;
}

/* ---------- 2. BRAND LOCKUP ---------- */
.brand-name,
.auth-card h1 {
    color: var(--ds-wordmark);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.brand-system,
.auth-subtitle {
    color: var(--ds-text-soft);
    text-transform: uppercase;
}

/* ---------- 3. AUTH SCREEN: theme toggle + light theme ---------- */
.auth-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: -12px 0 24px;
    flex-wrap: wrap;
}

.auth-tools .auth-language-switcher {
    margin: 0;
}

.auth-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    color: var(--ds-text);
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    transition: border-color 0.15s, background 0.15s;
}

.auth-theme-toggle:hover {
    border-color: var(--ds-accent);
}

.auth-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus);
}

.auth-theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-theme-toggle .ds-icon-moon { display: none; }
body.moyli-theme-light .auth-theme-toggle .ds-icon-sun { display: none; }
body.moyli-theme-light .auth-theme-toggle .ds-icon-moon { display: block; }

body.moyli-theme-light .auth-screen {
    background:
        radial-gradient(circle at top right, #d4e6fb 0%, transparent 38%),
        var(--ds-bg);
}

body.moyli-theme-light .auth-card {
    background: var(--ds-surface);
    border-color: var(--ds-border);
    box-shadow: 0 18px 50px rgba(20, 50, 90, 0.12);
}

body.moyli-theme-light .auth-tabs {
    background: var(--ds-surface-2);
    border-color: var(--ds-border);
}

body.moyli-theme-light .auth-tab {
    color: var(--ds-text-soft);
}

body.moyli-theme-light .auth-form label,
body.moyli-theme-light .auth-form .recovery-title,
body.moyli-theme-light .auth-form .recovery-text {
    color: var(--ds-text);
}

body.moyli-theme-light .auth-form input {
    background: #ffffff;
    color: var(--ds-text);
    border-color: var(--ds-border);
}

body.moyli-theme-light .auth-form input::placeholder {
    color: var(--ds-text-dim);
}

body.moyli-theme-light .auth-back-button {
    color: var(--ds-text-soft);
}

body.moyli-theme-light .language-option {
    color: var(--ds-text);
    background: var(--ds-surface-2);
    border-color: var(--ds-border);
}

body.moyli-theme-light .language-option.active {
    border-color: var(--ds-accent);
}

/* ---------- 4. MODALS: one scrolling contract ---------- */
.modal-overlay,
.cash-modal-overlay,
.sales-client-modal-overlay,
.sales-service-modal-overlay,
.warehouse-product-modal-overlay,
.profile-email-modal-overlay,
.client-vehicle-edit-overlay,
.dashboard-detail-overlay,
.archive-v99__modal-overlay,
.logout-confirm-overlay {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.support-modal,
.sales-client-modal,
.sales-service-modal,
.warehouse-product-modal,
.warehouse-history-modal,
.warehouse-confirm-modal,
.profile-email-modal,
.sales-success-modal {
    max-height: calc((100vh / var(--ds-zoom, 1)) - 32px);
    max-height: calc((100dvh / var(--ds-zoom, 1)) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 640px) {
    .sales-client-modal,
    .sales-service-modal,
    .warehouse-product-modal,
    .profile-email-modal {
        padding: 18px;
        border-radius: var(--ds-radius);
    }
}

/* ---------- 5. EXPORT BUTTONS (shared) ---------- */
.ds-export-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ds-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    cursor: pointer;
    font: inherit;
    font-size: var(--ds-fs-small);
    font-weight: 700;
    color: var(--ds-text);
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.ds-export-btn:hover {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
}

.ds-export-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.ds-export-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus);
}

/* ---------- 6. TABS (shared) ---------- */
.ds-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 18px;
    padding: 4px;
    overflow-x: auto;
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    -webkit-overflow-scrolling: touch;
}

.ds-tab {
    flex: 1 0 auto;
    height: 42px;
    padding: 0 18px;
    cursor: pointer;
    font: inherit;
    font-size: var(--ds-fs-body);
    font-weight: 700;
    white-space: nowrap;
    color: var(--ds-text-soft);
    background: transparent;
    border: 0;
    border-radius: var(--ds-radius-sm);
    transition: background 0.15s, color 0.15s;
}

.ds-tab:hover { color: var(--ds-text); }

.ds-tab.is-active {
    color: #ffffff;
    background: var(--ds-accent-strong);
}

.ds-tab:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus);
}

[data-reports-pane][hidden] { display: none !important; }

/* ---------- 7. FORM CONTROLS inside edit modals ---------- */
.client-vehicle-edit-modal {
    max-height: calc((100vh / var(--ds-zoom, 1)) - 32px);
    max-height: calc((100dvh / var(--ds-zoom, 1)) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.client-vehicle-edit-grid select,
.client-vehicle-edit-grid textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: #031426;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    outline: 0;
}

.client-vehicle-edit-grid textarea { resize: vertical; }
.client-vehicle-edit-grid .is-wide { grid-column: 1 / -1; }

.client-vehicle-edit-grid input:focus,
.client-vehicle-edit-grid select:focus,
.client-vehicle-edit-grid textarea:focus {
    border-color: var(--ds-accent);
    box-shadow: var(--ds-focus);
}

body.moyli-theme-light .client-vehicle-edit-modal {
    background: var(--ds-surface);
    border-color: var(--ds-border);
}

body.moyli-theme-light .client-vehicle-edit-grid input,
body.moyli-theme-light .client-vehicle-edit-grid select,
body.moyli-theme-light .client-vehicle-edit-grid textarea {
    background: #ffffff;
    color: var(--ds-text);
    border-color: var(--ds-border);
}

@media (max-width: 560px) {
    .client-vehicle-edit-grid { grid-template-columns: 1fr; }
}

.client-card__top .client-card-edit { margin-left: auto; margin-right: 8px; height: 40px; }

body.moyli-theme-light .auth-tab.active {
    color: #ffffff;
}

[data-warehouse-pane][hidden] { display: none !important; }

.warehouse-history-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.warehouse-history-toolbar input[type="search"] { flex: 1 1 220px; }

/* =========================================================
   v1.0.18 — APPROVED EMERALD DESIGN
   ========================================================= */

/* ---------- typography presets: Kichik / Standart / Katta / Juda katta ---------- */
:root { --ds-zoom: 1; }
html[data-moyli-font-size="small"]  { --ds-zoom: 0.92; }
html[data-moyli-font-size="large"]  { --ds-zoom: 1.12; }
html[data-moyli-font-size="xlarge"] { --ds-zoom: 1.25; }
body { zoom: var(--ds-zoom); }

/* ---------- brand lockup ---------- */
.brand {
    gap: 12px;
    padding: 0 6px 16px;
}

.brand-logo,
body.moyli-theme-light .brand-logo {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    box-shadow: 0 6px 16px rgba(11, 152, 78, 0.28);
}

.brand-name {
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--ds-wordmark);
}

.brand-system {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.16em;
}

/* ---------- authentication: logo top-left, language/theme top-right ---------- */
.auth-screen {
    position: relative;
    flex-direction: column;
    padding-top: 96px;
}

.auth-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px clamp(16px, 3vw, 40px);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-brand img {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(11, 152, 78, 0.3);
}

.auth-brand__text {
    display: grid;
    line-height: 1.05;
}

.auth-brand__text strong {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ds-wordmark);
}

.auth-brand__text span {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--ds-text-soft);
}

.auth-topbar .auth-tools {
    margin: 0;
}

.auth-card {
    margin-top: 0;
}

@media (max-width: 560px) {
    .auth-screen { padding-top: 84px; padding-left: 14px; padding-right: 14px; }
    .auth-topbar { padding: 12px 14px; }
    .auth-brand img { width: 40px; height: 40px; }
    .auth-brand__text strong { font-size: 21px; }
    .auth-topbar .language-option span { display: none; }
}

/* =========================================================
   SALES — approved simplified layout
   1 customer · 2 pick products/services · 3 selected + total · 4 payment
   ========================================================= */
.ds-step {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 18px;
    color: #ffffff;
    background: var(--ds-accent-strong);
}

.ds-step--sm { width: 32px; height: 32px; font-size: 16px; margin-right: 8px; }

.ds-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ds-card-head h3 {
    margin: 0;
    font-size: clamp(18px, 1vw + 12px, 22px);
    font-weight: 800;
    color: var(--ds-text);
}

.ds-card-head--span { grid-column: 1 / -1; padding-bottom: 6px; }

.ds-clear-btn {
    margin-left: auto;
    height: 40px;
    padding: 0 16px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: #c0392b;
    background: transparent;
    border: 1px solid rgba(192, 57, 43, 0.4);
    border-radius: var(--ds-radius-sm);
}

.ds-clear-btn:hover { background: rgba(192, 57, 43, 0.1); }

.ds-pick-head {
    display: grid;
    gap: 12px;
    margin: 14px 0 12px;
}

.ds-tabs--pick { margin: 0; max-width: 460px; }

.ds-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.ds-search svg { width: 20px; height: 20px; fill: none; stroke: var(--ds-text-soft); stroke-width: 2; stroke-linecap: round; }
.ds-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--ds-text);
    background: transparent;
    border: 0;
    outline: 0;
}

.ds-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.ds-pill {
    height: 42px;
    padding: 0 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
}

.ds-pill.is-active { color: #ffffff; background: var(--ds-accent-strong); border-color: var(--ds-accent-strong); }

.ds-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ds-product-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
}

.ds-product-card.is-disabled { opacity: 0.55; }

.ds-product-card img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--ds-surface-2);
}

.ds-product-card__text { display: grid; gap: 3px; min-width: 0; }
.ds-product-card__text strong { font-size: 17px; color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-product-card__text span { font-size: 17px; font-weight: 800; color: var(--ds-accent-strong); }
.ds-product-card__text small { font-size: 14px; color: var(--ds-text-soft); }

.ds-product-card__add {
    width: 46px;
    height: 46px;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    background: var(--ds-accent-strong);
    border: 0;
    border-radius: 12px;
}

.ds-product-card__add:disabled { cursor: not-allowed; background: var(--ds-text-dim); }
.ds-product-card__add:focus-visible { outline: none; box-shadow: var(--ds-focus); }

.ds-empty { padding: 28px; text-align: center; color: var(--ds-text-soft); grid-column: 1 / -1; }

/* selected products table now lives in "Tanlanganlar" */
.ds-selected { display: grid; gap: 8px; padding: 6px 16px 0; }
.ds-selected .sales-products-table { border: 0; background: transparent; }
.ds-selected .sales-products-table__head { display: none; }
.ds-selected .sales-products-list { padding: 0; min-height: 0; }
.ds-selected .sales-products-empty { min-height: 0; padding: 16px 0; color: var(--ds-text-soft); }

.ds-selected-service {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--ds-border);
}

.ds-selected-service__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ds-surface-2);
    color: var(--ds-accent-strong);
}

.ds-selected-service strong { font-size: 16px; color: var(--ds-text); }
.ds-selected-service b { font-size: 16px; color: var(--ds-text); white-space: nowrap; }

/* legacy headings replaced by the numbered picker */
#salesProductsPanel > .sales-section-head,
#salesServicesPanel > .sales-section-head { display: none; }
#salesProductsPanel .sales-products-footer { border-top: 0; }

.ds-advanced {
    margin: 10px 0;
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 0 12px;
}

.ds-advanced > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: var(--ds-accent-strong);
}

.ds-advanced[open] { padding-bottom: 12px; }

.sales-finish-btn {
    min-height: 62px;
    font-size: 20px !important;
    border-radius: 14px;
}

.sales-payment-methods button { min-height: 64px; font-size: 16px; }

@media (min-width: 1100px) {
    .sales-page.is-sale-open .sales-pos-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
        gap: 18px;
        align-items: start;
        margin-top: 14px;
    }

    .sales-page.is-sale-open .sales-pos-main .sales-workspace-grid {
        display: block;
    }

    .sales-page.is-sale-open .sales-checkout {
        position: sticky;
        top: 12px;
        width: auto;
        margin-top: 0;
        max-height: calc((100vh / var(--ds-zoom, 1)) - 24px);
        overflow-y: auto;
    }

    .sales-page.is-sale-open .sales-checkout-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.sales-selected-client {
    display: grid;
    border-radius: var(--ds-radius-lg);
}

/* ---- sales refinements (rendered-UI review) ---- */
.sales-selected-client .ds-step,
.sales-checkout .ds-step,
.ds-pick-head .ds-step {
    width: 38px;
    height: 38px;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0;
}

.sales-checkout .ds-step--sm { width: 32px; height: 32px; font-size: 16px; }

.ds-card-head--span { padding: 14px 18px 8px; }

.ds-product-card .ds-product-card__add {
    font-size: 30px !important;
    font-weight: 600 !important;
    min-height: 0 !important;
    padding: 0 0 3px !important;
}

.ds-search input,
.ds-search input:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    font-weight: 500 !important;
}

.ds-search:focus-within { border-color: var(--ds-accent-strong); box-shadow: var(--ds-focus); }

.sales-checkout__grand-total strong {
    font-size: clamp(22px, 1.6vw + 10px, 30px);
    color: var(--ds-accent-strong);
}

.sales-checkout-row span { font-size: 15px; }
.sales-checkout-row strong { font-size: 16px; }
.sales-checkout-row.is-total span { font-size: 17px; font-weight: 800; }
.sales-checkout-row.is-total strong { font-size: 22px; color: var(--ds-accent-strong); }

.sales-checkout-card h4 { font-size: 18px; }

.ds-selected .sales-product-row { padding: 10px 0; border-top: 1px solid var(--ds-border); }

@media (max-width: 1099px) {
    .ds-product-grid { grid-template-columns: 1fr; }
    .sales-pos-layout { display: block; }
    .sales-checkout { margin-top: 14px; }
}

/* ---- sales refinements, pass 2 ---- */
.ds-step,
.sales-selected-client .ds-card-head .ds-step,
.sales-selected-client span.ds-step {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.sales-checkout__head {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px 10px !important;
}

.sales-checkout__grand-total {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: left !important;
}

.sales-checkout__grand-total span { font-size: 16px; font-weight: 700; color: var(--ds-text-soft); }
.sales-checkout__grand-total strong { font-size: clamp(24px, 1.4vw + 12px, 32px) !important; white-space: nowrap; }

.sales-cart-qty { display: inline-flex; align-items: center; gap: 8px; }

.sales-cart-qty button {
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--ds-text);
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
}

.sales-cart-qty button:hover { border-color: var(--ds-accent-strong); }
.sales-cart-qty strong { min-width: 22px; text-align: center; font-size: 16px; color: var(--ds-text); }

.sales-cart-remove {
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 20px;
    color: var(--ds-text-soft);
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.sales-cart-remove:hover { color: #c0392b; background: rgba(192, 57, 43, 0.1); }

.ds-selected .sales-product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
}

.ds-selected .sales-product-row__price { display: none; }
.ds-selected .sales-product-row__total { font-size: 16px; white-space: nowrap; }
.ds-selected .sales-product-row__product { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-selected .sales-product-row__product img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--ds-surface-2); }
.ds-selected .sales-product-row__product strong { font-size: 15px; }
.ds-selected .sales-product-row__product small { font-size: var(--ds-fs-secondary); }

/* ---- sales refinements, pass 3: selected rows fit the narrow column ---- */
.ds-selected .sales-product-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.ds-selected .sales-product-row__product { flex: 1 1 100%; }
.ds-selected .sales-product-row .sales-cart-qty { margin-right: auto; }
.ds-selected .sales-product-row__total { margin-left: auto; }
.ds-selected .sales-product-row .sales-cart-remove { flex: 0 0 auto; }

.sales-checkout .sales-payment-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sales-checkout .sales-payment-methods button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
}
.sales-checkout .sales-payment-methods button svg { width: 24px; height: 24px; }

/* =========================================================
   MODULE READABILITY — customers, inventory, cashbox, notifications
   ========================================================= */

/* customers: right-hand client card */
body.moyli-theme-light.client-card-list-open #clientCardPanel.is-placeholder::after {
    background: var(--ds-surface-2);
    border-color: var(--ds-border);
    color: var(--ds-text-soft);
    font-size: 16px;
}

body.client-card-list-open #clientCardPanel.is-placeholder::after { font-size: 16px; }

.client-list-row { min-height: 76px; }
.client-list-identity strong,
.client-list-vehicle strong { font-size: 17px; }
.client-list-identity small,
.client-list-vehicle small { font-size: 14px; }
.client-card__identity h2 { font-size: clamp(20px, 1vw + 14px, 26px); }
.client-card-stats article strong { font-size: 18px; }
.client-card-stats article span { font-size: var(--ds-fs-secondary); }
.client-vehicle-card__identity strong { font-size: 17px; }
.client-vehicle-card__meta { font-size: 14px; }
.client-history-list { font-size: 15px; }

/* inventory: readable rows that fit the page (no sideways scrolling, no clipped actions) */
.warehouse-products-table__head,
.warehouse-product-row,
.warehouse-products-list {
    min-width: 0 !important;
}

.warehouse-products-table__head,
.warehouse-product-row {
    grid-template-columns:
        minmax(190px, 1.7fr)
        minmax(80px, 0.8fr)
        minmax(90px, 1fr)
        minmax(100px, 0.9fr)
        minmax(100px, 1fr)
        minmax(100px, 1fr)
        minmax(100px, 0.9fr)
        72px !important;
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 15px;
}

.warehouse-product-row { min-height: 68px; }
.warehouse-products-table__head { font-size: var(--ds-fs-secondary); }

/* cashbox: filters -> KPIs -> transactions; channel cards stay compact */
.cash-summary-card strong { font-size: clamp(20px, 1vw + 12px, 26px); }
.cash-movement-row { font-size: 15px; }

/* notifications: clear states */
.notifications-v71__summary-card { min-height: 92px; }
.notifications-v71__summary-card strong { font-size: 26px; }
.notifications-v71__summary-card span { font-size: 14px; font-weight: 700; }

/* tables everywhere */
th, td { font-size: 15px; }

/* legacy variables used for status text on white cards */
body.moyli-theme-light {
    --green: #08733a;
    --orange: #8a5a00;
    --blue: #0a7d3f;
    --blue-light: #08733a;
    --red: var(--moyli-danger);
    --text: #0e1d16;
    --text-soft: #3f5a4b;
    --text-dim: #557362;
    --bg: #f4f8f8;
    --bg-2: #eef4f2;
}

/* ---------- light theme: contrast for status colours (generated from style.css) ---------- */
body.moyli-theme-light .menu-icon { color: #0d7d42; }
body.moyli-theme-light .card-tag { color: #0d7d41; }
body.moyli-theme-light .metric-row strong { color: #266443; }
body.moyli-theme-light .blue { color: var(--ds-success-text) !important; }
body.moyli-theme-light .details-button { color: #107a40; }
body.moyli-theme-light .chart-period span { color: #276242; }
body.moyli-theme-light .auth-form label { color: #2a5f43; }
body.moyli-theme-light .login-status.available { color: #17724b !important; }
body.moyli-theme-light .forgot-password-link { color: #2b5e43; }
body.moyli-theme-light .field-error.checking { color: #276243; }
body.moyli-theme-light .field-error.success { color: #17724b !important; }
body.moyli-theme-light #verificationForm .auth-back-button { color: #276243; }
body.moyli-theme-light .auth-message.success { color: #17724b !important; }
body.moyli-theme-light .logout-cancel-button { color: #276242; }
body.moyli-theme-light .control-svg { color: var(--ds-success-text); }
body.moyli-theme-light .user-arrow { color: #147642; }
body.moyli-theme-light .notifications-page-icon { color: var(--ds-success-text); }
body.moyli-theme-light .profile-popover-item { color: #1d6d42; }
body.moyli-theme-light .profile-back-button { color: var(--ds-success-text); }
body.moyli-theme-light .profile-photo-button { color: var(--ds-success-text); }
body.moyli-theme-light .profile-field span { color: #2a5f43; }
body.moyli-theme-light .profile-password-button { color: var(--ds-success-text); }
body.moyli-theme-light .support-modal-icon { color: var(--ds-success-text); }
body.moyli-theme-light .profile-field-action { color: #137741; }
body.moyli-theme-light .profile-field-head label { color: #2a5f43; }
body.moyli-theme-light .profile-email-modal label { color: #2a5f43; }
body.moyli-theme-light .profile-code-secondary-button { color: var(--ds-success-text); }
body.moyli-theme-light .sales-client-field span { color: #2a5f43; }
body.moyli-theme-light #salesClientModalCancel { color: var(--ds-success-text); }
body.moyli-theme-light .sales-workspace-back { color: var(--ds-success-text); }
body.moyli-theme-light .sales-add-service-btn { color: var(--ds-success-text); }
body.moyli-theme-light .sales-service-field span { color: #2a5f43; }
body.moyli-theme-light #salesServiceModalCancel { color: var(--ds-success-text); }
body.moyli-theme-light .sales-add-product-btn { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-summary-card__icon { color: #0c7d41; }
body.moyli-theme-light .warehouse-summary-card.is-warning .warehouse-summary-card__icon { color: var(--ds-text-muted); }
body.moyli-theme-light .warehouse-stock-status.is-low { color: var(--ds-text-muted); }
body.moyli-theme-light #warehouseDetailStatus.is-low { color: var(--ds-text-muted); }
body.moyli-theme-light .warehouse-product-actions .warehouse-view-btn { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-detail-primary-btn.is-in { color: #117856; }
body.moyli-theme-light .warehouse-detail-primary-btn.is-out { color: var(--ds-text-muted); }
body.moyli-theme-light .sales-product-quick-item > b { color: #0d7d41; }
body.moyli-theme-light .sales-checkout-row.is-discount strong { color: var(--ds-text-muted); }
body.moyli-theme-light .sales-payment-balance.is-error { color: #9f5804; }
body.moyli-theme-light .sales-history-payment span { color: #0e7c42; }
body.moyli-theme-light .sales-checkout-card h4 { color: #0d7d41; }
body.moyli-theme-light .sales-history-client-link strong { color: #0d7d42; }
body.moyli-theme-light .sales-history-client-link:hover strong { color: #0d7d42; }
body.moyli-theme-light .clients-refresh-btn { color: #0d7d3f; }
body.moyli-theme-light .client-card-back { color: #0d7d3f; }
body.moyli-theme-light .client-card-new-sale { color: #0d7d3f; }
body.moyli-theme-light .client-list-avatar { color: var(--ds-success-text); }
body.moyli-theme-light .client-list-open { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-open-client { color: #117941; }
body.moyli-theme-light .sales-payment-methods button[data-sale-payment="debt"].is-active { color: var(--ds-text-muted); }
body.moyli-theme-light .sales-next-service-preview.is-warning { color: var(--ds-text-muted); }
body.moyli-theme-light .client-card__avatar { color: var(--ds-success-text); }
body.moyli-theme-light .client-card-stats article.is-debt strong { color: #0d7d42; }
body.moyli-theme-light .sales-analytics-metrics strong { color: #0d7d41; }
body.moyli-theme-light .sales-analytics-chart-head > strong { color: #0c7d41; }
body.moyli-theme-light .sales-month-col > strong { color: #0c7d41; }
body.moyli-theme-light .sales-confirm-head span { color: #0d7d41; }
body.moyli-theme-light .sales-confirm-head button { color: var(--ds-success-text); }
body.moyli-theme-light .sales-confirm-line > div span { color: #117941; }
body.moyli-theme-light .sales-confirm-technical { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-client:hover strong { color: #0d7d41; }
body.moyli-theme-light .sales-history-client-empty__icon { color: #0c7d41; }
body.moyli-theme-light .sales-history-client-avatar { color: #0c7d41; }
body.moyli-theme-light .sales-history-client-section__head span { color: #0d7d41; }
body.moyli-theme-light .sales-chart-nav button { color: var(--ds-success-text); }
body.moyli-theme-light .sales-chart-nav strong { color: #0c7d41; }
body.moyli-theme-light .sales-day-col > strong { color: #0c7d41; }
body.moyli-theme-light .sales-day-col > span { color: #2a6043; }
body.moyli-theme-light .sales-analytics-detail__head > strong { color: #0d7d41; }
body.moyli-theme-light .sales-analytics-detail-row > strong { color: #0d7d41; }
body.moyli-theme-light .sales-analytics-detail-arrow { color: #0c7d41; }
body.moyli-theme-light .client-card-section-count { color: var(--ds-success-text); }
body.moyli-theme-light .sales-heading-icon { color: #0c7d41; }
body.moyli-theme-light .sales-section-title__icon { color: #0d7d41; }
body.moyli-theme-light .sales-auto-label { color: #177351; }
body.moyli-theme-light .sales-next-service-preview.is-calculated { color: #1d6c50; }
body.moyli-theme-light .sales-detail-eyebrow { color: #0c7d41; }
body.moyli-theme-light .sales-detail-close { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-card__head > strong { color: #0d7d41; }
body.moyli-theme-light .sales-detail-totals .is-total span { color: #0d7d41; }
body.moyli-theme-light .sales-detail-totals .is-total strong { color: #0d7d41; }
body.moyli-theme-light .sales-detail-totals .is-discount strong { color: var(--ds-text-muted); }
body.moyli-theme-light .sales-detail-message.is-warning { color: var(--ds-text-muted); }
body.moyli-theme-light .sidebar-support { color: #1f6b42; }
body.moyli-theme-light .sidebar-support__icon { color: #0c7d42; }
body.moyli-theme-light .sales-found-client__chip { color: #2a6043; }
body.moyli-theme-light .sales-found-client__chip.is-next { color: #197051; }
body.moyli-theme-light .cash-movement-method { color: var(--ds-success-text); }
body.moyli-theme-light .reports-kpi.is-primary strong { color: #0c7d41; }
body.moyli-theme-light .reports-kpi.is-warning strong { color: var(--ds-text-muted); }
body.moyli-theme-light .reports-section-head > strong { color: #0c7d41; }
body.moyli-theme-light .reports-chart-day__value { color: #0c7d41; }
body.moyli-theme-light .reports-ranking-row b { color: #0c7d41; }
body.moyli-theme-light .reports-search-wrap strong { color: #0c7d41; }
body.moyli-theme-light .reports-table-money.is-warning { color: var(--ds-text-muted); }
body.moyli-theme-light .reports-detail-head span { color: #0c7d41; }
body.moyli-theme-light .dashboard-v62-kpi__icon { color: #0d7d41; }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-green { color: #137756; }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-violet { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-actions__buttons button { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-badge { color: var(--ds-text-muted); }
body.moyli-theme-light .dashboard-v62-attention-item__icon { color: var(--ds-text-muted); }
body.moyli-theme-light .dashboard-v62-operation__icon { color: #137756; }
body.moyli-theme-light .dashboard-v62-operation__amount strong { color: #137756; }
body.moyli-theme-light .notifications-v71__panel-head > strong { color: var(--ds-success-text); }
body.moyli-theme-light .notifications-v71__status-icon { color: var(--ds-success-text); }
body.moyli-theme-light .notifications-v71__kind { color: #117941 !important; }
body.moyli-theme-light .notifications-v71__reminder-date { color: var(--ds-text-muted); }
body.moyli-theme-light .settings-page.settings-v90 { color: #0f7a3d; }
body.moyli-theme-light .settings-v90__eyebrow { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__provider strong { color: #0d7d42; }
body.moyli-theme-light .settings-v90__toggle-row strong { color: #0f7a45; }
body.moyli-theme-light .settings-v90__field-title > span { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__offsets input:checked + span { color: #0d7d42; }
body.moyli-theme-light .settings-v90__templates summary { color: #1c6e43; }
body.moyli-theme-light .settings-v90__templates textarea { color: #0d7d42; }
body.moyli-theme-light .settings-v90__theme-grid button { color: #177342; }
body.moyli-theme-light .settings-v90__range-row b { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__message.is-success { color: #197143; }
body.moyli-theme-light .dashboard-v62-kpi__icon { color: #0c7d41 !important; }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-violet { color: #1a7042 !important; }
body.moyli-theme-light .settings-v90__typography-control > label strong { color: #0f7a45; }
body.moyli-theme-light .settings-v90__typography-control select { color: #0d7d42; }
body.moyli-theme-light .settings-v90__font-sizes button:hover { color: #187243; }
body.moyli-theme-light .settings-v90__font-sizes button.is-active { color: #0d7d42; }
body.moyli-theme-light .settings-v90__type-preview strong { color: #0d7d42; }
body.moyli-theme-light .cash-row-edit { color: #0c7d41; }
body.moyli-theme-light .archive-page.archive-v99 { color: #0e7c45; }
body.moyli-theme-light .archive-v99__eyebrow { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__count strong { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__notice-icon { color: #167349; }
body.moyli-theme-light .archive-v99__notice strong { color: #1a6f4a; }
body.moyli-theme-light .archive-v99__search input { color: #1c6e42; }
body.moyli-theme-light .archive-v99__toolbar select { color: #1c6e42; }
body.moyli-theme-light .archive-v99__message.is-success { color: #197143; }
body.moyli-theme-light .archive-v99__module { color: #0d7d41; }
body.moyli-theme-light .archive-v99__record strong { color: #0f7a45; }
body.moyli-theme-light .archive-v99__action.is-archive { color: var(--ds-text-muted); }
body.moyli-theme-light .archive-v99__detail-btn { color: #0f7b41; }
body.moyli-theme-light .archive-v99__modal > header span { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__detail-item strong { color: #117942; }
/* the archive dialog's buttons keep a translucent dark-green surface in Light (a pale label on a grey-green square): they are ordinary secondary controls */
body.moyli-theme-light .archive-v99__modal > header button,
body.moyli-theme-light .archive-v99__modal > footer button { color: var(--ds-ctl-text); background: var(--ds-ctl-bg); border-color: var(--ds-ctl-border); }
body.moyli-theme-light .archive-v99__modal > header button:hover,
body.moyli-theme-light .archive-v99__modal > footer button:hover { background: var(--ds-ctl-bg-hover); border-color: var(--ds-ctl-border-hover); }
body.moyli-theme-light .mobile-menu-button { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-kpi:nth-child(1) .dashboard-v62-kpi__copy strong { color: #0c7d41 !important; }
body.moyli-theme-light .dashboard-v62-kpi:nth-child(4) .dashboard-v62-kpi__copy strong { color: #1c6e42 !important; }
body.moyli-theme-light #reportsPage .reports-kpi.is-primary strong { color: #0d7d41 !important; }
body.moyli-theme-light #reportsPage .reports-chart-day__value { color: #0c7d41 !important; }
body.moyli-theme-light #reportsPage .reports-ranking-row b { color: #0c7d41 !important; }
body.moyli-theme-light .sales-create-service-toggle { color: #0c7d41 !important; }
body.moyli-theme-light .dashboard-detail-head > div > span { color: #0c7d41; }
body.moyli-theme-light #salesPage .sales-analytics-metrics strong { color: #0c7d41 !important; -webkit-text-fill-color: #0c7d41 !important; }
body.moyli-theme-light .client-vehicle-edit-message { color: var(--ds-text-muted); }
body.moyli-theme-light .notifications-v71__test-note strong { color: #127843; }

/* =========================================================
   DASHBOARD — minimalist: 4 essentials, large quick actions,
   attention + latest operations. Payment channels live in Kassa,
   the 7-day trend sits full-width above attention / operations.
   ========================================================= */
.dashboard-v62__control-row { grid-template-columns: 1fr; }
.dashboard-v62-payments { display: none !important; }

.dashboard-lower.dashboard-v62-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

.dashboard-v62-kpi__copy small { font-size: 15px; }
.dashboard-v62-kpi__copy strong { font-size: clamp(24px, 1.3vw + 14px, 32px); }
.dashboard-v62-kpi__copy em { font-size: 14px; }

.dashboard-v62-actions { padding: 16px; }
.dashboard-v62-section-title strong { font-size: 18px; }
.dashboard-v62-section-title span { font-size: 14px; }

.dashboard-v62-actions__buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-v62-actions__buttons button {
    min-height: 96px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 16px;
}

.dashboard-v62-actions__buttons button svg { width: 30px; height: 30px; }

@media (max-width: 900px) {
    .dashboard-v62-actions__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-lower.dashboard-v62-lower { grid-template-columns: 1fr; }
}

/* dashboard lower row: attention | latest operations side by side */
.dashboard-lower.dashboard-v62-lower { grid-template-rows: auto auto; height: auto; }
.dashboard-lower.dashboard-v62-lower > * { grid-column: auto !important; grid-row: auto !important; min-height: 320px; }
.dashboard-lower.dashboard-v62-lower > .dashboard-v62-trend { grid-column: 1 / -1 !important; min-height: 0; }

/* settings: four typography presets */
.settings-v90__font-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settings-v90__font-sizes button { min-height: 46px; font-size: 15px; white-space: nowrap; }

/* ---- review fixes: step badge legibility, mobile warehouse header ---- */
.sales-selected-client .ds-step,
.sales-selected-client .ds-card-head .ds-step {
    opacity: 1 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-transform: none !important;
}

.ds-tab { transition: none; }

@media (max-width: 800px) {
    .warehouse-page__head {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        height: auto !important;
        padding-left: 64px;
    }

    .warehouse-add-product-btn {
        position: static !important;
        width: 100%;
        margin: 0 !important;
        min-height: 48px;
    }

    #warehouseTabs .ds-tab { padding: 0 12px; font-size: 14px; }
}

/* ---- mobile: page headers may grow (legacy forced a fixed single-row height) ---- */
@media (max-width: 800px) {
    :is(
        .topbar:not([hidden]),
        #salesPage .sales-header,
        #clientsPage .clients-page__head,
        #warehousePage .warehouse-page__head,
        #notificationsPage .notifications-page__head
    ) {
        height: auto !important;
        min-height: 64px !important;
        max-height: none !important;
        flex-wrap: wrap !important;
        padding: 10px 12px 10px 68px !important;
        row-gap: 8px !important;
    }

    #warehousePage .warehouse-add-product-btn,
    #clientsPage .clients-add-btn {
        flex: 1 1 100%;
        width: 100%;
        height: 46px !important;
        min-height: 46px !important;
        font-size: 15px !important;
    }
}

/* =========================================================
   FINAL POLISH — Savdo / Ombor / Kassa / Hisobotlar / Bildirishnomalar
   Layout-only: no font-size reductions.
   ========================================================= */

/* Dark theme: legible placeholders */
body:not(.moyli-theme-light) :is(input, textarea)::placeholder {
    color: #9cc4ae !important;
    opacity: 1 !important;
}

/* Savdo tarixi: no big empty detail pane before a record is picked */
.sales-history-layout:has(#salesHistoryClientContent[hidden]) {
    grid-template-columns: minmax(0, 1fr);
}
.sales-history-layout:has(#salesHistoryClientContent[hidden]) .sales-history-client-pane {
    position: static;
    min-height: 0;
    max-height: none;
    padding: 0;
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}
.sales-history-layout:has(#salesHistoryClientContent[hidden]) .sales-history-client-empty {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 16px;
}
.sales-history-layout:has(#salesHistoryClientContent[hidden]) .sales-history-client-empty__icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
}
.sales-history-layout:has(#salesHistoryClientContent[hidden]) .sales-history-client-empty p {
    max-width: none;
}

/* Savdo tahlili: four headline KPIs, the rest compact (all stay clickable) */
.sales-analytics-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sales-analytics-metrics article > small { display: none; }
.sales-analytics-metrics article {
    min-height: 0;
    height: auto;
}
.sales-analytics-metrics article > strong {
    overflow-wrap: anywhere;
    white-space: normal;
}
@media (max-width: 900px) {
    .sales-analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ombor: search field must be a single bordered box */
.warehouse-search input,
.warehouse-search input:focus,
.warehouse-search input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: 0;
    border-radius: 0 !important;
}
.warehouse-search:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43, 234, 132, 0.14);
}

/* Ombor: stock grouped by unit */
#warehouseTotalStockUnits { display: grid; gap: 2px; }
#warehouseTotalStockUnits .warehouse-unit-total { display: block; overflow-wrap: anywhere; }

/* Kassa: payment channels collapsed by default */
.cash-channels--collapsible { padding: 0; }
.cash-channels--collapsible > summary {
    margin: 0;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}
.cash-channels--collapsible > summary::-webkit-details-marker { display: none; }
.cash-channels--collapsible[open] > summary { margin-bottom: 0; }
.cash-channels--collapsible > .cash-channel-grid { padding: 0 12px 12px; }
.cash-channels__toggle {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 6px;
    transition: transform .15s ease;
}
.cash-channels--collapsible[open] .cash-channels__toggle { transform: rotate(-135deg); }
@media (max-width: 800px) {
    .cash-channels--collapsible > .cash-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hisobotlar: sales-first overview; payment channels live in Kassa */
#reportsPage .reports-payments-panel { display: none !important; }
#reportsPage .reports-main-grid { grid-template-columns: minmax(0, 1fr); }
#reportsPage .reports-kpi.is-primary small { font-size: 16px; font-weight: 800; }

/* Bildirishnomalar: simple primary screen */
#notificationsPage .notifications-v71__summary { display: none; }
#notificationsPage #notificationsStatusFilter { display: none; }
#notificationsPage .notifications-v71__segments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}
#notificationsPage .notifications-v71__segments button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
#notificationsPage .notifications-v71__segments button.is-active {
    border-color: #17a45f;
    background: rgba(23, 164, 95, 0.16);
    color: var(--text);
}
body.moyli-theme-light #notificationsPage .notifications-v71__segments button { color: #3f6d54; border-color: #cfe8da; background: #fff; }
body.moyli-theme-light #notificationsPage .notifications-v71__segments button.is-active { background: #e4f6ec; border-color: #17a45f; color: #0d5b33; }


/* =========================================================
   LAYOUT FOUNDATION (responsive repair)
   Root cause: .main is a grid with no explicit column, so its single
   implicit column sized to the widest child's min-content (tables, long
   rows). Wide children pushed the page out behind/after the viewport.
   ========================================================= */
@media (min-width: 801px) {
    .main { grid-template-columns: minmax(0, 1fr); }
}
.main > * { min-width: 0; }

/* Containing block for absolutely positioned descendants (visually-hidden
   checkboxes / radios in Savdo, Sozlamalar ...). Without it they resolve
   against .app, escape .main's overflow clipping and extend the *document*
   below the app shell: the page then scrolls past the painted .app gradient
   and shows the bare canvas (near-black band, sidebar still sticky). */
.main { position: relative; }
body { overflow-x: clip; }

/* Kassa sticky action cell colours per theme */
body.moyli-theme-light { --cash-sticky-bg: #ffffff; }
body.moyli-theme-light #cashPage .cash-table-head > :last-child { background: #f6fbf8; }

/* Dashboard 7-day chart: definite plot height; the card is a normal flex column
   that grows to head + plot (rows are auto, see style.css final height balance). */
.dashboard-v62-trend { min-height: auto; overflow: visible; }
.dashboard-v62-chart { height: 280px; min-height: 280px; }

/* ---------- Table foundation: contained horizontal scroll, rows as wide as
   their column minimums (no cell hangs outside its row) ---------- */
.warehouse-products-table { overflow-x: auto; overscroll-behavior-x: contain; }
.warehouse-products-table__head,
.warehouse-product-row,
.warehouse-products-list { min-width: 1270px; }

.archive-v99__panel { overflow-x: auto; overscroll-behavior-x: contain; }
.archive-v99__table-head,
.archive-v99__row { min-width: 880px; }
@media (max-width: 1050px) {
    .archive-v99__table-head,
    .archive-v99__row { min-width: 700px; }
}
@media (max-width: 760px) {
    .archive-v99__table-head,
    .archive-v99__row { min-width: 760px; }
}

/* ---------- Mijozlar list: stack the vehicle under the name whenever the list
   column itself (not the window) is narrow ---------- */
.clients-list-panel { container: clients-list / inline-size; }
.client-list-row { grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, .9fr) 24px; }
.client-list-identity, .client-list-vehicle { min-width: 0; overflow-wrap: anywhere; }
@container clients-list (max-width: 620px) {
    .client-list-row { grid-template-columns: 40px minmax(0, 1fr) 24px; }
    .client-list-vehicle { grid-column: 2; }
    .client-list-open { grid-column: 3; grid-row: 1 / span 2; }
}

/* Ombor toolbar: actions wrap instead of overflowing off the left edge */
.warehouse-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
    min-width: 0;
}
.warehouse-toolbar-actions > * { min-width: 0; }
@media (min-width: 861px) {
    .warehouse-toolbar-actions { justify-content: flex-end; }
}

/* Narrow phones (320px) at Juda katta: cards/actions reflow instead of overflowing */
.warehouse-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.warehouse-summary-card { min-width: 0; }
.warehouse-summary-card strong, .warehouse-summary-card span, .warehouse-summary-card small { overflow-wrap: anywhere; }
.notifications-v71__head-actions { flex-wrap: wrap; min-width: 0; }
.notifications-v71__head-actions > button { max-width: 100%; }
.sales-results { min-width: 0; max-width: 100%; }
.ds-tabs { max-width: 100%; box-sizing: border-box; min-width: 0; }
.sales-results { overflow-x: auto; }
.warehouse-summary-card > * { min-width: 0; }
.warehouse-summary-card strong { white-space: normal; }

/* ---------- Modals: footer actions stay reachable while the body scrolls ---------- */
.client-vehicle-edit-actions,
.cash-modal-actions,
.warehouse-product-modal-actions,
.sales-client-modal-actions,
.sales-service-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 12px;
    background: var(--ds-modal-footer-bg, #07341c);
    flex-wrap: wrap;
}
body.moyli-theme-light { --ds-modal-footer-bg: #ffffff; }
.client-vehicle-edit-modal, .cash-modal, .warehouse-product-modal,
.sales-client-modal, .sales-service-modal, .sales-confirm-modal, .sales-detail-modal {
    max-height: calc((100dvh / var(--ds-zoom, 1)) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Arxiv toolbar: content-driven columns (media queries ignore the zoom preset) */
.archive-v99__toolbar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.archive-v99__toolbar > * { min-width: 0; }
.archive-v99__search { grid-column: auto; }
.dashboard-v62-recent__list, .dashboard-v62-recent__list *, .dashboard-v62-attention__list * { min-width: 0; overflow-wrap: anywhere; }
.dashboard-v62-panel__head { flex-wrap: wrap; }
.dashboard-v62-panel__head > * { min-width: 0; }

/* =========================================================
   v1.0.19 — DESKTOP SIDEBAR: scrollable menu region + JS tooltip
   The menu is its own scroll region (header and footer stay put), so every item,
   Settings, Support and Profile are always reachable, in both sidebar states, and
   the wheel never chains to the page. The sidebar itself keeps overflow-y: auto as a
   fallback for extremely short windows (never overflow: visible: that re-opens the
   bare-canvas gap below .app).
   ========================================================= */
@media (min-width: 801px) {
    .sidebar { overflow-x: hidden; overscroll-behavior: contain; }

    .sidebar .main-menu {
        flex: 1 1 auto;
        min-height: min(160px, 30vh);
        margin: 11px -4px 0;
        padding: 3px 4px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(43, 234, 132, 0.38) transparent;
    }
    .sidebar .main-menu::-webkit-scrollbar { width: 6px; }
    .sidebar .main-menu::-webkit-scrollbar-track { background: transparent; }
    .sidebar .main-menu::-webkit-scrollbar-thumb { background: rgba(43, 234, 132, 0.38); border-radius: 6px; }
    body.moyli-theme-light .sidebar .main-menu { scrollbar-color: #a9d8bf transparent; }
    body.moyli-theme-light .sidebar .main-menu::-webkit-scrollbar-thumb { background: #a9d8bf; }

    .sidebar .main-menu .menu-item { flex: 0 0 auto; }
    .sidebar .sidebar-support { margin-top: 8px; flex: 0 0 auto; }
    .sidebar .sidebar-user { margin-top: 8px; flex: 0 0 auto; }

    /* collapsed: compact header and items so more of the menu fits without scrolling */
    .app.sidebar-collapsed .brand { min-height: 0; padding: 4px 0 10px; }
    .app.sidebar-collapsed .brand-logo { width: 52px; height: 52px; }
    .app.sidebar-collapsed .sidebar-controls { padding: 10px 0; }
    .app.sidebar-collapsed .main-menu { gap: 4px; }
    .app.sidebar-collapsed .main-menu .menu-item { min-height: 48px; height: 48px; padding: 6px 8px; }
}

.sidebar-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    padding: 8px 11px;
    border: 1px solid rgba(43, 234, 132, 0.32);
    border-radius: 8px;
    background: #06301a;
    color: #eafdf3;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 14px rgba(43, 234, 132, 0.08);
    font-size: var(--ds-fs-secondary);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-5px, -50%);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-tooltip.is-visible { opacity: 1; transform: translate(0, -50%); }
body.moyli-theme-light .sidebar-tooltip {
    border-color: #bfe3cf;
    background: #ffffff;
    color: #0c6a37;
    box-shadow: 0 10px 28px rgba(20, 70, 45, 0.16);
}
@media (max-width: 800px) { .sidebar-tooltip { display: none; } }

/* =========================================================
   v1.0.19 — TYPOGRAPHY PRESETS
   The preset is a single theme-independent scale (--ds-zoom on <body>, set from
   <html data-moyli-font-size>), so it applies identically in Light and Dark. The Settings
   preview therefore must not scale a second time, and four buttons share one row.
   ========================================================= */
.settings-v90__font-sizes { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.settings-v90__type-preview strong,
.settings-v90__type-preview[class] strong { font-size: 14px !important; }
.settings-v90__type-preview small,
.settings-v90__type-preview[class] small { font-size: var(--ds-fs-secondary) !important; }

/* =========================================================
   v1.0.19 — PRODUCTS AS TEXT (no thumbnails / avatars in operational UI)
   Hierarchy: name (brand) -> viscosity / specification / packaging -> SKU -> unit -> stock -> price.
   Long names wrap instead of being cut off; image data and columns stay in the database.
   ========================================================= */
.ds-product-card { grid-template-columns: minmax(0, 1fr) 46px; }
.ds-product-card__text strong {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.25;
}
.ds-product-card__text .ds-product-card__specs { color: var(--ds-text); font-weight: 600; overflow-wrap: anywhere; }

#salesProductModal .sales-product-quick-item--multi { grid-template-columns: 30px minmax(0, 1fr) auto; }
.sales-product-quick-item__text strong,
.sales-product-quick-item__text small { white-space: normal; overflow-wrap: anywhere; }
.sales-product-quick-item__text strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.sales-product-preview { gap: 0; }
.ds-selected .sales-product-row__product strong,
.sales-product-row__product strong { white-space: normal; overflow-wrap: anywhere; }
.sales-product-row__product small { white-space: normal; overflow-wrap: anywhere; }

.warehouse-product-name__copy small { white-space: normal; overflow-wrap: anywhere; }
.warehouse-product-name__copy strong { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.warehouse-product-image-field[hidden] { display: none !important; }

/* typed, unit-aware quantity in the sale cart (4,5 L / 1,25 L / 3 Dona) */
.sales-cart-qty { display: inline-flex; align-items: center; gap: 6px; }
.sales-cart-qty__input {
    width: 78px;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    text-align: center;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-text);
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
}
.sales-cart-qty__input:focus { outline: none; box-shadow: var(--ds-focus); border-color: var(--ds-accent-strong); }
.sales-cart-qty__unit { font-size: var(--ds-fs-secondary); color: var(--ds-text-soft); white-space: nowrap; }
body.moyli-theme-light .sales-cart-qty__input { background: #ffffff !important; color: var(--ds-text) !important; }

/* =========================================================
   v1.0.19 — CUSTOMER CARD (desktop): history never clips
   The history section used to shrink below its own list (flex-shrink with overflow: hidden), so with
   large text presets the last visits were unreachable. The section now never shrinks below its content (the
   history list keeps its own scroller); when the card is taller than the screen the card itself scrolls and
   the "Savdoni boshlash" button stays sticky below.
   ========================================================= */
@media (min-width: 801px) {
    #clientCardPanel .client-card-history-section { flex: 1 0 auto !important; min-height: 0 !important; overflow: visible !important; }
}

/* =========================================================
   v1.0.19 — CURRENCY (UZS / USD display) + "Valyuta va kurslar"
   ========================================================= */
.sidebar-currency { display: grid; gap: 6px; margin: 10px 0 0; padding: 0 5px; }
.app.sidebar-collapsed .sidebar-currency { display: none; }

.cur-seg {
    display: flex;
    width: 100%;
    padding: 3px;
    gap: 3px;
    border-radius: 12px;
    background: var(--ds-surface-2, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14));
}
.cur-seg button {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ds-text-soft, #8fbca4);
    font: inherit;
    font-size: var(--ds-fs-secondary);
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
.cur-seg button.is-active,
.cur-seg button[aria-pressed="true"] { background: var(--ds-accent-strong, #17c964); color: #ffffff; }
.cur-seg button:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }
.cur-seg button:disabled { opacity: 0.5; cursor: not-allowed; }

.cur-rate-host:empty { display: none; }
.cur-rate-host { display: block; font-size: var(--ds-fs-secondary); line-height: 1.35; color: var(--ds-text-soft, #8fbca4); }
.cur-rate-host .cur-rate__value { font-weight: 800; color: var(--ds-text, #ecfdf4); }
.cur-rate-host .cur-rate__meta { color: var(--ds-text-soft, #8fbca4); }
.cur-rate-host .cur-rate { display: block; margin-top: 2px; }
.cur-rate--warn { color: #b45f06; font-weight: 700; }
.cur-rate--error { color: #d6303d; font-weight: 700; }
body:not(.moyli-theme-light) .cur-rate--warn { color: #f3b45a; }
body:not(.moyli-theme-light) .cur-rate--error { color: #ff7b88; }

/* Settings card */
.settings-v90__card--currency { grid-column: 1 / -1; }
.cur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 4px; }
.cur-block { min-width: 0; margin-top: 14px; }
.cur-grid .cur-block { margin-top: 0; }
.cur-block h3 { margin: 0 0 8px; font-size: 15px; color: var(--ds-text, #ecfdf4); }
.cur-note { margin: 8px 0 0; font-size: var(--ds-fs-secondary); line-height: 1.45; color: var(--ds-text-soft, #8fbca4); }
.cur-banner {
    margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; font-weight: 600;
    color: #8a4b05; background: rgba(243, 180, 90, 0.18); border: 1px solid rgba(243, 180, 90, 0.55);
}
body:not(.moyli-theme-light) .cur-banner { color: #f3c98a; }
.cur-banner[hidden] { display: none; }
.cur-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; align-items: end; }
.cur-form label { display: grid; gap: 4px; min-width: 0; }
.cur-form label > span { font-size: var(--ds-fs-secondary); font-weight: 700; color: var(--ds-text-soft, #8fbca4); }
.cur-form input[type="text"], .cur-form input[type="date"] {
    width: 100%; min-width: 0; box-sizing: border-box; /* never wider than the column (320 px + the largest font preset) */
    min-height: 44px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 15px;
    color: var(--ds-text, #ecfdf4); background: var(--ds-surface-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16));
}
.cur-form__wide { grid-column: 1 / -1; }
.cur-check { grid-column: 1 / -1; display: flex !important; align-items: flex-start; gap: 10px !important; }
.cur-check input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 20px; }
.cur-check span { font-size: var(--ds-fs-secondary) !important; font-weight: 600 !important; line-height: 1.4; }
.cur-hint { grid-column: 1 / -1; margin: 0; font-size: var(--ds-fs-secondary); line-height: 1.4; opacity: .8; }
.cur-btn {
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    color: #ffffff; background: var(--ds-accent-strong, #17c964);
}
.cur-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cur-btn:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }
.cur-message { min-height: 20px; margin-top: 10px; font-size: 14px; font-weight: 700; }
.cur-message.is-success { color: #0c7e41; }
.cur-message.is-error { color: #d6303d; }
body:not(.moyli-theme-light) .cur-message.is-success { color: #6ef0a8; }
body:not(.moyli-theme-light) .cur-message.is-error { color: #ff7b88; }

.cur-table, .cur-audit { border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14)); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.cur-row { display: grid; grid-template-columns: 110px 130px 110px 110px 120px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px 12px; font-size: 14px; border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.08)); }
.cur-row:last-child { border-bottom: 0; }
.cur-row--head { font-size: var(--ds-fs-secondary); font-weight: 800; color: var(--ds-text-soft, #8fbca4); background: var(--ds-surface-2, rgba(255, 255, 255, 0.04)); }
.cur-row b { font-weight: 800; color: var(--ds-text, #ecfdf4); }
.cur-row.is-superseded { opacity: 0.6; }
.cur-row.is-superseded b { text-decoration: line-through; }
.cur-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--ds-accent-soft, rgba(43, 234, 132, 0.15)); color: var(--ds-text, #ecfdf4); }
.cur-tag--manual { background: rgba(243, 180, 90, 0.22); }
.cur-empty { padding: 14px 12px; font-size: 14px; color: var(--ds-text-soft, #8fbca4); }
.cur-empty--error { font-weight: 700; color: #d6303d; }
body:not(.moyli-theme-light) .cur-empty--error { color: #ff7b88; }
.cur-btn--retry { margin: 0 12px 12px; }
.cur-audit .cur-row { grid-template-columns: 150px 150px minmax(0, 1fr); }

@media (max-width: 800px) {
    .cur-row, .cur-audit .cur-row { grid-template-columns: 1fr 1fr; }
    .cur-row--head { display: none; }
    .cur-row > :first-child, .cur-row > :last-child { grid-column: 1 / -1; }
    .m-sheet__rate { flex: 1 1 100%; font-size: var(--ds-fs-secondary); }
    .m-sheet__rate:empty { display: none; }
}

/* =========================================================
   v1.0.19 — OMBOR: Excel import (template, preview, confirm)
   ========================================================= */
.wimp-modal { width: min(1120px, 100%) !important; }
.wimp-pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.wimp-btn {
    min-height: 44px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    color: var(--ds-text, #ecfdf4); background: var(--ds-surface-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.18));
}
.wimp-btn--primary, .wimp-commit { color: #ffffff; background: var(--ds-accent-strong, #17c964); border-color: transparent; }
.wimp-btn:focus-visible, .wimp-commit:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }
.wimp-btn:disabled, .wimp-commit:disabled { opacity: 0.55; cursor: not-allowed; }
.wimp-file { min-height: 20px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ds-text-soft, #8fbca4); overflow-wrap: anywhere; }

.wimp-mode { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); border-radius: 12px; display: grid; gap: 10px; }
.wimp-mode legend { padding: 0 6px; font-size: 14px; font-weight: 800; color: var(--ds-text, #ecfdf4); }
.wimp-mode label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.wimp-mode input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 20px; }
.wimp-mode strong { display: block; font-size: 15px; color: var(--ds-text, #ecfdf4); }
.wimp-mode small { display: block; margin-top: 2px; font-size: var(--ds-fs-secondary); line-height: 1.4; color: var(--ds-text-soft, #8fbca4); }

.wimp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.wimp-chip { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); background: var(--ds-surface-2, rgba(255, 255, 255, 0.04)); }
.wimp-chip strong { display: block; font-size: 22px; line-height: 1.1; color: var(--ds-text, #ecfdf4); }
.wimp-chip span { font-size: 12px; font-weight: 700; color: var(--ds-text-soft, #8fbca4); }
.wimp-chip.is-create strong { color: #0c7e41; }
.wimp-chip.is-update strong { color: #1f6fb5; }
.wimp-chip.is-error strong { color: #d6303d; }
body:not(.moyli-theme-light) .wimp-chip.is-create strong { color: #6ef0a8; }
body:not(.moyli-theme-light) .wimp-chip.is-update strong { color: #8cc4ff; }
body:not(.moyli-theme-light) .wimp-chip.is-error strong { color: #ff7b88; }
.wimp-info { margin: 0 0 8px; font-size: var(--ds-fs-secondary); color: var(--ds-text-soft, #8fbca4); }
.wimp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.wimp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ds-text, #ecfdf4); }
.wimp-check input { width: 20px; height: 20px; }

.wimp-table { max-height: min(46vh, 520px); overflow: auto; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); border-radius: 12px; margin-bottom: 10px; }
.wimp-row { display: grid; grid-template-columns: 56px 104px minmax(220px, 1.5fr) 84px 84px 100px 100px minmax(240px, 1.6fr); gap: 8px; align-items: start; padding: 8px 12px; font-size: 14px; border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.08)); min-width: 980px; }
.wimp-row:last-child { border-bottom: 0; }
.wimp-row--head { position: sticky; top: 0; z-index: 1; font-size: var(--ds-fs-secondary); font-weight: 800; color: var(--ds-text-soft, #8fbca4); background: var(--ds-surface, #07341c); }
.wimp-row > span { min-width: 0; overflow-wrap: anywhere; }
.wimp-row.is-error { background: rgba(229, 49, 63, 0.07); }
.wimp-row.is-skip { opacity: 0.72; }
.wimp-name strong { display: block; color: var(--ds-text, #ecfdf4); }
.wimp-name small { display: block; color: var(--ds-text-soft, #8fbca4); font-size: var(--ds-fs-secondary); }
.wimp-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--ds-surface-2, rgba(255, 255, 255, 0.08)); color: var(--ds-text, #ecfdf4); }
.wimp-tag.is-create { background: rgba(23, 201, 100, 0.2); }
.wimp-tag.is-update { background: rgba(31, 111, 181, 0.22); }
.wimp-tag.is-error { background: rgba(229, 49, 63, 0.2); }
.wimp-notes small { display: block; font-size: var(--ds-fs-secondary); line-height: 1.4; }
.wimp-notes small.is-error { color: #d6303d; font-weight: 700; }
.wimp-notes small.is-warning { color: #8a5a10; }
.wimp-notes small.is-change { color: #1f6fb5; font-weight: 700; }
body:not(.moyli-theme-light) .wimp-notes small.is-change { color: #8cc4f5; }
body:not(.moyli-theme-light) .wimp-notes small.is-error { color: #ff7b88; }
body:not(.moyli-theme-light) .wimp-notes small.is-warning { color: #f3c98a; }
.wimp-empty { padding: 16px 12px; font-size: 14px; color: var(--ds-text-soft, #8fbca4); }

.wimp-confirm { margin-top: 10px; padding: 14px; border-radius: 12px; border: 2px solid var(--ds-accent-strong, #17c964); background: var(--ds-accent-soft, rgba(23, 201, 100, 0.1)); }
.wimp-confirm p { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ds-text, #ecfdf4); }
.wimp-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.wimp-done h3 { margin: 6px 0; font-size: 20px; color: var(--ds-text, #ecfdf4); }
.wimp-done p { margin: 4px 0; font-size: 15px; color: var(--ds-text, #ecfdf4); }
.wimp-done .wimp-note { font-size: var(--ds-fs-secondary); color: var(--ds-text-soft, #8fbca4); }

@media (max-width: 800px) {
    .wimp-table { max-height: 52vh; }
    .wimp-row { min-width: 0; grid-template-columns: 1fr 1fr; }
    .wimp-row--head { display: none; }
    .wimp-row > :nth-child(3), .wimp-row > :nth-child(8) { grid-column: 1 / -1; }
    .wimp-pick .wimp-btn { flex: 1 1 100%; }
    .wimp-confirm__actions .wimp-btn { flex: 1 1 100%; }
}

/* =========================================================
   v1.0.19 — client / vehicle service history (visit cards)
   ========================================================= */
.client-history-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.client-history-tools[hidden] { display: none; }
.client-history-tools label { display: grid; gap: 4px; flex: 1 1 200px; min-width: 0; }
.client-history-tools label > span { font-size: var(--ds-fs-secondary); font-weight: 700; color: var(--ds-text-soft, #8fbca4); }
.client-history-tools select {
    min-height: 44px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 14px; min-width: 0; width: 100%;
    color: var(--ds-text, #ecfdf4); background: var(--ds-surface-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16));
}
.client-history-tools .ds-export-group { display: flex; gap: 8px; }
.client-history-tools .ds-export-btn { min-height: 44px; }

.client-history-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; font-size: var(--ds-fs-secondary); font-weight: 600; color: var(--ds-text-soft, #8fbca4); }
.client-history-line--product { row-gap: 1px; }
.client-history-line--product > strong { overflow-wrap: anywhere; }
.client-history-line__detail, .client-history-line__qty { grid-column: 2 / -1; font-size: var(--ds-fs-secondary); line-height: 1.35; color: var(--ds-text-soft, #8fbca4); overflow-wrap: anywhere; }
.client-history-line__detail:empty { display: none; }
.client-history-line__detail.is-derived { font-style: italic; }
.client-history-line__qty { font-weight: 700; color: var(--ds-text, #ecfdf4); }
.client-history-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--ds-border, rgba(255, 255, 255, 0.14)); font-size: var(--ds-fs-secondary); font-weight: 700; color: var(--ds-text, #ecfdf4); }
.client-history-foot .is-debt { color: #d6303d; }
body:not(.moyli-theme-light) .client-history-foot .is-debt { color: #ff7b88; }

/* =========================================================
   v1.0.19 — Avtomobil texnik ma’lumotlari (vehicle reference)
   ========================================================= */
.vref-page { width: 100%; max-width: 1540px; margin: 0 auto; color: var(--ds-text, #ecfdf4); min-width: 0; }
.vref-page[hidden], .vref-warning[hidden], .vref-modal [hidden] { display: none; }
.vref-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vref-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.vref-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.vref-eyebrow { display: block; margin-bottom: 7px; color: var(--ds-accent-strong, #0b984e); font-size: var(--ds-fs-secondary); font-weight: 800; letter-spacing: 0.16em; }
.vref-head h1 { margin: 0; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; overflow-wrap: anywhere; }
.vref-head p { margin: 7px 0 0; color: var(--ds-text-soft, #8fbca4); font-size: 14px; line-height: 1.4; }
.vref-head__side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vref-count { min-width: 92px; padding: 8px 14px; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); border-radius: 12px; background: var(--ds-surface, #072d19); text-align: right; }
.vref-count span { display: block; font-size: var(--ds-fs-secondary); color: var(--ds-text-soft, #8fbca4); }
.vref-count strong { display: block; font-size: 20px; }

.vref-btn {
    min-height: 44px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    color: var(--ds-text, #ecfdf4); background: var(--ds-surface-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.18));
}
.vref-btn--primary { color: #ffffff; background: var(--ds-accent-strong, #0b984e); border-color: transparent; }
.vref-btn--danger { color: #ffffff; background: #c62836; border-color: transparent; }
.vref-btn--ghost-danger { color: #c62836; border-color: currentColor; background: transparent; }
body:not(.moyli-theme-light) .vref-btn--ghost-danger { color: #ff7b88; }
.vref-btn:focus-visible, .vref-toolbar select:focus-visible, .vref-modal input:focus-visible, .vref-modal select:focus-visible, .vref-modal textarea:focus-visible, .vref-toolbar input:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }
.vref-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.vref-warning { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border-left: 4px solid #e0a030; background: rgba(243, 180, 90, 0.16); font-size: 14px; line-height: 1.45; color: var(--ds-text, #ecfdf4); }
.vref-warning--storage { border-left-color: #d6303d; background: rgba(229, 49, 63, 0.12); font-weight: 700; }

.vref-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.vref-search { flex: 1 1 260px; min-width: 0; }
.vref-year { flex: 0 1 110px; min-width: 90px; }
.vref-toolbar input, .vref-toolbar select, .vref-modal input, .vref-modal select, .vref-modal textarea {
    width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 15px;
    color: var(--ds-text, #ecfdf4); background: var(--ds-surface-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16));
}
.vref-toolbar select { flex: 0 1 240px; width: auto; max-width: 100%; }
.vref-modal textarea { padding: 8px 10px; min-height: 64px; resize: vertical; }

.vref-message { min-height: 20px; margin: 4px 0 10px; font-size: 14px; font-weight: 700; color: var(--ds-text-soft, #8fbca4); }
.vref-message.is-success { color: #0c7e41; }
.vref-message.is-error { color: #d6303d; }
body:not(.moyli-theme-light) .vref-message.is-success { color: #47d68b; }
body:not(.moyli-theme-light) .vref-message.is-error { color: #ff7b88; }
.vref-empty { padding: 22px 16px; border: 1px dashed var(--ds-border, rgba(255, 255, 255, 0.2)); border-radius: 12px; font-size: 15px; line-height: 1.5; color: var(--ds-text-soft, #8fbca4); }

.vref-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.vref-list > .vref-empty { grid-column: 1 / -1; }
.vref-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); border-radius: 14px; background: var(--ds-surface, #072d19); }
.vref-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vref-card__title { min-width: 0; }
.vref-card__title strong { display: block; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.vref-card__title small { display: block; margin-top: 2px; font-size: var(--ds-fs-secondary); color: var(--ds-text-soft, #8fbca4); overflow-wrap: anywhere; }
.vref-card__foot { display: flex; justify-content: flex-end; }

.vref-badge { flex: 0 0 auto; display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ds-text, #ecfdf4); background: rgba(243, 180, 90, 0.28); white-space: nowrap; }
.vref-badge--workshop { background: rgba(31, 111, 181, 0.26); }
.vref-badge--verified { background: rgba(23, 201, 100, 0.28); }

.vref-cov { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vref-chip { display: inline-flex; flex-direction: column; padding: 4px 9px; border-radius: 10px; font-size: 12px; line-height: 1.25; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); color: var(--ds-text, #ecfdf4); background: transparent; }
.vref-chip__name { font-weight: 800; }
.vref-chip__state { font-weight: 600; color: var(--ds-text-soft, #8fbca4); }
.vref-chip.is-recorded { background: var(--ds-accent-soft, rgba(23, 201, 100, 0.16)); border-color: transparent; }
.vref-chip.is-not_applicable { border-style: dotted; background: var(--ds-surface-2, rgba(255, 255, 255, 0.05)); }
.vref-chip.is-missing { border-style: dashed; }
.vref-cat__head > .vref-chip { flex-direction: row; padding: 3px 10px; font-weight: 800; }

.vref-modal { width: min(980px, 100%) !important; }
.vref-modal .vref-warning { margin-bottom: 12px; }
.vref-cat { margin: 0 0 14px; padding: 12px; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.16)); border-radius: 12px; min-width: 0; }
.vref-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.vref-cat__head h3 { margin: 0; font-size: 16px; color: var(--ds-text, #ecfdf4); }
.vref-hint { margin: 0 0 8px; font-size: var(--ds-fs-secondary); line-height: 1.4; color: var(--ds-text-soft, #8fbca4); }

.vref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: 10px; }
.vref-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.vref-field > span { font-size: var(--ds-fs-secondary); font-weight: 700; color: var(--ds-text-soft, #8fbca4); }
.vref-field--wide { grid-column: 1 / -1; }
.vref-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vref-actions--end { justify-content: flex-end; margin-top: 8px; }
.vref-confirm { margin-top: 10px; padding: 12px; border-radius: 12px; border: 2px solid #c62836; }
.vref-confirm p { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ds-text, #ecfdf4); }

.vref-item { margin: 0 0 8px; border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12)); border-radius: 10px; background: var(--ds-surface-2, rgba(255, 255, 255, 0.04)); min-width: 0; }
.vref-item__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.vref-item__summary strong { color: var(--ds-text, #ecfdf4); }
.vref-item__text { flex: 1 1 160px; min-width: 0; color: var(--ds-text-soft, #8fbca4); overflow-wrap: anywhere; }
.vref-item > .vref-fluid { padding: 4px 12px 12px; }
.vref-fluid[data-status="not_applicable"] .vref-data { display: none; }

@media (max-width: 800px) {
    .vref-head__side { width: 100%; justify-content: space-between; }
    .vref-head__side .vref-btn { flex: 1 1 auto; }
    .vref-list { grid-template-columns: minmax(0, 1fr); }
    .vref-toolbar select, .vref-year { flex: 1 1 100%; width: 100%; }
    .vref-btn { min-height: 48px; }
    .vref-actions > .vref-btn { flex: 1 1 140px; }
    .vref-cat { padding: 10px; }
}
.vref-message__line { display: block; }

/* v1.0.19 safety fix: on phones the export menu must stay inside the screen even at the largest font preset
   (it is right-aligned to its button; its 180 px minimum width pushed it 18 px past the left edge at 320 px). */
@media (max-width: 800px) {
    .warehouse-toolbar-export-menu .warehouse-action-menu__panel { min-width: 140px; max-width: calc(100vw / var(--ds-zoom, 1) - 24px); }
}

/* =========================================================
   v1.0.20 — LIGHT THEME SURFACE CONTRACT
   style.css is dark-first: many legacy controls and floating panels paint a literal near-black green (#06301a, #07351c …).
   In Light they read the tokens below instead; Dark keeps its literals (every rule here is scoped to body.moyli-theme-light).
   New UI uses these tokens, never a literal. tests/browser/v1020/ui_audit.mjs check "M" fails when ANY element, in ANY DOM
   state (modals and menus included), is near-black in Light.
   ========================================================= */
:root {
    /* secondary control (button) and floating panel (menu / dialog) — the Dark values are the literals style.css already uses */
    --ds-ctl-bg: #06301a;
    --ds-ctl-bg-hover: #084123;
    --ds-ctl-border: var(--ds-border-soft);
    --ds-ctl-border-hover: var(--ds-accent);
    --ds-ctl-text: #d7efe2;
    --ds-danger-text: #ff6674;
    --ds-panel-bg: #07351c;
    --ds-panel-border: var(--ds-border-soft);
    --ds-panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    /* text roles used by Light fixes; Dark maps them to the colours it already shows */
    --ds-text-muted: var(--ds-text-dim);
    --ds-warning-text: var(--ds-warning);
    --ds-success-text: var(--ds-accent);
    --ds-placeholder: var(--ds-text-dim);
    --moyli-primary: #11a757;               /* the green of primary buttons: one token, Light darkens it */
    --moyli-danger: #dc1329;                /* the red of destructive buttons: white text 5.0:1 (the old #f01427 gave 4.3:1) */
}
body.moyli-theme-light {
    --ds-ctl-bg: var(--ds-surface-2);
    --ds-ctl-bg-hover: var(--ds-accent-soft);
    --ds-ctl-border: var(--ds-border);
    --ds-ctl-border-hover: var(--ds-accent);
    --ds-ctl-text: var(--ds-text);
    --ds-danger-text: #b9222f;
    --ds-panel-bg: var(--ds-surface);
    --ds-panel-border: var(--ds-border);
    --ds-panel-shadow: 0 18px 45px rgba(14, 29, 22, 0.18);
    --ds-text-muted: #4c6b5a;   /* captions, hints, secondary labels: >= 4.8:1 on white AND on every tinted card */
    --ds-warning-text: #8a5a00; /* amber text: 5.5:1 */
    --ds-success-text: #08733a; /* green status text: 5.4:1 on white, 4.9:1 on the mint chip */
    --ds-placeholder: #587566;  /* placeholders are text too: 4.9:1 on a white field */
    --moyli-primary: #0a7d3f;   /* primary button surface: white text 5.2:1 */
    --moyli-danger: #c4162a;    /* destructive button surface: white text 5.8:1 */
}

body.moyli-theme-light :is(
    .sales-client-search-btn, .sales-add-service-btn, .sales-add-product-btn, .sales-history-search-wrap button,
    .sales-chart-nav button, .clients-refresh-btn, .client-card-back, .client-card-new-sale,
    .cash-modal__head > button, .reports-detail-head button, .profile-photo-button,
    .warehouse-product-image-controls button, .logout-cancel-button, .profile-code-secondary-button
) {
    background: var(--ds-ctl-bg);
    border-color: var(--ds-ctl-border);
    color: var(--ds-ctl-text);
}
body.moyli-theme-light :is(
    .sales-client-search-btn, .sales-add-service-btn, .sales-add-product-btn, .sales-history-search-wrap button,
    .sales-chart-nav button, .clients-refresh-btn, .client-card-back, .client-card-new-sale,
    .cash-modal__head > button, .reports-detail-head button, .profile-photo-button,
    .warehouse-product-image-controls button, .logout-cancel-button, .profile-code-secondary-button
):hover:not(:disabled) {
    background: var(--ds-ctl-bg-hover);
    border-color: var(--ds-ctl-border-hover);
}
body.moyli-theme-light .warehouse-product-image-controls button.is-danger { color: var(--ds-danger-text); }

body.moyli-theme-light :is(.warehouse-action-menu__panel, .logout-confirm-box, .session-loader-box) {
    background: var(--ds-panel-bg);
    border-color: var(--ds-panel-border);
    box-shadow: var(--ds-panel-shadow);
}
body.moyli-theme-light .warehouse-action-menu__panel button { color: var(--ds-text-soft); }
body.moyli-theme-light .warehouse-action-menu__panel button:hover { background: var(--ds-accent-soft); color: var(--ds-accent-strong); }
body.moyli-theme-light .warehouse-action-menu__panel button.is-danger,
body.moyli-theme-light .warehouse-action-menu__panel button.is-danger:hover { color: var(--ds-danger-text); }
body.moyli-theme-light .logout-confirm-box h2,
body.moyli-theme-light .session-loader-text { color: var(--ds-text); }
body.moyli-theme-light .logout-confirm-box p { color: var(--ds-text-soft); }
body.moyli-theme-light .session-spinner { border-color: rgba(14, 29, 22, 0.14); border-top-color: #ff1f3d; }

/* style.css carries five generations of Light palette variables (--moyli-light/preview/l10/l11-*, --ml-*) and each one made its
   muted / faint text lighter than the last (#66937b, #87a896, #94b3a2 … 1.9–3.3:1 on white). All of them now resolve to ONE token. */
body.moyli-theme-light {
    --moyli-light-muted: var(--ds-text-muted);
    --moyli-light-faint: var(--ds-text-muted);
    --moyli-preview-muted: var(--ds-text-muted);
    --moyli-preview-faint: var(--ds-text-muted);
    --moyli-l10-muted: var(--ds-text-muted);
    --moyli-l10-faint: var(--ds-text-muted);
    --moyli-l11-muted: var(--ds-text-muted);
    --moyli-l11-faint: var(--ds-text-muted);
    --ml-muted: var(--ds-text-muted);
    --moyli-l11-secondary: var(--ds-text-muted);
}

/* v1.0.21 — LIGHT: base (dark-first) rules that never got a Light counterpart. Found by tests/browser/v1020/contrast_verify.mjs: a text colour
   made for a dark card (mint, coral, pale green) sat on white at 1.6-3.2:1. Each now reads a role token. */
body.moyli-theme-light :is(.settings-catalog-empty, .archive-v99__empty, .settings-v90__hint) { color: var(--ds-text-muted); }
body.moyli-theme-light .settings-catalog-chip button { color: var(--ds-text-muted); }
body.moyli-theme-light .cash-delete-warning p { color: var(--ds-text-soft); }
body.moyli-theme-light .cash-modal .cash-delete-warning__icon { color: var(--ds-danger-text); background: #fde8ea; border-color: #efb9c0; }   /* the dialog's muted-caption rule is more specific than the icon's own rule */
body.moyli-theme-light .cash-delete-warning { background: #fff5f6; border-color: #efb9c0; }                  /* a translucent dark red over white was a muddy pink */
body.moyli-theme-light .cash-delete-warning strong { color: var(--ds-text); }
body.moyli-theme-light .client-card .client-card-new-sale :is(span, small, p) { color: inherit; }   /* the muted caption rule of the client card reached the label of the primary button */

/* v1.0.21 — LIGHT status text, one role per colour. style.css is dark-first: 161 rules give text a pale or neon green / coral / amber made for a dark card.
   Each is repeated here once for Light with the role token (success / danger / warning text), generated from style.css and kept exact: nothing is added for Dark. */
body.moyli-theme-light .red { color: var(--ds-danger-text) !important; }
body.moyli-theme-light .blue { color: var(--ds-success-text) !important; }
body.moyli-theme-light .auth-message { color: var(--ds-danger-text); }
body.moyli-theme-light .login-status.available { color: var(--ds-success-text); }
body.moyli-theme-light .login-status.taken { color: var(--ds-danger-text); }
body.moyli-theme-light .field-error { color: var(--ds-danger-text); }
body.moyli-theme-light .forgot-password-link { color: var(--ds-success-text); }
body.moyli-theme-light .field-error.checking { color: var(--ds-success-text); }
body.moyli-theme-light .field-error.success { color: var(--ds-success-text) !important; }
body.moyli-theme-light #verificationForm .auth-back-button { color: var(--ds-success-text); }
body.moyli-theme-light .auth-message.error { color: var(--ds-danger-text) !important; }
body.moyli-theme-light .auth-message.success { color: var(--ds-success-text) !important; }
body.moyli-theme-light .profile-popover-item.danger { color: var(--ds-danger-text); }
body.moyli-theme-light .profile-field-action { color: var(--ds-success-text); }
body.moyli-theme-light .sales-plate-message { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-client-modal-message { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-service-modal-message { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-service-row > button { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-summary-card__icon { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-summary-card.is-warning .warehouse-summary-card__icon { color: var(--ds-warning-text); }
body.moyli-theme-light .warehouse-summary-card.is-danger .warehouse-summary-card__icon { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-summary-card.is-success .warehouse-summary-card__icon { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-product-modal-message { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-product-modal-message.success { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-stock-status.is-ok { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-stock-status.is-low { color: var(--ds-warning-text); }
body.moyli-theme-light .warehouse-stock-status.is-out { color: var(--ds-danger-text); }
body.moyli-theme-light #warehouseDetailStatus.is-ok { color: var(--ds-success-text); }
body.moyli-theme-light #warehouseDetailStatus.is-low { color: var(--ds-warning-text); }
body.moyli-theme-light #warehouseDetailStatus.is-out { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-product-actions button[data-warehouse-action="archive"] { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-history-type.is-in { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-history-quantity.is-in { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-history-type.is-out { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-history-quantity.is-out { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-product-row > button { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-restore-btn { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-action-menu__panel button.is-danger { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-action-menu__panel button.is-danger:hover { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-detail-primary-btn.is-in { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-detail-primary-btn.is-out { color: var(--ds-warning-text); }
body.moyli-theme-light .warehouse-product-image-placeholder::before { color: var(--ds-success-text); }
body.moyli-theme-light .warehouse-product-image-controls button.is-danger { color: var(--ds-danger-text); }
body.moyli-theme-light .warehouse-product-image-controls button.is-danger:hover { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-checkout-row.is-discount strong { color: var(--ds-warning-text); }
body.moyli-theme-light .sales-payment-balance.is-ok { color: var(--ds-success-text); }
body.moyli-theme-light .sales-payment-balance.is-error { color: var(--ds-warning-text); }
body.moyli-theme-light .sales-checkout-message.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-checkout-message.is-success { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-empty.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-success-icon { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-client-link:hover strong { color: var(--ds-success-text); }
body.moyli-theme-light .client-list-avatar { color: var(--ds-success-text); }
body.moyli-theme-light .client-list-open { color: var(--ds-success-text); }
body.moyli-theme-light .clients-empty.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-history-open-client { color: var(--ds-success-text); }
body.moyli-theme-light .sales-payment-methods button[data-sale-payment="debt"].is-active { color: var(--ds-warning-text); }
body.moyli-theme-light .sales-next-service-preview.is-warning { color: var(--ds-warning-text); }
body.moyli-theme-light .client-card__avatar { color: var(--ds-success-text); }
body.moyli-theme-light .client-card-stats article.is-debt.has-debt strong { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-analytics-metrics strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-analytics-metrics article:first-child strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-analytics-metrics article.is-debt strong { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-analytics-chart-head > strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-month-col > strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-payment.is-debt span { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-history-payment.is-debt small { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-found-client__debt { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-confirm-head span { color: var(--ds-success-text); }
body.moyli-theme-light .sales-confirm-line > div span { color: var(--ds-success-text); }
body.moyli-theme-light .sales-confirm-totals > div.is-debt strong { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-confirm-message { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-history-client:hover strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-client-empty__icon { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-client-avatar { color: var(--ds-success-text); }
body.moyli-theme-light .sales-history-client-stats .is-debt strong.has-debt { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-history-client-section__head span { color: var(--ds-success-text); }
body.moyli-theme-light .sales-chart-nav strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-day-col > strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-day-col > small { color: var(--ds-success-text); }
body.moyli-theme-light .sales-analytics-detail__head > strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-analytics-detail-row > strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-analytics-detail-arrow { color: var(--ds-success-text); }
body.moyli-theme-light .client-card-section-count { color: var(--ds-success-text); }
body.moyli-theme-light .sales-heading-icon { color: var(--ds-success-text); }
body.moyli-theme-light .sales-section-title__icon { color: var(--ds-success-text); }
body.moyli-theme-light .sales-auto-label { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-eyebrow { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-status.is-completed { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-status.is-cancelled { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-detail-card__head > strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-totals .is-total span { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-totals .is-total strong { color: var(--ds-success-text); }
body.moyli-theme-light .sales-detail-totals .is-discount strong { color: var(--ds-warning-text); }
body.moyli-theme-light .sales-detail-totals .is-debt strong { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-detail-payments .is-debt strong { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-detail-message.is-warning { color: var(--ds-warning-text); }
body.moyli-theme-light .sales-detail-message.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-detail-message.is-cancelled { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-detail-danger { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-history-row.is-cancelled .sales-history-total { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-history-row.is-cancelled .sales-history-payment > span { color: var(--ds-danger-text); }
body.moyli-theme-light .sidebar-support__icon { color: var(--ds-success-text); }
body.moyli-theme-light .profile-logout-button { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-found-client__chip.is-debt { color: var(--ds-danger-text); }
body.moyli-theme-light .sales-found-client__chip.is-next { color: var(--ds-success-text); }
body.moyli-theme-light .cash-summary-card.is-debt strong { color: var(--ds-danger-text); }
body.moyli-theme-light .cash-out { color: var(--ds-danger-text); }
body.moyli-theme-light .cash-modal-message { color: var(--ds-danger-text); }
body.moyli-theme-light .reports-kpi.is-primary strong { color: var(--ds-success-text); }
body.moyli-theme-light .reports-kpi.is-success strong { color: var(--ds-success-text); }
body.moyli-theme-light .reports-kpi.is-danger strong { color: var(--ds-danger-text); }
body.moyli-theme-light .reports-kpi.is-warning strong { color: var(--ds-warning-text); }
body.moyli-theme-light .reports-section-head > strong { color: var(--ds-success-text); }
body.moyli-theme-light .reports-chart-day__value { color: var(--ds-success-text); }
body.moyli-theme-light .reports-ranking-row b { color: var(--ds-success-text); }
body.moyli-theme-light .reports-search-wrap strong { color: var(--ds-success-text); }
body.moyli-theme-light .reports-table-money.is-danger { color: var(--ds-danger-text); }
body.moyli-theme-light .reports-table-money.is-warning { color: var(--ds-warning-text); }
body.moyli-theme-light .reports-detail-head span { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-kpi__icon { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-green { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-danger { color: var(--ds-danger-text); }
body.moyli-theme-light .dashboard-v62-kpi__icon.is-violet { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-actions__buttons button:first-child { color: var(--ds-danger-text); }
body.moyli-theme-light .dashboard-v62-badge { color: var(--ds-warning-text); }
body.moyli-theme-light .dashboard-v62-attention-item__icon { color: var(--ds-warning-text); }
body.moyli-theme-light .dashboard-v62-attention-item.is-danger .dashboard-v62-attention-item__icon { color: var(--ds-danger-text); }
body.moyli-theme-light .dashboard-v62-operation__icon { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-operation.is-out .dashboard-v62-operation__icon { color: var(--ds-danger-text); }
body.moyli-theme-light .dashboard-v62-operation__amount strong { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-v62-operation.is-out .dashboard-v62-operation__amount strong { color: var(--ds-danger-text); }
body.moyli-theme-light .notifications-v71__message.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .notifications-v71__message.is-success { color: var(--ds-success-text); }
body.moyli-theme-light .notifications-v71__status-icon { color: var(--ds-success-text); }
body.moyli-theme-light .notifications-v71__row.is-sent .notifications-v71__status-icon { color: var(--ds-success-text); }
body.moyli-theme-light .notifications-v71__row.is-failed .notifications-v71__status-icon { color: var(--ds-danger-text); }
body.moyli-theme-light .notifications-v71__kind { color: var(--ds-success-text) !important; }
body.moyli-theme-light .notifications-v71__actions button.is-primary { color: var(--ds-danger-text); }
body.moyli-theme-light .notifications-v71__reminder-date { color: var(--ds-warning-text); }
body.moyli-theme-light .settings-v90__eyebrow { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__field-title > span { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__range-row b { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__message.is-success { color: var(--ds-success-text); }
body.moyli-theme-light .settings-v90__message.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .cash-row-edit { color: var(--ds-success-text); }
body.moyli-theme-light .cash-row-delete { color: var(--ds-danger-text); }
body.moyli-theme-light .cash-delete-warning__icon { color: var(--ds-danger-text); }
body.moyli-theme-light .archive-v99__eyebrow { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__count strong { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__notice-icon { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__message.is-error { color: var(--ds-danger-text); }
body.moyli-theme-light .archive-v99__message.is-success { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__module { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__action.is-delete { color: var(--ds-danger-text); }
body.moyli-theme-light .archive-v99__action.is-archive { color: var(--ds-warning-text); }
body.moyli-theme-light .archive-v99__detail-btn { color: var(--ds-success-text); }
body.moyli-theme-light .archive-v99__modal > header span { color: var(--ds-success-text); }
body.moyli-theme-light .dashboard-detail-head > div > span { color: var(--ds-success-text); }
body.moyli-theme-light .client-vehicle-edit-message { color: var(--ds-warning-text); }
body.moyli-theme-light .client-vehicle-edit-message.is-error { color: var(--ds-danger-text); }

/* base (dark-first) red text that never got a Light counterpart: pale red on white was 2.6:1 */
body.moyli-theme-light :is(.cash-out, .archive-v99__action.is-delete) { color: var(--ds-danger-text); }

/* registration form field (the sign-in form already has its own light styling) and the avatar crop stage */
body.moyli-theme-light .moyli-login-field { background: var(--ds-surface); border-color: var(--ds-border); }
body.moyli-theme-light .moyli-login-field input { color: var(--ds-text); }
body.moyli-theme-light .moyli-login-suffix { color: var(--ds-text-dim); }
body.moyli-theme-light .avatar-crop-stage { background: var(--ds-surface-2); border-color: var(--ds-accent); }

/* =========================================================
   v1.0.20 — TOUCH TARGET CONTRACT (phones and small tablets)
   Every button, select, textarea and text-like input is at least --ds-touch tall. This replaces the per-page
   "min-height" patches (the audit found 15 toolbar buttons of 19-39 px). Checkboxes, radios, range and file inputs keep
   their own size; tests/browser/v1020/ui_audit.mjs check "T" guards the result.
   :where() keeps the specificity at zero on purpose: it is a FLOOR, so any rule that already declares a min-height
   (e.g. the 96 px quick-action tiles, the 48 px vehicle-data buttons) keeps it instead of being shrunk to 44 px.
   ========================================================= */
@media (max-width: 800px) {
    :root { --ds-touch: 44px; }
    :where(button, [role="button"], select, textarea, input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
        min-height: var(--ds-touch);
    }
    :where(button, [role="button"]) { min-width: var(--ds-touch); } /* square icon buttons (the × of every modal) were 36 px wide */
    /* the few page rules that declare their OWN smaller min-height (30-42 px) and would otherwise keep it on a phone */
    .warehouse-action-menu__panel button,
    .reports-secondary-btn, .reports-primary-btn, .reports-quick-range button,
    .warehouse-archive-link, .dashboard-v62-panel__head button, .warehouse-detail-actions button, .profile-code-secondary-button,
    .warehouse-detail-management__actions > button, .warehouse-detail-more-summary,
    #notificationsPage .notifications-v71__segments button {
        min-height: var(--ds-touch);
    }
    .clients-refresh-btn, .clients-search-field { min-height: var(--ds-touch) !important; } /* style.css pins these two with !important */
}

/* v1.0.20 (A3): the client ADVANCE shown beside a debt figure ("Avans: 40 000 UZS"); a caption, so it uses the muted text token in both themes */
.moyli-credit-note {
    display: block;
    margin-top: 2px;
    color: var(--ds-text-muted);
    font-size: var(--ds-fs-secondary);
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
}

/* =========================================================
   v1.0.20 — settlement choice when a sale is cancelled (D7), advance confirmation (D8), financial change history.
   Tokens only (no literal colours): both themes, and the "no near-black surface in Light" audit, are covered by --ds-*.
   ========================================================= */
.cash-modal-message.is-warning { color: var(--ds-warning-text); font-weight: 700; }

.sales-cancel-panel {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-2);
    color: var(--ds-text);
    display: grid;
    gap: 10px;
}
.sales-cancel-panel[hidden] { display: none; }
.sales-cancel-panel h3 { margin: 0; font-size: var(--ds-fs-body); color: var(--ds-text); }
.sales-cancel-facts { display: grid; gap: 6px; }
.sales-cancel-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.sales-cancel-facts span { color: var(--ds-text-muted); font-size: var(--ds-fs-small); }
.sales-cancel-facts strong { color: var(--ds-text); font-variant-numeric: tabular-nums; text-align: right; }
.sales-cancel-facts small { grid-column: 1 / -1; color: var(--ds-text-muted); font-size: var(--ds-fs-small); }
.sales-cancel-effect { padding-top: 8px; border-top: 1px dashed var(--ds-border); }
.sales-cancel-effect strong { color: var(--ds-accent-strong); }
.sales-cancel-group { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 4px; }
.sales-cancel-group[hidden] { display: none; }
.sales-cancel-group legend { padding: 0; margin-bottom: 4px; font-weight: 800; color: var(--ds-text); }
.sales-cancel-group label {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px;
    border: 1px solid var(--ds-ctl-border); border-radius: var(--ds-radius-sm); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); cursor: pointer;
}
.sales-cancel-group label:has(input:checked) { border-color: var(--ds-accent); }
.sales-cancel-group label:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.sales-cancel-group input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--ds-accent); }
.sales-cancel-group .sales-cancel-channel { cursor: default; flex-wrap: wrap; }
.sales-cancel-group .sales-cancel-channel select { flex: 1 1 140px; }
.sales-cancel-group small { color: var(--ds-text-muted); }
.sales-cancel-reason { display: grid; gap: 4px; }
.sales-cancel-reason > span { font-weight: 800; color: var(--ds-text); }
.sales-cancel-reason textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* ---- history ---- */
.archive-v99__tabs { margin: 0 0 14px; }
.fh-pane[hidden], [data-archive-pane][hidden] { display: none; }
.fh-toolbar { flex-wrap: wrap; align-items: end; }
.fh-date { display: grid; gap: 2px; color: var(--ds-text-muted); font-size: var(--ds-fs-small); }
.fh-date input { min-height: 44px; }
.fh-list { display: grid; gap: 10px; }
.fh-entry {
    padding: 12px 14px; border: 1px solid var(--ds-border); border-left: 4px solid var(--ds-accent);
    border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-text); display: grid; gap: 6px; min-width: 0;
}
.fh-entry.is-delete { border-left-color: var(--ds-danger-text); }
.fh-entry.is-settlement, .fh-entry.is-advance, .fh-entry.is-refund { border-left-color: var(--ds-warning-text); }
.fh-entry header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ds-text-muted); font-size: var(--ds-fs-small); }
.fh-entry h3 { margin: 0; font-size: var(--ds-fs-body); color: var(--ds-text); overflow-wrap: anywhere; }
.fh-chip, .fh-action { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ds-border); font-size: var(--ds-fs-small); color: var(--ds-text); }
.fh-action.is-delete { color: var(--ds-danger-text); }
.fh-action.is-settlement, .fh-action.is-advance, .fh-action.is-refund { color: var(--ds-warning-text); }
.fh-links, .fh-reason, .fh-entry footer, .fh-sub { margin: 0; font-size: var(--ds-fs-small); color: var(--ds-text-muted); overflow-wrap: anywhere; }
.fh-links b, .fh-reason, .fh-entry footer { color: var(--ds-text-soft); }
.fh-reason span, .fh-entry footer span { color: var(--ds-text-muted); font-weight: 800; margin-right: 4px; }
.fh-reason.is-missing { color: var(--ds-warning-text); }
.fh-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fh-changes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.fh-changes li > span { color: var(--ds-text-muted); min-width: 110px; }
.fh-changes s { color: var(--ds-text-muted); }
.fh-changes b { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.fh-changes i { color: var(--ds-text-muted); font-style: normal; }
.fh-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--ds-text-muted); }
@media (max-width: 600px) { .fh-changes li > span { min-width: 0; flex-basis: 100%; } }

/* v1.0.20 — Kassa history: decision lines (information, in no total) and rows that a settlement decision points to */
.cash-settlement-row { background: var(--ds-surface-2); }
.cash-settlement-row .cash-movement-type { color: var(--ds-warning-text); }
.cash-settlement-row .cash-note { white-space: normal; line-height: 1.35; }
.cash-settlement-row .cash-note span, .cash-credit-linked .cash-note b { color: var(--ds-warning-text); }
.cash-settlement-row .cash-note b { color: var(--ds-text); }

/* v1.0.20 (migration 03) — repayment allocation, receivable detail, overdue */
.cash-alloc { grid-column: 1 / -1; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); padding: 10px 12px; display: grid; gap: 8px; }
.cash-alloc[hidden] { display: none; }
.cash-alloc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--ds-text); font-size: var(--ds-fs-small); }
.cash-alloc__head button { min-height: 32px; padding: 0 12px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; }
.cash-alloc__list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.cash-alloc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; align-items: center; gap: 10px; }
.cash-alloc__row input { min-height: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.cash-alloc__sale { display: grid; gap: 1px; min-width: 0; color: var(--ds-text); }
.cash-alloc__sale small, .cash-alloc__open { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.cash-alloc__foot { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.35; }
.cash-alloc__foot.is-error { color: var(--ds-danger-text); font-weight: 700; }
@media (max-width: 600px) { .cash-alloc__row { grid-template-columns: minmax(0, 1fr) 110px; } .cash-alloc__open { grid-column: 1; grid-row: 2; } .cash-alloc__row input { grid-column: 2; grid-row: 1 / span 2; } }

.receivable-modal { width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.receivable-body { overflow: auto; display: grid; gap: 12px; padding: 4px 2px; min-height: 0; }
.receivable-sums { display: flex; flex-wrap: wrap; gap: 10px; }
.receivable-sum { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); min-width: 150px; }
.receivable-sum span { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.receivable-sum strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.receivable-sum.is-overdue strong, .receivable-due.is-overdue, .receivable-overdue-tag { color: var(--ds-danger-text); }
.receivable-note { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-small); }
.receivable-note.is-ok { color: var(--ds-text-soft); }
.receivable-section h3 { margin: 4px 0 6px; font-size: var(--ds-fs-body); color: var(--ds-text); }
.receivable-help { margin: 0 0 8px; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.4; }
.receivable-help b { color: var(--ds-text); }
.receivable-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1.8fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); margin-bottom: 6px; }
.receivable-row.is-settled { opacity: .72; }
.receivable-row small { display: block; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.receivable-row strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.receivable-inferred { font-style: italic; color: var(--ds-text-soft); }
.receivable-inferred::before { content: "≈ "; }
.receivable-due-cell { display: grid; gap: 4px; font-size: var(--ds-fs-secondary); }
.receivable-due-edit { display: flex; gap: 6px; }
.receivable-due-edit input { min-height: 32px; min-width: 0; flex: 1; }
.receivable-due-edit button, .receivable-confirm, .receivable-pay__alloc button { min-height: 32px; padding: 0 12px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; }
.receivable-confirm { margin-top: 4px; font-weight: 700; }
.receivable-pay { border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 6px; }
.receivable-pay__head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; color: var(--ds-text); }
.receivable-pay__alloc { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.receivable-pay__history { margin: 0; padding-left: 18px; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.5; }
.receivable-pay__history li.is-release { color: var(--ds-warning-text); }
.receivable-correct { border-top: 1px solid var(--ds-border); padding-top: 8px; margin-top: 8px; }
.receivable-correct[hidden] { display: none; }
@media (max-width: 720px) { .receivable-row { grid-template-columns: 1fr 1fr; } .receivable-due-cell { grid-column: 1 / -1; } }

.sales-confirm-due { display: grid; gap: 4px; margin: 10px 0 2px; color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.sales-confirm-due[hidden] { display: none; }
.sales-confirm-due input { min-height: 38px; }

/* v1.0.20 (migration 04) — suppliers and purchase documents */
.purchases-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.purchases-actions button, .purchases-filters button, .pur-lines-actions button, .pur-doc-actions button { min-height: 38px; padding: 0 14px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; font-weight: 600; }
.purchases-actions .is-primary, .pur-doc-actions .is-primary { background: var(--moyli-primary); color: #fff; border-color: var(--moyli-primary); }
/* destructive buttons of the document dialog: an outline at rest, solid once armed by the first click. They sit inside .cash-modal-actions, whose red gradient
   used to win over this text colour and left a red label on a red button (1.05:1 in Light, unreadable in Dark too). */
.pur-doc-actions .is-danger { background: var(--ds-ctl-bg); color: var(--ds-danger-text); border: 1px solid var(--ds-danger-text); }
.pur-doc-actions .is-danger:hover:not(:disabled) { background: var(--ds-ctl-bg-hover); filter: none; }
.pur-doc-actions .is-danger.is-armed, .pur-doc-actions .is-danger.is-armed:hover:not(:disabled), .pur-doc-actions .is-danger.is-armed:focus-visible { background: var(--moyli-danger); color: #ffffff; border-color: var(--moyli-danger); }   /* a hover must not turn the armed button pale under its white label */
.purchases-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.purchases-tabs button { min-height: 38px; padding: 0 16px; border: 1px solid var(--ds-border); background: transparent; color: var(--ds-text-soft); border-radius: var(--ds-radius-sm); cursor: pointer; font-weight: 600; }
.purchases-tabs button.is-active { background: var(--ds-accent-soft); color: var(--ds-accent-strong); border-color: var(--ds-accent); }
.purchases-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.purchases-filters input, .purchases-filters select { min-height: 38px; flex: 1 1 160px; min-width: 0; }
.purchases-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.purchases-summary > div { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); min-width: 150px; }
.purchases-summary span { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.purchases-summary strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.purchases-summary .is-overdue strong, .pur-row .is-overdue, .pur-state-overdue .pur-badge { color: var(--ds-danger-text); }
.purchases-help { color: var(--ds-text-muted); font-size: var(--ds-fs-small); margin: 0 0 8px; }
.purchases-list { display: grid; gap: 6px; }
.purchases-more { display: flex; justify-content: center; margin-top: 10px; }
.purchases-more button { min-height: 38px; padding: 0 16px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; }
.pur-row { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text); cursor: pointer; font: inherit; }
.pur-row--static { cursor: default; }
.pur-row:hover:not(.pur-row--static) { border-color: var(--ds-accent); }
.pur-row small { display: block; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); font-weight: 400; }
.pur-row strong { font-variant-numeric: tabular-nums; }
.pur-row__sum { text-align: right; }
.pur-badge { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ds-border); color: var(--ds-text-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pur-state-draft .pur-badge { color: var(--ds-warning-text); }
.pur-state-paid .pur-badge { color: var(--ds-accent-strong); border-color: var(--ds-accent); }
.pur-state-cancelled { opacity: .7; }
@media (max-width: 720px) { .pur-row { grid-template-columns: minmax(0, 1fr) auto; } .pur-row__sum { text-align: left; } .pur-row__open { grid-column: 1 / -1; } }

.pur-doc-modal { width: min(980px, 96vw); max-height: 94vh; display: flex; flex-direction: column; }
.pur-doc-body { overflow: auto; display: grid; gap: 12px; min-height: 0; padding: 2px; }
.pur-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pur-doc-note { grid-column: 1 / -1; }
.pur-lines { display: grid; gap: 6px; }
.pur-line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(70px, 1fr) minmax(90px, 1.2fr) minmax(90px, 1.2fr) 36px; gap: 8px; align-items: center; }
.pur-line input, .pur-line select { min-height: 38px; min-width: 0; }
.pur-line input[type="text"][data-f="unitPrice"]:only-of-type, .pur-line .pur-line__name + input { text-align: right; }
.pur-line__sum { text-align: right; font-variant-numeric: tabular-nums; color: var(--ds-text); }
.pur-line__sum small, .pur-line--view small { display: block; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.pur-line button { min-height: 36px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; }
.pur-line--view { grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); padding: 6px 8px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); }
.pur-line__flag { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); text-align: right; }
.pur-lines-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pur-totals { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pur-totals > div { display: grid; gap: 2px; text-align: right; }
.pur-totals span { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.pur-totals strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.pur-history h3 { margin: 0 0 4px; font-size: var(--ds-fs-body); color: var(--ds-text); }
.pur-history ul { margin: 0; padding-left: 18px; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.6; }
.pur-doc-actions { flex-wrap: wrap; }
.pur-sup-stats { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.pur-check { display: flex; align-items: center; gap: 8px; }
/* v1.0.22.7: "+ Yangi mahsulot" beside the product selector of a purchase line; the Ombor product form opens above the purchase window */
.pur-line__pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.pur-line__pick select { flex: 1 1 150px; min-width: 0; }
.pur-line .pur-line__pick button { flex: 0 0 auto; grid-column: auto; justify-self: auto; width: auto; min-height: 38px; padding: 0 10px; font-weight: 600; white-space: nowrap; }
#warehouseProductModal.is-over-purchase { z-index: 1000001; }
.warehouse-product-duplicate-pick { margin-top: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; font-weight: 600; }
@media (max-width: 720px) { .pur-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pur-line .pur-line__name { grid-column: 1 / -1; } .pur-line button { grid-column: 2; justify-self: end; width: 44px; } .pur-line--view { grid-template-columns: 1fr 1fr; } }

/* v1.0.20 (migration 05) — supplier payments, cost split */
.pur-pay-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--ds-text); }
.pur-pay-docs-head button { min-height: 32px; padding: 0 12px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; }
.pur-pay-docs { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.pur-pay-doc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 150px; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); color: var(--ds-text); }
.pur-pay-doc input { min-height: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.pur-pay-doc small, .pur-pay-doc__open { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.pur-pay-doc .is-overdue { color: var(--ds-danger-text); }
.pur-cost-split { color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.pur-cost-split:empty, .pur-doc-payments:empty { display: none; }
.pur-cost-split small { color: var(--ds-text-muted); }
.pur-doc-payments { display: grid; gap: 6px; }
.pur-doc-payments h3 { margin: 0; font-size: var(--ds-fs-body); color: var(--ds-text); }
.pur-badge.is-flag { color: var(--ds-warning-text); border-color: var(--ds-warning-text); }

/* v1.0.20 (migration 06) — why a purchase cannot be cancelled, and the safe way */
.pur-cancel-advice { border: 1px solid var(--ds-warning-text); border-left-width: 4px; border-radius: var(--ds-radius-sm); padding: 10px 12px; color: var(--ds-text); font-size: var(--ds-fs-small); line-height: 1.5; }
.pur-cancel-advice[hidden] { display: none; }
.pur-cancel-advice h3 { margin: 0 0 4px; font-size: var(--ds-fs-body); color: var(--ds-warning-text); }
.pur-cancel-advice h4 { margin: 8px 0 2px; font-size: var(--ds-fs-small); color: var(--ds-text); }
.pur-cancel-advice p { margin: 0 0 4px; color: var(--ds-text-soft); }
.pur-cancel-advice ul, .pur-cancel-advice ol { margin: 0; padding-left: 20px; }
.pur-cancel-advice li { margin: 2px 0; overflow-wrap: anywhere; }
.pur-advice-doc { min-height: 28px; padding: 0 8px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; font: inherit; }
@media (max-width: 720px) { .pur-pay-doc { grid-template-columns: minmax(0, 1fr) 120px; } .pur-pay-doc__open { grid-column: 1; } .pur-pay-doc input { grid-column: 2; grid-row: 1 / span 2; } }

/* v1.0.20 — report downloads (Hisobotlar > Yuklab olish) */
.reports-export { display: grid; gap: 14px; }
.reports-export__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-items: end; }
.reports-export [data-rep-for][hidden] { display: none; }
.reports-export__wide { grid-column: 1 / -1; }
.reports-export .reports-filter span { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); font-weight: 700; text-transform: none; }
.reports-export .reports-filter select, .reports-export .reports-filter input { width: 100%; min-height: 40px; height: 40px; box-sizing: border-box; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); padding: 0 10px; font: inherit; }
.reports-export .reports-filter select:focus-visible, .reports-export .reports-filter input:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.reports-export__client { display: flex; gap: 8px; }
.reports-export__client input { flex: 1; min-width: 0; }
.reports-export__results { display: grid; gap: 4px; max-height: 220px; overflow: auto; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); padding: 4px; }
.reports-export__results[hidden], .reports-export small[hidden] { display: none; }
.reports-export__results button { text-align: left; min-height: 36px; padding: 4px 10px; border: 0; background: transparent; color: var(--ds-text); border-radius: var(--ds-radius-sm); cursor: pointer; font: inherit; overflow-wrap: anywhere; }
.reports-export__results button:hover, .reports-export__results button:focus-visible { background: var(--ds-accent-soft); outline: none; }
.reports-export small { color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.reports-export__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reports-export__status { color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.reports-export__status.is-error { color: var(--ds-danger-text); font-weight: 700; }
.reports-export__status.is-success { color: var(--ds-success-text, var(--ds-text)); font-weight: 700; }
.reports-export__note { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.5; }
.reports-toolbar[hidden], .reports-head-actions[hidden] { display: none !important; }

/* =========================================================
   v1.0.20 — Avtomobil katalogi (moyli-vehicle-catalog.js) and Qarzlar (moyli-debts.js)
   ========================================================= */
.vcat[hidden], .vcat [hidden], .vcat-modal [hidden], .debts-page [hidden] { display: none !important; }
.vcat-heading { margin: 4px 0 10px; font-size: 18px; line-height: 1.25; color: var(--ds-text); }
.vref-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin: 22px 0 8px; }
.vref-subhead .vcat-heading { margin: 0; }
.vcat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 12px; }
.vcat-list > .cash-empty { grid-column: 1 / -1; }
.vcat-card { min-width: 0; padding: 14px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text); display: flex; flex-direction: column; gap: 10px; }
.vcat-card.has-override { border-color: var(--ds-accent); }
.vcat-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.vcat-card__title { min-width: 0; display: grid; gap: 2px; }
.vcat-card__title strong { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.vcat-card__title span { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.35; overflow-wrap: anywhere; }
.vcat-status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; border: 1px solid var(--ds-border-soft); color: var(--ds-text-soft); white-space: nowrap; }
.vcat-status--verified { color: var(--ds-success-text, var(--ds-text)); border-color: currentColor; }
.vcat-oil, .vcat-more { display: grid; gap: 8px; }
.vcat-fact { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.vcat-fact__label { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.4; }
.vcat-fact__value { min-width: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.vcat-oil__spec { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.vcat-value { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.vcat-value__was { color: var(--ds-text-muted); text-decoration: line-through; font-size: var(--ds-fs-secondary); }
.vcat-tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }
.vcat-tag--override { color: var(--ds-accent-strong, var(--ds-accent)); }
.vcat-missing { color: var(--ds-text-muted); font-style: italic; font-size: 14px; }
.vcat-capacity, .vcat-interval { display: grid; gap: 3px; }
.vcat-capacity__row, .vcat-interval__row { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.vcat-capacity__row small, .vcat-or { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.vcat-note { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.5; }
.vcat-note--override { color: var(--ds-text-soft); }
.vcat-source { display: grid; gap: 2px; }
.vcat-source a { color: var(--ds-accent-strong, var(--ds-accent)); font-weight: 700; overflow-wrap: anywhere; }
.vcat-source small { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.4; }
.vcat-card__actions { display: flex; justify-content: flex-end; }
.vcat-override { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--ds-border); border-radius: var(--ds-radius-sm); }
.vcat-override h4 { margin: 0; font-size: 14px; }
.vcat-override__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vcat-override__field { display: grid; gap: 3px; font-size: var(--ds-fs-secondary); color: var(--ds-text-muted); }
.vcat-override input { width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 14px; color: var(--ds-text); background: var(--ds-surface-2, var(--ds-surface)); border: 1px solid var(--ds-border); }
.vcat-override .vref-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vcat-sales-btn { margin-top: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-surface-2, var(--ds-surface)); color: var(--ds-text); font: inherit; font-size: var(--ds-fs-secondary); font-weight: 700; cursor: pointer; }
.vcat-sales-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.vcat-modal { width: min(100%, 880px); max-height: 90vh; overflow: auto; }
.vcat-modal .vcat-list { grid-template-columns: 1fr; }
body.vcat-modal-open { overflow: hidden; }
.debt-row { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.2fr) minmax(0, 1.6fr) auto; }
.debt-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.debt-row .is-overdue, .debt-doc .is-overdue { color: var(--ds-danger-text); font-weight: 700; }
.debt-row--advance .pur-badge { color: var(--ds-success-text, var(--ds-text)); }
.debt-detail { display: grid; gap: 6px; margin: 6px 0 4px 12px; padding-left: 10px; border-left: 2px solid var(--ds-border-soft); }
.debt-detail__usd { margin: 0; color: var(--ds-text-soft); font-size: var(--ds-fs-secondary); }
.debt-doc { grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr) minmax(0, 1.6fr) auto; }
.debt-supplier { display: grid; gap: 4px; }
@media (max-width: 720px) {
    .vcat-fact { grid-template-columns: 1fr; }
    .vcat-list { grid-template-columns: 1fr; }
    .debt-row, .debt-doc { grid-template-columns: minmax(0, 1fr) auto; }
    .debt-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.debt-btn { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-surface-2, var(--ds-surface)); color: var(--ds-text); font: inherit; font-size: var(--ds-fs-secondary); font-weight: 700; cursor: pointer; }
.debt-btn:hover { border-color: var(--ds-accent); }
.debt-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }

/* =========================================================
   v1.0.20 Staging fixes
   1. Xaridlar, Qarzlar, Avtomobil ma’lumotlari and Arxiv got NO module-canvas rule (every other module page has one: sales, clients, ombor, kassa, hisobot…).
      On a desktop width the main grid kept its dashboard rows, so these pages were squeezed into the 56 px top-bar row (content clipped, no scrolling).
   2. Their headers reuse .cash-page__head, whose dark-green fill is only replaced in the Light theme for the pages listed by id: add them.
   ========================================================= */
@media (min-width: 801px) {
    .main:has(#purchasesPage:not([hidden])),
    .main:has(#debtsPage:not([hidden])),
    .main:has(#vehicleRefPage:not([hidden])),
    .main:has(#archivePage:not([hidden])) {
        grid-template-rows: minmax(0, 1fr) !important;
    }
    :is(#purchasesPage, #debtsPage, #vehicleRefPage, #archivePage):not([hidden]) {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
}
body.moyli-theme-light :is(#purchasesPage, #debtsPage) .cash-page__head {
    border: 1px solid var(--moyli-preview-border) !important;
    border-radius: var(--moyli-preview-radius) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: var(--moyli-preview-shadow) !important;
}
body.moyli-theme-light :is(#purchasesPage, #debtsPage) .cash-page__head :is(h1, h2, h3, strong) { color: var(--moyli-preview-text) !important; }
body.moyli-theme-light :is(#purchasesPage, #debtsPage) .cash-page__head :is(p, small) { color: var(--moyli-preview-muted) !important; opacity: 1 !important; }

/* purchase editor: no product in Ombor */
.pur-empty-products { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--ds-radius-sm); border: 1px dashed var(--ds-border); background: var(--ds-surface-2); }
.pur-empty-products span { display: grid; gap: 2px; min-width: 0; }
.pur-empty-products strong { color: var(--ds-text); }
.pur-empty-products small { color: var(--ds-text-soft); font-size: var(--ds-fs-secondary); line-height: 1.4; }
.pur-empty-products button { min-height: 38px; padding: 0 14px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; font-weight: 600; }

/* catalog: search first, with accessible suggestions */
.vcat-search { position: relative; }
.vcat-hint { grid-column: 1 / -1; display: grid; gap: 4px; padding: 18px 16px; border: 1px dashed var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-text-soft); line-height: 1.5; }
.vcat-hint strong { color: var(--ds-text); font-size: 16px; }
.vcat-hint small { font-size: var(--ds-fs-secondary); color: var(--ds-text-muted); }
.vcat-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: min(52vh, 360px); overflow-y: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.vcat-suggest[hidden] { display: none !important; }
.vcat-suggest__item { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--ds-text); }
.vcat-suggest__item[aria-selected="true"], .vcat-suggest__item:hover { background: var(--ds-accent-soft); }
.vcat-suggest__main { min-width: 0; display: grid; gap: 1px; }
.vcat-suggest__main strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.vcat-suggest__main small { font-size: var(--ds-fs-secondary); color: var(--ds-text-muted); overflow-wrap: anywhere; }
.vcat-suggest__kind { flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ds-border-soft); font-size: 11px; font-weight: 700; color: var(--ds-text-soft); white-space: nowrap; }
.vcat-suggest__none { padding: 10px; color: var(--ds-text-muted); font-size: 14px; }
.vcat-yearnote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--ds-warning, #e0a030); background: var(--ds-surface-2); color: var(--ds-text-soft); font-size: var(--ds-fs-secondary); line-height: 1.45; }
.vcat-searchbtn { min-height: 44px; }
.vcat-modal .vref-toolbar { position: relative; }

/* v1.0.20.1 — Xaridlar: the post button stays visible on a draft; without the right it is disabled and this note says why */
.pur-post-hint { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--ds-warning, #e0a030); background: var(--ds-surface-2); color: var(--ds-text-soft); font-size: var(--ds-fs-secondary); line-height: 1.45; border-radius: var(--ds-radius-sm); }
.pur-doc-actions button:disabled { opacity: .55; cursor: not-allowed; }

/* =========================================================
   v1.0.20.1 — TYPOGRAPHY SYSTEM (one source of truth, identical in Light and Dark)
   * FAMILY: the family chosen in Settings (--moyli-font-family, set on <html> by app.js) reaches every control and table. Nothing below a theme may set
     its own family; a theme block that did (Light forced Inter with !important) made the choice work in Dark only.
   * SIZE:   --ds-fs-secondary is the size of secondary working text (it replaced ~400 separate 13px declarations). Compact elements (chips, badges,
     brand sub-line) stay below it on purpose; nothing meant to be READ is smaller than 14px. The four presets scale the whole UI through --ds-zoom (above).
   ========================================================= */
:root { --ds-fs-secondary: var(--ds-fs-small); }
html body,
html body button,
html body input,
html body select,
html body textarea,
html body optgroup,
html body table {
    font-family: var(--moyli-font-family, Inter, "Segoe UI", Arial, sans-serif) !important;
}
/* controls that never declared a size fall back to the browser's 13.33px: give them the body size (zero specificity, any class still wins) */
:where(button, input, select, textarea) { font-size: var(--ds-fs-body); }
/* an unclassed <small> is secondary working text: the browser's 83% default would drop it to 11.7px */
:where(small) { font-size: var(--ds-fs-secondary); }
html body code, html body kbd, html body pre, html body samp { font-family: Consolas, "Courier New", monospace !important; }

/* =========================================================
   v1.0.20.1 — LAYOUT SYSTEM
   * SPACING tokens: new rules use these steps instead of ad-hoc pixel values.
   * A header made of a title block and an action block WRAPS instead of overflowing the page (the analytics chart header pushed the whole page 17-118 px
     sideways on a phone because the period label had a fixed 170px minimum).
   ========================================================= */
:root { --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; }
.sales-analytics-chart-head { flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-3); }
.sales-analytics-chart-head > div:first-child { flex: 1 1 220px; min-width: 0; }
.sales-chart-nav { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.sales-chart-nav strong { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
/* the history toolbar (search + refresh + Excel / PDF) wraps by rows: the search takes a row of its own on a phone, the buttons share the next one */
.sales-history-search-wrap { flex-wrap: wrap; align-items: stretch; }
.sales-history-search-wrap input { flex: 1 1 180px; min-width: 0; width: auto; max-width: 100%; }
.sales-history-search-wrap > button { flex: 0 0 auto; }
.sales-history-search-wrap .ds-export-group { flex: 0 1 auto; flex-wrap: nowrap; }
@media (max-width: 800px) {
    .sales-history-search-wrap input { flex-basis: 100%; }
    .sales-history-search-wrap > button, .sales-history-search-wrap .ds-export-group { flex: 1 1 0; }
    .sales-history-search-wrap .ds-export-group > * { flex: 1; justify-content: center; }
}

/* =========================================================
   v1.0.21 — LAYOUT SYSTEM (2): frames, toolbars, row actions, amounts
   Found by the spill / edge check of tests/browser/v1020/layout_verify.mjs and by looking at real screens. Root causes, not per-screen patches:
   1. A layout WRAPPER (a section that only stacks cards) was painted as a white card by the Light lists, with padding 0: its heading and buttons then touched
      the frame. Wrappers carry no surface; toolbars that ARE a panel get the panel padding.
   2. A grid track narrower than the button it holds (archive "Batafsil", warehouse "Ochish") pushed the button into the frame: the action track is sized for the longest label.
   3. Amounts are never cut with an ellipsis: the figure shrinks with its card (container query) and may break only as a last resort.
   ========================================================= */
/* 1. wrappers are not cards */
body.moyli-theme-light #salesPage #salesStartPanel,
body.moyli-theme-light #salesPage #salesAnalyticsPanel { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* a toolbar that is a panel has the panel padding */
.clients-toolbar, .sales-history-search-wrap { padding: var(--ds-space-3); box-sizing: border-box; }
.settings-v90__save-state { padding: var(--ds-space-2) var(--ds-space-4); }
.archive-v99__search { padding-inline: var(--ds-space-2); }
.archive-v99__search input { margin-inline-end: var(--ds-space-1); }
/* 2. row actions: the track fits the longest label, the row keeps its right padding */
.archive-v99__table-head, .archive-v99__row { grid-template-columns: 165px 130px minmax(260px, 1fr) 130px 120px; }
.archive-v99__row > :last-child, .archive-v99__table-head > :last-child { justify-self: end; }
.warehouse-products-table__head, .warehouse-product-row { padding-inline-end: var(--ds-space-4); }
.warehouse-product-actions { gap: var(--ds-space-2); }
/* 3. amounts */
.dashboard-v62-kpi { container-type: inline-size; }
.dashboard-v62-kpi__copy strong { font-size: clamp(18px, 9cqw, 30px); overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
/* settings: the four text sizes wrap inside their buttons instead of overflowing the card ("Juda katta" in Russian: "Очень крупный") */
.settings-v90__font-sizes button { white-space: normal; line-height: 1.2; padding-block: var(--ds-space-2); overflow-wrap: anywhere; }
/* the arrow that opens a client from a sale row is a secondary control (it kept the translucent dark-green fill of the Dark theme: an unreadable slate square on white) */
body.moyli-theme-light .sales-history-open-client { background: var(--ds-ctl-bg); border-color: var(--ds-ctl-border); color: var(--ds-accent-strong); }
body.moyli-theme-light .sales-history-open-client:hover { background: var(--ds-ctl-bg-hover); border-color: var(--ds-ctl-border-hover); }
.archive-v99__table-head, .archive-v99__row { min-width: 900px; }   /* the sum of the tracks above plus the row padding: the panel scrolls sideways below this */
/* a grid / flex item that holds a form control must be allowed to shrink: the control's own minimum width (a date field is ~150px) pushed two-column toolbars
   28px past the frame on a 320px phone */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-width: 0; max-width: 100%; }
/* the history row: its desktop grid is !important, so the narrow-screen grids (which were not) never applied and the open-client arrow left the screen (-123px at 320) */
@media (max-width: 1100px) { .sales-history-row { grid-template-columns: 100px minmax(0, 1fr) minmax(0, .8fr) 120px 38px !important; } }
@media (max-width: 760px) { .sales-history-row { grid-template-columns: minmax(0, 1fr) auto 36px !important; } }
/* a toolbar made of loose controls is a wrapper, not a card (the Light lists painted it, with padding 0, and its selects touched the frame) */
body.moyli-theme-light #archivePage .archive-v99__toolbar { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
body.moyli-theme-light #salesPage .sales-history-search-wrap { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.sales-history-search-wrap { padding: 0; }

/* TOOLBARS WRAP. Their fixed-column grids (150px 150px 180px 175px minmax(220px,1fr) auto ...) never knew the width the larger text sizes leave them: the page zoom
   makes 1440px of screen worth ~1150px of layout, but a media query still sees 1440. A toolbar is now a row of fields that wraps onto the next line, so nothing
   leaves the frame at any width, size or language. */
.cash-toolbar, .warehouse-toolbar, .reports-toolbar, .clients-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ds-space-3); }
.cash-toolbar > .cash-filter, .reports-toolbar > .reports-filter { flex: 1 1 150px; min-width: 0; }
.cash-toolbar > .cash-search { flex: 2 1 240px; min-width: 0; }
.cash-toolbar > .cash-refresh-btn, .reports-toolbar > .reports-primary-btn, .clients-toolbar > .clients-refresh-btn { flex: 0 0 auto; }
.warehouse-toolbar > .warehouse-search { flex: 2 1 260px; width: auto; min-width: 0; }
.warehouse-toolbar > .warehouse-filter { flex: 1 1 150px; min-width: 0; }
.warehouse-toolbar > .warehouse-toolbar-actions { flex: 0 1 auto; flex-wrap: wrap; }
.reports-toolbar > .reports-quick-range { flex: 2 1 280px; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.clients-toolbar > .clients-search-field { flex: 1 1 220px; min-width: 0; }
.reports-page__head, .reports-head-actions { flex-wrap: wrap; }
.reports-head-actions { justify-content: flex-end; gap: var(--ds-space-2); }
/* a figure in a summary card shrinks with its card (like the dashboard tiles) and breaks only as a last resort */
.cash-summary-card { container-type: inline-size; min-width: 0; }
.cash-summary-card strong { font-size: clamp(18px, 8cqw, 30px); overflow-wrap: anywhere; }
/* empty states and card headings wrap inside their frame */
.sales-results-empty span, .sales-results-empty strong, .settings-v90__card h2, .settings-v90__card-head h2 { overflow-wrap: anywhere; min-width: 0; }
.dashboard-v62-kpi__copy em, .dashboard-v62-kpi__copy small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
summary.warehouse-toolbar-action { padding-inline: var(--ds-space-3); }
.warehouse-products-table__head, .warehouse-product-row, .warehouse-products-list { min-width: max-content !important; }   /* an earlier rule forced min-width:0 !important: the 8 tracks (190+80+90+100x4+72) then spilled out of a narrower row. The table scrolls inside its panel; a row is as wide as its tracks. */
/* summary / KPI rows: as many columns as fit (never more than four), so a figure keeps the room it needs at every width and text size */
.cash-summary, .reports-summary-grid, .sales-analytics-metrics { grid-template-columns: repeat(auto-fit, minmax(max(190px, 22%), 1fr)); }

/* LINE HEIGHT FLOOR: a line is never shorter than its letters. The shared page head gave Xaridlar / Qarzlar a 26px title in a 20px line and a 14.5px subtitle in a 14px
   line, so the subtitle sat on top of the title. tests/browser/v1020/layout_verify.mjs ("no line is tighter than its letters") guards every screen. */
.cash-page__title h1 { line-height: 1.2; }
.cash-page__title p, .topbar p { line-height: 1.4; }
.reports-page__title h1, .settings-v90__head h1 { line-height: 1.2; }
.warehouse-toolbar-action span { line-height: 1.3; }
/* FIELD PADDING: style.css starts with "* { padding: 0 }", so a field that no class gave a padding (every filter of Xaridlar and Qarzlar, the reason box of a purchase)
   printed its text on the border. A field has room inside it; any class that sets its own padding still wins (zero specificity). */
:where(.purchases-page, .debts-page, .cash-modal) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]), select, textarea) { padding-inline: var(--ds-space-3); }
/* the action track of the warehouse table (72px under an !important template) was narrower than the "Ochish" button (min-width 88px): it spilled into the row padding */
.warehouse-products-table__head, .warehouse-product-row { grid-template-columns: minmax(220px, 2.2fr) minmax(140px, 1.2fr) minmax(100px, 1fr) minmax(100px, 1fr) 104px !important; }   /* v1.0.22.8: name, stock (with its status), cost, sale, action: SKU and category moved under the name */
.settings-catalog-chip { padding-inline-end: 10px; }
/* a translucent black fill over white is a neutral grey (237,237,237) in a green-and-white theme: the empty state of Savdo gets the palette's own soft surface */
body.moyli-theme-light .sales-results-empty { background: var(--ds-surface-2); border-color: var(--ds-border); }
/* found by the matrix at 320-768px / the largest text size */
.warehouse-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.warehouse-toolbar-actions > * { flex: 1 1 auto; }
.warehouse-toolbar-action { padding-inline: var(--ds-space-3); }
.archive-v99__head h1, body.moyli-theme-light #archivePage .archive-v99__head h1 { line-height: 1.2; }
.cash-channel-grid article { container-type: inline-size; min-width: 0; }
.cash-channel-grid strong { font-size: clamp(16px, 9cqw, 24px); overflow-wrap: anywhere; }
.dashboard-v62-payments__grid span, .dashboard-v62-payments__grid strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.cash-page__head { flex-wrap: wrap; row-gap: var(--ds-space-2); }
.purchases-actions { flex-wrap: wrap; justify-content: flex-end; }
.warehouse-toolbar-actions > * { min-width: max-content; }                              /* wrap onto the next line instead of squeezing a button below its own label */
.cash-page__head { max-height: none; height: auto; }                                    /* a compact 56px header that could not grow: its wrapped buttons hung over the tabs below */
.cash-channel-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.cash-channels--collapsible > .cash-channel-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }   /* the "2 columns under 800px" rule left 74px for "900 000 UZS" at the largest text size */
.dashboard-v62-attention-item__copy span, .dashboard-v62-attention-item__copy strong, .dashboard-v62-operation__copy span, .dashboard-v62-operation__copy strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.cash-delete-warning > div, .cash-delete-warning p, .cash-delete-warning strong { min-width: 0; overflow-wrap: anywhere; }
.cash-delete-warning { padding: var(--ds-space-4); }
/* empty states: the sentence has room on both sides and wraps (it printed edge to edge on a phone) */
.cash-empty, .warehouse-products-empty, .sales-history-empty, .clients-empty, .reports-empty, .archive-v99__empty, .notifications-v71__empty, .dashboard-v62-empty, .sales-services-empty { padding-inline: var(--ds-space-4); text-align: center; overflow-wrap: anywhere; }
.cash-empty > *, .warehouse-products-empty > *, .sales-history-empty > * { max-width: 100%; }
/* a search field made of a frame (icon + input): the input inside is not a second frame (Light) */
body.moyli-theme-light :is(.cash-search, .warehouse-search, .clients-search-field, .archive-v99__search, .sales-client-search-field) input { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; }
body.moyli-theme-light :is(.cash-search, .warehouse-search, .clients-search-field, .archive-v99__search, .sales-client-search-field):focus-within { border-color: var(--ds-accent) !important; box-shadow: var(--ds-focus); }

/* CARD PADDING, one token. A card (border + radius) gives everything inside it the same room left and right: 20px on a computer, 14px on a phone. The Reports panels
   padded only their header, so the export form, its buttons and the note under it sat on the left border. */
:root { --ds-card-pad: 20px; }
@media (max-width: 700px) { :root { --ds-card-pad: 14px; } }
.reports-section-head { padding-inline: var(--ds-card-pad); }
.reports-export { padding-bottom: var(--ds-card-pad); }
.reports-export > :not(.reports-section-head) { margin-inline: var(--ds-card-pad); }
.vref-chip { padding-inline: var(--ds-space-3); }
.cash-toolbar, .warehouse-toolbar, .reports-toolbar, .clients-toolbar { padding: var(--ds-space-3) var(--ds-card-pad); }
.warehouse-toolbar { padding: var(--ds-space-3) var(--ds-card-pad) !important; }   /* an earlier rule fixed it at 10px !important */
.cash-search, .warehouse-search, .clients-search-field, .archive-v99__search { padding-inline-start: var(--ds-space-3); }

/* =========================================================
   v1.0.22.8 — compact Ombor: search + "Filtr" + "..." in one row, the filters in one window, name / stock / prices first
   ========================================================= */
.warehouse-toolbar--compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); padding-block: var(--ds-space-2) !important; }
.warehouse-toolbar--compact > .warehouse-search { flex: 1 1 140px; min-width: 0; }
.warehouse-toolbar--compact > .warehouse-toolbar-action, .warehouse-more-menu > summary.warehouse-toolbar-action { flex: 0 0 auto; min-height: 44px; min-width: 44px; justify-content: center; }
.warehouse-filter-btn { display: inline-flex; align-items: center; gap: 6px; }
.warehouse-filter-btn.is-active { border-color: var(--ds-accent); }
.warehouse-filter-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ds-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
body:not(.moyli-theme-light) .warehouse-filter-badge { color: #052914; }
.warehouse-filter-badge[hidden] { display: none; }
.warehouse-more-menu > summary { list-style: none; cursor: pointer; font-size: 20px; line-height: 1; }
.warehouse-more-menu > summary::-webkit-details-marker { display: none; }
.warehouse-more-menu .warehouse-action-menu__panel button { min-height: 44px; text-align: left; }
/* the filter window */
.warehouse-filter-modal { width: min(440px, 94vw); }
.warehouse-filter-grid { display: grid; gap: var(--ds-space-3); }
.warehouse-filter-grid .warehouse-filter { display: grid; gap: 4px; width: 100%; min-width: 0; }
.warehouse-filter-grid .warehouse-filter select { width: 100%; min-height: 44px; }
.warehouse-filter-modal .warehouse-product-modal-actions button { min-height: 44px; }
/* the two buttons of the filter window had no colours of their own: the browser's grey default (black on #f0f0f0 with a bevel), in Light AND Dark - the only neutral grey surface
   contrast_verify finds. The quiet button follows the other controls (Light keeps its own rule below); "Tayyor" is the primary one: white on the primary green in Light (5.2:1),
   dark on the bright green in Dark (white on it is only 3.1:1). */
.warehouse-filter-modal .warehouse-product-modal-actions button { border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); }
.warehouse-filter-modal .warehouse-product-modal-actions button:hover:not(:disabled) { background: var(--ds-ctl-bg-hover); border-color: var(--ds-ctl-border-hover); }
.warehouse-filter-modal .warehouse-product-modal-actions .is-primary { background: var(--moyli-primary); border-color: var(--moyli-primary); color: #ffffff; }
.warehouse-filter-modal .warehouse-product-modal-actions .is-primary:hover:not(:disabled) { background: var(--moyli-primary); border-color: var(--moyli-primary); filter: brightness(1.08); }
body:not(.moyli-theme-light) .warehouse-filter-modal .warehouse-product-modal-actions .is-primary { color: #03210f; }
/* fewer repeated captions: the page and the list already say what they are */
#warehousePage .warehouse-page__title p, #warehouseProductsPanel > .warehouse-products-head p { display: none; }
#warehouseProductsPanel > .warehouse-products-head { padding-block: var(--ds-space-2); }
/* a row leads with the name, the real stock and the prices; the rest is one quiet line under the name */
.warehouse-product-stockcell { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.warehouse-product-stock { font-size: 15px; overflow-wrap: anywhere; }
.warehouse-product-name__copy small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@media (max-width: 800px) {
    .warehouse-product-row > .warehouse-product-stockcell { grid-column: auto; }
}
@media (max-width: 800px) {
    /* the "..." menu opens as a panel across the screen: wherever the button wrapped to, the panel stays inside the viewport */
    .warehouse-more-menu .warehouse-action-menu__panel { position: fixed; left: 12px; right: 12px; top: auto; width: auto; min-width: 0; max-width: none; margin-top: 6px; }
}
/* v1.0.23: the unit of a card with stock / history cannot be changed: the field is disabled and says why */
.warehouse-field-hint { display: block; margin-top: 4px; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.4; overflow-wrap: anywhere; }
.warehouse-field-hint[hidden] { display: none; }
#warehouseProductUnit:disabled { opacity: 0.7; cursor: not-allowed; }

/* ---------- v1.0.24: «O‘xshash mahsulot allaqachon mavjud» (moyli-similar.js) + the same decision in the Excel import preview ---------- */
/* Dark: warm tint on the modal surface, light text (>= 7:1); Light: cream tint, dark brown title (>= 6:1). One component, no second design system: it uses the control tokens. */
.similar-box { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #ff9a32; border-left-width: 5px; border-radius: var(--ds-radius-sm); background: rgba(255, 154, 50, 0.12); color: var(--ds-text); font-size: var(--ds-fs-small); line-height: 1.45; min-width: 0; }
.similar-box[hidden] { display: none; }
.similar-box.is-hint { border-color: var(--ds-border-soft); background: var(--ds-surface-2); }
.similar-box.is-confirmed { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.similar-box__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.similar-box__icon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: #ffb764; color: #3a2300; }
.similar-box.is-hint .similar-box__icon { background: var(--ds-accent); color: #03150d; }
.similar-box.is-confirmed .similar-box__icon { background: var(--ds-accent); color: #03150d; }
.similar-box__title { font-size: var(--ds-fs-body); color: #ffc680; overflow-wrap: anywhere; }
.similar-box.is-hint .similar-box__title, .similar-box.is-confirmed .similar-box__title { color: var(--ds-text); }
.similar-box__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.similar-box__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); background: var(--ds-surface); min-width: 0; }
.similar-box__item.is-inactive { opacity: 0.92; }
.similar-box__text { flex: 1 1 180px; min-width: 0; }
.similar-box__name { display: block; color: var(--ds-text); overflow-wrap: anywhere; }
.similar-box__meta { display: block; color: var(--ds-text-soft); font-size: var(--ds-fs-small); overflow-wrap: anywhere; }
.similar-box__status { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid var(--ds-border-soft); color: var(--ds-text); }
.similar-box__status.is-off { border-color: #ff9a32; color: #ffc680; }
.similar-box__pick, .similar-box__other { min-height: 44px; padding: 0 16px; border-radius: var(--ds-radius-sm); font-weight: 700; font-size: var(--ds-fs-small); cursor: pointer; border: 1px solid var(--ds-ctl-border, var(--ds-border)); background: var(--ds-ctl-bg, var(--ds-surface-2)); color: var(--ds-ctl-text, var(--ds-text)); }
.similar-box__pick:hover { background: var(--ds-ctl-bg-hover, var(--ds-surface-2)); }
.similar-box__other { border-color: transparent; background: #18c06a; color: #03150d; }
.similar-box__other[aria-pressed="true"] { background: transparent; border-color: var(--ds-accent); color: var(--ds-text); }
.similar-box__other[aria-pressed="true"]::before { content: "✓\00a0"; }
.similar-box__pick:focus-visible, .similar-box__other:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.similar-box__hint, .similar-box__more { margin: 8px 0 0; color: var(--ds-text-soft); }
.similar-box__actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
body.moyli-theme-light .similar-box { background: #fff4e5; border-color: #c76a00; color: #1f1405; }
body.moyli-theme-light .similar-box.is-hint { background: var(--ds-surface-2); border-color: var(--ds-border); }
body.moyli-theme-light .similar-box.is-confirmed { background: var(--ds-accent-soft); border-color: var(--ds-accent); }
body.moyli-theme-light .similar-box__title { color: #7a4100; }
body.moyli-theme-light .similar-box.is-hint .similar-box__title, body.moyli-theme-light .similar-box.is-confirmed .similar-box__title { color: var(--ds-text); }
/* the Light modal stylesheet colours every span of a modal muted (specificity 0,2,2): the icon needs one class more */
body.moyli-theme-light .similar-box .similar-box__icon { background: #a85800; color: #ffffff; }
body.moyli-theme-light .similar-box.is-hint .similar-box__icon, body.moyli-theme-light .similar-box.is-confirmed .similar-box__icon { background: var(--ds-accent); color: #ffffff; }
body.moyli-theme-light .similar-box__status.is-off { border-color: #c76a00; color: #7a4100; }
body.moyli-theme-light .similar-box__other { background: var(--ds-accent); color: #ffffff; }
body.moyli-theme-light .similar-box__other[aria-pressed="true"] { background: transparent; color: var(--ds-accent-strong); }
@media (max-width: 520px) {
    .similar-box { padding: 10px 12px; }
    .similar-box__item { gap: 6px; }
    .similar-box__pick, .similar-box__other { width: 100%; }
}

/* the Excel import preview: a row similar to an existing card waits for the operator's decision */
.wimp-chip.is-similar strong { color: #8a4b00; }
body:not(.moyli-theme-light) .wimp-chip.is-similar strong { color: #ffc680; }
.wimp-similar { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #ff9a32; border-left-width: 5px; border-radius: 12px; background: rgba(255, 154, 50, 0.12); color: var(--ds-text); }
.wimp-similar[hidden] { display: none; }
.wimp-similar.is-done { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.wimp-similar__title { display: block; font-size: var(--ds-fs-body); color: #ffc680; }
.wimp-similar.is-done .wimp-similar__title { color: var(--ds-text); }
.wimp-similar__text { margin: 4px 0 8px; font-size: var(--ds-fs-small); color: var(--ds-text-soft); }
.wimp-similar__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wimp-similar__tools .wimp-btn { min-height: 44px; }
body.moyli-theme-light .wimp-similar { background: #fff4e5; border-color: #c76a00; color: #1f1405; }
body.moyli-theme-light .wimp-similar.is-done { background: var(--ds-accent-soft); border-color: var(--ds-accent); }
body.moyli-theme-light .wimp-similar__title { color: #7a4100; }
body.moyli-theme-light .wimp-similar.is-done .wimp-similar__title { color: var(--ds-text); }
.wimp-row.is-similar.is-undecided { background: rgba(255, 154, 50, 0.10); }
.wimp-row.is-similar.is-decided { background: var(--ds-accent-soft); }
.wimp-similar__notes { display: grid; gap: 4px; margin-top: 4px; }
.wimp-similar__notes small.is-similar { font-weight: 800; color: #8a4b00; font-size: var(--ds-fs-small); }
body:not(.moyli-theme-light) .wimp-similar__notes small.is-similar { color: #ffc680; }
.wimp-similar__match { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ds-fs-small); color: var(--ds-text); overflow-wrap: anywhere; }
.wimp-tag.is-off { border: 1px solid #ff9a32; background: transparent; font-size: 14px; }
.wimp-decide { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wimp-decide__btn { min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: var(--ds-fs-small); cursor: pointer; border: 1px solid var(--ds-ctl-border, var(--ds-border)); background: var(--ds-ctl-bg, var(--ds-surface-2)); color: var(--ds-ctl-text, var(--ds-text)); }
.wimp-decide__btn.is-on { background: #18c06a; border-color: transparent; color: #03150d; }
body.moyli-theme-light .wimp-decide__btn.is-on { background: var(--ds-accent); color: #ffffff; }
.wimp-decide__btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }

/* ---------- v1.0.25: shared form behaviour (moyli-form-kit.js), existing-card lookup (moyli-catalog-lookup.js), receipt total, category label ----------
   Tokens only, so Light and Dark follow the theme. Targets: >= 44px controls, readable at the largest font setting, no horizontal scroll at 320px. */
.moyli-toast-host { position: fixed; z-index: 2000100; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.moyli-toast { max-width: min(560px, 100%); padding: 12px 18px; border-radius: var(--ds-radius); background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-border); border-left-width: 5px; box-shadow: var(--ds-panel-shadow); font-size: var(--ds-fs-body); overflow-wrap: anywhere; transition: opacity .3s ease, transform .3s ease; }
.moyli-toast.is-success { border-left-color: var(--ds-accent); }
.moyli-toast.is-error { border-left-color: var(--ds-danger); }
.moyli-toast.is-out { opacity: 0; transform: translateY(8px); }

.moyli-confirm { position: fixed; inset: 0; z-index: 2000000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ds-overlay); }
.moyli-confirm__panel { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px; border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); box-shadow: var(--ds-panel-shadow); }
.moyli-confirm__title { margin: 0 0 8px; font-size: var(--ds-fs-title); color: var(--ds-text); overflow-wrap: anywhere; }
.moyli-confirm__text { margin: 0 0 16px; font-size: var(--ds-fs-body); color: var(--ds-text-soft); overflow-wrap: anywhere; }
.moyli-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.moyli-confirm__btn { min-height: 48px; padding: 0 18px; border-radius: var(--ds-radius-sm); font-weight: 700; font-size: var(--ds-fs-body); cursor: pointer; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); }
.moyli-confirm__btn:hover { background: var(--ds-ctl-bg-hover); border-color: var(--ds-ctl-border-hover); }
.moyli-confirm__btn.is-primary { background: var(--ds-accent); border-color: var(--ds-accent); color: #03150d; }
body.moyli-theme-light .moyli-confirm__btn.is-primary { color: #ffffff; }
.moyli-confirm__btn.is-danger { border-color: var(--ds-danger); color: var(--ds-danger-text); }
.moyli-confirm__btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
@media (max-width: 520px) { .moyli-confirm__btn { width: 100%; } .moyli-confirm__actions { flex-direction: column-reverse; } }

@keyframes moyli-nudge { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.moyli-nudge { animation: moyli-nudge .4s ease; }
@media (prefers-reduced-motion: reduce) { .moyli-nudge { animation: none; outline: 2px solid var(--ds-accent); } .moyli-toast { transition: none; } }

.catalog-lookup { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--ds-border-soft); border-left: 5px solid var(--ds-info); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-text); }
.catalog-lookup[hidden] { display: none; }
.catalog-lookup__head { display: grid; gap: 2px; margin-bottom: 8px; }
.catalog-lookup__head strong { font-size: var(--ds-fs-body); color: var(--ds-text); }
.catalog-lookup__head small { color: var(--ds-text-soft); font-size: var(--ds-fs-small); overflow-wrap: anywhere; }
.catalog-lookup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 38vh; overflow: auto; }
.catalog-lookup__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); background: var(--ds-surface); }
.catalog-lookup__item.is-inactive { opacity: 0.92; }
.catalog-lookup__text { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.catalog-lookup__name { color: var(--ds-text); overflow-wrap: anywhere; }
.catalog-lookup__meta, .catalog-lookup__facts { color: var(--ds-text-soft); font-size: var(--ds-fs-small); overflow-wrap: anywhere; }
.catalog-lookup__facts { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.catalog-lookup__status { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid var(--ds-warning); color: var(--ds-warning-text); }
.catalog-lookup__pick { min-height: 44px; padding: 0 16px; border-radius: var(--ds-radius-sm); font-weight: 700; font-size: var(--ds-fs-small); cursor: pointer; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); }
.catalog-lookup__pick:hover { background: var(--ds-ctl-bg-hover); border-color: var(--ds-ctl-border-hover); }
.catalog-lookup__pick:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.catalog-lookup__none { padding: 6px 2px; color: var(--ds-text-soft); font-size: var(--ds-fs-small); overflow-wrap: anywhere; }
@media (max-width: 520px) { .catalog-lookup { padding: 10px 12px; } .catalog-lookup__pick { width: 100%; } }

.warehouse-receipt-total input { font-weight: 800; background: var(--ds-surface-2); cursor: default; }
.warehouse-receipt-total[hidden] { display: none; }
.warehouse-product-category { display: inline-block; justify-self: start; margin-top: 4px; padding: 1px 10px; border-radius: 999px; border: 1px solid var(--ds-border-soft); background: var(--ds-surface-2); color: var(--ds-text-soft); font-size: var(--ds-fs-small); line-height: 1.5; overflow-wrap: anywhere; max-width: 100%; }

/* ---------- v1.0.25: repayment modes (№15) and «Tarkibi» - what a document is made of (№13, №14) ---------- */
.debt-mode { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.debt-mode__opt { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ds-ctl-border); border-radius: var(--ds-radius-sm); background: var(--ds-ctl-bg); color: var(--ds-text); font-weight: 700; font-size: var(--ds-fs-body); cursor: pointer; overflow-wrap: anywhere; }
.debt-mode__opt input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--ds-accent); }
.debt-mode__opt:has(input:checked) { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.debt-mode__opt:has(input:focus-visible) { box-shadow: var(--ds-focus); }

/* the supplier payment rows: a line (pick / document / open / amount), what it leaves, the goods of the invoice */
.pur-pay-doc { display: block; padding: 6px 8px; }
.pur-pay-doc.is-paying { border-color: var(--ds-accent); }
.pur-pay-doc__line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 150px; gap: 10px; align-items: center; }
.pur-pay-docs.is-mode-document .pur-pay-doc__line { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1.2fr) 150px; }
.pur-pay-docs:not(.is-mode-document) .pur-pay-doc__pick { display: none; }
.pur-pay-doc__pick { width: 22px; height: 22px; margin: 0; accent-color: var(--ds-accent); }
.pur-pay-doc__line input[readonly], .cash-alloc__row input[readonly] { background: var(--ds-surface-2); }
.pur-pay-doc__after, .cash-alloc__after { color: var(--ds-text-soft); font-size: var(--ds-fs-small); padding: 2px 2px 0; }
.pur-pay-doc__after:empty, .cash-alloc__after:empty { display: none; }
.pur-pay-doc__lines, .cash-alloc__lines, .receivable-row__lines { margin-top: 4px; }
.receivable-row__lines { padding: 0 2px 8px; }

/* the customer repayment rows */
.cash-alloc__item { display: block; padding: 4px 0; border-bottom: 1px solid var(--ds-border-soft); }
.cash-alloc__item:last-child { border-bottom: 0; }
.cash-alloc__item.is-paying .cash-alloc__sale strong { color: var(--ds-accent-strong); }
.cash-alloc__pick { width: 22px; height: 22px; margin: 0; accent-color: var(--ds-accent); }
.cash-alloc__list:not(.is-mode-document) .cash-alloc__pick { display: none; }
.cash-alloc__list.is-mode-document .cash-alloc__row { grid-template-columns: auto minmax(0, 1fr) auto 120px; }

.doc-lines__toggle { min-height: 40px; padding: 0 14px; border: 1px solid var(--ds-ctl-border); border-radius: var(--ds-radius-sm); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); font-weight: 700; font-size: var(--ds-fs-small); cursor: pointer; }
.doc-lines__toggle:hover { background: var(--ds-ctl-bg-hover); border-color: var(--ds-ctl-border-hover); }
.doc-lines__toggle:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.doc-lines__toggle[aria-expanded="true"] { border-color: var(--ds-accent); }
.doc-lines__panel { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-text); }
.doc-lines__panel[hidden] { display: none; }
.doc-lines__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.doc-lines__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(90px, auto); gap: 8px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--ds-border-soft); }
.doc-lines__row:last-child { border-bottom: 0; }
.doc-lines__head { display: grid; gap: 1px; min-width: 0; }
.doc-lines__name { color: var(--ds-text); overflow-wrap: anywhere; }
.doc-lines__meta { color: var(--ds-text-soft); font-size: var(--ds-fs-small); overflow-wrap: anywhere; }
.doc-lines__calc { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; color: var(--ds-text-soft); font-size: var(--ds-fs-small); font-variant-numeric: tabular-nums; }
.doc-lines__total { text-align: right; color: var(--ds-text); font-variant-numeric: tabular-nums; }
.doc-lines__sums { margin: 8px 0 0; display: grid; gap: 4px; }
.doc-lines__sum { display: flex; justify-content: space-between; gap: 12px; color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.doc-lines__sum dt, .doc-lines__sum dd { margin: 0; }
.doc-lines__sum dd { color: var(--ds-text); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.doc-lines__sum.is-total { padding-top: 4px; border-top: 1px solid var(--ds-border-soft); font-weight: 700; }
.doc-lines__sum.is-owed dd { color: var(--ds-danger-text); font-weight: 700; }
.doc-lines__empty { margin: 0; color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.doc-lines__empty.is-error { color: var(--ds-danger-text); }
@media (max-width: 520px) {
    .doc-lines__toggle { min-height: 44px; width: 100%; }
    .doc-lines__row { grid-template-columns: minmax(0, 1fr) auto; }
    .doc-lines__calc { grid-column: 1 / -1; order: 3; }
    .pur-pay-doc__line, .pur-pay-docs.is-mode-document .pur-pay-doc__line { grid-template-columns: minmax(0, 1fr); }
    .pur-pay-docs.is-mode-document .pur-pay-doc__line { grid-template-columns: auto minmax(0, 1fr); }
    .pur-pay-docs.is-mode-document .pur-pay-doc__line > input[data-pay-doc], .pur-pay-docs.is-mode-document .pur-pay-doc__line > .pur-pay-doc__open { grid-column: 1 / -1; }
    .cash-alloc__row, .cash-alloc__list.is-mode-document .cash-alloc__row { grid-template-columns: minmax(0, 1fr); }
    .cash-alloc__list.is-mode-document .cash-alloc__row { grid-template-columns: auto minmax(0, 1fr); }
    .cash-alloc__list.is-mode-document .cash-alloc__row > input[data-alloc-sale], .cash-alloc__list.is-mode-document .cash-alloc__row > .cash-alloc__open { grid-column: 1 / -1; }
}

/* v1.0.25: the purchase / payment / supplier windows divide their size by the font zoom like .cash-modal does (without it the window was 25% taller than the screen at «Juda katta» and its top and buttons were out of reach) */
.pur-doc-modal { width: min(980px, calc(96vw / var(--ds-zoom, 1))); max-height: calc(94vh / var(--ds-zoom, 1)); }
/* v1.0.25: a grid row that holds a scroll box (the list of documents to pay) must not be squeezed to nothing when the window is limited in height (a phone, «Juda katta» font):
   the rows keep their content height and the window body scrolls instead of the rows overlapping each other */
.pur-doc-body { grid-auto-rows: max-content; }

/* ---------- v1.0.25 (№2): the change history of a vehicle reference ---------- */
.vref-history { margin-top: 12px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); background: var(--ds-surface-2); color: var(--ds-text); }
.vref-history__summary { cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: var(--ds-fs-body); }
.vref-history__summary:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.vref-history__body { padding: 0 12px 12px; }
.vref-history__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.vref-history__item { padding: 8px 10px; border: 1px solid var(--ds-border-soft); border-left-width: 4px; border-radius: var(--ds-radius-sm); background: var(--ds-surface); }
.vref-history__item--insert { border-left-color: var(--ds-accent); }
.vref-history__item--update { border-left-color: var(--ds-info); }
.vref-history__item--delete { border-left-color: var(--ds-danger); }
.vref-history__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.vref-history__what { color: var(--ds-text); overflow-wrap: anywhere; }
.vref-history__time { margin-left: auto; color: var(--ds-text-soft); font-size: var(--ds-fs-small); font-variant-numeric: tabular-nums; }
.vref-history__change { margin-top: 4px; color: var(--ds-text-soft); font-size: var(--ds-fs-small); overflow-wrap: anywhere; }

/* v1.0.25 (№17): the import options - type and the currency of the prices in the file */
.wimp-pricing { margin-top: 12px; }
.wimp-currency { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; }
.wimp-currency label { display: grid; gap: 4px; flex: 1 1 200px; color: var(--ds-text); }
.wimp-currency select, .wimp-currency input { min-height: 44px; }
.wimp-currency [hidden] { display: none; }
.wimp-pricing > label { min-height: 44px; }

/* v1.0.25 (№9): Kassa debt cards open Qarzlar; the document filters and the flat document list of the payable side */
.cash-summary-card[data-open-debts] { cursor: pointer; }
.cash-summary-card[data-open-debts]:focus-visible { outline: 2px solid var(--ds-focus, #5aa9ff); outline-offset: 2px; }
.cash-summary-card.is-payable { border-color: rgba(255,154,50,.34); }
.cash-summary-card.is-payable strong { color: var(--orange); }
body.moyli-theme-light .cash-summary-card.is-payable strong { color: var(--ds-danger-text); }
.debt-docfilters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; margin-top: 8px; }
.debt-docfilters select, .debt-docfilters input { min-height: 44px; }
.debt-docfilters [hidden], .debt-docfilters[hidden] { display: none; }
.debt-date { display: grid; gap: 4px; min-width: 150px; flex: 1 1 150px; color: var(--ds-text-soft, inherit); font-size: var(--ds-fs-small); }
.debt-docwrap { display: grid; gap: 6px; margin-bottom: 8px; min-width: 0; }
.debt-doc__lines { min-width: 0; }
#debtRecLate { min-height: 44px; }
.debts-page .purchases-filters select, .debts-page .purchases-filters input { min-height: 44px; }
.similar-box__facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; color: var(--ds-text-soft); font-size: var(--ds-fs-small); }
.similar-box__fact strong { margin-left: 4px; color: var(--ds-text); font-weight: 600; }
.warehouse-product-modal-message .similar-box__fact { margin-left: 8px; white-space: nowrap; }

/* =========================================================
   v1.0.25 (№5 branches, №8 receipt): moyli-branches.js
   The lines look exactly like the lines of Xaridlar (.pur-line); a transfer has no price, so its grid has one column less.
   ========================================================= */
.sidebar-branch { display: grid; gap: 6px; margin: 10px 0 0; padding: 0 5px; min-width: 0; }
.sidebar-branch[hidden] { display: none; }
.sidebar-branch__label { font-size: var(--ds-fs-secondary); opacity: 0.85; }
.sidebar-branch select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); padding: 0 10px; font: inherit; }

.ml-modal .ml-body { display: grid; gap: 12px; min-width: 0; }
.ml-lines { position: relative; }
.ml-line { position: relative; }
.ml-lines--noprice .pur-line { grid-template-columns: minmax(0, 3fr) minmax(90px, 1fr) minmax(0, 0.2fr) 36px; }
.ml-lines--noprice .pur-line .pur-line__sum { visibility: hidden; }
.ml-pick { position: relative; display: block; }
.ml-pick input { width: 100%; }
.ml-meta { display: block; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); min-height: 1em; }
.ml-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; display: grid; max-height: 260px; overflow: auto; margin-top: 2px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.ml-suggest[hidden] { display: none; }
.ml-suggest--up { top: auto; bottom: 100%; margin: 0 0 2px; }
.ml-suggest__item { display: grid; gap: 2px; text-align: left; min-height: 44px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--ds-border-soft); background: transparent; color: var(--ds-text); font: inherit; cursor: pointer; }
.ml-suggest__item:last-child { border-bottom: 0; }
.ml-suggest__item:hover, .ml-suggest__item:focus { background: var(--ds-surface-2); }
.ml-suggest__item small { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.ml-line input.is-invalid { border-color: var(--ds-danger); }
.ml-remove { min-height: 36px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; }
.ml-totals { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ds-border-soft); font-size: 1.1em; }
.ml-total-value { font-variant-numeric: tabular-nums; }
.ml-hint { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); line-height: 1.4; }
.ml-tabs { margin-bottom: 4px; }
.ml-list { display: grid; gap: 8px; }
.ml-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); }
.ml-row__info { display: grid; min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.ml-row__info small { color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); }
.ml-row__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-row__actions button, .ml-add { min-height: 44px; padding: 0 12px; border: 1px solid var(--ds-ctl-border); background: var(--ds-ctl-bg); color: var(--ds-ctl-text); border-radius: var(--ds-radius-sm); cursor: pointer; font: inherit; }
.ml-add { justify-self: start; margin-top: 8px; }
.ml-branches { border: 1px solid var(--ds-border-soft); border-radius: var(--ds-radius-sm); padding: 8px 10px; display: grid; gap: 4px; min-width: 0; margin: 8px 0 0; }
.ml-check { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.ml-check input { width: 20px; height: 20px; flex: none; }
.ml-pass { display: grid; gap: 4px; margin-top: 8px; }
.warehouse-receipt-btn[hidden], #warehouseTransferBtn[hidden], #branchManageCard[hidden] { display: none; }
@media (max-width: 720px) {
    .ml-lines--noprice .pur-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ml-lines--noprice .pur-line .pur-line__sum { display: none; }
    .ml-pick { grid-column: 1 / -1; }
}
.ml-line input, .ml-line .ml-remove { min-height: 44px; }
.ml-line .ml-remove { min-width: 44px; }
/* the controls of a line look like the controls of the other windows (the dark theme has no rule for an input outside .cash-form-grid; the light theme styles every input of .cash-modal) */
body:not(.moyli-theme-light) .ml-line input { width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 9px; color: var(--text); background: #042b16; font: inherit; font-size: var(--ds-fs-secondary); }
body:not(.moyli-theme-light) .ml-line input::placeholder { color: var(--ds-text-muted); opacity: 1; }
body:not(.moyli-theme-light) .ml-line input:focus { outline: 0; box-shadow: var(--ds-focus); }
.ml-line .ml-remove { border: 1px solid var(--border-soft); background: transparent; color: var(--ds-text); border-radius: 9px; }
.ml-lines__head { min-height: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-secondary); font-weight: 700; }
.ml-lines__head span:nth-child(2), .ml-lines__head span:nth-child(3), .ml-lines__head span:nth-child(4) { text-align: right; }
@media (max-width: 720px) { .ml-lines__head { display: none; } }
/* the windows of moyli-branches.js are touch-sized everywhere (the other dialogs keep their own sizes) */
.ml-modal button, .ml-modal input:not([type="checkbox"]), .ml-modal select { min-height: 44px; }
.ml-modal .cash-modal-actions button, .ml-modal .cash-form-grid input, .ml-modal .cash-form-grid select { height: 44px; }
.ml-modal .cash-modal__head button { min-width: 44px; height: 44px; }
body:not(.moyli-theme-light) .ml-modal .cash-modal-actions .is-primary { color: #03170c; }
.ml-modal .cash-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ml-modal .cash-form-grid > * { min-width: 0; }
/* the action row INSIDE a pane of the staff / branch window is part of the form, not the sticky footer of the window */
.ml-pane .cash-modal-actions { position: static; padding-top: 0; background: transparent; margin-top: 12px; }