.trade-page { background: #eef3f7; }
.trade-page.locked .topbar, .trade-page.locked .trade-shell { visibility: hidden; }
.trade-loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; color: #174a72; background: #eef3f7; font-weight: 800; }
.trade-page:not(.locked) .trade-loading { display: none; }
.trade-shell { max-width: 1640px; }
.trade-view { display: grid; gap: 18px; }
.trade-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.trade-customer-grid { display: grid; grid-template-columns: 1.35fr 1.3fr 1fr .8fr; gap: 12px; align-items: end; }
.customer-mode-toggle { display: grid; grid-template-columns: auto 46px auto; align-items: center; gap: 5px 8px; min-height: 44px; padding: 6px 10px; background: #f7f9fa; border: 1px solid #dbe3e8; border-radius: 9px; cursor: pointer; }
.customer-mode-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.customer-mode-switch { position: relative; width: 46px; height: 24px; background: var(--green); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(13,31,45,.12); transition: background .16s ease; }
.customer-mode-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(13,31,45,.28); transition: transform .16s ease; }
.customer-mode-toggle input:checked ~ .customer-mode-switch { background: var(--blue); }
.customer-mode-toggle input:checked ~ .customer-mode-switch i { transform: translateX(22px); }
.customer-mode-toggle input:focus-visible ~ .customer-mode-switch { outline: 3px solid rgba(17,103,169,.18); outline-offset: 2px; }
.mode-option { color: #83909a; font-size: 10px; font-weight: 700; white-space: nowrap; transition: color .16s ease; }
.customer-mode-toggle input:not(:checked) ~ .mode-retail, .customer-mode-toggle input:checked ~ .mode-company { color: var(--ink); font-weight: 900; }
.customer-mode-toggle small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; text-align: center; }
.trade-lines { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.sale-line { display: grid; grid-template-columns: 120px minmax(240px,2fr) 105px 125px 42px; gap: 10px; align-items: end; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sale-line:last-child { border-bottom: 0; }
.line-product-field { display: grid; grid-template-columns: 1fr; gap: 7px; }
.line-product-field > span { grid-column: 1 / -1; }
.line-product-search, .line-product { width: 100%; min-width: 0; min-height: 42px; background: #fff; }
.line-product { display: none; }
.line-search-wrap { position: relative; display: block; min-width: 0; }
.line-search-wrap > input { width: 100%; }
.line-suggestions { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 20; display: grid; max-height: 250px; padding: 4px; overflow-y: auto; border: 1px solid #b9d0e1; border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(17, 55, 83, .18); }
.line-suggestions[hidden] { display: none; }
.line-suggestion { display: grid; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; color: #183d58; background: #fff; text-align: left; cursor: pointer; }
.line-suggestion:hover, .line-suggestion:focus { color: #fff; background: #1976b9; outline: none; }
.line-suggestion small { color: #668095; font-size: 10px; }
.line-suggestion:hover small, .line-suggestion:focus small { color: #e9f6ff; }
.line-suggestion.is-active { color: #fff; background: #1976b9; outline: none; }
.line-suggestion.is-active small { color: #e9f6ff; }
.line-suggestion-empty { padding: 10px; color: var(--muted); font-size: 11px; }
.line-stock { grid-column: 2 / 5; min-height: 13px; color: var(--muted); font-size: 10px; font-weight: 700; }
.line-remove { min-height: 42px; }
.trade-lines-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.trade-lines-footer strong { color: var(--blue-dark); font-size: 20px; }
.trade-details-grid { display: grid; grid-template-columns: minmax(180px,.6fr) 2fr; gap: 12px; margin-top: 14px; }
.trade-note textarea { min-height: 72px; }
.trade-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trade-toolbar input, .trade-toolbar select, #movements-search { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.trade-toolbar .formatted-date-control { width: 175px; }
.waybill-date-field { min-width: 165px; }
.incoming-heading { flex-direction: column; align-items: stretch; gap: 18px; }
.incoming-heading small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.6; }
.incoming-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 190px auto; align-items: end; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.incoming-toolbar .field { min-width: 0; }
.incoming-toolbar input { width: 100%; min-height: 44px; }
.incoming-toolbar .formatted-date-control { width: 100%; }
.incoming-toolbar .date-picker-button { min-height: 44px; }
.incoming-toolbar > button { min-height: 44px; white-space: nowrap; }
@media (max-width: 720px) { .incoming-toolbar { grid-template-columns: minmax(0, 1fr); padding: 12px; } }
.trade-table { width: 100%; min-width: 1050px; border-collapse: collapse; }
.trade-table th { padding: 10px; color: #607180; background: #f2f6f9; border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; white-space: nowrap; }
.trade-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 11px; }
.trade-table tbody tr:hover { background: #f8fbfd; }
.trade-table small { display: block; margin-top: 3px; color: var(--muted); }
.trade-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.trade-actions button { min-height: 31px; padding: 0 8px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.trade-actions .sticker { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; padding: 0; border-radius: 7px; color: var(--blue); background: var(--blue-soft); border: 1px solid #c5dff2; }
.trade-actions .doc { color: #30379f; background: #eef0ff; border: 1px solid #c7cbf2; }
.trade-actions .rs { color: #76568a; background: #eee8f3; border: 1px solid #d9cbe4; }
.trade-actions .rs.rs-sent { color: #fff; background: #6f2aa8; border-color: #592087; box-shadow: 0 0 0 2px rgba(111,42,168,.12); }
.trade-actions .rs:disabled { color: #7f7690; background: #eeeaf1; border-color: #ded6e3; cursor: not-allowed; }
.trade-actions .rs.rs-sent:disabled { color: #fff; background: #6f2aa8; border-color: #592087; opacity: 1; cursor: default; }
.trade-actions .cancel { color: #a92c25; background: #fff0ef; border: 1px solid #efc3c0; }
.trade-actions .delete { color: #fff; background: #b42318; border: 1px solid #8f1b13; }
.trade-actions .delete:disabled { color: #927b79; background: #eee9e8; border-color: #ddd2d0; cursor: not-allowed; }
.status-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #eaf6ef; color: #08734f; font-size: 9px; font-weight: 850; }
.status-pill.cancelled { background: #fff0ef; color: #a92c25; }
.status-pill.draft { background: #fff5dd; color: #8c6100; }
.cancelled-row { opacity: .66; }
.cancelled-row td.amount-cell { text-decoration: line-through; }
.product-form { display: grid; grid-template-columns: 2fr repeat(5,minmax(120px,1fr)); gap: 12px; align-items: end; }
.product-actions { grid-column: 1 / -1; }
.low-stock td { background: #fff9e9; }
.products-filters { display: grid; grid-template-columns: minmax(240px,1.5fr) repeat(3,minmax(170px,1fr)); gap: 12px; align-items: end; margin-bottom: 16px; }
#products-view > .panel { min-width: 0; }
.products-filters .field { min-width: 0; }
.products-filters .field input, .products-filters select { width: 100%; min-width: 0; }
.products-filter-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
#products-result-count { color: var(--muted); }
@media (max-width: 1120px) { .products-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .products-filters { grid-template-columns: 1fr; } }
.stock-negative { color: var(--red); font-weight: 850; }
.stock-positive { color: var(--green); font-weight: 850; }
.receive-dialog { width: min(1050px,calc(100vw - 24px)); }
#receive-items { display: grid; gap: 10px; max-height: 58vh; overflow: auto; }
.receive-item { display: grid; grid-template-columns: minmax(200px,1.4fr) 100px 110px minmax(230px,1.5fr) auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.receive-item > strong small { display: block; color: var(--muted); font-size: 10px; }
.receive-details { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.receive-details input { min-width: 0; width: 100%; }
@media (max-width: 720px) { .receive-details { grid-column: 1 / -1; grid-template-columns: 1fr; } }
.received-item > span { display: grid; gap: 3px; align-self: center; font-weight: 750; }
.received-item > span small { color: var(--muted); font-size: 10px; font-weight: 700; }
.received-product-link { min-width: 210px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.waybill-route-fields, .waybill-transport-fields { display: grid; gap: 10px; }
.waybill-route-fields[hidden], .waybill-transport-fields[hidden] { display: none; }
.profit-positive { color: var(--green); font-weight: 850; }
.profit-negative { color: var(--red); font-weight: 850; }
@media (max-width: 1120px) { .trade-customer-grid, .product-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .product-name { grid-column: 1 / -1; } .sale-line { grid-template-columns: 110px 1fr 95px 110px 40px; } }
@media (max-width: 720px) { .trade-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .trade-customer-grid, .trade-details-grid, .product-form, .two-fields { grid-template-columns: 1fr; } .customer-mode-toggle { justify-content: center; } .sale-line { grid-template-columns: 1fr 1fr; } .line-product-field, .line-name-field, .line-stock { grid-column: 1 / -1; } .line-product-field { grid-template-columns: 1fr; } .line-product-field > span { grid-column: 1; } .line-remove { grid-column: 2; } .receive-item { grid-template-columns: 1fr 1fr; } .receive-item > strong, .receive-item .receive-product { grid-column: 1 / -1; } }
@media print { .topbar, #sale-form, .trade-toolbar, .trade-actions, #products-view, #incoming-view, #movements-view { display:none!important; } .trade-view[hidden] { display:none!important; } body { background:#fff; } .panel { box-shadow:none; border:0; } }