body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Table Styles */
table.catalogue-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0 !important;
/*    border-radius: 20px 20px 20px 20px;*/
    overflow: hidden;
    border: 1px solid #E8E9EC;
}

.catalogue-table thead {
    background: #f8f9fa;
}

.catalogue-table th {
    font-size: 12px;
    color: #939597;
    font-weight: 500;
    text-transform: uppercase;
    padding: 16px;
    border-bottom: 1px solid #E8E9EC !important;
    vertical-align: middle;
    text-align: left;
    background: #FFFFFF;
}

.catalogue-table td {
    color: #122b46;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.24px;
    padding: 16px;
    border-bottom: 1px solid #E8E9EC;
    vertical-align: middle;
    text-align: left;
}

.catalogue-table td:nth-child(5),
.catalogue-table td:nth-child(6),
.catalogue-table td:nth-child(7) {
    text-align: left;
}

.catalogue-table tr:last-child td {
    border-bottom: none;
}

/* Artwork Style */
.artwork {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
}

/* Status Badge */
.status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: capitalize;
    display: inline-block;
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
}

.status.incomplete {
    background-color: #f5f7f8;
    color: #B0BEC5;
}

.status.pending {
    background-color: #fff5e6;
    color: #FFA726;
}

.status.in-review {
    background-color: #e8f4fe;
    color: #42A5F5;
}

.status.ingested {
    background-color: #f5eaf8;
    color: #AB47BC;
}

.status.delivered {
    background-color: #e8f5e9;
    color: #66BB6A;
}

.status.taken-down {
    background-color: #ffebee;
    color: #EF5350;
}

/* View Button - Override Elementor defaults */
.catalogue-table .btn-view {
    padding: 8px 16px;
    background-color: transparent !important; /* Force override */
    color: #495057;
    border: none !important; /* Remove border */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875em;
    transition: all 0.2s;
}

.catalogue-table .btn-view:hover {
    background-color: #e9ecef !important; /* Force override */
}

/* Pagination Container */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 16px;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0px 0px rgba(0,0,0,0.0);
}

.pagination-info {
    color: #6c757d;
    font-size: 0.875em;
}

.pagination-controls {
    display: flex;
    gap: 8px;
}

.pagination-button {
    padding: 8px 16px;
    background-color: transparent !important; /* Force override */
    border: none !important; /* Remove border */
    border-radius: 4px;
    color: #495057;
    cursor: pointer;
    font-size: 0.875em;
    transition: all 0.2s;
}

.pagination-button:hover:not(:disabled) {
    background-color: #e9ecef !important; /* Force override */
}

.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-button.active {
    background-color: #0d6efd !important; /* Force override */
    color: #fff;
}

/* Hide the text on desktop */
.btn-view span {
    display: none;
}

@media screen and (max-width: 600px) {
    table {
        border: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    table thead {
        display: none;
    }
    
    table tr {
        display: block;
        border-bottom: 2px solid #ddd;
        width: 100%;
        box-sizing: border-box;
    }
    
    table td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
        width: 100%;
        box-sizing: border-box;
    }
    
    table td:last-child {
        border-bottom: 0;
    }
    
    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
    
    table td:nth-of-type(2),
    table td:nth-of-type(3),
    table td:nth-of-type(4),
    table td:nth-of-type(6) {
        display: flex !important;
    }
    
    table td:nth-of-type(7):before,
    table td:nth-of-type(5):before {
        display: block !important;
    }
    
    .artwork {
        margin: 0 auto;
        display: block;
        width: 100px;
        height: 100px;
    }
    
    .btn-view {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 8px 16px;
        margin-top: 10px;
        background-color: transparent !important;
        color: #495057;
        border: none !important;
        border-radius: 4px;
        transition: all 0.2s;
    }

    .btn-view:hover {
        background-color: #e9ecef !important;
    }

    /* Show both icon and text on mobile */
    .btn-view span {
        display: inline;
        margin-left: 4px;
    }

    .btn-view i {
        display: inline-block !important;
    }
}

.catalogue-table .status.active {
    background-color: #e6f7e6;
    color: #2e7d32;
}

/* Center align specific elements within cells */
.catalogue-table .artwork {
    margin: 0px;
    display: block;
}

.catalogue-table .status {
    display: inline-block;
}

.catalogue-table .btn-view {
    margin: 0 auto;
    display: block;
}

/* Sortable header styles */
.catalogue-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.catalogue-table th.sortable:hover {
    background-color: #f8f9fa;
}

.catalogue-table th.sortable i {
    margin-left: 5px;
    font-size: 12px;
    opacity: 0.5;
    display: inline-block; /* Ensure icon is visible */
}

.catalogue-table th.sortable.sort-asc i {
    transform: rotate(180deg);
    opacity: 1;
}

.catalogue-table th.sortable.sort-desc i {
    opacity: 1;
}

