/* =============================================================================
   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;
  /* A th centres by default; over left-aligned cells that read as misaligned. */
  text-align: start;
}

/* Figures line up on their last digit, and so does their heading. */
.s-table > thead > tr > th.num,
.s-table > tbody > tr > td.num,
.s-table > tfoot > tr > td.num {
  text-align: end;
}

/* 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 {
  /* The scroll area holds what is absolutely placed inside it too: the hidden "Actions" header label
     escaped it and widened the whole page on a phone (review 145, 678 px on a 390 px screen). */
  position: relative;
  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;
}

/* Refresh (October 2026): STable reads like SGrid. Headings in sentence case at the
   small size (capitals made every heading shout and hid the words' shapes), the row
   under the pointer tinted by the accent, the focused row ringed. */
.s-table > thead > tr > th {
  text-transform: none;
  letter-spacing: .01em;
  font-size: var(--ui-sm);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border-block-end: 1px solid var(--line);
}
.s-table > tbody > tr { transition: background var(--dur) var(--ease); }
.s-table > tbody > tr:hover > td { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.s-table > tbody > tr:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }