/* ==========================================================================
   Color Palettes & Theme Variables
   ========================================================================== */

/* Light Theme (Default) */
:root {
    /* -- Text Colors -- */
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-text-subtle: #666;
    --color-text-header: #2c3e50;
    --color-text-link: #0056b3;
    --color-text-inverted: #ffffff;
    --color-text-on-accent: #ffffff;
    --color-text-placeholder: #777;

    /* -- Background Colors -- */
    --color-background-body: #fff;
    --color-background-card: #fdfdfd;
    --color-background-form: #f9f9f9;
    --color-background-info: #f8f9fa;
    --color-background-info-subtle: #f7f7f7;
    --color-background-table-header: #f2f2f2;
    --color-background-modal-backdrop: rgba(0,0,0,0.5);
    --color-background-modal-content: #fefefe;
    --color-background-mycamp-highlight: #fffbe6;
    --color-border-mycamp-highlight: #ffeeba;

    /* -- Border & Shadow Colors -- */
    --color-border-primary: #ccc;
    --color-border-secondary: #ddd;
    --color-border-subtle: #eee;
    --color-border-input: #ccc;
    --color-border-info: #dee2e6;
    --color-shadow-primary: rgba(0,0,0,0.1);
    --color-shadow-secondary: rgba(0,0,0,0.05);
    --color-shadow-success: rgba(40, 167, 69, 0.2);

    /* -- Accent & Action Colors -- */
    --color-accent-primary: #007bff; /* Blue */
    --color-accent-primary-hover: #0056b3;
    --color-accent-secondary: #6c757d; /* Gray */
    --color-accent-secondary-hover: #5a6268;
    --color-accent-success: #28a745; /* Green */
    --color-accent-success-hover: #218838;
    --color-accent-warning: #ffc107; /* Yellow */
    --color-accent-warning-text: #856404;
    --color-accent-warning-bg: #fffbe6;
    --color-accent-warning-border: #ffeeba;
    --color-accent-danger: #dc3545; /* Red */
    --color-accent-danger-hover: #c82333;
    --color-accent-danger-text: #721c24;
    --color-accent-danger-bg: #f8d7da;
    --color-accent-danger-border: #f5c6cb;

    /* -- Accordion Header Colors -- */
    --color-accordion-config-bg: #d9fded;
    --color-accordion-config-hover: #b8e3d0;
    --color-accordion-mycamp-bg: #fff3cd;
    --color-accordion-mycamp-hover: #ffeeba;
    --color-accordion-find-bg: #d2eaff;
    --color-accordion-find-hover: #add9ff;
    --color-accordion-about-bg: #e2e6ea;
    --color-accordion-about-hover: #dae0e5;
    --color-accordion-find-border: #9acbff;

    /* -- Status Message & Tab Colors -- */
    --color-background-status-message: #eef7ff;
    --color-border-status-message: #b3d7f7;
    --color-tab-campsite-inactive-bg: #e6ffed;
    --color-tab-campsite-inactive-border: #c3e6cb;
    --color-tab-campsite-hover-bg: #d4f5dd;
    --color-tab-campsite-active-bg: #c3e6cb;
    --color-tab-campground-inactive-bg: #e7f3ff;
    --color-tab-campground-inactive-border: #d2eaff;
    --color-tab-campground-hover-bg: #d2eaff;
    --color-tab-campground-active-bg: #add9ff;
    --color-session-details-bg: #e9e9e9;

    /* -- Availability Status Colors -- */
    --color-status-available-bg: #5bff55;
    --color-status-available-text: #333;
    --color-status-reserved-bg: #630101;
    --color-status-reserved-text: #ffffff;
    --color-status-closed-bg: #333333;
    --color-status-closed-text: #ffffff;
    --color-status-walkup-bg: #fff3cd;
    --color-status-walkup-text: #664d03;
    --color-status-cutoff-bg: #60532b;
    --color-status-cutoff-text: #f3d26e;
    --color-status-open-bg: #0056b3;
    --color-status-open-text: #ffffff;
    --color-status-nyr-bg: #002c06;
    --color-status-nyr-text: #ffffff;
    --color-status-unknown-bg: #ff00ff;
    --color-status-unknown-text: #333;

    /* -- Icon Colors -- */
    --color-icon-default: #aaa;
    --color-icon-favorite: #ffc107;
    --color-icon-favorite-hover: #e0a800;
    --color-icon-favorite-remove-hover: #dc3545;
    --color-icon-alert-default: #aaa;
    --color-icon-alert-staged: #007bff;
    --color-icon-alert-active: #28a745;
}

/* Dark Theme */
html[data-theme='dark'] {
    /* -- Text Colors -- */
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-text-subtle: #999;
    --color-text-header: #e0e0e0;
    --color-text-link: #66bfff;
    --color-text-inverted: #121212;
    --color-text-placeholder: #888;

    /* -- Background Colors -- */
    --color-background-body: #121212;
    --color-background-card: #1e1e1e;
    --color-background-form: #242424;
    --color-background-info: #2a2a2a;
    --color-background-info-subtle: #272727;
    --color-background-table-header: #333;
    --color-background-modal-backdrop: rgba(0,0,0,0.7);
    --color-background-modal-content: #2c2c2c;
    --color-background-mycamp-highlight: #3d2c13;
    --color-border-mycamp-highlight: #5a4018;

    /* -- Border & Shadow Colors -- */
    --color-border-primary: #444;
    --color-border-secondary: #3a3a3a;
    --color-border-subtle: #303030;
    --color-border-input: #555;
    --color-border-info: #4a4a4a;
    --color-shadow-primary: rgba(0,0,0,0.5);
    --color-shadow-secondary: rgba(0,0,0,0.3);
    --color-shadow-success: rgba(40, 167, 69, 0.35);

    /* -- Accordion Header Colors -- */
    --color-accordion-config-bg: #133b2f; /* Dark Green */
    --color-accordion-config-hover: #1b4d3e;
    --color-accordion-mycamp-bg: #277819; /* Dark Yellow/Brown */
    --color-accordion-mycamp-hover: #34a820;
    --color-accordion-find-bg: #122d47; /* Dark Blue */
    --color-accordion-find-hover: #1a3c5c;
    --color-accordion-about-bg: #2c2c2c; /* Dark Gray */
    --color-accordion-about-hover: #3a3a3a;
    --color-accordion-find-border: #1a3c5c;

    /* -- Status Message & Tab Colors -- */
    --color-background-status-message: #1a2d47;
    --color-border-status-message: #2a4a6a;
    --color-tab-campsite-inactive-bg: #0d2618;
    --color-tab-campsite-inactive-border: #1b4d3e;
    --color-tab-campsite-hover-bg: #133b2f;
    --color-tab-campsite-active-bg: #1b4d3e;
    --color-tab-campground-inactive-bg: #0d1f33;
    --color-tab-campground-inactive-border: #1a3c5c;
    --color-tab-campground-hover-bg: #122d47;
    --color-tab-campground-active-bg: #1a3c5c;
    --color-session-details-bg: #333;

    /* -- Accent Colors (Overrides) -- */
    --color-accent-danger-text: #ffcdd2;
    --color-accent-danger-bg: #5a1e22;
    --color-accent-danger-border: #7f2a31;
    --color-accent-warning-text: #ffeeba;
    --color-accent-warning-bg: #4d4209;
    --color-accent-warning-border: #66580c;

    /* -- Availability Status Colors -- */
    --color-status-available-bg: #1a5c1a;
    --color-status-available-text: #c8e6c9;
    --color-status-reserved-bg: #6d2020;
    --color-status-reserved-text: #ffcdd2;
    --color-status-closed-bg: #424242;
    --color-status-closed-text: #bdbdbd;
    --color-status-walkup-bg: #4f400f;
    --color-status-walkup-text: #fff9c4;
    --color-status-cutoff-bg: #5a4f29;
    --color-status-cutoff-text: #f3d26e;
    --color-status-open-bg: #0d47a1;
    --color-status-open-text: #bbdefb;
    --color-status-nyr-bg: #003d00;
    --color-status-nyr-text: #a5d6a7;
    --color-status-unknown-bg: #8e24aa;
    --color-status-unknown-text: #e1bee7;
}

/* General Styles for Title */
.main-title {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on medium screens */
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-align: center;
    margin-bottom: 1.2em; /* Increased space below the header */
    color: var(--color-text-header);
}

.main-title img {
    height: 1em;
}

/* Invert header logo in dark mode */
html[data-theme='dark'] .main-title img {
    filter: invert(1);
}

/* Invert decorative image in dark mode */
html[data-theme='dark'] #decorative-image-container .decorative-image {
    filter: invert(1);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-background-body);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 120px; /* top | left/right | bottom -- Added extra bottom padding */
    min-height: 100vh; /* Ensure body can grow and scroll */
}

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

.instructions {
    padding: 10px 20px;
    margin-bottom: 20px;
}

.instructions p {
    margin-top: 0;
}

.instructions ol {
    padding-left: 20px;
    margin-bottom: 0;
}

/* New styles for the flexbox instruction container */
.instructions-container {
    display: flex;
    align-items: center; /* Vertically align items in the center */
    gap: 20px; /* Space between text and image */
}

.instructions-text {
    flex: 1; /* Allow the text to take up the remaining space */
}

.instructions-image {
    max-width: 200px; /* Limit the image width */
    height: auto;
    border-radius: 8px; /* Match the site's border-radius aesthetic */
    object-fit: cover;
    box-shadow: 0 2px 8px var(--color-shadow-primary);
}

