/* laggana-frontend-main/app/static/styles.css */

/* Define the theme colors using Bootstrap variables */
/* Default Theme (Lion) */
body {
    --bs-primary: #34495e; /* Deep Slate/Blue Gray */
    --bs-secondary: #e94f3c; /* Red Accent */
    /* Define other theme variables here if needed, e.g., text colors */
    --bs-body-color: #333; /* Default body text color */
}
body[data-theme="Furia"] {
    --bs-primary: #e94f3c; /* Red Accent */
    --bs-secondary: #f4c20d; /* Yellow Accent */
    --bs-body-color: #333;
}
body[data-theme="Samba"] {
    --bs-primary: #2e8b57; /* Sea Green */
    --bs-secondary: #f4c20d; /* Yellow Accent */
    --bs-body-color: #333;
}
body[data-theme="Pampa"] {
    --bs-primary: #1e73be; /* Strong Blue */
    --bs-secondary: #34495e; /* Deep Slate/Blue Gray */
    --bs-body-color: #333;
}


/* ===== BASE STYLING ===== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Light background */
    margin: 0;
    padding: 0;
    color: var(--bs-body-color); /* Use themed body text color */
}

/* Add padding to body ONLY when the fixed top navbar is visible (small screens) */
body {
    padding-top: 56px; /* Adjust if your navbar height differs */
}


/* ===== SIDEBAR (Hybrid Fixed/Offcanvas) ===== */
.sidebar {
     /* Keep basic styles that apply to both states */
    color: #fff; /* Text color for sidebar links etc */
    padding: 0;
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);

    /* --- Themed Background: USE EXPLICIT SELECTORS FOR HIGH SPECIFICITY --- */
    /* Target the sidebar directly using the body data-theme for higher specificity */
    /* This should override Bootstrap Offcanvas or other defaults */
}

/* Apply themed background color based on the body's data-theme attribute */
/* These rules are MORE specific than just .sidebar or .offcanvas */
/* Add !important as a last resort if conflicts persist */
body[data-theme="Lion"] .sidebar { background-color: var(--bs-primary) !important; }
body[data-theme="Furia"] .sidebar { background-color: var(--bs-primary) !important; }
body[data-theme="Samba"] .sidebar { background-color: var(--bs-primary) !important; }
body[data-theme="Pampa"] .sidebar { background-color: var(--bs-primary) !important; }


/* Styles specifically for the FIXED state on LARGE screens */
@media (min-width: 992px) {
    .fixed-sidebar-lg {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 240px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
        /* Ensure Offcanvas state is hidden on desktop */
        transform: none !important;
        visibility: visible !important;
         /* Background color is handled by the body[data-theme] .sidebar rules above */
    }
}


/* ===== MAIN CONTENT AREA ===== */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Add left margin to main content ONLY on LARGE screens */
@media (min-width: 992px) {
    .main-content-lg {
        margin-left: 240px !important;
         padding-top: 0 !important;
    }
    .main-content-lg .py-3.px-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Remove default body padding on large screens */
@media (min-width: 992px) {
    body {
        padding-top: 0 !important;
    }
}

/* --- Style for the page title heading text --- */
/* Uses the secondary theme color */
.page-title-heading {
    color: var(--bs-secondary) !important;
}


/* Sidebar nav links */
.sidebar-nav .nav-link {
    color: #fff; /* White text on dark sidebar */
    padding: 12px 20px;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link i {
    font-size: 1.2rem;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    /* --- Themed Hover Background: Use --bs-secondary --- */
    background-color: var(--bs-secondary) !important;
    border-left: 4px solid #fff;
    color: #fff;
    text-decoration: none;
}

.sidebar-nav .nav-link:hover i {
    opacity: 1;
}

/* ===== Sidebar Logo ===== */
.sidebar-logo {
    background:#fff;
    height:90px;
    border-bottom:1px solid rgba(0, 0, 0, 0.1); /* Use rgba for theme contrast */
    display:flex;
    justify-content:center;
    align-items:center;
}
.sidebar-logo-link{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 0;
}
.logo-sidebar{
    width:170px;
    height:70px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    /* Theme background images are handled by Jinja in base_restricted.html */
    background-image:url('/static/logos/LaGana_Lion.png'); /* Default fallback */
}
body[data-theme="Lion"]  .logo-sidebar{background-image:url('/static/logos/LaGana_Lion.png');}
body[data-theme="Furia"] .logo-sidebar{background-image:url('/static/logos/LaGana_Furia.png');}
body[data-theme="Samba"] .logo-sidebar{background-image:url('/static/logos/LaGana_Samba.png');}
body[data-theme="Pampa"] .logo-sidebar{background-image:url('/static/logos/LaGana_Pampa.png');}


/* ===== THEME SELECTOR IN SIDEBAR ===== */
.sidebar .theme-selector-sidebar {
    margin-top: 10px;
    margin-bottom: 20px;
}

.sidebar .theme-selector-sidebar label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8); /* Lighter color on dark sidebar background */
    display: block;
    margin-bottom: 4px;
}

