/* Ignitor OMS screens drawn in HTML (partials/oms-screens.php). They copy the real
   product's look. Sizes are in em and 1em follows the screen's width, so a screen
   scales like a picture. */
.oms-fit{container-type:inline-size;width:100%;border-radius:16px;overflow:hidden;background:#F2F0EC;box-shadow:0 0 0 1px rgba(21,21,26,.08),0 30px 70px -40px rgba(21,21,26,.45)}
.oms{--o-ink:#15191A;--o-mute:#6B7072;--o-line:#E7E5E1;--o-bg:#F2F0EC;--o-teal:#1D4A42;
  display:grid;grid-template-columns:4.6em 1fr;height:64em;font-family:Geist,'Plus Jakarta Sans',system-ui,sans-serif;font-size:calc(100cqw / 116);line-height:1.3;color:var(--o-ink);background:var(--o-bg);text-align:left;overflow:hidden}
.oms.s-dashboard{height:58em}
.oms.s-orders{height:54em}
.oms.s-cod{height:47em}
.oms.s-shipping{height:49em}
.oms.s-inventory{height:53em}
.oms.s-customers{height:45em}
.oms.s-inbox{height:46em}
.oms.s-campaigns{height:48em}
.oms.s-stores{height:54em}
.oms.s-reports{height:51em}
.oms *{box-sizing:border-box}
.oms h4,.oms h5,.oms p{margin:0}
.oms u{text-decoration:none}
.oms i,.oms em{font-style:normal}
.oms hr{height:1px;margin:.9em 0;border:0;background:var(--o-line)}

.o-rail{display:flex;flex-direction:column;align-items:center;gap:.1em;padding:5.4em 0 .6em;background:#0E2A27;color:#D5E2DF}
.o-rail i{display:grid;place-items:center;width:3.3em;height:2.9em;border-radius:.6em;flex:none}
.o-rail i.on{background:#25584F;color:#fff}
.o-rail svg{width:1.7em;height:1.7em}

.o-main{min-width:0;display:flex;flex-direction:column}
.o-top{display:flex;align-items:center;justify-content:space-between;gap:1em;height:4.4em;flex:none;padding:0 1.6em;background:#fff;border-bottom:1px solid var(--o-line)}
.o-ws{display:inline-flex;align-items:center;gap:.6em;padding:.5em .8em;border:1px solid var(--o-line);border-radius:.6em;font-size:1.1em;font-weight:600;white-space:nowrap}
.o-ws img,.o-me img{display:block;width:1.5em;height:1.5em}
.o-ws em{width:.5em;height:.5em;margin-left:.3em;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(45deg) translate(-.1em,-.1em)}
.o-find{display:flex;align-items:center;justify-content:space-between;width:38em;max-width:44%;padding:.55em 1em;border-radius:99px;background:#F1F0ED;color:var(--o-mute);font-size:1.08em;white-space:nowrap;overflow:hidden}
.o-find kbd{padding:.05em .4em;border:1px solid #D9D7D2;border-radius:.3em;background:#fff;font:inherit;font-size:.82em}
.o-me{display:inline-flex;align-items:center;gap:.6em;font-size:1.1em;font-weight:600;white-space:nowrap}
.o-bell{width:.9em;height:.9em;margin-right:.5em;border-radius:50%;background:#2F7DE1;box-shadow:0 0 0 2px #fff}
.o-crumb{flex:none;padding:.7em 2.1em;background:#E3F1ED;color:#55605D;font-size:1.08em}
.o-crumb em{margin:0 .4em}
.o-crumb b{color:var(--o-ink);font-weight:600}
.o-page{flex:1;min-height:0;padding:1.5em 2.2em;overflow:hidden}
.o-head{display:flex;justify-content:space-between;gap:1.5em;margin-bottom:1.2em}
.o-head h4{font-size:2.1em;font-weight:600;letter-spacing:-.02em}
.o-head p{margin-top:.2em;color:var(--o-mute);font-size:1.18em}
.o-acts{display:flex;align-items:center;gap:.6em}
.o-acts u,.o-act{padding:.55em .9em;border:1px solid #CFCDC8;border-radius:.55em;background:#fff;color:var(--o-ink);font-size:1.06em;font-weight:600;white-space:nowrap}
.o-acts u.main{border-color:#1D4A42;background:#1D4A42;color:#fff}
.o-sel{display:inline-block;padding:.55em 2em .55em .9em;border:1px solid var(--o-line);border-radius:.55em;background:#fff;font-size:1.06em;white-space:nowrap}

.o-card{min-width:0;padding:1.3em 1.5em;border:1px solid var(--o-line);border-radius:1em;background:#fff}
.o-card.flush{padding:0;overflow:hidden}
.o-card h5{margin-bottom:.7em;font-size:1.3em;font-weight:600}
.o-up{display:block;color:var(--o-mute);font-size:1em;font-weight:500;letter-spacing:.05em}
.o-big{font-size:3em;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.o-row{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.42em 0;font-size:1.16em}
.o-row b{font-weight:600}
.g{color:#047857}.o{color:#C2570C}.r{color:#B91C1C}
.o-row .g,.o-row .o,.o-row .r{font-weight:600}
.o-even{display:grid;grid-template-columns:1fr 1fr;gap:1em}

.o-tag{display:inline-block;padding:.16em .62em;border-radius:99px;border:1px solid transparent;background:#EFEEEC;color:#4B4F52;font-size:1em;font-weight:600;white-space:nowrap}
.o-tag.ok{background:#E6F8F0;border-color:#BDEBD6;color:#047857}
.o-tag.warn{background:#FDF2D6;border-color:#F4DFA4;color:#A1590A}
.o-tag.bad{background:#FDE8EC;border-color:#F8C9D3;color:#BE123C}
.o-tag.blue{background:#E6F4FB;border-color:#C2E3F4;color:#0B6BA0}
.o-tag.violet{background:#F2E9FD;border-color:#E3D2F8;color:#7029C9}
.o-tag.cyan{background:#E0F7FB;border-color:#BCEBF3;color:#0E7490}
.o-tag.orange{background:#FDEBDD;border-color:#F8D3B6;color:#B4470B}

/* Dashboard */
.o-dash{display:grid;grid-template-columns:1fr 1fr .86fr;gap:1em}
.o-col1,.o-col2,.o-col3{display:grid;gap:1em;align-content:start;min-width:0}
.o-duo{display:grid;grid-template-columns:1fr 1fr}
.o-duo small{display:block;color:var(--o-mute);font-size:1.08em}
.o-duo b{font-size:1.7em;font-weight:600}
.o-mini div{font-size:2em;font-weight:700}
.o-mini h5{margin-bottom:.3em}
.o-inproc{display:flex;justify-content:space-between;align-items:flex-start}
.o-inproc u{padding:.5em .9em;border:1px solid #CFCDC8;border-radius:.55em;font-size:.98em;font-weight:600}
.o-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em;margin-top:.7em}
.o-tiles div{padding:.5em .2em;border-radius:.55em;text-align:center}
.o-tiles small{display:block;font-size:.88em;font-weight:600;line-height:1.15;min-height:2.3em}
.o-tiles b{font-size:1.45em;font-weight:700}
.o-chart{display:block;width:100%;height:10.5em}
.o-legend{display:flex;justify-content:center;gap:1.1em;margin-top:.5em;font-size:.98em;white-space:nowrap}
.o-legend span{display:inline-flex;align-items:center;gap:.4em}
.o-legend i{width:.7em;height:.7em;border-radius:50%}
.o-map{display:block;width:100%;height:18em;background:#F2F0EC;border-radius:.5em}

/* Lists */
.o-tabs{display:flex;gap:1.5em;padding:0 1.5em;border-bottom:1px solid var(--o-line);overflow:hidden}
.o-tabs span{padding:1em 0 .85em;color:#5C6163;font-size:1.14em;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.o-tabs span.on{color:var(--o-ink);font-weight:600;border-color:#1D4A42}
.o-tabs b{display:inline-block;padding:0 .45em;border-radius:99px;background:#EFEEEC;font-size:.82em;font-weight:600}
.o-tabs span.on b{background:#1D4A42;color:#fff}
.o-tabs.caps span{font-size:1.02em;font-weight:600;letter-spacing:.05em}
.o-filters{display:flex;gap:.6em;padding:.9em 1.2em}
.o-filters i{padding:.6em .9em;border:1px solid var(--o-line);border-radius:.55em;font-size:1.08em;color:#55595B;white-space:nowrap}
.o-filters i.grow{flex:1;color:#8B8F91}
.o-table{display:grid;font-size:1.08em}
.o-tr{display:grid;grid-template-columns:var(--cols);align-items:center;gap:.7em;min-height:3.25em;padding:0 1.2em;border-top:1px solid var(--o-line)}
.o-tr span{min-width:0;display:flex;align-items:center;gap:.5em;white-space:nowrap;overflow:hidden}
.o-tr.head{min-height:2.4em;background:#F8F7F5;color:#55595B;font-weight:600}
.o-tr.head span{font-size:.86em;letter-spacing:.03em}
.o-tr b{font-weight:600}
.o-tr small{color:var(--o-mute);font-size:.94em}
.o-tr .o-tag{font-size:.84em}
.o-stack{min-width:0}
.o-stack>*{display:block;overflow:hidden;text-overflow:ellipsis}
.o-ono{color:#1D4A42;font-size:1.08em}
.o-prob{color:#C2570C;font-size:.92em;font-weight:600}
.o-box{display:block;width:1.05em;height:1.05em;border:1.5px solid #B9B7B2;border-radius:.2em}
.o-face{--h:280;display:grid;place-items:center;flex:none;width:2.5em;height:2.5em;border-radius:50%;background:hsl(var(--h) 80% 90%);color:hsl(var(--h) 60% 34%);font-size:.86em;font-weight:700}
.o-prog{display:block;flex:1;height:.42em;border-radius:99px;background:#ECEAE6;overflow:hidden}
.o-prog u{display:block;height:100%;border-radius:99px;background:#2C7A6B}
.o-docs{display:flex;gap:.25em}
.o-docs u{width:1.45em;height:1.45em;border:1px solid var(--o-line);border-radius:.25em;background:#F7F6F4}
.o-act{padding:.3em .65em;font-size:.9em}
.o-note{margin-bottom:.9em;padding:.8em 1.2em;border:1px solid #F4DFA4;border-radius:.7em;background:#FDF7E3;color:#7A4A07;font-size:1.14em}
.o-note b{font-weight:600}
.o-states{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.o-state{padding:.9em 1em;border:1px solid var(--o-line);border-radius:.7em}
.o-state p{margin-top:.5em;font-size:1.1em}
.o-state em{display:block;margin-top:.25em;color:#1D5C50;font-size:1.06em;font-weight:500}
.o-page>.o-card~.o-card{margin-top:.9em}

/* Inventory */
.o-inv{display:grid;grid-template-columns:.9fr 1.7fr;gap:.9em;margin-bottom:.9em}
.o-hero{display:flex;flex-direction:column;padding:1.5em;border-radius:1em;background:linear-gradient(135deg,#1F5A50,#163A35);color:#fff}
.o-live{align-self:flex-start;margin-bottom:1em;padding:.2em .7em;border:1px solid rgba(255,255,255,.3);border-radius:99px;font-size:.92em;font-weight:600;letter-spacing:.08em}
.o-hero small{display:block;font-size:.96em;letter-spacing:.06em;color:#CFE3DD}
.o-hero>div{font-size:3em;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.o-hero em{color:#CFE3DD;font-size:1.04em}
.o-hero ul{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:.8em;margin:auto 0 0;padding:1em 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.2)}
.o-hero li b{font-size:1.25em;font-weight:700;white-space:nowrap}
.o-hero li small{font-size:.8em}
.o-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em}
.o-stats.four{grid-template-columns:repeat(4,1fr);margin-bottom:.9em}
.o-stat{padding:1em 1.2em}
.o-stat b{display:block;font-size:2em;font-weight:700;white-space:nowrap}
.o-stat span{color:var(--o-mute);font-size:1.02em}
.o-move{display:flex;align-items:center;gap:.8em;padding:.5em 0;border-top:1px solid var(--o-line);font-size:1.08em}
.o-move .o-tag{font-size:.8em}
.o-move div{flex:1;min-width:0}
.o-move b{display:block;font-weight:600}
.o-move small{color:var(--o-mute)}
.o-move strong{color:#047857;font-weight:600}
.o-thumb{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.5em;background:#D6ECE6;color:#1D4A42;font-size:.86em;font-weight:700}

/* Shipments */
.o-strip{display:grid;grid-template-columns:repeat(8,1fr);margin-bottom:.9em;padding:0}
.o-strip div{padding:.8em 1em;border-left:1px solid var(--o-line)}
.o-strip div:first-child{border-left:0}
.o-strip small{display:block;color:var(--o-mute);font-size:.84em;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.o-strip b{font-size:1.4em;font-weight:600;white-space:nowrap}

/* Inbox */
.o-inbox{display:grid;grid-template-columns:24em 1fr 19em}
.o-il{padding:1em;border-right:1px solid var(--o-line)}
.o-field{display:block;padding:.55em .8em;border:1px solid var(--o-line);border-radius:.5em;color:#8B8F91;font-size:1.04em}
.o-seg{display:flex;justify-content:space-around;margin:.7em 0;padding:.25em;border-radius:.5em;background:#F4F3F0;font-size:1em}
.o-seg b{padding:.15em .8em;border-radius:.4em;background:#fff;font-weight:600}
.o-seg span{padding:.15em .3em;color:var(--o-mute);white-space:nowrap}
.o-who{display:flex;align-items:center;gap:.7em;padding:.7em .5em;border-top:1px solid var(--o-line)}
.o-who.on{background:#EEF7F4}
.o-who>i,.o-ih>i:first-child{display:grid;place-items:center;flex:none;width:2.6em;height:2.6em;border-radius:50%;background:#F4E2F7;color:#8A2BA8;font-size:.92em;font-weight:700}
.o-who div{flex:1;min-width:0}
.o-who b{display:block;font-size:1.1em;font-weight:600}
.o-who small{display:block;color:var(--o-mute);font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-who em{color:var(--o-mute);font-size:.92em}
.o-ih{display:flex;align-items:center;gap:.7em;padding:.8em 1.2em;border-bottom:1px solid var(--o-line)}
.o-ih div{flex:1;min-width:0}
.o-ih b{display:block;font-size:1.2em;font-weight:600}
.o-ih small{color:var(--o-mute)}
.o-ih em{color:var(--o-mute);font-size:1em}
.o-msgs{display:flex;justify-content:flex-end;padding:1.3em;background:#FBFAF8}
.o-b{max-width:80%;padding:.9em 1.1em;border:1px solid #BFE0EE;border-radius:1em;background:#EDF8FC;font-size:1.14em}
.o-b small{display:block;margin-bottom:.3em;color:var(--o-mute);font-size:.8em;font-weight:600;letter-spacing:.05em}
.o-btns{display:flex;gap:.5em;margin-top:.7em}
.o-btns u{padding:.3em .8em;border:1px solid #BFE0EE;border-radius:.5em;background:#fff;color:#047857;font-weight:600}
.o-ir{display:grid;align-content:start;gap:.25em;padding:1em 1.2em;border-left:1px solid var(--o-line);font-size:1.06em}
.o-ir b{font-size:1.2em;font-weight:600}
.o-ir small{color:var(--o-mute)}
.o-ir .o-up{font-size:.84em}
.o-recent{margin:.7em 0;padding:.6em .8em;border:1px solid var(--o-line);border-radius:.6em}

/* Campaigns */
.o-alert{position:relative;padding:.9em 1.1em;border:1px solid var(--o-line);border-left:3px solid #E9A70F;border-radius:.6em}
.o-alert.blue{border-left-color:#38BDF8}
.o-alert b{font-size:1.2em;font-weight:600}
.o-alert .o-tag{position:absolute;right:1em;top:.8em;font-size:.86em}
.o-alert small{display:block;margin-top:.3em;color:var(--o-mute);font-size:1.04em}

/* Sync */
.o-chans{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;margin-bottom:.9em}
.o-chan{display:flex;align-items:center;gap:.6em;font-size:1.2em}
.o-chan i{width:.6em;height:.6em;border-radius:50%;background:#10B981}
.o-chan u{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.3em;background:#D6ECE6;color:#1D4A42;font-size:.7em;font-weight:700}
.o-chan b{flex:1;font-weight:600}
.o-chan .o-tag{font-size:.8em}
.o-chans small{display:block;margin:.3em 0 .4em;color:var(--o-mute);font-size:1em}
.o-chans .o-row{padding:.2em 0;font-size:1.06em}
.o-chans hr{margin:.5em 0}
.o-row small{color:var(--o-mute)}

/* Insights */
.o-range{display:flex;gap:.6em;margin:-.3em 0 .9em}
.o-widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}
.o-wid{position:relative;padding:.8em 1em}
.o-wid h5{margin-bottom:.45em;padding-bottom:.4em;border-bottom:1px solid var(--o-line);font-size:1.12em}
.o-wid b{display:block;font-size:1.6em;font-weight:700;white-space:nowrap}
.o-wid small{color:var(--o-mute);font-size:.92em}
.o-wid .o-chart{position:absolute;right:1em;bottom:.8em;width:5em;height:2.6em}
.o-trend{display:grid;grid-template-columns:2fr 1fr;gap:.8em;margin-top:.8em}
.o-trend .o-chart{height:8em}
.o-donut{width:8.4em;height:8.4em;margin:0 auto;border-radius:50%;background:conic-gradient(#1D4A42 0 46%,#2C7A6B 0 73%,#7ABDAE 0 100%);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}

@media (max-width:760px){
  /* A phone keeps the writing readable: swipe the screen sideways. */
  .oms-fit{overflow-x:auto;-webkit-overflow-scrolling:touch;container-type:normal;border-radius:14px}
  .oms{width:112em;height:60em;font-size:7px}
}
