/* Dataset badge styling */
.dataset-badge {
    font-size: 0.75rem;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: inline-block;
    margin-bottom: 0.25rem;
}

/* Ensure variable count badge doesn't break layout for large numbers - responsive sizing */
.nav-tabs .nav-link sup .badge {
    font-size: clamp(0.65em, 1.5vw, 0.7em);
    padding: clamp(0.1rem, 0.8vw, 0.15rem) clamp(0.3rem, 1.2vw, 0.4rem);
    min-width: auto;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
}

/* Card link styling - entire card is clickable */
a .card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a:hover .card {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.badge-container-desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-right: 2.5rem;
    margin-right: 1rem;
}

.badge-container-desktop .dataset-badge {
    max-width: 100%;
    text-align: right;
}

.badge-container-mobile {
    display: none;
}

/* Mobile styles (max-width: 768px) */
@media (max-width: 768px) {
    .badge-container-desktop {
        display: none;
    }
    
    .badge-container-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    
    .badge-container-mobile .dataset-badge {
        flex-shrink: 0;
        margin-bottom: 0;
    }
    
    /* Keep pagination buttons in one row on mobile */
    .btn.float-left,
    .btn.float-right {
        float: none;
        display: inline-block;
        width: 48%;
        margin-bottom: 1rem;
        vertical-align: top;
    }
    
    .btn.float-left {
        margin-right: 2%;
    }
    
    .btn.float-right {
        margin-left: 2%;
        margin-bottom: 1rem;
    }
    
    /* Clear floats and add spacing before nav tabs */
    .nav-tabs {
        clear: both;
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0;
        gap: 0.2rem;
    }
    
    /* Override Bootstrap nav-fill to prevent extra spacing */
    .nav-tabs.nav-fill .nav-link {
        flex: 1 1 0;
    }
    
    /* Keep nav tabs in one row (horizontal) on mobile */
    .nav-tabs {
        padding: 0;
    }
    
    .nav-tabs .nav-link {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
        border-radius: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.1rem !important;
        padding: 0.4rem 0.2rem;
        line-height: 1.3;
    }
    
    /* Make badges smaller inside nav links on mobile - responsive sizing */
    .nav-tabs .nav-link .badge {
        font-size: clamp(0.75rem, 2vw, 0.85rem);
        padding: clamp(0.15rem, 1vw, 0.2rem) clamp(0.25rem, 1.2vw, 0.3rem);
        line-height: 1;
    }
    
    /* When 4 or more tabs are present (changelog and/or resources), adjust sizing for better fit */
    .nav-tabs.has-4-tabs .nav-link {
        flex: 1 1 25%;
        font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
        padding: 0.35rem 0.15rem;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    /* Ensure sup (badge container) doesn't get cut off */
    .nav-tabs.has-4-tabs .nav-link sup {
        white-space: nowrap;
        overflow: visible;
        display: inline-block;
    }
    
    /* Smaller but still readable badges when 4+ tabs are present - responsive sizing */
    .nav-tabs.has-4-tabs .nav-link .badge {
        font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
        padding: clamp(0.1rem, 0.8vw, 0.15rem) clamp(0.2rem, 1vw, 0.3rem) !important;
        min-width: auto;
        display: inline-block;
        flex-shrink: 0;
    }
    
    /* Reorganize DataTables buttons for mobile - 2 rows with better grouping */
    .dt-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    /* First row: pageLength and csv - each takes exactly 50% with center gap */
    .dt-buttons-row-1 {
        display: flex;
        width: 100%;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    
    .dt-buttons-row-1 > * {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 0;
        max-width: calc(50% - 0.375rem);
    }
    
    /* Second row: Select all and Deselect all - each takes exactly 50% with center gap */
    .dt-buttons-row-2 {
        display: flex;
        width: 100%;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    
    .dt-buttons-row-2 > * {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 0;
        max-width: calc(50% - 0.375rem);
    }
    
    /* Responsive font size for row/csv select/deselect buttons in variables section (mobile only) */
    /* Using clamp() to auto-adjust min/max to prevent text hiding */
    #variables .dt-buttons button,
    #variables .dt-buttons .dt-button,
    #variables .dt-buttons-row-1 button,
    #variables .dt-buttons-row-1 .dt-button,
    #variables .dt-buttons-row-2 button,
    #variables .dt-buttons-row-2 .dt-button {
        font-size: clamp(0.75rem, 2.2vw, 0.85rem) !important;
        padding: clamp(0.3rem, 1.5vw, 0.4rem) clamp(0.4rem, 2vw, 0.6rem) !important;
        white-space: nowrap;
        overflow: visible;
    }
    
    /* Third row: Add to cart button - full width */
    .dt-buttons-row-3 {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .dt-buttons-row-3 .btn,
    .dt-buttons-row-3 > * {
        width: 100%;
    }
    
    /* Fix checkbox display - DataTables adds pseudo-elements, we need to override */
    .select-checkbox {
        position: relative;
    }
    
    /* Completely remove DataTables checkbox pseudo-elements that create duplicates */
    .select-checkbox::before,
    .select-checkbox::after {
        display: none !important;
        content: none !important;
    }
    
    /* Show only the native checkbox input */
    .select-checkbox input[type="checkbox"] {
        display: block !important;
        width: 14px;
        height: 14px;
        margin: 0 auto;
        cursor: pointer;
        opacity: 1 !important;
        position: relative;
        z-index: 1;
    }
    
    /* Hide checkbox for no-select cells (default variables) */
    .no-select.select-checkbox,
    .no-select.select-checkbox::before,
    .no-select.select-checkbox::after,
    .no-select input[type="checkbox"] {
        display: none !important;
    }
    
    .no-select {
        pointer-events: none;
        cursor: default;
    }
    
    /* Make table full width and centered */
    .datatable {
        width: 100% !important;
        font-size: 0.9rem;
    }
    
    /* Hide table header completely on mobile - we use inline labels instead */
    .datatable thead {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .datatable thead th,
    .datatable thead tr {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Reorganize table rows for mobile - single column, stack everything vertically */
    .datatable tbody tr {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        gap: 0.5rem;
        align-items: start;
        width: 100%;
        min-height: auto;
        padding: 1rem;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
    }
    
    .datatable tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    /* All columns stack vertically in single column */
    .datatable tbody tr > td:first-child,
    .datatable tbody tr > td:nth-child(2),
    .datatable tbody tr > td:nth-child(3),
    .datatable tbody tr > td:nth-child(4),
    .datatable tbody tr > td:nth-child(5),
    .datatable tbody tr > td:nth-child(6) {
        grid-column: 1;
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.25rem 0;
        border: none;
        justify-content: flex-start;
    }
    
    /* Selection checkbox - now in content area, left-aligned */
    .datatable tbody td:first-child {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        background: inherit;
        min-height: 24px;
    }
    
    /* Add labels for each column on mobile */
    .datatable tbody tr > td:first-child::before {
        content: 'Selection: ';
        font-weight: bold;
        display: inline;
    }
    
    .datatable tbody tr > td:nth-child(2)::before {
        content: 'Variable: ';
        font-weight: bold;
        display: inline;
    }
    
    .datatable tbody tr > td:nth-child(3)::before {
        content: 'Info: ';
        font-weight: bold;
        display: inline;
    }
    
    .datatable tbody tr > td:nth-child(4)::before {
        content: 'Assessment: ';
        font-weight: bold;
        display: inline;
    }
    
    .datatable tbody tr > td:nth-child(5)::before {
        content: 'Constructs: ';
        font-weight: bold;
        display: inline;
    }
    
    /* Ensure checkbox cell is positioning context for checkmark */
    .datatable tbody td:first-child.select-checkbox {
        position: relative !important;
    }
    
    /* Ensure checkbox cell always shows something - fallback if DataTables hasn't initialized */
    .datatable tbody td:first-child:not(.select-checkbox)::before {
        content: '☐';
        display: block;
        width: 14px;
        height: 14px;
        font-size: 12px;
        line-height: 14px;
        color: #ccc;
    }
    
    /* Once DataTables adds select-checkbox class, hide the fallback */
    .datatable tbody td:first-child.select-checkbox::before {
        content: '' !important;
    }
    
    /* Ensure checkbox cell is visible and has content */
    .datatable tbody td:first-child.select-checkbox {
        min-height: 24px;
        min-width: 24px;
    }
    
    /* Branching checkbox - align left in content area */
    .datatable tbody tr > td:nth-child(6)::before {
        content: 'Branching: ';
        font-weight: bold;
        display: inline;
    }
    
    /* Keep branching checkbox in content area, aligned left */
    /* Using more specific selector to override the earlier display: block rule */
    .datatable tbody tr > td:nth-child(6) {
        grid-column: 1;
        text-align: left;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    /* Ensure branching checkbox input matches selection checkbox size and alignment */
    .datatable tbody td:nth-child(6) input[type="checkbox"] {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        margin: 0;
        flex-shrink: 0;
        vertical-align: middle;
        cursor: default;
    }
    
    /* Default variables - display as compact grid */
    .datatable tbody tr.default-row {
        grid-template-columns: 1fr;
    }
    
    /* Group default variables - reduce spacing */
    .datatable tbody tr.default-row + tr.default-row {
        border-top: 1px solid #e0e0e0;
        margin-top: 0;
    }
    
    /* Selection checkbox (DataTables Select) - on the right */
    .datatable tbody td.select-checkbox {
        position: relative !important;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* DataTables checkbox styling - ensure it's visible */
    /* Note: DataTables Select adds the checkbox, but we style it with ::before */
    .datatable tbody td.select-checkbox::before {
        content: '';
        display: block !important;
        width: 14px;
        height: 14px;
        border: 2px solid #ccc;
        border-radius: 3px;
        background: white;
        cursor: pointer;
        position: relative;
        z-index: 1;
        margin: 0 auto;
    }
    
    /* Ensure checkbox cell is the positioning context for the checkmark */
    .datatable tbody td.select-checkbox {
        position: relative !important;
    }
    
    /* When row is selected, make entire row blue */
    .datatable tbody tr.selected {
        background-color: #007bff !important;
        color: white;
    }
    
    /* When row is selected, style the checkbox to show it's checked */
    .datatable tbody tr.selected td.select-checkbox::before,
    .datatable tbody tr.selected td:first-child.select-checkbox::before {
        background: white !important;
        border-color: white !important;
    }
    
    /* Checkmark for selected checkbox - positioned absolutely centered in the checkbox box */
    .datatable tbody tr.selected td.select-checkbox::after,
    .datatable tbody tr.selected td:first-child.select-checkbox::after {
        content: '✓' !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        /* Center within the checkbox cell (accounting for padding) */
        top: calc(50% - 0px) !important;
        left: calc(50% - 0px) !important;
        transform: translate(-50%, -50%) !important;
        color: #007bff !important;
        font-size: 14px !important;
        font-weight: bold !important;
        z-index: 10 !important;
        pointer-events: none !important;
        line-height: 1 !important;
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* Ensure text in selected rows is visible */
    .datatable tbody tr.selected td {
        color: white;
    }
    
    .datatable tbody tr.selected td a {
        color: white;
        text-decoration: underline;
    }
    
    /* Also handle if DataTables adds selected class directly to cell */
    .datatable tbody td.select-checkbox.selected::before,
    .datatable tbody td.selected.select-checkbox::before {
        background: white !important;
        border-color: white !important;
    }
    
    .datatable tbody td.select-checkbox.selected::after,
    .datatable tbody td.selected.select-checkbox::after {
        content: '✓' !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: #007bff !important;
        font-size: 14px !important;
        font-weight: bold !important;
        z-index: 10 !important;
        pointer-events: none !important;
        line-height: 1 !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide any native checkbox inputs that might be creating duplicates */
    .datatable tbody td.select-checkbox input[type="checkbox"] {
        display: none !important;
    }
    
    /* For default variables - show disabled checkbox indicator instead of hiding */
    .datatable tbody td.no-select.select-checkbox::before {
        content: '';
        display: block !important;
        width: 14px;
        height: 14px;
        border: 2px solid #ddd;
        border-radius: 3px;
        background: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.5;
    }
    
    .datatable tbody td.no-select.select-checkbox::after {
        content: '⊘';
        display: block !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #999;
        font-size: 12px;
        z-index: 2;
        pointer-events: none;
    }
    
    .datatable tbody td.no-select {
        pointer-events: none;
        cursor: not-allowed;
    }
    
    /* Branching checkbox - keep it visible, styled as disabled, match selection checkbox size */
    .datatable tbody td:nth-child(6) input[type="checkbox"] {
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        cursor: not-allowed;
        opacity: 0.6;
        vertical-align: middle;
        margin: 0;
    }
    
    /* Default text alignment - left for content, center only for checkbox */
    .datatable tbody td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Only center the checkbox column */
    .datatable tbody td:first-child {
        text-align: center;
    }
    
    /* All other columns align left */
    .datatable tbody td:not(:first-child) {
        text-align: left;
    }
    
    /* Ensure checkbox cell is always visible and has proper dimensions */
    .datatable tbody td:first-child {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Make sure DataTables Select checkbox is rendered */
    .datatable tbody td.select-checkbox {
        visibility: visible !important;
        opacity: 1 !important;
    }
}