/* static/css/theme.css */

/* --- Light Theme (Default) --- */
:root, html[data-theme="light"] {
    --primary-bg-color: #f8f9fa;
    --secondary-bg-color: #ffffff;
    --primary-text-color: #212529;
    --secondary-text-color: #6c757d;
    --accent-color: #198754;
    --accent-text-color: #ffffff;
    --accent-color-rgb: 13, 110, 253;
    --border-color: #dee2e6;
    --link-color: #0d6efd;
    --link-hover-color: #0a58ca;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107; 
    --info-color: #0dcaf0;
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --table-bg: var(--secondary-bg-color);
    --table-striped-bg: #f2f2f2; 
    --table-hover-bg: #e9ecef;
    --list-group-bg: var(--secondary-bg-color);
    --list-group-hover-bg: #f8f9fa;
    --progress-track-bg: #e9ecef;
    --placeholder-color: #6c757d;
}

/* --- Dark Theme --- */
html[data-theme="dark"] {
    --primary-bg-color: #121212;    
    --secondary-bg-color: #1e1e1e;  
    --primary-text-color: #e0e0e0;
    --secondary-text-color: #a0a0a0;
    --accent-color: #378dfc;
    --accent-text-color: #ffffff;
    --accent-color-rgb: 55, 141, 252;
    --border-color: #3a3a3a;      
    --link-color: #58a6ff;
    --link-hover-color: #79b8ff;
    --success-color: #28a745; 
    --danger-color: #e54b59;
    --warning-color: #ffca2c;    
    --info-color: #39c0ed;       
    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --table-bg: #212529;
    --table-striped-bg: #2c3034; 
    --table-hover-bg: #32383e;
    --list-group-bg: var(--secondary-bg-color);
    --list-group-hover-bg: #343a40;
    --progress-track-bg: #3a3a3a;
    --placeholder-color: #777;
}

/* --- Base Styles --- */
body { background-color: var(--primary-bg-color); color: var(--primary-text-color); }
a { color: var(--link-color); }
a:hover { color: var(--link-hover-color); }

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-text-color);
}

/* --- Components --- */
.navbar { background-color: var(--secondary-bg-color); border-bottom: 1px solid var(--border-color); }
.nav-link { color: var(--primary-text-color); }
.nav-link.active { color: var(--accent-color) !important; }

.card { 
    background-color: var(--secondary-bg-color); 
    border: 1px solid var(--border-color); 
    box-shadow: var(--card-shadow);
    color: var(--primary-text-color);
}
.card-header, .card-footer { background-color: var(--primary-bg-color); border-color: var(--border-color); }
html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: #272727; }
.card-title { color: var(--primary-text-color); }
.card-subtitle { color: var(--secondary-text-color); }


.player-name-link {
    font-weight: 500;
    text-decoration: none;
    color: var(--link-color);
}
.player-name-link:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* --- Tables --- */
.table {
    color: var(--primary-text-color);
}
.table th, .table td {
    border-color: var(--border-color);
    color: var(--primary-text-color) !important;
    vertical-align: middle;
}
.table > :not(caption) > * > * {
    background-color: var(--table-bg);
    color: inherit; 
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-striped-bg);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg);
}

/* --- List Groups --- */
.list-group-item {
    background-color: var(--list-group-bg);
    border-color: var(--border-color);
    color: var(--primary-text-color);
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: var(--list-group-hover-bg);
    color: var(--primary-text-color);
}
.player-stats-card .card-title, .player-stats-card .stat-item h6 {
    color: var(--primary-text-color);
}
.progress {
    background-color: var(--progress-track-bg);
}

/* --- Forms --- */
.form-control, .form-select, .form-label { color: var(--primary-text-color); }
.form-control, .form-select { background-color: var(--secondary-bg-color); border-color: var(--border-color); }
.form-control::placeholder { color: var(--placeholder-color); opacity: 1; }
.form-control::-webkit-input-placeholder { color: var(--placeholder-color); }
.form-control::-moz-placeholder { color: var(--placeholder-color); opacity: 1; }
.form-control:-ms-input-placeholder { color: var(--placeholder-color); }
.form-control::-ms-input-placeholder { color: var(--placeholder-color); }

/* --- Other Styles --- */
.btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); }
.text-muted { color: var(--secondary-text-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-dark { color: var(--primary-text-color) !important; }
.text-primary { color: var(--accent-color) !important; }

/* --- FIX: Specific override for disabled form controls in dark mode --- */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
    color: #212529; /* Use a dark text color for readability */
    background-color: #ffffff; /* Use a slightly darker gray for the background */
    opacity: 0.75; /* Ensure text is not overly faded */
}

.footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 0.875rem;
    background-color: var(--secondary-bg-color);
    color: var(--secondary-text-color);
    border-top: 1px solid var(--border-color);
}

.footer-credits p { /* Keep existing style for credits */
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

/* Wrapper for the right column content to control its alignment */
.footer-support-wrapper {
    display: flex;
    justify-content: center; /* Center on small screens */
}
@media (min-width: 768px) { /* md breakpoint and up */
    .footer-support-wrapper {
        justify-content: flex-end; /* Align to the right on larger screens */
    }
}

/* Flex container for the "Support NinHub:" text and the icons div */
.footer-support-content {
    display: inline-flex; /* Use inline-flex so it doesn't take full width unless content pushes it */
    align-items: center;  /* Vertically align the text and the icons div */
    gap: 0.75rem;         /* Space between "Support NinHub:" and the PayPal icon */
}

.footer-support-content .support-text {
    font-weight: 500;
    /* margin-bottom: 0; /* Already handled by mb-0 on the p tag */
}

/* .social-icons div is now a flex item, can be simple */
.footer .social-icons {
    /* No specific flex properties needed here if it only contains one icon link */
    /* display: inline-block; /* Or just let it flow */
}

.footer .social-icons a.social-icon-link {
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.85;
    display: inline-flex; /* Crucial for centering the <i> tag inside the <a> */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Helps normalize icon height behavior */
}
.footer .social-icons a.social-icon-link:hover {
    opacity: 1;
}

.footer .social-icons .social-icon-link i {
    font-size: 1.9rem; /* Slightly increased for better visual balance with text */
    color: var(--secondary-text-color);
    /* line-height: 1; /* Already on parent <a>, but doesn't hurt here */
}
.footer .social-icons .social-icon-link:hover i {
    color: var(--primary-text-color); 
}

/* Responsive adjustments for credits column */
@media (max-width: 767.98px) { 
    .footer-credits {
        text-align: center !important;
    }
    /* .footer-support-wrapper will already be centered due to its own justify-content: center */
}