/* Challan page (Office213, 6 Nov 2026): SaaS record page. Scoped to .cx. One orange action, quiet greys, no blue. */
/* The server's page waits a moment for the new layout instead of flashing; it shows anyway if the script never runs. */
@keyframes cx-show { to { visibility:visible; } }
.challan-detail-page:not(.cx-on):not(.cx-failed) { visibility:hidden; animation:cx-show 0s 1.2s forwards; }
.challan-detail-page.cx-on { padding:28px 32px 36px !important; display:block !important; }
.cx { --ink:#15181e; --ink2:#3b414b; --muted:#6b7180; --faint:#9aa0aa; --line:#e8e8ec; --line2:#f0f0f3; --soft:#f7f7f8;
  --accent:#ff701e; --ok:#2f8f57; --warn:#c27c0e; --bad:#c2402f; --off:#8b9099;
  color:var(--ink); font-size:14px; line-height:1.45; }
.cx * { box-sizing:border-box; }

/* The site paints bare links/buttons as big blue buttons; reset everything inside .cx first. */
.challan-detail-page .cx a, .challan-detail-page .cx button, .challan-detail-page .cx summary {
  background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; min-height:0 !important;
  padding:0 !important; margin:0; color:inherit !important; font:inherit !important; text-decoration:none !important;
  text-transform:none !important; letter-spacing:normal !important; justify-content:flex-start !important; gap:0 !important;
  width:auto; height:auto; cursor:pointer; transform:none !important; }
.cx svg { width:16px; height:16px; flex:none; }

/* Buttons */
.challan-detail-page .cx .cx-btn { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important;
  height:34px !important; padding:0 13px !important; border:1px solid var(--line) !important; border-radius:9px !important;
  background:#fff !important; color:var(--ink) !important; font-size:13.5px !important; font-weight:650 !important; white-space:nowrap;
  transition:background .15s, border-color .15s; }
