/* Awssome UI 2.0 — data tables.
   Tables live on a white card, headers are small muted caps, rows are 56px with a
   hairline divider and a soft hover. DataTables pagination becomes pill buttons. */

.aws-data-tables,
.table-responsive.aws-data-tables {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-xl);
    box-shadow: var(--ui-shadow-sm);
    padding: 4px 20px 12px;
}

.table.aws-table,
.table.dataTable,
.aws-data-tables .table {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

.table.aws-table thead tr,
.aws-data-tables .table thead tr {
    background: transparent !important;
    border: 0 !important;
}

.table.aws-table thead th,
.aws-data-tables .table thead th {
    font-family: var(--ui-font-semibold) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-subtle) !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--ui-line) !important;
    white-space: nowrap;
}

.table.aws-table tbody td,
.aws-data-tables .table tbody td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--ui-line-soft) !important;
    vertical-align: middle;
    color: var(--ui-ink);
    font-size: 14px;
}

.table.aws-table tbody tr:last-child td,
.aws-data-tables .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.table.aws-table tbody tr,
.aws-data-tables .table tbody tr {
    transition: background-color var(--ui-fast) var(--ui-ease);
}

.table.aws-table tbody tr:hover td,
.aws-data-tables .table tbody tr:hover td {
    background: var(--ui-fill-2) !important;
}

.table.aws-table tbody tr[onclick],
.table.aws-table tbody tr[data-href],
.table.aws-table tbody tr.cursor-pointer {
    cursor: pointer;
}

/* Sort arrows: quieter */
table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after {
    opacity: .35;
}

/* Footer: info + pagination */
.dataTables_wrapper .dataTables_info {
    color: var(--ui-muted) !important;
    font-size: 13px !important;
    padding-top: 16px !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
    border-radius: var(--ui-r-sm) !important;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ui-font-semibold);
    font-size: 13px;
    color: var(--ui-ink-2);
    border: 0;
    margin: 0 2px;
    transition: background var(--ui-fast) var(--ui-ease);
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover {
    background: var(--ui-fill) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background: var(--ui-ink) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: var(--ui-r-sm) !important;
}

.dataTables_empty {
    color: var(--ui-muted) !important;
    padding: 48px 16px !important;
}

/* Status pills: tinted fill + dot + ink, one family per state */
.badge {
    font-family: var(--ui-font-semibold) !important;
    font-size: 12px !important;
    font-weight: 600;
    border-radius: var(--ui-r-pill) !important;
    padding: 5px 10px !important;
    letter-spacing: 0;
    line-height: 1.2;
}

.badge.aws-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0 !important;
}

.badge.aws-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge.aws-badge.aws-primary::before,
.badge.aws-badge.aws-recommended::before,
.badge.aws-badge:has(.aws-status)::before,
.badge.aws-badge:has(svg)::before {
    display: none;
}

.badge.aws-badge.aws-draft,
.badge.aws-badge.aws-po-draft,
.badge.aws-badge.aws-disabled {
    background: var(--ui-fill) !important;
    color: var(--ui-muted) !important;
}

.badge.aws-badge.aws-active,
.badge.aws-badge.aws-po-success {
    background: var(--ui-green-50) !important;
    color: var(--ui-green-700) !important;
}

.badge.aws-badge.aws-in-progress,
.badge.aws-badge.aws-po-warning,
.badge.aws-badge.aws-warning-2 {
    background: #FFF6E0 !important;
    color: #9A5B00 !important;
}

.badge.aws-badge.aws-error,
.badge.aws-badge.aws-po-error {
    background: var(--ui-red-50) !important;
    color: var(--ui-red-700) !important;
}

.badge.aws-badge.aws-pink {
    background: var(--ui-pink-50) !important;
    color: var(--ui-pink-700) !important;
}

.badge.badge-light-primary {
    background: var(--ui-primary-tint) !important;
    color: var(--ui-brand-700) !important;
}

.badge.badge-light-success {
    background: var(--ui-green-50) !important;
    color: var(--ui-green-700) !important;
}

.badge.badge-light-danger {
    background: var(--ui-red-50) !important;
    color: var(--ui-red-700) !important;
}

.badge.badge-light-warning {
    background: #FFF6E0 !important;
    color: #9A5B00 !important;
}

.aws-status {
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
}

@media (max-width: 767.98px) {
    .aws-data-tables,
    .table-responsive.aws-data-tables {
        padding: 0 12px 8px;
        border-radius: var(--ui-r-lg);
    }
}

/* .hide-scroll used to let wide tables spill past their card; the card now scrolls
   horizontally instead, and the DataTables footer stacks on small screens. */
.table-responsive.hide-scroll {
    overflow-x: auto !important;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .row:last-child,
    .with-pagination-infos .dataTables_wrapper > .row:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin: 0 !important;
    }

    .dataTables_wrapper .row:last-child > [class*="col"] {
        width: 100%;
        justify-content: center !important;
        display: flex;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: center;
        white-space: normal !important;
    }
}

/* Tables scroll inside their card rather than widening the page */
.aws-data-tables {
    overflow-x: auto;
    max-width: 100%;
}

/* Tables inside a card never draw their own frame: legacy .aws-table paints a 1px
   !important border that out-ranks Bootstrap's border-0. */
.aws-data-tables .table,
.aws-data-tables .table.aws-table,
.ui-panel .table.aws-table,
.card .table.aws-table {
    border: 0 !important;
    border-radius: 0 !important;
}

/* No top padding on the card: a sticky header must stick flush to the card edge,
   otherwise rows scroll through the gap above it. */
.aws-data-tables,
.table-responsive.aws-data-tables {
    padding-top: 0 !important;
}

.aws-data-tables thead.sticky-top th,
.aws-data-tables thead[style*="sticky"] th {
    background: var(--ui-surface) !important;
    box-shadow: inset 0 -1px 0 var(--ui-line);
    border-bottom: 0 !important;
}

.aws-data-tables thead.sticky-top {
    z-index: 3 !important;
}

/* "Rows per page" picker: upgraded to Select2 by ui-shell.js so its menu matches every
   other dropdown in the app. */
.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
}

.dataTables_length .select2-container {
    min-width: 76px;
}

.dataTables_length .select2-container .select2-selection {
    min-height: 36px !important;
    border-radius: var(--ui-r-sm) !important;
    padding: 0 30px 0 12px !important;
    font-size: 13.5px !important;
    font-family: var(--ui-font-semibold) !important;
}

.dataTables_length .select2-container .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.2 !important;
    color: var(--ui-ink) !important;
}

.dataTables_length .select2-container .select2-selection__arrow {
    right: 10px !important;
}

.select2-dropdown.ui-length-dropdown {
    min-width: 88px !important;
}

.select2-dropdown.ui-length-dropdown .select2-results__option {
    font-size: 13.5px !important;
    padding: 7px 10px !important;
}