/* ── Catalog Table View ──────────────────────────────────────────────────
   Styles for the table-based catalog layout (journals, conferences, etc.)
   used with the shared _list_page.html.twig component.

   Uses the admin contained-scroll model:
   - .content.container fills the viewport below the header (no page scroll)
   - .scrollable-table-body is the only scrolling element
   - Toolbar and footer are always visible
   ──────────────────────────────────────────────────────────────────────── */

/* Catalog list pages participate in the shared contained-scroll shell:
   the page area below the sticky top navigation is viewport-bounded,
   the toolbar + thead + pagination stay visible, and only rows scroll. */
.content.container:has(> .catalog-table-page) {
    position: relative !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: calc(100dvh - var(--ds-header-height, 48px));
    height: calc(100dvh - var(--ds-header-height, 48px));
    width: 100%;
    max-width: 100%;
    background-color: var(--ds-color-white, #fff);
    box-sizing: border-box;
    padding: 0 var(--ds-space-4, 16px) !important;
    overflow: hidden;
    z-index: auto;
}

.content.container:has(> .catalog-table-page) > .catalog-table-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.catalog-table-page .scrollable-table-container {
    flex: 1 1 auto;
    min-height: 0;
    border-left: 1px solid var(--ed-border, var(--ds-color-border, #e5e7eb));
    border-right: 1px solid var(--ed-border, var(--ds-color-border, #e5e7eb));
    box-sizing: border-box;
}

/* Catalog pages use the shared sticky toolbar contract. Keep the selector
   more specific than the generic shell rule so public catalogs remain
   aligned with the contained-scroll behavior after future refactors. */
.catalog-table-page .scrollable-table-container:not(.scrollable-table-container--inline) > .scrollable-table-toolbar {
    position: sticky !important;
    top: 0 !important;
}

@media (max-width: 1180px) {
    .content.container:has(> .catalog-table-page) {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .content.container:has(> .catalog-table-page) > .catalog-table-page,
    .catalog-table-page .scrollable-table-container {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .catalog-table-page .scrollable-table-container:not(.scrollable-table-container--inline) > .scrollable-table-toolbar {
        position: static !important;
        top: auto !important;
    }

    .catalog-table-page .scrollable-table-body {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .catalog-table-page .scrollable-table-thead,
    .catalog-table-page .scrollable-table-body .scrollable-table-thead,
    .catalog-table-page .scrollable-table-body .scrollable-table-thead th,
    .catalog-table-page .table-scroll-wrapper .table > tbody > tr:not(.collapse) > th:first-child,
    .catalog-table-page .table-scroll-wrapper .table > tbody > tr:not(.collapse) > td:first-child,
    .catalog-table-page .table-scroll-wrapper .table > thead > tr > th:first-child,
    .catalog-table-page .table-scroll-wrapper .table > tbody > tr:not(.collapse) > th:last-child,
    .catalog-table-page .table-scroll-wrapper .table > tbody > tr:not(.collapse) > td:last-child,
    .catalog-table-page .table-scroll-wrapper .table > thead > tr > th:last-child {
        bottom: auto !important;
        left: auto !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        z-index: auto !important;
    }
}

/* Search feedback row: inline with search instead of separate row */
.catalog-table-page .admin-list-toolbar-feedback {
    display: inline;
    margin-left: var(--ds-space-3, 12px);
    vertical-align: middle;
}
.catalog-table-page .admin-list-toolbar-feedback .search-alert {
    display: inline;
    font-size: var(--ds-font-size-sm, 12px);
}

/* ── Search clear button ────────────────────────────────────────────────── */

.catalog-table-page .admin-list-search {
    position: relative;
}

.catalog-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ds-color-muted, #6b7280);
    cursor: pointer;
}
.catalog-search-clear:hover {
    color: var(--ds-color-heading, #111827);
}

/* ── Cover thumbnail column ────────────────────────────────────────────── */

.catalog-table-cover-col {
    width: 80px;
    min-width: 80px;
}

.catalog-table-cover-cell {
    width: 80px;
    padding: var(--catalog-cover-padding, var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-3)) !important;
    vertical-align: middle;
}

.catalog-table-cover {
    display: block;
    width: 56px;
    height: 78px;
    object-fit: cover;
    border-radius: var(--ds-radius-sm, 4px);
    border: 1px solid var(--ds-color-border-lt, #f3f4f6);
    background: var(--ds-color-bg, #f9fafb);
}

/* ── Title & Publisher columns: equal width ────────────────────────────── */

.catalog-table-col-title,
.catalog-table-col-publisher {
    width: 30%;
}

/* ── Status & Dates columns: fixed narrow widths ───────────────────────── */

.catalog-table-col-authors {
    width: 22%;
}

.catalog-table-col-isbn {
    white-space: nowrap;
}

.catalog-table-col-status {
    width: 100px;
}

.catalog-table-col-dates {
    width: 200px;
    white-space: nowrap;
}

.catalog-table-title {
    font-weight: 500;
    font-size: var(--ds-font-size-body-sm, 13px);
    line-height: 1.4;
}
.catalog-table-title a {
    color: var(--ds-color-link, #1a56db);
    text-decoration: none;
}
.catalog-table-title a:hover {
    text-decoration: underline;
}

.catalog-table-page .table > thead > tr > th {
    font-size: 11px;
    font-weight: 600;
}

.catalog-table-col-badges {
    width: 64px;
    min-width: 64px;
}

.catalog-table-badges-cell {
    width: 64px;
    min-width: 64px;
    vertical-align: middle;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.catalog-table-badge {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin-bottom: var(--ds-space-0-5, 2px);
    padding: 4px;
}
.catalog-table-badge img {
    height: 16px;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity var(--ds-transition-fast, 0.15s ease);
}
.catalog-table-badge img:hover {
    opacity: 1;
}

.catalog-table-oa-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 104px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid var(--ds-badge-success-border, #BBF7D0);
    background: var(--ds-badge-success-bg, #F0FDF4);
    color: var(--ds-badge-success-color, #15803D);
    text-decoration: none !important;
}

.catalog-table-oa-badge:hover {
    border-color: #86EFAC;
    background: #DCFCE7;
    color: var(--ds-badge-success-color, #15803D);
    text-decoration: none !important;
}

.catalog-table-oa-badge:visited {
    color: var(--ds-badge-success-color, #15803D);
}

.catalog-table-oa-badge__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.catalog-table-oa-badge__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: 11px;
    font-weight: 700;
    text-transform: lowercase;
}

/* ── Publisher column ──────────────────────────────────────────────────── */

.catalog-table-publisher {
    font-size: var(--ds-font-size-sm, 12px);
    line-height: 1.4;
    color: var(--ds-color-muted, #6b7280);
}

/* ── ISSN / DOI columns — single line ──────────────────────────────────── */

.catalog-table-issn {
    font-size: var(--ds-font-size-sm, 12px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.catalog-table-doi {
    font-size: var(--ds-font-size-sm, 12px);
    color: var(--ds-color-link, #1a56db);
    white-space: nowrap;
}

.catalog-table-site {
    font-size: var(--ds-font-size-sm, 12px);
    color: var(--ds-color-link, #1a56db);
    white-space: nowrap;
}

/* ── Row hover ──────────────────────────────────────────────────────────── */

.catalog-table-page tbody tr:hover td {
    background-color: var(--ds-color-bg, #f9fafb);
}

/* ── Archived label ────────────────────────────────────────────────────── */

.catalog-table-title .label {
    font-size: var(--ds-font-size-xs, 10px);
    font-weight: 500;
    vertical-align: middle;
    margin-left: var(--ds-space-1-5, 6px);
    padding: 2px 6px;
    border-radius: var(--ds-radius-badge, 3px);
    background: var(--ds-badge-default-bg, #f3f4f6);
    color: var(--ds-badge-default-color, #4b5563);
}

@media (min-width: 992px) {
    .catalog-table-issn > .catalog-table-value {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .catalog-table-page {
        --table-status-text-align: left;
    }

    .catalog-table-page .table,
    .catalog-table-page .table > tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .catalog-table-page .table > thead {
        display: none;
    }

    .catalog-table-page .table > tbody > tr:not(.collapse) {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px 12px;
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-card);
        background: var(--ds-color-white);
    }

    .catalog-table-page .table > tbody > tr > td {
        display: block;
        grid-column: 1 / -1;
        width: auto;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 13px;
        line-height: 20px;
    }

    .catalog-table-page .table > tbody > tr > td.catalog-table-cover-cell {
        grid-column: 1;
        grid-row: 1 / span 2;
        --catalog-cover-padding: 0;
    }

    .catalog-table-page .table > tbody > tr > td:has(.catalog-table-title) {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .catalog-table-page .table > tbody > tr:not(:has(> .catalog-table-badges-cell:not(.catalog-table-cell--empty))) > td:has(.catalog-table-title) {
        grid-row: 1 / span 2;
        align-self: center;
    }

    .catalog-table-page .catalog-table-cover {
        width: 44px;
        height: 60px;
    }

    .catalog-table-page .catalog-table-title {
        font-size: 15px;
        line-height: 22px;
        font-weight: 600;
    }

    .catalog-table-page .table > tbody > tr > td.catalog-table-badges-cell {
        grid-column: 2;
        grid-row: 2;
        padding: 0 !important;
    }

    .catalog-table-page .catalog-table-oa-badge {
        min-width: 0;
        min-height: 28px;
        padding: 3px 6px;
        gap: 5px;
        border-radius: 6px;
    }

    .catalog-table-page .catalog-table-oa-badge__icon {
        width: 16px;
        height: 16px;
    }

    .catalog-table-page .catalog-table-oa-badge__text {
        flex-direction: row;
        gap: 3px;
        line-height: 16px;
        font-size: 10px;
    }

    .catalog-table-page .table > tbody > tr > td[data-mobile-label] {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 8px;
        align-items: start;
    }

    .catalog-table-value {
        min-width: 0;
    }

    .catalog-table-page .table-scroll-wrapper .table:not(.no-sticky-cols) > tbody > tr:not(.collapse) > td:nth-child(n) {
        border: 0 !important;
        background: transparent !important;
    }

    .catalog-table-page .table-scroll-wrapper .table:not(.no-sticky-cols) > tbody > tr:not(.collapse) > td:first-child::after,
    .catalog-table-page .table-scroll-wrapper .table:not(.no-sticky-cols) > tbody > tr:not(.collapse) > td:last-child::before {
        display: none;
    }

    .catalog-table-page .table-scroll-wrapper .table:not(.no-sticky-cols) > tbody > tr:not(.collapse) > td[data-mobile-label]::before {
        content: attr(data-mobile-label);
        opacity: 1;
        inset: auto;
        display: block;
        position: static;
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        margin: 0;
        font-size: 12px;
        line-height: 20px;
        font-weight: 500;
        color: var(--ds-color-muted);
    }

    .catalog-table-page .table > tbody > tr > td.catalog-table-cell--empty {
        display: none;
    }

    .catalog-table-page .catalog-table-doi,
    .catalog-table-page .catalog-table-site {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    .content.container:has(> .catalog-table-page) {
        padding: 0 12px !important;
    }

    .catalog-table-page .scrollable-table-container {
        border: 0;
    }

    .catalog-table-page.shell--list > .scrollable-table-container > .scrollable-table-body {
        scrollbar-gutter: auto;
        overflow: visible !important;
    }

    .catalog-table-page .admin-list-toolbar-head {
        padding: 16px 0 12px;
        min-height: 0;
    }

    .catalog-table-page .admin-list-heading {
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }

    .catalog-table-page .toolbar-title {
        font-size: 20px;
        line-height: 28px;
    }

    .catalog-table-page .admin-list-summary {
        font-size: 13px;
        line-height: 18px;
    }

    .catalog-table-page .admin-list-summary-separator {
        display: none;
    }

    .catalog-table-page .admin-list-toolbar-filters {
        padding: 0 0 16px;
        border-top: 0;
    }

    .catalog-table-page .admin-list-toolbar-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
    }

    .catalog-table-page .admin-list-toolbar-form:not(:has(.col-visibility-toggle:not([hidden]))) {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-table-page .admin-list-search {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .catalog-table-page .admin-list-search .form-control {
        height: 44px;
        font-size: 16px;
        padding: 8px 76px 8px 12px;
        border: 1px solid var(--ds-color-control-border, #6b7280);
        border-radius: 8px;
        box-shadow: none;
    }

    .catalog-table-page .admin-list-search .form-control:focus {
        border-color: var(--ds-color-link, #1a56db);
        outline: 2px solid var(--ds-color-link, #1a56db);
        outline-offset: 2px;
        box-shadow: none;
    }

    .catalog-table-page .catalog-search-clear {
        right: 44px;
        width: 32px;
        height: 44px;
    }

    .catalog-table-page .btn-filter-apply,
    .catalog-table-page .col-visibility-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
        margin: 0;
    }

    .catalog-table-page .col-visibility-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        padding: 0;
        margin: 0;
    }

    /* The shared legacy toggle fixes its height and padding with !important. */
    .catalog-table-page .col-visibility-btn {
        height: 44px !important;
        padding: 0 !important;
        border-radius: 8px;
    }

    /* Shared filter borders and shell padding use legacy !important rules. */
    .catalog-table-page .admin-list-toolbar-form .btn-filter-apply {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        z-index: 1;
        border: 0 !important;
        border-radius: 0 8px 8px 0;
        background: transparent;
        box-shadow: none;
        padding: 0 !important;
    }

    .catalog-table-page .admin-list-toolbar-form .btn-filter-apply:hover,
    .catalog-table-page .admin-list-toolbar-form .btn-filter-apply:focus,
    .catalog-table-page .admin-list-toolbar-form .btn-filter-apply:active {
        border: 0;
        background: transparent;
        color: var(--ds-color-link-hover, #1649b8);
    }

    .catalog-table-page .btn-filter-apply:focus-visible,
    .catalog-table-page .col-visibility-btn:focus-visible,
    .catalog-table-page .catalog-search-clear:focus-visible {
        outline: 2px solid var(--ds-color-link, #1a56db);
        outline-offset: -3px;
    }

    .catalog-table-page .btn-filter-apply > span,
    .catalog-table-page .list-column-visibility-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .catalog-table-page .col-visibility-dropdown {
        width: min(280px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }

    .catalog-table-page .col-visibility-option {
        min-height: 44px;
    }
}