/* css/results.css */

/* --- Results Page Filters --- */
.results-filter {
    background-color: var(--bg-color, #fff);
    padding: 25px;
    border-radius: var(--border-radius-lg, 12px);
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens if needed */
    gap: 20px; /* Gap between filter items */
    align-items: flex-end; /* Align items to the bottom for consistent button height */
    box-shadow: var(--card-shadow, 0 5px 15px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--border-color, #dfe6e9);
}

.results-filter .form-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow form groups to take available space */
    min-width: 200px; /* Minimum width before wrapping */
}

.results-filter .form-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--primary-color, #0A4D68);
    font-size: 0.95rem;
}

.results-filter .form-control { /* Applies to select elements */
    padding: 12px 15px;
    border: 1px solid var(--border-color, #ccc); /* Slightly more visible border */
    border-radius: var(--border-radius-md, 8px);
    font-size: 1rem;
    width: 100%;
    background-color: var(--bg-color, #fff);
    transition: border-color var(--transition-speed, 0.3s) ease, box-shadow var(--transition-speed, 0.3s) ease;
    appearance: none; /* Remove default browser styling for select */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334495e'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1em;
    padding-right: 40px; /* Space for custom arrow */
}
.results-filter .form-control:focus {
    border-color: var(--primary-color, #0A4D68);
    box-shadow: 0 0 0 3px rgba(10, 77, 104, 0.2); /* Softer focus ring */
    outline: none;
}
.results-filter .form-control:disabled {
    background-color: var(--neutral-bg-color, #e9ecef);
    cursor: not-allowed;
}


.results-filter .btn { /* View Results Button */
    align-self: flex-end;
    padding: 12px 25px;
    font-weight: 500; /* Slightly less bold than primary action buttons */
}

/* --- Results Table Container and Messages --- */
#results-table-container { /* The div that will hold the table or messages */
    margin-top: 30px; /* Space below filters if table is directly under */
}

#results-table-container .placeholder-text,
#results-table-container .loading-text,
#results-table-container .error-text {
    text-align: center;
    font-style: italic;
    color: #6c757d; /* Softer gray */
    padding: 35px 20px; /* More padding */
    border: 1px dashed var(--border-color, #dfe6e9);
    border-radius: var(--border-radius-md, 8px);
    background-color: var(--light-bg-color, #f8f9fa);
    width: 100%;
    font-size: 1.05rem; /* Slightly larger placeholder text */
}
#results-table-container .error-text {
    color: var(--secondary-color, #FF7B54);
    border-color: var(--secondary-color, #FF7B54);
    font-weight: 500;
}

/* --- Results Table Styling --- */
.table-responsive { /* Wrapper div for the table for horizontal scrolling */
    overflow-x: auto; /* Enable horizontal scroll for table */
    /* margin-top: 0; (already on #results-table-container) */
    border-radius: var(--border-radius-md, 8px);
    box-shadow: var(--card-shadow, 0 5px 15px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--border-color, #dfe6e9);
    max-height: 70vh; /* Constrain height to enable internal scroll for sticky header */
    /* overflow-y: auto; // Only if max-height is reached and content overflows */
}

.results-table {
    width: 100%;
    min-width: 700px; /* Minimum width before horizontal scroll appears */
    border-collapse: collapse; 
}

.results-table th,
.results-table td {
    padding: 14px 16px; /* Adjusted padding */
    text-align: left;
    font-size: 0.9rem; /* Slightly smaller for denser table */
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color, #e0e0e0); /* Lighter bottom border */
}
/* Add right borders for better separation, remove for last child */
.results-table th:not(:last-child),
.results-table td:not(:last-child) {
    border-right: 1px solid var(--border-color, #e0e0e0);
}


.results-table thead th { 
    position: sticky;
    top: 0; 
    background-color: var(--primary-color, #0A4D68); /* Changed to primary for more contrast */
    color: var(--light-text-color, #fdfdfd) !important;
    z-index: 10; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* More spacing */
    font-size: 0.8rem; /* Slightly smaller header text */
    border-bottom: 2px solid var(--primary-color-dark, #083D53); /* Stronger border under sticky header */
}
/* Ensure vertical borders in header match background for seamless look */
.results-table thead th:not(:last-child) {
    border-right: 1px solid var(--primary-color-dark, #083D53); 
}


.results-table tbody tr:nth-child(even) {
    background-color: var(--light-bg-color, #f8f9fa);
}
.results-table tbody tr:hover {
    background-color: #e2e9f0; /* Softer hover color */
}

/* Specific Column Styling */
.results-table .rank-col { 
    text-align: center; 
    font-weight: 600; 
    color: var(--accent-color, #00A896); 
    width: 7%; /* Slightly less width */
}
.results-table .percentage-col { 
    font-weight: bold; 
    color: var(--primary-color, #0A4D68); 
    width: 12%; /* Slightly less width */
    text-align: right; /* Align percentages right */
    padding-right: 20px !important; /* Ensure space for right alignment */
}
.results-table .name-col { 
    font-weight: 500; 
    min-width: 150px; /* Ensure name column has enough space */
}
.results-table td[data-label="Total"] { /* Target total column if using data-label */
    font-weight: 500;
    text-align: right;
    padding-right: 20px !important;
}


/* --- Responsive Adjustments for Results Page --- */
@media (max-width: 768px) {
    .table-responsive {
        max-height: 65vh; 
    }
    .results-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 15px; /* Reduced gap for mobile */
    }
    .results-filter .form-group {
        width: 100%;
        min-width: unset; /* Allow to shrink fully */
    }
    .results-filter .btn {
        width: 100%;
        margin-top: 10px;
    }
    .results-table th,
    .results-table td {
        padding: 10px 8px; /* Tighter padding */
        font-size: 0.85rem; /* Smaller font */
    }
    .results-table thead th {
        font-size: 0.75rem;
    }
     .results-table .name-col { 
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .results-table {
        min-width: 500px; /* Ensure some horizontal scroll even on very small */
    }
    .results-table th,
    .results-table td {
        font-size: 0.8rem;
        padding: 8px 6px;
    }
    .results-table thead th {
        font-size: 0.7rem;
    }
     .results-table .name-col { 
        min-width: 100px;
    }
     .results-table .rank-col, .results-table .percentage-col {
        width: auto; /* Let content decide more on small screens */
        min-width: 50px;
     }
}

/* Ensure dropdowns are visible on mobile if previously hidden by other rules */
@media (max-width: 768px) {
    .results-filter #class-select,
    .results-filter #test-select {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important; 
        position: static !important;
        /* Add any other styles needed to ensure they appear as intended */
    }
}