/* static/style.css - Refactored */

/* ==========================================================================
   1. Variables (Custom Properties) - Base Theme (Light)
   ========================================================================== */

   :root {
    /* Colors */
    --color-primary: #0056b3;
    --color-primary-dark: #003d80;
    --color-success: #28a745;
    --color-success-dark: #218838;
    --color-danger: #dc3545; /* Adjusted for better contrast/use */
    --color-danger-text: #721c24; /* Text on light danger bg */
    --color-warning: #ffc107; /* Adjusted for better contrast/use */
    --color-warning-text: #856404; /* Text on light warning bg */
    --color-info: #17a2b8; /* Adjusted for better contrast/use */
    --color-info-text: #0c5460; /* Text on light info bg */
    --color-grey-lightest: #fdfdfd;
    --color-grey-lighter: #f8f9fa; /* Body background */
    --color-grey-light: #e9ecef;   /* Table header, menu background, borders */
    --color-grey-medium-light: #e2e6ea; /* Table hover */
    --color-grey-medium: #dee2e6;  /* Borders, input borders */
    --color-grey-dark: #ced4da;   /* Input borders (alternative), muted text */
    --color-grey-darker: #6c757d;  /* Cancel button, separators */
    --color-grey-darkest: #495057; /* Labels, header text */
    --color-text-default: #333;
    --color-white: #ffffff;
    --color-focus-shadow: rgba(0, 123, 255, 0.25);
    --color-placeholder-text: var(--color-grey-darker);
    --link-color: var(--color-primary); /* Added */
    --link-hover-color: var(--color-primary-dark); /* Added */

    /* Flash Message Colors */
    --color-flash-success-bg: #d4edda;
    --color-flash-success-border: #c3e6cb;
    --color-flash-success-text: #155724;
    --color-flash-danger-bg: #f8d7da;
    --color-flash-danger-border: #f5c6cb;
    --color-flash-danger-text: var(--color-danger-text); /* Use defined text color */
    --color-flash-warning-bg: #fff3cd;
    --color-flash-warning-border: #ffeeba;
    --color-flash-warning-text: var(--color-warning-text); /* Use defined text color */
    --color-flash-info-bg: #d1ecf1;
    --color-flash-info-border: #bee5eb;
    --color-flash-info-text: var(--color-info-text); /* Use defined text color */

    /* Typography */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-small: 0.95rem;
    --font-size-large: 1.05rem;
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-none: 0px;
    --spacing-xsmall: 3px;
    --spacing-small: 6px;
    --spacing-medium: 10px;
    --spacing-large: 15px;
    --spacing-xlarge: 20px;
    --spacing-xxlarge: 30px;

    /* Borders */
    --border-radius-small: 4px;
    --border-radius-medium: 5px;
    --border-radius-large: 8px;
    --border-default: 1px solid var(--color-grey-medium); /* Use consistent border color */

    /* Shadows */
    --box-shadow-light: 0 1px 3px rgba(0,0,0,0.05);
    --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.05);
    --box-shadow-menu: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* Navigation */
    --nav-menu-width: 250px;
    --container-width-narrow: 700px; /* Or --form-max-width */

     /* Help */
    --bs-primary-rgb: 0, 86, 179;
}

/* ==========================================================================
   2. Base Styles & Typography
   ========================================================================== */
html {
    /* Prevent automatic text size adjustment */
    -webkit-text-size-adjust: 100%; /* For older WebKit browsers */
    text-size-adjust: 100%;         /* Standard property */
}

body {
    font-family: var(--font-family-sans);
    line-height: var(--line-height-base);
    margin: 0;
    background-color: var(--color-grey-lighter);
    color: var(--color-text-default);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Default heading styles - minimal */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    margin-top: 1.5em; /* Default top margin */
    margin-bottom: 0.75em; /* Default bottom margin */
    font-weight: 600; /* Consistent weight */
}

/* Specific adjustments if needed */
h1 {
    font-size: 1.8em; /* Example size */
    text-align: center; /* Keep h1 centered by default */
}