/* Ensure icons are visible */
.bb-icon-f.bb-icon-caret-down {
    display: inline-block !important;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    /* Table container */
    .catalogue-wrapper {
        width: 100%;
        padding: 0;  /* Remove padding */
        overflow-x: auto;
    }

    .catalogue-table {
        width: 100%;
        border-collapse: collapse;  /* Changed from separate to collapse */
        border-spacing: 0;  /* Remove spacing between rows */
        margin: 0;  /* Remove margin */
    }

    /* Row styling */
    .catalogue-table tbody tr {
        background: transparent;  /* Remove background */
        box-shadow: none;  /* Remove shadow */
    }

    /* Cell styling */
    .catalogue-table td {
        padding: 8px;  /* Reduce padding */
        border: none;
        vertical-align: middle;
    }

    /* Card styling */
    .catalogue-table tbody tr {
        display: grid;
        grid-template-areas:
            "title status"
            "metadata artwork"
            "button button";
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 16px;
        background: #fff;
        border-radius: 0;  /* Remove all border radius */
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0px;
        border-top: 1px solid #E8E9EC !important;
    }

    /* Only the last row should have bottom border radius */
    .catalogue-table tbody tr:last-child {
        border-radius: 0 0 8px 8px !important;  /* Force bottom radius only on last row */
    }

    /* Title cell */
    .catalogue-table td[data-label="Title"] {
        grid-area: title;
        font-weight: 600;
        font-size: 16px;
        padding: 0;
        text-align: left;
        border: none;
        text-transform: none; /* Prevent forced uppercase */
        margin-bottom: 16px; /* Add space below title */
        padding-left: 12px;
    }

    /* Remove the "TITLE" label */
    .catalogue-table td[data-label="Title"]:before {
        display: none;
    }

    /* Ensure the content itself isn't forced to uppercase */
    .catalogue-table td {
        text-transform: none;
    }

    /* Metadata container */
    .catalogue-table td[data-label="Artists"],
    .catalogue-table td[data-label="Release Date"],
    .catalogue-table td[data-label="Genre"] {
        display: block !important;
        width: 100%;
        text-align: left;
        padding: 0;
        border: none;
        margin-bottom: 24px;
        padding-left: 12px;
    }

    /* Artists styling */
    .catalogue-table td[data-label="Artists"] {
        grid-area: metadata;
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;
    }

    .catalogue-table td[data-label="Artists"]:before {
        content: "By ";
        font-weight: normal;
        margin-right: 4px; /* Add space after "By" */
    }

    /* Release Date styling */
    .catalogue-table td[data-label="Release Date"] {
        grid-area: metadata;
        font-size: 14px;
        color: #666;
        margin-top: 4px;
        margin-bottom: 4px;
        transform: translateY(24px);
    }

    .catalogue-table td[data-label="Release Date"]:before {
        content: "Release Date: ";
        font-weight: normal;
        margin-right: 4px; /* Add space after "Release Date:" */
    }

    /* Genre styling */
    .catalogue-table td[data-label="Genre"] {
        grid-area: metadata;
        font-size: 14px;
        color: #666;
        margin-top: 4px;
        transform: translateY(48px);
        margin-bottom: 24px;
    }

    .catalogue-table td[data-label="Genre"]:before {
        content: "Genre: ";
        font-weight: normal;
        font-style: normal;
        margin-right: 4px; /* Add space after "Genre:" */
    }

    .catalogue-table td[data-label="Genre"] span {
        font-style: italic;
    }

    /* Remove any previous hiding rules */
    .catalogue-table td[data-label="Artists"],
    .catalogue-table td[data-label="Genre"] {
        display: block !important;
    }

    /* Status cell */
    .catalogue-table td[data-label="Status"] {
        grid-area: status;
        display: flex;
        justify-content: flex-end;
        padding: 0;
        border: none;
        margin-bottom: 16px; /* Add space below status */
    }

    /* Remove "Status" label */
    .catalogue-table td[data-label="Status"]:before {
        display: none;
    }

    /* Artwork cell */
    .catalogue-table td[data-label="Artwork"] {
        grid-area: artwork;
        padding: 0;
        border: none;
    }

    /* View button cell */
    .catalogue-table td[data-label="View"] {
        grid-area: button;
        padding: 0;
        border: none;
        width: 100%;
        margin-bottom: 8px; /* Space above button */
    }

    /* Button styling */
    .catalogue-table .btn-view {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        background-color: #1E73BE !important; /* Changed to blue */
        color: #ffffff !important; /* Changed to white for better contrast */
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
    }

    .btn-view span {
        display: inline-block !important;
        margin-left: 4px;
    }

    /* Hide unnecessary cells */
    .catalogue-table td[data-label="Artists"],
    .catalogue-table td[data-label="Genre"] {
        display: none;
    }

    /* Artwork size */
    .catalogue-table .artwork {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
        margin-top: -44px;
        margin-right: 12px;
    }

    /* Add mobile sort header container */
    .mobile-sort-header {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px 16px 0 16px; /* Remove bottom padding */
        background: #fff;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 0px 0px rgba(0,0,0,0.1);
        margin: 0 !important; /* Force no margin */
        justify-content: center;
        text-align: center;
        border: 1px solid #E8E9EC !important;
        border-bottom: none !important; /* Remove bottom border */
    }

    .mobile-sort-header button {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: #f8f9fa;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        color: #495057;
        cursor: pointer;
    }

    .mobile-sort-header button i {
        margin-left: 4px;
        font-size: 12px;
        opacity: 0.5;
    }

    .mobile-sort-header button.sort-asc i {
        transform: rotate(180deg);
        opacity: 1;
    }

    .mobile-sort-header button.sort-desc i {
        opacity: 1;
    }

    /* Hide desktop table headers */
    .catalogue-table thead {
        display: none;
    }

    table.catalogue-table {
        margin: 0 !important; /* Force no margin */
        border-top: none !important; /* Remove top border since it's connected to header */
    }
}

