/* ================================================================
   FUTURISTIC KICKER THEME - Subtle Professional Version
   Design Language: Modern Dark Theme with Consistent Accents
   Colors: Muted Teal (#3a9d88) and Blue (#0088ff) to match start_game.html
   ================================================================ */

/* ==================== FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

/* ==================== BASE & BACKGROUNDS ==================== */
body {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a24 50%, #0f0f0f 100%);
    color: #d0d0d0;
}

.content-wrapper {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a24 50%, #0f0f0f 100%);
    position: relative;
}

/* Very subtle animated background */
.content-wrapper::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(0, 255, 136, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 136, 255, 0.02) 0%, transparent 50%);
    animation: drift 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes drift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 30px);
    }
}

.content-wrapper>* {
    position: relative;
    z-index: 1;
}

/* ==================== TYPOGRAPHY ==================== */
/* Only main headings get Orbitron - keep body text normal */
.content-header h1,
.card>.card-header h3,
.card>.card-header h5 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: #ffffff;
}

/* Normal text stays readable */
body,
p,
.card-body,
.table,
.form-control,
label {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.875rem;
    /* Keep AdminLTE default size */
}

h1 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

.breadcrumb {
    background: rgba(30, 30, 40, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 6px;
}

.breadcrumb-item a {
    color: #3a9d88;
    /* Muted teal */
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: #4aae99;
    /* Lighter teal on hover */
}

.breadcrumb-item.active,
.breadcrumb-item+.breadcrumb-item::before {
    color: #888;
}

/* ==================== CARDS ==================== */
.card {
    background: rgba(25, 25, 35, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* More subtle border */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: rgba(58, 157, 136, 0.15);
    /* Very subtle teal on hover */
}

.card-header {
    background: rgba(20, 20, 30, 0.95);
    border-bottom: 1px solid rgba(58, 157, 136, 0.1);
    /* More subtle */
    color: #b8b8b8;
    /* Softer color */
}

.card-header h3,
.card-header h5 {
    margin: 0;
    color: #b8b8b8;
    /* Softer gray */
    font-size: 0.95rem;
    /* Made slightly smaller */
    font-weight: 600;
    /* Less bold */
}

.card-body {
    color: #d0d0d0;
}

.card-footer {
    background: rgba(20, 20, 30, 0.95);
    border-top: 1px solid rgba(58, 157, 136, 0.1);
    /* More subtle */
}

.card.collapsed-card .card-header {
    border-bottom: none;
}

/* ==================== INFO BOXES ==================== */
.info-box {
    background: rgba(30, 35, 45, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(58, 157, 136, 0.25);
    /* Muted teal border */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(58, 157, 136, 0.1);
    /* Muted teal glow */
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 30px rgba(58, 157, 136, 0.2);
    /* Muted teal glow */
    border-color: rgba(58, 157, 136, 0.4);
    /* Muted teal */
}

.info-box-icon {
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    /* Add glow to icons */
}

.info-box-text,
.info-box-number {
    color: #ffffff !important;
    font-weight: 600;
    /* Make text bolder */
}

.info-box-content {
    color: #ffffff !important;
}

.info-box-content span {
    color: #ffffff !important;
}

/* ==================== TABLES ==================== */
.table {
    color: #d0d0d0;
}

.table thead th {
    background: rgba(20, 20, 30, 0.95);
    color: #3a9d88;
    /* Muted teal */
    border-bottom: 1px solid rgba(58, 157, 136, 0.3);
    /* Muted teal */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.table tbody tr {
    background: rgba(25, 25, 35, 0.5);
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(58, 157, 136, 0.08);
    /* Muted teal */
    transform: translateX(3px);
}

.table tbody td {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

/* ==================== BUTTONS ==================== */
.btn {
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    /* Keep normal size */
}

.btn-default,
.btn-primary {
    background: rgba(58, 157, 136, 0.6) !important;
    /* Muted teal */
    border: 1px solid #3a9d88;
    /* Muted teal */
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(58, 157, 136, 0.2);
    /* Muted teal */
}
.btn-primary:hover {
    color: #fff;
    background-color: rgba(58, 157, 136, 0.6) !important;
    border-color: rgba(58, 157, 136, 0.6) !important;
}
.btn-outline-primary {
    color: rgba(58, 157, 136, 0.6) !important;
    border-color: rgba(58, 157, 136, 0.6) !important;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: rgba(58, 157, 136, 0.6) !important;
    border-color: rgba(58, 157, 136, 0.6) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0 rgba(58, 157, 136, 0.6) !important;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: rgba(58, 157, 136, 0.6) !important;
    background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: rgba(58, 157, 136, 0.6) !important;
    border-color: rgba(58, 157, 136, 0.6) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}


.btn-default:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #4aae99, #3a9d88);
    /* Muted teal */
    box-shadow: 0 4px 10px rgba(58, 157, 136, 0.3);
    /* Muted teal */
    transform: translateY(-1px);
    color: #ffffff;
}

/* Specifically style the What Say You button in info box */
.info-box .btn-default {
    background: linear-gradient(135deg, #3a9d88, #2d8a6f) !important;
    border: 1px solid #3a9d88 !important;
    color: #ffffff !important;
}

.info-box .btn-default:hover {
    background: linear-gradient(135deg, #4aae99, #3a9d88) !important;
    color: #ffffff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: 1px solid #e74c3c;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.2);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ec7063, #d84335);
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
}

.btn-success {
    background: linear-gradient(135deg, #3a9d88, #2d8a6f);
    /* Muted teal */
    border: 1px solid #3a9d88;
    /* Muted teal */
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(58, 157, 136, 0.2);
    /* Muted teal */
}

.btn-success:hover {
    background: linear-gradient(135deg, #4aae99, #3a9d88);
    /* Muted teal */
    box-shadow: 0 4px 10px rgba(58, 157, 136, 0.3);
    /* Muted teal */
    transform: translateY(-1px);
    color: #ffffff;
}

.btn-info {
    background: linear-gradient(135deg, #3498db, #2980b9);
    border: 1px solid #3498db;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}

.btn-info:hover {
    background: linear-gradient(135deg, #5dade2, #3a9dd6);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    transform: translateY(-1px);
}

.btn-outline-danger {
    border: 2px solid #e74c3c;
    color: #e74c3c;
    background: transparent;
}

.btn-outline-danger:hover {
    background: #e74c3c;
    color: #ffffff;
}

.btn-tool {
    color: #3a9d88;
    /* Muted teal */
}

.btn-tool:hover {
    color: #4aae99;
    /* Muted teal */
}

/* ==================== FORMS ==================== */
.form-control,
.form-select,
select.form-control {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    /* Keep normal size */
}

.form-control:focus,
.form-select:focus,
select.form-control:focus {
    background: rgba(20, 20, 30, 0.8);
    border-color: #3a9d88;
    /* Muted teal */
    box-shadow: 0 0 0 0.2rem rgba(58, 157, 136, 0.15);
    /* Muted teal */
    color: #ffffff;
}

.form-control option {
    background: #1a1a24;
    color: #ffffff;
}

.form-label {
    color: #b0b0b0;
    font-weight: 500;
    font-size: 0.875rem;
    /* Normal size */
}

.input-group-text {
    background: rgba(58, 157, 136, 0.1);
    /* Muted teal */
    border-color: rgba(58, 157, 136, 0.2);
    /* Muted teal */
    color: #3a9d88;
    /* Muted teal */
}

/* ==================== MEDALS & RANKINGS ==================== */
.description-block {
    text-align: center;
}

.description-percentage {
    font-size: 1rem;
    font-weight: 600;
}

/* Use blue instead of gold to match start_game.html */
.description-percentage.text-gold {
    color: #0088ff;
    /* Blue */
    text-shadow: 0 0 10px rgba(0, 136, 255, 0.3);
}

.description-percentage.text-silver {
    color: #b8b8b8;
    /* Silver */
}

.description-percentage.text-bronze {
    color: #a07855;
    /* Muted bronze */
}

.description-header {
    font-size: 0.95rem;
    margin: 5px 0;
    color: #b8b8b8;
    /* Softer white */
    font-weight: 600;
    /* Less bold */
}

.description-text {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info box icons - Blue, Silver, Bronze, Muted Teal */
.info-box-icon.bg-gold {
    background: linear-gradient(135deg, #0088ff, #0055aa) !important;
    /* Blue gradient */
    color: #ffffff !important;
}

.info-box-icon.bg-silver {
    background: linear-gradient(135deg, #b8b8b8, #909090) !important;
    color: #1a1a24 !important;
}

.info-box-icon.bg-bronze {
    background: linear-gradient(135deg, #a07855, #7d5e42) !important;
    color: #ffffff !important;
}

.info-box-icon.bg-info {
    background: rgba(58, 157, 136, 0.6) !important;
    /* More transparent muted teal for icon */
    color: #ffffff !important;
}

/* Gold, Silver, Bronze backgrounds */
.bg-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000000 !important;
}

.bg-silver {
    background: linear-gradient(135deg, #C0C0C0, #808080) !important;
    color: #000000 !important;
}

.bg-bronze {
    background: linear-gradient(135deg, #CD7F32, #8B4513) !important;
    color: #ffffff !important;
}

.bg-info {
    background: rgba(58, 157, 136, 0.6) !important;
    color: #ffffff !important;
}

/* ==================== IMAGES ==================== */
.img-circle {
    border: 2px solid rgba(58, 157, 136, 0.3);
    /* Muted teal */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.img-circle:hover {
    box-shadow: 0 4px 12px rgba(58, 157, 136, 0.3);
    /* Muted teal */
    transform: scale(1.03);
}

/* ==================== QUOTES ==================== */
.blockquote {
    color: #d0d0d0 !important;
    font-style: italic;
    padding: 15px;
    background: rgba(25, 25, 35, 0.8);
    border-left: 3px solid #3a9d88;
    /* Muted teal */
    border-radius: 6px;
}

.blockquote p {
    color: #d0d0d0 !important;
}

.fa-quote-left,
.fa-quote-right {
    color: #3a9d88 !important;
    /* Muted teal */
    opacity: 0.3;
}

/* ==================== DROPDOWN MENUS ==================== */
.dropdown-menu {
    background: rgba(25, 25, 35, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(58, 157, 136, 0.2);
    /* Muted teal */
    border-radius: 6px;
}

.dropdown-item {
    color: #d0d0d0;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(58, 157, 136, 0.15);
    /* Muted teal */
    color: #3a9d88;
    /* Muted teal */
}

/* ==================== COLLAPSE INDICATORS ==================== */
.fas.fa-chevron-down,
.fas.fa-chevron-up,
.fas.fa-plus,
.fas.fa-minus {
    color: #3a9d88;
    /* Muted teal */
    transition: all 0.2s ease;
}

/* ==================== CONTENT HEADER ==================== */
.content-header h1,
.content-header .m-0,
.content-header .text-dark {
    color: #b8b8b8 !important;
    /* Softer gray instead of white */
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem !important;
    /* Reduced from default 1.8rem */
    font-weight: 400;
    /* Slightly less bold */
}

.content-header h6,
.content-header .m-0+h6 {
    color: #888 !important;
}

/* ==================== CUSTOM SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(20, 20, 30, 0.5);
}

::-webkit-scrollbar-thumb {
    background: #3a9d88;
    /* Muted teal */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4aae99;
    /* Muted teal */
}

/* ==================== SIDEBAR ==================== */
.main-sidebar {
    background: linear-gradient(180deg, #0f0f0f 0%, #1a1a24 100%);
    border-right: 1px solid rgba(58, 157, 136, 0.1);
    /* Muted teal */
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.nav-sidebar .nav-link.active {
    background: rgba(58, 157, 136, 0.15) !important;
    /* Muted teal - THIS IS YOUR PRIMARY */
    color: #3a9d88 !important;
    /* Muted teal */
}

.nav-sidebar .nav-link {
    color: #d0d0d0;
    transition: all 0.2s ease;
}

.nav-sidebar .nav-link:hover {
    background: rgba(58, 157, 136, 0.08);
    /* Muted teal */
    color: #3a9d88;
    /* Muted teal */
}

.nav-sidebar .nav-link p {
    font-size: 0.875rem;
}

/* Override AdminLTE's default red sidebar active state */
.sidebar-dark-danger .nav-sidebar>.nav-item>.nav-link.active {
    background: rgba(58, 157, 136, 0.15) !important;
    color: #3a9d88 !important;
}

/* ==================== NAVBAR ==================== */
.main-header {
    background: rgba(25, 25, 35, 0.98) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(58, 157, 136, 0.15);
    /* Muted teal */
}

.navbar-light .navbar-nav .nav-link {
    color: #d0d0d0 !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #3a9d88 !important;
    /* Muted teal */
}

/* Logout button and navbar buttons */
.navbar .btn,
.navbar-nav .btn {
    background: rgba(58, 157, 136, 0.15) !important;
    /* Same as sidebar active */
    border: 1px solid rgba(58, 157, 136, 0.3) !important;
    color: #3a9d88 !important;
    /* Same as sidebar active text */
    font-weight: 600;
}

.navbar .btn:hover,
.navbar-nav .btn:hover {
    background: rgba(58, 157, 136, 0.25) !important;
    color: #4aae99 !important;
    border-color: rgba(58, 157, 136, 0.4) !important;
}

.navbar-white {
    background: rgba(25, 25, 35, 0.98) !important;
}

/* Top right user info */
.navbar-nav .nav-link {
    color: #d0d0d0 !important;
}

/* ==================== UTILITY CLASSES ==================== */
.text-dark {
    color: #ffffff !important;
}

.text-muted {
    color: #b0b0b0 !important;
}

/* Fix white backgrounds */
.bg-white {
    background: rgba(25, 25, 35, 0.9) !important;
}

.content-wrapper,
.content {
    background: transparent !important;
}

/* ==================== BUTTON GROUPS & DROPDOWNS ==================== */
.btn-group .btn-default {
    background: rgba(58, 157, 136, 0.2);
    /* Muted teal */
    border: 1px solid #3a9d88;
    /* Muted teal */
    color: #3a9d88;
    /* Muted teal */
}

.btn-group .btn-default:hover {
    background: rgba(58, 157, 136, 0.3);
    /* Muted teal */
    color: #4aae99;
    /* Muted teal */
}

.dropdown-toggle {
    background: rgba(58, 157, 136, 0.2) !important;
    /* Muted teal */
    border-color: #3a9d88 !important;
    /* Muted teal */
    color: #3a9d88 !important;
    /* Muted teal */
}

/* ==================== FOOTER ==================== */
footer,
.main-footer {
    background: rgba(20, 20, 30, 0.95);
    border-top: 1px solid rgba(79, 195, 160, 0.15);
    color: #b0b0b0;
}

footer a,
.main-footer a {
    color: #3a9d88;
    /* Muted teal */
}

footer a:hover,
.main-footer a:hover {
    color: #4aae99;
    /* Muted teal */
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .card {
        margin-bottom: 15px;
    }

    .info-box {
        margin-bottom: 15px;
    }
}

/* ==================== DATATABLES STYLING ==================== */

/* DataTable pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: rgba(58, 157, 136, 0.283) !important;
    border: 1px solid rgba(58, 157, 136, 0.3) !important;
    color: #3a9d88 !important;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(58, 157, 136, 0.25) !important;
    border-color: rgba(58, 157, 136, 0.4) !important;
    color: #4aae99 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(58, 157, 136, 0.3) !important;
    border-color: rgba(58, 157, 136, 0.5) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* DataTable length selector (Show entries dropdown) */
.dataTables_wrapper .dataTables_length select {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(58, 157, 136, 0.3);
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 8px;
}

/* DataTable search input */
.dataTables_wrapper .dataTables_filter input {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(58, 157, 136, 0.3);
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 8px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #3a9d88;
    box-shadow: 0 0 0 0.2rem rgba(58, 157, 136, 0.15);
}

/* DataTable info text (Showing X to Y of Z entries) */
.dataTables_wrapper .dataTables_info {
    color: #b8b8b8;
}

/* Links inside DataTable */
.table td a,
.table tbody a {
    color: #3a9d88;
    transition: color 0.2s ease;
    text-decoration: none;
}

.table td a:hover,
.table tbody a:hover {
    color: #4aae99;
    text-decoration: underline;
}

/* DataTable processing/loading indicator */
.dataTables_wrapper .dataTables_processing {
    background: rgba(25, 25, 35, 0.95);
    color: #3a9d88;
    border: 1px solid rgba(58, 157, 136, 0.3);
}

/* ==================== DATATABLES STYLING - STRONGER OVERRIDES ==================== */

/* Force override DataTables default blue for current page */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a,
.page-item.active .page-link {
    background: rgba(58, 157, 136, 0.3) !important;
    border-color: rgba(58, 157, 136, 0.5) !important;
    color: #ffffff !important;
    background-color: rgba(58, 157, 136, 0.3) !important;
    background-image: none !important;
}

/* All pagination buttons base style */
.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li a,
.page-link {
    background: rgba(58, 157, 136, 0.15) !important;
    background-color: rgba(58, 157, 136, 0.15) !important;
    background-image: none !important;
    border: 1px solid rgba(58, 157, 136, 0.3) !important;
    color: #3a9d88 !important;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.page-link:hover {
    background: rgba(58, 157, 136, 0.25) !important;
    background-color: rgba(58, 157, 136, 0.25) !important;
    background-image: none !important;
    border-color: rgba(58, 157, 136, 0.4) !important;
    color: #4aae99 !important;
}

/* ==================== SIDEBAR BRAND/LOGO ==================== */

/* Main brand link container */
.main-sidebar .brand-link {
    background: rgba(15, 15, 20, 0.95);
    border-bottom: 1px solid rgba(58, 157, 136, 0.2);
    padding: 12px 15px;
    transition: all 0.2s ease;
}

.main-sidebar .brand-link:hover {
    background: rgba(20, 25, 30, 0.95);
}

/* Brand text (kicker // delaware) */
.brand-text {
    color: #b8b8b8 !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Brand logo/icon */
.brand-link .brand-image {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.brand-link:hover .brand-image {
    opacity: 1;
}

/* If you want to adjust the logo icon color/styling */
.brand-link img {
    filter: brightness(1.2);
}

/* ==================== SIDEBAR TOP BACKGROUND ==================== */

/* The brand/logo section background */
/* Or match the sidebar active item style */
.main-sidebar .brand-link {
    background: rgba(58, 157, 136, 0.08) !important;
    /* Subtle teal tint */
}


/* Or if you want to keep the medals distinct but more muted */
.info-box-icon.bg-gold {
    background: linear-gradient(135deg, #4a7c9d, #355a7d) !important;
    /* Muted blue */
    color: #ffffff !important;
}