/* ====================================================================
   跃动数据 — 卡通暖色主题样式
   配合 Tailwind CSS 使用，补充内联样式无法覆盖的全局效果
   ==================================================================== */

/* ===== 基础重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 全局暖色背景 ===== */
body {
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #4A3728;
    background-color: #FFF9F0;
    /* 暖色圆点背景纹理 */
    background-image:
        radial-gradient(rgba(255, 107, 157, 0.04) 1px, transparent 1px),
        radial-gradient(rgba(255, 169, 77, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
}

/* ===== 容器 ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== 暖色文字 ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.4;
    color: #4A3728;
}

p, li {
    line-height: 1.7;
    color: #5C4A3A;
}

/* ===== 表格暖色样式 ===== */
table {
    border-collapse: collapse;
}

table tbody tr {
    transition: background-color 0.2s ease;
}

table tbody tr:hover {
    background-color: #FFF5F8 !important;
}

table tbody tr:nth-child(even) {
    background-color: #FFFCF8;
}

table td {
    font-size: 0.9rem;
    padding: 12px 16px;
}

/* ===== 数据采集选项交互效果 ===== */
.data-collection-option {
    transition: all 0.3s ease;
}

.data-collection-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(255, 107, 157, 0.12);
}

/* ===== 上传区域交互效果 ===== */
#real-data-dropzone:hover {
    border-color: #FF6B9D !important;
    background: #FFF5F8 !important;
    transform: translateY(-2px);
}

#control-data-dropzone:hover {
    border-color: #FFA94D !important;
    background: #FFF8F0 !important;
    transform: translateY(-2px);
}

#real-data-dropzone,
#control-data-dropzone {
    transition: all 0.3s ease;
}

/* ===== 输入框暖色焦点态 ===== */
input[type="number"]:focus,
input[type="text"]:focus {
    outline: none;
    border-color: #FF6B9D !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.15);
}

/* ===== 按钮通用暖色效果 ===== */
button {
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

button:hover:not(:disabled) {
    transform: translateY(-2px);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== 滚动条暖色美化 ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #FFF5F0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #FFB3C9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FF6B9D;
}

/* ===== 链接暖色效果 ===== */
a {
    transition: all 0.3s ease;
}

/* ===== 响应式适配 ===== */
@media (max-width: 768px) {
    .container {
        padding: 0 12px;
    }

    /* 按钮全宽 */
    main button {
        width: 100%;
        margin-bottom: 8px;
    }

    /* 数据上传区域单列 */
    .grid {
        gap: 16px !important;
    }

    /* 表格横向滚动 */
    .h-64 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* 导航链接隐藏（由移动端底部导航接管） */
    #navbar nav ul {
        display: none;
    }

    /* 仿真上传遮罩层适配 */
    .upload-sim-overlay {
        padding: 16px;
    }

    .upload-sim-icon {
        font-size: 36px;
    }
}

/* ===== 平板适配 ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 0 16px;
    }
}

/* ===== 大屏适配 ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ===== 选中文本暖色 ===== */
::selection {
    background: rgba(255, 107, 157, 0.2);
    color: #4A3728;
}