html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Bootstrap 5.3: Wakefield green as global “primary” + focus (replaces default blue across switches, validation, etc.) */
:root,
[data-bs-theme="light"] {
  --bs-focus-ring-color: rgba(49, 102, 45, 0.35);
  /* Modal / offcanvas dismiss control (Bootstrap default is blue) */
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(49, 102, 45, 0.35);
  --bs-primary: #31662d;
  --bs-primary-rgb: 49, 102, 45;
  --bs-link-color: #31662d;
  --bs-link-hover-color: #392929;
  /* Teal “info” (Bootstrap default blue is #0dcaf0 / #cff4fc) */
  --bs-info: #145b76;
  --bs-info-rgb: 20, 91, 118;
  --wakefield-kendo-grid-border: #ced4da;
}

/* Kendo grid: "Clear grid filters" next to toolbar search */
.k-grid .k-grid-search + .wf-kendo-clear-grid-filters,
.k-grid .k-grid-toolbar .wf-kendo-clear-grid-filters,
.k-grid .k-toolbar .wf-kendo-clear-grid-filters {
  margin-left: 0.5rem;
  align-self: center;
  flex-shrink: 0;
}

/* Bootstrap utility / component classes that still ship blue tints in some builds or states */
.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.text-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important;
}

.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.border-primary {
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity, 1)) !important;
}

.alert-primary {
  --bs-alert-color: #163a14;
  --bs-alert-bg: rgba(49, 102, 45, 0.12);
  --bs-alert-border-color: rgba(49, 102, 45, 0.35);
}

.dropdown-item:active,
.dropdown-item.active {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--bs-primary) !important;
}

.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.progress-bar.bg-primary {
  background-color: var(--bs-primary) !important;
}

.badge.text-bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Kendo generic links (schedulers, grids) — avoid default #376092 blue.
   Do not match .btn anchors (e.g. Document tab: btn-primary must keep white text on green). */
.k-widget a.k-link:not(.k-button):not(.btn),
.k-widget a:not(.k-button):not(.btn):not(.k-picker-wrap):not(.k-calendar-nav) {
  color: var(--wakefield-green, #31662d);
}

.k-widget a.k-link:not(.k-button):not(.btn):hover,
.k-widget a:not(.k-button):not(.btn):not(.k-picker-wrap):not(.k-calendar-nav):hover {
  color: var(--wakefield-green-hover, #392929);
}

/* Buttons: per-variant focus shadow RGB is often blue in Bootstrap; force brand green when focused */
.btn:focus-visible {
  --bs-btn-focus-shadow-rgb: 49, 102, 45;
}

/* Buttons / nav links / non-checkbox radios: Wakefield green double ring (matches form fields) */
.btn:focus,
.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus,
.btn-link.nav-link:focus-visible,
.form-check-input:not([type="checkbox"]):focus,
.form-check-input:not([type="checkbox"]):focus-visible {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.35);
}

.btn-wakefield-outline:focus,
.btn-wakefield-outline:focus-visible {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.35);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.35);
}

.page-link:focus,
.page-link:focus-visible {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.35);
}

/* Kendo buttons (grids, editors, toolbars): replace default blue focus */
.k-button:focus,
.k-button:focus-visible,
.k-button.k-state-focused,
.k-button.k-focus {
  box-shadow: 0 0 0 2px rgba(49, 102, 45, 0.35) !important;
}

/* Text fields site-wide: Wakefield green focus (replaces Bootstrap #258cfb on .form-control) */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
  border-color: var(--wakefield-green, #31662d);
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.35);
}

