@import url("/assets/ops-navigation.css");
/* ============================================================================
   Clement HQ Ops Center — shared UI layer (assets/ops-ui.css)

   Loaded last on every root page. It is deliberately additive: it normalises
   the parts every module shares (shell header, logo, page headings, tabs,
   tables, buttons, forms, focus, motion) and leaves each page's own records,
   controls and workflows intact. Page-level rules still win on a tie because
   this file only restates the shared contracts, it does not restyle records.

   The `body.ops-light` block at the end converts the original dark module
   template (admin, ap-invoices, capture, fi-cancellations, fi-intake,
   sold-log, unassigned) to the light ArbDesk canvas without editing the
   markup, IDs, handlers or payloads those pages depend on.

   Reference: integrations/arbdesk/frontend/src/styles.css + ops-shell.css.
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/* 1. Tokens                                                                  */
/* -------------------------------------------------------------------------- */
:root {
  --ops-canvas: #f4f5f7;
  --ops-surface: #ffffff;
  --ops-surface-soft: #f8f9fa;
  --ops-ink: #1a1a1a;
  --ops-muted: #5b6b7b;
  --ops-line: #dce1e4;
  --ops-accent: #c8221a;
  --ops-accent-hover: #a31c16;
  --ops-accent-soft: #faedef;
  --ops-black: #111111;
  --ops-focus: #c8221a;
}

