/* Раздел «Заявки»: заявка на выкуп и доставку из Китая. Стиль карточек главного экрана. */

/* Четвёртая вкладка в шапке: три прежние + «Заявки», часы прежней ширины */
@media(min-width:901px){.topnav.has-orders{grid-template-columns:repeat(4,minmax(0,1fr)) 149px}}
.topnav.has-orders .navitem{gap:9px;padding:0 8px}

.po{display:flex;flex-direction:column;gap:10px;min-width:0;color:#092033}
.po-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;border-radius:22px;background:linear-gradient(110deg,#faf9f5ce,#f7f6f3d6)}
.po-title{display:flex;flex-direction:column;gap:2px;margin-right:auto}
.po-title h2{font-size:18px;line-height:23px;font-weight:500}
.po-sub{font-size:12px;color:#6b7d8d}
.po-rates{display:flex;gap:8px}
.po-rate{height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:18px;background:#e7ebee;font-size:12px;color:#344655;cursor:default}
.po-status{font-size:12px;color:#5a6a75;min-width:150px;text-align:right}
.po-status-bad{color:#c0141f}

.po-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.po-tile{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 16px;border-radius:20px;background:linear-gradient(130deg,#f9f8f5db,#f8f7f5c9)}
.po-tile-title{font-size:13px;color:#435464}
.po-tile strong{font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.5px;white-space:nowrap}
.po-tile-note{font-size:11px;line-height:14px;color:#7a8893;min-height:14px}
.po-tile-main{background:linear-gradient(135deg,#454a4c,#303639);color:#fff}
.po-tile-main .po-tile-title,.po-tile-main .po-tile-note{color:#d3dadf}
.po-tile.po-unknown strong{color:#a84900;font-size:16px}
.po-summary{font-size:12px;color:#5a6a75;padding:0 6px}
.po-warnings{margin:0;padding:10px 18px 10px 32px;border-radius:18px;background:#f9e6d5b0;color:#7a3a00;font-size:12px;line-height:18px;list-style:disc}

/* таблица позиций: своя прокрутка; слева закреплены №, фото, наименование; сверху — заголовок, снизу — итоги */
.tab-view>.po{flex:1 1 0;min-height:540px}
.po-table-wrap{flex:1 1 0;min-height:170px;overflow:auto;border-radius:20px;background:linear-gradient(110deg,#faf9f5ce,#f7f6f3d6)}
.po-table{table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12px}
.po-table th{position:sticky;top:0;z-index:3;padding:10px 8px;background:#e9d1d3;color:#5a1f26;font-weight:500;font-size:11px;line-height:14px;text-align:center;border-right:1px solid #f4f1ec;overflow:hidden}
.po-table td{padding:8px;vertical-align:top;border-bottom:1px solid #e6e5e1;border-right:1px solid #eeede9;overflow:hidden}
.po-table tbody tr:last-child td{border-bottom:0}
.po-fixed{position:sticky;z-index:2;background:#f6f5f1}
th.po-fixed{z-index:5;background:#e9d1d3}
.po-c-номер{left:0}
.po-c-фото.po-fixed{left:var(--po-left-фото)}
.po-c-название_ru.po-fixed{left:var(--po-left-название);box-shadow:3px 0 6px -4px #17382c40}
.po-table tfoot td{position:sticky;bottom:0;z-index:3;background:#ece9e2;border-top:1px solid #d5d3cc;border-bottom:0;padding:9px 8px;font-weight:500;color:#152d40;text-align:right;white-space:nowrap}
.po-table tfoot td.po-fixed{z-index:5;background:#ece9e2}
.po-table tfoot td.po-c-название_ru{text-align:left}
.po-c-номер{text-align:center;color:#6b7d8d;padding-top:16px!important;white-space:nowrap}
.po-c-действия{white-space:nowrap}
.po-calc{display:block;padding-top:8px;text-align:right;font-weight:500;color:#152d40;white-space:nowrap}
.po-c-сумма_сум .po-calc{font-size:13px}
.po-names,.po-variants{display:flex;flex-direction:column;gap:5px}
.po-variant{display:flex;gap:5px;align-items:center}
.po-variant-qty{width:64px!important;flex:none}
.po-handle{display:inline-block;width:12px;height:22px;margin-right:6px;vertical-align:middle;cursor:grab;background:radial-gradient(circle,#8a99a3 1.4px,transparent 1.8px) 0 0/6px 7px}
.po-handle:active{cursor:grabbing}
.po-row.po-drop-before td{box-shadow:inset 0 3px 0 #2f86e8}
.po-row.po-drop-after td{box-shadow:inset 0 -3px 0 #2f86e8}

.po-input{width:100%;height:32px;padding:0 10px;border:1px solid #dfe3e1;border-radius:10px;background:#fffffff0;font-size:12px;color:#092033;box-sizing:border-box}
.po-input.field-invalid{border-color:#c0141f;background:#fdecee}
.po-input:focus{outline:2px solid #2f86e8;outline-offset:-1px;border-color:transparent}
.po-input:disabled{background:#eef0ee;color:#5a6a75}
.po-num{text-align:right}
.po-select{padding-right:4px}
.po-photo{position:relative;width:48px;height:48px;border:1.5px dashed #b6c0c6;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#8a99a3;font-size:20px;cursor:pointer}
.po-photo:hover{border-color:#2f86e8;color:#2f86e8}
.po-photo-has{border:0}
.po-photo-img{width:48px;height:48px;object-fit:cover;border-radius:12px}
.po-photo-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:#303639;color:#fff;font-size:12px;line-height:18px;cursor:pointer}
.po-icon,.po-add-variant{height:28px;padding:0 10px;border:0;border-radius:14px;background:#e7ebee;color:#344655;font-size:12px;cursor:pointer;flex:none}
.po-icon:hover,.po-add-variant:hover{background:#d9dfe3}
.po-add-variant{align-self:flex-start;background:transparent;color:#2f6fb8;padding:0 4px}
.po-c-действия .po-icon{margin-right:4px}

.po-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.po-spacer{flex:1}
.po-actions .filter{height:40px;cursor:pointer;border:0}
.po-send:disabled{opacity:.55;cursor:default}
.po-send{margin-top:0;width:auto;padding:0 22px;border:0}

.po-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 30px;border-radius:22px;background:linear-gradient(110deg,#dfece2cc,#e8f0e6d6)}
.po-done h2{font-size:20px;line-height:26px;font-weight:500}
.po-done p{font-size:14px;line-height:21px;color:#3d5260}

/* ---- карточки позиций (вместо широкой таблицы): все поля на виду, без горизонтальной прокрутки ---- */
.po-list{flex:1 1 0;min-height:170px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.po-card{border-radius:20px;background:linear-gradient(110deg,#faf9f5ce,#f7f6f3d6);padding:10px 14px 14px;flex:none}
.po-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.po-num-badge{font-size:12px;font-weight:500;color:#5a1f26;background:#e9d1d3;border-radius:12px;padding:3px 10px}
.po-card-body{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.35fr);gap:14px;align-items:start}
.po-card-photo .po-photo,.po-card-photo .po-photo-img{width:64px;height:64px}
.po-card-main{display:flex;flex-direction:column;gap:9px;min-width:0}
.po-card-groups{display:flex;flex-direction:column;gap:9px;min-width:0}
.po-group{display:flex;flex-direction:column;gap:4px}
.po-group-title{font-size:11px;color:#7a8893;text-transform:uppercase;letter-spacing:.4px}
.po-group-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.po-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.po-label{font-size:11px;line-height:14px;color:#5a6a75}
.po-group-calc{padding:8px 10px;border-radius:14px;background:#eceae4}
.po-group-calc .po-calc{padding-top:0;text-align:left;font-size:14px}
.po-card .po-input{height:34px;font-size:13px}
.po-card .po-variant{display:grid;grid-template-columns:minmax(0,1fr) 70px 28px}
.po-card .po-variant-qty{width:100%!important}
.po-card.po-drop-before{box-shadow:inset 0 3px 0 #2f86e8}
.po-card.po-drop-after{box-shadow:inset 0 -3px 0 #2f86e8}
.po-actions-bar{position:sticky;bottom:0;padding:8px 10px;border-radius:18px;background:#eceae4f0;backdrop-filter:blur(6px)}
@media(max-width:1180px){.po-card-body{grid-template-columns:64px minmax(0,1fr)}.po-card-groups{grid-column:1/-1}}
@media(max-width:700px){.po-card-body{grid-template-columns:1fr}.po-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
#purchase-overlay{overflow:hidden}
#purchase-overlay .po{height:100%;min-height:0;overflow:hidden;container-type:inline-size}
#purchase-overlay .po-head,#purchase-overlay .po-tiles,#purchase-overlay .po-summary,#purchase-overlay .po-warnings,#purchase-overlay .po-actions-bar{flex:none}
#purchase-overlay .po-actions-bar{position:static}
#purchase-overlay .po-list{flex:1 1 auto;min-height:0}
#purchase-overlay .po-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@container(max-width:880px){#purchase-overlay .po-card-body{grid-template-columns:64px minmax(0,1fr)}#purchase-overlay .po-card-groups{grid-column:1/-1}}
@container(max-width:520px){#purchase-overlay .po-card-body{grid-template-columns:1fr}#purchase-overlay .po-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}