/*
 * ServoCure UI design layer — loaded last.
 * Presentation only: colours, type, spacing, borders, states and responsive layout.
 * It never changes column widths, show/hide logic or anything scripts read, so every
 * table, filter, pager and form keeps working exactly as before.
 * "#view#view" doubles the id weight so these rules win over the older layered styles.
 */
:root{
  --ui-ink:#0b2a33;--ui-text:#1d3a44;--ui-muted:#5f7c86;--ui-faint:#8aa3ab;
  --ui-bg:#f4f8f9;--ui-surface:#fff;--ui-subtle:#f7fafb;--ui-line:#e1eaed;--ui-line-strong:#cddbe0;
  --ui-brand:#00798a;--ui-brand-strong:#006472;--ui-brand-soft:#e3f4f6;--ui-brand-ring:rgba(0,121,138,.18);
  --ui-success:#15803d;--ui-success-soft:#e8f6ee;--ui-warning:#b45309;--ui-warning-soft:#fdf3e4;
  --ui-danger:#c0283f;--ui-danger-soft:#fdecef;--ui-info:#1d6fb8;--ui-info-soft:#e8f1fb;
  --ui-radius-sm:8px;--ui-radius:12px;--ui-radius-lg:16px;
  --ui-shadow-sm:0 1px 2px rgba(11,42,51,.05);--ui-shadow:0 1px 2px rgba(11,42,51,.04),0 6px 18px rgba(11,42,51,.06);
  --ui-shadow-lg:0 20px 50px rgba(11,42,51,.18);
  --ui-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Base & typography ---------- */
html body{background:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body #view h1,html body #view h2,html body .topbar h1{font-family:var(--ui-font)!important;letter-spacing:-.02em!important;color:var(--ui-ink)!important;font-weight:750!important}
html body #view h1{font-size:clamp(22px,2.2vw,28px)!important;line-height:1.2!important}
html body #view h2{font-size:clamp(18px,1.7vw,22px)!important;line-height:1.25!important}
html body #view h3{font-family:var(--ui-font);color:var(--ui-ink);letter-spacing:-.01em}
html body .eyebrow,html body #view .scwf-kicker,html body #view small.eyebrow{color:var(--ui-brand)!important;letter-spacing:.08em!important;font-weight:750!important}
html body :focus-visible{outline:2px solid var(--ui-brand);outline-offset:2px}

/* ---------- Sidebar ---------- */
html body .sidebar{background:#fbfdfd!important;border-right:1px solid var(--ui-line)!important;box-shadow:none!important}
html body .sidebar .nav button{border-radius:10px!important;color:#2b4a54!important;font-weight:600!important;transition:background .15s ease,color .15s ease!important}
html body .sidebar .nav button:hover{background:var(--ui-brand-soft)!important;color:var(--ui-brand-strong)!important}
html body .sidebar .nav button.active{background:var(--ui-brand-soft)!important;color:var(--ui-brand-strong)!important;box-shadow:inset 3px 0 0 var(--ui-brand)!important}
/* Current page highlight (set by sc-ui.js); the app's own .active marker only follows Dashboard */
html body .sidebar .nav:has([data-ui-current]) button.active:not([data-ui-current]){background:transparent!important;color:#2b4a54!important;box-shadow:none!important}
html body .sidebar .nav button[data-ui-current]{background:var(--ui-brand-soft)!important;color:var(--ui-brand-strong)!important;box-shadow:inset 3px 0 0 var(--ui-brand)!important;font-weight:700!important}
html body .sidebar .side-client-menu button{font-weight:550!important;color:#3d5c66!important}
html body .sidebar .side-bottom{border-color:var(--ui-line)!important}

/* ---------- Top bar ---------- */
html body .topbar{gap:12px}
html body .user-chip{border:1px solid var(--ui-line)!important;background:var(--ui-surface)!important;border-radius:999px!important;box-shadow:var(--ui-shadow-sm)!important;color:var(--ui-ink)!important;font-weight:600!important}
html body .sc-mobile-menu{border:1px solid var(--ui-line)!important;background:var(--ui-surface)!important;border-radius:10px!important;box-shadow:var(--ui-shadow-sm)!important;color:var(--ui-ink)!important;min-width:42px;min-height:42px}

/* ---------- Cards & panels ---------- */
html body #view#view .panel,html body #view#view .ops-step,html body #view#view .scwf-panel,html body #view#view .sc-collected-card,
html body #view#view .view-head,html body #view#view .ol-head,html body #view#view .scwf-head,html body #view#view .sc2498head,
html body #view#view .sc-confirmed-head,html body #view#view .client-request-simple-head,html body #view#view .cfx-filters,
html body #view#view .request-dispositions__panel,html body #view#view .request-dispositions__hero{
  background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius-lg)!important;box-shadow:var(--ui-shadow)!important}
html body #view#view .step-card,html body #view#view .status-card{border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow-sm)!important;transition:box-shadow .15s ease,transform .15s ease}
html body #view#view .step-card:hover,html body #view#view .status-card:hover{box-shadow:var(--ui-shadow)!important}
html body #view#view .step-card b,html body #view#view .status-card b{color:var(--ui-ink);letter-spacing:-.02em}

/* ---------- Tables ---------- */
html body #view#view .table-wrap,html body #view#view .request-dispositions__table-wrap,html body #view#view .ol-wrap,
html body #view#view .sc-confirmed-box,html body #view#view .sc-collected-scroll,html body #view#view .scwf-wrap,html body #view#view .sc2498wrap{
  border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow-sm)!important;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#b7cbd1 transparent}
html body #view#view .table-wrap::-webkit-scrollbar,html body #view#view .request-dispositions__table-wrap::-webkit-scrollbar,html body #view#view .ol-wrap::-webkit-scrollbar,
html body #view#view .sc-confirmed-box::-webkit-scrollbar,html body #view#view .sc-collected-scroll::-webkit-scrollbar,html body #view#view .scwf-wrap::-webkit-scrollbar,html body #view#view .sc2498wrap::-webkit-scrollbar{height:10px;width:10px}
html body #view#view .table-wrap::-webkit-scrollbar-thumb,html body #view#view .request-dispositions__table-wrap::-webkit-scrollbar-thumb,html body #view#view .ol-wrap::-webkit-scrollbar-thumb,
html body #view#view .sc-confirmed-box::-webkit-scrollbar-thumb,html body #view#view .sc-collected-scroll::-webkit-scrollbar-thumb,html body #view#view .scwf-wrap::-webkit-scrollbar-thumb,html body #view#view .sc2498wrap::-webkit-scrollbar-thumb{background:#c3d4d9;border-radius:999px;border:2px solid #fff}
html body #view#view table{border-collapse:separate!important;border-spacing:0!important;font-variant-numeric:tabular-nums}
html body #view#view table thead th{background:#f3f8f9!important;color:#4a6872!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.05em!important;text-transform:uppercase;border-bottom:1px solid var(--ui-line-strong)!important;border-top:0!important}
html body #view#view table tbody td{color:var(--ui-text);border-bottom:1px solid #edf3f5!important;border-top:0!important}
html body #view#view table tbody tr:last-child td{border-bottom:0!important}
html body #view#view table tbody tr:nth-child(even) td{background-color:#fbfdfd!important}
html body #view#view table tbody tr:hover td{background-color:#f1f8f9!important}
/* Pinned columns: hairline divider so they read as fixed while the rest scrolls */
html body #view#view table tbody td[style*="sticky"],html body #view#view table thead th[style*="sticky"]{background-clip:padding-box}

/* Pinned column overlaps (fixed): Serviceable Edit sits beside the 121px History column; Postponed has 19 columns */
@media (min-width:1024px){
html body #view#view .request-dispositions--serviceable .request-dispositions__table th:nth-child(13),
html body #view#view .request-dispositions--serviceable .request-dispositions__table td:nth-child(13){right:var(--scui-r2,121px)!important}
}
html body #view#view.sc-t table tbody tr > td:nth-child(18):not(:last-child),
html body #view#view.sc-t table thead tr > th:nth-child(18):not(:last-child){right:auto!important}
html body #view#view.sc-t table tbody tr > td:nth-child(18):not(:last-child){position:static!important}

/* Company initial badges are not used: show the company name only */
html body #view#view .company-initial{display:none!important}
/* New Request table squeezes its cells; keep breathing room at the table edges */
html body #view#view .client-request-table th:first-child,html body #view#view .client-request-table td:first-child{padding-left:12px!important}
html body #view#view .client-request-table th:last-child,html body #view#view .client-request-table td:last-child{padding-right:12px!important}

/* ---------- Buttons ---------- */
html body .primary,html body #view#view .scwf-action.primary,html body #view#view .sc2498btn.sc2498main{
  background:var(--ui-brand)!important;border:1px solid var(--ui-brand)!important;color:#fff!important;border-radius:10px!important;font-weight:650!important;box-shadow:0 1px 2px rgba(0,121,138,.25)!important;transition:background .15s ease,box-shadow .15s ease,transform .1s ease!important}
html body .primary:hover,html body #view#view .scwf-action.primary:hover,html body #view#view .sc2498btn.sc2498main:hover{background:var(--ui-brand-strong)!important;box-shadow:0 4px 12px rgba(0,121,138,.25)!important}
html body .secondary,html body #view#view .btn.ghost,html body #view#view .scwf-refresh,html body #view#view .find-lead,html body #view#view .ol-find,
html body #view#view .request-dispositions__edit,html body #view#view .sc-collected-btn:not(.sc-collected-primary){
  background:var(--ui-surface)!important;border:1px solid var(--ui-line-strong)!important;color:var(--ui-brand-strong)!important;border-radius:9px!important;font-weight:600!important;box-shadow:var(--ui-shadow-sm)!important;transition:background .15s ease,border-color .15s ease!important}
html body .secondary:hover,html body #view#view .btn.ghost:hover,html body #view#view .scwf-refresh:hover,html body #view#view .find-lead:hover,html body #view#view .ol-find:hover,
html body #view#view .request-dispositions__edit:hover,html body #view#view .sc-collected-btn:not(.sc-collected-primary):hover{background:var(--ui-brand-soft)!important;border-color:#a9d3da!important}
/* Success / warning / danger actions used in the workflow tables */
html body #view#view .accept-lead,html body #view#view .collect-lead,html body #view#view .sc-confirmed-collected{
  background:var(--ui-success)!important;border:1px solid var(--ui-success)!important;color:#fff!important;border-radius:9px!important;font-weight:650!important;box-shadow:none!important}
html body #view#view .accept-lead:hover,html body #view#view .collect-lead:hover,html body #view#view .sc-confirmed-collected:hover{background:#116a32!important}
html body #view#view .postpone-lead,html body #view#view .sc-confirmed-postponed{
  background:var(--ui-warning-soft)!important;border:1px solid #f1d3a8!important;color:var(--ui-warning)!important;border-radius:9px!important;font-weight:650!important;box-shadow:none!important}
html body #view#view .postpone-lead:hover,html body #view#view .sc-confirmed-postponed:hover{background:#fbe8cc!important}
html body #view#view .reject-lead,html body #view#view .cancel-lead,html body #view#view .sc-confirmed-cancelled,html body #view#view .ol-no{
  background:var(--ui-danger-soft)!important;border:1px solid #f4c3cc!important;color:var(--ui-danger)!important;border-radius:9px!important;font-weight:650!important;box-shadow:none!important}
html body #view#view .reject-lead:hover,html body #view#view .cancel-lead:hover,html body #view#view .sc-confirmed-cancelled:hover,html body #view#view .ol-no:hover{background:#fad9df!important}
html body button:disabled,html body button[disabled]{opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important}
html body #view#view table button{white-space:nowrap}

/* ---------- Chips, filters & badges ---------- */
html body #view#view .ol-filter-chip,html body #view#view .scbp-chip,html body #view#view .sc-confirmed-filter-chip,html body #view#view .cfx-chip-row button,
html body #view#view .company-chip-set button,html body #view#view .request-dispositions__preset,html body #view#view .sc-request-quick-filters button{
  border:1px solid var(--ui-line-strong)!important;background:var(--ui-surface)!important;color:#36565f!important;border-radius:999px!important;font-weight:600!important;box-shadow:none!important;transition:background .15s ease,border-color .15s ease,color .15s ease!important}
html body #view#view .ol-filter-chip:hover,html body #view#view .scbp-chip:hover,html body #view#view .sc-confirmed-filter-chip:hover,html body #view#view .cfx-chip-row button:hover,
html body #view#view .company-chip-set button:hover,html body #view#view .request-dispositions__preset:hover,html body #view#view .sc-request-quick-filters button:hover{border-color:#a9d3da!important;background:#f5fbfc!important}
html body #view#view .ol-filter-chip.active,html body #view#view .ol-filter-chip.is-active,html body #view#view .scbp-chip.active,html body #view#view .scbp-chip.is-active,
html body #view#view .sc-confirmed-filter-chip.active,html body #view#view .sc-confirmed-filter-chip.is-active,html body #view#view .cfx-chip-row button.is-active,
html body #view#view .request-dispositions__preset.is-active,html body #view#view .request-dispositions__preset[aria-pressed="true"],html body #view#view .sc-request-quick-filters button.sc-request-selected{
  background:var(--ui-brand)!important;border-color:var(--ui-brand)!important;color:#fff!important}
html body #view#view .pill,html body #view#view .sc2498status,html body #view#view .sc-confirmed-badge,html body #view#view .sc-collected-count,html body #view#view .scwf-count,html body #view#view .cfx-chip-count{
  border-radius:999px!important;font-weight:700!important;letter-spacing:.01em}
html body #view#view .pill,html body #view#view .sc-confirmed-badge,html body #view#view .sc-collected-count{background:var(--ui-brand-soft)!important;color:var(--ui-brand-strong)!important;border:1px solid #c6e6ea!important}

/* ---------- Forms ---------- */
html body #view#view input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),html body #view#view select,html body #view#view textarea,
html body .ol-modal input:not([type=checkbox]):not([type=radio]):not([type=file]),html body .ol-modal select,html body .ol-modal textarea,
html body .sc-collected-modal input:not([type=checkbox]):not([type=radio]):not([type=file]),html body .sc-collected-modal select,html body .sc-collected-modal textarea,
html body .scwf-modal input:not([type=checkbox]):not([type=radio]):not([type=file]),html body .scwf-modal select,html body .scwf-modal textarea{
  border:1px solid var(--ui-line-strong)!important;border-radius:10px!important;background-color:var(--ui-surface)!important;color:var(--ui-ink)!important;
  transition:border-color .15s ease,box-shadow .15s ease!important}
html body #view#view input:focus,html body #view#view select:focus,html body #view#view textarea:focus,
html body .ol-modal input:focus,html body .ol-modal select:focus,html body .ol-modal textarea:focus,
html body .sc-collected-modal input:focus,html body .sc-collected-modal select:focus,html body .sc-collected-modal textarea:focus,
html body .scwf-modal input:focus,html body .scwf-modal select:focus,html body .scwf-modal textarea:focus{border-color:var(--ui-brand)!important;box-shadow:0 0 0 3px var(--ui-brand-ring)!important;outline:0!important}
html body #view#view input::placeholder,html body #view#view textarea::placeholder{color:var(--ui-faint)}
html body #view#view input:disabled,html body #view#view select:disabled,html body #view#view textarea:disabled{background:var(--ui-subtle)!important;color:var(--ui-faint)!important}
html body #view#view input[type=checkbox],html body #view#view input[type=radio],html body .ol-modal input[type=radio],html body .ol-modal input[type=checkbox]{accent-color:var(--ui-brand)}
html body input:invalid:not(:placeholder-shown):not(:focus){border-color:#e7a3ae!important}

/* ---------- Modals ---------- */
html body .ol-modal-backdrop,html body .sc-collected-modal,html body .scwf-modal,html body .sc-master-modal,html body .sc-confirmed-modal{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html body .ol-modal,html body .sc-collected-modal>div,html body .scwf-box,html body .sc-master-modal>div,html body .sc-confirmed-modal>div{
  border-radius:var(--ui-radius-lg)!important;box-shadow:var(--ui-shadow-lg)!important;border:1px solid var(--ui-line)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 32px)!important;overflow:auto!important}

/* ---------- Pagination ---------- */
html body #view#view .pagination-page,html body #view#view .pagination-arrow,html body #view#view .request-dispositions__page-button,
html body #view#view .sc-page20-live button,html body #view#view .sc-p button,html body #view#view .cfx-pagination button,html body #view#view .ol-pagination button{
  border:1px solid var(--ui-line-strong)!important;background:var(--ui-surface)!important;color:var(--ui-brand-strong)!important;border-radius:9px!important;font-weight:650!important;min-height:34px;min-width:34px;box-shadow:none!important}
html body #view#view .pagination-page.active,html body #view#view .pagination-page[aria-current],html body #view#view .ol-pagination button.active,html body #view#view .sc-p button:focus{
  background:var(--ui-brand)!important;border-color:var(--ui-brand)!important;color:#fff!important}

/* ---------- Empty & loading states ---------- */
html body #view#view .sc-confirmed-empty,html body #view#view .sc-collected-empty,html body #view#view .scwf-empty,html body #view#view .empty{
  color:var(--ui-muted)!important;font-weight:600!important;text-align:center!important;padding:32px 16px!important}

/* ---------- Scrolling & sticky headers ---------- */
/* Vertical wheel/touch scrolling passes on to the page when a table box reaches its end (it used to stop dead);
   sideways stays contained so touchpads don't trigger browser back/forward. */
html body #view#view .table-wrap,html body #view#view .request-dispositions__table-wrap,html body #view#view .ol-wrap,html body #view#view .sc-confirmed-box,html body #view#view .sc-collected-scroll,html body #view#view .scwf-wrap,html body #view#view .sc2498wrap{overscroll-behavior-x:contain!important;overscroll-behavior-y:auto!important}
@media (min-width:768px){
  /* Each table scrolls inside a box no taller than the screen, so its header row stays visible */
  html body #view#view .table-wrap,html body #view#view .request-dispositions__table-wrap,html body #view#view .ol-wrap,html body #view#view .sc-confirmed-box,html body #view#view .sc-collected-scroll,html body #view#view .scwf-wrap,html body #view#view .sc2498wrap{max-height:calc(100vh - 96px)!important;height:auto!important;overflow:auto!important}
  html body #view#view table thead th{position:sticky!important;top:0!important}
}
/* Headers follow their data (left-aligned) on the workflow and report tables */
html body #view#view .scwf table thead th,html body #view#view .sc-collected-table thead th,html body #view#view.sc-t table thead th{text-align:left!important}

