body,
input,
button,
select,
textarea {
  font-family: var(--cm-font-sans);
}

* {
  color: var(--text-color);
}

body {
  display: none;
}

/* Navbar Styling*/
.navbar-margin {
  display: block;
  padding-left: 70px;
}

.sidenav-page-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

#navbar {
  height: 100%;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

#navbar i,
a {
  color: var(--dark-text-color);
}

.nav-item-div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.logo-div {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
  background-color: var(--background-color);
  width: 100%;
  box-shadow: var(--default-box-shadow) !important;
  box-sizing: border-box;
  padding-left: 1px;
}

/* The side navigation menu */
.sidenav {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 70px;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: var(--dark-background-color);
  overflow-x: hidden;
  transition: 0.25s;
  z-index: 10000000;
}

.sidenav-hider {
  height: 100%;
  width: 20px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 50px;
  background-color: var(--dark-background-color);
  overflow-x: hidden;
  transition: 0.25s;
}

.sidenav:hover .sidenav-hider {
  left: 230px;
  width: 0px;
}

.sidenav:hover {
  position: fixed;
  width: 250px;
}

.sidenav:hover .nav-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 230px;
}

/* The navigation menu links */
.sidenav a {
  /* Symmetric horizontal padding so the icon-div ends up centered. The
     legacy 8px 8px 8px 10px combined with the .sidenav .nav-item
     horizontal margin pushed every icon ~4px right of the rail's center. */
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  color: var(--dark-text-color);
  display: flex;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: var(--dark-text-color);
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

.nav-item {
  display: block;
  padding: 10px;
  width: 100%;
}

.nav-logo {
  display: block;
  /* Original 10px padding shifted 2px right so the AutoMate wedge looks
     centered in the 70px rail when collapsed. */
  padding: 10px 8px 10px 12px;
  width: 100%;
  transition: 0.25;
}

.nav-item a:hover,
.dropdown:hover .dropbtn {
  box-shadow: -10px 0px 0px 0px #006666;
  background-color: #595959;
}

.nav-text {
  padding-left: 30px;
  color: var(--dark-text-color);
  /* Keep nav labels on a single line. When the rail is collapsed and the
     parent's overflow clips the label, white-space: normal would wrap
     the text inside the toggle's box (e.g. "Dark mode" → "Dark\nmode"),
     which inflates the toggle's height and shifts the icon vertically
     when the rail expands and the label fits on one line again. */
  white-space: nowrap;
}

div.dropdown {
  display: inline-block;
}

.dropdown-content a {
  color: var(--cm-text-on-dark);
  padding: var(--cm-space-2) var(--cm-space-4);
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--cm-text-on-dark);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: var(--cm-bg-sidebar);
  min-width: 160px;
  box-shadow: var(--cm-shadow-md);
  z-index: 101;
  margin-top: -41px;
  left: 250px;
}

.icon-div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  margin: 0px;
  padding: 0px;
}

.sidenav:hover .dark-mode-toggle {
  width: 100%;
  transition: width 0.3s ease-in-out;
}

.dark-mode-toggle {
  /* Mirror the .nav-link layout (flex row, icon-div + nav-text) so the
     icon centers in the rail collapsed and the label slides in on
     hover-expand. */
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 20px;
  color: #ccc;
}

.dark-mode-toggle i {
  width: min-content;
  cursor: pointer;
  color: var(--dark-text-color);
}

.rotate-in {
  animation: rotateIn 0.3s forwards;
}

.rotate-out {
  animation: rotateOut 0.3s forwards;
}

@keyframes rotateIn {
  from {
    transform: rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes rotateOut {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(180deg);
    opacity: 0;
  }
}

body {
  padding: 0px;
  margin: 0px;
  background-color: var(--body-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
  margin: 0px;
  padding: 0px;
}

.page-container {
  display: flex;
  flex-direction: column;
  /* `safe center` centers children only when they fit. If a child is
     wider than the container (e.g. a 12-column results table on a
     narrow viewport), CSS falls back to flex-start instead of
     overflowing equally in both directions. The previous plain
     `center` let centered overflow spill LEFT into the navbar gutter
     (the navbar is position: fixed and sits on top), so wide tables
     visually pushed under the rail at narrow widths. With `safe
     center`, overflow is one-sided (right of the container), so the
     page just scrolls horizontally and the navbar stays clear. */
  align-items: safe center;
  justify-content: safe center;
  min-height: 100vh;
  min-width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
  padding: 40px;
  background-color: var(--background-color);
  box-shadow: var(--cm-shadow-md);
  /* Was hardcoded 20px (legacy visual). Tokenize so card radius matches the
     rest of the design system (request site already uses --cm-radius-lg
     directly on .wizard-card / .chooser-card). */
  border-radius: var(--cm-radius-lg);
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Loader and Timeout modal */

.sidenav-offset {
  pointer-events: none;
  display: flex;
  position: absolute;
  width: -webkit-fill-available;
  align-items: center;
  justify-content: center;
  height: 150px;
}

.sidenav-offset-timeout {
  pointer-events: none;
  display: flex;
  position: absolute;
  width: -webkit-fill-available;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.sidenav-offset div {
  pointer-events: all;
}

.sidenav-offset-timeout div {
  pointer-events: all;
}

.loaderBody {
  position: fixed;
  background-image: radial-gradient(
    circle farthest-corner at center,
    var(--background-color) 0%,
    var(--body-color) 100%
  );
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: 1000;
}

.loader {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
  z-index: 1000;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 5px solid #004d4d;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 5px solid #008080;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 5px solid #00b3b3;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

/* ───── Toasts ─────────────────────────────────────────────────────────────
   Stacked notification cards rendered into #cm-toast-host. Replaces the
   legacy single-message .success / .error / .warning / .info banners.
   Each toast is a card with a colored left-border accent, an icon, the
   message, a close-X, and (when auto-dismiss is set) a progress bar
   anchored to the bottom edge that visibly counts down the remaining
   time. Hovering the toast pauses the progress animation and the
   dismissal that's tied to it (animationend → remove), so a user
   reading a slow message doesn't have it vanish under them.
*/
.cm-toast-host {
  position: fixed;
  top: var(--cm-space-4);
  right: var(--cm-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-2);
  z-index: 9999;
  pointer-events: none; /* Children opt back in. Lets clicks pass through gaps. */
  max-width: calc(100vw - var(--cm-space-8));
}

.cm-toast {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--cm-space-3);
  align-items: center;
  width: min(380px, calc(100vw - var(--cm-space-8)));
  padding: var(--cm-space-3) var(--cm-space-4);
  border-radius: var(--cm-radius-lg);
  border: 1px solid var(--cm-border);
  border-left-width: 4px;
  background: var(--cm-bg-surface);
  color: var(--cm-text);
  box-shadow: var(--cm-shadow-md);
  overflow: hidden;
  animation: cm-toast-enter 220ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

.cm-toast--leaving {
  animation: cm-toast-leave 180ms ease-in both;
}

.cm-toast-icon {
  font-size: 1.125rem;
  line-height: 1;
}

.cm-toast-message {
  margin: 0;
  font-size: var(--cm-text-sm);
  line-height: 1.4;
  word-break: break-word;
}

.cm-toast-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--cm-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--cm-space-1);
  border-radius: var(--cm-radius-sm);
  transition:
    background 120ms ease,
    color 120ms ease;
}
.cm-toast-close:hover {
  color: var(--cm-text);
  background: var(--cm-bg-muted);
}
.cm-toast-close:focus-visible {
  outline: none;
  box-shadow: var(--cm-focus-ring);
}

.cm-toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  overflow: hidden;
}
.cm-toast-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation-name: cm-toast-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
/* Pause the progress bar (and therefore the dismissal that fires on
   animationend) while the user has the toast hovered. */
.cm-toast:hover .cm-toast-progress-bar {
  animation-play-state: paused;
}

/* Per-level accents. Background uses a soft tint so the card sits on
   the surface palette rather than shouting in saturated color the way
   the legacy banners did. */
.cm-toast--success {
  border-left-color: var(--cm-success-500);
  background: color-mix(in srgb, var(--cm-success-500) 10%, var(--cm-bg-surface));
}
.cm-toast--success .cm-toast-icon {
  color: var(--cm-success-500);
}
.cm-toast--success .cm-toast-progress-bar {
  background: var(--cm-success-500);
}

.cm-toast--error {
  border-left-color: var(--cm-danger-500);
  background: color-mix(in srgb, var(--cm-danger-500) 10%, var(--cm-bg-surface));
}
.cm-toast--error .cm-toast-icon {
  color: var(--cm-danger-500);
}
.cm-toast--error .cm-toast-progress-bar {
  background: var(--cm-danger-500);
}

.cm-toast--warning {
  border-left-color: var(--cm-warning-500);
  background: color-mix(in srgb, var(--cm-warning-500) 10%, var(--cm-bg-surface));
}
.cm-toast--warning .cm-toast-icon {
  color: var(--cm-warning-500);
}
.cm-toast--warning .cm-toast-progress-bar {
  background: var(--cm-warning-500);
}

.cm-toast--info {
  border-left-color: var(--cm-blue-500);
  background: color-mix(in srgb, var(--cm-blue-500) 10%, var(--cm-bg-surface));
}
.cm-toast--info .cm-toast-icon {
  color: var(--cm-blue-500);
}
.cm-toast--info .cm-toast-progress-bar {
  background: var(--cm-blue-500);
}

@keyframes cm-toast-enter {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes cm-toast-leave {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(20px);
    opacity: 0;
  }
}

@keyframes cm-toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ───── Add Bill Type popup ─────────────────────────────────────────────
   Form-grid layout for the Bill Type creation modal on the Invoice
   page. Replaces the legacy <table> with <td>label/<input> cells that
   gave inconsistent spacing and labels-with-<b> instead of styled
   labels. The page-breakdown table stays a real <table> since it's
   tabular data, just gets its scroll wrap and footer buttons
   restyled to match the rest of the modal-polish work.
*/
.bill-type-popup {
  width: min(620px, calc(100vw - var(--cm-space-8)));
}
.bill-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cm-space-3) var(--cm-space-4);
  width: 100%;
}
.bill-type-grid > .field > input,
.bill-type-grid > .field > select {
  width: 100%;
  box-sizing: border-box;
}
.bill-type-section-title {
  margin: var(--cm-space-3) 0 var(--cm-space-1);
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
}
.bill-type-page-table-wrap {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  padding: var(--cm-space-2);
  width: 100%;
}
/* Breathing room around the "to" / ":" separator cells in the page-
   breakdown table so they don't sit flush against the adjacent
   inputs. The cells are intentionally narrow content (just the word
   "to" or a colon), so padding-x on the cell is the cleanest knob. */
.bill-type-page-table-wrap .dashCol {
  padding: 0 var(--cm-space-3);
  color: var(--cm-text-muted);
  white-space: nowrap;
  text-align: center;
}
.bill-type-add-range-row {
  display: flex;
  justify-content: center;
  margin-top: var(--cm-space-2);
}
.bill-type-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cm-space-2);
  margin-top: var(--cm-space-4);
  padding-top: var(--cm-space-3);
  border-top: 1px solid var(--cm-border);
}

/* ───── Resend Request popup ─────────────────────────────────────────────
   Two-column layout when the PDF viewer is open: form on the left
   (~360px), PDF on the right. Form-only state collapses to just the
   form column. Replaces the legacy markup that built every label/
   input pair as a `.row` (which inside .popup is justify-content:
   stretch, so labels and inputs spread inconsistently).
*/
.resend-popup {
  /* Override the default .popup min-width: 480px and the popup--wide
     max-width: 1180px so the card hugs the form column when the PDF
     viewer is hidden. Width math: 360px form + 2 * var(--cm-space-6)
     popup padding = 408px. The :has() rule below re-expands the card
     when View Request opens the PDF panel. */
  min-width: 0;
  max-width: min(408px, 98vw);
}
.resend-popup:has(.resend-popup__pdf--open) {
  max-width: min(1180px, 98vw);
}
.resend-popup__content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--cm-space-4);
}
.resend-popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-3);
  flex: 0 0 360px;
  min-width: 0;
}
.resend-popup__header {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-1);
  text-align: left;
  border-bottom: 1px solid var(--cm-border);
  padding-bottom: var(--cm-space-3);
}
.resend-popup__header h2 {
  margin: 0;
}
.resend-popup__subtitle {
  margin: 0;
  color: var(--cm-text-muted);
  font-size: var(--cm-text-sm);
  font-feature-settings: 'tnum';
}
.resend-popup__view-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cm-space-2);
}
.resend-popup .field {
  width: 100%;
}
.resend-popup .field > input,
.resend-popup .field > select {
  width: 100%;
  box-sizing: border-box;
}
.resend-popup__options {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-2);
  margin-top: var(--cm-space-1);
}
.resend-popup__checkbox {
  display: flex;
  align-items: center;
  gap: var(--cm-space-2);
  padding: var(--cm-space-1) 0;
  cursor: pointer;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  user-select: none;
}
.resend-popup__checkbox > input[type='checkbox'] {
  margin: 0;
}
.resend-popup__footer {
  display: flex;
  justify-content: center;
  gap: var(--cm-space-2);
  margin-top: var(--cm-space-3);
  padding-top: var(--cm-space-3);
  border-top: 1px solid var(--cm-border);
}
.resend-popup__pdf {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 70vh;
  border-radius: var(--cm-radius-md);
  overflow: hidden;
}
.resend-popup__pdf--open {
  display: block;
}

/* ───── CNR popup ───────────────────────────────────────────────────────
   Modern radio-card layout for the "Submit CNR" reason picker (used on
   Upload Records + Manual Upload). The previous design was a stack of
   `<div class="row">` wrappers with a separate `<input>` and `<label>`
   that didn't visually communicate which option was selected and had
   inconsistent spacing between rows. The new shape:

   - <label> wraps the radio + text, so clicking anywhere in the row
     toggles the radio (better hit target and accessibility).
   - Each option renders as a card with a hover state and a clear
     "selected" treatment (teal border + tinted background) so the
     active choice is unambiguous before the user clicks Upload.
   - The Other option has its text input live in the same card; the
     input's full width is reclaimed below the radio + label row.
*/
.cnr-popup {
  width: min(440px, calc(100vw - var(--cm-space-8)));
}
.cnr-popup__title {
  margin: 0 0 var(--cm-space-1);
}
.cnr-popup__subtitle {
  margin: 0 0 var(--cm-space-4);
  color: var(--cm-text-muted);
  font-size: var(--cm-text-sm);
}
.cnr-options {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-2);
  width: 100%;
}
.cnr-option {
  display: flex;
  align-items: center;
  gap: var(--cm-space-3);
  padding: var(--cm-space-2) var(--cm-space-3);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  cursor: pointer;
  user-select: none;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}
.cnr-option:hover {
  border-color: var(--cm-teal-500);
  background: color-mix(in srgb, var(--cm-teal-500) 6%, var(--cm-bg-surface));
}
.cnr-option:has(input[type='radio']:checked) {
  border-color: var(--cm-teal-500);
  background: color-mix(in srgb, var(--cm-teal-500) 10%, var(--cm-bg-surface));
}
.cnr-option > input[type='radio'] {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
.cnr-option > span {
  flex: 1;
  font-weight: var(--cm-fw-medium);
}
.cnr-option--with-input {
  flex-wrap: wrap;
}
.cnr-option--with-input > input[type='text'] {
  flex: 1 1 100%;
  margin: var(--cm-space-2) 0 0;
}
.cnr-popup__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--cm-space-4);
}

/* ───── Google Charts tooltip polish ────────────────────────────────────
   Matches the dashboard's modernised chart palette (Automate-cm-charts).
   Google Charts renders its default SVG tooltip as a stark white rectangle
   with hairline border — rough next to the rest of the design language.
   Soften with our shadow + border-radius so it sits like the toast cards.
*/
.google-visualization-tooltip {
  border-radius: var(--cm-radius-lg) !important;
  box-shadow: var(--cm-shadow-md) !important;
  border: 1px solid var(--cm-border) !important;
  background: var(--cm-bg-surface) !important;
  padding: var(--cm-space-2) var(--cm-space-3) !important;
}
.google-visualization-tooltip-item-list {
  margin: 0 !important;
}
.google-visualization-tooltip-item {
  padding: var(--cm-space-1) 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cm-toast,
  .cm-toast--leaving,
  .cm-toast-progress-bar {
    animation: none !important;
  }
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

.messageText {
  text-align: center;
  word-wrap: normal;
  color: white;
}

.loader-wait-message {
  position: absolute;
  top: calc(50% - 128px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  text-align: center;
  font-size: 18pt;
}

.loader-message-div {
  position: absolute;
  top: calc(50% - 8px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  text-align: center;
  font-size: 18pt;
}

.timeout-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
}

.timeout-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.timeout-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--body-color);
  box-shadow: var(--default-box-shadow);
  padding: 20px;
  border-radius: 10px;
}

