/* includes/styles/themes.css */

/* ==========================================================================
   1. CSS Variable Definitions
   ========================================================================== */

/* --- Light Theme (Default Fallback) --- */
:root, html.light-theme, body.light-theme {
        /* Base Page Colors */
        --background-color: #FFFFFF;
        --text-color: #212529; /* Bootstrap's default body text */
        --text-color-muted: #6c757d;
        --link-color: #0d6efd; /* Bootstrap's default link blue */
        --link-hover-color: #0a58ca;
        --hr-color: rgba(0, 0, 0, 0.1);
        --primary-color: #0d6efd; /* Example, align with Bootstrap's primary */
        --secondary-color: #6c757d;
	

        /* Bootstrap Component Overrides */
        --bs-body-bg: var(--background-color);
        --bs-body-color: var(--text-color);
        --bs-border-color: var(--card-border-color);
        --bs-tertiary-bg: var(--card-header-bg);
        --bs-btn-close-color: var(--text-color);
        --bs-modal-bg: var(--card-bg);
        --bs-modal-header-border-color: var(--card-border-color);
        --bs-modal-footer-border-color: var(--card-border-color);
        --bs-form-control-bg: var(--form-check-input-bg);
        --bs-form-select-bg: var(--form-check-input-bg);	

        /* Page Titles */
        --page-title-color: var(--text-color); /* Or a specific darker/larger text color */

        /* Navbar Variables */
        --navbar-background-color: #f8f9fa;
        --navbar-text-color: rgba(0, 0, 0, 0.7);
        --navbar-brand-color: rgba(0, 0, 0, 0.9);
        --navbar-link-color: rgba(0, 0, 0, 0.55);
        --navbar-link-hover-color: rgba(0, 0, 0, 0.7);
        --navbar-link-active-color: rgba(0, 0, 0, 0.9);
        --navbar-toggler-icon-color: rgba(0, 0, 0, 0.55);
        --navbar-toggler-border-color: rgba(0, 0, 0, 0.1);

        /* Dropdown Variables */
        --dropdown-background-color: #ffffff;
        --dropdown-text-color: #212529;
        --dropdown-link-color: #212529;
        --dropdown-link-hover-background-color: #e9ecef;
        --dropdown-link-hover-color: #1e2125;
        --dropdown-link-active-background-color: var(--primary-color);
        --dropdown-link-active-color: #ffffff;
        --dropdown-header-color: #6c757d;
        --dropdown-divider-color: rgba(0, 0, 0, 0.175);

        /* Card Variables */
        --card-bg: #FFFFFF;
        --card-text-color: var(--text-color);
        --card-title-text-color: var(--text-color);
        --card-header-bg: #f8f9fa;
        --card-border-color: rgba(0, 0, 0, 0.175);
        --card-shadow-color: rgba(0, 0, 0, 0.075); /* For box-shadow */

        /* Alert Variables */
        --alert-success-background-color: #d1e7dd;
        --alert-success-text-color: #0a3622;
        --alert-success-border-color: #a3cfbb;
        --alert-success-link-color: #082b1b;
        --alert-danger-background-color: #f8d7da;
        --alert-danger-text-color: #58151c;
        --alert-danger-border-color: #f1aeb5;
        --alert-danger-link-color: #461117;
        /* Add other alert types (warning, info) if needed */
        --alert-button-close-color: #000; /* For dismissible alert 'x' - better to use --bs-btn-close-color per alert type */

        /* Button Variables (Example for .btn-success, .btn-primary etc.) */
        --button-success-bg: #198754;
        --button-success-text-color: #FFFFFF;
        --button-success-border-color: #198754;
        --button-success-hover-bg: #157347;
        --button-success-hover-border-color: #146c43;

        /* List Group (for invites on profile page) */
        --list-group-item-bg: #FFFFFF;
        --list-group-item-text-color: var(--text-color);
        --list-group-item-border-color: rgba(0, 0, 0, 0.125);
        --list-group-item-hover-bg: #f8f9fa; /* Optional hover effect */

        /* Form Elements (Theme settings radio buttons) */
        --form-check-label-color: var(--text-color);
        --form-check-input-bg: #FFFFFF;
        --form-check-input-border-color: #ced4da;
        --form-check-input-checked-bg-color: var(--primary-color);
        --form-check-input-checked-border-color: var(--primary-color);
        /* Bootstrap handles a lot of this, but you might want to tweak focus rings or specific states */

        /* Footer Variables */
        --footer-background-color: #f8f9fa;
        --footer-text-color: #6c757d;
        --footer-link-color: var(--primary-color);
        --footer-link-hover-color: var(--link-hover-color);

        /* Profile Page Specific */
        --profile-avatar-border-color: var(--primary-color);
}

