/* Tex.az Stock — the phone interface (<768px). Loaded after app.css with media="(max-width: 767px)"
   (partials/head.php), so nothing here reaches an iPad or a computer. The first part holds the phone
   rules moved out of app.css on 2026-10-17 (each still wrapped in its old @media); the second part,
   "PHONE INTERFACE", is the phone design itself. JS: assets/js/mobile.js. */

@media (max-width: 767px) {
  /* The topbar's .app-title already shows the title; .page-header-section opts out
     (pages with several headers, e.g. backup.php). */
  .page-header:not(.page-header-section) h1 { display: none; }
  /* With the h1 gone, an otherwise empty header's margin would double the gap
     under the topbar. */
  .page-header:not(.page-header-section):not(:has(> :not(h1))) { display: none; }
  .page-header { margin-bottom: 16px; }
}

@media (max-width: 767px) {
  .filter-summary {
    display: none;
  }
}

@media (max-width: 767px) {
  /* A phone's one filter row (Sifarişlər, Müştərilər) stays under the topbar while the list scrolls, like Stock's. */
  .phone-sticky-row {
    position: sticky;
    top: var(--topbar-h, 60px);
    z-index: 15;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 0;
    margin: -8px 0 8px;
  }
}

@media (max-width: 420px) {
  .field-row { flex-direction: column; gap: 0; }
}

@media (max-width: 767px) {
  /* 16px stops iOS zooming into a focused field. */
  .field :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea),
  .field .picker-trigger { font-size: 16px; }
}

@media (max-width: 700px) {
  .form-actions .fin-sale-account { flex: 1 1 100%; margin-right: 0; }
  /* Phone: the field is its own full row above the buttons, always there. */
  .form-actions:has(> .fin-sale-account-inline) { display: flex; flex-wrap: wrap; }
  .form-actions > .fin-sale-account-inline { flex: 1 1 100%; min-height: 38px; }
}

@media (max-width: 700px) {
  /* Phone: the "Pul hara gəldi?" row (admins) takes ~48px, so both carts drop to
   300px and Sat / Yeni sifariş fit one screen. */
  .modal:has(.fin-sale-account-inline) .cart-table-wrap { height: 300px; }
}

@media (max-width: 767px) {
  .bulk-page-header { display: none; }
  /* A narrow screen scrolls the grid sideways instead of crushing its columns. */
  .bulk-table { min-width: 1080px; }
  .bulk-actions { bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom) + 8px); }
  .bulk-actions .btn { flex: 1; min-width: 0; }
}

@media (max-width: 767px) {
  /* Phones: the name over months + serial. */
  .warranty-line { grid-template-columns: auto minmax(0, 1fr); }
  .warranty-line-pick { grid-column: 1 / -1; }
  .warranty-line-serial { font-size: 16px; } /* 16px+ keeps iOS from zooming in on focus */
  .warranty-line-months input { font-size: 16px; }
}

@media (max-width: 767px) {
  .contract-lines-wrap { overflow-x: auto; }
  #contract-buyer .field-row { flex-direction: column; gap: 12px; }
}

@media (max-width: 760px) {
  .label-layout { grid-template-columns: 1fr; gap: 16px; }
  .label-side { position: static; }
  /* Stacked under the label (phone): a compact sheet, centred. */
  .label-sheet { width: min(100%, 240px); }
}

@media (max-width: 480px) {
  /* A phone is narrower than the real-size label: shown smaller, prints the same. */
  .label-own-preview { padding: 10px; }
}

@media (max-width: 480px) {
  .label-own-preview .own-label { zoom: 0.78; }
}

@media (max-width: 700px) {
  .fin-sale-account select, .fin-pick { flex: 1; max-width: none; }
}



@media (max-width: 767px) {
  .pos-cart {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(105%);
  }
  .pos-cart-head { padding-top: 16px; }
  .pos-cart-close { margin-left: auto; }
}

@media (max-width: 767px) {
  .products-page-header { display: none; }
  /* Search + category + chips stay on screen while the list scrolls (--topbar-h: core.js). */
  .products-sticky-filters {
    position: sticky;
    top: var(--topbar-h, 60px);
    z-index: 15;
    margin: 0 -16px;
    padding: 0 16px 8px;
    background: var(--bg);
  }
  .pos-cart-open { display: none !important; }

  /* A row: photo, name with the two prices and the count, and "+". Checkboxes and the star
     button are desktop-only (a starred row shows the small star before its name). */
  #product-list { padding-bottom: 0; }
  .product-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb title add"
      "thumb stats add";
    column-gap: 12px;
    row-gap: 3px;
    padding: 11px 14px;
  }
  .product-row .card-row-main-wrap,
  .product-row .card-row-main { display: contents; }
  .product-row .card-row-sub,
  .product-row .star-toggle,
  .product-row .stat-cost,
  .product-row .card-row-stat-hint { display: none !important; }
  .product-row .card-row-thumb { grid-area: thumb; width: 46px; height: 46px; align-self: center; }
  .product-row .card-row-title { grid-area: title; font-size: 14.5px; line-height: 19px; }
  .product-row:is([data-star="black"], [data-star="blue"], [data-star="red"], [data-star="orange"], [data-star="yellow"]) .product-star-mark { display: inline-block; }
  .product-row .card-row-stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .product-row .card-row-stat { min-width: 0; text-align: left; display: flex; align-items: baseline; gap: 4px; }
  .product-row .card-row-stat-label { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: none; letter-spacing: 0; }
  .product-row .card-row-stat-value { font-size: 13px; }
  .product-row .stat-prices { gap: 12px; }
  .product-row .stat-price,
  .product-row .stat-cash { display: flex; align-items: baseline; gap: 4px; }
  .product-row .stat-cash .card-row-stat-value { font-size: 13px; font-weight: 600; color: var(--text); }
  .product-row .card-row-actions { grid-area: add; }
  .pos-add { width: 40px; height: 40px; border-radius: 12px; }
  /* Room for the cart bar under the last row. */
  .content:has(.pos-cart-bar:not([hidden])) { padding-bottom: 150px; }
  .drawer-body { padding: 0 18px 16px; }
  .pv-photo { width: 84px; height: 84px; }
}

@media (max-width: 767px) {
  /* A phone browses (statuses still switch): no editing, ticking or row buttons. */
  .pd-page-header,
  #pd-lock-btn,
  .pd-tool-label,
  #pd-table .pd-actions-col,
  #pd-table th:has(#pd-select-all) { display: none !important; }
  #pd-table td:has(.pd-row-select) { display: none; }
  /* Search + Kateqoriya; Platform | Vəziyyəti | Təchizatçı; Təmizlə | Sütunlar — one grid. */
}

/* Phone (screen only): each product a card — photo, name, SKU and the two prices, then stock and
   the three channels' statuses (labelled), Aktiv/Arxiv under the photo. Hidden columns stay hidden. */
@media screen and (max-width: 767px) {
  .pd-sheet { overflow: visible; border: 0; background: none; box-shadow: none; }
  .pd-sheet-head { min-height: 0; padding: 0 4px 8px; border: 0; }
  .pd-table-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
  #pd-table, #pd-table tbody { display: block; }
  #pd-table thead { display: none; }
  #pd-table tbody tr {
    display: grid;
    grid-template-columns: 60px repeat(3, minmax(0, 1fr));
    gap: 4px 10px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  #pd-table tbody tr[hidden] { display: none; }
  #pd-table tbody tr:hover td { background: none; }
  #pd-table tbody td { display: none; position: static; padding: 0; border: 0; background: none; font-size: 13px; text-align: left; }
  #pd-table td[data-col="photo"] { display: block; grid-row: 1 / 3; grid-column: 1; }
  #pd-table td[data-col="photo"] .pd-thumb { width: 56px; height: 56px; }
  #pd-table td[data-col="name"] { display: block; grid-row: 1; grid-column: 2 / 5; min-width: 0; font-size: 14.5px; }
  #pd-table td[data-col="name"] .pd-cell-display { white-space: normal; width: auto !important; }
  #pd-table td[data-col="sku"] { display: block; grid-row: 2; grid-column: 2; }
  #pd-table td[data-col="price"] { display: block; grid-row: 2; grid-column: 3; }
  #pd-table td[data-col="cash"] { display: block; grid-row: 2; grid-column: 4; }
  #pd-table td[data-col="onhand"] { display: block; grid-row: 3; grid-column: 2; }
  #pd-table td[data-col="incoming"] { display: block; grid-row: 3; grid-column: 3; color: var(--muted); }
  #pd-table td[data-col="reserved"] { display: block; grid-row: 3; grid-column: 4; color: var(--muted); }
  #pd-table td[data-col="website"] { display: block; grid-row: 4; grid-column: 2; }
  #pd-table td[data-col="tapaz"] { display: block; grid-row: 4; grid-column: 3; }
  #pd-table td[data-col="birmarket"] { display: block; grid-row: 4; grid-column: 4; }
  #pd-table td[data-col="active"] { display: block; grid-row: 3 / 5; grid-column: 1; align-self: end; }
  #pd-table td[hidden] { display: none !important; }
  #pd-table td[data-col="price"]::before { content: 'Satış '; color: var(--faint); font-weight: 500; }
  #pd-table td[data-col="cash"]::before { content: 'Nağd '; color: var(--faint); font-weight: 500; }
  #pd-table td[data-col="onhand"]::before { content: 'Anbar '; color: var(--faint); font-weight: 500; }
  #pd-table td[data-col="incoming"]::before { content: 'Yolda '; color: var(--faint); }
  #pd-table td[data-col="reserved"]::before { content: 'Rezerv '; color: var(--faint); }
  #pd-table td[data-col="website"]::before,
  #pd-table td[data-col="tapaz"]::before,
  #pd-table td[data-col="birmarket"]::before { display: block; margin-bottom: 2px; font-size: 11px; color: var(--faint); }
  #pd-table td[data-col="website"]::before { content: 'Sayt'; }
  #pd-table td[data-col="tapaz"]::before { content: 'Tap.az'; }
  #pd-table td[data-col="birmarket"]::before { content: 'Birmarket'; }
  #pd-table .pd-status-select, #pd-table .pd-active-select { max-width: 100%; height: 24px; padding: 0 8px; font-size: 11.5px; }
  #pd-table .pd-status-form, #pd-table .pd-active-form { max-width: 100%; }
}

