/* ========================================
   FD Components - Basic Styling
   ======================================== */

/* ========================================
   CARD SYSTEM
   ======================================== */

/* Borderless card shell + FOUC — canonical (COMPONENT-BLUEPRINTS §3) */
.fd-card-borderless {
  border: none;
  box-shadow: var(--shadow-card);
  outline: none;
  opacity: 0;
  transition: opacity var(--transition-fade);
}

.fd-card-borderless.fd-loaded {
  opacity: 1;
}

/* F2 zoned shell elevation */
.fd-card-borderless.fd-card-zoned {
  box-shadow: var(--shadow-md);
}

.fd-card-borderless .card-body {
  border: none;
  outline: none;
}

/* Default body padding when not zeroed by Bootstrap .p-0 */
.fd-card-borderless .card-body:not(.p-0) {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
}

/* Form control chrome → fd-forms.css (FORM-011 extraction) */

/* FD styled checkbox - wrapper-13 style with FD blue (interactive-primary) */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .fd-skin .checkbox-wrapper-13 input[type=checkbox] {
    --active: var(--interactive-primary);
    --active-inner: var(--color-white);
    --focus: 2px rgba(63, 169, 245, 0.3);
    --border: var(--border-primary);
    --border-hover: var(--interactive-primary);
    --background: var(--bg-primary);
    --disabled: var(--form-field-disabled-bg);
    --disabled-inner: var(--color-bpi-softblue);
    -webkit-appearance: none;
    -moz-appearance: none;
    height: var(--form-checkbox-size);
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: var(--stroke-hairline) solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
    cursor: not-allowed;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    width: var(--form-checkbox-size);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
    --o: 1;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox] + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: var(--inset-xs);
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    border-radius: var(--radius-sm); /* 4px — square checkbox (form-field-radius reads as radio on checkbox size) */
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:indeterminate {
    --b: var(--active);
    --bc: var(--active);
    --o: 1;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:indeterminate:after {
    width: 10px;
    height: 2px;
    border: 0;
    background: var(--active-inner);
    left: 5px;
    top: 9px;
    transform: none;
  }
}

.fd-skin .checkbox-wrapper-13 * {
  box-sizing: inherit;
}
.fd-skin .checkbox-wrapper-13 *:before,
.fd-skin .checkbox-wrapper-13 *:after {
  box-sizing: inherit;
}

/* FD column selector toggle (control bar) - switch style with FD blue */
.fd-skin .checkbox-wrapper-2 input[type=checkbox] {
  appearance: none;
  background-color: var(--border-primary);
  border-radius: var(--radius-full); /* switch track pill */
  border: none;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  position: relative;
  width: 30px;
  cursor: pointer;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox],
.fd-skin .checkbox-wrapper-2 input[type=checkbox]::after {
  transition: all 100ms ease-out;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]::after {
  background-color: var(--color-white);
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 14px;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]:hover {
  background-color: var(--color-grey-03);
  transition-duration: 0s;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]:checked {
  background-color: var(--interactive-primary);
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]:checked::after {
  background-color: var(--color-white);
  left: 13px;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]:focus:not(:focus-visible) {
  outline: 0;
}
.fd-skin .checkbox-wrapper-2 input[type=checkbox]:checked:hover {
  background-color: var(--interactive-primary-hover);
}

/* Form control chrome → fd-forms.css (FORM-011 extraction) */

/* Layout-only: form add row buttons inherit canonical .fd-btn* from fd-layout.css */
.fd-form-add-row .fd-btn {
  flex-shrink: 0;
}

/* fd-tab-table - shared across fd-order-add, fd-order-edit, fd-order-detail */
.fd-tab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.fd-tab-table thead th {
  background-color: var(--interactive-primary);
  color: var(--text-inverse);
  font-weight: var(--table-header-weight);
  text-align: center;
  padding: var(--inset-lg);
  border: none;
  font-size: var(--font-size-sm);
}

.fd-tab-table thead th:first-child {
  border-top-left-radius: var(--table-header-radius);
}

.fd-tab-table thead th:last-child {
  border-top-right-radius: var(--table-header-radius);
}

.fd-tab-table tbody td {
  padding: var(--inset-lg);
  text-align: center;
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-bottom: var(--stroke-hairline) solid var(--border-primary);
}

.fd-tab-table tbody tr:nth-child(even) {
  background-color: var(--table-row-stripe);
}

.fd-tab-table tbody tr:nth-child(odd) {
  background-color: var(--table-row-base);
}

.fd-tab-table tbody tr:hover {
  background-color: var(--table-row-hover);
}

.fd-tab-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md);
}

.fd-tab-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md);
}

/* fd-tab-table form row: inputs in table header row (when keeping table layout) */
.fd-tab-table .fd-form-row td {
  border: none;
  padding: var(--inset-sm);
  background: transparent;
  vertical-align: middle;
}

.fd-tab-table .fd-form-row td .form-floating {
  min-width: 0;
}

/* ========================================
   IN-CARD CONTROL TRACKS — tab groups, icon clusters, segmented controls
   Concentric radius: outer = --control-track-radius (8); inner = --control-track-inner-radius (8)
   Same rhythm as .fd-segmented-control (calendar) and Pulse .tab-group
   ======================================== */

.fd-control-track,
.fd-tab-group,
.fd-status-tabs,
.fd-icon-btn-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--control-track-gap);
  padding: var(--control-track-pad);
  min-height: var(--control-track-height);
  box-sizing: border-box;
  border-radius: var(--control-track-radius);
  border: var(--stroke-hairline) solid var(--tab-track-border);
  background: var(--tab-track-fill);
  box-shadow: var(--tab-active-shadow);
}

.fd-control-track-btn,
.fd-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--control-track-item-height);
  min-height: var(--control-track-item-height);
  padding: 0 var(--control-track-btn-pad-x);
  border-radius: var(--control-track-inner-radius);
  border: var(--stroke-hairline) solid transparent;
  background: none;
  font-size: var(--fd-control-font-size);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--transition-ease), color 0.2s var(--transition-ease), box-shadow 0.22s var(--transition-ease), border-color 0.2s var(--transition-ease);
}

.fd-control-track-btn:hover:not(.active),
.fd-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.fd-control-track-btn.active,
.fd-tab-btn.active {
  background: var(--tab-active-bg);
  color: var(--text-primary);
  border-color: var(--border-primary);
  box-shadow: var(--tab-active-shadow);
  font-weight: var(--font-weight-semibold);
}

.fd-control-track-btn:focus-visible:not(.active),
.fd-tab-btn:focus-visible:not(.active) {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 1px;
}

/* Toolbar icon buttons — 28px circles (Pulse .icon-btn.sm.icon-btn-card) */
.fd-toolbar-icon-btn {
  box-sizing: border-box;
  width: var(--fd-toolbar-icon-size);
  height: var(--fd-toolbar-icon-size);
  min-width: var(--fd-toolbar-icon-size);
  max-width: var(--fd-toolbar-icon-size);
  min-height: var(--fd-toolbar-icon-size);
  max-height: var(--fd-toolbar-icon-size);
  padding: 0 !important;
  flex: 0 0 var(--fd-toolbar-icon-size);
  border-radius: var(--radius-full) !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--hover-transition);
}

.fd-toolbar-icon-btn span:not(.fd-filter-badge) {
  display: none !important;
}

.fd-toolbar-icon-btn i {
  margin: 0 !important;
  font-size: var(--font-size-base) !important;
}

.fd-toolbar-icon-btn.dropdown-toggle::after {
  display: none !important;
}

/* Standalone map toggle (outside cluster track) */
.fd-toolbar-icon-btn.fd-map-view-btn {
  border: var(--stroke-hairline) solid var(--border-primary);
  background: var(--bg-primary);
  box-shadow: none;
}

.fd-toolbar-icon-btn.fd-map-view-btn:hover {
  background: var(--tab-active-bg);
  color: var(--text-primary);
}

.fd-toolbar-icon-btn.fd-map-view-btn.active,
.fd-map-view-btn[aria-pressed="true"] {
  border-color: var(--interactive-primary);
  background: var(--bg-accent);
  color: var(--interactive-primary);
}

/* Icons inside cluster track — transparent on grey track */
.fd-icon-btn-cluster .fd-toolbar-icon-btn {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Hover lift only — expanded/active stay flat (no resting elevation) */
.fd-icon-btn-cluster .fd-toolbar-icon-btn:hover {
  box-shadow: var(--shadow-hover-sm);
}

.fd-icon-btn-cluster .fd-toolbar-icon-btn[aria-expanded="true"],
.fd-icon-btn-cluster .fd-toolbar-icon-btn.active,
.fd-icon-btn-cluster .fd-toolbar-icon-btn[aria-pressed="true"] {
  box-shadow: none;
}

.fd-data-toolbar-divider {
  width: 1px;
  height: var(--control-track-item-height);
  background: var(--border-primary);
  margin: 0 var(--inset-2xs);
  flex-shrink: 0;
}

/* ========================================
   CONTENT CARD PADDING - Consistent across all FD pages
   ======================================== */

/* DataTable control bar — compact default; list card overrides in fd-card-zones.css */
.fd-datatable-controls {
  padding: var(--content-card-padding-sm);
}

/* Order detail: card header with actions (replaces title bar) */
.fd-order-detail-title-bar.fd-card-header {
  align-items: center;
}

/* CRUD action icons in tables – icon only at 2em, color by type.
   Do not use .btn on these links: fd-action-btn is self-contained to avoid
   Bootstrap/table .btn padding, transition, and focus styles that cause icon shift. */
.fd-action-btn {
  padding: var(--inset-xs); /* 4px — was 0.28em; content-box + 20 = 28 hit target */
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: var(--inset-xl); /* 20px */
  height: var(--inset-xl);
  min-width: var(--inset-xl);
  min-height: var(--inset-xl);
  box-sizing: content-box;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  border-radius: 50%;
  transition: transform 0.3s ease-out, background-color 0.25s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Isolate layout so parent/cell reflow doesn’t shift the icon */
  contain: layout;
  overflow: visible;
  isolation: isolate;
  margin-left: var(--inset-xs);
}
.fd-action-btn:first-child {
  margin-left: 0;
}

/* Fast tooltip (shows after 200ms) so it appears sooner than native title (~1s) */
.fd-action-btn {
  position: relative;
}
.fd-action-btn[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--inset-xs);
  padding: var(--inset-2xs) var(--inset-xs); /* 2 / 4 — was 0.25em 0.5em */
  background: var(--color-dark);
  color: var(--text-inverse);
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  transition-delay: 0.2s;
  z-index: 1070;
}
.fd-action-btn[aria-label]:hover::after,
.fd-action-btn[aria-label]:focus::after {
  opacity: 1;
  transition-delay: 0.2s;
}
.fd-action-btn[aria-label]:not(:hover):not(:focus)::after {
  transition-delay: 0s;
}

