/* ==========================================================================
   DeltaSmart Component Styles
   CSS for reusable card and button macros.
   All values reference --ds-* design tokens from design-tokens.css.
   ========================================================================== */

/* ==========================================================================
   STAT CARDS
   Dashboard statistics cards with icon, value, and title.
   ========================================================================== */

.ds-stat-card {
  background-color: var(--ds-surface-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-duration-fast) var(--ds-ease-default),
              box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

.ds-stat-card-body {
  padding: var(--ds-space-4);
  text-align: center;
}

.ds-stat-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ds-stat-card-link:hover {
  color: inherit;
}

.ds-stat-card-icon {
  font-size: var(--ds-font-size-3xl);
  opacity: 0.7;
  display: block;
  margin-bottom: var(--ds-space-2);
}

/* Icon color variants using design tokens */
.ds-stat-card-icon--primary   { color: var(--ds-brand-primary); }
.ds-stat-card-icon--secondary { color: var(--ds-gray-500); }
.ds-stat-card-icon--success   { color: var(--ds-success); }
.ds-stat-card-icon--danger    { color: var(--ds-danger); }
.ds-stat-card-icon--warning   { color: var(--ds-warning); }
.ds-stat-card-icon--info      { color: var(--ds-info); }

.ds-stat-card-value {
  font-size: var(--ds-font-size-2xl);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-space-0-5);
}

.ds-stat-card-title {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
}


/* ==========================================================================
   CONTENT CARDS
   General-purpose cards with optional collapsible body.
   ========================================================================== */

.ds-content-card {
  transition: box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-content-card:hover {
  box-shadow: var(--ds-shadow-md);
}

.ds-card-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}


/* ==========================================================================
   ENTITY CARDS
   List items, Kanban cards, entity summaries.
   ========================================================================== */

.ds-entity-card {
  background-color: var(--ds-surface-card);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-xs);
  transition: box-shadow var(--ds-duration-fast) var(--ds-ease-default),
              transform var(--ds-duration-fast) var(--ds-ease-default);
  margin-bottom: var(--ds-space-2);
}

.ds-entity-card:hover {
  box-shadow: var(--ds-shadow-sm);
  transform: translateY(-1px);
}

.ds-entity-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ds-entity-card-link:hover {
  color: inherit;
}

.ds-entity-card-body {
  padding: var(--ds-space-3);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
}

.ds-entity-card-icon {
  font-size: var(--ds-font-size-xl);
  color: var(--ds-text-muted);
  flex-shrink: 0;
}

.ds-entity-card-content {
  flex: 1;
  min-width: 0;
}

.ds-entity-card-title {
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-primary);
  line-height: var(--ds-line-height-snug);
}

.ds-entity-card-subtitle {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-0-5);
}

.ds-entity-card-badges {
  display: flex;
  gap: var(--ds-space-1);
  flex-shrink: 0;
  flex-wrap: wrap;
}


/* ==========================================================================
   BUTTONS
   Consistent button styling, focus rings, and icon spacing.
   ========================================================================== */

/* Icon spacing inside buttons: always left of label */
.ds-btn .ds-btn-icon {
  font-size: 0.875em;
  vertical-align: -0.0625em;
}

/* Focus ring using brand color for all ds-btn buttons */
.ds-btn:focus-visible {
  outline: 2px solid var(--ds-brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem var(--ds-brand-primary-subtle);
}

/* Button group */
.ds-btn-group {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
}

/* Delete button highlight */
.ds-btn-delete:focus-visible {
  outline-color: var(--ds-danger);
  box-shadow: 0 0 0 0.2rem var(--ds-danger-subtle);
}


/* ==========================================================================
   DELETE CONFIRMATION MODAL
   ========================================================================== */

.ds-delete-modal .modal-header {
  border-bottom-color: var(--ds-border-default);
  padding: var(--ds-space-3) var(--ds-space-4);
}

.ds-delete-modal .modal-body {
  padding: var(--ds-space-4);
  color: var(--ds-text-secondary);
}

.ds-delete-modal .modal-footer {
  border-top-color: var(--ds-border-default);
  padding: var(--ds-space-3) var(--ds-space-4);
  gap: var(--ds-space-2);
}


/* ==========================================================================
   DARK MODE ADJUSTMENTS
   ========================================================================== */

[data-bs-theme="dark"] .ds-stat-card {
  background-color: var(--ds-surface-card);
  box-shadow: var(--ds-shadow-sm);
}

[data-bs-theme="dark"] .ds-stat-card:hover {
  box-shadow: var(--ds-shadow-md);
}

[data-bs-theme="dark"] .ds-stat-card-value {
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .ds-entity-card {
  background-color: var(--ds-surface-card);
}

[data-bs-theme="dark"] .ds-entity-card:hover {
  box-shadow: var(--ds-shadow-sm);
}

[data-bs-theme="dark"] .ds-delete-modal .modal-content {
  background-color: var(--ds-modal-bg);
  border-color: var(--ds-modal-border);
}

[data-bs-theme="dark"] .ds-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ds-brand-primary-subtle);
}


