/* Extracted from legacy University-Placement-Table.php (get_unified_admission_css) */

/* ============================================================================
   ADMISSION RESULTS TABLE - CSS STYLES
   ============================================================================
   Structure:
   1. BASE STYLES (All Devices) - 基础样式（所有设备）
   2. DESKTOP STYLES (min-width: 769px) - 桌面端样式
   3. TABLET STYLES (769px - 1024px) - 平板端样式
   4. MOBILE STYLES (max-width: 768px) - 手机端样式
   5. TOOLTIP STYLES - 提示框样式
   ============================================================================ */

/* ============================================================================
   1. BASE STYLES - 基础样式（所有设备通用）
   ============================================================================ */

/* --- 1.1 Filter Container - 筛选区域容器 --- */
.admission-results-root .admission-results-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    align-items: flex-start;
}

/* Filter row layout helpers */
.admission-results-root .filter-row-1,
.admission-results-root .filter-row-2 {
    display: contents;
}

:not(.admission-results-root) > .filter-row-1,
:not(.admission-results-root) > .filter-row-2 {
    display: initial !important;
}

/* --- 1.2 Filter Items - 筛选项基础样式 --- */
.admission-results-root .filter-item {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
}

.admission-results-root .admission-results-filters > .filter-item:not(.search-item) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.admission-results-root .admission-results-filters > .filter-item.search-item {
    flex: 1 1 auto !important;
    min-width: 120px !important;
}

.admission-results-root .filter-item.button-item {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 4px !important;
}

/* --- 1.3 Filter Labels - 筛选标签 --- */
.admission-results-root .admission-results-filters label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #495057;
    font-size: 0.8rem;
    display: block;
}

/* --- 1.4 Filter Inputs - 筛选输入框 --- */
.admission-results-root .admission-results-filters input[type="text"],
.admission-results-root .admission-results-filters input[type="number"] {
    padding: 8px;
    border: 1px solid #ced4da;
    font-size: 0.8rem;
    background: white;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
}

.admission-results-root .admission-results-filters input,
.admission-results-root .admission-results-filters textarea,
.admission-results-root .admission-results-filters .search-row input {
    min-width: 0 !important;
    width: 100% !important;
}

/* --- 1.5 Filter Select - 筛选下拉框 --- */
.admission-results-root .admission-results-filters select {
    padding: 8px;
    border: 1px solid #ced4da;
    background: white;
    border-radius: 3px;
    color: #343a40;
    font-size: 0.8rem;
    box-sizing: border-box;
    width: 100px;
    max-width: 100px;
}

/* --- 1.6 Filter Range - 排名区间输入 (QS/US/THE) --- */
.admission-results-root .filter-range {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.admission-results-root .filter-range input {
    width: calc(50% - 4px) !important;
    margin: 0 !important;
}

/* --- 1.7 Search Row - 搜索行布局 --- */
.admission-results-root .search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admission-results-root .search-row input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
}

.admission-results-root .search-row button {
    flex: 0 0 auto;
    height: 36px;
    padding: 6px 12px;
    margin: 0;
}

/* --- 1.8 Filter Buttons - 筛选按钮 --- */
.admission-results-root .admission-results-filters button {
    background: steelblue;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 3px;
    height: 34px;
}

.admission-results-root .admission-results-filters button:hover {
    background: #4a6fa5;
}

/* --- 1.9 Table Container - 表格容器 --- */
.admission-results-root .admission-results-table,
.admission-results-root .admission-results-eu,
.admission-results-root .admission-results-asia {
    max-height: 80vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* --- 1.10 Table Base - 表格基础样式 --- */
.admission-results-root .university-admissions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 600px;
    margin: 0;
}

/* --- 1.11 Table Header - 表头样式 --- */
.admission-results-root .university-admissions-table th {
    background: steelblue;
    color: white;
    font-weight: 600;
    padding: 10px 6px;
    text-align: center;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Sort indicator arrows - 排序箭头指示 */
.admission-results-root .university-admissions-table th.sort-asc::after {
    content: " ▲";
    font-size: 0.7em;
}

.admission-results-root .university-admissions-table th.sort-desc::after {
    content: " ▼";
    font-size: 0.7em;
}

/* --- 1.12 Table Cells - 表格单元格 --- */
.admission-results-root .university-admissions-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
    font-size: 0.8rem;
    text-align: center;
}