/* Override default top margin for instructions inside this specific accordion */
#config-accordion-container .instructions { margin-top: 1em; }

/* Style instructions to match their accordion header */
#facility-search-accordion-container .instructions {
    background-color: var(--color-accordion-find-bg); /* Match blue header */
}

/* When using a flex container, apply the background to the container itself */
#facility-search-accordion-container .instructions-container {
    background-color: var(--color-accordion-find-bg); /* Match blue header */
}

/* Instructions in the My Camp section */
#my-camp-accordion-container .instructions {
    background-color: var(--color-background-mycamp-highlight);
}

/* Future-proofing for instructions in the config section */
#config-accordion-container .instructions {
    background-color: var(--color-accordion-config-bg); /* Match green header */
}

form {
    background-color: var(--color-background-form);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border-primary);
    margin-bottom: 20px;
}

/* --- Accordion Styles for Main Sections --- */
#config-accordion-container,
#facility-search-accordion-container,
#my-camp-accordion-container,
#about-accordion-container {
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* Ensures children with border-radius look correct */
}

.accordion-header {
    background-color: var(--color-accordion-config-bg);
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 15px 20px;
    margin: 0;
    font-size: 1.2em;
    border: none;
    text-align: left;
    outline: none;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#config-accordion-container .accordion-header:hover {
    background-color: var(--color-accordion-config-hover);
}

/* Different color for the My Camp section */
#my-camp-accordion-container .accordion-header {
    background-color: var(--color-accordion-mycamp-bg);
}

#my-camp-accordion-container .accordion-header:hover {
    background-color: var(--color-accordion-mycamp-hover);
}

/* Styles for the Admin Panel nested inside "My Camp" */
#my-camp-accordion-container #admin-panel-header {
    background-color: var(--color-accent-danger-bg);
    color: var(--color-accent-danger-text);
    padding: 10px 20px;
    margin: 20px 20px 0; /* Top, L/R, Bottom */
    font-size: 1.1em;
    border: 1px solid var(--color-accent-danger-border);
    border-bottom: none; /* Remove bottom border to merge with content */
    border-radius: 8px 8px 0 0; /* Round only the top corners */
}

#my-camp-accordion-container #admin-panel-header:hover {
    background-color: var(--color-accent-danger-border);
}

.admin-panel-content {
    padding: 15px 20px;
    margin: 0 20px 20px; /* Top, L/R, Bottom */
    background-color: var(--color-background-card);
    border: 1px solid var(--color-accent-danger-border);
    border-top: none; /* Remove top border to merge with header */
    border-radius: 0 0 8px 8px; /* Round only the bottom corners */
}

/* Different color for the facility search to distinguish it */
#facility-search-accordion-container .accordion-header {
    background-color: var(--color-accordion-find-bg);
}

#facility-search-accordion-container .accordion-header:hover {
    background-color: var(--color-accordion-find-hover);
}

/* Different color for the About section */
#about-accordion-container .accordion-header {
    background-color: var(--color-accordion-about-bg);
}

#about-accordion-container .accordion-header:hover {
    background-color: var(--color-accordion-about-hover);
}

.accordion-header .toggle-icon {
    font-size: 1em;
    transition: transform 0.3s ease;
}

.accordion-header.active .toggle-icon {
    transform: rotate(180deg);
}

.accordion-header .loading-indicator-text {
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 0.9em;
    margin-left: 10px; /* Space between title and loading text */
}

.accordion-header .loading-spinner {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border: 2px solid var(--color-border-subtle);
    border-top-color: var(--color-text-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 12px; /* Space between loading text and spinner */
    vertical-align: -0.1em; /* Better vertical alignment with text */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: var(--color-background-body);
}

/* Remove margin and border from the form when it's inside the accordion */
.accordion-content form {
    margin: 0;
    border: none;
    border-top: 1px solid var(--color-border-primary); /* Add a separator line */
    border-radius: 0;
}

/* Add top border to the content of the new My Camp accordion */
.accordion-content #my-camp-content-panel {
    border-top: 1px solid var(--color-border-primary);
}

.accordion-content #facility-search-form {
    margin: 0;
    border: none;
    border-top: 1px solid var(--color-border-primary); /* Add a separator line */
    border-radius: 0;
}

/* Add spacing for content inside the About accordion */
#about-accordion-container .info-section {
    margin: 15px 20px;
}

/* --- About Section Specifics --- */

/* FAQ Styling */
.faq-details {
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 10px;
}

.faq-details:last-child {
    border-bottom: none;
}

.faq-summary {
    cursor: pointer;
    padding: 10px 0;
    font-weight: 500;
    list-style: none; /* Hide default marker */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-link);
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary::after {
    content: '+';
    font-size: 1.2em;
    color: var(--color-text-subtle);
    font-weight: bold;
}

.faq-details[open] .faq-summary::after {
    content: '−';
}

.faq-answer {
    padding-bottom: 15px;
    color: var(--color-text-secondary);
    font-size: 0.95em;
    line-height: 1.5;
}

.about-services-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 15px;
}

.about-services-image {
    max-width: 500px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--color-shadow-primary);
    display: block;
    flex-shrink: 0;
}

.about-services-text {
    flex: 1;
}

.about-services-text p {
    margin-top: 0;
}

.about-services-text ul {
    padding-left: 20px;
    margin: 10px 0;
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.contact-card {
    background-color: var(--color-background-card);
    border: 1px solid var(--color-border-secondary);
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

.contact-card:hover {
    box-shadow: 0 4px 8px var(--color-shadow-secondary);
}

.contact-icon {
    font-size: 1.8em;
    margin-bottom: 10px;
    display: block;
}

/* --- Styles for Auth Form --- */
#auth-form {
    /* "Label-on-Top" and "Card" design */
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Space between label/input pairs */
    padding: 20px;
    margin: 0 20px 20px; /* Top, L/R, Bottom */
    background-color: var(--color-background-info);
    border: 1px solid var(--color-border-info);
    border-radius: 8px;
}

#auth-form label {
    /* "Label-on-Top" design */
    font-weight: 500;
    margin-bottom: -0.2em; /* Pulls label slightly closer to its input */
}

#auth-form input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border-input);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

/* Make button container in auth form span both columns and remove its top margin */
#auth-form .button-container {
    /* Add spacing above the buttons */
    margin-top: 1em;
}

/* --- Styles for Logged-In View --- */
#auth-logged-in {
    /* "Card" design for logged-in view, matching the login form */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    padding: 15px 20px;
    gap: 10px; /* Space between the text and the button */
    margin: 20px; /* Add top margin and keep others consistent */
    background-color: var(--color-background-mycamp-highlight);
    border: 1px solid var(--color-border-mycamp-highlight);
    border-radius: 8px;
}

#auth-logged-in #auth-user-display {
    margin: 0;
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.3; /* Add some line spacing */
    /* Allow the text to take up available space but also shrink and truncate if needed */
    flex-shrink: 1; /* Allow the text to shrink if needed, but don't let it grow */
    min-width: 0; /* Prevents the text from overflowing its container in a flex context */
    word-break: break-word; /* Allow long emails to wrap if needed */
}

#auth-logged-in #auth-user-display strong {
    color: var(--color-text-primary);
    font-size: 1.05em; /* Make the email slightly more prominent */
}

#auth-logged-in .button-container {
    margin: 0; /* Remove default margins from the generic button container */
    flex-shrink: 0; /* Prevent the button from shrinking on narrow screens */
}

#auth-sign-out-btn {
    /* A smaller, more compact sign-out button */
    padding: 8px 15px;
    font-size: 0.9em;
    background-color: var(--color-accent-secondary);
}

#auth-sign-out-btn:hover {
    background-color: var(--color-accent-secondary-hover);
}

/* Override the generic button container style specifically for the logged-in view */
#auth-logged-in .button-container {
    justify-content: flex-start; /* Align the sign-out button to the left */
    margin: 0; /* Remove default margins */
}

/* --- New Styles for Logged-In View with Image --- */
.auth-user-info-container {
    display: flex; /* This remains a flex container */
    justify-content: flex-start; /* Align items to the left */
    align-items: center; /* Keep items vertically centered */
    gap: 20px; /* Keep the gap between the text/button block and the image */
}

.auth-user-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1; /* Allow text and button to take available space */
}

.auth-user-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%; /* Make it a circle */
    border: 2px solid var(--color-border-mycamp-highlight);
    box-shadow: 0 2px 4px var(--color-shadow-primary);
    flex-shrink: 0; /* Prevent image from shrinking */
}


/* --- Styles for Cancel Account Link --- */
.cancel-account-container {
    width: 100%; /* Make it span the full width of the parent flex container */
    text-align: right; /* Align the link to the right */
    margin-top: 10px; /* Add some space above it */
}

.cancel-account-link {
    /* Style as a small, dangerous action button */
    background-color: var(--color-accent-danger-bg);
    border: 1px solid var(--color-accent-danger-border);
    color: var(--color-accent-danger);
    border-radius: 4px; /* Rounded corners like other buttons */
    padding: 2px 6px; /* Even smaller padding */
    font-size: 0.7em; /* A very small, but still legible font size */
    font-style: normal;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-account-link:hover {
    background-color: var(--color-accent-danger);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent-danger-hover);
}

/* --- Styles for Contact Manager Link --- */
.contact-manager-link {
    /* Style to match the delete button but with a neutral theme */
    background-color: var(--color-background-table-header);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7em;
    font-style: normal;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px; /* Add space between this button and the delete button */
}

.contact-manager-link:hover {
    background-color: var(--color-accent-secondary);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent-secondary-hover);
}

/* --- Nested Account Settings Accordion --- */
#account-settings-accordion-container {
    width: 100%;
    margin-top: 10px;
    border: none;
}

#account-settings-accordion-container .accordion-header {
    font-size: 0.9em;
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid var(--color-border-mycamp-highlight);
    border-radius: 4px;
    color: var(--color-text-secondary);
}

#account-settings-accordion-container .accordion-header:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--color-text-primary);
}

#account-settings-accordion-container .accordion-header.active {
    background-color: var(--color-background-body);
    border-color: var(--color-border-subtle);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: var(--color-text-primary);
    font-weight: 600;
}

#account-settings-accordion-container .accordion-content {
    background-color: var(--color-background-body);
    border: 1px solid var(--color-border-subtle);
    border-top: none;
    border-radius: 0 0 4px 4px;
}

#account-settings-accordion-container .info-section {
    padding: 15px;
    margin: 0;
    background: none;
    border: none;
}

fieldset {
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

legend {
    font-weight: bold;
    padding: 0 10px;
    color: var(--color-text-primary);
    font-size: 1.1em;
}

.form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.form-grid label {
    text-align: right;
    font-weight: 500;
}

.form-grid input[type="text"],
.form-grid input[type="date"],
.form-grid textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border-input);
    border-radius: 4px;
    box-sizing: border-box; /* Important for padding and width */
    font-size: 1em;
}

/* Visually indicate that form sections are disabled for logged-out users */
#config-accordion-container fieldset:disabled,
#config-accordion-container button:disabled,
#facility-search-accordion-container input:disabled,
#facility-search-accordion-container select:disabled,
#facility-search-accordion-container button:disabled {
    opacity: 0.6;
}

#config-accordion-container *:disabled,
#facility-search-accordion-container *:disabled,
#config-accordion-container fieldset:disabled * {
    cursor: not-allowed;
}

.form-note {
    font-size: 0.8em;
    color: var(--color-text-subtle);
    margin-top: -5px; /* Pull it a bit closer to the inputs above */
}

/* --- Styles for Facility Search --- */

/* The form container inside the accordion */
#facility-search-form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px;
    align-items: center;
    padding: 15px;
    background-color: var(--color-background-form);
}

#facility-search-form label {
    font-weight: 500;
}

#facility-search-form input[type="text"],
#facility-search-form select {
    padding: 8px;
    border: 1px solid var(--color-border-input);
    border-radius: 4px;
    font-size: 1em;
    flex-grow: 1; /* Allow input to grow */
}

/* A container for the bottom row of controls in the facility search */
.facility-search-actions {
    display: flex;
    justify-content: space-between; /* Pushes checkbox left, button right */
    align-items: center;
    width: 100%; /* Ensures this container takes a full row */
    margin-top: 10px; /* Adds space above this action row */
}

#facility-search-form button {
    padding: 8px 15px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 120px; /* Make the button wider */
}

#facility-search-form button:hover {
    background-color: var(--color-accent-primary-hover);
}

/* The status message bar */
#facility-search-status {
    background-color: var(--color-background-status-message);
    border: 1px solid var(--color-border-status-message);
    border-radius: 4px;
    padding: 10px 15px;
    margin: 15px; /* Top, L/R, Bottom margin inside the accordion content */
    font-size: 0.9em;
}

/* The results container */
#facility-search-results {
    padding: 0 15px 15px 15px; /* Padding to align with form */
}

#facility-search-results ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 400px; /* Limit height and make it scrollable */
    overflow-y: auto;
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
}

#facility-search-results li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

#facility-search-results li:last-child {
    border-bottom: none;
}

/* Facility Search Filter Styles */
#facility-filter-container {
    padding: 15px;
    margin-bottom: 15px;
    background-color: var(--color-background-info-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#facility-filter-input {
    width: 60%;
    min-width: 250px;
    padding: 10px;
    font-size: 1.2em;
    border: 1px solid var(--color-border-input);
    border-radius: 4px;
    background-color: var(--color-background-body);
    color: var(--color-text-primary);
}

/* Generic Data Table Styles (replaces old inline styles and fixed-width table) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    table-layout: fixed;
}

.data-table th, .data-table td {
    border: 1px solid var(--color-border-secondary);
    padding: 8px;
    text-align: left;
    word-wrap: break-word;
}

.data-table th {
    background-color: var(--color-background-table-header);
    font-weight: bold;
}

.reserved {
    background-color: var(--color-status-reserved-bg);
    color: var(--color-status-reserved-text);
}

.closed {
    background-color: var(--color-status-closed-bg);
    color: var(--color-status-closed-text);
}

.available {
    background-color: var(--color-status-available-bg);
    color: var(--color-status-available-text);
}

.open {
    background-color: var(--color-status-open-bg);
    color: var(--color-status-open-text);
}

.NYR {   /* Not Yet Released */
  background-color: var(--color-status-nyr-bg);
  color: var(--color-status-nyr-text);
}

.walk-up {
    background-color: var(--color-status-walkup-bg);
    color: var(--color-status-walkup-text);
}

.cutoff {
    background-color: var(--color-status-cutoff-bg);
    color: var(--color-status-cutoff-text);
}

.unknown {
    background-color: var(--color-status-unknown-bg);
    color: var(--color-status-unknown-text);
}

/* Styles for Facility Details and Request Info */
/* This is now the container for content *below* the main header, like media galleries */
.facility-details {
    /* This container no longer needs a background or border */
    margin-bottom: 20px;
}

/* --- Styles for Media Gallery / Thumbnails --- */
.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.thumbnail-image {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
    cursor: pointer;
}

/* --- New Overlapping Header Styles --- */
.details-header-container {
    margin-bottom: 20px; /* Space between header and content below */
}

.details-image-banner {
    height: 350px;
    background-color: var(--color-border-secondary);
    overflow: hidden;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the image */
}

.details-image-banner img {
    width: 100%;
    height: auto; /* Let height adjust automatically to maintain aspect ratio */
}

.details-content-block {
    position: relative;
    background-color: var(--color-background-body);
    /* Negative margin pulls it up over the image. Auto margins center it. */
    margin: -80px auto 0 auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--color-shadow-primary);
    box-sizing: border-box; /* Include padding in the width calculation to prevent overflow */
    width: 95%; /* Use a percentage for fluid width on medium screens */
    max-width: 1100px; /* Set a fixed max-width, less than the body's 1200px, to ensure image is visible on the sides */
}

/* The h1 inside the new content block, and main titles for other tabs */
.details-content-block h1,
.tab-panel .title-with-favorite h1 {
    margin-top: 0;
    font-size: 2.0em; /* Increased campground name size */
    margin-bottom: 0; /* Remove margin from h1, it will be on the container */
    color: var(--color-text-primary);
}

.facility-subheader {
    font-size: 1.2rem; /* Decreased city/state size */
    font-weight: bold;
    color: var(--color-text-secondary);
    margin-top: 0; /* Remove negative margin, spacing is now controlled by the title container */
    margin-bottom: 1em;
}

.facility-details p {
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* --- Styles for the unified At-a-Glance Section --- */
.glance-info-section {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--color-text-primary);
    padding: 15px;
    background-color: var(--color-background-info);
    border: 1px solid var(--color-border-info);
    border-radius: 4px;
}

.glance-info-section .ratings-section {
    display: flex;
    align-items: center;
    margin-bottom: 3px; /* Unify spacing with other glance items */
}

.glance-item {
    display: flex;
    align-items: center;
    /* Reset default paragraph margins and set a consistent bottom margin */
    margin: 0 0 3px 0;
}

.glance-item:last-child {
    margin-bottom: 0;
}

.glance-icon {
    width: 1.1em;
    height: 1.1em;
    margin-right: 10px;
    flex-shrink: 0;
    background-color: var(--color-accent-secondary);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.glance-icon.sites {
    -webkit-mask-image: url('media/campground-solid-full.svg');
    mask-image: url('media/campground-solid-full.svg');
    background-color: var(--color-accent-success);
}

.glance-icon.price {
    -webkit-mask-image: url('media/dollar-sign-solid-full.svg');
    mask-image: url('media/dollar-sign-solid-full.svg');
    background-color: var(--color-accent-success);
}
.glance-icon.cell {
    -webkit-mask-image: url('media/tower-cell-solid-full.svg');
    mask-image: url('media/tower-cell-solid-full.svg');
}

.id-display-section {
    /* These styles unify the look with the .glance-info-section */
    background-color: var(--color-background-info);
    border: 1px solid var(--color-border-info);
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.id-display-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.id-display-section li {
    display: flex;
    align-items: flex-start;
    padding: 3px 0; /* Reduced padding to consolidate lines */
    font-size: 0.9em;
}

.id-display-section .id-label {
    font-weight: bold;
    color: var(--color-text-primary);
    flex-basis: 250px; /* Increased width for the label column */
    flex-shrink: 0;    /* Prevent the label from shrinking */
    padding-right: 10px;
}

.id-display-section .id-value {
    flex-grow: 1;
    color: var(--color-text-secondary);
    word-break: break-word; /* Break long IDs if needed */
}

/* Style for the prominent link to Recreation.gov */
.rec-gov-link-container {
    margin-top: 20px; /* Add space above the link */
    margin-bottom: 2em; /* Add space below the link, before the description starts */
}

.rec-gov-link-container a {
    font-size: 1.1em;
    font-weight: bold;
}

/* Style for the list items inside the availability summary boxes */
.summary-item {
    padding-left: 10px; /* Add left padding for readability */
}

/* --- Styles for Generic Info Sections (Rates, Rules, etc.) --- */
.info-section {
    /* These styles unify the look with the .glance-info-section */
    background-color: var(--color-background-info);
    border: 1px solid var(--color-border-info);
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0; /* Consistent vertical spacing */
}

.info-section h3 {
    margin-top: 0;
    margin-bottom: 0.25em; /* Further reduced space below the section title */
    font-size: 1.15em;     /* Made header text slightly smaller */
    color: var(--color-text-primary);
}

/* Sub-headers within an info section, like for rate seasons */
.info-section h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em; /* This now controls the space above the table */
    font-size: 1.0em; /* Made date/season text smaller */
    color: var(--color-text-secondary);
    border-bottom: none; /* Removed the line under the date header */
    padding-bottom: 0; /* Removed padding which was adding extra space */
}

.info-section h4:first-of-type {
    margin-top: 0; /* The first sub-header doesn't need extra top margin */
}

/* Consolidate tables within info sections (like Rates) */
.info-section table th,
.info-section table td {
    padding: 4px 8px; /* Reduce vertical padding for a tighter look */
}

/* Override the general table's top margin to pull it closer to the h4 */
.info-section table {
    margin-top: 0;
}

/* Style for the new rates table to enforce equal column widths */
.rates-table {
    table-layout: fixed;
}

.rates-table th:nth-child(1),
.rates-table th:nth-child(2),
.rates-table th:nth-child(3) {
    width: 33.33%;
}

/* --- Styles for visually grouping info sections with tables --- */
.info-section--top {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none; /* Hide the bottom border to merge with the button */
}

.collapsible-summary--bottom {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* The top border on the summary button now acts as the separator */
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

/* Styles for the container that holds admin-only checkboxes */
#admin-options-container {
    grid-column: 1 / -1; /* Make the container span all columns of the parent grid */
    display: contents;   /* Treat the container's children as direct children of the grid for layout purposes */
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.checkbox-label-inline {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and text */
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 1em; /* Adds space between the buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    margin-top: 20px;
    margin-bottom: 10px; /* Add some space below the buttons */
}

.button-container button {
    padding: 12px 24px;
    font-size: 1.1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button-container button[type="submit"] {
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
}

.button-container button[type="button"] {
    background-color: var(--color-accent-secondary);
    color: var(--color-text-on-accent);
}

.button-container button:hover {
    opacity: 0.9;
}

.request-info {
    font-size: 0.8em;
    color: var(--color-text-placeholder);
    margin-top: 5px;
    margin-bottom: 5px;
}

.date-range-info {
    font-size: 0.9em;
    color: var(--color-text-primary);
    background-color: var(--color-background-info-subtle);
    padding: 10px 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    text-align: center;
}

.date-range-info strong {
    color: var(--color-text-link);
}

.availability-summary-main {
    background-color: var(--color-background-info);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid var(--color-border-info);
}

.availability-summary-main h3 {
    margin-top: 0;
    color: var(--color-text-primary);
}

.availability-summary-main p {
    margin: 5px 0;
    color: var(--color-text-secondary);
}

.notices-section {
    background-color: var(--color-accent-warning-bg); /* Light yellow background */
    border: 1px solid var(--color-accent-warning-border); /* Yellow border */
    border-radius: 4px;
    padding: 15px;
}

.notices-section h3 {
    color: var(--color-accent-warning-text); /* Dark yellow text for the header */
    margin-top: 0;
}

.notice-item {
    padding: 10px;
    margin-bottom: 10px;
    border-left: 4px solid var(--color-accent-warning); /* A solid left border for emphasis */
}

.notice-item:last-child {
    margin-bottom: 0;
}

/* --- In-Page Tab System --- */
.tab-buttons {
    border-bottom: 2px solid var(--color-border-primary);
    margin-bottom: 0; /* Remove margin to connect with panels */
    display: flex;
    flex-wrap: wrap;
}

.tab-buttons button {
    background-color: var(--color-background-table-header);
    border: 1px solid var(--color-border-primary);
    border-bottom: none;
    padding: 10px 15px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    font-size: 1em;
    transition: background-color 0.2s ease;
    color: var(--color-text-primary);
}

.tab-buttons button:hover {
    background-color: var(--color-border-secondary);
}

.tab-buttons button.active {
    background-color: var(--color-background-body);
    border-color: var(--color-border-primary);
    border-bottom: 2px solid var(--color-background-body); /* Blend with panel */
    margin-bottom: -2px; /* Pull it down to cover the container's border */
    font-weight: bold;
}

.tab-panels {
    border: 1px solid var(--color-border-primary);
    border-top: none;
    padding: 15px;
    background-color: var(--color-background-body);
    border-radius: 0 0 5px 5px;
    padding-bottom: 80px; /* Add significant space at the bottom of tab content */
    min-height: 200px; /* Ensure container has height even when empty */
}

.tab-panel {
    display: none; /* All panels hidden by default */
}

.tab-panel pre {
    white-space: pre-wrap;   /* Ensures pre-formatted text respects container width and wraps */
    word-wrap: break-word;   /* Breaks long, unbreakable strings (like URLs in JSON) */
    font-size: 0.9em;        /* Slightly smaller font for dense data */
}

/* --- Collapsible/Accordion Styles for Filtered Sites Tab --- */
.collapsible-summary {
    background-color: var(--color-background-info-subtle);
    color: var(--color-text-primary);
    cursor: pointer;
    padding: 8px 18px; /* Reduced vertical padding */
    width: 100%;
    border: 1px solid var(--color-border-secondary);
    border-bottom: none; /* Remove bottom border to stack them cleanly */
    text-align: left;
    outline: none;
    font-size: 1.1em;
    transition: background-color 0.2s ease;
    position: relative; /* For positioning the pseudo-element */
}

/* Add a bottom border to the last summary button in a group to close the box */
.collapsible-summary:last-of-type {
    border-bottom: 1px solid var(--color-border-secondary);
}

.collapsible-summary:hover {
    background-color: var(--color-border-secondary);
}

.collapsible-summary.active {
    background-color: var(--color-background-table-header);
}

/* Style for the plus/minus icon */
.collapsible-summary::after {
    content: '+';
    font-size: 1.3em;
    color: var(--color-text-placeholder);
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.collapsible-summary.active::after {
    content: "−";
}

.collapsible-details {
    padding: 5px 18px 15px; /* Reduced top padding to tighten space above content */
    background-color: var(--color-background-card);
    display: none; /* Hidden by default */
    overflow: hidden;
    border-left: 1px solid var(--color-border-secondary);
    border-right: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
}

/* Add top padding to the details panel for individual site accordions.
   This creates space between the accordion button and the availability summary boxes inside. */
button[id^="site-detail-header-"] + .collapsible-details {
    padding-top: 15px;
}

/* Remove default browser margins from lists inside accordions for a cleaner look */
.collapsible-details ul {
    margin-top: 0;
    margin-bottom: 0;
}

.facility-result-button {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-background-body);
    color: var(--color-text-primary);
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.4;
}

.facility-result-button:hover {
    background-color: var(--color-background-info);
}

.facility-result-button .facility-parent-org {
    font-size: 0.9em;
    color: var(--color-text-subtle);
}

.facility-result-button .non-reservable-note {
    color: var(--color-text-secondary);
}

/* Style for the "Show Details" button inside the main availability table */
.data-table button[data-campsite-id] {
    background-color: var(--color-accent-secondary-hover);
    color: var(--color-text-on-accent);
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    flex-grow: 1; /* Allow button to grow and fill available space in a flex container */
}

.data-table button[data-campsite-id]:hover {
    background-color: var(--color-accent-primary-hover);
}

/* --- API Status Badge --- */
.api-status-badge {
    font-size: 0.8rem; /* Use rem for consistent sizing regardless of parent */
    padding: 0.2em 0.6em;
    border-radius: 10px;
    font-weight: bold;
    color: white;
}
.api-status-badge.ok {
    background-color: var(--color-accent-success);
}
.api-status-badge.failed {
    background-color: var(--color-accent-danger);
}
.api-status-badge.warning {
    background-color: var(--color-accent-warning);
}

/* --- Animation for Row Highlighting --- */
@keyframes pulse-highlight {
    0%, 50%, 100% {
        background-color: transparent;
    }
    25%, 75% {
        background-color: var(--color-status-reserved-bg);
    }
}

.row-highlight-pulse {
    animation-name: pulse-highlight;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

/* --- Back to Top Button --- */
#back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--color-accent-secondary);
    color: var(--color-text-on-accent);
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 8px;
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

#back-to-top-btn.visible {
    opacity: 0.7; /* Make it semi-transparent */
    visibility: visible;
}

#back-to-top-btn:hover {
    background-color: var(--color-text-primary);
    opacity: 1; /* Make it fully opaque on hover */
}

/* --- Footer --- */
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--color-background-info-subtle);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 5px 0;
    font-size: 0.6em;
    border-top: 1px solid var(--color-border-secondary);
    z-index: 90; /* Below the back-to-top button but above most content */
}

footer p {
    margin: 0;
}

footer a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    cursor: pointer;
}

footer a:hover {
    color: var(--color-text-primary);
}

/* --- Modal Styles --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: var(--color-background-modal-backdrop); 
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--color-background-modal-content);
    margin: 10% auto; 
    padding: 25px;
    border: 1px solid var(--color-border-primary);
    width: 80%; 
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--color-shadow-primary);
}

.close-modal {
    color: var(--color-icon-default);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
}
/* ==========================================================================
   Page Components
   ========================================================================== */

