/**
 * ============================================
 * 家庭点菜系统 - 移动端专属样式
 * ============================================
 * 作用：针对手机屏幕（<768px）的响应式优化
 * 说明：PC端样式完全保持不变，仅优化移动端显示
 * ============================================
 */

/* ========== 手机端通用样式（屏幕宽度<768px）========== */
@media (max-width: 768px) {
    /* 页面边距优化 - 统一10px */
    .main-content {
        padding: 10px !important;
        overflow-x: hidden !important;
    }
    
    /* 禁止横向滚动 */
    body, .app-container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* ========== 1. 顶部导航栏优化 - 折叠汉堡菜单 ========== */
    .navbar {
        position: relative !important;
    }
    
    .navbar-content {
        padding: 8px 10px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: center !important;
        height: auto !important;
        min-height: 44px !important;
    }
    
    /* Logo保持 */
    .logo {
        font-size: 20px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* 汉堡菜单按钮 */
    .navbar-content::before {
        content: "☰";
        font-size: 20px;
        cursor: pointer;
        padding: 8px;
        margin-right: 10px;
        order: -1;
    }
    
    /* 导航菜单 - 默认隐藏，点击展开 */
    .nav-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        flex-direction: column !important;
        padding: 10px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        z-index: 1000 !important;
        gap: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }
    
    /* 导航菜单展开状态 */
    .navbar:hover .nav-menu,
    .navbar:focus-within .nav-menu {
        display: flex !important;
    }
    
    /* 导航项样式 */
    .nav-item {
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
        text-align: left !important;
        border-radius: 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .nav-item:last-child {
        border-bottom: none !important;
    }
    
    /* 用户菜单 - 右侧紧凑显示 */
    .user-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .user-info {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .user-role {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
    
    .user-menu .btn-sm {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    
    /* ========== 2. 今日推荐区域优化 ========== */
    /* 卡片标题区域 */
    .card-header {
        padding: 12px !important;
    }
    
    .card-header h3.card-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    /* 日期换行显示 */
    .card-header span[style*="color: #666"] {
        font-size: 12px !important;
        display: block !important;
        margin-top: 4px !important;
    }
    
    /* 重新生成按钮 */
    form button[name="generate_recommendation"] {
        padding: 10px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* 已选菜单按钮区域 - 一行三列 */
    .card-body div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .card-body div[style*="display: flex; justify-content: space-between"] h4 {
        font-size: 13px !important;
    }
    
    /* 三个按钮一行排列 */
    .card-body div[style*="display: flex; gap: 8px"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .card-body div[style*="display: flex; gap: 8px"] .btn-sm {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
        min-height: 44px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
    }
    
    /* 已选菜单菜品卡片 */
    .menu-dishes {
        padding: 10px !important;
    }
    
    .menu-dish-item {
        padding: 8px 10px !important;
        border-radius: 6px !important;
        margin-bottom: 6px !important;
    }
    
    .menu-dish-name {
        font-size: 16px !important;
    }
    
    .menu-dish-type {
        font-size: 12px !important;
    }
    
    /* 推荐方案按钮 */
    .menu-set-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .menu-set-title {
        font-size: 13px !important;
    }
    
    /* ========== 3. 热门菜品区域优化 ========== */
    /* 热门菜品标题 */
    .card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .card-header .card-title {
        font-size: 14px !important;
    }
    
    .card-header .btn-sm {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }
    
    /* 菜品网格 - 单列显示 */
    .dish-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 菜品卡片 */
    .dish-card {
        border-radius: 8px !important;
    }
    
    /* 菜品图片高度降低 */
    .dish-image {
        height: 120px !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    /* 图片上的标题栏 */
    .dish-image div[style*="position: absolute; bottom: 0"] {
        padding: 30px 10px 8px !important;
    }
    
    .dish-image h4 {
        font-size: 14px !important;
    }
    
    .dish-image .dish-tag {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    
    /* 菜品内容区域 */
    .dish-content {
        padding: 10px !important;
    }
    
    .dish-content .btn-sm {
        min-height: 44px !important;
        font-size: 13px !important;
    }
    
    /* 最新评价 */
    .latest-review {
        font-size: 13px !important;
    }
    
    .latest-review-user {
        font-size: 12px !important;
    }
    
    .latest-review-content {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* ========== 4. 通用移动端规则 ========== */
    /* 卡片通用样式 */
    .card {
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .card-body {
        padding: 12px !important;
    }
    
    /* 按钮最小触控高度 */
    .btn, button, a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* 输入框 */
    .form-control {
        min-height: 44px !important;
        font-size: 14px !important;
    }
    
    /* 空状态 */
    .empty-state {
        padding: 30px !important;
    }
    
    .empty-state-icon {
        font-size: 36px !important;
    }
    
    .empty-state-text {
        font-size: 14px !important;
    }
}

/* ========== 小屏幕手机额外优化（<480px）========== */
@media (max-width: 480px) {
    /* 导航栏进一步压缩 */
    .logo {
        font-size: 18px !important;
    }
    
    .user-info {
        font-size: 11px !important;
    }
    
    /* 今日推荐按钮更小 */
    .card-body div[style*="display: flex; gap: 8px"] .btn-sm {
        font-size: 11px !important;
        padding: 6px 2px !important;
    }
    
    /* 菜品图片更小 */
    .dish-image {
        height: 100px !important;
    }
}

/* ========== 表格在手机端的适配 ========== */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .data-table {
        font-size: 13px !important;
        min-width: 600px !important;
    }
    
    .data-table th,
    .data-table td {
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }
    
    .data-table th {
        font-size: 12px !important;
    }
    
    .table-actions {
        display: flex !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
    }
    
    .table-actions .btn-sm {
        padding: 4px 8px !important;
        font-size: 11px !important;
        width: auto !important;
        min-width: 50px !important;
    }
    
    /* ========== 采购者信息强制不显示删除线 ========== */
    .purchaser-info-inline,
    span.purchaser-info-inline,
    .ingredient-info .purchaser-info-inline,
    .ingredient-info span.purchaser-info-inline {
        text-decoration: none !important;
        text-decoration-line: none !important;
        -webkit-text-decoration: none !important;
        -webkit-text-decoration-line: none !important;
        opacity: 1 !important;
    }
    
    /* ========== 底部固定导航栏 ========== */
    .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        padding: 8px 0 !important;
    }
    
    .bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        text-decoration: none !important;
        color: #666 !important;
        padding: 8px 0 !important;
        min-height: 44px !important;
    }
    
    .bottom-nav-item.active {
        color: #4CAF50 !important;
    }
    
    .bottom-nav-icon {
        font-size: 20px !important;
        line-height: 1 !important;
    }
    
    .bottom-nav-text {
        font-size: 11px !important;
        margin-top: 2px !important;
    }
    
    /* 隐藏顶部导航栏的菜单项（移动端） */
    .nav-menu {
        display: none !important;
    }
    
    /* 隐藏顶部导航栏的汉堡菜单按钮（移动端） */
    .navbar-content::before {
        display: none !important;
    }
    
    /* 禁止悬停显示菜单（移动端） */
    .navbar:hover .nav-menu,
    .navbar:focus-within .nav-menu {
        display: none !important;
    }
    
    /* 保留顶部导航栏的Logo和用户信息 */
    .navbar-content {
        justify-content: space-between !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 15px !important;
    }
    
    /* 移动端隐藏用户菜单文字 */
    .user-menu .user-info {
        display: none !important;
    }
    
    /* 移动端调整用户菜单 */
    .user-menu {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding-right: 0 !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    
    /* 移动端调整按钮 */
    .user-menu .btn-sm {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }
    
    /* 移动端隐藏退出按钮 */
    .user-menu .btn-secondary {
        display: none !important;
    }
    
    /* ========== 隐藏滚动条 ========== */
    /* 隐藏整个页面的滚动条 */
    body {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;  /* Firefox */
        overflow-y: auto !important;
    }
    
    body::-webkit-scrollbar {
        display: none !important;  /* Chrome, Safari and Opera */
    }
    
    /* 隐藏所有滚动容器的滚动条 */
    html,
    body,
    .app-container,
    .main-content,
    .shopping-list,
    .dish-grid,
    .stats-grid,
    .menu-tabs,
    .card-body,
    .filter-content,
    .table-container {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .app-container::-webkit-scrollbar,
    .main-content::-webkit-scrollbar,
    .shopping-list::-webkit-scrollbar,
    .dish-grid::-webkit-scrollbar,
    .stats-grid::-webkit-scrollbar,
    .menu-tabs::-webkit-scrollbar,
    .card-body::-webkit-scrollbar,
    .filter-content::-webkit-scrollbar,
    .table-container::-webkit-scrollbar {
        display: none !important;
    }
    
    /* ========== 首页今日推荐区域优化 ========== */
    /* 卡片标题区域 */
    .card-header {
        padding: 12px !important;
    }
    
    .card-header h3.card-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    /* 日期换行显示 */
    .card-header span[style*="color: #666"] {
        font-size: 12px !important;
        display: block !important;
        margin-top: 4px !important;
    }
    
    /* 重新生成按钮 */
    form button[name="generate_recommendation"] {
        padding: 10px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* 已选菜单按钮区域 */
    .card-body div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .card-body div[style*="display: flex; justify-content: space-between"] h4 {
        font-size: 13px !important;
    }
    
    /* 三个按钮一行排列 */
    .card-body div[style*="display: flex; gap: 8px"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .card-body div[style*="display: flex; gap: 8px"] .btn-sm {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
        min-height: 44px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
    }
    
    /* 已选菜单菜品卡片 */
    .menu-dishes {
        padding: 10px !important;
    }
    
    .menu-dish-item {
        padding: 8px 10px !important;
        border-radius: 6px !important;
        margin-bottom: 6px !important;
    }
    
    .menu-dish-name {
        font-size: 16px !important;
    }
    
    .menu-dish-type {
        font-size: 12px !important;
    }
    
    /* 推荐方案按钮 */
    .menu-set-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .menu-set-title {
        font-size: 13px !important;
    }
    
    /* ========== 首页热门菜品区域优化 ========== */
    /* 热门菜品标题 */
    .card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .card-header .card-title {
        font-size: 14px !important;
    }
    
    .card-header .btn-sm {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }
    
    /* 菜品网格 - 单列显示 */
    .dish-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 菜品卡片 */
    .dish-card {
        border-radius: 8px !important;
    }
    
    /* 菜品图片高度降低 */
    .dish-image {
        height: 120px !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    /* 图片上的标题栏 */
    .dish-image div[style*="position: absolute; bottom: 0"] {
        padding: 30px 10px 8px !important;
    }
    
    .dish-image h4 {
        font-size: 14px !important;
    }
    
    .dish-image .dish-tag {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    
    /* 菜品内容区域 */
    .dish-content {
        padding: 10px !important;
    }
    
    .dish-content .btn-sm {
        min-height: 44px !important;
        font-size: 13px !important;
    }
    
    /* 最新评价 */
    .latest-review {
        font-size: 13px !important;
    }
    
    .latest-review-user {
        font-size: 12px !important;
    }
    
    .latest-review-content {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* ========== 菜品列表页优化 ========== */
    /* 筛选栏 - 可折叠 */
    .filter-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .filter-group {
        width: 100% !important;
    }
    
    .filter-select,
    .filter-group input[type="text"] {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        min-height: 44px !important;
    }
    
    .filter-btn {
        width: 100% !important;
        padding: 10px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
    
    /* 菜品卡片 */
    .dish-card {
        position: relative !important;
        margin-bottom: 16px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    /* 停止供应状态标签 */
    .dish-status {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        color: white !important;
        font-size: 11px !important;
        font-weight: bold !important;
        z-index: 10 !important;
    }
    
    .dish-status.stop {
        background: #f5222d !important;
    }
    
    /* 菜品图片 */
    .dish-image {
        height: 120px !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    /* 图片上的标题栏 */
    .dish-image div[style*="position: absolute; bottom: 0"] {
        padding: 30px 10px 8px !important;
    }
    
    .dish-image h4 {
        font-size: 14px !important;
    }
    
    .dish-image .dish-tag {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    
    /* 菜品内容区域 */
    .dish-content {
        padding: 10px !important;
    }
    
    .dish-content .btn-sm {
        min-height: 44px !important;
        font-size: 13px !important;
        width: 100% !important;
    }
    
    /* 最新评价 */
    .latest-review {
        font-size: 13px !important;
    }
    
    .latest-review-user {
        font-size: 12px !important;
    }
    
    .latest-review-content {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* ========== 采购清单页优化 ========== */
    /* 统计概览区 - 横排4列布局 */
    .stats-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
        overflow-x: auto !important;
        padding-bottom: 5px !important;
    }
    
    .stat-item {
        flex: 1 !important;
        min-width: 80px !important;
        padding: 10px !important;
        border-radius: 6px !important;
        text-align: center !important;
        background: #f8f9fa !important;
    }
    
    .stat-number {
        font-size: 18px !important;
        font-weight: bold !important;
        margin-bottom: 2px !important;
    }
    
    .stat-number.green {
        color: #4CAF50 !important;
    }
    
    .stat-number.blue {
        color: #2196F3 !important;
    }
    
    .stat-number.orange {
        color: #ff9800 !important;
    }
    
    .stat-number.purple {
        color: #9c27b0 !important;
    }
    
    .stat-label {
        font-size: 11px !important;
        color: #666 !important;
        line-height: 1.2 !important;
    }
    
    /* 采购清单卡片 */
    .card-header h3.card-title {
        font-size: 14px !important;
    }
    
    .card-header span[style*="font-size: 13px"] {
        font-size: 12px !important;
    }
    
    /* 食材列表 */
    .shopping-list {
        padding: 10px !important;
    }
    
    .shopping-category {
        margin-bottom: 12px !important;
    }
    
    .shopping-category-title {
        font-size: 14px !important;
        padding-bottom: 8px !important;
    }
    
    /* 食材项 */
    .ingredient-item {
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    .ingredient-checkbox {
        width: 20px !important;
        height: 20px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .ingredient-info {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    
    .ingredient-name {
        font-size: 14px !important;
    }
    
    .ingredient-amount {
        font-size: 13px !important;
    }
    
    /* 采购者信息 */
    .purchaser-info-inline {
        font-size: 11px !important;
        margin-left: 8px !important;
        white-space: nowrap !important;
    }
    
    /* 编辑按钮 */
    .ingredient-item .btn-sm {
        margin-left: 10px !important;
        flex-shrink: 0 !important;
        min-height: 44px !important;
    }
    
    /* 空状态 */
    .empty-state {
        padding: 30px !important;
    }
    
    .empty-state-icon {
        font-size: 36px !important;
    }
    
    .empty-state-text {
        font-size: 14px !important;
    }
    
    .empty-state p {
        font-size: 12px !important;
    }
    
    .empty-state .btn-primary {
        min-height: 44px !important;
    }

    /* ========== 悬浮菜单移动端优化 ========== */
    .floating-menu {
        z-index: 9999 !important;
    }

    .floating-menu-item {
        z-index: 10000 !important;
    }

    /* 菜单项位置 - 移动端优化，确保悬浮按钮在菜品按钮正下方 */
    .floating-menu-item:nth-child(1) {
        bottom: 70px !important;
        right: -10px !important;
        transition-delay: 0s !important;
    }
    
    .floating-menu-item:nth-child(2) {
        bottom: 70px !important;
        right: 70px !important;
        transition-delay: 0.1s !important;
    }
    
    .floating-menu-item:nth-child(3) {
        bottom: 70px !important;
        right: 150px !important;
        transition-delay: 0.2s !important;
    }
    
    .floating-menu-item:nth-child(4) {
        bottom: 70px !important;
        right: 230px !important;
        transition-delay: 0.3s !important;
    }
    
    .floating-menu-item:nth-child(5) {
        bottom: 70px !important;
        right: 310px !important;
        transition-delay: 0.4s !important;
    }
}