/* ==========================================================================
   DATA TABLES
   Responsive tables with design-token styling, sortable headers,
   sticky first column on mobile, and empty state.
   ========================================================================== */

.ds-table-wrapper {
  background-color: var(--ds-surface-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}

.ds-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-table {
  width: 100%;
  background-color: var(--ds-table-bg);
  border-collapse: collapse;
  font-size: var(--ds-font-size-sm);
}

/* Header */
.ds-table-header {
  background-color: var(--ds-table-header-bg);
}

.ds-table-th {
  padding: var(--ds-space-3) var(--ds-space-4);
  font-weight: var(--ds-font-weight-semibold);
  font-size: var(--ds-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-table-header-text);
  border-bottom: 2px solid var(--ds-table-border);
  white-space: nowrap;
  vertical-align: middle;
}

/* Body cells */
.ds-table-body td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-table-border);
  color: var(--ds-text-primary);
  vertical-align: middle;
}

/* Striped rows */
.ds-table--striped .ds-table-body tr:nth-child(even) td {
  background-color: var(--ds-table-striped-bg);
}

/* Hover effect */
.ds-table--hover .ds-table-body tr:hover td {
  background-color: var(--ds-table-hover-bg);
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
}

/* Remove bottom border on last row */
.ds-table-body tr:last-child td {
  border-bottom: none;
}

/* Sortable column headers */
.ds-table-sort-header {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  cursor: pointer;
  user-select: none;
}

.ds-table-sort-header:hover {
  color: var(--ds-text-primary);
}

.ds-table-sort-icon {
  font-size: var(--ds-font-size-xs);
  opacity: 0.4;
  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-table-sort-header:hover .ds-table-sort-icon {
  opacity: 0.7;
}

.ds-table-sort-icon--active {
  opacity: 1;
  color: var(--ds-brand-primary);
}

/* Responsive: sticky first column on mobile */
@media (max-width: 767.98px) {
  .ds-table-responsive {
    position: relative;
  }

  .ds-table-th:first-child,
  .ds-table-body td:first-child {
    position: sticky;
    left: 0;
    z-index: var(--ds-z-raised);
    background-color: var(--ds-surface-card);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
  }

  .ds-table-header .ds-table-th:first-child {
    background-color: var(--ds-table-header-bg);
  }

  .ds-table--striped .ds-table-body tr:nth-child(even) td:first-child {
    background-color: var(--ds-surface-card);
  }

  .ds-table--hover .ds-table-body tr:hover td:first-child {
    background-color: var(--ds-table-hover-bg);
  }
}

/* Empty state */
.ds-table-empty {
  text-align: center;
  padding: var(--ds-space-12) var(--ds-space-4);
}

.ds-table-empty-icon {
  font-size: var(--ds-font-size-3xl);
  color: var(--ds-text-disabled);
  display: block;
  margin-bottom: var(--ds-space-3);
}

.ds-table-empty-message {
  font-size: var(--ds-font-size-base);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-4);
}


/* ==========================================================================
   PAGINATION
   Navigation, info text, and per-page selector for paginated tables.
   ========================================================================== */

.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-table-border);
  background-color: var(--ds-surface-card);
  font-size: var(--ds-font-size-sm);
}

.ds-pagination-info {
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.ds-pagination-info strong {
  color: var(--ds-text-primary);
  font-weight: var(--ds-font-weight-semibold);
}

.ds-pagination-pages {
  display: flex;
  gap: var(--ds-space-0-5);
}

.ds-pagination-pages .page-link {
  font-size: var(--ds-font-size-sm);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-1) var(--ds-space-2-5);
  min-width: 2rem;
  text-align: center;
  border-color: var(--ds-border-default);
  color: var(--ds-text-secondary);
  transition: var(--ds-transition-fast);
}

.ds-pagination-pages .page-link:hover {
  background-color: var(--ds-brand-primary-subtle);
  border-color: var(--ds-brand-primary);
  color: var(--ds-brand-primary);
}

.ds-pagination-pages .page-item.active .page-link {
  background-color: var(--ds-brand-primary);
  border-color: var(--ds-brand-primary);
  color: var(--ds-text-on-primary);
}

.ds-pagination-pages .page-item.disabled .page-link {
  color: var(--ds-text-disabled);
  border-color: var(--ds-border-muted);
}

.ds-pagination-ellipsis {
  border: none !important;
  background: none !important;
  padding: var(--ds-space-1) var(--ds-space-1) !important;
  color: var(--ds-text-muted);
}

.ds-pagination-per-page {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  white-space: nowrap;
}

.ds-pagination-per-page-label {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
}

.ds-pagination-per-page-select {
  width: auto;
  min-width: 4.5rem;
}