/* --- Decorative Image --- */
#decorative-image-container,
#loading-indicator-container {
    margin: 2em auto;
    text-align: center; /* Center the image within the container */
    transition: opacity 0.3s ease-out, max-height 0.5s ease-out, margin 0.5s ease-out;
    overflow: hidden;
    max-height: 1000px; /* A large default max-height for the transition to work, ensuring it's bigger than the image. */
}
 
#decorative-image-container.hidden,
#loading-indicator-container.hidden {
    opacity: 0;
    max-height: 0;
    margin: 0 auto; /* Keep it centered while collapsing */
}

.decorative-image {
    max-width: 100%;
    height: auto;
}

/* --- Animation for Drifting Clouds --- */
@keyframes drift {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* The image is 120% wide, so moving it left by 16.67% of its own width */
        /* reveals the "hidden" 20% of the image over the animation duration. */
        transform: translateX(-16.67%);
    }
}

/* --- Loading Indicator Specifics --- */
#loading-indicator-container {
    position: relative; /* For positioning the text overlay */
    margin-top: 0; /* Remove the top margin to bring it closer to the form above */
}

.loading-text {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-shadow-primary);
    color: var(--color-text-on-accent);
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap; /* Prevent text from wrapping */
    box-shadow: 0 2px 5px var(--color-shadow-primary);
    z-index: 10; /* Ensure it's on top of the image */
}

/* Apply the animation specifically to the image inside the loading container */
#loading-indicator-container .decorative-image {
    width: 120%;
    max-width: 120%; /* Override the default max-width */
    animation: drift 40s linear infinite alternate; /* Slow, smooth, back-and-forth drift */
}

/* ==========================================================================
   Responsive Design for Mobile
   ========================================================================== */