@media (max-width: 767px) {
  .pf .field-row { flex-direction: column; gap: 0; }
  .pf .field-row .pf-sku { flex: 1; }
  .pf-card { padding: 16px 16px 2px; }
  .pf-actions { bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom) + 8px); }
  .pf-actions .btn { flex: 1; min-width: 0; }
  .fa-bar-left { display: none; } /* on a phone: the title bar's ⋯ */
  .pf-photo .field-image-canvas { max-width: 220px; margin: 0 auto; }
}

/* ---- Phone (<900px) ---- */
@media (max-width: 767px) {
  /* Yeni sifariş / Redaktə et on a phone: the labels go (the placeholder says it), a fixed cart height. */
  #co-modal-backdrop label[for="co-customer"],
  #co-modal-backdrop label[for="co-sale-type"],
  #co-edit-modal-backdrop label[for="co-edit-customer"],
  #co-edit-modal-backdrop label[for="co-edit-sale-type"] { display: none; }
  #co-modal-backdrop .cart-table-wrap,
  #co-edit-modal-backdrop .cart-table-wrap { height: 320px; }
}

@media (max-width: 700px) {
  #co-modal-backdrop .modal:has(.fin-sale-account-inline) .cart-table-wrap { height: 300px; }
}

@media (max-width: 767px) {
  .cust-page-header { display: none; }
  .cust-search-row { display: flex; align-items: center; gap: 8px; }
  .cust-search-row .search-bar { flex: 1; min-width: 0; margin-bottom: 0; }
  .cust-search-row .search-bar input { height: 42px; }
  .cust-add-phone { display: inline-flex; flex-shrink: 0; height: 42px; }
}

@media (max-width: 767px) {
  .crm-profile, .crm-form { padding: 18px 16px 14px; }
  .crm-avatar-lg { width: 52px; height: 52px; font-size: 18px; }
  .crm-profile-name h2 { font-size: 19px; }
  .crm-kpi { padding: 10px; }
  .crm-kpi b { font-size: 16px; }
}

@media (max-width: 767px) {
  .cat-add-phone { display: flex; justify-content: center; margin-bottom: 12px; }
  .card-row-child.cat-row { padding-left: 46px; }
}

@media (max-width: 767px) {
  .hist-undo { flex-direction: column; align-items: stretch; gap: 10px; }
  .hist-undo .undo-bar { flex-wrap: wrap; min-width: 0; }
  .hist-undo .undo-bar select { width: 100%; min-width: 0; max-width: none; flex: 1 1 100%; }
}

@media (max-width: 767px) {
  .po-page-header { display: none; }
  .po-toolbar { margin-bottom: 10px; }
  .po-toolbar .po-search input { height: 42px; }
  .po-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 12px 14px; }
  .po-row-progress { display: none; }
  /* A phone only browses orders: making, editing, receiving and deleting stay desk jobs. */
  #new-order-btn, .po-desk-only { display: none !important; }
}

@media (max-width: 560px) {
  .po-toolbar { flex-wrap: wrap; }
  .po-toolbar .po-search { flex-basis: 100%; }
  .po-toolbar .seg { width: 100%; }
  .po-toolbar .seg-btn { flex: 1; justify-content: center; }
  .po-view-kpi b { font-size: 15px; }
}

@media (max-width: 767px) {
  .inc-page-header { display: none; }
  .inc-toolbar .inc-search input { height: 42px; }
  .inc-toolbar .picker-trigger { min-width: 0; max-width: 42%; height: 42px; }
  .inc-group-open { display: none; }
  .inc-group-head { padding: 11px 14px; }
  .incoming-row { padding: 10px 14px; }
}

@media (max-width: 560px) {
  .sup-form .field-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 767px) {
  .lc-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 10px -6px;
    padding: 4px 8px 4px 2px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
  }
  .lc-back svg { width: 20px; height: 20px; transform: scaleX(-1); }
  .landed-cost-header-order::before { content: none; }
  .lc-packing-file { flex-basis: 100%; }
  .lc-packing-total { flex: 1; }
}

@media (max-width: 767px) {
  .lc-orders-header { display: none; }
  .lc-main-header { flex-wrap: wrap; gap: 10px; }
  .lc-main-header h1 { font-size: 20px; }
  .lc-packing-text { flex-basis: 100%; }
  .lc-actions { bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom) + 8px); }
  .lc-actions .btn { flex: 1; }
  .landed-cost-expense-row { flex-wrap: wrap; }
  .landed-cost-expense-label { flex-basis: 100%; }
}

@media (max-width: 480px) {
  .po-doc-upload-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 767px) {
  .rh-page-header { display: none; }
  /* No Satış növü here: Təchizatçı and Mal share the first line. */
  #history-filter-row.rh-toolbar .filter-row-selects {
    grid-template-areas:
      "customer customer customer product product product"
      "interval interval interval reset reset reset";
  }
}

@media screen and (max-width: 767px) {
  /* The order chip opens the card's last line, its note beside it. */
  .sh-table.rh-table tbody tr { grid-template-areas: "product product amount" "date customer qty" "actions notes notes"; }
  .sh-table.rh-table .rh-c-order { justify-self: start; }
  .rh-order-chip { padding: 2px 9px 2px 7px; font-size: 12px; }
}

@media (max-width: 767px) {
  .rep-page-header { display: none; }
  .rep-hint { margin-top: 0; }
  .rep-toolbar .sh-dates { display: inline-flex; flex-wrap: wrap; }
}

@media screen and (max-width: 767px) {
  .rep-soldout .rep-c-profit::before { content: 'Ort. mənfəət '; }
  .rep-soldout .rep-margin-bar { display: none; }
}

@media (max-width: 767px) {
  .sr-hint { display: none; }
  .sr-toolbar .filter-row-selects { display: grid; grid-template-columns: 1fr 1fr; }
  .sr-toolbar .filter-row-selects > * { width: 100%; min-width: 0; }
  .sr-sort { margin-left: 0; grid-column: 1 / -1; }
  .sr-sort select { flex: 1; }
  .sr-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .sr-row-delete { display: none; }
}

@media (max-width: 767px) {
  /* With the h1 hidden and PDF a desk job the header is empty (Mənfəət hesabatı's too). */
  #sales-history-header,
  #profit-header {
    display: none;
  }
  .sh-kpis { gap: 6px; }
  .sh-kpi { padding: 10px 12px; }
  .sh-kpi b { font-size: 17px; }
  .sh-dates, .sh-toolbar-sep { display: none; }
  .sh-toolbar .filter-row-selects { display: grid; grid-template-columns: 1fr 1fr; }
  .sh-toolbar .filter-row-selects > * { width: 100%; min-width: 0; }
}

