/* General Reset & Body */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    /* CSS Variables for easier theming - light theme defaults */
    --body-bg-color: #f4f4f4; 
    --body-text-color: #333; 

    --background-color: #fff; 
    --secondary-background-color: #f9f9f9;
    --secondary-background-color-alt: #f0f2f5; 

    --text-color: #333;
    --text-color-secondary: #555;
    --text-color-light: #666;
    --text-color-accent: #fff; 

    --border-color: #ddd;
    --border-color-light: #e0e0e0;
    --border-color-lighter: #eee;

    --hover-background-color: #e9e9e9;
    --hover-text-color: #222; 

    --primary-accent-color: #7289da;
    --primary-accent-hover-color: #5865F2;
    --nav-gradient-start: #7289da;
    --nav-gradient-end: #6B4F8B;
    --nav-text-color: #fff;

    --danger-color: #d9534f;
    --danger-hover-color: #c9302c;
    --danger-text-color: #721c24;
    --danger-background-soft: #f8d7da;
    --danger-border-soft: #f5c6cb;

    --success-color: #5cb85c; 
    --success-hover-color: #4cae4c; 
    --success-text-color: #155724;
    --success-background-soft: #d4edda;
    --success-border-soft: #c3e6cb;

    --info-color: #5bc0de; 
    --info-hover-color: #31b0d5; 

    /* Table Specific Variables */
    --table-header-bg: #333;
    --table-header-text: #fff;
    --table-row-even-bg: var(--secondary-background-color-alt);
    --table-row-hover-bg: var(--hover-background-color);
    --table-border-color: var(--border-color);
    --admin-table-header-bg: var(--secondary-background-color);
    --admin-table-header-text: var(--text-color-secondary);
    --admin-table-border-color: var(--border-color-light);

    /* Modal Specific Variables */
    --modal-background-color: #fefefe;
    --modal-text-color: #333;
    --modal-border-color: #888;
    --modal-header-color: var(--text-color); 
    --modal-header-border-color: var(--border-color-lighter);
    --modal-close-button-color: #aaa;
    --modal-close-button-hover-color: black;
    --modal-label-color: var(--text-color-secondary);
    --modal-input-border-color: #ccc;
    --modal-input-background-color: #fff;
    --modal-input-text-color: var(--text-color);
    --modal-overlay-color: rgba(0,0,0,0.6);

    /* Button Specific Variables */
    --button-primary-bg: var(--primary-accent-color);
    --button-primary-text: var(--text-color-accent);
    --button-primary-hover-bg: var(--primary-accent-hover-color);
    --button-danger-bg: var(--danger-color);
    --button-danger-text: var(--text-color-accent);
    --button-danger-hover-bg: var(--danger-hover-color);
    --button-disabled-bg: #ccc;
    --button-disabled-text: #666;

    /* Links */
    --link-color: #4F7F9F; 
    --link-hover-color: var(--primary-accent-hover-color);
    
    /* Footer Specific Variables */
    --footer-bg-color: #333;
    --footer-text-color: #fff;
    --footer-link-color: #8ab4f8; 


    background-color: var(--body-bg-color);
    color: var(--body-text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Wrapper & Layout */
.site-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

main, #content-container, #content-area, #error-content-area, #admin-container, #account-settings-container, .setup-container, #bingo-book-container { 
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

#banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
}

/* Navigation */
#main-nav {
    background-image: linear-gradient(to right, var(--nav-gradient-start), var(--nav-gradient-end));
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 50px;
    box-sizing: border-box;
    height: 40px; /* Max height for the logo link container */
}

.nav-section {
    display: flex;
    align-items: center;
}

.nav-left {
    flex: 1 1 auto; /* Allows it to grow and shrink */
}

.nav-center {
    flex: 0 1 auto; /* Centered element, doesn't grow, based on its own content width */
}

.nav-right {
    flex: 1 1 auto; /* Allows it to grow and shrink */
    justify-content: flex-end; /* Aligns user profile to the far right */
}

.navbar-instance-logo-link {
    margin-right: 15px;
    height: 40px; /* Max height for the logo link container */
}

#navbar-instance-logo {
    max-height: 100%; /* Logo will scale down to fit the 40px height of its container */
    height: auto;     /* Maintain aspect ratio */
    width: auto;      /* Maintain aspect ratio */
    display: block;   /* Remove extra space below image */
    height: 40px; /* Max height for the logo link container */
}

/* Navbar Search Container */
.navbar-search-container {
    position: relative;
}

#member-search-bar {
    width: 200px; /* Or adjust as needed */
    padding: 6px 10px;
    font-size: 0.9em;
    border: 1px solid var(--border-color-light);
    border-radius: 15px; /* Pill shape */
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent */
    color: var(--nav-text-color);
    transition: all 0.3s ease;
}
#member-search-bar::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
#member-search-bar:focus {
    width: 200px; /* Expand on focus */
    background-color: rgba(255, 255, 255, 0.3);
    outline: none;
    border-color: #fff;
}

/* Search Results Dropdown */
.search-results-dropdown {
    display: none;
    position: absolute;
    top: 120%; /* Position below search bar */
    left: 0;
    width: 100%;
    min-width: 300px;
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1100;
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color-lighter);
    cursor: pointer;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: var(--hover-background-color);
}
.search-result-item.none {
    color: var(--text-color-light);
    font-style: italic;
    cursor: default;
}
.search-result-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
}
.search-result-name {
    font-weight: bold;
    flex-grow: 1;
}
.search-result-rank {
    font-size: 0.85em;
    color: var(--text-color-light);
}

/* === Subscription Plan Card Styles (Corrected for AdminCP) === */
.pricing-table {
    display: flex;
    flex-direction: row; /* Ensure items are in a row */
    justify-content: center; /* Center the group of cards */
    flex-wrap: nowrap; /* CRITICAL: Prevent cards from wrapping to the next line */
    gap: 15px;
    width: 100%; /* Take up full width of the parent */
    box-sizing: border-box;
}

