.sonik-react-inventory-host{padding:0!important;min-width:0}
.react-inventory{display:grid;gap:16px;max-width:1320px;margin:0 auto;padding:2px 0 28px;color:#101828}
.react-inventory *{box-sizing:border-box}
.react-inventory button,.react-inventory input,.react-inventory select,.react-inventory textarea{font:inherit}
.react-inventory button{min-height:38px;padding:0 12px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#344054;font-weight:800;cursor:pointer}
.react-inventory button:hover:not(:disabled){border-color:#f59e0b;background:#fffbeb}
.react-inventory button.primary{border-color:#f59e0b;background:#f59e0b;color:#fff}
.react-inventory button.danger{color:#b42318}
.react-inventory button:disabled{cursor:not-allowed;opacity:.5}
.react-inventory__hero,.react-inventory__toolbar,.react-inventory__card,.react-inventory__vendor,.react-inventory__comparison,.react-inventory__empty{border:1px solid #e4e7ec;border-radius:16px;background:#fff}
.react-inventory__hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;border-color:#f5d98a;background:linear-gradient(135deg,#fffdf5,#fff8dc)}
.react-inventory__hero p{margin:0;color:#b54708;font-size:11px;font-weight:900;letter-spacing:.12em}
.react-inventory__hero h2{margin:6px 0 8px;font-size:26px}
.react-inventory__hero span{color:#667085;font-size:12px;line-height:1.6}
.react-inventory__hero-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.react-inventory__state{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:10px!important;font-weight:900;white-space:nowrap}
.react-inventory__state[data-tone=ok]{background:#ecfdf3;color:#027a48}
.react-inventory__state[data-tone=warn]{background:#fffaeb;color:#b54708}
.react-inventory__state[data-tone=error]{background:#fef3f2;color:#b42318}
.react-inventory__toolbar{display:flex;align-items:end;gap:10px;padding:15px;flex-wrap:wrap}
.react-inventory__toolbar label,.react-inventory__filters label,.react-inventory__inline-form label,.react-inventory__item-add label{display:grid;gap:5px;color:#475467;font-size:10px;font-weight:900;min-width:0}
.react-inventory__toolbar input,.react-inventory__toolbar select,.react-inventory__filters input,.react-inventory__filters select,.react-inventory__inline-form input,.react-inventory__inline-form select,.react-inventory__item-add input,.react-inventory__item-add select{width:100%;min-width:0;min-height:40px;padding:0 10px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#101828}
.react-inventory__tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:#f2f4f7}
.react-inventory__tabs button{min-height:34px;border:0;background:transparent}
.react-inventory__tabs button.active{background:#fff;color:#b54708;box-shadow:0 1px 5px #10182814}
.react-inventory__toolbar-actions{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.react-inventory__metrics{display:grid;gap:10px}
.react-inventory__metrics.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.react-inventory__metric{padding:16px;border:1px solid #e4e7ec;border-radius:14px;background:#fff}
.react-inventory__metric span{color:#667085;font-size:10px;font-weight:800}
.react-inventory__metric strong{display:block;margin:7px 0 5px;font-size:20px}
.react-inventory__metric small{color:#98a2b3;font-size:9px}
.react-inventory__metric[data-tone=warn]{border-color:#fedf89;background:#fffcf5}
.react-inventory__comparison{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:4px 14px;align-items:center;padding:15px 17px}
.react-inventory__comparison div{display:flex;gap:8px;align-items:center}
.react-inventory__comparison div span,.react-inventory__comparison small{color:#667085;font-size:11px}
.react-inventory__comparison b{grid-row:1/3;grid-column:2;text-align:right;font-size:19px}
.react-inventory__comparison b[data-tone=up]{color:#175cd3}
.react-inventory__comparison b[data-tone=down]{color:#b42318}
.react-inventory__card{padding:17px}
.react-inventory__card header,.react-inventory__vendor>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.react-inventory__card h3{margin:0 0 4px;font-size:15px}
.react-inventory__card p{margin:0;color:#667085;font-size:11px;line-height:1.55}
.react-inventory__filters{display:grid;grid-template-columns:minmax(280px,2fr) repeat(3,minmax(140px,1fr)) auto;gap:10px;align-items:end;margin-top:14px}
.react-inventory__filters .wide textarea{min-height:70px;padding:10px;border:1px solid #d0d5dd;border-radius:9px;resize:vertical}
.react-inventory__filters .check{display:flex;align-items:center;min-height:40px;white-space:nowrap}
.react-inventory__filters .check input{width:auto;min-height:auto}
.react-inventory__inline-form{display:grid;grid-template-columns:minmax(220px,2fr) minmax(140px,1fr) auto;gap:10px;align-items:end;margin-top:14px}
.react-inventory__vendors{display:grid;gap:14px}
.react-inventory__vendor{overflow:hidden}
.react-inventory__vendor>header{display:grid;grid-template-columns:auto minmax(180px,1fr) 130px auto auto;padding:13px 15px;border-bottom:1px solid #eaecf0;background:#f9fafb}
.react-inventory__vendor-order,.react-inventory__row-actions{display:flex;gap:3px}
.react-inventory__vendor-order button,.react-inventory__row-actions button{min-width:30px;min-height:30px;padding:0 7px}
.react-inventory__vendor-name{min-width:0;border:0;background:transparent;font-size:15px;font-weight:900;outline:none}
.react-inventory__vendor>header select{min-height:36px;border:1px solid #d0d5dd;border-radius:8px;background:#fff}
.react-inventory__vendor>header strong{white-space:nowrap}
.react-inventory__vendor-memo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;padding:10px 15px;border-bottom:1px solid #eaecf0;color:#667085;font-size:10px;font-weight:900}
.react-inventory__vendor-memo input{min-height:36px;padding:0 10px;border:1px solid #d0d5dd;border-radius:8px}
.react-inventory__table-wrap{overflow:auto}
.react-inventory table{width:100%;min-width:1120px;border-collapse:collapse}
.react-inventory th,.react-inventory td{padding:9px 8px;border-bottom:1px solid #eaecf0;text-align:right;font-size:10px;vertical-align:middle}
.react-inventory th{background:#fcfcfd;color:#475467}
.react-inventory th:nth-child(2),.react-inventory td:nth-child(2),.react-inventory th:nth-child(7),.react-inventory td:nth-child(7){text-align:left}
.react-inventory td input,.react-inventory td select{width:100%;min-width:0;min-height:34px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;text-align:inherit}
.react-inventory td input:focus,.react-inventory td select:focus{border-color:#f59e0b;background:#fff;outline:0}
.react-inventory tr[data-low=true]{background:#fffcf5}
.react-inventory td small{display:block;margin-top:3px;color:#667085;font-size:8px;line-height:1.4}
.react-inventory__item-identity{min-width:290px}
.react-inventory__unit-settings{display:grid;grid-template-columns:minmax(95px,1fr) minmax(70px,.8fr) minmax(70px,.8fr) minmax(70px,.7fr);gap:4px;margin-top:5px}
.react-inventory__unit-settings select,.react-inventory__unit-settings input{min-height:30px!important;padding:0 5px!important;border-color:#eaecf0!important;background:#fff!important;font-size:9px!important}
.react-inventory__qty{display:grid;grid-template-columns:30px minmax(70px,1fr) 30px;gap:3px}
.react-inventory__qty button{min-height:32px;padding:0}
.react-inventory__qty input{text-align:right}
.react-inventory__pack-qty{display:grid;grid-template-columns:auto minmax(70px,1fr);align-items:center;gap:5px;margin-top:5px;color:#b54708;font-size:8px;font-weight:900}
.react-inventory__pack-qty input{min-height:30px!important;border-color:#fedf89!important;background:#fffcf5!important;text-align:right}
.react-inventory__difference{display:grid;gap:2px}
.react-inventory__difference small{color:#667085}
.react-inventory__item-add{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:8px;padding:14px 15px;background:#fcfcfd;align-items:end}
.react-inventory__item-add--units{grid-template-columns:repeat(4,minmax(130px,1fr))}
.react-inventory__item-add .wide{grid-column:span 2}
.react-inventory__unit-preview{display:grid;gap:3px;grid-column:1/-2;min-height:40px;padding:8px 10px;border:1px solid #fedf89;border-radius:9px;background:#fffcf5;color:#667085;font-size:9px;line-height:1.45}
.react-inventory__unit-preview strong{color:#b54708}
.react-inventory__item-add>button{align-self:stretch}
.react-inventory__deleted{display:grid;gap:7px;margin-top:12px}
.react-inventory__deleted article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #eaecf0;border-radius:10px}
.react-inventory__deleted article div{display:grid;gap:3px}
.react-inventory__deleted article span{color:#667085;font-size:10px}
.react-inventory__empty{padding:36px;text-align:center;color:#98a2b3}
.react-inventory__footnote{padding:4px 6px;color:#667085;font-size:10px;line-height:1.6}
.react-inventory__loading{padding:40px;text-align:center;color:#667085}
.empty{text-align:center!important;color:#98a2b3!important;padding:24px!important}
@media(max-width:1100px){
  .react-inventory__metrics.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .react-inventory__filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .react-inventory__filters .wide{grid-column:1/-1}
  .react-inventory__vendor>header{grid-template-columns:auto minmax(180px,1fr) 130px auto}
  .react-inventory__vendor>header>.danger{grid-column:2/-1;justify-self:end}
  .react-inventory__item-add{grid-template-columns:repeat(3,minmax(0,1fr))}
  .react-inventory__unit-preview{grid-column:1/-1}
  .react-inventory__item-add>button{grid-column:1/-1}
}
@media(max-width:760px){
  .react-inventory{gap:12px}
  .react-inventory__hero,.react-inventory__toolbar,.react-inventory__card{padding:14px}
  .react-inventory__hero{display:grid}
  .react-inventory__hero h2{font-size:22px}
  .react-inventory__hero-actions{justify-content:flex-start}
  .react-inventory__toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .react-inventory__tabs,.react-inventory__toolbar-actions{grid-column:1/-1;margin-left:0}
  .react-inventory__toolbar-actions button{flex:1}
  .react-inventory__metrics.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .react-inventory__comparison{grid-template-columns:1fr}
  .react-inventory__comparison b{grid-row:auto;grid-column:auto;text-align:left}
  .react-inventory__filters,.react-inventory__inline-form,.react-inventory__vendor>header,.react-inventory__item-add{grid-template-columns:1fr}
  .react-inventory__filters .wide,.react-inventory__vendor>header>.danger,.react-inventory__item-add .wide,.react-inventory__unit-preview,.react-inventory__item-add>button{grid-column:auto;justify-self:stretch}
  .react-inventory__vendor>header{align-items:stretch}
  .react-inventory__vendor-order{order:5}
  .react-inventory__vendor-memo{grid-template-columns:1fr}
  .react-inventory__deleted article{align-items:stretch;flex-direction:column}
  .react-inventory__deleted article button{width:100%}
  .react-inventory__unit-settings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .react-inventory__toolbar,.react-inventory__metrics.five{grid-template-columns:1fr}
  .react-inventory__tabs,.react-inventory__toolbar-actions{grid-column:auto}
  .react-inventory__tabs button{flex:1}
  .react-inventory__metric strong{font-size:18px}
  .react-inventory__unit-settings{grid-template-columns:1fr}
}