h2 {
    font-size: 1.5em; /* Example size */
    /* text-align is handled more specifically below */
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

hr { /* Consistent HR styling */
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid var(--color-grey-medium);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.main-content {
    padding: var(--spacing-large) var(--spacing-xxlarge);
    transition: margin-left 0.3s ease-in-out;
    flex-grow: 1;
}

/* Default heading styles WITHIN main content */
.main-content h1,
.main-content h2,
.main-content h3 {
    margin-top: 1.2rem;    /* Adjust space ABOVE headings */
    margin-bottom: 0.6rem; /* Adjust space BELOW headings */
    padding-top: 0;        /* Ensure no top padding */
    border-top: none;      /* Ensure no top border */
    text-align: center;    /* Center headings in main content by default */
}

/* Remove top margin from the very first H1 */
.main-content > h1:first-child {
    margin-top: 0;
}

/* Style for main content when menu is open */
.main-content.content-pushed {
    margin-left: var(--nav-menu-width);
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Forms --- */
/* Consider if this global form style is too broad */
form {
    max-width: var(--container-width-narrow);
    margin: var(--spacing-xlarge) auto;
    padding: 25px var(--spacing-xlarge);
    background-color: var(--color-white);
    border: var(--border-default);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-medium);
}

/* Form Row Layout */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-large);
    margin-bottom: 18px;
}

.form-item {
    flex: 1 1 0;
    min-width: 100px;
}

/* General Form Elements - Apply margin only if NOT part of flex layout */
form div:not(.form-row):not(.form-item) {
     margin-bottom: 18px;
}

label {
    display: block;
    margin-bottom: var(--spacing-small);
    font-weight: 600;
    color: var(--color-grey-darkest);
    font-size: var(--font-size-small);
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: var(--spacing-medium) 12px;
    border: var(--border-default);
    border-radius: var(--border-radius-small);
    box-sizing: border-box;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background-color: var(--color-grey-light);
    color: var(--color-grey-darkest);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium); */
}

select {
    /* Consider appearance: none; for custom styling if needed */
    height: calc(var(--line-height-base) * 1em + (var(--spacing-medium) * 2) + 2px);
}

textarea {
    min-height: 80px;
    resize: vertical;
}

input:focus, /* Combined focus styles */
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
}

/* --- Card Component --- */
.card {
    background-color: var(--color-white); /* Explicitly white in light theme */
    border: var(--border-default);
    border-radius: var(--border-radius-large); /* Match form style */
    box-shadow: var(--box-shadow-medium); /* Match form style */
    margin-bottom: var(--spacing-large); /* Add some space below */
}

.card-body {
     padding: var(--spacing-large); /* Add padding inside */
     /* Note: Bootstrap adds padding, this ensures it if BS wasn't loaded */
}

/* --- Buttons --- */
button[type="submit"] {
    background-color: var(--color-success);
    color: var(--color-white);
    padding: var(--spacing-medium) var(--spacing-xlarge);
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    font-size: var(--font-size-large);
    font-weight: 500;
    transition: background-color 0.2s ease;
    /* margin-right: var(--spacing-large); Space between submit and cancel */
}

button[type="submit"]:hover {
    background-color: var(--color-success-dark);
}

/* Style for links intended to look like buttons (e.g., Cancel) */
a.button-link { /* Removed 'form' prefix to make it more general if needed */
    display: inline-block;
    padding: var(--spacing-medium) var(--spacing-large);
    background-color: var(--color-grey-darker);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius-medium);
    font-size: var(--font-size-large);
    transition: background-color 0.2s ease;
    /* vertical-align: middle; Align with buttons */
}

a.button-link:hover {
    background-color: var(--color-grey-darkest);
    text-decoration: none;
    align-items: flex-start;
}

/* --- Tables --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5em;
    margin-bottom: 1.5rem; /* Use consistent units */
    font-size: var(--font-size-small);
    box-shadow: var(--box-shadow-light);
    border: var(--border-default);
}