.sidebar .theme-selector-sidebar select {
    width: 100%;
    padding: 6px;
    font-size: 0.85rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: #333; /* Dark text color for the select dropdown */
    box-sizing: border-box;
}

.sidebar .theme-selector-sidebar select:focus {
    outline: none;
    border-color: #999;
}


/* === Sidebar user block === */
.sidebar-user{
    border-top:1px solid rgba(255,255,255,0.2); /* Semi-transparent white on dark bg */
    padding:10px 0;
}
.sidebar-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #fff;
}
.sidebar-username{
    font-size:0.85rem;
    color:#eee; /* Light color on dark sidebar background */
    margin-top:4px;
    word-break:break-word;
    text-align:center;
}

.sidebar-logout {
    color: #fff; /* White text on dark sidebar */
    padding: 10px 20px;
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.1); /* Semi-transparent white on dark bg */
    transition: background-color 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sidebar-logout:hover {
    background-color: var(--bs-secondary) !important; /* Themed hover background */
    color: #fff;
}


/* Adjust spacing for labels/inputs within forms */
.form-label.theme-label {
    /* --- Themed Label Color: Use --bs-primary --- */
    color: var(--bs-primary);
}


/* Table adjustments for detail/list pages */
.lessons-table, .player-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.lessons-table th, .lessons-table td,
.player-detail-table th, .player-detail-table td {
    padding: 8px;
    border: 1px solid #ddd;
}

.lessons-table th, .player-detail-table th {
    background-color: #f2f2f2;
    text-align: left;
}

/* Theme card and related styles */
.theme-card {
    background-color: #fff;
    color: var(--bs-body-color); /* Use themed body text color for card content */
    border-radius: 0.5rem;
    border: none;
}

.theme-card-header {
    /* --- Themed Header Background: Use --bs-primary --- */
    background-color: var(--bs-primary) !important;
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1.25rem;
}

.theme-icon {
    /* --- Themed Icon Color: Use --bs-primary --- */
    color: var(--bs-primary) !important; /* Used in titles and cards */
}

.theme-text-muted {
    /* --- Themed Muted Text Color: Use --bs-primary --- */
    color: var(--bs-primary) !important; /* Used in dashboards */
    opacity: 0.7;
    font-size: 0.85rem;
}

.theme-btn {
    /* --- Themed Button Background: Use --bs-primary --- */
    background-color: var(--bs-primary) !important;
    color: #fff; /* Button text is white */
    border: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.theme-btn:hover {
    /* --- Themed Button Hover Background: Use --bs-secondary --- */
    background-color: var(--bs-secondary) !important;
    color: #fff;
}


.player-link {
    /* --- Themed Player Link Color: Use --bs-primary --- */
    color: var(--bs-primary) !important;
    transition: color 0.2s;
}
.player-link:hover {
    /* --- Themed Player Link Hover Color: Use --bs-secondary --- */
    color: var(--bs-secondary) !important;
}

/* Style for the Create Lesson form grid */
.lesson-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.lesson-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--bs-primary); /* Themed label color */
}

.lesson-form input,
.lesson-form select,
.lesson-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.lesson-form textarea {
    min-height: 100px;
    resize: vertical;
}

.lesson-form button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Filter bar for lessons */
.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa; /* Fixed background for filters */
    border: 1px solid #ddd;
    border-radius: 5px;
    align-items: center;
}

.filter-bar input,
.filter-bar select,
.filter-bar button {
     width: 100%;
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 0.9rem;
}

.filter-bar button {
     padding: 8px 15px;
}

/* Adjust padding/margin for content inside the main area */
main .py-3.px-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}



/* ===== Player List Table & Filters ===== */

.players-filter-bar {
    background-color: var(--bs-primary) !important; /* THEMED BACKGROUND */
    color: #fff; /* Text color for content inside the themed filter bar */
    border-radius: 0.375rem; /* Match Bootstrap card radius if not already applied by card-body */
    /* 'card-body shadow-sm p-3 mb-4' are good structural classes from Bootstrap */
}

.players-filter-bar .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: #fff; /* THEMED LABEL - now white to contrast with primary background */
}

/* Style form inputs and selects within the themed filter bar for better contrast */
.players-filter-bar .form-control,
.players-filter-bar .form-select {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly transparent white */
    color: #fff; /* White text for input */
    border-color: rgba(255, 255, 255, 0.3); /* Lighter border */
}

.players-filter-bar .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(255, 255, 255, 0.7);
  opacity: 1; /* Firefox */
}

.players-filter-bar .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgba(255, 255, 255, 0.7);
}

.players-filter-bar .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: rgba(255, 255, 255, 0.7);
}

.players-filter-bar .form-select option {
    color: #212529; /* Standard text color for dropdown options */
    background-color: #fff; /* Standard background for dropdown options */
}

/* Buttons in the filter bar */
.players-filter-bar .btn.theme-btn {
    /* This already uses --bs-primary for background. It might blend in.
       Consider making it use --bs-secondary or a contrasting color. */
    background-color: var(--bs-secondary) !important; /* Make filter button use secondary color */
    color: #fff;
    border: 1px solid var(--bs-secondary); /* Optional: add a border */
}
.players-filter-bar .btn.theme-btn:hover {
    /* Darken or lighten the secondary color slightly on hover */
    filter: brightness(90%);
}

.players-filter-bar .btn.btn-outline-secondary {
    color: #fff; /* Text color for clear button */
    border-color: rgba(255, 255, 255, 0.5); /* Border for clear button */
}
.players-filter-bar .btn.btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
/* ... (other styles) ... */

/* Table row hover effect - Option 3: Fixed Light Semi-Transparent Grey */
.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Subtle semi-transparent dark (appears grey) */
    /* Text color should generally remain the default body text color for readability */
    color: var(--bs-body-color) !important; /* Or your table's default text color */
}

/* Adjust links within the hovered row for good contrast */
.table-hover > tbody > tr:hover a {
    /* Links can use the primary theme color or secondary, if it contrasts well */
    color: var(--bs-primary) !important;
    /* text-decoration: underline; /* Optional: add underline on hover for clear affordance */
}
.table-hover > tbody > tr:hover a:hover { /* Hover on the link itself within the hovered row */
    color: var(--bs-secondary) !important; /* Change to secondary on direct link hover */
}


/* Adjust buttons within the hovered row */
.table-hover > tbody > tr:hover .btn-outline-primary {
    /* Keep its original outline style, colors should still work */
    /* No specific change needed here usually if the hover BG is very light */
}
.table-hover > tbody > tr:hover .btn-outline-primary:hover {
    /* Bootstrap's default hover for outline buttons should still apply nicely */
}

/* Pill appearance on hover */
.table-hover > tbody > tr:hover .pill {
    /* Pills should generally retain their original appearance.
       The slight change in the cell background behind them is usually enough.
       No specific change needed here unless you see a problem.
       Ensure pill text contrasts with ITS OWN background primarily.
    */
}

/* "No Players Found" alert styling */
.no-players-alert {
    background-color: var(--bs-secondary) !important; /* THEMED BACKGROUND */
    color: #fff !important; /* Text color, ensure contrast with secondary color */
    border-color: var(--bs-secondary) !important; /* Border same as background or slightly darker/lighter */
    /* remove default alert-info icon if it clashes */
}

.no-players-alert a {
    color: #fff !important; /* Link color */
    font-weight: bold;
    text-decoration: underline;
}

.no-players-alert a:hover {
    /* color: var(--bs-primary) !important; */ /* Or a lighter shade */
    opacity: 0.8;
}

/* If Bootstrap's .alert-info adds a default icon via ::before or ::after, you might want to hide it */
.no-players-alert::before {
    display: none !important; /* Example: Hide default Bootstrap alert icon */
}

