/* General Resets & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base font size */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #333333; /* Dark Gray Text */
    background-color: #F4F7FC; /* Light Blue-Gray Background */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
    flex-grow: 1;
    width: 100%;
}

/* Header */
.app-header {
    background-color: #ffffff;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #EAEAEA;
}

.header-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link .logo-image {
    height: 60px;
    width: auto;
}

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

.app-header .nav-link {
    color: #214BDF; /* BRAND BLUE */
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

    .app-header .nav-link:hover {
        background-color: #1A3DB2; /* Darker BRAND BLUE */
        color: #ffffff;
    }

.app-header .user-info {
    margin-right: 1rem;
    color: #555;
    font-size: 0.9rem;
}


/* Footer */
.app-footer {
    background-color: #333333; /* Dark Gray Footer */
    color: #EAEAEA;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
}

.footer-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

.app-footer a {
    color: #70C4C4; /* BRAND TEAL for footer links */
    text-decoration: none;
}

    .app-footer a:hover {
        color: #5AB2B2; /* Darker BRAND TEAL */
        text-decoration: underline;
    }

/* Page Specific: Centered Content (for Index, Error) */
.page-center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    max-width: 550px;
    margin: 2rem auto;
}

    .page-center-container .logo-graphic img {
        max-width: 120px;
        height: auto;
        margin-bottom: 1.5rem;
    }

    .page-center-container h1 {
        font-size: 1.75rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #214BDF; /* BRAND BLUE for main headings in these sections */
    }

    .page-center-container .message {
        margin-bottom: 1.5rem;
        color: #555555;
        font-size: 1rem;
    }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: #214BDF; /* BRAND BLUE */
    color: #ffffff;
    border-color: #214BDF; /* BRAND BLUE */
}

    .btn-primary:hover {
        background-color: #1A3DB2; /* Darker BRAND BLUE */
        border-color: #1A3DB2; /* Darker BRAND BLUE */
        color: #ffffff;
    }

.btn-secondary { /* Example of a secondary button, perhaps using Teal */
    background-color: #70C4C4; /* BRAND TEAL */
    color: #ffffff;
    border-color: #70C4C4; /* BRAND TEAL */
}

    .btn-secondary:hover {
        background-color: #5AB2B2; /* Darker BRAND TEAL */
        border-color: #5AB2B2; /* Darker BRAND TEAL */
        color: #ffffff;
    }

/* Downloads Page */
.page-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #214BDF; /* BRAND BLUE */
    text-align: center;
}

.installers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.installer-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-left: 4px solid #70C4C4; /* BRAND TEAL accent */
}

    .installer-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .installer-card h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #214BDF; /* BRAND BLUE for filename/title */
        margin-bottom: 0.75rem;
        word-break: break-all;
    }

    .installer-card p {
        font-size: 0.9rem;
        color: #555555;
        margin-bottom: 0.5rem;
    }

        .installer-card p strong {
            color: #333333;
        }

    .installer-card .download-button-container {
        margin-top: auto;
        padding-top: 1rem;
    }

/* Dual Download Button Styles */
.download-button-container {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}

.action-buttons .tooltip-wrapper {
    display: flex;
    align-items: center;
}

.action-buttons .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Alert Messages */
.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: center;
}

