/* Visual layer only: original data, images, tables and forms stay unchanged. */
:root{--cute-ink:#51385f;--cute-pink:#efb9d8;--cute-blue:#cfe8ff}
.cute-icon{width:30px;height:30px;flex:none;vertical-align:middle;pointer-events:none;filter:drop-shadow(0 2px 1px #7959a510)}
.tabs{gap:8px;padding:12px;background:linear-gradient(110deg,#fff4fbf2,#f1f8fff2);border:1px solid #fff;border-radius:22px;box-shadow:0 6px 24px #895cb212;margin:14px 12px;overflow-x:auto}
.tabs .tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;border:1px solid transparent;white-space:nowrap;min-height:50px;color:var(--cute-ink);transition:background .2s,box-shadow .2s}
.tabs .tab.active{background:linear-gradient(125deg,#f6d5ec,#e2eaff);color:#533b6f;border-color:#cdb4e7;box-shadow:0 3px 12px #9572b422}
.toolbar{gap:10px;padding:14px;align-items:center;background:linear-gradient(110deg,#fff8fc,#f8fbff);border:1px solid #eadff0;border-radius:18px;margin-bottom:16px}
.toolbar .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:14px;position:relative;isolation:isolate;overflow:hidden}
.toolbar .btn .cute-icon{width:26px;height:26px}.toolbar .btn::after{content:"";pointer-events:none;position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 43%,#ffffff80 49%,transparent 55%);transform:translateX(-110%)}
.toolbar .btn:hover,.toolbar .btn:focus-visible{box-shadow:inset 0 0 8px #fff6,0 0 12px #edadd877,0 0 24px #c6d9ff88}.toolbar .btn:hover::after,.toolbar .btn:focus-visible::after{animation:cute-sweep .75s ease-out}
@keyframes cute-sweep{to{transform:translateX(110%)}}
.tab:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid #9464bb;outline-offset:3px}
.bal{position:relative;border-radius:18px!important;border:1px solid #ffffffbb!important;box-shadow:0 6px 22px #7d4b9714;backdrop-filter:blur(12px)}.bal>.cute-icon{position:absolute;right:9px;top:9px;width:25px;height:25px}.bal .label{padding-right:25px}.bal .val{font-variant-numeric:tabular-nums}
.panel{border-radius:20px}table th{font-weight:650}table td{line-height:1.55}input,select,textarea{border-radius:10px}dialog{border-radius:22px;box-shadow:0 24px 80px #4a225533}
@media(max-width:600px){.tabs{margin:10px 5px;padding:8px;gap:5px}.tabs .tab{flex-direction:column;gap:3px;padding:7px 10px;min-width:83px;font-size:11px}.tabs .cute-icon{width:29px;height:29px}.toolbar{padding:10px;gap:8px}.toolbar .btn{padding:9px 12px;font-size:12px}.bal>.cute-icon{width:20px;height:20px;right:5px;top:6px}.bal .label{padding-right:18px}.balances{gap:7px}.toolbar input[type=search]{min-width:130px;flex:1}}
@media(prefers-reduced-motion:reduce){.toolbar .btn::after{display:none}.tabs .tab{transition:none}}
td.product-picture-only{background-repeat:no-repeat!important;background-position:center!important;background-size:34px 34px!important;min-width:44px;width:44px;color:transparent!important;font-size:0!important;height:44px}td.product-picture-only[contenteditable]:focus{background-image:none!important;color:inherit!important;font-size:20px!important}td.product-picture-name{background-repeat:no-repeat!important;background-position:8px center!important;background-size:32px 32px!important;padding-left:48px!important;min-height:44px}td.product-picture-name:focus{outline-offset:-2px}
.cargo-confirm{border:1px solid #e1c9ee;background:#fff7fc;color:#503663;width:min(420px,calc(100vw - 32px));padding:24px;border-radius:22px}.cargo-confirm::backdrop{background:#30203d80}.cargo-confirm p{white-space:pre-wrap}.cargo-confirm .editor-actions{display:flex;justify-content:flex-end;gap:12px}#cargo-error{position:fixed;z-index:99999;bottom:18px;left:16px;right:16px;margin:auto;max-width:700px;padding:18px;border:1px solid #d085a0;border-radius:16px;background:#fff0f5;color:#71213b;box-shadow:0 8px 32px #51304133;display:flex;align-items:center;gap:18px}#cargo-error button{margin-left:auto;cursor:pointer;border:0;background:transparent;color:inherit;font-weight:700}

/* Keep long supplier replies from stretching an entire request. */
#orders-table td{vertical-align:top;padding:10px 8px;line-height:1.4}
#orders-table td[data-ik="product"]{min-width:235px;max-width:300px;background-position:8px 12px!important}
#orders-table .order-field{max-height:104px;overflow:auto;overflow-wrap:anywhere;min-height:24px}
#orders-table .order-response{width:280px;max-height:104px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
#orders-table td[data-ok="order_date"]{min-width:96px;white-space:nowrap}
#orders-table .icon-btn{min-width:32px;min-height:32px}
#orders-table tbody{border-bottom:3px solid #e4d9ef}
#orders-table td.product-picture-name{padding-left:48px!important}
@media(max-width:600px){#orders-table td[data-ik="product"]{min-width:210px}#orders-table .order-response{width:240px;max-height:88px}}

#orders-table .order-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;max-height:none;min-height:0;overflow:hidden;white-space:pre-wrap;line-height:1.4}
#orders-table .order-description.is-expanded{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
#orders-table .order-description:focus{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
#orders-table .order-expand{display:block;margin-top:5px;padding:4px 0;background:transparent;border:0;color:#79519b;font:inherit;font-size:12px;font-weight:600;cursor:pointer;min-height:28px}
#orders-table .order-expand:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