/* Phone (screen only — paper keeps the table): each sale line becomes a card. */
@media screen and (max-width: 767px) {
  .sh-table-wrap { overflow: visible; background: none; border: 0; box-shadow: none; }
  .sh-table, .sh-table tbody { display: block; }
  .sh-table thead { display: none; }
  .sh-table tfoot { display: none; }
  .sh-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "product product amount"
      "date customer qty"
      "notes notes actions";
    gap: 3px 10px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  .sh-table tbody tr[hidden] { display: none; }
  .sh-table tbody td { display: block; padding: 0; border: 0; }
  .sh-table .sh-c-check { display: none; }
  .sh-table .sh-c-product { grid-area: product; min-width: 0; max-width: none; }
  .sh-table .sh-c-amount { grid-area: amount; font-size: 15px; }
  /* Tarix · Müştəri on one line, the count at its end. */
  .sh-table .sh-c-date { grid-area: date; font-size: 12.5px; }
  .sh-table .sh-c-customer { grid-area: customer; max-width: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-table .sh-c-type { display: none; }
  .sh-table .sh-c-qty { grid-area: qty; font-size: 12.5px; color: var(--muted); }
  .sh-table .sh-c-qty::after { content: ' ədəd'; }
  .sh-table .sh-c-price { display: none; }
  .sh-table .sh-c-notes { grid-area: notes; max-width: none; font-size: 12.5px; white-space: normal; }
  .sh-table .sh-none { display: none; }
  .sh-table .sh-c-actions { grid-area: actions; align-self: end; }
}

@media screen and (max-width: 767px) {
  /* Product on its own line; the figures under it, the difference at the end. */
  .sh-table.rp-cards.cp-table .sh-c-product { flex-basis: 100%; }
  .sh-table.rp-cards.cp-table .sh-c-amount { order: 3; }
  .sh-table.rp-cards.bms-table .rp-fig-first { margin-left: 0; }
  .sh-table.bms-table .bs-bar { width: 40px; }
  .sh-kpis.sh-kpis-2 { max-width: none; }
}

@media (max-width: 767px) {
  .ch-head { gap: 12px; margin-bottom: 14px; }
  /* The topbar carries the name; the logo and the last check stay. */
  .ch-head h1 { display: none; }
  .ch-head-actions { width: 100%; }
  .ch-head-actions > * { flex: 1; }
  .ch-head-actions .btn { width: 100%; justify-content: center; }
  .ch-recon { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .ch-recon-value { font-size: 28px; }
  .ch-recon-mid { flex-direction: row; justify-content: flex-start; }
  .ch-recon-mid > svg { display: none; }
  .ch-recon-side:last-child { text-align: left; }
  .ch-recon-side:last-child .ch-recon-parts { justify-content: flex-start; }
  .ch-row { flex-wrap: wrap; padding: 10px 12px; }
  .ch-row-main { flex-basis: calc(100% - 140px); }
  /* Two or more actions go under the text, so the name keeps the row's width. */
  .ch-row-end:has(> :nth-child(2)) { flex-basis: 100%; padding-left: 52px; flex-wrap: wrap; }
}

@media (max-width: 767px) {
  /* Phone: the two dates share the line, Hesabla sits after them (it ran 11px off screen). */
  .vat-custom-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; width: 100%; }
  .vat-custom-range input[type="date"] { width: 100%; min-width: 0; }
}

@media (max-width: 767px) {
  .kassa-head-actions { display: none; }
  .kassa-hero { padding: 18px; }
  .kassa-hero-value { font-size: 34px; }
  .kassa-groups { grid-template-columns: minmax(0, 1fr); }
  /* A tap on a group's heading folds it (pages/finance.js). */
  .kassa-group-head { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .kassa-fold-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: -3px 2px 0 12px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.15s;
  }
  .kassa-group.is-folded .kassa-fold-chevron { transform: rotate(-45deg); margin-top: 0; }
  .kassa-group.is-folded .kassa-group-head { border-bottom: 0; }
  .kassa-group.is-folded .kassa-account { display: none; }
  .kassa-account-go { display: none; }
}

@media (max-width: 767px) {
  /* Compact over the tab bar: count, the bookings in small type, date + Köçür on one line. */
  .ft-summary { bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom) + 8px); }
  .ft-summary-head { padding: 10px 14px 8px; }
  .ft-summary-head h2 { font-size: 14px; }
  .ft-preview:not(:empty) { padding: 2px 4px; }
  .ft-preview .finance-preview-row { padding: 4px 10px; font-size: 12.5px; }
  .ft-submit-row { padding: 8px 14px 12px; }
  .ft-submit-row .field label { display: none; }
  .ft-submit-row .btn { min-width: 0; flex: 0 0 38%; }
  .ft-group-head { padding: 12px 14px; }
  .ft-dest-wrap { width: 100%; }
  .ft-dest { flex: 1; max-width: none; }
  .ft-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; padding: 10px 14px; }
  .ft-date { grid-column: 2; grid-row: 1; }
  .ft-desc { grid-column: 2 / -1; grid-row: 2; }
  .ft-amount { grid-column: 3; grid-row: 1; }
  .ft-commission { grid-column: 2 / 3; grid-row: 3; max-width: 160px; }
  .ft-return { grid-column: 3; grid-row: 3; justify-self: end; }
}

@media (max-width: 767px) {
  /* Cəmi balans across, the two sides under it. */
  .bl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-kpis .sh-kpi-main { grid-column: 1 / -1; order: -1; }
  .bl-kpis small { display: none; }
  .bl-section-head h2 { font-size: 17px; }
  .bal-item { padding-left: 32px; padding-right: 14px; }
  .bal-group > summary { padding-left: 12px; padding-right: 14px; }
  .bal-line, .finance-party-split { padding-left: 32px; padding-right: 14px; }
  .finance-balance-end > .finance-amount { min-width: 0; }
  /* The grid as dots; the payments listed by day under it. */
  .finance-cal-card { padding: 14px; }
  .finance-cal-day { min-height: 42px; padding: 2px; }
  .finance-cal-day .finance-cal-chip { height: 6px; padding: 0; border-radius: 3px; background: var(--info); }
  .finance-cal-day .finance-cal-chip.is-loan { background: var(--warn); }
  .finance-cal-day .finance-cal-chip.is-late { background: var(--err); }
  .finance-cal-day .finance-cal-chip span { display: none; }
  .finance-cal-agenda { display: block; margin-top: 16px; border-top: 1px solid var(--separator); }
  .finance-cal-agenda-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--separator); }
  .finance-cal-agenda-row:last-child { border-bottom: 0; }
  .finance-cal-agenda-date { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: lowercase; }
  .finance-cal-agenda-date b { font-size: 17px; font-weight: 800; line-height: 1.1; color: var(--text); }
  .finance-cal-agenda-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; font-weight: 650; }
  .finance-cal-agenda-name small { font-size: 12px; font-weight: 500; color: var(--muted); }
  .finance-cal-agenda-row.is-late .finance-cal-agenda-date b, .finance-cal-agenda-row.is-late .finance-amount { color: var(--err); }
  .finance-loans-summary { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .loan-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ln-head { margin-bottom: 12px; }
  .ln-head .btn { width: 100%; }
  .ln-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-kpis .sh-kpi-main { grid-column: 1 / -1; }
  .finance-plan-tools { grid-template-columns: minmax(0, 1fr); }
  /* A month per card: date and total, then the state and its two parts. */
  .ln-table thead { display: none; }
  .ln-table, .ln-table tbody { display: block; }
  .ln-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "date date total actions" "state principal interest actions"; align-items: center; gap: 3px 12px; padding: 10px 14px; border-bottom: 1px solid var(--separator); }
  .ln-table tbody tr.ln-edit-row { display: block; padding: 0; }
  .ln-table tbody td { padding: 0; border: 0; }
  .ln-table td:nth-child(1) { grid-area: date; font-weight: 650; }
  .ln-table td:nth-child(2) { grid-area: principal; font-size: 12px; color: var(--muted); }
  .ln-table td:nth-child(3) { grid-area: interest; font-size: 12px; color: var(--muted); }
  .ln-table td:nth-child(2)::before { content: 'əsas '; }
  .ln-table td:nth-child(3)::before { content: 'faiz '; }
  .ln-table td:nth-child(4) { grid-area: total; }
  .ln-table td:nth-child(5) { grid-area: state; }
  .ln-table td.ln-actions { grid-area: actions; padding: 0; }
  .ln-table .ln-edit-row td { display: block; padding: 12px 14px; }
}

@media (max-width: 767px) {
  /* A card per item: photo, name and date | today's value. */
  .fa-table .fa-m-hide, .fa-table thead { display: none; }
  .fa-table { width: 100%; }
  .fa-table td { padding-left: 12px; padding-right: 12px; }
  .fa-table td.fa-c-name { white-space: normal; }
  .fa-actions { width: 1%; }
}

@media (max-width: 767px) {
  .fe-head-actions, .fe-side { display: none; }
  /* Every filter on one line, locked under the topbar while the list scrolls. */
  /* clip, not hidden: the corners stay round and the day headings keep sticking */
  .fe-ledger { overflow: clip; margin-bottom: 44px; }
  .fe-day-head { top: calc(var(--topbar-h, 52px) + var(--fe-filter-h, 0px)); padding: 7px 14px 6px; }
  .fe-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 14px; -webkit-tap-highlight-color: transparent; }
  .fe-row:active { background: var(--surface-2); }
  .fe-row-actions { display: none; }
  .fe-tile.fin-badge { width: 34px; height: 34px; border-radius: 10px; }
  .fe-row-title { font-size: 14px; }
  /* A payout: "A → B" says it, its description only repeats it. */
  .fe-row[data-type="settlement"] .fe-desc-text { display: none; }
  /* The same three totals on one locked line over the tab bar. */
  .fe-mobile-total {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tabbar-h, 58px);
    z-index: 25;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 16px;
    border-top: 1px solid var(--separator);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
  }
  .fe-mobile-total b { color: var(--text); font-weight: 750; }
  .fe-mobile-total b.profit-positive { color: var(--ok); }
  .fe-mobile-total b.profit-negative { color: var(--err); }
}

