/*
    GLOBAL STYLES AND COLOR VARIABLES
*/

/* Define light mode colors as CSS variables in the :root selector */
:root {
    --bg-color: #f4f4f4;
    --text-color: #333;
    --form-bg: #ffffff;
    --border-color: #ccc;
    --primary-color: #dc3545;
    --secondary-color: #6c757d;
    --link-color: #555;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --cookie-bg: rgba(0, 0, 0, 0.8);
    --cookie-text: #fff;
    --button-accept: #007bff;
    --button-decline: #dc3545;
}

/* Dark mode palette. These will override the light mode values */
body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --form-bg: #1e1e1e;
    --border-color: #444;
    --primary-color: #dc3545;
    --secondary-color: #999;
    --link-color: #a0a0a0;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --cookie-bg: rgba(255, 255, 255, 0.1);
    --cookie-text: #e0e0e0;
    --button-accept: #dc3545;
    --button-decline: #c0392b;
}

.back-button {
    background-color: #8F0000 !important; /* dark red */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s;
}

input[type="file"],
input[type="date"],
input[type="time"],
select {
    background-color: var(--form-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Spacing between boxes */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- General Card Styles --- */
.card {
    background: var(--form-bg);
    border-radius: 8px; 
    box-shadow: 0 4px 6px var(--shadow-color);
    padding: 20px; 
    display: flex;
    flex-direction: column;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-color);
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card h3.dsrheader {
    margin-bottom: 0 !important;
}


.card h2, .card h3, .card h4 {
    color: var(--primary-color);
}

/* --- Lists inside card-news and card-about --- */
.card-news ul,
.card-about ul {
    margin-left: 20px;
    padding: 10px 0;
    list-style-type: disc;
    list-style-position: outside;
}

.card-news ul li,
.card-about ul li {
    margin-bottom: 0.3em;
}

/* Nested lists */
.card-news ul ul,
.card-about ul ul {
    margin-left: 20px;
    list-style-type: circle;
}

/* Fixed height for cards */
.card-news, .card-about {
    display: flex;
    flex-direction: column;
}

/* Inner scrollable content with larger max-height */
.card-news .news-container,
.card-about .content-container {
    max-height: 1100px;             /* doubled height before Read More appears */
    overflow: hidden;              
    position: relative;
    transition: max-height 0.3s ease;
}

/* Fade effect at bottom remains the same */
.card-news .news-container::after,
.card-about .content-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--form-bg));
    pointer-events: none;
}


/* Read More button */
.read-more {
    margin-top: 10px;
    align-self: center;
    padding: 5px 10px;
    border: none;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}


.global-counters {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.stat-item {
    text-align: center;
}

.stat-count {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
    transition: color 0.3s;
}

.activity-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

.activity-item {
    text-align: center;
    padding: 10px;
    flex: 1;
}

.activity-stat {
    margin: 10px 0;
}

.circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.5em;
    margin: 0 auto;
    transition: background-color 0.3s;
}

.popular-quests-list {
    list-style-type: none;
    padding: 0;
    margin-top: 15px;
}

.popular-quests-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

#server-select {
    width: auto;
    min-width: 250px; /* fallback so it doesn’t collapse */
    margin-left: 10px;
    background-color: var(--bg-color) !important;
}

/*
    LOGGED IN PAGE STYLES
*/

.anniversaries-box {
    flex-grow: 2;
    text-align: right;
}

.grid-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
}

/* For tablets and larger screens (768px and up) */
@media (min-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr 1fr;
    }
    .card-news {
        grid-column: 1 / 2;
    }
    .card-about {
        grid-column: 2 / 3;
    }
    .card-global-stats,
    .card-activity,
    .card-popular {
        grid-column: span 1;
    }
    .card-popular {
        grid-column: 1 / 3;
    }
    .activity-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}

/* For desktops and larger screens (992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    .grid-layout {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .card-news {
        grid-column: 1 / 3;
    }
    .card-about {
        grid-column: 3 / 4;
    }
    .card-global-stats {
        grid-column: 1 / 2;
    }
    .card-activity {
        grid-column: 2 / 3;
    }
    .card-popular {
        grid-column: 3 / 4;
    }
    .activity-grid {
        flex-direction: column;
    }
}

/* For large desktops and wide screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1180px; /* optional, to keep it centered and neat */
    }

    .grid-layout {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 equal columns */
    }

    /* Adjust card placement for 4-column layout */
    .card-news {
        grid-column: 1 / 4; /* spans 2 columns */
    }

    .card-about {
        grid-column: 4 / 5; /* spans 2 columns */
    }

    .welcome-box {
        grid-column: 1 / 4;
    }

    .anniversaries-box {
        grid-column: 4 / 5;
    }
    .card-global-stats {
        grid-column: 1 / 2;
    }

    .card-activity {
        grid-column: 2 / 4;
    }

    .card-popular {
        grid-column: 4 / 5;
    }

    /* You can tweak internal card layout too if desired */
    .activity-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}