th, td {
    padding: 12px var(--spacing-large);
    border: var(--border-default);
    text-align: left;
    vertical-align: middle; /* Changed default to middle */
}

/* Base table header style */
th {
    background-color: var(--color-grey-light);
    color: var(--color-grey-darkest);
    font-weight: 700;
    vertical-align: bottom; /* Headers often look better bottom-aligned */
}

/* Style for placeholder cells spanning columns */
tbody tr td[colspan] {
    text-align: center;
    font-style: italic;
    color: var(--color-grey-darker);
}

/* --- Flash Messages --- */
.flashes {
    list-style: none;
    padding: 0;
    margin: 0 auto var(--spacing-xlarge) auto;
    max-width: var(--container-width-narrow);
}

.flashes li {
    padding: 12px var(--spacing-large);
    margin-bottom: var(--spacing-medium);
    border-radius: var(--border-radius-small);
    border: 1px solid transparent;
    font-size: var(--font-size-small);
}

.flashes .success {
    color: var(--color-flash-success-text);
    background-color: var(--color-flash-success-bg);
    border-color: var(--color-flash-success-border);
}
.flashes .error {
    color: var(--color-flash-danger-text);
    background-color: var(--color-flash-danger-bg);
    border-color: var(--color-flash-danger-border);
}
.flashes .warning {
    color: var(--color-flash-warning-text);
    background-color: var(--color-flash-warning-bg);
    border-color: var(--color-flash-warning-border);
}
.flashes .info {
    color: var(--color-flash-info-text);
    background-color: var(--color-flash-info-bg);
    border-color: var(--color-flash-info-border);
}

/* --- Hamburger Navigation --- */
#hamburger-btn {
    position: fixed;
    top: var(--spacing-large);
    left: var(--spacing-large);
    z-index: 1001;
    width: 40px;
    height: 35px;
    background-color: var(--color-primary);
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 8px 5px;
    box-sizing: border-box;
    border-radius: var(--border-radius-small);
}

#hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-white);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

#hamburger-btn.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
#hamburger-btn.open span:nth-child(2) { opacity: 0; }
#hamburger-btn.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* --- Left Sidebar Menu --- */
#nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--nav-menu-width);
    z-index: 1000;
    background-color: var(--color-grey-light);
    border-right: var(--border-default);
    box-shadow: var(--box-shadow-menu);
    padding-top: 70px; /* Space for hamburger */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: block;
    overflow-y: auto;
}

#nav-menu.menu-active {
    transform: translateX(0);
}

#nav-menu ul { list-style: none; margin: 0; padding: 0; }
#nav-menu li { margin: 0; }

#nav-menu a,
button.nav-button-link {
    display: block;
    width: 100%;
    padding: var(--spacing-medium) var(--spacing-xlarge);
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
}

#nav-menu a:hover,
button.nav-button-link:hover {
    background-color: var(--color-grey-medium-light);
    color: var(--color-primary-dark);
    text-decoration: none;
}

#nav-menu .menu-divider {
    height: 1px; /* Use height 1px instead of border */
    margin: var(--spacing-medium) var(--spacing-xlarge);
    padding: 0;
    border: 0;
    background-color: var(--color-grey-medium); /* Use background for line */
    list-style: none;
}

/* ==========================================================================
   5. Page Specific Styles
   ========================================================================== */

/* --- Pool Header Form --- */
.pool-header-form h2 { /* Override main-content h2 centering */
    text-align: left;
    margin-top: 1.5em; /* Restore some top margin */
    margin-bottom: 0.5em;
    font-size: 1.3em;
    color: var(--color-grey-darkest);
    /* border-top: none; padding-top: 0; inherited */
}
/* Adjust gap between items in form rows specifically for the pool header form */
.pool-header-form .form-row {
    gap: var(--spacing-large); /* Change from large (15px) to medium (10px) */
}
/* --- Player Form --- */
/* .player-form styles seem okay */

