/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    /* Scrollbar styles */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: #2c2c2c;
    border-left: 1px solid #3d3d3d;
}

::-webkit-scrollbar-thumb {
    background: #5a5a5a;
    border: 3px solid #2c2c2c;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #707070;
}

/* For Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #5a5a5a #2c2c2c;
}



body { 
    font-family: Arial, sans-serif; 
    line-height: 1.6; 
    color: #f4f4f4; 
    background: linear-gradient(to bottom, #333 0%, #333 60%, #000 80%) fixed;
    background-color: #000;  
    margin: 0;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    visibility: hidden;
}

body.initialized {
    visibility: visible;
}

body.transitions-enabled {
    transition: padding-top 0.3s ease;
}

body.has-top-overlay {
    padding-top: 90px;
}

@media (max-width: 1045px) {
    body {
        padding-top: 60px !important;
    }
}

.container { 
    width: 95%; 
    max-width: 1200px;
    margin: 0 auto; 
    padding: 20px; 
    flex-grow: 1;
}

/* Header layout */
header {
    background-color: #1a1a1a;
    color: white;
    padding: 5px 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7em; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 50px; 
}

.header-content {
    display: flex;
    align-items: center;
}

.header-icon {
    width: 25px; 
    height: 25px; 
    margin-right: 15px; 
}

.title-version {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

h1 {
    font-size: 1.4em;
    margin: 0;
}

/* Navigation styles */
nav {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100%;
    align-items: center;
}

nav ul li {
    margin-right: 10px;
    position: relative;
    height: 100%; /* Fixed height */
    display: flex;
    align-items: center;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.3em;
    padding: 5px 8px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    height: 100%; /* Make the anchor fill the li height */
}

/* Hover effect for menu items */
nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #FFA500; /* You can change this color as needed */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

nav ul li a:hover {
    color: #FFA500; /* Change text color on hover */
}

nav ul li a:hover::after {
    transform: scaleX(1);
}

.controls-group {
    display: flex;
    align-items: center;
}

.user-controls, .program-controls {
    display: flex;
    align-items: center;
}

.username {
    display: block;
    font-weight: bold;
}

.version-info {
    font-size: 0.8em;
    color: #888;
    text-decoration: none; /* Remove underline for link */
}

.version-info:hover {
    text-decoration: none; /* Ensure no underline on hover */
}

.support-icon-link.discord:hover {
    color: #5865F2; /* Discord brand color */
}

/* Hamburger menu styles */
.hamburger-menu {
    display: none;
}



.header-controls {
    display: flex;
    align-items: center;
}

.user-info {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 35px;
    scale: 0.9;
}

.action-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-controls .icon-button, .start-program {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
    padding: 8px 12px;
    min-width: 120px;
    height: 36px;
}

.action-controls .icon-button i, .start-program i {
    margin-right: 5px;
}

#programControlButton.start-program {
    background-color: #4CAF50;
}

#programControlButton.stop-program,
#programControlButton[data-status="Running"] {
    background-color: #f44336;
}

#programControlButton.starting-program {
    background-color: #007bff;
    cursor: not-allowed;
}

#programControlButton.stopping-program {
    background-color: #ffc107;
    color: #212529;
    cursor: not-allowed;
}

.action-controls .icon-button:hover, .start-program:hover {
    opacity: 0.9;
}

/* Database table styles */
.table-container {
     overflow-x: auto;
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #2c2c2c;
    color: #f4f4f4;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #444;
}

th {
    background-color: #1a1a1a;
    font-weight: bold;
    text-transform: uppercase;
}

tr:nth-child(even) {
    background-color: #333;
}

tr:hover {
    background-color: #444;
}

/* Responsive table */
@media screen and (max-width: 600px) {
    table {
        font-size: 14px;
    }

    th, td {
        padding: 8px;
    }
}

/* Column selector styles */
#column-selector-wrapper {
    margin-bottom: 20px;
}

.toggle-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

#column-selector {
    background-color: #2c2c2c;
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
}

#column-selector.hidden {
    display: none;
}

.column-selector-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.column-list {
    flex: 1;
}

.column-list select {
    width: 100%;
    height: 150px;
    background-color: #333;
    color: #f4f4f4;
    border: 1px solid #444;
}

.column-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 15px;
}

.column-buttons button {
    margin: 5px 0;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

#update-columns {
    background-color: #008CBA;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

/* Filter and sort styles */
#filter-sort, #sort-container, #filter-buttons {
    background-color: #2c2c2c;
    padding: 15px;
    border-radius: 4px;
}

#filter-form label, #sort-container label, #filter-buttons label {
    margin-right: 5px;
}

#filter-form select, #sort-container select, #filter-buttons select,
#filter-form input[type="text"] {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #444;
    background-color: #333;
    color: #f4f4f4;
}

#filter-form button, #sort-container button, #filter-buttons button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

/* Pagination styles */
.pagination {
    margin: 20px 0;
    text-align: center;
}

.pagination a {
    color: #f4f4f4;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #444;
    margin: 0 4px;
    border-radius: 4px;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {
    background-color: #444;
}

/* Media Queries */
@media (max-width: 1045px) {
    .user-info {
        margin-left: 10px;
        display: flex;
        align-items: flex-start;
        gap: 4px;
        height: auto;
        min-height: 35px;
    }

    .header-content {
        flex: 0 0 auto;
    }
    
    nav {
        flex: 1;
        justify-content: center;
    }
    
    .header-controls {
        flex: 0 0 auto;
        position: relative;
        z-index: 1001;
    }

    .action-controls {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    /* Preserve button text on larger screens */
    @media (min-width: 1045px) {
        .action-controls .icon-button, 
        .action-controls .start-program,
        .action-controls #programControlButton {
            width: 36px;
            height: 36px;
            min-width: 36px;
            padding: 0;
        }

        .button-text {
            display: none;
        }

        .action-controls .icon-button i, 
        .action-controls .start-program i,
        .action-controls #programControlButton i {
            margin-right: 0;
        }
    }
}

/* Mobile-specific styles */
@media (max-width: 1045px) {
    .header-controls {
        margin-right: 0px;  /* Increased right margin */
    }

    .action-controls {
        display: flex;
        gap: 0px;  /* Reduced gap between buttons */
        align-items: center;
    }

    .action-controls .icon-button, 
    .action-controls .start-program,
    .action-controls #programControlButton {
        min-width: 40px;  /* Slightly smaller */
        min-height: 40px;
        width: 40px;
        height: 40px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        touch-action: manipulation;
    }

    /* Logout button - red */
    #logout_button {
        background-color: #dc3545;
        border: 1px solid #dc3545;
    }
    #logout_button:active {
        background-color: #bd2130;
    }

    /* Program control button - conditional colors */
    #programControlButton.start-program {
        background-color: #28a745;
        border: 1px solid #28a745;
    }
    #programControlButton.start-program:active {
        background-color: #218838;
    }
    #programControlButton.stop-program {
        background-color: #dc3545;
        border: 1px solid #dc3545;
    }
    #programControlButton.stop-program:active {
        background-color: #bd2130;
    }

    #programControlButton.starting-program {
        background-color: #007bff;
        border-color: #007bff;
    }

    #programControlButton.stopping-program {
        background-color: #ffc107;
        border-color: #ffc107;
    }

    .action-controls .icon-button:active,
    .action-controls .start-program:active,
    .action-controls #programControlButton:active {
        transform: scale(0.98);
    }

    .button-text {
        display: none;
    }

    .action-controls .icon-button i, 
    .action-controls .start-program i,
    .action-controls #programControlButton i {
        margin-right: 0;
        color: white;
    }
}

