/* ==========================================
   My Phone Comparer - Styles V1.0.17
   - Increased table container max-height.
   - JS logic for sticky header refined (see comparer-scripts.js).
   ========================================== */

/* Material Design Color Palette Variables */
:root {
    --mpc-primary-color: #2196F3; /* Blue 500 */
    --mpc-primary-dark-color: #1976D2; /* Blue 700 */
    --mpc-accent-color: #FF4081; /* Pink A200 */
    --mpc-text-primary-color: #212121; /* Grey 900 */
    --mpc-text-secondary-color: #757575; /* Grey 600 */
    --mpc-background-color: #FFFFFF; /* White */
    --mpc-divider-color: #BDBDBD; /* Grey 400 */
    --mpc-light-grey-background: #f8f9fa; /* Light grey for sticky elements */
    --mpc-row-alternate-background: #e3f2fd; /* Light Blue for alternating rows */
    --mpc-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --mpc-border-radius: 4px;
    --mpc-spacing-unit: 8px;
    }

/* Main Container Styling */
.mpc-container {
    margin: calc(var(--mpc-spacing-unit) * 2) 0;
    padding: calc(var(--mpc-spacing-unit) * 2);
    background-color: var(--mpc-background-color);
    border-radius: var(--mpc-border-radius);
    box-shadow: var(--mpc-box-shadow);
    position: relative; /* Establish positioning context for children */
}

/* Controls Area */
.mpc-controls-area {
    margin-bottom: calc(var(--mpc-spacing-unit) * 3);
}
.mpc-controls-area h2,
.mpc-selected-phones-area h3 {
    margin-top: 0;
    margin-bottom: calc(var(--mpc-spacing-unit) * 1.5);
    color: var(--mpc-text-primary-color);
}

/* Search Input Area */
.mpc-search-area {
    display: flex;
    align-items: center;
    margin-bottom: calc(var(--mpc-spacing-unit) * 2);
    gap: var(--mpc-spacing-unit);
}
.mpc-search-area label.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

#mpc-phone-search {
    flex-grow: 1;
    padding: var(--mpc-spacing-unit) calc(var(--mpc-spacing-unit) * 1.5);
    border: 1px solid var(--mpc-divider-color);
    border-radius: var(--mpc-border-radius);
    font-size: 1rem;
}
#mpc-phone-search:focus {
    outline: none;
    border-color: var(--mpc-primary-color);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

/* jQuery UI Autocomplete Styling */
.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: var(--mpc-spacing-unit) 0;
    margin-top: 2px;
    list-style: none;
    background-color: var(--mpc-background-color);
    border: 1px solid var(--mpc-divider-color);
    border-radius: var(--mpc-border-radius);
    box-shadow: var(--mpc-box-shadow);
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-menu-item {
    padding: calc(var(--mpc-spacing-unit) * 0.75) calc(var(--mpc-spacing-unit) * 1.5);
    clear: both;
    font-weight: normal;
    line-height: 1.4;
    color: var(--mpc-text-primary-color);
    white-space: nowrap;
}
.ui-menu-item.ui-state-focus,
.ui-menu-item.ui-state-active {
    margin: 0;
    background-color: var(--mpc-primary-color);
    color: white;
    border: none;
    border-radius: 0;
}

/* Selected Phones List */
#mpc-selected-list {
    list-style: none;
    padding: 0;
    margin: 0 0 calc(var(--mpc-spacing-unit) * 2) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mpc-spacing-unit);
}
#mpc-selected-list li {
    display: inline-flex;
    align-items: center;
    background-color: #e0e0e0;
    padding: calc(var(--mpc-spacing-unit) * 0.5) var(--mpc-spacing-unit);
    border-radius: 16px;
    font-size: 0.9rem;
    color: var(--mpc-text-primary-color);
    box-shadow: var(--mpc-box-shadow);
    transition: background-color 0.3s ease;
}
#mpc-selected-list li:hover {
     background-color: #bdbdbd;
}
.mpc-remove-btn {
    background: none;
    border: none;
    color: var(--mpc-text-secondary-color);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0 0 calc(var(--mpc-spacing-unit) * 0.5);
    margin-left: calc(var(--mpc-spacing-unit) * 0.75);
    line-height: 1;
    font-weight: bold;
}
.mpc-remove-btn:hover {
    color: var(--mpc-text-primary-color);
}

