@charset "UTF-8";
/*// Define your custom primary color
$primary: #ff5733; // Change to your desired primary color

// Import Bootstrap functions and variables*/
/*@import "../../lib/bootstrap/scss/functions";
@import "../../lib/bootstrap/scss/variables";*/
/*//@import "../../lib/bootstrap/scss";

// Override the primary color in both light and dark mode
:root, [data-bs-theme="light"] {
    --bs-primary: #ff5733; // Custom primary for light mode
    --bs-primary-rgb: 255, 87, 51;
}

[data-bs-theme="dark"] {
    --bs-primary: #ff7844; // Custom primary for dark mode (optional, can be different)
    --bs-primary-rgb: 255, 120, 68;
}

// Re-import Bootstrap to apply changes
//@import "../../lib/bootstrap/scss";*/
/** Colours
    SCSS which is unique to every project, implements the unique style colours/fonts for this project.
*/
/*//Fonts
$base-font-family: var(--bs-body-font-family);*/
/*Arial, Helvetica, sans-serif;*/
/*$base-font-size: var(--bs-body-font-size);*/
/*9pt;*/
/*$base-phone-font-size: 14px;

*/
/** 
    MIXINS FROM COMPASS
    to be put in its own scss file, probably, _donottouch_compass_mixins.scss
*/
/* JDM Custom Styles */
/* #region Login Screen Styles */
.login-bg {
  min-height: 100%;
  background: var(--primary-gradient);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-form {
  background: var(--bs-light);
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
  border-radius: .8rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.login-form h1 {
  font-size: 1.8rem;
}

.login-form h3 {
  font-size: 1.25rem;
}

.login-form small {
  display: block;
  margin-bottom: .3rem;
}

.login-form small:last-of-type {
  margin-bottom: .5rem;
}

.login-form span.login-other {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bs-light);
  padding: 0 .5rem;
}

/* #endregion Login Screen Styles */
/* #region Nav Header & Menu */
#mobileMenu .nav-item {
  border-radius: var(--bs-border-radius);
}

#mobileMenu .nav-item:hover {
  background: var(--bs-dropdown-link-hover-bg);
}

/* #endregion Nav Header & Menu */
/* #region Page Layout */
div#divContent {
  height: 100%;
}