.timeout-modal-countdown-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.timeout-modal-countdown {
  display: flex;
  color: white;
  border-radius: 5px;
  background-color: #006666;
  padding: 10px;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
}

.timeout-modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.timeout-button {
  background-image: linear-gradient(92.88deg, #006666 0%, #004d4d 80%);
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: normal;
  height: 35px;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: #006666 0 3px 8px;
  transition: all 0.5s;
  user-select: none;
}

.timeout-button:hover {
  box-shadow: #004d4d 0 1px 30px;
  transition-duration: 0.1s;
}

/* Justify Content Classes */
.jc-space-evenly {
  justify-content: space-evenly !important;
}
.jc-space-between {
  justify-content: space-between !important;
}
.jc-space-around {
  justify-content: space-around !important;
}
.jc-center {
  justify-content: center !important;
}
.jc-start {
  justify-content: flex-start !important;
}
.jc-end {
  justify-content: flex-end !important;
}
/* Align Items Classes */
.align-center {
  align-items: center !important;
}
.align-start {
  align-items: flex-start !important;
}
.align-end {
  align-items: flex-end !important;
}
/* Align Self Classes */
.align-self-center {
  align-self: center !important;
}
.align-self-start {
  align-self: flex-start !important;
}
.align-self-end {
  align-self: flex-end !important;
}
/* Width and height classes */
.width-inherit {
  width: inherit !important;
}
.width-100 {
  width: 100% !important;
}
.width-75 {
  width: 75% !important;
}
.width-50 {
  width: 50% !important;
}
.width-25 {
  width: 25% !important;
}
.min-width-100 {
  min-width: 100% !important;
}
.min-width-75 {
  min-width: 75% !important;
}
.min-width-50 {
  min-width: 50% !important;
}
.min-width-25 {
  min-width: 25% !important;
}
.width-auto {
  width: auto !important;
}
.max-width-100 {
  max-width: 100% !important;
}
.max-width-95 {
  max-width: 95% !important;
}
.max-width-90 {
  max-width: 90% !important;
}
.max-width-75 {
  max-width: 75% !important;
}
.height-inherit {
  height: inherit !important;
}
.height-auto {
  height: auto !important;
}
.height-100 {
  height: 100% !important;
}
.height-75 {
  height: 75% !important;
}
.height-50 {
  height: 50% !important;
}
.height-25 {
  height: 25% !important;
}
.height-auto {
  height: auto !important;
}
.min-height-100 {
  min-height: 100% !important;
}
.min-height-75 {
  min-height: 75% !important;
}
.min-height-50 {
  min-height: 50% !important;
}
.min-height-25 {
  min-height: 25% !important;
}
.max-height-100 {
  max-height: 100% !important;
}
.max-height-75 {
  max-height: 75% !important;
}
.max-height-50 {
  max-height: 50% !important;
}
.max-height-25 {
  max-height: 25% !important;
}

/* Padding classes */
.pd-none {
  padding: 0px !important;
}
.pd-small {
  padding: 2px !important;
}
.pd-medium {
  padding: 5px !important;
}
.pd-large {
  padding: 10px !important;
}
.pd-xlarge {
  padding: 20px !important;
}
.pd-left-none {
  padding-left: 0px !important;
}
.pd-left-small {
  padding-left: 2px !important;
}
.pd-left-medium {
  padding-left: 5px !important;
}
.pd-left-large {
  padding-left: 10px !important;
}
.pd-left-xlarge {
  padding-left: 20px !important;
}
.pd-right-none {
  padding-right: 0px !important;
}
.pd-right-small {
  padding-right: 2px !important;
}
.pd-right-medium {
  padding-right: 5px !important;
}
.pd-right-large {
  padding-right: 10px !important;
}
.pd-right-xlarge {
  padding-right: 20px !important;
}
.pd-top-none {
  padding-top: 0px !important;
}
.pd-top-small {
  padding-top: 2px !important;
}
.pd-top-medium {
  padding-top: 5px !important;
}
.pd-top-large {
  padding-top: 10px !important;
}
.pd-top-xlarge {
  padding-top: 20px !important;
}
.pd-bottom-none {
  padding-bottom: 0px !important;
}
.pd-bottom-small {
  padding-bottom: 2px !important;
}
.pd-bottom-medium {
  padding-bottom: 5px !important;
}
.pd-bottom-large {
  padding-bottom: 10px !important;
}
.pd-bottom-xlarge {
  padding-bottom: 20px !important;
}
/* Margin classes */
.mg-none {
  margin: 0px !important;
}
.mg-small {
  margin: 2px !important;
}
.mg-medium {
  margin: 5px !important;
}
.mg-large {
  margin: 10px !important;
}
.mg-xlarge {
  margin: 20px !important;
}
.mg-left-none {
  margin-left: 0px !important;
}
.mg-left-small {
  margin-left: 2px !important;
}
.mg-left-medium {
  margin-left: 5px !important;
}
.mg-left-large {
  margin-left: 10px !important;
}
.mg-left-xlarge {
  margin-left: 20px !important;
}
.mg-right-none {
  margin-right: 0px !important;
}
.mg-right-small {
  margin-right: 2px !important;
}
.mg-right-medium {
  margin-right: 5px !important;
}
.mg-right-large {
  margin-right: 10px !important;
}
.mg-right-xlarge {
  margin-right: 20px !important;
}
.mg-top-none {
  margin-top: 0px !important;
}
.mg-top-small {
  margin-top: 2px !important;
}
.mg-top-medium {
  margin-top: 5px !important;
}
.mg-top-large {
  margin-top: 10px !important;
}
.mg-top-xlarge {
  margin-top: 20px !important;
}
.mg-bottom-none {
  margin-bottom: 0px !important;
}
.mg-bottom-small {
  margin-bottom: 2px !important;
}
.mg-bottom-medium {
  margin-bottom: 5px !important;
}
.mg-bottom-large {
  margin-bottom: 10px !important;
}
.mg-bottom-xlarge {
  margin-bottom: 20px !important;
}
.display-none {
  display: none !important;
}
.display-block {
  display: block !important;
}
.display-flex {
  display: flex !important;
}
.hidden {
  visibility: hidden !important;
}
.visible {
  visibility: visible !important;
}
.gap-none {
  gap: 0px !important;
}
.gap-small {
  gap: 2px !important;
}
.gap-medium {
  gap: 5px !important;
}
.gap-large {
  gap: 10px !important;
}
.gap-xlarge {
  gap: 20px !important;
}
.gap-50 {
  gap: 50px !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-no-wrap {
  flex-wrap: nowrap !important;
}

.flex-direction-row {
  flex-direction: row !important;
}
.flex-direction-column {
  flex-direction: column !important;
}

/* Overflow*/
.overflow-auto {
  overflow: auto !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.overflow-y-hidden {
  overflow-y: hidden !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-x-hidden {
  overflow-x: hidden !important;
}

.bottom-shadow {
  box-shadow: var(--cm-shadow-sm);
}

.error-text {
  color: crimson;
}

input[type='text'],
input[type='password'],
input[type='date'],
input[type='email'],
input[type='number'] {
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  border: none;
  box-shadow: var(--default-box-shadow);
  font-size: 12pt;
  box-sizing: border-box;
  background-color: var(--body-color);
  color: var(--text-color);
}

input::placeholder {
  color: var(--text-color);
  opacity: 0.7;
}

input[type='checkbox'] {
  height: 18px;
  width: 18px;
  accent-color: #006666;
}

input[type='file']::file-selector-button {
  margin-right: 20px;
  border: none;
  padding: 10px 10px;
  border-radius: 10px;
  background: #006666;
  background-image: linear-gradient(92.88deg, #006666 0%, #004d4d 80%);
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  color: white;
  line-height: 18px;
}

textarea {
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  border: none;
  background-color: var(--body-color);
  color: var(--text-color);
  box-shadow: var(--default-box-shadow);
}

select {
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  border: none;
  background-color: var(--body-color);
  color: var(--text-color);
  box-shadow: var(--default-box-shadow);
  cursor: pointer;
  box-sizing: border-box;
  font-size: 12pt;
}

p {
  margin: 2px;
  padding: 2px;
}

hr {
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-color: var(--text-color);
}

.search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 95%;
  gap: 5px;
}

.search-bar input[type='text'],
.search-bar select {
  width: 100%;
}

/* ───── Stacked label variant (.search-bar.stacked) ────────────────────────
   Labels render above each input so empty fields aren't ambiguous (esp. for
   <input type="date"> which has no placeholder support). Wraps to multiple
   rows on narrower viewports via auto-fit grid. Search button hugs the end
   row.
*/
.search-bar.stacked {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--cm-space-3) var(--cm-space-3);
  align-items: end;
  justify-content: flex-start;
  padding: var(--cm-space-4);
  background: var(--cm-bg-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-sm);
}

.search-bar.stacked .search-field {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-1);
  min-width: 0;
}

.search-bar.stacked .search-field > label,
.search-bar.stacked .search-field-label {
  font-size: 0.6875rem; /* 11px — tighter than --cm-text-xs */
  font-weight: var(--cm-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-text-muted);
  line-height: 1;
  padding-left: 2px;
  user-select: none;
}

.search-bar.stacked .search-field > input,
.search-bar.stacked .search-field > select {
  width: 100%;
}

/* Selects need a touch more horizontal room so the longest option label
   (e.g. "All statuses", "Pending Invoicing") doesn't get truncated to
   "All s..." in the closed state when the grid auto-sizes columns to
   1fr each. Spanning two columns gives each select roughly 280px which
   comfortably fits the longest option text in this app. */
.search-bar.stacked .search-field--wide,
.search-bar.stacked .search-field:has(select) {
  grid-column: span 2;
}

/* Actions row — always spans the full search-bar width and centers its
   button cluster (Search; or Clear + Search; or Search + Batch Actions).
   Living in a dedicated row instead of trailing the last input field
   keeps the visual placement consistent across pages with different
   field counts and column counts. */
.search-bar.stacked .search-actions {
  display: flex;
  gap: var(--cm-space-2);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  margin-top: var(--cm-space-1);
}

:root.dark .search-bar.stacked {
  background: var(--cm-bg-surface);
  border-color: var(--cm-border);
}

/* ───── Side-by-side actions variant (.search-bar.stacked.actions-end) ─────
   Pilot variant where the input fields render in their own auto-fit grid
   on the left and the Search/Clear cluster lives in a dedicated column
   on the far right. Eliminates the dedicated full-width action row of
   the default stacked layout — buttons no longer take a separate row,
   so the search panel is markedly shorter on pages with few fields.
   Opt-in: requires a wrapping `.search-fields` div around the inputs.
*/
.search-bar.stacked.actions-end {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: var(--cm-space-3);
  /* Force a real container width inside the .page-container flex column
     so the grid's `1fr` left column has space to distribute (it would
     otherwise collapse to 0 under the parent's `align-items: safe
     center`, which sizes children to content width). max-width: 95%
     matches the page's results-table and keeps the bar clear of the
     fixed 70px-wide .sidenav rail on the left — the parent's
     `safe center` then centers the 95% bar within the viewport. */
  width: 95%;
  max-width: 95%;
}

.search-bar.stacked.actions-end > .search-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--cm-space-3);
  align-items: end;
  min-width: 0;
}

.search-bar.stacked.actions-end > .search-fields .search-field:has(select) {
  grid-column: span 2;
}
/* `--wide` is reserved for fields with multiple inline inputs (e.g.
   the Complete Date filter on Browse Undeliverables: operator select
   + two date inputs + a separator). Span 3 so all of that fits at
   1fr column widths without the date inputs collapsing. */
.search-bar.stacked.actions-end > .search-fields .search-field--wide {
  grid-column: span 3;
}

.search-bar.stacked.actions-end > .search-actions {
  grid-column: 2;
  /* Span every row of the search-bar grid so the action column stays
     full-height on the right while .search-fields and an optional
     .search-filter-row stack on the left. */
  grid-row: 1 / -1;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin-top: 0;
  padding-left: var(--cm-space-3);
  border-left: 1px solid var(--cm-border);
  min-width: 110px;
}

/* Optional second row inside .actions-end — horizontal cluster of
   filter checkboxes (Browse Undeliverables) that don't fit the
   auto-fit-grid pattern of .search-fields. Spans column 1 only so
   .search-actions can keep the right column. */
.search-bar.stacked.actions-end > .search-filter-row {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-space-3) var(--cm-space-5);
  padding-top: var(--cm-space-3);
  border-top: 1px solid var(--cm-border);
}
.search-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--cm-space-2);
  cursor: pointer;
  user-select: none;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text);
}
.search-filter-checkbox input[type='checkbox'] {
  margin: 0;
  cursor: pointer;
}

/* Compact date-range filter used inside a .search-field--wide. The
   layout is: operator dropdown (fixed width) + date input (fills
   remaining space) for the on/before/after modes, or two date inputs
   with a separator for the between mode. JS toggles which inner div
   is visible based on the operator. */
.cm-date-filter {
  display: flex;
  gap: var(--cm-space-2);
  align-items: stretch;
  width: 100%;
}
.cm-date-filter__op {
  flex: 0 0 auto;
  width: 110px;
}
.cm-date-filter__single {
  flex: 1 1 auto;
  min-width: 140px;
}
.cm-date-filter__single > input[type='date'] {
  width: 100%;
  box-sizing: border-box;
}
.cm-date-filter__between {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--cm-space-2);
  align-items: center;
}
.cm-date-filter__between > input[type='date'] {
  flex: 1 1 0;
  /* The date input's intrinsic content width is the rendered MM/DD/YYYY
     label + calendar icon (~130px on Chromium). min-width: 0 lets flex
     squeeze below that and the input collapses to just the icon, so
     pin a floor that fits the rendered date text. */
  min-width: 130px;
  box-sizing: border-box;
}
.cm-date-filter__sep {
  color: var(--cm-text-muted);
  flex: 0 0 auto;
  padding: 0 var(--cm-space-1);
}

.search-bar.stacked.actions-end > .search-actions .button {
  width: 100%;
}

.results-table-container {
  max-height: 300px;
  overflow-y: auto;
  display: block;
  width: 100%;
}

.results-table-container::-webkit-scrollbar {
  width: 10px;
  position: absolute;
  right: 10px;
  top: 20px;
}

.results-table {
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  max-width: 100%;
  padding: 10px;
}

.results-table thead th {
  position: sticky;
  top: 0;
  padding: 8px;
  z-index: 1;
}

.results-table thead th * {
  color: inherit;
}

.results-table tr {
  border-bottom: 1px solid;
  border-color: var(--table-row-color);
  padding: 8px;
}

.results-table tr:nth-child(odd) {
  background-color: var(--table-row-alternate-color);
  padding: 8px;
}

.results-table tr:hover {
  background-color: var(--table-row-hover-color);
}

/* Selected-row indicator: a 3px accent on the first cell's left edge.
   Earlier versions also tinted every cell's background with cm-teal-100,
   but the left accent is enough on its own and keeping the bg fill
   competed with the row's normal hover/zebra colors (most visible on
   Browse Undeliverable Requests where the left-edge accent landed on
   already-tinted teal rows). The :hover override is dropped for the
   same reason — selected rows now hover identically to unselected. */
.results-table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--cm-interactive);
}

.report-header {
  background-color: var(--table-header-color);
  padding: 8px;
}

.report-header-cell {
  background-image: none;
  padding: 8px;
  font-size: 18px;
  color: var(--dark-text-color);
}

.report-row {
  background-color: var(--table-row-color);
  padding: 8px;
}

.report-row-hover {
  background-color: var(--table-row-hover-color);
}

.report-row-odd {
  background-color: var(--table-row-alternate-color);
}

.report-table-cell {
  padding: 8px;
  font-size: 18px;
  color: var(--text-color);
}

.results-table tr.locked td:first-child {
  box-shadow: 5px 0px orange inset;
}

.results-table tr.urgent td:first-child {
  box-shadow: 5px 0px #006666 inset;
}