/* Desktop styles */
@media (min-width: 1045px) {
    .action-controls .icon-button, 
    .action-controls .start-program,
    .action-controls #programControlButton {
        min-width: 120px;  /* Set minimum width */
        height: 36px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;  /* Center content */
        border-radius: 4px;
        transition: all 0.2s;
        color: white;
    }

    /* Exception for release notes button */
    .action-controls .icon-button#releaseNotesButton,
    #releaseNotesButton {
        min-width: 40px;
        width: 36px;
        height: 36px;
        padding: 8px;
        background-color: #ffffff00;
        border-radius: 3px;
        border: none;
        margin-left: 6px;
        color: #ffffff;
        cursor: pointer;
    }

    #releaseNotesButton:hover {
        color: #f0f0f0;
    }

    /* Logout button hover state */
    #logout_button {
        background-color: #dc3545;
        border: 1px solid #dc3545;
    }
    #logout_button:hover {
        background-color: #bd2130;
    }

    /* Program control button states */
    #programControlButton.start-program {
        background-color: #28a745;
        border: 1px solid #28a745;
    }
    #programControlButton.start-program:hover {
        background-color: #218838;
    }
    #programControlButton.stop-program {
        background-color: #dc3545;
        border: 1px solid #dc3545;
    }
    #programControlButton.stop-program:hover {
        background-color: #bd2130;
    }

    #programControlButton.starting-program {
        background-color: #007bff;
        border: 1px solid #007bff;
    }

    #programControlButton.stopping-program {
        background-color: #ffc107;
        border: 1px solid #ffc107;
        color: #212529;
    }
    #programControlButton.stopping-program:hover {
        background-color: #ffc107;
    }

    .button-text {
        display: inline;
        margin-left: 8px;
        font-size: 14px;
        white-space: nowrap;
        color: white;
    }

    /* Hide button text for release notes button */
    #releaseNotesButton .button-text {
        display: none;
    }

    .action-controls .icon-button i, 
    .action-controls .start-program i,
    .action-controls #programControlButton i {
        margin-right: 0;
        color: white;
    }

    #programControlButton.stopping-program i,
    #programControlButton.stopping-program .button-text {
        color: #212529;
    }

    .action-controls {
        gap: 12px;  /* Increase gap between buttons */
    }
}

