/* static/css/styles.css */

/* Variables */
:root {
    --bg-primary: #091F40;
    --text-wfp: #ffffff;
    --bg-secondary: #2d2d2d;
    --bg-wfp: #010101;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --accent: #07eda2;
    --success: #00ff3c;
    --danger: #dc3545;
    --warning: #ffc107;
}

/* Base Styles */
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    font-family: 'ProximaNova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Typography */
@font-face {
    font-family: 'BBBPoppins';
    src: url('../fonts/BBBPoppinsTN-TextRegular.ttf') format('truetype'); /* Assuming bold is the primary one used */
    font-weight: normal; /* Specify weight */
    font-style: normal;
    font-display: swap; /* Improved font loading */
}
@font-face {
    font-family: 'BBBPoppins';
    src: url('../fonts/BBBPoppinsTN-TextBold.ttf') format('truetype'); /* Assuming bold is the primary one used */
    font-weight: bold; /* Specify weight */
    font-style: normal;
    font-display: swap; /* Improved font loading */
}
@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proximanova_bold.ttf') format('truetype'); /* Assuming bold is the primary one used */
    font-weight: bold; /* Specify weight */
    font-style: normal;
    font-display: swap; /* Improved font loading */
}
/* Add regular if needed */
@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proximanova_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ITCAvantGardeStd-Bold';
    src: url('../fonts/ITCAvantGardeStd-Bold.ttf') format('truetype');
    font-weight: bold; /* Specify weight */
    font-style: normal;
    font-display: swap; /* Improved font loading */
}
@font-face {
    font-family: 'ITCAvantGardeStd-Md';
    src: url('../fonts/ITCAvantGardeStd-Md.ttf') format('truetype');
    font-weight: 500; /* Medium weight */
    font-style: normal;
    font-display: swap; /* Improved font loading */
}

/* Layout Components */
.main-nav {
    background-color: var(--bg-secondary);
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Add subtle shadow */
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center nav items */
    gap: 1.5rem; /* Adjust gap */
    flex-wrap: wrap; /* Improved responsiveness */
}

.main-nav a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.5rem 0; /* Add vertical padding */
    transition: color 0.2s ease, border-bottom 0.2s ease; /* Smooth hover effect */
    border-bottom: 2px solid transparent; /* Prepare for hover effect */
    font-size: 0.9rem; /* Slightly smaller nav links */
    text-transform: uppercase; /* Uppercase links */
    letter-spacing: 0.5px;
}

.main-nav a:hover,
.main-nav a.active { /* Add active class styling if needed */
    color: var(--accent);
    border-bottom-color: var(--accent); /* Highlight with border */
}