.results-table tr:first-child th:first-child {
  padding-left: 20px;
  border-top-left-radius: 20px;
}

.results-table tr:first-child th:last-child {
  padding-right: 20px;
  border-top-right-radius: 20px;
}

.results-table td {
  padding: 5px;
  max-width: 100px;
  word-break: break-word;
}

/* Datetime cells (Last Viewed On, Date Requested, Date Completed) hold
   long human-readable strings like "Apr 30, 2026 · 3:45 PM" that don't
   wrap cleanly under word-break: break-word — the · separator and
   single-token timestamps push the column wider than the table can
   absorb. Truncate with ellipsis instead, and surface the full text
   via the `title` attribute on hover. Apply to both the th and td so
   the column width stays consistent. */
.results-table .cell-datetime {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

/* ===== Demote per-row Actions buttons to secondary weight (Automate-55hc) ===== */
.results-table .action-button {
  background: var(--cm-bg-muted, #f3f4f6);
  background-image: none;
  color: var(--cm-text-body, #374151);
  border: 1px solid var(--cm-border, #d1d5db);
  padding: 6px 12px;
  margin: 0px;
  min-width: 90px;
  border-radius: var(--cm-radius-md, 6px);
  font-size: var(--cm-text-sm, 0.875rem);
  font-weight: var(--cm-fw-medium, 500);
}

.action-button {
  background-color: inherit;
  color: var(--dark-text-color);
  padding: 10px;
  margin: 0px;
  border: none;
}

.pdf-action-button {
  color: var(--dark-text-color);
  padding: 10px;
  margin: 0px;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}

.pdf-action-button i {
  color: var(--dark-text-color);
}

/* The container <div> - needed to position the dropdown content */
.actions-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.action-content {
  display: none;
  position: absolute;
  background-color: var(--dark-background-color);
  min-width: 120px;
  box-shadow: var(--cm-shadow-md);
  z-index: 2;
  top: 100%;
  right: 0%;
}

/* Links inside the dropdown */
.action-content a {
  color: var(--dark-text-color);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

.action-content a i {
  color: var(--dark-text-color);
}

/* Change color of dropdown links on hover.
   The dropdown panel sits on --cm-bg-sidebar (dark in both modes), so use
   a semi-transparent white tint for hover instead of --container-hover-color
   (which resolves to LIGHT gray in light mode → illegible white-on-light). */
.action-content a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--cm-text-on-dark);
}

/* Show the dropdown menu on hover */
.actions-dropdown:hover .action-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.actions-dropdown:hover .action-button {
  background-color: var(--dark-background-color);
  color: var(--dark-text-color);
}

.actions-dropdown:hover .action-button i {
  color: var(--dark-text-color);
}

.header-sort-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.header-sort-div p {
  padding: 0px;
  margin: 0px;
}

.header-sort-icon-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
}

.button {
  background: var(--cm-interactive);
  border: 1px solid transparent;
  border-radius: var(--cm-radius-md);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  height: 36px;
  padding: 0 var(--cm-space-4);
  text-align: center;
  text-shadow: none;
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease;
  user-select: none;
}
/* Force button-icon color to inherit from the button's text color. Some
   FontAwesome bundles ship default color rules that win over inheritance,
   leaving the icon rendered in a near-black shade on a teal button — the
   icon ends up looking dark while the text reads correctly as white. */
.button > i,
.button > .fa,
.button > [class*='fa-'] {
  color: inherit;
}

.button:hover {
  background: var(--cm-interactive-hover);
}

.button:active {
  background: var(--cm-interactive-active);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--cm-focus-ring);
}

.button:disabled,
.button[disabled] {
  background: var(--cm-bg-muted);
  color: var(--cm-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.button.secondary {
  background: transparent;
  border-color: var(--cm-border-strong);
  color: var(--cm-text-body);
}

.button.secondary:hover {
  background: var(--cm-bg-muted);
}

.button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cm-text-body);
}

.button.ghost:hover {
  background: var(--cm-bg-muted);
}

/* Plain <button> elements without .button class — drop the dated glow.
   Specific non-.button selectors elsewhere in v3 may still override. */
button:hover {
  box-shadow: none;
}

.popup-container-draggable {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: calc(100vw - var(--sidebar-width));
  height: 100vh;
  z-index: 5;
  top: 0;
  pointer-events: none;
}

.popup-draggable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  border-radius: var(--cm-radius-xl);
  padding: 20px;
  box-shadow: var(--default-box-shadow);
  z-index: 10;
  pointer-events: all;
}

.draggable-header {
  width: -webkit-fill-available;
  cursor: move;
  text-align: center;
}

.popup-container {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: calc(100vw - var(--sidebar-width));
  height: 100vh;
  background-color: var(--popup-background-color);
  z-index: 100;
  top: 0;
}

.popup {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--background-color);
  box-shadow: var(--default-box-shadow);
  border-radius: var(--cm-radius-xl);
  padding: 20px;
  max-height: calc(98vh);
  max-width: calc(98vw);
  overflow-y: auto;
  overflow-x: hidden;
  /* Establishes a positioning context for `button.popup-close` (which
     uses position: absolute, top/right). Without this the X anchored to
     .popup-container (position: fixed) and rendered in the page's
     top-right corner instead of the modal card's top-right. */
  position: relative;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  padding-top: 0px;
}

.popup-header h1 {
  font-size: 18pt;
  margin: 0px;
  padding: 0px;
}

.popup-header h2 {
  font-size: 14pt;
  margin: 0px;
  padding: 0px;
}

.popup-close {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0px;
  margin: 0px;
  padding-right: 20px;
}

.popup-close span {
  position: absolute;
  color: #aaa;
  text-align: right;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding-right: 10px;
}

/* When .popup-close is rendered as a <button> (request-details modal in
   Automate-wp0m), give it a real, hoverable button-style hit target —
   the legacy <div>.popup-close was a full-width row with cursor: auto
   and only a tiny X span as the actual click target. */
button.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--cm-text-muted, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition:
    background-color 120ms ease,
    color 120ms ease;
  z-index: 2;
}

button.popup-close:hover,
button.popup-close:focus-visible {
  background: var(--cm-bg-muted, #f1f5f9);
  color: var(--cm-text-heading, #0f172a);
  outline: none;
}

.popup-body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: top;
}

.tooltip {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  box-shadow: var(--default-box-shadow) !important;

  /* Position the tooltip ABOVE the trigger, horizontally centered. The
     previous default (top: 0; bottom/left/right: auto with no explicit
     values) let the browser place it just below the trigger, where any
     ancestor overflow:hidden — like the truncation rule on table cells —
     clipped it. Anchor explicitly so the geometry is predictable. */
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* The truncation rule on .results-table td (Automate-m7kp) sets
   overflow:hidden on every cell, which clips the .tooltiptext popover
   that hangs off the .tooltip trigger inside the cell. Mirror the
   actions-cell escape pattern (Automate-cvo3) so any cell containing a
   .tooltip lets the popover render outside the cell box. */
table.results-table tbody td:has(.tooltip),
table#searchTable tbody td:has(.tooltip),
table.searchTable tbody td:has(.tooltip) {
  overflow: visible;
}

.navigation-div {
  display: flex;
  background-color: var(--dark-background-color);
  padding: 0px 100px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  height: 50px;
  position: fixed;
  z-index: 1;
  bottom: 0px;
  left: 70px;
  right: 0px;
  justify-content: center;
  align-items: center;
  display: none;
  width: fit-content;
  margin-inline: auto;
}

.navigation-div p {
  color: white;
  width: 100px;
  text-align: center;
}

.navigation-div i {
  color: var(--dark-text-color);
}

.navigation-div select {
  height: 100%;
  cursor: pointer;
  width: auto;
}

.display-results-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}

.display-results-div p {
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
}

.exportDiv {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.exportDiv .exportDivText {
  visibility: hidden;
  width: 400px;
  background-color: var(--dark-background-color);
  color: var(--dark-text-color);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  bottom: 125%;
  left: 50%;
  margin-left: -200px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.exportDiv .exportDivText::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.exportDiv:hover .exportDivText {
  visibility: visible;
  opacity: 1;
}

.input-dropdown {
  margin: 0px;
  padding: 0px;
  position: relative;
}

.input-dropdown-content {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0px);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--dark-background-color);
  color: var(--dark-text-color);
  border-radius: var(--cm-radius-lg);
  margin: 0px;
  padding: 0px;
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.dropdown-element {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 350px;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  opacity: 0.8;
  color: var(--dark-text-color);
}

.dropdown-element:hover {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  background-color: #595959;
  border-radius: 10px;
}

.div-area {
  display: flex;
  flex-direction: row;
  height: 100px;
  max-width: 450px;
  padding: 10px;
  background: var(--body-color);
  border-radius: var(--cm-radius-lg);
  overflow-y: scroll;
  flex-wrap: wrap;
}

.div-area div {
  background-image: linear-gradient(92.88deg, #006666 0%, #004d4d 80%);
  border-style: none;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  height: 24px;
  font-weight: normal;
  padding: 6px;
  text-align: center;
  text-shadow: #006666 0 3px 8px;
  transition: all 0.5s;
  user-select: none;
  margin: 2px;
  border-radius: 10px;
}

.div-area div:hover {
  box-shadow: #004d4d 0 1px 30px;
  transition-duration: 0.1s;
}

/* Define custom scrollbar  */
::-webkit-scrollbar {
  width: var(--scrollbar-thickness);
  height: var(--scrollbar-thickness);
}

/* Track */
::-webkit-scrollbar-track {
  background: #595959;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #004d4d;
  border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #006666;
}

.additional-actions-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 80px;
  right: -320px;
  width: 300px;
  background-color: var(--dark-background-color);
  color: var(--dark-text-color);
  margin-top: 10px;
  z-index: 1;
  transition: right 0.3s;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.additional-actions-sidebar:hover {
  right: 0;
  z-index: 10;
}

.additional-action-header {
  display: flex;
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.additional-action-header h3 {
  margin: 0px;
  padding: 0px;
  color: white;
}

.additional-actions-icon-div {
  position: fixed;
  right: 0;
  padding: 20px;
  width: 30px;
}

.additional-action {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0px;
  padding-left: 10px;
  margin: 0px;
  border: none;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  cursor: pointer;
}

.additional-action p {
  margin: 10px;
}

.additional-action:hover {
  background-color: var(--dark-background-color);
}

.right-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  /* Hidden state: parked just off-screen with only the icon-div tab
     visible. The icon-div is positioned absolute on the right edge
     of the sidebar so users still see + can click it while the body
     of the sidebar is hidden. box-sizing: border-box is critical:
     without it, padding-left would extend the box past the declared
     width, and `right: -320px` would leave the padding sticking out
     past the viewport's right edge. */
  right: -320px;
  width: 320px;
  box-sizing: border-box;
  /* Use --cm-bg-chrome (pinned #131C2E) instead of --cm-bg-sidebar
     so the right-sidebar reads as a slightly elevated surface above
     the navbar's darker shade rather than blending into it. */
  background-color: var(--cm-bg-chrome);
  color: var(--cm-text-on-dark);
  margin-top: 10px;
  padding-left: var(--cm-space-3);
  /* No top-left rounding — the icon tab sits at the panel's top-left
     corner with its own rounded corners, so the panel itself wants a
     straight top-left edge to butt up against the tab's straight
     right edge. Bottom-left stays rounded as a soft visual finish. */
  border-bottom-left-radius: var(--cm-radius-lg);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
  z-index: 1;
  transition: right 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
}

.right-sidebar-header {
  display: flex;
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.right-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-1);
  padding: var(--cm-space-4) var(--cm-space-4) var(--cm-space-5);
}

.right-sidebar-content * {
  color: var(--cm-text-on-dark);
}

.right-sidebar:hover,
.right-sidebar:focus-within {
  right: 0;
  z-index: 10;
}

.right-sidebar p {
  margin: 0;
  padding: 0;
}

/* Section heading at the top of an action sidebar's expanded panel.
   Uppercase small caps so it reads as a section divider rather than
   a competing page heading. Scoped to `.right-sidebar-title` so the
   hotkeys sidebar (which uses many <h3> sub-headings) keeps its
   default heading look. */
.right-sidebar-title {
  margin: 0 0 var(--cm-space-2);
  padding: 0;
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cm-text-on-dark);
  opacity: 0.65;
}
/* Default headings inside the sidebar — tighten the default browser
   margins but keep them readable as headings (used by the hotkeys
   sidebar and any future panel that lists multiple sub-sections). */
.right-sidebar-content h2 {
  margin: 0 0 var(--cm-space-2);
  font-size: var(--cm-text-lg);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-on-dark);
}
.right-sidebar-content h3 {
  margin: var(--cm-space-3) 0 var(--cm-space-1);
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-on-dark);
  opacity: 0.85;
}
.right-sidebar-content h3:first-child {
  margin-top: 0;
}

/* Collapsed state: an action tab sticking out of the right edge of the
   panel. Aligned to the panel's top edge so the tab + panel read as
   one continuous shape — the tab's right edge butts against the
   panel's left edge with no offset and no corner curve between them.
   Tab carries the rounded corners on the left so the joined shape has
   a tab on its top-left and a flat right side. */
.right-sidebar-icon-div {
  position: absolute;
  right: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--cm-bg-chrome);
  border-top-left-radius: var(--cm-radius-lg);
  border-bottom-left-radius: var(--cm-radius-lg);
  cursor: pointer;
  /* Drop-shadow only on the LEFT side of the tab so it doesn't bleed
     across the seam where the tab meets the panel. */
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}
.right-sidebar-icon-div > i {
  font-size: 18px;
  color: var(--cm-text-on-dark);
}

.right-sidebar i {
  color: var(--cm-text-on-dark);
}

/* Action rows — unified styling for QA's .request-action and Upload
   Records' .right-sidebar-action. The previous .request-action used
   --table-row-hover-color (a light-mode token) for hover, which
   washed out almost invisibly on the dark sidebar. New hover/focus
   uses a teal-tinted overlay matching the design system's interactive
   color, with a left accent that animates in from 0 → full width to
   give the row a tactile feel. */
.right-sidebar-action,
.request-action {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cm-space-3);
  padding: var(--cm-space-2) var(--cm-space-3);
  border-radius: var(--cm-radius-md);
  cursor: pointer;
  user-select: none;
  color: var(--cm-text-on-dark);
  transition:
    background 140ms ease,
    transform 140ms ease;
}
.right-sidebar-action:hover,
.right-sidebar-action:focus-visible,
.request-action:hover,
.request-action:focus-visible {
  background: color-mix(in srgb, var(--cm-teal-500) 20%, transparent);
  outline: none;
  transform: translateX(2px);
}
.right-sidebar-action::before,
.request-action::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--cm-teal-500);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.right-sidebar-action:hover::before,
.right-sidebar-action:focus-visible::before,
.request-action:hover::before,
.request-action:focus-visible::before {
  opacity: 1;
}
.right-sidebar-action > i,
.request-action > i {
  width: 18px;
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
  color: var(--cm-text-on-dark);
  opacity: 0.85;
}
.right-sidebar-action > p,
.request-action > p {
  margin: 0;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
}

.badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: 10px;
  cursor: pointer;
  /* When a .badge is rendered as an <a> (KPI tiles on /home), strip the
     default link styling — the hover state is the box-shadow lift below. */
  text-decoration: none;
}

.badge:focus-visible {
  outline: 2px solid var(--cm-interactive);
  outline-offset: 2px;
}

.badge-accent-1 {
  box-shadow: 0px 0px 2px 2px var(--accent-color-1);
}

.badge-accent-1:hover {
  box-shadow: 0px 0px 10px 5px var(--accent-color-1);
  transition-duration: 0.2s;
}

.badge-accent-2 {
  box-shadow: 0px 0px 2px 2px var(--accent-color-2);
}

.badge-accent-2:hover {
  box-shadow: 0px 0px 10px 5px var(--accent-color-2);
  transition-duration: 0.2s;
}

.badge-accent-3 {
  box-shadow: 0px 0px 2px 2px var(--accent-color-3);
}

.badge-accent-3:hover {
  box-shadow: 0px 0px 10px 5px var(--accent-color-3);
  transition-duration: 0.2s;
}

.badge-accent-4 {
  box-shadow: 0px 0px 2px 2px var(--accent-color-4);
}

.badge-accent-4:hover {
  box-shadow: 0px 0px 10px 5px var(--accent-color-4);
  transition-duration: 0.2s;
}

