/* Steve's Tables — "default" skin.
 *
 * The bundled look. Everything visual for the whole plugin lives here; the
 * plugin's own style.css has no design in it at all.
 *
 * HOW TO RETHEME WITHOUT FORKING
 * ------------------------------
 * Skip this file and set the tokens on your own class. This is the whole
 * point of the skin system — nothing below is load-bearing:
 *
 *   .my-table {                       /* or .steves-table--skin-default *\/
 *     --steves-font:      "Inter", sans-serif;
 *     --steves-fg:        #1a1a1a;
 *     --steves-accent:    #b5441f;
 *     --steves-radius:    0;
 *     --steves-font-size: 15px;
 *   }
 *
 * Add your own rules on top for anything the tokens don't cover. To ship the
 * same look to every table on a site, override the tokens on
 * `.steves-table--skin-default` in your child theme — a later stylesheet wins
 * at equal specificity.
 *
 * Or register a new skin (see includes/skins.php) so it is selectable per
 * table in Settings > Steve's Tables.
 */

.steves-table--skin-default {
  /* ---- Type ---------------------------------------------------- */
  --steves-font: inherit;
  --steves-font-size: 14px;
  --steves-line-height: 1.45;
  --steves-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Colour -------------------------------------------------- */
  --steves-fg: #111827;
  --steves-fg-muted: #4b5563;
  --steves-bg: #ffffff;
  --steves-surface: #f9fafb;
  --steves-surface-alt: #f3f4f6;
  --steves-border: #d1d5db;
  --steves-border-subtle: #e5e7eb;
  --steves-accent: #005a87;
  --steves-accent-contrast: #ffffff;
  --steves-accent-hover: #004665;
  --steves-link: #005a87;
  --steves-focus-ring: #005a87;

  --steves-ok-bg: #ecfdf5;
  --steves-ok-border: #6ee7b7;
  --steves-ok-fg: #065f46;
  --steves-warn-bg: #fff7ed;
  --steves-warn-border: #fed7aa;
  --steves-warn-fg: #7c2d12;
  --steves-danger-bg: #fef2f2;
  --steves-danger-border: #fecaca;
  --steves-danger-fg: #7f1d1d;
  --steves-danger-solid: #b91c1c;

  --steves-tag-bg: #dbeafe;
  --steves-tag-fg: #1e40af;

  /* ---- Shape --------------------------------------------------- */
  --steves-radius: 6px;
  --steves-radius-lg: 12px;
  --steves-gap: 12px;
  --steves-gap-sm: 6px;
  --steves-cell-padding: 8px 10px;

  /* Capping the viewport is what makes the sticky header work: the
   * container is the scroll parent, and without a height cap there is
   * nothing to scroll. Set to `none` for a page that scrolls naturally. */
  --steves-viewport-max-height: min(75vh, 900px);

  /* ---- Shadows (last, so skins can drop them) ------------------ */
  --steves-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --steves-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.15);
  --steves-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.25);
  --steves-overlay: rgba(0, 0, 0, 0.6);

  /* Base. */
  color: var(--steves-fg);
  font-family: var(--steves-font);
  font-size: var(--steves-font-size);
  line-height: var(--steves-line-height);
  padding: 10px;
}

.steves-table--skin-default * { box-sizing: border-box; }

.steves-table--skin-default a {
  color: var(--steves-link);
}

/* ==================================================================
   Controls
   ================================================================== */

.steves-table--skin-default .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--steves-gap-sm);
  padding: 5px;
  z-index: 1;
}

.steves-table--skin-default button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--steves-border);
  border-radius: var(--steves-radius);
  background: var(--steves-bg);
  color: var(--steves-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.steves-table--skin-default button:hover:not(:disabled) {
  background: var(--steves-surface-alt);
}

.steves-table--skin-default button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.steves-table--skin-default input[type="text"],
.steves-table--skin-default input[type="search"],
.steves-table--skin-default select {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--steves-border);
  border-radius: var(--steves-radius);
  background: var(--steves-bg);
  color: var(--steves-fg);
  font: inherit;
}

.steves-table--skin-default input::placeholder { color: var(--steves-fg-muted); }

.steves-table--skin-default input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--steves-accent);
  cursor: pointer;
}

/* Data-source / sheet picker. */
.steves-table--skin-default .steves-table__sources {
  justify-content: center;
  /* Takes the space the "clear all" control leaves behind (see the control's
   * rules below) so the buttons stay centred in it. */
  flex: 1 1 auto;
  min-width: 0;
}

.steves-table--skin-default .source-btn {
  background: var(--steves-surface);
}