@media (max-width: 1045px) {
    nav ul {
        flex-direction: column;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #1a1a1a;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        z-index: 1000;
    }

    nav ul.show {
        height: auto;
        max-height: none;
        overflow: visible;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    nav ul li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu-group {
        width: 100%;
    }

    .dropdown {
        position: relative;
        display: none;
        width: 100%;
        background-color: #2a2a2a;
        transition: all 0.3s ease;
    }

    .dropdown.show {
        display: block;
        animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dropdown li:last-child {
        border-bottom: none;
    }

    .dropdown li a {
        padding: 12px 20px 12px 40px;
        width: 100%;
        display: flex;
        align-items: center;
        color: #f4f4f4;
        transition: all 0.2s ease;
        font-size: 0.95em;
        opacity: 0.9;
    }

    .dropdown li a:hover {
        background-color: rgba(255, 255, 255, 0.05);
        padding-left: 45px;
    }

    .dropdown li a:active {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .group-title {
        width: 100%;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #1a1a1a;
        color: #fff;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .group-title i {
        transition: transform 0.3s ease;
    }

    .menu-group:hover .group-title {
        color: #FFA500; /* Orange text for group title when dropdown is open */
    }

    .menu-group .group-title.active {
        background-color: #2a2a2a;
        color: #FFA500;
    }

    .menu-group .group-title.active i {
        transform: rotate(180deg);
    }

    /* Ripple effect for clicks */
    .dropdown li a {
        position: relative;
        overflow: hidden;
    }

    .dropdown li a::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: radial-gradient(circle, rgba(255,255,255,.2) 0%, transparent 100%);
        transform: scale(0);
        transition: transform 0.3s ease-out;
        pointer-events: none;
    }

    .dropdown li a:active::after {
        transform: scale(2);
        transition: 0s;
    }

    .hamburger-menu {
        display: block;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1002;
    }

    .hamburger-menu .bar {
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 5px 0;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    .hamburger-menu.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Exception for release notes button */
    .action-controls .icon-button#releaseNotesButton,
    #releaseNotesButton, #notifications_button {
        display: none;
    }

}

body[data-is-onboarding="true"] .navMenu {
    display: none;
}

.tooltip {
    position: fixed;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 9999; /* Ensure it's above other elements */
    max-width: 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease-in;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: adds a subtle shadow */
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.blocked-domains-list {
    list-style-type: none;
    padding-left: 0;
}

.blocked-domains-list li {
    background-color: #2c2c2c;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
}

.action-buttons {
    margin-top: 30px;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
    margin-right: 10px;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn:hover {
    opacity: 0.9;
}

/* Add this new style for the main content */
main {
    position: relative;
    z-index: 1; /* Ensure main content is below the nav menu */
}

/* Add this to your base.html style section, after the h1 styles (around line 134) */
h2 {
    font-size: 1.4em;
    color: #f4f4f4;
    margin-bottom: 1rem;
    font-family: Arial, sans-serif;
}

/* Add these styles */
.menu-group {
    position: relative;
}

.menu-group .group-title {
    padding-right: 20px; /* Space for caret */
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1a1a1a;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1001;
    border-radius: 4px;
}

.dropdown li {
    width: 100%;
}

.dropdown li a {
    padding: 12px 16px;
    display: block;
    white-space: nowrap;
    background-color: #1a1a1a;
    width: 100%; /* Ensure the anchor takes full width */
    font-size: small;
}

.dropdown li a:hover {
    background-color: #333;
    color: #FFA500;
}

.menu-group:hover .dropdown {
    display: block;
}

.group-title i {
    margin-left: 5px;
}

.dropdown li a::after {
    display: none; /* Remove the underline effect from dropdown items */
}

.menu-group:hover .group-title {
    color: #FFA500; /* Orange text for group title when dropdown is open */
}

/* Mobile-specific styles */
@media (max-width: 1045px) {
    .task-monitor-container {
        position: fixed; /* Explicitly set for mobile to ensure anchoring */
        /* Override desktop positioning */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        /* Keep flex, but change direction for bottom alignment */
        flex-direction: column-reverse; /* Dropdown will be on top of display */
        align-items: stretch; /* Make children full-width */
        
        /* Override desktop transform for hiding */
        transform: translateY(100%); /* Hidden at the bottom */
        transform-origin: bottom;

        /* Adjust other properties for mobile */
        font-size: 0.9em;
        line-height: 1.2;
        right: 0; /* Override desktop right property */
    }

    .task-monitor-container.visible {
        transform: translateY(0); 
    }
    
    .task-monitor-container.visible + .task-monitor-toggle {
        bottom: 55px; /* Position it above the taller task display bar */
    }
    
    .task-monitor-container.hidden {
        transform: translateY(100%); 
    }

    .task-monitor-toggle {
        display: flex !important; /* Make it visible, overriding any other display:none */
        top: auto;
        bottom: 25px; /* Lowered by 30px when monitor is hidden */
        right: 15px;
        left: auto;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: #2c2c2c;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    .current-task-display {
        border-radius: 4px 4px 0 0;
        margin-right: 0; /* Remove desktop margin */
        min-width: 100%;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
        /* Make taller and align content to top on mobile */
        padding-bottom: 10px; /* Original from base is 10px, this adds 15px height */
        align-items: flex-start; /* Aligns text spans to the top */
    }
    
    .task-monitor-dropdown {
        width: 100%;
        border-radius: 8px 8px 0 0;
        margin-bottom: 5px;
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
    }

    .rate-limits-section-toggle {
        display: none;
    }
    
    .current-task-display,
    .task-monitor-dropdown {
        width: auto;
    }
}

/* Release Notes Popup Styles */
.release-notes-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

.release-notes-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1099;
    backdrop-filter: blur(3px);
}

.release-notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.release-notes-title {
    font-size: 1.5em;
    color: #fff;
    margin: 0;
    font-weight: 600;
}

.release-notes-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.8em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

.release-notes-close:hover {
    color: #fff;
}

.release-notes-content {
    color: #f4f4f4;
    line-height: 1.8;
}

.release-notes-content h4 {
    color: #4CAF50;
    font-size: 1.2em;
    margin-bottom: 15px;
}

.release-notes-content h3 {
    color: #888;
    font-size: 1em;
    font-weight: normal;
    margin: 5px 0 0 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
}

.release-notes-body {
    padding: 0 0 10px 0;
    white-space: pre-line;
}

.release-notes-date {
    color: #666;
    font-size: 0.9em;
    margin-top: 20px;
    text-align: right;
    font-style: italic;
}

@media (max-width: 1045px) {
    .release-notes-popup {
        width: 95%;
        padding: 20px;
        max-height: 90vh;
    }

    .release-notes-title {
        font-size: 1.3em;
    }

    .release-notes-content {
        font-size: 0.95em;
    }
}

/* Custom scrollbar for release notes */
.release-notes-popup::-webkit-scrollbar {
    width: 10px;
}

.release-notes-popup::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 6px;
}

.release-notes-popup::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
    border: 2px solid #1a1a1a;
}

.release-notes-popup::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Add task monitor styles */
.task-monitor-container {
    position: fixed;
    top: 50px;
    right: calc(80px + env(safe-area-inset-right, 0px));
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: top;
    font-size: 1.0em;
    line-height: 0.6;
}

.task-monitor-container.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.task-monitor-container.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.task-monitor-dropdown {
    position: relative;
    top: 0;
    background-color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 300px;
    /* max-height: 400px; */ /* Control via transitions */
    overflow-y: auto;
    margin-top: 5px;
    padding: 0;
    /* opacity: 1; */ /* Control via transitions */
    /* transition: opacity 0.3s ease, transform 0.3s ease; */ /* Control via transitions */

    /* --- START: Minimal Visibility Control --- */
    /* Hide by default using max-height, opacity, and collapse margins/padding/border */
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* Crucial for max-height transition */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0; /* Collapse margin when hidden */
    border-width: 0; /* Collapse border when hidden */
    pointer-events: none; /* Prevent interaction when hidden */
    /* Define transitions for smooth open/close */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin-top 0.3s ease-out, border-width 0.3s ease-out;
    /* --- END: Minimal Visibility Control --- */
}

/* --- START: Rule to Show Dropdown --- */
/* Show dropdown ONLY when the container is visible AND the dropdown has the 'dropdown-visible' class */
.task-monitor-container.visible .task-monitor-dropdown.dropdown-visible {
    max-height: 400px; /* Restore max height */
    opacity: 1; /* Make visible */
    /* Restore visual elements */
    padding: 0; /* Assuming inner elements have padding */
    margin-top: 5px; /* Restore original margin */
    border: 1px solid #333; /* Restore border if needed */
    pointer-events: auto; /* Allow interaction */
    overflow-y: auto; /* Re-enable vertical scroll */
}
/* --- END: Rule to Show Dropdown --- */

/* IMPORTANT: Remove or comment out the old rule that hid the dropdown when the container was hidden */
/* Ensure this block is removed or commented out: */
/*
.task-monitor-container.hidden .task-monitor-dropdown,
.task-monitor-container.hidden .current-task-display {
    transform: translateY(-20px);
    opacity: 0;
}
*/

.task-monitor-toggle {
    position: fixed;
    top: 50px;
    right: calc(45px + env(safe-area-inset-right, 0px));
    background-color: #1a1a1a;
    color: #888;
    border: none;
    padding: 8px;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjust toggle positions if necessary */
.rate-limits-section-toggle {
    position: fixed;
    top: 50px;
    right: calc(45px + 28px + 8px + env(safe-area-inset-right, 0px));
    background-color: #1a1a1a;
    color: #888;
    border: none;
    padding: 8px;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-monitor-toggle:hover {
    color: #f4f4f4;
    background-color: #2c2c2c;
}

.task-monitor-toggle i {
    transition: transform 0.3s ease;
}

.task-monitor-container.hidden + .task-monitor-toggle i {
    transform: rotate(180deg);
}

.current-task-display {
    background-color: #1a1a1a;
    padding: 10px 15px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 5px; /* Add spacing between current task and toggle */
}

.current-task-display:hover {
    background-color: #2c2c2c;
}

.current-task-name {
    font-weight: 600;
    color: #f4f4f4;
    margin-right: 10px;
}

.current-task-time {
    color: #888;
    font-size: 0.9em;
}

.task-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    background-color: #1a1a1a;
    z-index: 1;
}

.task-monitor-title {
    font-weight: 600;
    color: #f4f4f4;
    font-size: 1.1em;
}

.task-monitor-refresh {
    display: none;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.task-monitor-refresh:hover {
    color: #f4f4f4;
    background-color: #333;
}

.task-list {
    padding: 10px 0;
}

.task-item {
    padding: 12px 15px;
    border-bottom: 1px solid #2c2c2c;
    transition: background-color 0.2s ease;
}

.task-item:last-child {
    border-bottom: none;
}

.task-item:hover {
    background-color: #2c2c2c;
}

.task-name {
    font-weight: 500;
    color: #f4f4f4;
    margin-bottom: 5px;
}

.task-timing {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 0.9em;
}

.task-timing span {
    background-color: #333;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.no-tasks {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

.error {
    padding: 20px;
    text-align: center;
    color: #ff6b6b;
}

.loading {
    padding: 20px;
    text-align: center;
    color: #888;
}

/* Task monitor scrollbar styles */
.task-monitor-dropdown::-webkit-scrollbar {
    width: 8px;
}

.task-monitor-dropdown::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 8px;
}

.task-monitor-dropdown::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 8px;
    border: 2px solid #1a1a1a;
}

.task-monitor-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Remove the task monitor button from the header controls */
.action-controls .task-monitor-button {
    display: none;
}

@media (max-width: 1045px) {
    .task-monitor-container {
        position: fixed; /* Explicitly set for mobile to ensure anchoring */
        /* Override desktop positioning */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        /* Keep flex, but change direction for bottom alignment */
        flex-direction: column-reverse; /* Dropdown will be on top of display */
        align-items: stretch; /* Make children full-width */
        
        /* Override desktop transform for hiding */
        transform: translateY(100%); /* Hidden at the bottom */
        transform-origin: bottom;

        /* Adjust other properties for mobile */
        font-size: 0.9em;
        line-height: 1.2;
        right: 0; /* Override desktop right property */
    }

    .task-monitor-container.visible {
        transform: translateY(0); 
    }
    
    .task-monitor-container.visible + .task-monitor-toggle {
        bottom: 55px; /* Position it above the taller task display bar */
    }
    
    .task-monitor-container.hidden {
        transform: translateY(100%); 
    }

    .task-monitor-toggle {
        display: flex !important; /* Make it visible, overriding any other display:none */
        top: auto;
        bottom: 25px; /* Lowered by 30px when monitor is hidden */
        right: 15px;
        left: auto;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: #2c2c2c;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    .current-task-display {
        border-radius: 4px 4px 0 0;
        margin-right: 0; /* Remove desktop margin */
        min-width: 100%;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
        /* Make taller and align content to top on mobile */
        padding-bottom: 10px; /* Original from base is 10px, this adds 15px height */
        align-items: flex-start; /* Aligns text spans to the top */
    }
    
    .task-monitor-dropdown {
        width: 100%;
        border-radius: 8px 8px 0 0;
        margin-bottom: 5px;
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
    }

    .rate-limits-section-toggle {
        display: none;
    }
    
    .current-task-display,
    .task-monitor-dropdown {
        width: auto;
    }
}

/* Update this media query to include all task monitor mobile styles */
@media (max-width: 1045px) {
    .task-monitor-button {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        touch-action: manipulation;
    }
    
    .task-monitor-button:active {
        transform: scale(0.98);
    }
}

.task-item.running {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-left: 3px solid rgb(var(--primary-rgb));
}

.task-item.running .task-timing span:first-child {
    color: rgb(var(--primary-rgb));
    font-weight: 500;
}

.task-item.paused {
    background-color: rgba(var(--warning-rgb, 255, 165, 0), 0.1);
    border-left: 3px solid rgb(var(--warning-rgb, 255, 165, 0));
}

.task-item.paused .task-name {
    color: rgb(var(--warning-rgb, 255, 165, 0));
    font-weight: 600;
}

.task-item.paused .task-timing span {
    color: rgb(var(--warning-rgb, 255, 165, 0));
    font-weight: 500;
    background-color: rgba(var(--warning-rgb, 255, 165, 0), 0.1);
}

.current-task-display.paused {
    background-color: rgba(var(--warning-rgb, 255, 0, 0), 0.1);
    border-left: 3px solid rgb(var(--warning-rgb, 255, 0, 0));
}

.current-task-display.running {
    background-color: rgb(0, 99, 3); /* Light green background */
    border-left: 3px solid #4CAF50; /* Green border */
    /* Ensure transitions if desired */
    transition: background-color 0.3s ease, border-left-color 0.3s ease;
}

.current-task-display.running .current-task-name {
    color: #66bb6a; /* Brighter green text */
    font-weight: 600; /* Slightly bolder */
}

.current-task-display.running .current-task-time {
    color: #81c784; /* Softer green for time */
    font-style: italic;
}

/* Optional: Style for running task in the dropdown list */
.task-item.running { /* You would need to add this class in updateTaskList JS */
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 3px solid rgb(76, 175, 80);
}

.task-item.running .task-name {
    color: #66bb6a;
}

/* Update indicator */
.update-indicator {
    font-size: 14px;
    cursor: pointer;
    animation: strobe 4s ease-in-out infinite;
    scale: 0.8;
}

.update-indicator.hidden {
    display: none !important;
}

@keyframes strobe {
    0% { color: #FFA500; opacity: 0.4; }
    50% { color: #FFA500; opacity: 0.8; }
    100% { color: #FFA500; opacity: 0.4; }
}

@media (max-width: 1045px) {
    .user-info {
        display: none;
    }
}

/* Navigation hover effect for rate limits */
#mainNav:hover + .rate-limits-section,
#mainNav:hover ~ .rate-limits-section,
#navMenu:hover + .rate-limits-section,
#navMenu:hover ~ .rate-limits-section,
.dropdown:hover + .rate-limits-section,
.dropdown:hover ~ .rate-limits-section,
header:hover ~ .rate-limits-section {
    opacity: 0;
    pointer-events: none;
    /* Ensure horizontal centering and vertical hiding */
    transform: translateX(-50%) translateY(-100%); 
    /* Match the main transition timing, add delay */
    transition: transform 0.3s ease 0.3s, opacity 0.3s ease 0.3s; 
}

.rate-limits-section {
    /* opacity: 1; */ /* Removed debugging override */
    /* transform: translate(-50%, 0); */ /* Removed conflicting transform */
    /* transition: all 0.5s ease; */ /* Removed conflicting transition */
    z-index: 998;
    position: fixed;
    top: 50px;
    left: 50%;
    width: auto;
    opacity: 0; /* Start hidden */
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Define transition */
    transform-origin: top;
    /* Apply horizontal centering AND initial vertical hiding */
    transform: translateX(-50%) translateY(-100%); 
}

/* Add this class for visibility control via JS */
.rate-limits-section.visible {
    /* Maintain horizontal centering, move vertically into view */
    transform: translateX(-50%) translateY(0); 
    opacity: 1;
    pointer-events: auto;
}

/* Mobile-specific styles */
@media (max-width: 1045px) {
    .icon-button {
        min-width: 44px;  /* Minimum touch target size */
        min-height: 44px;
        padding: 12px 16px;
        margin: 4px;
        touch-action: manipulation;  /* Optimize for touch */
    }
    
    .button-text {
        font-size: 16px;  /* Larger text on mobile */
    }
    
    .action-controls {
        display: flex;
        gap: 0px;  /* More spacing between buttons on mobile */
    }

    body {
        padding-top: 70px;
    }
}

/* Prevent body scrolling when a modal is open */
body.modal-open {
    overflow: hidden;
}

/* Help Overlay Styles */
#help-overlay { 
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1050; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(3px); 
}

/* Make overlay visible when its associated modal is shown */
#help-overlay.visible {
    display: block; 
}

/* Help Modal Box Styles */
#help-modal-box { 
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1051; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    width: 70%;
    max-height: 85vh; 
    background-color: #1e1e1e; 
    color: #f1f1f1;
    border: 1px solid #555; 
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    /* Use flexbox for internal layout ONLY WHEN VISIBLE */
    flex-direction: column;
}

/* Make modal box visible AND apply flex layout when shown */
#help-modal-box.visible {
    display: flex; 
}

/* Style for the header section within the help modal */
.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #444;
    flex-shrink: 0; /* Prevent header shrinking */
}

