/* Tables - extracted from layout.css. Loaded after layout.css, before components.css
   (so the feature-matrix's higher-specificity td/th overrides in components.css still win).
   The table-specific link rules (.table a colour + hover underline) live HERE.
   What stays in layout.css: the cross-cutting grouped link-hover colour rule
   (a:hover, .navbar a:hover, .footer a:hover, ..., .table a:hover) - a link rule, not a
   table rule - and the .table-of-contents* page-nav (not a data table). */

.table a:hover,
.table a:focus {
    text-decoration: underline !important;
    text-decoration-thickness: 0.12em !important;
    text-underline-offset: 0.2em !important;
}


/* ##########################################################################
   TABLES
   ########################################################################## */
table a {
    text-decoration: none;
    color: inherit;
  }

/* Full-bleed header border on thead container instead of individual th cells */
thead {
    border-bottom: 0.15em solid var(--black);
}

th {
    border-bottom: none !important;
    padding: 0.6rem;
    font-size: var(--semantic-heading-mono-size);
    font-weight: bold;
}

/* First column: align with page edge padding */
th:first-child,
td:first-child {
    padding-left: var(--page-edge-padding) !important;
}

/* Last column: align with page edge padding (symmetry with first column) */
th:last-child,
td:last-child {
    padding-right: var(--page-edge-padding) !important;
}

@media (min-width: 576px) {
    th:first-child,
    td:first-child {
        padding-left: var(--page-edge-padding-desktop) !important;
    }

    th:last-child,
    td:last-child {
        padding-right: var(--page-edge-padding-desktop) !important;
    }
}

td {
    border: none;
    border-bottom: 0.5px solid var(--chamois-light);
    vertical-align: middle;
    position: relative;
    padding: 0.6rem 1rem;
}

/* Alternating row colors. Darken EVEN rows so the first row stays on the page
   anchor (chamois-pale) — matching the thead above, the entity-card layout, and
   the empty page below. Starting whisper on row 1 made the area right under the
   light header read as a dark band. */
tbody tr:nth-child(even) {
    background-color: var(--chamois-whisper);
}

/* Plain data-cell links inherit the cell colour (look like text). Buttons are
   excluded so action buttons (e.g. .btn-secondary edit) keep their own colour.
   :hover/:focus are excluded too so the grouped strawberry link-hover rule in
   layout.css still wins (the :not(.btn) bump would otherwise tie its specificity). */
.table a:not(.btn):not(:hover):not(:focus) {
    color: inherit !important;
}

.table-responsive {
    overflow: visible !important;
}

/* Tables in main content: extend edge-to-edge (break out of container-fluid padding) */
.main-content > .container-fluid > .table-responsive {
    width: calc(100% + 2 * var(--page-edge-padding));
    margin-left: calc(-1 * var(--page-edge-padding));
    margin-right: calc(-1 * var(--page-edge-padding));
}

.main-content > .container-fluid > .table-responsive > .table {
    width: 100%;
}

/* On desktop, use larger values */
@media (min-width: 576px) {
    .main-content > .container-fluid > .table-responsive {
        width: calc(100% + 2 * var(--page-edge-padding-desktop));
        margin-left: calc(-1 * var(--page-edge-padding-desktop));
        margin-right: calc(-1 * var(--page-edge-padding-desktop));
    }
}

/* Fix responsive display utilities for table cells - maintain table-cell display */
/* Bootstrap's d-md-block sets display:block which breaks table layout */
th.d-none.d-md-block,
td.d-none.d-md-block {
    display: none !important;
}

@media (min-width: 768px) {
    th.d-none.d-md-block,
    td.d-none.d-md-block {
        display: table-cell !important;
    }
}

th.d-none.d-lg-block,
td.d-none.d-lg-block {
    display: none !important;
}

@media (min-width: 992px) {
    th.d-none.d-lg-block,
    td.d-none.d-lg-block {
        display: table-cell !important;
    }
}

/* Action column for buttons (edit, delete, etc.) */
.table-actions {
    width: 1%;  /* Shrink to fit content */
    white-space: nowrap;  /* Prevent wrapping */
    text-align: right !important;  /* Right-align buttons */
    padding-right: var(--page-edge-padding) !important;
}

@media (min-width: 576px) {
    .table-actions {
        padding-right: var(--page-edge-padding-desktop) !important;
    }
}

/* Space between multiple action buttons - now handled by gap-2 on wrapper div */

/* Table actions in header: align with table content below (no extra padding since container already has padding) */
.d-flex.justify-content-between .table-actions {
    padding-right: 0 !important;
}

.row-link {
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.row-link td {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.row-link:hover {
    background-color: var(--chamois-light);
    border-bottom: 0.5px solid var(--chamois-medium);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
}

/* Table within section-entry: extends edge-to-edge (breaks out of padding) */
.section-entry .table-responsive {
    width: calc(100% + 2 * var(--page-edge-padding));
    margin-left: calc(-1 * var(--page-edge-padding));
    margin-right: calc(-1 * var(--page-edge-padding));
}

.section-entry .table-responsive > .table {
    width: 100%;
}

/* On desktop, use larger values */
@media (min-width: 576px) {
    .section-entry .table-responsive {
        width: calc(100% + 2 * var(--page-edge-padding-desktop));
        margin-left: calc(-1 * var(--page-edge-padding-desktop));
        margin-right: calc(-1 * var(--page-edge-padding-desktop));
    }
}

/* Tables inside full-bleed remain full-width */
.full-bleed .table-responsive > .table {
    width: 100%;
}

/* First/last cell padding aligns with content-padded content */
.full-bleed table td:first-child,
.full-bleed table th:first-child {
    padding-left: var(--page-edge-padding);
}

.full-bleed table td:last-child,
.full-bleed table th:last-child {
    padding-right: var(--page-edge-padding);
}

/* Desktop gutter for full-bleed table cells (kept with the base rules above, not
   split into layout.css). Mirrors the mobile padding with the desktop token. */
@media (min-width: 576px) {
    .full-bleed table td:first-child,
    .full-bleed table th:first-child {
        padding-left: var(--page-edge-padding-desktop);
    }

    .full-bleed table td:last-child,
    .full-bleed table th:last-child {
        padding-right: var(--page-edge-padding-desktop);
    }
}