/* Keep multiple action icons in one horizontal row (e.g. Edit + Email) */
.fd-actions-cell {
  display: inline-flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--inset-xs);
}
.fd-actions-cell .fd-action-btn {
  margin-left: 0;
}
.fd-actions-cell .fd-action-btn:not(:first-child) {
  margin-left: var(--inset-xs);
}
.fd-action-btn:hover {
  transform: translateZ(0) scale(1.3);
  background-color: rgba(148, 163, 184, 0.22);
}
.fd-action-btn.text-primary:hover {
  background-color: rgba(13, 110, 253, 0.22);
}
.fd-action-btn.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.22);
}
.fd-action-btn.text-green-900:hover {
  background-color: rgba(34, 197, 94, 0.22);
}
.fd-action-btn i {
  font-size: 1.4em;
  line-height: 1;
  flex-shrink: 0;
}
.fd-action-btn.text-primary {
  color: var(--interactive-primary);
}
.fd-action-btn.text-danger {
  color: var(--status-error);
}
.fd-action-btn.text-green-900 {
  color: var(--status-success);
}
.fd-action-btn.fd-action-btn-orange {
  color: var(--color-orange);
}
.fd-action-btn.fd-action-btn-orange:hover {
  background-color: rgba(249, 115, 22, 0.22);
}

/* No focus/active ring on mouse click; keep fixed size (no zoom on focus/active) */
.fd-action-btn:focus,
.fd-action-btn:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 50% !important;
  padding: var(--inset-xs) !important;
  width: var(--inset-xl) !important;
  height: var(--inset-xl) !important;
  min-width: var(--inset-xl) !important;
  min-height: var(--inset-xl) !important;
  transform: translateZ(0) !important;
}

/* Keyboard focus: visible ring for accessibility */
.fd-action-btn:focus-visible {
  outline: 2px solid var(--interactive-primary) !important;
  outline-offset: 2px;
  border: none !important;
  border-radius: 50% !important;
  padding: var(--inset-xs) !important;
  width: var(--inset-xl) !important;
  height: var(--inset-xl) !important;
  min-width: var(--inset-xl) !important;
  min-height: var(--inset-xl) !important;
  transform: translateZ(0) !important;
}

/* Row action toggles — circular bordered icons (order forms, tables, note cards).
   Prefer .fd-row-toggle over legacy .fd-order-insp-row-toggle (alias below). */
.fd-row-actions,
.fd-order-insp-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: var(--space-xs);
  min-height: var(--form-field-min-height, calc(2.75rem + 2px));
}

.fd-row-actions--table,
.fd-order-insp-table-actions {
  min-height: 0;
}

/* Row overflow menu (Users list: Edit + account visible; password/delete in ⋮) */
.fd-row-actions-more {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.fd-row-actions-more > .fd-row-toggle[aria-expanded="true"] {
  border-color: var(--interactive-primary);
  color: var(--interactive-primary);
  background: color-mix(in srgb, var(--interactive-primary) 12%, var(--bg-primary));
}

.fd-skin .fd-row-actions-menu.dropdown-menu {
  min-width: 11rem;
  z-index: var(--z-dropdown, 1000);
}

.fd-skin .fd-row-actions-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--inset-sm);
  color: var(--text-primary);
}

.fd-skin .fd-row-actions-menu .dropdown-item > i {
  font-size: var(--font-size-body);
  line-height: 1;
  color: var(--text-secondary);
}

.fd-skin .fd-row-actions-menu .dropdown-item.fd-row-actions-menu__danger,
.fd-skin .fd-row-actions-menu .dropdown-item.fd-row-actions-menu__danger > i {
  color: var(--status-error);
}

.fd-skin .fd-row-actions-menu .dropdown-item.fd-row-actions-menu__danger:hover,
.fd-skin .fd-row-actions-menu .dropdown-item.fd-row-actions-menu__danger:focus {
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 10%, var(--bg-primary));
}

.fd-row-toggle,
.fd-order-insp-row-toggle {
  flex-shrink: 0;
  width: var(--fd-toolbar-icon-size);
  height: var(--fd-toolbar-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: var(--stroke-hairline) solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-secondary);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
}

.fd-row-toggle > i,
.fd-order-insp-row-toggle > i {
  font-size: var(--form-field-font-size);
  line-height: 1;
}

.fd-row-toggle--add,
.fd-order-insp-row-toggle--add {
  border-color: color-mix(in srgb, var(--status-success) 35%, var(--border-primary));
  background: color-mix(in srgb, var(--status-success) 12%, var(--bg-primary));
  color: var(--status-success);
}

.fd-row-toggle--add:hover,
.fd-order-insp-row-toggle--add:hover {
  border-color: var(--status-success);
  background: color-mix(in srgb, var(--status-success) 18%, var(--bg-primary));
  color: var(--status-success);
}

.fd-row-toggle--remove,
.fd-order-insp-row-toggle--remove {
  border-color: color-mix(in srgb, var(--status-error) 35%, var(--border-primary));
  background: color-mix(in srgb, var(--status-error) 10%, var(--bg-primary));
  color: var(--status-error);
}

.fd-row-toggle--remove:hover,
.fd-order-insp-row-toggle--remove:hover {
  border-color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 16%, var(--bg-primary));
  color: var(--status-error);
}

.fd-row-toggle--edit,
.fd-order-insp-row-toggle--edit {
  border-color: color-mix(in srgb, var(--interactive-primary) 35%, var(--border-primary));
  background: color-mix(in srgb, var(--interactive-primary) 12%, var(--bg-primary));
  color: var(--interactive-primary);
}

.fd-row-toggle--edit:hover,
.fd-order-insp-row-toggle--edit:hover {
  border-color: var(--interactive-primary);
  background: color-mix(in srgb, var(--interactive-primary) 18%, var(--bg-primary));
  color: var(--interactive-primary);
}

.fd-row-toggle--open,
.fd-order-insp-row-toggle--open {
  border-color: color-mix(in srgb, var(--status-success) 35%, var(--border-primary));
  background: color-mix(in srgb, var(--status-success) 12%, var(--bg-primary));
  color: var(--status-success);
}

.fd-row-toggle--open:hover,
.fd-order-insp-row-toggle--open:hover {
  border-color: var(--status-success);
  background: color-mix(in srgb, var(--status-success) 18%, var(--bg-primary));
  color: var(--status-success);
}

a.fd-row-toggle,
a.fd-order-insp-row-toggle {
  text-decoration: none;
}

a.fd-row-toggle:hover,
a.fd-row-toggle:focus-visible,
a.fd-order-insp-row-toggle:hover,
a.fd-order-insp-row-toggle:focus-visible {
  text-decoration: none;
}

.fd-row-toggle:disabled,
.fd-order-insp-row-toggle:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.fd-row-toggle:focus-visible,
.fd-order-insp-row-toggle:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

/* fd-card-borderless footer (info + pagination) — Pulse .card-footer rhythm */
.fd-card-borderless .fd-card-footer,
.fd-card-borderless #tableFooter,
.fd-card-borderless > div:last-child:not(.card-body):not(.fd-card-body) {
  padding: var(--content-card-footer-pad-top) var(--content-card-pad-x) var(--content-card-footer-pad-bottom);
  border-top: var(--stroke-hairline) solid var(--border-primary);
  margin-top: 0;
}

/* F3 flush shell — guard against footer last-child rule above */
.fd-card-borderless > .fd-card-body.fd-card-body--flush {
  padding: 0;
  border-top: none;
}

/* ========================================
   PRIMARY TABS, DETAIL ROWS, STATUS BADGES
   Canonical — COMPONENT-BLUEPRINTS §6
   ======================================== */

/* Tab control bar — fd-builder-detail, fd-order-add/edit/detail */
.fd-screenshot-tab-controls {
  padding: var(--content-card-header-pad-top) var(--content-card-pad-x) 0;
  border-bottom: var(--stroke-hairline) solid var(--border-primary);
}

/* Tab content area — sides/top body rhythm; outer floor matches header pad-top */
.fd-card .tab-content {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x) var(--content-card-footer-pad-bottom);
}

/* Detail page cards (fd-card without fd-card-borderless) - footer padding */
.fd-card:not(.fd-card-borderless) > div:last-child:not(.card-body):not(.fd-card-body):not(.tab-content) {
  padding: var(--content-card-padding-sm) var(--content-card-pad-x);
}

/* DataTable footer in tab panes (e.g. fd-builder-detail contacts tab) */
.fd-datatable-footer {
  padding: var(--content-card-padding-sm) var(--content-card-pad-x);
}

/* Primary tabs — open text strip (not control-track pills).
   Gap L1 related; pad-inline 12 inside each label (control pad). */
.fd-primary-tabs {
  display: flex;
  gap: var(--content-related-gap); /* L1 — 8 */
  border-bottom: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

.fd-primary-tab {
  background: none;
  border: none;
  padding: var(--inset-md) 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: color var(--transition-normal), font-weight var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.fd-primary-tab:hover {
  color: var(--text-secondary);
}

.fd-primary-tab:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.fd-primary-tab.active {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-semibold);
}

/* Screenshot tabs — room around labels; active frame uses masked border (no fill) */
.fd-screenshot-tab-controls .fd-primary-tab {
  padding-inline: var(--control-pad-x); /* 12 — same as chrome controls */
}

.fd-screenshot-tab-controls .fd-primary-tab.active::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  border: var(--stroke-hairline) solid var(--border-primary);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: inset 0 5px 10px -8px rgb(0 0 0 / 0.06);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    rgb(0 0 0 / 0.45) 62%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    rgb(0 0 0 / 0.45) 62%,
    transparent 100%
  );
}

.fd-screenshot-tab-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--layout-gap-sm);
}

.fd-screenshot-tab-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fd-card .fd-controls-container {
  padding: 0;
}

/* Detail rows — label/value pairs (fd-builder-detail) */
.fd-detail-row {
  display: flex;
  padding: var(--inset-md) 0;
  border-bottom: var(--stroke-hairline) solid var(--border-primary);
}

.fd-detail-row:last-child {
  border-bottom: none;
}

.fd-detail-label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  min-width: 150px;
  flex-shrink: 0;
}

.fd-detail-value {
  color: var(--text-primary);
  flex: 1;
}

/* Status badges — same control-tier recipe as .fd-status-pill */
.fd-status-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--inset-2xs);
  padding: var(--inset-xs) var(--inset-sm); /* 4 × 8 */
  min-height: calc(var(--line-height-meta) + 2 * var(--inset-xs));
  border-radius: var(--radius-button); /* 12 */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-meta);
  white-space: nowrap;
}

.fd-status-active {
  background-color: color-mix(in srgb, var(--status-success) var(--fd-pill-bg-mix), transparent);
  color: var(--status-success);
}

/* Lot value label — rectangular control-tier chip (not stadium / pill shape) */
.fd-lot-label {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--inset-xs) var(--inset-sm); /* 4 × 8 */
  min-height: calc(var(--line-height-meta) + 2 * var(--inset-xs)); /* 24 */
  border-radius: var(--radius-button); /* 12 — control tier */
  border: var(--stroke-hairline) solid var(--border-primary);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-meta);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fd-status-inactive {
  background-color: color-mix(in srgb, var(--status-error) var(--fd-pill-bg-mix), transparent);
  color: var(--status-error);
}

.fd-status-draft {
  background-color: color-mix(in srgb, var(--status-warning) var(--fd-pill-bg-mix), transparent);
  color: var(--status-warning);
}