.badge-accent-5 {
  box-shadow: 0px 0px 2px 2px var(--accent-color-5);
}

.badge-accent-5:hover {
  box-shadow: 0px 0px 10px 5px var(--accent-color-5);
  transition-duration: 0.2s;
}

/* Grid Container */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(25px, auto);
  /* adjust row height as needed */
  gap: 0.5rem;
  /* adjust spacing between grid items */
}

/* Column Span */
.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.col-span-10 {
  grid-column: span 10 / span 10;
}

.col-span-11 {
  grid-column: span 11 / span 11;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

/* Column Start */
.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

/* Row Span */
.row-span-1 {
  grid-row: span 1 / span 1;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-span-3 {
  grid-row: span 3 / span 3;
}

.row-span-4 {
  grid-row: span 4 / span 4;
}

.row-span-5 {
  grid-row: span 5 / span 5;
}

.row-span-6 {
  grid-row: span 6 / span 6;
}

.row-span-7 {
  grid-row: span 7 / span 7;
}

.row-span-8 {
  grid-row: span 8 / span 8;
}

.row-span-9 {
  grid-row: span 9 / span 9;
}

.row-span-10 {
  grid-row: span 10 / span 10;
}

.row-span-11 {
  grid-row: span 11 / span 11;
}

.row-span-12 {
  grid-row: span 12 / span 12;
}

/* Row Start */
.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-start-9 {
  grid-row-start: 9;
}

.row-start-10 {
  grid-row-start: 10;
}

.row-start-11 {
  grid-row-start: 11;
}

.row-start-12 {
  grid-row-start: 12;
}

.tos-list {
  list-style: none;
  text-align: right;
}

.footer-ul {
  color: #757575;
  direction: ltr;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 24px;
  margin-top: 20px;
  text-align: left;
}

.inline-list-item {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.editable-input {
  padding: 0px 0px 0px 10px;
  margin: 0px;
  appearance: none;
  border: 0;
  font-size: 12pt;
  font-weight: 400;
  border-radius: 5px;
  color: var(--text-color);
  transition: all 0.15s ease;
  text-align: left;
}

.editable-input.locked {
  background-color: var(--background-color);
  box-shadow: none;
  cursor: default;
  margin: 0px;
  padding: 0px 0px 0px 0px;
}

.editable-input.unlocked {
  background-color: var(--body-color);
  cursor: text;
  box-shadow: var(--default-box-shadow);
  margin: 0px;
  padding: 0px 0px 0px 10px;
}

.readonly {
  background-color: var(--background-color) !important;
  cursor: default;
}

.editable {
  background-color: var(--body-color) !important;
  cursor: text;
}

.flex-table-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.flex-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.flex-table-header {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  background-color: var(--cm-bg-muted);
  z-index: 1;
  position: sticky;
  top: 0;
  color: var(--cm-text-body);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.flex-table-header * {
  color: inherit;
}

.flex-table-body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: 400px;
}

.flex-table-row {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  align-items: center;
}

/* Border-bottom alone separates rows in flex-tables that have a header
   (i.e. data tables / labeled sections). Zebra striping was added in
   Automate-dmxd alongside the dark-mode fix for Check Duplicates, but
   it doubled up on row separation when the border was sufficient and
   read as visual noise on form-style flex-tables (Invoice module's
   request-info / delivery / patient sections). Border-only is
   cleaner and consistent across both data tables and labeled
   form sections. */
.flex-table > .flex-table-body > .flex-table-row,
.flex-table > .flex-table-header ~ .flex-table-row {
  background-color: var(--cm-bg-surface, #ffffff);
  border-bottom: 1px solid var(--cm-border, #e2e8f0);
  color: var(--cm-text-body);
}

/* Hover only meaningful when the row is interactive (cursor: pointer set
   by the JS that wires the click handler — Manual Upload's Check
   Duplicates table). Use the cm-* tokens so hover stays correct when
   the user toggles dark mode (Automate-dmxd: was previously hardcoded
   to "#9bc3eb" on hover and "white" on leave via inline JS, which left
   dark-mode rows reading as bright white blocks). */
.flex-table-row[style*='cursor: pointer']:hover,
.flex-table-row[style*='cursor:pointer']:hover {
  background-color: var(--table-row-hover-color, var(--cm-bg-elevated));
  color: var(--cm-text-heading);
}

/* form-stack: label-above-input form layout for flex-tables that hold
   form fields rather than tabular data. Eliminates the cross-input-type
   alignment drift you get with side-by-side label/input cells when
   text inputs and date inputs render at different intrinsic heights
   (the label baseline ends up locked to the input's center, so a row
   with a date input has the label visibly off-center vs neighboring
   text-input rows). Used on the QA module's right panel. */
.flex-table.form-stack > .flex-table-row {
  flex-direction: column;
  align-items: stretch;
  /* Tight gap between label and input within a row, small margin
     between rows so the form reads as a continuous field stack. */
  gap: 2px;
  margin-bottom: var(--cm-space-1);
}
.flex-table.form-stack > .flex-table-row:last-child {
  margin-bottom: 0;
}
.flex-table.form-stack > .flex-table-row > .flex-table-cell {
  flex: 1 1 auto;
  text-align: left;
  padding: 0;
  width: 100%;
}
.flex-table.form-stack > .flex-table-row > .flex-table-cell:first-child label {
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
}
.flex-table.form-stack > .flex-table-row > .flex-table-cell input,
.flex-table.form-stack > .flex-table-row > .flex-table-cell select,
.flex-table.form-stack > .flex-table-row > .flex-table-cell textarea {
  width: 100%;
  box-sizing: border-box;
  /* Legacy `input { margin: 5px }` rule pushed inputs 5px past their
     cell's left/right edges, so the input's left edge sat 5px inside
     the cell while the label hugged the cell's left at 0px — labels
     and inputs ended up on different left axes. Zero out the margin
     so both stack against the same left edge. */
  margin: 0;
}

.flex-table-cell {
  flex: 1;
  padding: 8px;
  text-align: center;
  box-sizing: border-box;
}

/* Possible-duplicates popup table — customer_reference values can run long
   (attorney case captions etc.) and used to push other columns off-screen
   or get visually clipped without an indication anything was missing.
   Scoped truncation: ellipsis gives a visible "more text here" cue, the
   `title` attribute set in displayDuplicateTable surfaces the full value
   on hover. min-width:0 is required because flex children default to
   min-content width, which prevents text-overflow:ellipsis from kicking in. */
#duplicateDivTableContainer .flex-table-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.flex-table-input-cell {
  flex: 1;
  padding: 8px;
  text-align: left;
  box-sizing: border-box;
}

.upload-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: var(--background-color);
  box-shadow: 0px 0px;
}

.drop-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding: 15px;
  border-radius: var(--cm-radius-lg);
  border: 2px dashed #555;
  color: #444;
  cursor: pointer;
  transition:
    background 0.2s ease-in-out,
    border 0.2s ease-in-out;
  background-color: var(--background-color);
  margin: 10px;
}

.upload-form-container .file-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: var(--background-color);
  border-radius: var(--cm-radius-lg);
  border: 1px solid #555;
  height: 40px;
}

.customerTypeBox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: var(--background-color);
  border-radius: var(--cm-radius-lg);
  padding: 10px;
  width: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: var(--default-box-shadow);
  min-height: 50px;
}

.customerTypeElement {
  background-color: #006666;
  padding: 10px;
  margin: 2px;
  color: var(--dark-text-color);
  border-radius: 10px;
  height: 10px;
  cursor: pointer;
  font-size: 8pt;
}

/* Styling for pdf.js viewer */

.pdf-canvas {
  border-radius: 20px;
  /* max-height: 90vh; */
}

.pdf-canvas-preview {
  align-self: center;
  justify-self: center;
  width: 100px;
  border-radius: 10px;
}

.pdf-marker-group {
  align-self: center;
  border-radius: 20px;
  box-shadow: 0px 0px 0px 5px #cccccc;
  margin-left: 20px;
  margin-right: 20px;
}

.pdf-preview-div {
  align-self: center;
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.pdf-preview-div .pdf-canvas {
  margin-left: 20px;
  height: 14vh;
  max-height: 150px;
}

.img-magnifier-container {
  position: relative;
}

.img-magnifier-glass {
  /* position: fixed so left/top in JS are interpreted as viewport-
     relative — matches the existing math which uses
     canvasBoundingRect.x + mouseX (both viewport-relative). With
     position: absolute the glass was offset by its nearest positioned
     ancestor, which differed per host page (QA, Upload Records,
     Invoice, Manual Upload), making the glass land in a different
     wrong place in each module. */
  position: fixed;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 400px;
  height: 400px;
  z-index: 1000;
  pointer-events: none;
}

.pdf-thumbnail-div {
  flex: 0 0 135px !important;
}

/** PDF Thumbnail selected styling to accomodate new rendering method **/
.pdf-thumbnail-div.selected canvas {
  box-shadow: 0px 0px 0px 5px #006666 !important;
}

.pdf-thumbnail-div.ok canvas {
  box-shadow: 0px 0px 0px 5px #009900;
}

.pdf-thumbnail-div.new canvas {
  box-shadow: 0px 0px 0px 5px #64d6d7;
}

.pdf-thumbnail-div.rejected canvas {
  box-shadow: 0px 0px 0px 5px #e7b90c;
}

.pdf-thumbnail-div.misfiled canvas {
  box-shadow: 0px 0px 0px 5px #7d0d5c;
}

.pdf-thumbnail-div.deleted canvas {
  box-shadow: 0px 0px 0px 5px #cd3915;
}

.pdf-thumbnail.selected {
  box-shadow: 0px 0px 0px 5px #006666;
}

.pdf-fill-sign-div {
  display: none;
  flex-direction: column;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0) !important;
  top: 0px;
  left: 0px;
}

.pdf-fill-sign-header {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding: 5px;
  background-color: var(--dark-background-color);
  cursor: move;
}

.pdf-fill-sign-action {
  cursor: pointer;
  color: white;
}

.pdf-fill-sign-text-input-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0) !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0px 0px 5px 2px #303030 inset;
  padding: 10px;
}

.pdf-fill-sign-input {
  border: 0px;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 20px;
  width: 100%;
  min-width: 300px;
  height: 20px;
  padding-left: 5px;
  margin: 0px;
  box-shadow: none;
}

/* This is a direct copy of pdf.js's web viewer css hiddenCanvasElement class to prevent weird page stylings*/
.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}

.custom-context-menu {
  display: none;
  position: absolute;
  background-color: var(--dark-background-color);
  border-radius: var(--cm-radius-lg);
  padding-top: 10px;
  padding-bottom: 10px;
}

.custom-context-menu-item {
  color: var(--dark-text-color);
  height: 25px;
  padding: 5px;
  cursor: pointer;
}

.custom-context-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ===== Input / select / search polish (light reskin) ===== */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='date'],
input[type='tel'],
input[type='url'],
select,
textarea,
.search {
  background: var(--cm-bg-surface);
  border: 1px solid var(--cm-border-strong);
  border-radius: var(--cm-radius-sm);
  box-sizing: border-box;
  color: var(--cm-text-body);
  font-size: var(--cm-text-sm);
  height: 36px;
  padding: 0 var(--cm-space-3);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

textarea {
  height: auto;
  padding: var(--cm-space-2) var(--cm-space-3);
  line-height: var(--cm-lh-normal);
}

input::placeholder,
textarea::placeholder,
.search::placeholder {
  color: var(--cm-text-muted);
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
.search:focus,
.search:focus-visible {
  border-color: var(--cm-interactive);
  box-shadow: var(--cm-focus-ring);
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--cm-bg-muted);
  color: var(--cm-text-muted);
  cursor: not-allowed;
}

/* ===== Table polish (light reskin, compact density) ===== */
table.results-table,
table#searchTable,
table.searchTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

table.results-table thead th,
table#searchTable thead th,
table.searchTable thead th {
  background: var(--cm-bg-muted) !important;
  color: var(--cm-text-body) !important;
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--cm-space-3);
  /* Inherit `.results-table { text-align: center }` so headers stay
     aligned with the body cells (which inherit the same center). The
     previous `text-align: left` override left headers and data on
     different axes — most visible in narrow tables like the Delivery
     Log inside Request Details. */
  text-align: center;
  border-bottom: 1px solid var(--cm-border);
  white-space: nowrap;
}

table.results-table tbody td,
table#searchTable tbody td,
table.searchTable tbody td {
  background: var(--cm-bg-surface);
  color: var(--cm-text-body);
  font-size: var(--cm-text-sm);
  padding: var(--cm-space-2) var(--cm-space-3);
  border-bottom: 1px solid var(--cm-border);
  font-feature-settings: 'tnum';
}

table.results-table tbody tr:hover td,
table#searchTable tbody tr:hover td,
table.searchTable tbody tr:hover td {
  background: var(--cm-bg-muted);
}

/* Kill alternating-row striping; aliases already point at the same color,
   but a lingering selector on tr.even/tr.odd in v3 would override.
   Use :not(:hover) so the hover rule above wins on even rows too —
   without it, this rule's matching specificity would re-apply
   --cm-bg-surface and cancel the hover highlight on every other row. */
table.results-table tbody tr:nth-child(even):not(:hover) td,
table#searchTable tbody tr:nth-child(even):not(:hover) td,
table.searchTable tbody tr:nth-child(even):not(:hover) td,
table.results-table tbody tr.even:not(:hover) td,
table#searchTable tbody tr.even:not(:hover) td,
table.searchTable tbody tr.even:not(:hover) td {
  background: var(--cm-bg-surface);
}

/* Status pills — applied via JS or inline class on the status column. */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--cm-space-2);
  border-radius: 999px;
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  line-height: var(--cm-lh-tight);
  white-space: nowrap;
}

.status-pill[data-status='info'] {
  background: var(--cm-blue-100);
  color: var(--cm-navy);
}
.status-pill[data-status='warning'] {
  background: rgba(245, 158, 11, 0.12);
  color: var(--cm-warning-500);
}
.status-pill[data-status='danger'] {
  background: rgba(239, 68, 68, 0.12);
  color: var(--cm-danger-500);
}
.status-pill[data-status='teal'] {
  background: var(--cm-teal-100);
  color: var(--cm-teal-700);
}
.status-pill[data-status='neutral'] {
  background: var(--cm-bg-muted);
  color: var(--cm-text-body);
}

/* Status-pill colors in dark mode — the light-mode tints map to dark
   navy / dark teal text on a barely-visible tint, which is illegible
   against the dark surface. Use a lighter tint background and the
   light-mode accent token (which dark mode redefines as a brighter
   shade) so the text stays readable. */
:root.dark .status-pill[data-status='info'] {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
:root.dark .status-pill[data-status='warning'] {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
}
:root.dark .status-pill[data-status='danger'] {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}
:root.dark .status-pill[data-status='teal'] {
  background: rgba(45, 212, 191, 0.2);
  color: #5eead4;
}
:root.dark .status-pill[data-status='active'] {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
}
:root.dark .status-pill[data-status='inactive'] {
  background: var(--cm-bg-muted);
  color: var(--cm-text-body);
}
:root.dark .status-pill[data-status='neutral'] {
  background: var(--cm-bg-muted);
  color: var(--cm-text-body);
}

/* ===== Sidebar polish (light reskin) ===== */
.sidenav {
  background: var(--cm-bg-sidebar);
}

.sidenav a {
  color: var(--cm-text-on-dark);
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.sidenav .nav-item {
  margin: 2px var(--cm-space-1);
  border-radius: var(--cm-radius-md);
  /* Trim horizontal padding (was 10px from the global .nav-item rule) so
     the inner icon-div lines up with the rail's vertical center. The
     2px margin on each side from above absorbs the missing padding. */
  padding: 10px 8px;
}

.sidenav .nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidenav .nav-item.active,
.sidenav .nav-item[aria-current='page'],
.sidenav .nav-link.active {
  background: rgba(20, 184, 166, 0.12);
  color: var(--cm-interactive);
}

.sidenav .nav-link.active i,
.sidenav .nav-item.active i {
  color: var(--cm-interactive);
}

.sidenav .dark-mode-toggle {
  /* Mirror the COMBINED padding of .nav-item (8px) + .nav-link (8px) so
     the icon-div lands at the rail's centerX. The toggle is a single
     element (no nested nav-link wrapper), so its padding has to absorb
     both layers of indent on its own. */
  margin: 2px var(--cm-space-1);
  padding: 10px 16px;
  border-radius: var(--cm-radius-md);
  box-sizing: border-box;
  cursor: pointer;
  color: var(--cm-text-on-dark);
  transition: background-color 120ms ease;
}

.sidenav .dark-mode-toggle:hover,
.sidenav .dark-mode-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

/* Tooltip-CSS is intentionally absent: the existing `.sidenav:hover { width: … }`
   rule already expands the rail on hover and reveals .nav-text. */

/* ===== Pagination footer polish =====
   The visible bar lives on .navigation-div (rendered inside #navigationDiv
   by pagination.js with position:fixed); the outer #navigationDiv is just
   the mounting <div> the page declares. Targeting the mounting div with a
   border put a 2px-tall stripe at the top of every browse page (1px top +
   1px bottom collapsed-flex border), which was just enough to push the
   layout past viewport height and trigger an unnecessary scrollbar. */
.pagination-footer {
  background: var(--cm-bg-muted);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  box-shadow: none;
  color: var(--cm-text-body);
}

#navigationDiv * {
  color: var(--cm-text-body);
}

#navigationDiv select,
#navigationDiv input {
  height: 28px;
  font-size: var(--cm-text-xs);
}