/* --- History Page --- */
.season-group {
    margin-bottom: var(--spacing-xxlarge);
    padding: var(--spacing-large);
    background-color: var(--color-grey-lightest);
    border: var(--border-default);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-light);
}

.season-group h2 { /* Override main-content h2 centering */
    margin-top: 0;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
    text-align: left;
    font-size: 1.6em;
    /* border-top: none; padding-top: 0; inherited */
}

.season-group table { margin-top: 0; }

/* Collapsible Season Styles */
.season-toggle {
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* Space for icon */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: block; /* Make the h2 clickable block */
}
.season-toggle:focus { /* Accessibility */
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.toggle-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em; /* Relative to h2 */
    font-weight: bold;
    color: var(--color-primary);
    transition: transform 0.2s ease-in-out;
}
/* Icon rotation handled by JS adding/removing class */
.season-toggle.collapsed .toggle-icon {
    transform: translateY(-50%) rotate(-90deg); /* Point down/right when collapsed */
}

.collapsible-content {
    overflow: hidden;
    max-height: 10000px; /* Arbitrary large height */
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out 0.1s; /* Delay opacity */
    opacity: 1;
    /* Removed border here, rely on season-group border */
}
.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.2s ease-in-out; /* Faster collapse */
    /* margin-top: 0 !important; /* Usually not needed */
}

/* --- Index Page / General Actions --- */
.actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--spacing-medium);
    white-space: nowrap;
}
.actions-cell form { /* Style for form within actions cell */
    display: contents; /* Correct approach */
    margin: 0;
    padding: 0;
}
/* Style for separators within actions cell */
.actions-cell .action-separator {
    color: var(--color-grey-darker);
    /* Gap handles spacing, no margin needed */
}
/* Style for links/buttons within actions cell */
.actions-cell .action-link {
    /* Add specific styles if needed, e.g., for non-button links */
    white-space: nowrap; /* Prevent wrapping */
}

/* --- Pool Detail Page --- */
.pool-detail-header-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xlarge);
    padding: var(--spacing-large);
    border: var(--border-default);
    border-radius: var(--border-radius-medium);
    align-items: center;
    margin-bottom: var(--spacing-large);
    background-color: var(--color-grey-lightest);
}
.pool-detail-header-info > * { /* Target direct children */
    margin: 0;
    flex: 0 1 auto;
}

/* Style the inner container holding the buttons */
.action-buttons .header-action-buttons {
    display: flex;
    align-items: center; /* Vertically align buttons */
    gap: var(--spacing-medium); /* Space between buttons */
    /* Default justify-content is flex-start (left aligned) */
}
/* Make form wrapping Lock button invisible to flex layout */
.action-buttons .header-action-buttons form { 
    display: contents !important; 
    margin: 0; 
    padding: 0;
}

/* Ensure consistent sizing for btn-sm within this container */
.action-buttons .header-action-buttons .btn-sm {
    /* Explicitly set Bootstrap's btn-sm values */
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: var(--bs-border-radius-sm); 
}