/* Hide mobile sort header by default (desktop view) */
.mobile-sort-header {
    display: none;
}

@media screen and (max-width: 768px) {
    /* Show and style mobile sort header */
    .mobile-sort-header {
        display: flex;
        flex-wrap: wrap;
        gap: 0px;
        padding: 16px;
        background: #fff;
        box-shadow: 0 0px 0px rgba(0,0,0,0);
        margin-bottom: 0;
        justify-content: center;
        text-align: center;
        border: 1px solid #E8E9EC;
    }

    .mobile-sort-header button {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: transparent;  /* Match desktop style */
        border: none;
        border-radius: 4px;
        font-size: 12px !important; /* Force font size */
        color: #939597 !important; /* Force color */
        cursor: pointer;
        user-select: none;
        justify-content: center;
        font-weight: 600 !important; /* Match desktop header weight */
    }

    .mobile-sort-header button:hover {
        background-color: #f8f9fa;  /* Match desktop hover state */
    }

    .mobile-sort-header button i {
        margin-left: 5px;
        font-size: 12px;
        opacity: 0.5;
        display: inline-block;
    }

    .mobile-sort-header button.sort-asc i {
        transform: rotate(180deg);
        opacity: 1;
    }

    .mobile-sort-header button.sort-desc i {
        opacity: 1;
    }

    /* Hide desktop headers on mobile */
    .catalogue-table thead {
        display: none;
    }
}

/* Override Elementor button styles */
.mobile-sort-header button,
.mobile-sort-header button:hover,
.mobile-sort-header button:focus,
.mobile-sort-header button:active {
    font-size: 12px !important;
    color: #939597 !important;
    font-weight: 600 !important;
    background-color: transparent !important;  /* Override white background on mobile */
}

.catalogue-table tr {
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .catalogue-table tr {
        background-color: transparent;  /* Override white background on mobile */
    }
}

#catalogueResultsBody {
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    #catalogueResultsBody {
        background-color: transparent !important;
    }
    
    table.catalogue-table {
        border: 1px solid #E8E9EC !important;
    }
    
    /* Keep the card styling for individual results */
    .catalogue-table tbody tr {
        display: grid;
        grid-template-areas:
            "title status"
            "metadata artwork"
            "button button";
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 16px 16px 56px 16px;
        background: #fff;
        border-radius: 0px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0px;
        border-top: 1px solid #E8E9EC !important; /* Only top border */
    }
}

/* Update Pagination Container */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 16px;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0px 0px rgba(0,0,0,0.0);
}

@media screen and (max-width: 768px) {
    .pagination-container {
        justify-content: center;
    }
}

/* Hide the text info on mobile */
@media screen and (max-width: 768px) {
    .pagination-info {
        display: none;
    }

    .pagination-controls {
        display: flex;
        gap: 4px;
        justify-content: center;
        width: 100%;
    }

    /* Style for mobile pagination buttons */
    .pagination-button {
        min-width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        background-color: transparent !important; /* Force override */
        background: transparent !important; /* Force override */
    }

    /* Ensure hover state is also transparent */
    .pagination-button:focus,
    .pagination-button:active {
        background-color: transparent !important;
        background: transparent !important;
    }
}

@media screen and (max-width: 768px) {
    .mobile-sort-header {
        /* ... existing styles ... */
        border: 1px solid #E8E9EC;
        border-bottom: none;  /* Remove !important */
    }

    table.catalogue-table {
        border: none !important;  /* Remove table border */
        border-top-left-radius: 0px !important;  /* Remove top border */
        border-top-right-radius: 0px !important;  /* Remove top border */
    }
    
    .catalogue-table tbody {
        border-left: 1px solid #E8E9EC;
        border-right: 1px solid #E8E9EC;
        border-bottom: 1px solid #E8E9EC;
        display: block;
    }

    .catalogue-table tbody tr {
        border-top: 1px solid #E8E9EC;  /* Only top border for rows */
        border-bottom: none;
    }

    .catalogue-table tbody tr:first-child {
        border-top: none;  /* Remove top border for first row */
    }
}