/* ===== Dashboard KPI tiles (.badge variants, see public/api/home.html) ===== */
.badge.badge-accent-1,
.badge.badge-accent-2,
.badge.badge-accent-3,
.badge.badge-accent-4,
.badge.badge-accent-5 {
  background: var(--cm-bg-surface);
  color: var(--cm-text-body);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-xs);
  padding: var(--cm-space-3) var(--cm-space-4);
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: var(--cm-space-3);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.badge.badge-accent-1:hover,
.badge.badge-accent-2:hover,
.badge.badge-accent-3:hover,
.badge.badge-accent-4:hover,
.badge.badge-accent-5:hover {
  background: var(--cm-bg-muted);
  /* Slight lift + shadow on hover so the tile reads as a tappable card. */
  transform: translateY(-1px);
  box-shadow: var(--cm-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
}

.badge.badge-accent-1.active,
.badge.badge-accent-2.active,
.badge.badge-accent-3.active,
.badge.badge-accent-4.active,
.badge.badge-accent-5.active {
  border-left: 3px solid var(--cm-interactive);
  background: var(--cm-bg-muted);
}

.badge.badge-accent-1 i,
.badge.badge-accent-2 i,
.badge.badge-accent-3 i,
.badge.badge-accent-4 i,
.badge.badge-accent-5 i {
  font-size: var(--cm-text-xl);
}

/* Per-tile icon color accent (surfaces stay neutral so all five read as a set) */
.badge.badge-accent-1 i {
  color: var(--cm-interactive);
}
.badge.badge-accent-2 i {
  color: var(--cm-teal-500);
}
.badge.badge-accent-3 i {
  color: var(--cm-blue-500);
}
.badge.badge-accent-4 i {
  color: var(--cm-warning-500);
}
.badge.badge-accent-5 i {
  color: var(--cm-navy);
}

.badge.badge-accent-1 p,
.badge.badge-accent-2 p,
.badge.badge-accent-3 p,
.badge.badge-accent-4 p,
.badge.badge-accent-5 p {
  margin: 0;
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  font-feature-settings: 'tnum';
}

/* ===== Review Batches sidebar panel ====================================
   Three stacked sections (Past Due / Due Soon / New Batches), each with
   a header + a scrollable body. The legacy inline-styled markup put
   rows flush against their section header with an outward box-shadow
   on each row, so the first row's halo bled into the header's
   background. New layout uses a sticky header (so it stays visible
   while the body scrolls), softer separators, and proper breathing
   room between header and rows.
*/
.review-batches-content {
  padding: var(--cm-space-4) var(--cm-space-3) var(--cm-space-5);
  overflow-y: auto;
  max-height: calc(100vh - 100px);
  gap: var(--cm-space-4);
}
.review-batches-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.review-batches-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cm-space-2) var(--cm-space-3);
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-top-left-radius: var(--cm-radius-md);
  border-top-right-radius: var(--cm-radius-md);
  z-index: 1;
}
.review-batches-header h3 {
  margin: 0;
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cm-text-on-dark);
  opacity: 0.85;
}
.review-batches-count {
  font-size: var(--cm-text-xs);
  color: var(--cm-text-on-dark);
  opacity: 0.65;
}
.review-batches-count:empty {
  display: none;
}
.review-batches-body {
  display: flex;
  flex-direction: column;
  /* Scroll separately within each section so the panel stays digestible
     when there are dozens of past-due batches. The padding-top gives
     the first row breathing room from the header instead of letting
     its hover-tint rectangle butt up against the header band. */
  max-height: 22vh;
  overflow-y: auto;
  padding: var(--cm-space-1) 0;
  background: rgba(255, 255, 255, 0.015);
  border-bottom-left-radius: var(--cm-radius-md);
  border-bottom-right-radius: var(--cm-radius-md);
}
.review-batches-body:empty {
  display: none;
}
.review-batch-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--cm-space-2) var(--cm-space-3);
  cursor: pointer;
  color: var(--cm-text-on-dark);
  font-size: var(--cm-text-xs);
  transition: background 120ms ease;
}
.review-batch-row:hover,
.review-batch-row:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}
.review-batch-row + .review-batch-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.review-batch-row__line {
  font-weight: var(--cm-fw-medium);
}
.review-batch-row__meta {
  opacity: 0.65;
  font-size: 11px;
}

/* ===== Right-side slide-out panels (#changelog, #reviewBatches) ===== */
.right-sidebar {
  background: var(--cm-bg-chrome);
  color: var(--cm-text-on-dark);
}

.right-sidebar * {
  color: var(--cm-text-on-dark);
}

/* Hover-tint on the icon tab (size + radius live in the primary
   .right-sidebar-icon-div rule earlier in the file). */
.right-sidebar-icon-div:hover {
  background: rgba(255, 255, 255, 0.06);
}

.right-sidebar .fa-circle-exclamation {
  color: var(--cm-warning-500) !important;
}

/* ===== Universal focus ring ===== */
a:focus-visible,
[role='button']:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--cm-focus-ring);
  border-radius: var(--cm-radius-sm);
}

body {
  background: var(--cm-bg-body);
  color: var(--cm-text-body);
  /* Safety net: tooltip pseudo-elements positioned with absolute
     x-offsets can momentarily overflow the viewport before the JS
     positioner runs (e.g. on first render before the listener
     attaches). overflow-x: clip stops them from widening the page
     and triggering a horizontal scrollbar. clip is preferred over
     hidden because it doesn't establish a containing block, so
     position: fixed children (toasts, modals) keep working. */
  overflow-x: clip;
}

/* Reserve a fixed-width gutter for the navbar so page content can never
   slide behind the sidenav when the viewport is narrow. The sidenav
   itself is position: fixed (out of flow); without a body padding-left,
   .page-container { min-width: 100% } expands across the entire
   viewport including the 70px navbar strip — content scrolls *under*
   the rail. Padding the body's content area pushes everything to the
   right of the navbar.

   Use :has() so the gutter only applies on pages that actually mount a
   navbar. The login page (/api/index.html) doesn't include navbar.html
   and shouldn't be offset. The pre-include placeholder div carries the
   w3-include-html attribute; once common.js's includeHTML swap runs
   the sidenav class lands in the DOM. Match either state so the
   padding doesn't pop in/out during the include. */
body:has(.sidenav),
body:has([w3-include-html*='navbar']) {
  padding-left: var(--sidebar-width);
  box-sizing: border-box;
}

/* Ensure removing the universal { color: var(--text-color); } selector
   from Task 6 didn't drop heading color elsewhere */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--cm-text-heading);
}

/* ===== Pagination strip — light pill (Automate-274y) ===== */
.navigation-div {
  background-color: var(--cm-bg-surface);
  border: 1px solid var(--cm-border);
  border-bottom: none;
  border-top-left-radius: var(--cm-radius-xl);
  border-top-right-radius: var(--cm-radius-xl);
  box-shadow: var(--cm-shadow-md);
  padding: 0 var(--cm-space-8);
}

.navigation-div p {
  color: var(--cm-text-body);
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
}

.navigation-div select {
  background: var(--cm-bg-surface);
  color: var(--cm-text-body);
  border: 1px solid var(--cm-border-strong);
  border-radius: var(--cm-radius-sm);
  height: 28px;
  padding: 0 var(--cm-space-2);
  font-size: var(--cm-text-xs);
}

.navigation-div .button {
  height: 30px;
  font-size: var(--cm-text-xs);
}

/* Caret arrows (prev / next) — visible by default in interactive teal,
   hidden via .nav-arrow-disabled added by pagination.js. */
.navigation-div .fa-caret-left,
.navigation-div .fa-caret-right {
  color: var(--cm-interactive);
  cursor: pointer;
  transition:
    color 120ms ease,
    opacity 120ms ease;
}

.navigation-div .fa-caret-left:hover,
.navigation-div .fa-caret-right:hover {
  color: var(--cm-interactive-hover);
}

.navigation-div .fa-caret-left.nav-arrow-disabled,
.navigation-div .fa-caret-right.nav-arrow-disabled {
  /* Hide the prev/next arrow when there's nowhere to navigate. Use
     visibility instead of display:none so the surrounding
     50%/center/50% layout stays balanced. */
  visibility: hidden;
  pointer-events: none;
}

/* ===== .divh1 alignment with content rows below (Automate-5ik7) ===== */
.divh1 {
  width: 100%;
  max-width: 95%;
  margin: var(--cm-space-6) auto var(--cm-space-4);
  padding: 0 var(--cm-space-2);
  box-sizing: border-box;
}

/* /home heading row: three-column grid so the page heading stays
   left-aligned, the optional admin filter sits centered between the
   heading and the right edge, and the right column reserves matching
   space so the filter is visually centered on the row. */
.dashboard-heading-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--cm-space-4);
}
.dashboard-heading-grid > .filter-group {
  justify-self: center;
}

/* /home layout — heading anchored to the top, dashboard card stays at
   its natural (content-sized) height, and the leftover viewport space
   below the heading is split equally above and below the card via
   auto margins. The card no longer stretches to fill the page. */
.page-container.dashboard-page {
  justify-content: flex-start;
}
.page-container.dashboard-page > .container.dashboard-card {
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
}
/* ===== Modal / popup polish (Automate-i7xl) ===== */
.popup {
  gap: var(--cm-space-3);
  padding: var(--cm-space-6);
  min-width: 480px;
  max-width: min(720px, 98vw);
}

.popup .row {
  gap: var(--cm-space-4);
  width: 100%;
  /* Center label/input pairs vertically. The previous "stretch" left
     labels top-aligned next to taller inputs (Update Delivery row
     looked off-balance). */
  align-items: center;
  margin-bottom: var(--cm-space-2);
  justify-content: stretch;
}

/* Strip default browser button chrome from close-X buttons inside any
   popup. Some popups (Add Note, Adjust Request) use <button class="close">
   rather than a <span>; without this the user agent border + bg made
   the X read like a stray rectangle floating at the top of the popup. */
.popup-close .close,
.popup-close button.close,
button.close {
  background: transparent !important;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

/* Wide variant for popups whose content needs more horizontal room than
   the 720px default — e.g. Batch Details, which packs a Request Info
   table with 8+ columns alongside the batch metadata block. */
.popup.popup--wide,
.popup#form-popup-request-info {
  max-width: min(1180px, 98vw);
}

.popup .cell {
  flex: 1 1 0;
  align-items: stretch;
  gap: var(--cm-space-1);
}

.popup .cell label {
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.popup .cell input,
.popup .cell select,
.popup .cell textarea {
  width: 100%;
  box-sizing: border-box;
}

.popup .cell p {
  margin: 0;
  font-size: var(--cm-text-base);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-body);
  text-align: left;
}

/* Buttons inside cells should be normal size, not stretched full-width via cell flex */
.popup .cell button.button {
  align-self: flex-start;
  width: auto;
  min-width: 120px;
}

/* Override v3's pt-based heading sizes for popup headers — adopt the type scale */
.popup-header h1,
.popup h1 {
  font-size: var(--cm-text-2xl);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  margin: 0;
}

.popup-header h2,
.popup h2 {
  font-size: var(--cm-text-xl);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  margin: 0 0 var(--cm-space-3);
}

.popup-header h3,
.popup h3 {
  font-size: var(--cm-text-lg);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  margin: 0 0 var(--cm-space-2);
}

/* ===== Row-click modal polish (Automate-udyb, gy6c, x421) ===== */

/* 1. RequestDetailsPopup uses <table>/<tr>/<td> + .editable-input — wire
      width/box-sizing so inputs fill the table cell without overflow (udyb). */
.popup td input,
.popup td select,
.popup td textarea {
  width: 100%;
  box-sizing: border-box;
}

/* 2. .editable-input.locked zeroes padding globally; restore a minimal left
      indent when rendered inside a popup so fields are legible (udyb). */
.popup .editable-input.locked {
  padding-left: var(--cm-space-1);
}

/* 3. Adopt type-scale font sizes for .editable-input labels/values inside
      popups — overrides the hard-coded 12pt from the base rule (gy6c). */
.popup .editable-input {
  font-size: var(--cm-text-sm);
}

.popup td label {
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 4. The upload-records row-click popup (#recordUploadPopup) is a wide
      multi-column layout (request info + PDF viewer side-by-side).  The
      i7xl 720 px cap is far too narrow — override for this specific popup
      and the RequestDetails popup (Automate-x421). */
#recordUploadPopup .popup {
  min-width: min(900px, 95vw);
  max-width: min(1200px, 95vw);
  max-height: 95vh;
  overflow-y: auto;
}

/* ===== Request details modal width (Automate-bwyw, Automate-kysx) =====
   Keyed off the .request-details-popup class added by RequestDetailsPopup
   so every mount surface (Browse Requests, Browse Undeliverables, Pending
   Delivery, AR Browse Payments, Manual Upload, Upload Records) renders the
   modal at the same wide layout regardless of mount-container ID. The
   legacy `#requestDetailsDiv .popup` selector left undeliverables (which
   uses #requestDetailsPopupContainer) clamped to the default 720px. */
.popup.request-details-popup {
  min-width: min(960px, 95vw);
  max-width: min(1280px, 95vw);
  max-height: 95vh;
  overflow-y: auto;
}

/* 5. requestDetails modal opened from browse/requests and upload_records
      "View Request Details" — the tab-body has min-width: 1000px (in the
      dynamically injected requestDetails.css) so we need the popup to scroll
      rather than overflow, and the popup itself wide enough to contain it
      (udyb, x421). The !important is necessary because requestDetails.css is
      injected as a dynamic <style> after the <head> link tags, giving it
      higher cascade position. */
.popup .tab-body {
  min-width: unset !important;
  width: 100%;
  overflow-x: auto;
}

/* ---------- Google Charts SVG font fix (Automate-d910) ----------
 * Google Charts renders chart labels as SVG <text> elements. SVG text
 * in some browsers does not resolve document-scoped @font-face rules, so
 * fontName:"Inter" in chartOptions falls back to serif. These rules target
 * the SVG text nodes inside each chart container directly, letting the CSS
 * cascade apply the full Inter stack without !important (Google Charts does
 * not set font-family on <text> as an inline !important). */
#pie_chart_div text,
#bar_chart_div text,
#line_chart_div text,
#report-chart-div text {
  font-family: var(--cm-font-sans);
}

/* ===== Empty-state row helper (Automate-9vb5, zqec) ===== */
.results-table tbody tr.empty-state-row td {
  text-align: center;
  padding: var(--cm-space-8) var(--cm-space-4);
  color: var(--cm-text-muted);
  font-size: var(--cm-text-sm);
  font-style: italic;
  background: var(--cm-bg-surface) !important;
  border-bottom: none;
}

.results-table tbody tr.empty-state-row:hover td {
  background: var(--cm-bg-surface) !important;
}

/* Active/Inactive badges (Automate-u9sy) — built on .status-pill foundation */
.status-pill[data-status='active'] {
  background: rgba(16, 185, 129, 0.12);
  color: var(--cm-success-500);
}
.status-pill[data-status='inactive'] {
  background: var(--cm-bg-muted);
  color: var(--cm-text-muted);
}

/* ===== Sort indicator on th[sortValue] (Automate-gep5) ===== */
.results-table th[sortValue] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--cm-space-6); /* room for chevron */
}