@media (max-width: 1024px) {
    .dashboard-counts {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-counts .separator {
        display: none;
    }
}

@media (max-width: 768px) {
    body {
        padding: 1em 0.5em;
        -webkit-text-size-adjust: 100%; /* Prevent font scaling on iOS */
        font-size: 15px; /* Slightly smaller base font for mobile */
        text-size-adjust: 100%;
    }

    .main-title {
        font-size: 1.5em;
        gap: 0.25em; /* Reduce gap for a compact horizontal layout on mobile */
        margin-bottom: 0.8em; /* Reduce space below the header on mobile */
    }

    /* Adjust spacing between main tool accordions on mobile */
    #my-camp-accordion-container,
    #facility-search-accordion-container,
    #config-accordion-container,
    #about-accordion-container {
        margin-bottom: 15px;
    }

    .accordion-header {
        padding: 12px 15px; /* Make headers shorter on mobile */
        font-size: 1.1em;
    }

    #decorative-image-container {
        /* Reduce top margin to bring it closer to the accordions on mobile */
        margin-top: 1em;
    }

    #facility-search-form {
        flex-direction: column;
        align-items: stretch; /* Make items full width */
    }

    #facility-search-form label {
        text-align: left;
        margin-bottom: -5px;
    }

    .form-grid {
        grid-template-columns: 1fr; /* Stack elements in a single column */
        gap: 0.5em 1em; /* Adjust gap for vertical layout */
    }

    .form-grid label:not(.checkbox-label-inline) {
        text-align: left;
        padding-right: 0;
        margin-bottom: -0.25em; /* Bring labels closer to their controls */
    }

    .checkbox-grid {
        grid-template-columns: 1fr; /* Single column for checkboxes */
    }

    .button-container {
        flex-direction: column;
        gap: 0.75em;
    }

    .button-container button {
        width: 100%;
    }

    /* Make the loading text and its container smaller on mobile */
    .loading-text {
        font-size: 0.9em;
        padding: 6px 12px;
        top: 10px;
    }

    .collapsible-summary {
        font-size: 0.9em; /* Make text and icons smaller on mobile */
        padding: 6px 15px; /* Reduced padding for a more compact button on mobile */
    }

    legend {
        font-size: 1.05em; /* Make legend text slightly smaller */
    }

    h3,
    .details-content-block h1,
    .tab-panel .title-with-favorite h1 {
        font-size: 1.5em; /* Adjust heading sizes for mobile */
        line-height: 1.1; /* Tighten line spacing when header wraps */
    }

    form {
        padding: 10px;
    }

    .details-image-banner {
        height: 200px; /* Smaller image banner on mobile */
    }

    .details-content-block {
        /* Override desktop margins to align with body padding (0.5em) */
        margin: -40px 0 0 0; /* Remove side margins to make it full-width like the image */
        /* Remove the width constraint to allow it to fill the available space */
        max-width: none;
        /* Drastically reduce internal horizontal padding for mobile */
        padding: 15px 5px 15px 12px; /* top, right, bottom, left - more left padding */
        /* Override desktop width to fix overflow bug on mobile */
        width: auto;
    }

    .facility-subheader {
        font-size: 1.0rem; /* Smaller subheader on mobile */
        margin-top: 0.25em; /* Add a small gap below the main header on mobile */
    }

    fieldset {
        padding: 10px;
        margin-bottom: 10px;
    }

    .instructions {
        padding: 10px 12px;
        margin-bottom: 15px;
    }

    .tab-panels {
        padding: 6px; /* Reduce padding on mobile for more content space */
    }

    /* For the specific accordion panels containing site details, set the final desired padding. */
    .collapsible-summary[id^="site-detail-header-"] + .collapsible-details {
        padding-left: 2px;
        padding-right: 2px;
    }

    /* New rule: For any collapsible container that holds a main data table,
       remove the excess side padding to give the table more room. */
    .collapsible-details:has(.data-table) {
        padding-left: 0;
        padding-right: 0;
    }

    /* Restore left padding for the info text above the full-width tables,
       which was removed by the rule above. */
    .row-count-info,
    .sort-info {
        padding-left: 12px;
    }

    /* Stack the instruction image below the text on mobile */
    .instructions-container {
        flex-direction: column;
        align-items: stretch; /* Make items full width */
    }

    .instructions-image {
        max-width: 100%; /* Allow image to span full width on mobile */
        margin-top: 15px; /* Add some space above the image when stacked */
    }

    .about-services-container {
        flex-direction: column;
    }
    .about-services-image {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .details-section {
        /* Remove horizontal padding to align content with the header */
        padding-left: 0;
        padding-right: 0;
    }

    /* Increase font sizes within the campsite details view for better mobile readability */
    .details-section h4 {
        font-size: 1.15em; /* Make section headers slightly larger on mobile */
    }

    .detail-item {
        font-size: 1em; /* Increase base font size for details on mobile */
    }

    .detail-item strong {
        /* Reduce the fixed width of labels on mobile to save space */
        width: 110px;
    }

    th,
    td {
        font-size: 0.85em; /* Make table text larger on mobile for readability */
        padding: 2px 6px; /* Adjust horizontal padding */
        line-height: 1.3; /* Reduce line-height to make rows more compact */
    }

    /* Reduce font size of the "Show Details" button to prevent wrapping on mobile */
    .data-table button[data-campsite-id] {
        font-size: 0.8em;
    }

    table {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .id-display-section li {
        flex-direction: column; /* Stack label and value vertically */
        align-items: flex-start;
        padding: 8px 0; /* Give more vertical space when stacked */
    }

    .id-display-section .id-label {
        flex-basis: auto; /* Reset the fixed width */
        padding-right: 0;
        margin-bottom: 2px; /* Add a small gap between label and value */
    }

    /* Reduce horizontal padding on all major content blocks for a tighter mobile view */
    .glance-info-section,
    .id-display-section,
    .info-section,
    .notices-section,
    .availability-summary-main {
        /* Make text in these info blocks smaller on mobile for better fit */
        font-size: 0.95em;
        /* Override desktop padding for a tighter mobile layout */
        padding-left: 5px;
        padding-right: 5px;
    }

/* Mobile adjustments for Alert Dashboard */
.alert-dashboard-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.alert-dashboard-card .dashboard-actions-wrapper {
    width: 100%;
    align-items: center;
}

.alert-dashboard-card .dashboard-actions-wrapper .button-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dashboard-counts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-counts .separator {
    display: none;
}

}

/* ==========================================================================
   API and Usage Statistics Tables
   ========================================================================== */

/* --- Styles for API Summary in Debug Tab --- */
.api-summary-section {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-border-primary);
}
.api-summary-breakdowns {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.api-summary-breakdowns > div { min-width: 250px; }
.api-summary-table { border-collapse: collapse; width: 100%; }
.api-summary-table th, .api-summary-table td { padding: 8px 12px; border: 1px solid var(--color-border-secondary); text-align: left; vertical-align: top; }
.api-summary-table th { background-color: var(--color-background-table-header); font-weight: bold; width: 60%; }
.api-summary-table td { width: 40%; }

/* --- Styles for Usage Stats Tab --- */
.usage-stats-container { display: flex; flex-direction: column; gap: 30px; margin-top: 20px; }
.usage-summary-tables { display: flex; gap: 40px; flex-wrap: wrap; }
.usage-summary-tables > div { flex: 1; min-width: 300px; }
.usage-stats-table { border-collapse: collapse; width: 100%; margin-top: 10px; }
.usage-stats-table th, .usage-stats-table td { padding: 8px 12px; border: 1px solid var(--color-border-secondary); text-align: left; }
.usage-stats-table th { background-color: var(--color-background-table-header); font-weight: bold; }
.usage-stats-table .day-summary-row { cursor: pointer; }
.usage-stats-table .day-summary-row:hover { background-color: var(--color-background-form); }
.usage-stats-table .details-toggle {
    background: none;
    border: 1px solid var(--color-border-primary);
    border-radius: 3px;
    cursor: pointer;
    font-family: monospace;
    font-weight: bold;
    padding: 0 5px;
    line-height: 1.2;
}
.usage-stats-table .details-toggle:hover { background-color: var(--color-session-details-bg); }

/* Styling for the nested session details table */
.session-details-container-row td {
    padding: 0 0 15px 40px !important; /* Indent the nested table */
    background-color: var(--color-background-card);
}
.session-details-table {
    width: 100%;
    margin-top: 10px;
}
.session-details-table th { background-color: var(--color-session-details-bg); font-style: italic; }

/* ==========================================================================
   Primary Tab Styling
   ========================================================================== */

/* --- Green Theme for Campsite Details Tab (matches "Check for Campsites") --- */

/* Default, inactive state */
button[data-panel-id="tab-panel-Campsite-Details"]:not(.active) {
    background-color: var(--color-tab-campsite-inactive-bg);
    border-color: var(--color-tab-campsite-inactive-border);
}

/* Hover state */
button[data-panel-id="tab-panel-Campsite-Details"]:not(.active):hover {
    background-color: var(--color-tab-campsite-hover-bg);
}

/* Active state */
button[data-panel-id="tab-panel-Campsite-Details"].active {
    background-color: var(--color-tab-campsite-active-bg);
    border-color: var(--color-accordion-config-hover);
    border-bottom-color: var(--color-tab-campsite-active-bg);
}

/* --- Blue Theme for Campground Details Tab (matches "Find Campground by Name") --- */

/* Default, inactive state */
button[data-panel-id="tab-panel-Campground-Details"]:not(.active) {
    background-color: var(--color-tab-campground-inactive-bg);
    border-color: var(--color-tab-campground-inactive-border);
}

/* Hover state */
button[data-panel-id="tab-panel-Campground-Details"]:not(.active):hover {
    background-color: var(--color-tab-campground-hover-bg);
}

/* Active state */
button[data-panel-id="tab-panel-Campground-Details"].active {
    background-color: var(--color-tab-campground-active-bg);
    border-color: var(--color-accordion-find-border);
    border-bottom-color: var(--color-tab-campground-active-bg);
}
/* ==========================================================================
   Component & Utility Styles (migrated from JS)
   ========================================================================== */

/* --- Download Button (from createDownloadLink) --- */
.download-button {
    display: inline-block;
    padding: 8px 16px;
    margin: 10px 0;
    background-color: var(--color-accent-primary);
    color: var(--color-text-on-accent);
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.download-button:hover {
    background-color: var(--color-accent-primary-hover);
}

/* --- Campsite Details Tab Components (from renderCampsiteDetailsInTab) --- */
.details-grid {
    display: grid;
    /* Use an auto-fitting grid. On wide screens, it will be 2+ columns. On narrow screens, it will automatically stack to 1 column. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Space between the columns/rows */
    margin-bottom: 20px; /* Space before the image gallery */
}

.details-section {
    overflow-wrap: break-word; /* Ensure long, unbreakable words can wrap */
}

.details-section {
    background-color: var(--color-background-body);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    padding: 15px 15px 25px; /* Increased bottom padding for more breathing room */
}

.details-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 1.1em;
    color: var(--color-text-primary);
}

/* New style for sub-headers (h2) within the main facility description */
.facility-description-content h2 {
    font-size: 1.2em; /* Smaller than the main h3 header */
    color: var(--color-text-primary);
    margin-top: 1.5em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid var(--color-border-subtle);
}

/* The first h2 doesn't need extra top margin */
.facility-description-content h2:first-of-type {
    margin-top: 0.5em;
}

/* New class for standalone section headers like the image gallery */
.details-section-header {
    margin-top: 20px; /* Add space above the gallery */
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 1.1em;
    color: var(--color-text-primary);
}

.detail-item {
    display: flex;
    align-items: flex-start; /* Align to top for wrapped text */
    gap: 8px;
    margin: 0 0 5px 0; /* Reduced vertical spacing */
    font-size: 0.9em;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item strong {
    flex-shrink: 0; /* Prevent labels from shrinking */
    width: 160px; /* Give all labels a fixed width for alignment */
}

.detail-item .detail-value {
    flex-grow: 1; /* Allow the value to take up remaining space */
    word-break: break-word; /* Wrap long values */
}

.value-yes { color: var(--color-accent-success); font-weight: bold; }
.value-no { color: var(--color-accent-danger); font-weight: bold; }

/* --- New Image Gallery Styles --- */
.campsite-image-gallery {
    display: grid;
    /* Display images in a single vertical column. */
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 10px;
}

.gallery-item {
    margin: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    overflow: hidden; /* Keeps the image corners rounded */
    display: flex;
    flex-direction: column;
    background-color: var(--color-background-body);
    box-shadow: 0 1px 3px var(--color-shadow-secondary);
}

.gallery-item img {
    width: 100%;
    height: auto; /* Let height adjust automatically to maintain aspect ratio */
    /* object-fit: cover is removed as it's no longer needed */
    cursor: pointer;
    display: block; /* Removes any extra space below the image */
}

.gallery-item figcaption {
    padding: 10px;
    font-size: 0.85em;
    color: var(--color-text-secondary);
    background-color: var(--color-background-form);
    text-align: center;
    flex-grow: 1; /* Ensures the caption area fills vertical space */
    border-top: 1px solid var(--color-border-subtle);
}

.availability-summary-box {
    padding: 4px 15px; /* Further reduced top/bottom padding */
    margin-bottom: 15px;
    border-radius: 5px;
}
.availability-summary-box.available {
    background-color: var(--color-tab-campsite-inactive-bg);
    border: 1px solid var(--color-accent-success);
}
.availability-summary-box.walk-up {
    background-color: var(--color-accent-warning-bg);
    border: 1px solid var(--color-accent-warning-border);
}
.details-warning {
    background-color: var(--color-accordion-mycamp-bg);
    border: 1px solid var(--color-accordion-mycamp-hover);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* --- Filter Description Header in Campsite Details Tab --- */
.filter-description {
    margin: 0 0 10px 0; /* Reduced top margin to bring it closer to the info bar above */
}

.filter-description .site-list {
    font-size: 0.9em; /* Make the main line smaller than default text */
    margin: 0;
}

.filter-description .status-details {
    font-size: 0.8em; /* Make the sub-line even smaller */
    color: var(--color-text-subtle);
    margin: 0.25em 0 0 0; /* Small top margin for separation */
}

/* --- Image Strip for Campsite Details Tab --- */
.campsite-tab-banner {
    height: 150px;
    width: 100%; /* Ensure it spans the container */
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically center the image */
    justify-content: center; /* Horizontally center if image is smaller */
    background-color: var(--color-border-secondary);
    margin-bottom: 15px; /* Space between banner and content below */
    border-radius: 4px;
}
.campsite-tab-banner img {
    width: 100%;
    height: auto;
    flex-shrink: 0; /* Prevent image from shrinking */
}

/* --- Compact Info Bar for Tab Headers --- */
.compact-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px; /* 10px row-gap, 15px column-gap */
    align-items: center;
    background-color: var(--color-background-info);
    border: 1px solid var(--color-border-info);
    padding: 12px 15px;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 0.9em;
}

.compact-info-bar .info-part {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Accordion Summaries (from createSummaryAccordion) --- */
.collapsible-summary.summary-available {
    background-color: var(--color-tab-campsite-inactive-bg);
    border-color: var(--color-accent-success);
    border-bottom: none;
}
.collapsible-summary.summary-walk-up {
    background-color: var(--color-accent-warning-bg);
    border-color: var(--color-accent-warning-border);
    border-bottom: none;
}
.collapsible-summary.summary-open {
    background-color: var(--color-tab-campground-inactive-bg);
    border-color: var(--color-accent-primary);
    border-bottom: none;
}

/* Add vertical space between any accordion that follows another one's details panel.
   This correctly spaces the summary accordions from each other, and also spaces
   the main results table accordion from the summaries. */
/* Exclude the site-specific detail accordions (which have an ID starting with 'site-detail-header-'),
   as they should be stacked without any margin between them. */
.collapsible-details + .collapsible-summary:not([id^="site-detail-header-"]) {
    margin-top: 10px;
}

/* --- Themed Accordion Summaries for Main Data Tables (from filteredSitesTabRenderer) --- */
.collapsible-summary.theme-green {
    background-color: var(--color-tab-campsite-inactive-bg);
    border: 1px solid var(--color-accent-success);
}

.collapsible-summary.theme-green:hover {
    background-color: var(--color-tab-campsite-hover-bg);
}

.collapsible-summary.theme-blue {
    background-color: var(--color-tab-campground-inactive-bg);
    border: 1px solid var(--color-accordion-find-border);
}

.collapsible-summary.theme-blue:hover {
    background-color: var(--color-tab-campground-hover-bg);
}

/* Style the details panel to match its corresponding summary header */
.collapsible-summary.summary-available + .collapsible-details {
    background-color: var(--color-tab-campsite-inactive-bg);
    border-color: var(--color-accent-success);
}
.collapsible-summary.summary-walk-up + .collapsible-details {
    background-color: var(--color-accent-warning-bg);
    border-color: var(--color-accent-warning-border);
}
.collapsible-summary.summary-open + .collapsible-details {
    background-color: var(--color-tab-campground-inactive-bg);
    border-color: var(--color-accent-primary);
}

/* Add a bottom border to the summary accordions ONLY when they are folded (not active) */
.collapsible-summary.summary-available:not(.active) {
    border-bottom: 1px solid var(--color-accent-success);
}
.collapsible-summary.summary-walk-up:not(.active) {
    border-bottom: 1px solid var(--color-accent-warning-border);
}
.collapsible-summary.summary-open:not(.active) {
    border-bottom: 1px solid var(--color-accent-primary);
}

/* --- Star Rating (from renderFacilityHeaderAndDetails) --- */
.stars {
    color: var(--color-icon-favorite);
    font-size: 1.2em;
    margin-right: 10px;
}

/* --- Favorite Campground Toggle --- */
.title-with-favorite {
    display: flex;
    align-items: center;
    margin-bottom: 0.2em; /* This now controls the space below the title block */
    justify-content: space-between;
}

.favorite-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.favorite-toggle-btn:hover {
    background-color: var(--color-background-info-subtle);
}

.favorite-star-icon {
    font-size: 28px; /* Control size with font-size */
    color: var(--color-text-placeholder);
    line-height: 1;  /* Ensure it's vertically centered */
    transition: color 0.2s ease; /* Transition the color property */
}

/* A favorite star is gold */
/* Make selector more specific to only target stars, not other icons */
.favorite-toggle-btn .favorite-star-icon.is-favorite {
    color: var(--color-icon-favorite);
}

/* Hovering over a NON-favorite star turns it gold to preview the action */
.favorite-toggle-btn:hover .favorite-star-icon:not(.is-favorite) {
    color: var(--color-icon-favorite);
}

/* Hovering over a favorite star makes it a darker gold, matching "My Camp" behavior */
.favorite-toggle-btn:hover .favorite-star-icon.is-favorite {
    color: var(--color-icon-favorite-hover);
}

/* --- Favorite Campsite Toggle (in Accordion) --- */
.accordion-summary-content {
    display: flex;
    align-items: center;
    gap: 8px; /* A bit tighter than the main title's gap */
    width: 100%;
}

.accordion-summary-content .compact-summary-text {
    color: var(--color-text-secondary);
    font-size: 0.9em;
    /* The text already contains ' | ', so no extra margin needed */
}

/* Override the default favorite button styles for this specific context */
.collapsible-summary .favorite-toggle-btn.site-favorite-btn {
    padding: 0;
    margin: 0;
    /* Align the star button itself, not just its content */
    align-self: center;
    /* Remove the hover background effect from the main favorite button */
    background-color: transparent;
    border-radius: 0;
}

.collapsible-summary .favorite-toggle-btn.site-favorite-btn:hover {
    background-color: transparent;
}

/* This rule is now simplified. The default gray color is handled by the base .favorite-star-icon rule.
   This rule now only sets the size for stars inside accordion headers. */
.collapsible-summary .site-favorite-btn .favorite-star-icon {
    font-size: 22px;
}

.collapsible-summary .site-favorite-btn:hover .favorite-star-icon {
    color: var(--color-text-primary);
}

/* --- Favorite Campsite Toggle (in Actions Column) --- */
.actions-cell-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Style the favorite button specifically within the actions cell */
.actions-cell-container .favorite-toggle-btn.site-favorite-btn {
    padding: 4px;
    margin: 0;
    background-color: transparent;
    border-radius: 50%;
    flex-shrink: 0; /* Prevent the button from shrinking */
}

.actions-cell-container .favorite-toggle-btn.site-favorite-btn:hover {
    background-color: var(--color-background-info-subtle);
}

.actions-cell-container .site-favorite-btn .favorite-star-icon {
    font-size: 18px; /* A good size to balance with the button text */
    color: var(--color-text-subtle);
}

/* Add a more specific rule to override the gray color when the star is a favorite. */
.actions-cell-container .site-favorite-btn .favorite-star-icon.is-favorite {
    color: var(--color-icon-favorite);
}

/* --- Cell Signal Icons (from renderFacilityHeaderAndDetails) --- */
.glance-icon.cell-good { background-color: var(--color-accent-success); }
.glance-icon.cell-fair { background-color: var(--color-accent-warning); }
.glance-icon.cell-poor { background-color: var(--color-accent-danger); }
.glance-icon.cell-none { background-color: var(--color-accent-secondary); }

/* ==========================================================================
   Rate Limit Notification Bar
   ========================================================================== */

#rate-limit-alert {
    /* display is controlled by JS, toggling between 'none' and 'flex' */
    display: flex;
    justify-content: space-between; /* Pushes message and button to opposite ends */
    align-items: center; /* Vertically centers content */
    padding: 12px 20px;
    margin-bottom: 20px; /* Space between the bar and the content below */
    background-color: var(--color-accent-warning-bg); /* Light yellow, consistent with other warnings */
    border: 1px solid var(--color-accent-warning-border);
    border-left: 5px solid var(--color-accent-warning); /* A thicker left border for emphasis */
    border-radius: 4px;
    color: var(--color-accent-warning-text); /* Dark yellow text for good contrast */
}

/* The dismiss button ('x') */
#rate-limit-dismiss {
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: inherit; /* Inherit the dark yellow color */
    padding: 0 0 0 15px; /* Add some space to its left */
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#rate-limit-dismiss:hover {
    opacity: 1;
}

/* ==========================================================================
   "My Camp" Tab Styles
   ========================================================================== */

.preset-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    /* Add horizontal margin to align with other content in the accordion, and bottom margin for spacing */
    margin: 0 10px 10px;
}

