/* ==========================================================================
   Smart UI — the shared design system for every listing screen.

   The base theme sets `h1..h6 { font-size: var(--hN) !important }` where --h1
   is clamp(2rem, 1.2rem + 4vw, 4.5rem) — 72px on a wide monitor. Every
   heading rule below therefore has to carry !important to win. That is
   deliberate, not sloppy: it is the only way to keep semantic heading tags.
   ========================================================================== */

:root {
  /* Type scale — a real one. UI text stays small and quiet. */
  --su-text-xs: 11px;
  --su-text-sm: 12px;
  --su-text-md: 13px;
  --su-text-lg: 14px;
  --su-title: 15px;
  --su-page-title: 22px;

  /* Neutrals: cool grey, more contrast at the dark end than the theme's. */
  --su-ink: #0f172a;
  --su-ink-2: #334155;
  --su-ink-3: #64748b;
  --su-ink-4: #94a3b8;
  --su-line: #e2e8f0;
  --su-line-2: #eef2f6;
  --su-surface: #ffffff;
  --su-surface-2: #f8fafc;
  --su-surface-3: #f1f5f9;

  --su-accent: #3b5bdb;
  --su-accent-weak: #eef2ff;
  --su-accent-line: #c7d2fe;

  --su-radius: 10px;
  --su-radius-sm: 7px;
  --su-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --su-shadow-pop: 0 10px 30px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);

  --su-field-h: 40px;
}

/* ---------- Page header ---------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.page-head__main {
  min-width: 0;
}

.page-head__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: var(--su-text-sm);
  line-height: 1;
}

.page-head__crumbs li {
  color: var(--su-ink-4);
  font-weight: 500;
}

.page-head__crumbs a {
  color: var(--su-ink-3);
  text-decoration: none;
}

.page-head__crumbs a:hover {
  color: var(--su-accent);
}

.page-head__crumbs .sep {
  color: var(--su-ink-4);
  opacity: .5;
}

.page-head__title,
h1.page-head__title {
  font-size: var(--su-page-title) !important;
  font-weight: 650 !important;
  letter-spacing: -.02em;
  line-height: 1.25 !important;
  margin: 0;
  color: var(--su-ink);
}

.page-head__subtitle {
  font-size: var(--su-text-md);
  color: var(--su-ink-3);
  margin: 5px 0 0;
  line-height: 1.45;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

/* ---------- Buttons: one consistent set ---------- */
.su-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--su-radius-sm);
  border: 1px solid transparent;
  font-size: var(--su-text-md);
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.su-btn iconify-icon {
  font-size: 16px;
}

.su-btn--primary {
  background: var(--su-accent);
  border-color: var(--su-accent);
  color: #fff;
}

.su-btn--primary:hover {
  background: #31489f;
  border-color: #31489f;
  color: #fff;
}

.su-btn--ghost {
  background: var(--su-surface);
  border-color: var(--su-line);
  color: var(--su-ink-2);
}

.su-btn--ghost:hover {
  background: var(--su-surface-2);
  border-color: #cbd5e1;
  color: var(--su-ink);
}

.su-btn--sm {
  height: 32px;
  padding: 0 11px;
  font-size: var(--su-text-sm);
}

/* ---------- Stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  min-width: 0;
}

.stat-card__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.stat-card__body {
  min-width: 0;
}

.stat-card__label {
  display: block;
  font-size: var(--su-text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--su-ink-4);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card__value {
  display: block;
  font-size: 20px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  color: var(--su-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.stat-card__hint {
  display: block;
  font-size: var(--su-text-xs);
  color: var(--su-ink-4);
  margin-top: 2px;
}

.stat-card--accent  .stat-card__icon { background: var(--su-accent-weak); color: var(--su-accent); }
.stat-card--success .stat-card__icon { background: #e7f8ef; color: #12805c; }
.stat-card--warning .stat-card__icon { background: #fff4e5; color: #b45309; }
.stat-card--danger  .stat-card__icon { background: #fdecec; color: #b42318; }
.stat-card--info    .stat-card__icon { background: #e8f1fd; color: #1d5fbf; }
.stat-card--neutral .stat-card__icon { background: var(--su-surface-3); color: var(--su-ink-3); }

/* ---------- Filter panel ---------- */
.filter-card {
  background: var(--su-surface-2);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  margin-bottom: 14px;
  /* Must stay visible: dropdown panels escape the card bounds. */
  overflow: visible;
}

.filter-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 1px solid var(--su-line);
}

.filter-card.is-collapsed .filter-card__head {
  border-bottom-color: transparent;
}

.filter-card__title,
h2.filter-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--su-text-md) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--su-ink-2);
  margin: 0;
  letter-spacing: 0;
}

.filter-card__title iconify-icon {
  color: var(--su-ink-4);
  font-size: 16px;
}

.filter-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--su-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.filter-card__count[hidden] {
  display: none;
}

