/* =============================================================================
   A4 - table, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 1 colour literal(s) -> on-accent, 6 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 1 silent
   literal fallback(s) dropped, 2 black shadow(s) re-based on --ink,
   0 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Data Table
   Striped, hoverable, bordered variants, sortable headers, filter row,
   editing, grouping, master-detail, summary footer, export, compact mode
   ============================================================================ */

.s-table-wrapper {
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.s-table {
  inline-size: 100%;
  margin-block-end: 0;
  color: var(--s-table-color);
  vertical-align: middle;
  border-color: var(--s-table-border-color);
  border-collapse: collapse;
  font-size: var(--s-font-size-base);
}

.s-table > :not(caption) > * > * {
  padding-block: 0.75rem;
  padding-inline: 1rem;
  background-color: var(--s-table-bg);
  border-block-end: var(--s-border-width) solid var(--s-table-border-color);
  transition: var(--s-transition-bg);
}

/* Table Head */
.s-table > thead > tr > th {
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--s-letter-spacing-wider);
  color: var(--s-table-head-color);
  background-color: var(--s-table-head-bg);
  border-block-end-width: 2px;
  white-space: nowrap;
  user-select: none;
}

/* Table Body */
.s-table > tbody > tr > td {
  color: var(--s-table-color);
}

/* Caption */
.s-table > caption {
  padding-block: 0.75rem;
  padding-inline: 1rem;
  color: var(--s-muted-color);
  caption-side: bottom;
}

/* ---------------------------------------------------------------------------
   Variants
   --------------------------------------------------------------------------- */

/* Striped Rows */
.s-table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--s-table-striped-bg);
}

/* Striped Columns */
.s-table-striped-columns > :not(caption) > tr > :nth-child(even) {
  background-color: var(--s-table-striped-bg);
}

/* Hoverable */
.s-table-hover > tbody > tr {
  cursor: pointer;
}

.s-table-hover > tbody > tr:hover > * {
  background-color: var(--s-table-hover-bg);
}

/* Active Row */
.s-table > tbody > tr.active > * {
  background-color: var(--s-table-active-bg);
}

/* Bordered */
.s-table-bordered > :not(caption) > * > * {
  border-inline: var(--s-border-width) solid var(--s-table-border-color);
}

.s-table-bordered > :not(caption) > * {
  border-block: var(--s-border-width) solid var(--s-table-border-color);
}

/* Borderless */
.s-table-borderless > :not(caption) > * > * {
  border-block-end-width: 0;
}

/* ---------------------------------------------------------------------------
   Sortable Headers
   --------------------------------------------------------------------------- */

.s-datatable-sortable {
  cursor: pointer;
  position: relative;
  padding-inline-end: 1.75rem !important;
}

.s-datatable-sortable:hover {
  background-color: var(--s-table-hover-bg) !important;
}

/* Legacy support for standalone s-table */
.s-table-sortable th {
  cursor: pointer;
  position: relative;
  padding-inline-end: 1.75rem;
}

.s-table-sortable th:hover {
  background-color: var(--s-table-hover-bg);
}

.s-table-sortable th::after {
  content: '';
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-end: 5px solid var(--s-muted-color);
  opacity: 0.3;
  margin-block-start: -4px;
}

.s-table-sortable th::before {
  content: '';
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid var(--s-muted-color);
  opacity: 0.3;
  margin-block-start: 4px;
}

.s-table-sortable th.sort-asc::after {
  opacity: 1;
  border-block-end-color: var(--s-primary);
}

.s-table-sortable th.sort-asc::before {
  opacity: 0.3;
}

.s-table-sortable th.sort-desc::before {
  opacity: 1;
  border-block-start-color: var(--s-primary);
}

.s-table-sortable th.sort-desc::after {
  opacity: 0.3;
}

/* ---------------------------------------------------------------------------
   SDataTable Wrapper
   --------------------------------------------------------------------------- */

.s-datatable {
  position: relative;
}

.s-datatable-table {
  margin-block-end: 0;
}

.s-datatable-toolbar {
  padding-block: 0.25rem;
}