/* Pill styles for player levels (ensure text is readable on secondary hover if pills don't change) */
/* This might be tricky if pills have their own strong background colors.
   The `color: #fff !important;` on the `tr:hover > *` might already handle this for pill text.
   If not, you might need to specifically target pills on hover.
   Example (if needed):
   .table-hover > tbody > tr:hover .pill {
       color: #fff !important; // Ensure pill text is white on hover
   }
*/

/* Pill styles for player levels */
.pill {
  padding: 0.3em 0.75em;
  border-radius: 10rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: #fff;
  display: inline-block;
  text-transform: capitalize;
}

/* Specific pill colors
   - Intermediate can use --bs-primary
   - Beginner or Improver could use --bs-secondary
   - Others might need fixed colors or new theme variables if you want them to change with theme
*/
.pill-beginner { background-color: #ffc107; color: #212529; } /* Bootstrap Warning yellow */
body[data-theme="Furia"] .pill-beginner { background-color: var(--bs-secondary); color: #fff; } /* Example: Furia's secondary for beginner */

.pill-improver { background-color: #17a2b8; } /* Bootstrap Info blue */
/* If you want improver to be themed, choose a theme variable or add specific overrides */
/* body[data-theme="YourTheme"] .pill-improver { background-color: var(--some-theme-color); } */

.pill-intermediate { background-color: var(--bs-primary); } /* THEMED - Uses primary theme color */

.pill-advanced { background-color: #28a745; } /* Bootstrap Success green */
/* Theme advanced if needed */
/* body[data-theme="Lion"] .pill-advanced { background-color: #another-lion-color; } */

.pill-professional { background-color: #343a40; } /* Bootstrap Dark */
/* Theme professional if needed */

.pill-default { background-color: #6c757d; } /* Bootstrap Secondary grey */


/* Table header sort icons */
.table th a {
    text-decoration: none;
    color: inherit; /* Should inherit from .theme-card-header text color (white) */
}
.table th a:hover {
    opacity: 0.8;
}
.table th .bi {
    font-size: 0.9em;
    margin-left: 0.4em;
    vertical-align: middle;
}

/* Ensure table header in thead uses .theme-card-header styles */
/* The class 'theme-card-header' is already applied in the Jinja template to the <thead>.
   And your existing CSS for .theme-card-header should cover it:
   .theme-card-header {
       background-color: var(--bs-primary) !important;
       color: #fff; ...
   }
   So, this should already be themed. Double-check if there's a specificity issue.
*/
/* This rule from previous suggestion might be redundant if .theme-card-header is specific enough */
/*
.table > thead.theme-card-header {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.table > thead.theme-card-header th {
    color: #fff !important;
}
*/

/* Style for table cells for consistency */
.table td {
    font-size: 0.9rem;
    vertical-align: middle;
    /* Text color for table cells should come from body's --bs-body-color or .theme-card color */
    /* color: var(--bs-body-color); -> This might be too broad, let .theme-card handle it */
}

.table .btn-sm i.bi {
    vertical-align: text-bottom;
}

/* Ensure the table itself has the theme-card style for consistent borders/shadow
   The .theme-card class is applied to the table in Jinja.
   Your existing .theme-card styles:
    .theme-card {
        background-color: #fff;
        color: var(--bs-body-color); <- This should set the default text color for the table content
        border-radius: 0.5rem;
        border: none;
    }
   This should ensure the table text uses the themed body color.
*/
.table.theme-card {
    /* Any specific border overrides if needed */
    /* border: 1px solid #dee2e6; -> This could override theme-card's 'border: none' if you want visible table borders */
}

/* ===== Lessons List Page Specific Styles ===== */

.lessons-filter-bar {
    background-color: var(--bs-primary) !important;
    color: #fff;
    border-radius: 0.375rem; /* Bootstrap's default card radius */
    /* p-3 and mb-4 are handled by Bootstrap classes on the div */
}

.lessons-filter-bar .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: #fff; /* Labels white on primary background */
}

.lessons-filter-bar .form-control,
.lessons-filter-bar .form-select {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.lessons-filter-bar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.lessons-filter-bar .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); }
.lessons-filter-bar .form-control::-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); }

.lessons-filter-bar .form-select option {
    color: #212529; /* Standard text color for dropdown options */
    background-color: #fff;
}

.lessons-filter-bar .btn.theme-btn {
    background-color: var(--bs-secondary) !important; /* Filter button uses secondary color */
    color: #fff;
    border: 1px solid var(--bs-secondary);
}
.lessons-filter-bar .btn.theme-btn:hover {
    filter: brightness(90%);
}

.lessons-filter-bar .btn.btn-outline-secondary { /* Clear button */
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.lessons-filter-bar .btn.btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Styling for links within table cells (if not covered by a global .themed-link) */
.table .themed-link { /* New class for general themed links in tables */
    color: var(--bs-primary); /* Use primary theme color for main links */
    text-decoration: none;
    font-weight: 500; /* Slightly bolder */
}
.table .themed-link:hover {
     color: var(--bs-secondary) !important; /* Use secondary theme color on hover */
     text-decoration: underline;
}


/* Pill styles for lesson statuses (add more as needed) */
/* Uses .pill class from player list, but with status-specific modifiers */
.pill.pill-status-draft { background-color: #6c757d; /* Grey */ }
.pill.pill-status-scheduled { background-color: #17a2b8; /* Info Blue */ }
.pill.pill-status-completed { background-color: #28a745; /* Success Green */ }
/* Add other statuses if they exist e.g. cancelled */
/* .pill.pill-status-cancelled { background-color: #dc3545; } */


/* "No Lessons Found" alert styling - using .no-lessons-alert */
.no-lessons-alert { /* Changed from .no-players-alert to be specific */
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
    border-color: var(--bs-secondary) !important; /* Or a slightly darker shade */
}

.no-lessons-alert .alert-link { /* Specific styling for links within this themed alert */
    color: #fff !important;
    font-weight: bold;
    text-decoration: underline;
}
.no-lessons-alert .alert-link:hover {
    opacity: 0.8;
}
/* Hide Bootstrap's default icon if present and not desired */
.alert.no-lessons-alert::before {
    display: none !important;
}

/* Ensure the main table has the theme-card styles for consistent borders/shadow */
/* The .theme-card class is applied to the table in Jinja. */
/* Your existing .theme-card styles should apply.
   You might want to ensure the table within .table-responsive has full width.
*/
.table-responsive > .table.theme-card {
    margin-bottom: 0; /* Remove bottom margin if table is last element in card-body p-0 */
}

/* Filter bar for Tournaments List (if different from lessons/players) */
.tournaments-filter-bar {
    background-color: var(--bs-primary) !important;
    color: #fff;
    border-radius: 0.375rem;
}

.tournaments-filter-bar .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: #fff;
}

.tournaments-filter-bar .form-control,
.tournaments-filter-bar .form-select {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
.tournaments-filter-bar .form-control::placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; }
.tournaments-filter-bar .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); }
.tournaments-filter-bar .form-control::-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); }
.tournaments-filter-bar .form-select option { color: #212529; background-color: #fff; }

.tournaments-filter-bar .btn.theme-btn {
    background-color: var(--bs-secondary) !important;
    color: #fff;
    border: 1px solid var(--bs-secondary);
}
.tournaments-filter-bar .btn.theme-btn:hover { filter: brightness(90%); }

.tournaments-filter-bar .btn.btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.tournaments-filter-bar .btn.btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Status Pills for Tournaments (can reuse .pill if general enough) */
/* Or create specific ones like .pill-status-draft */
/* Using .badge and Bootstrap background colors for simplicity here, adjust as needed */
.table .badge.pill-status-draft { background-color: var(--bs-secondary); /* Example: Use secondary for draft */ }
.table .badge.pill-status-open-for-registration { background-color: var(--bs-success); }
.table .badge.pill-status-registration-closed { background-color: var(--bs-warning); color: #000 !important; } /* Dark text on yellow */
.table .badge.pill-status-in-progress { background-color: var(--bs-info); color: #000 !important; } /* Dark text on light blue */
.table .badge.pill-status-completed { background-color: var(--bs-primary-subtle); color: var(--bs-primary-emphasis); border: 1px solid var(--bs-primary-border-subtle); } /* Using BS subtle colors */
.table .badge.pill-status-cancelled { background-color: var(--bs-danger); }

.table .themed-link { /* Already defined, ensure it works */
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
}
.table .themed-link:hover {
     color: var(--bs-secondary) !important;
     text-decoration: underline;
}