.game-result-section {
    margin-bottom: var(--spacing-xlarge);
    padding: var(--spacing-large);
    border: var(--border-default);
    border-radius: var(--border-radius-medium);
    background-color: var(--color-white);
}
/* Style for the number inputs in the game result entry table */
.game-result-section table tbody td input.result-input {
    width: 100%;
    text-align: center;
}
.game-special-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-large);
    align-items: flex-end;
    margin-bottom: var(--spacing-large);
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
}
.game-special-row .form-item {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 200px;
}
.game-special-row .form-item:has(input[type="checkbox"]) {
    flex-grow: 0;
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    padding-bottom: var(--spacing-medium); /* Align checkbox baseline */
}
.game-special-row .form-item:has(input[type="checkbox"]) label {
    margin-bottom: 0;
    white-space: nowrap;
}
.game-special-row .form-item input[type="checkbox"] {
    width: auto;
    margin-top: 0;
    flex-shrink: 0;
}
/* Make delete button in results table smaller */
.results-summary-table .actions-cell button.btn-sm {
    padding: 0.1rem 0.3rem; /* Drastically reduce padding */
    font-size: 0.750rem;    /* Reduce font size (affects icon size) */
    line-height: 1.2;     /* Adjust line height for smaller font */
}
/* Style the first cell (Game # + Delete Button) in the results table */
.results-summary-table tbody td:first-child {
    display: flex;              /* Use flexbox to arrange items */
    align-items: center;        /* Vertically center button and number */
    gap: var(--spacing-medium); /* Space between button and number */
    text-align: left;           /* Override general cell centering for this column */
    /* Keep default padding or adjust slightly if needed */
    /* padding-left: var(--spacing-small); */
}
/* Reset margin on the form inside the first cell */
.results-summary-table tbody td:first-child form {
    margin: 0;
    padding: 0;
    line-height: 1; /* Prevent form from adding extra height */
}
.results-summary-table button.results-delete-btn { /* Use specific class */
    padding: 0.1rem 0.2rem;
    font-size: 0.65rem;
    line-height: 1.2;
    /* Ensure it aligns nicely in flex */
    vertical-align: middle; /* Although align-items should handle this */
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--color-danger-text) !important;
}
.results-summary-table button.results-delete-btn i.fas {
    font-size: 2.0em; /* Make icon 120% of the button's font-size (0.65rem) */
    /* Or use a fixed rem value: font-size: 0.8rem; */
    vertical-align: middle; /* Helps ensure alignment */
}
/* --- Password Visibility Toggle Component --- */
.password-wrapper {
    position: relative; /* Establishes positioning context */
    width: 100%; /* Take full width of its container */
}

/* Style the toggle button */
.toggle-password-button {
    /* Positioning */
    position: absolute;
    right: 10px; /* Position from right edge */
    top: 50%;    /* Position vertically centered */
    transform: translateY(-50%); /* Fine-tune vertical centering */

    /* Reset button appearance */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;

    /* Styling */
    font-size: 1.1em; /* Adjust icon size */
    color: var(--color-grey-darker); /* Use theme variable */
    line-height: 1; /* Prevent extra height */
    display: inline-flex; /* Helps center icon if needed */
    align-items: center;
    justify-content: center;
    /* Ensure button is clickable even if input padding is small */
    height: 100%;
    padding-left: 5px; /* Add a little space from input edge */
    padding-right: 5px;
}

/* Focus style */
.toggle-password-button:focus {
    outline: 1px dotted var(--color-grey-darker);
    outline-offset: 2px;
}
/* --- pool-header Page Specific Styles --- */

.page-header-actions {
    display: flex;              /* Enable flexbox */
    /* justify-content: space-between; Push title and button to opposite ends */
    align-items: center;        /* Vertically align title and button */
    margin-bottom: 1rem;        /* Add some space below the header row */
    flex-wrap: wrap;            /* Allow button to wrap below title on very small screens */
    gap: 1rem;                  /* Add gap if they wrap */
}

/* Optional: Ensure h1 margin doesn't interfere too much in flex */
.page-header-actions h1 {
    margin-top: 0; 
    margin-bottom: 0; 
    flex-grow: 1;
    text-align: center;
}
/* ==========================================================================
   6. Dark Theme Overrides
   ========================================================================== */

