/* =========================================================
   Eeventus Admin — gaya paparan Butiran pesanan (awalan .od-)
   Telefon dahulu: satu lajur (tindakan di atas); ≥ 1000 px: dua lajur (kiri pelanggan/item/bayaran, kanan tindakan/penghantaran/jejak).
   Sasaran sentuh ≥ 44 px; input ≥ 16 px (elak zum iOS); kontras ≥ 4.5:1 (token base.css).
   ========================================================= */
.od{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.od .btn,.od-dlg .btn{min-height:2.75rem}
.od .btn--sm,.od-dlg .btn--sm{min-height:2.5rem}
@media (max-width:900px),(pointer:coarse){.od .btn--sm,.od-dlg .btn--sm{min-height:2.75rem}}
.od .btn .ico,.od-dlg .btn .ico{flex:none;width:1.1rem;height:1.1rem}
.od-skel{display:flex;flex-direction:column;gap:.8rem}
.od-sk-t{height:1.9rem;width:62%}
.od-sk-l{height:1.1rem;width:42%}
.od-sk-c{height:7.5rem;border-radius:var(--r-lg)}
.od-sk-tall{height:15rem}
.od-err{display:flex;flex-direction:column;gap:.8rem;max-width:34rem}
.od-gone{margin-top:.2rem;text-align:center}
.od-gone__t{font-size:1.15rem;font-family:var(--font);font-weight:600;color:var(--ink)}

/* ---------- kepala ---------- */
.od-head{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.od-back{display:inline-flex;align-items:center;gap:.15rem;align-self:flex-start;min-height:2.75rem;margin:-.4rem 0 -.2rem -.35rem;padding:0 .7rem 0 .2rem;border-radius:var(--r-md);color:var(--plum-700);font-weight:500;text-decoration:none}
.od-back:hover{background:var(--lilac-100);color:var(--plum-900)}
.od-back .ico{width:1.2rem;height:1.2rem}
.od-name{font-family:var(--font-head);font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;outline-offset:4px}
.od-idrow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.od-id{font-size:.95rem;font-weight:600;color:var(--plum-900);letter-spacing:.02em}
.od-amt{margin-left:auto;font:600 1.2rem/1.2 var(--font-head);color:var(--plum-900);white-space:nowrap}
.od-pills{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.od-age{margin:0}

/* ---------- makluman ---------- */
.od-notices{display:flex;flex-direction:column;gap:.5rem}
.od-notice{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.od-notice__main{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.od-notice__t{overflow-wrap:anywhere}
.od-notice__acts{display:flex;gap:.4rem;flex-wrap:wrap}
.od-notice__x{margin-left:auto;min-width:2.75rem;padding:.25rem;color:inherit}
.alert.alert--info.od-alert--violet{background:var(--violet-bg);border-color:#d3c2ee;color:#3f2a68}

/* ---------- susun atur ---------- */
.od-body{min-width:0}
.od-col{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.od-body.is-wide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.25rem;align-items:start}
.od-card{min-width:0}
.od-ch{padding:.4rem .6rem .4rem 1rem;min-height:3.25rem}
.od-ch h2{font-size:1rem}
.od-cb,.od-ib,.od-pb,.od-sb,.od-tb{padding:1rem}
.od-sh{margin:1rem 0 .4rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.od-cb>.od-sh:first-child{margin-top:0}

/* ---------- tindakan ---------- */
.od-actions{display:flex;flex-direction:column;gap:.75rem;padding:.9rem;border-top:3px solid var(--plum-600)}
.od-main .btn{width:100%}
.od-primary{min-height:3.25rem!important;font-size:1.02rem;font-weight:600}
.od-secrow{display:flex;flex-wrap:wrap;gap:.5rem}
.od-secrow .btn{flex:1 1 auto;white-space:nowrap}
.od-secrow--stack .btn{flex:1 1 100%;white-space:normal}
.od-lockmsg,.od-pendmsg{margin:0;color:var(--ink-soft);font-size:.875rem}
.od-lockmsg{color:var(--bad);font-weight:500}
.od-noteline{display:flex;align-items:flex-start;gap:.5rem;margin:0;color:var(--ink-soft);font-size:.9rem}
.od-noteline .ico{flex:none;margin-top:.15rem;color:var(--ok)}
.od-more{border-radius:var(--r-md)}
.od-more>summary{justify-content:center;border-color:var(--line);background:transparent;color:var(--ink-soft)}
.od-more>summary:hover{background:var(--lilac-50)}
.od-more[open]>summary{border-radius:var(--r-md) var(--r-md) 0 0;border-bottom-color:transparent;background:var(--lilac-50)}
.od-more__list{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md)}
.od-more__list{display:flex;flex-direction:column;gap:.5rem;padding:.7rem}
.od-more__list p{margin:0}
.od-more__item{justify-content:flex-start;text-align:left}

/* ---------- semak sebelum hantar ---------- */
.od-flaglist{list-style:none;margin:0;padding:.2rem 1rem .5rem}
.od-flaglist li{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-soft)}
.od-flaglist li:first-child{border-top:0}
.od-flaglist .chip{flex:none;margin-top:.1rem}

/* ---------- pelanggan ---------- */
.od-cname{margin:0;font-weight:600;font-size:1.05rem;overflow-wrap:anywhere}
.od-cphone{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 0;font-size:1rem}
.od-cphone .ico{width:1.1rem;height:1.1rem;color:var(--muted)}
.od-tel{overflow-wrap:anywhere}
.od-cemail{margin:.1rem 0 0;font-size:.875rem;overflow-wrap:anywhere}
.od-contact{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.od-contact .btn{flex:1 1 9rem}
.od-cnote{margin-top:.9rem;padding:.7rem .85rem;background:var(--warn-bg);border-left:4px solid #d99a2b;border-radius:.5rem;color:#4a2a00}
.od-cnote__h{display:flex;align-items:center;gap:.4rem;font-size:.8125rem}
.od-cnote__h .ico{width:1rem;height:1rem}
.od-cnote__t{margin:.3rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem}
.od-addr{display:block;font-style:normal;padding:.7rem .85rem;background:var(--lilac-50);border:1px solid var(--line);border-radius:var(--r-md);line-height:1.5;overflow-wrap:anywhere}
.od-addr__l{display:block}
.od-addr-acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem}
.od-addr-acts .btn{flex:1 1 8rem}
.od-rel__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.od-relrow{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .6rem;min-height:2.75rem;padding:.3rem .55rem;border-radius:var(--r-sm);color:inherit;text-decoration:none;border:1px solid transparent}
.od-relrow:hover{background:var(--lilac-50);border-color:var(--line)}
.od-relrow__id{font-weight:600;color:var(--plum-700)}
.od-relrow__a{font-weight:600}
.od-relrow__w{margin-left:auto}

/* ---------- item & jumlah ---------- */
.od-tbl{width:100%;border-collapse:collapse}
.od-tbl td,.od-tbl th{padding:.55rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.od-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.od-it__n{overflow-wrap:anywhere;padding-right:.8rem!important}
.od-it__s{display:block;font-size:.78rem;color:var(--muted)}
.od-tot th,.od-tot td{border-bottom:0;border-top:2px solid var(--line-strong);padding-top:.7rem;font-size:1.05rem;font-weight:700;color:var(--plum-900)}

/* ---------- bayaran & penghantaran ---------- */
.od-cod{display:flex;align-items:center;gap:.65rem;margin:0 0 .9rem;padding:.8rem .9rem;border-radius:var(--r-md);background:var(--warn-bg);color:#6d3d00;font-size:1.15rem;font-weight:600;line-height:1.3}
.od-cod .ico{flex:none;width:1.4rem;height:1.4rem}
.od-cod--ok{background:var(--ok-bg);color:#154d33;font-size:1rem}
.od-cod--bad{background:var(--bad-bg);color:#7a1a14;font-size:1rem}
.od-refund{margin-top:.9rem;display:flex;flex-direction:column;gap:.15rem}
.od-refund+.btn{margin-top:.6rem;width:100%}
.od-idc{gap:.4rem;min-width:0;align-items:center}
.od-dt--c{padding-top:.65rem}
.od-idc .od-copy{flex:none;white-space:nowrap}
.od-wrapany{overflow-wrap:anywhere;min-width:0}
.od-miss{color:var(--warn);font-weight:600}
.od-sb .btn{margin-top:.8rem}
.od-moreinfo>summary{min-height:3rem;padding:0 1rem}
.od-moreinfo[open]>summary{border-bottom:1px solid var(--line)}
.od-moreinfo .card__body{padding:1rem}

/* ---------- jejak aktiviti ---------- */
.od-noteform{display:flex;flex-direction:column;gap:.6rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.od-note-ta{min-height:4.2rem}
.od-noteform__foot{display:flex;justify-content:flex-end}
.od-tl{list-style:none;margin:1rem 0 0;padding:0}
.od-ev{position:relative;display:flex;gap:.7rem;padding:0 0 1rem}
.od-ev::before{content:"";position:absolute;left:.85rem;top:1.9rem;bottom:.1rem;width:2px;background:var(--line)}
.od-ev:last-child{padding-bottom:0}
.od-ev:last-child::before{display:none}
.od-ev__ico{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:var(--lilac-100);color:var(--plum-700)}
.od-ev__ico .ico{width:.95rem;height:.95rem}
.od-ev--nota .od-ev__ico{background:var(--warn-bg);color:var(--warn)}
.od-ev--sys .od-ev__ico{background:var(--grey-bg);color:var(--grey)}
.od-ev__body{min-width:0;flex:1 1 auto}
.od-ev__meta{font-size:.78rem;color:var(--muted);line-height:1.5}
.od-ev__meta b{color:var(--ink);font-weight:600}
.od-ev__txt{font-size:.875rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-soft)}
.od-ev--nota .od-ev__txt{margin-top:.25rem;padding:.5rem .7rem;background:var(--lilac-50);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink)}
.od-tl-empty{margin:1rem 0 0}
.od-tl-more{display:flex;justify-content:center;margin-top:.5rem}

/* ---------- dialog / lembaran ---------- */
.od-dback{place-items:center}
.od-dlg{display:flex;flex-direction:column;overflow:hidden;width:min(31rem,100%);max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);animation:od-up .18s ease-out}
.od-dlg--tall{width:min(36rem,100%)}
.od-dlg--wa{width:min(42rem,100%)}
@keyframes od-up{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.od-dlg{animation:none}}
.od-dh{flex:none;padding:1.1rem 1.2rem .5rem}
.od-dh h2{font-size:1.15rem;overflow-wrap:anywhere}
.od-dsub{margin:.2rem 0 0;overflow-wrap:anywhere}
.od-db{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:.5rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:.9rem}
.od-df{flex:none}
.od-dalert:empty{display:none}
.od-dalert__acts{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.od-dnote{margin:0;padding:.6rem .8rem;background:var(--lilac-50);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink-soft);font-size:.875rem}
.od-dnote--cod{background:var(--warn-bg);border-color:#f2d398;color:#6d3d00;font-weight:500}
.od-form{display:flex;flex-direction:column;gap:.9rem}
.od-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:.7rem}
.od-dlg .input,.od-dlg .select,.od-dlg .textarea,.od-noteform .textarea{font-size:1rem}
.od-dlg .input,.od-dlg .select{min-height:2.75rem}
.od-trk{letter-spacing:.03em}
.od-check{align-items:center;min-height:2.75rem}
.od-check small{display:block}
.od-prev>summary{min-height:2.75rem;display:flex;align-items:center;cursor:pointer;color:var(--plum-700);font-weight:500;font-size:.875rem}
.od-pre{margin:.2rem 0 0;padding:.7rem .85rem;background:var(--lilac-50);border:1px solid var(--line);border-radius:var(--r-md);font:inherit;font-size:.85rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.od-fs{border:0;margin:0;padding:0;min-width:0}
.od-fs>legend{padding:0;margin-bottom:.45rem;font-size:.8125rem;font-weight:600;color:var(--ink-soft)}
.od-radios{display:flex;flex-direction:column;gap:.4rem}
.od-radio{display:flex;align-items:center;gap:.7rem;min-height:2.75rem;padding:.45rem .75rem;border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;cursor:pointer}
.od-radio input{flex:none;width:1.2rem;height:1.2rem;margin:0;accent-color:var(--plum-700)}
.od-radio:hover{background:var(--lilac-50)}
.od-radio.is-on{border-color:var(--plum-600);background:var(--lilac-50);box-shadow:0 0 0 1px var(--plum-600) inset}
.od-radio:focus-within{outline:3px solid var(--focus);outline-offset:1px}
.od-radio__t{display:block}
.od-radio__h{display:block;font-size:.78rem;color:var(--muted)}
.od-fs.is-invalid .od-radio{border-color:var(--bad)}
.od-wa-ta{min-height:10rem;line-height:1.5}
.od-wa-tools{display:flex;justify-content:flex-end;margin-top:-.5rem}
.od-wares:empty{display:none}
.od-wares{margin:0}
.od-solid-danger{background:var(--bad)!important;border-color:var(--bad)!important;color:#fff!important}
.od-solid-danger:hover{background:#8a1e17!important}
.btn.is-flash{background:var(--ok-bg);border-color:#b5dfc7;color:var(--ok)}
.od-dlg.is-busy{cursor:progress}
@media (max-width:600px){
  .od-dback{place-items:end stretch;padding:0}
  .od-dlg,.od-dlg--tall,.od-dlg--wa{width:100%;max-height:92vh;max-height:92dvh;border-radius:1.1rem 1.1rem 0 0}
  .od-df{padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px));gap:.5rem}
  .od-df .btn{flex:1 1 auto}
  .od-two{grid-template-columns:minmax(0,1fr) 7.5rem}
}

/* ---------- ringkasan boleh buka (details/summary): penanda sendiri ---------- */
.od-more>summary,.od-prev>summary,.od-moreinfo>summary{display:flex;align-items:center;gap:.5rem;list-style:none;cursor:pointer}
.od-more>summary::-webkit-details-marker,.od-prev>summary::-webkit-details-marker,.od-moreinfo>summary::-webkit-details-marker{display:none}
.od-more>summary::after,.od-prev>summary::after,.od-moreinfo>summary::after{content:"";flex:none;width:.5rem;height:.5rem;margin:-.2rem 0 0 .15rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.od-moreinfo>summary::after{margin-left:auto}
.od-more[open]>summary::after,.od-prev[open]>summary::after,.od-moreinfo[open]>summary::after{transform:rotate(-135deg);margin-top:.2rem}
@media (prefers-reduced-motion:reduce){.od-more>summary::after,.od-prev>summary::after,.od-moreinfo>summary::after{transition:none}}
.od-moreinfo>summary{font-weight:600;font-size:.95rem;color:var(--ink)}
.od-copy{background:var(--lilac-100);border-color:transparent;color:var(--plum-800)}
.od-copy:hover{background:var(--lilac-200);border-color:transparent}

/* ---------- Ninja Van: kad Shipping, dialog Ship… / Create shipment / Cancel shipment ---------- */
.od-idc--wrap{flex-wrap:wrap}
.od-track{flex:none;white-space:nowrap}
.od-njst{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;min-width:0}
.od-njst .small{overflow-wrap:anywhere}
.od-sb .od-njacts{margin-top:.8rem}
.od-sb .od-njacts .btn{margin-top:0}
.od-njnote{margin:.7rem 0 0}
.od-njbanner{margin:0}
.od-linkbtn{align-self:flex-start;min-height:2.75rem;padding-left:0;padding-right:.5rem;color:var(--plum-700);text-decoration:underline;text-underline-offset:.2em}
.od-sb .od-idc .btn{margin-top:0}