.filter-card__head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-card__toggle {
  background: none;
  border: 0;
  color: var(--su-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--su-text-sm);
  font-weight: 500;
  padding: 0;
}

.filter-card__toggle:hover {
  color: var(--su-accent);
}

.filter-card__toggle iconify-icon {
  transition: transform .18s ease;
  font-size: 16px;
}

.filter-card.is-collapsed .filter-card__toggle iconify-icon {
  transform: rotate(-90deg);
}

.filter-card.is-collapsed .filter-card__body,
.filter-card.is-collapsed .filter-card__foot {
  display: none;
}

.filter-card__body {
  padding: 16px;
}

.filter-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--su-line);
  background: var(--su-surface);
  border-radius: 0 0 var(--su-radius) var(--su-radius);
  min-height: 52px;
}

/* Fields: generous target, quiet label. */
.filter-field label,
.filter-field > .su-label {
  display: block;
  font-size: var(--su-text-xs);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--su-ink-4);
  margin-bottom: 6px;
  line-height: 1.2;
}

.filter-card .form-control,
.filter-card .form-select,
.filter-card .su-select__toggle,
.filter-card .flatpickr-input {
  height: var(--su-field-h);
  font-size: var(--su-text-md);
  border-radius: var(--su-radius-sm);
  border: 1px solid var(--su-line);
  background-color: var(--su-surface);
  color: var(--su-ink);
  padding: 0 12px;
  width: 100%;
  box-shadow: none;
}

.filter-card .form-control::placeholder {
  color: var(--su-ink-4);
}

.filter-card .form-control:hover,
.filter-card .form-select:hover,
.filter-card .su-select__toggle:hover {
  border-color: #cbd5e1;
}

.filter-card .form-control:focus,
.filter-card .form-select:focus,
.filter-card .su-select__toggle:focus,
.su-select.is-open .su-select__toggle {
  outline: none;
  border-color: var(--su-accent);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .12);
}

/* Search input with a leading icon */
.filter-input-icon {
  position: relative;
}

.filter-input-icon > .filter-input-icon__glyph {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--su-ink-4);
  pointer-events: none;
  z-index: 2;
}

.filter-input-icon .form-control {
  padding-left: 36px;
}

.filter-input-icon .filter-spinner {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--su-line);
  border-top-color: var(--su-accent);
  border-radius: 50%;
  animation: su-spin .6s linear infinite;
  opacity: 0;
  transition: opacity .15s;
}

.smart-table.is-typing .filter-input-icon .filter-spinner {
  opacity: 1;
}

/* From/to pair */
.filter-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-range > span[data-filter-field] {
  flex: 1 1 0;
  min-width: 0;
}

.filter-range__sep {
  color: var(--su-ink-4);
  font-size: var(--su-text-sm);
  flex-shrink: 0;
}

/* ---------- Applied-filter chips ---------- */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 26px;
}

.filter-chips:empty::before {
  content: 'No filters applied';
  font-size: var(--su-text-sm);
  color: var(--su-ink-4);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  background: var(--su-accent-weak);
  border: 1px solid var(--su-accent-line);
  color: #35408a;
  font-size: var(--su-text-sm);
  font-weight: 500;
  line-height: 1.4;
  max-width: 280px;
}

.filter-chip b {
  color: #6b7ac4;
  font-weight: 600;
}

.filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #6b7ac4;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.filter-chip button:hover {
  background: #fdecec;
  color: #b42318;
}

/* ---------- Data / table card ---------- */
.data-card {
  position: relative;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  overflow: visible;
}

.data-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--su-line-2);
}

.data-card__title,
h2.data-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--su-title) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0;
  color: var(--su-ink);
  letter-spacing: -.01em;
}

.data-card__count {
  font-size: var(--su-text-xs);
  font-weight: 600;
  color: var(--su-ink-3);
  background: var(--su-surface-3);
  border-radius: 20px;
  padding: 3px 9px;
  letter-spacing: .01em;
}

.data-card__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--su-text-sm);
  color: var(--su-ink-3);
}

.data-card__tools .form-select {
  height: 32px;
  padding: 0 26px 0 10px;
  font-size: var(--su-text-sm);
  width: auto;
  border-radius: 6px;
  border: 1px solid var(--su-line);
  color: var(--su-ink-2);
}

.data-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--su-line-2);
}

.data-card__foot p {
  margin: 0;
  font-size: var(--su-text-sm);
  color: var(--su-ink-3);
}

/* ---------- The one table look ---------- */
.data-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--su-text-md);
  color: var(--su-ink-2);
}

.data-table > thead > tr > th {
  background: var(--su-surface-2);
  border-top: 0;
  border-bottom: 1px solid var(--su-line);
  color: var(--su-ink-4);
  font-size: var(--su-text-xs);
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 9px 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.data-table > tbody > tr > td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--su-line-2);
  vertical-align: middle;
  line-height: 1.4;
}