/* --- Dark Theme --- */
html.dark-theme, body.dark-theme {
        /* Base Page Colors */
        --background-color: #212529;
        --text-color: #dee2e6; /* Lighter than pure white for less strain */
        --text-color-muted: #adb5bd;
        --link-color: #6ea8fe; /* Lighter blue for dark mode */
        --link-hover-color: #8bb9fe;
        --hr-color: rgba(255, 255, 255, 0.1);
        --primary-color: #6ea8fe;
        --secondary-color: #adb5bd;
	

        /* Bootstrap Component Overrides */
        --bs-body-bg: var(--background-color);
        --bs-body-color: var(--text-color);
        --bs-border-color: var(--card-border-color);
        --bs-tertiary-bg: var(--card-header-bg);
        --bs-btn-close-color: var(--text-color);
        --bs-modal-bg: var(--card-bg);
        --bs-modal-header-border-color: var(--card-border-color);
        --bs-modal-footer-border-color: var(--card-border-color);
        --bs-form-control-bg: var(--form-check-input-bg);
        --bs-form-select-bg: var(--form-check-input-bg);	

        /* Page Titles */
        --page-title-color: #f8f9fa; /* Brighter for titles */

        /* Navbar Variables */
        --navbar-background-color: #343a40; /* Slightly different from body for depth */
        --navbar-text-color: rgba(255, 255, 255, 0.75);
        --navbar-brand-color: #ffffff;
        --navbar-link-color: rgba(255, 255, 255, 0.65);
        --navbar-link-hover-color: #ffffff;
        --navbar-link-active-color: #ffffff;
        --navbar-toggler-icon-color: rgba(255, 255, 255, 0.65);
        --navbar-toggler-border-color: rgba(255, 255, 255, 0.15);

        /* Dropdown Variables */
        --dropdown-background-color: #343a40;
        --dropdown-text-color: var(--text-color);
        --dropdown-link-color: var(--text-color);
        --dropdown-link-hover-background-color: #495057;
        --dropdown-link-hover-color: #ffffff;
        --dropdown-link-active-background-color: var(--primary-color);
        --dropdown-link-active-color: #ffffff;
        --dropdown-header-color: #adb5bd;
        --dropdown-divider-color: rgba(255, 255, 255, 0.175);

        /* Card Variables */
        --card-bg: #343a40;
        --card-text-color: var(--text-color);
        --card-title-text-color: #f8f9fa;
        --card-header-bg: #40464c; /* Slightly different from card-bg */
        --card-border-color: rgba(255, 255, 255, 0.125);
        --card-shadow-color: rgba(0, 0, 0, 0.2);

        /* Alert Variables */
        --alert-success-background-color: #0d3d27;
        --alert-success-text-color: #a3cfbb;
        --alert-success-border-color: #1a593e;
        --alert-success-link-color: #c1e2d2;
        --alert-danger-background-color: #58151c;
        --alert-danger-text-color: #f1aeb5;
        --alert-danger-border-color: #8c2c36;
        --alert-danger-link-color: #f8c5ca;
        --alert-button-close-color: #fff;

        /* Button Variables */
        --button-success-bg: #1AA06D; /* Adjusted success for dark */
        --button-success-text-color: #FFFFFF;
        --button-success-border-color: #1AA06D;
        --button-success-hover-bg: #1FBE84;
        --button-success-hover-border-color: #1FBE84;

        /* List Group */
        --list-group-item-bg: #343a40;
        --list-group-item-text-color: var(--text-color);
        --list-group-item-border-color: rgba(255, 255, 255, 0.125);
        --list-group-item-hover-bg: #495057;

        /* Form Elements */
        --form-check-label-color: var(--text-color);
        --form-check-input-bg: #495057;
        --form-check-input-border-color: #6c757d;
        --form-check-input-checked-bg-color: var(--primary-color);
        --form-check-input-checked-border-color: var(--primary-color);

        /* Footer Variables */
        --footer-background-color: #343a40;
        --footer-text-color: #adb5bd;
        --footer-link-color: var(--primary-color);
        --footer-link-hover-color: var(--link-hover-color);

        /* Profile Page Specific */
        --profile-avatar-border-color: var(--primary-color);
}