/* --- 1.13 First Column (University Name) - 首列（大学名称）固定定位 --- */
.admission-results-root .university-admissions-table thead th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 7;
    background: steelblue;
    color: white;
    text-align: left;
    box-shadow: 2px 0 4px rgba(0,0,0,0.03);
}

.admission-results-root .university-admissions-table tbody td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 3;
    background: white;
    text-align: left;
    box-shadow: 2px 0 4px rgba(0,0,0,0.03);
}

/* --- 1.14 Table Row Zebra Stripes - 表格行斑马纹 --- */
.admission-results-root .university-admissions-table tbody tr:nth-child(odd) {
    background: #fafafa;
}

.admission-results-root .university-admissions-table tbody tr:nth-child(even) {
    background: white;
}

/* Ensure sticky first column inherits row background */
.admission-results-root .university-admissions-table tbody tr:nth-child(odd) td:first-child {
    background: #fafafa;
}

.admission-results-root .university-admissions-table tbody tr:nth-child(even) td:first-child {
    background: white;
}

/* --- 1.15 University Name Display - 大学名称显示样式 --- */
.admission-results-root .university-name {
    display: block;
    max-width: 100%;
    line-height: 1.4;
    text-align: left;
}

.admission-results-root .university-name-chinese {
    display: block;
    font-weight: 600;
    color: #212529;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.admission-results-root .university-name-english {
    display: block;
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ============================================================================
   2. DESKTOP STYLES - 桌面端样式 (min-width: 769px)
   ============================================================================ */
@media (min-width: 769px) {

    /* --- 2.1 Filter Layout - 筛选区布局 --- */
    .admission-results-root .admission-results-filters {
        flex-wrap: nowrap !important;
    }

    .admission-results-root .admission-results-filters > .filter-item:not(.search-item) {
        flex: 0 0 220px !important;
        min-width: 220px !important;
        max-width: 360px !important;
    }

    /* Country filter narrower */
    .admission-results-root .admission-results-filters > .filter-item.country-item {
        flex: 0 0 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.search-item {
        flex: 1 1 auto !important;
    }

    /* --- 2.2 Table Layout - 表格布局 --- */
    .admission-results-root .university-admissions-table {
        table-layout: fixed;
        width: 100%;
    }

    .admission-results-root .university-admissions-table thead th,
    .admission-results-root .university-admissions-table tbody td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- 2.3 First Column Width - 首列宽度 (200px) --- */
    .admission-results-root .university-admissions-table thead th:first-child,
    .admission-results-root .university-admissions-table tbody td:first-child {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }

    /* --- 2.4 Other Columns Width - 其他列宽度均分 --- */
    .admission-results-root .university-admissions-table thead th:not(:first-child),
    .admission-results-root .university-admissions-table tbody td:not(:first-child) {
        width: calc((100% - 200px) / var(--other-cols)) !important;
    }

    /* --- 2.5 Table Container Scroll - 表格容器滚动 --- */
    .admission-results-root .admission-results-table,
    .admission-results-root .admission-results-eu,
    .admission-results-root .admission-results-asia {
        max-height: 80vh;
        overflow: auto;
        position: relative;
    }

    /* --- 2.6 Sticky Header - 固定表头 --- */
    .admission-results-root .university-admissions-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: steelblue;
    }

    .admission-results-root .university-admissions-table thead th:first-child {
        left: 0;
        z-index: 7;
    }

    .admission-results-root .university-admissions-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
    }
}

