/* Reset and Base Styles */


* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}





body {


    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;


    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


    min-height: 100vh;


    padding: 20px;


    color: #333;


}





.container {


    max-width: 1400px;


    margin: 0 auto;


    background: white;


    border-radius: 12px;


    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);


    overflow: hidden;


}





/* Header */


header {


    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


    color: white;


    padding: 0 40px;

    text-align: center;

    display: flex;

    justify-content: space-between;

    align-items: center;


    height: 93px;

    overflow: hidden;

}





header h1 {


    font-size: 2.5rem;


    margin-bottom: 10px;


    font-weight: 700;


}





.subtitle {


    font-size: 1.1rem;


    opacity: 0.9;


}




.nav-links {

    display: flex;

    gap: 12px;

    align-items: center;

    flex-wrap: wrap;

}




/* Summary Cards */


.summary-cards {


    display: grid;


    grid-template-columns: repeat(5, 1fr);


    gap: 15px;


    padding: 20px 40px;


    background: #f8f9fa;


}





.card {


    background: white;


    border-radius: 8px;


    padding: 15px;


    display: flex;


    align-items: center;


    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);


    transition: transform 0.2s, box-shadow 0.2s;


}





.card:hover {


    transform: translateY(-5px);


    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);


}





.card-icon {


    font-size: 2rem;


    margin-right: 15px;


    opacity: 0.8;


}





.card-value {


    font-size: 1.5rem;


    font-weight: 700;


    color: #667eea;


    margin-bottom: 3px;


}





.card-label {


    font-size: 0.75rem;


    color: #666;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





/* Filters */


.filters {


    padding: 40px;


    background: white;


    border-top: 1px solid #e0e0e0;


}





.filters h2 {


    margin-bottom: 20px;


    color: #333;


    font-size: 1.5rem;


}





.filter-group {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


    gap: 15px;


    align-items: end;


}





.filter-item {


    display: flex;


    flex-direction: column;


}





.filter-item label {


    margin-bottom: 8px;


    font-weight: 600;


    color: #555;


    font-size: 0.9rem;


}





.filter-item select,


.filter-item input {


    padding: 10px;


    border: 2px solid #e0e0e0;


    border-radius: 6px;


    font-size: 1rem;


    transition: border-color 0.2s;


}





.filter-item select:focus,


.filter-item input:focus {


    outline: none;


    border-color: #667eea;


}





.filter-actions {


    display: flex;


    gap: 10px;


    flex-wrap: wrap;


}





/* Buttons */


.btn {


    padding: 10px 20px;


    border: none;


    border-radius: 6px;


    font-size: 1rem;


    font-weight: 600;


    cursor: pointer;


    transition: all 0.2s;


}





.btn-primary {


    background: #667eea;


    color: white;


}





.btn-primary:hover {


    background: #5568d3;


    transform: translateY(-2px);


    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);


}





.btn-secondary {


    background: #6c757d;


    color: white;


}





.btn-secondary:hover {


    background: #5a6268;


}





.btn-refresh {


    background: #28a745;


    color: white;


}





.btn-refresh:hover {


    background: #218838;


}




/* Navigation Button Styles - Pill-shaped with high contrast */

.nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 24px;

    border: none;

    border-radius: 25px;

    font-size: 0.95rem;

    font-weight: 600;

    text-decoration: none;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    white-space: nowrap;

    min-height: 44px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}



.nav-btn-default {

    background: #ffffff;

    color: #333;

}



.nav-btn-default:hover {

    background: #f0f0f0;

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

}



.nav-btn-admin {

    background: #dc2626;

    color: white;

}



.nav-btn-admin:hover {

    background: #b91c1c;

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);

}



.nav-btn-logout {

    background: #2d3748;

    color: white;

}



.nav-btn-logout:hover {

    background: #1a202c;

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(45, 55, 72, 0.4);

}



.nav-btn-refresh {

    background: #10b981;

    color: white;

}



.nav-btn-refresh:hover {

    background: #059669;

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);

}



.user-info {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 20px;

    background: #ffffff;

    border-radius: 25px;

    color: #333;

    font-size: 0.9rem;

    font-weight: 600;

    min-height: 44px;

    text-align: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}




/* Loading Indicator */


.loading {


    text-align: center;


    padding: 40px;


    display: none;


}





.loading.active {


    display: block;


}





.spinner {


    border: 4px solid #f3f3f3;


    border-top: 4px solid #667eea;


    border-radius: 50%;


    width: 50px;


    height: 50px;


    animation: spin 1s linear infinite;


    margin: 0 auto 20px;


}





@keyframes spin {


    0% { transform: rotate(0deg); }


    100% { transform: rotate(360deg); }


}





/* Error Message */


.error-message {


    background: #f8d7da;


    color: #721c24;


    padding: 15px 20px;


    margin: 20px 40px;


    border-radius: 6px;


    border-left: 4px solid #dc3545;


    display: flex;


    align-items: center;


    gap: 10px;


}





.error-icon {


    font-size: 1.5rem;


}





/* Data Section */


.data-section {


    padding: 40px;


}





.data-section h2 {


    margin-bottom: 20px;


    color: #333;


    font-size: 1.5rem;


}





.record-count {


    font-size: 1rem;


    font-weight: normal;


    color: #666;


}





.table-container {


    overflow-x: auto;


    border-radius: 8px;


    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);


}





table {


    width: 100%;


    border-collapse: collapse;


    background: white;


}





thead {


    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);


    color: white;


}





th {


    padding: 15px;


    text-align: left;


    font-weight: 600;


    font-size: 0.9rem;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





tbody tr {


    border-bottom: 1px solid #e0e0e0;


    transition: background-color 0.2s;


}





tbody tr:hover {


    background-color: #f8f9fa;


}





td {


    padding: 15px;


    font-size: 0.95rem;


}





tbody tr:last-child {


    border-bottom: none;


}





/* Footer */


footer {


    background: #f8f9fa;


    padding: 20px 40px;


    text-align: center;


    color: #666;


    border-top: 1px solid #e0e0e0;


}





/* Responsive Design */


@media (max-width: 768px) {


    header {

        padding: 0 20px;

        height: auto;

        min-height: 93px;

        flex-direction: column;

        gap: 15px;

        padding-top: 15px;

        padding-bottom: 15px;

    }



    .nav-links {

        flex-direction: column;

        width: 100%;

        gap: 8px;

    }



    .nav-btn {

        width: 100%;

        padding: 12px 24px;

        font-size: 0.9rem;

        border-radius: 25px;

    }



    .user-info {

        width: 100%;

        padding: 12px 20px;

        font-size: 0.85rem;

        border-radius: 25px;

    }



    header h1 {


        font-size: 1.8rem;


    }





    .summary-cards {


        grid-template-columns: 1fr;


        padding: 20px;


    }





    .filters {


        padding: 20px;


    }





    .filter-group {


        grid-template-columns: 1fr;


    }





    .data-section {


        padding: 20px;


    }





    .card-icon {


        font-size: 2rem;


    }





    .card-value {


        font-size: 1.5rem;


    }


}





/* Empty State */


.empty-state {


    text-align: center;


    padding: 60px 20px;


    color: #666;


}





.empty-state-icon {


    font-size: 4rem;


    margin-bottom: 20px;


    opacity: 0.5;


}





.empty-state h3 {


    margin-bottom: 10px;


    color: #333;


}