/* Main Body Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.content-wrapper {
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 0px;
    padding: 10px;
}

.welcome-box {
    flex-grow: 1;
    text-align: center;
}


/* --- Nav Bar Banner Message Styles --- */
.banner {
    /* Use CSS variables for background and text color for theme support */
    background-color: var(--bg-color); 
    color: var(--text-color); 
    /* Center the text within the banner container */
    text-align: center; 
    /* Style the banner to make it prominent and clean */
    padding: 10px 20px;
    font-weight: 600;
    font-size: 1.1em;
    /* Remove any default margin/padding that might be pushing it off-center */
    margin: 0;
}

.banner h1 {
    /* Reset h1 styles to look like a clean banner message */
    font-size: 2.1em; /* Keep text size reasonable */
    margin: 0;
    padding: 0;
}

/* Style the horizontal rule below the banner */
.banner-hr {
    border: none;
    /* Use the border-color variable for theme support */
    border-top: 5px solid var(--border-color);
    margin-top: 0; /* Align it right under the banner */
}

/* LOGIN PAGE STYLES */

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.logos .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
}

.logos .logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.form-container {
    background: var(--form-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form label {
    margin-top: 10px;
    font-weight: bold;
    color: var(--text-color);
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--form-bg);
    color: var(--text-color);
    transition: border-color 0.3s, background-color 0.3s;
}

.login-form a.forgot-password {
    text-align: right;
    color: var(--link-color);
    margin-bottom: 20px;
    text-decoration: none;
    transition: color 0.3s;
}

.login-form input[type="submit"],
.login-form input[type="reset"] {
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    color: var(--cookie-text);
    transition: background-color 0.3s, color 0.3s;
}

.login-form input[type="submit"] {
    background-color: var(--primary-color);
}

.login-form input[type="reset"] {
    background-color: var(--secondary-color);
}

/*
    FOOTER STYLES
*/
.disclaimer {
    font-size: 0.7em;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    color: var(--text-color);
    transition: color 0.3s;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/*
    COOKIE BANNER
*/
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--cookie-bg);
    color: var(--cookie-text);
    padding: 15px;
    text-align: center;
    z-index: 1000;
    transition: background-color 0.3s, color 0.3s;
}

.cookie-banner a {
    color: var(--cookie-text);
    text-decoration: underline;
}

.cookie-button {
    background: var(--button-accept);
    color: var(--cookie-text);
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.cookie-button.decline-button {
    background: var(--button-decline);
}

.cookie-banner p.cookie-text a {
    color: var(--cookie-text);
}

/*
    THEME TOGGLE SWITCH
*/
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-label {
    font-weight: bold;
    color: var(--text-color);
}

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
}

.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: 18px;
    width: 18px;
    left: 4px;
    bottom: 3.5px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*
    MODERN NAVBAR STYLES
*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color);
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 99;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.nav-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.nav-link:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.nav-item {
    position: relative;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--form-bg);
    box-shadow: 0 2px 10px var(--shadow-color);
    border-radius: 4px;
    list-style: none;
    padding: 10px;
    min-width: 200px;
    display: none;
    z-index: 100;
}

.nav-item:hover > .dropdown,
.nav-item.active > .dropdown {
    display: block;
}

.dropdown a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--text-color);
    white-space: nowrap;
}

.dropdown a:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

/*
    HAMBURGER MENU STYLES
*/
.menu-toggle {
    display: none; /* Hide on desktop by default */
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 200;
    width: 30px;
    height: 30px;
    padding: 0;
    
    /* Flexbox to center the lines perfectly */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    transition: transform 0.3s ease-in-out;
}

/* --- Homepage News --- */

.news-item {
    font-size: 1.0em;
    color: var(--text-color);
    margin-top: 5px;
}

.news-meta {
    font-size: 0.7em;
    color: var(--secondary-color);
    margin-top: 5px;
}

/*
    RESPONSIVE LAYOUT
*/
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .menu-toggle {
        display: flex;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .nav-links.active {
        max-height: 1000px;
        transition: max-height 0.5s ease-in;
    }

    .nav-item {
        width: 100%;
    }

    .nav-item.has-dropdown {
        position: static;
    }

    .dropdown {
        position: static;
        box-shadow: none;
        background: transparent;
        border: none;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    .nav-item.active > .dropdown {
        max-height: 1000px;
        transition: max-height 0.5s ease-in;
    }
}

/* For tablets and larger screens (600px and up) */
@media (min-width: 600px) {
    .container {
        max-width: 600px;
    }

    .logos {
        flex-direction: row;
        justify-content: center;
    }

    .logo {
        flex-basis: 30%;
        text-align: center;
    }
}

/* Progress Bar Container */
.progress-bar-container {
    padding: 20px 0;
    margin-bottom: 10px;
    position: relative;
}

/* The horizontal line of the progress bar */
.progress-line {
    position: absolute;
    top: 50%;
    left: 10%; /* Start the line after the first circle */
    width: 80%; /* Match the width of the progress bar */
    height: 4px;
    background-color: var(--border-color);
    transform: translateY(-50%);
    z-index: 1;
}

/* The fill color of the progress bar */
.progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.5s ease-in-out;
}

/* The milestone circles */
.progress-milestones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.progress-milestone {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 0.8em;
    font-weight: bold;
    border: 3px solid var(--form-bg);
    transition: background-color 0.3s, border-color 0.3s;
    position: relative;
}