/* --- 6.1 Dark Theme Variable Definitions --- */
html.dark-theme {
    /* Core Colors */
    --color-primary: #64b5f6;
    --color-primary-dark: #90caf9;
    --color-success: #81c784;
    --color-success-dark: #a5d6a7;
    --color-danger: #ef9a9a;
    --color-danger-text: #ef9a9a; /* Text on dark danger bg */
    --color-warning: #fff59d;
    --color-warning-text: #fff59d; /* Text on dark warning bg */
    --color-info: #9fa8da;
    --color-info-text: #9fa8da; /* Text on dark info bg */
    --color-grey-lightest: #2b2b2b; /* Darker form/section bg */
    --color-grey-lighter: #1a1a1a;  /* Dark body bg */
    --color-grey-light: #212121;   /* Dark header/menu bg */
    --color-grey-medium-light: #383838; /* Dark hover */
    --color-grey-medium: #555;     /* Dark borders */
    --color-grey-dark: #666;      /* Darker borders, muted text */
    --color-grey-darker: #aaa;     /* Dark separators, button text */
    --color-grey-darkest: #ccc;    /* Dark labels, header text */
    --color-text-default: #e0e0e0;
    --color-white: #121212; /* Base dark surface */
    --color-focus-shadow: rgba(100, 181, 246, 0.3);
    --color-placeholder-text: var(--color-grey-dark);
    --link-color: var(--color-primary);
    --link-hover-color: var(--color-primary-dark);

    /* Flash Message Colors */
    --color-flash-success-bg: #1a3a24;
    --color-flash-success-border: #2a5c3a;
    --color-flash-success-text: var(--color-success-dark);
    --color-flash-danger-bg: #4d1f24;
    --color-flash-danger-border: #7a3b42;
    --color-flash-danger-text: var(--color-danger);
    --color-flash-warning-bg: #5c480d;
    --color-flash-warning-border: #8a6d1f;
    --color-flash-warning-text: var(--color-warning);
    --color-flash-info-bg: #1a3c45;
    --color-flash-info-border: #2a606d;
    --color-flash-info-text: var(--color-info);
    --zebra-bg-color: #2c2c2c; /* Dark zebra stripe */

    /* Input/Select Specifics */
    --input-bg-color: #333;
    --input-text-color: var(--color-text-default);
    --input-border-color: var(--color-grey-dark);
    --input-focus-border-color: var(--color-primary);
    --input-focus-shadow: var(--color-focus-shadow);

    /* Button Specifics */
    --button-secondary-bg: #555;
    --button-secondary-hover-bg: #666;

    /* Shadows */
    --box-shadow-light: 0 1px 3px rgba(0,0,0,0.3);
    --box-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.3);
    --box-shadow-menu: 0 4px 8px rgba(0, 0, 0, 0.4);

    /* Help */
    --bs-primary-rgb: 100, 181, 246;
}

/* --- 6.2 Dark Theme Style Applications --- */

html.dark-theme body {
    background-color: var(--color-grey-lighter);
    color: var(--color-text-default);
}

html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6 {
    color: var(--color-primary);
}

html.dark-theme a { color: var(--link-color); }
html.dark-theme a:hover { color: var(--link-hover-color); }
html.dark-theme hr { border-top-color: var(--color-grey-medium); }

/* Components */
html.dark-theme form,
html.dark-theme .season-group,
html.dark-theme .pool-detail-header-info,
html.dark-theme .game-result-section {
    background-color: var(--color-grey-lightest);
    border-color: var(--color-grey-medium);
    box-shadow: var(--box-shadow-light);
}

html.dark-theme label { color: var(--color-grey-darkest); }

html.dark-theme input[type="text"],
html.dark-theme input[type="date"],
html.dark-theme input[type="number"],
html.dark-theme input[type="password"],
html.dark-theme select,
html.dark-theme textarea {
    width: 100%;
    padding: var(--spacing-medium);
    border: var(--border-default);
    border-color: var(--input-border-color);
    border-radius: var(--border-radius-small);
    box-sizing: border-box;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;    
    /* margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium); */
}

html.dark-theme input:-webkit-autofill,
html.dark-theme input:-webkit-autofill:hover,
html.dark-theme input:-webkit-autofill:focus,
html.dark-theme input:-webkit-autofill:active {
    /* Force text color appearance using text-fill-color */
    -webkit-text-fill-color: var(--input-text-color) !important; /* Use your dark theme text color */
    /* Use an inset box shadow to 'override' the background color */
    box-shadow: 0 0 0 30px var(--input-bg-color) inset !important; /* Use your dark theme input background */
    /* Optional: Adjust caret color */
    caret-color: var(--input-text-color);
    /* Ensure border color remains consistent */
    border-color: var(--input-border-color) !important;
}