div.absolutecenter {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* #endregion */
/* #region inline save icon */
.save-inline {
  color: var(--bs-success);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.save-inline.error {
  color: var(--bs-danger);
}

.save-inline-loading {
  color: var(--bs-primary-bg-subtle);
  position: absolute;
  right: 10px;
  top: 4px;
}

/* #endregion */
/* #region Spin */
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 2000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 2000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin-fast {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 1000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 1000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin-slow {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 3000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 3000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 3000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin-funky {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  -moz-animation-name: spin;
  -moz-animation-duration: 2000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  -ms-animation-name: spin;
  -ms-animation-duration: 2000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
}

.spin-fast-funky {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  -moz-animation-name: spin;
  -moz-animation-duration: 1000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  -ms-animation-name: spin;
  -ms-animation-duration: 1000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
}

.spin-slow-funky {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 3000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  -moz-animation-name: spin;
  -moz-animation-duration: 3000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  -ms-animation-name: spin;
  -ms-animation-duration: 3000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
  animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.7, 0.3);
}

/* #endregion */
/* #region Tab Container */
div.tabContainer {
  display: flex;
  flex-direction: column;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

div.tabContainer > div:first-child {
  padding: 0px 1px;
  margin: 0px 10px;
  border: 0px;
  position: relative;
  top: 1px;
  z-index: 1;
  overflow-x: auto;
  white-space: nowrap;
  transform: rotateX(180deg);
  overflow-y: visible;
  flex-shrink: 0;
}

div.tabContainer > div:first-child > div {
  border: 2px solid var(--bs-primary);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  margin-left: -1px;
  line-height: 30px;
  padding: 0px 20px;
  background-color: var(--bs-primary-bg-subtle);
  transition: unset;
  transform: rotateX(180deg);
}

div.tabContainer > div:first-child > div:hover {
  background-color: var(--bs-primary-bg-subtle);
  cursor: pointer;
}

div.tabContainer > div:first-child > div.active {
  background-color: #ffffff;
  border-bottom: 1px solid #ffffff;
  cursor: default;
  height: 35px;
  font-weight: 600;
}

div.tabContainer > div:first-child > div.active:hover {
  background-color: #ffffff;
}

div.tabContainer > div:first-child > div:last-child.static {
  padding: 0px 0px;
  background-color: var(--bs-primary);
  color: white;
}

div.tabContainer > div:first-child::-webkit-scrollbar {
  height: 0px;
}

div.tabContainer > div:first-child::-webkit-scrollbar-track {
  background: var(--bs-primary-bg-subtle);
  border-radius: 6px;
}

div.tabContainer > div:first-child::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 6px;
}

div.tabContainer > div:last-child {
  padding: 0px;
  margin: 0px 0px 0px 0px;
  border-top: 2px solid var(--bs-primary);
  flex-grow: 1;
  overflow-y: auto;
}

div.tabContainer > div:last-child > div {
  display: none;
  width: 100%;
  height: 100%;
}

div.tabContainer > div:last-child > div.active {
  display: block;
}

div.tabContainer.fullBorder > div:last-child {
  border: 2px solid var(--bs-primary);
  border-radius: 5px;
}

/* #endregion */
/* #region Driver Screen Completed Job Status Overlays*/
tr.driver-job-overlay > td:first-child {
  position: relative;
}

tr.driver-job-overlay > td {
  color: grey;
}

tr.driver-job-overlay > td:first-child::after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--row-width);
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

tr.driver-job-overlay.completed > td:first-child::after {
  content: "COMPLETED";
}

tr.driver-job-overlay.approved > td:first-child::after {
  content: "APPROVED";
}

tr.driver-job-overlay.invoiced > td:first-child::after {
  content: "INVOICED";
}

tr.driver-job-overlay.cancelled > td:first-child::after {
  content: "CANCELLED";
}

/* #endregion */
/* #region Date Calendar Window Picker*/
div.date-calendar-window {
  background: white;
  padding: 0.4rem;
  width: 256px;
  border-radius: 0.3rem;
}

div.date-calendar-window.popup {
  position: absolute;
  display: none;
  border: 1px solid #dee2e6;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 1050;
}

div.date-calendar-window.inline {
  border: 2px solid var(--bs-primary);
}

/* #endregion */
/* #region Notification Styles */
.notification-item {
  transition: background-color 0.2s ease;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-unread {
  background-color: #e7f3ff;
  font-weight: 500;
}

.notification-unread:hover {
  background-color: #d0e8ff;
}

.notification-saving {
  filter: grayscale(100%);
  opacity: 0.6;
  pointer-events: none;
}

.notification-saving:hover {
  background-color: inherit;
}

.notification-message {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-refresh-spin {
  animation: notification-spin 1s linear infinite;
}

@keyframes notification-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* #endregion */
.btn-xs {
  min-width: 30px;
}

/* #region Responsive Table Border Radius Fix */
@media (max-width: 575.98px) {
  .table thead tr:first-child th:last-child.d-none {
    border-top-right-radius: 0;
  }
  .table tbody tr:last-child td:last-child.d-none {
    border-bottom-right-radius: 0;
  }
  .table thead tr:first-child th:not(.d-none):has(~ :last-child.d-none):not(:has(~ :not(.d-none):not(:last-child))) {
    border-top-right-radius: var(--bs-border-radius);
  }
  .table tbody tr:last-child td:not(.d-none):has(~ :last-child.d-none):not(:has(~ :not(.d-none):not(:last-child))) {
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

@media (min-width: 768px) {
  .table thead tr:first-child th:last-child.d-md-none {
    border-top-right-radius: 0;
  }
  .table tbody tr:last-child td:last-child.d-md-none {
    border-bottom-right-radius: 0;
  }
  .table thead tr:first-child th:not(.d-md-none):has(~ :last-child.d-md-none):not(:has(~ :not(.d-md-none):not(:last-child))) {
    border-top-right-radius: var(--bs-border-radius);
  }
  .table tbody tr:last-child td:not(.d-md-none):has(~ :last-child.d-md-none):not(:has(~ :not(.d-md-none):not(:last-child))) {
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

@media (min-width: 992px) {
  .table thead tr:first-child th:last-child.d-lg-none {
    border-top-right-radius: 0;
  }
  .table tbody tr:last-child td:last-child.d-lg-none {
    border-bottom-right-radius: 0;
  }
  .table thead tr:first-child th:not(.d-lg-none):has(~ :last-child.d-lg-none):not(:has(~ :not(.d-lg-none):not(:last-child))) {
    border-top-right-radius: var(--bs-border-radius);
  }
  .table tbody tr:last-child td:not(.d-lg-none):has(~ :last-child.d-lg-none):not(:has(~ :not(.d-lg-none):not(:last-child))) {
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

@media (min-width: 1200px) {
  .table thead tr:first-child th:last-child.d-xl-none {
    border-top-right-radius: 0;
  }
  .table tbody tr:last-child td:last-child.d-xl-none {
    border-bottom-right-radius: 0;
  }
  .table thead tr:first-child th:not(.d-xl-none):has(~ :last-child.d-xl-none):not(:has(~ :not(.d-xl-none):not(:last-child))) {
    border-top-right-radius: var(--bs-border-radius);
  }
  .table tbody tr:last-child td:not(.d-xl-none):has(~ :last-child.d-xl-none):not(:has(~ :not(.d-xl-none):not(:last-child))) {
    border-bottom-right-radius: var(--bs-border-radius);
  }
}

/* #endregion */
/* #region Responsive Table Column Widths */
.col-reminder-date-responsive {
  width: 110px;
}

@media (min-width: 768px) {
  .col-reminder-date-responsive {
    width: 200px;
  }
}

/* #endregion */
/* #region Reminder Details Line Clamp */
.reminder-details-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* #endregion */
/* #region Help Page Styles */
.help-card-wrapper .help-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.help-card-details {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.workflow-container {
  background: var(--bs-light);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
}

@media (max-width: 767.98px) {
  .workflow-container {
    padding: 0.5rem;
  }
  .workflow-container .rounded {
    min-width: 90px !important;
    padding: 0.5rem !important;
  }
  .workflow-container .material-symbols-outlined {
    font-size: 24px !important;
  }
}

/* #endregion */
/* #region QuickBooking inline DateWindowPickerCompact compaction
   Compact the inline picker textbox to match form-control-sm so the Pickup / Delivery
   cells line up with the rest of the inline-edit row. The popup is appended to body
   (NOT a descendant of .date-window-picker-compact), so these rules only affect the
   inline trigger textbox; popup contents stay full-size for usability.
   !important is used because we are overriding Bootstrap's .form-floating rules. */
/* Both the date-window-picker-compact and job-details-popover use a form-floating +
   form-control + body-anchored popup. The triggers share the same compaction rules
   so the inline-edit row is one uniform height. */
.quick-jobs-grid .date-window-picker-compact .form-floating,
.quick-jobs-grid .job-details-popover .form-floating,
.quick-jobs-grid .job-assignment-popover .form-floating {
  min-height: 0 !important;
  /* FNQBootstrapOverrides.scss adds margin-bottom:1rem to every .form-floating
       project-wide; that 16px gap renders BELOW the textbox and outside the
       form-floating's height, so it survives the height/min-height overrides. */
  margin-bottom: 0 !important;
}

.quick-jobs-grid .date-window-picker-compact .form-floating > .form-control,
.quick-jobs-grid .job-details-popover .form-floating > .form-control,
.quick-jobs-grid .job-assignment-popover .form-floating > .form-control {
  height: calc(1.5em + 0.5rem + 2px) !important;
  min-height: 0 !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* The floating label is redundant with the column header. */
.quick-jobs-grid .date-window-picker-compact .form-floating > label,
.quick-jobs-grid .job-details-popover .form-floating > label,
.quick-jobs-grid .job-assignment-popover .form-floating > label {
  display: none !important;
}

/* The date picker's outer wrapper is display:inline-block (fnq.js) which reserves
   typographic descender space below the textbox — invisible at 58px, visible at 31px.
   Flatten to block. The popover's outer wrapper is already block. */
.quick-jobs-grid .date-window-picker-compact > div {
  display: block !important;
}

/* Action column is 30px below lg (just the more_vert icon) and 60px at lg+ where
   the inline-edit pending row's save+cancel buttons appear (30px each, side by side).
   table-layout:fixed on the parent table propagates this TH width to the column. */
.quick-jobs-grid thead th.qb-action-col {
  width: 30px;
}

@media (min-width: 992px) {
  .quick-jobs-grid thead th.qb-action-col {
    width: 60px;
  }
}

/* Active-row highlight — applied to the saved row whose job is currently open in
   the bottom-band editor. Targets the row's <td>s (not the <tr>) because Bootstrap's
   table-hover sets background-color on the cells via CSS variables; setting it on
   the tr alone gets overridden. Left-border accent gives a stronger visual anchor
   that survives hover. !important overrides .table-hover's hover background. */
.quick-jobs-grid tr.qb-row-active > td {
  background-color: rgba(13, 110, 253, 0.1) !important;
}

.quick-jobs-grid tr.qb-row-active > td:first-child {
  box-shadow: inset 3px 0 0 #0d6efd;
}

/* Yellow attention palette — "value is present but needs updating".
   Three cells share this look:
     - qb-assignment-stale: Assignment cell where the active-leg date doesn't
       match the selected day-tab (driver app won't surface for that day).
     - qb-date-stale: Pickup or Delivery date cell where the date is in the past
       (the row is on today via _jobBelongsToDay's rollover rule).
     - qb-party-incomplete: Sender or Receiver cell where an assignment exists
       but the party's name/address1 is blank (assignment dispatch is blocked).
   All three are "you have something there but it's not right yet" — distinct
   from the red qb-assignment-missing palette below ("there's nothing there"). */
.quick-jobs-grid td.qb-assignment-stale,
.quick-jobs-grid td.qb-date-stale,
.quick-jobs-grid td.qb-party-incomplete,
.runsheet-table td.qb-assignment-stale,
.runsheet-table td.qb-date-stale,
.runsheet-table td.qb-party-incomplete {
  background-color: rgba(255, 193, 7, 0.25) !important;
  box-shadow: inset 0 -2px 0 #f5a800;
  font-weight: 600;
}

/* On an active row, the blue active-row highlight sits on the first td (type
   icon) so it doesn't overlap with these cells. The row-level :hover background
   still applies though — keep the yellow visible on hover. */
.quick-jobs-grid tr:hover > td.qb-assignment-stale,
.quick-jobs-grid tr:hover > td.qb-date-stale,
.quick-jobs-grid tr:hover > td.qb-party-incomplete,
.runsheet-table tr:hover > td.qb-assignment-stale,
.runsheet-table tr:hover > td.qb-date-stale,
.runsheet-table tr:hover > td.qb-party-incomplete {
  background-color: rgba(255, 193, 7, 0.35) !important;
}

/* Missing red palette — "there's nothing there and the day is in progress":
     - qb-assignment-missing: Assignment cell, no driver/vehicle on active leg,
       today's tab selected.
     - qb-party-missing: Sender or Receiver cell, party fully empty (no name at
       all) on a job type that requires it, with either a driver assigned OR
       the party's request date today-or-past. Wins over qb-party-incomplete
       at the JS level (the empty case is stronger than the partial case).
   Red palette intentionally separate from the yellow "needs updating" cells:
   yellow says "refresh this value", red says "this value is missing and the
   day is in progress". */
.quick-jobs-grid td.qb-assignment-missing,
.quick-jobs-grid td.qb-party-missing,
.runsheet-table td.qb-assignment-missing,
.runsheet-table td.qb-party-missing {
  background-color: rgba(220, 53, 69, 0.15) !important;
  box-shadow: inset 0 -2px 0 #dc3545;
  font-weight: 600;
}

.quick-jobs-grid tr:hover > td.qb-assignment-missing,
.quick-jobs-grid tr:hover > td.qb-party-missing,
.runsheet-table tr:hover > td.qb-assignment-missing,
.runsheet-table tr:hover > td.qb-party-missing {
  background-color: rgba(220, 53, 69, 0.25) !important;
}

/* #endregion */
/* #region TomSelect hidden-input hardening */
/* TomSelect hides the original <input> via .ts-hidden-accessible (1px abs-positioned,
   clipped). Two issues collude to grow the document height:
     1. Inline style="width:100%" on the source input wins on specificity, so the
        "hidden" input ends up 100% wide.
     2. With top/left left as auto, position:absolute parks the element at its
        STATIC position — i.e. the flow position of whichever row owns it. For a
        row near the bottom of a long list, that static position is hundreds of
        pixels down the page, and abs-positioned descendants contribute to
        scrollHeight even when clipped — silently growing the page by ~218px
        below the row.
     The whitespace is unselectable in DevTools because clip:rect(0 0 0 0)
     hides the input from the picker, even though it still affects layout.
     Pin every layout-affecting property so the element is genuinely zero-cost
     regardless of inline overrides. */
input.ts-hidden-accessible,
select.ts-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  white-space: nowrap !important;
}

/* #endregion */
/* #region Runsheet — Daily Runsheet office page */
/* The page layout: divContent is a vertical flex column (toolbar on top, scrollable
   grid below). Each group is a section with a header bar and a compact table.
   Status pills mirror the visual treatment used in Driver.js for consistency
   between office and driver views. */
.runsheet-toolbar {
  background: #fff;
  z-index: 2;
}

.runsheet-group {
  /* Each driver/vehicle section avoids mid-section page breaks where possible
       (paper users want each driver's section on one page). */
  page-break-inside: avoid;
  break-inside: avoid;
}

.runsheet-group-header {
  background: #1e3a8a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px 4px 0 0;
  font-weight: 600;
  font-size: 14px;
  /* Group counter text inside the header should be lighter to de-emphasize. */
}

.runsheet-group-header .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

.runsheet-table {
  /* Fixed layout so columns honour their declared widths and the flexible
       Sender/Receiver cells truncate (text-truncate + max-width) instead of
       stretching the table past the viewport on narrow screens. */
  table-layout: fixed;
  width: 100%;
  /* Tighter rows than default table-sm for higher density. Office runsheets
       are read at arm's length when held as a paper handover sheet. */
}

.runsheet-table th, .runsheet-table td {
  padding: 4px 6px !important;
}

.runsheet-table th {
  background: #f1f5f9;
  color: #1f2937;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 2px solid #cbd5e1;
}

/* Status pills are rendered via the shared buildJobStatusBadge helper
   (FNQ.js:1849) so they stay consistent with Booking / Jobs. No
   runsheet-specific pill styles needed. */
/* Completed rows — jobs whose pickup/delivery happened on the selected day
   but are no longer active work (status Delivered / Approved / Invoiced).
   They appear on the manifest so the dispatcher can see what actually ran
   on the day, but read as muted/done so they don't compete with active
   rows for attention. The status badge in each row still carries its own
   color (Delivered green / Approved indigo / Invoiced grey) so the lifecycle
   stage is still legible inside the muted band. */
.runsheet-table tr.runsheet-row-completed > td {
  color: #6b7280;
  background-color: #f8fafc;
  font-weight: 400;
}

.runsheet-table tr.runsheet-row-completed:hover > td {
  background-color: #eef2f7;
}

/* #endregion */
/* #region Runsheet Print — @media print rules for browser-print fallback */
/* Primary export is the server-generated PDF (RunsheetReportController). This
   print stylesheet is a safety net for Ctrl+P from the screen view — strips
   page chrome and tightens the table so the rendered output is at least usable
   if someone prefers browser-print over the PDF endpoint. */
@media print {
  header, .navbar, .offcanvas, #mobileNotificationIconContainer,
footer, .no-print, .runsheet-toolbar {
    display: none !important;
  }
  body, .flex-grow-1, #divContent {
    overflow: visible !important;
    height: auto !important;
  }
  .runsheet-table {
    font-size: 9pt;
    width: 100%;
  }
  .runsheet-table th, .runsheet-table td {
    padding: 2px 4px !important;
  }
  .runsheet-group {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Preserve flag/status colors when printing — browsers strip backgrounds
       by default to save toner. Office wants colors so the urgent/dangerous/
       photo flags read at a glance. */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* #endregion */