.s-datatable-footer {
  padding-block: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Filter Row
   --------------------------------------------------------------------------- */

.s-datatable-filter-row > th {
  padding-block: 0.375rem !important;
  padding-inline: 0.5rem !important;
  background-color: var(--s-table-head-bg) !important;
  border-block-end-width: 2px;
}

.s-datatable-filter-input {
  font-size: var(--s-font-size-xs) !important;
  padding-block: 0.25rem !important;
  padding-inline: 0.5rem !important;
}

.s-datatable-filter-input:focus {
  border-color: var(--s-primary);
  box-shadow: none;
}

.s-datatable-filter-input::placeholder {
  color: var(--s-input-placeholder);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Editing
   --------------------------------------------------------------------------- */

.s-datatable-edit-row > td {
  background-color: var(--s-primary-tint) !important;
  vertical-align: middle;
}

.s-datatable-new-row > td {
  background-color: var(--s-success-tint) !important;
}

.s-datatable-edit-row .form-control {
  font-size: var(--s-font-size-sm);
}

.s-datatable-th-actions {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Master-Detail
   --------------------------------------------------------------------------- */

.s-datatable-detail-toggle {
  text-align: center;
  cursor: pointer;
  color: var(--s-muted-color);
  transition: color 0.15s ease;
}

.s-datatable-detail-toggle:hover {
  color: var(--s-primary);
}

.s-datatable-detail-toggle i {
  font-size: 1.125rem;
  transition: transform 0.15s ease;
}

.s-datatable-detail-row > td {
  background-color: var(--s-table-head-bg) !important;
  border-block-end: 2px solid var(--s-border-color);
}

.s-datatable-detail-content {
  padding: 1rem 1.25rem;
  animation: s-detail-slide-down 0.2s ease-out;
}

@keyframes s-detail-slide-down {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* ---------------------------------------------------------------------------
   Grouping
   --------------------------------------------------------------------------- */

.s-datatable-group-row {
  cursor: pointer;
  user-select: none;
}

.s-datatable-group-row > td {
  background-color: var(--s-table-head-bg) !important;
  padding-block: 0.5rem !important;
  padding-inline: 1rem !important;
  font-size: var(--s-font-size-sm);
  border-block-end: var(--s-border-width) solid var(--s-border-color);
}

.s-datatable-group-row:hover > td {
  background-color: var(--s-primary-tint) !important;
}

.s-datatable-group-row i {
  color: var(--s-primary);
  font-size: 1rem;
  vertical-align: middle;
  transition: transform 0.15s ease;
}

/* ---------------------------------------------------------------------------
   Summary Footer
   --------------------------------------------------------------------------- */

.s-datatable-summary-row > td {
  background-color: var(--s-table-head-bg) !important;
  border-block-start: 2px solid var(--s-border-color);
  font-size: var(--s-font-size-sm);
  padding-block: 0.625rem !important;
}

.s-datatable-summary-cell strong {
  color: var(--s-heading-color);
}

/* ---------------------------------------------------------------------------
   Frozen Columns
   --------------------------------------------------------------------------- */

.s-datatable-frozen {
  position: sticky;
  z-index: 1;
  background-color: var(--s-card-bg);
}

/* Shadow border only on the last (rightmost) frozen column */
.s-datatable-frozen-last::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  block-size: 100%;
  inline-size: 4px;
  box-shadow: inset -4px 0 4px -4px color-mix(in srgb, var(--ink) 10%, transparent);
}

thead .s-datatable-frozen {
  z-index: 3;
  background-color: var(--s-table-head-bg);
}

/* ---------------------------------------------------------------------------
   Compact / Dense
   --------------------------------------------------------------------------- */

.s-datatable-compact .s-datatable-table > :not(caption) > * > * {
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
}

.s-datatable-compact .s-datatable-table {
  font-size: var(--s-font-size-sm);
}

.s-table-sm > :not(caption) > * > * {
  padding-block: 0.375rem;
  padding-inline: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Responsive breakpoint tables
   --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   Row Color Variants
   --------------------------------------------------------------------------- */

.s-table > tbody > tr.s-table-primary > *   { background-color: var(--s-primary-light); color: var(--s-primary); }
.s-table > tbody > tr.s-table-secondary > * { background-color: var(--s-secondary-light); color: var(--s-secondary); }
.s-table > tbody > tr.s-table-success > *   { background-color: var(--s-success-light); color: var(--s-success); }
.s-table > tbody > tr.s-table-danger > *    { background-color: var(--s-danger-light); color: var(--s-danger); }
.s-table > tbody > tr.s-table-warning > *   { background-color: var(--s-warning-light); color: var(--s-warning); }
.s-table > tbody > tr.s-table-info > *      { background-color: var(--s-info-light); color: var(--s-info); }

/* ---------------------------------------------------------------------------
   Table within a card (no outer border)
   --------------------------------------------------------------------------- */

.s-card > .s-table,
.s-card > .s-table-wrapper > .s-table {
  margin-block-end: 0;
}

.s-card > .s-table > :not(caption) > *:last-child > * {
  border-block-end: 0;
}

/* Selection checkbox column */
.s-datatable-th-check {
  text-align: center;
}

.s-table-check {
  inline-size: 3rem;
  text-align: center;
}

/* Empty state */
.s-table-empty {
  text-align: center;
  padding-block: 3rem;
  color: var(--s-muted-color);
}

.s-table-empty-icon {
  font-size: 2.5rem;
  margin-block-end: 0.75rem;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Page Size Selector
   --------------------------------------------------------------------------- */

.s-datatable-footer .form-select-sm {
  font-size: var(--s-font-size-xs);
  padding-block: 0.25rem;
  min-inline-size: 60px;
}

/* ---------------------------------------------------------------------------
   Multi-Sort Order Badge
   --------------------------------------------------------------------------- */

.s-datatable-sort-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background-color: var(--s-primary);
  color: var(--on-accent);
  font-size: 0.625rem;
  font-weight: var(--s-font-weight-semibold);
  margin-inline-start: 0.125rem;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Filter Menu
   --------------------------------------------------------------------------- */

.s-datatable-filter-btn {
  background: none;
  border: none;
  padding: 0;
  margin-inline-start: 0.25rem;
  color: var(--s-muted-color);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.s-datatable-sortable:hover .s-datatable-filter-btn,
.s-datatable-filter-btn:hover {
  opacity: 1;
}

.s-datatable-filter-active {
  color: var(--s-primary) !important;
  opacity: 1 !important;
}

.s-datatable-filter-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 1050;
  min-inline-size: 240px;
  background-color: var(--s-card-bg);
  border: var(--s-border-width) solid var(--s-border-color);
  border-radius: var(--s-border-radius);
  box-shadow: var(--s-shadow-lg, 0 4px 24px color-mix(in srgb, var(--ink) 12%, transparent));
  margin-block-start: 2px;
}

.s-datatable-filter-menu-body {
  padding: 0.75rem;
}

.s-datatable-filter-menu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-block-start: var(--s-border-width) solid var(--s-border-color);
  background-color: var(--s-body-color-tint);
}

/* ---------------------------------------------------------------------------
   InCell Editing
   --------------------------------------------------------------------------- */

.s-datatable-incell-editable {
  cursor: text;
  position: relative;
}

.s-datatable-incell-editable:hover {
  outline: 1px dashed var(--s-primary);
  outline-offset: -1px;
}

.s-datatable-incell-input {
  margin: -0.25rem -0.5rem;
  width: calc(100% + 1rem) !important;
  font-size: inherit !important;
}

/* ---------------------------------------------------------------------------
   Batch Editing
   --------------------------------------------------------------------------- */

.s-datatable-dirty-row > td:first-child {
  border-inline-start: 3px solid var(--s-warning) !important;
}

.s-datatable-dirty-cell {
  background-color: var(--s-warning-tint) !important;
}

/* ---------------------------------------------------------------------------
   Column Resize Handle
   --------------------------------------------------------------------------- */

.s-datatable-table > thead > tr > th {
  position: relative;
}

.s-datatable-resize-handle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 4px;
  block-size: 100%;
  cursor: col-resize;
  z-index: 2;
}

.s-datatable-resize-handle:hover,
.s-datatable-resize-handle:active {
  background-color: var(--s-primary);
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Column Reorder
   --------------------------------------------------------------------------- */

.s-datatable-reorderable {
  cursor: grab;
}

.s-datatable-reorderable:active {
  cursor: grabbing;
}

/* ---------------------------------------------------------------------------
   Cell Selection
   --------------------------------------------------------------------------- */

.s-datatable-cell-selected {
  outline: 2px solid var(--s-primary);
  outline-offset: -2px;
  background-color: var(--s-primary-tint) !important;
}

/* ---------------------------------------------------------------------------
   Custom Footer
   --------------------------------------------------------------------------- */

.s-datatable-custom-footer > td {
  background-color: var(--s-table-head-bg);
  border-block-start: 2px solid var(--s-border-color);
  font-size: var(--s-font-size-sm);
}

/* ---------------------------------------------------------------------------
   Virtual Scrolling
   --------------------------------------------------------------------------- */

.s-datatable-virtual .table-responsive {
  contain: layout;
}