/* Bulk Intake retains its workflow selectors while joining the shared canvas. */
body.ops-light .note-banner { color:#6b4d08; background:#fff8e6; }
body.ops-light .err-banner b, body.ops-light .why { color:#8c2921; }
body.ops-light .strip { background:#fff; border-color:#dce1e4; }
body.ops-light .strip a { color:#5b6b7b; }
body.ops-light .strip a.on, body.ops-light .strip a:hover { color:#a31c16; }
body.ops-light .drop { border-color:#9ca9b3; }
body.ops-light .drop:hover, body.ops-light .drop.over { background:#faedef; }
body.ops-light .bar { background:#dce1e4; }
body.ops-light .pill, body.ops-light .filters button, body.ops-light .fix { background:#fff; color:#3f4a54; }
body.ops-light .pill b { color:#1a1a1a; }
body.ops-light .pill.ok, body.ops-light .tag.g { color:#195c31; }
body.ops-light .pill.warn, body.ops-light .tag.y { color:#6b4d08; }
body.ops-light .pill.bad, body.ops-light .tag.r { color:#8c2921; }
body.ops-light .filters button.on { color:#a31c16; background:#faedef; }
body.ops-light .btn.ghost:hover:not(:disabled) { color:#a31c16; border-color:#a31c16; }

/* -------------------------------------------------------------------------- */
/* 2. Base + focus                                                            */
/* -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}
/* No global body clipping: it hid real horizontal-overflow bugs and could cut
   off wide tables. Layout is contained instead with max-width on the shell,
   capped media, and scroll containers (see section 5). */
body {
  max-width: 100%;
}
img,
svg,
video,
canvas {
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea,
summary,
[tabindex] {
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ops-focus);
  outline-offset: 3px;
}
/* Visible hover on the black shell header, with accessible contrast. */
.std-hdr a:hover,
.std-hdr a:focus-visible,
header .back-link:hover,
header .back-link:focus-visible {
  color: #ffffff;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: 400;
  padding: 10px 14px;
  border-radius: 4px;
  background: #ffffff;
  color: var(--ops-accent);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}
.skip-link:focus {
  top: 8px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------- */
/* 3. Shell header + controlled logo                                          */
/* -------------------------------------------------------------------------- */
.std-hdr {
  min-height: 54px;
  max-width: 100%;
}
/* The shell logo is a classless <img> on the real pages (its inline
   `.hdr-logo` rule never matched), so it rendered at its natural width
   (~300px). Cap every actual header image selector to the 210px reference. */
.hdr-logo,
header.std-hdr img,
.std-hdr img,
.std-hdr-left img,
.hdr-left img,
.hdr > img,
.hdr img {
  height: 30px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  flex: 0 0 auto;
}
.hdr-page,
.page-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.std-hdr-left,
.std-hdr-right,
.hdr-left,
.hdr-right {
  min-width: 0;
}
.sign-out {
  min-height: 32px;
}
@media (max-width: 700px) {
  .std-hdr,
  header.std-hdr {
    height: auto;
    min-height: 54px;
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 8px;
  }
  .std-hdr-right {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hdr-logo,
  header.std-hdr img,
  .std-hdr img,
  .std-hdr-left img {
    max-width: 150px;
  }
}
@media (max-width: 420px) {
  .hdr-logo,
  header.std-hdr img,
  .std-hdr img,
  .std-hdr-left img {
    max-width: 118px;
    height: 24px;
  }
}
/* The header keeps its labels and actions on every viewport: the mobile layout
   wraps instead of hiding controls behind a menu. Scoped strictly to the shell
   header so per-page permission fields are never exposed by a global override. */
.std-hdr .page-name,
.std-hdr .hdr-page,
.std-hdr .hdr-date,
.std-hdr .beta-badge,
.std-hdr .timestamp,
.std-hdr .sign-out,
.std-hdr .back-link {
  display: revert;
}
.std-hdr .std-hdr-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Comfortable 44px touch targets for the shared shell, tabs and primary
   actions (WCAG 2.5.5), without stretching dense desk tables. */
.tab-btn,
.std-hdr button,
.std-hdr .back-link,
.byline button {
  min-height: 44px;
}

/* -------------------------------------------------------------------------- */
/* 4. Page headings + tabs                                                    */
/* -------------------------------------------------------------------------- */
.page-header,
.page-heading,
.page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header h1,
.page-heading h1,
.page-title h1 {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.page-header .sub,
.page-heading .sub,
.page-title .sub,
.page-sub {
  font-size: 13px;
  color: var(--ops-muted);
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ops-muted);
}
@media (max-width: 700px) {
  .page-header,
  .page-heading,
  .page-title {
    align-items: flex-start;
  }
  .page-header h1,
  .page-heading h1,
  .page-title h1 {
    font-size: 23px;
  }
}

/* Tabbed navigation: red underline on the active tab, keyboard reachable. */
.tab-bar,
.mtabs,
.tabs {
  flex-wrap: wrap;
}
.tab-btn:focus-visible,
.mtab:focus-visible,
.tabs button:focus-visible {
  outline: 3px solid var(--ops-focus);
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------- */
/* 5. Tables: scroll inside their own container, never the page body          */
/* -------------------------------------------------------------------------- */
.tablewrap,
.table-wrap,
.tbl-wrap,
.tbl-scroll,
.tblscroll,
.tblwrap,
.vehicle-table-wrap,
.scroll-x {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tablewrap:focus-visible,
.table-wrap:focus-visible,
.tbl-wrap:focus-visible,
.tbl-scroll:focus-visible,
.tblscroll:focus-visible,
.tblwrap:focus-visible,
.scroll-x:focus-visible {
  outline: 3px solid var(--ops-focus);
  outline-offset: 1px;
}
table {
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* 6. Forms: every control keeps a name (label or aria-label)                 */
/* -------------------------------------------------------------------------- */
.field > span,
.fld > label,
.lbl {
  display: block;
}
input,
select,
textarea {
  max-width: 100%;
}
select,
input[type="date"],
input[type="number"] {
  min-height: 34px;
}

/* -------------------------------------------------------------------------- */
/* 7. Announcements / errors / empty states                                   */
/* -------------------------------------------------------------------------- */
[data-ops-announce] {
  min-height: 0;
}
.ops-alert {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #ebccc6;
  border-left: 4px solid var(--ops-accent);
  border-radius: 5px;
  background: #fff4f2;
  color: #8f2a21;
  font-size: 13px;
  line-height: 1.5;
}
.ops-alert[data-kind="warn"] {
  border-color: #ecd9b3;
  border-left-color: #b7860b;
  background: #fff8e8;
  color: #6d5417;
}
.ops-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.ops-alert button {
  margin-left: 10px;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Bootstrap failures are retryable: they never bounce a signed-in user to
   login. Only a genuine 401 does that (see ops-ui.js bootstrapSession). */
.ops-boot-error {
  position: relative;
  z-index: 300;
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid #ecd9b3;
  background: #fff8e8;
  color: #6d5417;
  font-size: 13px;
  line-height: 1.5;
}
.ops-boot-error a {
  color: #8a2d24;
  font-weight: 700;
  text-decoration: underline;
}
.ops-boot-error button {
  margin-left: 10px;
  padding: 4px 11px;
  border: 1px solid #b7860b;
  border-radius: 4px;
  background: #ffffff;
  color: #6d5417;
  font-weight: 700;
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* 8. Inventory title status + readiness (uv-inventory)                       */
/* -------------------------------------------------------------------------- */
.title-pill.title-link {
  text-decoration: none;
}
.title-pill.title-muted {
  background: #eceff1;
  color: #58636c;
  cursor: default;
}
.title-pill.title-unverified {
  background: #eef2f7;
  color: #3f4a54;
}
.title-blockers {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ops-muted);
  line-height: 1.45;
  white-space: normal;
}
/* Each visible label is grouped with its own control so a narrow layout can
   never strand "STORE" on the previous row while its select wraps below. */
.units-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.unit-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.unit-filter-search {
  flex: 2 1 240px;
}
.unit-filter input,
.unit-filter select {
  width: 100%;
  min-width: 0;
}
.unit-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ops-muted);
  white-space: nowrap;
}
.units-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ops-muted);
}
/* A checkbox with a text label stays on one line; a narrow flex parent must
   not break "In stock only" into a word per line. */
.watch-toggle,
.units-search .watch-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
}
.watch-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}
/* Keep Previous / page / Next on one row at 390px; the page text may wrap
   inside its own cell but the controls themselves do not split apart, and the
   buttons stay a comfortable 40px target rather than a tiny one. */
.units-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.units-pager .units-count {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.units-pager button {
  flex: 0 0 auto;
  min-height: 40px;
}

/* A native open control for a clickable table row, so the row keeps its native
   table semantics instead of being flattened into a role="button". */
.ops-row-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  margin-left: 8px;
  padding: 2px 10px;
  border: 1px solid var(--ops-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ops-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}
.ops-row-open:hover {
  border-color: var(--ops-accent);
  background: var(--ops-accent-soft);
}
.ops-row-open:focus-visible {
  outline: 3px solid var(--ops-focus);
  outline-offset: 2px;
}

/* The Arbitration button is a real new control on inventory rows — it must
   look like the rest of the system, not a native grey button. */
[data-arbitration-store],
.ops-arb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--ops-accent);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ops-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
[data-arbitration-store]:hover,
.ops-arb-btn:hover {
  background: var(--ops-accent);
  color: #ffffff;
}
[data-arbitration-store]:focus-visible,
.ops-arb-btn:focus-visible {
  outline: 3px solid var(--ops-focus);
  outline-offset: 2px;
}

/* Priority record rows reflow on narrow screens instead of squeezing. */
@media (max-width: 640px) {
  .exception-row {
    flex-wrap: wrap;
  }
  .exception-meta {
    text-align: left;
    min-width: 0;
    width: 100%;
  }
}

@media print {
  body {
    overflow: visible;
  }
  .std-hdr,
  .tab-bar,
  .filter-bar,
  .units-search,
  .units-pager,
  .refresh-btn,
  .export-btn,
  [data-arbitration-store] {
    display: none !important;
  }
  .exception-list {
    display: block;
  }
  .exception-row {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* -------------------------------------------------------------------------- */
/* 9. Reduced motion                                                          */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 10. Light canvas for the legacy dark module template                       */
/*     Scoped to body.ops-light so light pages are untouched. Specificity      */
/*     (body.ops-light <selector>) intentionally beats each page's own rule.   */
/* -------------------------------------------------------------------------- */
html:has(body.ops-light) {
  color-scheme: light;
}
body.ops-light {
  color-scheme: light;
  background: var(--ops-canvas);
  color: var(--ops-ink);
  --canvas: #f4f5f7;
  --fog: #f4f5f7;
  --surface: #ffffff;
  --card: #ffffff;
  --card2: #f8f9fa;
  --tile: #ffffff;
  --tile2: #f8f9fa;
  --bd: #dce1e4;
  --bd2: #e8ecf0;
  --line: #dce1e4;
  --tx: #1a1a1a;
  --tx2: #5b6b7b;
  --tx3: #8794a1;
  --muted: #6b7a8d;
}
body.ops-light select,
body.ops-light option {
  background-color: #ffffff;
  color: var(--ops-ink);
}
body.ops-light select:disabled {
  color: #8794a1;
}

/* Surfaces that were #111/#141414/#161616/#1A1A1A. */
body.ops-light .card,
body.ops-light .tbl-wrap,
body.ops-light .tbl-card,
body.ops-light .recent-card,
body.ops-light .stat,
body.ops-light .row,
body.ops-light .reason,
body.ops-light .modal,
body.ops-light .modal-card,
body.ops-light .modal-body,
body.ops-light .modal-footer,
body.ops-light .modal-ft,
body.ops-light .drawer,
body.ops-light .drawer-hd,
body.ops-light .dhead,
body.ops-light .dr-head,
body.ops-light .dr-body,
body.ops-light .dr-foot,
body.ops-light .dact,
body.ops-light .form-card,
body.ops-light .oa-card,
body.ops-light .oa-col,
body.ops-light .oa-owners,
body.ops-light .notice-warn,
body.ops-light .notice-err,
body.ops-light .empty,
body.ops-light .skel,
body.ops-light .mo,
body.ops-light .addrow,
body.ops-light .toast,
body.ops-light .viewer,
body.ops-light .amounts,
body.ops-light .doc,
body.ops-light .dealhint {
  background: #ffffff;
  border-color: var(--ops-line);
  color: var(--ops-ink);
}
/* Controls/chips that were filled #111. */
body.ops-light .pipe-chip,
body.ops-light .search,
body.ops-light .filter-sel,
body.ops-light .filter-date,
body.ops-light .filter-num,
body.ops-light .toolbar2,
body.ops-light .fld input,
body.ops-light .fld select,
body.ops-light .fld textarea,
body.ops-light .radio-opt,
body.ops-light .drop,
body.ops-light .file-item,
body.ops-light .card-row,
body.ops-light .status-line select,
body.ops-light .fld .prod-checks label,
body.ops-light .prod-chip,
body.ops-light .add-photo,
body.ops-light .thumb,
body.ops-light .confirm textarea,
body.ops-light .ack-box,
body.ops-light .seg button,
body.ops-light .side-chip,
body.ops-light .note-btn,
body.ops-light .al-bar select,
body.ops-light .al-bar input,
body.ops-light .form-input,
body.ops-light .manual-box,
body.ops-light input,
body.ops-light select,
body.ops-light textarea {
  background: #ffffff;
  color: var(--ops-ink);
  border-color: var(--ops-line);
}
body.ops-light thead th,
body.ops-light .table-head {
  background: #f8f9fa;
  color: var(--ops-muted);
  border-color: var(--ops-line);
}
body.ops-light th {
  background: #f8f9fa;
  color: var(--ops-muted);
  border-color: var(--ops-line);
}
body.ops-light td,
body.ops-light tbody td,
body.ops-light tbody tr:last-child td {
  border-color: var(--ops-line);
}
body.ops-light tbody tr:hover,
body.ops-light tr.case-row:hover,
body.ops-light tr.inv-row:hover,
body.ops-light .oa-row:hover,
body.ops-light td.edit:hover,
body.ops-light .user-table tr:hover td,
body.ops-light .recent-row:hover {
  background: #f5f7f9;
}
body.ops-light .drive-row:hover {
  background: #f5f7f9;
}

/* Muted copy that was white-on-dark. */
body.ops-light .section-label,
body.ops-light .page-sub,
body.ops-light .sub,
body.ops-light .hint,
body.ops-light .caveats,
body.ops-light .sec-title,
body.ops-light .al-note,
body.ops-light .empty,
body.ops-light .empty strong,
body.ops-light .loading,
body.ops-light .flagn.zero,
body.ops-light .dn,
body.ops-light .dmeta,
body.ops-light .sub,
body.ops-light .row-meta,
body.ops-light .reason-txt,
body.ops-light .reason-age,
body.ops-light .row-detail,
body.ops-light .group-name,
body.ops-light .group-count,
body.ops-light .stat-l,
body.ops-light .pipe-l,
body.ops-light .fld label,
body.ops-light .fld .hint,
body.ops-light .save-title,
body.ops-light .save-empty,
body.ops-light .cust small,
body.ops-light .oa-title,
body.ops-light .oa-loc,
body.ops-light .oa-col-label,
body.ops-light .oa-owners-title,
body.ops-light .form-group label,
body.ops-light .checkbox-row,
body.ops-light .al-table th,
body.ops-light .user-table th,
body.ops-light .user-table td,
body.ops-light .notice,
body.ops-light .mo .n,
body.ops-light th.dms,
body.ops-light td.dms,
body.ops-light td.empty,
body.ops-light .legend,
body.ops-light .chart text {
  color: var(--ops-muted);
}
body.ops-light .empty strong,
body.ops-light .oa-name,
body.ops-light .reason-key,
body.ops-light strong,
body.ops-light b,
body.ops-light .cust {
  color: var(--ops-ink);
}
body.ops-light .drive-row.drive-new {
  background: var(--ops-accent-soft);
}
/* Active segmented options keep the red accent, not the neutral fill. */
body.ops-light .seg button.on {
  background: var(--ops-accent);
  color: #ffffff;
}
body.ops-light .seg-btn.active {
  background: var(--ops-accent-soft);
}
body.ops-light .pipe-chip.active {
  border-color: var(--ops-accent);
}

/* Ghost / secondary buttons that relied on white-on-dark borders. */
body.ops-light .btn.ghost,
body.ops-light .x-btn,
body.ops-light .dclose,
body.ops-light .mini,
body.ops-light .mini-btn,
body.ops-light .btn-muted,
body.ops-light .err-banner button,
body.ops-light .modal-cancel {
  background: #ffffff;
  border-color: #cfd6dc;
  color: var(--ops-ink);
}
body.ops-light .btn.ghost:hover,
body.ops-light .x-btn:hover,
body.ops-light .dclose:hover,
body.ops-light .mini:hover,
body.ops-light .mini-btn:hover,
body.ops-light .modal-cancel:hover {
  border-color: #9aa6b0;
  color: var(--ops-ink);
}

/* Status pills: dark-theme translucent tints and light text are unreadable
   on white, so each family gets a light-surface equivalent. */
body.ops-light .pill,
body.ops-light .tagx,
body.ops-light .side-chip,
body.ops-light .chip,
body.ops-light .oa-badge,
body.ops-light .al-ev,
body.ops-light .save-days {
  border-color: transparent;
}
body.ops-light .pill.new,
body.ops-light .badge-muted,
body.ops-light .oa-badge-vacant,
body.ops-light .al-ev.dim,
body.ops-light .tagx.skipped,
body.ops-light .pill.dismissed,
body.ops-light .pill.purged,
body.ops-light .recon.unk,
body.ops-light .doc-tag.boil {
  background: #eceff1;
  color: #4a5568;
}
body.ops-light .pill.parsed,
body.ops-light .pill.created,
body.ops-light .pill.attached,
body.ops-light .tagx.done,
body.ops-light .save-days.ok,
body.ops-light .badge-ok,
body.ops-light .oa-badge-filled,
body.ops-light .al-ev.ok {
  background: #e7f3ec;
  color: #1d6a39;
}
body.ops-light .pill.review,
body.ops-light .tagx.queued,
body.ops-light .tagx.flag,
body.ops-light .save-days.warn,
body.ops-light .badge-warn,
body.ops-light .oa-badge-hiring,
body.ops-light .al-ev.warn,
body.ops-light .flagn {
  background: #fbf3dc;
  color: #7a5a08;
}
body.ops-light .pill.error,
body.ops-light .tagx.failed,
body.ops-light .save-days.hot,
body.ops-light .al-ev.bad,
body.ops-light .age.hot {
  background: #fbeae8;
  color: #a6332b;
}
body.ops-light .age.warn,
body.ops-light .money.neg {
  color: #a6332b;
}
body.ops-light .oa-badge-tbd {
  background: #e7eef7;
  color: #1e5b8f;
}
body.ops-light .btn-danger {
  background: #fbeae8;
  color: #a6332b;
  border-color: #e5b6b1;
}
body.ops-light .btn-warn {
  background: #fbf3dc;
  color: #7a5a08;
  border-color: #e2cf9a;
}
body.ops-light .status-ok {
  color: #1d6a39;
}
body.ops-light .status-err {
  color: #a6332b;
}
body.ops-light .migrate-note {
  background: #fff8e8;
  border-color: #e6d7b1;
  color: #6d5417;
}
body.ops-light .oa-error {
  background: #fbeae8;
  border-color: #e5b6b1;
  color: #a6332b;
}
body.ops-light .err-banner,
body.ops-light .notice-err,
body.ops-light .ops-alert {
  background: #fff4f2;
  border-color: #ebccc6;
  color: #8f2a21;
}
body.ops-light .notice-warn {
  background: #fff8e8;
  border-color: #ecd9b3;
  color: #6d5417;
}
body.ops-light .chart .ax {
  stroke: #dce1e4;
}
body.ops-light .chart text {
  fill: #4a5568;
}
body.ops-light .chart .val {
  fill: #4a5568;
}
body.ops-light .dr-close {
  color: var(--ops-muted);
}
body.ops-light .note.side-sales,
body.ops-light .note.side-finance {
  border-left-color: #cfd6dc;
}
body.ops-light .oa-connector,
body.ops-light .oa-sub-row::before {
  background: #dce1e4;
  border-color: #dce1e4;
}
body.ops-light .oa-chip {
  background: #f4f5f7;
  border-color: #dce1e4;
}

/* -------------------------------------------------------------------------- */
/* 11. Light-theme text contrast corrections                                  */
/*     The migrated dark template hard-codes #fff / rgba(255,255,255,a) text  */
/*     in places the token overrides above cannot reach (a literal value, or a */
/*     selector more specific than the token rule). Each rule is scoped to     */
/*     body.ops-light AND to the control that actually sits on a light         */
/*     surface, so the black shell header (.std-hdr) and the coloured primary  */
/*     buttons keep their intended white labels. This is a targeted repair of  */
/*     a visual regression from the theme overhaul — not a blanket colour.     */
/* -------------------------------------------------------------------------- */

/* Native placeholders in light inputs were rgba(255,255,255,.2) — invisible. */
body.ops-light input::placeholder,
body.ops-light textarea::placeholder {
  color: #64717c;
  opacity: 1;
}

/* Module tab strip (the two F&I pages). The active tab was white on pale. */
body.ops-light .mtab {
  color: var(--ops-muted);
}
body.ops-light .mtab:hover {
  color: var(--ops-ink);
}
body.ops-light .mtab.on {
  color: var(--ops-ink);
}
body.ops-light .mtab .n {
  background: #eceff1;
  color: var(--ops-muted);
}
body.ops-light .mtab.on .n {
  background: var(--ops-accent-soft);
  color: var(--ops-accent);
}
body.ops-light .mtab:focus-visible {
  outline-color: var(--ops-accent);
}

/* Error / duplicate / cleared banners and empty states: links, bold labels and
   the Retry control were literal white on a pale surface. */
body.ops-light .err-banner a,
body.ops-light .dup-box a,
body.ops-light .cleared-box a,
body.ops-light .empty-state a,
body.ops-light .att-row a,
body.ops-light .doc .back-link {
  color: var(--ops-accent);
}
body.ops-light .err-banner b {
  color: #a33a2f;
}

/* A selected filter and a sorted table header were white on a light surface. */
body.ops-light .filter-sel.on {
  color: var(--ops-ink);
}
body.ops-light th.sorted {
  color: var(--ops-ink);
}
body.ops-light .pipe-chip:hover {
  border-color: #9aa6b0;
}
/* The F&I white outlines vanish on the pale canvas. */
body.ops-light .pipe-chip:focus-visible,
body.ops-light .btn:focus-visible {
  outline-color: var(--ops-accent);
}

/* Admin access-log wrapped cells: long detail text was near-white on white. */
body.ops-light .al-table td.wrap {
  color: var(--ops-muted);
}

/* Capture result body and the add-photo control. */
body.ops-light .vres .vr-body b {
  color: var(--ops-ink);
}
body.ops-light .add-photo:hover {
  color: var(--ops-accent);
}

/* F&I cancellations product checkbox label sat white on a white label. */
body.ops-light .prod-checks .pc-name {
  color: var(--ops-ink);
}
/* Sold Log "add a row" hint (0,2,0 on the page) beat the token rule. */
body.ops-light .addrow .hint {
  color: var(--ops-muted);
}
/* Sold Log footer, customer/sub copy and note timestamps. */
body.ops-light .ftr {
  color: var(--ops-muted);
}
body.ops-light .note-meta {
  color: var(--ops-muted);
}

/* -------------------------------------------------------------------------- */
/* 12. Layout contracts                                                       */
/*                                                                            */
/*     The earlier sections moved the legacy dark module template onto the    */
/*     light canvas — a colour overlay. This section gives the shared chrome   */
/*     a real LAYOUT: one page-heading shape, a white secondary-nav strip,     */
/*     compact filter/action bars, aligned metric tiles, and readable drawers. */
/*     It is additive: records, controls, IDs and handlers are untouched, and  */
/*     each page's own rules still win on a genuine tie.                       */
/* -------------------------------------------------------------------------- */

/* 12a. Canonical page heading. Title on the left, actions on the right, both
   wrapping before either is squeezed. */
.page-heading,
.page-header,
.page-title {
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-heading > div:first-child,
.page-header > div:first-child,
.page-title > div:first-child {
  min-width: 0;
}
.page-heading h1,
.page-header h1,
.page-title h1,
h1.page-title,
h1.page-heading {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ops-ink);
}
.page-heading .sub,
.page-header .sub,
.page-title .sub,
.page-heading .page-sub,
.page-header .page-sub,
.page-title .page-sub,
.page-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ops-muted);
  margin-top: 4px;
}
.page-heading .eyebrow,
.page-header .eyebrow {
  margin-bottom: 6px;
}
.page-heading .actions,
.page-header .actions,
.page-title .actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* A heading that sits directly under the shell header on a full-bleed page
   (Daily Ops has no .wrap) gets the same gutters as the page body. */
.page-shell {
  padding: 18px 28px 0;
}
@media (max-width: 600px) {
  .page-shell {
    padding: 14px 14px 0;
  }
}
@media (max-width: 700px) {
  .page-heading h1,
  .page-header h1,
  .page-title h1,
  h1.page-title,
  h1.page-heading {
    font-size: 21px;
  }
  .page-heading,
  .page-header,
  .page-title {
    align-items: flex-start;
    gap: 12px;
  }
}

/* 12b. Secondary navigation is a WHITE strip with a red active underline —
   never a black bar. The Sold Log tab strip painted #0D0D0D under the light
   canvas; the F&I tabs are covered too so the two families agree. Scoped to
   body.ops-light, which is exactly the pages this template owns. */
body.ops-light .tabs,
body.ops-light .mtabs {
  background: #ffffff;
  border-bottom: 1px solid var(--ops-line);
}
body.ops-light .tabs .tab,
body.ops-light .mtabs .mtab {
  background: transparent;
  color: var(--ops-muted);
  border-bottom: 2px solid transparent;
}
body.ops-light .tabs .tab:hover,
body.ops-light .tabs .tab:focus-visible,
body.ops-light .mtabs .mtab:hover,
body.ops-light .mtabs .mtab:focus-visible {
  color: var(--ops-ink);
}
body.ops-light .tabs .tab.active,
body.ops-light .tabs .tab.on,
body.ops-light .mtabs .mtab.on {
  color: var(--ops-ink);
  border-bottom-color: var(--ops-accent);
}

/* 12c. Filter / action bars: compact, wrapping, one control height. The
   ap-invoices refine bar (.toolbar2) was a solid #111 slab on the pale
   canvas; it becomes a quiet surface with a hairline border. */
.toolbar,
.toolbar2,
.filter-bar,
.action-row,
.controls,
.tasks-toolbar {
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.toolbar > *,
.toolbar2 > *,
.filter-bar > * {
  max-width: 100%;
}
.toolbar .search,
.toolbar2 .search {
  flex: 1 1 260px;
  min-width: 0;
}
.toolbar select,
.toolbar input,
.toolbar2 select,
.toolbar2 input,
.filter-bar select,
.filter-bar input,
.controls select,
.controls input[type="text"] {
  min-height: 36px;
}
body.ops-light .toolbar2 {
  background: var(--ops-surface-soft);
  border: 1px solid var(--ops-line);
}
@media (max-width: 700px) {
  .toolbar > *,
  .toolbar2 > *,
  .filter-bar > * {
    flex: 0 1 auto;
  }
  .toolbar .search,
  .toolbar2 .search {
    flex-basis: 100%;
  }
  .toolbar .btn,
  .toolbar2 .btn {
    flex: 1 1 auto;
  }
}

/* 12d. Metric tiles keep equal tracks and never stretch the last tile across
   a whole row (the lone-orphan look). auto-fill leaves the row simply short
   instead of inflating the final card. */
.tiles,
.strip {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.metrics.three {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* An empty strip/summary region must not reserve a large blank block before
   its data arrives; it comes back as soon as content is rendered into it. */
.pipe:empty,
.tiles:empty,
.strip:empty {
  display: none;
}

/* 12e. Drawer readability: related fields sit in a group, labels stay with
   their controls, and long values wrap. No IDs, handlers or controls change. */
.dr-body,
.drawer-body {
  line-height: 1.5;
}
.drawer fieldset,
.dr-body fieldset,
.drawer-body fieldset {
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.drawer fieldset > legend,
.dr-body fieldset > legend,
.drawer-body fieldset > legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ops-muted);
  padding: 0 6px;
}
.drawer .field,
.dr-body .field,
.drawer-body .field {
  margin-bottom: 10px;
}
.drawer .field > span,
.drawer .field > label,
.dr-body .field > span,
.dr-body .field > label {
  font-size: 12px;
  color: var(--ops-muted);
}
.drawer dd,
.dr-body dd {
  overflow-wrap: anywhere;
}

/* 12f. Controlled label tracking and readable measure. Only the shared
   micro-labels are normalised here; each page's own label tracking (its
   deliberate design) is left alone. Prose is capped so it does not run the
   full width of a wide desk screen. */
.eyebrow,
.unit-filter-label {
  letter-spacing: 0.07em;
}
.tile-desc,
.page-sub,
.lens-blurb,
.padded > p {
  max-width: 74ch;
}

/* Local design review: shared Clement glass shell. Data surfaces stay opaque.
   A single static blur surface; motion is limited to transform/opacity. */
body.ops-design {
  --ops-canvas:#f3f5f8; --ops-ink:#182331; --ops-muted:#536479;
  --ops-line:#dce3eb; --bg:#f3f5f8; --panel:#fff; --panel2:#f7f9fc;
  --ink:#182331; --dim:#536479; --dim2:#66758a; --line:#dce3eb;
  --tile:#fff; --muted:#536479;
  background:var(--ops-canvas); color:var(--ops-ink);
  font-family:'Segoe UI',Arial,sans-serif; font-size:14px; line-height:1.5;
}
.ops-design *, .ops-design *::before, .ops-design *::after { box-sizing:border-box; }
.ops-design [hidden] { display:none !important; }
.ops-design .std-hdr { background:#202831; border-bottom:0; padding-inline:28px; min-height:60px; }
.ops-design .std-hdr .page-name {color:#fff;}
.ops-design .std-hdr .sign-out { color:#f3f5f8; border-color:#7e8790; letter-spacing:0; text-transform:none; font-size:12px; }
.ops-glass-nav {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 18px 24px;
  padding:8px 14px; min-height:58px; border:1px solid #fff; border-radius:16px;
  background:#f0f3f7; box-shadow:0 8px 24px #273b5010,inset 0 1px 0 #fff;
  position:relative; z-index:5;
}
@supports (backdrop-filter:blur(12px)) {
 .ops-glass-nav { background:rgba(243,246,250,.9); backdrop-filter:blur(12px); }
}
.ops-glass-nav a,.ops-glass-nav > span { padding:10px 16px; font-size:14px; font-weight:600; color:#4c5d73; text-decoration:none; border-radius:8px; border-bottom:3px solid transparent; }
.ops-glass-nav a:hover { background:#fff; color:#a31c16; }
.ops-glass-nav a[aria-current=page] { color:#b31d16; border-bottom-color:#c8221a; background:#ffffffa8; }
.ops-glass-nav > span {color:#182331; margin-left:auto;}
.ops-design :is(.panel,.card,.modal,.drawer,.dr,.table-wrap,.table-container) { border-radius:12px; border-color:var(--ops-line); }
.ops-design :is(.modal,.drawer,.dr) {background:#fff;color:var(--ops-ink);box-shadow:0 20px 70px #172b4430;}
.ops-design :is(.modal-head,.drawer-head,.dr-head) {background:#f4f6fa;border-bottom:1px solid var(--ops-line);}
.ops-design :is(.page-heading,.page-header,.page-title) h1 {font-size:30px;letter-spacing:-.8px;color:var(--ops-ink);}
.ops-design :is(.tabs,.tab-bar,.mtabs) {gap:4px;border-radius:12px;padding:6px;background:#edf1f6;border:1px solid #dce3eb;}
.ops-design :is(.tabs,.tab-bar,.mtabs) button {border-radius:8px;min-height:44px;}
.ops-design :is(.tabs,.tab-bar,.mtabs) :is(.active,.on) {background:#fff;color:#ad2119;}
.ops-design :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) {border-radius:8px;border-color:#c9d3df;background:#fff;color:#182331;}
.ops-design :is(input,select,textarea):disabled {background:#edf0f4;color:#66758a;}
.ops-design :is(.btn,button) {border-radius:8px;}
.ops-design :is(.panel,.card) {background:#fff;}
.ops-design table {font-variant-numeric:tabular-nums;}
.ops-design th {background:#f5f7fa;color:#536479;}
.ops-design td {border-color:#e5eaf0;}
.ops-design tbody tr:hover {background:#f7f9fc;}
.ops-design .wrap,.ops-design .page-shell {max-width:1440px;}
/* Hub directory keeps the actual card nodes and their entitlement visibility. */
.ops-hub .hero {background:transparent;border:0;padding:12px 48px 24px;}
.ops-hub .hero-top {align-items:center;}
.ops-hub .hero-greeting {font-size:11px;letter-spacing:1.5px;margin-bottom:6px;}
.ops-hub .hero-title {font-size:42px;font-weight:750;letter-spacing:-1.2px;}
.ops-hub .hero-title span {color:inherit;}
.ops-hub .hero-sub {font-size:16px;margin-top:8px;}
.ops-hub .hero-date {display:none;}
.ops-primary-link {display:inline-flex;padding:13px 24px;border-radius:8px;background:#c8221a;color:#fff;text-decoration:none;font-weight:650;font-size:15px;}
.ops-primary-link:hover {background:#a31c16;}
.directory-controls {margin:0 48px 20px;}
.directory-controls label {display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.directory-controls input {width:100%;min-height:52px;padding:12px 18px;font-size:16px;}
.ops-hub .grid-section {width:100%;max-width:1600px;padding:0 48px 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;}
.ops-hub .module-group,.ops-hub .grid {display:contents;}
.ops-hub .module-group > .grid-label {display:none;}
.ops-hub .tile {min-height:142px;padding:24px 38px 24px 90px;border-radius:10px;position:relative;}
.ops-hub .tile-name {font-size:18px;font-weight:700;line-height:1.25;margin-bottom:6px;color:#142030;}
.ops-hub .tile-desc {font-size:14px;line-height:1.5;color:#536479;}
.ops-hub .tile-badge,.ops-hub .tile-accent-bar {display:none;}
.ops-hub .tile-count {top:8px;right:8px;min-width:20px;height:20px;font-size:11px;}
.ops-hub .tile-arrow {right:14px;bottom:16px;}
.ops-hub .tile::before {content:'';position:absolute;left:20px;top:25px;width:48px;height:48px;border-radius:10px;background-color:#faf0f1;background-position:center;background-repeat:no-repeat;background-size:28px;}
.ops-hub #hub-note {margin:0!important;grid-column:1/-1;}
.directory-filters {grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0 12px;border-bottom:1px solid #dce3eb;}
.directory-filters button {background:transparent;border:0;padding:10px 14px;min-height:44px;color:#536479;font-size:14px;cursor:pointer;}
.directory-filters button[aria-pressed=true] {background:#f6e8e9;color:#a31c16;}
#workflow-results {margin-left:auto;font-size:12px;color:#536479;}
#workflow-empty {grid-column:1/-1;padding:32px 0;color:#536479;}
@media(max-width:1000px) {.ops-hub .grid-section{grid-template-columns:repeat(2,minmax(0,1fr));}.ops-hub .hero-title{font-size:34px;}}
@media(max-width:600px) {
 .ops-design .std-hdr {padding-inline:16px;position:relative;}
 .ops-glass-nav {margin:0 8px 18px;padding:4px;gap:0;border-radius:12px;}
 .ops-glass-nav a,.ops-glass-nav > span {padding:9px 10px;font-size:12px;}
 .ops-glass-nav > span {margin-left:0;}
 .ops-hub .hero {padding:8px 16px 20px;}.ops-hub .hero-title{font-size:30px;}
 .ops-hub .hero-top {gap:14px;}.ops-hub .hero-sub{font-size:14px;}
 .directory-controls {margin:0 16px 16px;}
 .ops-hub .grid-section{padding:0 16px 28px;grid-template-columns:1fr;gap:12px;}
 .ops-hub .tile{min-height:128px;padding-left:82px;}
 .directory-filters button{padding:8px 10px;font-size:13px;}
 .ops-design :is(.page-heading,.page-header,.page-title) h1{font-size:26px;}
}
@media(prefers-reduced-motion:no-preference) {
 .ops-design .tile,.ops-glass-nav a {transition:transform 140ms ease,box-shadow 140ms ease;}
 .ops-hub .tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px #24354a10;}
}
@media(prefers-reduced-motion:reduce) {.ops-design * {scroll-behavior:auto!important;transition:none!important;animation:none!important;}}
@media(prefers-reduced-transparency:reduce),(forced-colors:active) {.ops-glass-nav{backdrop-filter:none;background:Canvas;}.ops-design .tile{box-shadow:none;}}

/* Icons: lucide-react 0.468.0; original library geometry, embedded for no additional network requests.
ISC License

Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

*/
.ops-hub #my-items-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22m3%2017%202%202%204-4%22%2F%3E%3Cpath%20d%3D%22M13%206h8%22%2F%3E%3Cpath%20d%3D%22M13%2012h8%22%2F%3E%3Cpath%20d%3D%22M13%2018h8%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #daily-ops-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #alerts-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #fi-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8%22%2F%3E%3Cpath%20d%3D%22M12%2018V6%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #fi-intake-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2222%2012%2016%2012%2014%2015%2010%2015%208%2012%202%2012%22%2F%3E%3Cpath%20d%3D%22M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #title-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #retail-titling-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22m9%2015%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #cit-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012h.01%22%2F%3E%3Cpath%20d%3D%22M16%206V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v2%22%2F%3E%3Cpath%20d%3D%22M22%2013a18.15%2018.15%200%200%201-20%200%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #soldlog-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.4%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-7.4%22%2F%3E%3Cpath%20d%3D%22M2%206h4%22%2F%3E%3Cpath%20d%3D%22M2%2010h4%22%2F%3E%3Cpath%20d%3D%22M2%2014h4%22%2F%3E%3Cpath%20d%3D%22M2%2018h4%22%2F%3E%3Cpath%20d%3D%22M21.378%205.626a1%201%200%201%200-3.004-3.004l-5.01%205.012a2%202%200%200%200-.506.854l-.837%202.87a.5.5%200%200%200%20.62.62l2.87-.837a2%202%200%200%200%20.854-.506z%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #gyr-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20x2%3D%2218%22%20y1%3D%2220%22%20y2%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2220%22%20y2%3D%224%22%2F%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%2220%22%20y2%3D%2214%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #uv-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2017h2c.6%200%201-.4%201-1v-3c0-.9-.7-1.7-1.5-1.9C18.7%2010.6%2016%2010%2016%2010s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6%200-1.1.4-1.4.9l-1.4%202.9A3.7%203.7%200%200%200%202%2012v4c0%20.6.4%201%201%201h2%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2017h6%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #transfers-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203%204%207l4%204%22%2F%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22m16%2021%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22M20%2017H4%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #capture-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%207h-3a2%202%200%200%201-2-2V2%22%2F%3E%3Cpath%20d%3D%22M9%2018a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h7l4%204v10a2%202%200%200%201-2%202Z%22%2F%3E%3Cpath%20d%3D%22M3%207.6v12.8A1.6%201.6%200%200%200%204.6%2022h9.8%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #intake-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207V5a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22M17%203h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M21%2017v2a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M7%2021H5a2%202%200%200%201-2-2v-2%22%2F%3E%3Cpath%20d%3D%22M7%2012h10%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #ap-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202v20l2-1%202%201%202-1%202%201%202-1%202%201%202-1%202%201V2l-2%201-2-1-2%201-2-1-2%201-2-1-2%201Z%22%2F%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8%22%2F%3E%3Cpath%20d%3D%22M12%2017.5v-11%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #exec-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012c.552%200%201.005-.449.95-.998a10%2010%200%200%200-8.953-8.951c-.55-.055-.998.398-.998.95v8a1%201%200%200%200%201%201z%22%2F%3E%3Cpath%20d%3D%22M21.21%2015.89A10%2010%200%201%201%208%202.83%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #arbdesk-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m14.5%2012.5-8%208a2.119%202.119%200%201%201-3-3l8-8%22%2F%3E%3Cpath%20d%3D%22m16%2016%206-6%22%2F%3E%3Cpath%20d%3D%22m8%208%206-6%22%2F%3E%3Cpath%20d%3D%22m9%207%208%208%22%2F%3E%3Cpath%20d%3D%22m21%2011-8-8%22%2F%3E%3C%2Fsvg%3E");}
.ops-hub #admin-tile::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b51f19%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2215%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M10%2015H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22m21.7%2016.4-.9-.3%22%2F%3E%3Cpath%20d%3D%22m15.2%2013.9-.9-.3%22%2F%3E%3Cpath%20d%3D%22m16.6%2018.7.3-.9%22%2F%3E%3Cpath%20d%3D%22m19.1%2012.2.3-.9%22%2F%3E%3Cpath%20d%3D%22m19.6%2018.7-.4-1%22%2F%3E%3Cpath%20d%3D%22m16.8%2012.3-.4-1%22%2F%3E%3Cpath%20d%3D%22m14.3%2016.6%201-.4%22%2F%3E%3Cpath%20d%3D%22m20.7%2013.8%201-.4%22%2F%3E%3C%2Fsvg%3E");}

.ops-hub .directory-controls input {border:1px solid #cbd5e1;box-shadow:0 1px 2px #16243804;}
.ops-hub .hero,.ops-hub .directory-controls{width:100%;max-width:1600px;margin-left:auto;margin-right:auto;}
.ops-hub .directory-controls{padding-inline:48px;}
@media(max-width:600px){.ops-hub .directory-controls{padding-inline:16px;}}
/* Legacy modules use a bare header, with the same header contract. */
.ops-design .ops-designed-header {background:#202831;border-bottom:0;min-height:60px;padding-inline:28px;}
.ops-design .ops-designed-header :is(.hdr-page,.page-name){color:#fff;}
.ops-design :is(.page-title,.page-heading,.page-header) {margin-bottom:22px;}
.ops-design :is(.page-title,.page-heading,.page-header) p {font-size:14px;}
.ops-finance {--good:#227247;--bad:#b52b24;--warn:#93610b;--blue:#285da1;--purple:#7650a6;}
.ops-finance :is(.btn,.preset,.modesw button) {background:#fff;color:#34445a;}
.ops-finance .modesw button.on,.ops-finance .btn.primary {background:#c8221a;color:#fff;}
.ops-finance .chip.on {background:#f6e8e9;color:#a31c16;border-color:#d6a4a0;}
.ops-finance .kpi.hero {background:#fff7f6;}
.ops-finance .warnbox {background:#fff8e8;color:#715019;}
.ops-finance .errbox {background:#fff0ee;color:#922d25;}
.ops-finance .errbox :is(b,a){color:#922d25;}
.ops-finance .okbox {background:#edf8f0;color:#227247;}
.ops-finance tr:is(.sect,.blk,.sub) td {background:#eef2f7;color:#34445a;}
.ops-finance tr.net td {background:#faf0ef;color:#182331;}
.ops-finance tr.det,.ops-finance tr.det td,.ops-finance tr.det.prodrow td {background:#f8fafc;color:#34445a;border-color:#dce3eb;}
.ops-finance tr.det.lvl2 td{background:#f1f5f9;}.ops-finance tr.det.lvl3 td{background:#f8fafc;}.ops-finance tr.det.lvl4 td{background:#fff;}
.ops-finance tr.grp:hover td{background:#f2f5fa;}
.ops-finance tr.det.adjrow td,.ops-finance tr.orphan-det td {background:#fff8e8;color:#805410;}
.ops-finance td.adjcol{color:#805410;}
.ops-finance th.selA {background:#edf3fc;}.ops-finance th.selB{background:#fff0ee;}
@media(max-width:700px){
 .ops-design .ops-designed-header{position:relative;height:auto;flex-wrap:wrap;gap:10px;padding:10px 16px;}
 .ops-design .ops-designed-header .hdr-right{flex-wrap:wrap;}
 .ops-design .ops-designed-header img{max-width:150px;height:24px;}
}
.ops-design .section-title{font-size:26px;letter-spacing:-.6px;}
.ops-design .section-sub{color:#536479;}
.ops-design #user-list{max-width:100%;overflow-x:auto;border:1px solid #dce3eb;border-radius:12px;background:#fff;}
.ops-design .user-table{margin-bottom:0;min-width:700px;}
.ops-design .user-table .badge-muted,.ops-design .oa-badge-vacant{color:#536479;background:#edf1f6;}
.ops-design :is(.oa-title,.oa-loc,.oa-col-label,.oa-owners-title){color:#536479;}
.ops-design .user-table th{color:#536479;}
@media(max-width:700px){.ops-design #user-list{margin-bottom:24px;}}
.ops-hub .directory-grid{display:contents;}
.ops-hub .tile-desc{font-size:15px;}
.ops-hub .tile::before{width:54px;height:54px;background-size:30px;}
.ops-hub .hero-title{font-size:46px;}
.ops-glass-nav a::before{content:'';display:inline-block;width:18px;height:18px;background-size:18px;background-position:center;background-repeat:no-repeat;vertical-align:-3px;margin-right:10px;}
.ops-glass-nav a:not([href='/hub']):not([href='/my-items']):not([href='/daily-ops']):not([href='/arbdesk']):not([href='#tools'])::before{display:none;}
@media(max-width:600px){.ops-hub .hero-title{font-size:30px;}.ops-hub .tile-desc{font-size:14px;}.ops-glass-nav a::before{display:none;}}
.ops-glass-nav a[href="/hub"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23617187%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-5.999a2%202%200%200%201%202.582%200l7%205.999A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E");}
.ops-glass-nav a[href="/my-items"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23617187%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22m3%2017%202%202%204-4%22%2F%3E%3Cpath%20d%3D%22M13%206h8%22%2F%3E%3Cpath%20d%3D%22M13%2012h8%22%2F%3E%3Cpath%20d%3D%22M13%2018h8%22%2F%3E%3C%2Fsvg%3E");}
.ops-glass-nav a[href="/daily-ops"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23617187%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3C%2Fsvg%3E");}
.ops-glass-nav a[href="/arbdesk"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23617187%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m14.5%2012.5-8%208a2.119%202.119%200%201%201-3-3l8-8%22%2F%3E%3Cpath%20d%3D%22m16%2016%206-6%22%2F%3E%3Cpath%20d%3D%22m8%208%206-6%22%2F%3E%3Cpath%20d%3D%22m9%207%208%208%22%2F%3E%3Cpath%20d%3D%22m21%2011-8-8%22%2F%3E%3C%2Fsvg%3E");}
.ops-glass-nav a[href="#tools"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23617187%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");}
.ops-finance .ops-glass-nav .modesw{display:flex;flex-wrap:wrap;width:100%;border:0;gap:4px;overflow:visible;background:transparent;}
.ops-finance .ops-glass-nav .modesw button{min-height:44px;border-radius:8px;padding:10px 16px;}
.ops-design :is(.tabs,.tab-bar,.mtabs){top:60px;}
@media(max-width:700px){.ops-design :is(.tabs,.tab-bar,.mtabs){top:0;}.ops-finance .ops-glass-nav .modesw button{flex:1 1 auto;}}
@media(max-width:700px){
 .ops-design .ops-designed-header :is(.std-hdr-left,.hdr-left){flex-wrap:wrap;}
 .ops-design .ops-designed-header :is(.page-name,.hdr-page){white-space:normal;overflow:visible;text-overflow:clip;}
 .ops-finance .std-hdr-left img{display:block;}
}