/* Buttons */
.mpc-button {
    border: none;
    padding: calc(var(--mpc-spacing-unit) * 1.25) calc(var(--mpc-spacing-unit) * 2);
    border-radius: var(--mpc-border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: var(--mpc-box-shadow);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.mpc-button:disabled {
    background-color: #BDBDBD !important;
    color: #757575 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}
.mpc-button-primary {
    background-color: var(--mpc-primary-color);
    color: white;
}
.mpc-button-primary:not(:disabled):hover {
    background-color: var(--mpc-primary-dark-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#mpc-compare-now-btn {
    display: block;
    width: fit-content;
    margin-top: var(--mpc-spacing-unit);
}

/* Results Area */
.mpc-results-container {
    margin-top: calc(var(--mpc-spacing-unit) * 3);
    position: relative; 
    overflow-x: visible; /* Changed from auto */
    overflow-y: auto;   
    max-height: 90vh;   
    width: 100%;    /* Changed from comment to explicit 100% */
    display: block;
}

.mpc-results-table {
    width: 100%;    /* Added explicit width */
    overflow-x: auto; /* Added horizontal scroll here instead */
    display: block; /* Added to ensure proper overflow behavior */
}

.mpc-results-table table {
    width: 100%; /* Changed from min-width to width */
    border-collapse: collapse;
    box-sizing: border-box;
    table-layout: fixed; 
}

/* === Column Width Definitions === */

/* Top-Left "Feature" Cell - Original Sticky behavior relative to scroll container */
.mpc-results-table thead tr:first-child th:first-child {
    padding: calc(var(--mpc-spacing-unit) * 1.5);
    text-align: left; font-weight: 500; color: var(--mpc-text-primary-color);
    border-bottom: 2px solid var(--mpc-divider-color);
    border-right: 1px solid var(--mpc-divider-color);
    white-space: nowrap; 

    position: sticky; 
    top: 0; 
    left: 0; 
    z-index: 20; 
    background-color: var(--mpc-light-grey-background); 
    min-width: 100px; /* Base, JS will override when fixed */
    width: 100px;     /* Base, JS will override when fixed */
    box-sizing: border-box; /* Explicitly set */
}

/* Phone Name Headers (All EXCEPT the first "Feature" column) - Original Sticky behavior */
.mpc-results-table thead tr:first-child th:not(:first-child) {
    padding: calc(var(--mpc-spacing-unit) * 1.5);
    text-align: left; font-weight: 500; color: var(--mpc-text-primary-color);
    border-bottom: 2px solid var(--mpc-divider-color);
    border-right: 1px solid var(--mpc-divider-color);
    word-break: break-word; 

    position: sticky; 
    top: 0; 
    background-color: var(--mpc-light-grey-background); 
    z-index: 10; 
    min-width: 180px; /* Base, JS will override when fixed */
    width: 180px;     /* Base, JS will override when fixed */
    box-sizing: border-box; /* Explicitly set */
    vertical-align: top; 
}
.mpc-results-table thead tr:first-child th:last-of-type { 
    border-right: none;
}

/* Spec Label Cell Styling (First Column in tbody) - Original Sticky behavior */
.mpc-spec-label-cell { 
    padding: var(--mpc-spacing-unit) calc(var(--mpc-spacing-unit) * 1.5);
    position: sticky;  
    left: 0; 
    background-color: var(--mpc-light-grey-background); 
    z-index: 15; 
    
    font-weight: 500; color: var(--mpc-text-primary-color);
    vertical-align: top; 
    
    min-width: 100px; 
    width: 100px;     
    /* max-width: 140px; */ /* Let JS control this for consistency with the fixed header's first TH */
    overflow-wrap: break-word; 
    box-sizing: border-box; /* Explicitly set */
    border-right: 1px solid var(--mpc-divider-color); 
    border-bottom: 1px solid var(--mpc-divider-color); 
}

/* --- Styles for JS-driven fixed-to-viewport header --- */
.mpc-results-table thead.mpc-thead-fixed-to-viewport {
    position: fixed !important; 
    top: 0 !important;
    z-index: 101; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    /* left, width, and transform for scroll sync will be set by JS */
}
/* Ensure THs within the JS-fixed thead also use border-box and have their background */
.mpc-thead-fixed-to-viewport th {
    box-sizing: border-box;
    background-color: var(--mpc-light-grey-background); 
}

.mpc-results-table.mpc-table-has-fixed-header {
    /* padding-top will be set by JS */
}
/* --- End Styles for JS-driven fixed-to-viewport header --- */

/* Data Cell Styling (All tbody TD cells EXCEPT the first column) */
.mpc-results-table tbody tr td:not(.mpc-spec-label-cell):not(:first-child) { 
    padding: var(--mpc-spacing-unit) calc(var(--mpc-spacing-unit) * 1.5);
    border-bottom: 1px solid var(--mpc-divider-color);
    border-right: 1px solid var(--mpc-divider-color);
    color: var(--mpc-text-secondary-color);
    vertical-align: top; 
    min-width: 180px; /* Base, consistent with header THs */
    box-sizing: border-box; /* Explicitly set */
    overflow-wrap: break-word; 
}
.mpc-results-table tbody tr td:last-of-type { 
     border-right: none;
}

/* Section Header Row Styling (within tbody) */
.mpc-section-header-row th { 
    padding: calc(var(--mpc-spacing-unit) * 1.5);
    background-color: var(--mpc-primary-dark-color);
    color: white;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--mpc-primary-color);
}

/* Alternating Row Colors for Data Rows */
.mpc-results-table tbody tr:not(.mpc-section-header-row):nth-child(odd) td:not(.mpc-spec-label-cell) {
    background-color: var(--mpc-background-color);
}
.mpc-results-table tbody tr:not(.mpc-section-header-row):nth-child(even) td:not(.mpc-spec-label-cell) {
    background-color: var(--mpc-row-alternate-background);
}

/* Reinforce backgrounds for sticky elements */
.mpc-results-table thead tr:first-child th:first-child:not(.mpc-thead-fixed-to-viewport th),
.mpc-results-table thead tr:first-child th:not(:first-child):not(.mpc-thead-fixed-to-viewport th),
.mpc-spec-label-cell {
    background-color: var(--mpc-light-grey-background); 
}
.mpc-thead-fixed-to-viewport th { /* Ensure THs within fixed thead also have this background */
    background-color: var(--mpc-light-grey-background);
}

/* Hide rows for difference filter */
tr.mpc-hidden-row {
    display: none !important;
}

/* FAB (Floating Action Button) */
.mpc-fab-container {
    position: fixed;
    bottom: calc(var(--mpc-spacing-unit) * 3);
    right: calc(var(--mpc-spacing-unit) * 3);
    z-index: 1000; 
}

#mpc-toggle-diff-btn {
    background-color: var(--mpc-accent-color);
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
}
#mpc-toggle-diff-btn:hover {
    background-color: #f50057;
    box-shadow: 0 6px 10px rgba(0,0,0,0.25);
}
#mpc-toggle-diff-btn .material-symbols-outlined { 
    font-family: 'Material Symbols Outlined'; 
    font-weight: normal; 
    font-style: normal;  
    font-size: 24px;  
    line-height: 1;   
    letter-spacing: normal; 
    text-transform: none; 
    display: inline-block; 
    white-space: nowrap; 
    word-wrap: normal; 
    direction: ltr; 
    -webkit-font-feature-settings: 'liga'; 
    -moz-osx-font-smoothing: grayscale; 
    font-feature-settings: 'liga'; 
    opacity: 1;
    color: inherit; 
}
#mpc-toggle-diff-btn.mpc-diff-mode-active {
    background-color: var(--mpc-primary-color);
}
#mpc-toggle-diff-btn.mpc-diff-mode-active:hover {
     background-color: var(--mpc-primary-dark-color);
}