.fd-status-dormant {
  background-color: color-mix(in srgb, var(--text-secondary) var(--fd-pill-bg-mix), transparent);
  color: var(--text-secondary);
}

/* Table action links (edit/delete in tables) */
.fd-table-action {
  padding: var(--inset-xs) var(--inset-sm);
  margin: 0 var(--inset-xs);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.fd-table-action:hover {
  background-color: var(--bg-secondary);
  color: var(--interactive-primary);
}

.fd-table-action.edit:hover {
  color: var(--interactive-primary);
}

.fd-table-action.delete:hover {
  color: var(--status-error);
}

/* Builder detail: Contacts tab (#tab-contacts) - DataTable controls and footer */
#tab-contacts .fd-datatable-controls {
  background: transparent !important;
  border-bottom: none !important;
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

/* Align control bar row: same height and vertical center for filter, search, and buttons */
#tab-contacts .fd-datatable-controls .fd-controls-container {
  align-items: center;
  min-height: var(--control-track-height); /* 32px — was 2.5rem (35 off-ladder) */
}
#tab-contacts .fd-datatable-controls .fd-controls-left,
#tab-contacts .fd-datatable-controls .fd-controls-center,
#tab-contacts .fd-datatable-controls .fd-controls-right {
  align-items: center;
}

/* Prevent search from overlapping action buttons: cap center width, reserve right */
#tab-contacts .fd-datatable-controls .fd-controls-center {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 0;
  max-width: 196px;
}
#tab-contacts .fd-datatable-controls .fd-controls-right {
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 2;
}

#tab-contacts .fd-datatable-controls .fd-datatable-search.fd-contacts-search-wrap,
#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap {
  flex-shrink: 1;
  min-width: 0;
  max-width: 196px;
  width: 100%;
  display: flex;
  align-items: center;
}

#tab-contacts .fd-datatable-controls .fd-datatable-search .dataTables_filter {
  width: 100%;
  min-width: 0;
  margin: 0;
}

#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
  flex: 1;
}

#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter input {
  flex-grow: 1;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  padding: var(--inset-sm) var(--inset-lg);
  font-family: var(--font-family-primary);
  font-size: var(--nav-arrow-size);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: var(--stroke-hairline) solid var(--border-primary);
  box-shadow: var(--shadow-01);
  transition: var(--hover-transition);
  width: 100%;
}

#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter input:focus {
  outline: none;
  border-color: var(--interactive-primary);
  box-shadow: var(--shadow-focus);
}

#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter input:hover {
  border-color: var(--interactive-primary);
  box-shadow: var(--shadow-hover-md);
}

#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter input::placeholder {
  color: var(--text-secondary);
  font-size: var(--nav-arrow-size);
}

#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter label:before,
#tab-contacts .fd-datatable-controls .fd-contacts-search-wrap .dataTables_filter label:after {
  content: "";
  display: none;
}

#contacts_wrapper .dataTables_filter,
#contacts_wrapper #contacts_filter {
  display: none !important;
}

#tab-contacts .dataTables_wrapper table thead th {
  background-color: var(--interactive-primary) !important;
  color: var(--text-inverse) !important;
}

/* Contacts tab: no padding so table + footer match listing page layout */
#tab-contacts {
  padding: 0;
}

#tab-contacts .table-container {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  margin-top: 0;
}

/* Match listing page footer: same background and border so footer looks attached to table */
#tab-contacts .fd-datatable-footer {
  background: var(--bg-primary);
  margin-top: 0px;
  box-shadow: none;
  border: 0px solid var(--border-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--content-card-padding-sm) var(--content-card-pad-x);
}

#tab-contacts .fd-datatable-footer .d-flex {
  min-height: var(--fd-toolbar-icon-size); /* 28px — was 2.5rem (35 off-ladder) */
}

/* Responsive: slightly reduce padding on smaller screens */
@media (max-width: 767px) {
  .fd-datatable-controls {
    padding: var(--content-card-padding-xs);
  }
  .fd-card-borderless .fd-card-footer,
  .fd-card-borderless #tableFooter,
  .fd-card-borderless > div:last-child:not(.card-body):not(.fd-card-body) {
    padding: var(--content-card-padding-xs) var(--content-card-padding-sm);
  }
}

.fd-card-borderless .table-container {
  border: none;
  outline: none;
}

.fd-card-borderless .table-responsive {
  border: none;
  outline: none;
}

/* Borderless Table Variant — non-zoned cards only (Pattern A .fd-card-zoned → fd-datatable-table.css) */
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  outline: none;
  box-shadow: none;
}

.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless th,
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless td {
  border: none;
  border-bottom: var(--stroke-hairline) solid var(--border-secondary);
  border-left: none;
  border-right: none;
  border-top: none;
}

.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless thead th {
  border-bottom: 2px solid var(--border-primary);
  background-color: var(--bg-secondary);
  border-left: none;
  border-right: none;
  border-top: none;
}

.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless tbody tr:last-child td {
  border-bottom: none;
}

/* Override Bootstrap table borders with higher specificity */
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table {
  border: none;
  outline: none;
  box-shadow: none;
}

.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table td,
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table th {
  border: none;
  border-bottom: var(--stroke-hairline) solid var(--border-secondary);
}

.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table thead th {
  border-bottom: 2px solid var(--border-primary);
  border-left: none;
  border-right: none;
  border-top: none;
}

/* DataTables footer alignment - Clean specificity */
.fd-card-borderless .fd-card-footer .fd-datatable-info {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.fd-card-borderless .fd-card-footer .fd-datatable-pagination {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.fd-card-borderless .fd-card-footer .fd-datatable-pagination .dataTables_paginate {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.fd-card-borderless .fd-card-footer .fd-datatable-info .dataTables_info {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Ultra-high specificity to override Bootstrap without !important — legacy cards only */
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table.table-striped.table-hover,
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table.table-striped.table-hover td,
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table.table-striped.table-hover th,
.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table.table-striped.table-hover thead th {
  border: none;
  border-bottom: var(--stroke-hairline) solid var(--border-secondary);
}

.fd-card-borderless:not(.fd-card-zoned) .fd-table-borderless.table.table-striped.table-hover thead th {
  border-bottom: 2px solid var(--border-primary);
  background-color: var(--bg-secondary);
  font-weight: var(--table-header-weight);
}

/* Remove DataTables wrapper borders with high specificity */
.fd-skin .dataTables_wrapper,
.fd-skin .dataTables_wrapper .dataTables_length,
.fd-skin .dataTables_wrapper .dataTables_filter,
.fd-skin .dataTables_wrapper .dataTables_info,
.fd-skin .dataTables_wrapper .dataTables_paginate,
.fd-skin .dataTables_wrapper .dataTables_processing {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Override DataTables default styling */
.fd-skin .dataTables_wrapper .dataTables_length,
.fd-skin .dataTables_wrapper .dataTables_filter {
  border: none;
  padding: 0;
  margin: 0;
}

.fd-skin .dataTables_wrapper .dataTables_info,
.fd-skin .dataTables_wrapper .dataTables_paginate {
  border: none;
  padding: 0;
  margin: 0;
}

/* Ultra-specific DataTables wrapper border removal */
.fd-card-borderless .fd-skin .dataTables_wrapper,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_length,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_filter,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_info,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_paginate,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_processing,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_scroll,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_scrollHead,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_scrollBody,
.fd-card-borderless .fd-skin .dataTables_wrapper .dataTables_scrollFoot {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/*
  CARD SYSTEM USAGE GUIDE:
  
  BASE CARD (.fd-card):
  - FD-only page/detail shell surface (STACK-010: no Bootstrap .card)
  - Uses design tokens for consistent theming
  - Includes: background, border-radius, padding, shadow, transition, layout
  
  FORMATTING CHILDREN (CARD-POLICY-L0 F2, F5):
  - .fd-card-zoned — F2 list shell
  - .fd-card-tile — F5 KPI tile on .fd-card
  
  USAGE:
  <div class="fd-card fd-card-borderless">…</div>
  
  <div class="fd-card fd-card-borderless fd-card-zoned">…</div>
  
  <div class="fd-card fd-card-tile">…</div>
  
  <div class="fd-card fd-data-card">
    <div class="fd-card-header">Header</div>
    <div class="fd-card-body">Data content</div>
  </div>
*/

/* Base Card Styles */
.fd-card {
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: 0;
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  border: 0px solid var(--border-primary) !important;
}

/* Body zone — .card-body (legacy) and .fd-card-body
 * Outer floor = footer-pad-bottom (24), same as header pad-top. */
.fd-card > .card-body:not(.p-0):not(.fd-p-0):not(.fd-card-body--flush),
.fd-card > .fd-card-body:not(.fd-card-body--flush) {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x) var(--content-card-footer-pad-bottom);
}

/* Under a divided header: top = header→body (16), not a second full 24 — Tips/Summary/etc.
 * Bottom stays outer floor 24 (do not use body-pad-bottom 16 here). */
.fd-card > .fd-card-header.fd-card-header--divided + .card-body:not(.p-0):not(.fd-p-0):not(.fd-card-body--flush),
.fd-card > .fd-card-header.fd-card-header--divided + .fd-card-body:not(.fd-card-body--flush),
.fd-card > .fd-card-header--divided + .card-body:not(.p-0):not(.fd-p-0):not(.fd-card-body--flush),
.fd-card > .fd-card-header--divided + .fd-card-body:not(.fd-card-body--flush) {
  padding: var(--content-card-body-pad-top-after-header) var(--content-card-pad-x) var(--content-card-footer-pad-bottom);
}

/* Companion / nested-density cards — 16 inset; outer bottom 24 matches header pad-top */
.fd-tips-card > .fd-card-header--divided + .fd-card-body:not(.fd-card-body--flush),
.fd-tips-card > .fd-card-header.fd-card-header--divided + .fd-card-body:not(.fd-card-body--flush),
.fd-tips-card > .fd-card-header--divided + .card-body:not(.p-0):not(.fd-p-0):not(.fd-card-body--flush),
.fd-order-preview-card > .fd-card-header--divided + .fd-card-body:not(.fd-card-body--flush),
.fd-order-preview-card > .fd-card-header.fd-card-header--divided + .fd-card-body:not(.fd-card-body--flush),
.fd-order-preview-card > .fd-card-header--divided + .card-body:not(.p-0):not(.fd-p-0):not(.fd-card-body--flush) {
  padding: var(--content-card-padding-sm) var(--content-card-padding-sm) var(--content-card-footer-pad-bottom);
}

/* Flush shell — children use fd-card-content-inset (CARD-SPACING-L0) */
.fd-card-body--flush,
.fd-card > .card-body.fd-card-body--flush,
.fd-card > .card-body.p-0.fd-card-body--flush {
  padding: 0;
}

/* Content inset when outer body is flush (order forms, tab panes) */
.fd-card-content-inset {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
}

.fd-card-content-inset--compact {
  padding: var(--content-card-padding-sm);
}

/* Simple cards without body wrapper — exclude F5 tiles (own --metric-card-pad rhythm) */
.fd-card:not(:has(.card-body)):not(:has(.fd-card-body)):not(:has(.fd-card-header)):not(.fd-card-tile) {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
}

/* Card Header — Pulse .card-header (title + subtitle + optional actions) */
.fd-card-header,
.fd-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--inset-md);
  margin-bottom: 0;
  padding: var(--content-card-header-pad-top) var(--content-card-pad-x) var(--content-card-header-pad-bottom);
  border-bottom: var(--stroke-hairline) solid var(--border-primary);
}

.fd-card-header-title-group {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--inset-xs); /* title → subtitle — related text */
}

.fd-card-header-actions,
.fd-chart-actions {
  display: flex;
  align-items: center;
  gap: var(--inset-sm);
  flex-shrink: 0;
}

.fd-card-title,
.fd-chart-title {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--line-height-body); /* 14→20 */
}

/* Card title as link — keep title colour (beat .fd-skin a interactive blue) */
.fd-skin a.fd-card-title,
.fd-skin a.fd-card-title:visited {
  color: var(--text-primary);
}

.fd-skin a.fd-card-title:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Beat .fd-content-body p prose cascade when subtitle is still a <p> somewhere */
.fd-content-body .fd-card-subtitle,
.fd-content-body .fd-chart-subtitle,
.fd-card-subtitle,
.fd-chart-subtitle {
  font-size: var(--font-size-subtitle);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--line-height-secondary); /* 12→16 */
}

