/* Xnet Waste Manager overrides — loaded after dashlite.min.css. */

.xwm-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.xwm-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #364a63;
  letter-spacing: -0.01em;
}

.is-dark .xwm-logo-text {
  color: #fff;
}

.xwm-logo-text span {
  color: #3b4ed8;
  font-weight: 400;
}

/* DashLite defines .gap-* twice: as Bootstrap-style gap utilities AND as
   legacy block spacers that set a height. The height rule wins by source
   order and collapses any flex container carrying gap-* (the exceptions
   cards shrank to 12px). Restore the utility behaviour on flex containers. */
.d-flex.gap-0, .d-flex.gap-1, .d-flex.gap-2,
.d-flex.gap-3, .d-flex.gap-4, .d-flex.gap-5 {
  height: auto;
}

.xwm-recovery-codes {
  font-family: monospace;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  column-count: 2;
  column-gap: 2rem;
}

#xwm-qr {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border: 1px solid #dbdfea;
  border-radius: 4px;
}

.xwm-secret {
  font-family: monospace;
  letter-spacing: 0.08em;
  word-break: break-all;
}

/* Contact-type pills — one colour each, text-transform for tidiness. */
.badge.xwm-type-carrier,
.badge.xwm-type-customer,
.badge.xwm-type-account,
.badge.xwm-type-broker {
  text-transform: capitalize;
  border: 1px solid transparent;
}
.badge.xwm-type-carrier  { background: #eef0fd; color: #2f3fae; border-color: #c9cff6; }
.badge.xwm-type-customer { background: #e6fbf4; color: #0b8a63; border-color: #b8f2de; }
.badge.xwm-type-account  { background: #e3f4fb; color: #0b6a8a; border-color: #b3e1f2; }
.badge.xwm-type-broker   { background: #fdf3e1; color: #8a6116; border-color: #f3dfae; }

/* Table action cells (all right-aligned columns) keep their buttons on one
   line — a narrow cell must widen, never stack View over Amend. */
.table td.text-end,
.table th.text-end {
  white-space: nowrap;
}

/* Guided tour (tour.js): a spotlight cut out of a page-wide shade, and a
   fixed step panel. The shade is the spotlight's shadow, so the page stays
   scrollable and the highlighted control stays usable. */
.xwm-tour-spot {
  position: fixed;
  z-index: 1045;
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(20, 24, 48, 0.55), 0 0 0 5px rgba(47, 63, 174, 0.45);
  pointer-events: none;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.xwm-tour-target {
  position: relative;
  z-index: 1046;
}
.xwm-tour-panel {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1050;
  width: min(400px, calc(100vw - 2rem));
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #dbdfea;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 24, 48, 0.25);
  transition: left .18s ease, top .18s ease;
}
.xwm-tour-panel--above::after,
.xwm-tour-panel--below::before {
  content: "";
  position: absolute;
  left: var(--xwm-tour-caret, 24px);
  margin-left: -8px;
  border: 8px solid transparent;
}
.xwm-tour-panel--below::before {
  top: -16px;
  border-bottom-color: #fff;
}
.xwm-tour-panel--above::after {
  bottom: -16px;
  border-top-color: #fff;
}
.xwm-tour-progress {
  margin: 0 0 .25rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8094ae;
}
.xwm-tour-title {
  margin: 0 0 .5rem;
  font-size: 1rem;
}
.xwm-tour-body {
  margin: 0 0 .75rem;
  color: #526484;
  font-size: .875rem;
  line-height: 1.5;
}
.xwm-tour-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}
@media (max-width: 575px) {
  .xwm-tour-panel {
    left: .5rem !important;
    right: .5rem;
    top: auto !important;
    bottom: .5rem;
    width: auto;
  }
}

/* A Bootstrap dropdown opened inside .table-responsive is clipped by its
   overflow-x, which silently hid the last two items of the organisations
   Actions menu. This table is narrow enough not to need horizontal scrolling
   on a real screen, so let it overflow from the small breakpoint up and keep
   the scrolling behaviour on phones. */
@media (min-width: 576px) {
  .table-responsive.xwm-table-actions {
    overflow: visible;
  }
}

/* DashLite strips list markers globally, which is right for its nav lists but
   wrong inside an announcement: a superadmin writing a bulleted notice would
   otherwise get flat, marker-less lines. The reset out-specifies a plain class
   selector, so this is scoped through the modal id to win on specificity
   rather than by reaching for !important. */
.xwm-announcement-body ul,
.xwm-announcement-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.xwm-announcement-body ul,
.xwm-announcement-body ul li {
  list-style-type: disc;
}
.xwm-announcement-body ol,
.xwm-announcement-body ol li {
  list-style-type: decimal;
}
.xwm-announcement-body li {
  display: list-item;
  margin-bottom: .25rem;
}
.xwm-announcement-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- job grid */
/* Wagons down, slots across. Colours carry M60's status meanings, which are
   not the concrete system's: grey is cancelled, purple is collected. */
.xwm-jobs-bar { margin-bottom: 1rem; }
.xwm-grid { table-layout: fixed; margin-bottom: 0; }
.xwm-grid th,
.xwm-grid td { border: 1px solid var(--bs-border-color, #dbdfea); vertical-align: top; padding: 0; }
.xwm-grid thead th { padding: .5rem; font-size: .75rem; text-align: center; background: #f5f6fa; white-space: nowrap; }
.xwm-grid__wagon { padding: .5rem !important; width: 8.5rem; background: #f5f6fa; font-size: .8125rem; }
/* A cell holds `max_jobs_per_slot` PLACES of equal size, whether a place is
   filled or free. Every cell is therefore the same height, so the grid reads as
   a uniform table rather than a ragged one. --xwm-places comes from the table. */
/* min-width on a cell does nothing under `table-layout: fixed` — the columns
   simply share whatever the table gets, and at 560px they crushed to 71px. The
   minimum has to sit on the TABLE, sized from the number of slots, so columns
   stay readable and .table-responsive scrolls instead of squeezing. */
.xwm-grid { --xwm-place-h: 3.75rem;
  min-width: calc(8.5rem + (var(--xwm-slots, 6) * 8rem)); }
.xwm-cell { vertical-align: top; padding: 0;
  height: calc(var(--xwm-place-h) * var(--xwm-places, 1)); }
.xwm-cell.is-drop-target { outline: 2px dashed #6576ff; outline-offset: -3px; background: #eff1ff; }
/* DashLite gives the first and last cell of every table row a 20px gutter, which
   left the last column's job boxes 20px short of the edge while every other
   column filled its cell. The grid draws its own edges, so drop the gutter —
   specific enough to beat `.table tr td:last-child`. The wagon column keeps its
   own padding through the !important on .xwm-grid__wagon. */
.xwm-grid > thead > tr > th:first-child,
.xwm-grid > thead > tr > th:last-child,
.xwm-grid > tbody > tr > th:first-child,
.xwm-grid > tbody > tr > td:first-child,
.xwm-grid > tbody > tr > td:last-child { padding-left: 0; padding-right: 0; }

.xwm-free { display: flex; align-items: center; justify-content: center;
  height: var(--xwm-place-h); color: #8094ae; font-size: .75rem; text-decoration: none; }
.xwm-free:hover { background: #eff1ff; color: #6576ff; }
.xwm-cell > .xwm-job + .xwm-free { border-top: 1px dashed #dbdfea; }
/* An untouched cell offers the whole cell as one target rather than one place. */
.xwm-free--empty { height: calc(var(--xwm-place-h) * var(--xwm-places, 1)); }

.xwm-job { display: block; height: var(--xwm-place-h); padding: .375rem .5rem; cursor: grab;
  text-decoration: none; color: #1f2b3a; font-size: .75rem; line-height: 1.25; overflow: hidden; }
/* One line for the name, so a long customer cannot push a box taller than its
   neighbours. The full name is in the hover tooltip. */
.xwm-job__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwm-job:hover { filter: brightness(.96); color: #1f2b3a; }
.xwm-job.is-dragging { opacity: .45; }
.xwm-job.is-saving { opacity: .6; cursor: progress; }
.xwm-job__who { display: block; font-weight: 600; }
.xwm-job__where,
.xwm-job__size { display: block; opacity: .75; }

.xwm-job--pending     { background: #e5e9f2; }
.xwm-job--provisional { background: #fff3cd; }
.xwm-job--printed     { background: #ffe0c7; }
.xwm-job--ring        { background: #cfe6ff; }
.xwm-job--complete    { background: #c9f0d8; }
.xwm-job--collected   { background: #e3d7f7; }
.xwm-job--cancelled   { background: #e9ecef; color: #8094ae; text-decoration: line-through; }

.xwm-unassigned { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.xwm-unassigned .xwm-job { min-height: 0; width: 12rem; border: 1px solid #dbdfea; border-radius: 4px; }

.xwm-key { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem;
  font-size: .75rem; color: #8094ae; }
.xwm-key li { display: flex; align-items: center; gap: .35rem; }
.xwm-key__swatch { width: .875rem; height: .875rem; border-radius: 3px; border: 1px solid #dbdfea; }

@media (max-width: 575.98px) {
  .xwm-grid__wagon { width: 6rem; }
  .xwm-grid { --xwm-place-h: 3.5rem; min-width: calc(6rem + (var(--xwm-slots, 6) * 7rem)); }
}

/* Vehicles page: the compact "is this a row of the job grid" control. */
.xwm-grid-row-form { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.xwm-grid-row-form__tick { display: flex; align-items: center; gap: .25rem; font-size: .75rem; white-space: nowrap; }
.xwm-grid-row-form select { width: auto; min-width: 7rem; }
.xwm-grid-row-form input[type="number"] { width: 4rem; }

/* Where two jobs share a cell, a hairline keeps them apart. */
.xwm-cell > .xwm-job + .xwm-job { border-top: 1px solid rgba(0,0,0,.12); }

/* Vehicles page: move a grid row up or down rather than typing a number. */
.xwm-grid-order { display: inline-flex; gap: .15rem; margin-left: .35rem; vertical-align: middle; }
.xwm-grid-order .btn { padding: .15rem .4rem; line-height: 1; }

/* Top-bar state pills. These replaced two full-width banners: both are true all
   day, so they belong in the chrome rather than shouting from every page. The
   detail lives in the title tooltip. */
.xwm-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem;
  border-radius: 999px; font-size: .75rem; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent; cursor: default; white-space: nowrap; }
.xwm-pill .icon { font-size: .875rem; }
.xwm-pill--sandbox { background: #fff3cd; border-color: #ffe69c; color: #7a5b00; }
button.xwm-pill { cursor: pointer; }
.xwm-pill--assumed { background: #eff1ff; border-color: #cdd4ff; color: #3b4ac0; }
.xwm-pill--assumed:hover { background: #dfe3ff; }

/* The announcement modal says what it is above the title. Without it, a notice
   filling the screen read as part of the app rather than a message from us. */
.xwm-announcement-head .overline-title { display: block; margin-bottom: .15rem; }
.xwm-announcement-head .overline-title .icon { font-size: .875rem; vertical-align: -1px; }
.xwm-announcement-head .modal-title { margin: 0; }

/* Render-harness strip: only an install with app.harness_notice set ever shows it. */
.xwm-harness { background: #b91c1c; color: #fff; padding: .55rem 1rem; margin: 0 0 1rem; border-radius: 6px;
  font-size: .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.xwm-harness .icon { font-size: 1.1rem; }
.xwm-harness .alert-link { color: #fff; text-decoration: underline; margin-left: auto; }

/* YouTube in an announcement: sanitise() emits exactly this wrapper, 16:9 at the modal's width. */
.xwm-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1rem; background: #000; border-radius: 6px; overflow: hidden; }
.xwm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Right-click status menu on the job grid (jobs.js positions it at the pointer). */
.xwm-job-menu { position: fixed; z-index: 1080; min-width: 200px; margin: 0; padding: .35rem 0; list-style: none;
  background: #fff; border: 1px solid #dbdfea; border-radius: 6px; box-shadow: 0 6px 24px rgba(31,43,70,.18); }
.xwm-job-menu__head { padding: .3rem .9rem .35rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8094ae; }
.xwm-job-menu__sep { height: 1px; margin: .3rem 0; background: #e5e9f2; }
.xwm-job-menu button, .xwm-job-menu a { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .4rem .9rem;
  border: 0; background: none; text-align: left; font-size: .875rem; color: #364a63; cursor: pointer; }
.xwm-job-menu button:hover, .xwm-job-menu a:hover { background: #f5f6fa; color: #364a63; }
.xwm-job-menu button.is-current { font-weight: 600; }
.xwm-job-menu button.is-current::after { content: "✓"; margin-left: auto; color: #1ee0ac; }
.xwm-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.08); flex: 0 0 auto; }

/* The slot picker: the day's grid in a modal, free cells are buttons, everything else is for context. */
.xwm-pick .xwm-job { pointer-events: none; opacity: .75; cursor: default; }
.xwm-pick .xwm-cell.is-full { background: #f5f6fa; }
.xwm-pick button.xwm-free { border: 1px dashed #c8d0e0; background: #fff; border-radius: 4px; width: 100%; cursor: pointer; }
.xwm-pick button.xwm-free:hover { background: #eef1ff; border-color: #6576ff; color: #364a63; }

/* A collection has to be obvious at a glance without losing its status colour:
   a hard stripe down the left and a tag at the front of the name. Exchange the same, lighter. */
.xwm-job--collection { box-shadow: inset 4px 0 0 #1f2b3a; }
.xwm-job--exchange   { box-shadow: inset 4px 0 0 #6576ff; }
.xwm-job__kind { display: inline-block; vertical-align: 1px; margin-right: .3rem; min-width: 1.1rem; padding: 0 .25rem; border-radius: 3px;
  background: #1f2b3a; color: #fff; font-size: .62rem; font-weight: 700; text-align: center; line-height: 1.5; }
.xwm-job__kind--exchange { background: #6576ff; }
.xwm-key__gap { margin-left: .5rem; padding-left: .75rem; border-left: 1px solid #dbdfea; }
.xwm-key__swatch.xwm-job--collection, .xwm-key__swatch.xwm-job--exchange { background: #e5e9f2; }

/* Required-field marker on the job form; which labels carry it follows the visit type. */
.xwm-req { color: #e85347; font-weight: 700; }

/* The wagon's day: the person button under the reg, and a row that is off the road. */
.xwm-wagon-day { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; padding: .1rem .5rem; border: 1px dashed #c8d0e0;
  border-radius: 999px; background: #fff; color: #8094ae; font-size: .7rem; cursor: pointer; }
.xwm-wagon-day:hover { border-color: #6576ff; color: #364a63; }
.xwm-wagon-day.is-set { border-style: solid; border-color: #c3cce0; color: #364a63; font-weight: 600; }
.xwm-wagon-day.is-off { border-style: solid; border-color: #f4bfbf; background: #fff5f5; color: #b91c1c; font-weight: 600; }
.xwm-row--off td.xwm-cell { background: repeating-linear-gradient(135deg, #f5f6fa 0 8px, #eceef4 8px 16px); }
.xwm-row--off td.xwm-cell .xwm-job { opacity: .55; }
.xwm-row--off th.xwm-grid__wagon { background: #fff5f5; }

/* SweetAlert's text input: the placeholder was near-white under DashLite's theme and read as empty. */
.swal2-input::placeholder { color: #8094ae; opacity: 1; }
.xwm-job-menu__disabled { display: flex; align-items: center; gap: .55rem; padding: .4rem .9rem; font-size: .875rem; color: #8094ae; cursor: not-allowed; }

/* A job marked done whose waste has not been recorded: an amber corner, until it is. */
.xwm-job--unrecorded { position: relative; }
.xwm-job--unrecorded::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #f4bd0e transparent transparent; }
.xwm-key__swatch.xwm-job--unrecorded::after { border-width: 0 7px 7px 0; }

/* Things that need a person: the nav count on Exceptions, and dashboard tiles coloured whole. */
.nk-menu-badge.xwm-attn { background: #f4bd0e; color: #1f2b3a; font-weight: 700; }
.nk-menu-badge.xwm-attn--urgent { background: #e85347; color: #fff; animation: xwm-pulse 1.6s ease-in-out infinite; }
@keyframes xwm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 83, 71, .55); } 50% { box-shadow: 0 0 0 6px rgba(232, 83, 71, 0); } }
@media (prefers-reduced-motion: reduce) { .nk-menu-badge.xwm-attn--urgent { animation: none; } }
.xwm-tile--warn   { background: #fff8e1 !important; border-color: #f4bd0e !important; box-shadow: inset 4px 0 0 #f4bd0e; }
.xwm-tile--urgent { background: #fdecea !important; border-color: #e85347 !important; box-shadow: inset 4px 0 0 #e85347; }
.xwm-tile--warn .amount   { color: #8a6d00; }
.xwm-tile--urgent .amount { color: #b91c1c; }
.xwm-tile--warn:hover, .xwm-tile--urgent:hover { filter: brightness(.98); }

/* Docket layout editor: an A4 sheet at --mm px per millimetre, fields as draggable labels. */
.xwm-sheet { position: relative; width: calc(210 * var(--mm) * 1px); height: calc(297 * var(--mm) * 1px); max-width: 100%;
  background: #fff; border: 1px solid #dbdfea; box-shadow: 0 2px 10px rgba(31,43,70,.08); overflow: hidden; touch-action: none;
  background-image: linear-gradient(#f1f3f8 1px, transparent 1px), linear-gradient(90deg, #f1f3f8 1px, transparent 1px);
  background-size: calc(10 * var(--mm) * 1px) calc(10 * var(--mm) * 1px); }
.xwm-sheet__field { position: absolute; padding: 0 .25rem; line-height: 1.4; white-space: nowrap; color: #1f2b3a;
  background: rgba(101,118,255,.12); border: 1px solid rgba(101,118,255,.5); border-radius: 2px; cursor: grab; user-select: none; }
.xwm-sheet__field.is-right { transform: translateX(-100%); }
.xwm-sheet__field.is-hidden { opacity: .3; border-style: dashed; }
.xwm-sheet__field.is-dragging { cursor: grabbing; background: rgba(101,118,255,.3); z-index: 2; }
.xwm-sheet__field:hover { background: rgba(101,118,255,.22); }
.xwm-docket-fields tr.is-current td { background: #eef1ff; }

/* Paid / part paid on a job chip: a small £ in the bottom-right corner. Nothing when unpaid. */
.xwm-job { position: relative; }
.xwm-job__paid { position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 15px; text-align: center; }
.xwm-job__paid--paid { background: #1ee0ac; }
.xwm-job__paid--part { background: #f4bd0e; color: #1f2b3a; }
.xwm-job__paid--key { position: static; display: inline-block; margin-right: .3rem; }

/* Grid legend: one labelled row per kind of mark, so the three meanings do not run together. */
.xwm-legend { margin-top: .75rem; display: grid; gap: .4rem; }
.xwm-legend__row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.xwm-legend__label { flex: 0 0 4.5rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8094ae; }
.xwm-legend .xwm-key { margin: 0; }
.xwm-legend .xwm-job__kind { margin-right: 0; }

/* Skips out: the size tiles share the width equally, however many there are. */
.xwm-pool > .xwm-pool-tile { flex: 1 0 calc(12.5% - 1.5rem); min-width: 7.5rem; }
.xwm-pool-tile .xwm-pool-label { min-height: 2.6em; line-height: 1.3; }
.xwm-pool-tile .xwm-pool-sub { white-space: nowrap; }
.xwm-close > summary { cursor: pointer; }

/* Vehicle compliance */
.xwm-inline-check { display: flex; align-items: center; gap: .4rem; height: 100%; min-height: 2.25rem; margin: 0; white-space: nowrap; }
.xwm-checks .xwm-check-done td { background: #f5f6fa; }
.xwm-wagon-check { display: inline-block; margin-top: .3rem; padding: .05rem .4rem; border-radius: 3px; font-size: .6875rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.xwm-wagon-check.is-soon { background: #fff4e0; color: #8a5300; border: 1px solid #f4c77a; }
.xwm-wagon-check.is-overdue { background: #fff5f5; color: #b91c1c; border: 1px solid #f4bfbf; }
.xwm-wagon-check:hover { text-decoration: underline; }

/* Current page in the sidebar. Our own class: the theme's link check cannot
   read ?path= URLs and strips .active from every item on load. */
.nk-menu-item.xwm-here > .nk-menu-link,
.nk-menu-item.xwm-here > .nk-menu-link .nk-menu-icon { color: #606fdf; }
.nk-menu-sub .nk-menu-item.xwm-here > .nk-menu-link { font-weight: 600; }

/* Dashboard tile captions: one short line, never wrapping the card taller. */
.xwm-tile-sub { font-size: .75rem; line-height: 1.3; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Page header: the description never runs up against the action button. */
.nk-block-between { gap: 1.5rem; }
.nk-block-between > .nk-block-head-content:last-child:not(:first-child) { flex-shrink: 0; }

/* Public request-a-skip form: the firm's page, plain and light; --xwm-accent is theirs. */
.xwm-skipform { --xwm-accent: #3f51b5; background: #f5f6fa; color: #526484; min-height: 100vh; }
.xwm-skipform--embed { background: transparent; min-height: 0; }
.xwm-skipform__wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 1rem; }
.xwm-skipform--embed .xwm-skipform__wrap { padding: 0; }
.xwm-skipform__head { text-align: center; margin-bottom: 1.25rem; }
.xwm-skipform__logo { max-height: 64px; max-width: 240px; }
.xwm-skipform__name { font-size: 1.5rem; font-weight: 700; color: #364a63; }
.xwm-skipform__card { background: #fff; border: 1px solid #e5e9f2; border-radius: 6px; padding: 1.5rem; }
.xwm-skipform__title { font-size: 1.375rem; margin-bottom: .5rem; }
.xwm-skipform__set { border: 0; padding: 0; margin: 1.25rem 0 0; }
.xwm-skipform__set legend { float: none; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8094ae; margin-bottom: .75rem; }
.xwm-skipform__choice { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; cursor: pointer; }
.xwm-skipform .btn-primary { background: var(--xwm-accent); border-color: var(--xwm-accent); }
.xwm-skipform .btn-primary:hover, .xwm-skipform .btn-primary:focus { filter: brightness(.92); background: var(--xwm-accent); border-color: var(--xwm-accent); }
.xwm-skipform .form-control:focus, .xwm-skipform .form-select:focus { border-color: var(--xwm-accent); box-shadow: none; }
.xwm-skipform__send { min-width: 12rem; }
.xwm-skipform__by { text-align: center; font-size: .6875rem; color: #b7c2d0; margin: .75rem 0 0; }
.xwm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.xwm-form-sizes td { vertical-align: middle; }
.xwm-price { max-width: 8.5rem; }
.xwm-owned { width: 5.5rem; }
.xwm-panel { background: #f5f6fa; border-radius: 4px; padding: .75rem 1rem 1rem; }
.xwm-msg-sm { min-height: 0; }

/* Requests: check the grid. Booked jobs recede; the request stands out over them. */
.xwm-check .xwm-job--faded { filter: grayscale(1); opacity: .35; pointer-events: none; }
.xwm-check .xwm-cell.is-proposed { background: #eef1ff; }
.xwm-check .xwm-job--proposed { background: #fff; color: #2c3782; border: 2px dashed #6576ff; box-shadow: 0 2px 6px rgba(101, 118, 255, .35); font-weight: 600; }
.xwm-check .xwm-job--proposed .xwm-job__size { color: #6576ff; }
.xwm-check .xwm-job, .xwm-check .xwm-cell { cursor: default; }
.xwm-check .xwm-cell.xwm-cell--pick { cursor: pointer; }
.xwm-check .xwm-cell.xwm-cell--pick:hover { background: #f5f6ff; outline: 2px dashed #c5ccff; outline-offset: -3px; }
.xwm-check__summary { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.xwm-check__pill { display: inline-block; padding: .2rem .6rem; border-radius: 1rem; background: #f5f6fa; border: 1px solid #e5e9f2; font-size: .75rem; color: #526484; }
.xwm-check__pill--req { background: #eef1ff; border-color: #c5ccff; color: #2c3782; font-weight: 600; }
.xwm-check__pill--warn { background: #fff4e0; border-color: #f4c77a; color: #8a5300; }
.xwm-check__pill--bad { background: #fff5f5; border-color: #f4bfbf; color: #b91c1c; }
.xwm-check-dialog { max-width: min(1400px, 96vw); }
/* A scrollable dialog lets the theme shrink header and footer below their own
   content; keep them whole and let only the body scroll. */
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer { flex-shrink: 0; }
/* DashLite defines .gap-0…5 (and -sm/-md/-lg/-gs) as fixed-HEIGHT spacer blocks,
   clashing with Bootstrap's flex-gap utilities of the same name. Here gap-N is
   only ever flex spacing, so cancel the height wherever it sits on a flex box —
   it was pinning dialog headers and footers, and rows of buttons, short. */
.d-flex[class*="gap-"], .d-inline-flex[class*="gap-"], .flex-wrap[class*="gap-"], .flex-nowrap[class*="gap-"],
.modal-header[class*="gap-"], .modal-footer[class*="gap-"] { height: auto; }

/* Learn: 16:9 frames; the play card stands in until pressed. */
.xwm-learn__frame { position: relative; aspect-ratio: 16 / 9; background: #1c2b46; border-radius: 4px 4px 0 0; overflow: hidden; }
.xwm-learn__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xwm-learn__play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; border: 0; color: #fff; cursor: pointer; padding: 1rem; text-align: center;
  background: linear-gradient(135deg, #1c2b46 0%, #3f51b5 100%); }
.xwm-learn__play .icon { font-size: 3.5rem; opacity: .9; transition: transform .15s; }
.xwm-learn__play span { font-weight: 600; font-size: .9375rem; max-width: 85%; }
.xwm-learn__play:hover .icon, .xwm-learn__play:focus .icon { transform: scale(1.08); opacity: 1; }
/* Help and videos: two videos a row, each the frame a third and the words two
   thirds; pressing play widens that video to the whole row. */
.xwm-vrow { overflow: hidden; }
.xwm-vrow .xwm-learn__frame { border-radius: 0; }
.xwm-vrow.is-playing .xwm-vrow__thumb, .xwm-vrow.is-playing .xwm-vrow__text { flex: 0 0 100%; max-width: 100%; }
.xwm-vcol.is-playing { flex: 0 0 100%; max-width: 100%; }
.xwm-pill--learn { background: #eef1ff; border-color: #cdd4ff; color: #3b4ac0; text-decoration: none; }
.xwm-pill--learn:hover { background: #e0e5ff; color: #2c3782; }
.xwm-reports { list-style: none; padding: 0; margin: 0; }
.xwm-reports li { padding: .55rem 0; border-bottom: 1px solid #e5e9f2; }
.xwm-reports li:last-child { border-bottom: 0; }
.xwm-reports__subject { font-weight: 600; color: #364a63; margin-right: .4rem; }
.xwm-support__body { white-space: normal; color: #364a63; }
.xwm-support__shot { max-width: 100%; border: 1px solid #e5e9f2; border-radius: 4px; }
.xwm-support__facts th { width: 7.5rem; color: #8094ae; font-weight: 500; }
.xwm-subs__history td { border-top: 0; padding-top: 0; }
.xwm-subs__history summary { cursor: pointer; }

/* Corner pop-ups for messages on pages that keep their scroll position. */
.xwm-toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, 90vw); }
.xwm-toasts .xwm-toast { margin: 0; box-shadow: 0 6px 20px rgba(28, 43, 70, .18); cursor: pointer; transition: opacity .5s, transform .5s; }
.xwm-toasts .xwm-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.xwm-inv-logo { max-height: 64px; max-width: 220px; background: #fff; }
.xwm-inv-lines td { padding: .25rem .25rem .25rem 0; border: 0; }
.xwm-inv-lines th { font-size: .75rem; color: #8094ae; font-weight: 500; border: 0; padding: 0 .25rem .25rem 0; }
.xwm-inv-lines td:nth-child(2), .xwm-inv-lines th:nth-child(2) { width: 5.5rem; }
.xwm-inv-lines td:nth-child(3), .xwm-inv-lines th:nth-child(3) { width: 8.5rem; }
.xwm-inv-raise > summary { list-style: none; }
.xwm-inv-raise > summary::-webkit-details-marker { display: none; }

/* Sites › opening hours: a day label and two time boxes per row. */
.xwm-hours__day { width: 2.5rem; flex-shrink: 0; font-weight: 600; }

/* Requests › a callback from the AI assistant: its conversation, folded away. */
.xwm-transcript summary { cursor: pointer; color: #3b4ed8; font-weight: 600; font-size: 13px; }
.xwm-transcript__body { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; max-height: 22rem; overflow-y: auto;
  background: #f5f6fa; border-radius: .5rem; padding: .75rem; }
.xwm-transcript__msg { max-width: 85%; padding: .45rem .7rem; border-radius: .7rem; font-size: 13px; background: #fff; border: 1px solid #e5e9f2; }
.xwm-transcript__msg--customer { align-self: flex-end; background: #eef0fd; border-color: #d9ddfb; }
.xwm-transcript__who { display: block; font-size: 11px; font-weight: 700; color: #8094ae; margin-bottom: .1rem; }

/* The grid: a job the AI assistant booked. */
.xwm-job__ai { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .03em; line-height: 1; padding: 2px 4px;
  border-radius: 3px; background: #816bff; color: #fff; margin-right: 4px; vertical-align: 1px; }

/* Skips out map: pins coloured by state, the same colours in the legend. */
.xwm-skipsmap__map { height: 420px; border-radius: 4px; border: 1px solid #e5e9f2; z-index: 0; }
.xwm-skipsmap.is-hidden .xwm-skipsmap__map, .xwm-skipsmap.is-hidden .xwm-maplegend { display: none; }
@media (max-width: 767.98px) { .xwm-skipsmap__map { height: 280px; } }
.xwm-pin { --xwm-pin: #1ee0ac; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--xwm-pin); color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); font-size: 15px; font-weight: 700; }
.xwm-pin svg { width: 18px; height: 18px; fill: currentColor; }
.xwm-pin--booked { --xwm-pin: #09c2de; }
.xwm-pin--due { --xwm-pin: #f4bd0e; }
.xwm-pin--permit { --xwm-pin: #816bff; }
.xwm-pin--overdue { --xwm-pin: #e85347; }
.xwm-pin--site { --xwm-pin: #364a63; border-radius: 6px; }
.xwm-pin--cluster { width: 36px; height: 36px; font-size: 13px; }
.xwm-maplegend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; color: #526484; }
.xwm-maplegend li { display: inline-flex; align-items: center; gap: .375rem; }
.xwm-maplegend .xwm-pin { width: 12px; height: 12px; border-width: 1px; box-shadow: none; }
.xwm-mappop { font-size: 13px; line-height: 1.45; }
.xwm-mappop__actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.xwm-mappop__actions .btn { color: inherit; }
.xwm-mappop__actions .btn-primary { color: #fff; }
.leaflet-popup-content { margin: 12px 14px; }
tr.xwm-maprow { cursor: pointer; }
tr.xwm-maprow.is-active > td { background-color: rgba(var(--bs-primary-rgb), .08); }
tr.xwm-maprow.is-active > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }

/* Printing any app page: the page, not the shell. The Defra testing page is
   meant to be kept as a PDF, so it must print cleanly. */
@media print {
  .nk-sidebar, .nk-header, .nk-footer, .xwm-noprint, .xwm-harness { display: none !important; }
  .nk-wrap { padding: 0 !important; }
  .nk-content { padding: 0 !important; }
  .card { break-inside: avoid; }
}
.xwm-resp { list-style: decimal; padding-left: 1.25rem; }
.xwm-resp li { margin-bottom: .375rem; }