/* --- Sepia Theme --- */
html.sepia-theme, body.sepia-theme {
        /* Base Page Colors */
        --background-color: #f4ecd8;
        --text-color: #5b4636;
        --text-color-muted: #7a6b5a;
        --link-color: #8c5e2a;
        --link-hover-color: #6b4c23;
        --hr-color: #d3c2a5;
        --primary-color: #8c5e2a;
        --secondary-color: #a08f70;
	

        /* Bootstrap Component Overrides */
        --bs-body-bg: var(--background-color);
        --bs-body-color: var(--text-color);
        --bs-border-color: var(--card-border-color);
        --bs-tertiary-bg: var(--card-header-bg);
        --bs-btn-close-color: var(--text-color);
        --bs-modal-bg: var(--card-bg);
        --bs-modal-header-border-color: var(--card-border-color);
        --bs-modal-footer-border-color: var(--card-border-color);
        --bs-form-control-bg: var(--form-check-input-bg);
        --bs-form-select-bg: var(--form-check-input-bg);	

        /* Page Titles */
        --page-title-color: #4a300d;

        /* Navbar Variables */
        --navbar-background-color: #efe3c8;
        --navbar-text-color: rgba(92, 60, 16, 0.75);
        --navbar-brand-color: #4a300d;
        --navbar-link-color: rgba(92, 60, 16, 0.65);
        --navbar-link-hover-color: #4a300d;
        --navbar-link-active-color: #4a300d;
        --navbar-toggler-icon-color: rgba(92, 60, 16, 0.65);
        --navbar-toggler-border-color: rgba(92, 60, 16, 0.15);

        /* Dropdown Variables */
        --dropdown-background-color: #f4ecd8;
        --dropdown-text-color: var(--text-color);
        --dropdown-link-color: var(--text-color);
        --dropdown-link-hover-background-color: #e9dcc3;
        --dropdown-link-hover-color: #4a300d;
        --dropdown-link-active-background-color: var(--primary-color);
        --dropdown-link-active-color: #ffffff;
        --dropdown-header-color: #7a6b5a;
        --dropdown-divider-color: rgba(92, 60, 16, 0.175);

        /* Card Variables */
        --card-bg: #efe3c8;
        --card-text-color: var(--text-color);
        --card-title-text-color: #4a300d;
        --card-header-bg: #e9dcc3;
        --card-border-color: #d3c2a5;
        --card-shadow-color: rgba(92, 60, 16, 0.075);

        /* Alert Variables */
        --alert-success-background-color: #d3e8d8;
        --alert-success-text-color: #2e4b37;
        --alert-success-border-color: #b1d3bb;
        --alert-success-link-color: #253a2b;
        --alert-danger-background-color: #f5e0e2;
        --alert-danger-text-color: #6c3b40;
        --alert-danger-border-color: #e8b9bf;
        --alert-danger-link-color: #573034;
        --alert-button-close-color: #5c3c10;

        /* Button Variables */
        --button-success-bg: #7a9e68;
        --button-success-text-color: #FFFFFF;
        --button-success-border-color: #7a9e68;
        --button-success-hover-bg: #688957;
        --button-success-hover-border-color: #617c51;

        /* List Group */
        --list-group-item-bg: #efe3c8;
        --list-group-item-text-color: var(--text-color);
        --list-group-item-border-color: #d3c2a5;
        --list-group-item-hover-bg: #e9dcc3;

        /* Form Elements */
        --form-check-label-color: var(--text-color);
        --form-check-input-bg: #fdf5e8;
        --form-check-input-border-color: #d3c2a5;
        --form-check-input-checked-bg-color: var(--primary-color);
        --form-check-input-checked-border-color: var(--primary-color);

        /* Footer Variables */
        --footer-background-color: #e9dcc3;
        --footer-text-color: #7a6b5a;
        --footer-link-color: var(--primary-color);
        --footer-link-hover-color: var(--link-hover-color);

        /* Profile Page Specific */
        --profile-avatar-border-color: var(--primary-color);
}

/* --- System Theme Fallbacks --- */
/* This applies if <html class="system-theme"> is set by PHP and JS hasn't run yet,
   OR if JS sets system-theme and then light-theme/dark-theme based on media query.
   The JS should add 'light-theme' or 'dark-theme' class dynamically.
   These are base fallbacks. */
html.system-theme {
        /* Default to light theme vars for no-JS or initial paint */
        --background-color: #FFFFFF;
        --text-color: #212529;
        /* ... include ALL light theme variables here as a base ... */
        --navbar-background-color: #f8f9fa;
        /* etc. */
}

@media (prefers-color-scheme: dark) {
        html.system-theme:not(.light-theme):not(.dark-theme) { /* Only apply if JS hasn't set an explicit theme yet */
                /* Override with dark theme vars if OS is dark */
                --background-color: #212529;
                --text-color: #dee2e6;
                /* ... include ALL dark theme variables here ... */
                --navbar-background-color: #343a40;
                /* etc. */
        }
        /* If JS adds .dark-theme based on system, the html.dark-theme block will take full precedence */
}