.alert-danger { /* Standard danger colors, can be customized with brand colors for a softer look if desired */
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
/* Example of using brand color for info - could use a light teal */
.alert-info {
    color: #004085; /* Dark blue text for contrast */
    background-color: #DCEEFF; /* Lightened version of BRAND BLUE or a light Teal */
    border-color: #B8DAFF; /* Border for the light blue */
}
/* Alternative Info Alert with Teal */
/*
.alert-info {
    color: #2E6868; 
    background-color: #E2F3F3; 
    border-color: #BEE0E0; 
}
*/


/* Responsive Adjustments */
@media (max-width: 768px) {
    .app-header .nav-link {
        padding: 0.5rem;
    }

    .app-header .user-info {
        font-size: 0.8rem;
        margin-right: 0.5rem;
    }

    .logo-link .logo-image {
        height: 30px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .installer-card h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .header-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .app-header nav {
        margin-top: 0.5rem;
    }
}

/* Product Section Styling */
.product-section {
    margin-bottom: 3rem; /* Space between different products if multiple exist */
}

.product-title {
    font-size: 2.2rem; /* Make product title prominent */
    font-weight: 600;
    color: #214BDF; /* BRAND BLUE */
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #EAEAEA;
    padding-bottom: 1rem;
}

/* Latest Installer Card Styling */
.latest-installer-card {
    background-color: #ffffff;
    border-radius: 12px; /* Slightly more rounded */
    box-shadow: 0 8px 25px rgba(33, 75, 223, 0.1); /* Softer shadow with brand color hint */
    padding: 2rem;
    margin: 0 auto 2.5rem auto; /* Centered, with bottom margin */
    max-width: 700px; /* Control width for better focus */
    position: relative; /* For badge positioning */
    border: 1px solid #B8DAFF; /* Light blue border */
    text-align: center; /* Center content within the card */
}

.latest-badge {
    position: absolute;
    top: -15px; /* Position slightly outside the card */
    left: 50%;
    transform: translateX(-50%);
    background-color: #70C4C4; /* BRAND TEAL */
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px; /* Pill shape */
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.latest-installer-card h3 {
    font-size: 1.5rem; /* Larger filename/title */
    color: #214BDF; /* BRAND BLUE */
    margin-bottom: 1rem;
}

.latest-installer-card p {
    font-size: 1rem;
    color: #555555;
    margin-bottom: 0.6rem;
}

/* Modern Download Buttons for Latest Card */
.latest-installer-card .download-button-container {
    margin-top: 1.5rem;
}

.latest-installer-card .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 120px;
    position: relative;
    overflow: hidden;
}

.latest-installer-card .download-btn.exe {
    background: linear-gradient(135deg, #214BDF 0%, #1A3DB2 100%);
    color: white;
    border-color: #214BDF;
}

.latest-installer-card .download-btn.exe:hover {
    background: linear-gradient(135deg, #1A3DB2 0%, #153399 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(33, 75, 223, 0.3);
}

.latest-installer-card .download-btn.msi {
    background: linear-gradient(135deg, #70C4C4 0%, #5AB2B2 100%);
    color: white;
    border-color: #70C4C4;
}

.latest-installer-card .download-btn.msi:hover {
    background: linear-gradient(135deg, #5AB2B2 0%, #4A9999 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(112, 196, 196, 0.3);
}

.latest-installer-card .download-btn.disabled {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed;
    pointer-events: auto; /* Allow hover for tooltip */
}

.latest-installer-card .download-btn.disabled:hover {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    transform: none !important;
    box-shadow: none !important;
}


/* Older Versions Section */
.older-versions-section {
    margin-top: 2.5rem;
}

    .older-versions-section h2 {
        font-size: 1.5rem;
        color: #444;
        text-align: center;
        margin-bottom: 1.5rem;
        font-weight: 500;
    }

/* (The .installers-grid and .installer-card styles are already defined and should work) */

/* Remove or adjust these if they were specific to the older versions grid */
/*
.installers-grid .installer-card { 
    border-left: 4px solid #B8DAFF; 
}

.installers-grid .installer-card h3 {
     color: #1A3DB2; 
     font-size: 1.15rem;
}
*/

/* Table Specific Styles for Older Installers */
.table-responsive {
    overflow-x: auto; /* Allows table to scroll horizontally on small screens */
    margin-bottom: 1rem; /* Add some space below the table if needed */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.older-installers-table {
    width: 100%;
    min-width: 600px; /* Minimum width before horizontal scroll kicks in */
    border-collapse: collapse;
    margin-top: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden; /* Keeps rounded corners for the table */
}

    .older-installers-table th,
    .older-installers-table td {
        padding: 0.8rem 1rem; /* Slightly adjusted padding */
        text-align: left;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle; /* Align content vertically in cells */
    }

    .older-installers-table td.action-buttons {
        text-align: left; /* Keep consistent with other columns */
    }

    .older-installers-table th {
        background-color: #f4f7fc; /* Lightest blue-gray for header */
        font-weight: 600;
        color: #33475b; /* Darker text for header for contrast */
        font-size: 0.85rem; /* Slightly smaller header font */
        text-transform: uppercase;
        white-space: nowrap; /* Prevent headers from wrapping */
    }

    .older-installers-table tr:last-child td {
        border-bottom: none;
    }

    .older-installers-table tbody tr:hover { /* Hover effect for table rows */
        background-color: #e9f2ff; /* Very light blue hover */
    }

    .older-installers-table td {
        font-size: 0.9rem; /* Slightly smaller font for table data */
        color: #555;
    }

    .older-installers-table .filename-column {
        word-break: break-all; /* Allow long filenames to wrap */
        font-weight: 500; /* Slightly bolder filename */
        color: #214BDF; /* Brand blue for filename */
    }

/* Modern Download Buttons for Table */
.older-installers-table .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    min-width: 50px;
    position: relative;
}

.older-installers-table .download-btn.exe {
    background: linear-gradient(135deg, #214BDF 0%, #1A3DB2 100%);
    color: white;
    border-color: #214BDF;
}

.older-installers-table .download-btn.exe:hover {
    background: linear-gradient(135deg, #1A3DB2 0%, #153399 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 75, 223, 0.3);
}

.older-installers-table .download-btn.msi {
    background: linear-gradient(135deg, #70C4C4 0%, #5AB2B2 100%);
    color: white;
    border-color: #70C4C4;
}

.older-installers-table .download-btn.msi:hover {
    background: linear-gradient(135deg, #5AB2B2 0%, #4A9999 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(112, 196, 196, 0.3);
}

.older-installers-table .download-btn.disabled {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed;
    pointer-events: auto; /* Allow hover for tooltip */
}

.older-installers-table .download-btn.disabled:hover {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Tooltip Styles */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 9999; /* Very high z-index for all tooltips */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Default position - above the button */
.tooltip-wrapper .tooltip-text {
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Table-specific tooltips - position below to avoid cutoff with word wrapping */
.older-installers-table .tooltip-wrapper .tooltip-text {
    top: 125%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    white-space: normal;
    text-align: center;
    z-index: 9999; /* Very high z-index to appear above everything */
    position: absolute;
}

/* Override table overflow to allow tooltips to extend beyond table boundaries */
.older-installers-table .tooltip-wrapper {
    position: relative;
    z-index: 1;
}

/* Elevate the entire wrapper when hovering to ensure tooltip appears above siblings */
.older-installers-table .tooltip-wrapper:hover {
    z-index: 10000;
    position: relative;
}

.older-installers-table .tooltip-wrapper:hover .tooltip-text {
    z-index: 10001; /* Even higher when actively hovering */
}

/* Remove overflow changes that cause layout shifts - tooltips will work with high z-index */

.older-installers-table .tooltip-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Responsive adaptation for the table: The .table-responsive div handles scrolling fundamentally.
   You could add data-label attributes for a "stackable" table effect on very small screens if desired.
   The current implementation relies on horizontal scrolling for simplicity. */

@media (max-width: 767px) { /* Adjust breakpoint as needed */
    /* Optional: Stack table on small screens if preferred over scrolling for many columns */
    /* This is a more complex CSS setup, so starting with horizontal scroll is simpler */

    /* Adjust padding for table cells on smaller screens if relying on scroll */
    .older-installers-table th,
    .older-installers-table td {
        padding: 0.6rem 0.8rem;
    }

    .older-installers-table .filename-column {
        min-width: 150px; /* Adjust min-width for filename column */
    }
}


/* Ensure secondary button for older versions is distinct */
.installers-grid .btn-secondary {
    background-color: #6c757d; /* Standard secondary color (grayish) */
    color: #ffffff;
    border-color: #6c757d;
}

    .installers-grid .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }


/* Responsive Adjustments for New Elements */
@media (max-width: 768px) {
    .product-title {
        font-size: 1.8rem;
    }

    .latest-badge {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    }

    .latest-installer-card h3 {
        font-size: 1.3rem;
    }

    .latest-installer-card .btn-primary.btn-lg {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .older-versions-section h2 {
        font-size: 1.3rem;
    }
}

/* Mobile responsiveness for dual buttons */
@media (max-width: 480px) {
    .download-button-container {
        flex-direction: column;
        align-items: center;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }

    .action-buttons .download-btn {
        min-width: 60px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .latest-installer-card .download-btn {
        min-width: 140px;
        font-size: 0.9rem;
        padding: 0.7rem 1.2rem;
    }
}