/* Loading/Message Styling */
.mpc-loading, #mpc-error-display { /* Combined selector for #mpc-error-display */
    padding: var(--mpc-spacing-unit) calc(var(--mpc-spacing-unit) * 1.5);
    margin-top: var(--mpc-spacing-unit);
    border-radius: var(--mpc-border-radius);
    text-align: center;
}
.mpc-loading {
    color: var(--mpc-text-secondary-color);
}
#mpc-error-display.mpc-error { /* Keep .mpc-error class for JS to toggle visibility/styling */
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #c62828;
}

/* ==========================================
   Responsive Adjustments for Smaller Screens
   ========================================== */
@media (max-width: 767px) { /* Targets most smartphones and small tablets in portrait */
    .mpc-container {
        /* The .mpc-container itself will retain its default padding.
           This ensures the controls area above the table remains padded by default from base styles.
           We only flatten its appearance here, ensure it fills its theme-allotted width,
           and reset any text alignment that might affect child positioning. */
        /* position: relative; -- Already added to base .mpc-container style */
        width: 100%;        /* Ensure it takes full width of its theme-defined parent */
        box-sizing: border-box; /* Ensure its padding (from base styles) is included in its width */
        text-align: left;   /* Reset text-align to prevent interference with child positioning */
        /* DO NOT override padding-left/right here; let base styles apply for controls area. */
        border-radius: 0; /* Optional: Flatten appearance */
        box-shadow: none;
    }

    .mpc-controls-area {
        /* This will inherit padding from .mpc-container's base styles.
           Remove specific padding overrides from previous attempts if any. */
        padding-left: 0; /* Revert any specific mobile override to allow inheritance */
        padding-right: 0; /* Revert any specific mobile override to allow inheritance */
        /* box-sizing: border-box; -- Still good if it has its own border, but not strictly needed if only inheriting padding. */
    }

    .mpc-results-container {
        /* Apply full-bleed to this container to make the table viewport edge-to-edge */
        position: relative; /* Crucial for the left/margin-left trick */
        width: 100vw;
        left: 50%;
        /* Switch from transform to margin-left for centering/full-bleed */
        margin-left: -50vw !important;
        /* Explicitly set other margins if needed, or let them be default/inherited.
           The base style for .mpc-results-container has a margin-top.
           Setting margin-right and margin-bottom to 0 is safe. */
        margin-right: 0 !important;
        margin-bottom: 0;
        padding-left: 0; /* Ensure no internal padding interferes with edge-to-edge */
        padding-right: 0;/* Ensure no internal padding interferes with edge-to-edge */
        box-sizing: border-box; /* Good practice for width calculations */
        /* Ensure our overflow-x setting overrides theme's !important if necessary */
        overflow-x: visible !important;
    }

    .mpc-fab-container {
        /* Adjust FAB position to be a bit closer to the edges on smaller screens */
        bottom: var(--mpc-spacing-unit);
        right: var(--mpc-spacing-unit);
    }
}