.data-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.data-table > tbody > tr:hover > td {
  background: var(--su-surface-2);
}

.data-table a {
  color: inherit;
  text-decoration: none;
}

/* Primary cell doubles as the link to the record */
.cell-primary {
  display: block;
  font-weight: 600;
  color: var(--su-ink);
  font-size: var(--su-text-md);
}

a.cell-primary:hover,
.cell-link:hover .cell-primary {
  color: var(--su-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cell-link {
  display: block;
  min-width: 0;
}

.cell-sub {
  display: block;
  font-size: var(--su-text-xs);
  color: var(--su-ink-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cell-num-head {
  text-align: right;
}

.cell-muted {
  color: var(--su-ink-4);
}

.cell-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* Sortable headers */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit !important;
  text-decoration: none;
  white-space: nowrap;
}

.th-sort:hover {
  color: var(--su-accent) !important;
}

.th-sort iconify-icon {
  font-size: 12px;
  opacity: .4;
}

.th-sort.is-active {
  color: var(--su-accent) !important;
}

.th-sort.is-active iconify-icon {
  opacity: 1;
}

/* ---------- Row actions: the vertical three-dot menu ---------- */
.row-actions {
  position: relative;
  display: inline-block;
  text-align: left;
}

.row-actions__trigger {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--su-ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .12s, border-color .12s, color .12s;
}

.row-actions__trigger iconify-icon {
  font-size: 18px;
}

.row-actions__trigger:hover,
.row-actions.is-open .row-actions__trigger {
  background: var(--su-surface-3);
  border-color: var(--su-line);
  color: var(--su-ink);
}

/* Fixed positioning keeps the menu above the table's scroll container. */
.row-actions__menu {
  position: fixed;
  z-index: 1060;
  min-width: 190px;
  padding: 5px;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow-pop);
  display: none;
}

.row-actions.is-open .row-actions__menu {
  display: block;
}

.row-actions__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--su-radius-sm);
  background: transparent;
  color: var(--su-ink-2) !important;
  font-size: var(--su-text-md);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}

.row-actions__item iconify-icon {
  font-size: 17px;
  color: var(--su-ink-4);
  flex-shrink: 0;
}

.row-actions__item:hover {
  background: var(--su-surface-3);
  color: var(--su-ink) !important;
}

.row-actions__item:hover iconify-icon {
  color: var(--su-ink-2);
}

.row-actions__item--danger,
.row-actions__item--danger iconify-icon {
  color: #b42318 !important;
}

.row-actions__item--danger:hover {
  background: #fdecec;
  color: #911d13 !important;
}

.row-actions__sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--su-line-2);
}

.row-actions form {
  margin: 0;
}

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: var(--su-text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pill iconify-icon {
  font-size: 12px;
}

.pill--success { background: #e7f8ef; color: #12805c; border-color: #c3ecd8; }
.pill--danger  { background: #fdecec; color: #b42318; border-color: #f6d5d2; }
.pill--warning { background: #fff4e5; color: #b45309; border-color: #fbe1bd; }
.pill--info    { background: #e8f1fd; color: #1d5fbf; border-color: #cfe0f9; }
.pill--accent  { background: var(--su-accent-weak); color: #35408a; border-color: var(--su-accent-line); }
.pill--primary { background: var(--su-accent-weak); color: #35408a; border-color: var(--su-accent-line); }
.pill--neutral { background: var(--su-surface-3); color: var(--su-ink-3); border-color: var(--su-line); }

/* ---------- Empty state ---------- */
.table-empty {
  padding: 52px 20px;
  text-align: center;
}

.table-empty__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--su-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--su-ink-4);
  font-size: 26px;
}

.table-empty h6 {
  margin: 0 0 4px;
  font-size: var(--su-text-lg) !important;
  font-weight: 600 !important;
  color: var(--su-ink);
}

.table-empty p {
  margin: 0;
  font-size: var(--su-text-md);
  color: var(--su-ink-3);
}

/* ---------- Loading ---------- */
.smart-table {
  position: relative;
}

.smart-table__region {
  position: relative;
  transition: opacity .12s ease;
}

.smart-table__region.is-loading {
  opacity: .5;
  pointer-events: none;
}

.smart-table__bar {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  z-index: 5;
  opacity: 0;
  transition: opacity .15s;
}

.smart-table.is-loading .smart-table__bar {
  opacity: 1;
}

.smart-table__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--su-accent), transparent);
  animation: su-slide 1s ease-in-out infinite;
}

@keyframes su-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes su-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ---------- Searchable select (static + AJAX) ---------- */
.su-select {
  position: relative;
}

.su-select__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: var(--su-field-h);
  padding: 0 12px;
  font-size: var(--su-text-md);
  text-align: left;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-sm);
  color: var(--su-ink);
  cursor: pointer;
}