.fd-card-subtitle--with-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Nested card — concentric inset surface (same rhythm as .fd-form-group-panel) */
.fd-card.fd-card-nested {
  border-radius: var(--form-group-panel-radius);
  border: var(--stroke-hairline) solid var(--border-primary);
  box-shadow: var(--shadow-01);
  background: var(--bg-primary);
  overflow: hidden;
}

.fd-card.fd-card-nested > .card-body:not(.p-0):not(.fd-p-0):not(.fd-card-body--flush),
.fd-card.fd-card-nested > .fd-card-body:not(.fd-card-body--flush) {
  padding: var(--content-card-padding-sm);
}

.fd-card.fd-card-nested > .fd-card-body.fd-card-body--flush {
  padding: 0;
}

/* Form group panel — Pulse FormGroupPanel (inset section inside form shell, not fd-card-nested) */
.fd-form-group-panel {
  border-radius: var(--form-group-panel-radius);
  border: var(--stroke-hairline) solid var(--border-primary);
  box-shadow: none;
  background: var(--bg-primary);
  overflow: hidden;
}

.fd-form-group-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm); /* 16 — same as page/panel stacks */
  padding: var(--content-card-padding-sm); /* 16 — nested tier (shell cards use 24) */
}

.fd-form-group-panel .fd-nested-section-title {
  margin-bottom: 0; /* gap on __body owns title → content */
}

/* In-panel empty — parent __body already has 16 inset; do not stack a second pad */
.fd-form-group-panel .fd-empty-state,
.fd-card-nested .fd-empty-state,
.fd-order-form-tabs .fd-form-group-panel .fd-empty-state {
  padding: 0;
}

.fd-form-group-panel .fd-empty-state-icon,
.fd-card-nested .fd-empty-state-icon {
  width: calc(32 / 13 * 1rem); /* 32 — 8×4pt; dense in-panel */
  height: calc(32 / 13 * 1rem);
  margin-bottom: var(--inset-sm);
}

.fd-form-group-panel .fd-empty-state-icon i,
.fd-card-nested .fd-empty-state-icon i {
  font-size: var(--font-size-xl); /* 18 — fits 32 circle */
}

.fd-form-group-panel .fd-empty-state-message,
.fd-card-nested .fd-empty-state-message {
  margin-bottom: 0;
  font-size: var(--font-size-secondary); /* 12 — in-panel, not page empty */
  line-height: var(--line-height-secondary);
}

.fd-form-group-panel .fd-nested-section-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

/* ========================================
   F5 TILE — fd-card-tile (CARD-POLICY-L0 F5)
   ======================================== */

/*
  Shipped stack: .fd-metric-card (standalone F5 primitive)
  Future alias:  .fd-card.fd-card-tile (add both classes when migrating — never fd-card alone)

  Modifiers: fd-metric-card-link, fd-metric-card-tappable, fd-metric-card-primary-mobile,
              fd-metric-card-strip, fd-revenue-card, fd-metric-card--flush

  Padding: --metric-card-pad (24px symmetric). Ref: CARD-SPACING-L0 F5
*/

/* F5 tile shell */
.fd-metric-card,
.fd-card.fd-card-tile {
  background: var(--bg-primary);
  border: var(--stroke-hairline) solid transparent; /* reserve edge — greys on hover */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  padding: var(--metric-card-pad);
  justify-content: flex-start;
  min-height: auto;
}

.fd-metric-card:hover,
.fd-card.fd-card-tile:hover {
  transform: none;
}

/* When F5 uses fd-card parent — isolate from generic .fd-skin .fd-card T2 shell */
.fd-skin .fd-card.fd-card-tile,
.fd-skin a.fd-card.fd-card-tile {
  border-radius: var(--radius-card);
  overflow: visible;
  justify-content: flex-start;
  padding: var(--metric-card-pad);
}

/* Optional: remove side margins to align tightly with adjacent content */
.fd-metric-card--flush {
  margin-left: 0;
  margin-right: 0;
}

/* Metric card padding uses zone tokens at all breakpoints (PULSE-06) — no breakpoint overrides needed */

/* Clickable metric cards — link shell; padding/radius from .fd-metric-card (PULSE-08) */
.fd-metric-card-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card);
  transition: var(--transition-surface);
}

.fd-metric-card-link:hover {
  transform: none;
  color: inherit;
}

.fd-metric-card-link:focus {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

/* Ensure equal height metric cards inside stats grids (without altering column display) */
.fd-stats-section .row,
.fd-stats-section .fd-stats-metrics-grid {
  align-items: stretch;
}

.fd-stats-section .fd-metric-card {
  height: 100%;
  display: flex;
  margin-bottom: 0;
}

/* Activity Card - includes base card styling with activity-specific overrides */
.fd-activity-card {
  /* Base card styles */
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: var(--layout-gap-lg); /* Override padding for activities */
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Activity-specific overrides */
  min-height: 400px;
}

.fd-activity-card:hover {
  transform: none;
}

/* Stats Card - includes base card styling with stats-specific overrides */
.fd-stats-card {
  /* Base card styles */
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: var(--layout-gap-lg); /* Override padding for stats */
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Stats-specific overrides */
  min-height: 300px;
}

.fd-stats-card:hover {
  transform: none;
}

/* Stat Card (small) - includes base card styling with compact overrides */
.fd-stat-card {
  /* Base card styles */
  background: var(--bg-primary);
  border-radius: var(--radius-lg); /* Override border radius for smaller cards */
  padding-top: var(--content-card-body-pad-y);
  padding-bottom: var(--content-card-body-pad-y);
  padding-left: var(--content-card-pad-x);
  padding-right: var(--content-card-pad-x);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: row; /* Override flex direction for horizontal layout */
  justify-content: space-between;
  break-inside: avoid;
  
  /* Stat-specific overrides */
  align-items: center;
  gap: var(--inset-lg);
  min-height: auto;
}

.fd-stat-card:hover {
  transform: none;
}

/* ========================================
   ADDITIONAL CONTENT-SPECIFIC CARDS
   ======================================== */

/* Data Card - includes base card styling for data tables or lists */
.fd-data-card {
  /* Base card styles */
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: 0; /* Override padding for data content */
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Data-specific overrides */
  overflow: hidden;
}

.fd-data-card .fd-card-header {
  padding: var(--content-card-header-pad-top) var(--content-card-pad-x) var(--content-card-header-pad-bottom);
  margin-bottom: 0;
}

.fd-data-card .fd-card-body {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
}

/* Form Card - includes base card styling for forms and inputs */
.fd-form-card {
  /* Base card styles */
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: var(--layout-gap-lg);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Form-specific overrides */
  max-width: 600px;
  margin: 0 auto;
}

/* Info Card - includes base card styling for information display */
.fd-info-card {
  /* Base card styles */
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Info-specific overrides */
  border-left: 4px solid var(--interactive-primary);
}

/* Warning Card - includes base card styling for warnings and alerts */
.fd-warning-card {
  /* Base card styles */
  background: var(--status-warning-light);
  border-radius: var(--radius-card);
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Warning-specific overrides */
  border-left: 4px solid var(--status-warning);
}

/* Error Card - includes base card styling for errors and critical messages */
.fd-error-card {
  /* Base card styles */
  background: var(--status-error-light);
  border-radius: var(--radius-card);
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Error-specific overrides */
  border-left: 4px solid var(--status-error);
}

/* Success Card - includes base card styling for success messages */
.fd-success-card {
  /* Base card styles */
  background: var(--status-success-light);
  border-radius: var(--radius-card);
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
  box-shadow: var(--shadow-01);
  transition: var(--transition-surface);
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  break-inside: avoid;
  
  /* Success-specific overrides */
  border-left: 4px solid var(--status-success);
}

/* 2×2 grid: label (row 1) + KPI (row 2) left; icon spans both rows right */
.fd-metric-content {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--inset-lg);
  row-gap: var(--inset-sm);
  width: 100%;
}

/* Wrappers flatten so children land on the grid */
.fd-metric-info,
.fd-metric-header {
  display: contents;
}

.fd-metric-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: var(--line-height-secondary); /* 12→16 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 0;
}

.fd-metric-value {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-size: var(--font-size-kpi);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-display); /* 24→32 (was tight 1.25→30) */
  letter-spacing: -0.5px;
}

.fd-metric-visual {
  grid-column: 2;
  grid-row: 1 / -1;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: end;
}

.fd-stat-icon {
  width: calc(52 / 13 * 1rem); /* 52px — 13×4pt */
  height: calc(52 / 13 * 1rem); /* 52px — 13×4pt */
  border-radius: var(--stat-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
}

.fd-stat-icon-blue {
  background: linear-gradient(135deg, var(--color-primary-0), var(--color-primary-1));
  color: var(--text-inverse);
}

.fd-stat-icon-orange {
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange));
  color: var(--text-inverse);
}

.fd-stat-icon-green {
  background: linear-gradient(135deg, var(--status-success), var(--status-success));
  color: var(--text-inverse);
}

.fd-stat-icon-red {
  background: linear-gradient(135deg, var(--status-error), var(--status-error));
  color: var(--text-inverse);
}

.fd-stat-icon-purple {
  background: linear-gradient(135deg, var(--interactive-primary), var(--interactive-primary-active));
  color: var(--text-inverse);
}

/* ========================================
   METRIC CHANGE GRAPHIC (F5 right-slot)
   Opt-in: .fd-stats-section--change via fd_stats_responsive(..., change=True)
   JS twin: fd-metric-change.js → window.FDMetricChange
   Structure: glyph (up/down/flat) + meta primary + optional meta secondary line
   ======================================== */

.fd-metric-title-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-normal, 400);
  color: var(--text-tertiary);
  opacity: 0.85;
}

.fd-stats-section--change .fd-stats-metrics-grid {
  align-items: stretch;
}

.fd-stats-section--change .fd-metric-card {
  height: 100%;
  min-height: 0;
}

.fd-stats-section--change .fd-metric-content {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--content-group-gap, 1rem);
  row-gap: var(--inset-xs, 0.25rem);
  align-items: start;
  min-width: 0;
}

.fd-stats-section--change .fd-metric-title {
  font-size: var(--font-size-meta, 0.6875rem);
  line-height: var(--line-height-meta, 1rem);
  color: var(--text-tertiary);
}

.fd-stats-section--change .fd-metric-value {
  font-size: var(--font-size-kpi);
  line-height: var(--line-height-display);
  min-width: 0;
  max-width: 100%;
}

.fd-stats-section--change .fd-metric-value--loading {
  color: var(--text-tertiary);
  opacity: 0.55;
  letter-spacing: 0.08em;
}

.fd-stats-section--change .fd-metric-value--wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--font-size-title, 1rem);
  line-height: var(--line-height-title, 1.5rem);
  letter-spacing: -0.02em;
}

.fd-stats-section--change .fd-metric-secondary {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  min-height: var(--line-height-meta, 1rem);
  font-size: var(--font-size-meta, 0.6875rem);
  line-height: var(--line-height-meta, 1rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--text-tertiary);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fd-stats-section--change .fd-metric-visual {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
}

/* Decorative icon replaced by change graphic */
.fd-stats-section--change .fd-metric-icon-slot {
  display: none !important;
}

.fd-metric-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--inset-2xs, 0.125rem);
  text-align: center;
  min-width: 4.25rem;
  color: var(--text-tertiary);
}

.fd-metric-change__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(40 / 13 * 1rem);
  height: calc(40 / 13 * 1rem);
  border-radius: var(--radius-control, 0.75rem);
  background: var(--color-grey-05, #f3f4f6);
  color: inherit;
}

.fd-metric-change__glyph .ti {
  font-size: calc(22 / 13 * 1rem);
  line-height: 1;
}

.fd-metric-change__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: var(--font-size-meta, 0.6875rem);
  line-height: var(--line-height-meta, 1rem);
  font-weight: var(--font-weight-medium, 500);
  color: inherit;
  max-width: 5.5rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fd-metric-change__meta-primary {
  font-weight: var(--font-weight-semibold, 600);
}

.fd-metric-change__meta-secondary {
  font-weight: var(--font-weight-normal, 400);
  opacity: 0.85;
}

/* Direction = glyph; tone = colour (worse↑ / better↑) */
.fd-metric-change.is-tone-worse {
  color: var(--status-error, #dc2626);
}

.fd-metric-change.is-tone-worse .fd-metric-change__glyph {
  background: var(--status-error-light, #fee2e2);
}

.fd-metric-change.is-tone-better {
  color: var(--status-success, #16a34a);
}

.fd-metric-change.is-tone-better .fd-metric-change__glyph {
  background: var(--status-success-light, #dcfce7);
}

.fd-metric-change.is-tone-neutral,
.fd-metric-change.is-loading {
  color: var(--text-tertiary);
}

.fd-metric-change.is-loading .fd-metric-change__glyph {
  background: var(--color-grey-05, #f3f4f6);
  opacity: 0.7;
}

.fd-metric-change.is-loading .fd-metric-change__meta {
  letter-spacing: 0.08em;
}

.fd-stats-section--change .fd-metric-card-strip .fd-metric-change {
  min-width: 3.5rem;
}

.fd-stats-section--change .fd-metric-card-strip .fd-metric-change__glyph {
  width: calc(32 / 13 * 1rem);
  height: calc(32 / 13 * 1rem);
}

.fd-stats-section--change .fd-metric-card-strip .fd-metric-change__glyph .ti {
  font-size: calc(18 / 13 * 1rem);
}

/* ========================================
   ICON TREATMENTS — Duo-Tint / Duo-Tone (FD-ICON-POLICY)
   See docs/fd-icon-module/FD-ICON-POLICY.md
   ======================================== */

/* Duo-Tone (D): saturated fill + inverse glyph — stat cards, feature tiles */
.fd-icon-tone {
  width: calc(52 / 13 * 1rem); /* 52px — 13×4pt */
  height: calc(52 / 13 * 1rem); /* 52px — 13×4pt */
  border-radius: var(--stat-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
}

.fd-icon-tone-blue {
  background: linear-gradient(135deg, var(--color-primary-0), var(--color-primary-1));
  color: var(--text-inverse);
}

.fd-icon-tone-orange {
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange));
  color: var(--text-inverse);
}

.fd-icon-tone-green {
  background: linear-gradient(135deg, var(--status-success), var(--status-success));
  color: var(--text-inverse);
}

.fd-icon-tone-red {
  background: linear-gradient(135deg, var(--status-error), var(--status-error));
  color: var(--text-inverse);
}

.fd-icon-tone-purple {
  background: linear-gradient(135deg, var(--interactive-primary), var(--interactive-primary-active));
  color: var(--text-inverse);
}

/* Duo-Tint (T): soft tint circle + semantic glyph — detail values, empty states */
.fd-icon-tint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.fd-icon-tint-sm {
  width: var(--icon-bg-size-sm);
  height: var(--icon-bg-size-sm);
  font-size: 0.875rem;
}

.fd-icon-tint-nav {
  width: 2rem;
  height: 2rem;
  font-size: 1.125rem;
}

.fd-icon-tint-md {
  width: var(--icon-bg-size-md);
  height: var(--icon-bg-size-md);
  font-size: var(--font-size-base);
}

.fd-icon-tint-lg {
  width: 4rem;
  height: 4rem;
  font-size: var(--font-size-display-sm);
}

.fd-icon-tint-primary {
  background-color: var(--bg-accent);
  color: var(--interactive-primary);
}

.fd-icon-tint-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

.fd-icon-tint-success {
  background-color: var(--icon-bg-success, rgba(50, 209, 109, 0.1));
  color: var(--status-success);
}

.fd-icon-tint-warning {
  background-color: var(--icon-bg-warning, rgba(255, 135, 35, 0.1));
  color: var(--status-warning);
}

.fd-icon-tint-error {
  background-color: var(--icon-bg-error, rgba(244, 61, 61, 0.1));
  color: var(--status-error);
}

.fd-icon-tint-muted {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

/* ========================================
   PAGE LAYOUT — Pulse .page / .page-grid parity
   ======================================== */

/* Vertical stack of grid rows (Pulse: multiple .page-grid blocks in .page) */
.fd-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--page-stack-gap);
}

/* Flash alerts — spacing from page-stack gap, not extra margin */
.fd-page-stack > .fd-alerts-container {
  margin-bottom: 0;
}

.fd-main-content:not(.fd-page-stack) > .fd-alerts-container {
  margin-bottom: var(--page-stack-gap);
}

.fd-page-grid {
  display: grid;
  /* Equal fluid columns — always share the full row */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fd-page-grid-gap); /* L2 — sibling columns; page-stack owns L2 between rows */
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
}

/*
  Full width + 4pt track math:
  - Outer grid stays width: 100% (same edge as sibling rows).
  - Equal `1fr` tracks → every card shares the row and grows with the viewport.
  - Trim (0–47px) is split evenly on both sides so the row stays visually
    centered; the column content box still satisfies
    (inner − 11×gap) ÷ 12 ∈ 4px.
*/
@supports (width: mod(100%, 4px)) {
  .fd-page-grid {
    --fd-page-grid-trim: mod(
      calc(100% - 11 * var(--fd-page-grid-gap)),
      48px
    );
    padding-inline: calc(var(--fd-page-grid-trim) / 2);
  }
}

.fd-span-2  { grid-column: span 2; min-width: 0; }
.fd-span-3  { grid-column: span 3; min-width: 0; }
.fd-span-4  { grid-column: span 4; min-width: 0; }
.fd-span-6  { grid-column: span 6; min-width: 0; }
.fd-span-8  { grid-column: span 8; min-width: 0; }
.fd-span-9  { grid-column: span 9; min-width: 0; }
.fd-span-12 { grid-column: span 12; min-width: 0; }
/* Equal share inside fd-stats-metrics-grid--5 (not a 12-col span) */
.fd-span-auto { grid-column: auto; min-width: 0; }

/* 5 KPIs — fill full content width (12-col can't divide 5 evenly).
   No 4pt trim inset — edges must match page chrome search / filter strip. */
.fd-stats-metrics-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-inline: 0;
}
.fd-stats-metrics-grid--5 > [class*="fd-span-"] {
  grid-column: auto;
}

/* 6 KPIs — equal sixths via 12-col (span 2); keep 12-track parent */
.fd-stats-metrics-grid--6 > .fd-span-2 {
  grid-column: span 2;
}

/* Grid cell children stretch (stat cards, chart cards) */
.fd-page-grid > [class*="fd-span-"] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* F1 content panel — dashboard widgets, chart blocks (same shell as form-page cards) */
.fd-card.fd-panel-card {
  background: var(--bg-primary);
  border-radius: var(--radius-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.fd-page-grid > [class*="fd-span-"] > .fd-card.fd-card-tile,
.fd-page-grid > [class*="fd-span-"] > .fd-metric-card,
.fd-page-grid > [class*="fd-span-"] > .fd-panel-card,
.fd-page-grid > [class*="fd-span-"] > .fd-chart-container,
.fd-page-grid > [class*="fd-span-"] > .fd-metric-card-link,
.fd-page-grid > [class*="fd-span-"] > a.fd-metric-card-link,
.fd-page-grid > [class*="fd-span-"] > a.fd-card.fd-card-tile {
  flex: 1;
  width: 100%;
}

@media (max-width: 991.98px) {
  .fd-span-2,
  .fd-span-3,
  .fd-span-4,
  .fd-span-6,
  .fd-span-8,
  .fd-span-9,
  .fd-span-auto {
    grid-column: span 12;
  }

  .fd-stats-metrics-grid--5 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.fd-main-content {
  padding: 0;
}

/* Legacy flex gap — same vertical owner as .fd-page-stack */
.fd-main-content:not(.fd-page-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--page-stack-gap);
}

.fd-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Spacing from .fd-content-body gap / .fd-page-stack — no extra margin */
  margin-bottom: 0;
}

.fd-page-actions:empty {
  display: none;
}

.fd-page-subtitle-section {
  margin-bottom: var(--layout-gap-md);
}

.fd-page-subtitle {
  font-size: var(--font-size-page-subtitle);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

.fd-stats-section {
  margin-bottom: 0;
}

/* Mobile stats strip — fd_stats_responsive.html (2 cards per row + interval auto-scroll) */
@media (max-width: 991.98px) {
  .fd-stats-mobile {
    display: block;
  }

  .fd-stats-strip {
    padding-bottom: var(--inset-sm);
    /* Keep strip metrics from painting outside the page column while scrolling */
    overflow: hidden;
  }

  .fd-stats-strip-inner {
    display: flex;
    gap: var(--inset-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    cursor: grab;
    touch-action: pan-x;
  }

  .fd-stats-strip-inner::-webkit-scrollbar {
    display: none;
  }

  .fd-stats-strip-inner.fd-stats-strip-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .fd-stats-strip-item {
    flex: 0 0 calc(50% - (var(--inset-sm) / 2));
    min-width: calc(50% - (var(--inset-sm) / 2));
    max-width: calc(50% - (var(--inset-sm) / 2));
    scroll-snap-align: start;
  }

  .fd-stats-strip--fit .fd-stats-strip-inner {
    scroll-snap-type: none;
  }

  .fd-metric-card-strip {
    padding: var(--inset-lg);
  }

  .fd-metric-card-strip .fd-metric-content {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--inset-xs);
    column-gap: var(--inset-sm); /* 8 — more room for title before icon */
  }

  /* Single-line titles; ellipsis if still too long (avoid wrap + empty trailing space) */
  .fd-metric-card-strip .fd-metric-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .fd-stats-strip-inner {
      scroll-behavior: auto;
    }
  }
}

.fd-dashboard-metrics .fd-metric-col,
.fd-order-detail-metrics .fd-metric-col {
  display: flex;
}

.fd-dashboard-metrics .fd-metric-card-link {
  width: 100%;
}

.fd-stats-metrics-grid {
  margin-bottom: 0;
}

/* ========================================
   INTRO SECTION (Subtitle + Actions Row)
   ======================================== */
.fd-page-intro-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap-sm);
  margin-bottom: var(--layout-gap-md);
  flex-wrap: wrap; /* allow actions to move down when space is tight */
}

