.data-table-spot-prices {
    background:#0d1117;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid #30363d;
    width: 100%;
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: auto; 
}

.data-table-spot-prices table {
    width: auto;
    background-color: black;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 14px;
    font-weight: bold;
    display: table;
    font-family: "DIN", "Segoe UI", sans-serif;
    position: relative; 
    color: white;
    width: 100%;
}

.data-table-spot-prices thead {
    background: linear-gradient(135deg, #21262d 0%, #30363d 100%);
    position: sticky;
    top: 0;
    z-index: 30; 
    display: table-header-group;
}

.data-table-spot-prices tbody {
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    display: table-row-group;
}

.data-table-spot-prices thead tr, .data-table-spot-prices tbody tr {
    display: table-row;
}

.data-table-spot-prices th {
    background: linear-gradient(135deg, #21262d 0%, #30363d 100%);
    color: #ffffff;
    padding: 4px 2px;
    text-align: center;
    border-bottom: 1px solid #30363d;
    border-right: 1px solid #30363d;    
    font-size: 14px;
    font-weight: bold; 
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    cursor: pointer;
    transition: background 0.3s ease;
    line-height: 1.5;
    width: auto;
    min-width: auto;
    max-width: none !important;
    display: table-cell;
    padding: 8px;
    border: 1px solid #333;
}

.data-table-spot-prices td {
    padding: 2px 4px; 
    border-bottom: 1px solid #30363d;
    border-right: 1px solid #30363d;
    background: black;
    color: white;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    vertical-align: middle;
    text-align: center;
    line-height: 1.2;
    width: auto;
    min-width: auto;
    max-width: none !important;
    display: table-cell;
    padding: 8px;
    border: 1px solid #333;
}

.data-table-spot-prices td:nth-child(1) {
    background: linear-gradient(135deg, #21262d 0%, #30363d 100%);
    color: #ffffff;
    border: 1px solid #333;
}

.data-table-spot-prices td.higher {
    background: linear-gradient(120deg, rgba(239, 25, 32, 0.6), rgba(242, 73, 92, 0.8));
    color: white;
}

.data-table-spot-prices td.lower {
    background: linear-gradient(120deg, rgba(77, 172, 73, 0.6), rgba(115, 191, 105, 0.8));
    color: white;
}

h1 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "DIN", "Segoe UI", sans-serif;
    color: white;
}

/* Timeline indicator for current hour - much more visible */
.data-table-spot-prices tr.timeline-current td {
    border-top: 4px solid #ffffff !important;
    border-bottom: 4px solid #ffffff !important;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
    background: #1a1a1a !important;
}

.data-table-spot-prices tr.timeline-current td:nth-child(1) {
    background: linear-gradient(135deg, #4a5260 0%, #5a6270 100%) !important;
}

.data-table-spot-prices tr.timeline-current td.higher {
    background: linear-gradient(120deg, rgba(239, 25, 32, 0.8), rgba(242, 73, 92, 0.8)) !important;
}

.data-table-spot-prices tr.timeline-current td.lower {
    background: linear-gradient(120deg, rgba(77, 172, 73, 0.8), rgba(115, 191, 105, 0.8)) !important;
}

/* Selected row styles - lighter background */
.data-table-spot-prices tr.selected td {
    background: #2a2a2a !important;
}

.data-table-spot-prices tr.selected td:nth-child(1),
.data-table-spot-prices tr.timeline-current td:nth-child(1){
    background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%) !important;
}

.data-table-spot-prices tr.selected td.higher,
.data-table-spot-prices tr.timeline-current td.higher {
    background: linear-gradient(120deg, rgb(255, 50, 60), rgb(255, 90, 110)) !important;
}

.data-table-spot-prices tr.selected td.lower,
.data-table-spot-prices tr.timeline-current td.lower {
    background: linear-gradient(120deg, rgb(95, 190, 90), rgb(130, 210, 120)) !important;
}

/* Selected row hover - stronger background */
.data-table-spot-prices tr.selected:hover td {
    background: #3d3d3d !important;
}

.data-table-spot-prices tr.selected:hover td:nth-child(1) {
    background: linear-gradient(135deg, #4a4a4a 0%, #5a5a5a 100%) !important;
}

.data-table-spot-prices tr.selected:hover td.higher {
    background: linear-gradient(120deg, rgb(255, 80, 90), rgb(255, 120, 140)) !important;
}

.data-table-spot-prices tr.selected:hover td.lower {
    background: linear-gradient(120deg, rgb(110, 205, 105), rgb(145, 225, 135)) !important;
}