.su-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.su-select__label.is-placeholder {
  color: var(--su-ink-4);
}

.su-select__caret {
  flex-shrink: 0;
  color: var(--su-ink-4);
  font-size: 16px;
  transition: transform .15s;
}

.su-select.is-open .su-select__caret {
  transform: rotate(180deg);
}

.su-select__panel {
  position: absolute;
  z-index: 1055;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  min-width: 230px;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow-pop);
  display: none;
  overflow: hidden;
}

.su-select.is-open .su-select__panel {
  display: block;
}

.su-select.is-up .su-select__panel {
  top: auto;
  bottom: calc(100% + 5px);
}

.su-select__search {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--su-line-2);
}

.su-select__search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  font-size: var(--su-text-md);
  border: 1px solid var(--su-line);
  border-radius: 6px;
  outline: none;
  color: var(--su-ink);
}

.su-select__search input:focus {
  border-color: var(--su-accent);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .12);
}

.su-select__search iconify-icon {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--su-ink-4);
  font-size: 15px;
}

.su-select__options {
  list-style: none;
  margin: 0;
  padding: 5px;
  max-height: 244px;
  overflow-y: auto;
}

.su-select__options li {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: var(--su-text-md);
  color: var(--su-ink-2);
  cursor: pointer;
  line-height: 1.35;
}

.su-select__options li small {
  display: block;
  color: var(--su-ink-4);
  font-size: var(--su-text-xs);
  margin-top: 1px;
}

.su-select__options li:hover,
.su-select__options li.is-active {
  background: var(--su-surface-3);
  color: var(--su-ink);
}

.su-select__options li.is-selected {
  background: var(--su-accent-weak);
  color: #35408a;
  font-weight: 600;
}

.su-select__options li.is-empty {
  color: var(--su-ink-4);
  cursor: default;
  text-align: center;
  padding: 14px 10px;
}

.su-select__options li.is-empty:hover {
  background: transparent;
}

.su-select__status {
  padding: 8px 10px;
  text-align: center;
  font-size: var(--su-text-sm);
  color: var(--su-ink-4);
  border-top: 1px solid var(--su-line-2);
}

.su-select__status[hidden] {
  display: none;
}

/* ---------- Pagination ---------- */
.data-card__foot .pagination {
  margin: 0;
  gap: 3px;
}

.data-card__foot .page-link {
  border: 1px solid var(--su-line);
  border-radius: 6px !important;
  color: var(--su-ink-2);
  font-size: var(--su-text-sm);
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-shadow: none;
}

.data-card__foot .page-item.active .page-link {
  background: var(--su-accent);
  border-color: var(--su-accent);
  color: #fff;
}

.data-card__foot .page-item.disabled .page-link {
  color: var(--su-ink-4);
  background: var(--su-surface-2);
}

.data-card__foot .page-link:hover {
  background: var(--su-surface-3);
}

.data-card__foot .page-item.active .page-link:hover {
  background: #31489f;
}

/* ---------- flatpickr, retuned to match the fields ---------- */
.flatpickr-calendar {
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow-pop);
  border: 1px solid var(--su-line);
  font-size: var(--su-text-md);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--su-accent);
  border-color: var(--su-accent);
}

.flatpickr-day.inRange {
  background: var(--su-accent-weak);
  border-color: var(--su-accent-weak);
  box-shadow: -5px 0 0 var(--su-accent-weak), 5px 0 0 var(--su-accent-weak);
}

.flatpickr-day.today {
  border-color: var(--su-accent-line);
}

.su-field-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--su-ink-4);
  font-size: 15px;
  line-height: 1;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  display: none;
  z-index: 3;
}

.su-field-clear:hover {
  background: var(--su-surface-3);
  color: #b42318;
}

.filter-field.has-value .su-field-clear,
span[data-filter-field].has-value .su-field-clear {
  display: inline-flex;
}

/* ---------- Misc ---------- */
.text-muted-sm {
  font-size: var(--su-text-sm);
  color: var(--su-ink-3);
}

.su-avatar {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: contain;
  background: var(--su-surface-3);
  flex-shrink: 0;
}

.su-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--su-ink-4);
  font-size: 16px;
}