/* ==========================================================================
   2. CSS Rules (Example: Navbar rules - if you keep them in this file)
      It's often cleaner to put ALL rules in includes/styles/styles.css
      and keep this file for variable definitions ONLY.
   ========================================================================== */

/* Main Navbar Styling (Copied from your themes.css) */
.site-navbar {
        background-color: var(--navbar-background-color) !important;
        color: var(--navbar-text-color);
        transition: background-color 0.3s ease, color 0.3s ease;
}

.site-navbar .navbar-brand {
        color: var(--navbar-brand-color) !important;
        transition: color 0.3s ease;
}
.site-navbar .navbar-brand:hover {
        color: var(--navbar-link-hover-color);
}

.site-navbar .nav-link {
        color: var(--navbar-link-color) !important;
        transition: color 0.3s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
        color: var(--navbar-link-hover-color) !important;
}

.site-navbar .nav-link.active {
        color: var(--navbar-link-active-color) !important;
}

.site-navbar .navbar-toggler {
        border-color: var(--navbar-toggler-border-color) !important;
        color: var(--navbar-text-color);
        transition: border-color 0.3s ease;
        /* For Bootstrap 5.3 toggler icon color */
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='var(--navbar-toggler-icon-color)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* .site-navbar .navbar-toggler-icon styling can be removed if the above --bs-navbar-toggler-icon-bg works for BS 5.3 */


/* Dropdown Menu Styling */
.site-navbar .dropdown-menu {
        background-color: var(--dropdown-background-color) !important;
        color: var(--dropdown-text-color) !important;
        border: 1px solid var(--dropdown-divider-color);
        transition: background-color 0.3s ease, color 0.3s ease;
}

.site-navbar .dropdown-item {
        color: var(--dropdown-link-color) !important;
        transition: background-color 0.3s ease, color 0.3s ease;
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
        background-color: var(--dropdown-link-hover-background-color) !important;
        color: var(--dropdown-link-hover-color) !important;
}

.site-navbar .dropdown-item.active,
.site-navbar .dropdown-item:active {
        background-color: var(--dropdown-link-active-background-color) !important;
        color: var(--dropdown-link-active-color) !important;
}

.site-navbar .dropdown-header {
        color: var(--dropdown-header-color) !important;
        transition: color 0.3s ease;
}

.site-navbar .dropdown-divider {
        border-top-color: var(--dropdown-divider-color) !important;
        transition: border-top-color 0.3s ease;
}

.site-navbar .nav-link.dropdown-toggle {
        color: var(--navbar-link-color) !important;
}
.site-navbar .nav-link.dropdown-toggle:hover,
.site-navbar .nav-link.dropdown-toggle:focus {
        color: var(--navbar-link-hover-color) !important;
}
.site-navbar .nav-link.dropdown-toggle.active {
        color: var(--navbar-link-active-color) !important;
}

/*
 * ===================================================================
 * ==  Dark Mode Styles for jQuery Bracket                          ==
 * ===================================================================
 */

/* This targets the bracket only when '.dark-theme' is active */
.dark-theme .jQBracket {
    /* Change the main background of the bracket area */
    background-color: #212529; /* A dark bootstrap color */
}

/* Style for the team boxes */
.dark-theme .jQBracket .team {
    background-color: #343a40;
    border-color: #495057;
}

/* Style for the team name text */
.dark-theme .jQBracket .label {
    color: #ced4da; /* Light grey text */
}

/* Style for the score text boxes */
.dark-theme .jQBracket .score {
    color: #ced4da;
    background-color: #495057;
    border-color: #343a40;
}

/*
 * HIGHLIGHT WINNER:
 * Change only the winning team's name to red, with no background highlight.
 */

/* Make the winner's team name red and bold */
.dark-theme .jQBracket .win .label {
    color: #E53E3E; /* A strong, visible red */
    font-weight: bold;
}

/* Keep the winner's score the default light color (not red) */
.dark-theme .jQBracket .win .score {
    color: #ced4da;
}

/* Explicitly set the winner's box background to the default team color,
   ensuring there's no special background highlight from the library. */
.dark-theme .jQBracket .team.win {
    background-color: #343a40;
}

/* Make the loser's text dimmer */
.dark-theme .jQBracket .lose .label {
    color: #6c757d; /* Muted grey for losers */
}

/*
 * REMOVE LOSER BACKGROUND HIGHLIGHT:
 * This forces the loser's team box to have the standard background color.
 */
.dark-theme .jQBracket .team.lose {
    background-color: #343a40; /* This must match your default '.team' background-color */
}

/* Style the connector lines between matches */
.dark-theme .jQBracket .connector {
    border-color: #495057;
}

/* Style the connector lines for a third-place match (if you use it) */
.dark-theme .jQBracket .thdplace .connector {
    border-color: #495057;
}