/* Track Listing Styles */
.track-listing-container {
    margin-top: 40px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E8E9EC;
    overflow: hidden;
}

.track-listing-container h3 {
    padding: 16px;
    margin: 0;
    border-bottom: 1px solid #E8E9EC;
    font-size: 18px;
    color: #122b46;
}

.track-listing-table {
    width: 100%;
    border-collapse: collapse;
    border: 0px;
    margin-bottom: 0px;
}

.track-listing-table th {
    font-size: 12px;
    color: #939597;
    font-weight: 500;
    text-transform: uppercase;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #E8E9EC;
}

.track-listing-table td {
    padding: 16px;
    border-bottom: none;
    color: #122b46;
    font-size: 14px;
}

.track-listing-table tr:last-child td {
    border-bottom: none;
}

.track-title {
    font-weight: 500;
    color: #122b46;
}

.track-version {
    font-size: 12px;
    color: #939597;
}

.main-artists {
    color: #122b46;
}

.feature-artists {
    font-size: 12px;
    color: #939597;
    margin-top: 4px;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .track-listing-container {
        margin-top: 24px;
        border-radius: 8px;
    }

    .track-listing-table thead {
        display: none;
    }

    .track-listing-table tbody tr {
        display: block;
        padding: 16px;
        border-bottom: none;
    }

    .track-listing-table td {
        display: flex !important; /* Force display flex */
        padding: 4px 8px 4px 120px !important;
        position: relative;
        min-height: 30px;
        border: none;
        width: 100% !important; /* Force full width */
        box-sizing: border-box;
    }

    /* Add labels */
    .track-listing-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 8px;
        width: 100px;
        font-weight: 500;
        font-size: 13px;
        color: #939597;
        white-space: nowrap; /* Prevent label from wrapping */
    }

    /* Track number styling */
    .track-listing-table td[data-label="#"] {
        background: transparent;
        border-radius: 4px;
        padding: 8px 16px !important;
        min-height: unset !important;
        justify-content: center;
        font-weight: 500;
        color: #122b46;
        margin-bottom: 20px;
    }

    /* Remove the "#" label for track numbers */
    .track-listing-table td[data-label="#"]::before {
        display: none;
    }

    /* Content styling */
    .track-listing-table td > * {
        display: block;
        width: 100%;
        flex: 1;
        text-align: left;
        margin-left: auto; /* Push content to the right of the label */
    }

    /* Force display for all cells and ensure proper spacing */
    .track-listing-table td[data-label="#"],
    .track-listing-table td[data-label="Title"],
    .track-listing-table td[data-label="Artists"],
    .track-listing-table td[data-label="Language"],
    .track-listing-table td[data-label="Genre"],
    .track-listing-table td[data-label="ISRC"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Audio row adjustments */
    .audio-row {
        display: block !important;
        padding: 0 !important;
        border-bottom: 1px solid #E8E9EC;
    }

    .audio-cell {
        padding: 8px 16px !important;
        margin-top: 8px;
        background: #f8f9fa;
        border-radius: 4px;
    }

    .audio-cell::before {
        display: none !important;
    }

    /* Ensure text content doesn't overflow */
    .track-listing-table td > span,
    .track-listing-table td > div {
        word-break: break-word;
        overflow-wrap: break-word;
        width: 100%;
        padding-right: 0px;
        padding-left: 4px !important;
    }

    /* Adjust spacing for featured artists */
    .feature-artists {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Remove any fixed widths that might cause issues */
    .track-listing-table td::before,
    .track-listing-table td > * {
        max-width: none;
    }
}

/* Release Header Layout */
.release-header-container {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: center;
    width: 100%;
    flex-basis: 50%;
}

#releaseInfo {
    flex: 1;
    width: 100%; /* Prevents flex item from overflowing */
    flex-basis: 50%;
}

#releaseArtwork {
    flex: 1; /* Change fixed width to 526px */
    display: flex; /* Add flex display */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-basis: 50%;
    margin-top: 40px;
}

#releaseArtwork img {
    width: 100%;
    max-width: 526px; /* Match container width */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Mobile Responsive Layout */
@media screen and (max-width: 768px) {
    .release-header-container {
        flex-direction: column;
        gap: 24px;
    }

    #releaseArtwork {
        flex: none;
        width: 100%;
        order: 2; /* Moves artwork below details on mobile */
        min-height: auto; /* Remove fixed height on mobile */
    }

    #releaseInfo {
        order: 1; /* Keeps details on top for mobile */
    }
}

/* Add spacing for artists and features */
.feature-artists {
    color: #939597;
    font-size: 12px;
    margin-top: 4px;
    display: inline-block;
    margin-left: 4px;
}

/* Add spacing after commas */
.track-listing-table td[data-label="Artists"] {
    word-spacing: 4px;
}

/* Audio player styling */
.track-audio {
    margin-top: 8px;
    width: 100%;
}

.track-audio audio {
    width: 100%;
    height: 32px;
}

