/* ========================================
   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: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px 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: 21px;
  }
  .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: 4px;
  }
  .fd-skin .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
    border-radius: var(--form-field-radius);
  }
  .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 * {
  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: 72px;
  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(--font-weight-semibold);
  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(--radius-md, 0.5rem);
}

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

.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: 1px 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, 0.5rem);
}

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

/* 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 = --radius-button (14px); inner = outer − 2px
   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: 1px 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: 1px solid transparent;
  background: none;
  font-size: var(--font-size-sm);
  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: 1px 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/fill/icon: fd-buttons.css (#4 icon tool — blue fill, white icon) */
.fd-icon-btn-cluster .fd-toolbar-icon-btn:hover,
.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: var(--tab-active-shadow);
}

.fd-data-toolbar-divider {
  width: 1px;
  height: var(--control-track-item-height);
  background: var(--border-primary);
  margin: 0 2px;
  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: 0.28em;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.4em;
  height: 1.4em;
  min-width: 1.4em;
  min-height: 1.4em;
  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: 0.25rem;
}
.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: 4px;
  padding: 0.25em 0.5em;
  background: var(--color-dark);
  color: var(--text-inverse);
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: 4px;
  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: 0.25rem;
}
.fd-actions-cell .fd-action-btn {
  margin-left: 0;
}
.fd-actions-cell .fd-action-btn:not(:first-child) {
  margin-left: 0.25rem;
}
.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: 0.28em !important;
  width: 1.4em !important;
  height: 1.4em !important;
  min-width: 1.4em !important;
  min-height: 1.4em !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: 0.28em !important;
  width: 1.4em !important;
  height: 1.4em !important;
  min-width: 1.4em !important;
  min-height: 1.4em !important;
  transform: translateZ(0) !important;
}

/* 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-y) var(--content-card-pad-x);
  border-top: 1px 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: 1px solid var(--border-primary);
}

/* Tab content area - consistent padding */
.fd-card .tab-content {
  padding: var(--content-card-body-pad-y) var(--content-card-pad-x);
}

/* 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 — color change via --status-warning / --color-orange (no underline) */
.fd-primary-tabs {
  display: flex;
  gap: var(--layout-gap-lg);
  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;
  transition: color 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(--status-warning);
  font-weight: var(--font-weight-normal);
}

.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: 1px 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 — builder/contact status */
.fd-status-badge {
  display: inline-block;
  padding: 0.25rem var(--inset-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.fd-status-active {
  background-color: var(--bg-accent);
  color: var(--status-success);
}

.fd-status-inactive {
  background-color: var(--bg-secondary);
  color: var(--status-error);
}

.fd-status-draft {
  background-color: var(--bg-tertiary);
  color: var(--status-warning);
}

.fd-status-dormant {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Table action links (edit/delete in tables) */
.fd-table-action {
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm, 0.25rem);
  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, 0.75rem) var(--radius-3xl, 0.75rem) 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: 2.5rem;
}
#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: 1px 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-02);
}

#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: 2.5rem;
}

/* 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: 1px 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: 1px 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: 1px 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(--font-weight-semibold);
}

/* 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 */
.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);
}

/* 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: 1px solid var(--border-primary);
}

.fd-card-header-title-group {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fd-card-header-actions,
.fd-chart-actions {
  display: flex;
  align-items: center;
  gap: var(--space-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-tight);
}

/* 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-normal);
}

.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: 1px 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: 1px 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);
  padding: var(--content-card-padding-sm);
}

.fd-form-group-panel .fd-nested-section-title {
  margin-bottom: 0;
}

.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-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 {
  box-shadow: var(--shadow-02);
  transform: translateY(-2px);
}

/* 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: translateY(-2px);
  box-shadow: var(--shadow-02);
  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 {
  box-shadow: var(--shadow-02);
  transform: translateY(-1px);
}

/* 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 {
  box-shadow: var(--shadow-02);
  transform: translateY(-1px);
}

/* 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 {
  box-shadow: var(--shadow-02);
  transform: translateY(-1px);
}

/* ========================================
   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-normal);
  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-tight);
  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: 3.5rem;
  height: 3.5rem;
  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);
}

/* ========================================
   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: 3.5rem;
  height: 3.5rem;
  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;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--layout-gap-sm);
  width: 100%;
  margin-bottom: 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; }

/* 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-3,
  .fd-span-4,
  .fd-span-6,
  .fd-span-8,
  .fd-span-9 {
    grid-column: span 12;
  }
}

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

/* Legacy flex gap — prefer .fd-page-stack + .fd-page-grid */
.fd-main-content:not(.fd-page-stack) {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-sm);
}