@media (max-width: 480px) {
  .finance-type-seg button { gap: 4px; padding: 0 6px; font-size: 12.5px; }
  .finance-type-seg button svg { display: none; }
  .finance-form-grid,
  .finance-form-grid[data-type="loan_payment"] { grid-template-columns: 1fr; }
  .finance-form-grid[data-type="loan_payment"] > .field { grid-column: auto; }
  .finance-form-grid .fe-date-field,
  .finance-form-grid[data-type="transfer"] .fe-date-field { max-width: none; }
  .fe-transfer-arrow { left: 50%; top: -21px; margin: 0 0 0 -14px; transform: rotate(90deg); }
}

@media (max-width: 767px) {
  .set-head { align-items: center; margin-bottom: 16px; }
  .set-head h1, .set-eyebrow { display: none; }
  .set-lead { margin-top: 0; font-size: 13px; }
}

@media (max-width: 699px) {
  .set-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .set-card-head { padding: 16px 16px 12px; }
  .set-card-body { padding: 0 16px 16px; }
  .set-card-foot { padding: 12px 16px; }
  .set-card-foot > .btn, .set-card-foot > form { flex: 1; }
  .set-card-foot > form .btn { flex: 1; }
  .set-foot-note { flex-basis: 100%; }
}

@media (max-width: 699px) {
  .set-item { padding: 0 12px 0 6px; }
}

@media (max-width: 699px) {
  .set-cat-row { padding-left: 18px; }
}

@media (max-width: 599px) {
  .set-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 699px) {
  .set-detail-head { padding: 14px 12px 12px 16px; }
  .set-detail-body { padding: 16px 16px 4px; }
}

@media (max-width: 599px) {
  .set-kpis:not(.sh-kpis-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-kpis:not(.sh-kpis-4) > :last-child { grid-column: 1 / -1; }
  .set-kpis .sh-kpi { padding: 12px 14px; }
  .set-kpis .sh-kpi b { font-size: 17px; }
}

@media (max-width: 767px) {
  .set-backup .set-card-head p { min-height: 0; }
}

@media (max-width: 599px) {
  .fag-row { grid-template-columns: minmax(0, 1fr) 110px 34px; padding: 8px 12px; }
  .fag-head > :nth-child(3), .fag-count { display: none; }
}

@media (max-width: 599px) {
  .fss-transits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .contract-text-input { font-size: 16px; } /* 16px+ keeps iOS from zooming in on focus */
  .contract-text-entries { padding: 2px 12px 6px; }
}

@media (max-width: 767px) {
  .ask-head-actions { flex-wrap: nowrap; width: 100%; }
  .ask-spend { padding: 0 10px; font-size: 12.5px; }
  .ask-spend-limit { display: none; }
  .ask-head-actions .ask-new { width: 40px; min-height: 36px; margin-left: auto; padding: 0; }
  .ask-new-text { display: none; }
  .ask-layout { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .ask-layout.has-thread .ask-history { display: none; }
  .ask-layout:not(.has-thread) .ask-history { order: 2; }
  .ask-history { overflow: visible; }
  .ask-main { overflow: visible; border: 0; background: none; box-shadow: none; }
  .ask-main-head { min-height: 0; padding: 0 0 10px; border-bottom: 0; }
  .ask-layout.has-thread .ask-back { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 13.5px; font-weight: 650; color: var(--muted); }
  .ask-back-icon { width: 15px; height: 15px; transform: rotate(180deg); }
  .ask-layout:not(.has-thread) .ask-main-head { display: none; }
  .ask-thread { overflow: visible; padding: 4px 0 16px; }
  .ask-empty { margin: 8px auto 4px; }
  .ask-a { padding-left: 0; padding-top: 36px; }
  .ask-meta { padding-left: 0; }
  .ask-q { max-width: 92%; }
  /* The fixed tab bar covers the bottom — the composer pins just above it. */
  .ask-composer { position: sticky; bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom) + 8px); z-index: 5; margin: 0 0 12px; box-shadow: var(--shadow-pop); }
}

@media (max-width: 767px) {
  .rp-group { margin-bottom: 20px; }
  .rp-grid { grid-template-columns: 1fr; gap: 8px; }
  .rp-card { min-height: 0; padding: 12px 14px; gap: 12px; }
  .rp-card-icon { width: 38px; height: 38px; }
}

@media (max-width: 767px) {
  /* The h1 is the topbar's and PDF is a desk job: nothing left in the header. */
  .inventory-page-header { display: none; }
  .sh-kpis.sh-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-toolbar .filter-row-selects { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .inv-toolbar .filter-row-selects > * { width: 100%; min-width: 0; max-width: none; justify-content: center; }
}

/* Phone (screen only — paper keeps the table): a card per product, its figures on one line. */
@media screen and (max-width: 767px) {
  .sh-table.rp-cards tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .sh-table.rp-cards .sh-c-product { flex: 1 1 calc(100% - 110px); }
  .sh-table.rp-cards .rp-thumb { width: 44px; height: 44px; }
  .sh-table.rp-cards .rp-fig { order: 2; font-size: 12.5px; font-weight: 600; color: var(--text); }
  .sh-table.rp-cards .rp-fig::before { content: attr(data-label) ' '; font-weight: 500; color: var(--muted); }
  .sh-table.rp-cards .sh-c-amount { order: 1; margin-left: auto; }
  .sh-table.rp-cards .rp-fig-first { margin-left: 56px; }
  .sh-table.rp-cards .rp-phone-hide { display: none; }
}

@media (max-width: 767px) {
  .ls-toolbar .filter-row-selects { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ls-toolbar #ls-supplier-filter { grid-column: 1 / -1; }
  .ls-toolbar .filter-row-selects > * { width: 100%; min-width: 0; justify-content: center; }
}

@media (max-width: 767px) {
  .bs-toolbar .filter-row-selects { grid-template-columns: 1fr; width: 100%; }
  .bs-toolbar #history-range-preset { grid-area: auto; }
  .bs-toolbar .sh-dates.bs-dates { display: flex; align-items: center; gap: 6px; }
  .bs-dates input { flex: 1; min-width: 0; }
}

@media screen and (max-width: 767px) {
  .sh-table.bs-table .bs-c-rank { flex: 0 0 auto; width: auto; padding: 0; }
  .sh-table.bs-table .sh-c-product { flex-basis: calc(100% - 150px); }
  .sh-table.bs-table .bs-c-avg, .sh-table.bs-table .bs-c-ratio { display: none; }
  .sh-table.bs-table .rp-fig-first { margin-left: 40px; }
  .sh-table.bs-table .bs-bar { width: 40px; }
  .sh-table.bs-table .bs-qty { gap: 6px; }
}

@media (max-width: 767px) {
  .vat-toolbar .filter-row-selects { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .vat-toolbar .seg { display: flex; }
  .vat-toolbar .seg-btn { flex: 1; justify-content: center; }
  .vat-custom-range { width: 100%; }
  .vat-toolbar .sh-dates.vat-dates { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
  .vat-dates input { flex: 1; min-width: 0; }
}

@media screen and (max-width: 767px) {
  /* A card: product and price, then date · customer, then the type with Əsas / ƏDV. */
  .sh-table.vat-table tbody tr { grid-template-areas: "product product amount" "date customer qty" "type type tax"; }
  .sh-table.vat-table .vat-c-type { display: block; grid-area: type; font-size: 12.5px; color: var(--muted); }
  .sh-table.vat-table .vat-c-base { display: none; }
  .sh-table.vat-table .vat-c-tax { grid-area: tax; font-size: 12.5px; }
  .sh-table.vat-table .vat-c-tax::before { content: 'ƏDV '; font-weight: 500; color: var(--muted); }
}

@media screen and (max-width: 767px) {
  .sh-table.pr-table .sh-c-amount { text-align: right; }
}

@media screen and (max-width: 767px) {
  /* The bar takes its own line under the figures. */
  .sh-table.ls-table .ls-c-level { order: 3; flex: 1 0 100%; width: auto; padding-left: 56px; }
  .sh-table.ls-table .ls-level { width: 100%; max-width: 260px; }
}

@media (max-width: 767px) {
  .ds-toolbar .filter-row-selects { width: 100%; }
  .ds-toolbar .seg { display: flex; width: 100%; }
  /* Five periods share a 343px row. */
  .ds-toolbar .seg-btn { flex: 1; justify-content: center; min-width: 0; padding: 0 4px; }
}

@media screen and (max-width: 767px) {
  /* Say, then the days with their date under them; the channels take their own line. */
  .sh-table.ds-table .ds-c-qty { order: 2; margin-left: 56px; }
  .sh-table.ds-table .ds-c-days { order: 3; margin-left: 0; text-align: left; }
  .sh-table.ds-table .ds-c-days b { display: inline; }
  .sh-table.ds-table .ds-c-days small { margin-top: 2px; }
  .sh-table.ds-table .ds-c-channels { order: 4; flex: 1 0 100%; padding-left: 56px; }
}

@media (max-width: 767px) {
  /* Shared by Satış tarixçəsi (5 controls), Gəliş tarixçəsi and Mənfəət hesabatı (+ Kateqoriya). */
  #history-filter-row .filter-row-selects {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    /* Without a definite width this grid (a flex item) shrink-wraps and the 1fr
       tracks size off content instead of splitting the row. */
    width: 100%;
  }
  #history-filter-row .filter-row-selects {
    grid-template-areas:
      "type type customer customer product product"
      "interval interval interval reset reset reset";
  }
  #history-filter-row.pr-toolbar .filter-row-selects {
    grid-template-areas:
      "type type customer customer product product"
      "category category category category category category"
      "interval interval interval reset reset reset";
  }
  #history-type-filter { grid-area: type; }
  /* The picker triggers (core.js) follow their hidden <select> and have no id. */
  #history-customer + .picker-trigger { grid-area: customer; }
  #history-add-product + .picker-trigger { grid-area: product; }
  #history-category-filter + .fin-pick { grid-area: category; }
  #history-range-preset { grid-area: interval; }
  #history-reset { grid-area: reset; }
  #history-filter-row .filter-row-selects select,
  #history-filter-row .filter-row-selects button {
    width: 100%;
  }
  /* Undo desktop's max-widths (picker 140px, Kateqoriya 260px), which would fight width: 100% here. */
  #history-filter-row .picker-trigger,
  #history-filter-row .fin-pick {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .rpt-period { width: 100%; margin-left: 0; }
  .rpt-period select { flex: 1 1 100%; }
  .rpt-period .sh-dates { flex: 1; }
  .rpt-period .sh-dates input { flex: 1; min-width: 0; }
  .rpt-tabbar { margin-bottom: 14px; }
  .rpt-tabs { width: 100%; }
  .rpt-period-label { margin-left: 0; }
  .rpt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rpt-kpi { padding: 12px 14px; }
  .rpt-kpi-en { display: none; }
  .rpt-kpi-value { font-size: 20px; }
  .rpt-two, .rpt-ov-side { grid-template-columns: minmax(0, 1fr); }
  .rpt-risk { padding: 10px 14px; }
  .rpt-risk-hist, .rpt-risk-hist-note { padding: 0 14px 10px; }
  .rpt-risk-wide { display: none; }
  .rpt-risk-narrow { display: block; }
  .rpt-box-head { padding: 13px 14px 11px; }
}

