:root {
        --primary-color: #667eea;
        --secondary-color: #764ba2;
        --success-color: #28a745;
        --info-color: #17a2b8;
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
    }

    #noon-logo{
        display:block;width: 100%;height:auto;max-width: 250px; margin: 0 auto;
    } 

    #membersTable_wrapper .btn-group>.btn{
        position: absolute !important;
        top: -40px !important;
        right: 0 !important;
    }

    .custom-nav .navbar-nav .nav-link{color:#ffffff}
    .custom-nav .navbar-nav .nav-link.active, .custom-nav .navbar-nav .show>.nav-link{color:#FFD700}
    .navbar-light .navbar-toggler {background-color: #ffffff;}
    .nav_container {background-color: #ffffff;}
    .custom-nav .navbar-nav .nav-link:focus, .custom-nav .navbar-nav .nav-link:hover{color:#FFD700}

    .member_res .dt-buttons{float:right!important; position: absolute!important;
    top: -40px!important;
    right: 0!important;}
    .member_res .dataTables_length{ float: left!important; margin-top:50px!important; text-align:left!important;}

    body {
        font-family: 'Inter', sans-serif !important;
        background: #ffffff;
        min-height: 100vh;
        
    }
    .container{
        max-width: 1400px;
        margin: 20px auto;
        padding: 20px;
        border-radius: 7px;
        background-color: #fff;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
    }

    .dashboard-container {
        background: white;
        /* border-radius: 20px; */
        /* box-shadow: 0 20px 40px rgba(0,0,0,0.1); */
        overflow: hidden;
        margin: 0 0 2rem 0;
    }

    .dashboard-header {
        background: #ffffff;
        color: #263346;
        padding: 2rem 2rem 0 2rem;
        text-align: center;
    }

    .dashboard-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .dashboard-header .lead {
        font-size: 1.125rem;
        color: #212121;
        max-width: 600px;
        margin: 0 auto 40px;
        line-height: 1.6;
    }

    .filter-section {
        background: #f8f9fa;
        padding: 2rem;
        /* border-bottom: 1px solid #dee2e6; */
    }

    .stat-card {
        width: 100%;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 15px;
        /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); */
        transition: all 0.3s ease;
        border:1px solid #ffffff;
        border-left: 3px solid #ffd700;
    }

    .stat-card:hover {
        /* transform: translateY(-5px); */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }


    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 1.3rem;
        color: #212121;
        background-color: #2121211c;
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        color:#212121
    }

    .stat-label {
        font-size: 1rem;
        color: #9f9f9f;
        font-weight: 500;
    }

    .chart-container {
        position: relative;
        height: 350px;
        margin: 1rem 0;
    }

    .table-container {
        background: white;
        border-radius: 15px;
        /* box-shadow: 0 5px 20px rgba(0,0,0,0.08); */
        overflow: hidden;
        /* margin: 2rem 0; */
    }

    .table-header {
        color: #263346;
        
    }

    .table-header h3 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

    
    .dataTables_wrapper .dataTables_length{text-align: left;}
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_filter input {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 0.5rem 1rem;
        transition: border-color 0.3s ease;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .btn-custom {
        background:#262626;
        border: 2px solid #262626;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: white;
        transition: all 0.3s ease;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .btn-custom:hover {
        /* transform: translateY(-2px); */
        box-shadow: 0 5px 15px 0px #26262663;
        color: white;
    }

    .btn-outline-custom {
        border: 2px solid #262626;
        color: #262626;
        background: transparent;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-size: 14px;
        letter-spacing: 0.5px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-outline-custom:hover {
        background-color: #262626;
        color: white;
        /* transform: translateY(-2px); */
    }

    .metric-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        /* margin: 2rem 0; */
    }

    .metric-card {
        background-color: #f0f0f0;
        border-radius: 14px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    .metric-card h4 {
        margin: 0 0 0.5rem 0;
        font-size: 2rem;
        font-weight: bold;
        color: #212121;
    }

    .metric-card p {
        margin: 0;
        font-size: 0.8rem;
        color: #212121;
        /* text-transform: uppercase; */
        letter-spacing: 1px;
        font-weight: 600;
    }

    .metric-highlight {
        background-color: #262626;
        border-radius: 10px;
        padding: 1rem;
    }

    .metric-highlight strong {
        color: #212121;
        font-weight: 600;
    }

    .metric-highlight span {
        color: #959595;
        font-weight: 500;
    }

    .ranking-list {
        background: #262626;
        border-radius: 14px;
        padding: 1.5rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }

    .ranking-list ol {
        margin: 0;
        padding-left: 1.5rem;
    }

    .ranking-list li {
        padding: 0.5rem 0;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .ranking-list li:first-child {
        color: #ffd700;
        font-weight: 700;
    }

    .ranking-list li:nth-child(2) {
        color: #c0c0c0;
        font-weight: 600;
    }

    .ranking-list li:nth-child(3) {
        color: #cd7f32;
        font-weight: 600;
    }


    .comparison-table .table {
        margin-bottom: 0;
    }

    .comparison-table .table th {
        background-color: #262626;
        color: white;
        font-weight: bold;
        font-size: 1rem;
        padding: 10px 15px;
        border-color: transparent;
    }

    .comparison-table .table td {
        text-align: center;
        padding: 0.75rem 0.5rem;
        vertical-align: middle;
        border-color: #e9ecef;
        background-color: #ffffff;
    }

    .comparison-table .table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .badge-custom {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
    }

    .loading-spinner {
        display: none;
        text-align: center;
        padding: 2rem;
    }

    .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.3em;
    }

    /* Notification Messages */
    .alert {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: none;
    }

    .alert-success {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
    }

    .alert-danger {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
    }

    .btn-close {
        background: none;
        border: none;
        font-size: 1.2rem;
        opacity: 0.7;
    }

    .btn-close:hover {
        opacity: 1;
    }

    /* Button improvements */
    .btn-custom, .btn-outline-custom {
        transition: all 0.3s ease;
    }

    .btn-custom:active, .btn-outline-custom:active {
        transform: translateY(1px);
    }
    .form-label{
        color: #212121;
        font-size: 14px;
        font-weight: 400;
    }
    .form-control{
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #212121;
        padding: 0.75rem 1rem;
    }
    .export-btn{
        background-color: #FFD700;
        border: 2px solid #FFD700;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: #212121;
        transition: all 0.3s ease;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .export-btn:hover{
        background-color: #212121;
        border: 2px solid #212121;
        color: #ffffff;
    }
    .print-btn{
        background-color: #212121;
        border: 2px solid #212121;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: #ffffff;
        transition: all 0.3s ease;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .print-btn:hover{
        background-color: #FFD700;
        border: 2px solid #FFD700;
        color: #212121;
    }
    .h3-title{
        font-weight: 700;
        margin-bottom: 3rem;
        font-size: 1.5rem;
        line-height: 2.5rem;
        color: #263346;
    }
    div.dataTables_wrapper{
        background-color: #ffffff !important;
        padding: 0 !important;
    }
    #circlesTable_wrapper{
        background-color: #f6f6f6 !important;
        border-radius: 14px !important;
        padding: 20px !important;
    }
    div.comparisonTable_wrapper{
        background-color: #ffffff !important;
        border-radius: 14px !important;
        padding: 20px !important;
    }
    /* .dt-buttons{
        width:50%;
        float: left;
    } */
    .buttons-custom{text-align: right; margin-bottom: 20px;}
    .btn-group-vertical>.btn, .btn-group>.btn {flex:none}
    #circlesTable thead th{
        background-color: #262626;
        color: white;
        font-weight: bold;
        font-size: 1rem;
        padding: 10px 15px;
    }
    table.detailed_circle_table thead th{
        background-color: #262626 !important;
        color: white;
        font-weight: bold;
        font-size: 1rem;
        padding: 10px 15px;
    }
    table.circle-comparison-table thead th{
        background-color: #262626 !important;
        color: white;
        font-weight: bold;
        font-size: 1rem;
        padding: 10px 15px;
    }
    #circlesTable thead th:first-child, #comparisonTable thead th.border-left-custom{border-radius: 14px 0 0 0;}
    #circlesTable thead th:last-child, #comparisonTable thead th.border-right-custom{border-radius: 0 14px 0 0;}
    #circlesTable tbody td{
        padding: 10px 15px;
        background-color: #ffffff;
        font-size: 14px;
    }
        #circlesTable tbody tr:last-child td:first-child{
        border-radius: 0 0 0 14px;
        }
        #circlesTable tbody tr:last-child td:last-child{
        border-radius: 0 0 14px 0;
        }
        
    .dashboard-container{
            overflow: visible !important;
    }
    .sticky-section {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 0; /* stick to top */
    background: #f8f9fa; /* match section background */
    z-index: 999; /* ensure it's above other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* subtle shadow */
    text-align: left !important;
    }
    .winner-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 3px solid #ffd700;
    }
    .winner-rank {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 15px;
    }
    .winner-email {
        font-size: 1rem;
        color: #666;
        margin-bottom: 15px;
        font-weight: 500;
        word-break: break-all;
    }
    .winner-points {
        font-size: 1.2rem;
        font-weight: bold;
        color: #2c3e50;
    }
    td span.bg-primary{
            background-color: #0d6efd33 !important;
            color: #0d6efd;
    }
    td span.bg-success{
        background-color: #1987542b !important;
        color: #198754;
    }
    td span.bg-info{
        background-color: #0dcaf026 !important;
        color: #0dcaf0; 
    }
        td span.bg-warning{
        background-color: #a68d0621 !important;
        color: #a68d06; 
        }

        td span.bg-danger {
        background-color: #dc354526 !important;
        color: #dc3545; 
        }
        .bg-white-custom{
        background: #ffffff;
        border-radius: 14px;
        padding: 25px;
        margin-bottom: 25px;
        text-align: center;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        }

        .bg-grey-custom{
        background: #f6f6f6;
        border-radius: 14px;
        padding: 25px;
        margin-bottom: 25px;
        text-align: center;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        }
        .card-body {
        flex: 1 1 auto;
        padding: 0 0;
    }

    #circlesTable_wrapper div.dataTables_info{
        text-align: left !important;
    }
    #membersTable_wrapper div.dataTables_length, div.membersTable_length{
        text-align: left !important;
    }

    .table-responsive.member_res div.membersTable_length {text-align: left !important;}

    @media (max-width: 991px){
        .sticky-section .text-end{
            margin-top: 20px;
        }
        .btn-custom, .btn-outline-custom{margin-top: 20px;}
        .stat-value, .metric-card h4 {font-size: 1.5rem;}
        .export-btn, .print-btn {padding: 10px;}
        .sticky-section .text-end{text-align: left !important;}
    }
    @media (max-width: 768px) {
        .dashboard-header h1 {
            font-size: 1.8rem;
        }
        
        .stat-value {
            font-size: 2rem;
        }
        
        .chart-container {
            height: 250px;
        }

        .col-md-4.d-flex {
            flex-direction: column;
            gap: 0.5rem;
        }

        .col-md-4.d-flex .btn {
            width: 100%;
        }
        .export-btn, .print-btn {padding: 10px;}
        .h3-title{font-size: 1.3rem; line-height: 1.5;}
    }

    /* Loading overlay styles for AJAX navigation */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loading-spinner {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .loading-spinner p {
        margin: 0;
        color: #666;
        font-weight: 500;
    } 

    @media (max-width: 480px) {
        div.dataTables_wrapper div.dataTables_length{text-align: left;}
        #circlesTable_wrapper{padding: 7px !important;}
        .dataTables_length label{
            white-space: pre-wrap;
            font-size: 12px;
        }
        #circlesTable_filter label{
            white-space: pre-wrap;
            font-size: 12px;
        }
        div.dataTables_wrapper div.dataTables_filter input{font-size: 12px;}
    }