/* Standard autofill pseudo-class (less common support, but good to include) */
/* Note: Standard 'autofill' doesn't support text color changes well, rely on -webkit- */
html.dark-theme input:autofill,
html.dark-theme input:autofill:hover,
html.dark-theme input:autofill:focus,
html.dark-theme input:autofill:active {
     /* Use an inset box shadow to 'override' the background color */
    box-shadow: 0 0 0 30px var(--input-bg-color) inset !important; /* Use your dark theme input background */
     /* Optional: Adjust caret color */
    caret-color: var(--input-text-color);
     /* Ensure border color remains consistent */
    border-color: var(--input-border-color) !important;
}

html.dark-theme input:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus {
    border-color: var(--input-focus-border-color);
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}
html.dark-theme input[type="checkbox"] { accent-color: var(--color-primary); }

html.dark-theme a.button-link {
    background-color: var(--button-secondary-bg);
    color: var(--color-text-default);
}
html.dark-theme a.button-link:hover { 
    background-color: var(--button-secondary-hover-bg); 
    align-items: flex-start;
}

/* Tables */
html.dark-theme table {
    border-color: var(--color-grey-medium);
    box-shadow: var(--box-shadow-light);
}
/* Consolidated Dark Theme Table Header */
html.dark-theme th {
    background-color: var(--color-grey-light); /* Dark theme header bg */
    color: var(--color-grey-darkest);      /* Dark theme header text */
    border-color: var(--color-grey-medium);   /* Dark theme border */
}
html.dark-theme td { border-color: var(--color-grey-medium); }

html.dark-theme tbody tr td[colspan] { color: var(--color-grey-darker); }
/* Flash Messages */
html.dark-theme .flashes .success { color: var(--color-flash-success-text); background-color: var(--color-flash-success-bg); border-color: var(--color-flash-success-border); }
html.dark-theme .flashes .error { color: var(--color-flash-danger-text); background-color: var(--color-flash-danger-bg); border-color: var(--color-flash-danger-border); }
html.dark-theme .flashes .warning { color: var(--color-flash-warning-text); background-color: var(--color-flash-warning-bg); border-color: var(--color-flash-warning-border); }
html.dark-theme .flashes .info { color: var(--color-flash-info-text); background-color: var(--color-flash-info-bg); border-color: var(--color-flash-info-border); }

/* Navigation */
html.dark-theme #hamburger-btn { background-color: var(--color-primary); /* Or a different dark theme color? */ }
html.dark-theme #hamburger-btn span { background-color: var(--color-text-default); }
html.dark-theme #nav-menu {
    background-color: var(--color-grey-light);
    border-right-color: var(--color-grey-medium);
    box-shadow: var(--box-shadow-menu);
}
html.dark-theme #nav-menu a,
html.dark-theme button.nav-button-link { color: var(--color-primary); }
html.dark-theme #nav-menu a:hover,
html.dark-theme button.nav-button-link:hover {
    background-color: var(--color-grey-medium-light);
    color: var(--color-primary-dark);
}
html.dark-theme #nav-menu .menu-divider { background-color: var(--color-grey-medium); }

/* History Page */
html.dark-theme .season-group h2 { border-bottom-color: var(--color-primary); }
html.dark-theme .toggle-icon { color: var(--color-primary); }
/* html.dark-theme .collapsible-content { border-color: var(--color-grey-medium); } */ /* Border handled by season-group */

/* Index Page / Actions */
html.dark-theme .actions-cell .action-separator { color: var(--color-grey-darker); }

/* Pool Detail Page */
html.dark-theme .game-special-row .form-item:has(input[type="checkbox"]) label { color: var(--color-grey-darkest); }
/* html.dark-theme .results-summary-table button.results-delete-btn {
    color: var(--color-danger) !important; Use dark theme danger color (#ef9a9a) */

