/*
 * Shipping card + pick screen of a sales order (see includes/scripts/ux/40-shipping.js). Reuses the .fo-* card styles of orders/docs.css.
 */
#foShipCard .sp-lines small{display:block;color:#667085;font-size:11.5px}
#foShipCard .sp-lines tr.is-done td{opacity:.5}
#foShipCard .sp-lines input.form-control{width:84px;text-align:right;margin-left:auto}
#foShipCard .sp-picked{display:inline-block;background:#e0f2fe;color:#075985;border-radius:99px;padding:0 9px;font-weight:700}
#foShipCard .sp-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
#foShipCard .sp-ship{align-items:flex-start;gap:10px;flex-wrap:wrap}
#foShipCard .sp-actions{display:flex;gap:6px;flex-wrap:wrap}
#foShipCard .sp-ship a.btn{text-decoration:none}
/* modal + pick screen */
.sp-modal{position:fixed;inset:0;z-index:100000;background:rgba(15,42,61,.5);display:flex;align-items:center;justify-content:center;padding:14px}
.sp-box{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:22px 24px;box-shadow:0 24px 70px rgba(8,47,73,.3);color:#1b2437}
.sp-box h3{margin:0 0 8px}
.sp-field{display:block;margin:0 0 12px}.sp-field span{display:block;font-size:12.5px;color:#667085;margin-bottom:3px}
.sp-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}.sp-grow{flex:1}
.sp-fullscreen{padding:0;align-items:stretch;background:#f4f8fb}
.sp-fullscreen .sp-box{max-width:none;max-height:none;height:100%;border-radius:0;box-shadow:none;background:#f4f8fb;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sp-pick-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.sp-pick-head h3{margin:0}.sp-pick-head small{color:#667085}
.sp-scan{position:relative}.sp-scan i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#0369a1;font-size:18px}
.sp-scan input{height:52px;padding-left:44px;font-size:17px;border-radius:14px;border:2px solid #0369a1}
.sp-progress{height:8px;border-radius:99px;background:#dbe7f0;overflow:hidden}.sp-progress span{display:block;height:100%;width:0;background:#16a34a;transition:width .25s}
.sp-sum{font-size:13px;color:#667085}
.sp-group{flex:1;overflow:auto;background:#fff;border:1px solid #e4e8f0;border-radius:14px}
.sp-group h4{margin:0;padding:10px 14px;background:#f3f8fc;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#667085;position:sticky;top:0}
.sp-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid #e4e8f0;transition:background .3s}
.sp-row.is-done{background:#f3fbf5}.sp-row.is-part{background:#fffbeb}.sp-row.sp-flash{background:#dcfce7}
.sp-tick{font-size:22px;color:#cbd5e1}.sp-row.is-done .sp-tick{color:#16a34a}.sp-row.is-part .sp-tick{color:#f59e0b}
.sp-name{flex:1;min-width:0}.sp-name b{display:block}.sp-name small{color:#667085}
.sp-qty{display:flex;align-items:center;gap:6px}.sp-qty input{width:64px;text-align:center;height:38px}.sp-qty .btn{height:38px;min-width:38px}.sp-of{color:#667085;font-size:12.5px;white-space:nowrap}
.sp-bin{flex:0 0 auto;min-width:64px;text-align:center;background:#e0f2fe;color:#075985;border-radius:10px;padding:5px 9px;font:800 14px "Plus Jakarta Sans",Inter,sans-serif;letter-spacing:.02em}.sp-bin.is-none{background:#f1f5f9;color:#94a3b8;font-weight:600;font-size:12px}
.sp-aisle{padding:6px 14px;background:#0f2a3d;color:#fff;font:700 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:560px){.sp-row{flex-wrap:wrap}.sp-qty{width:100%;justify-content:flex-end}.sp-foot .btn{flex:1 1 40%}}
#foShipCard .sp-wave{margin-bottom:10px}#foShipCard .sp-wave a{font-weight:600}