.plan-card {
    background-color: var(--secondary-background-color-alt);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    display: flex;
    flex-direction: column;

    /* --- Set a fixed width for each card --- */
    width: 24%; /* Give each card a specific width */
    max-width: 260px; /* Prevent cards from getting too large on very wide screens */
    box-sizing: border-box;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.plan-card h3 {
    font-size: 1.5em;
    color: var(--primary-accent-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.plan-card .plan-price {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 5px;
}

.plan-card .price-period {
    font-size: 0.5em;
    font-weight: normal;
    color: var(--text-color-light);
}

.plan-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
    text-align: left;
    flex-grow: 1; /* Allows the list to grow, pushing the button down */
}

.plan-card ul li {
    font-size: 0.9em;
    color: var(--text-color);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.plan-card ul li i.fa-check {
    color: var(--success-color);
    margin-right: 8px;
    font-size: 1.1em;
}

.plan-card .button.plan-cta {
    display: block;
    padding: 12px 20px;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: auto; /* Pushes button to the very bottom of the card */
}

.plan-card .button.plan-cta:hover {
    background-color: var(--button-primary-hover-bg);
}

/* === PayPal Button Container Styling === */

/* Target all PayPal button containers within the pricing table */
.pricing-table [id^="paypal-button-container-"] {
    margin-top: auto; /* Pushes the container to the bottom of the card */
    padding-top: 15px; /* Adds some space above the PayPal button */
    min-height: 75px; /* Gives the container a minimum height to prevent layout collapse while PayPal buttons load */
}

/* === Styles for Owner's Panel Plan Card States === */

/* This style dims out the entire card for tiers lower than the user's current plan */
.plan-card.plan-disabled {
    opacity: 0.6;
    filter: grayscale(80%);
    box-shadow: none;
    transform: none; /* Disables the hover-to-lift effect */
}

.plan-card.plan-disabled:hover {
    transform: none; /* Explicitly keeps it from lifting on hover */
}

/* This style adds a highlight border to the user's current plan card */
.plan-card.plan-current {
    border: 2px solid var(--primary-accent-color);
}

/* This styles the buttons on BOTH the lower and current tier cards to look disabled and be unclickable */
.plan-card .plan-cta.button-disabled {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    cursor: not-allowed;
    pointer-events: none; /* This is the key that makes the button unclickable */
}

/* Mobile adjustments for search */
@media (max-width: 768px) {
    .navbar-search-container {
        width: calc(100% - 40px); /* Take up available width in mobile menu */
        margin: 10px 0;
    }
    #member-search-bar {
        width: 100%; /* Full width inside mobile menu */
    }
    #member-search-bar:focus {
        width: 100%; /* No expansion needed on mobile */
    }
    .search-results-dropdown {
        width: 100%; /* Match search bar width */
        min-width: unset;
    }
}


.hamburger {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    z-index: 101; flex-direction: column; justify-content: space-around;
    width: 30px; height: 25px; background: transparent; border: none;
    cursor: pointer; display: none;
}
.hamburger .bar { width: 100%; height: 3px; background-color: var(--nav-text-color); border-radius: 10px; transition: all 0.1s ease-in-out; }
.nav-links { 
    display: flex; 
    justify-content: center; 
    flex-grow: 1; /* Allow nav-links to take available space */
}
#main-nav .nav-links ul { list-style: none; margin: 0; padding: 0; display: flex; }
#main-nav .nav-links ul li { margin: 0 15px; }
#main-nav .nav-links ul li a { 
    color: var(--nav-text-color); 
    text-decoration: none; 
    display: flex; /* Align icon and text */
    align-items: center;
    transition: color 0.2s ease-in-out; /* For hover fade effect */
}
#main-nav .nav-links ul li a:hover {
    color: rgba(255, 255, 255, 0.75); /* Example: Fade to a lighter/dimmer version of nav text */
    /* Or use a variable if you define one for hover color */
}
#main-nav .nav-links ul li a i {
    margin-right: 8px; /* Space between icon and text */
    width: 1.1em; /* Consistent icon width */
    text-align: center;
}

.nav-user-area { 
    position: absolute; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    padding-right: 15px; 
    z-index: 100;
    display: flex; /* Align bell icon and user dropdown */
    align-items: center;
}
.navbar-icon-button {
    color: var(--nav-text-color);
    text-decoration: none;
    font-size: 1.3em; /* Adjust size as needed */
    padding: 0 10px; /* Spacing around the bell */
    display: flex;
    align-items: center;
    height: 100%;
    transition: color 0.2s ease-in-out;
}

.navbar-icon-button:hover {
    color: rgba(255, 255, 255, 0.75); /* Similar hover as other links */
}
.nav-user-area .dropbtn { display: flex; align-items: center; text-decoration: none; color: var(--nav-text-color); }
.navbar-pfp { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255, 255, 255, 0.2); }
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    display: none; position: absolute;
    background-color: var(--primary-accent-color);
    min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 102; border-radius: 5px; overflow: hidden;
    left: auto; right: 0; top: 100%; margin-top: 5px;
}
.dropdown-content a { color: var(--nav-text-color); padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: var(--primary-accent-hover-color); }
.dropdown-content.show { display: block; }
.dropdown-arrow { margin-left: 5px; transition: transform 0.3s ease-in-out; display: inline-block; }
.dropdown-arrow.rotate { transform: rotate(180deg); }

/* Main Content Containers */
#content-container,
#admin-container,
#account-settings-container,
#bingo-book-container { 
    display: flex;
    max-width: 1200px; 
    margin: 20px auto;
    padding: 20px;
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    gap: 20px; 
    border: 1px solid var(--border-color);
}

#content-area,
#error-content-area,
.setup-container { 
    max-width: 1200px; 
    margin: 40px auto; 
    padding: 30px;
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color); 
    display: block; 
}
#bingo-book-container { 
    display: flex;
    gap: 20px;
}

#error-content-area { text-align: center; }
.setup-container { text-align: left; }

.text-wrapper {
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}

/* Typographic Styles for #content-area (Privacy, ToS) */
#content-area h1, #error-content-area h1 { color: var(--text-color); border-bottom: 2px solid var(--border-color-lighter); padding-bottom: 10px; margin-bottom: 20px; font-size: 2em; }
#error-content-area h1 { color: var(--danger-color); font-size: 3em; }
#content-area h2 { color: var(--text-color-secondary); margin-top: 30px; margin-bottom: 15px; font-size: 1.5em; }
#content-area h3 { color: var(--text-color-secondary); margin-top: 25px; margin-bottom: 10px; font-size: 1.25em; }
#content-area p, #content-area ul, #error-content-area p { color: var(--text-color-light); line-height: 1.6; margin-bottom: 15px; }
#error-content-area p { font-size: 1.1em; }
#content-area ul { list-style-type: disc; padding-left: 25px; }
#content-area li { margin-bottom: 8px; }
#content-area a { color: var(--link-color); text-decoration: none; }
#error-content-area a { color: var(--primary-accent-color); font-weight: bold; text-decoration: none; }
#content-area a:hover, #error-content-area a:hover { text-decoration: underline; color: var(--link-hover-color); }
#content-area em { display: block; margin-bottom: 20px; font-style: italic; color: var(--text-color-light); }

/* Community Page Specifics */
#main-content-display { flex-grow: 1; flex-basis: 0; }
#squad-list { flex: 0 0 220px; padding: 15px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--secondary-background-color); height: fit-content; }
#squad-list h2 { color: var(--text-color); border-bottom: 2px solid var(--border-color-light); padding-bottom: 10px; margin-bottom: 15px; font-size: 1.3em; }
#squad-filter-list { list-style: none; padding: 0; margin: 0; }
.squad-list-item { cursor: pointer; padding: 8px 10px; margin-bottom: 5px; background-color: var(--secondary-background-color-alt); color: var(--text-color); border-radius: 5px; transition: background-color 0.2s ease, color 0.2s ease; }
.squad-list-item:hover { background-color: var(--hover-background-color); color: var(--hover-text-color); }
.squad-list-item.active-squad { background-color: var(--primary-accent-color); color: var(--text-color-accent); font-weight: bold; }

#community-default-view { display: flex; flex-direction: column; align-items: center; padding: 20px; text-align: center; width: 100%; box-sizing: border-box; }
#community-hero-section { position: relative; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; height: 150px; margin-bottom: 20px; }
#community-hub-banner-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 8px; background-color: var(--secondary-background-color); z-index: 1; }
#community-hub-banner-container h2 { color: var(--text-color-accent); font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.6); margin: 0; padding: 0; border-bottom: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.community-hub-banner-icon { position: absolute; top: 10px; background-color: rgba(0,0,0,0.5); border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--text-color-accent); font-size: 1.2em; transition: background-color 0.2s ease; text-decoration: none; z-index: 2; }
.community-hub-banner-icon:hover { background-color: rgba(0,0,0,0.7); }
.community-hub-upload-icon { right: 10px; }
.community-hub-remove-icon { right: 50px; }
#community-hub-logo-container { position: absolute; width: 120px; height: 120px; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; border-radius: 8px !important; background-color: var(--secondary-background-color-alt); box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; }
#community-hub-logo-image { width: 100%; height: 100%; object-fit: cover; border-radius: 8px !important; z-index: 1; }
.community-hub-logo-icon { position: absolute; background-color: rgba(0,0,0,0.5); border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--text-color-accent); font-size: 1.2em; transition: background-color 0.2s ease; text-decoration: none; z-index: 11; }
.community-hub-logo-icon:hover { background-color: rgba(0,0,0,0.7); }
.community-hub-logo-upload-icon { right: -15px; bottom: -15px; }
.community-hub-logo-remove-icon { left: -15px; bottom: -15px; }
#community-default-view h2.welcome-heading { color: var(--text-color); font-size: 2em; margin-top: 0; margin-bottom: 10px; }


