/* ============================= */
/* Base Dashboard Styles (Original) */
/* ============================= */

.tsc-dashboard {
    max-width: 1100px !important;
    margin: 20px auto !important;
    padding: 20px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.tsc-dashboard-tabs {
    display: flex !important;
    gap: 10px !important;
    border-bottom: 2px solid #ddd !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    flex-wrap: wrap; /* Allow wrapping on slightly larger screens if needed */
}

.tsc-dashboard-tabs a {
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: #555 !important;
    font-weight: 500 !important;
    transition: color 0.3s, background 0.3s !important;
    border-radius: 6px !important;
    white-space: nowrap; /* Prevent text wrapping inside a tab */
}

.tsc-dashboard-tabs a.active {
    background: #005f89 !important;
    color: #fff !important;
}

/* Recommended: Wrap your table in this div for better scrolling */
.tsc-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-bottom: 15px; /* Space below the table */
    width: 100%;
}

.tsc-dashboard-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    /* Removed direct overflow-x here, prefer wrapper */
}

.tsc-dashboard-table th,
.tsc-dashboard-table td {
    padding: 12px !important;
    border: 1px solid #e1e1e1 !important;
    font-size: 14px !important;
    text-align: left !important;
    white-space: nowrap; /* Prevent text wrapping, helps with horizontal scroll */
}

.tsc-dashboard-table th {
    background: #0073aa !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.tsc-dashboard-table tr:nth-child(even) {
    background: #f7f7f7 !important;
}

.tsc-dashboard-table tr:hover {
    background: #eef5f9 !important;
}

.tsc-pagination-link {
    display: inline-block !important;
    padding: 8px 12px !important;
    margin: 10px 5px 0 0 !important; /* Adjusted margin */
    text-decoration: none !important;
    color: #0073aa !important;
    border: 1px solid #ddd !important; /* Added border for better visibility */
    border-radius: 4px !important;
    font-size: 14px !important;
    transition: background 0.3s, color 0.3s !important;
}

.tsc-pagination-link:hover {
    background: #0073aa !important;
    color: #fff !important;
    border-color: #0073aa !important;
}

.tsc-dashboard-summary {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Align items to the top */
    width: 100% !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    margin-bottom: 25px !important; /* Increased bottom margin */
    padding: 15px !important; /* Add padding */
    background: #fff !important; /* Add background */
    border: 1px solid #e1e1e1 !important; /* Add border */
    border-radius: 6px !important; /* Add radius */
    box-sizing: border-box;
}

/* Style for a potential summary section container if needed */
.summary-section {
     flex: 1; /* Allow sections to grow */
     padding: 0 10px; /* Spacing between sections */
}
.summary-section:first-child {
    padding-left: 0;
}
.summary-section:last-child {
    padding-right: 0;
}


.tsc-dashboard-summary h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: left !important;
    margin-top: 0 !important; /* Reset margin */
    margin-bottom: 15px !important;
    width: 100% !important;
    border-bottom: 1px solid #eee; /* Add separator */
    padding-bottom: 8px; /* Space below separator */
}

.summary-item {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    font-size: 14px !important; /* Slightly increased base font size */
}

.summary-item .label {
    color: #555 !important;
    flex: 1 !important; /* Takes more space */
    padding-right: 10px !important;
    white-space: nowrap; /* Prevent label wrapping */
}

.summary-item .value {
    color: #2e7d32 !important;
    font-weight: 600 !important;
    text-align: right !important; /* Align value to right */
    flex: 0 0 auto !important; /* Takes only needed space */
    white-space: nowrap;
}


/* ============================= */
/* Responsive Styles */
/* ============================= */

/* Medium screens (Tablets) */
@media screen and (max-width: 768px) {
    .tsc-dashboard {
        margin: 15px !important;
        padding: 15px !important;
    }

    .tsc-dashboard-table th,
    .tsc-dashboard-table td {
        padding: 10px 8px !important; /* Reduce padding */
        font-size: 13px !important; /* Slightly smaller font */
    }

     /* Make summary sections stack earlier if needed */
     .tsc-dashboard-summary {
        flex-direction: column !important;
        align-items: stretch !important;
     }
     .summary-section {
        padding: 0 !important; /* Remove horizontal padding */
        margin-bottom: 15px; /* Add space between stacked sections */
     }
     .summary-section:last-child {
         margin-bottom: 0;
     }
     .tsc-dashboard-summary h3 {
         text-align: center !important;
     }

}

/* Small screens (Mobiles) */
@media screen and (max-width: 600px) {
    .tsc-dashboard-tabs {
        gap: 5px !important; /* Reduce gap */
        padding-bottom: 5px !important;
        margin-bottom: 15px !important;
        /* Enable horizontal scrolling for tabs if they overflow */
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        flex-wrap: nowrap; /* Disable wrapping when scrolling is active */
    }

    .tsc-dashboard-tabs a {
        padding: 8px 12px !important; /* Smaller padding */
        font-size: 14px !important;
        flex-shrink: 0; /* Prevent tabs from shrinking */
    }

    /* --- Table Horizontal Scroll --- */
    /* Option 1 (Recommended): Use the wrapper div */
    /* .tsc-table-wrapper is already styled for overflow-x */

    /* Option 2 (Fallback): Apply directly to table if wrapper not possible */
    /*
    .tsc-dashboard-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tsc-dashboard-table thead,
    .tsc-dashboard-table tbody,
    .tsc-dashboard-table tr {
       display: block;
    }
    */
    /* --- End Table Styles --- */


    .tsc-dashboard-table th,
    .tsc-dashboard-table td {
        padding: 8px 6px !important; /* Further reduce padding */
        font-size: 12px !important; /* Further reduce font size */
        white-space: nowrap !important; /* Crucial for horizontal scroll */
    }
}


/* Very small screens (Refine Summary & General Spacing) */
@media screen and (max-width: 500px) {
    .tsc-dashboard {
        margin: 10px !important;
        padding: 10px !important;
        border-radius: 4px !important; /* Slightly smaller radius */
    }

     /* Summary Stacking (Refining existing rule) */
    .tsc-dashboard-summary {
        flex-direction: column !important;
        align-items: stretch !important; /* Stretch items to full width */
        font-size: 14px !important; /* Base font size */
        margin-bottom: 20px !important; /* Space after stacked summary */
        padding: 10px !important; /* Reduce padding */
    }

    .tsc-dashboard-summary h3 {
       text-align: center !important; /* Center title */
       margin-bottom: 10px !important;
       font-size: 15px !important; /* Adjust heading size */
    }

    .summary-item {
        margin-bottom: 8px !important;
        font-size: 13px !important; /* Adjust item font size */
        padding-bottom: 5px;
        border-bottom: 1px solid #f0f0f0; /* Separator between items */
    }
    .summary-item:last-child {
        border-bottom: none; /* Remove border from last item */
        margin-bottom: 0;
    }

     .summary-item .label {
         /* Optional: Adjust flex basis if needed */
         white-space: normal; /* Allow labels to wrap if very long */
     }

     .summary-item .value {
         text-align: right !important; /* Keep value aligned right */
         flex: 1 !important; /* Allow value to take up remaining space */
         padding-left: 10px; /* Ensure space between label and value */
         white-space: normal; /* Allow values to wrap if very long */
     }

    .tsc-pagination-link {
        padding: 6px 10px !important;
        margin: 8px 3px 0 0 !important; /* Reduce margin */
        font-size: 13px !important;
    }
}