/* Responsive: stack on small screens */
@media (max-width: 575.98px) {
  .ds-pagination {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ds-pagination-pages {
    order: -1;
  }
}


/* ==========================================================================
   DATA TABLE + PAGINATION: DARK MODE
   ========================================================================== */

[data-bs-theme="dark"] .ds-table-wrapper {
  background-color: var(--ds-surface-card);
  box-shadow: var(--ds-shadow-sm);
}

[data-bs-theme="dark"] .ds-table-body td {
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .ds-table-sort-icon--active {
  color: var(--ds-brand-primary);
}

@media (max-width: 767.98px) {
  [data-bs-theme="dark"] .ds-table-th:first-child,
  [data-bs-theme="dark"] .ds-table-body td:first-child {
    background-color: var(--ds-surface-card);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
  }

  [data-bs-theme="dark"] .ds-table-header .ds-table-th:first-child {
    background-color: var(--ds-table-header-bg);
  }
}

[data-bs-theme="dark"] .ds-pagination {
  background-color: var(--ds-surface-card);
  border-top-color: var(--ds-table-border);
}

[data-bs-theme="dark"] .ds-pagination-pages .page-link {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-default);
  color: var(--ds-text-secondary);
}

[data-bs-theme="dark"] .ds-pagination-pages .page-link:hover {
  background-color: var(--ds-brand-primary-subtle);
  border-color: var(--ds-brand-primary);
  color: var(--ds-brand-primary);
}

[data-bs-theme="dark"] .ds-pagination-pages .page-item.active .page-link {
  background-color: var(--ds-brand-primary);
  border-color: var(--ds-brand-primary);
  color: var(--ds-text-on-primary);
}

[data-bs-theme="dark"] .ds-pagination-pages .page-item.disabled .page-link {
  background-color: var(--ds-surface-sunken);
  border-color: var(--ds-border-muted);
  color: var(--ds-text-disabled);
}


/* ==========================================================================
   HTMX TABLE LOADING INDICATOR
   Subtle loading bar shown above the table while HTMX fetches results.
   Uses the htmx-indicator pattern: hidden by default, shown when
   HTMX adds the .htmx-request class to the indicator's ancestor.
   ========================================================================== */

/* The loading bar container — hidden by default */
.ds-table-loading {
  position: relative;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--ds-duration-fast, 150ms) var(--ds-ease-default, ease);
}

/* Show loading bar when HTMX request is in flight */
.htmx-request .ds-table-loading,
.htmx-request.ds-table-loading {
  opacity: 1;
}

/* Animated progress bar inside */
.ds-table-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: var(--ds-brand-primary, #0d6efd);
  border-radius: 2px;
  animation: ds-loading-slide 1s ease-in-out infinite;
}

@keyframes ds-loading-slide {
  0% { left: -30%; }
  50% { left: 50%; }
  100% { left: 100%; }
}

/* Dim the table content during loading for visual feedback */
.htmx-request .ds-table-wrapper {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--ds-duration-fast, 150ms) var(--ds-ease-default, ease);
}

/* Search card styling */
.ds-search-card {
  border-color: var(--ds-border-default, #dee2e6);
}

[data-bs-theme="dark"] .ds-search-card {
  border-color: var(--ds-border-default);
  background-color: var(--ds-surface-card);
}


/* ==========================================================================
   FORM FIELDS
   Consistent form styling with validation UX, required indicators,
   error messages with icons, and focus rings using brand color.
   ========================================================================== */

/* --- Labels --- */
.ds-form-label {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-space-1-5);
  letter-spacing: 0.01em;
}

/* Required asterisk */
.ds-form-required {
  color: var(--ds-danger);
  font-weight: var(--ds-font-weight-bold);
  margin-left: var(--ds-space-0-5);
}

/* --- Inputs & Selects --- */
.ds-form-control,
.ds-form-select {
  font-size: var(--ds-font-size-base);
  border-color: var(--ds-input-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-input-bg);
  color: var(--ds-input-text);
  padding: var(--ds-space-2-5) var(--ds-space-3);
  transition: border-color var(--ds-duration-fast) var(--ds-ease-default),
              box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-form-control::placeholder {
  color: var(--ds-input-placeholder);
}

/* Focus ring in brand color */
.ds-form-control:focus,
.ds-form-select:focus {
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ds-brand-primary-subtle);
  outline: none;
}

/* Invalid state: red border */
.ds-form-control.is-invalid,
.ds-form-select.is-invalid {
  border-color: var(--ds-danger);
  box-shadow: none;
}

.ds-form-control.is-invalid:focus,
.ds-form-select.is-invalid:focus {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 0.2rem var(--ds-danger-subtle);
}

/* --- Error Messages --- */
.ds-form-error {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-0-5);
  margin-top: var(--ds-space-1);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-danger);
}

.ds-form-error-icon {
  font-size: var(--ds-font-size-xs);
  margin-right: var(--ds-space-1);
  vertical-align: middle;
}

