/* Заказы клиентов: список + карточка заказа. Токены из pos.css. */

body[data-page="orders"].pos-app {
    --ord-line: var(--pos-line, #e2e8f0);
    --ord-new: var(--pos-accent, #2563eb);
    --ord-accepted: #7c3aed;
    --ord-ordered: #ea580c;
    --ord-ready: #ca8a04;
    --ord-done: var(--pos-ok, #22c55e);
    --ord-cancel: var(--pos-danger, #dc2626);
}

body.pos-app.orders-page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

.orders-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    align-items: stretch;
    flex: 0 0 auto;
}

.orders-list-pane {
    background: var(--pos-surface, #fff);
    border: 1px solid var(--ord-line);
    border-radius: var(--pos-radius, 12px);
    box-shadow: var(--pos-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orders-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.orders-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.orders-filters__row input,
.orders-filters__row select {
    flex: 1 1 140px;
    min-width: 0;
}

.orders-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.orders-stat {
    flex: 1 1 90px;
    background: var(--pos-bg, #eef2f7);
    border-radius: var(--pos-radius, 12px);
    padding: 8px 10px;
}

.orders-stat__label {
    display: block;
    font-size: 11px;
    color: var(--pos-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.orders-stat__value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.orders-report {
    background: var(--pos-bg, #eef2f7);
    border-radius: var(--pos-radius, 12px);
    padding: 8px 12px;
}

.orders-report > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.orders-report .orders-money {
    margin-top: 10px;
}

.orders-report__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.orders-report__btns .is-active {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--pos-accent, #2563eb);
}

.orders-shipments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orders-reservation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--pos-muted, #64748b);
}

.orders-reservation__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
}

.orders-reservation__cell {
    background: var(--pos-bg, #eef2f7);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orders-reservation__cell.is-short {
    background: rgba(220, 38, 38, 0.1);
    color: var(--ord-cancel);
}

.orders-reservation__article {
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 700;
    color: var(--pos-ink, #152033);
}

.orders-reservation__cell.is-short .orders-reservation__article {
    color: var(--ord-cancel);
}

.orders-reservation__nums {
    font-variant-numeric: tabular-nums;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orders-item {
    background: var(--pos-surface, #fff);
    border: 1px solid var(--ord-line);
    border-left: 4px solid var(--ord-new);
    border-radius: var(--pos-radius, 12px);
    box-shadow: var(--pos-shadow, 0 1px 2px rgba(16, 24, 40, 0.06));
    display: flex;
    flex-direction: column;
}

.orders-item[data-status="accepted"] { border-left-color: var(--ord-accepted); }
.orders-item[data-status="ordered"] { border-left-color: var(--ord-ordered); }
.orders-item[data-status="ready"] { border-left-color: var(--ord-ready); }
.orders-item[data-status="completed"] { border-left-color: var(--ord-done); }
.orders-item[data-status="cancelled"] { border-left-color: var(--ord-cancel); opacity: 0.7; }

.orders-item.is-open {
    border-color: var(--pos-accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.orders-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: inherit;
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background var(--ios-spring, 120ms ease);
}

.orders-card:hover {
    background: var(--pos-bg, #eef2f7);
}

.orders-card__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.orders-card__number {
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 700;
    font-size: 15px;
}

.orders-card__sum {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.orders-card__chevron {
    color: var(--pos-muted, #64748b);
    transition: transform var(--ios-spring, 120ms ease);
}

.orders-item.is-open .orders-card__chevron {
    transform: rotate(180deg);
}

.orders-card__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--pos-muted, #64748b);
}

.orders-card__sub .orders-badges {
    gap: 4px;
}

.orders-item__detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    border-top: 1px solid var(--ord-line);
}

.orders-item__detail:empty {
    display: none;
}

.orders-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ord-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    background: var(--pos-bg, #eef2f7);
    color: var(--pos-muted, #64748b);
    white-space: nowrap;
}

.ord-badge--new { background: rgba(37, 99, 235, 0.12); color: var(--ord-new); }
.ord-badge--accepted { background: rgba(124, 58, 237, 0.12); color: var(--ord-accepted); }
.ord-badge--ordered { background: rgba(234, 88, 12, 0.12); color: var(--ord-ordered); }
.ord-badge--ready { background: rgba(202, 138, 4, 0.14); color: var(--ord-ready); }
.ord-badge--shipped,
.ord-badge--completed { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.ord-badge--cancelled { background: rgba(220, 38, 38, 0.12); color: var(--ord-cancel); }
.ord-badge--debt { background: rgba(220, 38, 38, 0.12); color: var(--ord-cancel); }
.ord-badge--overdue { background: rgba(220, 38, 38, 0.12); color: var(--ord-cancel); }
.ord-badge--match { background: rgba(202, 138, 4, 0.14); color: var(--ord-ready); }
.ord-badge--prepaid { background: rgba(37, 99, 235, 0.12); color: var(--ord-new); }
.ord-badge--delivery-not_sent { background: rgba(100, 116, 139, 0.12); color: var(--pos-muted, #64748b); }
.ord-badge--delivery-sent { background: rgba(37, 99, 235, 0.12); color: var(--ord-new); }
.ord-badge--delivery-delivered { background: rgba(34, 197, 94, 0.14); color: #15803d; }

.orders-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.orders-head__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.orders-head__number {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 22px;
    font-weight: 700;
}

.orders-head__meta {
    font-size: 13px;
    color: var(--pos-muted, #64748b);
}

.orders-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.orders-money {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.orders-money__cell {
    flex: 1 1 120px;
    background: var(--pos-bg, #eef2f7);
    border-radius: var(--pos-radius, 12px);
    padding: 10px 12px;
}

.orders-money__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pos-muted, #64748b);
}

.orders-money__value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.orders-money__value--profit { color: var(--pos-stock, #15803d); }
.orders-money__value--debt { color: var(--ord-cancel); }

.orders-note {
    font-size: 13px;
    color: var(--pos-muted, #64748b);
    border-left: 3px solid var(--ord-line);
    padding-left: 10px;
}

.orders-site-sync[data-state="error"] {
    border-left-color: var(--ord-cancel);
    color: var(--ord-cancel);
}

.orders-site-sync[data-state="pushed"] {
    border-left-color: var(--ord-done);
}

.orders-suppliers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orders-supplier {
    background: var(--pos-bg, #eef2f7);
    border-radius: var(--pos-radius, 12px);
    padding: 10px 12px;
}

.orders-supplier__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.orders-supplier__name {
    font-weight: 700;
}

.orders-supplier__text {
    margin: 6px 0 0;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--pos-ink, #152033);
}

.orders-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ord-line);
    border-radius: var(--pos-radius, 12px);
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.orders-table th,
.orders-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--ord-line);
    vertical-align: top;
}

.orders-table thead th {
    position: sticky;
    top: 0;
    background: var(--pos-surface, #fff);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pos-muted, #64748b);
    z-index: 1;
}

.orders-table tbody tr:last-child td {
    border-bottom: none;
}

.orders-table tbody tr.is-overdue td {
    background: rgba(220, 38, 38, 0.06);
}

.orders-table tbody tr.is-overdue .orders-table__article {
    color: var(--ord-cancel);
}

.orders-table__article {
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 700;
}

.orders-table__num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.orders-table__name {
    max-width: 260px;
}

.orders-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.orders-input {
    width: 100%;
    min-width: 70px;
    font: inherit;
    padding: 5px 7px;
    border: 1px solid var(--ord-line);
    border-radius: 8px;
    background: var(--pos-surface, #fff);
    color: var(--pos-ink, #152033);
}

.orders-input--empty {
    border-color: var(--ord-ready);
    background: rgba(202, 138, 4, 0.08);
}

.orders-input:focus-visible {
    outline: 2px solid var(--pos-accent, #2563eb);
    outline-offset: 1px;
}

.orders-events {
    font-size: 12px;
    color: var(--pos-muted, #64748b);
}

.orders-events ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.orders-sms__form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--pos-line, #d7dee8);
}

.orders-sms__form textarea {
    flex: 1;
    resize: vertical;
}

.orders-sms__text {
    margin-top: 2px;
    color: var(--pos-ink, #152033);
}

.orders-sms__error {
    color: var(--pos-danger, #dc2626);
}

.orders-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.orders-field > span {
    color: var(--pos-muted, #64748b);
}

.orders-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.orders-check input {
    margin: 0;
}

.orders-field-hint {
    margin: 0;
    font-size: 12px;
    color: var(--pos-muted, #64748b);
}

.orders-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: min(340px, 78vw);
    margin: 10px 0;
}

.orders-dialog__body .pos-toast {
    margin: 0;
}

.orders-search-results {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--ord-line);
    border-radius: var(--pos-radius, 12px);
}

.orders-search-results:empty {
    display: none;
}

.orders-search-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ord-line);
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
}

.orders-search-row:last-child {
    border-bottom: none;
}

.orders-search-row.is-active {
    background: rgba(37, 99, 235, 0.1);
}

.orders-search-row__article {
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 700;
}

.orders-search-row__name {
    font-size: 12px;
    color: var(--pos-muted, #64748b);
}

.orders-search-divider {
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pos-muted, #64748b);
    background: var(--pos-bg, #eef2f7);
    border-bottom: 1px solid var(--ord-line);
}

.orders-quick-product {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--pos-line, #d7dee8);
    border-radius: var(--pos-radius, 12px);
    background: var(--pos-bg, #eef2f7);
}

.orders-quick-product__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 520px) {
    .orders-quick-product__fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .orders-card,
    .orders-card__chevron {
        transition: none;
    }
}

.orders-delivery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--pos-bg, #eef2f7);
    border: 1px solid var(--ord-line);
    border-radius: var(--pos-radius, 12px);
}

.orders-delivery__head,
.orders-delivery__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.orders-delivery__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.orders-delivery .orders-field {
    flex: 1 1 220px;
}

.orders-fulfillment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    background: var(--pos-bg, #eef2f7);
    border: 1px solid var(--ord-line);
    border-radius: var(--pos-radius, 12px);
}

.orders-fulfillment__type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.orders-fulfillment__type > span {
    color: var(--pos-muted, #64748b);
    white-space: nowrap;
}

.orders-fulfillment__type select {
    width: auto;
    min-width: 130px;
    margin-top: 0;
}

.orders-fulfillment__source {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 12px;
    color: var(--pos-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .orders-page .pos-topbar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 7px 10px;
    }

    .orders-page .pos-topbar__brand,
    .orders-page .pos-topbar__actions {
        flex: 1 1 100%;
        min-width: 0;
    }

    .orders-page .pos-topbar__actions {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .orders-page .pos-topbar__actions::-webkit-scrollbar,
    #statusTabs::-webkit-scrollbar {
        display: none;
    }

    .orders-page .pos-topbar__actions .pos-btn {
        flex: 0 0 auto;
        padding: 7px 10px;
        font-size: 13px;
    }

    .orders-page .pos-topbar__actions .pos-icon-btn {
        width: 34px;
        height: 34px;
    }

    .orders-main {
        gap: 8px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    }

    .orders-list-pane {
        min-width: 0;
        padding: 10px;
        border-radius: 10px;
        box-shadow: none;
        gap: 8px;
    }

    .orders-filters,
    .orders-list {
        gap: 7px;
    }

    #statusTabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    #statusTabs .pos-tab {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .orders-filters__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .orders-filters__row input[type="search"] {
        grid-column: 1 / -1;
    }

    .orders-filters__row input,
    .orders-filters__row select {
        width: 100%;
        min-height: 38px;
        padding: 7px 9px;
        font-size: 13px;
    }

    .orders-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .orders-stat {
        min-width: 0;
        padding: 6px 8px;
        border-radius: 9px;
    }

    .orders-stat__label {
        font-size: 9px;
    }

    .orders-stat__value {
        font-size: 16px;
    }

    .orders-report {
        padding: 7px 9px;
    }

    .orders-card {
        gap: 4px;
        padding: 8px 9px;
        border-radius: 9px;
    }

    .orders-card__sub {
        gap: 4px 7px;
        font-size: 11px;
    }

    .orders-badges {
        gap: 4px;
    }

    .ord-badge {
        padding: 2px 7px;
        font-size: 10px;
    }

    .orders-head {
        gap: 8px;
    }

    .orders-head__title {
        min-width: 0;
    }

    .orders-head__number {
        font-size: 19px;
    }

    .orders-head__actions {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .orders-head__actions::-webkit-scrollbar {
        display: none;
    }

    .orders-head__actions .pos-btn {
        flex: 0 0 auto;
        min-height: 36px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .orders-money {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .orders-money__cell {
        min-width: 0;
        padding: 7px 9px;
        border-radius: 9px;
    }

    .orders-money__label {
        font-size: 9px;
    }

    .orders-money__value {
        font-size: 17px;
    }

    .orders-note {
        margin: 0;
        padding-left: 8px;
        font-size: 12px;
    }

    .orders-fulfillment,
    .orders-delivery {
        gap: 8px;
        padding: 9px;
        border-radius: 9px;
    }

    .orders-delivery__controls {
        align-items: stretch;
    }

    .orders-delivery .orders-field {
        flex-basis: 100%;
    }

    .orders-delivery__actions {
        width: 100%;
    }

    .orders-delivery__actions .pos-btn,
    .orders-fulfillment > .pos-btn {
        min-height: 36px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .orders-reservation__grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }

    .orders-table-wrap {
        max-width: calc(100vw - 38px);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .orders-table {
        min-width: 1060px;
    }

    .orders-dialog {
        width: calc(100vw - 20px);
        max-width: 440px;
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
    }
}

.orders-dialog--wide {
    width: min(760px, calc(100vw - 24px));
    max-width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}

.orders-bulk-input {
    width: 100%;
    min-height: 150px;
    padding: 8px 10px;
    border: 1px solid var(--ord-line);
    border-radius: var(--pos-radius, 12px);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.orders-bulk-input:focus-visible {
    outline: 2px solid var(--pos-accent, #2563eb);
    outline-offset: 1px;
}

.orders-bulk-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.orders-bulk-preview:empty {
    display: none;
}

.orders-bulk-preview .orders-table-wrap {
    max-height: 260px;
    overflow-y: auto;
}

.orders-bulk-preview .orders-table {
    font-size: 12px;
}

.orders-bulk-row--missing td {
    background: rgba(220, 38, 38, 0.06);
}

.orders-bulk-row--invalid td {
    background: rgba(202, 138, 4, 0.12);
}

.orders-bulk-row--site td {
    background: rgba(37, 99, 235, 0.06);
}

.orders-bulk-status {
    white-space: nowrap;
    font-size: 11px;
}

.orders-bulk-status--ok {
    color: var(--pos-stock, #15803d);
}

.orders-bulk-status--site_only {
    color: var(--pos-accent, #2563eb);
}

.orders-bulk-status--not_found {
    color: var(--pos-danger, #dc2626);
}

.orders-bulk-status--invalid {
    color: var(--ord-ready, #ca8a04);
}

@media (max-width: 560px) {
    .orders-bulk-options {
        grid-template-columns: 1fr;
    }
}