.progress-milestone.complete {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    border-color: var(--primary-color);
}

.progress-milestone-label {
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.8em;
    color: var(--text-color);
}

/* READING MATERIAL LINKS */
.reading-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}
.reading-list li a {
    display: block;
    padding: 8px 10px;
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 5px;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.2s, border-color 0.2s;
}
.reading-list li a:hover {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

/* New footer class to prevent layout conflicts */
.site-footer {
    padding: 20px;
    text-align: center;
    font-size: 0.7em;
    color: var(--text-color);
    border-top: 1px solid var(--border-color); /* Add a separator line */
    margin-top: 20px;
}

.online-tracker-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 220px;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
    transition: background-color 0.3s, border-color 0.3s;
    color: #333;
}

body.dark-mode .online-tracker-fixed {
    background-color: #1f1f1f;
    border-color: #555;
    color: #eee;
}

.online-tracker-fixed h4 {
    margin-top: 0;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

body.dark-mode .online-tracker-fixed h4 {
    border-bottom-color: #555;
}

.online-tracker-fixed p {
    font-size: 12px;
    line-height: 1.4;
    margin: 3px 0;
}

.online-names {
    color: #6c757d;
    font-weight: bold;
}

body.dark-mode .online-names {
    color: #dc3545;
}

.online-tracker-fixed {
    cursor: default; /* default cursor */
}

.online-tracker-fixed h4 {
    cursor: move; /* show move cursor on header */
}

.online-names span[style*='gold'] {
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.8);
}

/*
    APPLICATION PAGE STYLES
*/

.content-card, .form-card {
    background: var(--form-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
    margin-bottom: 20px;
}

.application-conditions {
    margin: 20px 0 20px 20px;
    list-style-type: disc;
}

.application-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}

/* For the scenario prompt to align with the textarea */
.scenario-prompt {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scenario-prompt label {
    font-weight: bold;
    color: var(--primary-color); /* You wanted the titles aligned and a different color */
    margin-bottom: 0;
}

.scenario-prompt p {
    font-size: 0.9em;
    color: var(--text-color);
}

.form-row label {
    font-weight: bold;
    color: var(--text-color);
}

.form-row input[type="text"], 
.form-row select, 
.form-row textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--form-bg);
    color: var(--text-color);
    resize: vertical;
}

.form-actions {
    margin-top: 20px;
    text-align: center;
}

.application-form input[type="submit"], 
.application-form input[type="reset"] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    margin: 0 10px;
}

.application-form input[type="submit"] {
    background-color: var(--primary-color);
}

.application-form input[type="reset"] {
    background-color: var(--secondary-color);
}

/*
    RESPONSIVE LAYOUT FOR APPLICATION PAGE
*/
@media (min-width: 768px) {
    .application-form .form-row {
        flex-direction: row;
        align-items: flex-start; /* Align with the top of the textarea */
        justify-content: space-between;
    }
    
    .application-form .form-row label {
        flex-basis: 40%;
    }

    /* For scenarios, give the prompt and textarea equal space */
    .application-form .scenario-prompt {
        flex-basis: 40%;
    }

    .application-form .form-row input,
    .application-form .form-row select,
    .application-form .form-row textarea {
        flex-basis: 55%;
    }
}

/* Modal (dialog box) styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: var(--form-bg);
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px; /* Max width for a good reading experience */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.modal-header {
    color: var(--primary-color);
}