/* Kendo editors (grids, popups, pickers): kendo.common often uses a lighter gray for typed values */
.k-input-inner,
.k-textbox .k-input-inner,
.k-numerictextbox .k-input-inner,
.k-maskedtextbox .k-input-inner,
.k-combobox .k-input-inner,
textarea.k-textarea,
.k-textarea textarea {
  color: var(--wakefield-text, #392929) !important;
  font-weight: 500;
}

/*
 * Native <select> when OPEN: the option list is drawn by the browser/OS (Chrome/Edge on Windows often use
 * a system list box). CSS cannot restyle that blue highlight reliably. accent-color below fixes accent UI
 * where supported; for full control use a custom widget (e.g. Kendo DropDownList).
 */
select,
select.form-select {
  accent-color: var(--wakefield-green, #31662d);
}

/* One height for Bootstrap text fields, native <select>, and Kendo DropDownLists. */
:root {
  --wf-field-height: 2.375rem;
  --wf-field-padding-y: 0.375rem;
  --wf-field-padding-x: 0.75rem;
  --wf-field-line-height: 1.5;
  --wf-control-radius: 0.45rem;
  --wf-control-radius-sm: 0.35rem;
  --wf-button-height: 2.75rem;
  --wf-button-height-sm: 2rem;
  --wf-grid-toolbar-button-height: 2.125rem;
  --wf-button-padding-x: 1.25rem;
  --wf-button-padding-x-sm: 0.75rem;
}

/* Site-wide button recipe: align Bootstrap and Kendo actions (height, font, padding, color).
   Exclude icon-only Kendo chrome (tab scroll arrows, grid icon tools) — those rely on compact sizing. */
.btn:not(.btn-link),
.k-button:not(.k-button-icon):not(.k-tabstrip-prev):not(.k-tabstrip-next),
.k-grid .k-toolbar .k-button:not(.k-button-icon),
.k-grid .k-grid-toolbar .k-button:not(.k-button-icon) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--wf-button-height);
  padding: 0.5rem var(--wf-button-padding-x) !important;
  font-family: var(--wakefield-font-serif, 'Cinzel', serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-sm:not(.btn-link),
.k-button.k-button-sm,
.k-grid .k-toolbar .btn,
.k-grid .k-grid-toolbar .btn,
.k-grid .k-toolbar .k-button,
.k-grid .k-grid-toolbar .k-button,
.k-grid .k-command-cell .k-button {
  min-height: var(--wf-button-height-sm);
  padding: 0.25rem var(--wf-button-padding-x-sm) !important;
  font-size: 0.9rem !important;
}

.k-grid .k-toolbar .btn,
.k-grid .k-grid-toolbar .btn,
.k-grid .k-toolbar .k-button,
.k-grid .k-grid-toolbar .k-button {
  box-sizing: border-box !important;
  height: var(--wf-grid-toolbar-button-height) !important;
  min-height: var(--wf-grid-toolbar-button-height) !important;
  max-height: var(--wf-grid-toolbar-button-height) !important;
  line-height: 1.25 !important;
}

.k-grid .k-toolbar .btn > *,
.k-grid .k-grid-toolbar .btn > *,
.k-grid .k-toolbar .k-button > *,
.k-grid .k-grid-toolbar .k-button > * {
  line-height: 1.25 !important;
}

.k-grid .k-toolbar,
.k-grid .k-grid-toolbar {
  align-items: center;
}

.k-grid .k-toolbar .k-button,
.k-grid .k-grid-toolbar .k-button,
.k-grid .k-command-cell .k-button,
.k-edit-form-container .k-button,
.k-window .k-button {
  color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  background-color: transparent !important;
}

.k-grid .k-toolbar .k-button:hover,
.k-grid .k-grid-toolbar .k-button:hover,
.k-grid .k-toolbar .k-button.k-state-hover,
.k-grid .k-grid-toolbar .k-button.k-state-hover,
.k-grid .k-command-cell .k-button:hover,
.k-edit-form-container .k-button:hover,
.k-window .k-button:hover {
  color: #fff !important;
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
}

/* Site-wide control radius: keep buttons, fields, grid search, and Kendo controls consistent. */
.btn,
.form-control,
.form-select,
.input-group-text,
.page-link,
.dropdown-menu,
.k-button,
.k-textbox,
.k-picker,
.k-dropdown,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-multiselect-wrap,
.k-autocomplete,
.k-upload,
.k-pager-wrap .k-link,
.k-pager-wrap .k-pager-sizes .k-dropdown,
.k-grid .k-grid-search,
.k-grid .k-grid-search .k-input,
.k-grid .k-grid-search .k-input-inner {
  border-radius: var(--wf-control-radius) !important;
}

.btn-sm,
.form-control-sm,
.form-select-sm,
.k-button.k-button-sm,
.k-pager-wrap .k-link {
  border-radius: var(--wf-control-radius-sm) !important;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.k-grid .k-grid-search .k-input-prefix {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
.k-grid .k-grid-search .k-input-inner {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

input.form-control:not(textarea):not(.form-control-sm):not(.form-control-lg):not(.form-control-plaintext),
select.form-select:not(.form-select-sm):not(.form-select-lg) {
  box-sizing: border-box !important;
  min-height: var(--wf-field-height) !important;
  height: var(--wf-field-height) !important;
  padding-top: var(--wf-field-padding-y) !important;
  padding-bottom: var(--wf-field-padding-y) !important;
  line-height: var(--wf-field-line-height) !important;
}

select.form-select:not(.form-select-sm):not(.form-select-lg) {
  padding-right: 2.25rem !important;
}

/* Input-group buttons (e.g. SSN show/hide) match field height, not standalone action buttons. */
.input-group > .btn:not(.btn-link) {
  box-sizing: border-box !important;
  min-height: var(--wf-field-height) !important;
  height: var(--wf-field-height) !important;
  max-height: var(--wf-field-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-family: var(--wakefield-font-sans, inherit) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1 !important;
}

.input-group > .btn-sm:not(.btn-link) {
  min-height: calc(var(--wf-field-height) - 0.25rem) !important;
  height: calc(var(--wf-field-height) - 0.25rem) !important;
  max-height: calc(var(--wf-field-height) - 0.25rem) !important;
}

.wakefield-kendo-tabstrip .k-tabstrip .k-content select.form-select,
#contractFarmField select.form-select {
  min-height: var(--wf-field-height) !important;
  height: var(--wf-field-height) !important;
}

input[type="range"] {
  accent-color: var(--wakefield-green, #31662d);
}

input[type="radio"].form-check-input {
  accent-color: var(--wakefield-green, #31662d);
}

/*
 * Radio: Bootstrap 5 applies .form-check-input:checked with background-color #0d6efd (primary).
 * accent-color alone does not replace that filled state in Chrome/Edge — mirror checkbox overrides.
 */
input.form-check-input[type="radio"]:checked {
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  /* White center dot (same as BS default SVG; sits on green ring) */
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

input.form-check-input[type="radio"]:focus,
input.form-check-input[type="radio"]:focus-visible {
  border-color: var(--wakefield-green, #31662d);
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.4) !important;
}

/* No min-height on html/body: page height = content height so footer stays below content;
   on small windows you scroll to see the footer. */
body {
  margin-bottom: 60px;
}

/* Top header: logo centered on white strip, like public site */
.wakefield-header-top {
  /* bg-white comes from Bootstrap; this keeps any extra styling minimal */
}

/* Header nav grows to fit logo; border-bottom stays under logo */
header .navbar {
  min-height: 172px;
}

@media (min-width: 768px) {
  header .navbar {
    min-height: 180px;
  }
}

/* Logo absolutely centered in nav bar */
.navbar-nav-wrap .navbar-brand-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Standalone /Login and Identity Register — prominent logo without nav chrome */
.auth-card-brand {
  margin-bottom: 0.5rem;
}

.auth-card-logo {
  max-height: 132px;
  width: auto;
  max-width: min(100%, 280px);
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

@media (min-width: 576px) {
  .auth-card-logo {
    max-height: 152px;
    max-width: min(100%, 320px);
  }
}

/* Logo ~120px taller than original (44→164, 52→172) */
.wakefield-logo-header {
  height: 164px;
  max-height: 164px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (min-width: 768px) {
  .wakefield-logo-header {
    height: 172px;
    max-height: 172px;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* -------------------------------------------------------------------------
   Page headings — primary (section / full page) vs subtitle (Admin tab body)
   Inherits Cinzel + uppercase + green from wakefield-brand.css on h1/h2.
   ------------------------------------------------------------------------- */
.wf-page-title {
  font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.wf-page-subtitle {
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  letter-spacing: 0.07em;
  line-height: 1.3;
}

/* -------------------------------------------------------------------------
   Procure section tabs (secondary nav; sentence case, not all-caps h1)
   ------------------------------------------------------------------------- */
.procure-section-nav .nav-tabs {
  /* Full-width rule under section tabs (was suppressed by .border-bottom-0 in markup). */
  border-bottom: 1px solid var(--wakefield-kendo-grid-border, #ced4da) !important;
  gap: 0.15rem;
}

.procure-section-nav .nav-link {
  color: var(--wakefield-text-light, #6c757d);
  font-family: var(--wakefield-font-sans, 'Nunito Sans', sans-serif);
  text-transform: none;
  font-weight: 500;
  border: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  margin-bottom: -1px;
  background-color: rgba(49, 102, 45, 0.06);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  position: relative;
  z-index: 0;
}

/* Match Kendo TabStrip inactive hover (see .k-tabstrip.k-widget rules below) */
.procure-section-nav .nav-link:not(.active):not(.disabled):hover {
  color: var(--wakefield-green, #31662d);
  border-color: #bfc9be #bfc9be var(--wakefield-kendo-grid-border, #ced4da);
  background-color: rgba(49, 102, 45, 0.08);
}

.procure-section-nav .nav-link.active {
  color: var(--wakefield-green, #31662d);
  background-color: #fff;
  border-color: var(--wakefield-green, #31662d) var(--wakefield-green, #31662d) #fff;
  font-weight: 700;
}

.procure-section-nav .nav-link.active:hover {
  color: var(--wakefield-green, #31662d);
  background-color: #fff;
  border-color: var(--wakefield-green, #31662d) var(--wakefield-green, #31662d) #fff;
}

/* -------------------------------------------------------------------------
   Procure: shell wraps tab row + content; vertical borders sit only on the
   content block below the tab baseline (not beside the tab row).
   ------------------------------------------------------------------------- */
.wf-procure-tabbed-shell {
  border: none;
  background-color: transparent;
  min-width: 0;
  box-sizing: border-box;
}

.wf-procure-tabbed-shell .procure-section-nav.mb-3 {
  margin-bottom: 0 !important;
}

/* Frame under tabs: left, right, bottom; top edge = nav/tab strip baseline */
.wf-procure-tabbed-shell > .procure-section-nav + .wf-procure-tabbed-shell-body,
.procure-section-nav + .wf-procure-tabbed-shell > .wf-procure-tabbed-shell-body {
  border-color: var(--wakefield-kendo-grid-border, #ced4da);
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 0.35rem 0.35rem;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: -1px;
  position: relative;
  z-index: 0;
}

/* Nested Bootstrap sub-tabs: stack is borderless; baseline under tab row stays visible. */
.wf-procure-subtab-stack {
  border: none;
  background-color: transparent;
  box-sizing: border-box;
  min-width: 0;
}

.wf-procure-subtab-stack > .nav.nav-tabs {
  margin-bottom: 0 !important;
  padding: 0.5rem 0 0;
  border-bottom: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  gap: 0.15rem;
}

/* Inner U-frame below sub-tab row (nested inside shell-body L/R/B). Top = sub-tab baseline only. */
.wf-procure-tabbed-shell-body .wf-procure-subtab-stack > .nav.nav-tabs + .tab-content {
  margin-top: 0;
  border-color: var(--wakefield-kendo-grid-border, #ced4da);
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 0.35rem 0.35rem;
  background-color: #fff;
  box-sizing: border-box;
}

/* FSA-1007 body: grid panel stays inside the bordered shell-body (no double frame) */
.wf-procure-tabbed-shell-body .wakefield-kendo-page-panel {
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem 1rem;
}

/* Kendo grid inside Bootstrap sub-tab panes: no second outer stroke */
.wf-procure-subtab-stack .tab-content .wakefield-kendo-page-panel {
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem 1rem;
}

/* -------------------------------------------------------------------------
   Bootstrap nav-tabs: align with Wakefield/Kendo tab outline style
   (Used by End of day + other non-Kendo tab rows.)
   ------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  gap: 0.15rem;
}

.nav-tabs .nav-link {
  color: var(--wakefield-text-light, #6c757d);
  font-family: var(--wakefield-font-sans, 'Nunito Sans', sans-serif);
  font-weight: 500;
  border: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
  margin-bottom: -1px;
  background-color: rgba(49, 102, 45, 0.06);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  position: relative;
  z-index: 0;
}

/* Inactive tabs: green bottom accent animates in on hover (matches Kendo TabStrip ::after below) */
.nav-tabs .nav-link:not(.active):not(.disabled)::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0;
  height: 2px;
  background-color: var(--wakefield-green, #31662d);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

/* Match Kendo TabStrip inactive hover (End of day sub-tabs) */
.nav-tabs .nav-link:not(.active):not(.disabled):hover {
  color: var(--wakefield-green, #31662d);
  border-color: #bfc9be #bfc9be var(--wakefield-kendo-grid-border, #ced4da);
  background-color: rgba(49, 102, 45, 0.08);
}

.nav-tabs .nav-link:not(.active):not(.disabled):hover::after {
  transform: scaleX(1);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--wakefield-green, #31662d);
  background-color: #fff;
  border-color: var(--wakefield-green, #31662d) var(--wakefield-green, #31662d) #fff;
  font-weight: 700;
  /* Sit above the ul’s border-bottom so the active tab’s white edge masks the baseline (incl. after click focus). */
  z-index: 2;
}

.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.show .nav-link:hover {
  color: var(--wakefield-green, #31662d);
  background-color: #fff;
  border-color: var(--wakefield-green, #31662d) var(--wakefield-green, #31662d) #fff;
}

/* Mouse click keeps :focus; inset ring reads as a dark seam on the tab baseline. Keyboard still gets a ring. */
.nav-tabs .nav-link:focus:not(:focus-visible) {
  box-shadow: none;
}

.nav-tabs .nav-link:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(49, 102, 45, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .nav-tabs .nav-link:not(.active):not(.disabled)::after,
  .k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled) .k-link::after {
    transition: none;
  }
}

/* Global: many pages use <ul class="nav nav-tabs mb-3"> above a bordered panel (border-top-0).
   The mb-3 creates a visible gap; remove it so borders stitch cleanly everywhere. */
.nav-tabs.mb-3 {
  margin-bottom: 0 !important;
}

/* When a bordered panel follows nav-tabs and its top border is suppressed (border-top-0),
   pull it up by 1px so the active tab edge meets the vertical borders cleanly. */
.nav-tabs + .tab-content.border-top-0,
.nav-tabs + .border.border-top-0,
.nav-tabs + .border-top-0 {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Legacy: section nav not inside .wf-procure-tabbed-shell */
.procure-section-nav.mb-3 {
  margin-bottom: 0 !important;
}

.procure-section-nav + .tab-content.border-top-0,
.procure-section-nav + .border.border-top-0,
.procure-section-nav + .border-top-0 {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Sit above the page panel when edges meet (same stacking idea as Kendo tab items) */
.procure-section-nav {
  position: relative;
  z-index: 1;
}

/* Flush stack: section tabs + Kendo page panel (inside shell or legacy layout) */
.procure-section-nav + .wakefield-kendo-page-panel {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
  z-index: 0;
}

/* Match Kendo grid outline command buttons (green border, not Bootstrap primary blue) */
.btn-wakefield-outline {
  color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  background-color: transparent !important;
}

.btn-wakefield-outline:hover {
  color: #fff !important;
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
}

/* -------------------------------------------------------------------------
   Checkboxes (site default): larger control + Wakefield green — no .checkbox-bigger class required.
   Kendo grid popup/create editors use input.k-checkbox (not .form-check-input); they live in .k-window,
   not under .k-grid, so they must be targeted explicitly — do not exclude .k-checkbox here.
   ------------------------------------------------------------------------- */
input.form-check-input[type="checkbox"],
input.k-checkbox[type="checkbox"],
.k-edit-form-container input[type="checkbox"],
.k-popup-edit-form input[type="checkbox"],
.k-window input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.12rem;
  cursor: pointer;
  accent-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-gray-input, #555);
}

/* Bootstrap 5 hardcodes blue on .form-check-input:checked */
input.form-check-input[type="checkbox"]:checked,
input.k-checkbox[type="checkbox"]:checked,
.k-edit-form-container input[type="checkbox"]:checked,
.k-popup-edit-form input[type="checkbox"]:checked,
.k-window input[type="checkbox"]:checked {
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  color: #fff !important;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-check-bg-image) !important;
}

.k-checkbox:checked::before,
.k-checkbox.k-checked::before,
.k-edit-form-container input[type="checkbox"]:checked::before,
.k-popup-edit-form input[type="checkbox"]:checked::before,
.k-window input[type="checkbox"]:checked::before {
  color: #fff !important;
}

input.form-check-input[type="checkbox"]:focus,
input.k-checkbox[type="checkbox"]:focus,
.k-edit-form-container input[type="checkbox"]:focus,
.k-popup-edit-form input[type="checkbox"]:focus,
.k-window input[type="checkbox"]:focus {
  border-color: var(--wakefield-green, #31662d);
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(49, 102, 45, 0.4) !important;
}

/* -------------------------------------------------------------------------
   Kendo Grid: light frame site-wide (kendo.common default is darker; matches tab panels)
   ------------------------------------------------------------------------- */

.k-grid.k-widget {
  border-color: var(--wakefield-kendo-grid-border) !important;
  /* Kendo common sometimes measures using content-box, which can bleed 1–2px past
     Bootstrap bordered panels/cards. Keep grids constrained to their parent. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.k-grid td,
.k-grid th,
.k-grid .k-table-td,
.k-grid .k-table-th {
  border-color: var(--wakefield-kendo-grid-border) !important;
}

/* Text identity columns must never inherit numeric/identifier alignment. */
.k-grid td[data-field="ProducerName"],
.k-grid td[data-field="ProducerDisplayName"],
.k-grid td[data-field="BuyerName"],
.k-grid td[data-field="SellerName"],
.k-grid td[data-field="CarrierName"],
.k-grid td[data-field="UserName"],
.k-grid td[data-field="CompanyName"],
.k-grid td[data-field="FirstName"],
.k-grid td[data-field="LastName"],
.k-grid td[data-field="FileName"],
.k-grid th[data-field="ProducerName"],
.k-grid th[data-field="ProducerDisplayName"],
.k-grid th[data-field="BuyerName"],
.k-grid th[data-field="SellerName"],
.k-grid th[data-field="CarrierName"],
.k-grid th[data-field="UserName"],
.k-grid th[data-field="CompanyName"],
.k-grid th[data-field="FirstName"],
.k-grid th[data-field="LastName"],
.k-grid th[data-field="FileName"] {
  text-align: left !important;
}

.k-grid .wf-grid-text-cell {
  display: block;
  width: 100%;
  text-align: left !important;
}

/* Grid checkbox selection column: align controls with row highlight */
.k-grid th[data-wf-grid-select-col],
.k-grid .wf-grid-select-all-wrap {
  vertical-align: middle;
}
.k-grid td .wf-grid-select-cell {
  vertical-align: middle;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.k-grid .k-grid-header,
.k-grid .k-grid-footer,
.k-grid .k-grid-toolbar,
.k-grid .k-grid-header-wrap,
.k-grid .k-grid-footer-wrap,
.k-grid .k-grid-content,
.k-grid .k-grid-content-locked,
.k-grid .k-grid-header-locked,
.k-grid .k-pager-wrap {
  border-color: var(--wakefield-kendo-grid-border) !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Procure index pages without a Kendo TabStrip: same boxed panel as .wakefield-kendo-tabstrip .k-content */
.wakefield-kendo-page-panel {
  border: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  border-radius: 0.35rem;
  background-color: #fff;
  padding: 0.75rem 1rem 1rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: visible;
  overflow-y: visible;
}

/* After .wakefield-kendo-page-panel so cascade wins: grid index shell — sides/bottom only */
.wf-procure-tabbed-shell > .procure-section-nav + .wakefield-kendo-page-panel {
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 0.35rem 0.35rem;
  margin-top: -1px;
  position: relative;
  z-index: 0;
}

/* -------------------------------------------------------------------------
   Kendo Grid: command column spacing (Edit / Delete)
   ------------------------------------------------------------------------- */
.k-grid .k-command-cell > a,
.k-grid td.k-command-cell .k-button {
  margin-right: 0.75rem;
}

.k-grid .k-command-cell > a:last-child,
.k-grid td.k-command-cell .k-button:last-child {
  margin-right: 0;
}

.k-grid .k-command-cell {
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Kendo popup editors: ensure opaque modal surface
   ------------------------------------------------------------------------- */
.k-window,
.k-dialog,
.k-window-content,
.k-dialog-content,
.k-edit-form-container {
  background-color: #fff !important;
}

/* End of day — FSA-1007 correction modal: native <select> must not widen past the window */
#wfCorrectionWindow.k-window > .k-window-content {
  box-sizing: border-box;
  overflow-x: hidden;
}

#wfCorrectionWindow .wf-correction-modal {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#wfCorrectionWindow .wf-correction-modal select.form-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Tab strip: rounded top corners only (flat bottom meets content) */
.wakefield-kendo-tabstrip .k-tabstrip-items .k-item {
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0.35rem;
  /* No gap below tab row — bordered .k-content sits flush underneath */
  margin-bottom: 0;
}

.wakefield-kendo-tabstrip .k-tabstrip-items .k-item .k-link {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: var(--wf-field-height);
  padding-top: var(--wf-field-padding-y);
  padding-bottom: var(--wf-field-padding-y);
  line-height: var(--wf-field-line-height);
}

/* Kendo TabStrip: selected tab reads clearly (shared buyer/producer detail pages). */
.wakefield-kendo-tabstrip .k-tabstrip-items .k-item.k-state-active {
  background-color: #fff;
  border-color: var(--wakefield-green, #31662d);
  border-bottom-color: #fff;
  font-weight: 700;
  z-index: 1;
}

.wakefield-kendo-tabstrip .k-tabstrip-items .k-item.k-state-active .k-link {
  color: var(--wakefield-green, #31662d);
  font-weight: 700;
}

.wakefield-kendo-tabstrip .k-tabstrip-items .k-item:not(.k-state-active) .k-link {
  color: var(--wakefield-text-light, #6c757d);
  font-weight: 500;
}

/* Inactive Kendo tabs — same idle/hover recipe as Bootstrap .nav-tabs (tinted fill, #bfc9be sides on hover, transitions) */
.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled) {
  background-color: rgba(49, 102, 45, 0.06);
  border: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  border-bottom-color: var(--wakefield-kendo-grid-border, #ced4da);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled) .k-link {
  transition: color 0.18s ease;
  position: relative;
  z-index: 0;
}

/* Same bottom accent animation as Bootstrap .nav-tabs::after */
.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled) .k-link::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  bottom: 0;
  height: 2px;
  background-color: var(--wakefield-green, #31662d);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled):hover,
.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled).k-state-hover {
  background-color: rgba(49, 102, 45, 0.08);
  border-color: #bfc9be #bfc9be var(--wakefield-kendo-grid-border, #ced4da);
}

.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled):hover .k-link,
.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled).k-state-hover .k-link {
  color: var(--wakefield-green, #31662d);
}

.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled):hover .k-link::after,
.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active):not(.k-state-disabled).k-state-hover .k-link::after {
  transform: scaleX(1);
}

/* Disabled inactive tabs: keep idle chrome (hover rules above exclude .k-state-disabled) */
.k-tabstrip.k-widget .k-tabstrip-items .k-item:not(.k-state-active).k-state-disabled {
  background-color: rgba(49, 102, 45, 0.06);
  border: 1px solid var(--wakefield-kendo-grid-border, #ced4da);
  border-bottom-color: var(--wakefield-kendo-grid-border, #ced4da);
}

/* Kendo: .k-widget and .k-content both get borders — remove the outer “frame” */
.wakefield-kendo-tabstrip .k-widget.k-tabstrip,
.wakefield-kendo-tabstrip .k-tabstrip.k-widget {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* TabStrips not wrapped in .wakefield-kendo-tabstrip (e.g. some delete flows) — still span the main column */
main .k-tabstrip.k-widget {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Content panel only: thin outline (tabs above stay unboxed, like legacy procurement UI) */
.wakefield-kendo-tabstrip .k-tabstrip > .k-content,
.wakefield-kendo-tabstrip .k-tabstrip .k-content {
  border: 1px solid var(--wakefield-kendo-grid-border, #ced4da) !important;
  border-radius: 0 0 0.35rem 0.35rem;
  background-color: #fff;
  box-shadow: none !important;
  padding: 0.75rem 1rem 1rem;
  margin-top: -1px;
  position: relative;
  z-index: 0;
  /* Allow focus rings and full-width inputs to paint; hidden overflow was clipping the right edge */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: visible;
  overflow-y: visible;
}

/* Bootstrap rows use negative left/right margins for gutters. Inside our bordered TabStrip/panel
   containers that can visually “bleed” past the right border by ~0.75rem. Neutralize the outer
   row margins at the content root; inner grid gutters still work via column padding. */
.wakefield-kendo-tabstrip .k-tabstrip > .k-content > .row,
.wakefield-kendo-tabstrip .k-tabstrip .k-content > .row,
.wakefield-kendo-page-panel > .row {
  margin-left: 0;
  margin-right: 0;
  /* The panel already has padding; remove Bootstrap horizontal gutters so left/right
     whitespace inside the border is symmetric and driven only by the panel padding. */
  --bs-gutter-x: 0;
}

/* Constrain Bootstrap fields inside tab panels (avoid clipping without hiding overflow) */
.wakefield-kendo-tabstrip .k-tabstrip .k-content .form-control,
.wakefield-kendo-tabstrip .k-tabstrip .k-content .form-select,
.wakefield-kendo-tabstrip .k-tabstrip .k-content textarea.form-control {
  max-width: 100%;
  box-sizing: border-box;
}

/* Virginia farm # (state / county / farm / seq): one row in full page and inside Kendo tab strips */
.wf-virginia-farm-number {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
  .wf-virginia-farm-number {
    flex-wrap: nowrap;
  }
}

.wf-virginia-farm-number__state,
.wf-virginia-farm-number__seq {
  flex: 0 0 5.5rem;
  max-width: 5.5rem;
  min-width: 0;
}

.wf-virginia-farm-number__county {
  flex: 1 1 11rem;
  min-width: 9rem;
}

.wf-virginia-farm-number__farm {
  flex: 1 1 9rem;
  min-width: 7rem;
}

.wf-virginia-farm-number .form-control,
.wf-virginia-farm-number .form-select {
  width: 100%;
  max-width: 100%;
}

/* Contract edit: farm exhibit block when scrolling from download validation or ?scroll=exhibit */
.wf-contract-exhibit-anchor {
  scroll-margin-top: 5.5rem;
}

/* Form action rows: match outline buttons to Wakefield primary/secondary sizing */
.wf-form-actions > .btn-outline-secondary,
.wf-form-actions .btn-outline-secondary {
  font-family: var(--wakefield-font-serif);
  font-size: 1.1rem;
  border-radius: var(--wf-control-radius);
  padding: 10px 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.wf-form-validation-banner ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.wf-form-validation-banner .validation-summary-errors ul {
  margin-top: 0.25rem;
}

/* Admin → KCMO tab: two grids side by side (Bootstrap cols + nested row can wrap when Kendo grids have wide min-content). */
.wf-admin-kcmo-split {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .wf-admin-kcmo-split {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .wf-admin-kcmo-split__files {
    flex: 0 1 42%;
    min-width: 0;
    max-width: 48%;
  }

  .wf-admin-kcmo-split__lines {
    flex: 1 1 58%;
    min-width: 0;
  }
}

/* Match header row height so “Reverse selected” does not push the lines grid below the batches grid. */
.wf-kcmo-panel-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  min-height: 2.125rem;
}

.wf-kcmo-panel-head__spacer {
  flex: 0 0 auto;
  width: 9.25rem;
  max-width: 45%;
  height: 1.875rem;
  visibility: hidden;
  pointer-events: none;
}

/* Tab list chrome: avoid extra grey box under tab row */
.wakefield-kendo-tabstrip .k-tabstrip-items,
.wakefield-kendo-tabstrip .k-tabstrip-items-wrap {
  border: none !important;
  box-shadow: none !important;
}

/* TabStrip horizontal scroll arrows (kendo.common compact icon buttons). */
.k-tabstrip > .k-button.k-flat.k-tabstrip-prev,
.k-tabstrip > .k-button.k-flat.k-tabstrip-next {
  min-height: 0 !important;
  width: calc(1.4285714286em + 10px);
  height: calc(1.4285714286em + 10px);
  padding: 4px !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  text-transform: none !important;
  line-height: normal !important;
  gap: 0;
}

.k-tabstrip > .k-button.k-flat.k-tabstrip-prev .k-icon,
.k-tabstrip > .k-button.k-flat.k-tabstrip-next .k-icon,
.k-tabstrip > .k-button.k-flat.k-tabstrip-prev .k-icon::before,
.k-tabstrip > .k-button.k-flat.k-tabstrip-next .k-icon::before {
  font: 16px/1 WebComponentsIcons !important;
}

/* Mouse click keeps focus but should not show a thick inset ring (looks like a bottom line).
   Keyboard users still get :focus-visible — matches Bootstrap tabs (outline only when keyboard). */
.k-tabstrip.k-widget .k-tabstrip-items > .k-item > .k-link:focus,
.k-tabstrip.k-widget .k-tabstrip-items > .k-item > .k-link.k-state-focused {
  outline: none;
  box-shadow: none;
}

.k-tabstrip.k-widget .k-tabstrip-items > .k-item > .k-link:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(49, 102, 45, 0.35);
}

/*
 * Top TabStrip: active tab has border-bottom-width:1px (kendo.common). After a mouse click the
 * .k-link stays :focus and some stacks show a dark seam against .k-content. Pin the bottom edge
 * to white and strip focus chrome on the active item/link (keyboard still gets :focus-visible above).
 */
.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active,
.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active.k-state-focused,
.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active:has(> .k-link:focus) {
  border-bottom-color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active .k-link:focus,
.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active .k-link.k-state-focused {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active .k-link:focus::after,
.k-tabstrip.k-widget.k-tabstrip-top > .k-tabstrip-items > .k-item.k-state-active .k-link.k-state-focused::after {
  content: none !important;
  display: none !important;
}

/* Grid “Details” links: brand green instead of default link blue */
a.wakefield-grid-detail {
  color: var(--wakefield-green, #31662d);
  font-weight: 600;
  text-decoration: underline;
}

a.wakefield-grid-detail:hover,
a.wakefield-grid-detail:focus {
  color: var(--wakefield-green-hover, #392929);
}

/* Kendo popup: kendo.common sets .k-group { background: 0 0 } — opaque shell so content behind doesn’t show */
.k-popup.k-group,
.k-popup {
  background-color: #fff !important;
}

.k-popup .k-list-container,
.k-popup .k-list,
.k-popup .k-list-scroller,
.k-popup .k-list-ul,
.k-popup ul.k-list-ul,
.k-popup .k-virtual-list {
  background-color: #fff !important;
}

/* Kendo list / dropdown popup: Wakefield accent instead of default Kendo blue */
.k-popup .k-list .k-item.k-state-hover,
.k-popup .k-list .k-item:hover {
  background-color: rgba(49, 102, 45, 0.12);
  color: var(--wakefield-text, #392929);
}

.k-popup .k-list .k-item.k-state-selected,
.k-popup .k-list .k-item.k-selected {
  background-color: var(--wakefield-green, #31662d) !important;
  color: #fff !important;
}

.k-popup .k-list .k-item.k-state-focused {
  box-shadow: inset 0 0 0 2px var(--wakefield-green, #31662d);
}

.k-popup .k-list-optionlabel.k-state-hover,
.k-popup .k-list-optionlabel:hover {
  background-color: rgba(49, 102, 45, 0.12);
  color: var(--wakefield-text, #392929);
}

/* DropDownList / ComboBox closed state: focus ring */
.k-dropdown-wrap.k-state-focused,
.k-dropdown-wrap.k-focus,
.k-picker.k-focus > .k-dropdown-wrap,
span.k-dropdown-wrap:focus-within {
  border-color: var(--wakefield-green, #31662d) !important;
  box-shadow: 0 0 0 2px rgba(49, 102, 45, 0.28) !important;
}

/* Contract create/edit: Kendo DDL replaces native <select> so list popup uses .k-popup green (not OS blue) */
.wakefield-kendo-ddl.k-dropdown,
.wakefield-kendo-ddl.k-picker {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.wakefield-kendo-ddl:not(.wakefield-kendo-ddl--sm) .k-dropdown-wrap {
  border-color: var(--wakefield-gray-input, #555);
  border-radius: var(--bs-border-radius, 0.375rem);
  box-sizing: border-box !important;
  min-height: var(--wf-field-height) !important;
  height: var(--wf-field-height) !important;
}

.wakefield-kendo-ddl:not(.wakefield-kendo-ddl--sm) .k-input-inner {
  padding: var(--wf-field-padding-y) var(--wf-field-padding-x) !important;
  min-height: 0 !important;
  height: 100% !important;
  line-height: var(--wf-field-line-height) !important;
  box-sizing: border-box !important;
}

/* Compact DDL (e.g. admin role picker — aligns with .form-select-sm intent) */
.wakefield-kendo-ddl--sm .k-dropdown-wrap {
  min-height: 31px;
  border-radius: 0.25rem;
}

.wakefield-kendo-ddl--sm .k-input-inner {
  padding: 0.25rem 0.5rem;
  min-height: 29px;
  font-size: 0.875rem;
}

.k-dropdown .k-input-inner:focus,
.k-combobox .k-input-inner:focus {
  box-shadow: none !important;
}

/* Kendo .k-checkbox checked (grid + popup); size comes from global input.k-checkbox rules above */
.k-checkbox:checked,
.k-checkbox.k-checked,
.k-grid .k-checkbox:checked,
input.k-checkbox.k-checked {
  border-color: var(--wakefield-green, #31662d) !important;
  background-color: var(--wakefield-green, #31662d) !important;
}

/* Primary-style Kendo buttons in grids (e.g. update) */
.k-grid .k-button.k-primary {
  background-color: var(--wakefield-green, #31662d);
  border-color: var(--wakefield-green, #31662d);
}

.k-grid .k-button.k-primary:hover,
.k-grid .k-button.k-primary.k-state-hover {
  background-color: var(--wakefield-green-hover, #392929);
  border-color: var(--wakefield-green-hover, #392929);
}

/* -------------------------------------------------------------------------
   Kendo / Telerik (kendo.common + widgets): replace remaining default blues
   Load order: kendo.common.min.css, then site.css — these rules win.
   ------------------------------------------------------------------------- */

/* Grid: selected row / cell (class names differ slightly by Kendo version) */
.k-grid tbody tr.k-state-selected > td,
.k-grid tbody tr.k-state-selected > .k-table-td,
.k-grid .k-table-tbody tr.k-state-selected > .k-table-td,
.k-grid .k-table-row.k-selected > .k-table-td,
.k-grid tr.k-selected > td,
.k-grid td.k-state-selected,
.k-grid .k-table-td.k-state-selected {
  background-color: rgba(49, 102, 45, 0.16) !important;
  color: inherit !important;
}

.k-grid tbody tr.k-state-selected:hover > td,
.k-grid tbody tr.k-state-selected:hover > .k-table-td,
.k-grid .k-table-row.k-selected:hover > .k-table-td {
  background-color: rgba(49, 102, 45, 0.24) !important;
}

/* Pager: current page */
.k-pager .k-link.k-state-selected,
.k-pager-numbers .k-link.k-state-selected,
.k-pager-wrap .k-link.k-state-selected,
.k-pager-nav .k-state-selected {
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  color: #fff !important;
}

.k-pager .k-link:not(.k-state-selected):hover,
.k-pager-wrap .k-link:not(.k-state-selected):hover {
  color: var(--wakefield-green, #31662d) !important;
}

/* DatePicker / Calendar */
.k-calendar td.k-state-selected .k-link,
.k-calendar .k-state-selected .k-link,
.k-calendar .k-range-mid.k-state-selected .k-link {
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  color: #fff !important;
}

/* Today (when not the selected cell — selected uses white text from next rules) */
.k-calendar td.k-today:not(.k-state-selected) .k-link {
  color: var(--wakefield-green, #31662d) !important;
}

.k-calendar .k-state-hover .k-link,
.k-calendar td.k-state-hover .k-link {
  background-color: rgba(49, 102, 45, 0.12) !important;
  color: var(--wakefield-text, #392929) !important;
}

/* TreeView */
.k-treeview .k-in.k-state-selected,
.k-treeview .k-treeview-leaf.k-state-selected,
.k-treeview .k-treeview-item > .k-in.k-selected {
  background-color: var(--wakefield-green, #31662d) !important;
  color: #fff !important;
}

/* ListView */
.k-listview .k-listview-item.k-state-selected {
  background-color: rgba(49, 102, 45, 0.16) !important;
  color: inherit !important;
}

/* PanelBar active header */
.k-panelbar > .k-item > .k-link.k-state-selected,
.k-panelbar > .k-item > .k-header.k-state-selected {
  background-color: rgba(49, 102, 45, 0.12) !important;
  color: var(--wakefield-green, #31662d) !important;
}

/* Text editors + autocomplete + multiselect focus */
.k-autocomplete.k-state-focused,
.k-autocomplete.k-focus,
.k-textbox.k-state-focused,
.k-textbox.k-focus,
.k-textarea.k-state-focused,
.k-maskedtextbox.k-state-focused,
.k-numerictextbox.k-state-focused,
.k-multiselect.k-state-focused > .k-multiselect-wrap {
  border-color: var(--wakefield-green, #31662d) !important;
  box-shadow: 0 0 0 2px rgba(49, 102, 45, 0.28) !important;
}

/* All Kendo primary buttons (grids, popups, toolbars) */
.k-button.k-primary,
.k-button.k-flat.k-primary,
.k-edit-form-container .k-button.k-primary,
.k-window .k-button.k-primary {
  background-color: var(--wakefield-green, #31662d) !important;
  border-color: var(--wakefield-green, #31662d) !important;
  color: #fff !important;
}

.k-button.k-primary:hover,
.k-button.k-primary.k-state-hover,
.k-button.k-flat.k-primary:hover {
  background-color: var(--wakefield-green-hover, #392929) !important;
  border-color: var(--wakefield-green-hover, #392929) !important;
  color: #fff !important;
}

/* Grid header / filter cell focus */
.k-grid-header .k-header.k-state-focused,
.k-grid .k-filter-row .k-picker.k-focus,
.k-grid .k-filter-row .k-dropdown-wrap.k-state-focused {
  box-shadow: inset 0 0 0 2px rgba(49, 102, 45, 0.35) !important;
}

/* Inline grid editor shell (kendo.common uses bright accent) */
.k-editor-inline.k-state-active {
  border-color: var(--wakefield-green, #31662d) !important;
}

/* Menu / context menu hover */
.k-menu .k-item.k-state-hover > .k-link,
.k-context-menu .k-item.k-state-hover > .k-link {
  background-color: rgba(49, 102, 45, 0.12) !important;
  color: var(--wakefield-text, #392929) !important;
}

/* Under .k-content, Kendo can style inner divs; grid plus site.css after kendo.common avoids overlapped inputs. */
.buyer-edit-tabstrip .k-tabstrip > .k-content .buyer-deduction-add-rule__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 9rem) minmax(6.5rem, 9rem) minmax(7rem, 10rem) auto;
  column-gap: 1rem;
  row-gap: 0.75rem;
  align-items: end;
}

@media (max-width: 767.98px) {
  .buyer-edit-tabstrip .k-tabstrip > .k-content .buyer-deduction-add-rule__fields {
    grid-template-columns: 1fr;
  }
}

.buyer-edit-tabstrip .k-tabstrip > .k-content .buyer-deduction-add-rule__field {
  min-width: 0;
  display: block;
}

.buyer-edit-tabstrip .k-tabstrip > .k-content .buyer-deduction-add-rule__field--active {
  padding-bottom: 0.125rem;
}

.buyer-edit-tabstrip .k-tabstrip > .k-content .buyer-deduction-add-rule__field .form-select,
.buyer-edit-tabstrip .k-tabstrip > .k-content .buyer-deduction-add-rule__field .form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Inline “copy to clipboard” control next to text / links in definition lists */
.wf-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
}

.wf-copy-btn svg {
  display: block;
  vertical-align: 0;
}

/* ---------------------------------------------------------------------------
   Home dashboard (tile layout)
   --------------------------------------------------------------------------- */
.wf-dashboard {
  /* Uses parent .container width; two-column tiles need full row. */
}

.wf-dashboard-greeting {
  font-family: var(--wakefield-font-sans, 'Nunito Sans', sans-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--wakefield-text, #392929);
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}

.wf-dashboard-linklist {
  margin: 0;
}

.wf-dashboard-linklist li {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.wf-dashboard-linklist li:last-child {
  border-bottom: 0;
}

.wf-dashboard-linklist a {
  font-weight: 600;
}

.wf-dashboard-tile {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.375rem;
  border-top: 4px solid var(--wakefield-green, #31662d);
  box-shadow: 0 0.125rem 0.25rem rgba(57, 41, 41, 0.06);
  padding: 1.25rem 1.5rem 1.35rem;
}

.wf-dashboard-tile-title {
  font-family: var(--wakefield-font-sans, 'Nunito Sans', sans-serif);
  text-transform: none;
  color: var(--wakefield-text, #392929);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  letter-spacing: 0.01em;
}

.wf-dashboard-tile-sub {
  max-width: 52rem;
}

/* Processing data tile: legacy-style two-column metric grid (dashboard). */
.wf-dashboard-tile--processing-data .wf-dashboard-tile-title {
  margin-bottom: 0.65rem;
}

.wf-processing-data__scroll {
  max-height: 22rem;
  overflow-y: auto;
}

.wf-processing-data__row td {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wf-processing-data__row--alt td {
  background: rgba(57, 41, 41, 0.04);
}

.wf-processing-data__half {
  width: 50%;
}

.wf-processing-data__half--divider {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 1rem !important;
}

.wf-processing-data__metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
}

.wf-processing-data__metric--blank {
  min-height: 1.35rem;
}

.wf-processing-data__label {
  flex: 1 1 7rem;
  min-width: 0;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--wakefield-text-muted, #474747);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.wf-processing-data__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wakefield-text, #392929);
  font-size: 0.95rem;
  white-space: nowrap;
}

.wf-processing-data__open {
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

/* Required field: asterisk on label (pair with short form legend where used). */
.form-label.wf-label-required::after {
  content: " *";
  color: var(--bs-danger, #dc3545);
  font-weight: 600;
}

.form-label.wf-label-required.wf-required-satisfied::after {
  color: var(--bs-success, #198754);
}

span.form-label.wf-label-required::after {
  content: " *";
  color: var(--bs-danger, #dc3545);
  font-weight: 600;
}

span.form-label.wf-label-required.wf-required-satisfied::after {
  color: var(--bs-success, #198754);
}

.wf-dashboard-welcome {
  border-top: 3px solid var(--wakefield-green, #31662d) !important;
}

/* IE and legacy Edge (EdgeHTML) draw a built-in "reveal password" control inside password fields.
   Producer SSN already has an app toggle; hide the native control to avoid two eye icons. */
.producer-editor-fields input[type="password"][data-ssn-input]::-ms-reveal,
.producer-editor-fields input[type="password"][data-ssn-input]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}