/* --- Base & Variables --- */
/* ayr2air.com Stylesheet */
:root {
    --bg-color: #f8f9fa;            /* Light grey page background */
    --text-color: #212529;          /* Dark text */
    --primary-color: #0d6efd;       /* Blue */
    --secondary-color: #6c757d;     /* Mid Grey */
    --accent-color: #ffc107;        /* Yellow/Gold */
    --border-color: #dee2e6;        /* Light grey border */
    --table-header-bg: #e9ecef;
    --table-row-hover-bg: #f1f3f5;
    --card-bg: #ffffff;             /* White card/tile background */
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --border-radius: 6px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --price-up-color: #dc3545;
    --price-down-color: #198754;
    --header-text-color: #ffffff;
    /* Background for containers/sections in light mode */
    --container-bg-light: #ffffff;
    --tag-weekend-bg: #e8dff5; /* Light purple for weekend tag */
    --tag-weekend-text: #6a1b9a;
    --tag-weekend-border: #c3aed6;
}

body.dark-mode {
    --bg-color: #1a1a1a;            /* Dark page background */
    --text-color: #e0e0e0;          /* Light text */
    --primary-color: #4dabf7;       /* Lighter Blue */
    --secondary-color: #adb5bd;     /* Lighter Grey */
    --border-color: #444;           /* Darker border */
    --table-header-bg: #333;
    --table-row-hover-bg: #3a3a3a;
    --card-bg: #2c2c2c;             /* Dark grey card/tile background */
    --shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    --price-up-color: #f5c6cb;
    --price-down-color: #75b798;
    --header-text-color: #ffffff;
     /* Background for containers/sections in dark mode */
    --container-bg-light: #2c2c2c;
    --tag-weekend-bg: #3e2750; /* Dark purple for weekend tag */
    --tag-weekend-text: #e1bee7;
    --tag-weekend-border: #512da8;
}