.close-button, .modal-close-button {
    color: #aaa;
    float: right;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover, .close-button:focus,
.modal-close-button:hover, .modal-close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/*
    STYLES FOR THE TABBED PAGE
*/

/* Main container to center the entire tabbed section */
.tab-page-container {
    padding: 20px;
    max-width: 1000px; /* A good maximum width for a clean look */
    margin: 20px auto; /* Centers the container and adds vertical margin */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between the tabs and the content */
}

/* Tab button styling */
.tab {
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
    border-bottom: 3px solid var(--primary-color);
}

.tablinks {
    background-color: var(--form-bg);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: var(--text-color);
    flex: 1 1 auto; /* Allow tabs to grow and shrink */
}

.tablinks:hover {
    background-color: var(--border-color);
}

.tablinks.active {
    background-color: var(--primary-color);
    color: var(--cookie-text); /* White text on active tab */
}

/* Tab content styling */
.tabcontent {
    background-color: var(--form-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
}

/* Basic Info Tab Layout */
.details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.details-column {
    flex: 1; /* Allow columns to grow and shrink */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-column {
    text-align: center;
}

.image-column img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item label {
    flex-basis: 30%; /* Give labels a fixed width on desktop */
    font-weight: bold;
}

.info-item p {
    flex-grow: 1; /* Text takes up the remaining space */
    padding: 8px;
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* New general card style to be applied to all tabs */
.info-card {
    background-color: var(--form-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
}

/* Styling for the list of server info */
.info-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .details-container {
        flex-direction: column;
    }
    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .info-item label {
        flex-basis: auto;
    }
}

/* Add this new rule to your CSS */
.tabcontent {
    display: none; /* Hide all tab content by default */
}

/* Add this rule to show only the active tab */
.tabcontent.active {
    display: block; /* Show the active tab */
}

.form-actions input[type="submit"] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    background-color: var(--primary-color);
}

/* Styling for the status message */
.status-message {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.status-message.success {
    background-color: #28a745; /* Green for success */
}

/* This is the missing piece for the fade-out to work correctly */
.status-message.fade-out {
    opacity: 0;
    visibility: hidden; /* Added to ensure it's not clickable after it fades */
    transition: opacity 2s ease-out, visibility 2s ease-out; /* Match the duration with JS */
}

/* Styling for the server activity tab */
.server-activity-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.server-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#dsr-table-container {
    overflow-x: auto; /* Enable horizontal scrolling on small screens */
}

.dsr-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.dsr-table th, .dsr-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.dsr-table th {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    font-weight: bold;
}

.dsr-table td {
    background-color: var(--form-bg);
    color: var(--text-color);
}

.dsrcontent {
    margin: 0;          /* removes paragraph default margin */
    padding: 0;         /* removes any default padding */
    line-height: 1.3;   /* optional: tighter line spacing */
}

.pagination-links {
    margin-top: 20px;
    text-align: center;
}

.pagination-link {
    color: var(--primary-color);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 0 5px;
}

.pagination-link.active {
    background-color: var(--primary-color);
    color: var(--cookie-text);
}

/*
    TRAINING INFORMATION TAB
*/
.training-record-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 equally-sized columns */
    gap: 1px; /* A small gap between cells */
    border: 1px solid var(--border-color); /* Add a border around the grid */
    margin-top: 20px;
    background-color: var(--border-color); /* Use a light color for the border */
    border-radius: 8px;
    overflow: hidden; /* Ensures the border radius is respected */
}

.grid-item {
    padding: 15px;
    background-color: var(--form-bg);
    color: var(--text-color);
    display: flex; /* Use flexbox to center content */
    align-items: center;
}

.grid-item.header {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    font-weight: bold;
    text-align: center;
}

.training-continue-link {
    text-decoration: none;
    font-weight: bold;
    color: var(--primary-color);
    margin-left: 10px;
}

.training-continue-link:hover {
    text-decoration: underline;
}

/* Responsive adjustments for the training record */
@media (max-width: 768px) {
    .training-record-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/*
    NOTES TAB STYLES
*/
.notes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.note-item {
    padding: 15px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

body.dark-mode .note-item {
    background-color: var(--form-bg); /* Use a slightly different background for dark mode notes */
}

.note-meta {
    font-size: 0.9em;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.notes-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notes-form-container textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--form-bg);
    color: var(--text-color);
    resize: vertical;
}

.notes-form-container form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.submit-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    background-color: var(--primary-color);
}

/*
    AWARDS TAB STYLES
*/

.awards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.awards-section h4 {
    margin-bottom: 10px;
}

.awards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    border: 1px solid var(--border-color);
    background-color: var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.awards-grid.header .grid-item {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    font-weight: bold; /* Make the text bold */
}

.awards-grid .grid-item {
    padding: 10px;
    background-color: var(--form-bg);
    color: var(--text-color);
}

/*
    APPLICATION TAB STYLES
*/

.application-details-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.application-scenarios {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.scenario-item {
    padding: 15px;
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.scenario-item label {
    font-weight: bold;
    color: var(--primary-color);
}

.scenario-item p {
    margin-top: 5px;
}

/*
    PASSWORD CHANGE FORM
*/
.main-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.change-password-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.change-password-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.change-password-form label {
    font-weight: bold;
}

.change-password-form input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--form-bg);
    color: var(--text-color);
}

.change-password-form .form-actions {
    margin-top: 20px;
}

/* Styling for error messages */
.status-message.error {
    background-color: var(--primary-color);
    color: var(--cookie-text);
}

/*
    SYLLABUS PAGE STYLES
*/
.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.syllabus-columns {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 20px;
    margin-top: 20px;
}

.syllabus-column {
    flex: 1 1 45%; /* Distribute space evenly, with a minimum width of 45% */
    background-color: var(--form-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
}

.syllabus-column ul {
    margin: 10px 0 20px 20px;
}

.syllabus-column li {
    margin-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .syllabus-columns {
        flex-direction: column; /* Stacks the columns on mobile */
    }
}

/*
    MENTORING PAGE STYLES
*/
.mentoring-columns {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 20px;
    margin-top: 20px;
}

.mentoring-column {
    flex: 1 1 45%; /* Distribute space evenly, with a minimum width of 45% */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mentoring-column ul {
    margin-left: 20px;
    list-style: disc; /* Bring the bullet points in from the edge */
    padding: 0;
}

.mentoring-column h2 {
    color: var(--primary-color);
}

.mentoring-column p {
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mentoring-columns {
        flex-direction: column; /* Stacks the columns on mobile */
    }
}

.form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    flex-basis: 450px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.top {
    max-width: 80%;
    margin: 0 auto;
    padding: 0px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
    margin: 0 auto;
    padding: 0px;
    background: none;
    border: none;
    max-width: none;
    box-shadow: none;
}

input[type="text"],
textarea {
    flex: 1;
    /* add this line to set flexible width for input elements */
}

input[type="text"]+label,
textarea+label {
    margin-top: 10px;
}

input[type="submit"] {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: #8F0000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #FF0000;
}

/* Add spacing between the form elements */
input[type="text"]+label,
textarea+label {
    margin-top: 10px;
}

/* Style every other form field */
form>*:nth-child(even) {
    background-color: transparent;
}

/* New CSS for the review and edit section */
.review-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
}
.remove-button {
    background: none;
    border: none;
    color: red;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
}

.add-button {
    background-color: #8f0000;
    color: #fff;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
    transition: background-color 0.3s;
}

.add-button:hover {
    background-color: #b30000;
}

/* Container for the Coordinator section, so it's a styled box */
.card-coordinator-log {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card-coordinator-log p {
    margin-bottom: 15px;
}

/* Responsive adjustments for the new grid */
@media (min-width: 768px) {
    .main-grid-layout {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets and larger */
    }

    .card-upload-form {
        grid-column: 1 / 2; /* Occupies the first column on larger screens */
    }

    .card-coordinator-log {
        grid-column: 2 / 3; /* Occupies the second column on larger screens */
    }
}

#parser-main-content {
    max-width: 100%;
    margin: 20px auto;
}

#parser-main-content .card {
    /* Ensure the cards inside fill the available width */
    width: 100%;
}

.dsr-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .dsr-edit-grid {
        grid-template-columns: 1fr 1fr; /* Two columns on tablets and larger */
    }
}

/* New style for DSR view page content */
.dsr-report-content {
    margin-bottom: 20px;
    width: 900px;
}

.dsr-report-content ul {
    list-style: disc;
    margin-left: 20px;
}

.quiz-result-item {
    margin-bottom: 50px;
}

/* Add spacing between paragraphs */
p {
    margin-bottom: 1rem; /* Adjust this value as needed for more or less space */
}

.unread-notification {
    font-weight: bold;
}
.mark-as-read-link {
    font-size: 0.8em;
    color: var(--primary-color);
    text-decoration: none;
    margin-left: 10px;
}

.sortable-header {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Add space for the icon */
}

.sort-icon::after {
    content: "↓";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    opacity: 0.5;
}

.sort-asc::after {
    content: "↑";
    opacity: 1;
}

.sort-desc::after {
    content: "↓";
    opacity: 1;
}

/* New styles for the Communications tab to create a uniform grid layout */

.communications-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Space between the main sections */
}

