#ff-task-hub{--e-bg:light-dark(#f3f6f5,#141c1c);--e-paper:light-dark(#fff,#202b2b);--e-text:light-dark(#152d2e,#edf5f3);--e-sub:light-dark(#536969,#abc0bb);--e-line:light-dark(#d5e2de,#405350);--e-teal:light-dark(#007d79,#80ded0);--e-on:light-dark(#fff,#10342f);--e-soft:light-dark(#e5f3ef,#253f38);--e-head:light-dark(#e5eef3,#243641);--e-error:light-dark(#a52d23,#ffb4a8);font:14px/1.45 system-ui,sans-serif;color:var(--e-text);padding:12px 16px 24px;overflow-anchor:none} #ff-task-hub *{box-sizing:border-box}#ff-task-hub button,#ff-task-hub input,#ff-task-hub select{font:inherit;color:inherit}#ff-task-hub button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid var(--e-line);border-radius:10px;background:var(--e-paper);padding:8px 12px;font-weight:500}#ff-task-hub button:disabled{opacity:.45}#ff-task-hub button:active:not(:disabled){background:var(--e-soft)}#ff-task-hub button.primary,#ff-task-hub button[aria-pressed=true]{background:var(--e-teal);color:var(--e-on);border-color:var(--e-teal)}#ff-task-hub input,#ff-task-hub select{border:1px solid var(--e-line);border-radius:8px;background:var(--e-paper);padding:8px;min-height:40px;max-width:100%}#ff-task-hub .ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}#ff-task-hub .demo,#ff-task-hub .shell,#ff-task-hub .caption{max-width:1280px;margin-inline:auto}#ff-task-hub .demo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}#ff-task-hub .muted,#ff-task-hub .caption{font-size:13px;color:var(--e-sub)}#ff-task-hub .caption{text-align:center;margin-top:10px}#ff-task-hub .shell{background:var(--e-bg);border:1px solid var(--e-line);border-radius:14px;overflow:hidden}#ff-task-hub header{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--e-head);padding:12px 16px}#ff-task-hub h2{font-size:18px;font-weight:500;margin:0}#ff-task-hub h3{font-size:17px;font-weight:500;margin:0}#ff-task-hub .counts{display:flex;gap:16px;align-items:center;margin-top:4px;font-size:13px}#ff-task-hub .counts span{display:inline-flex;gap:5px;align-items:center}#ff-task-hub .badge{padding:2px 7px;border:1px solid var(--e-line);border-radius:6px;background:var(--e-paper);font-size:12px}#ff-task-hub header button{background:transparent;border:0}#ff-task-hub main{padding:16px}#ff-task-hub .tools,#ff-task-hub .footer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}#ff-task-hub .footer{margin:14px 0 0}#ff-task-hub .push{margin-left:auto}#ff-task-hub .table-wrap{overflow-x:auto;background:var(--e-paper);border:1px solid var(--e-line);border-radius:12px}#ff-task-hub table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}#ff-task-hub th{background:var(--e-soft);color:var(--e-sub);font-weight:500}#ff-task-hub th,#ff-task-hub td{padding:4px 8px;text-align:center;border-bottom:1px solid var(--e-line)}#ff-task-hub td:first-child,#ff-task-hub th:first-child{text-align:left}#ff-task-hub tbody tr:last-child td{border-bottom:0}#ff-task-hub th button{border:0;background:transparent;min-height:40px;padding:5px;white-space:nowrap}#ff-task-hub .product{display:flex;align-items:center;gap:8px;min-width:138px}#ff-task-hub .photo{width:44px;min-width:44px;height:48px;padding:0;background:var(--e-soft);color:var(--e-teal)}#ff-task-hub .category{max-width:125px;color:var(--e-sub);font-size:13px}#ff-task-hub .qty{width:64px;min-height:34px;height:34px;font-size:16px;padding:4px;text-align:center}#ff-task-hub .warehouse-plan-cell{text-align:left}#ff-task-hub .warehouse-quantity{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}#ff-task-hub .warehouse-quantity .qty{flex:0 0 64px}#ff-task-hub .warehouse-quantity .fact{font-size:11px;font-weight:400;color:var(--e-sub);white-space:nowrap}#ff-task-hub .icon-btn{width:40px;min-height:40px;padding:0}#ff-task-hub .bad{color:var(--e-error)}#ff-task-hub .qty[aria-invalid=true]{border-color:var(--e-error)}#ff-task-hub .summary{margin:10px 0 0;min-height:20px}#ff-task-hub dialog{width:calc(100% - 32px);max-width:680px;background:var(--e-paper);color:var(--e-text);border:1px solid var(--e-line);border-radius:16px;padding:20px;inset-block-start:24px;inset-block-end:auto;margin-block:0}#ff-task-hub dialog::backdrop{background:rgb(0 0 0 / .3)}#ff-task-hub .modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}#ff-task-hub .modal-head button{width:44px;padding:0}#ff-task-hub .modal-row{display:flex;gap:10px;align-items:center;min-height:52px;border-bottom:1px solid var(--e-line);padding:7px 0}#ff-task-hub .modal-row input[type=text]{flex:1;min-width:0}#ff-task-hub .modal-row input[type=checkbox]{width:20px;height:20px;min-height:20px;flex-shrink:0}#ff-task-hub .modal-row label{display:flex;align-items:center;gap:10px;flex:1;min-width:0}#ff-task-hub .modal-row label span{overflow-wrap:anywhere}#ff-task-hub .modal-row .row-name{flex:1}#ff-task-hub .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}#ff-task-hub .full{width:100%}#ff-task-hub #edit-photo{max-width:210px}#ff-task-hub .photo-large{height:140px;display:grid;place-items:center;background:var(--e-soft);border-radius:12px;color:var(--e-sub)}#ff-task-hub .no-wrap{white-space:nowrap}#ff-task-hub .change-list{padding-left:20px}#ff-task-hub .change-list li{margin-block:6px}#ff-task-hub .catalog-tabs{display:flex;gap:8px;margin-bottom:12px} @media(max-width:767px){#ff-task-hub{padding:8px}#ff-task-hub header{align-items:flex-start;padding:10px}#ff-task-hub header h2{font-size:16px}#ff-task-hub header .account-text{display:none}#ff-task-hub main{padding:10px}#ff-task-hub .tools .push{margin-left:0}#ff-task-hub .footer .push{width:100%;margin-left:0}#ff-task-hub dialog{padding:14px}#ff-task-hub .demo button{padding:8px}.category{min-width:95px}} #ff-task-hub.packing-open{padding-bottom:0}#ff-task-hub.packing-open>.caption{display:none}#ff-task-workspace>#ff-packing-preview{padding-top:0} #ff-task-hub [hidden],#ff-packing-preview[hidden]{display:none!important} #ff-task-hub .task-list{border:1px solid var(--e-line);border-radius:12px;background:var(--e-paper);overflow:hidden} #ff-task-hub .task-row{display:grid;grid-template-columns:minmax(200px,1.5fr) minmax(130px,1fr) minmax(140px,1fr) auto;gap:20px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--e-line)} #ff-task-hub .task-row:last-child{border-bottom:0}#ff-task-hub strong{font-weight:500}#ff-task-hub .task-name{min-width:0;overflow-wrap:anywhere}#ff-task-hub .task-stage,#ff-task-hub .task-buttons{display:flex;gap:6px;align-items:center}#ff-task-hub .task-progress{font-variant-numeric:tabular-nums}#ff-task-hub progress{display:block;width:100%;height:5px;border:0;appearance:none;margin-top:7px;border-radius:5px;overflow:hidden;background:var(--e-line)}#ff-task-hub progress::-webkit-progress-bar{background:var(--e-line)}#ff-task-hub progress::-webkit-progress-value{background:var(--e-teal)}#ff-task-hub progress::-moz-progress-bar{background:var(--e-teal)}#ff-task-hub .danger{color:var(--e-error)}#ff-task-hub .empty{padding:16px;color:var(--e-sub)}#ff-task-hub .delete-check{display:flex;align-items:center;gap:12px}#ff-task-hub .delete-check input{width:20px;min-height:20px}#ff-packing-preview #ff-demo-controls{display:none!important} @media(max-width:767px){#ff-task-hub .task-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px}#ff-task-hub .task-progress{grid-column:1;grid-row:2}#ff-task-hub .task-stage{grid-column:2;grid-row:1;justify-content:flex-end;flex-wrap:wrap;max-width:150px}#ff-task-hub .task-buttons{grid-column:2;grid-row:2;justify-content:flex-end}#ff-task-hub .task-row .counts{gap:12px}#ff-task-hub .task-row .icon-btn{width:44px;min-height:44px}} #ff-packing-preview .ff-quantity-controls{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px} #ff-packing-preview .ff-quantity-controls input{flex:1;min-width:0;width:0;margin:0} #ff-packing-preview .ff-pack-all{flex:0 0 48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--ff-teal);color:var(--ff-on)} #ff-packing-preview .ff-ship-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--ff-line)}#ff-packing-preview .ff-ship-row label{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;margin:0}#ff-packing-preview .ff-ship-row input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:0;padding:0}#ff-packing-preview .ff-ship-row>.ff-meta{grid-column:1/-1;padding-left:32px}#ff-packing-preview .ff-ship-row>span:not(.ff-meta){align-self:center;white-space:nowrap} #ff-packing-preview .ff-label-symbol{display:inline-flex;align-items:center;justify-content:center;color:var(--ff-teal)} #ff-task-hub .im-import {overflow-wrap:anywhere;} #ff-task-hub .im-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0;} #ff-task-hub .im-fields label {display:grid;gap:5px;min-width:0;} #ff-task-hub .im-import select,#ff-task-hub .im-import input:not([type=checkbox]) {max-width:100%;width:100%;font:inherit;min-height:42px;background:var(--e-paper);color:var(--e-text);border:1px solid var(--e-line);border-radius:8px;} #ff-task-hub .im-import details {margin:14px 0;} #ff-task-hub .im-import summary {min-height:44px;align-content:center;} #ff-task-hub .im-check {display:flex;align-items:center;gap:10px;min-height:44px;} #ff-task-hub .im-check input {flex:0 0 auto;} #ff-task-hub .im-cols {max-height:240px;overflow:auto;} #ff-task-hub .im-table {max-height:340px;overflow:auto;margin:12px 0;} #ff-task-hub .im-table table {min-width:0;width:100%;table-layout:fixed;} #ff-task-hub .im-table th,#ff-task-hub .im-table td {padding:8px 5px;white-space:normal;overflow-wrap:anywhere;} #ff-task-hub .im-import button {margin:4px 0;} @media(max-width:767px){#ff-task-hub .im-fields{grid-template-columns:1fr;}} #ff-task-hub .journal-filters {display:flex;align-items:end;gap:8px;flex-wrap:wrap} #ff-task-hub .journal-filters label {display:grid;gap:6px;flex:1;min-width:120px} #ff-task-hub .journal-entry {padding:12px 0;border-bottom:1px solid var(--e-line);overflow-wrap:anywhere} #ff-task-hub .journal-line {display:flex;align-items:center;justify-content:space-between;gap:8px} #ff-task-hub .journal-items {min-width:0;width:100%;table-layout:fixed} #ff-task-hub .journal-items td,#ff-task-hub .journal-items th {white-space:normal;overflow-wrap:anywhere} #ff-packing-preview .ff-driver-fields {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0} #ff-packing-preview .ff-driver-fields label {display:grid;min-width:0;gap:4px} #ff-packing-preview .ff-driver-fields input {min-height:44px;font-size:16px;margin:0;padding:8px} @media(max-width:767px){#ff-packing-preview .ff-driver-fields {grid-template-columns:1fr}} #ff-task-hub .modal-head{position:sticky;top:-20px;background:var(--e-paper);z-index:3;padding-block:8px} #ff-task-hub .warehouse-archived input {text-decoration:line-through;opacity:.6} #ff-task-hub .create-tz-items p {margin:8px 0;overflow-wrap:anywhere} #ff-task-hub .create-tz-total {margin:0 0 16px} #ff-task-hub #edit-dialog:has(.create-tz-summary){max-width:440px} #ff-task-workspace .account-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}#ff-task-workspace .account-fields label{display:grid;gap:5px;min-width:0}#ff-task-workspace .account-fields input,#ff-task-workspace .account-fields select{width:100%;min-width:0;box-sizing:border-box}#ff-task-workspace .account-password{grid-column:1/-1}#ff-task-workspace .account-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,.7fr);gap:5px;padding:10px 0;border-bottom:1px solid light-dark(#d9e5e4,#384c4d);overflow-wrap:anywhere}#ff-task-workspace .account-entry .muted{grid-column:1/-1}#ff-task-workspace #account-session-note{margin:6px 0 12px} @media(max-width:400px){#ff-task-workspace .account-fields{grid-template-columns:1fr}} #ff-packing-preview { --ff-bg:light-dark(#f3f6f5,#141c1c); --ff-paper:light-dark(#fff,#202b2b); --ff-text:light-dark(#152d2e,#edf5f3); --ff-sub:light-dark(#536969,#abc0bb); --ff-line:light-dark(#d5e2de,#405350); --ff-teal:light-dark(#007d79,#80ded0); --ff-on:light-dark(#fff,#10342f); --ff-soft:light-dark(#e5f3ef,#253f38); --ff-error:light-dark(#a52d23,#ffb4a8); color:var(--ff-text); padding:18px 8px 28px; font:16px/1.45 system-ui,sans-serif; } #ff-packing-preview * { box-sizing:border-box; } #ff-packing-preview { box-sizing:border-box; overflow-anchor:none; } #ff-packing-preview dialog { inset-block-start:24px; inset-block-end:auto; margin-block:0; } #ff-packing-preview button,#ff-packing-preview input { font:inherit; } #ff-packing-preview button { color:inherit; } #ff-packing-preview .ff-role { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 12px; } #ff-packing-preview button { border:1px solid var(--ff-line); background:var(--ff-paper); border-radius:12px; padding:11px 14px; min-height:46px; font-weight:500; } #ff-packing-preview button[aria-pressed="true"],#ff-packing-preview .ff-primary { background:var(--ff-teal); color:var(--ff-on); border-color:var(--ff-teal); } #ff-packing-preview button:disabled { opacity:.5; } #ff-packing-preview .ff-phone { max-width:414px; margin:auto; background:var(--ff-bg); border:1px solid var(--ff-line); border-radius:26px; overflow:hidden; } #ff-packing-preview header { padding:18px; background:var(--ff-paper); border-bottom:1px solid var(--ff-line); } #ff-packing-preview h2 { font-size:22px; line-height:1.25; font-weight:500; margin:4px 0; } #ff-packing-preview h3 { font-size:18px; line-height:1.35; font-weight:500; margin:0; } #ff-packing-preview p { margin:6px 0; } #ff-packing-preview small,#ff-packing-preview .ff-muted { color:var(--ff-sub); font-size:14px; } #ff-packing-preview main { padding:16px; min-height:0; } #ff-packing-preview .ff-list { display:grid; gap:12px; } #ff-packing-preview .ff-tile { width:100%; text-align:left; background:var(--ff-paper); padding:16px; border-radius:16px; border:1px solid var(--ff-line); } #ff-packing-preview .ff-row { display:flex; align-items:center; gap:12px; } #ff-packing-preview .ff-row > :not(.ff-photo) { min-width:0; overflow-wrap:anywhere; } #ff-packing-preview .ff-photo { width:62px; height:68px; flex-shrink:0; background:var(--ff-soft); border-radius:12px; display:grid; place-content:center; text-align:center; color:var(--ff-sub); font-size:12px; padding:5px; } #ff-packing-preview .ff-photo.large { width:76px; height:82px; } #ff-packing-preview .ff-photo span { font-size:26px; color:var(--ff-teal); } #ff-packing-preview .ff-amount { display:block; font-size:23px; font-weight:500; margin:4px 0; font-variant-numeric:tabular-nums; } #ff-packing-preview .ff-back { border:0; padding:6px 0; background:transparent; margin-bottom:10px; } #ff-packing-preview .ff-space { margin-top:16px; } #ff-packing-preview .ff-full { width:100%; } #ff-packing-preview .ff-compact { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } #ff-packing-preview .ff-error { color:var(--ff-error); } #ff-packing-preview .ff-note { padding:12px 16px; background:var(--ff-soft); border-bottom:1px solid var(--ff-line); } #ff-packing-preview .ff-note > span { display:block; } #ff-packing-preview .ff-note button { margin-top:8px; } #ff-packing-preview input { display:block; width:100%; min-height:58px; background:var(--ff-paper); color:var(--ff-text); border:1px solid var(--ff-line); border-radius:12px; padding:10px 14px; font-size:24px; margin-top:8px; } #ff-packing-preview label { display:block; } #ff-packing-preview .ff-item { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--ff-line); padding:10px 0; } #ff-packing-preview .ff-nav { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; } #ff-packing-preview .ff-nav button { font-size:14px; padding:8px 10px; } #ff-packing-preview .ff-pill { color:var(--ff-teal); font-size:14px; } #ff-packing-preview .ff-caption { max-width:414px; margin:10px auto 0; text-align:center; color:var(--ff-sub); font-size:13px; } #ff-packing-preview .ff-flow { display:grid; gap:8px; margin:16px 0; } #ff-packing-preview .ff-flow div { padding:12px; background:var(--ff-paper); border-radius:12px; border:1px solid var(--ff-line); } #ff-packing-preview [hidden] { display:none !important; } @media(max-width:360px) { #ff-packing-preview { padding:8px 0 20px; } #ff-packing-preview main,#ff-packing-preview header { padding:12px; } } #ff-packing-preview select,#ff-packing-preview textarea { font:inherit; color:var(--ff-text); background:var(--ff-paper); border:1px solid var(--ff-line); border-radius:10px; padding:10px; width:100%; min-height:46px; margin:6px 0; } #ff-packing-preview #ff-demo-controls:empty { display:none; } #ff-packing-preview #ff-account-bar { display:flex; align-items:center; justify-content:flex-end; padding:0 10px; background:var(--ff-paper); border-bottom:1px solid var(--ff-line); } #ff-packing-preview #ff-account-bar button { display:flex; align-items:center; gap:6px; border:0; padding:8px 0; min-height:44px; font-size:14px; } #ff-packing-preview #ff-chief-modes { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px 10px; } #ff-packing-preview #ff-chief-modes button { min-height:44px; padding:8px; font-size:14px; } #ff-packing-preview #ff-account-modal { color:var(--ff-text); background:var(--ff-paper); border:1px solid var(--ff-line); border-radius:18px; padding:0; width:min(380px,calc(100% - 24px)); max-height:88dvh; overflow:auto; } #ff-packing-preview #ff-account-modal::backdrop { background:light-dark(#17333088,#000a); } #ff-packing-preview #ff-account-content { padding:14px; } #ff-packing-preview #ff-account-content input { font-size:16px; min-height:44px; margin:4px 0 12px; } #ff-packing-preview #ff-account-content label { font-size:14px; } #ff-packing-preview #ff-account-content p { overflow-wrap:anywhere; } #ff-packing-preview #ff-eyebrow { display:none; } #ff-packing-preview .ff-phone.ff-logged-out main { min-height:0; } #ff-packing-preview .ff-phone.ff-logged-out header { display:none; } #ff-packing-preview .ff-phone.ff-owner { max-width:580px; } #ff-packing-preview .ff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; } #ff-packing-preview .ff-export-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; } #ff-packing-preview .ff-export-actions button { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 6px; font-size:14px; min-width:0; } #ff-packing-preview .ff-export-destination { padding:10px 0; border-bottom:1px solid var(--ff-line); } #ff-packing-preview .ff-file-input { min-height:44px; font-size:14px; padding:8px; } #ff-packing-preview .ff-file-row { padding:10px 0; border-bottom:1px solid var(--ff-line); overflow-wrap:anywhere; } #ff-packing-preview .ff-file-row a { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--ff-teal); } #ff-packing-preview .ff-link-table { table-layout:fixed; font-size:13px; } #ff-packing-preview .ff-link-table th { background:var(--ff-soft); text-align:center; } #ff-packing-preview .ff-link-table th:nth-child(1) { width:14%; } #ff-packing-preview .ff-link-table th:nth-child(2) { width:30%; } #ff-packing-preview .ff-link-table th:nth-child(3) { width:40%; } #ff-packing-preview .ff-link-table th:nth-child(4) { width:16%; } #ff-packing-preview .ff-link-table td:first-child { text-align:center; } #ff-packing-preview .ff-link-table td:last-child { padding:0; text-align:center; } #ff-packing-preview .ff-link-table td:last-child button { width:100%; min-width:0; } #ff-packing-preview .ff-link-table th { padding:0; } #ff-packing-preview .ff-link-table th button { display:flex; align-items:center; justify-content:center; gap:2px; width:100%; min-width:0; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; } #ff-packing-preview .ff-link-table th button[aria-pressed=true] { color:var(--ff-teal); } #ff-packing-preview .ff-meta { display:block; color:var(--ff-sub); font-size:13px; margin:6px 0; overflow-wrap:anywhere; } #ff-packing-preview .ff-history { padding:10px 0; border-bottom:1px solid var(--ff-line); } #ff-packing-preview .ff-danger { color:var(--ff-error); } #ff-packing-preview details { margin-top:12px; } #ff-packing-preview summary { min-height:44px; padding:10px 0; } #ff-packing-preview .ff-table { border-collapse:collapse; width:100%; font-size:14px; } #ff-packing-preview .ff-table td,#ff-packing-preview .ff-table th { text-align:left; padding:10px 4px; border-bottom:1px solid var(--ff-line); overflow-wrap:anywhere; font-weight:400; } #ff-packing-preview .ff-table th { font-weight:500; white-space:nowrap; } #ff-packing-preview .ff-light { background:var(--ff-soft); padding:12px; border-radius:12px; margin:12px 0; } #ff-packing-preview .ff-inline-label { font-size:14px; } #ff-packing-preview a.ff-download { display:block; margin-top:10px; padding:12px; border-radius:12px; background:var(--ff-teal); color:var(--ff-on); text-align:center; text-decoration:none; } #ff-packing-preview #ff-owner-modal { color:var(--ff-text); background:var(--ff-paper); border:1px solid var(--ff-line); border-radius:20px; padding:0; width:min(720px,calc(100% - 24px)); max-height:84dvh; overflow:auto; } #ff-packing-preview #ff-owner-modal::backdrop { background:light-dark(#17333088,#000a); } #ff-packing-preview .ff-modal-head { position:sticky; top:0; z-index:1; background:var(--ff-paper); border-bottom:1px solid var(--ff-line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; } #ff-packing-preview .ff-modal-head button { font-size:24px; min-width:46px; padding:4px; flex-shrink:0; } #ff-packing-preview #ff-modal-content { padding:16px; } #ff-packing-preview #ff-modal-content > .ff-tile { border:0; padding:0; margin:0; } #ff-packing-preview #ff-search { min-height:46px; font-size:16px; margin:6px 0 12px; } #ff-packing-preview .ff-sort-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; } #ff-packing-preview .ff-sort-row label { flex:1; font-size:14px; } #ff-packing-preview #ff-sort { width:126px; margin:0; } #ff-packing-preview .ff-owner main { padding:10px; } #ff-packing-preview .ff-owner header { padding:4px 8px; display:flex; align-items:center; gap:8px; } #ff-packing-preview .ff-owner header #ff-account-bar { padding:0; margin-left:auto; border:0; flex-shrink:0; } #ff-packing-preview .ff-owner header #ff-account-bar button { width:44px; height:44px; padding:0; justify-content:center; } #ff-packing-preview .ff-owner #ff-eyebrow { display:none; } #ff-packing-preview .ff-owner h2 { font-size:15px; margin:0; white-space:nowrap; } #ff-packing-preview .ff-owner #ff-subtitle { display:flex; align-items:center; gap:10px; margin:0; color:var(--ff-text); font-size:14px; } #ff-packing-preview .ff-header-count { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; font-variant-numeric:tabular-nums; } #ff-packing-preview .ff-header-count .ff-icon { width:16px; height:16px; } #ff-packing-preview .ff-owner .ff-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin:0 0 10px; } #ff-packing-preview .ff-owner .ff-nav button { padding:7px 3px; border-radius:8px; min-width:44px; display:flex; align-items:center; justify-content:center; } #ff-packing-preview .ff-owner .ff-nav .ff-icon { width:22px; height:22px; } #ff-packing-preview .ff-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; font-style:normal; vertical-align:middle; } #ff-packing-preview button.ff-icon-button { width:44px; min-width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; flex-shrink:0; } #ff-packing-preview .ff-static-heading { height:46px; display:flex; align-items:center; justify-content:center; color:var(--ff-sub); } #ff-packing-preview .ff-toolbar { display:flex; gap:4px; align-items:center; margin-bottom:8px; } #ff-packing-preview #ff-owner-search { min-width:0; width:100%; min-height:44px; margin:0; padding:9px; font-size:16px; } #ff-packing-preview .ff-filter-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:8px; } #ff-packing-preview .ff-filter-panel label { font-size:13px; min-width:0; } #ff-packing-preview .ff-filter-panel select { font-size:16px; margin:2px 0; } #ff-packing-preview .ff-select-wrap { min-width:0; width:100%; margin:4px 0; } #ff-packing-preview button.ff-select-trigger { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; min-height:46px; padding:10px; font-size:16px; font-weight:400; text-align:left; } #ff-packing-preview .ff-select-trigger span:first-child { min-width:0; overflow-wrap:anywhere; } #ff-packing-preview .ff-select-trigger[aria-expanded="true"] { border-color:var(--ff-teal); } #ff-packing-preview .ff-select-popover { position:fixed; inset:auto; margin:0; padding:4px; box-sizing:border-box; border:1px solid var(--ff-line); border-radius:10px; background:var(--ff-paper); color:var(--ff-text); overflow:auto; } #ff-packing-preview .ff-select-popover button { display:block; width:100%; min-height:44px; padding:10px; border:0; border-radius:6px; text-align:left; font-size:16px; font-weight:400; overflow-wrap:anywhere; } #ff-packing-preview .ff-data { background:var(--ff-paper); border:1px solid var(--ff-line); border-radius:10px; overflow:hidden; } #ff-packing-preview .ff-data-row { display:grid; align-items:center; gap:2px; padding:4px; border-bottom:1px solid var(--ff-line); font-size:14px; } #ff-packing-preview .ff-data-row:last-child { border-bottom:0; } #ff-packing-preview .ff-data-row > * { min-width:0; } #ff-packing-preview .ff-article-row { grid-template-columns:minmax(124px,1.8fr) repeat(4,minmax(26px,1fr)) 44px; } #ff-packing-preview .ff-warehouse-row { grid-template-columns:minmax(88px,1.7fr) repeat(3,minmax(28px,1fr)) repeat(2,minmax(32px,1fr)) 44px; } #ff-packing-preview .ff-box-row { grid-template-columns:minmax(88px,1fr) repeat(2,minmax(40px,1fr)) 44px; } #ff-packing-preview .ff-box-state { display:inline-flex; align-items:center; flex-shrink:0; } #ff-packing-preview .ff-supply-row { grid-template-columns:minmax(100px,1.8fr) repeat(2,minmax(40px,1fr)) 44px; } #ff-packing-preview .ff-supply-row.ff-data-head > * { height:44px; display:flex; align-items:center; justify-content:center; color:var(--ff-sub); } #ff-packing-preview .ff-stock-row { grid-template-columns:minmax(124px,1.8fr) repeat(3,minmax(44px,1fr)); } #ff-packing-preview .ff-stock-row:not(.ff-data-head) { min-height:53px; } #ff-packing-preview .ff-stack { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; } #ff-packing-preview .ff-export-summary { padding:10px; margin-bottom:10px; } #ff-packing-preview .ff-export-summary h3 { font-size:16px; } #ff-packing-preview .ff-export-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; } #ff-packing-preview .ff-export-heading > div { display:flex; gap:4px; flex-shrink:0; } #ff-packing-preview .ff-export-summary .ff-meta { margin:4px 0 0; } #ff-packing-preview .ff-stock-sync { margin:0 0 8px; color:var(--ff-sub); font-size:13px; } #ff-packing-preview .ff-data-head { padding:0 4px; background:var(--ff-soft); } #ff-packing-preview .ff-data-head button.ff-icon-button { min-width:0; width:100%; } #ff-packing-preview .ff-entity { white-space:nowrap; } #ff-packing-preview .ff-inline-count { display:flex; justify-content:center; align-items:center; gap:2px; font-variant-numeric:tabular-nums; } #ff-packing-preview .ff-inline-count .ff-icon { width:16px; height:16px; } #ff-packing-preview .ff-box-number { font-size:17px; font-weight:500; } #ff-packing-preview .ff-data-head button { border:0; background:transparent; position:relative; color:var(--ff-sub); } #ff-packing-preview .ff-data-head button[aria-pressed=true] { color:var(--ff-teal); } #ff-packing-preview .ff-sort-mark { position:absolute; right:0; bottom:0; font-size:11px; } #ff-packing-preview .ff-num { text-align:center; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } #ff-packing-preview .ff-entity { display:flex; align-items:center; gap:5px; overflow-wrap:anywhere; } #ff-packing-preview button.ff-photo { width:80px; height:88px; min-width:80px; padding:6px; border:1px solid var(--ff-line); background:var(--ff-soft); color:var(--ff-teal); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; } #ff-packing-preview button.ff-photo .ff-icon { width:30px; height:30px; font-size:26px; } #ff-packing-preview button.ff-photo .ff-photo-hint { font-size:11px; font-weight:400; color:var(--ff-sub); } #ff-packing-preview button.ff-mini-photo { width:48px; min-width:48px; height:56px; min-height:56px; border-radius:8px; padding:3px; } #ff-packing-preview button.ff-mini-photo .ff-icon { width:24px; height:24px; } #ff-packing-preview .ff-product-choice { padding:12px; } #ff-packing-preview .ff-product-choice > button[data-action=product] { flex:1; min-width:0; padding:0; text-align:left; border:0; background:transparent; } #ff-packing-preview button.ff-photo { touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } #ff-packing-preview #ff-photo-modal { position:fixed; inset:auto; margin:0; color:var(--ff-text); background:var(--ff-paper); border:1px solid var(--ff-line); border-radius:12px; padding:0; width:180px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; } #ff-packing-preview #ff-photo-modal::backdrop { background:transparent; pointer-events:none; } #ff-packing-preview #ff-photo-modal[data-held="true"] { pointer-events:none; } #ff-packing-preview #ff-photo-modal .ff-modal-head { padding:4px 8px; gap:4px; } #ff-packing-preview #ff-photo-modal h3 { font-size:14px; } #ff-packing-preview #ff-photo-content { padding:8px; } #ff-packing-preview .ff-photo-enlarged { width:100%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--ff-soft); border-radius:8px; color:var(--ff-sub); text-align:center; padding:10px; font-size:12px; } #ff-packing-preview .ff-photo-enlarged .ff-icon { width:40px; height:40px; font-size:36px; } #ff-packing-preview .ff-entity strong { font-weight:500; } #ff-packing-preview .ff-entity small { display:block; font-size:12px; } #ff-packing-preview .ff-state { font-size:12px; color:var(--ff-teal); overflow-wrap:anywhere; } #ff-packing-preview .ff-mobile-meta { display:none; } #ff-packing-preview .ff-people { font-size:12px; overflow-wrap:anywhere; } #ff-packing-preview .ff-load-trigger { height:1px; } #ff-packing-preview .ff-key-row { display:flex; align-items:center; gap:12px; margin:10px 0; } #ff-packing-preview .ff-modal-table { table-layout:fixed; } #ff-packing-preview .ff-modal-table th { white-space:normal; } #ff-packing-preview .ff-plan-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:8px; } #ff-packing-preview .ff-plan-filters label { font-size:13px; min-width:0; } #ff-packing-preview .ff-plan-filters select { min-width:0; font-size:16px; margin:3px 0; padding:8px 4px; } #ff-packing-preview .ff-plan-table { table-layout:fixed; } #ff-packing-preview .ff-contents-table { table-layout:fixed; font-size:13px; } #ff-packing-preview .ff-contents-table th { background:var(--ff-soft); height:44px; text-align:center; } #ff-packing-preview .ff-contents-table th:nth-child(1) { width:12%; } #ff-packing-preview .ff-contents-table th:nth-child(2) { width:30%; } #ff-packing-preview .ff-contents-table th:nth-child(3) { width:28%; } #ff-packing-preview .ff-contents-table th:nth-child(4) { width:14%; } #ff-packing-preview .ff-contents-table th:nth-child(5) { width:16%; } #ff-packing-preview .ff-contents-table td { height:44px; padding:8px 3px; font-variant-numeric:tabular-nums; } #ff-packing-preview .ff-contents-table td:nth-child(1),#ff-packing-preview .ff-contents-table td:nth-child(n+4) { text-align:center; } #ff-packing-preview .ff-plan-table th { background:var(--ff-soft); padding:0 2px; } #ff-packing-preview .ff-plan-table td { padding:9px 3px; font-variant-numeric:tabular-nums; } #ff-packing-preview .ff-plan-table th:nth-child(1) { width:28%; } #ff-packing-preview .ff-plan-table th:nth-child(2) { width:36%; } #ff-packing-preview .ff-plan-table th:nth-child(n+3) { width:18%; } #ff-packing-preview .ff-plan-table td:nth-child(n+3) { text-align:center; } #ff-packing-preview .ff-plan-table button { border:0; background:transparent; position:relative; } #ff-packing-preview .ff-plan-table button[aria-pressed=true] { color:var(--ff-teal); } #ff-packing-preview .ff-plan-table th:nth-child(n+3) { text-align:center; } @media(max-width:760px) { #ff-packing-preview .ff-owner .ff-nav { grid-template-columns:repeat(6,minmax(0,1fr)); } #ff-packing-preview .ff-owner main { padding:8px; } #ff-packing-preview .ff-data-row { padding:4px; gap:2px; font-size:13px; } #ff-packing-preview .ff-data-head { padding:0 4px; } #ff-packing-preview .ff-wide { display:none; } #ff-packing-preview .ff-mobile-meta { display:flex; grid-column:1/-1; flex-wrap:wrap; align-items:center; gap:4px 12px; color:var(--ff-sub); font-size:12px; } #ff-packing-preview .ff-mobile-meta span { display:inline-flex; align-items:center; gap:4px; overflow-wrap:anywhere; } #ff-packing-preview .ff-mobile-meta .ff-icon { width:14px; height:14px; } #ff-packing-preview .ff-mobile-meta.ff-mobile-people { display:grid; gap:2px; } #ff-packing-preview .ff-data-head button.ff-icon-button { min-width:0; width:100%; } #ff-packing-preview .ff-data-head button[aria-pressed=true] .ff-sort-mark { right:2px; } } @media(max-width:360px) { #ff-packing-preview .ff-warehouse-row .ff-entity { font-size:12px; } } #ff-packing-preview .ff-web-label { display:none; } @media(min-width:768px) { #ff-packing-preview { padding:12px 16px 24px; } #ff-packing-preview .ff-phone,#ff-packing-preview .ff-phone.ff-owner { max-width:1080px; border-radius:14px; overflow:visible; } #ff-packing-preview header,#ff-packing-preview .ff-owner header { display:flex; align-items:center; gap:16px; padding:10px 16px; border-radius:14px 14px 0 0; } #ff-packing-preview header h2,#ff-packing-preview .ff-owner header h2 { font-size:18px; margin:0; } #ff-packing-preview header #ff-subtitle { margin:0; font-size:14px; display:flex; gap:10px; } #ff-packing-preview header #ff-account-bar,#ff-packing-preview .ff-owner header #ff-account-bar { margin-left:auto; padding:0; border:0; } #ff-packing-preview header #ff-account-bar button,#ff-packing-preview .ff-owner header #ff-account-bar button { width:auto; min-height:44px; padding:8px 10px; gap:8px; } #ff-packing-preview #ff-chief-modes { display:flex; padding:0; gap:4px; } #ff-packing-preview #ff-chief-modes button { padding:8px 12px; } #ff-packing-preview main,#ff-packing-preview .ff-owner main { padding:16px; } #ff-packing-preview .ff-owner .ff-nav { display:flex; gap:8px; } #ff-packing-preview .ff-owner .ff-nav button { flex:1; gap:8px; padding:8px 10px; } #ff-packing-preview .ff-web-label { display:inline; } #ff-packing-preview .ff-toolbar { max-width:520px; margin-bottom:12px; } #ff-packing-preview .ff-data { max-width:860px; overflow:visible; } #ff-packing-preview .ff-data-head { position:sticky; top:0; z-index:1; border-radius:10px 10px 0 0; } #ff-packing-preview .ff-data-row { padding-inline:10px; } #ff-packing-preview .ff-article-row { grid-template-columns:minmax(190px,1.8fr) repeat(4,minmax(64px,1fr)) 48px; } #ff-packing-preview .ff-warehouse-row { grid-template-columns:minmax(170px,1.7fr) repeat(5,minmax(64px,1fr)) 48px; } #ff-packing-preview .ff-box-row { grid-template-columns:minmax(140px,1.5fr) repeat(2,minmax(80px,1fr)) 48px; max-width:700px; } #ff-packing-preview .ff-supply-row { grid-template-columns:minmax(170px,1.5fr) repeat(2,minmax(80px,1fr)) 48px; } #ff-packing-preview .ff-stock-row { grid-template-columns:minmax(190px,1.8fr) repeat(3,minmax(80px,1fr)); } #ff-packing-preview .ff-export-actions { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:860px; } #ff-packing-preview .ff-export-destination { max-width:860px; } #ff-packing-preview .ff-web-packing { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; align-items:start; } #ff-packing-preview .ff-web-products [data-action="product"][aria-pressed="true"] { color:var(--ff-text); background:transparent; } #ff-packing-preview .ff-web-products .ff-sort-row .ff-select-wrap { flex:0 0 126px; } #ff-packing-preview .ff-web-products .ff-sort-row label { white-space:nowrap; } #ff-packing-preview .ff-web-products { border-right:1px solid var(--ff-line); padding-right:16px; } #ff-packing-preview .ff-web-products .ff-product-choice { padding:8px; gap:8px; } #ff-packing-preview .ff-web-products .ff-product-choice h3 { font-size:15px; } #ff-packing-preview .ff-web-products .ff-product-choice p { font-size:13px; } #ff-packing-preview .ff-web-products .ff-product-choice .ff-meta { font-size:12px; } #ff-packing-preview .ff-web-products .ff-photo { width:56px; min-width:56px; height:64px; min-height:64px; } #ff-packing-preview .ff-web-products .ff-product-choice:has(button[aria-pressed="true"]) { border-color:var(--ff-teal); background:var(--ff-soft); } #ff-packing-preview .ff-work-pane { min-width:0; max-width:600px; } #ff-packing-preview .ff-work-pane > .ff-back[data-view="products"] { display:none; } #ff-packing-preview .ff-work-title { margin-bottom:12px; } #ff-packing-preview .ff-work-pane .ff-list { grid-template-columns:repeat(2,minmax(0,1fr)); } #ff-packing-preview .ff-work-pane .ff-list .ff-tile { padding:12px; } #ff-packing-preview .ff-work-pane .ff-full { max-width:100%; } #ff-packing-preview .ff-caption { max-width:none; } } #ff-packing-preview #ff-demo-controls { max-width:1080px; margin:0 auto 12px; } #ff-packing-preview .ff-demo-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } #ff-packing-preview .ff-demo-roles { display:flex; gap:6px; flex-wrap:wrap; } #ff-packing-preview .ff-demo-roles button { font-size:13px; padding:7px 10px; min-height:40px; } #ff-packing-preview .ff-task-board-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; } #ff-packing-preview .ff-task-board-title input { width:250px; max-width:100%; margin:0; font-size:14px; min-height:44px; } #ff-packing-preview .ff-task-list { border:1px solid var(--ff-line); border-radius:12px; overflow:hidden; background:var(--ff-paper); } #ff-packing-preview .ff-task-row { display:grid; grid-template-columns:minmax(170px,1.5fr) minmax(120px,1fr) minmax(120px,1fr) minmax(130px,1.2fr) 110px; gap:14px; align-items:center; padding:16px; border-bottom:1px solid var(--ff-line); font-size:14px; } #ff-packing-preview .ff-task-row:last-child { border-bottom:0; } #ff-packing-preview .ff-task-head { background:var(--ff-soft); color:var(--ff-sub); padding-block:10px; } #ff-packing-preview .ff-task-name strong { font-size:16px; font-weight:500; display:block; } #ff-packing-preview .ff-task-name small { display:block; margin-top:4px; } #ff-packing-preview .ff-task-progress { width:100%; height:5px; border-radius:8px; background:var(--ff-line); margin-top:8px; overflow:hidden; } #ff-packing-preview .ff-task-progress span { display:block; background:var(--ff-teal); height:100%; } #ff-packing-preview .ff-task-people { color:var(--ff-sub); font-size:13px; } #ff-packing-preview .ff-task-badge { border:1px solid var(--ff-line); padding:4px 8px; border-radius:7px; display:inline-block; font-size:12px; } #ff-packing-preview .ff-task-switch { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:12px; } #ff-packing-preview .ff-task-switch button { font-size:13px; padding:7px 10px; min-height:44px; } #ff-packing-preview .ff-assignee { display:flex; gap:12px; align-items:center; padding:12px 0; } #ff-packing-preview .ff-assignee input { width:20px; height:20px; min-height:20px; margin:0; flex-shrink:0; } #ff-packing-preview #ff-assignment-modal { max-width:440px; width:calc(100% - 32px); border:1px solid var(--ff-line); border-radius:16px; background:var(--ff-paper); color:var(--ff-text); padding:20px; } #ff-packing-preview #ff-assignment-modal::backdrop { background:rgb(0 0 0 / .3); } #ff-packing-preview .ff-owner .ff-task-switch > span { display:none; } @media(min-width:768px) { #ff-packing-preview .ff-task-switch > span { display:none; } } #ff-packing-preview .ff-task-inline-note { color:var(--ff-sub); font-size:13px; margin-bottom:12px; } #ff-packing-preview .ff-board header { flex-wrap:wrap; } #ff-packing-preview .ff-board #ff-subtitle { display:none; } @media(max-width:767px) { #ff-packing-preview .ff-task-head { display:none; } #ff-packing-preview .ff-task-row { grid-template-columns:minmax(0,1fr) 106px; gap:10px 12px; padding:12px; } #ff-packing-preview .ff-task-name { grid-column:1; grid-row:1; } #ff-packing-preview .ff-task-status { grid-column:2; grid-row:1; } #ff-packing-preview .ff-task-fact { grid-column:1; grid-row:2; } #ff-packing-preview .ff-task-people { grid-column:1; grid-row:3; } #ff-packing-preview .ff-task-open { grid-column:2; grid-row:2 / 4; } #ff-packing-preview .ff-task-board-title input { width:100%; } #ff-packing-preview .ff-demo-top { gap:6px; } #ff-packing-preview .ff-demo-roles { display:grid; grid-template-columns:1fr 1fr; width:100%; } #ff-packing-preview .ff-task-switch > span { width:100%; } } #ff-packing-preview #ff-account-bar { gap:4px; } #ff-packing-preview #ff-account-bar .ff-task-return { width:44px; min-width:44px; height:44px; padding:0; justify-content:center; } #ff-packing-preview .ff-task-switch { justify-content:flex-end; } @media(max-width:767px) { #ff-packing-preview .ff-phone header,#ff-packing-preview .ff-owner header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:6px; row-gap:0; padding:6px 8px; } #ff-packing-preview header #ff-title { grid-column:1; grid-row:1; white-space:normal; font-size:15px; } #ff-packing-preview header #ff-subtitle { grid-column:1; grid-row:2; font-size:13px; gap:10px; margin:0; } #ff-packing-preview header #ff-account-bar { grid-column:2; grid-row:1 / span 2; margin:0; padding:0; border:0; } #ff-packing-preview header #ff-account-bar button { width:44px; height:44px; padding:0; justify-content:center; } #ff-packing-preview .ff-phone:not(.ff-owner):not(.ff-board) header #ff-eyebrow { display:block; grid-column:1; grid-row:1; font-size:12px; } #ff-packing-preview .ff-phone:not(.ff-owner):not(.ff-board) header #ff-title { grid-row:2; } #ff-packing-preview .ff-phone:not(.ff-owner):not(.ff-board) header #ff-subtitle { grid-row:3; } #ff-packing-preview .ff-board #ff-eyebrow { display:none; } } #ff-packing-preview .ff-board header #ff-title { align-self:center; grid-row:1 / span 2; margin:0; } #ff-packing-preview .ff-task-row { grid-template-columns:minmax(170px,1.5fr) minmax(160px,1fr) minmax(120px,1fr) 110px; } #ff-packing-preview .ff-task-name .ff-task-counts { display:flex; gap:24px; align-items:center; } #ff-packing-preview .ff-task-counts span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } #ff-packing-preview .ff-task-status { display:flex; align-items:center; justify-content:flex-end; gap:6px; } #ff-packing-preview .ff-task-people-button { width:44px; min-width:44px; height:44px; padding:0; display:inline-flex; justify-content:center; align-items:center; } #ff-packing-preview #ff-task-people-modal { width:calc(100% - 32px); max-width:360px; border:1px solid var(--ff-line); border-radius:16px; padding:16px; background:var(--ff-paper); color:var(--ff-text); } #ff-packing-preview #ff-task-people-modal::backdrop { background:rgb(0 0 0 / .3); } #ff-packing-preview .ff-task-person { padding:12px 0; border-bottom:1px solid var(--ff-line); } #ff-packing-preview .ff-task-person:last-child { border-bottom:0; } @media(max-width:767px) { #ff-packing-preview .ff-task-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; } #ff-packing-preview .ff-task-name { grid-column:1 / -1; grid-row:1 / span 2; display:grid; grid-template-columns:subgrid; gap:8px 10px; } #ff-packing-preview .ff-task-name strong { grid-column:1 / -1; grid-row:1; } #ff-packing-preview .ff-task-name .ff-task-counts { grid-column:1; grid-row:2; margin:0; min-height:44px; } #ff-packing-preview .ff-task-status { grid-column:2; grid-row:2; } #ff-packing-preview .ff-task-fact { grid-column:1; grid-row:3; } #ff-packing-preview .ff-task-open { grid-column:2; grid-row:3; justify-self:end; width:110px; } } #ff-packing-preview #ff-chief-modes { display:flex; align-items:center; gap:6px; padding:6px 8px; } #ff-packing-preview #ff-chief-modes button { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; } #ff-packing-preview #ff-chief-modes button .ff-icon { width:22px; height:22px; } #ff-packing-preview #ff-chief-modes [data-action="assign-task"] { margin-left:6px; } #ff-packing-preview #ff-account-bar #ff-chief-modes { padding:0; gap:4px; } #ff-packing-preview #ff-account-bar #ff-chief-modes [data-action="assign-task"] { margin-left:0; } @media(max-width:767px) { #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-account-bar { grid-column:1 / -1; grid-row:2; justify-content:flex-end; margin:4px 0 0; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-title { grid-column:1; grid-row:1; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-subtitle { grid-column:2; grid-row:1; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-eyebrow { grid-row:1; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-title { grid-column:1 / -1; grid-row:2; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-subtitle { grid-column:1 / -1; grid-row:3; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-account-bar { grid-row:4; } } @media(max-width:767px) { #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header { grid-template-columns:minmax(0,1fr) 220px; column-gap:4px; align-items:center; padding:8px; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-title { grid-column:1; grid-row:1; margin:0; font-size:14px; line-height:1.3; overflow-wrap:normal; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-subtitle { grid-column:1; grid-row:2; gap:3px; font-size:12px; margin-top:3px; flex-wrap:wrap; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header .ff-header-count { gap:2px; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header .ff-header-count .ff-icon { width:12px; height:12px; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-account-bar { grid-column:2; grid-row:1 / span 3; width:220px; margin:0; gap:0; align-self:center; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-account-bar #ff-chief-modes { gap:0; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-eyebrow { grid-column:1; grid-row:1; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-title { grid-column:1; grid-row:2; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-subtitle { grid-column:1; grid-row:3; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-owner):not(.ff-board) header #ff-account-bar { grid-column:2; grid-row:1 / span 3; } } #ff-packing-preview .ff-phone header { --ff-header:light-dark(#e5eef3,#243641); --ff-header-hover:light-dark(#d3e2eb,#334c5b); --ff-header-pressed:light-dark(#c4d9e5,#3e5b6b); --ff-selected-pressed:light-dark(#006763,#a2e8dd); background:var(--ff-header); } #ff-packing-preview .ff-phone header #ff-account-bar, #ff-packing-preview .ff-phone header #ff-chief-modes { background:transparent; } #ff-packing-preview .ff-phone header #ff-account-bar button { background:transparent; } @media(hover:hover) { #ff-packing-preview .ff-phone header #ff-account-bar button:not(:disabled):hover { background:var(--ff-header-hover); } } #ff-packing-preview .ff-phone header #ff-account-bar button:not(:disabled):active { background:var(--ff-header-pressed); } #ff-packing-preview .ff-phone header #ff-account-bar button[aria-pressed="true"] { background:var(--ff-teal); color:var(--ff-on); } #ff-packing-preview .ff-phone header #ff-account-bar button[aria-pressed="true"]:not(:disabled):active { background:var(--ff-selected-pressed); } #ff-packing-preview .ff-product-tools { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:44px; margin-bottom:10px; } #ff-packing-preview .ff-product-tools #ff-search { flex:1; min-width:0; width:0; height:44px; min-height:44px; margin:0; padding:8px 10px; font-size:16px; } #ff-packing-preview .ff-product-tools #ff-search[hidden] { display:none; } #ff-packing-preview .ff-product-tools button { flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; } #ff-packing-preview #ff-search-count:empty { display:none; } #ff-packing-preview .ff-product-tools .ff-select-wrap { flex:0 0 44px; width:44px; margin:0; } #ff-packing-preview .ff-product-tools .ff-select-popover button { display:flex; width:100%; height:auto; min-height:44px; padding:10px 12px; justify-content:flex-start; text-align:left; } #ff-packing-preview .ff-product-total { display:block; margin-top:6px; font-variant-numeric:tabular-nums; } #ff-packing-preview .ff-product-progress { display:block; height:5px; margin-top:7px; border-radius:8px; overflow:hidden; background:var(--ff-line); } #ff-packing-preview .ff-product-progress > span { display:block; height:100%; background:var(--ff-teal); } @media(min-width:768px) { #ff-packing-preview .ff-phone,#ff-packing-preview .ff-phone.ff-owner { width:100%; max-width:1280px; } #ff-packing-preview #ff-demo-controls,#ff-packing-preview .ff-caption { max-width:1280px; margin-inline:auto; } #ff-packing-preview .ff-phone header,#ff-packing-preview .ff-phone.ff-owner header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:12px 16px; } #ff-packing-preview .ff-phone header #ff-title { grid-column:1; grid-row:1; } #ff-packing-preview .ff-phone header #ff-subtitle { grid-column:1; grid-row:2; flex-wrap:wrap; } #ff-packing-preview .ff-phone header #ff-eyebrow { display:none; } #ff-packing-preview .ff-phone header #ff-account-bar { grid-column:2; grid-row:1 / span 2; margin:0; } #ff-packing-preview .ff-phone header #ff-account-bar .ff-task-return,#ff-packing-preview .ff-phone header #ff-chief-modes button { width:44px; min-width:44px; height:44px; padding:0; } #ff-packing-preview .ff-board header #ff-title { grid-row:1 / span 2; } #ff-packing-preview .ff-data,#ff-packing-preview .ff-box-row,#ff-packing-preview .ff-export-actions,#ff-packing-preview .ff-export-destination { max-width:none; } #ff-packing-preview .ff-web-selection #ff-product-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } #ff-packing-preview .ff-web-selection .ff-product-choice { margin:0; } #ff-packing-preview .ff-web-selection .ff-product-tools { max-width:420px; margin-left:auto; } #ff-packing-preview .ff-web-packing { grid-template-columns:minmax(250px,300px) minmax(0,1fr); } #ff-packing-preview .ff-work-pane { max-width:none; } } #ff-task-workspace #project-chrome,#ff-task-workspace #project-page{max-width:1280px;margin-inline:auto} #ff-task-workspace .project-top{display:flex;align-items:center;gap:12px;background:var(--e-head);padding:10px 14px;border:1px solid var(--e-line);border-radius:14px 14px 0 0} #ff-task-workspace .project-top>strong{margin-right:auto;font-size:17px;font-weight:500} #ff-task-workspace .project-example{font-size:12px;color:var(--e-sub)} #ff-task-workspace .project-top button{width:44px;padding:0;background:transparent} #ff-task-workspace .project-nav{display:flex;gap:6px;flex-wrap:wrap;background:var(--e-paper);padding:8px;border:1px solid var(--e-line);border-top:0;margin-bottom:12px;border-radius:0 0 12px 12px} #ff-task-workspace .project-nav button{flex:1;white-space:nowrap;padding:8px} #ff-task-workspace .project-menu-button{display:none} #ff-task-workspace #project-page{padding:16px;background:var(--e-paper);border:1px solid var(--e-line);border-radius:12px;min-height:490px} #ff-task-workspace .project-admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0} #ff-task-workspace .project-page-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap} #ff-task-workspace .project-page-head p{flex:1;min-width:180px} #ff-task-workspace .project-account-row{display:grid;grid-template-columns:minmax(140px,1.5fr) minmax(80px,1fr) minmax(125px,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--e-line);overflow-wrap:anywhere} #ff-task-workspace .project-account-row .account-actions{display:flex;gap:6px;flex-wrap:wrap;margin:0} #ff-task-hub #native-account-password label{display:grid;gap:8px} #ff-task-hub #native-account-password input{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;font-size:16px} #ff-task-workspace .project-person{display:flex;align-items:center;gap:10px;min-width:0} #ff-task-workspace .project-link-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--e-line);overflow-wrap:anywhere} #ff-task-workspace .project-link-row>span:nth-child(2){flex:1} #ff-task-workspace #ff-task-hub>.shell>#edit-header>[data-a=account]{display:none} @media(max-width:767px){ #ff-task-workspace .project-menu-button{display:inline-flex} #ff-task-workspace .project-nav{display:none} #ff-task-workspace .project-nav.is-open{display:grid;grid-template-columns:1fr 1fr} #ff-task-workspace .project-top{padding:8px;gap:6px;margin-bottom:10px;border-radius:12px} #ff-task-workspace .project-top>strong{font-size:15px} #ff-task-workspace .project-example{display:none} #ff-task-workspace #project-page{padding:12px} #ff-task-workspace .project-account-row{grid-template-columns:minmax(0,1fr) minmax(70px,.65fr);gap:6px} #ff-task-workspace .project-account-row>.muted{grid-column:1/-1;padding-left:28px} #ff-task-workspace .project-admin-tabs{gap:5px} #ff-task-workspace .project-admin-tabs button{padding:8px;gap:5px;flex:1} } body{margin:0;background:#f3f6f5;color:#152d2e;font:14px/1.45 system-ui,sans-serif}button{cursor:pointer} [hidden]{display:none!important} #ff-task-workspace{max-width:1440px;margin:auto} #ff-task-hub .demo{display:none} #ff-workspace-login{max-width:340px;margin:12vh auto;padding:24px;background:white;border-radius:16px} #ff-workspace-login label{display:block;margin:12px 0} #ff-workspace-login input{box-sizing:border-box;width:100%;padding:12px} .native-error{color:#a52d23} #native-busy{position:fixed;bottom:12px;right:12px;padding:10px;background:#fff;border:1px solid #9aa;z-index:10000} .native-photo{object-fit:contain;max-width:100%;max-height:100%} body:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable} html{scrollbar-gutter:stable} /* Native sign-in: same spacing and touch targets as the shared workspace. */ #ff-workspace-login{box-sizing:border-box;width:calc(100% - 32px);max-width:420px;margin:12vh auto;padding:24px;border:1px solid #d5e2de} #ff-workspace-login h1{margin:0 0 20px;font-size:24px;line-height:1.25} #ff-workspace-login label{margin:14px 0;font-weight:500} #ff-workspace-login input{display:block;min-height:48px;margin-top:6px;border:1px solid #d5e2de;border-radius:10px;background:#fff;color:#152d2e;font:inherit;font-size:16px} #ff-workspace-login button{width:100%;min-height:48px;padding:12px;border:1px solid #007d79;border-radius:10px;background:#007d79;color:#fff;font:inherit;font-size:16px;font-weight:600} #ff-workspace-login button:active:not(:disabled){background:#006762} #ff-workspace-login button:disabled{opacity:.55;cursor:wait} #ff-workspace-login input:focus-visible,#ff-workspace-login button:focus-visible{outline:2px solid #007d79;outline-offset:3px} /* Real account and warehouse forms use the same compact responsive grid. */ #ff-task-hub #native-account,#ff-task-hub #native-warehouse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #ff-task-hub #native-account>label,#ff-task-hub #native-warehouse>label{display:flex;flex-direction:column;gap:6px;min-width:0} #ff-task-hub #native-account input:not([type=checkbox]),#ff-task-hub #native-account select,#ff-task-hub #native-warehouse input:not([type=checkbox]){width:100%;min-width:0} #ff-task-hub #native-account label:has(input[type=checkbox]),#ff-task-hub #native-warehouse label:has(input[type=checkbox]){flex-direction:row;align-items:center} #ff-task-hub #native-account>button,#ff-task-hub #native-warehouse>button{grid-column:1/-1} @media(max-width:600px){#ff-task-hub #native-account,#ff-task-hub #native-warehouse{grid-template-columns:minmax(0,1fr)}} /* Native stock and handoff journal: readable inside a phone viewport. */ #ff-task-hub .native-stock-table{width:100%;table-layout:fixed;min-width:0} #ff-task-hub .native-stock-table th,#ff-task-hub .native-stock-table td{white-space:normal;overflow-wrap:anywhere;padding:8px 6px} #ff-task-hub .native-stock-table th:nth-child(1){width:56px} #ff-task-hub .native-stock-table th:nth-child(2){width:32%} #ff-task-hub .native-stock-table th:nth-child(3){width:auto} #ff-task-hub .native-stock-table th:nth-child(4){width:28%} #ff-task-hub .native-stock-table td:first-child{text-align:center} #ff-task-hub .stock-updated{margin:0 0 8px;overflow-wrap:anywhere} #ff-task-hub #edit-dialog .handoff-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center} #ff-task-hub #edit-dialog .handoff-row>*{min-width:0;overflow-wrap:anywhere} #ff-task-hub #edit-dialog .handoff-row .handoff-meta{grid-column:1/-1} /* Long destination names must stay inside their cell on both screen sizes. */ #ff-packing-preview .ff-warehouse-row .ff-entity, #ff-packing-preview .ff-supply-row .ff-entity { min-width:0; white-space:normal; } #ff-packing-preview .ff-warehouse-row .ff-entity strong, #ff-packing-preview .ff-supply-row .ff-entity strong { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; } #ff-packing-preview .ff-modal-table th { text-align:center; } #ff-packing-preview .ff-modal-head > h3 { flex:1; min-width:0; overflow-wrap:anywhere; } /* Outgoing supplies: keep destination readable on narrow phones. */ #ff-task-workspace .project-dispatch-row > * { min-width:0; } @media(max-width:767px) { #ff-task-workspace .project-dispatch-row { display:grid; grid-template-columns:minmax(56px,.7fr) minmax(0,1.7fr) 44px; gap:5px 10px; } #ff-task-workspace .project-dispatch-row > strong { grid-column:1; grid-row:1; } #ff-task-workspace .project-dispatch-row > span:nth-child(2) { grid-column:2; grid-row:1; } #ff-task-workspace .project-dispatch-row > span:nth-child(3) { grid-column:1 / 3; grid-row:2; color:var(--e-sub); font-size:12px; } #ff-task-workspace .project-dispatch-row > button { grid-column:3; grid-row:1 / 3; width:44px; padding:0; } } /* Text must remain in its grid cell beside quantities and chief actions. */ #ff-packing-preview .ff-article-row .ff-entity { white-space:normal; } #ff-packing-preview .ff-article-row .ff-entity strong { min-width:0; white-space:normal; overflow-wrap:anywhere; } #ff-packing-preview .ff-phone.ff-chief-task:not(.ff-board) header #ff-title { min-width:0; white-space:normal; overflow-wrap:anywhere; } /* Stock product names stay inside their own cell beside the quantity. */ #ff-packing-preview .ff-stock-row .ff-entity { min-width:0; white-space:normal; } #ff-packing-preview .ff-stock-row .ff-entity strong { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; } /* Draft approval keeps requested/available/shortage together on a phone. */ #ff-task-hub .draft-review-table{width:100%;min-width:0;table-layout:fixed} #ff-task-hub .draft-review-table th:first-child{width:24%} #ff-task-hub .draft-review-table th:nth-child(2),#ff-task-hub .draft-review-table th:nth-child(3),#ff-task-hub .draft-review-table th:nth-child(4){width:10%} #ff-task-hub .draft-review-table th:nth-child(5){width:36%} #ff-task-hub .draft-review-table th:nth-child(6){width:10%} #ff-task-hub .draft-review-table td,#ff-task-hub .draft-review-table th{white-space:normal;overflow-wrap:anywhere} #ff-task-hub .draft-review-table th{font-size:12px;overflow-wrap:normal} #ff-task-hub .draft-review-table select{box-sizing:border-box;width:100%;max-width:100%;min-width:0} #ff-task-hub .draft-review-table small{display:block} #ff-task-hub .pending-product-info{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere} #ff-task-hub .pending-product-info small{font-size:12px} #ff-task-hub .pending-review-row .pending-product-info{flex:1} #ff-task-hub .pending-review-row button{flex-shrink:0} #ff-task-hub #edit-dialog-body:has(#native-import-market)>label{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10px;align-items:center;margin-block:8px} #ff-task-hub #edit-dialog-body:has(#native-import-market)>label select{width:100%;min-width:0;box-sizing:border-box} #ff-task-hub .draft-allocation-table,#ff-task-hub .demand-journal-table{table-layout:fixed;width:100%;min-width:0} #ff-task-hub .draft-allocation-table th,#ff-task-hub .draft-allocation-table td,#ff-task-hub .demand-journal-table th,#ff-task-hub .demand-journal-table td{white-space:normal;overflow-wrap:anywhere} #ff-task-hub .draft-allocation-table th:first-child{width:22%} #ff-task-hub .draft-allocation-table th:nth-child(2){width:48%} #ff-task-hub .draft-allocation-table th:nth-child(n+3){width:15%} #ff-task-hub .draft-allocation-quantity{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:4px;font-size:16px;appearance:textfield;-moz-appearance:textfield} #ff-task-hub .draft-allocation-quantity::-webkit-inner-spin-button,#ff-task-hub .draft-allocation-quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #ff-task-hub .demand-journal-table th:first-child{width:40%} #ff-task-hub .demand-journal-table th:nth-child(2){width:24%} #ff-task-hub .demand-journal-table th:nth-child(n+3){width:12%} @media(max-width:600px){ #ff-task-hub .draft-review-table,#ff-task-hub .draft-review-table thead,#ff-task-hub .draft-review-table tbody{display:block} #ff-task-hub .draft-review-table tr{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,52px);align-items:center;border-bottom:1px solid #d5e2de} #ff-task-hub .draft-review-table th,#ff-task-hub .draft-review-table td{width:auto!important;padding:6px 4px;border:0;min-width:0;font-size:12px;text-align:center} #ff-task-hub .draft-review-table th{font-size:11px;overflow-wrap:normal;align-self:stretch;display:flex;align-items:center;justify-content:center} #ff-task-hub .draft-review-table th:first-child,#ff-task-hub .draft-review-table td:first-child{text-align:left} #ff-task-hub .draft-review-table th:nth-child(n+5){display:none} #ff-task-hub .draft-review-table td:nth-child(5){grid-column:1/4;text-align:left} #ff-task-hub .draft-review-table td:nth-child(6){grid-column:4} #ff-task-hub .draft-review-table td:nth-child(5) select{width:100%;min-height:44px;font-size:16px} #ff-task-hub .draft-review-table small{display:block} #ff-task-hub .draft-allocation-table td,#ff-task-hub .draft-allocation-table th{padding:6px 4px;font-size:12px} #ff-task-hub .draft-allocation-table th{font-size:11px;overflow-wrap:normal} #ff-task-hub .draft-allocation-table th:first-child{width:22%;overflow-wrap:anywhere} #ff-task-hub .draft-allocation-table th:nth-child(2){width:26%} #ff-task-hub .draft-allocation-table th:nth-child(3){width:24%} #ff-task-hub .draft-allocation-table th:nth-child(4){width:28%} #ff-task-hub .draft-allocation-table td:nth-child(3){white-space:nowrap;overflow-wrap:normal} #ff-task-hub .demand-journal-table,#ff-task-hub .demand-journal-table thead,#ff-task-hub .demand-journal-table tbody{display:block} #ff-task-hub .demand-journal-table tr{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,52px);border-bottom:1px solid #d5e2de} #ff-task-hub .demand-journal-table th,#ff-task-hub .demand-journal-table td{width:auto!important;min-width:0;border:0;padding:6px 4px;font-size:12px;text-align:center} #ff-task-hub .demand-journal-table th:first-child{display:none} #ff-task-hub .demand-journal-table td:first-child{grid-column:1/-1;grid-row:2;text-align:left;color:#5b7274;font-size:11px;padding-top:0} #ff-task-hub .demand-journal-table th:nth-child(2),#ff-task-hub .demand-journal-table td:nth-child(2){grid-column:1;grid-row:1;text-align:left} #ff-task-hub .demand-journal-table th:nth-child(3),#ff-task-hub .demand-journal-table td:nth-child(3){grid-column:2;grid-row:1} #ff-task-hub .demand-journal-table th:nth-child(4),#ff-task-hub .demand-journal-table td:nth-child(4){grid-column:3;grid-row:1} #ff-task-hub .demand-journal-table th:nth-child(5),#ff-task-hub .demand-journal-table td:nth-child(5){grid-column:4;grid-row:1} #ff-task-hub .demand-journal-table th{font-size:11px;overflow-wrap:normal} } /* Import settings: bounded fields and readable source-column groups. */ #ff-task-hub #edit-dialog:has(.import-form){box-sizing:border-box;width:calc(100% - 24px);max-width:720px;max-height:calc(100dvh - 48px);overflow-y:auto;overflow-x:hidden} #ff-task-hub .import-form,#ff-task-hub .import-form *{box-sizing:border-box;min-width:0} #ff-task-hub .import-form{font-size:14px} #ff-task-hub .import-file-name{margin:0 0 8px;color:var(--e-sub);overflow-wrap:anywhere;font-size:12px} #ff-task-hub .import-note{margin:6px 0 12px;color:var(--e-sub);font-size:12px;overflow-wrap:anywhere} #ff-task-hub .import-block{margin:12px 0;padding:12px;border:1px solid var(--e-line);border-radius:10px} #ff-task-hub .import-block legend{padding:0 6px;font-weight:600} #ff-task-hub .import-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #ff-task-hub .import-field{display:flex;flex-direction:column;gap:5px} #ff-task-hub .import-field select,#ff-task-hub .import-field input{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;font-size:16px} #ff-task-hub .import-field small,#ff-task-hub .import-check small{display:block;font-size:12px;line-height:1.4;color:var(--e-sub);overflow-wrap:anywhere} #ff-task-hub .import-settings>summary,#ff-task-hub .import-other-columns>summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:500;overflow-wrap:anywhere} #ff-task-hub .import-settings{border-top:1px solid var(--e-line);border-bottom:1px solid var(--e-line)} #ff-task-hub .import-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:6px} #ff-task-hub .import-check,#ff-task-hub .import-column{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;overflow-wrap:anywhere} #ff-task-hub .import-check input[type=checkbox],#ff-task-hub .import-column input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:1px 0 0;padding:0;accent-color:var(--e-teal)} #ff-task-hub .import-column{padding:10px;border:1px solid var(--e-line);border-radius:8px;background:var(--e-paper)} #ff-task-hub .import-column>span{display:flex;gap:10px;align-items:flex-start;flex:1} #ff-task-hub .import-column b{flex:0 0 22px;color:var(--e-sub);font-weight:500} #ff-task-hub .import-selection{font-size:12px;margin:8px 0} #ff-task-hub .import-actions{display:flex;justify-content:flex-end;margin-top:12px} @media(max-width:540px){#ff-task-hub .import-grid{grid-template-columns:minmax(0,1fr)}#ff-task-hub .import-block{padding:10px}#ff-task-hub .import-actions button{width:100%}} /* Explicit draft decisions, with a separate visual quantity inside Pack. */ #ff-task-hub .draft-decision-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #ff-task-hub .draft-decision-actions button{min-height:44px;flex-shrink:0} #ff-task-hub .draft-decision-actions .draft-pack-button{gap:5px;padding:6px 8px;white-space:nowrap;font-size:13px} #ff-task-hub .draft-review-table .draft-pack-count{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:28px;padding:3px 6px;border-radius:6px;border:1px solid light-dark(#9ed5cc,#47796c);background:light-dark(#d0eeea,#335a50);color:var(--e-text);font-weight:600;font-variant-numeric:tabular-nums} #ff-task-hub .draft-remove-button[aria-pressed=true]{background:light-dark(#fbece9,#462c28);border-color:var(--e-error);color:var(--e-error)} #ff-task-hub .draft-review-table tr[data-decision=remove] td:first-child strong{text-decoration:line-through;color:var(--e-sub)} @media(min-width:601px){#ff-task-hub .draft-review-table th:first-child{width:24%}#ff-task-hub .draft-review-table th:nth-child(2),#ff-task-hub .draft-review-table th:nth-child(3),#ff-task-hub .draft-review-table th:nth-child(4){width:9%}#ff-task-hub .draft-review-table th:nth-child(5){width:41%}#ff-task-hub .draft-review-table th:nth-child(6){width:8%}} @media(max-width:600px){#ff-task-hub .draft-decision-actions .draft-pack-button{font-size:14px;min-height:44px}#ff-task-hub .draft-review-table td:nth-child(5){padding-block:7px}#ff-task-hub .draft-review-table td:nth-child(6){padding:4px 0}} /* Modal tables: number headings, values and input text share one centre. */ #ff-packing-preview #ff-modal-content th.ff-number,#ff-packing-preview #ff-modal-content td.ff-number{padding-inline:4px;text-align:center;vertical-align:middle;font-variant-numeric:tabular-nums} #ff-packing-preview #ff-modal-content th.ff-number .ff-icon{vertical-align:middle} #ff-packing-preview #ff-modal-content .ff-summary-table th:first-child{width:46%;white-space:normal} #ff-packing-preview #ff-modal-content .ff-summary-table th{white-space:normal} #ff-packing-preview #ff-modal-content .ff-plan-table th button{display:inline-flex;align-items:center;justify-content:center;position:relative;width:100%;min-width:0;gap:0;padding-inline:0} #ff-packing-preview #ff-modal-content .ff-plan-table .ff-sort-mark,#ff-packing-preview #ff-modal-content .ff-link-table th button>span[aria-hidden=true]{position:absolute;right:2px;top:50%;transform:translateY(-50%)} #ff-packing-preview #ff-modal-content .ff-plan-table th{padding-inline:3px;text-align:center} #ff-packing-preview #ff-modal-content .ff-link-table th button{position:relative;gap:0} #ff-packing-preview #ff-modal-content .ff-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center} #ff-packing-preview #ff-modal-content .ff-item>div:last-child{text-align:right;font-variant-numeric:tabular-nums} #ff-task-hub #edit-dialog .draft-allocation-table th,#ff-task-hub #edit-dialog .draft-allocation-table td{vertical-align:middle} #ff-task-hub #edit-dialog .draft-allocation-table th:nth-child(n+3),#ff-task-hub #edit-dialog .draft-allocation-table td:nth-child(n+3){text-align:center;padding-inline:4px;font-variant-numeric:tabular-nums} #ff-task-hub #edit-dialog .draft-allocation-quantity{text-align:center} #ff-task-hub .icon-guide-group{margin-block:14px} #ff-task-hub .icon-guide-group h4{margin:0 0 6px;font-size:14px;font-weight:600} #ff-task-hub .icon-guide-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:10px;padding-block:7px;overflow-wrap:anywhere} /* Supply composition: headings and all values share the same column centre. */ #ff-packing-preview #ff-modal-content .ff-contents-table th, #ff-packing-preview #ff-modal-content .ff-contents-table td{padding-inline:4px;text-align:center;vertical-align:middle;white-space:normal;overflow-wrap:anywhere} #ff-packing-preview #ff-modal-content .ff-contents-table th>span, #ff-packing-preview #ff-modal-content .ff-contents-table td>span{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle} /* Shared operational sections reuse overview tables on every screen size. */ #ff-packing-preview .ff-packing-nav{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px} /* A box always shows its destination next to its number, on phone and desktop. */ #ff-packing-preview .ff-box-row{grid-template-columns:minmax(58px,.8fr) minmax(64px,1.4fr) repeat(2,minmax(28px,.5fr)) 44px} #ff-packing-preview .ff-box-warehouse{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center} @media(min-width:768px){#ff-packing-preview .ff-box-row{grid-template-columns:minmax(110px,1fr) minmax(160px,1.7fr) repeat(2,minmax(64px,.6fr)) 48px;max-width:none}} /* Fixed Admin/order columns; no flex width derived from warehouse names. */ #ff-task-hub .admin-accounts-table,#ff-task-hub .admin-warehouses-table,#ff-task-hub .admin-products-table,#ff-task-hub .native-orders-table,#ff-task-hub .native-stock-table,#ff-task-hub .order-contents{table-layout:fixed;width:100%} #ff-task-hub .admin-accounts-table th,#ff-task-hub .admin-accounts-table td,#ff-task-hub .admin-warehouses-table th,#ff-task-hub .admin-warehouses-table td,#ff-task-hub .admin-products-table td,#ff-task-hub .native-orders-table td,#ff-task-hub .native-stock-table td,#ff-task-hub .order-contents td{white-space:normal;overflow-wrap:anywhere;vertical-align:middle} #ff-task-hub .account-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap} #ff-task-hub .account-actions button{min-width:44px;padding:7px} #ff-task-hub .admin-warehouses-table [data-a=warehouse-edit]{width:100%;max-width:176px;white-space:nowrap;font-size:13px;gap:6px;padding:8px 10px} @media(max-width:800px){#ff-task-hub .admin-warehouses-table .table-action-label{display:none}} #ff-task-hub .admin-products-table .product{min-width:0} #ff-task-hub .admin-products-table .product span{min-width:0;overflow-wrap:anywhere} #ff-task-hub .native-orders-table th button,#ff-task-hub .native-stock-table th button,#ff-task-hub .admin-products-table th button{white-space:normal;text-align:center;flex-wrap:wrap} #ff-task-hub .native-orders-table td:last-child button{width:44px;padding:0} #ff-task-hub .source-minus{display:block;white-space:nowrap} #ff-task-hub .project-placeholder{text-align:center;padding:48px 12px;color:var(--e-sub)} #ff-task-hub .project-placeholder h3{margin-top:12px;color:var(--e-text)} @media(max-width:600px){#ff-task-hub .table-action-label{display:none}#ff-task-hub .admin-accounts-table th,#ff-task-hub .admin-accounts-table td{padding:5px 4px}#ff-task-hub .account-actions button{font-size:12px;gap:4px}#ff-task-hub .order-contents th,#ff-task-hub .order-contents td{padding-inline:3px}} #ff-packing-preview .ff-ship-all,#ff-packing-preview .ff-driver-active{display:flex;align-items:center;gap:10px;min-height:44px;margin-block:8px} #ff-packing-preview .ff-ship-all input,#ff-packing-preview .ff-driver-active input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin:0} #ff-packing-preview #ff-driver-choice-trigger span{white-space:normal;overflow-wrap:anywhere} /* One row per exact handoff; shared global and task shipment presentation. */ #ff-task-workspace .shipment-table-wrap{overflow:auto;border:1px solid #d5e3e1;border-radius:12px;background:#fff} #ff-task-workspace .native-shipments-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums} #ff-task-workspace .native-shipments-table th,#ff-task-workspace .native-shipments-table td{padding:6px 3px;text-align:center;vertical-align:middle;overflow-wrap:anywhere;border-bottom:1px solid #d5e3e1} #ff-task-workspace .native-shipments-table th{background:#e5f2ef;color:#5d7777} #ff-task-workspace .native-shipments-table th button{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;min-height:40px;padding:3px;border:0;background:transparent;flex-wrap:wrap} #ff-task-workspace .native-shipments-table th button small{font-size:10px} #ff-task-workspace .native-shipments-table th:last-child,#ff-task-workspace .native-shipments-table td:last-child{width:48px} #ff-task-workspace .native-shipments-table .icon-btn{width:40px;min-height:40px;padding:0} #ff-task-workspace .native-shipments-table .shipment-date{white-space:nowrap} #ff-task-workspace .shipment-all th:nth-child(1){width:10%} #ff-task-workspace .shipment-all th:nth-child(2){width:16%} #ff-task-workspace .shipment-all th:nth-child(3){width:26%} #ff-task-workspace .shipment-box{margin:14px 0}#ff-task-workspace .shipment-box h4{margin:8px 0;overflow-wrap:anywhere} #ff-task-workspace .shipment-driver{overflow-wrap:anywhere}#ff-task-workspace .shipment-documents{margin-top:16px} @media(max-width:767px){#ff-task-workspace .native-shipments-table .shipment-label{display:none}#ff-task-workspace .native-shipments-table{font-size:11px}#ff-task-workspace .native-shipments-table th,#ff-task-workspace .native-shipments-table td{padding:4px 2px}} /* Compact task files: templates and label stack, same web/mobile controls. */ #ff-packing-preview .ff-files-panel{display:grid;gap:10px} #ff-packing-preview .ff-files-block{padding:12px;border:1px solid var(--ff-line);border-radius:12px;background:var(--ff-paper);min-width:0} #ff-packing-preview .ff-files-block h3{margin:0 0 8px;font-size:15px;font-weight:500} #ff-packing-preview .ff-files-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #ff-packing-preview .ff-files-actions button{min-height:44px;font-size:14px;padding:8px 10px;white-space:nowrap} #ff-packing-preview .ff-files-actions .ff-icon-button{padding:0} #ff-packing-preview .ff-file-list{margin-top:8px;font-size:13px} #ff-packing-preview .ff-file-list summary{cursor:pointer;min-height:32px;display:list-item;align-content:center} #ff-packing-preview .ff-file-entry{padding:6px 0;display:grid;gap:3px;overflow-wrap:anywhere;border-top:1px solid var(--ff-line)} #ff-packing-preview .ff-file-entry small{font-size:12px} @media(min-width:768px){#ff-packing-preview .ff-files-panel{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Owner Move actions in the outgoing shipment row, shared with task/journal. */ #ff-task-workspace .shipment-owner th:last-child,#ff-task-workspace .shipment-owner td:last-child{width:126px} #ff-task-workspace .shipment-row-actions{display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap} #ff-task-workspace .shipment-row-actions .icon-btn,#ff-task-workspace .shipment-move-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:40px;min-width:40px;min-height:44px;padding:0;background:#fff;border:1px solid #d5e3e1;border-radius:9px} #ff-task-workspace .shipment-move-button:active{background:#d8eeea} #ff-task-workspace .shipment-action-label{display:none} #ff-task-workspace .shipment-status-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #ff-task-workspace .native-shipments-table tr.shipment-move-pending>td{background:#fff0f1} #ff-task-workspace .native-shipments-table tr.shipment-move-confirmed>td{background:#edf8f0} @media(min-width:1100px){#ff-task-workspace .shipment-owner th:last-child,#ff-task-workspace .shipment-owner td:last-child{width:370px}#ff-task-workspace .shipment-action-label{display:inline}#ff-task-workspace .shipment-move-button{width:auto;padding:8px 10px}} @media(max-width:767px){#ff-task-workspace .shipment-owner.shipment-all th:nth-child(1){width:8%}#ff-task-workspace .shipment-owner.shipment-all th:nth-child(2){width:12%}#ff-task-workspace .shipment-owner.shipment-all th:nth-child(3){width:24%}} /* Keep modal headings, numeric values and owner actions on common columns. */ #ff-task-workspace #edit-dialog .move-reconciliation-table{table-layout:fixed;width:100%;font-variant-numeric:tabular-nums} #ff-task-workspace #edit-dialog .move-reconciliation-table th,#ff-task-workspace #edit-dialog .move-reconciliation-table td{padding:6px 4px;vertical-align:middle;white-space:normal;overflow-wrap:anywhere} #ff-task-workspace #edit-dialog .move-reconciliation-table th:nth-child(n+2),#ff-task-workspace #edit-dialog .move-reconciliation-table td:nth-child(n+2){text-align:center} #ff-task-workspace .shipment-row-actions{display:grid;grid-template-columns:repeat(3,40px);gap:3px;justify-content:center} #ff-task-workspace .shipment-action-headings>span{display:flex;align-items:center;justify-content:center;min-height:40px} #ff-task-workspace .shipment-owner th:last-child,#ff-task-workspace .shipment-owner td:last-child{width:134px} #ff-task-workspace #edit-dialog .shipment-action-label,#ff-task-workspace #edit-dialog .shipment-label{display:none} #ff-task-workspace #edit-dialog .shipment-owner th:last-child,#ff-task-workspace #edit-dialog .shipment-owner td:last-child{width:134px} #ff-task-workspace #edit-dialog .shipment-row-actions{grid-template-columns:repeat(3,40px)} #ff-task-workspace #edit-dialog .shipment-move-button{width:40px;min-width:40px;padding:0} #ff-task-workspace #edit-dialog .native-shipments-table th button{position:relative;flex-wrap:nowrap;gap:0;padding-inline:12px} #ff-task-workspace #edit-dialog .native-shipments-table th button small{position:absolute;right:2px;top:50%;transform:translateY(-50%)} @media(min-width:1100px){#ff-task-workspace .shipment-owner th:last-child,#ff-task-workspace .shipment-owner td:last-child{width:370px}#ff-task-workspace .shipment-row-actions{grid-template-columns:40px minmax(0,1fr) 112px}#ff-task-workspace .shipment-row-actions .shipment-move-button{width:100%}} @media(max-width:767px){#ff-task-workspace #edit-dialog .move-reconciliation-table{font-size:13px}} #ff-task-workspace #edit-dialog:has(.native-shipments-table){width:calc(100vw - 16px);max-width:760px} #ff-task-workspace #edit-dialog .shipment-all{min-width:320px} #ff-task-workspace #edit-dialog .native-shipments-table th button{padding-inline:0} @media(max-width:767px){#ff-task-workspace #edit-dialog:has(.native-shipments-table){padding:10px}} #ff-task-workspace #edit-dialog .shipment-within-task th:first-child{width:30%} /* Owner-approved external analytics workbooks; shared mobile and desktop view. */ #ff-task-hub .analytics-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:720px} #ff-task-hub .analytics-link{display:flex;align-items:center;gap:12px;min-width:0;min-height:76px;padding:14px 16px;border:1px solid var(--e-line);border-radius:12px;background:var(--e-paper);color:var(--e-text);text-decoration:none;font:inherit} #ff-task-hub .analytics-link>.ic{width:22px;height:22px;color:var(--e-teal)} #ff-task-hub .analytics-link>span:not(.analytics-link-arrow){min-width:0;flex:1} #ff-task-hub .analytics-link strong{display:block;font-size:16px;font-weight:500} #ff-task-hub .analytics-link small{display:block;margin-top:4px;color:var(--e-sub);font-size:13px;line-height:1.4;overflow-wrap:anywhere} #ff-task-hub .analytics-link-arrow{flex-shrink:0;color:var(--e-teal);font-size:20px} #ff-task-hub .analytics-link:hover,#ff-task-hub .analytics-link:active{background:var(--e-soft);border-color:var(--e-teal)} #ff-task-hub .analytics-link:focus-visible{outline:2px solid var(--e-teal);outline-offset:3px} @media(max-width:600px){#ff-task-hub .analytics-links{grid-template-columns:minmax(0,1fr);gap:10px}} #ff-task-hub .native-stock-table th button{max-width:100%;min-width:0;padding-inline:0;font-size:13px;overflow-wrap:anywhere} /* Ozon file-first workflow: scoped to new controls; existing layout retained. */ .ozon-dialog,.ff-notice-panel,.ozon-workflow-panel{--oz-paper:light-dark(#fff,#20302e);--oz-text:light-dark(#213a3b,#e4efed);--oz-line:light-dark(#d4e2e0,#405650);--oz-main:light-dark(#007f7b,#5dd7cc);--oz-on:light-dark(#fff,#123a35);--oz-soft:light-dark(#e4f3ef,#293f3a);--oz-muted:light-dark(#5d7475,#acc0bf);font-family:system-ui,-apple-system,sans-serif;color:var(--oz-text);color-scheme:light dark;font-size:14px;line-height:1.45;box-sizing:border-box} .ozon-dialog *,.ff-notice-panel *,.ozon-workflow-panel *{box-sizing:border-box} .ozon-dialog{width:calc(100% - 24px);max-width:800px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--oz-line);border-radius:14px;background:var(--oz-paper);padding:16px;inset-block-start:16px;inset-block-end:auto;margin-block:0} .ozon-dialog::backdrop{background:rgb(20 40 38 / .3)} .ozon-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px} .ozon-dialog header>button{width:44px;flex:none} .ozon-dialog h3,.ozon-workflow-panel h3,.ff-notice-panel h3{margin:0;font-size:17px;font-weight:500} .ozon-dialog h4{font-weight:500;font-size:14px;margin:12px 0} .ozon-dialog p{margin:8px 0} .ozon-dialog button,.ozon-workflow-panel button,.ff-notice-panel button,.ozon-file-button{font:inherit;min-height:44px;border:1px solid var(--oz-line);border-radius:9px;padding:8px 10px;background:var(--oz-paper);color:var(--oz-text);display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;white-space:normal} .ozon-dialog button.primary,.ozon-workflow-panel button.primary{background:var(--oz-main);color:var(--oz-on);border-color:var(--oz-main)} .ozon-dialog button:disabled,.ozon-workflow-panel button:disabled{opacity:.5} .ozon-dialog .muted,.ozon-workflow-panel .muted{color:var(--oz-muted);font-size:12px} .ozon-dialog .bad{color:light-dark(#9c3c30,#f2b3aa)} .ozon-dialog [data-ozon-error]:empty{display:none} .ozon-dialog input:not([type=file]){width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid var(--oz-line);border-radius:8px;background:var(--oz-paper);color:var(--oz-text);font:inherit;font-size:16px} .ozon-tabs,.ozon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block:10px} .ozon-tabs [aria-pressed=true]{background:var(--oz-soft);color:var(--oz-main)} .ozon-supply-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .ozon-supply-fields label{display:grid;gap:6px;min-width:0} .ozon-items{border-collapse:collapse;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums} .ozon-items th,.ozon-items td{padding:9px 7px;text-align:left;border-bottom:1px solid var(--oz-line);overflow-wrap:anywhere;white-space:normal} .ozon-items th{font-weight:500;color:var(--oz-muted);background:var(--oz-soft)} .ozon-items th:last-child,.ozon-items td:last-child{text-align:right} .ozon-items small{display:block;color:var(--oz-muted)} .ozon-cargo-section{border:1px solid var(--oz-line);border-radius:10px;padding:12px;background:var(--oz-paper);margin-bottom:16px} .ozon-cargo-section summary,.ozon-label-composition summary{min-height:44px;align-content:center;color:var(--oz-main)} .ozon-cluster-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--oz-line)} .ozon-cluster-row>div{display:flex;gap:7px;align-items:center;min-width:0} .ozon-cluster-row>div>button{width:40px;padding:5px;flex:none} .ozon-file-button{position:relative;overflow:hidden;cursor:inherit;font-weight:400} #native-app .ozon-file-button input,.ozon-dialog .ozon-file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;min-height:0;margin:0;padding:0} .ozon-mark-table{margin-top:12px;border:1px solid var(--oz-line);border-radius:10px;overflow:hidden;background:var(--oz-paper)} .ozon-mark-row{display:grid;grid-template-columns:70px minmax(0,1fr) 160px 130px 44px;gap:9px;align-items:center;padding:9px;border-bottom:1px solid var(--oz-line)} .ozon-mark-row:last-child{border-bottom:0} .ozon-mark-row.is-confirmed{background:var(--oz-soft)} .ozon-mark-row strong{font-weight:500} .ozon-mark-head{background:var(--oz-soft)} .ozon-mark-head button{border:0;background:transparent;text-align:left;justify-content:flex-start;padding:3px;min-width:0;font-size:12px;white-space:nowrap} .ozon-cargo{font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap} .ozon-mark-state{font-size:12px;color:var(--oz-muted)} .ozon-label-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} .ozon-box-info{display:grid;gap:12px;align-content:start;min-width:0} .ozon-box-number{font-size:22px;color:var(--oz-main);font-weight:500} .ozon-label-page{display:block;width:100%;height:auto;max-height:550px;object-fit:contain;min-width:0;border:1px solid var(--oz-line);border-radius:5px;background:white} .ozon-label-composition{grid-column:1/-1;min-width:0} .ozon-confirm-question{display:grid;gap:8px;border-top:1px solid var(--oz-line);padding-top:12px} .ozon-confirmed{color:var(--oz-main)} .ff-notice-bell{position:relative;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .ff-notice-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#d84242} .ff-notice-panel{position:fixed;inset:auto;margin:0;width:280px;max-width:calc(100vw - 16px);max-height:min(420px,75dvh);overflow:auto;background:var(--oz-paper);border:1px solid var(--oz-line);border-radius:11px;padding:12px;box-shadow:0 6px 22px rgb(20 40 38 / .16);z-index:1000} .ff-notice-row{padding-block:10px;border-bottom:1px solid var(--oz-line);min-width:0} .ff-notice-row strong,.ff-notice-row p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 5px;font-weight:400} .ff-notice-row.is-new strong{font-weight:500;color:var(--oz-main)} .ff-notice-row p{font-size:12px;color:var(--oz-muted)} .ff-notice-row button{min-height:36px;padding:4px 7px;font-size:12px} .ozon-notice-full{overflow-wrap:anywhere;white-space:pre-wrap} @media(max-width:767px){.ozon-supply-fields,.ozon-label-grid{grid-template-columns:minmax(0,1fr)}.ozon-cluster-row{grid-template-columns:minmax(0,1fr) auto}.ozon-cluster-row>div{grid-column:1/-1}.ozon-cluster-row>.muted{grid-column:1}.ozon-cluster-row>.ozon-file-button{grid-column:2;grid-row:2/4}.ozon-mark-row{grid-template-columns:55px minmax(0,1fr) 44px;gap:5px}.ozon-mark-row>.ozon-cargo{grid-column:2;grid-row:2}.ozon-mark-row>.ozon-mark-state{grid-column:2;grid-row:3}.ozon-mark-row>button:last-child{grid-column:3;grid-row:1/4}.ozon-mark-head{display:flex;flex-wrap:wrap;gap:4px 8px}.ozon-dialog{padding:12px}.ozon-label-page{height:auto}} .ozon-cluster-name{display:flex;gap:5px;align-items:center;min-width:0;overflow-wrap:anywhere}.ozon-cluster-name>button{width:36px;flex:none;padding:4px} /* Compact task editor headings; full direction and supply remain in the dialog. */ #ff-task-hub .native-plan-editor thead th{white-space:nowrap;padding-block:4px} #ff-task-hub .native-plan-editor .warehouse-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.2;min-width:0} #ff-task-hub .native-plan-editor .warehouse-heading-label{display:block;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px} #ff-task-hub .native-plan-editor .warehouse-house{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;color:var(--e-sub);border:0;background:transparent} #ff-task-hub .native-plan-editor .warehouse-house.has-supply{color:light-dark(#007b2c,#65ff9b);background:light-dark(#d5f7df,#173e26);border-radius:8px;box-shadow:inset 0 0 0 1px light-dark(#54b875,#418d59)} #ff-task-hub .native-plan-editor .warehouse-heading>.ic{margin-block:12px} #ff-task-hub .native-plan-editor .warehouse-house.has-supply .ic{stroke-width:2.4} /* Warehouse-first packing shares the existing article workspace geometry. */ #ff-packing-preview .ff-warehouse-choice > .ff-warehouse-copy{flex:1;min-width:0;padding:0;border:0;background:transparent;text-align:left;display:block;color:var(--ff-text)} #ff-packing-preview .ff-warehouse-choice:has([aria-pressed=true]){border-color:var(--ff-teal);background:var(--ff-soft)} #ff-packing-preview .ff-warehouse-tools #ff-warehouse-search{flex:1;min-width:0;width:0;height:44px;min-height:44px;margin:0;padding:8px 10px;font-size:16px} #ff-packing-preview .ff-warehouse-tools #ff-warehouse-search[hidden]{display:none} #ff-packing-preview .ff-warehouse-packing .ff-work-pane > .ff-back[data-view=warehouse-list]{display:none} #ff-packing-preview .ff-warehouse-products .ff-tile{display:flex;align-items:center;gap:12px;min-width:0;overflow-wrap:anywhere} #ff-packing-preview .ff-warehouse-product-choice > .ff-warehouse-product-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1;align-self:stretch;min-width:0;padding:0;border:0;background:transparent;text-align:left;color:var(--ff-text)} #ff-packing-preview .ff-warehouse-products .ff-tile .ff-muted{margin-top:auto} #ff-packing-preview .ff-box-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;align-items:stretch} #ff-packing-preview .ff-box-card{display:flex;flex-direction:column;min-width:0;padding:14px} #ff-packing-preview .ff-box-card-head{display:flex;gap:8px;align-items:center;justify-content:space-between} #ff-packing-preview .ff-box-card-head h3{min-width:0;overflow-wrap:anywhere} #ff-packing-preview .ff-box-card-head .ff-pill{flex-shrink:0} #ff-packing-preview .ff-box-card-warehouse{min-height:2.9em;overflow-wrap:anywhere} #ff-packing-preview .ff-box-card-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:auto;padding-top:12px} #ff-packing-preview .ff-box-card-actions button{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding-inline:8px} #ff-packing-preview .ff-overview-row{grid-template-columns:minmax(0,1.5fr) minmax(60px,.9fr) minmax(64px,.9fr) 44px;max-width:none} #ff-packing-preview .ff-overview-row .ff-entity{min-width:0;white-space:normal;overflow-wrap:anywhere} #ff-packing-preview .ff-overview-row .ff-entity strong{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere} #ff-packing-preview .ff-overview-row.ff-data-head{font-size:12px;align-items:center} #ff-packing-preview .ff-overview-row.ff-data-head > [role=columnheader]{text-align:center;overflow-wrap:anywhere} #ff-packing-preview .ff-overview-row.ff-data-head > [role=columnheader]:first-child{text-align:left} #ff-packing-preview .ff-overview-box summary{overflow-wrap:anywhere} #ff-packing-preview .ff-warehouse-readonly{margin-top:16px} #ff-packing-preview .ff-packing-nav{grid-template-columns:repeat(4,minmax(0,1fr))} #ff-packing-preview .ff-owner .ff-owner-work-nav{grid-template-columns:repeat(7,minmax(0,1fr))} @media(max-width:767px){ #ff-packing-preview .ff-owner .ff-owner-work-nav{display:flex;flex-wrap:wrap;gap:4px} #ff-packing-preview .ff-owner .ff-owner-work-nav button{flex:1 0 44px;min-width:44px;min-height:44px} #ff-packing-preview .ff-overview-row{gap:4px;padding-inline:6px} } @media(min-width:768px){ #ff-packing-preview .ff-warehouse-sidebar .ff-product-choice{padding:8px;gap:8px} #ff-packing-preview .ff-warehouse-sidebar .ff-product-choice h3{font-size:15px} #ff-packing-preview .ff-warehouse-sidebar .ff-photo{width:56px;min-width:56px;height:64px;min-height:64px} #ff-packing-preview .ff-overview-row{grid-template-columns:minmax(170px,1.5fr) minmax(100px,1fr) minmax(100px,1fr) 48px} } @media(max-width:360px){#ff-packing-preview .ff-owner .ff-owner-work-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}} /* Compact quantity editor: retain native numeric validation without steppers. */ #ff-task-hub .native-plan-editor .qty{width:52px;flex-basis:52px;appearance:textfield;-moz-appearance:textfield} #ff-task-hub .native-plan-editor .qty::-webkit-inner-spin-button, #ff-task-hub .native-plan-editor .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #ff-task-hub .native-plan-editor th:nth-child(n+3):not(:last-child), #ff-task-hub .native-plan-editor .warehouse-plan-cell{padding-inline:6px} #ff-task-hub .native-plan-editor .warehouse-quantity{gap:3px} /* Five compact box cards on desktop; readable touch controls on smaller screens. */ #ff-packing-preview .ff-box-cards{grid-template-columns:minmax(0,1fr);gap:8px} #ff-packing-preview .ff-box-card{padding:10px} #ff-packing-preview .ff-box-card-head{gap:5px;flex-wrap:wrap} #ff-packing-preview .ff-box-card-head h3{font-size:16px} #ff-packing-preview .ff-box-card-head .ff-pill{font-size:12px} #ff-packing-preview .ff-box-card-warehouse{font-size:14px;line-height:1.3;min-height:2.6em;margin:6px 0} #ff-packing-preview .ff-box-card .ff-amount{font-size:20px;margin:2px 0} #ff-packing-preview .ff-box-card .ff-meta{font-size:12px;line-height:1.35;margin:5px 0;overflow-wrap:anywhere} #ff-packing-preview .ff-box-card-actions{grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));gap:6px;padding-top:6px} #ff-packing-preview .ff-box-card-actions button{font-size:14px;gap:4px;padding-inline:4px;min-height:44px} #ff-packing-preview .ff-box-card-actions button:only-child{grid-column:1/-1} #ff-packing-preview .ff-box-card-actions .ff-icon{width:16px;height:16px} @media(min-width:520px){#ff-packing-preview .ff-box-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:768px){#ff-packing-preview .ff-box-cards{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1000px){#ff-packing-preview .ff-box-cards{grid-template-columns:repeat(5,minmax(0,1fr))}} @media(min-width:1200px){#ff-packing-preview .ff-box-cards{grid-template-columns:repeat(5,minmax(0,1fr))}} /* Match Ozon marking headings to the shared flat table header design. */ #ff-packing-preview .ozon-workflow-panel{min-width:0;max-width:100%} #ff-packing-preview .ozon-mark-table{max-width:100%;overflow-x:auto} #ff-packing-preview .ozon-mark-row{display:grid;grid-template-columns:56px minmax(170px,1fr) 160px 140px 44px;min-width:720px;gap:8px;padding:8px;align-items:center} #ff-packing-preview .ozon-mark-row>*{min-width:0} #ff-packing-preview .ozon-mark-row>.ozon-cargo, #ff-packing-preview .ozon-mark-row>.ozon-mark-state, #ff-packing-preview .ozon-mark-row>button:last-child{grid-column:auto;grid-row:auto} #ff-packing-preview .ozon-mark-row.ozon-mark-head{background:var(--ff-soft);color:var(--ff-sub)} #ff-packing-preview .ozon-mark-head button{border:0;border-radius:0;background:transparent;color:var(--ff-sub);box-shadow:none;padding:0;min-width:0;min-height:44px;font-size:13px;font-weight:500;line-height:1.3;text-align:left;justify-content:flex-start;white-space:nowrap} #ff-packing-preview .ozon-mark-head button:hover, #ff-packing-preview .ozon-mark-head button:active{background:transparent;color:var(--ff-teal)} #ff-packing-preview .ozon-mark-head button:focus-visible{outline:2px solid var(--ff-teal);outline-offset:2px} #ff-packing-preview .ozon-mark-row .ozon-cluster-name{min-width:0;gap:6px;line-height:1.35} #ff-packing-preview .ozon-mark-row .ozon-cluster-name>button{width:44px;min-width:44px;padding:0;flex:none} #ff-packing-preview .ozon-mark-state{line-height:1.35;white-space:normal;overflow-wrap:anywhere} /* Immediate upload feedback and server-verified completion. */ .ozon-upload-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1.4;overflow-wrap:anywhere;min-width:0} .ozon-upload-state.is-ready{color:light-dark(#087c38,#79e4a5);font-weight:600} .ozon-upload-state.is-loading{color:var(--oz-main)} .ozon-upload-state.is-error{color:light-dark(#a3342c,#ffb4a9)} .ozon-upload-spinner{display:inline-block;flex:none;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ozon-upload-spin .8s linear infinite} [data-upload-feedback]{margin-top:8px} @keyframes ozon-upload-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.ozon-upload-spinner{animation:none;border-style:dotted}} /* Keep explicit upload confirmation visible above long label lists. */ .ozon-dialog .ozon-upload-confirmation{position:sticky;top:0;z-index:2;background:var(--oz-paper);padding-block:8px;margin-block:0 10px} .ozon-dialog [data-label-replacement]{border-inline-start:3px solid var(--oz-main);padding-inline-start:10px;margin-block:10px} /* Marking is server-confirmed; retain the status text as well as its tint. */ #ff-packing-preview .ff-box-card.is-marking-confirmed{background:light-dark(#eff8f1,#23362b);border-color:light-dark(#bfd9c5,#486e54)} #ff-packing-preview .ff-box-card.is-marking-confirmed .ozon-mark-state{color:light-dark(#226d3a,#9bdfad);font-weight:500} /* Handoff has its own soft deeper tint; it does not assert current marking. */ #ff-packing-preview .ff-box-card.is-tk-handoff{background:light-dark(#dff2e3,#2d4937);border-color:light-dark(#8cba96,#5e9770)} #ff-packing-preview .ff-box-card.is-tk-handoff .ff-pill{color:light-dark(#28623a,#b3dfbd)} /* One expiry date per task/Product, without widening destination quantities. */ .expiry-control{flex:0 0 32px;width:32px;min-width:32px;height:32px;min-height:32px;padding:3px!important;font-weight:700;border-radius:8px!important} .expiry-control.is-missing{color:#a83727;background:#fff0ec;border:1px solid #dca598}.expiry-control.has-date{color:#17652c;background:#e6f4ea;border:1px solid #95bea0} .expiry-control svg{width:18px;height:18px}.expiry-missing-note{font-size:13px;color:#a83727;align-self:center} @media(max-width:600px){.expiry-control{flex-basis:44px;width:44px;min-width:44px;height:44px;min-height:44px}} /* Owner return uses a second compact action row, never widens shipments. */ #ff-task-workspace .shipment-return-button{grid-column:1/-1;width:100%;min-height:40px;padding:5px 8px;font-size:12px} #ff-task-workspace .shipment-return-assertions{display:grid;gap:12px;margin-block:16px} #ff-task-workspace .shipment-return-assertions label{display:flex;align-items:flex-start;gap:9px;line-height:1.4} #ff-task-workspace .shipment-return-assertions input{flex:0 0 20px;width:20px;min-height:20px;margin-top:2px} #ff-task-workspace .native-shipments-table tr.shipment-move-returned>td{background:#f1f4f3}