@media (max-width: 480px) {
  .rpt-donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rpt-leg { width: 100%; }
  .rpt-share-row { grid-template-columns: 110px minmax(0, 1fr) 70px; }
}

@media (max-width: 480px) {
  .label-own-preview .pl { zoom: 0.78; }
}


/* ---- end of the moved rules ---- */

/* =====================================================================================
   PHONE INTERFACE (V5.1, 2026-10-17) — everything below is new; the moved blocks above
   are the old phone rules each page still leans on until its own section replaces them.
   ===================================================================================== */

:root {
  --m-pad: 16px;
  --m-row: 56px;                 /* a list row's minimum height */
  --m-radius: 18px;
  --m-sheet-radius: 24px;
}

/* ---- Shell: topbar ---- */
body { padding-bottom: calc(var(--tabbar-h) + 20px); }
.topbar {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom: 1px solid var(--separator);
}
.topbar-inner { padding: 4px 8px 4px 16px; }
.topbar-row { min-height: 48px; gap: 6px; }
.topbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 44px;
  margin-left: -12px;
  margin-right: -4px;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.topbar-back svg { width: 26px; height: 26px; stroke-width: 2.2; }
.topbar-brand { display: inline-flex; flex-shrink: 0; }
.topbar-brand .brand-mark { width: 27px; height: 22px; }
.app-title {
  flex: 1;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.025em;
}
.topbar-tools { gap: 6px; margin-left: 0; }
.topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar-icon svg { width: 21px; height: 21px; }
.topbar-icon.active { background: var(--brand); color: var(--ink-on-brand); }
.topbar-action {
  width: 40px;
  height: 40px;
  margin-block: 0;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar-action svg { width: 21px; height: 21px; stroke-width: 2.3; }
.topbar-pill {
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar-pill.is-on { background: var(--primary); color: var(--on-primary); }

/* Maliyyə's pages side by side under its title (one tab for the group). */
.m-subnav {
  display: flex;
  gap: 6px;
  margin: 2px -8px 6px -16px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-subnav::-webkit-scrollbar { display: none; }
.m-subnav-link {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
}
.m-subnav-link.active { background: var(--primary); color: var(--on-primary); }

/* ---- Shell: tab bar ---- */
.tabbar { padding: 6px 4px calc(4px + env(safe-area-inset-bottom)); }
.tab {
  position: relative;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}
.tab-icon { width: 56px; height: 32px; padding: 5px 16px; }
.tab-dot {
  position: absolute;
  top: 2px;
  left: calc(50% + 9px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--err);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---- Sheets ---- */
.m-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(17, 17, 18, 0.42);
  animation: modal-fade 0.18s ease;
}
.m-scrim[hidden] { display: none; }
/* Menyu sits under the tab bar (it stays to switch or close). */
.m-scrim:has(~ .m-sheet-low.is-open),
body:has(.m-sheet-low.is-open) .m-scrim { z-index: 28; }
body.m-sheet-open { overflow: hidden; }

.m-sheet,
[data-m-sheetable].is-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 56;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
  margin: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--m-pad) calc(18px + env(safe-area-inset-bottom)) !important;
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0 !important;
  box-shadow: var(--shadow-pop) !important;
  animation: m-rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 0.2s ease;
}
.m-sheet[hidden] { display: none !important; }
[data-m-sheetable]:not(.is-open) { display: none !important; }
.m-lift { z-index: 57 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; }
@keyframes m-rise { from { transform: translateY(40px); opacity: 0.6; } }
.m-sheet-low {
  z-index: 29;
  bottom: var(--tabbar-h) !important;
  max-height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-top) - 24px);
  padding-bottom: 18px !important;
}
.m-grab {
  width: 38px;
  height: 5px;
  margin: 8px auto 6px;
  border-radius: 3px;
  background: var(--line-strong);
}
.m-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(-1 * var(--m-pad)) 6px;
  padding: 0 var(--m-pad) 8px;
  background: var(--surface);
}
.m-sheet-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.m-sheet-title { font-size: 19px; font-weight: 780; letter-spacing: -0.02em; }
.m-sheet-done {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.m-sheet-label {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.m-sort-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.m-sort-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.m-sort-dir:empty { display: none; }

/* Action sheet: iOS-style grouped buttons, Ləğv et apart. */
.m-actions { background: transparent !important; box-shadow: none !important; padding-top: 0 !important; }
.m-actions .m-grab { background: rgba(255, 255, 255, 0.7); }
.m-actions-title {
  padding: 12px 16px;
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--separator);
}
.m-actions-group { overflow: hidden; border-radius: 16px; background: var(--surface); }
.m-actions-title + .m-actions-group { border-radius: 0 0 16px 16px; }
.m-actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-actions-btn svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.m-actions-group > :last-child { border-bottom: 0; }
.m-actions-btn:active { background: var(--surface-2); }
.m-actions-btn.is-danger { color: var(--err); }
.m-actions-btn.is-danger svg { color: var(--err); }
.m-actions-cancel { margin-top: 8px; border-radius: 16px; border: 0; font-weight: 750; }

/* ---- Menyu ---- */
.m-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 12px;
}
.m-menu-user .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: 15px;
  font-weight: 760;
}
.m-menu-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.m-menu-user-name { font-size: 16px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-menu-user-role { font-size: 13px; color: var(--muted); }
.m-menu-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 16px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 680;
  text-align: center;
}
.m-quick svg { width: 22px; height: 22px; }
.m-quick:first-child { background: var(--primary); color: var(--on-primary); }
.m-menu-find {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 14px 0 4px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
}
.m-menu-find svg { width: 18px; height: 18px; flex-shrink: 0; }
.m-menu-find input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.m-menu-group[hidden] { display: none; }
.m-menu-title {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.m-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.m-menu-item[hidden] { display: none; }
.m-menu-item:active { background: var(--surface-3); }
.m-menu-item.active { background: var(--brand-soft); }
.m-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.m-menu-icon svg { width: 19px; height: 19px; }
.m-menu-icon img { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: var(--logo-bg); }
.m-menu-label { flex: 1; min-width: 0; }
.m-menu-item .nav-count {
  flex-shrink: 0;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 750;
  line-height: 18px;
  text-align: center;
}
.m-menu-item .nav-alarm {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--err);
  box-shadow: 0 0 0 3px var(--err-soft);
}