.communications-grid-section {
    flex: 1 1 30%; /* Distribute space evenly, allowing sections to wrap */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between title and buttons */
    min-width: 200px; /* Ensures sections don't get too narrow */
}

.button-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout for buttons */
    gap: 10px; /* Space between buttons */
}

.styled-button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: var(--cookie-text);
    transition: background-color 0.3s ease;
    width: 100%; /* Make buttons fill the full width of their grid cell */
    white-space: nowrap; /* Prevents text from wrapping */
    
    /* NEW STYLES FOR UNIFORM SIZE */
    min-width: 220px; 
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.styled-button.primary {
    background-color: var(--primary-color);
}

.styled-button.secondary {
    background-color: var(--secondary-color);
}

.editable-textarea {
    min-height: 80px; /* Adjust this to match your desired rows */
    border: 1px solid #ccc;
    padding: 8px;
    background-color: #fff;
    font-family: inherit;
    white-space: pre-wrap; /* This helps with line breaks */
    overflow-y: auto; /* Adds a scrollbar if content overflows */
}

/* New MSR Layout Styles */
.msr-report-grid-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =======================
   Card Server Select - Dark Mode Friendly
   ======================= */

.card-server-select {
    padding: 12px;
    background-color: var(--bg-color);
    border-radius: 8px;
}

/* Layout: label + select in one row */
.card-server-select form {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    background-color: var(--card-bg) !important;
}

/* Label styling */
.card-server-select label {
    font-weight: bold;
    white-space: nowrap;
}

/* Select styling - overrides Bootstrap */
.card-server-select select.form-control {
    max-width: 200px;       /* adjust as needed */
    flex-grow: 1;
    background-color: var(--bg-color) !important; /* force dark mode bg */
    color: var(--text-color) !important;        /* force dark mode text */
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Options inside the select */
.card-server-select select.form-control option {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Optional: focus styling */
.card-server-select select.form-control:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color-light);
}

/* Ensure spacing at bottom */
.card-server-select {
    margin-bottom: 12px;
}


/* Updated styling for all report tables */
.styled-table {
    width: 100%;
    border-collapse: collapse;
}

.styled-table th, .styled-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    background-color: var(--form-bg);
    color: var(--text-color);
}

.styled-table thead th {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    font-weight: bold;
}

.styled-table th.date-header {
    font-size: 0.9em;
    padding: 5px;
    white-space: nowrap;
}

.styled-table .table-header {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    font-weight: bold;
    text-align: left;
}

/* New colors for table rows based on rank */
.senior-guide-row > td {
    background-color: #fce6e8;
}
.guide-row > td {
    background-color: #e6fce6;
}
.apprentice-guide-row > td {
    background-color: #e6f9fc;
}
.inactive-member > td {
    background-color: #f8f9fa;
    color: #808080;
    font-style: italic;
}