/* ============================================================================
   3. TABLET STYLES - 平板端样式 (769px - 1024px)
   ============================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* --- 3.1 Filter Layout - 筛选区分两行布局 --- */
    /* First row: QS / US / THE ranges */
    /* Second row: Country filter + University name search */
    .admission-results-root .admission-results-filters {
        flex-wrap: wrap !important;
        gap: 12px;
    }

    /* --- 3.2 First Row Items (QS/US/THE) - 第一行项目 --- */
    .admission-results-root .admission-results-filters > .filter-item:nth-child(-n+3) {
        box-sizing: border-box;
        flex: 0 0 calc((100% - 24px) / 3) !important;
        max-width: calc((100% - 24px) / 3) !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        order: 1;
    }

    /* --- 3.3 Second Row Items (Country + Search) - 第二行项目 --- */
    .admission-results-root .admission-results-filters > .filter-item.country-item {
        order: 2;
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.search-item {
        order: 2;
        flex: 0 0 calc(70% - 12px) !important;
        max-width: calc(70% - 12px) !important;
    }

    /* Inline layout for country + search */
    .admission-results-root .admission-results-filters > .filter-item.country-item,
    .admission-results-root .admission-results-filters > .filter-item.search-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding-top: 0 !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.country-item label,
    .admission-results-root .admission-results-filters > .filter-item.search-item label {
        margin-bottom: 0 !important;
        display: inline-block !important;
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.country-item select {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.search-item .search-row {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.search-item .search-row input[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .admission-results-root .admission-results-filters > .filter-item.search-item .search-row button {
        flex: 0 0 auto !important;
    }
}

/* ============================================================================
   4. MOBILE STYLES - 手机端样式 (max-width: 768px)
   ============================================================================ */
@media (max-width: 768px) {

    /* --- 4.1 Filter Layout - 筛选区垂直布局 --- */
    .admission-results-root .admission-results-filters {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* --- 4.2 Filter Items - 筛选项横向布局（标签+输入框） --- */
    .admission-results-root .admission-results-filters > .filter-item {
        width: 100% !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* --- 4.3 Filter Labels - 筛选标签固定宽度 --- */
    .admission-results-root .admission-results-filters > .filter-item label {
        margin-bottom: 0 !important;
        display: inline-block !important;
        text-align: left !important;
        width: 60px !important;
        min-width: 60px !important;
        box-sizing: border-box !important;
        flex: 0 0 60px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* --- 4.4 Country Select - 国家下拉框填充剩余空间 --- */
    .admission-results-root .admission-results-filters > .filter-item.country-item select {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    /* --- 4.5 Range Inputs - 区间输入框 --- */
    .admission-results-root .admission-results-filters > .filter-item .filter-range {
        flex: 1 1 auto !important;
        display: flex !important;
        gap: 8px !important;
    }

    /* --- 4.6 Search Row - 搜索行布局 --- */
    .admission-results-root .filter-row-2 {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .admission-results-root .filter-item.search-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .admission-results-root .filter-item.button-item {
        flex: 0 0 auto !important;
    }

    .admission-results-root .search-row {
        width: 100% !important;
    }

    .admission-results-root .search-row input[type="text"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .admission-results-root .search-row button {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-top: 0 !important;
    }

    /* --- 4.7 Table Base - 表格基础样式 --- */
    .admission-results-root .university-admissions-table {
        font-size: 0.7rem;
        min-width: 500px;
    }

    .admission-results-root .university-admissions-table th,
    .admission-results-root .university-admissions-table td {
        padding: 6px 2px;
        font-size: 0.7rem;
    }

    /* --- 4.8 First Column - 首列 --- */
    .admission-results-root .university-admissions-table thead th:first-child,
    .admission-results-root .university-admissions-table tbody td:first-child {
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-left: 5px !important;  /* 左侧内边距，防止文字贴边 */
    }

    /* --- 4.9 University Name Truncation - 大学名称截断显示 --- */
    .admission-results-root .university-admissions-table tbody td:first-child .university-name {
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .admission-results-root .university-admissions-table tbody td:first-child .university-name-chinese,
    .admission-results-root .university-admissions-table tbody td:first-child .university-name-english {
        display: block !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* --- 4.10 Clickable Hint - 点击提示（cursor样式） --- */
    .admission-results-root .university-admissions-table tbody td:first-child {
        cursor: pointer;
    }

    /* --- 4.11 Table Horizontal Scroll - 表格水平滚动 --- */
    .admission-results-root .admission-results-table,
    .admission-results-root .admission-results-eu,
    .admission-results-root .admission-results-asia {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================================
   5. TOOLTIP STYLES - 提示框样式（手机端点击显示完整名称）
   ============================================================================ */

/* --- 5.1 Tooltip Container - 提示框容器 --- */
.admission-results-root .mobile-tooltip {
    position: fixed;
    background: rgba(33, 37, 41, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 280px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- 5.2 Tooltip Visible State - 提示框显示状态 --- */
.admission-results-root .mobile-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- 5.3 Tooltip Content - 提示框内容样式 --- */
.admission-results-root .mobile-tooltip .tooltip-chinese {
    font-weight: 600;
    margin-bottom: 4px;
}

.admission-results-root .mobile-tooltip .tooltip-english {
    font-size: 0.8rem;
    color: #ccc;
}