.fd-page-intro-left {
  min-width: 0;
  flex: 1 1 320px; /* grow and shrink; break to next line when too small */
}

.fd-page-intro-right {
  display: flex;
  align-items: center;
  gap: var(--inset-sm);
  flex: 0 1 auto;
}

@media (max-width: 768px) {
  .fd-page-intro-section {
    flex-direction: column;
    align-items: stretch;
    gap: var(--layout-gap-sm);
  }
  .fd-page-intro-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.fd-datatable-section {
  margin-bottom: var(--layout-gap-lg);
}

.fd-datatable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--inset-lg);
  flex-wrap: wrap; /* allow controls to flow to next line */
  row-gap: var(--inset-sm);
}

.fd-section-title {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
}

/* Ensure only the table scrolls horizontally, not the page */
.fd-datatable-table {
  width: 100%;
}

.fd-table-responsive,
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   COMPREHENSIVE RESPONSIVE TABLE SYSTEM
   NO DEAD ZONES - COVERS ALL SCREEN SIZES
   ======================================== */

/* Base table responsive behavior - always scrollable */
.fd-table-responsive,
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure table containers are always scrollable */
.fd-datatable-section {
  overflow-x: auto;
  width: 100%;
}

.fd-datatable-table {
  overflow-x: auto;
  min-width: 100%;
  width: 100%;
}

/* ========================================
   RESPONSIVE BREAKPOINTS - NO GAPS
   ======================================== */

/* 
   BREAKPOINT 1: Extra Small Devices (0px - 575px)
   - Header: Stacked layout, hamburger menu, compact search
   - Sidebar: Hidden, hamburger menu visible
   - Table: Modal details
*/
/* Extra Small Devices: 0px - 575px */
@media (max-width: 575px) {
  .fd-table-modern {
    min-width: 500px;
    font-size: var(--font-size-xs);
  }
  
  .fd-table-modern th,
  .fd-table-modern td {
    padding: var(--inset-xs) var(--inset-sm);
    white-space: nowrap;
  }
  
  /* Force horizontal scroll on very small screens */
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* DataTables responsive override for very small screens */
  .dtr-hidden {
    display: none;
  }
  
  .dtr-details {
    display: block;
  }
}

/* 
   BREAKPOINT 2: Small Devices (576px - 767px)
   - Header: Horizontal layout, hamburger menu, medium search
   - Sidebar: Hidden, hamburger menu visible
   - Table: Modal details
*/
/* Small Devices: 576px - 767px */
@media (min-width: 576px) and (max-width: 767px) {
  .fd-table-modern {
    min-width: 600px;
    font-size: var(--font-size-sm);
  }
  
  .fd-table-modern th,
  .fd-table-modern td {
    padding: var(--inset-sm) var(--inset-md);
  }
  
  /* Ensure horizontal scroll works */
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* DataTables responsive behavior */
  .dtr-hidden {
    display: none;
  }
  
  .dtr-details {
    display: block;
  }
}

/* 
   BREAKPOINT 3: Medium Devices (768px - 991px)
   - Header: Desktop layout, sidebar toggle, full search
   - Sidebar: Desktop sidebar, toggle button visible
   - Table: Horizontal scroll, show all columns
*/
/* Medium Devices: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .fd-table-modern {
    min-width: 700px;
    font-size: var(--font-size-sm);
  }
  
  .fd-table-modern th,
  .fd-table-modern td {
    padding: var(--inset-md) var(--inset-lg);
  }
  
  /* Force horizontal scroll in this range */
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Override DataTables responsive hiding - show all columns with scroll */
  .dtr-hidden {
    display: table-cell;
  }
  
  .dtr-details {
    display: none;
  }
  
  /* Ensure table doesn't break */
  .fd-datatable-table {
    overflow-x: auto;
  }
}

/* 
   BREAKPOINT 4: Large Devices (992px - 1199px)
   - Header: Desktop layout, sidebar toggle, full search
   - Sidebar: Desktop sidebar, toggle button visible
   - Table: Horizontal scroll if needed, show all columns
*/
/* Large Devices: 992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  .fd-table-modern {
    min-width: 800px;
    font-size: var(--font-size-sm);
  }
  
  .fd-table-modern th,
  .fd-table-modern td {
    padding: var(--inset-md) var(--inset-lg);
  }
  
  /* Allow horizontal scroll if needed */
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Show all columns */
  .dtr-hidden {
    display: table-cell;
  }
  
  .dtr-details {
    display: none;
  }
}

/* 
   BREAKPOINT 5: Extra Large Devices (1200px - 1399px)
   - Header: Desktop layout, sidebar toggle, full search
   - Sidebar: Desktop sidebar, toggle button visible
   - Table: Minimal scroll, mostly full display
*/
/* Extra Large Devices: 1200px - 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
  .fd-table-modern {
    min-width: 900px;
    font-size: var(--font-size-sm);
  }
  
  .fd-table-modern th,
  .fd-table-modern td {
    padding: var(--inset-md) var(--inset-lg);
  }
  
  /* Minimal horizontal scroll, mostly full display */
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Show all columns */
  .dtr-hidden {
    display: table-cell;
  }
  
  .dtr-details {
    display: none;
  }
}

/* 
   BREAKPOINT 6: XXL Devices (1400px+)
   - Header: Desktop layout, sidebar toggle, full search
   - Sidebar: Desktop sidebar, toggle button visible
   - Table: Full display, no scroll needed
*/
/* XXL Devices: 1400px+ */
@media (min-width: 1400px) {
  .fd-table-modern {
    min-width: 100%;
    font-size: var(--font-size-sm);
  }
  
  .fd-table-modern th,
  .fd-table-modern td {
    padding: var(--inset-lg) var(--inset-xl);
  }
  
  /* Full table display, no scroll needed */
  .fd-table-responsive,
  .table-responsive {
    overflow-x: visible;
  }
  
  /* Show all columns */
  .dtr-hidden {
    display: table-cell;
  }
  
  .dtr-details {
    display: none;
  }
}

/* ========================================
   SPECIFIC DEAD ZONE FIXES
   ======================================== */

/* Fix for the problematic 768px-861px range specifically */
@media (min-width: 768px) and (max-width: 861px) {
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .fd-table-modern {
    min-width: 100%;
    table-layout: auto;
  }
  
  .fd-datatable-table {
    overflow-x: auto !important;
  }
  
  /* Force DataTables to show all columns with scroll */
  .dtr-hidden {
    display: table-cell;
  }
  
  .dtr-details {
    display: none;
  }
}

/* Fix for any other potential dead zones */
@media (min-width: 862px) and (max-width: 991px) {
  .fd-table-responsive,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .dtr-hidden {
    display: table-cell;
  }
  
  .dtr-details {
    display: none;
  }
}

/* Utilities to assist wrapping in tight spaces */
.fd-flex-wrap { flex-wrap: wrap; }
.fd-min-0 { min-width: 0; }
.fd-flex-1 { flex: 1 1 auto; }

/* ========================================
   ALERTS
   ======================================== */

.fd-alerts-container {
  margin-bottom: var(--page-stack-gap);
}

.fd-alerts-container .alert {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--inset-lg) var(--inset-xl);
  margin-bottom: var(--inset-md);
}

.fd-alerts-container .alert:last-child {
  margin-bottom: 0;
}

/* Smooth animations for flash/message alerts */
.fd-alerts-container .alert {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Dynamic message show/hide animation (used by showMessage) - smooth layout transition */
.alert.fd-message-animated {
  transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease, border-width 0.35s ease;
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.alert.fd-message-animated.fd-message-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
  overflow: visible;
  margin-bottom: var(--inset-lg);
  padding-top: var(--inset-lg);
  padding-bottom: var(--inset-lg);
  border-width: var(--stroke-hairline);
}

.alert.fd-message-animated.fd-message-fade-out {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  .fd-page-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  /* PULSE-07: keep KPI at 26px — do not downscale on tablet */
  .fd-metric-value {
    font-size: var(--font-size-kpi);
  }
  
  .fd-stat-icon {
  width: calc(40 / 13 * 1rem);
  height: calc(40 / 13 * 1rem);
    font-size: var(--font-size-xl);
  }
}

/* ========================================
   Floating menus — shared dropdown chrome
   (--dropdown-menu-border + --dropdown-menu-shadow + --dropdown-menu-blur).
   Modals / event cards stay on --glass-panel-* (heavier 12px glass).
   ======================================== */

.fd-skin .fd-menu-surface {
  background: var(--glass-bg, rgba(255, 255, 255, 0.55));
  backdrop-filter: blur(var(--dropdown-menu-blur));
  -webkit-backdrop-filter: blur(var(--dropdown-menu-blur));
  border: var(--dropdown-menu-border);
  box-shadow: var(--dropdown-menu-shadow);
  border-radius: var(--dropdown-panel-radius); /* 16 — panel tier */
  color: var(--text-primary);
}

/* Inspection context menu — shared FD panel (order detail + calendar)
   Canonical home: fd-components (loaded on all FD pages). */
#inspection-context-menu.context-menu,
#inspection-context-menu.fd-cal-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 13.5rem;
  width: max-content;
  max-width: min(20rem, calc(100vw - 24px));
  padding: var(--inset-xs);
  border-radius: var(--dropdown-panel-radius);
  border: var(--dropdown-menu-border);
  background: var(--glass-panel-bg, rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(var(--dropdown-menu-blur));
  -webkit-backdrop-filter: blur(var(--dropdown-menu-blur));
  box-shadow: var(--dropdown-menu-shadow);
  color: var(--text-primary);
  user-select: none;
  overflow: visible;
  font-family: var(--font-family-primary, inherit);
}

#inspection-context-menu.context-menu .context-menu-list,
#inspection-context-menu.context-menu .context-menu-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

#inspection-context-menu.context-menu .context-menu-item {
  margin: 0;
  border-radius: var(--radius-button);
}