body.dark-mode .senior-guide-row > td {
    background-color: #2b1216;
}
body.dark-mode .guide-row > td {
    background-color: #122b16;
}
body.dark-mode .apprentice-guide-row > td {
    background-color: #12222b;
}
body.dark-mode .inactive-member > td {
    background-color: #2a2a2a;
    color: #b0b0b0;
}

/* Light Mode Styles for the Activity Breakdown Table */
.senior-guide > td {
    background-color: #fce6e8;
}
.guide > td {
    background-color: #e6fce6;
}
.apprentice-guide > td {
    background-color: #e6f9fc;
}
.inactive-member > td {
    background-color: #f8f9fa;
    color: #808080;
    font-style: italic;
}

/* Dark Mode Styles for the Activity Breakdown Table */
body.dark-mode .senior-guide > td {
    background-color: #2b1216;
}
body.dark-mode .guide > td {
    background-color: #122b16;
}
body.dark-mode .apprentice-guide > td {
    background-color: #12222b;
}
body.dark-mode .inactive-member > td {
    background-color: #2a2a2a;
    color: #b0b0b0;
}

/* Grand totals row style */
.total-row > td {
    background-color: var(--primary-color);
    color: var(--cookie-text);
    font-weight: bold;
}

/* Highlighted data cells (Total +/- and Total counts) */
.highlight {
    font-weight: bold;
    background-color: var(--primary-color);
    color: var(--cookie-text);
}

.highlight-total {
    font-weight: bold;
    background-color: var(--secondary-color);
    color: white;
}

/* New, smaller summary stats layout */
.card-summary-stats .summary-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    text-align: center;
}

.card-summary-stats .stat-item {
    flex: 1 1 45%;
    max-width: 200px;
}

.card-summary-stats .stat-count-small {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.card-summary-stats h4 {
    font-size: 1em;
    font-weight: normal;
    color: var(--text-color);
    margin-bottom: 5px;
}

.card-quest-log {
    width: 100%;
}

.responsive-table-container {
    overflow-x: auto;
}


.modal-form-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 20px;
}

.modal-form-grid .form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-form-grid label {
    font-weight: bold;
    color: var(--text-color);
}

.modal-form-grid input,
.modal-form-grid select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--form-bg);
    color: var(--text-color);
}

.modal-form-grid .full-width-select {
    grid-column: 1 / -1;
}

.modal-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.complete-msr-footer {
    text-align: center;
    margin-top: 20px;
}

.complete-msr-footer p {
    font-size: 0.9em;
    line-height: 1.4;
    max-width: 1000px;
    margin: 0 auto 15px;
}

.complete-msr-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.complete-msr-button:hover {
    background-color: var(--button-decline); /* Assuming a slightly darker shade for hover in your palette */
}

/*
    SERVER HOMEPAGE STYLES
*/

/* --- General Wrapper & Header --- */
.server-dashboard-wrapper {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}

/* --- Dashboard Grid Layout --- */
.dashboard-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr; /* Mobile default: single column */
    grid-auto-rows: minmax(min-content, max-content);
    align-items: stretch;
}

@media (min-width: 992px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "team-activity team-activity weekly-stats monthly-totals"
            "team-activity team-activity upcoming-dates average-stats"
            "top-performers staffing staffing staffing"
            "token-usage token-usage token-usage token-usage"
            "monthly-analytics monthly-analytics all-time-analytics all-time-analytics"
            "msr-history-full msr-history-full msr-history-full msr-history-full";
    }

    /* Assigning grid areas to cards */
    .card.team-summary         { grid-area: team-activity; }
    .card.weekly-stats         { grid-area: weekly-stats; }
    .card.monthly-totals-stats { grid-area: monthly-totals; }
    .card.upcoming-dates       { grid-area: upcoming-dates; }
    .card.average-stats        { grid-area: average-stats; }
    .card.top-performers       { grid-area: top-performers; }
    .card.staff-table          { grid-area: staffing; }
    .card.msr-history          { grid-area: msr-history-full; }

    /* Analytics cards spanning 2 columns each */
    .card.monthly-analytics    { grid-area: monthly-analytics; grid-column: span 2; }
    .card.all-time-analytics   { grid-area: all-time-analytics; grid-column: span 2; }
}

/* Base grid: single column for small screens */
.personnel-grid {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Desktop layout: 2 rows of 4 cards */
@media (min-width: 992px) {
    .personnel-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "new-apps pending-candidates apprentices-watch active-staff"
            "avg-apply-join avg-join-training avg-training-live peak-app-day";
    }

    /* Assign grid areas */
    .card.new-apps                { grid-area: new-apps; }
    .card.pending-candidates      { grid-area: pending-candidates; }
    .card.apprentices-watch       { grid-area: apprentices-watch; }
    .card.active-staff            { grid-area: active-staff; }
    .card.avg-apply-join          { grid-area: avg-apply-join; }
    .card.avg-join-training       { grid-area: avg-join-training; }
    .card.avg-training-live       { grid-area: avg-training-live; }
    .card.peak-app-day            { grid-area: peak-app-day; }
}