.fd-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.fd-page-subtitle-section {
  margin-bottom: 1.5rem;
}

.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 + horizontal slide) */
@media (max-width: 991.98px) {
  .fd-stats-mobile {
    display: block;
  }

  .fd-stats-strip {
    position: relative;
    overflow: hidden;
    padding-bottom: var(--inset-sm, 0.5rem);
  }

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

  .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, 0.5rem) / 2));
    min-width: calc(50% - (var(--inset-sm, 0.5rem) / 2));
    max-width: calc(50% - (var(--inset-sm, 0.5rem) / 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 {
    row-gap: var(--inset-xs);
    column-gap: var(--inset-md);
  }

  .fd-stats-strip-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    padding: 0;
    cursor: pointer;
    z-index: 1;
  }

  .fd-stats-strip-btn-left {
    left: -0.25rem;
  }

  .fd-stats-strip-btn-right {
    right: -0.25rem;
  }

  .fd-stats-strip-btn[disabled] {
    opacity: 0.25;
    cursor: default;
  }

  .fd-stats-strip--fit .fd-stats-strip-btn {
    display: none;
  }
}

.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: 1rem;
  margin-bottom: 1.5rem;
  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: .5rem;
  flex: 0 1 auto;
}

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

.fd-datatable-section {
  margin-bottom: 2rem;
}

.fd-datatable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* allow controls to flow to next line */
  row-gap: .5rem;
}

.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: 0.25rem 0.5rem;
    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: 0.5rem 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) 1rem;
  }
  
  /* 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) 1rem;
  }
  
  /* 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: 1rem 1.25rem;
  }
  
  /* 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: 1.5rem;
}

.fd-alerts-container .alert {
  border: none;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  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: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-width: 1px;
}

.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: 40px;
    height: 40px;
    font-size: var(--font-size-xl);
  }
}

/* ========================================
   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, 1rem);
  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: 1px solid var(--glass-panel-border, rgba(255, 255, 255, 0.5));
  border-radius: var(--radius-card, 2rem);
  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: 1px solid var(--glass-panel-border, rgba(255, 255, 255, 0.5)) !important;
  border-radius: var(--radius-card, 2rem);
  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);
}

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

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

.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, #fff);
}

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

.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;
  padding: var(--content-card-footer-pad-y) var(--content-card-pad-x);
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.25));
  border-bottom-right-radius: var(--radius-card, 2rem);
  border-bottom-left-radius: var(--radius-card, 2rem);
  gap: var(--inset-sm, 0.5rem);
}

.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: 8px 16px;
  transition: var(--hover-transition);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--inset-xs, 0.25rem);
}

.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-02, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.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-02, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.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 > .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, 1rem) * 2);
    margin: var(--inset-lg, 1rem);
  }
  
  .fd-card-header,
  .fd-modal-body,
  .fd-modal-footer {
    padding: var(--inset-lg, 1rem);
  }
  
  .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: 1px solid var(--glass-panel-border, rgba(255, 255, 255, 0.5));
  border-radius: var(--radius-card, 2rem);
  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: 1px 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-y) var(--content-card-pad-x);
  border-top: 1px 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 */
.modal.fd-modal-style ~ .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, 0.25rem);
  font-size: var(--font-size-subtitle, 0.857rem);
  color: var(--text-tertiary);
  padding: var(--inset-xs, 0.25rem) 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.5rem) 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, var(--text-tertiary));
  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: 9999px;
  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: 9999px;
  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: 1px 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: #007bff;
  color: white;
  text-decoration: none;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

/* ========================================
   Stacked percentage bar (inspectionsTable)
   Number on line 1, fill bar on line 2
   ======================================== */
.fd-pct-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
}
.fd-pct-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}
.fd-pct-label--green  { color: var(--color-green, #28a745); }
.fd-pct-label--blue   { color: var(--interactive-primary, #3fa9f5); }
.fd-pct-label--orange { color: var(--color-orange, #fd7e14); }
.fd-pct-label--red    { color: var(--color-red, #dc3545); }
.fd-pct-track {
  width: 100%;
  height: 5px;
  background: var(--border-secondary, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
}
.fd-pct-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}
.fd-pct-fill--green  { background: var(--color-green, #28a745); }
.fd-pct-fill--blue   { background: var(--interactive-primary, #3fa9f5); }
.fd-pct-fill--orange { background: var(--color-orange, #fd7e14); }
.fd-pct-fill--red    { background: var(--color-red, #dc3545); }

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