#login-log-box, #admin-log-box { width: 100%; background-color: var(--background-color); border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; text-align: left; margin: 20px 0; border: 1px solid var(--border-color-light); }
#admin-log-box { background-color: var(--secondary-background-color-alt); }
#login-log-box h3, #admin-log-box h3 { color: var(--text-color-secondary); border-bottom: 1px solid var(--border-color-lighter); padding-bottom: 10px; margin-bottom: 15px; margin-top: 0; }
#admin-log-box h3 { font-size: 1.2em; }
#login-log-box ul, #admin-log-list { list-style: none; padding: 0; margin: 0; color: var(--text-color-light); }
#admin-log-list { max-height: 320px; overflow-y: auto; font-size: 0.9em; color: var(--text-color); }
#login-log-box li, #admin-log-list li { border-bottom: 1px dashed var(--border-color-lighter); line-height: 1.5; }
#login-log-box li { padding: 8px 0; }
#admin-log-list li { padding: 7px 5px; overflow-wrap: break-word; word-break: break-all; } 
#login-log-box li:last-child, #admin-log-list li:last-child { border-bottom: none; }

#squad-members-display-wrapper { width: 100%; box-sizing: border-box; padding: 20px; }
#squad-dynamic-banner { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; height: 100px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--secondary-background-color); display: flex; justify-content: center; align-items: center; color: var(--text-color-accent); font-size: 2em; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); border-radius: 8px; margin-bottom: 20px; position: relative; }
#squad-dynamic-banner h2 { color: inherit; margin: 0; padding: 0; border-bottom: none; }
.banner-icon { position: absolute;top: 10px;background-color: rgba(0, 0, 0, 0.5);border-radius: 50%;width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;cursor: pointer;color: var(--text-color-accent);font-size: 1.2em;transition: background-color 0.2s ease;text-decoration: none;z-index: 2;}
.upload-icon { right: 10px; } 
.remove-icon { right: 50px; } 
.banner-icon:hover { background-color: rgba(0, 0, 0, 0.7); }
.hidden-file-input { display: none; }
.squad-members-container { display: none; width: 100%; }
.rank-table-container { max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 30px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background-color: var(--background-color); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.rank-table-container h3 { background-color: var(--secondary-background-color); color: var(--text-color-secondary); padding: 10px 15px; margin: 0; font-size: 1.1em; text-align: left; }
.info-message { background-color: var(--secondary-background-color-alt); color: var(--text-color); border: 1px solid var(--border-color-light); padding: 10px 15px; border-radius: 5px; margin-bottom: 15px; text-align: center; }
#member-display-area { flex-grow: 1; padding: 0; }

.community-overview-stats { text-align: center; margin: 20px 0; padding: 15px; background-color: var(--secondary-background-color-alt); border-radius: 8px; border: 1px solid var(--border-color-light); }
.community-overview-stats h3 { margin-top: 0; color: var(--text-color-secondary); }
.community-overview-stats .total-members-count { font-size: 2em; font-weight: bold; color: var(--primary-accent-color); }
.division-trackers-area { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 10px 0 20px 0; gap: 20px; margin-bottom: 20px; }

.division-tracker {
    width: 160px; 
    padding: 15px; 
    text-align: center;
    background-color: var(--secondary-background-color); 
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
    border: 1px solid var(--border-color-light);
    position: relative; 
    overflow: hidden;
    /* --- NEW BACKGROUND IMAGE STYLES --- */
    background-size: cover;    /* Ensures the image covers the area, might crop */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat;
    min-height: 180px; /* Or whatever height your current trackers achieve with padding + content */
                       /* Adjust this to ensure consistent tracker height */
    display: flex; /* To help center overlay if needed, or manage content flow */
    flex-direction: column;
    justify-content: center; /* Example: Vertically center content in the overlay */
}

.division-tracker:hover { transform: translateY(-5px); }

.tracker-content-overlay {
    background-color: rgba(255, 251, 251, 0.61); /* Semi-transparent dark overlay */
                                          /* For light theme, you might use rgba(255, 255, 255, 0.6); */
    padding: 15px; /* Moved padding here from .division-tracker */
    border-radius: 8px; /* Match parent if overlay covers whole area */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
}

.tracker-circle-progress { /* Should still work within overlay */
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px auto;
}
.tracker-label, .tracker-info, .tracker-percentage {
    color: #FFFFFF; /* Ensure text is white (or light) to show up on dark overlay/varied backgrounds */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.815); /* Add text shadow for readability */
}

.tracker-circle-progress { position: relative; width: 100px; height: 100px; margin: 0 auto 10px auto; border-radius: 50%; }
.circular-chart { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.circle-bg { fill: none; stroke: var(--border-color-light); stroke-width: 3.2; }
.progress-ring-circle { fill: none; stroke-width: 3.8; stroke-linecap: round; transition: stroke-dasharray 0.5s ease-out; } 
.progress-gradient-start { stop-color:#5DADE2; stop-opacity:1; }
.progress-gradient-end { stop-color:#2E86C1; stop-opacity:1; }
.tracker-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.6em; font-weight: bold; color: var(--text-color); }
.tracker-label { font-weight: bold; margin-bottom: 5px; font-size: 1em; color: var(--text-color-secondary); word-wrap: break-word; }
.tracker-info { font-size: 0.9em; color: var(--text-color-light); margin-top: 3px; }



/* --- UNIFIED TABLE STYLES v3 --- */
/* This block applies to all data tables for consistent layout */

.admin-table,
.bingo-table,
#icms-access-table,
.rank-table-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
}

/* Base styling for all headers and cells */
.admin-table th, .admin-table td,
.bingo-table th, .bingo-table td,
#icms-access-table th, #icms-access-table td,
.rank-table-container table th, .rank-table-container table td {
    padding: 8px 5px;
    border: 1px solid var(--table-border-color);
    vertical-align: middle; /* Ensures vertical centering for all cells */
}

/* Header-specific styling */
.admin-table thead th,
.bingo-table thead th,
#icms-access-table thead th,
.rank-table-container table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: bold;
    text-align: center; /* Center all headers by default */
}

/* --- TEXT ALIGNMENT OVERRIDES --- */

/* AdminCP: Left-align text for readability */
.admin-table td,
.admin-table th {
    text-align: left;
}
.admin-table .actions-cell {
    text-align: center;
}

/* Access List: Left-align the username column */
#icms-access-table td.col-username,
#icms-access-table th.col-username {
    text-align: left;
}

/* Bingo Book: Left-align the reason column's container */
.bingo-table td.col-reason {
    vertical-align: top;
    padding: 2px;
}
.reason-content {
    max-height: 90px;
    overflow-y: auto;
    text-align: center;
    word-wrap: break-word;
    padding: 5px;
}

/* --- ROW STYLING --- */
.admin-table tbody tr:nth-child(even),
.bingo-table tbody tr:nth-child(even),
#icms-access-table tbody tr:nth-child(even),
.rank-table-container table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

.admin-table tbody tr:hover,
.bingo-table tbody tr:hover,
#icms-access-table tbody tr:hover,
.rank-table-container table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}
/* --- END UNIFIED TABLE STYLES --- */