/* --- Help Text --- */
.ds-form-help {
  margin-top: var(--ds-space-1);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
  line-height: var(--ds-line-height-normal);
}

/* --- Toggle Switch --- */
.ds-form-switch {
  padding-top: var(--ds-space-2);
  min-height: auto;
}

.ds-form-switch .form-check-input {
  cursor: pointer;
}

.ds-form-switch .form-check-input:checked {
  background-color: var(--ds-brand-primary);
  border-color: var(--ds-brand-primary);
}

.ds-form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--ds-brand-primary-subtle);
  border-color: var(--ds-brand-primary);
}

/* --- File Upload Drop Zone --- */
.ds-file-drop-zone {
  position: relative;
  border: 2px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-surface-sunken);
  padding: var(--ds-space-6) var(--ds-space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ds-duration-fast) var(--ds-ease-default),
              background-color var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-file-drop-zone:hover,
.ds-file-drop-zone.ds-file-drop-zone--dragover {
  border-color: var(--ds-brand-primary);
  background-color: var(--ds-brand-primary-subtle);
}

.ds-file-drop-zone--invalid {
  border-color: var(--ds-danger);
}

.ds-file-drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  pointer-events: none;
}

.ds-file-drop-zone-icon {
  font-size: var(--ds-font-size-2xl);
  color: var(--ds-text-muted);
}

.ds-file-drop-zone-text {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
}

/* Hide the native file input visually, overlay on the zone */
.ds-file-drop-zone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Small variant for inline/compact zones */
.ds-file-drop-zone--sm {
  padding: var(--ds-space-3) var(--ds-space-3);
}

.ds-file-drop-zone--sm .ds-file-drop-zone-icon {
  font-size: var(--ds-font-size-lg);
}

/* When a file is selected, tighten the zone around the preview card */
.ds-file-drop-zone--has-file {
  padding: 0;
  border-style: solid;
  border-color: var(--ds-border-default);
  background-color: var(--ds-surface-default);
}

/* File preview card — shown inside the drop zone after file selection */
.ds-file-preview-card {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  width: 100%;
  min-height: 0;
}

.ds-file-preview-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-default);
  flex-shrink: 0;
}

.ds-file-preview-icon-wrap {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface-sunken);
  border: 1px solid var(--ds-border-default);
  flex-shrink: 0;
}

.ds-file-preview-icon {
  font-size: 1.5rem;
  color: var(--ds-text-muted);
}

.ds-file-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-file-preview-name {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-file-preview-size {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}

.ds-file-preview-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--ds-radius-full);
  background-color: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default),
              color var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-file-preview-remove:hover {
  background-color: var(--ds-danger-subtle, rgba(220, 53, 69, 0.1));
  color: var(--ds-danger);
}

/* Compact preview for --sm zones */
.ds-file-drop-zone--sm .ds-file-preview-card {
  padding: var(--ds-space-2);
  gap: var(--ds-space-2);
}

.ds-file-drop-zone--sm .ds-file-preview-thumb,
.ds-file-drop-zone--sm .ds-file-preview-icon-wrap {
  width: 40px;
  height: 40px;
}

.ds-file-drop-zone--sm .ds-file-preview-icon {
  font-size: 1.125rem;
}

/* Legacy preview area (kept for backwards compat) */
.ds-file-preview {
  display: flex;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

.ds-file-preview img {
  max-height: 80px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-default);
}

/* --- Form Section Divider --- */
.ds-form-section {
  margin-top: var(--ds-space-6);
  margin-bottom: var(--ds-space-3);
  padding-bottom: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-border-muted);
}

.ds-form-section:first-child {
  margin-top: 0;
}

.ds-form-section-title {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-0-5);
}

.ds-form-section-desc {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
  margin-bottom: 0;
}

/* --- Form Actions Bar --- */
.ds-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-space-8);
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-border-muted);
}