/* --- Team Activity & Warnings --- */
.team-summary .member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 5px;
    background-color: var(--bg-color);
}

.member-name { font-weight: bold; }

.activity-circles { display: flex; gap: 5px; }

.smcircle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.smcircle:hover { transform: scale(1.2); }
.smcircle.green { background-color: #28a745; }
.smcircle.red   { background-color: #dc3545; }

/* --- Weekly Performance & Monthly Totals --- */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: center;
}

.stat-item {
    padding: 10px;
    background-color: var(--bg-color);
    border-radius: 5px;
}

.stat-count-large {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--primary-color);
}

.trend {
    font-size: 0.9em;
    color: var(--secondary-color);
}

.trend-up { color: #28a745; }
.trend-down { color: #dc3545; }

/* --- Upcoming Dates --- */
.date-list p {
    margin: 5px 0;
}

/* --- Average Stats --- */
.stats-grid .stat-item span {
    display: block;
}

/* --- Top Performers --- */
.top-performers .performer-list {
    margin-left: 0;
    padding-left: 20px;
}

.top-performers .performer-list ol {
    list-style-position: inside;
}

/* --- Server Staffing Table --- */
.styled-table {
    width: 100%;
    border-collapse: collapse;
}

.styled-table th,
.styled-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

/* --- Analytics Cards Layout --- */
.card.popular-stats {
    display: flex;
    flex-direction: column;
    gap: 20px; /* spacing between heading and tables */
}

.card.popular-stats .analytics-tables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 tables side by side */
    gap: 20px;
    flex-grow: 1;
}

.card.popular-stats .analytics-tables-grid .table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px; /* spacing inside each table block */
}

.card.popular-stats .analytics-tables-grid .table-wrapper h4 {
    margin: 0;
    font-size: 1.1em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card.popular-stats .analytics-tables-grid table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.card.popular-stats .analytics-tables-grid table th,
.card.popular-stats .analytics-tables-grid table td {
    padding: 8px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card.popular-stats .analytics-tables-grid table th {
    font-weight: bold;
    font-size: 0.95em;
}
.card.popular-stats .analytics-tables-grid table td {
    font-size: 0.9em;
}

/* --- MSR History --- */
.msr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.msr-list .btn {
    flex-grow: 1;
    width: auto;
}

/* --- Buttons --- */
.btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* --- Ensure Cards Align in Row --- */
.dashboard-grid {
    align-items: stretch;
}

/* --- Responsive fallback for smaller screens --- */
@media (max-width: 1200px) {
    .card.popular-stats .analytics-tables-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tab-button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px 5px 0 0;
    background-color: var(--secondary-color);
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.tab-button.active {
    background-color: var(--primary-color);
}

.tab-content {
    display: block;
}

/* Styling for the new filter card */
.filter-card {
    margin-bottom: 20px;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap; /* Allows sections to wrap on smaller screens */
    gap: 30px;
}

.filter-group {
    flex: 1 1 auto;
    min-width: 150px;
}

.filter-group h4 {
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-color);
}

.checkbox-group, .radio-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkbox-group label, .radio-group label {
    font-weight: normal;
    cursor: pointer;
}

/* Ensure the table rows are visible by default */
.styled-table tr {
    display: table-row;
}

/* Timeout for website */
#timeout-warning-box {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #ffcc00; /* Yellow warning color */
    color: #333;
    padding: 15px;
    border: 1px solid #ff9900;
    border-radius: 5px;
    z-index: 1000; /* Ensure it's on top of other content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    font-size: 14px;
    line-height: 1.4;
}
#timeout-countdown {
    font-weight: bold;
    color: #8F0000; /* Dark Red countdown text */
}

/* --- V2 FIX: Enforce Table Width and Layout Consistency --- */

/* 1. Force all primary tables in the tab content to span 100% of their container */
.tabcontent .styled-table {
    width: 100%;
    /* This crucial property forces the table to respect the 100% width
       and distribute column widths evenly, preventing collapse. */
    table-layout: fixed;
}

/* 2. Ensure all immediate table wrappers inside the tabs also stretch */
.tabcontent .responsive-table-container,
.tabcontent .analytics-table {
    width: 100%;
    box-sizing: border-box;
}

/* 3. Also ensure the inner tab contents for the Usage Report fill the space */
.tabcontent #usage-30-days,
.tabcontent #usage-all-time {
    width: 100%;
}

/* Target the container for the filter groups */
.filter-row, .filter-form {
    /* Set the display to flex to align items horizontally */
    display: flex;
    /* Allow items to wrap to the next line if the screen is too narrow */
    flex-wrap: wrap; 
    /* Space out the items evenly */
    gap: 20px; /* Adjust the gap value as needed for spacing between items */
    /* Align items to the start of the row (optional, but good practice) */
    align-items: flex-start;
}

/* Ensure each individual filter item is also a flex container to align its label and input */
.filter-group {
    /* Make the filter group display as a vertical block (label on top of input) */
    display: flex;
    flex-direction: column;
    /* Ensures items don't shrink too much */
    flex-shrink: 0; 
}