tr:hover, 
.admin-table tbody tr:hover,
.bingo-table tbody tr:hover,
.rank-table-container table tbody tr:hover { /* Consolidated hover */
    background-color: var(--table-row-hover-bg);
}

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table .action-button { padding: 5px 10px; font-size: 0.85em; margin: 2px; display: inline-block; }
.action-button.edit { background-color: var(--info-color); color: var(--text-color-accent); }
.action-button.edit:hover { background-color: var(--info-hover-color); }
.action-button.delete { background-color: var(--button-danger-bg); color: var(--text-color-accent); } 
.action-button.delete:hover { background-color: var(--button-danger-hover-bg); }
.disabled-text { color: #999; font-style: italic; }
.member-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; border: 1px solid var(--border-color-light); }

/* Column Widths for Rank Table (Community Page) */
.rank-table-container table th:nth-child(1), 
.rank-table-container table td:nth-child(1) { width: 15%; }
.rank-table-container table th:nth-child(2), 
.rank-table-container table td:nth-child(2) { width: 40%; }
.rank-table-container table th:nth-child(3), 
.rank-table-container table td:nth-child(3) { width: 25%; }
.rank-table-container table th:nth-child(4), 
.rank-table-container table td:nth-child(4) { width: 20%; }

/* Suggested Column Widths for Bingo Table */
.bingo-table th.col-target-user, .bingo-table td.col-target-user { width: 25%; }
.bingo-table th.col-level,      .bingo-table td.col-level      { width: 10%; }
.bingo-table th.col-reason,     .bingo-table td.col-reason     { width: 30%; text-align: left; vertical-align: top; white-space: pre-wrap; word-wrap: break-word; max-width: 200px;} /* Reason specific styling */
.bingo-table th.col-admin,      .bingo-table td.col-admin      { width: 15%; }
.bingo-table th.col-date,       .bingo-table td.col-date       { width: 15%; }
.bingo-table th.col-origin,     .bingo-table td.col-origin     { width: 15%; } /* For when 6 columns are present */


/* Footer */
footer { text-align: center; margin-top: auto; padding: 1em 0; background-color: var(--footer-bg-color); color: var(--footer-text-color); border-radius: 0; font-size: 0.9em; width: 100%; flex-shrink: 0; border-top: 1px solid var(--border-color); } 
#footer_format { text-align: center; margin-top: auto; background-color: var(--secondary-background-color-alt); color: var(--footer-link-color); border-radius: 0; font-size: 0.15em; line-height: 1; width: 100%; flex-shrink: 0; border-top: 1px solid var(--border-color); }
footer a { color: var(--link-color); } /* Changed from primary-accent to link-color */
#footer_format a { color: var(--footer-link-color); }

/* Login Page */
#login-container { display: flex; justify-content: center; align-items: center; min-height: 80vh; text-align: center; }
#login-box { background-color: var(--secondary-background-color); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 30px; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--border-color-light); }
#logo-container { margin-bottom: 20px; }
.login-box-logo { max-width: 150px; max-height: 150px; border-radius: 8px; }
#login-button-container { margin-top: 20px; width: 100%; }
#login-button { background-color: var(--primary-accent-color); color: var(--text-color-accent); padding: 15px 30px; text-decoration: none; border-radius: 5px; font-size: 1.2em; font-weight: bold; transition: background-color 0.3s ease; display: block; text-align: center; margin: 0 auto; }
#login-button:hover { background-color: var(--primary-accent-hover-color); }
.login-box-title { display: none; font-size: 1.5em; margin-bottom: 20px; color: var(--text-color); text-align: center;}
.login-box-message { text-align: center; padding: 15px; background-color: var(--secondary-background-color-alt); border: 1px solid var(--border-color); border-radius: 5px; margin-top: 15px; color: var(--text-color); }
.login-box-message p { margin: 5px 0; }
.login-box-message code { background-color: var(--border-color-light); padding: 2px 4px; border-radius: 3px; font-family:monospace; color: var(--text-color); }

/* Modals */
/* ----- MODAL STYLES - UPDATED ----- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-color);
    /* For centering, we give the overlay some padding so the content doesn't touch edges */
    padding: 20px; 
    box-sizing: border-box;
    overflow: hidden; /* Prevent overlay scroll; modal-content or dynamic area will scroll */
}

.modal.active {
    display: flex; /* USE FLEXBOX TO CENTER THE CONTENT */
    align-items: center; /* Vertically center .modal-content */
    justify-content: center; /* Horizontally center .modal-content */
}

.modal-content {
    background-color: var(--modal-background-color);
    color: var(--modal-text-color);
    margin: 0; /* Reset margin; centering is handled by .modal.active's flex properties */
    padding: 25px;
    border: 1px solid var(--modal-border-color);
    width: 80%;
    max-width: 700px; /* Your existing max-width */
    border-radius: 8px;
    position: relative; /* For the close button */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Use var(--dark-shadow) in style_dark.css if defined */
    
    /* Make modal-content a flex column to manage its internal children */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px); /* Max height considering parent .modal's padding (20px top + 20px bottom) */
}
.modal-content h2 { margin-top: 0; color: var(--modal-header-color); border-bottom: 1px solid var(--modal-header-border-color); padding-bottom: 10px; margin-bottom: 20px; }
.modal-close-button { color: var(--modal-close-button-color); position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; line-height: 1; }
.modal-close-button:hover, .modal-close-button:focus { color: var(--modal-close-button-hover-color); text-decoration: none; cursor: pointer; }
.modal-content .form-group { margin-bottom: 15px; text-align: left; }
.modal-content .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--modal-label-color); }
.modal-content .form-group input[type="text"], .modal-content .form-group input[type="number"], .modal-content .form-group input[type="password"], .modal-content .form-group select, .modal-content .form-group textarea, .modal-content .form-group input[type="file"], .modal-content .form-group input[type="checkbox"] { width: 100%; padding: 10px; border: 1px solid var(--modal-input-border-color); border-radius: 4px; box-sizing: border-box; font-size: 0.95em; background-color: var(--modal-input-background-color); color: var(--modal-input-text-color); } 
.modal-content .form-group input[type="checkbox"] { width: auto; margin-right: 8px; vertical-align: middle;}
.modal-content .form-group label.checkbox-label { display: inline; font-weight: normal;}
.modal-select-fullwidth { width: 100%; padding: 8px; border: 1px solid var(--modal-input-border-color); border-radius: 4px; box-sizing: border-box; background-color: var(--modal-input-background-color); color: var(--modal-input-text-color); }
#modal-add-division .cp-button, #modal-add-squad .cp-button, #modal-add-rank .cp-button, #modal-edit-rank .cp-button, #modal-manage-hub-banner .cp-button, #modal-manage-hub-logo .cp-button, #modal-manage-squad-banners .cp-button, #modal-add-say-ban .cp-button, #modal-edit-say-ban .cp-button { width: 100%; text-align: center; margin-top: 10px; } 
#modal-manage-hub-banner .action-delete, #modal-manage-hub-logo .action-delete, #modal-manage-squad-banners .action-delete { background-color: var(--button-danger-bg); color: var(--button-danger-text); }

/* Form Messages */
.form-message { margin-top: 15px; padding: 10px; border-radius: 4px; font-size: 0.9em; text-align: center; }
.form-message.success { background-color: var(--success-background-soft); color: var(--success-text-color); border: 1px solid var(--success-border-soft); }
.form-message.error { background-color: var(--danger-background-soft); color: var(--danger-text-color); border: 1px solid var(--danger-border-soft); }