@media (max-width: 767.98px) {
  .page-head__title, h1.page-head__title { font-size: 19px !important; }
  .filter-card__body { padding: 14px; }
  .filter-card__head, .filter-card__foot { padding: 10px 14px; }
  .data-card__head, .data-card__foot { padding: 11px 14px; }
  .data-table > thead > tr > th,
  .data-table > tbody > tr > td { padding: 10px 12px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ==========================================================================
   Compatibility: theme buttons that still live on detail and form pages.
   Gives them the same height, radius and type scale as .su-btn so a page
   that mixes both does not look assembled from two different kits.
   ========================================================================== */
.dashboard-main-body .btn {
  border-radius: var(--su-radius-sm);
  font-size: var(--su-text-md);
  font-weight: 550;
}

.dashboard-main-body .btn-sm {
  padding: 6px 11px;
  font-size: var(--su-text-sm);
}

.data-card .btn,
.filter-card .btn,
.page-head .btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
}

.data-card .btn-sm,
.filter-card .btn-sm,
.page-head .btn-sm {
  height: 32px;
  padding: 0 11px;
}

/* Report/detail cards adopt the same surface treatment as the data card. */
.dashboard-main-body .card.shadow-2 {
  border: 1px solid var(--su-line) !important;
  border-radius: var(--su-radius) !important;
  box-shadow: var(--su-shadow) !important;
}

/* The theme ships a 72px h1; anything inside our cards must opt out. */
.data-card h6,
.filter-card h6 {
  font-size: var(--su-text-lg) !important;
  font-weight: 600 !important;
}

/* A divider whose following items were all permission-gated away must not
   render as a stray line at the edge of the menu. */
.row-actions__menu > .row-actions__sep:first-child,
.row-actions__menu > .row-actions__sep:last-child,
.row-actions__sep + .row-actions__sep {
  display: none;
}

/* ==========================================================================
   Confirmation modal — replaces window.confirm() for destructive actions.
   ========================================================================== */
.su-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.su-modal.is-open {
  display: flex;
}

.su-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  animation: su-fade .15s ease;
}

.su-modal__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--su-surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
  padding: 26px 24px 20px;
  text-align: center;
  animation: su-pop .16s cubic-bezier(.2, .9, .3, 1);
}

.su-modal__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.su-modal__icon--danger  { background: #fdecec; color: #b42318; }
.su-modal__icon--primary { background: var(--su-accent-weak); color: var(--su-accent); }
.su-modal__icon--warning { background: #fff4e5; color: #b45309; }

.su-modal__title,
h2.su-modal__title {
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  color: var(--su-ink);
  margin: 0 0 6px;
}

.su-modal__body {
  font-size: var(--su-text-md);
  color: var(--su-ink-3);
  line-height: 1.5;
  margin: 0 0 20px;
}

.su-modal__body:empty {
  margin-bottom: 12px;
}

.su-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.su-modal__actions .su-btn {
  min-width: 104px;
}

.su-btn--danger {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}

.su-btn--danger:hover {
  background: #911d13;
  border-color: #911d13;
  color: #fff;
}

body.su-modal-open {
  overflow: hidden;
}

@keyframes su-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes su-pop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Forms — the create/edit counterpart to the listing design system.
   ========================================================================== */
.form-card {
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  margin-bottom: 16px;
  overflow: visible;
}

.form-card__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--su-line-2);
}

.form-card__title,
h2.form-card__title {
  font-size: var(--su-title) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--su-ink);
  margin: 0;
  letter-spacing: -.01em;
}

.form-card__subtitle {
  font-size: var(--su-text-sm);
  color: var(--su-ink-3);
  margin: 3px 0 0;
}

.form-card__body {
  padding: 20px;
}

.form-card__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--su-line-2);
  background: var(--su-surface-2);
  border-radius: 0 0 var(--su-radius) var(--su-radius);
}

/* ---- Fields ---- */
.form-field__label {
  display: block;
  font-size: var(--su-text-xs);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--su-ink-4);
  margin-bottom: 6px;
  line-height: 1.2;
}

.form-field__required {
  color: #b42318;
  margin-left: 3px;
}

.form-card .form-control,
.form-card .form-select,
.form-card .su-select__toggle {
  height: var(--su-field-h);
  font-size: var(--su-text-md);
  border-radius: var(--su-radius-sm);
  border: 1px solid var(--su-line);
  background-color: var(--su-surface);
  color: var(--su-ink);
  padding: 0 12px;
  width: 100%;
  box-shadow: none;
}

.form-card textarea.form-control {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
}

.form-card .form-control::placeholder {
  color: var(--su-ink-4);
}

.form-card .form-control:hover,
.form-card .form-select:hover,
.form-card .su-select__toggle:hover {
  border-color: #cbd5e1;
}

.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card .su-select__toggle:focus {
  outline: none;
  border-color: var(--su-accent);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .12);
}

.form-card .form-control.is-invalid,
.form-card .su-select__toggle.is-invalid {
  border-color: #b42318;
}

.form-field__error {
  display: block;
  font-size: var(--su-text-sm);
  color: #b42318;
  margin: 5px 0 0;
}

.form-field__hint {
  display: block;
  font-size: var(--su-text-sm);
  color: var(--su-ink-4);
  margin: 5px 0 0;
}

/* Money / unit prefix inside a field */
.form-input-prefix {
  position: relative;
}

.form-input-prefix__glyph {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--su-text-md);
  color: var(--su-ink-4);
  pointer-events: none;
}