.help-modal-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: #fff;
}

/* Style for the close button within the help modal header */
.help-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.help-modal-close:hover {
    color: #fff;
}

/* Style for the main scrollable body of the help modal */
.help-modal-body {
    padding: 20px;
    overflow-y: auto; /* Enable scrolling for content */
    flex-grow: 1; /* Allow body to take up remaining space */
    line-height: 1.6;
}

/* Content styling using the body ID */
#help-modal-body h3 { 
    color: #4CAF50;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.2em;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

#help-modal-body h4 {
    color: #00aeff;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.1em;
}

#help-modal-body ul {
    list-style: disc;
    padding-left: 30px;
    margin-bottom: 15px;
}

#help-modal-body li {
    margin-bottom: 8px;
}

#help-modal-body p {
    margin-bottom: 15px;
}

#help-modal-body code {
    background-color: #333;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    color: #eee; /* Ensure code text is visible */
}

#help-modal-body pre code {
     display: block;
     background-color: #111;
     padding: 10px;
     border-radius: 5px;
     overflow-x: auto;
     font-size: 0.85em;
     border: 1px solid #333;
}

#help-modal-body a {
    color: #3498db;
    text-decoration: none;
}

#help-modal-body a:hover {
    text-decoration: underline;
}

/* Help Button styles remain the same */
.help-button {
    display: none; /* Still hidden by default and on mobile */
    position: fixed;
    top: 60px; /* Below the header */
    /* Start mostly hidden off-screen */
    left: -30px; /* Keep 10px visible (40px width - 30px) */
    z-index: 999; 
    background-color: #007bff; 
    color: white;
    border: none;
    border-radius: 0 50% 50% 0; /* Round only the right corners */
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Adjust shadow for side position */
    /* Add transition for smooth reveal */
    transition: left 0.3s ease-in-out, background-color 0.3s ease; 
    padding-left: 10px; /* Add padding to push icon right */
}