.steves-table--skin-default .source-btn.active {
  background: var(--steves-accent);
  border-color: var(--steves-accent);
  color: var(--steves-accent-contrast);
}

.steves-table--skin-default .source-btn.back-to-sources-btn {
  background: var(--steves-surface-alt);
  color: var(--steves-fg-muted);
  border-style: dashed;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.steves-table--skin-default .source-btn.back-to-sources-btn:hover {
  background: var(--steves-border-subtle);
  color: var(--steves-fg);
}

/* Column filter buttons. */
.steves-table--skin-default .filter-btn {
  background: var(--steves-surface);
  font-size: 0.85em;
}

.steves-table--skin-default .filter-btn::after {
  content: " ▾";
  font-size: 0.8em;
}

.steves-table--skin-default .filter-btn.active,
.steves-table--skin-default .filter-btn[aria-expanded="true"] {
  background: var(--steves-accent);
  border-color: var(--steves-accent);
  color: var(--steves-accent-contrast);
}

.steves-table--skin-default .export-btn {
  margin-left: auto;
  background: var(--steves-surface);
}

/* The search toolbar. */
.steves-table--skin-default .steves-table__toolbar {
  justify-content: flex-start;
  padding: var(--steves-gap);
  background: var(--steves-bg);
  border: 1px solid var(--steves-border-subtle);
  border-bottom: 0;
  border-radius: var(--steves-radius-lg) var(--steves-radius-lg) 0 0;
}

.steves-table--skin-default .steves-table__toolbar input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
}

/* Active filter chips. */
.steves-table--skin-default .steves-table__filters-summary {
  display: none;
  margin-bottom: var(--steves-gap);
  padding: 10px;
  border: 1px solid var(--steves-border-subtle);
  border-radius: var(--steves-radius);
  background: var(--steves-surface);
}

.steves-table--skin-default .steves-table__filters-summary strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steves-fg-muted);
}

.steves-table--skin-default .filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 6px 6px 0;
  padding: 4px 8px;
  border-radius: var(--steves-radius);
  background: var(--steves-tag-bg);
  color: var(--steves-tag-fg);
  font-size: 12px;
}

.steves-table--skin-default .filter-tag .remove {
  cursor: pointer;
  color: var(--steves-danger-solid);
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}

.steves-table--skin-default .filter-tag .remove:hover { background: rgba(0, 0, 0, 0.06); }

/* Welcome section. */
.steves-table--skin-default .steves-table__welcome {
  margin: var(--steves-gap) 0;
  padding: var(--steves-gap);
  border: 1px solid var(--steves-border-subtle);
  border-radius: var(--steves-radius);
  background: var(--steves-surface);
}

/* The way back to the welcome section. Deliberately quiet - it is an escape
 * hatch, not a primary action - so it reads as a bare icon parked at the end of
 * the source row rather than a fourth button in it. The nav becomes the row;
 * the source group keeps the space that is left, so its own centring still
 * applies, and the control sits in the gap at the far end. */
.steves-table--skin-default > nav[id^="sourceSection-"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.steves-table--skin-default .steves-table__clear-all {
  flex: none;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--steves-fg-muted);
}

.steves-table--skin-default .steves-table__clear-all:hover {
  border-color: var(--steves-border);
  background: var(--steves-surface-alt);
  color: var(--steves-fg);
}

.steves-table--skin-default .steves-table__clear-all-icon {
  display: block;
  width: 14px;
  height: 14px;
}

/* ==================================================================
   The table
   ================================================================== */

.steves-table--skin-default .steves-table__viewport {
  background: var(--steves-bg);
  border: 1px solid var(--steves-border-subtle);
  border-radius: 0 0 var(--steves-radius-lg) var(--steves-radius-lg);
}

.steves-table--skin-default th {
  padding: 10px;
  background: var(--steves-surface-alt);
  border-bottom: 2px solid var(--steves-border);
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
}

.steves-table--skin-default td {
  padding: var(--steves-cell-padding);
  border-bottom: 1px solid var(--steves-border-subtle);
}

/* Stripe the data rows only. The old rule was a bare
 * `tr:nth-child(even)`, which striped the injected detail rows too. */
.steves-table--skin-default tbody tr:not(.detail-row):nth-child(even) {
  background: var(--steves-surface-alt);
}

.steves-table--skin-default tbody tr:not(.detail-row):hover {
  background: color-mix(in srgb, var(--steves-accent) 6%, transparent);
}