.ds-form-actions-left {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.ds-form-actions-right {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

/* --- Responsive: Single Column on Mobile --- */
@media (max-width: 767.98px) {
  .ds-form-actions {
    flex-direction: column;
    gap: var(--ds-space-3);
    align-items: stretch;
  }

  .ds-form-actions-left,
  .ds-form-actions-right {
    justify-content: center;
  }

  .ds-form-actions-left .btn,
  .ds-form-actions-right .btn {
    flex: 1;
  }
}


/* ==========================================================================
   FORM FIELDS: DARK MODE
   ========================================================================== */

[data-bs-theme="dark"] .ds-form-label {
  color: var(--ds-text-secondary);
}

[data-bs-theme="dark"] .ds-form-control,
[data-bs-theme="dark"] .ds-form-select {
  background-color: var(--ds-input-bg);
  border-color: var(--ds-input-border);
  color: var(--ds-input-text);
}

[data-bs-theme="dark"] .ds-form-control::placeholder {
  color: var(--ds-input-placeholder);
}

[data-bs-theme="dark"] .ds-form-control:focus,
[data-bs-theme="dark"] .ds-form-select:focus {
  border-color: var(--ds-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ds-brand-primary-subtle);
}

[data-bs-theme="dark"] .ds-form-control.is-invalid,
[data-bs-theme="dark"] .ds-form-select.is-invalid {
  border-color: var(--ds-danger);
}

[data-bs-theme="dark"] .ds-file-drop-zone {
  background-color: var(--ds-surface-sunken);
  border-color: var(--ds-border-strong);
}

[data-bs-theme="dark"] .ds-file-drop-zone:hover,
[data-bs-theme="dark"] .ds-file-drop-zone.ds-file-drop-zone--dragover {
  border-color: var(--ds-brand-primary);
  background-color: var(--ds-brand-primary-subtle);
}

[data-bs-theme="dark"] .ds-form-section {
  border-bottom-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-form-section-title {
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .ds-form-actions {
  border-top-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-file-preview img {
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-file-drop-zone--has-file {
  background-color: var(--ds-surface-default);
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-file-preview-thumb {
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-file-preview-icon-wrap {
  background-color: var(--ds-surface-sunken);
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-file-preview-remove:hover {
  background-color: rgba(220, 53, 69, 0.15);
}


/* ==========================================================================
   FORM LAYOUT — Wrapper for consistent form spacing
   Apply .ds-form to the <form> element (or its card wrapper) to get:
   - Generous vertical rhythm between field rows
   - Proper padding inside cards
   - Consistent spacing that replaces ad-hoc mt-* hacks
   ========================================================================== */

/* Card containing a form gets slightly more generous padding */
.ds-form-card > .card-body {
  padding: var(--ds-space-6) var(--ds-space-8);
}

@media (max-width: 767.98px) {
  .ds-form-card > .card-body {
    padding: var(--ds-space-5) var(--ds-space-4);
  }
}

/* The form element itself: vertical stack with consistent gaps */
.ds-form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

/* Rows inside ds-form don't need extra margin — the gap handles it */
.ds-form > .row {
  margin-top: 0;
  margin-bottom: 0;
}

/* Each field column gets a small bottom margin for label-to-next-label breathing */
.ds-form .row > [class*="col-"] {
  margin-bottom: var(--ds-space-1);
}

/* Form sections within ds-form get refined spacing */
.ds-form .ds-form-section {
  margin-top: var(--ds-space-2);
  margin-bottom: var(--ds-space-0);
  padding-bottom: var(--ds-space-2);
}

.ds-form .ds-form-section:first-child {
  margin-top: 0;
}

/* Form actions bar sits flush — the gap + its own padding-top is enough */
.ds-form .ds-form-actions {
  margin-top: var(--ds-space-2);
}

/* Tighten the gap between a section heading and the fields below it */
.ds-form .ds-form-section + [class*="col-"] {
  margin-top: 0;
}

/* ==========================================================================
   DASHBOARD: QUICK ACTIONS BAR
   Horizontal row of shortcut buttons below stat cards.
   ========================================================================== */

.ds-quick-actions {
  background-color: var(--ds-surface-card);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-3) var(--ds-space-4);
  box-shadow: var(--ds-shadow-xs);
}

[data-bs-theme="dark"] .ds-quick-actions {
  background-color: var(--ds-surface-card);
}


/* ==========================================================================
   DASHBOARD: SIDEBAR ALERT CARDS
   Alert cards with colored left border accent for severity.
   ========================================================================== */

.ds-sidebar-alert {
  border-left: 3px solid var(--ds-border-default);
}

.ds-sidebar-alert--danger {
  border-left-color: var(--ds-danger);
}

.ds-sidebar-alert--warning {
  border-left-color: var(--ds-warning);
}

.ds-sidebar-alert--info {
  border-left-color: var(--ds-brand-primary);
}

.ds-sidebar-list-item {
  padding: var(--ds-space-2-5) var(--ds-space-3);
  border-color: var(--ds-border-muted);
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-sidebar-list-item:hover {
  background-color: var(--ds-surface-raised);
}

[data-bs-theme="dark"] .ds-sidebar-alert {
  border-left-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-sidebar-alert--danger {
  border-left-color: var(--ds-danger);
}

[data-bs-theme="dark"] .ds-sidebar-alert--warning {
  border-left-color: var(--ds-warning);
}

[data-bs-theme="dark"] .ds-sidebar-alert--info {
  border-left-color: var(--ds-brand-primary);
}

[data-bs-theme="dark"] .ds-sidebar-list-item {
  background-color: var(--ds-surface-card);
  border-color: var(--ds-border-muted);
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .ds-sidebar-list-item:hover {
  background-color: var(--ds-surface-raised);
}


/* ==========================================================================
   NOTIFICATIONS PAGE
   Card-based notification list with read/unread styling and date groups.
   ========================================================================== */

.ds-notifications-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ds-notification-date-header {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-muted);
  padding: var(--ds-space-3) var(--ds-space-1);
  margin-top: var(--ds-space-2);
}

.ds-notification-date-header:first-child {
  margin-top: 0;
}

.ds-notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background-color: var(--ds-surface-card);
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-1);
  box-shadow: var(--ds-shadow-xs);
  transition: box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-notification-item:hover {
  box-shadow: var(--ds-shadow-sm);
}

.ds-notification-item--unread {
  border-left: 3px solid var(--ds-brand-primary);
  background-color: var(--ds-brand-primary-subtle);
}

.ds-notification-icon {
  flex-shrink: 0;
  font-size: var(--ds-font-size-lg);
  padding-top: var(--ds-space-0-5);
}

.ds-notification-content {
  flex: 1;
  min-width: 0;
}

.ds-notification-message {
  margin-bottom: var(--ds-space-0-5);
  color: var(--ds-text-primary);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-normal);
}

.ds-notification-time {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-xs);
}

.ds-notification-actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--ds-space-1);
  align-items: center;
}

/* Dark mode notifications */
[data-bs-theme="dark"] .ds-notification-item {
  background-color: var(--ds-surface-card);
}

[data-bs-theme="dark"] .ds-notification-item--unread {
  border-left-color: var(--ds-brand-primary);
  background-color: var(--ds-brand-primary-subtle);
}

[data-bs-theme="dark"] .ds-notification-message {
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .ds-notification-date-header {
  color: var(--ds-text-muted);
}


/* ==========================================================================
   JOB DETAIL: WORKFLOW PROGRESS BAR
   Step indicator showing job card workflow position with
   completed / current / upcoming states.
   ========================================================================== */

.ds-workflow-progress {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: var(--ds-space-1) 0;
}

.ds-workflow-step,
button.ds-workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 5rem;
  position: relative;
  /* Reset button styles for clickable steps */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: default;
}

/* Inline form wrapper should not break flex layout */
.ds-workflow-step-form {
  display: contents;
}

.ds-workflow-step-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-bold);
  transition: all var(--ds-duration-fast) var(--ds-ease-default);
  border: 2px solid var(--ds-gray-300);
  background: var(--ds-surface-card);
  color: var(--ds-gray-400);
}

.ds-workflow-step--completed .ds-workflow-step-dot {
  background: var(--ds-success);
  border-color: var(--ds-success);
  color: #fff;
}

.ds-workflow-step--current .ds-workflow-step-dot {
  background: var(--ds-brand-primary);
  border-color: var(--ds-brand-primary);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--ds-brand-primary-rgb), 0.25);
}

.ds-workflow-step--upcoming .ds-workflow-step-dot {
  border-color: var(--ds-gray-300);
  background: var(--ds-surface-card);
  color: var(--ds-gray-400);
}

/* Clickable steps — hover/cursor feedback */
.ds-workflow-step--clickable {
  cursor: pointer;
}

.ds-workflow-step--clickable:hover .ds-workflow-step-dot {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(var(--ds-brand-primary-rgb), 0.2);
}

.ds-workflow-step--clickable.ds-workflow-step--completed:hover .ds-workflow-step-dot {
  box-shadow: 0 0 0 3px rgba(var(--ds-success-rgb), 0.2);
}

.ds-workflow-step--clickable.ds-workflow-step--upcoming:hover .ds-workflow-step-dot {
  border-color: var(--ds-brand-primary);
  color: var(--ds-brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--ds-brand-primary-rgb), 0.15);
}

.ds-workflow-step--clickable:hover .ds-workflow-step-label {
  color: var(--ds-brand-primary);
}

/* Locked (disabled) steps */
.ds-workflow-step--locked {
  cursor: not-allowed;
  opacity: 0.6;
}

.ds-workflow-step-label {
  margin-top: var(--ds-space-1);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-muted);
  text-align: center;
  white-space: nowrap;
}

.ds-workflow-step--current .ds-workflow-step-label {
  color: var(--ds-brand-primary);
  font-weight: var(--ds-font-weight-semibold);
}

.ds-workflow-step--completed .ds-workflow-step-label {
  color: var(--ds-success);
}

/* Connector lines between steps */
.ds-workflow-step-connector {
  flex: 1;
  height: 2px;
  min-width: 1.5rem;
  background: var(--ds-gray-300);
  align-self: flex-start;
  margin-top: calc(0.875rem - 1px); /* vertically center on the dot */
  transition: background var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-workflow-step-connector--completed {
  background: var(--ds-success);
}

.ds-workflow-step-connector--current {
  background: linear-gradient(90deg, var(--ds-brand-primary) 0%, var(--ds-gray-300) 100%);
}

/* Action buttons row */
.ds-workflow-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

.ds-workflow-actions--center {
  justify-content: center;
}

/* Inline blocker message */
.ds-workflow-blocker {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1-5);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-secondary);
  background: var(--ds-warning-subtle);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-1) var(--ds-space-2-5);
}