/* General CP Button Style */
.cp-button { background-color: var(--button-primary-bg); color: var(--button-primary-text); padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95em; text-decoration: none; display: inline-block; text-align: center; transition: background-color 0.2s ease; margin: 5px; }
.cp-button:hover { background-color: var(--button-primary-hover-bg); }
.cp-button:disabled, .cp-button[disabled] { background-color: var(--button-disabled-bg); color: var(--button-disabled-text); cursor: not-allowed; }

/* AdminCP Specific Layout Styles */
#admin-menu, #account-settings-menu { flex: 0 0 220px; background-color: var(--secondary-background-color); padding: 15px; border: 1px solid var(--border-color); border-radius: 5px; height: fit-content; box-sizing: border-box; }
#admin-menu h2,
#account-settings-menu h2 { margin-top: 0; border-bottom: 2px solid var(--border-color-light); padding-bottom: 10px; font-size: 1.3em; color: var(--text-color); text-align: center; }
#admin-menu ul,
#account-settings-menu ul { list-style: none; padding: 0; margin: 0; }
#admin-menu ul li a,
#account-settings-menu ul li a { display: flex; align-items: center; padding: 12px 15px; text-decoration: none; color: var(--text-color); border-radius: 4px; margin-bottom: 7px; transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.95em; }
#admin-menu ul li a i { margin-right: 12px; width: 18px; text-align: center; }
#admin-menu ul li a:hover, #admin-menu ul li a.active,
#account-settings-menu ul li a:hover,
#account-settings-menu ul li a.active { background-color: var(--primary-accent-color); color: var(--text-color-accent); font-weight: bold; }
#admin-menu ul li a[target="_blank"] { background-color: #6c757d; color: var(--text-color-accent); }
#admin-menu ul li a[target="_blank"]:hover { background-color: #5a6268; }
#admin-content,
#account-settings-content { flex: 1 1 0; min-width: 0; padding: 20px; background-color: var(--background-color); box-sizing: border-box; overflow-x: hidden; }
#admin-content h1, #account-settings-content h1 { margin-top: 0; color: var(--text-color); border-bottom: 2px solid var(--border-color-lighter); padding-bottom: 15px; margin-bottom: 25px; }
.stat-boxes-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-box { background-color: var(--secondary-background-color-alt); padding: 25px; border-radius: 8px; text-align: center; border: 1px solid var(--border-color-light); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat-box:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.stat-box h3 { margin-top: 0; margin-bottom: 10px; color: var(--text-color-secondary); font-size: 1.1em; }
.stat-box .count { font-size: 2.8em; font-weight: 700; color: var(--primary-accent-color); }
.admin-section,
.account-settings-section { display: none; }
.admin-section.active,
.account-settings-section.active { display: block; }
#manage-community .cp-buttons-container, .site-settings-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; max-width: 700px; }
.settings-upload-section { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color-lighter); }
.settings-upload-section:last-child { border-bottom: none; } 
.settings-upload-section h3 { margin-top:0; margin-bottom:15px; color: var(--text-color-secondary); }
.settings-upload-section img { display: block; }
.admin-section-action-button { width: auto; margin-bottom: 20px; display: inline-block; }
.form-submit-centered { width: auto; margin-top: 20px; display: block; margin-left: auto; margin-right: auto; }
.settings-preview-image { display: block; height: auto; border: 1px solid var(--border-color-light); margin-bottom: 10px; border-radius: 4px; }
.settings-banner-preview { max-width: 100%; max-height: 150px; }
.settings-logo-preview { max-width: 150px; max-height: 150px; }
.delete-confirm-label { font-weight: bold; display: flex; align-items: center; color: var(--danger-text-color); }
.delete-confirm-checkbox { width: auto; height: auto; margin-right: 10px; transform: scale(1.2); vertical-align: middle;}
.delete-confirm-container { margin-top: 20px; border-top: 1px solid var(--border-color-lighter); padding-top: 15px; background-color: var(--danger-background-soft); padding: 10px; border-radius: 5px; border: 1px solid var(--danger-border-soft); }
.cp-button.action-confirm-delete { background-color: var(--button-danger-bg) !important; color: var(--text-color-accent) !important; } 
.cp-button.action-confirm-delete:hover { background-color: var(--button-danger-hover-bg) !important; }
.cp-button.action-delete { background-color: var(--button-danger-bg); color: var(--text-color-accent); margin-top: 10px; } 
.cp-button.action-delete:hover { background-color: var(--button-danger-hover-bg); }
.form-label-spacing { margin-top: 10px; display: block; }

/* Setup Page Specific Styles */
.setup-page-body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90vh; padding: 20px; background-color: var(--body-bg-color); }
.setup-container h1 { text-align: center; color: var(--text-color); margin-bottom: 25px; display: flex; align-items: center; justify-content: center; }
.setup-logo { height: 50px; vertical-align: middle; margin-right: 10px; }
.setup-container .form-group { margin-bottom: 20px; }
.setup-container .form-group label { color: var(--text-color-secondary); }
.setup-container .form-group input[type="text"], .setup-container .form-group input[type="password"] { width: 100%; padding: 10px; border: 1px solid var(--modal-input-border-color); border-radius: 4px; box-sizing: border-box; font-size: 0.95em; background-color: var(--modal-input-background-color); color: var(--modal-input-text-color); }
.setup-container .form-group small { display: block; color: var(--text-color-light); font-size: 0.9em; margin-top: 5px; }
.setup-container .form-group small code { background-color: var(--border-color-lighter); padding: 2px 4px; border-radius: 3px; font-family: monospace; color: var(--text-color); }
.setup-container .btn-submit.cp-button { padding: 12px 20px; font-size: 1em; width: 100%; }
.setup-container .login-prompt { text-align: center; }
.setup-container .login-prompt p { margin-bottom: 10px; color: var(--text-color-secondary); }
.setup-container .login-prompt a { color: var(--primary-accent-color); font-weight: bold; text-decoration: none; }
.setup-container .login-prompt a:hover { text-decoration: underline; }
.setup-intro-text { text-align: center; margin-bottom: 20px; color: var(--text-color-secondary); }

/* Mobile Hub Toggle Button */
.mobile-hub-toggle.cp-button { margin-bottom: 10px; width: auto; display: none; }

/* Profile Modal Layout */
.profile-modal-layout { display: flex; align-items: center; margin-bottom: 20px; }
.profile-modal-avatar { width: 80px; height: 80px; border-radius: 50%; margin-right: 20px; border: 2px solid var(--border-color-light); object-fit: cover; }
.profile-modal-details p { margin: 5px 0; color: var(--modal-text-color); }
.profile-modal-details p strong { color: var(--modal-label-color); }
.italic-text { font-style: italic; color: var(--text-color-light); }


/* Bingo Book Page Styles */
#bingo-filter-list-container {
    flex: 0 0 220px;
    background-color: var(--secondary-background-color);
    padding: 15px;
    border: 1px solid var(--border-color); /* Adjusted to use main border color for consistency */
    border-radius: 5px;
    height: fit-content;
}

#bingo-filter-list-container h2 {
    margin-top: 0;
    border-bottom: 2px solid var(--border-color-light);
    padding-bottom: 10px;
    font-size: 1.3em;
    color: var(--text-color);
    text-align: center;
}

#bingo-filter-list {
    list-style: none; /* Remove bullets */
    padding: 0;       /* Remove default padding */
    margin: 0;        /* Remove default margin */
}
#bingo-filter-list li { /* Explicitly remove list style from li */
    list-style-type: none;
}

#bingo-filter-list li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-color); /* This should be light text on dark bg */
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 0.95em;
}

#bingo-filter-list li a i { 
    margin-right: 10px;
    width: 16px;
    text-align: center;
    color: var(--text-color); /* Explicitly set icon color to match link */
}

