/* ==========================================================================
   ONLINE ORDER MANAGEMENT (#/orders and its sub-pages)

   Scoped entirely to the .om-* namespace so nothing here can reach another
   module. Every colour, radius, shadow and font comes from css/tokens.css —
   no new palette is introduced.

   Layout mirrors the rest of the ERP: KPI strip on top, a card holding the
   working table, a narrow right rail, then a grid of module cards.
   ========================================================================== */

:root{
  --om-section:16px;   /* gap between the page's stacked sections */
  --om-gap:14px;       /* gap inside a grid                       */
  --om-rail:236px;     /* width of the summary rail               */
  --om-kpi-val:25px;   /* KPI amount size — steps down on narrow viewports
                          so a one-line amount never overflows its card */
}

/* --- KPI strip ----------------------------------------------------------- */
.om-kpis{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--om-gap);margin-bottom:var(--om-section);align-items:stretch;
}
/* A strip carries as many columns as it has cards. Without this a four-card
   strip (payments, shipping, invoices…) sat in four of six columns, leaving a
   third of the row empty and each card too narrow to hold "৳ 19,54,900" on one
   line. The six-card dashboard strip is unaffected. */
.om-kpis--n3{grid-template-columns:repeat(3,minmax(0,1fr));}
.om-kpis--n4{grid-template-columns:repeat(4,minmax(0,1fr));}
.om-kpis--n5{grid-template-columns:repeat(5,minmax(0,1fr));}
.om-kpi{
  display:flex;align-items:flex-start;gap:12px;min-width:0;
  padding:15px 16px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .16s,box-shadow .16s,border-color .16s;
  text-align:left;width:100%;
}
.om-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0d5;}
.om-kpi__art{
  width:46px;height:46px;flex:none;border-radius:14px;
  display:grid;place-items:center;
}
.om-kpi__txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.om-kpi__lbl{
  font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* white-space:nowrap kept the amount on one line but also guaranteed that a
   figure too wide for its card left the card instead of wrapping - on the API
   sync screen "98.22%" ran 73px past the edge. Dropping nowrap and adding the
   standard backstop lets a figure that fits stay on one line anyway (bdt()
   joins symbol and digits with a non-breaking space, and digit groups carry no
   break opportunity), while one that cannot fit wraps inside the card. */
.om-kpi__val{
  font-family:var(--font-en);font-size:25px;font-weight:700;
  line-height:1.1;color:#12261a;letter-spacing:-.5px;min-width:0;overflow-wrap:anywhere;
}
/* Monetary values only. Same 25px as every other KPI figure by default, so the
   design is untouched; the responsive block near the end of this file steps it
   down only where a card is too narrow to hold a full amount on one line. */
.om-kpi__val--cur{font-size:var(--om-kpi-val,25px);}
.om-kpi__delta{font-family:var(--font-en);font-size:12px;font-weight:600;margin-top:1px;}
.om-kpi__delta--up{color:var(--success);}
.om-kpi__delta--down{color:var(--danger);}

.om-kpi--blue   .om-kpi__art{background:#e8f0fe;color:#1b5fb8;}
.om-kpi--amber  .om-kpi__art{background:#fdf3e3;color:#b45309;}
.om-kpi--purple .om-kpi__art{background:#f2ecfc;color:var(--purple);}
.om-kpi--teal   .om-kpi__art{background:#e4f5ef;color:#0e7490;}
.om-kpi--green  .om-kpi__art{background:var(--green-050);color:var(--green-600);}
.om-kpi--red    .om-kpi__art{background:var(--danger-bg);color:var(--danger);}

/* --- main area: the working card, full width ----------------------------- */
.om-main{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--om-gap);align-items:start;margin-bottom:var(--om-section);
}
.om-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.om-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;flex-wrap:wrap;
}
.om-panel__head h3{margin:0;font-size:16px;font-weight:600;color:#18251d;}
.om-panel__tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

/* date-range control — same shape as the header date button */
.om-range{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;
  border:1px solid var(--border);border-radius:9px;background:#fff;
  font-size:12.5px;font-weight:500;color:#3d4a42;transition:.14s;
}
.om-range:hover{border-color:var(--green-400);color:var(--green-700);}
.om-range__txt{font-family:var(--font-en);}

/* --- module tab rail ------------------------------------------------------
   The Online Order Management modules as one horizontal row, replacing the old
   sidebar dropdown. Values are copied from .cw-tabs / .cw-tab in
   css/cow-management.css so the rail is visually identical to the Cow
   Management one; the class names differ because .om-tabs below is already
   taken by the order-status strip inside the desk panel. */
.om-modnav{margin-bottom:var(--om-section);overflow:hidden;}
/* The thirteen modules are not required to fit on one line — they wrap onto a
   second row rather than scrolling sideways, so every module is visible at
   once. Tabs keep their own labels on a single line (white-space:nowrap on
   .om-modtab below); it is the row that wraps, not the text. */
.om-modtabs{display:flex;flex-wrap:wrap;align-items:stretch;}
.om-modtab{
  flex:none;padding:13px 17px;background:none;border:0;
  border-right:1px solid var(--border);border-bottom:2px solid transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;
  color:var(--muted);white-space:nowrap;cursor:pointer;transition:.14s;
}
.om-modtab:hover{background:var(--green-050);color:var(--green-600);}
.om-modtab.is-active{color:var(--green-600);border-bottom-color:var(--green-500);background:var(--surface);}

/* --- status tabs --------------------------------------------------------- */
.om-tabs{
  display:flex;gap:4px;padding:0 18px;overflow-x:auto;
  border-bottom:1px solid var(--border);scrollbar-width:thin;
}
.om-tab{
  position:relative;flex:none;padding:9px 14px 11px;font-size:13px;font-weight:600;
  color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;
  white-space:nowrap;transition:.14s;border-radius:8px 8px 0 0;
}
.om-tab:hover{color:var(--green-700);background:#f7faf8;}
.om-tab.is-on{color:var(--green-600);border-bottom-color:var(--green-500);}
.om-tab__n{font-family:var(--font-en);font-weight:700;}

/* --- table --------------------------------------------------------------- */
.om-panel .tbl-wrap{border:0;border-radius:0;box-shadow:none;}
.om-tbl{min-width:1000px;}
.om-tbl th{white-space:nowrap;background:#fbfcfb;}
.om-tbl td{padding:11px 16px;vertical-align:middle;}
.om-tbl tr.is-on{background:var(--green-050);}
.om-tbl .om-c-check{width:38px;padding-right:0;}
.om-oid{
  font-family:var(--font-en);font-size:13px;font-weight:600;color:var(--green-600);
  white-space:nowrap;
}
.om-oid:hover{text-decoration:underline;}
.om-when{white-space:nowrap;font-size:13px;color:#37453d;}
.om-when small{display:block;font-size:11.5px;color:var(--muted-2);margin-top:1px;}
.om-who b{display:block;font-size:13.5px;font-weight:600;color:#22302a;white-space:nowrap;}
.om-who span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;}
.om-phone{font-family:var(--font-en);font-size:13px;color:#37453d;white-space:nowrap;}
.om-amt{font-family:var(--font-en);font-size:13.5px;font-weight:600;color:#16241c;white-space:nowrap;}
.om-ship{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#3d4a42;white-space:nowrap;}
.om-ship__ico{color:var(--green-600);display:inline-flex;}
.om-empty{text-align:center;padding:44px 16px;color:var(--muted);font-size:13.5px;}

/* checkbox */
.om-cb{
  width:16px;height:16px;border:1.6px solid var(--border-strong);border-radius:4px;
  background:#fff;display:inline-grid;place-items:center;cursor:pointer;transition:.14s;
  flex:none;color:transparent;
}
.om-cb:hover{border-color:var(--green-400);}
.om-cb.is-on{background:var(--green-500);border-color:var(--green-500);color:#fff;}

/* row action buttons */
.om-act{white-space:nowrap;text-align:right;}
.om-ib{
  width:28px;height:28px;border-radius:7px;display:inline-grid;place-items:center;
  color:#7c8a82;transition:.14s;vertical-align:middle;
}
.om-ib:hover{background:#eef4f0;color:var(--green-700);}
.om-ib--more{font-size:16px;line-height:1;font-weight:700;}

/* --- status pills --------------------------------------------------------
   The module needs more hues than the five shared .tag--* tones, so it adds
   its own. Colour comes from the status CODE, never from the label, which is
   why translating a status can never change its colour.                     */
.om-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.6;
}
.om-pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.om-pill--green {background:var(--success-bg);color:#15803d;}
.om-pill--amber {background:var(--warning-bg);color:#b45309;}
.om-pill--red   {background:var(--danger-bg);color:#b3312a;}
.om-pill--blue  {background:var(--info-bg);color:#1d4ed8;}
.om-pill--purple{background:var(--purple-bg);color:#6b3fc4;}
.om-pill--cyan  {background:#e4f5ef;color:#0e7490;}
.om-pill--grey  {background:#f1f3f2;color:#5b6a61;}

/* --- table footer + pager ------------------------------------------------ */
.om-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:13px 18px;border-top:1px solid var(--border);
}
.om-foot__info{font-size:12.5px;color:var(--muted);}
.om-foot__per{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);}
.om-foot__per .inp{height:32px;width:auto;padding:0 8px;font-size:12.5px;}
.om-pg{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.om-pg__b{
  min-width:32px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--border);
  background:#fff;font-family:var(--font-en);font-size:12.5px;font-weight:600;color:#4b5a51;
  transition:.14s;
}
.om-pg__b:hover:not([disabled]):not(.is-on){border-color:var(--green-400);color:var(--green-700);}
.om-pg__b.is-on{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.om-pg__b[disabled]{opacity:.4;cursor:not-allowed;}
.om-pg__gap{padding:0 2px;color:var(--muted-2);font-size:13px;}

/* --- summary rail -------------------------------------------------------- */
.om-rail{display:flex;flex-direction:column;gap:var(--om-gap);min-width:0;}
.om-sum{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px;}
.om-sum__row{
  display:flex;align-items:center;gap:10px;padding:8px 2px;width:100%;text-align:left;
  border-radius:9px;transition:background .12s;
}
.om-sum__row:hover{background:#f7faf8;}
.om-sum__ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;}
.om-sum__lbl{flex:1;min-width:0;font-size:12.5px;color:#43514a;line-height:1.35;}
.om-sum__val{font-family:var(--font-en);font-size:13px;font-weight:700;color:#16241c;white-space:nowrap;}

/* chart card */
.om-chart__head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.om-chart__head .inp{height:30px;width:auto;padding:0 26px 0 9px;font-size:12px;}
.om-chart{position:relative;width:100%;margin-top:4px;}
.om-chart svg{display:block;width:100%;height:auto;overflow:visible;}
.om-chart__dot{cursor:pointer;transition:r .12s;}
.om-chart__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:11px;border-top:1px solid var(--border);
}
.om-chart__total{font-size:12px;color:var(--muted);}
.om-chart__total b{font-family:var(--font-en);font-size:13px;color:#16241c;margin-left:3px;}
.om-chart__delta{font-family:var(--font-en);font-size:12.5px;font-weight:700;color:var(--success);}

/* --- module card grid ---------------------------------------------------- */
/* The module cards now sit between the KPI rows and the working table rather
   than at the foot of the page, so they carry the same bottom spacing every
   other stacked section has. Columns, gap and card design are unchanged. */
.om-mods{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--om-gap);
  margin-bottom:var(--om-section);
}
.om-mod{
  display:flex;align-items:flex-start;gap:12px;padding:15px 16px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s,border-color .16s;
}
.om-mod:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0d5;}
.om-mod--wide{grid-column:1/-1;}
.om-mod__art{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;}
.om-mod__txt{min-width:0;}
.om-mod__ttl{display:block;font-size:14px;font-weight:600;color:#1c2b23;line-height:1.35;}
.om-mod__sub{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:3px;}

.om-mod--c1 .om-mod__art{background:#e8f0fe;color:#1b5fb8;}
.om-mod--c2 .om-mod__art{background:var(--green-050);color:var(--green-600);}
.om-mod--c3 .om-mod__art{background:#e4f5ef;color:#0e7490;}
.om-mod--c4 .om-mod__art{background:#fdf3e3;color:#b45309;}
.om-mod--c5 .om-mod__art{background:#f2ecfc;color:var(--purple);}
.om-mod--c6 .om-mod__art{background:var(--danger-bg);color:var(--danger);}

/* --- filter bar (sub-pages) ---------------------------------------------- */
.om-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;padding:15px 18px;}
.om-field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:0 0 180px;}
.om-field--grow{flex:1 1 230px;}
.om-field--btn{flex:none;}
.om-field__lbl{font-size:12px;font-weight:600;line-height:1.2;color:var(--ink-2);}
.om-field .inp{width:100%;}
.om-search{display:flex;align-items:stretch;min-width:0;}
.om-search .inp{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0;}
.om-search__go{flex:none;display:grid;place-items:center;padding:0 15px;border-top-left-radius:0;border-bottom-left-radius:0;}

.om-actions{
  display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;
  gap:10px;margin-bottom:var(--om-section);
}
.om-actions .btn{display:inline-flex;align-items:center;gap:7px;}
.om-actions__left{margin-right:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.om-bulk{font-size:12.5px;color:var(--muted);}
.om-bulk b{font-family:var(--font-en);color:var(--green-700);}

/* --- order detail modal -------------------------------------------------- */
.om-dt{display:flex;flex-direction:column;gap:16px;}
.om-dt__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.om-box{border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;background:#fbfcfb;}
.om-box h4{margin:0 0 9px;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:none;}
.om-box__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px;}
.om-box__k{color:var(--muted);flex:none;}
.om-box__v{color:#22302a;font-weight:600;text-align:right;min-width:0;word-break:break-word;}
.om-box__v.en{font-family:var(--font-en);}

.om-lines{width:100%;border-collapse:collapse;}
.om-lines th{
  text-align:left;padding:8px 10px;font-size:11.5px;font-weight:600;color:var(--muted);
  background:#f8faf9;border-bottom:1px solid var(--border);
}
.om-lines td{padding:9px 10px;font-size:13px;border-bottom:1px solid #f1f3f2;color:#2c3a32;}
.om-lines tfoot td{font-weight:700;color:#16241c;border-bottom:none;}
.om-lines .num{font-family:var(--font-en);text-align:right;white-space:nowrap;}

/* status timeline */
.om-track{display:flex;flex-direction:column;gap:0;margin:2px 0 0;}
.om-step{display:flex;gap:11px;min-height:44px;}
.om-step__rail{display:flex;flex-direction:column;align-items:center;flex:none;width:20px;}
.om-step__dot{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);
  background:#fff;flex:none;display:grid;place-items:center;color:#fff;
}
.om-step__line{width:2px;flex:1;background:var(--border);min-height:12px;}
.om-step__txt{padding-bottom:14px;min-width:0;}
.om-step__ttl{display:block;font-size:13px;font-weight:600;color:#8b978f;line-height:1.4;}
.om-step__sub{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px;}
.om-step.is-done .om-step__dot{background:var(--green-500);border-color:var(--green-500);}
.om-step.is-done .om-step__line{background:var(--green-400);}
.om-step.is-done .om-step__ttl{color:#22302a;}
.om-step.is-now .om-step__dot{background:var(--green-600);border-color:var(--green-600);box-shadow:0 0 0 4px rgba(24,144,72,.14);}
.om-step.is-now .om-step__ttl{color:var(--green-700);}
.om-step.is-off .om-step__dot{background:var(--danger);border-color:var(--danger);}
.om-step.is-off .om-step__ttl{color:#b3312a;}
.om-step:last-child .om-step__line{display:none;}

/* --- tracking page ------------------------------------------------------- */
.om-track-head{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.om-track-head .om-field{flex:1 1 260px;}
.om-hero{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid var(--border);background:#fbfdfc;
}
.om-hero__id{font-family:var(--font-en);font-size:17px;font-weight:700;color:var(--green-700);}
.om-hero__sub{font-size:12.5px;color:var(--muted);margin-top:3px;}

/* --- API health ---------------------------------------------------------- */
.om-api{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--om-gap);}
.om-api__card{padding:14px 15px;}
.om-api__ep{font-family:var(--font-en);font-size:13px;font-weight:600;color:#22302a;word-break:break-all;}
.om-api__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;}
.om-api__ms{font-family:var(--font-en);font-size:12px;color:var(--muted);}
.om-bar{height:6px;border-radius:4px;background:#eef1ef;overflow:hidden;margin-top:9px;}
.om-bar__fill{display:block;height:100%;border-radius:4px;background:var(--green-500);}
.om-bar__fill--warn{background:var(--warning);}
.om-bar__fill--bad{background:var(--danger);}

/* --- responsive ---------------------------------------------------------- */
@media(max-width:1500px){
  .om-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:1320px){
  .om-main{grid-template-columns:minmax(0,1fr);}
  .om-rail{flex-direction:row;flex-wrap:wrap;}
  .om-rail > *{flex:1 1 300px;}
  .om-mods{grid-template-columns:repeat(3,minmax(0,1fr));}
  .om-api{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1024px){
  .om-mods{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .om-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .om-mods{grid-template-columns:1fr;}
  .om-mod--wide{grid-column:auto;}
  .om-api{grid-template-columns:1fr;}
  .om-panel__head{align-items:flex-start;flex-direction:column;}
  .om-panel__tools{width:100%;}
  .om-dt__grid{grid-template-columns:1fr;}
  .om-foot{justify-content:center;}
  .om-rail > *{flex:1 1 100%;}
}
@media(max-width:480px){
  .om-kpis{grid-template-columns:1fr;}
}

/* KPI amount sizing. These come last in the responsive section so they win over
   the steps above, and they touch ONLY .om-kpi__val--cur — plain count figures
   keep their 25px at every width. Each step is the point at which the card in
   the layout above stops being wide enough for a full amount on one line. */
/* The band where the KPI grid is still at its widest column count but the cards
   have narrowed enough that a full amount no longer fits on one line at 25px. */
@media(min-width:1201px) and (max-width:1600px){
  :root{--om-kpi-val:22px;}
}
@media(max-width:1200px){
  :root{--om-kpi-val:22px;}
}
@media(max-width:900px){
  :root{--om-kpi-val:20px;}
}
@media(max-width:480px){
  :root{--om-kpi-val:25px;}   /* back to one column — full size fits again */
}
@media print{
  .om-actions,.om-panel__tools,.om-tabs,.om-modnav,.om-foot,.om-act,.om-c-check{display:none !important;}
}