.results-table th[sortValue]::after {
  content: '\2195'; /* ↕ — neutral up/down arrows */
  position: absolute;
  right: var(--cm-space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  opacity: 0.6;
  transition:
    opacity 120ms ease,
    color 120ms ease;
}

.results-table th[sortValue]:hover::after {
  opacity: 1;
  color: var(--cm-text-body);
}

.results-table th[sortValue].sort-asc::after {
  content: '\2191'; /* ↑ */
  opacity: 1;
  color: var(--cm-interactive);
}

.results-table th[sortValue].sort-desc::after {
  content: '\2193'; /* ↓ */
  opacity: 1;
  color: var(--cm-interactive);
}

/* ===== AR / payments column polish (Automate-couv, z27g, vwzf, znb6) ===== */
.results-table td.currency-cell,
.results-table th.currency-cell {
  text-align: right;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.results-table td.zero-amount {
  color: var(--cm-text-muted);
}

.results-table td.email-cell {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-table td.cell-active-due {
  background-color: var(--cm-teal-100) !important;
  color: var(--cm-teal-700);
  font-weight: var(--cm-fw-semibold);
}

/* ===== Right-side dock pills polish (Automate-7qdy) ===== */
.right-sidebar-icon-div {
  width: 44px;
  min-height: 44px;
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cm-space-2) var(--cm-space-3);
}
.right-sidebar-icon-div > i:not(.fa-circle-exclamation) {
  font-size: 20px !important;
}
.right-sidebar-icon-div .fa-circle-exclamation {
  font-size: 12px !important;
  top: 6px !important;
  right: 8px !important;
}

/* ===== KPI tile typography (Automate-piqz) ===== */
.badge[class*='badge-accent'] .kpi-tile-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--cm-lh-tight);
}
.badge[class*='badge-accent'] .kpi-tile-label {
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cm-text-muted);
}
.badge[class*='badge-accent'] .kpi-tile-value {
  font-size: var(--cm-text-2xl);
  font-weight: var(--cm-fw-bold);
  color: var(--cm-text-heading);
  font-feature-settings: 'tnum';
}

/* ===== Reports form card width (Automate-9psn) ===== */
#report-dashboard-container .container,
#report-dashboard-container > .row,
#report-dashboard-container {
  max-width: min(640px, calc(100vw - 2rem));
  width: 100%;
}

/* Date inputs in the reports form should fill their grid cell */
#report-dashboard-container input[type='date'],
#report-dashboard-container .field input {
  width: 100%;
  box-sizing: border-box;
}

/* ===== Read-only field treatment (Automate-i7qh) ===== */
.input--readonly {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid var(--cm-border) !important;
  border-radius: 0 !important;
  color: var(--cm-text-body);
  cursor: default;
  padding-left: 0 !important;
}
.input--readonly:focus {
  box-shadow: none !important;
  outline: none;
  border-bottom-color: var(--cm-border-strong) !important;
}

/* ===== Profile field wrapper (Automate-b2uy) ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--cm-space-1);
  margin-bottom: var(--cm-space-3);
}
.field label {
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===== Profile card layout + sections (Automate-340x) ===== */
.page-container .container#user-form-div-container,
.page-container > .container.profile-card {
  width: 100%;
  max-width: min(560px, calc(100vw - 2rem));
  margin-top: var(--cm-space-8);
  padding: var(--cm-space-6);
  /* No align-self override — let .page-container's `align-items: safe
     center` center the card horizontally. The previous flex-start
     parked the card at the left edge, which on typical viewports put
     it under the fixed 70px .sidenav rail. */
}
.profile-section {
  margin-bottom: var(--cm-space-6);
}
.profile-section:last-child {
  margin-bottom: 0;
}
.profile-section h3 {
  font-size: var(--cm-text-lg);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  margin: 0 0 var(--cm-space-3);
  padding-bottom: var(--cm-space-2);
  border-bottom: 1px solid var(--cm-border);
}

/* ===== Review Batches table cell wrap fix (Automate-m7kp) ===== */
table.results-table tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.results-table tbody td .status-pill {
  white-space: nowrap;
}

/* ===== Actions dropdown not clipped by td overflow (Automate-cvo3) =====
   The m7kp rule above sets overflow:hidden on every td; that clips the
   .action-content absolute-positioned dropdown that hangs below the
   Actions cell. Restore overflow:visible on the actions cell only. */
table.results-table tbody td:has(.actions-dropdown),
table.results-table tbody td:last-child {
  overflow: visible;
}
.action-content {
  z-index: 100;
}

/* ===== Undeliverables filter checkbox layout (Automate-as4r) ===== */
.filter-check-group {
  display: inline-flex;
  align-items: center;
  gap: var(--cm-space-2);
  margin-right: var(--cm-space-4);
  font-size: var(--cm-text-sm);
  cursor: pointer;
  user-select: none;
}
.filter-check-group input[type='checkbox'] {
  margin: 0;
}

/* ===== KPI tile "View queue" hint (Automate-14s2) ===== */
.badge[class*='badge-accent'] .kpi-tile-footer {
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  margin-top: var(--cm-space-1);
}
.badge[class*='badge-accent']:hover .kpi-tile-footer {
  color: var(--cm-interactive);
}

/* ===== /process/qa right pane width (Automate-zx5t) ===== */
@media (min-width: 1280px) {
  .page-container.flex-direction-row > .width-100.height-100 {
    min-width: 380px;
    max-width: min(440px, 32vw);
    width: 32vw;
    flex-shrink: 0;
  }
}

/* Reduce vertical padding on QA form rows so the pane doesn't feel sparse */
.page-container.flex-direction-row .flex-table-row {
  padding-top: var(--cm-space-2);
  padding-bottom: var(--cm-space-2);
}

/* ===== Comment entry layout (Automate-zx5t, Automate-szbe) =====
   Container is .comments-flex-table-cell, which has text-align: center
   from commentsTableStylesheet.css (the table parents user/date/comment
   columns are centered). Comment prose should be left-aligned for
   readability — override on the entry container. The flex layout for
   .comment-meta is unaffected by text-align. */
.comment-entry {
  margin-bottom: var(--cm-space-3);
  padding-bottom: var(--cm-space-2);
  border-bottom: 1px solid var(--cm-border);
  text-align: left;
  width: 100%;
}
.comment-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-space-2);
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  margin-bottom: var(--cm-space-1);
  align-items: baseline;
}
.comment-author {
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
}
.comment-date {
  color: var(--cm-text-muted);
}
.comment-body {
  font-size: var(--cm-text-sm);
  color: var(--cm-text-body);
  line-height: var(--cm-lh-snug);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Compact-mode comment cell (single-column layout used by Invoice +
   Browse Requests RequestDetails). The cell is the only child in the
   row, so text-align: center on .comments-flex-table-cell makes the
   .comment-entry block sit in the middle of the column on wide
   layouts. Left-align the cell content so the comment-entry hugs the
   row's left edge rather than floating in space. */
.comments-flex-table-row > .comments-flex-table-cell:has(> .comment-entry),
.comments-flex-table-row > .comments-flex-table-cell:only-child {
  text-align: left;
  align-items: stretch;
}

/* ===== ChartMate PDF viewer scoped tokens (Automate-ehdw) =====
   The PDF editor toolbar/chrome uses inline styles referencing the legacy
   --dark-background-color / --dark-text-color pair. Those tokens resolve
   to a fixed dark navy + white in BOTH light and dark mode (they're
   semantically "for putting text on a permanently-dark sidebar"). That
   left the editor toolbar reading as a black bar embedded in an
   otherwise light-mode page, and oddly inverted in dark mode.

   Re-bind those tokens inside the .chartmate-pdf-viewer scope to the
   mode-aware bg/text tokens so the editor chrome matches whatever theme
   is active. The variables only override within the editor — every
   other rule that uses --dark-background-color (sidebar, kpi tiles,
   etc.) is unaffected. */
.chartmate-pdf-viewer {
  /* Pinned dark chrome for the editor — actionBar + thumbnail
     sidebar should read as a permanently-dark surface with light
     icons, regardless of light/dark mode. Use --cm-bg-chrome
     (#131C2E, one step lighter than the navbar's --cm-bg-sidebar)
     so the editor doesn't blend into the navbar in the QA module. */
  --dark-background-color: var(--cm-bg-chrome);
  --dark-text-color: var(--cm-text-on-dark);
  color: var(--cm-text-body);
  border-radius: var(--cm-radius-lg);
  /* The toolbar packs ~14 icons + a page-counter group + a zoom select.
     Below ~640px the right-most toolbar group pushed outside the
     editor's right edge. Establish a hard minimum so the viewer can't
     be rendered narrower than the toolbar can comfortably display
     (Automate-yjr6). */
  min-width: 640px;
}
/* Make the contentArea (the row holding sidebar + pdfContainer) flex-fill
   the remaining vertical space below the actionBar, regardless of how
   tall the actionBar grows. The legacy code used inline
   `height: calc(100% - 40px)` which assumed a fixed 40px bar; the new
   actionBar uses min-height: 48px to accommodate 36px-tall inputs, so
   the calc was 8px short and the contentArea overflowed. flex: 1 + the
   `height: auto !important` overrides the inline calc cleanly. */
.chartmate-pdf-viewer > .row {
  flex: 1 1 auto !important;
  min-height: 0;
  height: auto !important;
}
/* Make the pdfContainer (the column inside contentArea that's not the
   sidebar) fill the remaining row width. Without this it was
   shrink-to-fit on the canvas, so applyFit always read
   pdfContainer.clientWidth as the canvas's natural width and produced
   a "scale" identical to current scale — the fit-width / fit-page
   buttons appeared to do nothing, and the PDF stayed at its natural
   size when the window grew/shrank. With flex: 1, clientWidth tracks
   the actual available row width so applyFit recomputes scale
   correctly on every resize (Automate-yjr6 part 2). */
.chartmate-pdf-viewer > .row > .column:not(.sidebar) {
  flex: 1 1 0 !important;
  min-width: 0;
  min-height: 0;
  width: auto !important;
}
.chartmate-pdf-viewer .actionBar {
  background-color: var(--cm-bg-chrome);
  color: var(--cm-text-on-dark);
  border-bottom: 1px solid var(--cm-bg-chrome);
  border-top-left-radius: var(--cm-radius-lg);
  border-top-right-radius: var(--cm-radius-lg);
  /* The inline `height: 40px` on the actionBar doesn't fit our 36px
     inputs/selects (the global input rule sets height: 36px). Override
     to height: auto with a min-height that comfortably contains the
     controls plus padding. The viewer's min-width: 640px guarantees
     enough horizontal room for the four toolbar groups, so wrapping
     is unnecessary and was producing a 4-row stacked layout in real
     usage (the row's jc-space-between treated each group as a flex
     line when wrap was on). Force a single line. */
  height: auto !important;
  min-height: 48px;
  flex-wrap: nowrap;
  gap: var(--cm-space-2);
  padding: var(--cm-space-1) var(--cm-space-3) !important;
  box-sizing: border-box;
}
.chartmate-pdf-viewer .actionBar > .row {
  /* Add internal gap to each toolbar group (page nav, zoom group, end
     toolbar) so icons aren't running into the inputs/selects. */
  gap: var(--cm-space-1);
}
/* When the editor is rendered inside a popup, the global `.popup .row`
   rule adds margin-bottom: var(--cm-space-2) to every descendant .row.
   That bleeds onto the editor's own structural rows (the actionBar
   itself + the toolbar groups + the sidebar/content row), pushing the
   toolbar away from the PDF area. Cancel margins on rows that are
   part of the editor's own layout. */
.chartmate-pdf-viewer .row,
.chartmate-pdf-viewer .actionBar > .row {
  margin-bottom: 0;
}
.chartmate-pdf-viewer .actionBar input[type='number'] {
  /* Page-counter input: legacy rendered at default browser width
     (~150px) which dwarfed the "/N" span next to it. Constrain to a
     counter-shaped width and remove the default heavy border so the
     compact page widget reads as a unit. */
  width: 60px;
  min-width: 0;
  text-align: center;
  padding: 0 var(--cm-space-2);
  margin: 0;
}
.chartmate-pdf-viewer .actionBar select {
  /* Zoom-level select: matches the page input height + adds a small
     left margin so it doesn't run into the +/- icons. */
  height: 32px;
  margin: 0;
}
.chartmate-pdf-viewer .actionBar input[type='number'] + span {
  /* The "/ N" page-count span sat flush against the input with no gap
     and inherited the input's font-size — looked like a continuation of
     the input rather than a separate label. */
  margin-left: var(--cm-space-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chartmate-pdf-viewer input,
.chartmate-pdf-viewer select {
  background-color: var(--cm-bg-surface);
  color: var(--cm-text-body);
  border: 1px solid var(--cm-border);
}
.chartmate-pdf-viewer .sidebar {
  /* Thumbnail sidebar shares the actionBar's permanently-dark
     surface so the editor chrome reads as a single connected unit
     (toolbar + thumbnail rail) sitting above the lighter content
     area. Border on the right side gives a subtle separation from
     the PDF canvas. */
  background-color: var(--cm-bg-chrome);
  color: var(--cm-text-on-dark);
  border-right: 1px solid var(--cm-bg-chrome);
}
.chartmate-pdf-viewer .sidebar i,
.chartmate-pdf-viewer .sidebar span {
  color: var(--cm-text-on-dark);
}

/* ===== Drop-zone file input + chip list (Automate-b3wg) ===== */
.drop-container input[type='file'].file-block {
  width: 0;
  opacity: 0;
  position: absolute;
}

.file-chips {
  list-style: none;
  margin: var(--cm-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-space-1);
  /* Some upload contexts (Manual Upload, Upload Records) attach hundreds of
     PDFs at once. Without a cap the chip list expands unbounded and pushes
     the Upload button below the fold. Constrain to a fixed area with
     internal scrolling so a large batch becomes a self-contained list
     instead of dominating the page (Automate-uzxo). */
  max-height: 220px;
  overflow-y: auto;
  padding-right: var(--cm-space-1);
}
.file-chips:empty {
  /* No chips → no scrollbar gutter / border (the empty default state). */
  max-height: none;
  padding-right: 0;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cm-space-1);
  padding: 2px var(--cm-space-2);
  background: var(--cm-bg-muted);
  border-radius: 999px;
  font-size: var(--cm-text-xs);
  color: var(--cm-text-body);
  /* Cap the chip width and truncate long filenames so a single 100-char
     PDF name doesn't take an entire row. The actual ellipsis lives on
     .file-chip-name (text-overflow needs a styled element + nowrap; a
     raw text node inside the flex chip can't be truncated). The chip
     itself stays inline-flex so the X stays anchored at the right end.
     box-sizing: border-box so max-width includes the 8px L/R padding. */
  max-width: 120px;
  box-sizing: border-box;
}
.file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Without min-width: 0, flex children refuse to shrink below their
     content's min-content size — the ellipsis would never trigger. */
  min-width: 0;
  flex: 0 1 auto;
}
.file-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cm-text-muted);
  font-size: var(--cm-text-xs);
  padding: 0;
  line-height: 1;
}
.file-chip-remove:hover {
  color: var(--cm-danger-500);
}

/* ===== Drop-zone drag-over state (Automate-zpbi) ===== */
.drop-container--active {
  border-color: var(--cm-interactive) !important;
  background-color: rgba(20, 184, 166, 0.08) !important;
  color: var(--cm-interactive) !important;
}
.drop-container--active .drop-title {
  color: var(--cm-interactive);
}

/* ===== Processor log entry layout (Automate-4b3m) ===== */
.log-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.log-entry {
  margin-bottom: var(--cm-space-3);
  padding-bottom: var(--cm-space-2);
  border-bottom: 1px solid var(--cm-border);
}
.log-entry:last-child {
  border-bottom: none;
}
.log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-space-2);
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
  margin-bottom: var(--cm-space-1);
}
.log-author {
  font-weight: var(--cm-fw-medium);
}
.log-body {
  font-size: var(--cm-text-sm);
  color: var(--cm-text-body);
  line-height: var(--cm-lh-snug);
}

/* ===== Processor Log timeline (Automate-20qr) =====
   Pipeline stages render as a vertical timeline: icon column on the
   left (with a connecting line drawn between markers), label + meta
   on the right. Completed stages use a teal check; pending stages
   use a muted open circle and italic "Pending" meta. */