@media screen and (max-width: 768px) {
    /* Existing mobile styles ... */

    /* Audio player specific styling */
    .track-listing-table td.audio-cell {
        padding: 8px 16px !important;
        margin-top: 8px;
        background: #ffffff;
        border-radius: 0px;
    }

    .track-listing-table td.audio-cell::before {
        display: none; /* Remove the "Preview" label */
    }

    .track-audio {
        margin: 0;
        width: 100%;
    }

    .track-audio audio {
        width: 100%;
        height: 32px;
        display: block;
    }
}

/* Audio player styling */
.audio-row {
    background: #f8f9fa;
    width: 100%;
}

.audio-cell {
    padding: 8px 16px !important;
    background-color: #ffffff;
    border-bottom: 1px solid #E8E9EC !important;
    /* Add these properties to ensure full width */
    width: 100% !important;
    display: table-cell !important;
    /* Explicitly set colspan for all columns */
    -webkit-column-span: all;
    column-span: all;
}

/* Ensure the audio player takes up full width */
.track-audio {
    width: 100%;
    max-width: 100%;
}

.track-audio audio {
    width: 100%;
    height: 48px;
    display: block;
}

@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .audio-row {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .audio-cell {
        padding: 8px 16px !important;
        margin-top: 8px;
        background: #f8f9fa;
        border-radius: 4px;
        width: 100% !important;
    }

    .audio-cell::before {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .track-listing-table td[data-label="#"]::before {
        content: "Song\00a0" attr(data-number) !important; /* \00a0 creates a 4px space */
        display: block !important;
        position: static !important;
        width: auto !important;
        font-weight: 500;
        font-size: 13px;
        color: #122b46;
        margin-right: 4px !important; /* Updated from 8px to 4px */
    }

    /* ... rest of the mobile styles ... */
}

.media-folder_action__anchor {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #939597;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.media-folder_action__anchor:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
}

.media-folder_action__list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
}

.media-folder_actions.active .media-folder_action__list {
    display: block !important;
}

.media-folder_action__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.media-folder_action__list li {
    margin: 0;
}

.media-folder_action__list li a {
    display: block;
    padding: 8px 16px;
    color: #122b46;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.media-folder_action__list li a:hover {
    background-color: #f8f9fa;
}

.menu-dots {
    position: relative;
    display: inline-block;
    margin-left: auto;
}

.dots-button {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    color: #939597;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dots-button:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
}

.menu-dots.active .menu-dropdown {
    display: block;
}

.menu-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-dropdown li {
    margin: 0;
}

.menu-dropdown li a {
    display: block;
    padding: 8px 16px;
    color: #122b46;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.menu-dropdown li a:hover {
    background-color: #f8f9fa;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .track-data-row td[data-label="#"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .menu-dots.mobile-only {
        display: flex !important;
        align-items: center !important;
    }
}

/* Hide mobile elements by default */
.mobile-only {
    display: none !important;
}

/* Show desktop elements by default */
.desktop-only {
    display: block !important;
}

/* Media folder actions base styles */
.media-folder_actions {
    position: relative;
}

.media-folder_action__anchor {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #939597;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    /* Hide desktop elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile elements */
    .mobile-only {
        display: flex !important;
    }
    
    .track-data-row td[data-label="#"] {
        display: flex !important;
        justify-content: flex-start !important; /* Change to flex-start */
        align-items: center !important;
        padding-right: 32px !important; /* Add padding for the menu */
        position: relative !important;
    }

    .media-folder_actions.mobile-only {
        position: absolute !important;
        right: 8px !important; /* Adjust right position */
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important; /* Ensure menu appears above other content */
    }

    /* Style for the ellipsis icon */
    .bb-icon-f.bb-icon-ellipsis-v {
        font-size: 16px !important;
        color: #939597 !important;
    }

    /* Ensure the dropdown menu appears on the right */
    .media-folder_action__list {
        position: absolute !important;
        right: 0 !important;
        top: 100% !important;
        background: white !important;
        border: 1px solid #E8E9EC !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        min-width: 160px !important;
        z-index: 1000 !important;
    }

    .media-folder_actions.active .media-folder_action__list {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .track-listing-table td[data-label="Genre"]::before {
        content: "Genre" !important;
        position: absolute;
        left: 8px;
        width: 100px;
        font-weight: 500;
        font-size: 13px;
        color: #939597;
        white-space: nowrap;
    }

    /* Ensure consistent padding for all data cells */
    .track-listing-table td[data-label="Genre"] {
        padding: 4px 8px 4px 120px !important;
        position: relative;
        min-height: 30px;
    }
}

@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .track-listing-table td[data-label="Genre"] {
        display: flex !important;
        padding: 4px 8px 4px 120px !important;
        position: relative;
        min-height: 30px;
        width: 100% !important;
        box-sizing: border-box;
    }

    .track-listing-table td[data-label="Genre"]::before {
        content: "Genre" !important;
        position: absolute;
        left: 8px;
        width: 100px;
        font-weight: 500;
        font-size: 13px;
        color: #939597;
        white-space: nowrap;
    }

    /* Add specific styling for the genre span */
    .track-listing-table td[data-label="Genre"] span {
        flex: 1;
        text-align: left;
        word-break: break-word;
        overflow-wrap: break-word;
        padding-right: 8px;
    }
}