.content {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Leaderboard Component */
.leaderboard {
    /* Increase the overall width further */
    width: 420px; /* Increased from 360px */
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 4px;
    position: fixed;
    left: 2rem;
    top: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.leaderboard-title {
    font-family: 'BBBPoppins', sans-serif;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin: 1rem 0;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.round-counter {
    font-family: 'BBBPoppins', sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    margin: 0.5rem 0 1rem 0;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leaderboard-list {
    position: relative;
    height: 1100px; /* Adjust height as needed */
    overflow: hidden; /* Prevent content overflow */
}

.athlete-row {
    display: grid;
    /* Adjust grid columns: Position | Name (flexible) | Score (fixed) */
    grid-template-columns: 30px 1fr 80px; /* Position | Name (flexible) | Score (reduced to 90px) */
    padding: 0.5rem;
    height: auto;
    background-color: var(--bg-wfp);
    border-radius: 0px;
    position: absolute;
    width: calc(100% - 8rem);
    left: 0;
    transition: all 0.5s ease-out;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 4px;
}

/* Style for completed athletes */
.athlete-row.finished {
    background-color: #07e099; /* Blue for finished */
}

.athlete-row.finished .position,
.athlete-row.finished .name,
.athlete-row.finished .score {
    color: #FFFFFF; /* White text on blue background */
}

.athlete-row .position {
    font-family: 'BBBPoppins', sans-serif;
    font-weight: bold; /* Use font weight */
    color: var(--text-wfp);
    font-size: 1.3rem;
    text-align: center;
    /* Ensure position column doesn't wrap */
    white-space: nowrap;
    /* Vertical centering fix for BBBPoppins font metrics */
    padding-top: 0.15em;
}

.athlete-row .name {
    font-family: 'BBBPoppins', sans-serif;
    font-weight: normal; /* Use font weight */
    font-size: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-wfp);
    /* Name takes remaining space (1fr) */
    /* Vertical centering fix for BBBPoppins font metrics */
    padding-top: 0.15em;
}

.athlete-row .score {
    font-family: 'BBBPoppins', sans-serif; /* Match name font */
    font-weight: bold;
    font-size: 1.3rem;
    text-align: right; /* Align score to the right */
    color: var(--accent);
    white-space: nowrap; /* Prevent wrapping within the score itself */
    overflow: hidden; /* Hide overflow if it still happens */
    text-overflow: ellipsis; /* Add ellipsis if it overflows */
    /* Score column has fixed width from grid-template-columns */
    /* Vertical centering fix for BBBPoppins font metrics */
    padding-top: 0.15em;
}
.athlete-row .score .unit {
    font-size: 0.8em; /* Make font size relative to the parent score font size (e.g., 80%) */
    text-transform: uppercase; /* Ensures uppercase, though JS already provides it */
    /* Optional: Adjust vertical alignment slightly if needed */
    /* vertical-align: middle; */
    /* Optional: Add a tiny bit of space before the unit */
    /* margin-left: 2px; */
}

/* Specific adjustment for weight score */
.athlete-row.weight-row .score {
    font-size: 1.15rem; /* Keep slightly smaller font */
}

/* Weight leaderboard specific layout - wider overall width and score column */
.weight-leaderboard .athlete-row {
    width: calc(100% - 2rem); /* Reduce side margins from 4rem to 2rem for maximum space */
    grid-template-columns: 30px 1fr 160px; /* Increase score column from 80px to 160px for weight display */
}


/* Timer Component */
.timer {
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    font-family: 'ITCAvantGardeStd-Bold', sans-serif; /* Consistent font */
    background-color: var(--bg-secondary);
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Added depth */
    color: var(--text-primary); /* Ensure text color */
    min-width: 180px; /* Ensure minimum width */
    text-align: center;
}

/* Heat Selector (within Leaderboard) */
.heat-selector {
    margin-bottom: 1rem;
    /* display: none; */ /* Controlled by JS or specific page context */
}

.show-selector .heat-selector {
    display: block;
}

.heat-selector select,
.selector-group select { /* Generalize selector styling */
    width: 100%;
    padding: 0.75rem; /* Increased padding */
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--accent); /* Use accent for border */
    border-radius: 4px;
    transition: border-color 0.2s ease; /* Smooth focus transition */
    font-size: 1rem; /* Ensure readable font size */
    box-sizing: border-box;
}

.heat-selector select:focus,
.selector-group select:focus {
     outline: none;
     border-color: var(--accent);
     box-shadow: 0 0 0 2px rgba(230, 23, 139, 0.35); /* Accent color focus ring */
}


/* Counter Interface */
.counter-interface {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Adjust gap */
    max-width: 600px;
    margin: 2rem auto; /* Add top/bottom margin */
    padding: 2rem; /* Add padding */
    background-color: var(--bg-secondary); /* Give counter a background */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    user-select: none; /* Prevent text selection */
    touch-action: manipulation; /* Better touch handling */
}

.counter-interface .current-info h2 {
    color: var(--accent);
    margin-bottom: 0.5rem;
    text-align: center;
}
.counter-interface .current-info p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}


.counter-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selector-group {
    width: 100%;
}

.selector-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--text-secondary);
}


.counter-status {
    width: 100%;
    padding: 1.5rem;
    background-color: var(--bg-primary); /* Darker background for status */
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--accent);
}

.counter-status .status-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.counter-status .status-info span {
    color: var(--text-primary);
    font-weight: bold;
}

.counter-status .athlete-info h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--text-secondary);
}
.counter-status .athlete-info h3 span {
    color: var(--text-primary);
}

.counter-status .athlete-info h2 {
    font-size: 3rem;
    color: var(--accent);
    margin: 0;
    font-family: 'ITCAvantGardeStd-Bold', sans-serif;
}
.counter-status .athlete-info h2 span {
     color: var(--success); /* Highlight the actual count */
}


/* Rep Buttons */
.rep-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px; /* Limit button width */
    margin-top: 1rem;
}


/* Button Styles */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold; /* Make buttons bold */
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
    text-transform: uppercase; /* Uppercase button text */
    letter-spacing: 0.5px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--text-secondary) !important; /* Ensure disabled style overrides */
    color: var(--bg-primary) !important;
}

.btn:not(:disabled):active { /* Only apply active scale if not disabled */
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--accent);
    color: white;
}
.btn-primary:hover:not(:disabled) {
    background-color: #c41478; /* Darker accent on hover */
}


.btn-success {
    background-color: var(--success);
    color: var(--bg-primary); /* Better contrast with light green */
}
.btn-success:hover:not(:disabled) {
    background-color: #00d633; /* Slightly darker green */
}