#bingo-filter-list li a:hover,
#bingo-filter-list li a.active-filter { 
    background-color: var(--primary-accent-color);
    color: var(--text-color-accent); 
    font-weight: bold;
}
#bingo-filter-list li a:hover i,
#bingo-filter-list li a.active-filter i {
    color: var(--text-color-accent); /* Icon color for active/hover state */
}

#bingo-content-display h1 {
     margin-top: 0;
     color: var(--text-color);
     border-bottom: 2px solid var(--border-color); /* Adjusted to main border color */
     padding-bottom: 15px;
     margin-bottom: 25px;
}

/* .bingo-table styles are inherited from general table styles */

.no-entries-message {
    padding: 20px;
    text-align: center;
    background-color: var(--secondary-background-color); /* Slightly different from main for contrast */
    border: 1px solid var(--border-color); 
    border-radius: 5px;
    color: var(--text-color); /* Use main light text for visibility */
    margin-top: 20px; 
}

/* style.css - Profile Modal Enhancements */
.modal-button-bar {
    display: flex;
    justify-content: space-around; /* Or flex-start, or center */
    align-items: center;
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color-lighter);
    border-top: 1px solid var(--border-color-lighter);
}

.modal-tab-button {
    background-color: transparent;
    border: 2px solid transparent; /* For active state border */
    color: var(--text-color-secondary);
    padding: 8px 12px;
    font-size: 1.2em; /* Icon size */
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.modal-tab-button:hover {
    color: var(--primary-accent-color);
    background-color: var(--hover-background-color);
}

.modal-tab-button.active {
    color: var(--primary-accent-color);
    border-bottom: 2px solid var(--primary-accent-color);
    /* background-color: var(--secondary-background-color-alt); */ /* Optional subtle bg for active */
}

#modal-dynamic-content { /* Or a more general class if you have other modals with scrollable content */
    overflow-y: auto; /* Allow vertical scrolling for this specific area */
    flex-grow: 1;     /* Allows this area to take available space */
    flex-shrink: 1;   /* Allows it to shrink if space is very limited before scrolling */
    min-height: 50px; /* Optional: give it some minimum height */
    padding-top: 10px; /* Space above the scrollable content if needed */
    /* padding-bottom: 10px; */ /* Optional space at the very bottom of scrollable area */
}

/* Ensure other direct children of modal-content do not try to grow excessively */
#memberProfileModal .modal-content > h2,
#memberProfileModal .modal-content > .profile-modal-layout,
#memberProfileModal .modal-content > .modal-button-bar,
#memberProfileModal .modal-content > hr {
    flex-shrink: 0; /* Prevent these from shrinking if dynamic content is large */
}

/* Styling for content within modal-dynamic-content (example for notes) */
#modal-dynamic-content .note-item {
    background-color: var(--secondary-background-color-alt);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}
#modal-dynamic-content .note-header {
    font-size: 0.8em;
    color: var(--text-color-light);
    margin-bottom: 5px;
}
#modal-dynamic-content .note-content {
    font-size: 0.95em;
    white-space: pre-wrap; /* To respect line breaks in notes */
}
#modal-dynamic-content textarea { /* For adding new notes */
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border: 1px solid var(--modal-input-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: var(--modal-input-background-color);
    color: var(--modal-input-text-color);
}

/* style.css - Modal Records List */
.modal-records-list {
    list-style: none;
    padding-left: 0;
    max-height: 300px; /* Or adjust as needed */
    overflow-y: auto;
    font-size: 0.9em;
}
.modal-records-list li {
    padding: 8px 5px;
    border-bottom: 1px solid var(--border-color-lighter);
    line-height: 1.5;
}
.modal-records-list li:last-child {
    border-bottom: none;
}
.modal-records-list li strong { /* Timestamp */
    color: var(--text-color-secondary);
    margin-right: 8px;
}

/* In style.css / style_dark.css (these will adapt with variables) */
#add-note-container {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color-lighter);
}
.notes-log .note-item {
    background-color: var(--secondary-background-color-alt);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}
.notes-log .note-header {
    font-size: 0.8em;
    color: var(--text-color-light); /* Slightly lighter for meta info */
    margin-bottom: 5px;
}
.notes-log .note-content {
    font-size: 0.95em;
    white-space: pre-wrap; 
    word-wrap: break-word;
    color: var(--text-color); /* Main text color */
}
.notes-log .note-actions button {
    font-size: 0.8em !important; /* Ensure small buttons */
    padding: 3px 6px !important;
}

#add-note-container select {
    padding: 8px;
    border: 1px solid var(--modal-input-border-color);
    border-radius: 4px;
    background-color: var(--modal-input-background-color);
    color: var(--modal-input-text-color);
    /* flex-grow: 1; if you want it to take more space */
}

.note-item { /* Base styling already exists */
    /* Add padding or margin if needed */
}

.note-visibility-tag {
    font-size: 0.75em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 10px;
    color: var(--text-color-accent); /* Light text on colored bg */
    font-weight: bold;
}

.note-item.note-public {
    /* Default styling, or explicitly set if needed */
    /* background-color: var(--secondary-background-color-alt); */
}
.note-item.note-public .note-visibility-tag {
    background-color: var(--info-color); /* Blueish for public */
}


.note-item.note-classified {
    background-color: #fffbe membro; /* Light yellow for light theme */
    border-left: 4px solid #facc15; /* Yellow accent border */
}
.note-item.note-classified .note-visibility-tag {
    background-color: #facc15; /* Yellow */
    color: #713f12; /* Darker text on yellow */
}

.note-item.note-g14 {
    background-color: #fee2e2; /* Light red for light theme */
    border-left: 4px solid var(--danger-color); /* Red accent border */
}
.note-item.note-g14 .note-visibility-tag {
    background-color: var(--danger-color); /* Red */
}

.division-list-item .division-name-clickable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    background-color: var(--secondary-background-color-alt); /* Or a distinct division color */
    border-radius: 5px;
    margin-bottom: 3px;
    font-weight: bold; /* Make divisions stand out a bit */
}

.division-list-item .division-name-clickable:hover {
    background-color: var(--hover-background-color);
}

.division-list-item.active-division > .division-name-clickable {
    background-color: var(--primary-accent-color); /* Or slightly different color for active division */
    color: var(--text-color-accent);
}

.division-list-item.active-division > .division-name-clickable .Fader {
    color: var(--text-color-accent); /* Match icon color */
}

.squad-sub-list {
    list-style: none;
    padding-left: 15px; /* Indent squads */
    margin-top: 5px;
    margin-bottom: 5px;
    max-height: 0;      /* COLLAPSED BY DEFAULT for animation */
    overflow: hidden;   /* Hide content when max-height is 0 */
    transition: max-height 0.3s ease-out; /* Animate the max-height property */
}

.squad-sub-list.open { /* Class to be added by JavaScript */
    max-height: 1000px; /* Or a sufficiently large value to show all possible squad items */
}

.division-name-clickable .Fader {
    transition: transform 0.3s ease-in-out;
    font-size: 0.8em;
}

/* Keep .open on division-list-item to rotate chevron */
.division-list-item.open > .division-name-clickable .Fader {
    transform: rotate(90deg);
}

.nested-squad {
    padding-left: 10px !important; /* Further indent squad names */
}

.main-hub-link.active-squad, .nested-squad.active-squad { /* Style for active hub or squad */
    background-color: var(--primary-accent-color) !important;
    color: var(--text-color-accent) !important;
    font-weight: bold;
}

.no-squads-in-division {
    padding: 5px 0px 5px 10px; /* Adjust as needed */
    color: var(--text-color-light);
    font-style: italic;
    font-size: 0.9em;
}