.help-button:hover {
    background-color: #0056b3;
    /* Reveal the button on hover */
    left: 0px; /* Position fully visible */
}

.help-button i {
    margin: 0; 
}

/* START NEW CODE */
@keyframes helpButtonAppearBounce {
    0% {
        left: -50px; /* MODIFIED: Was -40px. Start further off-screen to hide the full 50px width */
        opacity: 0.5;
    }
    60% {
        left: 0px; /* Overshoot */
        opacity: 1;
    }
    80% {
        left: -5px; /* Bounce back */
    }
    100% {
        left: 0px; /* Settle in fully visible state */
        opacity: 1;
    }
}

.help-button-animate-appear {
    animation: helpButtonAppearBounce 1s ease-out forwards;
    /* 'forwards' ensures it stays at the animation's end state (left: 0px) */
}
/* END NEW CODE */

/* Show Help Button only on Desktop (No changes made here in the last step) */
@media (min-width: 1046px) {
    .help-button {
        display: flex; /* Or inline-flex, block depending on desired layout */
        align-items: center;
        justify-content: center;
    }
}

/* START EDIT: Modify Pause Status Banner Styles for Bottom Position */
.pause-status-banner {
    background-color: #ffc107; /* Warning color */
    color: #333; /* Dark text for contrast */
    padding: 8px 15px;
    text-align: center;
    font-weight: bold;
    position: fixed;
    bottom: 0; /* Position at the bottom */
    left: 0;
    right: 0;
    z-index: 997; /* Example: Lower than rate-limits section */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); /* Shadow on the top edge */
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(0); /* Start in visible position */
    opacity: 1;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px 8px 0 0; /* Round top corners */
}

.pause-banner-close {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #333;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    margin-left: 10px;
}

.pause-banner-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.pause-status-banner.hidden {
    transform: translateY(100%); /* Slide down when hidden */
    opacity: 0;
    pointer-events: none;
}

/* Remove body padding adjustment as banner is now at the bottom */
/* body.has-visible-section {
    padding-top: 80px; 
} */

/* Remove mobile padding adjustment */
/* @media (max-width: 1045px) {
    body.has-visible-section {
        padding-top: 80px !important; 
    }
} */
/* END EDIT */

.task-list-header {
    padding: 8px 15px;
    font-weight: bold;
    color: #aaa; /* Lighter gray */
    background-color: #2a2a2a; /* Slightly different background */
    border-bottom: 1px solid #333;
    font-size: 0.9em;
    text-transform: uppercase;
    position: sticky; /* Make headers sticky if desired */
    top: 35px; /* Adjust based on main header height if sticky */
    z-index: 1; /* Ensure it stays above task items */
}

/* Add margin between sections if both exist */
.task-list-header + .task-list-header {
    margin-top: 10px;
}

.task-list {
    padding: 0; /* Remove default padding if headers handle spacing */
}

/* Calendar View Styles */
.calendar-container {
    padding-top: 20px;
}

.calendar-container h1 {
    margin-bottom: 20px;
    color: #FFA500; /* Example: Orange to match nav hover */
    text-align: center;
}