.processor-timeline {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--cm-space-2) 0;
}
.timeline-entry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--cm-space-3);
  padding-bottom: var(--cm-space-4);
  position: relative;
}
.timeline-marker {
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  padding-top: 2px;
}
/* Connector line stretching from the bottom of the icon to the next
   stage. Uses ::after on the marker so it doesn't push out the layout. */
.timeline-entry:not(.timeline-entry-last) .timeline-marker::after {
  content: '';
  position: absolute;
  top: 22px;
  bottom: -16px;
  width: 2px;
  background: var(--cm-border);
}
.timeline-entry-complete:not(.timeline-entry-last) .timeline-marker::after {
  background: var(--cm-interactive);
}
.timeline-icon {
  font-size: 18px;
  line-height: 1;
}
.timeline-entry-complete .timeline-icon {
  color: var(--cm-interactive);
}
.timeline-entry-pending .timeline-icon {
  color: var(--cm-text-muted);
}
.timeline-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline-label {
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-semibold);
  color: var(--cm-text-heading);
  line-height: var(--cm-lh-snug);
}
.timeline-entry-pending .timeline-label {
  color: var(--cm-text-muted);
  font-weight: var(--cm-fw-medium);
}
.timeline-meta {
  font-size: var(--cm-text-xs);
  color: var(--cm-text-muted);
}
.timeline-entry-pending .timeline-meta {
  font-style: italic;
}
.timeline-author {
  font-weight: var(--cm-fw-medium);
  color: var(--cm-text-body);
}
.timeline-meta-sep {
  margin: 0 var(--cm-space-1);
  color: var(--cm-text-muted);
}

/* ===== Sidebar nav main label sizing (Automate-exzt) ===== */
.sidenav .nav-text {
  font-size: var(--cm-text-sm);
  font-weight: var(--cm-fw-medium);
  line-height: var(--cm-lh-snug);
  letter-spacing: 0;
}

/* ===== Filter group label + select alignment (Automate-l0l8) ===== */
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: var(--cm-space-2);
  font-size: var(--cm-text-sm);
}
.filter-group label {
  color: var(--cm-text-muted);
  font-weight: var(--cm-fw-medium);
  white-space: nowrap;
}
.filter-group select {
  /* Inherit existing select styling — no override needed */
}

/* ===== Help icon + tooltip for inline explanations (Automate-dxfy) ===== */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: var(--cm-space-1);
  border-radius: 999px;
  /* A muted-but-visible chip so the affordance reads as "click for help"
     instead of disappearing into the chart card background. */
  background: var(--cm-bg-muted);
  color: var(--cm-text-body);
  border: 1px solid var(--cm-border);
  font-size: var(--cm-text-xs);
  font-weight: var(--cm-fw-semibold);
  cursor: help;
  position: relative;
  user-select: none;
}
.help-icon:hover,
.help-icon:focus-visible {
  background: var(--cm-bg-surface);
  color: var(--cm-interactive);
  border-color: var(--cm-interactive);
  outline: none;
}
.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  /* --tt-shift is set by the JS positioner in common.js when an icon
     is near a viewport edge — it slides the tooltip horizontally so
     the box never extends past the page. Default 0 keeps the tooltip
     centered on the icon for icons in the middle of the page. */
  transform: translateX(calc(-50% + var(--tt-shift, 0px)));
  background: var(--cm-bg-sidebar);
  color: var(--cm-text-on-dark);
  padding: var(--cm-space-2) var(--cm-space-3);
  border-radius: var(--cm-radius-md);
  font-size: var(--cm-text-xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 10;
  width: max-content;
  min-width: 220px;
  max-width: min(460px, calc(100vw - var(--cm-space-8)));
  white-space: normal;
  text-align: left;
  line-height: var(--cm-lh-snug);
}
.help-icon:hover::after,
.help-icon:focus-visible::after {
  opacity: 1;
}

/* Chart container needs position: relative for absolute help-icon child */
.chart-with-help {
  position: relative;
}
.chart-with-help .help-icon {
  position: absolute;
  top: var(--cm-space-2);
  right: var(--cm-space-2);
  z-index: 1;
}

/* ===== Changelog markdown rendering (Automate-hdzg) ===== */
.changelog-rendered {
  font-family: var(--cm-font-sans);
  font-size: var(--cm-text-sm);
  line-height: var(--cm-lh-normal);
  padding-right: var(--cm-space-6);
  padding-top: var(--cm-space-4);
  overflow-y: auto;
}
.changelog-rendered h1,
.changelog-rendered h2,
.changelog-rendered h3 {
  font-weight: var(--cm-fw-semibold);
  margin: var(--cm-space-4) 0 var(--cm-space-2);
  color: var(--cm-text-on-dark);
}
.changelog-rendered h1 {
  font-size: var(--cm-text-xl);
}
.changelog-rendered h2 {
  font-size: var(--cm-text-lg);
}
.changelog-rendered h3 {
  font-size: var(--cm-text-base);
}
.changelog-rendered p {
  margin: 0 0 var(--cm-space-3);
}
.changelog-rendered ul,
.changelog-rendered ol {
  margin: 0 0 var(--cm-space-3);
  padding-left: var(--cm-space-5);
}
.changelog-rendered li {
  margin-bottom: var(--cm-space-1);
}
.changelog-rendered code {
  font-family: var(--cm-font-mono);
  font-size: 0.875em;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px var(--cm-space-1);
  border-radius: var(--cm-radius-sm);
}
.changelog-rendered pre {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--cm-space-2) var(--cm-space-3);
  border-radius: var(--cm-radius-md);
  overflow-x: auto;
  font-size: var(--cm-text-xs);
}
.changelog-rendered pre code {
  background: transparent;
  padding: 0;
}
.changelog-rendered a {
  color: var(--cm-teal-300);
  text-decoration: underline;
}
.changelog-rendered a:hover {
  color: var(--cm-teal-100);
}
.changelog-rendered hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: var(--cm-space-4) 0;
}
.changelog-rendered strong {
  font-weight: var(--cm-fw-semibold);
}

/* ===== HITRUST trust band (Automate-tbnd) ====================================
   Reusable trust-signal block. Used on the api login page (inside
   .login-marketing, dark gradient → white text override lives in
   pages/login.css) and on the request/portal landing pages, where the
   light-mode tokens below render correctly without overrides.
   Per HITRUST PR & Social Guidelines: badge sized 150-250px wide,
   linked to hitrustalliance.net, statement names the certified scope
   (not the company).
   ========================================================================== */
.trust-band {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cm-space-4);
  margin: 0;
  padding: var(--cm-space-4) 0 0;
  border-top: 1px solid var(--cm-border);
}