/* Make lock icons lighter in dark mode */
html.dark-theme .fas.fa-lock,
html.dark-theme .fas.fa-unlock {
    color: var(--color-grey-darker); /* Use a lighter grey like #aaa */
}

/* Dark theme adjustments for password toggle */
html.dark-theme .toggle-password-button {
    color: var(--color-grey-darker); /* Use appropriate dark theme grey */
}
html.dark-theme .toggle-password-button:focus {
     outline-color: var(--color-grey-darker);
}

/* ==========================================================================
   Direct Bootstrap Table Style Overrides - TARGETING CELLS (WITHOUT !important)
   ========================================================================== */

/* --- Light Theme Table Cell Overrides --- */

/* Base table cell colors */
table.table > tbody > tr > td,
table.table > tbody > tr > th { /* Target cells in base rows */
    color: var(--color-text-default); 
    background-color: var(--color-white); 
    text-align: center; 
    vertical-align: middle;
    font-size: 1.2em;
}
table.table > tbody > tr > td:first-child,
table.table > tbody > tr > th:first-child { /* Covers if first cell is th */
    font-weight: bold;
}
/* Striped table cell colors (Bootstrap 5 stripes ODD rows) */
table.table-striped > tbody > tr:nth-child(odd) > td,
table.table-striped > tbody > tr:nth-child(odd) > th { /* Target cells in striped rows */
    color: var(--color-text-default); 
    background-color: var(--color-grey-light); 
    text-align: center; 
    vertical-align: middle;
    font-size: 1.2em;
}

/* Hover table cell colors */
table.table-hover > tbody > tr:hover > td,
table.table-hover > tbody > tr:hover > th { /* Target cells in hovered rows */
    color: var(--color-text-default); 
    background-color: var(--color-grey-medium-light); 
    text-align: center; 
    vertical-align: middle;
    font-size: 1.2em;
}

table.table > thead > tr > th { /* Target headers in thead */
    color: var(--color-grey-darkest);
    background-color: var(--color-grey-light);
    border-color: var(--color-grey-medium);
    text-align: center; 
    vertical-align: middle;
}
/* --- Dark Theme Table Cell Overrides --- */

html.dark-theme table.table > tbody > tr > td,
html.dark-theme table.table > tbody > tr > th {
    color: var(--color-text-default); 
    background-color: var(--color-grey-lighter); 
}

html.dark-theme table.table-striped > tbody > tr:nth-child(odd) > td,
html.dark-theme table.table-striped > tbody > tr:nth-child(odd) > th {
    color: var(--color-text-default); 
    background-color: var(--zebra-bg-color); 
}

html.dark-theme table.table-hover > tbody > tr:hover > td,
html.dark-theme table.table-hover > tbody > tr:hover > th {
    color: var(--color-text-default); 
    background-color: var(--color-grey-medium-light); 
}

html.dark-theme table.table > thead > tr > th {
    color: var(--color-grey-darkest);
    background-color: var(--color-grey-light);
    border-color: var(--color-grey-medium);
    text-align: center; /* ADDED */
    vertical-align: middle; /* CHANGED from bottom */
}
/* --- End Direct Overrides --- */

/* Copy starting from here */
.help-section {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius-medium);
    border: 1px solid transparent; /* Base border */
}
.help-section h2 {
    text-align: left; /* Override centered h2 */
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-primary);
}
.help-section ul {
    margin-bottom: 0.5rem;
}
.help-section li {
    margin-bottom: 0.3rem;
}
/* Highlight current user's role section */
.current-role-section {
    border-color: var(--color-primary); /* Use primary color for border */
    background-color: rgba(var(--bs-primary-rgb), 0.05); /* Subtle background tint - requires BS vars or define your own RGB */
}
/* Dark theme adjustment for highlight */
html.dark-theme .current-role-section {
     border-color: var(--color-primary);
     background-color: rgba(var(--bs-primary-rgb), 0.1); /* Slightly stronger tint in dark mode */
}

/* --- End of file --- */