/* Apply status badge styling to release page - more general selectors */
.release-header-container .status,
#releaseInfo .status,
.release-status {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75em !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    display: inline-block !important;
}

.release-header-container .status.incomplete,
#releaseInfo .status.incomplete,
.release-status.incomplete {
    background-color: #f5f7f8 !important;
    color: #B0BEC5 !important;
}

.release-header-container .status.pending,
#releaseInfo .status.pending,
.release-status.pending {
    background-color: #fff5e6 !important;
    color: #FFA726 !important;
}

.release-header-container .status.in-review,
#releaseInfo .status.in-review,
.release-status.in-review {
    background-color: #e8f4fe !important;
    color: #42A5F5 !important;
}

.release-header-container .status.ingested,
#releaseInfo .status.ingested,
.release-status.ingested {
    background-color: #f5eaf8 !important;
    color: #AB47BC !important;
}

.release-header-container .status.delivered,
#releaseInfo .status.delivered,
.release-status.delivered {
    background-color: #e8f5e9 !important;
    color: #66BB6A !important;
}

.release-header-container .status.taken-down,
#releaseInfo .status.taken-down,
.release-status.taken-down {
    background-color: #ffebee !important;
    color: #EF5350 !important;
}

.release-header-container .status.active,
#releaseInfo .status.active,
.release-status.active {
    background-color: #e6f7e6 !important;
    color: #2e7d32 !important;
}

/* First, let's clean up any conflicting styles */
.track-listing-table .bb-dropdown {
    position: relative;
    display: inline-block;
}

.track-listing-table .bb-dropdown-toggle {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #939597;
}

.track-listing-table .bb-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.track-listing-table .bb-dropdown.show .bb-dropdown-menu {
    display: block;
}

.track-listing-table .bb-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    color: #122b46;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    text-align: left;
}

.track-listing-table .bb-dropdown-item:hover {
    background-color: #f8f9fa;
    border-radius: 12px;
}

@media screen and (max-width: 768px) {
    .track-listing-table .bb-dropdown {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* Base dropdown styles for both desktop and mobile */
.track-listing-table .bb-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 8px; /* Add some space between the number and dropdown */
}

.track-listing-table .bb-dropdown-toggle {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #939597;
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-listing-table .bb-dropdown-toggle:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
}

.track-listing-table .bb-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.track-listing-table .bb-dropdown.show .bb-dropdown-menu {
    display: block;
}

.track-listing-table .bb-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    color: #122b46;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.track-listing-table .bb-dropdown-item:hover {
    background-color: #f8f9fa;
}

/* Desktop specific styles */
@media screen and (min-width: 769px) {
    .track-listing-table td[data-label="#"] {
        display: flex;
        align-items: center;
    }

    .track-listing-table .bb-dropdown {
        margin-left: auto; /* Push dropdown to the right */
    }
}