/* Expand/collapse details row. */
.steves-table--skin-default .detail-row > td {


  font-size: 0.95em;
  text-align: start;
  white-space: normal;
  padding-left:12px;
}

.steves-table--skin-default .detail-row > td strong {
  color: var(--steves-fg-muted);
  margin-right: 4px;
}

/* Columns the data is numeric in read better right-aligned, and the
 * skin decides how far. */
.steves-table--skin-default .is-numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* Row details toggle. */
.steves-table--skin-default td .info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin-right: 6px;
  min-width: 22px;
  min-height: 22px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--steves-surface-alt);
  color: var(--steves-fg-muted);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.steves-table--skin-default td .info:hover,
.steves-table--skin-default td .info[aria-expanded="true"] {
  background: var(--steves-accent);
  border-color: var(--steves-accent);
  color: var(--steves-accent-contrast);
}

/* Cells that hold an image. */
.steves-table--skin-default td img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.steves-table--skin-default td img:hover { cursor: zoom-in; }

/* ==================================================================
   Pagination
   ================================================================== */

.steves-table--skin-default .pagination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--steves-gap-sm);
  padding: 5px;
}

.steves-table--skin-default .pagination-info {
  font-weight: 700;
  color: var(--steves-fg-muted);
}

.steves-table--skin-default .pagination-pagesize-label,
.steves-table--skin-default .pagination-pagejump-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--steves-fg-muted);
}

.steves-table--skin-default .pagination-prev { color: var(--steves-fg); }
.steves-table--skin-default .pagination-next { color: var(--steves-fg); }

.steves-table--skin-default .steves-tables-preview-pagination {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--steves-gap-sm);
  margin: 12px 0;
}

/* ==================================================================
   Filter modal
   ================================================================== */

/* The overlay: covers the viewport, dims what is behind it and centres the
 * panel. Clicking the dimmed area closes the dialog. */
.steves-table--skin-default .steves-table__filter-menu {
  padding: 16px;
  background: var(--steves-overlay);
}

.steves-table--skin-default .steves-table__filter-panel {
  overflow: hidden;
  border-radius: var(--steves-radius-lg);
  background: var(--steves-bg);
  box-shadow: var(--steves-shadow-lg);
}

.steves-table--skin-default .steves-table__filter-header {
  display: flex;
  align-items: center;
  gap: var(--steves-gap);
  padding: 12px 16px;
  border-bottom: 1px solid var(--steves-border-subtle);
}

.steves-table--skin-default .steves-table__filter-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The option list scrolls on its own, so the header and footer stay put. A
 * column width rather than a column count is what makes this responsive: the
 * browser uses as many columns as fit, and one when they do not. */
.steves-table--skin-default .steves-table__filter-options {
  padding: 6px 12px;
  column-width: 190px;
  column-gap: 20px;
  column-fill: auto;
}

.steves-table--skin-default .steves-table__filter-option {
  /* Without this a long value is split across two columns. */
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--steves-radius);
  cursor: pointer;
  color: var(--steves-fg);
}

.steves-table--skin-default .steves-table__filter-option:hover {
  background: var(--steves-surface-alt);
}

/* Keyboard users never trigger :hover, so light the row the checkbox in it
 * currently holds. */
.steves-table--skin-default .steves-table__filter-option:focus-within {
  background: var(--steves-surface-alt);
  box-shadow: inset 0 0 0 2px var(--steves-accent);
}

.steves-table--skin-default .steves-table__filter-option label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.steves-table--skin-default .steves-table__filter-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--steves-border-subtle);
  background: var(--steves-surface);
}

.steves-table--skin-default .steves-table__filter-count {
  flex: 1 1 auto;
  color: var(--steves-fg-muted);
  font-size: 0.85em;
}

.steves-table--skin-default .steves-table__filter-clear {
  background: transparent;
  border-color: var(--steves-border);
  color: var(--steves-fg-muted);
}

.steves-table--skin-default .steves-table__filter-clear:hover {
  border-color: var(--steves-border-subtle);
  background: var(--steves-surface-alt);
  color: var(--steves-fg);
}

.steves-table--skin-default .steves-table__filter-done {
  background: var(--steves-accent);
  border-color: var(--steves-accent);
  color: var(--steves-accent-contrast);
}

.steves-table--skin-default .steves-table__filter-done:hover {
  background: var(--steves-accent-hover);
  border-color: var(--steves-accent-hover);
}

.steves-table--skin-default .filter-close-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--steves-danger-solid);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.steves-table--skin-default .filter-close-btn:hover {
  background: var(--steves-danger-fg);
}

/* ==================================================================
   Loading / notices / errors
   ================================================================== */

