/* NTXV Soft Clay — Variant 12 from ntxv-workorders-5-variants.html.
   Appearance only, except the explicitly requested off-canvas sidebar.
   Remove data-ntxv-theme or use NTXVTheme.set('original') to restore the base skin.
   Keep dimensions, padding, grid tracks, typography and operational colors intact. */
html[data-ntxv-theme="soft-clay"] {
  --clay-surface: #e8eef7;
  --clay-sidebar: #dce4f2;
  --clay-ink: #0a1a33;
  --clay-text: #2b3a55;
  --clay-muted: #66789a;
  --clay-blue: #2e9bdb;
  --clay-blue-dark: #1f7fb8;
  --clay-shadow: 5px 5px 10px #b9c6da, -5px -5px 10px #fff;
  --clay-card-shadow: 7px 7px 14px #b9c6da, -7px -7px 14px #fff;
  --clay-inset: inset 5px 5px 10px #b9c6da, inset -5px -5px 10px #fff;
  --clay-pressed: inset 4px 4px 8px #b9c6da, inset -4px -4px 8px #fff;
  --clay-sidebar-width: 250px;
}
html[data-ntxv-theme="soft-clay"] body {
  background-color: var(--clay-surface);
  color: var(--clay-ink);
}
html[data-ntxv-theme="soft-clay"] :is(.shell, .portal, .portal-main, .content, .m-app, .m-main) {
  background-color: var(--clay-surface);
  color: var(--clay-ink);
}
html[data-ntxv-theme="soft-clay"] :is(.shell, .portal, .m-app) {
  --navy: var(--clay-ink);
  --blue: var(--clay-blue);
  --ops-ink: var(--clay-ink);
  --ops-ink-2: var(--clay-text);
  --ops-ink-3: var(--clay-muted);
}
/* Never set logo dimensions, filters, imagery or asset URLs in this layer. */
html[data-ntxv-theme="soft-clay"] :is(button, input[type="submit"], input[type="button"], a.btn, a.button, [role="button"]):where(:not(.brand)) {
  background-color: var(--clay-surface) !important;
  background-image: none !important;
  color: var(--clay-text) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: var(--clay-shadow) !important;
  text-shadow: none;
  transition: box-shadow 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
html[data-ntxv-theme="soft-clay"] :is(button.primary, button.submit, button.go, button.help-fab, input[type="submit"], .m-primary, .brv-refresh) {
  background-color: var(--clay-blue) !important;
  color: #fff !important;
}
html[data-ntxv-theme="soft-clay"] :is(button, [role="button"]):where(:not(.brand)):hover {
  box-shadow: 7px 7px 14px #b9c6da, -7px -7px 14px #fff !important;
}
html[data-ntxv-theme="soft-clay"] :is(button, [role="button"]):where(:not(.brand)):is(:active, .active, .selected, .is-active, .cs-active, .eq-selected, [aria-pressed="true"], [aria-selected="true"]) {
  box-shadow: var(--clay-inset) !important;
  color: var(--clay-blue-dark) !important;
  background-color: var(--clay-surface) !important;
}
html[data-ntxv-theme="soft-clay"] :is(button, [role="button"]):focus-visible {
  outline: 2px solid var(--clay-blue-dark) !important;
  outline-offset: 4px;
}
html[data-ntxv-theme="soft-clay"] :is(button.danger, button.delete, button[class*="delete"], button[class*="stop"], .danger-button) {
  color: #a82733 !important;
}
html[data-ntxv-theme="soft-clay"] :is(button:disabled, input[type="submit"]:disabled, [role="button"][aria-disabled="true"]) {
  color: #71809b !important;
  box-shadow: 2px 2px 5px #c5cfe0, -2px -2px 5px #fff !important;
  opacity: .65;
  cursor: not-allowed;
}
/* Pill-shaped chips, but retain their existing state colors and labels. */
html[data-ntxv-theme="soft-clay"] :is(.tag, .chip, .badge, .wb-pill, .rv-tag, .eq-status, .m-pill) {
  background-color: var(--clay-surface) !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 6px #b9c6da, -3px -3px 6px #fff;
}
/* Invoice labels need their own foreground as well as a fill: the shared clay
   surface otherwise leaves the base theme's white Paid/Overdue text unreadable. */
html[data-ntxv-theme="soft-clay"] .tag:is(.inv-draft,.inv-sent,.inv-partial,.inv-paid,.inv-overdue) {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 10px;
}
html[data-ntxv-theme="soft-clay"] .tag.inv-overdue {
  color: #8e2020 !important;
  background-color: #ffe4e4 !important;
}
html[data-ntxv-theme="soft-clay"] .tag.inv-paid {
  color: #075a3e !important;
  background-color: #ddf8f0 !important;
}
html[data-ntxv-theme="soft-clay"] .tag.inv-draft {
  color: #2b3a55 !important;
}
/* Text inputs and selects are recessed, as in the reference search field.
   Do not override validation borders or warning fills. */
html[data-ntxv-theme="soft-clay"] :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="hidden"])), select, textarea) {
  background-color: var(--clay-surface);
  background-image: none;
  color: var(--clay-text);
  border-radius: 18px;
  box-shadow: var(--clay-inset);
}
html[data-ntxv-theme="soft-clay"] :is(input, textarea)::placeholder { color: #66789a; }
html[data-ntxv-theme="soft-clay"] :is(input, select, textarea):focus-visible {
  outline-color: var(--clay-blue-dark);
}
html[data-ntxv-theme="soft-clay"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--clay-blue-dark); }
/* Surface collection: panels, cards, booking rows, date cards, dialogs and drawers.
   Transparent borders preserve existing box metrics rather than moving content. */
