/* dashboard-responsive.css */
/* Additional styles for responsive design and table formatting */

/* Table container padding with box styling */
.table-container {
    padding: 16px;
    border: 1px solid #30363d;
    border-radius: 6px;
    background-color: transparent;
}

/* Add extra top padding for earnings and payouts */
.earnings-container,
.payouts-container {
    padding-top: 24px;
}

/* Center tables horizontally */
.table-container table {
    width: 100%;
    margin: 0 auto;
}

/* Miner status container styling */
.miner-status-container {
    border: 1px solid #30363d;
    border-radius: 6px;
    margin-top: 32px;
}

/* Earnings and payouts containers */
.earnings-container,
.payouts-container {
    border: 1px solid #30363d;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

/* Full-width grey lines under table headers */
.table-container h3 {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid #30363d;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.table-header-flex {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid #30363d;
    padding-bottom: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-header-flex h3 {
    margin: 0;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.summary-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

/* Responsive design for pool status header */
@media (max-width: 1200px) {
    .pool-status {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .pool-status {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .pool-status .stat-item {
        flex-wrap: wrap;
    }
    
    .grid-top {
        grid-template-columns: 1fr;
    }
    
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .chart-grid {
        grid-template-columns: 1fr;
    }
    
    .tables-grid {
        grid-template-columns: 1fr;
    }
    
    #miner-status-header-wrapper {
        flex-direction: column;
        gap: 12px !important;
    }
    
    #miner-status-header-wrapper > div {
        width: 100%;
    }
    
    .search-input {
        width: 100%;
    }
    
    .table-header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .summary-inline {
        width: 100%;
        justify-content: flex-start;
    }
    
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 8px 4px;
    }
}

@media (max-width: 480px) {
    .pool-status {
        grid-template-columns: 1fr;
    }
    
    .stat-item {
        flex-direction: column;
        gap: 4px;
    }
    
    .pool-label {
        min-width: auto;
    }
    
    #miner-status-header-wrapper {
        flex-direction: column;
    }
    
    table {
        font-size: 0.8rem;
    }
    
    th, td {
        padding: 6px 2px;
    }
    
    .miner-col-name {
        min-width: 100px;
    }
}