.steves-table--skin-default .steves-tables-loading {
  gap: var(--steves-gap);
  padding: 16px;
  border-radius: var(--steves-radius);
  background: rgba(255, 255, 255, 0.85);
  color: var(--steves-fg);
}

.steves-table--skin-default .steves-tables-loading__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 0, 0, 0.18);
  border-top-color: rgba(0, 0, 0, 0.72);
  border-radius: 999px;
  animation: stevesTablesSpin 0.9s linear infinite;
}

.steves-table--skin-default .steves-tables-loading__text { font-weight: 700; }

@keyframes stevesTablesSpin { to { transform: rotate(360deg); } }

.steves-table--skin-default .steves-tables-notice,
.steves-table--skin-default .steves-tables-error {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--steves-warn-border);
  border-radius: var(--steves-radius);
  background: var(--steves-warn-bg);
  color: var(--steves-warn-fg);
  font-weight: 600;
}

.steves-table--skin-default .steves-tables-notice--danger,
.steves-table--skin-default .steves-tables-error {
  border-color: var(--steves-danger-border);
  background: var(--steves-danger-bg);
  color: var(--steves-danger-fg);
}

.steves-table--skin-default .steves-tables-notice__title {
  display: block;
  margin-bottom: 4px;
  font-weight: 800;
}

.steves-table--skin-default .steves-tables-notice__close,
.steves-table--skin-default .steves-tables-error__close {
  min-height: 0;
  margin: -6px -8px 0 0;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.steves-table--skin-default .steves-tables-error__text { flex: 1; }

/* ==================================================================
   Filtered-results modal
   ================================================================== */

.steves-table--skin-default .steves-table__modal {
  padding: 16px;
  background: var(--steves-overlay);
}

.steves-table--skin-default .steves-table__modal-body {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: 90vh;
  padding: 0;
  border-radius: var(--steves-radius-lg);
  background: var(--steves-bg);
  box-shadow: var(--steves-shadow-lg);
}

/* Sticky header keeps the title, the row count and the close button
 * reachable no matter how far the table scrolls. */
.steves-table--skin-default .lightbox-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: var(--steves-gap);
  padding: 14px 16px;
  border-bottom: 1px solid var(--steves-border-subtle);
  background: var(--steves-bg);
}

.steves-table--skin-default .lightbox-heading { flex: 1; min-width: 0; }

.steves-table--skin-default .lightbox-heading h2 {
  margin: 0;
  font-size: 1.15em;
  line-height: 1.3;
}

.steves-table--skin-default .lightbox-status {
  margin: 2px 0 0;
  color: var(--steves-fg-muted);
  font-size: 0.85em;
}

.steves-table--skin-default .steves-table__modal-close {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--steves-danger-solid);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.steves-table--skin-default .steves-table__modal-close:hover {
  background: var(--steves-danger-fg);
}

.steves-table--skin-default .steves-table__modal-output {
  flex: 1;
  min-height: 0;
  padding: 0 16px 16px;
}

.steves-table--skin-default .steves-table__modal-output .table-container {
  max-height: none;
  border: 1px solid var(--steves-border-subtle);
  border-radius: var(--steves-radius);
}

/* Sticky header inside the modal's own scroll area. */
.steves-table--skin-default .steves-table__modal-output .table-container--preview {
  max-height: min(60vh, 700px);
}

.steves-table--skin-default .steves-table__modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--steves-border-subtle);
  background: var(--steves-bg);
}

.steves-table--skin-default .steves-table__modal-actions button {
  background: var(--steves-accent);
  border-color: var(--steves-accent);
  color: var(--steves-accent-contrast);
}

.steves-table--skin-default .steves-table__modal-actions button:hover {
  background: var(--steves-accent-hover);
}

.steves-table--skin-default .steves-tables-lightbox-figure {
  margin: 16px 0;
  text-align: center;
}

.steves-table--skin-default .steves-tables-lightbox-image {
  max-height: 78vh;
  width: auto;
  object-fit: contain;
}

/* ==================================================================
   Small screens
   ------------------------------------------------------------------
   Below 768px the grid collapses to one card per row and the column
   name is repeated from each cell's data-label attribute. That pairing
   is structural: the markup always sets data-label, and the skin
   chooses whether to use it.
   ================================================================== */