.calendar-day-group {
    margin-bottom: 30px;
    background-color: #2c2c2c; /* Dark background for the day group */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.calendar-day-group h2 {
    font-size: 1.5em; /* Larger date heading */
    color: #f4f4f4;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}

.calendar-event-list {
    list-style-type: none;
    padding-left: 0;
}

.calendar-event {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    margin-bottom: 8px;
    background-color: #333;
    border-radius: 4px;
    border-left: 5px solid #555; /* Default border color */
    transition: background-color 0.2s ease;
}

.calendar-event:last-child {
    margin-bottom: 0;
}

.calendar-event:hover {
    background-color: #3a3a3a;
}

.event-time {
    flex-basis: 100px; /* Fixed width for time */
    font-size: 0.9em;
    color: #aaa;
    text-align: right;
    margin-right: 15px;
    font-weight: bold;
}

.event-time .all-day-indicator {
    font-style: italic;
    color: #888;
}

.event-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.event-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #f0f0f0;
    margin-bottom: 3px;
}

.event-category {
    font-size: 0.85em;
    color: #bbb;
    margin-bottom: 5px;
}

/* Event type specific styling */
.calendar-event.event-type-movie {
    border-left-color: #3498db; /* Blue for movies */
}
.calendar-event.event-type-movie .event-category {
    color: #3498db;
}

.calendar-event.event-type-tv_show {
    border-left-color: #9b59b6; /* Purple for TV shows */
}
.calendar-event.event-type-tv_show .event-category {
    color: #9b59b6;
}

/* Status specific styling */
.event-status-badge {
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
    align-self: flex-start; /* Align to the start of the flex container */
    margin-top: 3px;
}

.calendar-event.status-collected .event-title,
.calendar-event.status-checking_upgrade .event-title {
    text-decoration: line-through;
    color: #888;
}
.calendar-event.status-collected .event-category,
.calendar-event.status-checking_upgrade .event-category {
    color: #666;
}

.calendar-event.status-collected {
    border-left-color: #2ecc71; /* Green for collected */
    opacity: 0.7;
}
.event-status-badge.status-collected {
    background-color: #2ecc71;
}

.calendar-event.status-checking_upgrade {
    border-left-color: #f39c12; /* Orange for checking/upgrading */
    opacity: 0.8;
}
.event-status-badge.status-checking_upgrade {
    background-color: #f39c12;
}

/* Default/Upcoming/Uncollected states */
.calendar-event.status-upcoming .event-title {
    /* Default movie title color */
}
.calendar-event.status-uncollected .event-title {
    /* Default tv show title color */
}

@media (max-width: 768px) {
    .calendar-event {
        flex-direction: column;
        align-items: flex-start;
    }
    .event-time {
        text-align: left;
        margin-bottom: 5px;
        font-size: 0.85em;
    }
    .calendar-container h1 {
        font-size: 1.8em;
    }
    .calendar-day-group h2 {
        font-size: 1.3em;
    }
    .event-title {
        font-size: 1em;
    }
}

/* Calendar Page General */
.calendar-page-container {
    padding-top: 10px;
}

/* Calendar Grid Section Styles */
.calendar-grid-section {
    margin-bottom: 40px;
    background-color: #1e1e1e; /* Darker background for the grid container */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.calendar-grid-header {
    display: flex;
    justify-content: center; /* Center month name */
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.calendar-grid-header h2 {
    font-size: 1.6em;
    color: #FFA500; /* Theme orange */
    margin: 0;
}

.calendar-nav button { /* Basic styling for prev/next buttons if you add them */
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
}
.calendar-nav button:hover {
    background-color: #444;
}

.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Equal column widths */
}

.calendar-grid th { /* Day names: Mon, Tue, etc. */
    background-color: #1a1a1a;
    color: #ccc;
    font-weight: 600;
    text-align: center;
    padding: 8px 5px;
    font-size: 0.9em;
    border-bottom: 2px solid #FFA500; /* Accent border */
}

.calendar-grid td {
    border: 1px solid #383838; /* Slightly lighter border for cells */
    height: 140px; /* Adjust as needed, make it taller for more events */
    vertical-align: top;
    text-align: left;
    padding: 5px;
    background-color: #2c2c2c;
    position: relative; /* For day number positioning */
    overflow: hidden; /* To contain event list */
}

.calendar-grid td .day-number {
    font-size: 0.85em;
    color: #aaa;
    position: absolute;
    top: 4px;
    right: 4px;
    font-weight: 500;
}

.calendar-grid td.is-today {
    background-color: #374a33; /* Highlight today's cell slightly */
    /* border: 1px solid #FFA500; */
}

.calendar-grid td.is-today .day-number {
    background-color: #FFA500;
    color: #1a1a1a;
    /* padding: 0px 7px; */ /* Removed asymmetric padding */
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8em;
    /* New properties for circular shape and centering text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;  /* Equal width */
    height: 2em; /* Equal height, makes it a circle with border-radius: 50% */
    text-align: center; /* Ensures number is centered if flex is not fully supported */
    line-height: 1; /* Adjust line-height to prevent interference with flex centering */
}

.calendar-grid td.other-month {
    background-color: #222; /* Darker for days not in the current month */
}
.calendar-grid td.other-month .day-number {
    color: #666;
}
.calendar-grid td.other-month .grid-event-list {
    display: none; /* Hide events for other months in grid */
}


