/* ========================================================= 
   GLOBAL CSS — Shared Across All Pages 
   ========================================================= */

/* ---------- Global Tooltip ---------- */
.help_site_type {
    position: relative;
    display: inline-block;
    cursor: help;
    border: 1px solid #60a5fa;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 11px;
    background-color: #eef6ff;
    color: #1d4ed8;
    margin-left: 4px;
}

.help_site_type .tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(8px, -50%);
    background: #333;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: normal;
    min-width: 220px;
    max-width: 320px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    border: 1px solid #111827;
    transition: opacity .05s;
}

.help_site_type:hover .tooltip,
.help_site_type:focus .tooltip,
.help_site_type:focus-within .tooltip {
    transition: none;
    opacity: 1;
}

/* ---------- Global Reset & Base Layout ---------- */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #ffffff;
}

body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 5px 50px 5px;
}

main {
    flex: 1;
    padding: 20px;
}

/* ---------- Footer ---------- */
footer {
    text-align: center;
    background-color: #007BFF;
    color: white;
    width: 100%;
    height: 36px;
    padding: 6px;
    margin-top: auto;
}

/* ---------- Global Navigation Bar ---------- */
nav.horizontal-menu {
    width: 100%;
    margin: 0;
    padding: 0;
}

.horizontal-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #343a40;
}

.horizontal-menu li {
    flex-grow: 1;
}

.horizontal-menu li a {
    display: block;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: background-color .3s;
}

.horizontal-menu li a:hover,
.horizontal-menu .current {
    background-color: #0056b3;
}

/* ---------- Generic List Style ---------- */
ul {
    padding: 0;
    list-style: none;
}

li:hover {
    background-color: #ddd;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
}

.page-link {
    color: #007bff;
    text-decoration: none;
}

.page-link:hover {
    text-decoration: underline;
}

/* ---------- Global Table Styles ---------- */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.table-container table,
table {
    width: 100%;
    border-collapse: collapse;
}

.table-container th,
.table-container td,
th,
td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    font-size: 14px;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
}

.table-container th,
th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Even/odd rows */
.table-container tr:nth-child(even),
tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-container tr:nth-child(odd),
tr:nth-child(odd) {
    background-color: #dbd9d9;
}

.table-container tr:hover {
    background-color: #e9e9e9;
}

/* ---------- Sortable Column Arrows ---------- */
th {
    cursor: pointer;
    position: relative;
}

th::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

th.sorted-asc::after {
    content: "▲";
    color: red;
    font-size: 14px;
}

th.sorted-desc::after {
    content: "▼";
    color: red;
    font-size: 14px;
}

/* ---------- Input & Label ---------- */
.uniform-width {
    width: 100%;
    max-width: 400px;
    
    /* CAUTION: These values below affect the "fatness" of the input box */
    padding: 8px; 
    box-sizing: border-box;
    margin: 5px 0 10px 0;
    font-size: 16px; 
}

input[type="radio"] {
    margin-right: 10px;
}

label {
    margin-right: 20px;
}

/* ---------- Buttons ---------- */
button {
    padding: 5px 5px;
    margin-top: 5px;
    width: auto;
}

/* ---------- Highlighting ---------- */
.highlight {
    color: #FF4500;
    font-weight: bold;
}

.species {
    color: #2E86C1;
}

.zswim8-highlight {
    color: #800080;
    font-weight: bold;
}

.services-highlight {
    color: #008000;
    font-weight: bold;
}
 
/* ---------- Gradient Line ---------- */
.gradient-line {
    border: none;
    height: 8px;
    background: linear-gradient(to right, #FFD700, #FFA500, #FF4500);
    width: 100%;
    margin: 0;
}

/* ========================================================= 
   MOBILE RESPONSIVE FIXES (UPDATED VERSION 2.0)
   Add this to the very bottom of global.css
   ========================================================= */

@media screen and (max-width: 850px) {

    /* --- 1. Global Layout Adjustments --- */
    body {
        padding: 10px !important; /* Reduce padding on mobile */
    }

    main {
        padding: 0 !important;
        width: 100% !important;
        display: block !important; /* Prevent flexbox layout issues */
    }

    header img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- 2. Analyzer Page Fixes --- */
    
    /* Fix Image Width: Force override original min-width: 600px */
    .default-layout #default_image,
    .image-section img,
    body.analyzer .image-section img {
        min-width: 0 !important;    /* Key: Allow image to shrink */
        max-width: 100% !important; /* Width not to exceed screen */
        width: 100% !important;     /* Fill container */
        height: auto !important;    /* Auto height */
        margin: 0 auto !important;
    }
    
    /* Fix Menu: Force back to vertical list, placed at top */
    body.analyzer main {
        flex-direction: column !important; /* Stack vertically */
        gap: 20px !important;
    }

    .sidebar-wrapper {
        width: 100% !important;
        margin-bottom: 10px;
    }

    body.analyzer #leftMenu {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Key: Stack menu items vertically, don't squeeze into one row */
    body.analyzer #leftMenu ul {
        display: flex;
        flex-direction: column !important; /* Force vertical */
    }

    body.analyzer #leftMenu li {
        width: 100% !important;
        text-align: left !important; /* Left align text */
        border-bottom: 1px solid #eee;
        box-sizing: border-box; /* Prevent padding from breaking width */
    }
    
    /* Fix Right Form Area */
    body.analyzer #formAndImageContainer,
    body.analyzer #formAndImageContainer.default-layout {
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    body.analyzer #formSectionContainer {
        max-width: 100% !important;
        flex: none !important;
    }

    /* --- 3. Index (Home) Page Fixes --- */

    /* Stack left and right columns vertically */
    .main-content {
        flex-direction: column !important; 
        gap: 30px;
    }

    .search-container, 
    .image-container {
        width: 100% !important;
        flex: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix Search Box: Label on top, Input below */
    .search-container form section,
    .index_container section,
    .main-content section {
        flex-direction: column !important;
        align-items: flex-start !important; /* Force left alignment */
        width: 100% !important;
    }

    /* Fix Label Width */
    .search-container form section label,
    .index_container .step-label,
    .main-content .step-label {
        width: 100% !important; /* Label takes full width */
        margin-bottom: 5px !important;
        text-align: left;
    }

    /* Fix Input Width: Prevent overflow but ensure alignment */
    .search-container section select,
    .search-container section input[type="text"],
    .index_container .uniform-width,
    .main-content .uniform-width {
        width: 100% !important; /* Fill mobile screen width */
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box !important; /* Key: Include padding in width to prevent overflow */
    }

    /* Fix Button Alignment */
    .search-container form button,
    #clash_search_button,
    #rna_seq_search_button,
    #mirna_seq_search_button {
        width: 100% !important; /* Button fills width for easier tapping */
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
    
    /* --- 4. Navigation Bar Optimization --- */
    .horizontal-menu ul {
        flex-direction: column; /* Stack menu items vertically on mobile to prevent errors */
    }
    
    .horizontal-menu li a {
        border-bottom: 1px solid #444;
        text-align: left;
        padding-left: 20px;
    }
}