/* ---------- Loading feedback (sc-ui.js) ---------- */
html body #view.scui-loading::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:20000;background:linear-gradient(90deg,transparent,var(--ui-brand),transparent) no-repeat;background-size:40% 100%;animation:scui-bar 1s linear infinite}
html body #view.scui-loading>*{opacity:.55;transition:opacity .15s ease}
@keyframes scui-bar{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){html body #view.scui-loading::before{animation:none;background:var(--ui-brand)}}

/* ---------- Filter bar (sc-ui.js) ---------- */
html body #view#view .scwf-toolbar,html body #view#view .sc-pickup-filter-row{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important}
html body #view#view .scui-filter{display:inline-flex;margin:0}
html body #view#view .scui-filter select{height:40px;min-width:140px;max-width:220px;padding:0 30px 0 12px;font-weight:600;cursor:pointer}
html body #view#view .scui-filter-clear{height:40px;padding:0 14px;border:1px solid var(--ui-line-strong);border-radius:10px;background:var(--ui-surface);color:var(--ui-brand-strong);font-weight:650;cursor:pointer}
html body #view#view .scui-filter-clear:hover{background:var(--ui-brand-soft)}
html body #view#view .scui-filter-count{margin-left:auto;color:var(--ui-muted);font-size:12.5px;font-weight:600}
@media (max-width:767px){html body #view#view .scui-filter,html body #view#view .scui-filter select{flex:1 1 140px;max-width:none}}

/* ---------- Stuck header stays above the rows (all tables, tablet/desktop) ---------- */
@media (min-width:768px){
  html body #view#view table thead{position:sticky!important;top:0!important;z-index:100!important}
}

/* ---------- Reports: one explicit layout per page (data-scui-page is set by sc-ui.js) ----------
   The generic workflow widths were written for another column order; these pages get their own. */
html body #view#view[data-scui-page^="report"] table,html body #view#view[data-scui-page="woe-pending"] table{table-layout:fixed!important;border-collapse:separate!important;border-spacing:0!important}
html body #view#view[data-scui-page^="report"] table th,html body #view#view[data-scui-page^="report"] table td,
html body #view#view[data-scui-page="woe-pending"] table th,html body #view#view[data-scui-page="woe-pending"] table td{
  box-sizing:border-box!important;padding:12px 14px!important;text-align:left!important;vertical-align:middle!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.4!important;height:auto!important}
html body #view#view[data-scui-page^="report"] table th,html body #view#view[data-scui-page="woe-pending"] table th{white-space:nowrap!important;overflow-wrap:normal!important}
html body #view#view[data-scui-page^="report"] table td .a,html body #view#view[data-scui-page="woe-pending"] table td .a{height:auto!important;max-height:none!important;display:inline!important}

/* Reports Pending: Category | Company | Customer Name | Customer Num | Lead Id | Age | Gender | WOE By | Status */
html body #view#view[data-scui-page="reports-pending"] table{width:100%!important;min-width:1360px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(1){width:150px!important;min-width:150px!important;max-width:150px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(2){width:150px!important;min-width:150px!important;max-width:150px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(3){width:220px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(4){width:150px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(5){width:190px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(6){width:80px!important;text-align:center!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(7){width:100px!important;text-align:center!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(8){width:150px!important}
html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(9){width:170px!important;min-width:170px!important;max-width:170px!important}

/* Reports Shared: Category | Company | Customer Name | Cus Num | Gnd | Age | Address | City | Pincode | Package | Tech Name | Tech Num | Price | Assigned By | WOE By | Report Shared By */
html body #view#view[data-scui-page="reports-shared"] table{width:2340px!important;min-width:2340px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(1){width:150px!important;min-width:150px!important;max-width:150px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(2){width:150px!important;min-width:150px!important;max-width:150px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(3){width:200px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(4){width:140px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(5){width:80px!important;text-align:center!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(6){width:70px!important;text-align:center!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(7){width:280px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(8){width:130px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(9){width:100px!important;text-align:center!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(10){width:220px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(11){width:150px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(12){width:140px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(13){width:100px!important;text-align:center!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(14){width:140px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(15){width:130px!important}
html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(16){width:160px!important}

/* WOE Pending: Company | Lead Id | Cus Name | Age | Gender | Date & Time | Referred By | Cus Address | Pincode | Package | Vials Images | Vials Data | Assigned By | Status */
html body #view#view[data-scui-page="woe-pending"] table{width:2250px!important;min-width:2250px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(1){width:140px!important;min-width:140px!important;max-width:140px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(2){width:170px!important;min-width:170px!important;max-width:170px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(3){width:190px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(4){width:70px!important;text-align:center!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(5){width:90px!important;text-align:center!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(6){width:170px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(7){width:160px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(8){width:280px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(9){width:100px!important;text-align:center!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(10){width:220px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(11){width:150px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(12){width:200px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(13){width:140px!important}
html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(14){width:170px!important;min-width:170px!important;max-width:170px!important}

/* Pinned columns (laptop/desktop only; tablets and phones scroll freely) */
@media (min-width:1024px){
  html body #view#view[data-scui-page^="report"] table :is(th,td),html body #view#view[data-scui-page="woe-pending"] table :is(th,td){position:static!important;left:auto!important;right:auto!important;box-shadow:none!important}
  html body #view#view[data-scui-page^="report"] table thead th,html body #view#view[data-scui-page="woe-pending"] table thead th{position:sticky!important;top:0!important;z-index:1!important}
  html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(1),html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(1),html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(1){position:sticky!important;left:0!important;z-index:3!important}
  html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(2),html body #view#view[data-scui-page="reports-shared"] table :is(th,td):nth-child(2){position:sticky!important;left:var(--scui-l2,150px)!important;z-index:3!important;box-shadow:inset -1px 0 0 var(--ui-line-strong)!important}
  html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(2){position:sticky!important;left:var(--scui-l2,140px)!important;z-index:3!important;box-shadow:inset -1px 0 0 var(--ui-line-strong)!important}
  html body #view#view[data-scui-page="reports-pending"] table :is(th,td):nth-child(9),html body #view#view[data-scui-page="woe-pending"] table :is(th,td):nth-child(14){position:sticky!important;right:0!important;z-index:3!important;box-shadow:inset 1px 0 0 var(--ui-line-strong)!important}
  html body #view#view[data-scui-page^="report"] table thead th:is(:nth-child(1),:nth-child(2)),html body #view#view[data-scui-page="woe-pending"] table thead th:is(:nth-child(1),:nth-child(2)),
  html body #view#view[data-scui-page="reports-pending"] table thead th:nth-child(9),html body #view#view[data-scui-page="woe-pending"] table thead th:nth-child(14){top:0!important;z-index:4!important}
  /* pinned cells need a solid background so scrolled columns pass underneath */
  html body #view#view[data-scui-page^="report"] table tbody td,html body #view#view[data-scui-page="woe-pending"] table tbody td{background-color:#fff}
}

/* ---------- Tablet (768–1023px): columns scroll freely, the header row stays visible ---------- */
@media (min-width:768px) and (max-width:1023px){
  html body #view#view table tbody td{position:static!important;left:auto!important;right:auto!important;box-shadow:none!important}
  html body #view#view table thead th{left:auto!important;right:auto!important;box-shadow:none!important}
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width:1024px){
  html body #view#view table thead th{font-size:11px!important}
}

/* ---------- Slide-in menu (≤900px, same breakpoint as admin-mobile.js) ---------- */
@media (max-width:900px){
  html body .sidebar .nav button{min-height:44px!important}
}

/* ---------- Phone (≤767px) ---------- */
@media (max-width:767px){
  html body main.content{padding:12px!important}
  html body .topbar{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;padding:4px 0 10px!important}
  html body .topbar .topbar-context{flex:1 1 auto;min-width:0;text-align:left!important}
  html body .topbar .topbar-context .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .user-chip{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body #view#view .panel,html body #view#view .ops-step,html body #view#view .scwf-panel,html body #view#view .sc-collected-card,
  html body #view#view .view-head,html body #view#view .ol-head,html body #view#view .scwf-head,html body #view#view .sc2498head,html body #view#view .sc-confirmed-head,
  html body #view#view .client-request-simple-head,html body #view#view .cfx-filters{border-radius:14px!important}
  /* Page headers and toolbars stack and wrap instead of overflowing */
  html body #view#view .view-head,html body #view#view .ol-head,html body #view#view .scwf-head,html body #view#view .sc2498head,html body #view#view .sc-confirmed-head,
  html body #view#view .sc-collected-head,html body #view#view .client-request-simple-head,html body #view#view .ol-head-tools,html body #view#view .scwf-toolbar{flex-wrap:wrap!important;gap:10px!important}
  html body #view#view .company-chip-set,html body #view#view .ol-filter-chips,html body #view#view .cfx-chip-row,html body #view#view .scbp-filter-chips,
  html body #view#view .sc-confirmed-filter-chips,html body #view#view .sc-request-quick-filters{flex-wrap:wrap!important}
  /* Tables: no box-in-a-box on phones; the page scrolls vertically and each table scrolls sideways */
  html body #view#view .table-wrap,html body #view#view .request-dispositions__table-wrap,html body #view#view .ol-wrap,html body #view#view .sc-confirmed-box,html body #view#view .sc-collected-scroll,html body #view#view .scwf-wrap,html body #view#view .sc2498wrap{max-height:none!important;height:auto!important}
  /* Tables: controlled horizontal scroll inside the card */
  html body #view#view table thead th{font-size:10.5px!important}
  html body #view#view table tbody td{font-size:12.5px!important}
  /* Pinned columns would cover most of a phone screen: unpin them so every column can be scrolled into view */
  html body #view#view table tbody td{position:static!important;left:auto!important;right:auto!important;box-shadow:none!important}
  html body #view#view table thead th{position:static!important;left:auto!important;right:auto!important;box-shadow:none!important}
  /* Comfortable touch targets */
  html body #view#view table button,html body #view#view .ol-filter-chip,html body #view#view .scbp-chip,html body #view#view .cfx-chip-row button,
  html body #view#view .company-chip-set button,html body #view#view .request-dispositions__preset{min-height:36px}
  html body #view#view input:not([type=checkbox]):not([type=radio]):not([type=hidden]),html body #view#view select{min-height:42px;font-size:16px!important}
  html body .ol-modal input:not([type=checkbox]):not([type=radio]),html body .ol-modal select,html body .ol-modal textarea,
  html body .sc-collected-modal input:not([type=checkbox]):not([type=radio]),html body .sc-collected-modal select,html body .scwf-modal input:not([type=checkbox]):not([type=radio]),html body .scwf-modal select{font-size:16px!important}
  /* Modals become full-width sheets */
  html body .ol-modal,html body .sc-collected-modal>div,html body .scwf-box,html body .sc-master-modal>div,html body .sc-confirmed-modal>div{width:calc(100vw - 20px)!important;max-height:calc(100vh - 20px)!important}
}
@media (prefers-reduced-motion:reduce){html body *{transition:none!important;animation:none!important}}