#inspection-context-menu.context-menu .context-menu-item--sep {
  margin-top: var(--inset-xs);
  padding-top: var(--inset-xs);
  border-top: var(--stroke-hairline) solid var(--border-primary);
  border-radius: 0 0 var(--radius-button) var(--radius-button);
}

#inspection-context-menu.context-menu .context-menu-item--sep .context-menu-btn {
  border-radius: var(--radius-button);
}

#inspection-context-menu.context-menu .context-menu-item.has-submenu {
  position: relative;
}

#inspection-context-menu.context-menu .context-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--inset-sm);
  width: 100%;
  min-height: var(--dropdown-item-min-height, var(--control-track-height));
  padding: var(--dropdown-item-pad-y, var(--inset-sm)) var(--dropdown-item-pad-x, var(--inset-md));
  margin: 0;
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-family-primary, inherit);
  font-size: var(--fd-control-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-secondary);
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

#inspection-context-menu.context-menu .context-menu-btn:hover,
#inspection-context-menu.context-menu .context-menu-item.has-submenu.open > .context-menu-btn {
  background: var(--bg-accent);
  color: var(--interactive-primary);
}

#inspection-context-menu.context-menu .context-menu-btn:hover .context-menu-icon i,
#inspection-context-menu.context-menu .context-menu-item.has-submenu.open > .context-menu-btn .context-menu-icon i {
  color: var(--interactive-primary);
}

#inspection-context-menu.context-menu .context-menu-btn:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 1px;
}

#inspection-context-menu.context-menu .context-menu-label {
  flex: 1;
  min-width: 0;
}

#inspection-context-menu.context-menu .context-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(16 / 13 * 1rem);
  flex-shrink: 0;
  line-height: 0;
}

#inspection-context-menu.context-menu .context-menu-icon i {
  font-size: var(--font-size-title);
  line-height: var(--line-height-none);
  color: var(--text-tertiary);
}

#inspection-context-menu.context-menu .context-menu-icon--primary i {
  color: var(--interactive-primary);
}

#inspection-context-menu.context-menu .context-menu-icon--success i {
  color: var(--status-success);
}

#inspection-context-menu.context-menu .context-menu-icon--danger i {
  color: var(--status-error);
}

#inspection-context-menu.context-menu .context-menu-icon--warning i {
  color: var(--status-warning);
}

#inspection-context-menu.context-menu .context-menu-icon--muted i {
  color: var(--text-tertiary);
}

#inspection-context-menu.context-menu .context-menu-chevron {
  flex-shrink: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-none);
  color: var(--text-muted);
}

#inspection-context-menu.context-menu .context-menu-btn:hover .context-menu-chevron,
#inspection-context-menu.context-menu .context-menu-item.has-submenu.open > .context-menu-btn .context-menu-chevron {
  color: var(--interactive-primary);
}

#inspection-context-menu.context-menu .context-menu-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + var(--inset-2xs));
  z-index: 1001;
  min-width: 11.5rem;
  padding: var(--inset-xs);
  margin: 0;
  list-style: none;
  border-radius: var(--dropdown-panel-radius);
  border: var(--dropdown-menu-border);
  background: var(--bg-primary);
  box-shadow: var(--dropdown-menu-shadow);
}

#inspection-context-menu.context-menu .context-menu-submenu--left {
  left: auto;
  right: calc(100% + var(--inset-2xs));
}

#inspection-context-menu.context-menu .has-submenu:hover .context-menu-submenu,
#inspection-context-menu.context-menu .has-submenu.open .context-menu-submenu {
  display: block;
}

#inspection-context-menu.context-menu .context-menu-submenu .context-menu-item {
  margin: 0;
}

.context-menu-wrapper {
  position: fixed;
  z-index: 9999;
  display: none;
}

/* Inspector panel uses .fd-multiselect__panel; no separate glass recipe. */

/* ========================================
   Flatpickr popup — shared FD chrome skin (DEC-003)
   Applied via FDDateTime (.fd-flatpickr-calendar). Opaque panel;
   type/space match filter chrome + primary control track.
   ======================================== */

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar {
  /* Beat flatpickr JS inline width (days.offsetWidth + 1) — default ~308px leaves dead space */
  width: calc(
    (7 * var(--control-track-height))
    + (6 * var(--control-track-pad))
    + (2 * var(--inset-md))
  ) !important;
  max-width: calc(
    (7 * var(--control-track-height))
    + (6 * var(--control-track-pad))
    + (2 * var(--inset-md))
  ) !important;
  padding: 0;
  margin-top: var(--inset-xs);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: var(--fd-control-font-size);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  border-radius: var(--dropdown-panel-radius); /* 16 — panel tier */
  background: var(--color-white);
  border: var(--dropdown-menu-border);
  box-shadow: var(--dropdown-menu-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: var(--z-popover, 1060);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar:before,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar:after {
  display: none !important;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-weekdays,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-days,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-innerContainer,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-rContainer {
  background: transparent;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-innerContainer,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-rContainer {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months {
  position: relative;
  height: calc(var(--control-track-height) + var(--inset-sm));
  padding: 0 var(--inset-sm);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-month {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  overflow: visible;
  background: transparent;
  color: var(--text-primary);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-current-month {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--inset-xs);
  height: 100%;
  padding: 0;
  width: auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-current-month input.cur-year {
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  height: auto;
  padding: var(--inset-xs);
  margin: 0;
  box-shadow: none;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  max-width: 9ch;
  cursor: pointer;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--bg-accent);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-current-month input.cur-year {
  width: 5ch;
  min-width: 5ch;
  cursor: default;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .numInputWrapper {
  width: 5ch;
  display: inline-block;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .numInputWrapper span {
  display: none;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-track-item-height);
  height: var(--control-track-item-height);
  padding: 0;
  border-radius: var(--radius-full);
  line-height: 1;
  transition: background var(--transition-fast);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
  left: var(--inset-xs);
  right: auto;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  right: var(--inset-xs);
  left: auto;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: var(--bg-tertiary);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  fill: var(--text-secondary);
  width: var(--fd-control-font-size);
  height: var(--fd-control-font-size);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--text-primary);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-weekdays {
  height: auto;
  padding: 0 var(--inset-md);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--control-track-pad);
  width: 100%;
  padding: 0;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar span.flatpickr-weekday {
  flex: unset;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--inset-xs) 0;
  font-size: var(--fd-control-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--text-secondary);
  text-align: center;
  text-transform: none;
  background: transparent;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-days {
  width: 100% !important;
  max-width: none !important;
  padding: var(--control-track-pad) var(--inset-md) var(--inset-sm);
  box-sizing: border-box;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--control-track-pad);
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: unset;
  width: 100%;
  max-width: none;
  height: var(--control-track-height);
  margin: 0;
  padding: 0;
  font-size: var(--fd-control-font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-none);
  color: var(--text-primary);
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--radius-button);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.inRange) {
  background: var(--bg-tertiary);
  border-color: transparent;
  color: var(--text-primary);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.today {
  background: var(--bg-accent);
  border-color: transparent;
  color: var(--interactive-primary);
  font-weight: var(--font-weight-medium);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.today:hover {
  background: var(--bg-accent);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.selected,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.startRange,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.endRange,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.selected.inRange,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.startRange.inRange,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.endRange.inRange {
  background: var(--interactive-primary);
  border-color: var(--interactive-primary);
  color: var(--text-inverse);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-xs);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.selected:hover,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.startRange:hover,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.endRange:hover {
  background: var(--interactive-hover);
  border-color: var(--interactive-hover);
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.inRange {
  background: var(--bg-accent);
  border-color: transparent;
  color: var(--interactive-primary);
  border-radius: 0;
  box-shadow: none;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.prevMonthDay,
.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
}

.fd-skin .flatpickr-calendar.fd-flatpickr-calendar .flatpickr-day:focus {
  outline: none;
  box-shadow: var(--shadow-focus-sm);
}

/* Toolbar / Bootstrap menus — shared dropdown chrome */
.fd-skin .dropdown-menu {
  background: var(--glass-panel-bg, rgba(255, 255, 255, 0.92));
  border: var(--dropdown-menu-border);
  box-shadow: var(--dropdown-menu-shadow);
  backdrop-filter: blur(var(--dropdown-menu-blur));
  -webkit-backdrop-filter: blur(var(--dropdown-menu-blur));
  border-radius: var(--dropdown-panel-radius); /* 16 — panel tier */
  padding: var(--dropdown-panel-pad); /* 4 — menu chrome */
  color: var(--text-primary);
}

.fd-skin .dropdown-menu .dropdown-item {
  min-height: var(--dropdown-item-min-height);
  padding: var(--dropdown-item-pad-y) var(--dropdown-item-pad-x);
  border-radius: var(--radius-button);
}

/* ========================================
   FD MODAL SYSTEM
   ======================================== */

.fd-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal, 1050);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.fd-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal-backdrop, 1040);
  width: 100vw;
  height: 100vh;
  background-color: var(--glass-overlay-bg, rgba(0, 0, 0, 0.35));
  -webkit-backdrop-filter: blur(var(--glass-overlay-blur, 10px)) saturate(var(--glass-overlay-saturate, 195%));
  backdrop-filter: blur(var(--glass-overlay-blur, 10px)) saturate(var(--glass-overlay-saturate, 195%));
  opacity: 0;
  transition: opacity var(--transition-fast, 0.15s ease);
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fd-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.fd-modal.show .fd-modal-backdrop {
  opacity: 1;
}

/* Layout/animation — FDModal JS host only; do not apply to Bootstrap .modal-dialog */
.fd-modal > .fd-modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: var(--inset-lg);
  pointer-events: none;
  z-index: calc(var(--z-modal, 1050) + 1);
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--transition-fast, 0.15s ease), opacity var(--transition-fast, 0.15s ease);
}

.fd-modal.show > .fd-modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

/* Surface — shared by FDModal JS and Bootstrap bridge (.modal.fd-modal-style) */
.fd-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--text-primary);
  pointer-events: auto;
  background: var(--glass-panel-bg, rgba(255, 255, 255, 0.86));
  background-clip: padding-box;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--glass-panel-shadow, 0 8px 32px rgba(15, 23, 42, 0.12)), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  outline: 0;
}

/* Beat .fd-card base when it lives on the modal surface — glass over card */
.fd-modal-content.fd-card {
  background: var(--glass-panel-bg, rgba(255, 255, 255, 0.86));
  border: none !important;
  border-radius: var(--radius-card);
  box-shadow: var(--glass-panel-shadow, 0 8px 32px rgba(15, 23, 42, 0.12)), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Modal surfaces must not pick up page-card hover ring */
.fd-modal-content.fd-card:hover,
.modal.fd-modal-style .modal-content.fd-modal-content:hover {
  border: none !important;
  background: var(--glass-panel-bg, rgba(255, 255, 255, 0.86));
  box-shadow: var(--glass-panel-shadow, 0 8px 32px rgba(15, 23, 42, 0.12)), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: none;
}

.fd-modal-content .fd-card-header {
  flex-shrink: 0;
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.fd-modal-content .fd-card-title {
  display: flex;
  align-items: center;
  gap: var(--inset-sm);
}

.fd-modal-icon {
  font-size: var(--icon-size-lg, 1.5em);
  color: var(--interactive-primary);
}

.fd-modal-title-text {
  flex: 1;
}

.fd-modal-close {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  font-size: var(--font-size-base, 1rem);
  cursor: pointer;
  transition: var(--hover-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.fd-modal-close:hover {
  background: var(--interactive-primary);
  color: var(--text-inverse);
}

.fd-modal-close:active {
  background: var(--interactive-primary-hover);
  color: var(--text-inverse);
}

.fd-modal-close:focus {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.fd-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
  color: var(--text-primary);
}

.fd-modal-message {
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-relaxed, 1.75);
  color: var(--text-primary);
  white-space: pre-line;
  white-space: pre-line;
}

.fd-modal-content-custom {
  display: none;
}

.fd-modal-content-custom.show {
  display: block;
}

.fd-modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  /* top 16 / floor 24 — do not use footer-pad-y (alias = top only) as both */
  padding: var(--content-card-footer-pad-top) var(--content-card-pad-x) var(--content-card-footer-pad-bottom);
  border-top: var(--stroke-hairline) solid var(--glass-border, rgba(255, 255, 255, 0.25));
  border-bottom-right-radius: var(--radius-card);
  border-bottom-left-radius: var(--radius-card);
  gap: var(--inset-sm);
}

.fd-modal-btn {
  border-radius: var(--radius-button);
  font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-semibold);
  padding: var(--inset-sm) var(--inset-lg);
  transition: var(--hover-transition);
  border: var(--stroke-hairline) solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--inset-xs);
}

.fd-modal-btn-primary {
  background-color: var(--interactive-primary);
  border-color: var(--interactive-primary);
  color: var(--text-inverse);
}

.fd-modal-btn-primary:hover:not(:disabled) {
  background-color: var(--interactive-primary-hover);
  border-color: var(--interactive-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover-md);
}

.fd-modal-btn-secondary {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.fd-modal-btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover-md);
}

.fd-modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.fd-modal-btn:focus {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

/* Modal Size Variants — FDModal JS host only (not Bootstrap .modal-dialog) */
.fd-modal > .fd-modal-dialog.fd-modal-sm {
  max-width: 400px;
}

.fd-modal > .fd-modal-dialog.fd-modal-md {
  max-width: 500px;
}

.fd-modal-body .fd-schedule-modal-fields {
  display: flex;
  flex-direction: column;
  gap: var(--content-related-gap);
}

.fd-schedule-modal-when {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--content-related-gap);
}

@media (max-width: 575.98px) {
  .fd-schedule-modal-when {
    grid-template-columns: 1fr;
  }
}

.fd-modal > .fd-modal-dialog.fd-modal-lg {
  max-width: 800px;
}

.fd-modal > .fd-modal-dialog.fd-modal-xl {
  max-width: 1140px;
}

/* Modal Type Variants */
.fd-modal-content.fd-modal-confirm .fd-modal-icon {
  color: var(--status-warning);
}

.fd-modal-content.fd-modal-alert .fd-modal-icon {
  color: var(--status-error);
}

.fd-modal-content.fd-modal-info .fd-modal-icon {
  color: var(--interactive-primary);
}

.fd-modal-content.fd-modal-success .fd-modal-icon {
  color: var(--status-success);
}

/* Responsive */
@media (max-width: 576px) {
  .fd-modal > .fd-modal-dialog {
    max-width: calc(100% - var(--inset-lg) * 2);
    margin: var(--inset-lg);
  }
  
  .fd-card-header,
  .fd-modal-body,
  .fd-modal-footer {
    padding: var(--inset-lg);
  }
  
  .fd-modal-footer {
    flex-direction: column-reverse;
  }
  
  .fd-modal-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Bootstrap Modal bridge — data-bs-toggle modals with fd-modal surface (CARD-010) */
/* Suppress modal overlay scrollbar — body scrolling is locked via overflow:hidden,
   and an overlay scrollbar creates a double-gap with Bootstrap's padding-right compensation */
.modal-open .modal,
.fd-modal {
  overflow-y: hidden !important;
}

.modal.fd-modal-style .modal-dialog {
  pointer-events: none;
}

.modal.fd-modal-style .modal-content.fd-modal-content {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--glass-panel-shadow, 0 8px 32px rgba(15, 23, 42, 0.12)), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background: var(--glass-panel-bg, rgba(255, 255, 255, 0.86));
  color: var(--text-primary);
}

.modal.fd-modal-style .modal-header.fd-modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--content-card-header-pad-top) var(--content-card-pad-x) var(--content-card-header-pad-bottom);
  border-bottom: var(--stroke-hairline) solid var(--border-primary);
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.modal.fd-modal-style .modal-header.fd-modal-header .modal-title {
  font-size: var(--font-size-card-title, 1rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight, 1.25);
}

.modal.fd-modal-style .modal-body.fd-modal-body {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
}

.modal.fd-modal-style .modal-footer.fd-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--content-card-footer-pad-top) var(--content-card-pad-x) var(--content-card-footer-pad-bottom);
  border-top: var(--stroke-hairline) solid var(--glass-border, rgba(255, 255, 255, 0.25));
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