/* Handle the Button Group specifically */
.button-group {
    /* Align buttons vertically with other input fields */
    align-self: flex-end; 
}

/* Styles for the h3 to not be part of the flex row (optional, depending on its position in the final layout) */
.filter-row h3 {
    width: 100%; /* Make the heading take up the full width */
    margin-bottom: 10px; /* Add some space below the heading */
}

/* Optional: Basic styling for elements for visual clarity */
.filter-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* --- Chart View Container --- */
#view-chart {
    min-height: 900px;       /* Enough space for both charts */
    position: relative;
    width: 100%;
    padding: 20px 0;         /* Optional: add some breathing space */
    box-sizing: border-box;
}

/* --- Activity Chart Canvas --- */
#activityChart {
    height: 550px;           /* Daily activity chart height */
    min-height: 550px;
    width: 100%;
    display: block;
}

/* --- Popularity Chart Canvas --- */
#popularityChart {
    width: 100%;
    display: block;
    /* Height will be controlled dynamically via JS */
}

#status-message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-weight: bold;
    transition: opacity 2s ease;
}

.status-success {
    background-color: #d4edda;
    color: #155724;
}

.status-error {
    background-color: #f8d7da;
    color: #721c24;
}

.fade-out {
    opacity: 0;
}

/* Flash animation for updated row */
.row-flash {
    animation: flashGreen 0.8s ease;
}

@keyframes flashGreen {
    0%   { background-color: #d4edda; }
    100% { background-color: transparent; }
}

/* --- Bug Tracker Specific Styles (systemfixes.php) --- */

/* Dashboard Summary and Controls */
.bug-summary-text {
    color: var(--text-color);
    margin-bottom: 20px;
    font-style: italic;
}

.bug-stats-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.bug-stats-bar .stat-item {
    font-size: 1.1em;
    color: var(--text-color);
}

.bug-stats-bar .stat-item.open-count {
    color: var(--primary-color);
}

/* Bug List Table Styling */
.bug-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.bug-list-table th, .bug-list-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.bug-list-table th {
    /* Using existing variables, assuming --bg-color is suitable */
    background-color: var(--bg-color); 
    font-weight: 700;
}

/* Row Colors for Status */
.bug-row-closed {
    opacity: 0.7; /* Dim closed items */
}

/* Status Badge */
.bug-status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
}

.bug-status-open {
    background-color: #fce6e8; /* Light red/pink based on your palette */
    color: var(--primary-color);
}
body.dark-mode .bug-status-open {
    background-color: #610008;
    color: #ff5757;
}

.bug-status-closed {
    background-color: #e6fce6; /* Light green */
    color: #122b16;
}
body.dark-mode .bug-status-closed {
    background-color: #003612;
    color: #4CAF50;
}

/* --- Container for Bug Detail Panel --- */
#bugDetailArea {
    max-width: 900px;       /* Fixed max width */
    width: 100%;            /* Full width up to max */
    margin: 0 auto;         /* Center horizontally */
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--card-bg); /* consistent dark/light mode */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- Grid for details (Logged By, Date, Reason, etc.) --- */
.bug-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Labels styling */
.bug-detail-item label {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

/* Values (p tags) styling */
.bug-detail-item p {
    margin: 0;
    padding: 0;
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.6;
    word-break: break-word; /* prevent overflow on long text */
}

/* Submitted text section */
.bug-submitted-text {
    padding: 15px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    white-space: pre-wrap; 
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Inline form groups (Response & Status) */
.form-group-inline-bug {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Each inline group takes ~48% width for two side-by-side */
.form-group-inline-bug .form-group {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
}

/* Textarea styling */
#responseText {
    width: 100%;
    min-height: 200px;      /* slightly taller for comfort */
    max-height: 600px;      /* prevent excessive growth */
    box-sizing: border-box;
    padding: 10px;
    font-size: 1em;
    resize: vertical;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Status select box width */
#completeStatus {
    width: 100%;
    box-sizing: border-box;
}

/* Buttons & message alignment */
.form-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Flashing effect for updated rows */
.bug-row-flash {
    animation: flashBugRow 0.8s ease;
}

@keyframes flashBugRow {
    0%   { background-color: var(--form-bg); } 
    50%  { background-color: #4CAF50; } 
    100% { background-color: var(--form-bg); } 
}

/* Responsive adjustments for smaller screens */
@media (max-width: 700px) {
    .bug-detail-grid {
        grid-template-columns: 1fr; /* single column */
    }
    .form-group-inline-bug .form-group {
        flex: 0 0 100%; /* full width */
    }
    #responseText {
        min-height: 150px;
    }
}


/* Styles for update message */
#bug-update-message {
    font-weight: bold;
    margin-left: 15px;
}

/* Flashing effect for updated rows */
.bug-row-flash {
    animation: flashBugRow 0.8s ease;
}

/* FIX: Corrected @keyframes syntax */
@keyframes flashBugRow {
    0%   { background-color: var(--form-bg); } 
    50%  { background-color: #4CAF50; } 
    100% { background-color: var(--form-bg); } 
}

#notif-bar {
  animation: fadeInOut 3s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-15px); }
  10%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-15px); }
}