/* Pastel success overrides (Sage Pastel) */
:root {
  --bs-success: #7bae7f;
  --bs-success-rgb: 123, 174, 127;

  /* Emphasis and subtle variants */
  --bs-success-text-emphasis: color-mix(in sRGB, #000 65%, var(--bs-success));
  --bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.12);
  --bs-success-border-subtle: rgba(var(--bs-success-rgb), 0.28);
}

/* Dark theme tuning */
[data-bs-theme="dark"] {
  /* Make text emphasis lighter in dark */
  --bs-success-text-emphasis: color-mix(in sRGB, var(--bs-paper-bg) 30%, var(--bs-success));
  /* Softer backgrounds in dark */
  --bs-success-bg-subtle: color-mix(in sRGB, var(--bs-paper-bg) 88%, var(--bs-success));
  --bs-success-border-subtle: color-mix(in sRGB, var(--bs-paper-bg) 72%, var(--bs-success));
}

/* Compact tables and sticky helpers */
.table-compact {
  --bs-table-cell-padding-y: .25rem;
  --bs-table-cell-padding-x: .5rem;
  font-size: .875rem;
}

.table-compact thead th { font-size: .75rem; }

/* Sticky table header that accounts for the app's fixed navbar + horizontal menu */
:root {
  --sticky-header-offset: 8.15rem; /* navbar (4rem) + horizontal menu (~4.15rem), measured */
}

@media (max-width: 1199.98px) {
  /* Below xl the horizontal menu is no longer fixed, only the navbar stays pinned */
  :root { --sticky-header-offset: 4rem; }
}

/*
 * Bootstrap's .table-responsive sets overflow-x: auto, which per the CSS overflow
 * computed-value fixup also forces overflow-y to a non-"visible" value — turning this
 * div into a scroll container, which position: sticky would pin against instead of the
 * page. We don't rely on sticky at all: the `sticky-table-header` Stimulus controller
 * (assets/controllers/sticky-table-header_controller.js) clones <thead> into a
 * `position: fixed` overlay once the table scrolls past the fixed navbar/menu, and
 * mirrors this div's horizontal scroll onto the clone. That keeps a single page-level
 * vertical scroll while horizontal overflow (text-nowrap + long content on narrow
 * screens) still scrolls within this box instead of bleeding out past the card.
 */
.table-responsive-sticky {
  overflow-x: auto;
}

/* Name column width and truncation */
.td-name { max-width: 420px; }
.td-name .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-name .meta { font-size: .8125rem; color: var(--bs-body-color); opacity: .7; }
.td-name .meta .danger { color: var(--bs-danger); opacity: 1; }

@media (max-width: 767.98px) {
  .td-name { max-width: none; }
  /* Mobile row separator element */
  .mobile-separator {
    height: 1px;
    background-color: color-mix(in sRGB, var(--bs-body-color) 18%, transparent);
    margin: .75rem 0 .25rem;
    border-radius: 1px;
  }
  [data-bs-theme="dark"] .mobile-separator {
    background-color: color-mix(in sRGB, #ffffff 22%, transparent);
  }
}

/* Typography utilities (Bootstrap-friendly) */
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-extrabold { font-weight: 800 !important; }

/* Semantic aliases for readability */
.text-medium { font-weight: 500 !important; }
.text-semibold { font-weight: 600 !important; }
.text-bold { font-weight: 700 !important; }
.text-extrabold { font-weight: 800 !important; }
.td-name .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-name .meta { font-size: .8125rem; color: var(--bs-body-color); opacity: .7; }
.td-name .meta .danger { color: var(--bs-danger); opacity: 1; }



/* Datatables */
.dt-info {padding-left: 20px;font-size: 12px;}