/* --- General Styles --- */
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container { /* Used by results page */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Headings, Links, Base Sections */
h1, h2 { color: var(--primary-color); margin-bottom: 1rem; }
h1 { font-size: 2rem; margin-bottom: 0; }
h2 { font-size: 1.4rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; margin-top: 2rem; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { text-decoration: underline; color: var(--accent-color); }

section { /* Used by results page - card-like sections */
    background-color: var(--card-bg); /* Use card background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* --- Header (Results Page Specific) --- */
header:not(.landing-header) { background-color: var(--primary-color); color: var(--header-text-color); padding: 1rem 0; box-shadow: var(--shadow); }
.header-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; color: var(--header-text-color); }
.brand { display: flex; align-items: baseline; gap: 15px; }
.brand span { font-weight: bold; }
#darkModeToggle:not(.landing-toggle) { background: none; border: 1px solid var(--header-text-color); color: var(--header-text-color); font-size: 1.2rem; cursor: pointer; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; }
#darkModeToggle:not(.landing-toggle):hover { background-color: rgba(255, 255, 255, 0.2); }

/* --- Navigation (Results Page Specific) --- */
nav ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem 0; display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
nav li a { display: block; padding: 8px 15px; border-radius: var(--border-radius); border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s; color: var(--primary-color); }
body.dark-mode nav li a { color: var(--primary-color); }
nav li a:hover { background-color: var(--table-row-hover-bg); border-color: var(--border-color); text-decoration: none; }
nav li a.active { font-weight: bold; border-color: var(--primary-color); }

/* --- Month Selector (Results Page) --- */
#monthly-reports h2 { margin-top: 0; }
.month-selector-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
.month-button { padding: 8px 12px; font-size: 0.9rem; border: 1px solid var(--border-color); background-color: var(--bg-color); color: var(--text-color); border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.month-button:hover { background-color: var(--table-row-hover-bg); border-color: var(--secondary-color); }
.month-button.active { background-color: var(--primary-color); color: var(--header-text-color); border-color: var(--primary-color); font-weight: bold; }

/* --- Info Bar & Status (Results Page) --- */
.info-bar { font-size: 0.9em; color: var(--secondary-color); margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--border-color); }
#status-content-dynamic { font-weight: bold; padding: 2px 5px; border-radius: 3px; margin-left: 5px; display: inline-block; transition: background-color 0.3s, color 0.3s; }
#status-content-dynamic.status-running { background-color: #fff3cd; color: #664d03; }
#status-content-dynamic.status-error { background-color: #f8d7da; color: #842029; }
#status-content-dynamic.status-complete { background-color: #d1e7dd; color: #0f5132; }
body.dark-mode #status-content-dynamic.status-running { background-color: #332701; color: #ffc107; }
body.dark-mode #status-content-dynamic.status-error { background-color: #2c0b0e; color: #f5c6cb; }
body.dark-mode #status-content-dynamic.status-complete { background-color: #051b11; color: #75b798; }

/* --- Filter Controls (Results Page) --- */
.filter-section h2 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1.2rem; border-bottom: none; color: var(--primary-color); }
.filter-controls { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.filter-controls label { margin-right: 5px; font-weight: bold; font-size: 0.9em; color: var(--text-color); }
.filter-controls input[type="number"] { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--bg-color); color: var(--text-color); max-width: 100px; }
.filter-controls button { padding: 6px 12px; font-size: 0.9rem; border: 1px solid var(--secondary-color); background-color: var(--bg-color); color: var(--secondary-color); border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.filter-controls button:hover { background-color: var(--secondary-color); color: #fff; }

/* --- Table Styles (Results Page) --- */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; }
th, td { border: 1px solid var(--border-color); padding: 10px 12px; text-align: left; transition: background-color 0.3s ease, border-color 0.3s ease; white-space: nowrap; color: var(--text-color); }
th { background-color: var(--table-header-bg); font-weight: bold; color: var(--text-color); }
tbody tr:nth-child(even) { background-color: var(--table-row-hover-bg); }
tbody tr:nth-child(odd) { background-color: var(--card-bg); }
tbody tr:hover { background-color: var(--table-row-hover-bg); }

/* --- Tooltips, Tags, Price Indicators, Highlighting, Buttons (Results Page) --- */
td[data-tooltip] { position: relative; cursor: help; }
td[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 10; }
td[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
.tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; border: 1px solid transparent; }
.tag-escape { background-color: #e7f5ff; color: #1c7ed6; border-color: #a5d8ff; }
.tag-long-break { background-color: #fff9db; color: #fab005; border-color: #ffe066; }
.tag-weekend { background-color: var(--tag-weekend-bg); color: var(--tag-weekend-text); border-color: var(--tag-weekend-border); } /* Weekend Tag Style */
body.dark-mode .tag-escape { background-color: #1f3b52; color: #a5d8ff; border-color: #364f6b; }
body.dark-mode .tag-long-break { background-color: #4d3d0c; color: #ffe066; border-color: #6b5618; }
/* Weekend tag dark mode uses variables now */
.price-down { color: var(--price-down-color); font-weight: bold; }
.price-up { color: var(--price-up-color); font-weight: bold; }
.price-new { color: var(--secondary-color); font-style: italic; font-size: 0.9em;}
.price-same { color: var(--secondary-color); font-size: 0.9em; opacity: 0.7; }
.cheapest-row td { background-color: var(--accent-color) !important; color: #333 !important; font-weight: bold; }
body.dark-mode .cheapest-row td { background-color: #a08a00 !important; color: var(--text-color) !important; }
.book-button { display: inline-block; padding: 4px 8px; background-color: var(--primary-color); color: #ffffff !important; text-decoration: none; border-radius: var(--border-radius); font-size: 0.85em; transition: background-color 0.2s ease; white-space: nowrap; }
.book-button:hover { background-color: #0b5ed7; text-decoration: none; color: #ffffff !important; }
body.dark-mode .book-button { background-color: var(--primary-color); color: #111 !important; }
body.dark-mode .book-button:hover { background-color: #6fc0ff; }

/* --- Table Sorting (Results Page) --- */
#resultsTable th { cursor: pointer; position: relative; padding-right: 20px; }
#resultsTable th::after,
#resultsTable th::before { content: ''; position: absolute; right: 8px; border: 4px solid transparent; opacity: 0.3; }
#resultsTable th::before { bottom: 55%; border-bottom-color: var(--secondary-color); }
#resultsTable th::after { top: 55%; border-top-color: var(--secondary-color); }
#resultsTable th[aria-sort="ascending"]::before,
#resultsTable th[aria-sort="descending"]::after { opacity: 1; }
#resultsTable th[aria-sort="ascending"]::before { border-bottom-color: var(--primary-color); }
#resultsTable th[aria-sort="descending"]::after { border-top-color: var(--primary-color); }

/* --- Chart (Results Page) --- */
.chart-container { position: relative; height: 400px; width: 100%; margin-top: 1rem; }

/* --- Loading Spinner (Results Page) --- */
.spinner { border: 4px solid var(--table-row-hover-bg); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-message { text-align: center; color: var(--secondary-color); margin-top: 5px; font-style: italic; }

/* --- Error Message Styling (Results Page) --- */
.error-message { color: #dc3545; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 1rem; border-radius: var(--border-radius); text-align: center; margin-top: 1rem; }
body.dark-mode .error-message { color: #f5c6cb; background-color: #58151c; border-color: #dc3545; }

/* --- Footer (Shared - Used by Integrated Footer Now) --- */
/* footer { ... } -> Styles below handle integrated footer */

/* --- Responsiveness (Shared & Results Page) --- */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    .header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
    nav ul { justify-content: center; }
    .filter-controls { flex-direction: column; align-items: stretch; gap: 10px;}
    .filter-controls input[type="number"] { max-width: none; }
    th, td { padding: 8px; }
}
@media (max-width: 480px) {
    h1 { font-size: 1.5rem; }
    nav ul { flex-direction: column; align-items: stretch; text-align: center; }
    .brand span { display: none; }
    .month-selector-buttons { justify-content: center; }
    .header-content { align-items: center; }
    #darkModeToggle:not(.landing-toggle) { position: static; margin-top: 10px; }
}

/* ======================================================== */
/* --- Landing Page Specific Styles (Compacted) --- */
/* ======================================================== */

/* General Body/Layout Adjustments */
body.landing-page {
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; -> Keep if gradient fill is desired */
    /* The animated gradient is applied via inline style in index.html */
}

/* Further Compact Landing Header */
.landing-header {
    padding: 1.2rem 1rem; /* Reduced padding */
    color: var(--header-text-color);
    text-align: center;
    position: relative;
    border-bottom: 4px solid var(--accent-color); /* Slightly thinner border */
}
.landing-header .tagline,
.landing-header .sub-tagline {
    margin-top: 0.15rem; /* Reduced top margin */
    margin-bottom: 0; /* Remove bottom margin */
    line-height: 1.4; /* Adjust line height if needed */
}
.landing-header .sub-tagline {
    font-size: 0.85em; /* Slightly smaller */
    opacity: 0.75;
}

/* Adjust Landing Main Area */
.landing-main {
    padding: 1.5rem 0; /* Reduced padding */
}

/* Further Compact Landing Container */
.landing-container {
     max-width: 850px; /* Slightly narrower */
     margin: 1rem auto; /* Reduced top/bottom margin */
     padding: 1.2rem; /* Reduced padding */
     text-align: center;
     background-color: var(--container-bg-light); /* Uses variable */
     border-radius: var(--border-radius);
     box-shadow: var(--shadow);
     border: 1px solid var(--border-color);
}

/* Adjust Destinations Section Spacing */
.destinations-section h2 {
    font-size: 1.6rem; /* Slightly smaller */
    margin-bottom: 1.2rem; /* Space below H2 before grid */
    border-bottom: none; /* Remove border from landing page H2 */
    margin-top: 0; /* Remove extra top margin */
}

/* Further Compact Destination Grid and Buttons */
.destination-grid {
    list-style: none;
    padding: 0;
    display: grid;
    /* Adjust minmax for smaller buttons, repeat allows wrapping */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem; /* Reduced gap further */
    /* No bottom margin, handled by status line margin */
}

/* Adjust Destination Button Padding and Height */
.destination-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reduce min-height and padding for smaller buttons */
    min-height: 50px;
    padding: 0.6rem 0.8rem;
    background-color: var(--card-bg);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    /* Reduce font-size slightly */
    font-size: 0.95rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
}
body.dark-mode .destination-grid a {
     color: var(--primary-color);
}
.destination-grid a:hover {
    transform: translateY(-2px); /* Slightly less hover effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    background-color: var(--table-row-hover-bg);
    text-decoration: none;
    border-color: var(--primary-color);
}

/* Style the moved status line */
.status-line {
    margin-top: 1rem; /* Space between grid and status line */
    margin-bottom: 1.5rem; /* Space between status line and details */
    text-align: center; /* Center the status text */
    font-size: 0.9em; /* Match original style */
    color: var(--secondary-color); /* Match original style */
}


/* Details/Summary Adjustments */
details {
    margin-top: 0; /* Reset margin-top, spacing controlled by .status-line margin-bottom */
    text-align: left; /* Align text left inside details */
    /* background/padding/border from inline styles or existing rules */
    background: rgba(255,255,255,0.05); /* Re-apply from inline */
    padding: 1em; /* Re-apply from inline */
    border-radius: 6px; /* Re-apply from inline */
    color: var(--text-color); /* Re-apply from inline */
    border: 1px solid var(--border-color); /* Re-apply from inline */
}
body.dark-mode details { /* Re-apply from inline */
    background: rgba(0,0,0,0.2);
}
summary { /* Re-apply from inline */
    cursor: pointer;
    font-weight: bold;
}

/* Styling for the Integrated Footer Info */
.integrated-footer-info {
    margin-top: 2rem; /* Space above the footer info */
    padding-top: 1rem; /* Padding above the content */
    border-top: 1px solid var(--border-color); /* Separator line */
    font-size: 0.85em; /* Smaller text size */
    color: var(--secondary-color); /* Match footer text color */
    text-align: center;
}
.integrated-footer-info p {
    margin-bottom: 0.5em; /* Space between footer paragraphs */
    line-height: 1.4;
}
.integrated-footer-info a {
    color: #5ec8f7; /* Match link color */
    text-decoration: none;
    font-weight: bold;
}
.integrated-footer-info a:hover {
    text-decoration: underline;
    color: #ffffff; /* Match link hover color */
}
/* Dark mode adjustments for integrated footer if needed */
body.dark-mode .integrated-footer-info {
    color: var(--secondary-color); /* Use theme variable */
}
body.dark-mode .integrated-footer-info a {
    color: #5ec8f7;
}
body.dark-mode .integrated-footer-info a:hover {
    color: #ffffff;
}


/* Hide old separate footer styles if necessary */
.footer-section { display: none; }

/* Anywhere Info specific style (Results Page - keep as is) */
.anywhere-info {
    font-style: italic;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.95em;
}

/* Added fade-in from inline */
.fade-in { opacity: 0; animation: fadeIn ease 1s forwards; animation-delay: 0.3s; }
@keyframes fadeIn { to { opacity: 1; } }