/* ---- Every page window (.modal) is a sheet: a grab line, pull down to close (mobile.js) ---- */
.modal-backdrop:not(.is-docked) > .modal {
  max-height: calc(100dvh - env(safe-area-inset-top) - 10px);
  border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0;
  padding-top: 8px;
  transition: transform 0.2s ease;
}
.modal-backdrop:not(.is-docked) > .modal::before {
  content: '';
  display: block;
  width: 38px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 3px;
  background: var(--line-strong);
}
.modal-header h2 { font-size: 20px; }
.modal-close { width: 36px; height: 36px; }

/* Pickers (customer, product, account): a full-height page sheet — the search on top stays above
   the keyboard, the list fills the rest. */
.picker-overlay {
  align-items: stretch;
  padding-top: calc(env(safe-area-inset-top) + 10px);
}
.picker-panel {
  max-width: none;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0;
}
.picker-panel-header { padding: 16px 16px 12px; }
.picker-search { height: 44px; }
.picker-close { min-height: 44px; padding: 0 4px; }
.picker-list { max-height: none; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.picker-row { min-height: 52px; padding: 14px 18px; font-size: 16px; }

/* Flash toast: from the top, the width of the screen. */
.flash {
  top: calc(var(--topbar-h, 56px) + 8px);
  left: 12px;
  right: 12px;
  max-width: none;
}

/* ---- Shared pieces a page adds for the phone ---- */
/* A search field with Filtr beside it (.m-searchbar), and the Filtr button itself. */
.m-searchbar { display: flex; gap: 8px; align-items: center; }
.m-searchbar > :first-child { flex: 1; min-width: 0; }
.m-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
}
.m-filter-btn svg { width: 18px; height: 18px; }
.m-filter-btn.is-active::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-strong);
}

/* Inputs: 16px so iOS never zooms; touch-size controls. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
.btn { min-height: 44px; }

/* ====== Page: Ana səhifə ====== */
/* Greeting and the two actions, then: Bu gün (three figures in one row), Tez keçid chips, Diqqət,
   Satışlar, Son fəaliyyət, Anbar, Kassa. The topbar already says tex.az. */