.main-content-section { /* A general class for sections within main content */
    margin-top: 30px;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: var(--background-color); /* Or --secondary-background-color for a slight difference */
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

#member-activity-log-container h3 {
    text-align: center;
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--border-color-lighter);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3em;
}
#member-activity-log-container h3 i {
    margin-right: 8px;
}

.activity-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 350px; /* Adjust as needed */
    overflow-y: auto;
}

.activity-log-list li {
    padding: 8px 10px;
    border-bottom: 1px dashed;
    border-bottom-color: var(--border-color);
    font-size: 0.9em;
    color: var(--text-color-light);
    line-height: 1.6;
}

.activity-log-list li:last-child {
    border-bottom: none;
}

.activity-log-list .log-timestamp {
    color: var(--text-color-secondary);
    font-weight: bold;
    margin-right: 8px;
    display: block; /* Or inline-block for timestamp and message on same line if preferred */
    margin-bottom: 3px; /* If block */
}
.activity-log-list .log-message {
    display: block; /* If timestamp is block */
}

.instance-notes-list li {
    /* Inherits from .activity-log-list li */
}

.note-log-details {
    margin-top: 5px;
}

.note-log-details strong {
    color: var(--text-color-secondary);
}

.note-log-details .note-visibility-tag {
    font-size: 0.75em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
    color: var(--text-color-accent); /* Assumes colored backgrounds */
    font-weight: bold;
    display: inline-block;
}

#member-activity-log-container,
#instance-notes-log-container {
    background-color: var(--secondary-background-color);
    /* Other styles like padding, border, border-radius, box-shadow 
       will still be inherited from the .main-content-section class,
       or you can override them here if you want them to be identical
       to #squad-list styling. For now, just changing the background. */
}

/* Visibility Tag Colors (same as profile modal) */
.note-log-item-visibility-public .note-visibility-tag { background-color: var(--info-color); }
.note-log-item-visibility-classified .note-visibility-tag { background-color: #facc15; color: #713f12; /* Dark text for light theme */ }
.note-log-item-visibility-g14_classified .note-visibility-tag { background-color: var(--danger-color); }

/* Dark theme adaptations for classified tag if not already handled by variables */
.dark-theme .note-log-item-visibility-classified .note-visibility-tag {
    color: #422006; /* Ensure contrast on dark theme if yellow is too light */
}


.note-log-content {
    margin-top: 5px;
    padding-left: 10px;
    font-size: 0.9em;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-color); /* Or var(--text-color-light) for less emphasis */
    background-color: var(--secondary-background-color); /* Slight distinction */
    padding: 5px;
    border-radius: 3px;
}

/* === NOTIFICATION BELL STYLES === */
#notification-container {
    position: relative;
}

#notification-indicator {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 8px;
    height: 8px;
    background-color: var(--danger-color);
    border-radius: 50%;
    border: 1px solid var(--nav-gradient-start);
    display: none; /* Hidden by default */
}

#notification-indicator.active {
    display: block; /* Show when active */
}

#notification-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: var(--background-color);
    min-width: 320px;
    max-width: 350px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 102;
    border-radius: 5px;
    right: 0;
    top: 100%;
    margin-top: 5px;
    border: 1px solid var(--border-color);
    max-height: 400px;
    overflow-y: auto;
}

#notification-dropdown.show {
    display: block;
}

.notification-header {
    padding: 10px 15px;
    font-weight: bold;
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--border-color-light);
}

#notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-item, .notification-item-empty, .notification-item-loading {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color-lighter);
}
.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: var(--hover-background-color);
}

.notification-item-empty, .notification-item-loading {
    color: var(--text-color-light);
    font-style: italic;
    text-align: center;
}

.notification-text {
    font-size: 0.9em;
    color: var(--text-color);
    margin-bottom: 5px;
    white-space: normal;
}

.notification-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-time {
    font-size: 0.75em;
    color: var(--text-color-light);
}

.notification-dismiss-btn {
    background: none;
    border: none;
    color: var(--text-color-light);
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
}

.notification-dismiss-btn:hover {
    color: var(--danger-color);
}

/* Style for the subscription status box in the Owner's Panel */
.subscription-status-box {
    background-color: var(--secondary-background-color);
}

.admin-menu-tier-image {
    width: 100%; /* Make the image take the full width of the menu container */
    height: auto; /* Maintain the aspect ratio */
    border-radius: 5px; /* Optional: adds a nice rounded corner */
    margin-bottom: 15px; /* Creates space between the image and the menu links below it */
    display: block; /* Ensures it's treated as a block element */
}


/* === Account Settings Page Styles === */

/* Styling for radio button labels */
.radio-label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

/* Styling for the push notification toggle switch */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}
.toggle-switch-label {
    font-weight: bold;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--primary-accent-color);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-accent-color);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.slider.round {
  border-radius: 28px;
}
.slider.round:before {
  border-radius: 50%;
}


/* === Styled Profile Modal Records === */
.modal-records-list.styled {
    list-style: none;
    padding-left: 0;
    font-size: 0.9em;
}

.record-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 5px;
    border-bottom: 1px solid var(--border-color-lighter);
    gap: 15px;
}
.modal-records-list.styled li:last-child {
    border-bottom: none;
}

.record-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9em;
}

.record-content {
    flex-grow: 1;
}

.record-detail {
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 4px;
}

.record-timestamp {
    font-size: 0.8em;
    color: var(--text-color-light);
}

/* Colors for different log types */
.record-item.log-generic .record-icon { background-color: #6c757d; }
.record-item.log-rank .record-icon { background-color: #f0ad4e; } /* Orange */
.record-item.log-note .record-icon { background-color: #5bc0de; } /* Info Blue */
.record-item.log-training .record-icon { background-color: #d4af37; } /* Gold */
.record-item.log-join .record-icon { background-color: var(--success-color); }
.record-item.log-leave .record-icon { background-color: #555; }
.record-item.log-ban .record-icon { background-color: var(--danger-color); }
.record-item.log-unban .record-icon { background-color: #02a361; }

/* === Timeline Style for Logs === */
.timeline-container {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 20px;
    position: relative;
    /* --- ADD THESE TWO LINES --- */
    max-height: 450px; /* This creates the scroll box height. */
    overflow-y: auto;  /* This makes the scrollbar appear only when needed. */
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px; /* Aligns with the center of the icon */
    width: 2px;
    height: 100%;
    background-color: var(--border-color);
}

.timeline-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: relative;
    margin-bottom: 25px;
}

.timeline-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1em;
    z-index: 1; /* Puts the icon on top of the timeline bar */
    background-color: var(--text-color-light); /* Default color */
}

/* Icon Colors */
.timeline-item.log-join .timeline-icon { background-color: var(--success-color); }
.timeline-item.log-leave .timeline-icon { background-color: var(--danger-color); }
.timeline-item.log-note .timeline-icon { background-color: var(--info-color); }

.timeline-content {
    background-color: var(--secondary-background-color);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--border-color-light);
    flex-grow: 1;
}

.timeline-text, .timeline-note-snippet {
    margin: 0 0 8px 0;
    color: var(--text-color);
    line-height: 1.5;
}

.timeline-note-snippet {
    font-style: italic;
    color: var(--text-color-secondary);
    padding-left: 10px;
    border-left: 3px solid var(--border-color);
}

.timeline-timestamp {
    font-size: 0.8em;
    color: var(--text-color-light);
}

.note-visibility-tag-small {
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-color-accent);
    font-weight: bold;
    text-transform: capitalize;
}

.note-visibility-tag-small.public { background-color: var(--info-color); }
.note-visibility-tag-small.classified { background-color: #f0ad4e; } /* Orange */
.note-visibility-tag-small.g14_classified { background-color: var(--danger-color); }


/* === Weekly Stats Box === */
.weekly-stats-box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--secondary-background-color-alt);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.weekly-stats-box h4 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-light);
    font-size: 1.1em;
    color: var(--text-color-secondary);
    text-align: center;
}