/* Mobile specific styles */
@media screen and (max-width: 768px) {
    .track-listing-table .bb-dropdown {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .track-listing-table td[data-label="#"] {
        position: relative;
        padding-right: 40px !important; /* Make room for the dropdown */
    }
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .track-listing-table td[data-label="#"] {
        display: flex !important;
        justify-content: space-between !important; /* Change to space-between */
        align-items: center !important;
        padding-right: 8px !important; /* Reduce right padding */
        position: relative !important;
    }

    .track-listing-table .bb-dropdown.mobile-only {
        position: relative !important; /* Change from absolute to relative */
        right: 0 !important; /* Reset right position */
        top: 0 !important; /* Reset top position */
        transform: none !important; /* Remove transform */
    }

    /* Ensure the track number stays on the left */
    .track-listing-table td[data-label="#"] span {
        order: 1; /* Force number to be first */
    }

    /* Ensure the dropdown stays on the right */
    .track-listing-table td[data-label="#"] .bb-dropdown {
        order: 2; /* Force dropdown to be second */
    }
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .track-listing-table td[data-label="#"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Track number styling */
    .track-listing-table td[data-label="#"] span {
        order: 1;
        margin-right: auto;
    }

    /* Dropdown container styling */
    .track-listing-table .bb-dropdown.mobile-only {
        order: 2;
        margin-left: auto;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* Button styling */
    .track-listing-table .bb-dropdown-toggle {
        padding: 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icon styling */
    .track-listing-table .bb-dropdown-toggle i {
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ensure dropdown menu aligns properly */
    .track-listing-table .bb-dropdown-menu {
        right: 0 !important;
        left: auto !important;
        margin-top: 4px !important;
    }
}

/* Desktop/Mobile visibility classes */
.desktop-only {
    display: block !important;
}

.mobile-only {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    /* Hide the Actions column on mobile */
    .track-listing-table td[data-label="Actions"],
    .track-listing-table th:last-child {
        display: none !important;
    }
}

/* Style for dropdown items with icons */
.track-listing-table .bb-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.track-listing-table .bb-dropdown-item i {
    font-size: 14px !important;
    color: #939597 !important;
}

/* Add separator between menu items */
.track-listing-table .bb-dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #E8E9EC !important;
}

/* Add these styles to the end of your existing catalogue.css file */

.track-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.track-details-modal.show {
    opacity: 1;
    visibility: visible;
}

.track-details-content {
    background: white;
    border-radius: 8px;
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.track-details-modal.show .track-details-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent !important; /* Force transparent background */
    border: none;
    font-size: 24px;
    color: #939597;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.close-modal:hover {
    color: #122b46;
    background: transparent !important; /* Keep transparent on hover */
}

.track-details-content h2 {
    margin: 0 0 24px;
    padding-right: 32px;
    color: #122b46;
    font-size: 20px;
}

.version-title {
    color: #939597;
    font-size: 16px;
}

.track-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.detail-group {
    margin-bottom: 16px;
}

.detail-group label {
    display: block;
    font-size: 12px;
    color: #939597;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.detail-group p {
    margin: 0;
    color: #122b46;
    font-size: 14px;
    line-height: 1.4;
}

.audio-preview {
    border-top: 1px solid #E8E9EC;
    padding-top: 16px;
}

.audio-preview label {
    display: block;
    font-size: 12px;
    color: #939597;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 500;
}

.audio-preview audio {
    width: 100%;
    height: 36px;
}

@media screen and (max-width: 768px) {
    .track-details-content {
        padding: 16px;
        width: 95%;
    }

    .track-details-grid {
        grid-template-columns: 1fr;
    }
}

/* Add spacing between title and status badge */
.release-header-container h2 {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between title and badge */
    margin-bottom: 24px; /* Space below the title */
}

/* Adjust status badge in title */
.release-header-container h2 .status {
    margin-left: 4px; /* Additional space after the title text */
    padding: 8px 16px !important; /* Slightly larger padding for the badge */
    font-size: 12px !important; /* Adjust size to match title */
    line-height: 1 !important; /* Ensure proper vertical alignment */
    min-width: 100px; /* Match the table status width */
    text-align: center; /* Center the text */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .release-header-container h2 {
        flex-wrap: wrap; /* Allow wrapping on small screens */
        gap: 8px; /* Slightly reduced spacing on mobile */
    }
    
    .release-header-container h2 .status {
        padding: 6px 12px !important; /* Slightly smaller padding on mobile */
        min-width: 100px; /* Maintain minimum width on mobile */
    }
}

/* Make "View" text invisible while keeping the th element */
.catalogue-table th:last-child {
    color: transparent;
    font-size: 0;
}


/* Catalogue table view button dropdown styles */
.catalogue-table td[data-label="View"] .bb-dropdown {
    position: relative;
    display: inline-block;
}

.catalogue-table td[data-label="View"] .bb-dropdown-toggle {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #939597;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogue-table td[data-label="View"] .bb-dropdown-toggle:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
}

.catalogue-table td[data-label="View"] .bb-dropdown-menu {
    display: none !important;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

/* Show dropdown menu ONLY on click (when .show class is present) */
.catalogue-table td[data-label="View"] .bb-dropdown.show .bb-dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Show catalogue dropdown menu ONLY on click */
.catalogue-table td[data-label="View"] .catalogue-dropdown.show .catalogue-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override any JavaScript-applied styles that force dropdowns to be visible */
.catalogue-table .bb-dropdown-menu,
.catalogue-table .catalogue-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.catalogue-table td[data-label="View"] .bb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    color: #122b46;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.catalogue-table td[data-label="View"] .bb-dropdown-item:hover {
    background-color: #f8f9fa;
}

.catalogue-table td[data-label="View"] .bb-dropdown-item i {
    font-size: 14px;
    color: #939597;
}

@media screen and (max-width: 768px) {
    /* Hide specific header text on mobile */
    .catalogue-table td[data-label="View"]::before,
    .catalogue-table td[data-label="Artwork"]::before {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .catalogue-table tbody tr {
        display: grid;
        grid-template-areas:
            "status view"
            "title title"
            "metadata artwork"
            "button button";
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 32px 16px 64px;
    }

    /* Position status in the top row, left side */
    .catalogue-table td[data-label="Status"] {
        grid-area: status;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 32px;
        border: none;
        margin: 0;
    }

    /* Keep title full width below */
    .catalogue-table td[data-label="Title"] {
        grid-area: title;
        font-weight: 600;
        font-size: 16px;
        /* padding: 0; */
        text-align: left;
        border: none;
        margin-bottom: 16px;
        width: 100%;
    }

    /* Ensure view button aligns with status */
    .catalogue-table td[data-label="View"] {
        grid-area: view;
        display: flex;
        justify-content: flex-end;
        align-items: start;
        padding: 0;
        border: none;
    }
}

/* Update the btn-view styles for the track listing */
.track-listing-table .btn-view {
    background: none !important;
    border: none !important;
    padding: 8px !important;
    color: #939597 !important;
    transition: none !important;
    box-shadow: none !important;
}

.track-listing-table .btn-view:hover {
    background: none !important;
    color: #939597 !important;
    box-shadow: none !important;
}

/* Ensure mobile view also has clean button styling */
@media screen and (max-width: 768px) {
    .track-listing-table .btn-view.mobile-only {
        background: none !important;
        border: none !important;
        padding: 8px !important;
        color: #939597 !important;
        transition: none !important;
        box-shadow: none !important;
    }

    .track-listing-table .btn-view.mobile-only:hover {
        background: none !important;
        color: #939597 !important;
        box-shadow: none !important;
    }
}

/* Add these styles for mobile track title */
.track-title-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 500;
    color: #122b46;
    white-space: nowrap; /* Prevent title from wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflow */
}

@media screen and (max-width: 768px) {
    .track-listing-table td[data-label="#"]::before {
        display: none !important;
    }

    .track-listing-table td[data-label="#"] {
        padding: 16px !important;
        margin-bottom: -48px;
        z-index: 1000;
    }

    .track-title-mobile {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .track-title-mobile > span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0; /* This helps with flexbox text truncation */
    }

    .track-title-mobile .btn-view {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        width: auto !important;
    }

    .track-title-mobile .btn-view i {
        display: inline-block !important;
        font-size: 16px !important;
    }
}

/* Update the container to not clip overflow */
#catalogueResultsBody {
    position: relative;
    overflow: visible !important;
}

/* Ensure the table doesn't clip overflow */
.catalogue-table {
    overflow: visible !important;
}

/* Ensure table cells containing dropdowns don't clip */
.catalogue-table td {
    overflow: visible !important;
}

/* Rename dropdown classes to be specific to our plugin */
.catalogue-dropdown {
    position: relative;
    display: inline-block;
}

.catalogue-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #939597;
}

.catalogue-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.catalogue-dropdown.show .catalogue-menu {
    display: block;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #939597;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #E8E9EC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

/* Generic dropdown rule - but NOT for catalogue tables */
.dropdown.show .dropdown-menu {
    display: block;
}

/* Override for catalogue tables - force hide unless .show class is present */
.catalogue-table .dropdown.show .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #16181b;
}

/* CRITICAL: Force hide catalogue dropdown menus - Maximum specificity */
.catalogue-table .dropdown-menu,
.catalogue-table .bb-dropdown-menu,
.catalogue-table .catalogue-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Force hide by default - will be overridden by show class */
.catalogue-table .dropdown .dropdown-menu,
.catalogue-table .bb-dropdown .bb-dropdown-menu,
.catalogue-table .catalogue-dropdown .catalogue-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Show dropdown menu on hover of the dropdown container (ellipsis icon) */
.catalogue-table td[data-label="View"] .bb-dropdown:hover .bb-dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep the existing click behavior */
.catalogue-table td[data-label="View"] .catalogue-dropdown.show .catalogue-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Show dropdown menu on hover - Absolute maximum specificity */
body .catalogue-table .bb-dropdown:hover .bb-dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

/* Enable hover for catalogue dropdowns */
.catalogue-table .dropdown,
.catalogue-table .bb-dropdown,
.catalogue-table .catalogue-dropdown {
    pointer-events: auto !important;
}

.catalogue-table .dropdown-toggle,
.catalogue-table .bb-dropdown-toggle,
.catalogue-table .catalogue-toggle {
    pointer-events: auto !important;
}

/* Allow hover effects on dropdown menus */
.catalogue-table .dropdown-menu:hover,
.catalogue-table .bb-dropdown-menu:hover,
.catalogue-table .catalogue-menu:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* CACHE BUSTER: Updated 2024-12-19 to fix hover issue */

/* Only show on click (when .show class is present) - Maximum specificity */
.catalogue-table .dropdown.show .dropdown-menu,
.catalogue-table .bb-dropdown.show .bb-dropdown-menu,
.catalogue-table .catalogue-dropdown.show .catalogue-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

/* ULTIMATE: Show on click - Absolute maximum specificity */
body .catalogue-table .dropdown.show .dropdown-menu,
body .catalogue-table .bb-dropdown.show .bb-dropdown-menu,
body .catalogue-table .catalogue-dropdown.show .catalogue-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

/* Ensure ellipsis icons are visible */
.catalogue-table .dropdown-toggle,
.catalogue-table .bb-dropdown-toggle,
.catalogue-table .catalogue-toggle {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

/* Override any inline styles that might be applied by JavaScript */
.catalogue-table td[data-label="View"] .dropdown-menu[style],
.catalogue-table td[data-label="View"] .bb-dropdown-menu[style],
.catalogue-table td[data-label="View"] .catalogue-menu[style] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}