html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Better spacing inside rows */
#winnersTable tbody td {
    padding: 12px 10px !important;
    vertical-align: middle;
}

/* Add soft border between rows */
#winnersTable tbody tr {
    border-bottom: 2px solid #f1f1f1 !important;
}

/*Hover highlight*/
#winnersTable tbody tr:hover {
    background-color: #ffd3d3 !important;
    cursor: pointer;
}

/* Improve header look */
#winnersTable thead th {
    background: #fe6564;
    color: white;
    text-align: center;
    font-weight: 600;
    padding: 12px 8px;
}

/*---*/

#weeklyWinnersTable tbody td {
    padding: 12px 10px !important;
    vertical-align: middle;
}

/* Add soft border between rows */
#weeklyWinnersTable tbody tr {
    border-bottom: 2px solid #f1f1f1 !important;
}

    /*Hover highlight*/
    #weeklyWinnersTable tbody tr:hover {
        background-color: #ffd3d3 !important;
        cursor: pointer;
    }

/* Improve header look */
#weeklyWinnersTable thead th {
    background: #fe6564;
    color: white;
    text-align: center;
    font-weight: 600;
    padding: 12px 8px;
}

/*-----*/

#monthlyWinnersTable tbody td {
    padding: 12px 10px !important;
    vertical-align: middle;
}

/* Add soft border between rows */
#monthlyWinnersTable tbody tr {
    border-bottom: 2px solid #f1f1f1 !important;
}

    /*Hover highlight*/
    #monthlyWinnersTable tbody tr:hover {
        background-color: #ffd3d3 !important;
        cursor: pointer;
    }

/* Improve header look */
#monthlyWinnersTable thead th {
    background: #fe6564;
    color: white;
    text-align: center;
    font-weight: 600;
    padding: 12px 8px;
}

/* Customer image rounded and clean */
.custImage {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s ease;
}

     Image hover zoom 
    .custImage:hover {
        transform: scale(1.05);
    }



/* -------------------------------
   FIXED RESPONSIVE BREAKPOINTS
-------------------------------- */

/* Mobile – 768px */
@media (max-width: 768px) {

    .leaderboard-container {
        padding: 0.75rem;
        margin: 0.5rem auto;
        margin-top: 100px; /* FIXED */
    }

    .leaderboard-header {
        padding: 0.75rem;
        margin-bottom: 1rem;
        flex-direction: column;
        text-align: center;
    }

    .leaderboard-title {
        font-size: 1.25rem;
    }

    .leaderboard-logo {
        width: 60px;
    }

    /* Tabs scroll on mobile */
    .tabs-container {
        overflow-x: auto;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .nav-tab {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Filter controls */
    .filter-controls {
        padding: 0.875rem;
    }

    .filter-group input,
    .filter-group .btn {
        width: 100%;
        font-size: 0.95rem;
        padding: 0.75rem;
    }

    /* Date nav */
    .date-nav {
        width: 100%;
        padding: 0.5rem;
        gap: 0.25rem;
    }

        .date-nav button {
            padding: 0.6rem 0.75rem;
            font-size: 0.8rem;
        }

    /* Table */
    .leaderboard-table {
        width: 10%;
    }

        .leaderboard-table th,
        .leaderboard-table td {
            padding: 0.75rem 0.5rem;
            font-size: 0.8rem;
        }

    .custImage {
        max-width: 50px;
        max-height: 50px;
    }

    /* Back to top button */
    #back-top-btn {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
    }
}

/* 480px screens */
@media (max-width: 480px) {

    .leaderboard-title {
        font-size: 1.1rem;
    }

    .nav-tab {
        padding: 0.65rem 0.85rem;
        font-size: 0.8rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.6rem 0.35rem;
        font-size: 0.75rem;
    }

    .custImage {
        max-width: 40px;
        max-height: 40px;
    }
}

/* Input zoom fix */
@media screen and (max-width: 768px) {
    input[type="text"], select {
        font-size: 16px !important; /* FIXED */
    }
}