.weekly-stats-box h4 i {
    margin-right: 8px;
}

.weekly-stats-box .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    padding: 5px 0;
    color: var(--text-color-light);
}

.weekly-stats-box .stat-value {
    font-weight: bold;
    font-size: 1.2em;
}

.stat-green {
    color: var(--success-color);
}

.stat-red {
    color: var(--danger-color);
}


/* --- START: Corrected Bingo Book Table Layout --- */

.bingo-table {
    width: 100%;
    border-collapse: collapse;
}


/* Ensure vertical alignment is at the top for tall rows */
.bingo-table td {
    vertical-align: top;
    padding-top: 5px; /* Add a little padding to the top of the cell */
}

/* --- END: Corrected Bingo Book Table Layout --- */


/* -- START: Unified Bingo Book Table Styles -- */
.bingo-table th, .bingo-table td {
    vertical-align: middle;
}

.bingo-table td.col-reason {
    padding: 2px;
    vertical-align: top;
}

.reason-content {
    max-height: 90px;
    overflow-y: auto;
    text-align: center;
    word-wrap: break-word;
    padding: 5px;
}
/* -- END: Unified Bingo Book Table Styles -- */


/* Desktop Fixed Width for Consistent Main Content Area */
@media (min-width: 1280px) { 
    #content-container, #content-area, #error-content-area, .setup-container, #admin-container, #account-settings-container, #bingo-book-container { 
        width: 1200px; 
    }
}

/* Mobile Specific Styles (Media Query) - Keep this at the END */
@media (max-width: 768px) {
    #main-nav { justify-content: space-between; }
    .navbar-instance-logo-link {
        display: none; /* Hide the instance logo on mobile */
    }

.nav-left, .nav-right {
        flex: 0 1 auto; /* Reset flex properties for mobile */
    }


    .hamburger { display: flex; position: static; transform: none; order: -1; }
    .nav-links { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--nav-gradient-start); height: 0; overflow: hidden; transition: all 0.3s ease-in-out; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-left: 20px; flex-grow: 0; margin: 0; z-index: 101; }
    .nav-links.active { height: auto; padding-top: 10px; padding-bottom: 10px; }
    #main-nav .nav-links ul { flex-direction: column; width: 100%; text-align: left; }
    #main-nav .nav-links ul li { margin: 5px 0; width: 100%; text-align: left; }
    #main-nav .nav-links ul li a { display: block; padding: 8px 0; color: var(--nav-text-color); text-align: left; }
    .nav-user-area { position: static; transform: none; width: auto; margin-left: 0; padding-right: 0; }
    .nav-user-area .dropbtn { padding: 8px 0; }
    .navbar-pfp { width: 24px; height: 24px; }
    .nav-user-area .dropdown-content { position: absolute; right: 0; top: 100%; margin-top: 2px; background-color: #3b3f77; width: auto; min-width: 160px; padding-left: 0; border-color: var(--border-color); }
    .nav-user-area .dropdown-content a { color: var(--nav-text-color); padding: 10px 15px; }
    .nav-user-area .dropdown-content a:hover { background-color: var(--primary-accent-hover-color); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    #content-container, #content-area, #error-content-area, .setup-container, #admin-container, #account-settings-container, #bingo-book-container { 
        flex-direction: column; max-width: 100%; width: auto; 
        margin-left: 10px; margin-right: 10px; padding: 15px; 
    }
    #admin-container, #account-settings-container, #bingo-book-container { gap: 15px; } 
    #squad-list, #admin-menu, #account-settings-menu, #bingo-filter-list-container { margin-right: 0; margin-bottom: 20px; flex-basis:auto; } 
    #main-content-display, #bingo-content-display { margin-right: 0; margin-bottom: 20px; } 
    #squad-members-display-wrapper, #community-default-view { padding: 10px; }
    .setup-container { padding: 20px; }
    .modal-content { width: 90%; margin: 5vh auto; padding: 20px; }
    #admin-menu, #account-settings-menu {flex: none;}
    #admin-content {
    flex-basis: auto; /* Allow the content to determine its own height */
    }
    .mobile-hub-toggle.cp-button { display: inline-block; }
    #squad-list.hub-hidden { display: none; }

    .main-content-section {
    /* This overrides the desktop max-width on smaller screens */
    max-width: 100%;
    width: 100%;
    /* We use box-sizing to make the width calculation include padding */
    box-sizing: border-box;
    }

    #notification-dropdown {
    right: -100px;  /* Position 100px from the right edge of the screen */
    left: auto;   /* Make sure it's not aligned to the left */
    }
}

/* Utility classes */
.text-center { text-align: center !important; }
.margin-bottom-medium { margin-bottom: 15px !important; }
.margin-top-medium { margin-top: 15px !important; }
.link-accent { color: var(--primary-accent-color); text-decoration: none; font-weight: bold; }
.link-accent:hover { text-decoration: underline; color: var(--link-hover-color); }
.hidden { display: none !important; }

/* In style.css */
/* ... other styles ... */

/* Column Widths for Rank Table (Community Page) - This can be generalized or duplicated for access list */
.rank-table-container table th.col-avatar, .rank-table-container table td.col-avatar { width: 15%; }
.rank-table-container table th.col-username, .rank-table-container table td.col-username { width: 40%; }
/* ... etc ... */

/* Column Widths for Access List Table (and general data tables if desired) */
#icms-access-table th.col-avatar, #icms-access-table td.col-avatar { width: 10%; text-align: center;}
#icms-access-table th.col-username, #icms-access-table td.col-username { width: 25%; text-align: left; } /* Usernames often better left-aligned */
#icms-access-table .col-username small { font-size: 0.85em; color: var(--text-color-light); }
#icms-access-table th.col-rank, #icms-access-table td.col-rank { width: 20%; text-align: center;}
#icms-access-table th.col-access-level, #icms-access-table td.col-access-level { width: 15%; text-align: center;}
#icms-access-table th.col-join-date, #icms-access-table td.col-join-date { width: 15%; text-align: center;}
#icms-access-table th.col-actions, #icms-access-table td.col-actions { width: 15%; text-align: center;}

.access-level-icon {
    height: 24px; 
    width: auto;   
    vertical-align: middle;
    display: inline-block; 
}

/* Ensure table cells are middle aligned like community page if that's the desired effect */
#icms-access-table th,
#icms-access-table td {
    vertical-align: middle; /* Overrides general table td vertical-align: top if you want this */
    /* padding: 8px 5px; /* If you want exact padding match from rank-table */
}
/* Keep reason left aligned in bingo table was specific, not needed here if all centered */

.community-hub-container {
    max-width: 95%; 
    padding-top: 0; /* Remove top padding to have banner flush with the top of the box */
    padding-left: 0;
    padding-right: 0;
    background-color: #f0f2f5;
}

#community-hero-section {
    max-width: 100%; /* Ensure it fits the new container */
    margin-left: 0;
    margin-right: 0;
}

#community-hero-section #community-hub-banner-container {
    border-top-left-radius: 8px; /* Match the container's border radius */
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0; /* Straighten bottom edges */
    border-bottom-right-radius: 0;
}

.community-hub-container #division-trackers-area {
    padding-left: 20px; /* Add some padding back for the trackers area */
    padding-right: 20px;
}

.community-hub-container.main-content-section {
    margin-top: 0;
}