.form-input-prefix .form-control {
  padding-left: 30px;
}

/* ---- Checkbox tile ---- */
.form-check-tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-sm);
  background: var(--su-surface);
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
  margin: 0;
}

.form-check-tile:hover {
  border-color: #cbd5e1;
  background: var(--su-surface-2);
}

.form-check-tile input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-check-tile__box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--su-line);
  border-radius: 5px;
  background: var(--su-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  transition: background-color .12s, border-color .12s, color .12s;
}

.form-check-tile input:checked ~ .form-check-tile__box {
  background: var(--su-accent);
  border-color: var(--su-accent);
  color: #fff;
}

.form-check-tile input:focus-visible ~ .form-check-tile__box {
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .18);
}

.form-check-tile:has(input:checked) {
  border-color: var(--su-accent-line);
  background: var(--su-accent-weak);
}

.form-check-tile__label {
  display: block;
  font-size: var(--su-text-md);
  font-weight: 550;
  color: var(--su-ink);
  line-height: 1.35;
}

.form-check-tile__hint {
  display: block;
  font-size: var(--su-text-sm);
  color: var(--su-ink-3);
  margin-top: 1px;
}

/* ---- Actions ---- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767.98px) {
  .form-card__body { padding: 16px; }
  .form-card__head, .form-card__foot { padding: 12px 16px; }
  .form-actions { justify-content: stretch; }
  .form-actions .su-btn { flex: 1; }
}

/* ==========================================================================
   Permission matrix — settings/roles/{id}/edit
   Appended block. Nothing above this line is modified.
   Headings need !important because the base theme forces h1..h6 sizes.
   ========================================================================== */

/* ---------- Locked-role notice ---------- */
.perm-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fff4e5;
  border: 1px solid #fbe1bd;
  border-radius: var(--su-radius);
  color: #7c4a06;
}

.perm-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: #fde3bd;
  color: #b45309;
  font-size: 18px;
}

.perm-notice__body strong {
  display: block;
  font-size: var(--su-text-lg);
  font-weight: 650;
  margin-bottom: 2px;
}

.perm-notice__body p {
  margin: 0;
  font-size: var(--su-text-md);
  line-height: 1.5;
  color: #8a5a12;
}

/* ---------- Toolbar: search + bulk actions ---------- */
.perm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
}

.perm-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 420px;
}

.perm-search iconify-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--su-ink-4);
  pointer-events: none;
}

.perm-search__input {
  width: 100%;
  height: var(--su-field-h);
  padding: 0 12px 0 36px;
  font-size: var(--su-text-md);
  color: var(--su-ink);
  background: var(--su-surface-2);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius-sm);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.perm-search__input::placeholder { color: var(--su-ink-4); }

.perm-search__input:focus {
  background: var(--su-surface);
  border-color: var(--su-accent);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .12);
}

.perm-search__input::-webkit-search-cancel-button { cursor: pointer; }

.perm-toolbar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.perm-toolbar__count {
  font-size: var(--su-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--su-ink-3);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Module grid ---------- */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}

.perm-card {
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.perm-card:hover { box-shadow: var(--su-shadow-pop); }

.perm-card.is-full { border-color: var(--su-accent-line); }

.perm-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--su-line-2);
  background: var(--su-surface-2);
}

.perm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: var(--su-accent-weak);
  color: var(--su-accent);
  font-size: 16px;
}

.perm-card__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.perm-card__title,
h2.perm-card__title {
  font-size: var(--su-title) !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
  margin: 0 !important;
  color: var(--su-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perm-card__count {
  font-size: var(--su-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--su-ink-3);
  background: var(--su-surface-3);
  border: 1px solid var(--su-line);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

.perm-card.is-full .perm-card__count {
  color: #35408a;
  background: var(--su-accent-weak);
  border-color: var(--su-accent-line);
}

/* ---------- Per-module select-all toggle ---------- */
.perm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0;
  user-select: none;
  flex: 0 0 auto;
}

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

.perm-toggle__track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--su-surface-3);
  border: 1px solid var(--su-line);
  transition: background-color .14s ease, border-color .14s ease;
}

.perm-toggle__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
  transition: transform .14s ease;
}

.perm-toggle input:checked + .perm-toggle__track {
  background: var(--su-accent);
  border-color: var(--su-accent);
}

.perm-toggle input:checked + .perm-toggle__track .perm-toggle__dot {
  transform: translateX(14px);
}

.perm-toggle input:indeterminate + .perm-toggle__track {
  background: var(--su-accent-line);
  border-color: var(--su-accent-line);
}

.perm-toggle input:indeterminate + .perm-toggle__track .perm-toggle__dot {
  transform: translateX(7px);
}

.perm-toggle input:focus-visible + .perm-toggle__track {
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .18);
}

.perm-toggle__label {
  font-size: var(--su-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--su-ink-3);
}