/* Bootstrap bridge backdrop — match FDModal glass backdrop
   Add Event: .modal.fd-modal-style ~ .modal-backdrop
   Calendar event detail sheet: #eventPopupBackdrop.modal-backdrop */
.modal.fd-modal-style ~ .modal-backdrop,
#eventPopupBackdrop.modal-backdrop {
  background-color: var(--glass-overlay-bg, rgba(0, 0, 0, 0.35));
  -webkit-backdrop-filter: blur(var(--glass-overlay-blur, 10px)) saturate(var(--glass-overlay-saturate, 195%));
  backdrop-filter: blur(var(--glass-overlay-blur, 10px)) saturate(var(--glass-overlay-saturate, 195%));
}

/* Calendar booking modal — duration display */
.fd-modal-duration {
  display: flex;
  align-items: center;
  gap: var(--inset-xs);
  font-size: var(--font-size-subtitle, 0.857rem);
  color: var(--text-tertiary);
  padding: var(--inset-xs) 0;
}

.fd-modal-duration i {
  font-size: var(--font-size-compact, 0.929rem);
}

/* Calendar booking modal — Pulse Pro custom toggle switch */
.fd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--inset-sm) 0;
  cursor: pointer;
}

.fd-toggle-label {
  font-size: var(--form-label-idle-size, 0.929rem);
  font-weight: var(--form-label-idle-weight, 400);
  color: var(--form-label-idle-color));
  user-select: none;
}

.fd-toggle-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.fd-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fd-toggle-track {
  display: block;
  width: 40px;
  height: 22px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  transition: background var(--transition-control-fast, 0.18s ease);
  position: relative;
}

.fd-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--text-inverse, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: left var(--transition-control-fast, 0.18s ease);
}

.fd-toggle-switch input:checked + .fd-toggle-track {
  background: var(--interactive-primary);
}

.fd-toggle-switch input:checked + .fd-toggle-track .fd-toggle-thumb {
  left: 21px;
}

.fd-toggle-switch input:focus-visible + .fd-toggle-track {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.fd-toggle-row:hover .fd-toggle-track {
  background: var(--interactive-primary-hover, var(--border-primary));
}

.fd-toggle-row:hover .fd-toggle-switch input:checked + .fd-toggle-track {
  background: var(--interactive-primary-hover);
}

/* Calendar booking modal — two-column form layout */
.fd-form-columns {
  display: flex;
  gap: var(--content-card-pad-x, 22px);
}

.fd-form-columns > .fd-form-field-stack {
  flex: 1;
  min-width: 0;
}

/* ========================================
   FD Checkbox styling
   Applies to list table row checkboxes and column selector (fd-checkbox)
   ======================================== */
input.form-check-input.fd-checkbox[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0;
  cursor: pointer;
  border: var(--stroke-hairline) solid var(--border-primary);
  border-radius: var(--form-field-radius);
  background-color: var(--bg-primary);
  color: var(--interactive-primary);
  accent-color: var(--interactive-primary);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input.form-check-input.fd-checkbox[type="checkbox"]:hover {
  border-color: var(--interactive-primary);
}

input.form-check-input.fd-checkbox[type="checkbox"]:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--interactive-primary);
}

input.form-check-input.fd-checkbox[type="checkbox"]:checked {
  background-color: var(--interactive-primary);
  border-color: var(--interactive-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75 2.25l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* Map InfoWindow content (fd_list_map.html) */
.fd-map-info {
  min-width: 200px;
}

.fd-map-info__title {
  margin: 0 0 var(--inset-sm) 0;
  font-weight: var(--font-weight-semibold);
}

.fd-map-info__row {
  margin: var(--inset-xs) 0;
}

.fd-map-info__link {
  display: inline-block;
  margin-top: var(--inset-sm);
  padding: var(--inset-xs) var(--inset-md);
  background: var(--interactive-primary);
  color: var(--text-inverse);
  text-decoration: none;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

/* ========================================
   Progress cell (inspections list — ProPulse parity)
   Label on line 1, pill track on line 2
   ======================================== */
.fd-pct-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--inset-2xs);
  min-width: 88px;
}
.fd-pct-label {
  font-size: var(--font-size-secondary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-secondary);
}
.fd-pct-label--green  { color: var(--status-success); }
.fd-pct-label--yellow { color: var(--status-warning); }
.fd-pct-label--red    { color: var(--status-error); }
.fd-pct-track {
  width: 100%;
  height: calc(6 / 13 * 1rem);
  background: var(--color-grey-100);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0;
}
.fd-pct-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}
.fd-pct-fill--green  { background: var(--status-success); }
.fd-pct-fill--yellow { background: var(--status-warning); }
.fd-pct-fill--red    { background: var(--status-error); }

/* Progress column — left-align stacked cell (ProPulse inspection-pct-cell) */
.fd-pct-cell-col {
  text-align: left;
}

/* ========================================
   Border-only pill badge (reinspection)
   ======================================== */
.fd-border-pill {
  display: inline-block;
  padding: 0 var(--inset-sm); /* 8px — was 0.5em */
  font-size: var(--font-size-sm);
  line-height: 1.6;
  border-radius: var(--radius-full);
}
.fd-border-pill--yes {
  border: var(--stroke-hairline) solid var(--color-orange, #fd7e14);
  color: var(--color-orange);
}
.fd-border-pill--no {
  border: var(--stroke-hairline) solid var(--border-primary, #d1d5db);
  color: var(--text-secondary);
}

/* Count pill (defects_badge cell_role — shared across list tables) */
.fd-count-pill {
  display: inline-block;
  min-width: 1.75rem;
  padding: var(--inset-2xs) var(--inset-sm); /* 2 / 8 — was 0.15em 0.55em */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  text-align: center;
  border-radius: var(--radius-full);
  color: var(--text-inverse);
}
.fd-count-pill--green  { background: var(--color-green, #28a745); }
.fd-count-pill--orange { background: var(--color-orange, #fd7e14); }
.fd-count-pill--red    { background: var(--color-red, #dc3545); }

/* Reinspection count — plain number / No, no pill chrome */
.fd-reinspection-count {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.fd-reinspection-none {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}