.home-head { flex-direction: column; align-items: stretch; gap: 14px; margin: 2px 0 14px; }
.home-hello h1 { font-size: 23px; letter-spacing: -0.03em; }
.home-now { margin-top: 4px; font-size: 13.5px; }
.home-wind { display: none; }
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-actions .btn { min-height: 50px; border-radius: 14px; font-size: 15.5px; }
.home-grid { gap: 12px; }
.home-today { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--m-radius); }
.home-shortcuts { order: 2; }
.home-attention { order: 3; }
.home-sales { order: 4; }
.home-activity { order: 5; }
.home-store { order: 6; }
.home-cash { order: 7; }
.home-metric { gap: 2px; padding: 12px 12px 13px; }
.home-metric-label { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-metric-value { font-size: 19px; letter-spacing: -0.03em; }
.home-metric-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-metric-long { display: none; }
.home-card { padding: 14px 14px 16px; border-radius: var(--m-radius); }
.home-card-head { margin-bottom: 10px; }

/* Tez keçid: one sideways line of chips, to the screen's edges. */
.home-shortcuts {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--m-pad));
  padding: 2px var(--m-pad);
  overflow-x: auto;
  scrollbar-width: none;
}
.home-shortcuts::-webkit-scrollbar { display: none; }
.home-shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.home-shortcuts svg { width: 18px; height: 18px; color: var(--muted); }
.home-shortcuts a:first-child { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.home-shortcuts a:first-child svg { color: inherit; }

/* Diqqət: tight rows. */
.home-attention .home-card-head { margin-bottom: 8px; }
.home-attention-list { gap: 6px; }
.home-attention .alarm-banner,
.home-todo { padding: 9px 12px 9px 9px; gap: 10px; font-size: 14px; line-height: 1.35; border-radius: 14px; }
.home-attention .alarm-banner > svg,
.home-todo-icon { width: 32px; height: 32px; }
.home-attention .alarm-banner-action { padding-left: 8px; }

/* Satışlar: totals as three equal pills over a shorter chart. */
.home-sales .home-card-head { flex-direction: column; align-items: stretch; }
.home-sales-totals { width: 100%; }
.home-sales-total { flex: 1; padding: 6px 10px; }
.home-bars { height: 84px; gap: 2px; }

/* Son fəaliyyət: the period select on the head's line, rows edge to edge. */
.home-activity .home-card-head { flex-wrap: nowrap; }
.home-activity-tools { gap: 8px; }
.home-activity-total { font-size: 13px; }
.home-row-facts { display: none; }
.home-feed { margin: 0 -8px; }
.home-feed .home-row { min-height: var(--m-row); padding: 9px 8px; }

.home-store-row { min-height: 46px; }

/* ---- What a page's toolbar looks like once it is a sheet ([data-m-sheetable].is-open) ---- */
[data-m-sheetable].is-open .filter-row-selects {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
[data-m-sheetable].is-open .filter-row-selects > * { width: 100%; min-width: 0; max-width: none; }
/* Sifarişlər' date chips stay a wrapping row. */
#co-filter-sheet .filter-row-selects { flex-direction: row; flex-wrap: wrap; gap: 8px; }
#co-filter-sheet .filter-row-selects > .filter-chip { width: auto; }
[data-m-sheetable].is-open .filter-chip { height: 40px; padding: 0 15px; font-size: 14.5px; }
[data-m-sheetable].is-open input[type="date"],
[data-m-sheetable].is-open select,
[data-m-sheetable].is-open input[type="search"],
[data-m-sheetable].is-open input[type="text"] { height: 46px; min-width: 0; }
[data-m-sheetable].is-open input[type="date"] { flex: 1; }

/* A list's sticky search line under the topbar: search, then Filtr. */
.phone-sticky-row {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 15;
  margin: -8px calc(-1 * var(--m-pad)) 8px;
  padding: 8px var(--m-pad);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.search-bar input { height: 44px; font-size: 16px; }

/* A selection bar (Seç → ticked rows) pinned above the tab bar. */
.m-select-bar-fixed {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(var(--tabbar-h) + 10px) !important;
  top: auto !important;
  inset-inline: 12px !important;
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 8px 8px 16px !important;
  border-radius: 16px;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: var(--shadow-pop);
}

/* ====== Page: Sifarişlər ====== */
.co-page-header { display: none; }
.co-search-row { flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.co-search-row .co-search { flex: 1 1 0; }
.co-date-filter-mobile, .co-status-toggles-mobile { display: none; }
/* Status: Hamısı / Açıq / Təsdiqləndi with counts, the width of the screen, under the search. */
.co-status-toggles-desktop { order: 3; flex: 1 0 100%; display: flex; }
.co-status-toggles-desktop > button { flex: 1; justify-content: center; height: 38px; padding: 0 8px; font-size: 14px; }
.co-status-toggles-desktop svg { display: none; }
/* The list: edge to edge, rows as a phone list. */
.co-list { margin: 0 calc(-1 * var(--m-pad)); border-radius: 0; border-left: 0; border-right: 0; }
.co-list-head { position: static; min-height: 40px; padding: 6px var(--m-pad); }
#co-filter-sheet .co-date-range { display: flex; width: 100%; margin-top: 6px; }
.co-check-all, .co-row-check { display: none; }
.co-row { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 12px; min-height: 68px; padding: 10px var(--m-pad); }
.co-status-icon { width: 38px; height: 38px; border-radius: 12px; }
.co-row-customer { font-size: 15.5px; }
.co-row-phone { display: none; }
.co-row-sub { font-size: 13px; }
.co-row-sub { flex-wrap: nowrap; }
#co-list.co-show-address .co-row-fact { max-width: 100%; }
#co-list.co-show-address .co-row-products { display: none; }
.co-row-total { font-size: 15.5px; }
/* Seç: the tick column and the bulk bar (Etiket, Təsdiqlə) above the tab bar. */
body.m-select .co-row { grid-template-columns: 26px 38px minmax(0, 1fr) auto; }
body.m-select .co-row-check { display: flex; }
body.m-select .co-row-check input,
body.m-select .co-check-all input { width: 22px; height: 22px; }
body.m-select .co-check-all { display: flex; width: 26px; }
.co-bulk-bar:not([hidden]) {
  position: fixed;
  inset: auto 12px calc(var(--tabbar-h) + 10px);
  z-index: 26;
  min-height: 58px;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-pop);
}
.co-bulk-bar .filter-selected-count { color: inherit; opacity: 0.8; }
.co-bulk-bar .filter-selected-count b { color: inherit; }
.co-bulk-bar .btn { min-height: 42px; }
.co-bulk-bar .btn-secondary { background: color-mix(in srgb, var(--on-primary) 14%, transparent); border-color: transparent; color: var(--on-primary); }
.co-bulk-bar .btn-primary { background: var(--brand); color: var(--ink-on-brand); }
/* The order's sheet (also Ana səhifə's): the name and × on top, copy / edit / Sil under the name
   (Sil stays — the old phone hid it); both invoice buttons keep their full names. */
#co-view-modal-backdrop .modal-header { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
#co-view-modal-backdrop .co-view-header-left { flex: 1 1 calc(100% - 56px); min-width: 0; }
#co-view-modal-backdrop .modal-header-actions { display: contents; }
#co-view-modal-backdrop #co-view-modal-close { order: 1; }
#co-view-modal-backdrop .modal-header-icon { order: 2; width: 44px; height: 38px; border-radius: 12px; }
#co-view-modal-backdrop .modal-header-icon svg { width: 18px; height: 18px; }
#co-view-modal-backdrop #co-view-copy-btn { margin-left: auto; }
#co-view-modal-backdrop .modal-header-icon + .modal-header-icon { margin-left: 6px; }
#co-view-modal-title { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.co-view-btn-text-full { display: inline; }
.co-view-btn-text-short { display: none; }

/* ====== Page: Stock ====== */
/* Search and Filtr (Kateqoriya, Stok, Sırala in one sheet) stay on screen while the list scrolls. */
.products-sticky-filters { margin: 0 calc(-1 * var(--m-pad)); padding: 8px var(--m-pad) 8px; }
.pos-toolbar { display: flex; gap: 8px; margin: 0; }
.pos-toolbar .products-search-inline { flex: 1; min-width: 0; margin: 0; }
#stock-filter-sheet .products-cat-pick { width: 100%; max-width: none; min-height: 46px; font-size: 16px; }
#stock-filter-sheet .stock-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#stock-filter-sheet .stock-chip { display: inline-flex; flex-direction: row; align-items: center; width: auto; height: 42px; padding: 0 14px 0 11px; gap: 8px; border-radius: 999px; }
#stock-filter-sheet .stock-chip svg { width: 18px; height: 18px; flex: none; }
#stock-filter-sheet .stock-chip::after { content: attr(data-name); font-size: 14.5px; font-weight: 600; }
#stock-filter-sheet .stock-chip-tip { display: none; }
#stock-filter-sheet .m-sheet-label:first-of-type { margin-top: 4px; }
/* The list: edge to edge, one row per product. */
#product-list { margin: 0 calc(-1 * var(--m-pad)); border-radius: 0; border-left: 0; border-right: 0; }
.product-row { grid-template-columns: 52px minmax(0, 1fr) auto; min-height: 76px; padding: 11px var(--m-pad); column-gap: 13px; }
.product-row .card-row-thumb { width: 52px; height: 52px; border-radius: 12px; }
.product-row .card-row-title { font-size: 15px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.product-row .card-row-stat-value { font-size: 13.5px; }
.pos-add { width: 44px; height: 44px; border-radius: 14px; }
.product-row .product-select { display: none; }
/* Seç: a tick before each photo; Səbətə at / Order on a bar above the tab bar (and the cart bar). */
body.m-select .product-row { grid-template-columns: 26px 52px minmax(0, 1fr) auto; grid-template-areas: "check thumb title add" "check thumb stats add"; }
body.m-select .product-row .product-select { display: block; grid-area: check; align-self: center; width: 22px; height: 22px; margin: 0; accent-color: var(--primary); }
body.m-select .product-list-head { display: contents !important; }
body.m-select .product-list-head > :not(.plh-selection) { display: none !important; }
.plh-selection:not([hidden]) {
  position: fixed;
  inset: auto 12px calc(var(--tabbar-h) + 10px);
  z-index: 36;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-pop);
}
body:has(.pos-cart-bar:not([hidden])) .plh-selection:not([hidden]) { bottom: calc(var(--tabbar-h) + 82px); }
.plh-selection .plh-selection-count { margin-right: auto; color: inherit; opacity: 0.85; }
.plh-selection .plh-selection-count b { color: inherit; }
.plh-selection .btn { min-height: 42px; }
.plh-selection .btn-primary { background: var(--brand); color: var(--ink-on-brand); border-color: transparent; }
.plh-selection .btn-secondary { background: color-mix(in srgb, var(--on-primary) 14%, transparent); color: var(--on-primary); border-color: transparent; }
.plh-selection .plh-selection-clear { color: inherit; width: 40px; height: 40px; font-size: 22px; }

/* Breadcrumbs: the topbar's ‹ does their job on a phone. */
.breadcrumb { display: none; }

/* ====== List + record pages (.crm): Müştərilər, Təchizatçılar, Kateqoriyalar, Alıcılar ====== */
/* The list, or the record as a page of its own (‹ back in the topbar); "+" is the topbar's. */
.cust-add-phone, .cat-add-phone { display: none !important; }
.crm-rows { margin: 0 calc(-1 * var(--m-pad)); border-radius: 0; border-left: 0; border-right: 0; }
.crm-row { min-height: var(--m-row); }
.crm-row-link { padding-block: 10px; }
.crm-row .card-row-title { font-size: 15.5px; }
.crm-profile, .crm-form {
  margin: 0 calc(-1 * var(--m-pad));
  padding: 6px var(--m-pad) 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.crm-profile-head { gap: 12px; }
.crm-avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.crm-profile-name h2 { font-size: 21px; letter-spacing: -0.02em; }
.crm-profile-actions .btn-icon { width: 40px; height: 40px; border-radius: 12px; }
/* Zəng et / WhatsApp: two big buttons, the reason to open a customer on a phone. */
.crm-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.crm-contact .btn { min-height: 48px; justify-content: center; font-size: 15px; border-radius: 14px; }
.crm-kpis { gap: 8px; }
.crm-kpi { padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.crm-kpi b { font-size: 16px; }
.crm-feed { margin: 0 calc(-1 * var(--m-pad)); border-radius: 0; }
.crm-feed-row { min-height: var(--m-row); padding-inline: var(--m-pad); }
.crm-form .form-actions, .crm-form .crm-form-actions { position: sticky; bottom: calc(var(--tabbar-h) + 8px); }
/* Müraciətlər: the status segments on one line, search below; the row's state pill keeps its width. */
.inq-toolbar { gap: 8px; }
.inq-seg { width: 100%; }
.inq-seg .seg-btn { flex: 1; justify-content: center; }
.inq-search { flex-basis: 100%; }
.inq-search input { height: 42px; }
.inq-item-qty { width: 60px; height: 42px; }
.inq-actions .btn, .inq-actions form { flex: 1; }
.inq-actions form .btn { width: 100%; }
/* Kommersiya təklifləri: a line's numbers under its name, the status as four even segments. */
.qt-item-nums { padding-left: 0; justify-content: space-between; }
.qt-item-nums input { height: 42px; }
.qt-item-qty { width: 54px; }
.qt-item-price { width: 74px; }
.qt-item-disc { width: 54px; }
.qt-status .seg-btn { padding-inline: 4px; font-size: 13px; }
.sc-photos { grid-template-columns: repeat(4, 1fr); }
/* The talon link: its text and ✕ on the first line, the warranty pill under them. */
.sc-link-text { flex-basis: calc(100% - 52px); }
.sc-link .btn-icon { order: 1; }
.sc-link .ch-state { order: 2; }

/* ---- The phone filter bar (m_filter_bar()): the period, then Filtr ---- */
.m-filterbar { display: flex; gap: 8px; margin: 0 0 12px; }
.m-filterbar > .m-filter-btn:only-child { flex: 1; }
.m-filterbar .m-filter-when { flex: 1; justify-content: flex-start; min-width: 0; }
.m-filterbar .m-filter-when .m-filter-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inside a filter sheet: one control per line, full width; a multi-select's list opens in place. */
[data-m-sheetable].is-open .sh-dates { display: flex !important; gap: 8px; align-items: center; color: var(--faint); }
[data-m-sheetable].is-open .sh-toolbar-sep { display: none; }
[data-m-sheetable].is-open .filter-select,
[data-m-sheetable].is-open .ms-filter-trigger,
[data-m-sheetable].is-open .picker-trigger { height: 46px !important; font-size: 16px !important; text-align: left; justify-content: space-between; }
[data-m-sheetable].is-open .ms-filter { position: static; width: 100%; }
[data-m-sheetable].is-open .ms-filter-trigger { width: 100%; display: flex; align-items: center; }
[data-m-sheetable].is-open .ms-filter-panel { position: static; max-height: none; margin-top: 6px; box-shadow: none; }
[data-m-sheetable].is-open .ms-filter-panel label { min-height: 44px; display: flex; align-items: center; gap: 10px; font-size: 16px; }
[data-m-sheetable].is-open #history-reset,
[data-m-sheetable].is-open #sr-reset { color: var(--err); }
[data-m-sheetable].is-open .sr-sort { display: flex; gap: 8px; }
[data-m-sheetable].is-open .sr-sort select { flex: 1; }
[data-m-sheetable].is-open .sr-sort-dir { width: 46px; flex: none; }

/* Card tables (.sh-table) in Seç: a tick at each card's left. */
body.m-select .sh-table tbody tr { position: relative; padding-left: 50px; }
body.m-select .sh-table .sh-c-check { display: block !important; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
body.m-select .sh-table .sh-c-check input { width: 22px; height: 22px; accent-color: var(--primary); }
.sh-selection:not([hidden]) {
  position: fixed;
  inset: auto 12px calc(var(--tabbar-h) + 10px);
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  margin: 0;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-pop);
}
.sh-selection > span:first-child { margin-right: auto; }
.sh-selection .plh-selection-clear,
.co-bulk-bar .plh-selection-clear { color: inherit; background: none; border: 0; width: 40px; height: 40px; font-size: 24px; }

/* ====== Page: Satış tarixçəsi, Mənfəət hesabatı, Gəliş tarixçəsi ====== */
.sh-kpis { margin-bottom: 10px; }
.sh-table-wrap { margin: 0 calc(-1 * var(--m-pad)); }
.sh-table tbody tr { border-radius: 0; margin: 0; }

/* ====== Page: Qaytarmalar ====== */
.sr-list { margin: 0 calc(-1 * var(--m-pad)); border-radius: 0; border-left: 0; border-right: 0; }
.sr-row { min-height: 68px; padding-inline: var(--m-pad); }

/* ====== Page: Müqavilələr ====== */
.page-header-actions:has(#contract-new) { display: none; }
.page-header:has(#contract-new) { display: none; }

/* ====== Page: Keçmiş ====== */
/* The period / type column is a sheet (m_filter_bar); every option on view, the date range too. */
#hist-filter-sheet.is-open .side-block { margin: 0 0 14px; padding: 0; border: 0; background: none; box-shadow: none; }
#hist-filter-sheet.is-open .side-title { margin: 6px 0 8px; font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
#hist-filter-sheet.is-open .side-list { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; margin: 0; padding: 0; }
#hist-filter-sheet.is-open .side-item { flex: none; min-height: 40px; }
#hist-filter-sheet.is-open .hist-range { display: block !important; }
#hist-filter-sheet.is-open .hist-range-fields { display: flex; flex-direction: column; gap: 10px; }
#hist-filter-sheet.is-open .hist-range-fields > * { width: 100%; height: 46px; }
#hist-undo.is-open .hist-undo-text { display: block; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
#hist-undo.is-open .hist-undo-text b { display: none; }
#hist-undo.is-open .undo-bar { display: flex; flex-direction: column; gap: 10px; }
#hist-undo.is-open .undo-bar > * { width: 100%; min-height: 48px; }
.hist-feed { margin: 0 calc(-1 * var(--m-pad)); border-radius: 0; border-left: 0; border-right: 0; }

/* ====== Page: Məhsul bazası ====== */
/* Search + Filtr (Kateqoriya, Təchizatçı, Platform, Vəziyyəti, Sırala); Sütunlar / Kilid stay on a computer. */
#pd-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
#pd-filters .pd-search { flex: 1; min-width: 0; margin: 0; }
#pd-filters .pd-tools { display: none; }
#pd-filter-row.is-open .fin-pick,
#pd-filter-row.is-open select { width: 100% !important; height: 46px; font-size: 16px; margin-left: 0 !important; }
#pd-filter-row.is-open .ms-filter-trigger { width: 100% !important; }
#pd-filter-row.is-open #pd-filter-reset { color: var(--err); }
.pd-table-wrap, .pd-sheet { margin-inline: calc(-1 * var(--m-pad)); }
#pd-table tbody tr { border-radius: 0; cursor: pointer; padding-inline: var(--m-pad); }
/* Seç: a tick at each card's left, the bulk bar (Atribut → Dəyər → Tətbiq et, Sil) at the bottom. */
body.m-select #pd-table tbody tr { position: relative; padding-left: 50px; }
body.m-select #pd-table td:has(.pd-row-select) { display: block !important; position: absolute; left: 14px; top: 26px; }
body.m-select .pd-row-select { width: 22px; height: 22px; accent-color: var(--primary); }
#pd-bulk-bar { display: none !important; }
body.m-select #pd-bulk-bar.is-active {
  position: fixed;
  inset: auto 12px calc(var(--tabbar-h) + 10px);
  z-index: 26;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-pop);
}
#pd-bulk-bar .pd-bulk-count-text { flex: 1; color: inherit; }
#pd-bulk-bar #pd-bulk-status-form { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; width: 100%; margin: 0; }
#pd-bulk-bar #pd-bulk-status-form select { width: 100% !important; min-width: 0; height: 42px; margin: 0; }
#pd-bulk-bar #pd-bulk-apply-btn { height: 42px; background: var(--brand); color: var(--ink-on-brand); border: 0; }
#pd-bulk-bar #pd-bulk-delete-btn { width: 42px; height: 42px; background: var(--err); color: #fff; border-radius: 12px; }

/* ====== Hesabatlar: Anbar, Stoku azalmış, Best sellerlər ====== */
[data-m-sheetable].is-open .checkbox-filter { display: flex; justify-content: flex-start; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 16px; }
[data-m-sheetable].is-open .checkbox-filter input { width: 20px; height: 20px; accent-color: var(--primary); }
[data-m-sheetable].is-open #category-reset,
[data-m-sheetable].is-open #ls-reset { color: var(--err); }

/* ====== Maliyyə ====== */
/* The page's own "+" buttons are the topbar's on a phone. */
.page-header-actions:has(> a[href="finance_entries.php?new=1&type=loan_payment"]),
.page-header-actions:has(> a[href="finance_assets.php?action=create"]) { display: none; }
/* Əməliyyatlar: Mədaxil · Xərc · Fərq on top (like every list), the period + Filtr bar, the ledger. */
.fe-kpis { margin-bottom: 10px; }
.fe-mobile-total { display: none !important; }
#fe-filter-row.is-open .fin-pick,
#fe-filter-row.is-open #fe-range-preset { width: 100%; max-width: none; height: 46px; font-size: 16px; }
#fe-filter-row.is-open .fe-auto-toggle { display: flex !important; }
#fe-filter-row.is-open #fe-reset { width: 100%; height: 46px; justify-content: center; gap: 8px; color: var(--err); }
#fe-filter-row.is-open #fe-reset .fe-reset-text { display: inline; }
#fe-summary.is-open .fe-side-head { display: none; }
#fe-summary.is-open .fe-side-hint { display: none; }

/* ====== Ayarlar ====== */
/* The overview as a phone settings list: each section one card of rows (icon, name, state, ›). */
.set-overview-group .rp-grid {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--m-radius);
  background: var(--surface);
}
.set-overview-group .rp-card.set-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--m-row);
  margin: 0;
  padding: 9px 12px 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.set-overview-group .rp-card.set-card-link:last-child { border-bottom: 0; }
.set-overview-group .rp-card-icon,
.set-overview-group .ch-logo { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.set-overview-group .rp-card-body { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; text-align: left; }
.set-overview-group .rp-card-title { flex: 1; min-width: 0; text-align: left; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-overview-group .rp-card-text { display: none; }
.set-overview-group .set-status { flex-shrink: 0; margin: 0; }
.set-overview-group .rp-group-title { margin: 18px 4px 8px; }
/* A settings page: ‹ Ayarlar is the topbar's. */
.set-back { display: none !important; }

/* Order qaralaması: a line's numbers under its name, the tools beside the name; the head stacks. */
.od-head { flex-direction: column; }
.od-actions { width: 100%; flex-wrap: wrap; }
.od-actions .btn-secondary { flex: 1; justify-content: center; }
.od-actions .od-pdf-wrap { flex: 1; }
.od-actions .od-pdf-wrap .btn-secondary { width: 100%; }
.od-actions .btn-primary { flex: 1 1 100%; justify-content: center; min-height: 46px; }
.od-item-n { display: none; }
.od-item { flex-wrap: wrap; padding-left: 8px; }
.od-item-main { flex: 1 1 0; }
.od-item-nums { order: 3; flex: 1 1 100%; justify-content: space-between; }
.od-item-nums input { height: 42px; }
.od-item-qty { width: 60px; }
.od-item-price { width: 96px; }
.od-add { flex-wrap: wrap; }
.od-add select, .od-add .picker-trigger { flex: 1 1 100%; }
.od-add .btn { flex: 1; justify-content: center; }
.od-new-grid { flex-direction: column; align-items: stretch; }
/* A column: the 160px basis would be a height (gaps between the fields). */
.od-new-fields .field-row .field, .od-new-fields .od-new-field-sm { flex: 0 0 auto; }
.od-new-photo { width: 100%; height: 120px; }
.od-totals { justify-content: space-between; }
.od-convert-new { flex-wrap: wrap; }
.od-convert-sku, .od-convert-cat { flex: 1 1 45%; }

@media (max-width: 767px) {
  /* Sayt › Statistika: 2 KPIs a row, Ziyarətçi across; the two small cards stacked. */
  .sh-kpis.sst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-kpis.sst-kpis > :first-child { grid-column: 1 / -1; }
  .sst-grid { grid-template-columns: 1fr; gap: 0; }
  .sst-bars { height: 120px; gap: 2px; }
  .sst-table .bs-bar { display: none; }
}