.trust-band .trust-badge-link {
  /* Loaded as a background-image (data URI) so the artwork is bundled
     with the CSS and doesn't depend on per-site asset sync. */
  display: block;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  background-image: url("data:image/svg+xml;utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 966.61 966.61'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfont-family:Uniform-Regular2, Uniform;font-size:70.63px;letter-spacing:.05em;%7D.cls-1,.cls-2%7Bfill:%23c23227;%7D.cls-3%7Bfill:%23232964;%7D.cls-3,.cls-4,.cls-5,.cls-2,.cls-6%7Bstroke-width:0px;%7D.cls-4%7Bfill:%2322214a;%7D.cls-5%7Bfill:%23d9f5fe;%7D.cls-6%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-5' d='M317.04,135.59h377.02v960.61h-377.02c-24.55,0-44.47-19.93-44.47-44.47V180.06c0-24.55,19.93-44.47,44.47-44.47Z' transform='translate(-132.59 1099.2) rotate(-90)'/%3E%3Cpath class='cls-6' d='M385.53-198.07h240.04v960.61h-240.04c-24.55,0-44.47-19.93-44.47-44.47V-153.6c0-24.55,19.93-44.47,44.47-44.47Z' transform='translate(765.54 -201.07) rotate(90)'/%3E%3Cpath class='cls-2' d='M138.85,682.85c-3.18,0-5.2-.12-8.08-.12-3.05,0-4.29-.43-4.29-1.52,0-.87.8-2.17,2.12-4.01,3.77-5.29,6.46-11.35,7.11-19.33.65-8.05.78-14.95.88-23.49.07-6.46.43-13.27.43-19.57,0-10.82-.57-20.97-.32-33.41.08-4.04.11-7.36.11-10.26,0-7.32-.19-11.96-.19-18.57,0-10.37-.13-21.3-.35-31.54-.19-8.8-4.43-17.68-9.03-23.79-.68-.89-.63-1.76.7-2.14.77-.22,1.8-.27,2.66-.27,4.44,0,9.2.08,13.96.16,1.52.03,3.03.03,4.55.03,4.81,0,9.63-.19,14.46-.19,3.18,0,5.2.12,8.07.12,3.05,0,4.29.43,4.29,1.52,0,.87-.8,2.17-2.12,4.01-3.77,5.29-6.46,11.35-7.11,19.33-.65,8.05-.78,14.95-.87,23.48-.03,3.15-.05,6.24-.05,9.31,0,3.92.02,7.81.04,11.71,0,1.29.8,2.38,1.83,2.38,3.91-.03,6.86-.02,12.02-.06,3.87,0,7.75,0,11.63,0,2.58,0,5.16.01,7.74.03,1.01,0,1.78-1.07,1.78-2.32-.05-3.97-.14-7.46-.14-11.82,0-10.33-.14-21.26-.35-31.51-.19-8.8-4.43-17.68-9.03-23.79-.68-.89-.63-1.76.7-2.14.77-.22,1.8-.27,2.66-.27,5.63,0,11.24.15,16.88.15s10.73-.15,16.09-.15c3.18,0,5.2.13,8.07.13,3.05,0,4.29.43,4.29,1.52,0,.87-.8,2.17-2.12,4.01-3.77,5.29-6.47,11.35-7.11,19.33-.65,8.05-.78,14.95-.88,23.48-.08,7.53-.44,14.1-.44,21.34,0,9.73.56,20.41.33,31.65-.08,4.04-.11,7.36-.11,10.27,0,7.32.19,11.96.19,18.57,0,10.37.14,21.3.35,31.54.19,8.8,4.43,17.68,9.03,23.79.68.89.63,1.76-.7,2.14-.77.22-1.8.27-2.66.27-4.44,0-9.2-.08-13.96-.16-1.51-.02-3.02-.03-4.53-.03-4.82,0-9.64.19-14.48.19-3.18,0-5.2-.12-8.07-.12-3.05,0-4.29-.43-4.29-1.52,0-.87.8-2.17,2.12-4.01,3.77-5.29,6.47-11.35,7.11-19.33.65-8.05.78-14.95.87-23.49.03-3.15.05-6.24.05-9.31,0-9.95-.13-19.62-.09-30.15,0-1.29-.79-2.4-1.83-2.4-3.59.05-7.17.19-10.76.19-6.74,0-13.49-.26-20.25-.17-1.07.02-2,1.01-2.02,2.34,0,.47-.02.93-.03,1.41-.08,4.03-.11,7.36-.11,10.26,0,7.34.19,11.98.19,18.62,0,10.33.14,21.26.35,31.5.19,8.8,4.43,17.68,9.03,23.79.68.89.63,1.76-.7,2.14-.77.22-1.8.27-2.66.27-5.63,0-11.24-.14-16.88-.14s-10.72.14-16.08.14h-.01Z'/%3E%3Cpath class='cls-2' d='M265.41,682.85c-3.18,0-5.2-.12-8.08-.12-3.05,0-4.29-.43-4.29-1.52,0-.87.8-2.17,2.12-4.01,3.77-5.29,6.46-11.35,7.11-19.33.65-8.05.78-14.95.88-23.49.03-3.15.05-6.23.05-9.28,0-8.7-.1-17.19-.1-26.23,0-5.55.04-11.32.16-17.47.08-4.04.11-7.36.11-10.26,0-7.32-.19-11.96-.19-18.57,0-10.37-.14-21.3-.35-31.54-.19-8.8-4.43-17.68-9.03-23.79-.68-.89-.63-1.76.7-2.14.77-.22,1.8-.27,2.66-.27,4.44,0,9.2.08,13.96.16,1.52.03,3.03.03,4.55.03,4.81,0,9.63-.19,14.46-.19,3.18,0,5.2.12,8.07.12,3.05,0,4.29.43,4.29,1.52,0,.87-.8,2.17-2.12,4.01-3.77,5.29-6.47,11.35-7.11,19.33-.65,8.05-.78,14.95-.87,23.48-.08,7.81-.28,15.52-.28,23.15,0,9.55.4,18.88.17,29.83-.08,4.03-.11,7.36-.11,10.26,0,7.34.19,11.98.19,18.62,0,10.33.14,21.26.36,31.5.19,8.8,4.43,17.68,9.03,23.79.68.89.63,1.76-.7,2.14-.77.22-1.8.27-2.66.27-5.63,0-11.24-.14-16.88-.14s-10.72.14-16.08.14h0Z'/%3E%3Cpath class='cls-4' d='M345.22,682.76c-3.18,0-5.2-.12-8.08-.12-3.05,0-4.29-.43-4.29-1.52,0-.87.8-2.17,2.12-4.01,3.77-5.29,6.47-11.35,7.11-19.33.65-8.05.78-14.95.87-23.49.1-9,.19-17.4.19-26.17,0-8.3-.28-17.19-.08-26.81.08-4.03.11-7.36.11-10.26,0-7.34-.19-11.98-.19-18.61,0-5.67.04-12.16.04-18.56,0-3.64-.01-7.25-.06-10.66,0-1.31-.89-2.32-1.95-2.32-3.47.02-6.92.08-10.32.19-7.08.24-14.43,5.77-19.33,11.49-.72.84-1.42.79-1.72-.87-.18-.96-.21-2.24-.21-3.3,0-5.53.07-11.45.13-17.37.02-1.72.02-3.44.02-5.15,0-2.15-.01-5.71-.03-7.86-.02-2.59,1.26-3.29,3.34-3.29h14.64c7.65.14,15.3.29,22.95.29s14.93-.19,22.43-.19c3.58,0,8.88.14,12.07.11l17.41-.21c2.26,0,3.21.64,3.21,3.82,0,6.24.13,14.49.13,19.55,0,3.96-.1,6.47-.1,10.05,0,3.79-.34,5.34-1.22,5.34-.7,0-1.75-1-3.23-2.63-4.26-4.68-9.13-8.54-15.55-9.34-3.95-.49-7.56-.56-11.34-.56-1.02,0-1.88.98-1.88,2.25-.06,7.28-.15,14.85-.21,20-.03,3.15-.05,6.23-.05,9.29,0,8.69.1,17.16.1,26.19,0,5.56-.04,11.34-.16,17.5-.08,4.03-.11,7.36-.11,10.26,0,7.34.19,11.98.19,18.62,0,10.33.14,21.26.35,31.5.19,8.8,4.43,17.68,9.03,23.78.68.89.63,1.76-.7,2.14-.77.22-1.8.27-2.66.27-5.63,0-11.25-.15-16.87-.15s-10.73.15-16.09.15l-.03.02Z'/%3E%3Cpath class='cls-4' d='M491.3,682.75c-3.9,0-7.81-.04-11.71-.08-.22,0-.81.03-1.52.03-.86,0-1.91-.05-2.68-.27-1.35-.38-1.39-1.25-.71-2.14,2.81-3.68,6.06-7.34,7.69-12.28.39-1.18.55-2.37.55-3.56,0-3.33-1.26-6.72-2.27-10.38-1.68-6.11-2.98-11.4-4.39-16-2.39-7.79-4.84-14.26-8.2-24.24-.19-.55-.6-2.16-1.34-4.26-.48-1.37-1.5-1.78-2.7-1.8-2.01-.03-3.86.06-5.31.06-.47,0-4.15.12-4.58.12-1.08,0-1.96.82-1.96,2.16-.05,6.77-.15,10.33-.14,11.45.04,6.62.03,11.3.07,19.83.1,15.82-.2,17.68,1.36,23.32,1.62,5.88,4.6,11.37,7.76,15.56.68.89.63,1.76-.7,2.14-.77.22-1.8.27-2.66.27-7.23,0-14.41-.22-21.63-.22-5.96,0-12.1.26-17.8.19-.21,0-.8.03-1.51.03-.86,0-1.89-.05-2.66-.27-1.33-.38-1.38-1.25-.7-2.14,4.6-6.1,8.84-14.98,9.03-23.78.21-9.52.36-19.63.36-29.31,0-7.6.2-12.35.2-20,0-3.09-.03-6.65-.12-11.06-.22-10.57.14-19.39.14-28.72,0-7.99-.16-16.12-.24-24.26-.09-8.53-.22-15.43-.87-23.48-.65-7.98-3.34-14.04-7.11-19.33-1.31-1.84-2.12-3.22-2.12-4.14s.83-1.4,2.8-1.4c3.55,0,5.64-.12,9.01-.12,4.56,0,9.07.18,13.59.18,11.63,0,1.57-.18,28.03-.18,3.81,0,7.76.5,11.54,1.05,10.12,1.46,20.82,6.86,27.67,16.58,6.1,8.66,8.52,19.47,8.76,30.33.32,15.24-.49,25.23-3.85,36.81-2.11,7.26-6.41,12.92-11.58,16.83-.92.69-1.85,1.33-2.8,1.93-1.26.8-1.29,2.44-.82,3.88,2.14,6.52,4.26,13.52,6.49,20.13,2.28,6.81,4.12,11.43,7.11,20.37,6.84,20.84,7.74,25.24,13.95,32.77,1.35,1.63,2.08,2.72,3.38,4.42.69.89.99,2.39-.07,2.59-1.19.22-2.96.24-3.81.24-10.32,0-20.61.08-30.88.08h-.01ZM453.81,582.06c.65-.02,1.33-.04,2.01-.04,2.56,0,6.6.05,7.9-.03,10.51-.62,13.23-1.36,17.98-8.35,2.4-3.53,3.02-8.48,3.27-12.79.2-3.49.36-7,.36-10.5,0-4.86-.3-9.7-1.2-14.48-.67-3.58-2.23-7.21-4.45-9.79-4.69-5.47-12.51-5.65-18.12-5.65-2.18,0-4.49.1-6.61.25-.95.07-1.74.25-2.42.95-.47.48-.52,1.56-.52,2.42,0,1.83,0,3.6,0,4.62,0,3.03,0,5.99,0,8.93,0,3.51-.01,7-.07,10.61-.05,3.34-.08,8.65-.08,14.3,0,6.03.03,12.42.09,17.18.02,1.29.8,2.41,1.84,2.37h0Z'/%3E%3Cpath class='cls-4' d='M578.58,685.32c-7.19,0-14.74-1.19-20.99-5.7-7.01-5.06-13.23-11.98-17.3-22.42-6.51-16.71-7.02-35.49-7.08-53.68-.02-7.05-.24-14.51-.08-22.47.08-4.02.11-7.34.11-10.23,0-7.27-.19-11.89-.19-18.46,0-10.36-.13-21.24-.35-31.45-.19-8.77-4.43-17.61-9.03-23.69-.68-.89-.63-1.75.7-2.13.77-.21,1.8-.26,2.65-.26,5.46,0,11.39.19,17.24.19,5.39,0,10.78-.19,16.18-.19,3.19,0,5.21.13,8.08.13,3.05,0,4.3.43,4.3,1.51,0,.87-.8,2.16-2.12,4-3.77,5.27-6.46,11.31-7.11,19.26-.65,8.02-.78,14.89-.87,23.39-.05,4.83-.07,7.92-.07,10.27,0,4.35.06,6.18.06,11.82,0,2.64-.04,6.1-.04,11.06,0,6.43.11,27.42.13,31.01.04,9.15.07,18.54.74,24.73,1.3,12.05,4.58,18.78,12.3,23.35,2.41,1.43,5.18,2.14,8,2.14,6.2,0,12.64-3.42,16.04-10.14,1.87-3.7,2.67-7.49,3.53-11.55,1.62-7.64,1.76-18.7,1.76-28.2,0-8.4-.09-15.33-.1-16.57-.02-2.52-.11-5.57-.11-8.28,0-14.57-.06-20.22-.06-28.81,0-10.77-.12-22.29-.35-33.04-.19-8.77-4.37-17.61-8.91-23.69-.67-.89-.63-1.75.69-2.13.76-.21,1.77-.26,2.62-.26,6.84,0,13.64.2,20.45.2,3.22,0,6.44-.04,9.66-.08h.16c1.94,0,2.76.46,2.76,1.39s-.79,2.29-2.09,4.12c-3.72,5.27-6.38,11.31-7.02,19.26-.64,8.02-.77,14.89-.86,23.39-.08,7.71-.13,15-.13,22.42,0,9.43.08,19.07.25,30.05.05,2.95.07,5.9.07,8.85,0,3.18.02,6.39.02,9.59,0,15.11-.52,30.37-6.42,43.99-3.84,8.87-9.76,16.77-16.39,21.43-7.02,4.94-13.44,5.89-20.84,5.89h0Z'/%3E%3Cpath class='cls-4' d='M685.42,685.31c-8.42,0-16.54-2.36-22.74-7.28-3.46-2.75-6.21-4.71-8.99-4.71-2.95,0-5.95,2.21-9.89,8.02-1.09,1.61-2.27,2.76-3.19,2.76s-1.58-1.19-1.58-4.29c0-6.11.18-14.08.18-22.21,0-6.62-.08-13.24-.03-18.25.03-3.53,0-7.07,0-10.6,0-.31,0-.67,0-1.05,0-1.82.1-4.2,1.19-4.73,1.02-.49,2.48-.6,3.9-.6,2.97,0,4.86-.08,6.19-.08s2.12.08,2.84.4c1.03.46,1.2,2.18,2.75,7.29.83,2.74,1.66,5.48,2.67,8.13,1.93,5.06,4.36,9.94,7.65,13.96,4.26,5.21,11.18,8.27,17.79,8.27,9.66,0,18.92-6.72,18.92-19.49,0-15.29-11.26-24.42-21.55-29.44-7.41-3.62-14.22-7.61-20.17-12.29-5.95-4.68-10.97-10.26-14.91-16.6-5.74-9.22-8.73-19.94-8.73-31.61,0-10.77,1.51-21.97,5.47-31.64,3.46-8.46,8.84-15.68,16.09-20.62,6.47-4.4,14.44-7,23.86-7,8.18,0,16.08,2.36,22.1,7.28,3.36,2.75,6.03,4.71,8.74,4.71,2.87,0,5.78-2.21,9.61-8.02,1.06-1.61,2.21-2.76,3.1-2.76s1.54,1.19,1.54,4.29c0,6.13-.17,14.15-.17,22.26,0,6.6.07,13.2.03,18.21-.03,3.53,0,7.07,0,10.6,0,.31,0,.66,0,1.03,0,1.83-.09,4.23-1.15,4.76-.99.49-2.41.6-3.79.6-2.88,0-4.72.08-6.01.08s-2.06-.08-2.77-.4c-1-.46-1.17-2.18-2.67-7.28-.81-2.74-1.61-5.48-2.6-8.13-1.87-5.06-4.24-9.94-7.43-13.95-4.18-5.26-10.97-8.28-17.46-8.28-4.36,0-8.78,1.31-11.92,3.84-4.9,3.96-7.37,10.36-7.37,16.91,0,4.29,1.06,8.64,3.2,12.41,4.91,8.63,14.17,13.04,21.89,16.67,11.66,5.47,21.7,10.66,29.28,19.27,8.85,10.05,12.9,24.55,12.9,39.31,0,8.01-1.06,16.06-2.92,23.5-3.06,12.28-9.05,23.02-19.28,29.79-6.66,4.41-14.86,7-24.56,7h0Z'/%3E%3Cpath class='cls-4' d='M776.05,682.76c-3.19,0-5.2-.12-8.08-.12-3.05,0-4.29-.43-4.29-1.52,0-.87.8-2.17,2.12-4.01,3.77-5.29,6.46-11.35,7.11-19.33.65-8.05.78-14.95.88-23.49.1-9,.19-17.4.19-26.17,0-8.3-.28-17.19-.08-26.81.08-4.03.11-7.36.11-10.26,0-7.34-.19-11.98-.19-18.61,0-5.67.04-12.16.04-18.56,0-3.64-.01-7.25-.06-10.66,0-1.31-.89-2.32-1.95-2.32-3.47.02-6.92.08-10.32.19-7.08.24-14.43,5.77-19.33,11.49-.72.84-1.42.79-1.72-.87-.18-.96-.21-2.24-.21-3.3,0-5.53.07-11.45.13-17.37.02-1.72.02-3.44.02-5.15,0-2.15,0-5.71-.03-7.86-.02-2.59,1.26-3.29,3.34-3.29h14.64c7.65.14,15.3.29,22.95.29s14.93-.19,22.43-.19c3.58,0,8.88.14,12.07.11l17.41-.21c2.26,0,3.21.64,3.21,3.82,0,6.24.13,14.49.13,19.55,0,3.96-.1,6.47-.1,10.05,0,3.79-.34,5.34-1.22,5.34-.7,0-1.75-1-3.23-2.63-4.26-4.68-9.13-8.54-15.55-9.34-3.95-.49-7.56-.56-11.34-.56-1.02,0-1.87.98-1.87,2.25-.06,7.28-.15,14.85-.21,20-.04,3.15-.05,6.23-.05,9.29,0,8.69.1,17.16.1,26.19,0,5.56-.04,11.34-.16,17.5-.08,4.03-.11,7.36-.11,10.26,0,7.34.19,11.98.19,18.62,0,10.33.14,21.26.35,31.5.19,8.8,4.43,17.68,9.03,23.78.68.89.63,1.76-.7,2.14-.77.22-1.8.27-2.66.27-5.63,0-11.24-.15-16.87-.15s-10.73.15-16.09.15l-.03.02Z'/%3E%3Cpath class='cls-4' d='M867.28,505.39c0,6.14-4.82,10.96-11.09,10.96s-11.16-4.82-11.16-10.96,4.95-10.83,11.16-10.83,11.09,4.82,11.09,10.83ZM847.8,505.39c0,4.82,3.57,8.65,8.45,8.65s8.25-3.83,8.25-8.58-3.5-8.72-8.32-8.72-8.38,3.9-8.38,8.65ZM854.47,511.07h-2.51v-10.83c.99-.2,2.38-.33,4.16-.33,2.05,0,2.97.33,3.76.79.59.46,1.06,1.32,1.06,2.38,0,1.19-.92,2.11-2.24,2.51v.13c1.06.4,1.65,1.19,1.98,2.64.33,1.65.53,2.31.79,2.71h-2.71c-.33-.4-.53-1.39-.86-2.64-.2-1.19-.86-1.72-2.24-1.72h-1.19v4.36ZM854.54,504.93h1.19c1.39,0,2.51-.46,2.51-1.58,0-.99-.73-1.65-2.31-1.65-.66,0-1.12.07-1.39.13v3.1Z'/%3E%3Ctext class='cls-1' transform='translate(280.98 770.75)'%3E%3Ctspan x='0' y='0'%3ECERTIFIED%3C/tspan%3E%3C/text%3E%3Cpath class='cls-3' d='M493.94,303.85h-85.52c1.19,7.76,4.62,13.99,10.3,18.69,5.67,4.7,12.76,7.05,21.27,7.05,5.97,0,11.49-1.15,16.57-3.47,5.07-2.31,8.65-4.66,10.75-7.05l3.13-3.36,19.25,18.58c-.45.6-1.08,1.42-1.9,2.46-.82,1.05-2.76,2.91-5.82,5.6-3.06,2.69-6.42,5.08-10.07,7.16-3.66,2.09-8.55,3.96-14.66,5.6-6.12,1.64-12.61,2.46-19.48,2.46-17.91,0-32.73-5.67-44.44-17.02-11.72-11.34-17.58-25.52-17.58-42.54s6.01-31.34,18.02-42.99c12.01-11.64,26.83-17.46,44.44-17.46,15.97,0,29.55,5.45,40.75,16.34,11.19,10.9,16.79,23.96,16.79,39.18,0,1.94-.15,3.81-.45,5.6-.3,1.79-.6,3.06-.9,3.81l-.45,1.34ZM437.52,261.31c-7.16,0-13.36,2.09-18.58,6.27-5.23,4.18-8.51,9.63-9.85,16.34h55.3c-1.05-6.42-4.11-11.79-9.18-16.12-5.08-4.33-10.97-6.49-17.69-6.49Z'/%3E%3Cpath class='cls-3' d='M506.93,238.47l57.1-39.85h26.86v156.72h-32.46v-118.68l-36.05,23.53-15.45-21.72Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-decoration: none;
  border-radius: var(--cm-radius-md);
  /* Hover lift so the badge reads as interactive (links to HITRUST). */
  transition:
    transform 120ms ease,
    opacity 120ms ease;
}

.trust-band .trust-badge-link:hover,
.trust-band .trust-badge-link:focus-visible {
  transform: translateY(-1px);
  opacity: 0.9;
  outline: none;
}

.trust-band .trust-statement {
  margin: 0;
  font-size: var(--cm-text-xs);
  color: var(--cm-text-body);
  line-height: var(--cm-lh-snug);
  text-align: left;
}

.trust-band .trust-statement strong {
  color: var(--cm-text-heading);
  font-weight: var(--cm-fw-semibold);
}

@media (max-width: 480px) {
  .trust-band .trust-badge-link {
    width: 72px;
    height: 72px;
  }
}

/* ===== cm-footer (compact public footer) =================================
   Stacked, centered footer rendered by /_shared/cm-footer.js across the
   request site, portal site, and error pages. Layout reads top-to-bottom:
     row 1 (.cm-footer__trust) — HITRUST badge inline with the HIPAA
                                  statement, both centered as a unit
     row 2 (.cm-footer__links) — chartmate.io · contact us, centered
     row 3 (.cm-footer__copy)  — copyright, centered

   An earlier iteration ran the trust pod and links side-by-side via
   `justify-content: space-between` to save vertical space, but that
   pushed each block to opposite edges of the viewport and read as
   misaligned on wide screens. Each block now gets its own centered row.

   Specificity note — the surface stylesheets (request, portal) both
   ship `.page-footer p { padding: 5px; font-size: 10pt; margin: 0 }`
   at 0,1,1 specificity AND load after stylesheetv3.css. To win, the
   cm-footer rules below scope through `.page-footer.cm-footer ...` so
   they read at 0,2,0 / 0,3,0 — beating the surface rules without
   needing !important.
   ========================================================================== */
.page-footer.cm-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cm-space-3);
  padding: var(--cm-space-4) var(--cm-space-4) var(--cm-space-3);
  text-align: center;
}

.page-footer.cm-footer .cm-footer__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cm-space-3);
  width: 100%;
}

/* Trust pod — badge inline with the HIPAA statement (compact, saves
   vertical space) and centered as a unit on its own footer row.
   Overrides base .trust-band's marketing-panel padding/border. */
.page-footer.cm-footer .cm-footer__trust {
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cm-space-3);
  border-top: none;
}

/* The HITRUST badge artwork includes rendered text ("CERTIFIED" / "e1")
   per their PR guidelines; below ~50px the text becomes pixel-mush.
   56px keeps it legible without dominating the footer. */
.page-footer.cm-footer .cm-footer__trust .trust-badge-link {
  width: 56px;
  height: 56px;
  /* Subtle white-ish frame so the navy/red artwork reads cleanly
     against the dark footer surface. */
  background-color: rgba(255, 255, 255, 0.04);
  padding: 2px;
  box-sizing: border-box;
}

/* Reset the .page-footer p { padding: 5px; margin: 0 } baseline so the
   cm-footer paragraphs don't get phantom 5px insets. */
.page-footer.cm-footer p {
  padding: 0;
  margin: 0;
}

.page-footer.cm-footer .cm-footer__statement {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cm-text-sm);
  line-height: var(--cm-lh-snug);
  letter-spacing: 0.01em;
}

.page-footer.cm-footer .cm-footer__lock {
  flex: 0 0 auto;
}

.page-footer.cm-footer .cm-footer__links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cm-space-2);
  font-size: var(--cm-text-sm);
  line-height: var(--cm-lh-snug);
}

.page-footer.cm-footer .cm-footer__sep {
  opacity: 0.5;
}

.page-footer.cm-footer .cm-footer__copy {
  text-align: center;
  font-size: var(--cm-text-xs);
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* Dark-band context — pin statement text, lock SVG, and link separator
   to text-on-dark so they stay legible against the dark footer bg. */
.page-footer.cm-footer .trust-statement,
.page-footer.cm-footer .cm-footer__lock,
.page-footer.cm-footer .cm-footer__sep {
  color: var(--cm-text-on-dark);
}

@media (max-width: 480px) {
  .page-footer.cm-footer .cm-footer__trust .trust-badge-link {
    width: 48px;
    height: 48px;
  }
}