html[data-ntxv-theme="soft-clay"] :is(div.card, .card, .section, .status-form, .table-wrap, .shipment-card, .portal-stat, .login-card,
  .wb-card, .wb-move, .brv-day, .brv-day-chip, .wb-day, .booking-file-summary, .m-card, .m-doc-card,
  .eq-table-wrap, .eq-current, .help-panel, .qnote-panel, .header-account-menu, .mbx-card,
  .conn-card, .drv-card, .ind-card, .inv-meta-card, .lane-card, .m-sheet-card, .m-track-card,
  .move-card, .pdf-card, .rv-alarm-card, .svc-card, .track-card, .job,
  .cs-panel, .cs-metrics, .preview-panel, .proof-panel, .m-sheet, .suggest-panel, .brv-drawer, dialog) {
  background-color: var(--clay-surface) !important;
  background-image: none !important;
  border-color: transparent;
  border-radius: 24px !important;
  box-shadow: var(--clay-card-shadow) !important;
  color: var(--clay-ink);
}
html[data-ntxv-theme="soft-clay"] :is(div.card-action, .card-action, button.wb-day, button.brv-day-chip):is(.active, .card-active, [aria-pressed="true"]) {
  box-shadow: inset 6px 6px 12px #b9c6da, inset -6px -6px 12px #fff !important;
  color: var(--clay-blue-dark) !important;
}
html[data-ntxv-theme="soft-clay"] :is(.wb-head, .wb-moves, .wb-route, .brv-day-head, .data-table th, .eq-table th) {
  background-color: var(--clay-surface);
  background-image: none;
}
html[data-ntxv-theme="soft-clay"] .wb-card > .wb-head[role="button"] {
  border-radius: 24px !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
html[data-ntxv-theme="soft-clay"] .wb-head:hover { background-color: #e2eaf5 !important; }
html[data-ntxv-theme="soft-clay"] :is(.eyebrow, .mono, .section h2 small) { color: var(--clay-muted); }
html[data-ntxv-theme="soft-clay"] :is(.view-head h1, .card .label, .wb-day-heading) { color: var(--clay-ink); }
html[data-ntxv-theme="soft-clay"] :is(.header-bell, .header-avatar, .qnote-fab, .icon-btn, .user-avatar) {
  background-color: var(--clay-surface) !important;
  color: var(--clay-ink) !important;
  border-color: transparent !important;
  border-radius: 50% !important;
  box-shadow: var(--clay-shadow) !important;
}
/* Folding sidebar: transform only. Existing content grids and element order survive. */
html[data-ntxv-theme="soft-clay"].clay-sidebar-ready .shell { grid-template-columns: minmax(0, 1fr); }
html[data-ntxv-theme="soft-clay"] .shell > aside.side {
  background-color: var(--clay-sidebar);
  color: var(--clay-text);
}
html[data-ntxv-theme="soft-clay"].clay-sidebar-ready .shell > aside.side {
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--clay-sidebar-width), calc(100vw - 28px));
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1100;
  background: var(--clay-sidebar);
  color: var(--clay-text);
  border-right-color: transparent;
  border-radius: 0 24px 24px 0;
  box-shadow: 8px 0 24px rgba(120, 140, 175, .25);
  transform: translateX(calc(-100% - 32px));
  transition: none;
  scrollbar-width: thin;
  scrollbar-color: #9db0cc var(--clay-sidebar);
}
html[data-ntxv-theme="soft-clay"].clay-sidebar-ready.clay-sidebar-animated .shell > aside.side { transition: transform 250ms ease-out; }
html[data-ntxv-theme="soft-clay"].clay-sidebar-open .shell > aside.side { transform: translateX(0); }
html[data-ntxv-theme="soft-clay"] .shell > aside.side :is(.nav button, .side-search button) {
  background-color: var(--clay-surface) !important;
  color: #4a5d7e !important;
  border-color: transparent !important;
  border-radius: 16px !important;
  box-shadow: var(--clay-shadow) !important;
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .nav button:not(.active) {
  background-color: transparent !important;
  box-shadow: none !important;
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .nav button:not(.active):hover {
  background-color: var(--clay-surface) !important;
  box-shadow: var(--clay-shadow) !important;
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .nav button:is(.active, :active) {
  color: var(--clay-ink) !important;
  box-shadow: var(--clay-inset) !important;
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side :is(.nav-label, .user-mini-text span) { color: var(--clay-muted); }
html[data-ntxv-theme="soft-clay"] .shell > aside.side .nav-icon { color: var(--clay-blue-dark); }
html[data-ntxv-theme="soft-clay"] .shell > aside.side .side-search input {
  background: var(--clay-surface);
  color: #000 !important;
  -webkit-text-fill-color: #000;
  caret-color: #000;
  border-color: transparent;
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .side-search input::placeholder {
  color: #000;
  -webkit-text-fill-color: #000;
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .user-mini { color: var(--clay-text); border-color: #c7d3e7; }
/* New affordances belong only to folding navigation; they never occupy a grid track. */
.clay-sidebar-edge, .clay-sidebar-scrim, .clay-sidebar-menu { display: none; }
html[data-ntxv-theme="soft-clay"] .clay-sidebar-edge {
  display: block; position: fixed; inset: 0 auto 0 0; width: 14px; z-index: 1101;
}
html[data-ntxv-theme="soft-clay"] .clay-sidebar-menu {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
  z-index: 1102; width: 40px; height: 40px; padding: 10px; align-items: center; justify-content: center;
}
html[data-ntxv-theme="soft-clay"] .clay-sidebar-menu:focus-visible { display: flex; }
html[data-ntxv-theme="soft-clay"] .clay-sidebar-menu svg { width: 20px; height: 20px; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-menu { display: flex; }
  html[data-ntxv-theme="soft-clay"].clay-sidebar-ready .shell > .content .page-top { padding-inline-start: 48px; }
  html[data-ntxv-theme="soft-clay"].clay-sidebar-open .clay-sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 1099; background: rgba(10, 26, 51, .16);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ntxv-theme="soft-clay"].clay-sidebar-ready .shell > aside.side,
  html[data-ntxv-theme="soft-clay"] :is(button, [role="button"]) { transition: none !important; }
}
/* Keep hazard, deadline and required-field meanings; depth is never their only cue. */
html[data-ntxv-theme="soft-clay"] .booking-form :is(input, select):required:invalid,
html[data-ntxv-theme="soft-clay"] :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #c0392b; background-color: #fff6f5; color: #9c1c13;
}
@media print {
  .clay-sidebar-edge, .clay-sidebar-menu, .clay-sidebar-scrim { display: none !important; }
  html[data-ntxv-theme="soft-clay"] .shell > aside.side { display: none !important; }
  html[data-ntxv-theme="soft-clay"] :is(.card, .section, .wb-card) { box-shadow: none !important; }
}

/* Record identifiers stay inline links, as in the reference booking rows. */
html[data-ntxv-theme="soft-clay"] button:is(.link-id, .text-link, .eq-link) {
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--clay-ink) !important;
}
html[data-ntxv-theme="soft-clay"] :is(.portal-bar, .m-top, .top) {
  background-color: var(--clay-sidebar);
  color: var(--clay-ink);
  background-image: none;
}
html[data-ntxv-theme="soft-clay"] :is(.portal-bar, .m-top, .top) :is(span, small) { color: var(--clay-muted); }
/* Give the existing horizontal date scroller room to paint its upper shadows.
   The compensating margin keeps every card and following row at the same position. */
html[data-ntxv-theme="soft-clay"] .wb-day-tabs { padding-block-start: 14px; margin-block-start: -10px; }
html[data-ntxv-theme="soft-clay"] :is(.eyebrow, .wb-delivery-date, .brv-day-date, .wb-day > span) { color: #7c8db0; }
html[data-ntxv-theme="soft-clay"] .shell > aside.side .nav-label { color: #7c8db0; }
html[data-ntxv-theme="soft-clay"] .wb-search::placeholder { color: #8fa0be; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  /* Keep the toggle clear of the original logo when the drawer is open. */
  html[data-ntxv-theme="soft-clay"].clay-sidebar-open .clay-sidebar-menu {
    left: calc(min(var(--clay-sidebar-width), 100vw - 28px) - 48px);
  }
}

/* Folded desktop navigation stays useful: large icons, with labels on expansion. */
.clay-sidebar-rail{display:none}
@media(min-width:821px){
  html[data-ntxv-theme="soft-clay"].clay-sidebar-ready .shell{padding-inline-start:80px}
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-rail{display:flex;position:fixed;inset:0 auto 0 0;width:80px;padding:76px 10px 14px;z-index:1100;background:var(--clay-sidebar);box-shadow:4px 0 16px rgba(120,140,175,.18)}
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-rail-items{display:flex;flex-direction:column;gap:8px;width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-rail button{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 54px;width:54px;height:54px;padding:12px;border:0}
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-rail button:not(.active){box-shadow:none!important;background-color:transparent!important}
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-rail .nav-badge{position:absolute;top:1px;right:0;margin:0;min-width:18px;padding:2px 4px;font-size:10px}
  html[data-ntxv-theme="soft-clay"].clay-sidebar-open .clay-sidebar-rail{visibility:hidden}
  html[data-ntxv-theme="soft-clay"] .clay-sidebar-menu{display:flex;left:17px;top:16px;width:46px;height:46px}
}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .brand{margin-top:54px!important}
html[data-ntxv-theme="soft-clay"] :is(.clay-sidebar-rail,.shell > aside.side) .nav-icon{width:28px;height:28px;min-width:28px;flex:0 0 28px;color:var(--clay-blue-dark)}
html[data-ntxv-theme="soft-clay"] .shell > aside.side .nav button{min-height:52px;gap:14px}
html[data-ntxv-theme="soft-clay"] .clay-sidebar-menu svg{width:26px;height:26px}
@media print{
  .clay-sidebar-rail{display:none!important}
  html[data-ntxv-theme="soft-clay"].clay-sidebar-ready .shell{padding-inline-start:0}
}