.btn-danger {
    background-color: var(--danger);
    color: white;
}
.btn-danger:hover:not(:disabled) {
    background-color: #b02a37; /* Darker red */
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-add {
    height: 120px;
    font-size: 3rem;
    background-color: var(--success);
    color: var(--bg-primary);
    width: 100%; /* Full width within its container */
}

.btn-subtract {
    height: 60px;
    font-size: 1.5rem;
    background-color: var(--danger);
    color: white;
    width: 100%; /* Full width within its container */
}

/* Weight Counter Specific Styles */
.weight-input-section {
    width: 100%;
    max-width: 400px; /* Limit width */
    margin-top: 1rem; /* Reduced top margin */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.weight-input-section .form-group {
    width: 100%;
}

.weight-input-section label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--text-secondary);
}

.weight-input-section input[type="number"] {
    width: 100%;
    padding: 0.75rem;
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    font-size: 1.5rem; /* Larger font for weight input */
    text-align: center;
    box-sizing: border-box;
}
/* Remove spinner buttons for number input */
.weight-input-section input[type=number]::-webkit-inner-spin-button,
.weight-input-section input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.weight-input-section input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}


.weight-input-section button {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
}

.conversion-display {
    font-size: 1rem;
    color: var(--text-secondary);
    min-height: 1.2em; /* Prevent layout shift */
    margin-top: -0.5rem; /* Pull conversion closer to input */
}

.submit-message {
    font-weight: bold;
    min-height: 1.2em; /* Prevent layout shift */
    text-align: center;
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.submit-message.info {
    color: var(--text-secondary);
    background-color: rgba(108, 117, 125, 0.1); /* Subtle background */
}
.submit-message.success {
    color: var(--bg-primary);
    background-color: var(--success);
}
.submit-message.error {
    color: white;
    background-color: var(--danger);
}


/* Admin Panel */
.admin-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid; /* Use grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Responsive columns */
    gap: 2rem;
}

.admin-section {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.admin-section h2, .admin-section h3, .admin-section h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent);
    color: var(--text-primary);
}
.admin-section h4 {
    font-size: 1.1rem;
    border-bottom: none; /* No border for h4 */
    margin-bottom: 1rem;
}


/* Admin Heat Controls */
.heat-controls {
    display: grid;
    grid-template-columns: 1fr; /* Stack elements */
    gap: 1rem;
}
.heat-info p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}
.heat-info span {
    color: var(--text-primary);
    font-weight: bold;
}
.control-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.control-buttons .btn {
    flex-grow: 1; /* Make buttons fill space */
}

/* Form Styles (Admin, Modals) */
.admin-form .form-group,
.modal-content .form-group { /* Target forms inside admin and modals */
    margin-bottom: 1rem;
}

.admin-form label,
.modal-content label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--text-secondary);
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form select,
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content select {
    width: 100%;
    padding: 0.75rem;
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box; /* Include padding/border in width */
    font-size: 1rem;
}

.admin-form input:focus,
.admin-form select:focus,
.modal-content input:focus,
.modal-content select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(230, 23, 139, 0.35); /* Updated to match accent color */
}

/* Admin Lane Assignment */
.lane-assignment {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.athletes-table-container {
    max-height: 300px; /* Limit height and make scrollable */
    overflow-y: auto;
    border: 1px solid var(--bg-primary);
    border-radius: 4px;
}
.athletes-table {
    width: 100%;
    border-collapse: collapse;
}
.athletes-table th,
.athletes-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--bg-primary);
}
.athletes-table th {
    background-color: var(--bg-primary);
    position: sticky; /* Make header sticky */
    top: 0;
}
.athletes-table td:last-child {
    text-align: right;
}


/* Table Styles (Database View) */
.database-view h2, .database-view h3 {
    margin-bottom: 1rem;
    color: var(--accent);
}
.database-controls, .heat-filter {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.heat-filter label {
    font-weight: bold;
    color: var(--text-secondary);
}
.heat-filter select {
    min-width: 200px; /* Give filter dropdown some width */
}

.database-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    background-color: var(--bg-secondary);
    border-radius: 4px; /* Slightly rounded corners */
    overflow: hidden; /* Clip content to border radius */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem; /* Smaller font for dense tables */
}

.database-table th,
.database-table td {
    padding: 0.6rem 0.8rem; /* Adjust padding */
    text-align: left;
    border: 1px solid var(--bg-primary); /* Use primary bg for borders */
    white-space: nowrap; /* Prevent wrapping in table cells */
}

.database-table th {
    background-color: var(--bg-primary);
    font-weight: bold;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.database-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Subtle hover effect */
}
.database-table td:last-child {
    text-align: right; /* Align actions to the right */
    white-space: nowrap;
}
.database-table .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin-left: 5px; /* Add some spacing */
}
.btn-edit { background-color: var(--warning); color: var(--bg-primary); }
.btn-delete { background-color: var(--danger); color: white; }
.btn-save { background-color: var(--success); color: var(--bg-primary); }
.btn-cancel { background-color: var(--text-secondary); color: var(--bg-primary); }
.btn-refresh { background-color: var(--accent); color: white; }


