/* ===================================================
   青少年职业体验协同调度系统 — 移动端适配（增强版）
   适用屏幕：手机竖屏 (max-width: 480px) 和平板 (max-width: 768px)
   2026-05-28 v2
   =================================================== */

/* ========== 全局重置 ========== */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
    }
    * { box-sizing: border-box !important; }
    *[style*="width"] { max-width: 100% !important; }
    /* 覆盖所有页面容器的最大宽度 */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ========== 登录页 ========== */
@media (max-width: 768px) {
    .login-page {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
        background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%) !important;
    }
    .login-left {
        width: 100% !important;
        padding: 40px 24px 30px !important;
    }
    .login-right {
        display: none !important;
    }
    .login-container, .career-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 28px 20px !important;
        border-radius: 16px !important;
    }
    .login-container h1 { font-size: 24px !important; }
    .login-container input, .login-container button {
        font-size: 16px !important;
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .register-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
    .role-selector {
        flex-wrap: wrap;
        gap: 8px !important;
    }
    .role-selector button, .role-btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
        flex: 1;
        min-width: 80px;
    }
}

/* ========== 导航栏通用 ========== */
@media (max-width: 768px) {
    .navbar, .top-bar, nav, header, .app-header, .nav-bar, .header {
        padding: 8px 12px !important;
        height: auto !important;
        min-height: 48px;
        flex-wrap: wrap !important;
    }
    .navbar-brand, .logo, .app-title, .brand { font-size: 17px !important; }
    .nav-tabs, .nav-links, .navbar-menu, .top-menu, .menu-items, .tab-container, .tabs, .tab-bar {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px !important;
        flex-wrap: nowrap !important;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-links::-webkit-scrollbar,
    .tab-container::-webkit-scrollbar { display: none; }
    .nav-tab, .tab, .tab-item, .nav-link, .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    .user-info, .user-badge { font-size: 13px !important; }
    .logout-btn, .signout { font-size: 13px !important; padding: 6px 12px !important; }
}

/* ========== 教师端 ========== */
@media (max-width: 768px) {
    .container, .content, .dashboard-content, .main-content, main, .tab-content {
        padding: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .project-actions, .student-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .project-actions button, .student-actions button {
        width: 100% !important;
        font-size: 14px !important;
    }
    .project-info {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .project-info .info-item {
        width: 100% !important;
    }
    .student-assignment {
        padding: 10px !important;
        margin: 6px 0 !important;
        border-radius: 10px !important;
    }
    .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .metric-card {
        padding: 12px !important;
        margin: 0 !important;
    }
    .project-card, .task-card, .assignment-card {
        padding: 14px !important;
        margin: 10px 0 !important;
        border-radius: 14px !important;
    }
    .project-grid, .project-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .progress-matrix, .matrix-table {
        font-size: 11px !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .progress-matrix td, .matrix-table td {
        padding: 4px 3px !important;
        min-width: 36px !important;
        font-size: 11px !important;
    }
    .sidebar, .side-panel { display: none !important; }
    .two-column, .flex-row, .row, .dashboard-flex {
        flex-direction: column !important;
    }
    .two-column > *, .flex-row > * { width: 100% !important; }
    .distribute-modal, .assign-modal {
        width: 95% !important;
        max-width: 95% !important;
    }
    .heatmap { overflow-x: auto; width: 100% !important; }
}

/* ========== 学生端 ========== */
@media (max-width: 768px) {
    .schedule-item, .task-item, .slot-card, .position-card, .diary-card {
        padding: 12px !important;
        margin: 8px 0 !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    .schedule-list, .task-list, .position-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* 4列grid → 2列 */
    [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 2列grid → 1列（当宽度不够时） */
    [style*="grid-template-columns: 1fr 1fr"]:not([style*="auto"]) {
        grid-template-columns: 1fr !important;
    }
    .chat-window, .consult-window, .chat-box {
        height: 55vh !important;
        max-height: 400px !important;
    }
    .skill-tree, .growth-tree {
        transform: scale(0.6) !important;
        transform-origin: top left;
        overflow-x: auto;
        overflow-y: hidden;
    }
    /* AI 职业顾问聊天区 */
    .consult-chat-area {
        height: 60vh !important;
        max-height: 450px !important;
        border-radius: 12px !important;
    }
    .consult-messages {
        padding: 10px !important;
    }
    .consult-message {
        max-width: 95% !important;
        margin: 6px 0 !important;
    }
    .consult-message .consult-bubble {
        padding: 10px 14px !important;
    }
    .consult-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .consult-pill, .consult-quick-ask button {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    .consult-title { font-size: 16px !important; }
    .consult-subtitle { font-size: 13px !important; }
    .star-card, .award-card {
        width: 100% !important;
        margin: 6px 0 !important;
    }
    .tab-content { width: 100% !important; padding: 10px !important; }
    /* 底部安全区 */
    .content { padding-bottom: calc(12px + env(safe-area-inset-bottom, 12px)) !important; }
}

/* ========== 教师-家长沟通 ========== */
@media (max-width: 768px) {
    .message-item, .message-thread, .msg-item {
        flex-direction: column !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .message-item .sender, .message-item .content {
        width: 100% !important;
    }
    .message-input-area {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .message-input-area textarea {
        width: 100% !important;
        min-height: 80px !important;
    }
    .message-input-area button {
        width: 100% !important;
    }
}

/* ========== 家长端 ========== */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .card {
        padding: 14px !important;
        margin: 8px 0 !important;
    }
    .message-item, .msg-bubble, .msg-thread {
        padding: 10px !important;
        font-size: 14px !important;
    }
    .help-header, .msg-header {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .msg-content { width: 100% !important; }
    .header-left { width: 100% !important; }
}

/* ========== 企业端 ========== */
@media (max-width: 768px) {
    .form-row, .form-row.full {
        flex-direction: column !important;
        width: 100% !important;
    }
    .form-row label, .form-row input, .form-row select, .form-row textarea {
        width: 100% !important;
    }
    .scenario-card {
        padding: 12px !important;
        margin: 8px 0 !important;
    }
    .navbar { flex-wrap: wrap !important; }
}

/* ========== 管理员端 ========== */
@media (max-width: 768px) {
    .stats-row, .admin-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .stat-card { padding: 12px !important; margin: 4px !important; }
    .panel { padding: 12px !important; margin: 8px 0 !important; width: 100% !important; }
    .user-list, .enterprise-list { font-size: 13px !important; }
    .btn-row { flex-wrap: wrap; gap: 6px !important; }
    .btn-row button, .btn-row .btn { flex: 1; font-size: 13px !important; padding: 10px !important; }
    .tab-content { width: 100% !important; padding: 10px !important; }
}

/* ========== 桌面宠物 ========== */
@media (max-width: 768px) {
    .desktop-pet, #funPet, .fun-pet, [id*="pet"], [class*="pet"] {
        display: none !important;
    }
}

/* ========== 撒花/粒子动画 ========== */
@media (max-width: 768px) {
    .confetti, .celebration, .firework { transform: scale(0.5) !important; }
    canvas#particleCanvas, canvas.bg-canvas { opacity: 0.2 !important; }
}

/* ========== 加载/错误/空状态 ========== */
@media (max-width: 768px) {
    .loading, .spinner {
        font-size: 14px !important;
        padding: 20px !important;
    }
    .error-message, .success-message {
        font-size: 14px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        margin: 8px 0 !important;
    }
    .empty-tip {
        font-size: 14px !important;
        padding: 30px 20px !important;
    }
    .msg-toast {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
    /* 星星/勋章卡片 */
    .star-card, .award-card {
        width: 100% !important;
        margin: 8px 0 !important;
    }
    /* 角色/岗位徽章 */
    .badge, .position-badge, .role-badge {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
}
/* ========== 学生端补充 ========== */
@media (max-width: 768px) {
    [style*="height: 600px"] { height: auto !important; min-height: 400px !important; }
    [style*="max-width: 900px"] { max-width: 100% !important; }
    [style*="white-space: nowrap"] { white-space: normal !important; }
}

/* ========== 家长端补充 ========== */
@media (max-width: 768px) {
    [style*="width: 120px"] { width: 100% !important; max-width: 120px !important; }
    [style*="min-width: 150px"] { min-width: 80px !important; }
}

/* ========== 管理员补充 ========== */
@media (max-width: 768px) {
    .stats-row .stat-card { min-width: 0 !important; }
}

/* ========== 滚动修复 ========== */
@media (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }
    a, button, .clickable { cursor: pointer; }
    /* 修复 iOS 滚动卡顿 */
    .tab-content, .content { -webkit-overflow-scrolling: touch; }
}