.btn-sm {
    margin-top: 10px;
}

.page-supertitle {
    font-size: 1.5rem;
    color: #000;
    margin-bottom: 0.15rem;
}

th, td {
    white-space: nowrap;
    background-color: white;
    border: 1px solid #dee2e6;
    text-align: left;
    vertical-align: middle;
}

td.details-control {
    background-color: white;
    cursor: pointer;
    text-align: center;
    padding: 8px;
    width: 30px;
}

td.details-control:hover {
    background-color: #f8f9fa;
}

.expand-icon {
    transition: transform 0.2s ease-in-out;
    color: #1C6DA6;
    font-size: 14px;
    transform: rotate(-90deg);
}

.expand-icon.expanded {
    transform: rotate(0deg);
}

th.details-control {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
}

.abstract-row {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-left: 4px solid #1C6DA6;
    margin: 5px 0;
}

.abstract-label {
    color: #1C6DA6;
    margin-bottom: 8px;
    font-size: 14px;
}

.abstract-content {
    color: #333;
    line-height: 1.6;
    white-space: normal;
    word-wrap: break-word;
}

.abstract-content em {
    color: #6c757d;
}

a.text-primary {
    color: #1C6DA6 !important;
    text-decoration: none;
}

a.text-primary:hover {
    color: #145480 !important;
    text-decoration: underline;
}

.btn-sm.btn-primary {
    background-color: #1C6DA6 !important;
    border-color: #1C6DA6 !important;
}

.btn-sm.btn-primary:hover {
    background-color: #145480 !important;
    border-color: #145480 !important;
}

.btn-sm.btn-download {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.btn-sm.btn-download:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

.btn-secondary[data-bs-toggle="offcanvas"] {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-secondary[data-bs-toggle="offcanvas"]:hover {
    background-color: #145480 !important;
    border-color: #145480 !important;
}

.btn-secondary[data-bs-toggle="dropdown"] {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-secondary[data-bs-toggle="dropdown"]:hover {
    background-color: #145480 !important;
    border-color: #145480 !important;
}

.btn-info[href*="ExportToCSV"],
.btn-info[onclick*="exportToExcel"] {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-info[href*="ExportToCSV"]:hover,
.btn-info[onclick*="exportToExcel"]:hover {
    background-color: #145480 !important;
    border-color: #145480 !important;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
}

.dataTables_scroll {
    margin-bottom: 10px;
}

.dataTables_scrollBody {
    min-height: 200px;
}

.dataTables_wrapper .bottom {
    background-color: #F0F0F0;
    padding: 10px 0;
    margin-top: 10px;
}

.bottom-controls-wrapper {
    background-color: #F0F0F0;
    padding: 10px 15px;
    margin-top: 10px;
}

.bottom-controls-wrapper .bottom {
    align-items: center;
}

.bottom-controls-wrapper .bottom-left,
.bottom-controls-wrapper .bottom-right {
    display: flex;
    align-items: center;
}

.dataTables_length select {
    background-color: white !important;
}

.dataTables_length select.dt-input {
    background-color: white !important;
}

select[name="documentsTable_length"] {
    background-color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: white !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    padding: 0 !important;
    margin: 0 -1px 0 0 !important;
    border-radius: 0 !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 38px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f8f9fa !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #E9ECEF !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    font-weight: normal !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background-color: white !important;
    color: #6c757d !important;
    border: 1px solid #DFDFDF !important;
    opacity: 0.5 !important;
}

.dt-paging .dt-paging-button {
    background-color: white !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    padding: 0 !important;
    margin: 0 -1px 0 0 !important;
    border-radius: 0 !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 38px !important;
}

.dt-paging .dt-paging-button:hover {
    background-color: #f8f9fa !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
}

.dt-paging .dt-paging-button.current {
    background-color: #E9ECEF !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    font-weight: normal !important;
}

.dt-paging .dt-paging-button.disabled {
    background-color: white !important;
    color: #6c757d !important;
    border: 1px solid #DFDFDF !important;
    opacity: 0.5 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-paging .dt-paging-button,
.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.disabled {
    box-shadow: none !important;
    text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate span,
.dt-paging .dt-paging-button,
.dt-paging .dt-paging-button a,
.dt-paging span {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    padding: 0 !important;
    margin: 0 -1px 0 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 38px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a,
.dataTables_wrapper .dataTables_paginate span:hover,
.dt-paging .dt-paging-button:hover,
.dt-paging .dt-paging-button:hover a,
.dt-paging span:hover {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    background-image: none !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover a,
.dataTables_wrapper .dataTables_paginate .current,
.dataTables_wrapper .dataTables_paginate .current a,
.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current:hover,
.dt-paging .dt-paging-button.current a,
.dt-paging .dt-paging-button.current:hover a,
.dt-paging .current,
.dt-paging .current a {
    background: #E9ECEF !important;
    background-color: #E9ECEF !important;
    background-image: none !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover a,
.dt-paging .dt-paging-button.disabled,
.dt-paging .dt-paging-button.disabled:hover,
.dt-paging .dt-paging-button.disabled a,
.dt-paging .dt-paging-button.disabled:hover a {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    color: #0079C0 !important;
    border: 1px solid #DFDFDF !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}

/* Actions column - fit to content width */
#documentsTable thead th:last-child,
#documentsTable tbody td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* Filter badge styles */
.filter-badge {
    display: inline-flex;
    align-items: center;
    background-color: #F0F0F0;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 2px;
    font-size: 0.875rem;
}

.filter-badge-value {
    color: #333;
    margin-right: 8px;
}

.filter-badge-close {
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.15s ease-in-out;
}

.filter-badge-close:hover {
    color: #dc3545;
}

/* Details page button styles - only for Download and Open URL buttons */
.btn-primary[target="_blank"][style*="1C6DA6"],
.btn-success[href*="Download"][style*="1C6DA6"] {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-primary[target="_blank"][style*="1C6DA6"]:hover,
.btn-success[href*="Download"][style*="1C6DA6"]:hover {
    background-color: #145480 !important;
    border-color: #145480 !important;
}

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.875rem !important;
        line-height: 32px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .paginate_button a,
    .dataTables_wrapper .dataTables_paginate span,
    .dt-paging .dt-paging-button,
    .dt-paging .dt-paging-button a,
    .dt-paging span {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    .bottom-controls-wrapper .bottom {
        flex-direction: column !important;
        gap: 1rem;
    }

    .bottom-controls-wrapper .bottom-left,
    .bottom-controls-wrapper .bottom-right {
        width: 100%;
        justify-content: center;
    }

    .dataTables_scrollBody {
        min-height: 300px;
    }

    .dataTables_wrapper {
        overflow-x: auto;
    }

    .keyword-search-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .keyword-search-section .col-auto {
        width: 100% !important;
        margin: 0 !important;
        text-align: center;
    }

    .keyword-search-section #keywordSearch {
        width: 100% !important;
        margin-top: 0.5rem;
    }

    .keyword-search-section .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        line-height: 28px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .paginate_button a,
    .dataTables_wrapper .dataTables_paginate span,
    .dt-paging .dt-paging-button,
    .dt-paging .dt-paging-button a,
    .dt-paging span {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
    }

    .dataTables_length label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .dataTables_length select {
        width: 100%;
    }

    .dataTables_info {
        font-size: 0.875rem;
    }

    .filter-badge {
        font-size: 0.75rem;
        padding: 3px 6px;
    }

    .btn {
        font-size: 0.875rem;
    }
}