/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Darker overlay */
    backdrop-filter: blur(3px); /* Add blur effect */
}
.modal-content {
    background-color: var(--bg-secondary);
    margin: 10% auto; /* 10% from the top and centered */
    padding: 25px;
    border: 1px solid var(--accent); /* Accent border */
    width: 90%; /* Wider on smaller screens */
    max-width: 550px; /* Max width */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close-button:hover,
.close-button:focus {
    color: var(--text-primary);
    text-decoration: none;
}
.form-actions {
    margin-top: 20px;
    text-align: right;
    display: flex; /* Use flex for button alignment */
    justify-content: flex-end;
    gap: 10px;
}
/* .form-actions .btn {
    margin-left: 10px; /* Replaced by gap */
/* } */

.modal-content hr {
     border: 0;
     height: 1px;
     background-color: var(--accent);
     margin: 1.5rem 0;
 }
 .modal-content p strong {
     color: var(--accent); /* Highlight section titles */
 }


/* Utility Classes */
.text-center {
    text-align: center;
}

/* Animations */
@keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .content {
        padding: 1rem;
    }

    .timer {
        position: static; /* Make timer static on mobile */
        margin: 1rem auto;
        text-align: center;
        font-size: 2.5rem; /* Smaller font on mobile */
        width: auto; /* Allow timer to size naturally */
        max-width: 90%;
    }

    .leaderboard {
        position: static;
        width: calc(100% - 2rem); /* Adjust width for mobile */
        margin: 1rem;
        left: auto; /* Reset fixed positioning */
        top: auto;
    }

     .leaderboard-list {
         height: auto; /* Auto height on mobile */
         max-height: 60vh; /* Limit height with scroll */
         overflow-y: auto;
     }

    .athlete-row {
        /* Adjust grid for mobile - give score less fixed width */
        grid-template-columns: 30px 1fr 130px; /* Reduce score width on mobile */
    }

    /* Weight leaderboard mobile - wider overall width and score column */
    .weight-leaderboard .athlete-row {
        width: calc(100% - 2rem); /* Reduce side margins from default to 2rem for more space on mobile */
        grid-template-columns: 30px 1fr 180px; /* Increase score column from 130px to 180px for weight display on mobile */
    }

     .athlete-row .score {
         font-size: 1.0rem; /* Further reduce font size on mobile */
     }
     .athlete-row.weight-row .score {
         font-size: 0.9rem; /* Even smaller for weight on mobile */
     }

    .admin-panel {
        padding: 1rem;
        grid-template-columns: 1fr; /* Stack admin sections */
    }

    .counter-interface {
        padding: 1rem;
        margin: 1rem auto;
    }

    .btn-add,
    .btn-subtract {
        max-width: none; /* Allow full width on mobile */
    }

    .main-nav ul {
        justify-content: space-around; /* Space out nav items */
        gap: 0.5rem; /* Reduce gap */
    }
    .main-nav a {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .database-view {
        font-size: 0.85rem; /* Smaller base font for tables */
    }
    .database-table th, .database-table td {
        padding: 0.4rem 0.5rem;
        white-space: normal; /* Allow wrapping on mobile */
    }
    .database-table td:last-child {
        text-align: left; /* Left align actions on mobile */
    }
    .database-table .btn {
        display: inline-block; /* Ensure buttons flow */
        margin-bottom: 3px;
    }
    .heat-filter {
        flex-direction: column;
        align-items: stretch;
    }
    .heat-filter select {
        min-width: auto;
    }

    .modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 15px;
    }

}
.advanced-stats-view {
    /* Optional: Add specific styles for the overall container if needed */
}

.full-width-table-container {
    width: 100vw; /* Make container full viewport width */
    margin-left: calc(50% - 50vw); /* Pull container left to align with viewport edge */
    overflow-x: auto; /* Ensure horizontal scroll remains */
    padding-top: 0.5rem; /* Optional: Add some top padding */
    padding-bottom: 0.5rem; /* Optional: Add some bottom padding */
    /* Add horizontal padding inside the scroll container */
    padding-left: 1rem; 
    padding-right: 1rem;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Ensure the table inside uses the available width */
.full-width-table-container .database-table {
    width: 100%; /* Make table fill the scroll container */
    margin-bottom: 0; /* Remove bottom margin if it was inherited */
}


/* Responsive adjustments if needed */
@media screen and (max-width: 768px) {
    .full-width-table-container {
        /* Adjust padding for smaller screens if necessary */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}