.grid-event-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0; /* Space below day number */
    max-height: calc(100% - 20px); /* Fill cell, minus space for day number */
    overflow-y: hidden; /* Scroll if many events */
}
/* Slim scrollbar for grid event list */
.grid-event-list::-webkit-scrollbar { width: 4px; }
.grid-event-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 2px; }
.grid-event-list::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }
.grid-event-list::-webkit-scrollbar-thumb:hover { background: #666; }


.grid-event-item {
    font-size: 0.75em; /* Smaller font for grid items */
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... for long titles */
    color: #fff;
    display: block; /* Ensure they take full width for ellipsis */
}
.grid-event-item.more-events {
    text-align: center;
    color: #888;
    background-color: transparent !important; /* Override type/status colors */
}

/* Colors for event types in grid - consistent with timeline */
.grid-event-item.event-type-movie { background-color: #3498db; } /* Blue for movies */
.grid-event-item.event-type-tv_show { background-color: #9b59b6; } /* Purple for TV */

/* Status indicators for grid items */
.grid-event-item.status-collected,
.grid-event-item.status-checking_upgrade {
    text-decoration: line-through;
    opacity: 0.6;
}
.grid-event-item.status-collected { background-color: #27ae60; } /* Darker Green */
.grid-event-item.status-checking_upgrade { background-color: #d35400; } /* Darker Orange */
.grid-event-item.status-premiered_uncollected { background-color: #c0392b; } /* Darker Red */
.grid-event-item.status-upcoming_collected { /* A collected item that is upcoming */
    background-color: #27ae60; opacity: 0.8;
}


/* Timeline Section Styles */
.calendar-timeline-section {
    margin-top: 30px;
}
.timeline-header { /* New header for timeline */
    font-size: 1.6em;
    color: #FFA500;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}
.no-timeline-events {
    text-align: center;
    color: #888;
    padding: 20px;
}


/* Existing Timeline Styles (ensure they are correctly prefixed or scoped if needed) */
/* .calendar-container h1 was used before, now it's .timeline-header or grid header h2 */

.calendar-day-group { /* Styles for each day's list in timeline */
    margin-bottom: 25px;
    background-color: #2c2c2c;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.calendar-day-group h3 { /* Date string for timeline groups */
    font-size: 1.3em;
    color: #e0e0e0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #444;
}

.calendar-event-list { /* List of events under a date in timeline */
    list-style-type: none;
    padding-left: 0;
}

.calendar-event { /* Individual event item in timeline */
    display: flex;
    align-items: center;
    padding: 10px 8px;
    margin-bottom: 6px;
    background-color: #333;
    border-radius: 4px;
    border-left: 4px solid #555; /* Default border */
    transition: background-color 0.2s ease;
}
.calendar-event:last-child { margin-bottom: 0; }
.calendar-event:hover { background-color: #3b3b3b; }

.event-time { /* Time part of a timeline event */
    flex-basis: 90px; /* Slightly reduced */
    font-size: 0.85em;
    color: #b0b0b0;
    text-align: right;
    margin-right: 12px;
    font-weight: 500;
}
.event-time .all-day-indicator { font-style: italic; color: #888; }

.event-details { /* Details part of a timeline event */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.event-title { /* Title in timeline */
    font-size: 1em; /* Slightly reduced */
    font-weight: 600; /* Bolder */
    color: #f0f0f0;
    margin-bottom: 2px;
}
.event-category { /* Category (Movie/TV) in timeline */
    font-size: 0.8em;
    color: #aaa;
    margin-bottom: 4px;
}
.event-status-badge { /* Status badge in timeline */
    font-size: 0.75em;
    padding: 2px 5px;
    border-radius: 3px;
    color: white;
    align-self: flex-start;
    margin-top: 2px;
    font-weight: 500;
}

/* Timeline event type colors (ensure consistency or differentiation from grid) */
.calendar-event.event-type-movie { border-left-color: #3498db; }
.calendar-event.event-type-movie .event-category { color: #3498db; }
.calendar-event.event-type-tv_show { border-left-color: #9b59b6; }
.calendar-event.event-type-tv_show .event-category { color: #9b59b6; }

/* Timeline status specific styling (ensure consistency) */
.calendar-event.status-collected .event-title,
.calendar-event.status-checking_upgrade .event-title {
    text-decoration: line-through; color: #888;
}
.calendar-event.status-collected .event-category,
.calendar-event.status-checking_upgrade .event-category { color: #777; }

.calendar-event.status-collected { border-left-color: #2ecc71; opacity: 0.75; }
.event-status-badge.status-collected { background-color: #2ecc71; }

.calendar-event.status-checking_upgrade { border-left-color: #f39c12; opacity: 0.85; }
.event-status-badge.status-checking_upgrade { background-color: #f39c12; }

.calendar-event.status-premiered_uncollected { border-left-color: #e74c3c; opacity: 0.9; }
.event-status-badge.status-premiered_uncollected { background-color: #e74c3c; }

.calendar-event.status-upcoming_uncollected { border-left-color: #3498db; /* Or specific color for upcoming not collected */ }
.event-status-badge.status-upcoming_uncollected { background-color: #5dade2; }

.calendar-event.status-upcoming_collected { border-left-color: #2ecc71; opacity: 0.75; }
.event-status-badge.status-upcoming_collected { background-color: #2ecc71; }


@media (max-width: 768px) {
    .calendar-grid-header h2 { font-size: 1.4em; }
    .calendar-grid th { font-size: 0.75em; padding: 6px 2px; }
    .calendar-grid td { height: 80px; padding: 3px; }
    .calendar-grid td .day-number { font-size: 0.7em; top: 2px; right: 2px; }
    .calendar-grid td.is-today .day-number { font-size: 0.7em; padding: 1px 3px;}

    .grid-event-list { margin-top: 15px; max-height: calc(100% - 18px); }
    .grid-event-item { font-size: 0.65em; padding: 1px 2px; margin-bottom: 1px;}

    /* Timeline responsive */
    .timeline-header { font-size: 1.4em; }
    .calendar-day-group h3 { font-size: 1.1em; }
    .calendar-event {
        flex-direction: column;
        align-items: flex-start; /* Children will be start-aligned and take content width */
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 6px;
    }
    .event-time {
        flex-basis: auto;   /* Override desktop flex-basis */
        width: auto;        /* Allow width to be determined by content */
        text-align: left;
        margin-right: 0;    /* Remove desktop margin-right */
        margin-bottom: 2px;
        font-size: 0.8em;
    }
    .event-details {
        flex-basis: auto;   /* Good practice for sibling items */
        width: 100%;        /* Ensure details section takes full available width */
        /* display: flex and flex-direction: column are inherited from desktop and are fine */
    }
    .event-title {
        font-size: 0.9em;
        margin-bottom: 1px;
        line-height: 1.2;
    }
    .event-category {
        font-size: 0.7em;
        margin-bottom: 1px;
        line-height: 1.2;
    }
    .event-status-badge {
        font-size: 0.65em;
        margin-top: 1px;
        padding: 1px 4px;
    }
}

@media (max-width: 480px) {
    .calendar-grid th { display: none; } /* Stack days on very small screens or simplify */
    .calendar-grid td { width: 100%; display: block; height: auto; min-height: 60px; margin-bottom: 5px;}
    .calendar-grid td .day-number { position: static; float: left; margin-right: 5px;}
    .grid-event-list { margin-top: 5px; margin-left: 30px; /* After day number */ }
}

/* Hide calendar grid on small screens */
@media (max-width: 768px) {
    .calendar-grid-section {
        display: none;
    }
}

/* Calendar Day Cell Clickability */
.calendar-day-cell {
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative; /* For potential future absolute positioned elements inside */
    min-height: 100px; /* Ensure cells have a minimum height for clickability */
    overflow: hidden; /* Disable scrolling */
}

.calendar-day-cell:hover {
    background-color: #3a3a3a; /* Darker hover, adjust as needed */
}

.no-events-in-cell {
    /* This can be an empty div that helps maintain cell height if you don't rely on content */
    /* Or you can remove this and ensure min-height on td is sufficient */
}


/* Day Events Modal Styles */
.day-events-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1055; /* Higher than header, lower than modal */
    backdrop-filter: blur(3px);
}

.day-events-modal {
    display: none; /* Hidden by default */
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px; /* Adjust as needed */
    max-height: 80vh;
    background-color: #1e1e1e;
    color: #f1f1f1;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 1060; /* Above overlay */
}

.day-events-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #444;
    flex-shrink: 0;
}

.day-events-modal-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: #fff;
}

.day-events-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.day-events-modal-close:hover {
    color: #fff;
}

.day-events-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.modal-event-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.modal-event-item {
    display: flex;
    align-items: center;
    padding: 12px 0; /* More vertical padding */
    border-bottom: 1px solid #333;
    gap: 15px; /* Gap between time and details */
}

.modal-event-item:last-child {
    border-bottom: none;
}

.modal-event-time {
    flex-basis: 100px; /* Fixed width for time */
    font-size: 0.9em;
    color: #ccc; /* Brighter time */
    text-align: right;
    font-weight: 500;
}

.modal-event-time .all-day-indicator {
    font-style: italic;
    color: #999;
}

.modal-event-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.modal-event-title {
    font-size: 1.1em;
    font-weight: 600; /* Bolder */
    color: #f0f0f0;
    margin-bottom: 4px;
}

.modal-event-category {
    font-size: 0.85em;
    color: #bbb;
    margin-bottom: 5px;
}

.modal-event-status-badge {
    font-size: 0.8em;
    padding: 3px 7px;
    border-radius: 4px;
    color: white;
    align-self: flex-start;
    margin-top: 3px;
    font-weight: 500;
}

/* Consistent status colors for modal (should match calendar-event and grid-event-item status colors) */
.modal-event-item.status-collected .modal-event-title,
.modal-event-item.status-checking-upgrade .modal-event-title {
    text-decoration: line-through; color: #888;
}
.modal-event-item.status-collected .modal-event-category,
.modal-event-item.status-checking-upgrade .modal-event-category { color: #777; }

.modal-event-status-badge.status-collected { background-color: #2ecc71; }
.modal-event-status-badge.status-checking-upgrade { background-color: #f39c12; }
.modal-event-status-badge.status-premiered-uncollected { background-color: #e74c3c; }
.modal-event-status-badge.status-upcoming-uncollected { background-color: #5dade2; } /* Example */
.modal-event-status-badge.status-upcoming-collected { background-color: #2ecc71; }
.modal-event-status-badge.status-upcoming { background-color: #3498db; } /* Default for general upcoming if no other state */
.modal-event-status-badge.status-uncollected { background-color: #bdc3c7; color: #333; } /* Default uncollected */
.modal-event-status-badge.status-upgrading { background-color: #f1c40f; color: #333;}


/* Event type specific colors in modal (optional, but good for consistency) */
.modal-event-item.event-type-movie .modal-event-category { color: #3498db; }
.modal-event-item.event-type-tv_show .modal-event-category { color: #9b59b6; }


.no-modal-events {
    text-align: center;
    color: #888;
    padding: 20px 0;
    font-style: italic;
}

/* Ensure body scroll is prevented when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Custom scrollbar for modal body */
.day-events-modal-body::-webkit-scrollbar {
    width: 8px;
}
.day-events-modal-body::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 4px;
}
.day-events-modal-body::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
    border: 2px solid #1e1e1e;
}
.day-events-modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* PWA-specific adjustments for mobile task monitor */
@media all and (display-mode: standalone) and (max-width: 1045px) {
    .task-monitor-container {
        bottom: 40px;
    }

    .task-monitor-container.visible::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        bottom: -40px; 
        background: linear-gradient(to bottom, #1a1a1a, black);
        z-index: -1;
    }

    .task-monitor-toggle {
        bottom: 45px; /* 95px - 30px */
    }

    .task-monitor-container.visible + .task-monitor-toggle {
        bottom: 95px;
    }
}

/* --- START EDIT: Provide additional bottom padding when task monitor is visible on mobile --- */
@media (max-width: 1045px) and (display-mode: standalone) {
    body.has-bottom-overlay {
        padding-bottom: 70px; /* Prevent content from being covered by task monitor */
    }
}

@media (max-width: 1045px) {
    body.has-bottom-overlay {
        padding-bottom: 60px; /* Prevent content from being covered by task monitor */
    }
}
/* --- END EDIT --- */

/* --- Version '666' Easter Egg --- */
@keyframes redStrobe {
    0%   { color: #aaa; text-shadow: 0 0 1px transparent; }
    50%  { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
    100% { color: #aaa; text-shadow: 0 0 1px transparent; }
}

@keyframes bloodDripFall {
    /* Idle period */
    0%   { height: 0; opacity: 0; transform: translateY(0); }
    70%  { height: 0; opacity: 0; transform: translateY(0); }
    /* Drop starts */
    75%  { height: 6px; opacity: 1; transform: translateY(0); }
    95%  { height: 6px; opacity: 1; transform: translateY(14px); }
    /* Fade & reset */
    100% { height: 0; opacity: 0; transform: translateY(14px); }
}

.version-evil {
    position: relative;
    animation: redStrobe 3s ease-in-out infinite;
}

.version-evil::before,
.version-evil::after {
    content: '';
    position: absolute;
    top: 100%; /* Start exactly at the bottom of the text */
    width: 3px;
    height: 0;
    background: #b30000;
    border-radius: 50%;
    animation: bloodDripFall var(--drip-duration, 1.5s) infinite ease-in-out;
    transform-origin: top;
}

.version-evil::before { animation-delay: var(--drip-delay1, 0s); left: 30%; }
.version-evil::after  { animation-delay: var(--drip-delay2, 3s); left: 60%; }

/* Button to disable evil version */
.disable-evil-btn {
    margin-left: 6px;
    background: #550000;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.8em;
    padding: 2px 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    pointer-events: auto;
    position: relative;
    z-index: 1050; /* sit above anchor */
}
.disable-evil-btn:hover {
    background: #770000;
}

@media (max-width: 1045px) {
    .disable-evil-btn {
        padding: 1px 4px;
        font-size: 1em;
        border-radius: 5px;
    }
}

/* -------------------------------------------------------------------
   Mobile fix – make sure the task-monitor stays pinned to the bottom
   of the visual viewport even when the browser chrome hides / shows
   ------------------------------------------------------------------- */
@media (max-width: 1045px) {
    /* Always stick the whole container to the very bottom */
    .task-monitor-container {
        position: fixed !important;        /* override any earlier rule */
        top: auto !important;              /* neutralise desktop value */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0px) !important;
        left: 0;
        right: 0;
    }

    /* Toggle button – keep its offsets in sync with the container */
    .task-monitor-toggle {
        bottom: calc(25px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .task-monitor-container.visible + .task-monitor-toggle {
        bottom: calc(55px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* -------------------------------------------------------------------
   Stand-alone (PWA) iOS fix – bump everything up so it clears the
   home-indicator area and the rounded screen corners.
   ------------------------------------------------------------------- */
@media all and (display-mode: standalone) and (max-width: 1045px) {
    .task-monitor-container {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important; /* previous 40px gap retained */
    }

    .task-monitor-toggle {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 45px) !important;
    }

    .task-monitor-container.visible + .task-monitor-toggle {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 95px) !important;
    }
}