.favorite-item-card {
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px var(--color-shadow-secondary);
    display: flex;
    flex-direction: column;
}

.favorite-card-image {
    width: 100%;
    height: 150px; /* A consistent height for all banners */
    object-fit: cover; /* Crucial for maintaining aspect ratio without distortion */
    display: block; /* Removes extra space below the image */
    /* The image is the first child, so its top corners will respect the parent's border-radius */
}

.favorite-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--color-accordion-find-bg);
    color: var(--color-text-primary);
}

.favorite-item-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.favorite-item-content {
    padding: 15px;
    background-color: var(--color-background-card);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.favorite-item-content p {
    margin: 0 0 1em 0;
    color: var(--color-text-subtle);
    font-size: 0.9em;
}

.preset-site-list {
    list-style-type: none;
    padding: 10px;
    margin: 0 0 1em 0;
    font-size: 0.9em;
    background-color: var(--color-accent-warning-bg);
    border: 1px solid var(--color-accent-warning-border);
    border-radius: 4px;
}

.preset-site-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-accent-warning-border);
}

.preset-site-list li:last-child {
    border-bottom: none;
}

.favorite-item-header .favorite-toggle-btn {
    padding: 5px;
}

/* Diagnostic test comment */
.favorite-item-header .favorite-star-icon {
    font-size: 24px;
    color: var(--color-icon-favorite);
}

/* Make this selector more specific to ONLY target the star in the header */
.favorite-item-header > .favorite-toggle-btn:hover > .favorite-star-icon {
    color: var(--color-icon-favorite-hover);
}

.preset-site-list .favorite-toggle-btn {
    padding: 0 0 0 10px; /* Add space to the left of the star */
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.preset-site-list .favorite-toggle-btn .site-star {
    font-size: 16px;
    color: var(--color-icon-favorite);
    transition: color 0.2s ease;
}

.preset-site-list .favorite-toggle-btn:hover .site-star {
    color: var(--color-icon-favorite-remove-hover);
}

/* --- Styles for Alert Bell in My Camp --- */
.preset-site-list .alert-toggle-btn {
    padding: 0 0 0 8px; /* A little space to its left */
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* --- SVG Icon Styling using CSS Mask --- */
.alert-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    background-color: var(--color-icon-default);
    -webkit-mask-image: url('media/bell-regular-full.svg'); /* Default: outline bell */
    mask-image: url('media/bell-regular-full.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Size the icon specifically for the list view */
.preset-site-list .alert-icon {
    width: 16px;
    height: 16px;
}

/* Hover effect for the default (non-active) state */
.preset-site-list .alert-toggle-btn:hover .alert-icon:not(.is-staged):not(.is-active):not(.is-success) {
    background-color: var(--color-text-primary);
    transform: scale(1.1);
}

/* Style for the campground-wide alert button in the favorite card header */
.favorite-item-header .campground-alert-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px; /* Match the favorite button's padding */
    line-height: 1;
    border-radius: 50%; /* Match the favorite button's radius */
    transition: background-color 0.2s ease;
}

.favorite-item-header .campground-alert-toggle-btn:hover {
    background-color: var(--color-background-table-header);
}

.favorite-item-header .campground-alert-toggle-btn .alert-icon {
    width: 20px; /* Match the size of the star icon */
    height: 20px;
}

/* State-specific colors */
.alert-icon.is-staged,
.alert-icon.is-active,
.alert-icon.is-success {
    -webkit-mask-image: url('media/bell-solid-full.svg'); /* Switch to solid bell for active states */
    mask-image: url('media/bell-solid-full.svg');
}

.alert-icon.is-staged { background-color: var(--color-icon-alert-staged); }
.alert-icon.is-active { background-color: var(--color-icon-alert-active); }
.alert-icon.is-success { background-color: var(--color-accent-danger); animation: ring-bell 0.5s ease-in-out; }

@keyframes ring-bell {
    0% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

/* --- Styles for Alert Dashboard Card --- */
.alert-dashboard-card {
    display: flex;
    align-items: stretch;
    background-color: var(--color-accordion-find-bg);
    border: 1px solid var(--color-accordion-find-hover);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 6px;
    margin-top: 20px;
    gap: 20px;
}

.dashboard-icon-col {
    flex-shrink: 0;
    width: 110px;
}

.dashboard-image {
    width: 100%;
    height: 100%;
    min-height: 85px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 2px 4px var(--color-shadow-secondary);
    display: block;
}

.dashboard-info-col {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.dashboard-info-col h3 {
    margin: 0 0 4px 0;
    font-size: 2.0em;
    color: var(--color-accent-primary);
}

.dashboard-counts {
    font-size: 0.95em;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.count-row {
    width: 100%;
}

.count-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.progress-bar-track {
    width: 100%;
    height: 6px;
    background-color: var(--color-border-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-accent-success);
    transition: width 0.3s ease, background-color 0.3s ease;
}

.dashboard-subtext {
    margin: 0;
    margin-top: -3px;
    margin-bottom: 6px;
    font-size: 1em;
    color: var(--color-text-subtle);
}

.dashboard-actions-wrapper {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.dashboard-actions-wrapper .button-container {
    margin: 0;
    gap: 8px;
}

.dashboard-actions-wrapper .button-container button {
    padding: 6px 12px;
    font-size: 0.9em;
}

/* --- Styles for Alert Configuration Card in My Camp --- */
#my-campsite-alerts-container {
    /* This container will hold multiple cards, so we use flexbox for layout */
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px 20px; /* Top, L/R, Bottom */
}

.alert-config-card {
    background-color: var(--color-accordion-find-bg);
    border: 1px solid var(--color-accordion-find-hover);
    border-radius: 8px;
    padding: 15px;
}

.alert-config-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--color-accent-primary-hover);
}

.alert-config-card h3,
.active-alert-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-config-card .form-grid {
    /* The form grid inside the card has a smaller gap */
    gap: 10px;
    margin-bottom: 15px;
}

/* --- Styles for Active Alert Card in My Camp --- */
.active-alert-card {
    background-color: var(--color-background-info);
    border: 1px solid var(--color-border-info);
    border-left: 5px solid var(--color-accent-success);
    border-radius: 8px;
    padding: 15px;
}

/* Style for an alert card that has found availability */
.active-alert-card.has-found-availability {
    border-left-width: 6px;
    border-left-color: var(--color-accent-success);
    background-color: var(--color-accordion-config-bg);
    box-shadow: 0 0 8px var(--color-shadow-success);
}

/* Style for a paused alert card */
.active-alert-card.is-paused-card {
    background-color: var(--color-border-secondary);
    border-left-color: var(--color-accent-secondary);
}

.active-alert-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: var(--color-text-primary);
}

/* --- Link in alert card header --- */
.alert-campground-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-text-subtle);
    text-underline-offset: 2px;
}
.alert-campground-link:hover {
    text-decoration-color: currentColor;
}