.perm-toggle input:disabled ~ .perm-toggle__track,
.perm-toggle input:disabled ~ .perm-toggle__label { opacity: .5; }

/* ---------- Permission rows ---------- */
.perm-card__body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 8px;
  margin: 0;
  border-radius: var(--su-radius-sm);
  cursor: pointer;
  transition: background-color .1s ease;
}

.perm-row:hover { background: var(--su-surface-2); }

.perm-row__label {
  font-size: var(--su-text-md);
  line-height: 1.35;
  color: var(--su-ink-2);
  flex: 1 1 auto;
  min-width: 0;
}

.perm-row__key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--su-ink-4);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;
}

.perm-row:hover .perm-row__key { opacity: 1; }

/* The real native input, restyled — no JS widget. */
.perm-check {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--su-line);
  border-radius: 5px;
  background: var(--su-surface);
  cursor: pointer;
  position: relative;
  transition: background-color .12s ease, border-color .12s ease;
}

.perm-check:hover { border-color: var(--su-accent-line); }

.perm-check:checked {
  background: var(--su-accent);
  border-color: var(--su-accent);
}

.perm-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.perm-check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .18);
}

.perm-check:disabled {
  cursor: not-allowed;
  background: var(--su-surface-3);
  border-color: var(--su-line);
}

.perm-check:disabled:checked {
  background: var(--su-ink-4);
  border-color: var(--su-ink-4);
}

.perm-row:has(.perm-check:checked) .perm-row__label {
  color: var(--su-ink);
  font-weight: 550;
}

.perm-row:has(.perm-check:disabled) { cursor: not-allowed; }

/* ---------- Empty search state + footer ---------- */
.perm-empty {
  margin: 24px 0 0;
  padding: 28px 16px;
  text-align: center;
  font-size: var(--su-text-md);
  color: var(--su-ink-3);
  background: var(--su-surface);
  border: 1px dashed var(--su-line);
  border-radius: var(--su-radius);
}

.perm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--su-line);
}

@media (max-width: 640px) {
  .perm-grid { grid-template-columns: 1fr; }
  .perm-search { max-width: none; }
  .perm-footer .su-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Inline status switch (x-status-toggle) — flips a row's status in place.
   ========================================================================== */
.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-toggle__switch {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 999px;
}

.status-toggle__track {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--su-surface-3);
  border: 1px solid var(--su-line);
  transition: background-color .18s ease, border-color .18s ease;
}

.status-toggle__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--su-surface);
  box-shadow: var(--su-shadow);
  transition: transform .18s ease;
}

.status-toggle__switch[aria-checked="true"] .status-toggle__track {
  background: var(--su-accent);
  border-color: var(--su-accent);
}

.status-toggle__switch[aria-checked="true"] .status-toggle__knob {
  transform: translateX(16px);
}

.status-toggle__switch:focus-visible {
  outline: 2px solid var(--su-accent);
  outline-offset: 2px;
}

.status-toggle__label {
  font-size: var(--su-text-sm);
  color: var(--su-ink-2);
}

.status-toggle__switch.is-busy {
  opacity: .55;
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  .status-toggle__track,
  .status-toggle__knob { transition: none; }
}

/* ==========================================================================
   Bulk client import — appended block (queued import UI)
   Only used by resources/views/clients/bulk-import/*. Nothing above this
   comment is modified.
   ========================================================================== */

.bulk-import-note {
  border: 1px solid var(--su-line);
  background: var(--su-surface-2, #f7f8fa);
  border-radius: 12px;
  padding: 14px 16px;
}

.bulk-import-note--accent {
  border-color: var(--su-accent-line);
  background: var(--su-accent-weak);
}

.bulk-import-note__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--su-ink-1, #1f2430);
}

.bulk-import-note__list {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--su-ink-2, #4a5160);
}

.bulk-import-note__list li { margin-bottom: 2px; }

.bulk-import-note__foot {
  margin: 0;
  font-size: 13px;
  color: var(--su-ink-3, #6b7280);
}

.bulk-import-step {
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--su-line);
  border-radius: 12px;
}

.bulk-import-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--su-accent-weak);
  color: var(--su-accent);
  font-weight: 700;
  font-size: 13px;
}