@media (max-width: 768px) {
  .steves-table--skin-default {
    padding: 0;
  }

  .steves-table--skin-default .steves-table__toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .steves-table--skin-default .steves-table__toolbar input[type="text"] { flex-basis: 100%; }

  .steves-table--skin-default .steves-table__viewport { border-radius: 0; }

  .steves-table--skin-default thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .steves-table--skin-default tbody,
  .steves-table--skin-default tbody tr,
  .steves-table--skin-default tbody td { display: block; width: 100%; }

  .steves-table--skin-default tbody tr:not(.detail-row) {
    /* The containing block for the row's absolutely placed Details button
     * below. Without it the button resolves against .steves-table, which is
     * position:relative (the loading overlay needs that), so every row's
     * button collapses onto the same spot at the top of the whole component
     * and only the last one painted is reachable. */
    position: relative;
    margin-bottom: 12px;
    padding: 4px 10px;
    border: 1px solid var(--steves-border-subtle);
    border-radius: var(--steves-radius);
    background: var(--steves-bg);
    box-shadow: var(--steves-shadow-sm);
  }

  /* One label/value pair per line. */
  .steves-table--skin-default tbody td {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--steves-border-subtle);
    text-align: start;
    white-space: normal;
    word-break: break-word;
  }

  .steves-table--skin-default tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-weight: 700;
    color: var(--steves-fg-muted);
  }

  .steves-table--skin-default tbody td.is-numeric { text-align: start; }

  .steves-table--skin-default tbody td .info {
    position: absolute;
    right: 4px;
    top: 8px;
    margin: 0;
  }

  /* The Details button is out of flow, parked at the card's top-right corner,
   * so what it lands on is the first cell - the one holding it. That is the
   * cell that has to keep its text clear of it. */
  .steves-table--skin-default tbody td:has(.info) { padding-right: 34px; }

  .steves-table--skin-default .detail-row > td::before { content: none; }

  .steves-table--skin-default .detail-row > td { display: block; }

  .steves-table--skin-default .pagination-info,
  .steves-table--skin-default .steves-tables-preview-info {
    width: 100%;
    text-align: center;
  }

  .steves-table--skin-default .pagination-pagesize,
  .steves-table--skin-default .pagination-pagejump {
    flex: 1 1 120px;
    max-width: 280px;
  }

  /* The filter modal centres itself, so it only needs room for the overlay's
   * padding and a taller panel. */
  .steves-table--skin-default .steves-table__filter-menu { padding: 10px; }

  .steves-table--skin-default .steves-table__filter-panel {
    max-height: 88vh;
  }

  .steves-table--skin-default .steves-table__filter-count { flex: 1 1 100%; }

  .steves-table--skin-default .steves-table__filter-footer button { flex: 1 1 auto; }

  /* Full-screen modal with the actions pinned to the bottom. */
  .steves-table--skin-default .steves-table__modal { padding: 0; }

  .steves-table--skin-default .steves-table__modal-body {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .steves-table--skin-default .steves-table__modal-output {
    flex: 1;
    min-height: 0;
    padding: 0 12px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The preview table sits inside the modal-output region, so on mobile the
   * modal owns the scroll. Un-capping the preview container here (desktop
   * keeps its 60vh scrollbox with a sticky header) stops the double scroll
   * where the capped box and the modal both scroll at once. */
  .steves-table--skin-default .steves-table__modal-output .table-container--preview {
    max-height: none;
    overflow: visible;
  }

  .steves-table--skin-default .steves-table__modal-actions button { flex: 1 1 100%; }

  /* The modal's cards use the same collapsed layout as the main table. */
  .steves-table--skin-default .steves-table__modal-output thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .steves-table--skin-default .steves-table__modal-output tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--steves-border-subtle);
    border-radius: var(--steves-radius);
    background: var(--steves-bg);
    box-shadow: var(--steves-shadow-sm);
  }
}

/* ==================================================================
   High contrast + print
   ================================================================== */

@media (prefers-contrast: high) {
  .steves-table--skin-default button,
  .steves-table--skin-default select,
  .steves-table--skin-default input[type="text"] { border-width: 2px; }

  .steves-table--skin-default tbody tr:not(.detail-row):nth-child(even) { border-left: 3px solid currentColor; }
}

@media print {
  .steves-table--skin-default .steves-table__toolbar,
  .steves-table--skin-default .steves-table__filters-summary,
  .steves-table--skin-default .steves-table__viewport { border: 0; }

  .steves-table--skin-default .steves-table__viewport { max-height: none; }

  .steves-table--skin-default th {
    background: #dcdcdc !important;
    color: #000;
  }

  /* Every row's details are already in the DOM, just hidden - show them
     so a printed page is not silently missing a column. */
  .steves-table--skin-default .detail-row { display: table-row !important; }
}