/* --- NEW: Icon for Alert Type (Campsite vs Campground) --- */
.alert-type-icon {
    font-size: 1.1em;
    margin-left: 4px; /* A little space after the bell icon */
    vertical-align: -0.1em; /* Align it better with the text */
}

.header-icon-svg {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}


.alert-details-grid p {
    margin: 0;
}

.alert-status-text {
    font-weight: bold;
    text-transform: capitalize;
}

.alert-status-text.is-watching,
.alert-status-text.is-notified_immediate,
.alert-status-text.is-notified_reminder { color: var(--color-accent-success); }
.alert-status-text.is-available { color: var(--color-accent-danger); }
.alert-status-text.is-paused { color: var(--color-accent-secondary); }

/* --- Alert Card Layout (Flex) --- */
.alert-card-body {
    display: flex;
    gap: 15px;
    align-items: stretch;
}

.alert-card-content-col {
    flex: 1;
    min-width: 0; /* Allows text truncation if needed */
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
}

.alert-card-image-col {
    flex-shrink: 0;
    width: 110px;
}

.alert-card-image {
    width: 100%;
    height: 100%;
    min-height: 85px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 2px 4px var(--color-shadow-secondary);
}

.alert-card-content-col .button-container {
    margin-top: auto;
    margin-bottom: 0;
}

/* Style for the "Load & Search" button in favorite cards.
   The selector is made more specific to override the general .button-container button styles. */
.button-container .load-preset-btn {
    /* Make it smaller than default buttons */
    padding: 5px 10px;
    font-size: 0.9em;
    /* Color it green to match other primary actions */
    background-color: var(--color-accent-success);
    color: var(--color-text-on-accent);
}

.button-container .load-preset-btn:hover {
    background-color: var(--color-accent-success-hover);
}

/* --- Styles for My Camp Action Buttons --- */
.primary-action-btn {
    background-color: var(--color-accent-success);
    color: var(--color-text-on-accent);
}
.primary-action-btn:hover {
    background-color: var(--color-accent-success-hover);
}

.secondary-action-btn {
    background-color: var(--color-accent-secondary);
    color: var(--color-text-on-accent);
}
.secondary-action-btn:hover {
    background-color: var(--color-accent-secondary-hover);
}

/* --- Styles for Active Alert Card Buttons --- */
/* Make the Pause/Delete buttons on alert cards smaller and more compact */
.active-alert-card .alert-pause-btn,
.active-alert-card .alert-delete-btn {
    padding: 4px 12px;
    font-size: 0.85em;
    font-weight: normal; /* Reset bolding from other button styles if any */
    margin-top: -5px; /* Pull them up slightly */
    margin-bottom: -5px; /* Reduce space below */
}

/* --- Alert Note Styles --- */
.alert-note-field {
    margin-top: 8px;
    margin-bottom: 12px;
}

.alert-note-field label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-text-secondary);
}

.alert-note-field .optional-label {
    font-weight: normal;
    color: var(--color-text-subtle);
}

.alert-note-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.9em;
    resize: vertical;
    min-height: 40px;
    box-sizing: border-box;
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
}

.alert-note-textarea:focus {
    outline: none;
    border-color: var(--color-accent-primary);
}

.char-counter {
    display: block;
    text-align: right;
    font-size: 0.75em;
    color: var(--color-text-subtle);
    margin-top: 2px;
}

.use-saved-sites-btn {
    display: inline-block;
    margin-top: 6px;
    background: none;
    border: 1px dashed var(--color-border-secondary);
    border-radius: 4px;
    cursor: pointer;
    padding: 3px 10px;
    font-size: 0.8em;
    color: var(--color-text-subtle);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.use-saved-sites-btn:hover {
    color: var(--color-text-secondary);
    border-color: var(--color-text-subtle);
}

/* Note display on active alert cards */
.alert-note-display {
    margin: 4px 0 8px 0;
    font-size: 0.9em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.alert-note-display.is-empty {
    margin: 2px 0 6px 0;
}

.alert-note-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.alert-note-text {
    color: var(--color-text-primary);
    word-break: break-word;
}

.alert-edit-note-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.85em;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.alert-edit-note-btn:hover {
    opacity: 1;
}

.alert-add-note-btn {
    background: none;
    border: 1px dashed var(--color-border-secondary);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.8em;
    color: var(--color-text-subtle);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.alert-add-note-btn:hover {
    color: var(--color-text-secondary);
    border-color: var(--color-text-subtle);
}

/* Inline edit mode */
.alert-note-display.is-editing {
    flex-direction: column;
    align-items: stretch;
}

.alert-note-edit-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.alert-note-edit-row .alert-save-note-btn,
.alert-note-edit-row .alert-cancel-note-btn {
    padding: 3px 10px;
    font-size: 0.8em;
}

/* Make the manual alert check button smaller to match other compact buttons */
#check-my-alerts-btn {
    padding: 4px 12px;
    font-size: 0.85em;
    font-weight: normal;
    border: none; /* Remove default browser border */
    border-radius: 5px; /* Match other buttons */
    flex-shrink: 0; /* Prevent the button from shrinking on smaller screens */
}

/* Button for toggling all statuses in the main table */
.table-view-toggle-btn {
    background-color: var(--color-accordion-find-bg);
    border: 1px solid var(--color-accordion-find-border);
    color: var(--color-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    padding: 4px 8px;
    margin-bottom: 10px;
    transition: background-color 0.2s ease;
}

.table-view-toggle-btn:hover {
    background-color: var(--color-accordion-find-hover);
}


/* Style for items marked for deletion */
.marked-for-deletion {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    background-color: var(--color-accent-warning-bg);
}

.favorite-star-icon.is-off {
    color: var(--color-icon-default);
}

.favorite-toggle-btn:hover .favorite-star-icon.is-off {
    color: var(--color-icon-favorite);
}

/* --- Reserve Now Button (in Campsite Details) --- */
.reserve-now-button {
    display: block; /* Make it a block-level element to control width and margin */
    width: 100%;
    box-sizing: border-box;
    padding: 12px 24px;
    margin: 15px 0; /* Add vertical space around the button */
    background-color: var(--color-accent-success);
    color: var(--color-text-on-accent);
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.reserve-now-button:hover {
    background-color: var(--color-accent-success-hover);
}

/* --- Timestamp for Notifications in Alert Cards --- */
.notification-timestamp {
    font-size: 0.8em;
    font-style: italic;
    color: var(--color-text-subtle);
    margin: -5px 0 10px 0; /* Pull it closer to the header */
}

/* --- Found Availability Section in Alert Cards --- */
.found-availability-container {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-subtle);
}

.found-availability-container h4 {
    margin: 0 0 8px 0;
    font-size: 1em;
    color: var(--color-accent-success);
}

.found-availability-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.found-availability-list li {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.found-availability-list a {
    text-decoration: underline;
}

/* Mobile adjustment for alert cards */
@media (max-width: 600px) {
    .alert-card-image-col,
    .dashboard-icon-col {
        width: 80px; /* Smaller image on mobile */
    }
    .alert-card-image,
    .dashboard-image {
        height: 60px;
    }
}