.ds-workflow-blocker i {
  flex-shrink: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 576px) {
  .ds-workflow-progress {
    gap: 0;
    padding: var(--ds-space-1) 0;
  }
  .ds-workflow-step {
    min-width: 3.5rem;
  }
  .ds-workflow-step-label {
    font-size: 0.625rem;
  }
  .ds-workflow-step-dot {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
  }
  .ds-workflow-step-connector {
    min-width: 0.75rem;
    margin-top: calc(0.75rem - 1px);
  }
}

/* Dark mode */
[data-bs-theme="dark"] .ds-workflow-step-dot {
  border-color: var(--ds-gray-600);
  background: var(--ds-surface-card);
  color: var(--ds-gray-500);
}

[data-bs-theme="dark"] .ds-workflow-step--completed .ds-workflow-step-dot {
  background: var(--ds-success);
  border-color: var(--ds-success);
  color: #fff;
}

[data-bs-theme="dark"] .ds-workflow-step--current .ds-workflow-step-dot {
  background: var(--ds-brand-primary);
  border-color: var(--ds-brand-primary);
  color: #fff;
}

[data-bs-theme="dark"] .ds-workflow-step-connector {
  background: var(--ds-gray-600);
}

[data-bs-theme="dark"] .ds-workflow-step-connector--completed {
  background: var(--ds-success);
}

[data-bs-theme="dark"] .ds-workflow-blocker {
  background: rgba(var(--ds-warning-rgb), 0.15);
  color: var(--ds-text-secondary);
}

/* ==========================================================================
   JOB DETAIL: TABBED INTERFACE
   Bootstrap nav-tabs customized with design tokens, HTMX lazy-load
   placeholders, and responsive horizontal scrolling on mobile.
   ========================================================================== */

/* Tab navigation bar */
.ds-detail-tabs {
  border-bottom: 2px solid var(--ds-border-default);
  gap: var(--ds-space-0-5);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.ds-detail-tabs .nav-link {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--ds-space-2-5) var(--ds-space-3);
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--ds-duration-fast) var(--ds-ease-default),
              border-color var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-detail-tabs .nav-link:hover {
  color: var(--ds-text-primary);
  border-bottom-color: var(--ds-border-strong);
}

.ds-detail-tabs .nav-link.active {
  color: var(--ds-brand-primary);
  border-bottom-color: var(--ds-brand-primary);
  background: transparent;
}

.ds-detail-tabs .nav-link .badge {
  font-size: 0.65em;
  vertical-align: middle;
}

/* Tab content area */
.ds-tab-content {
  padding-top: var(--ds-space-4);
}

/* Loading placeholder shown while HTMX fetches tab content */
.ds-tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-12) var(--ds-space-4);
  color: var(--ds-text-muted);
}

/* Overview stat cards */
.ds-overview-stat {
  transition: transform var(--ds-duration-fast) var(--ds-ease-default),
              box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}

.ds-overview-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

/* Responsive: hide scrollbar track on mobile but keep scrollable */
@media (max-width: 767.98px) {
  .ds-detail-tabs {
    padding-bottom: var(--ds-space-0-5);
  }

  .ds-detail-tabs .nav-link {
    font-size: var(--ds-font-size-xs);
    padding: var(--ds-space-2) var(--ds-space-2);
  }
}


/* ==========================================================================
   JOB DETAIL: SIDEBAR
   Compact info cards with key-value list pattern.
   ========================================================================== */

.ds-detail-sidebar {
  position: sticky;
  top: calc(var(--ds-space-4) + 56px); /* below navbar */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ds-sidebar-card {
  box-shadow: var(--ds-shadow-xs);
}

.ds-sidebar-card .card-header {
  padding: var(--ds-space-2-5) var(--ds-space-3);
  background: transparent;
  border-bottom: 1px solid var(--ds-border-muted);
}

.ds-sidebar-card .card-header h6 {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
}

/* Key-value detail list */
.ds-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-detail-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border-muted);
}

.ds-detail-list-item:last-child {
  border-bottom: none;
}

.ds-detail-list-item dt {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  margin-right: var(--ds-space-2);
}

.ds-detail-list-item dd {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-primary);
  text-align: right;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}


/* ==========================================================================
   JOB DETAIL: ACTIVITY FEED
   Timeline-style activity entries with icons.
   ========================================================================== */

.ds-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ds-activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2-5);
  padding: var(--ds-space-2) 0;
  border-bottom: 1px solid var(--ds-border-muted);
}

.ds-activity-item:last-child {
  border-bottom: none;
}

.ds-activity-icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  padding-top: var(--ds-space-0-5);
}

.ds-activity-content {
  flex: 1;
  min-width: 0;
  font-size: var(--ds-font-size-sm);
}


/* ==========================================================================
   JOB DETAIL: DARK MODE
   ========================================================================== */

[data-bs-theme="dark"] .ds-detail-tabs {
  border-bottom-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-detail-tabs .nav-link {
  color: var(--ds-text-muted);
}

[data-bs-theme="dark"] .ds-detail-tabs .nav-link:hover {
  color: var(--ds-text-primary);
  border-bottom-color: var(--ds-border-strong);
}

[data-bs-theme="dark"] .ds-detail-tabs .nav-link.active {
  color: var(--ds-brand-primary);
  border-bottom-color: var(--ds-brand-primary);
}

[data-bs-theme="dark"] .ds-sidebar-card {
  background-color: var(--ds-surface-card);
}

[data-bs-theme="dark"] .ds-sidebar-card .card-header {
  border-bottom-color: var(--ds-border-muted);
}

[data-bs-theme="dark"] .ds-detail-list-item {
  border-bottom-color: var(--ds-border-muted);
}

[data-bs-theme="dark"] .ds-detail-list-item dt {
  color: var(--ds-text-muted);
}

[data-bs-theme="dark"] .ds-detail-list-item dd {
  color: var(--ds-text-primary);
}

[data-bs-theme="dark"] .ds-activity-item {
  border-bottom-color: var(--ds-border-muted);
}

[data-bs-theme="dark"] .ds-overview-stat {
  background-color: var(--ds-surface-card);
}


/* ==========================================================================
   ITEM DETAIL: IMAGE + DESCRIPTION ROW
   50/50 side-by-side layout with fixed row height. Image cell shows a
   placeholder when no image is uploaded, and falls back to an "Image
   unavailable" state when an uploaded image fails to load. The description
   cell scrolls internally when content overflows the fixed row height.
   ========================================================================== */

.ds-item-media-row {
  --ds-item-media-height: 320px;
}

.ds-item-media-row .card {
  height: var(--ds-item-media-height);
  overflow: hidden;
}

/* Image cell: fill the card, contain the image, center everything */
.ds-item-image-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  background-color: var(--ds-surface-sunken);
}

.ds-item-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ds-item-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
  font-style: italic;
  text-align: center;
  padding: var(--ds-space-4);
}

.ds-item-image-empty i {
  font-size: 2rem;
  font-style: normal;
  opacity: 0.6;
}

/* Description cell: scroll internally when content overflows */
.ds-item-description-cell {
  /* min-height: 0 lets the body shrink inside the fixed-height flex card
     so overflow-y: auto actually kicks in (instead of the card growing). */
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  white-space: pre-line;
  word-break: break-word;
}

/* Responsive: stack on small screens, shorter fixed height per block */
@media (max-width: 767.98px) {
  .ds-item-media-row {
    --ds-item-media-height: 260px;
  }
}

[data-bs-theme="dark"] .ds-item-image-cell {
  background-color: var(--ds-surface-sunken);
}


/* ==========================================================================
   UTILITY CLASSES
   Reusable single-purpose classes that replace inline style="" attributes.
   All use the ds- prefix to avoid collisions with Bootstrap utilities.
   ========================================================================== */

/* --- Progress Bar Heights --- */
.ds-progress-thin   { height: 6px; }
.ds-progress-medium { height: 8px; }

/* --- Image Thumbnails --- */
.ds-img-thumb-sm { max-height: 80px; }
.ds-img-thumb-md { max-height: 200px; }
.ds-img-thumb-lg { max-height: 280px; }

/* --- Icon Sizing --- */
.ds-icon-lg  { font-size: 1.25rem; }
.ds-icon-xl  { font-size: 2rem; }
.ds-icon-2xl { font-size: 2.5rem; }

/* --- Text Utilities --- */
.ds-text-prewrap { white-space: pre-line; }
.ds-text-xs      { font-size: 0.75rem; }

/* --- Visibility --- */
.ds-hidden { display: none; }

/* --- Form Utilities --- */
.ds-select-narrow  { max-width: 250px; }
.ds-progress-minw  { min-width: 40px; }

/* --- Empty State Padding --- */
.ds-empty-padded    { padding: var(--ds-space-8) var(--ds-space-4); }
.ds-empty-padded-lg { padding: var(--ds-space-12) var(--ds-space-4); }

/* --- Special Icon States --- */
.ds-icon-success-muted {
  font-size: 2.5rem;
  color: var(--ds-success);
  opacity: 0.6;
}

/* --- Color Utilities (only where Bootstrap has no equivalent) --- */
.ds-text-disabled { color: var(--ds-text-disabled); }

/* ==========================================================================
   HTMX PROGRESS BAR
   Thin top-of-viewport bar that animates during htmx requests.
   Activated via .htmx-request class that htmx adds to the body.
   ========================================================================== */

.ds-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: var(--ds-brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.htmx-request .ds-progress-bar {
  transform: scaleX(0.8);
}

.ds-progress-bar.ds-progress-complete {
  transform: scaleX(1);
  transition: transform 0.15s ease;
}