.bulk-import-step h6 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.bulk-import-step p { margin: 0; font-size: 13px; color: var(--su-ink-3, #6b7280); }

.bulk-import-progress {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--su-line);
  border-radius: 14px;
  background: var(--su-surface-1, #fff);
}

.bulk-import-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bulk-import-progress__label {
  margin-right: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--su-ink-3, #6b7280);
}

.bulk-import-progress__pct {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--su-ink-1, #1f2430);
}

.bulk-import-progress .progress {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--su-surface-3, #eef0f4);
}

.bulk-import-progress .progress-bar {
  transition: width .4s ease;
}

.bulk-import-progress__hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--su-ink-3, #6b7280);
}

/* ==========================================================================
   Form alignment, error summary and the single action bar.

   Controls used to sit at different heights across a row because labels wrap
   to different line counts and only some fields carry a hint. Fixing the label
   box height makes every control in a row start on the same line; the hint and
   error then flow underneath without shifting anything above them.
   ========================================================================== */
.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-field__label,
.form-field > .su-label {
  /* One line of 11px uppercase text; a wrapped label no longer nudges the
     control down relative to its neighbours. */
  min-height: 15px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: 6px;
}

/* The control block is what must line up across the row. */
.form-field > .form-control,
.form-field > .su-select,
.form-field > .form-input-prefix,
.form-field > textarea {
  flex: 0 0 auto;
}

.form-field__error,
.form-field__hint {
  /* Reserve the line so a row with one hinted field keeps its neighbours'
     bottom edges level. */
  min-height: 16px;
  margin-top: 5px;
  margin-bottom: 0;
  line-height: 1.35;
}

/* ---------- Validation summary ---------- */
.form-errors {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fdecec;
  border: 1px solid #f6d5d2;
  border-radius: var(--su-radius);
}

.form-errors__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #b42318;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-errors__title {
  margin: 0 0 4px;
  font-size: var(--su-text-md);
  font-weight: 650;
  color: #912018;
}

.form-errors__list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--su-text-md);
  color: #b42318;
  line-height: 1.55;
}

.form-errors__list li + li {
  margin-top: 2px;
}

/* ---------- One action bar, bottom right, everywhere ---------- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Every control in the bar is the same height, whichever kit it came from. */
.form-actions .su-btn,
.form-actions .btn,
.form-actions button,
.form-card__foot .su-btn,
.form-card__foot .btn {
  height: 38px;
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  font-size: var(--su-text-md);
  font-weight: 550;
  border-radius: var(--su-radius-sm);
  line-height: 1;
}

/* A form must not carry a second action bar above the fields. */
.form-card__head .form-actions {
  display: none;
}

@media (max-width: 575.98px) {
  .form-actions {
    justify-content: stretch;
  }
  .form-actions .su-btn,
  .form-actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Legacy field markup inside a form card.

   A few fields are still hand-rolled Bootstrap (a file input, the invoice
   payment box, and the wizard's contact cards, whose DOM is cloned by JS and
   so cannot be swapped for components without rewriting that script). Their
   .form-label is 16px sentence case against the component's 11px uppercase,
   which starts the control at a different height and leaves the row ragged.
   Normalising them here fixes the alignment everywhere at once, including
   rows JavaScript creates after page load.
   ========================================================================== */
.form-card .form-label,
.form-card label.form-label.small {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 15px;
  margin-bottom: 6px;
  font-size: var(--su-text-xs) !important;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--su-ink-4);
  line-height: 1.2;
}

/* The required marker keeps its colour but not its size jump. */
.form-card .form-label .text-danger {
  font-size: inherit;
}

/* Bootstrap's small variants must not shrink the control out of line. */
.form-card .form-control-sm,
.form-card .form-select-sm {
  height: var(--su-field-h);
  font-size: var(--su-text-md);
  padding: 0 12px;
  border-radius: var(--su-radius-sm);
}

.form-card textarea.form-control-sm {
  height: auto;
  padding: 10px 12px;
}

/* A file input is taller than a text input because of its button, which is
   what pushed the Spreadsheet field out of line with the Firm picker. */
.form-card input[type="file"].form-control,
.form-card input[type="file"].form-control-sm {
  height: var(--su-field-h);
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.form-card input[type="file"].form-control::file-selector-button {
  height: calc(var(--su-field-h) - 2px);
  margin: 0 12px 0 0;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--su-line);
  background: var(--su-surface-2);
  color: var(--su-ink-2);
  font-size: var(--su-text-md);
  font-weight: 550;
  cursor: pointer;
  border-radius: var(--su-radius-sm) 0 0 var(--su-radius-sm);
}

.form-card input[type="file"].form-control:hover::file-selector-button {
  background: var(--su-surface-3);
}

/* Bootstrap's hint and error text, matched to the component's. */
.form-card .form-text {
  display: block;
  min-height: 16px;
  margin-top: 5px;
  margin-bottom: 0;
  font-size: var(--su-text-sm);
  color: var(--su-ink-4);
  line-height: 1.35;
}

.form-card .invalid-feedback {
  min-height: 16px;
  margin-top: 5px;
  font-size: var(--su-text-sm);
  line-height: 1.35;
  color: #b42318;
}

/* Legacy field columns need the same column layout as .form-field so their
   control sits at the same offset as a component field beside it. Scoped with
   :has() to columns that actually hold a label — a column wrapping a table
   (invoice line items, default tasks) must keep its normal block layout. */
.form-card__body > .row > [class*="col-"]:has(> .form-label) {
  display: flex;
  flex-direction: column;
}