.challan-detail-page .cx .cx-btn:hover { background:var(--soft) !important; border-color:#dcdce1 !important; }
.challan-detail-page .cx .cx-btn:focus-visible, .challan-detail-page .cx .cx-row:focus-visible, .challan-detail-page .cx .cx-tab:focus-visible { outline:2px solid rgba(255,112,30,.55) !important; outline-offset:2px; }
.challan-detail-page .cx .cx-primary { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }
.challan-detail-page .cx .cx-primary:hover { background:#f2640f !important; border-color:#f2640f !important; }
.challan-detail-page .cx .cx-icon { width:34px !important; padding:0 !important; color:var(--muted) !important; }
.challan-detail-page .cx .cx-icon.is-done { color:var(--ok) !important; }
.challan-detail-page .cx .cx-danger-btn { background:var(--bad) !important; border-color:var(--bad) !important; color:#fff !important; }

/* Header */
.cx-head { display:grid; gap:10px; padding-bottom:20px; }
.challan-detail-page .cx .cx-back { display:inline-flex !important; align-items:center; gap:4px !important; width:max-content; color:var(--muted) !important; font-size:13px !important; font-weight:600 !important; }
.challan-detail-page .cx .cx-back:hover { color:var(--ink) !important; }
.cx-back svg { width:15px; height:15px; }
.cx-titlebar { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; }
.cx-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.cx-title h1 { margin:0 !important; font-size:26px !important; font-weight:750 !important; letter-spacing:-.01em; color:var(--ink) !important; font-variant-numeric:tabular-nums; }
.cx-status { display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:650; background:var(--soft); color:var(--ink2); border:1px solid var(--line); }
.cx-status i, .cx-erp-state i { width:7px; height:7px; border-radius:50%; background:var(--off); }
.cx-status.cx-ok i, .cx-erp-state.cx-ok i { background:var(--ok); }
.cx-status.cx-wait i, .cx-erp-state.cx-wait i { background:var(--faint); }
.cx-status.cx-warn i, .cx-erp-state.cx-warn i { background:var(--warn); }
.cx-actions { display:flex; align-items:center; gap:8px; }
.cx-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; color:var(--muted); font-size:13px; }
.cx-meta .premium-vehicle { display:inline-flex; transform:scale(.82); transform-origin:left center; margin-right:-18px; }
.cx-sep { width:3px; height:3px; border-radius:50%; background:#c9ccd2; }

/* More menu */
.cx-menu { position:relative; }
.cx-menu > summary { list-style:none; }
.cx-menu > summary::-webkit-details-marker { display:none; }
.cx-menu-list { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:230px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(16,24,40,.13), 0 2px 6px rgba(16,24,40,.06); }
.challan-detail-page .cx .cx-item { display:flex !important; flex-direction:column; align-items:flex-start; width:100%; padding:8px 10px !important; border-radius:7px !important; font-size:13.5px !important; font-weight:550 !important; color:var(--ink) !important; text-align:left; }
.challan-detail-page .cx .cx-item:hover { background:var(--soft) !important; }
.challan-detail-page .cx .cx-item.cx-danger { color:var(--bad) !important; }
.cx-item.cx-disabled { color:var(--faint) !important; cursor:default; }
.cx-item.cx-disabled small { color:var(--faint); font-size:12px; font-weight:450; line-height:1.4; margin-top:2px; }
.cx-menu-sep { height:1px; background:var(--line2); margin:5px 4px; }

/* Numbers strip */
.cx-flash { margin:0 0 14px !important; border-radius:10px !important; }
.cx-stats { display:grid; grid-template-columns:2fr repeat(4, 1fr); border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:20px; }
.cx-stat { padding:12px 16px; display:grid; gap:2px; min-width:0; }
.cx-stat + .cx-stat { border-left:1px solid var(--line2); }
.cx-stat span { font-size:12px; color:var(--muted); font-weight:550; }
.cx-stat strong { font-size:17px; font-weight:720; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-stat strong em { font-style:normal; color:var(--faint); margin:0 7px; font-weight:500; }

/* Layout */
.cx-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }

/* GR list */
.cx-main { border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; }
.cx-tabs { display:flex; align-items:center; gap:22px; padding:0 16px; border-bottom:1px solid var(--line); min-height:48px; }
.challan-detail-page .cx .cx-tab { position:relative; display:inline-flex !important; align-items:center; gap:6px !important; height:48px; font-size:13.5px !important; font-weight:650 !important; color:var(--muted) !important; }
.cx-tab span { font-size:12px; font-weight:650; color:var(--faint); background:var(--soft); border-radius:999px; padding:1px 7px; }
.challan-detail-page .cx .cx-tab.is-on { color:var(--ink) !important; }
.cx-tab.is-on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px; }
.cx-find { margin-left:auto; display:flex; align-items:center; gap:7px; height:32px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--faint); width:min(260px, 100%); }
.cx-find[hidden] { display:none; }
.cx-find:focus-within { background:#fff; border-color:#d6d7dc; }
.challan-detail-page .cx .cx-find input { all:unset; flex:1; min-width:0; height:30px !important; border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; font-size:13px !important; color:var(--ink) !important; }
.cx-find svg { width:15px; height:15px; }
.cx-note { display:flex; align-items:flex-start; gap:9px; margin:12px 16px 4px; padding:9px 12px; background:#fffaf2; border:1px solid #f4e6cc; border-radius:9px; color:#7a5413; font-size:13px; }
.cx-note i { width:7px; height:7px; border-radius:50%; background:var(--warn); margin-top:6px; flex:none; }
.cx-note em { font-style:normal; color:#a07a3a; }
.cx-list { display:grid; padding:4px 0; }
.challan-detail-page .cx .cx-row { display:grid !important; grid-template-columns:minmax(150px,1.4fr) minmax(120px,1.2fr) 70px 70px 96px 18px; align-items:center !important; gap:12px !important;
  padding:9px 16px !important; color:var(--ink) !important; border-top:1px solid var(--line2) !important; transition:background .12s; }
.cx-list > .cx-row:first-child { border-top:0 !important; }
.challan-detail-page .cx a.cx-row:hover { background:#fafafa !important; }
.cx-row[hidden] { display:none !important; }
.cx-c-gr, .cx-c-dest { display:grid; min-width:0; }
.cx-c-gr b { font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.cx-gp { font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.cx-c-gr small, .cx-c-dest small { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-c-dest { font-weight:600; font-size:13.5px; }
.cx-c-dest small.cx-mob { display:none; }
.cx-c-num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.cx-c-num small { margin-left:4px; font-size:11.5px; color:var(--faint); font-weight:500; }
.cx-c-state { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.cx-dot { width:7px; height:7px; border-radius:50%; background:var(--off); flex:none; }
.cx-dot.cx-ok { background:var(--ok); } .cx-dot.cx-wait { background:var(--warn); }
.cx-c-go { color:#c3c6cc; display:flex; }
a.cx-row:hover .cx-c-go { color:var(--ink2); }
.cx-empty { margin:14px 16px; color:var(--muted); font-size:13px; }
.cx-activity { list-style:none; margin:0; padding:6px 16px 12px; }
.cx-activity li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line2); font-size:13.5px; }
.cx-activity li:first-child { border-top:0; }
.cx-activity li span { color:var(--muted); font-size:12.5px; text-align:right; }
.cx-revisions { display:grid; padding:6px 16px 12px; }
.challan-detail-page .cx .cx-rev { display:flex !important; justify-content:space-between !important; align-items:center; padding:10px 0 !important; border-top:1px solid var(--line2) !important; }
.cx-rev .badge { background:var(--soft) !important; color:var(--ink2) !important; border:1px solid var(--line) !important; }

/* Side panel */
.cx-side { display:grid; gap:14px; position:sticky; top:16px; }
.cx-card { border:1px solid var(--line); border-radius:12px; background:#fff; padding:14px 16px; }
.cx-card h2 { margin:0 0 10px !important; font-size:13px !important; font-weight:700 !important; color:var(--ink) !important; letter-spacing:0 !important; }
.cx-kv { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; font-size:13.5px; }
.cx-kv span { color:var(--muted); }
.cx-kv b { font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.cx-kv.cx-total b { font-size:18px; font-weight:750; }
.cx-kv.cx-total span { color:var(--ink); font-weight:650; }
.cx-rule { height:1px; background:var(--line2); margin:6px 0; }
.cx-fine { margin:4px 0 0 !important; font-size:12px !important; color:var(--muted) !important; }
.cx-tds { margin-top:10px; font-size:12.5px; color:var(--muted); display:block !important; padding:0 !important; border:0 !important; background:none !important; }
.cx-tds summary { color:var(--ink2) !important; font-weight:600 !important; font-size:12.5px !important; }
.cx-tds[open] { display:grid !important; gap:3px; }
.cx-erp { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cx-erp > div { display:grid; }
.cx-label { font-size:12px; color:var(--muted); }
.cx-mono { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.cx-erp-state { display:flex; align-items:center; gap:7px; margin:8px 0 0 !important; font-size:12.5px !important; color:var(--muted) !important; }
.cx-erp-slot:empty { display:none; }
.cx-erp-slot { margin-top:12px; display:grid; gap:10px; }
.cx-erp-slot form button[type=submit], .cx-erp-slot > a { width:100%; }
.challan-detail-page .cx .cx-erp-slot .challan-erp-submit-form button { display:flex !important; align-items:center; justify-content:center !important; height:36px !important; border-radius:9px !important; background:var(--accent) !important; color:#fff !important; font-weight:650 !important; }
.challan-detail-page .cx .cx-erp-slot .challan-uncertain-action button, .challan-detail-page .cx .cx-erp-slot > a { display:flex !important; align-items:center; justify-content:center !important; height:34px !important; border:1px solid var(--line) !important; border-radius:9px !important; background:#fff !important; font-weight:650 !important; }
.cx-erp-slot .challan-uncertain-action p, .cx-erp-slot .error { margin:0 0 8px !important; font-size:12.5px !important; color:#7a5413 !important; background:#fffaf2 !important; border:1px solid #f4e6cc !important; border-radius:9px !important; padding:8px 10px !important; }
.cx-erp-slot .challan-existing-link { font-size:12.5px; }
.cx-erp-slot .challan-existing-link h3 { font-size:13px !important; margin:0 0 4px !important; }
.cx-erp-slot .challan-existing-link table { width:100%; font-size:12px; margin:8px 0; }
.cx-erp-slot svg, .cx-erp-slot i[data-lucide] { display:none; }
.cx-plate-text { font-weight:700; letter-spacing:.02em; }

/* Dialogs */
.cx-dialog { width:min(440px, calc(100vw - 32px)); border:0; border-radius:14px; padding:22px 22px 20px; box-shadow:0 24px 60px rgba(16,24,40,.25); color:var(--ink); }
.cx-dialog::backdrop { background:rgba(17,20,26,.38); }
.cx-dialog h2 { margin:0 0 6px !important; font-size:17px !important; font-weight:700 !important; }
.cx-dialog-close { position:absolute; right:12px; top:12px; margin:0; }
.cx-dialog-body p { margin:0 0 14px !important; color:var(--muted) !important; font-size:13.5px !important; }
.cx-dialog-body form { display:grid; gap:12px; }
.cx-dialog-body label { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--ink2); }
.cx-dialog-body select, .cx-dialog-body input:not([type=hidden]) { height:38px; border:1px solid var(--line) !important; border-radius:9px !important; padding:0 10px !important; font:inherit; font-size:14px; background:#fff !important; box-shadow:none !important; }
.cx-dialog-body small { color:var(--faint); font-size:12px; }
.challan-detail-page .cx .cx-dialog-body .cx-danger-btn { height:38px !important; width:100%; }

/* Smaller screens */
@media (max-width: 1100px) { .cx-grid { grid-template-columns:1fr; } .cx-side { position:static; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); } }
@media (max-width: 760px) {
  .challan-detail-page.cx-on { padding:18px 14px 24px !important; }
  .cx-title h1 { font-size:21px !important; }
  .cx-titlebar { align-items:flex-start; }
  .cx-actions { width:100%; }
  .cx-actions .cx-primary { flex:1; }
  .cx-stats { grid-template-columns:1fr 1fr; }
  .cx-stat.cx-wide { grid-column:1 / -1; }
  .cx-stat + .cx-stat { border-left:0; }
  .cx-stat { border-top:1px solid var(--line2); }
  .cx-stat:first-child { border-top:0; }
  .cx-stat:nth-child(odd):not(:first-child) { border-left:1px solid var(--line2); }
  .cx-tabs { gap:16px; flex-wrap:wrap; padding:0 12px; }
  .cx-find { order:5; width:100%; margin:0 0 10px; }
  .challan-detail-page .cx .cx-row { grid-template-columns:1fr auto 16px; grid-template-areas:"gr state go" "dest nums go"; padding:10px 12px !important; row-gap:4px !important; }
  .cx-c-gr { grid-area:gr; } .cx-c-dest { grid-area:dest; } .cx-c-state { grid-area:state; } .cx-c-go { grid-area:go; }
  .cx-c-num { display:none; }
  .cx-c-dest small.cx-desk { display:none; }
  .cx-c-dest small.cx-mob { display:block; }
  .cx-meta .premium-vehicle { transform:none; margin-right:0; flex-basis:100%; }
  .cx-meta .premium-vehicle + .cx-sep { display:none; }
  .cx-stat { padding:9px 14px; }
  .cx-stat strong { font-size:16px; }
}