@charset "UTF-8";

/* ============================================
   手机版本样式表 - 工作日志记录平台
   针对 768px 以下屏幕优化
   ============================================ */

/* 基础手机适配 */
@media (max-width: 768px) {
  /* 页面基础 */
  body {
    font-size: 14px;
  }

  /* 头部优化 */
  .header {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-title {
    width: 100%;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .header-title h1 {
    font-size: 20px;
    font-weight: 600;
  }

  .header-logo {
    width: 48px;
    height: 48px;
  }

  /* 头部操作按钮区域 */
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .header-btn {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
  }

  .header-btn svg {
    width: 14px;
    height: 14px;
  }

  /* 用户头像区域 - 与其他按钮保持一致 */
  .header-user-profile {
    order: -1;
    margin-right: 0 !important;
    margin-bottom: 8px;
    padding: 6px 10px !important;
    font-size: 12px;
    gap: 4px !important;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    height: auto;
    min-height: 32px;
  }

  .header-user-profile img {
    width: 14px !important;
    height: 14px !important;
  }

  .header-user-profile span {
    font-size: 12px !important;
  }

  /* 主题切换按钮 - 与其他按钮保持一致 */
  .theme-toggle {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    height: auto;
    min-height: 32px;
  }

  .theme-toggle .icon {
    width: 14px;
    height: 14px;
  }

  .theme-toggle .text {
    font-size: 12px;
  }

  /* 主布局 */
  .main-layout {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }

  /* 左侧边栏 */
  .left-sidebar {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  /* 完成度卡片 */
  .completion-box {
    padding: 16px;
  }

  .completion-header {
    margin-bottom: 12px;
  }

  .completion-label {
    font-size: 14px;
  }

  .completion-subtitle {
    font-size: 12px;
  }

  .completion-content .large {
    font-size: 36px;
  }

  /* 任务创建模块 */
  .task-create-module {
    padding: 16px;
  }

  .task-create-module h3 {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-group label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .task-input,
  .task-textarea,
  .task-select,
  .task-date-input {
    padding: 10px 12px;
    font-size: 14px;
  }

  .task-textarea {
    min-height: 80px;
  }

  .task-submit-btn {
    padding: 12px;
    font-size: 14px;
  }

  /* 日历区域 */
  .calendar-section {
    padding: 16px;
  }

  /* 日期选择器 */
  .date-selector-header {
    margin-bottom: 16px;
  }

  .date-selector-row {
    flex-direction: column;
    gap: 12px;
  }

  .year-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
  }

  .month-selector-horizontal {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: space-between;
  }

  .month-btn {
    padding: 6px 4px;
    font-size: 12px;
    flex: 1;
    min-width: 45px;
    max-width: calc(25% - 3px);
  }

  /* 日历网格 */
  .schedule-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .weekday-header {
    font-size: 11px;
    padding: 6px 2px;
    text-align: center;
    font-weight: 500;
    color: var(--text-secondary);
  }

  .day-cell {
    min-height: 50px;
    padding: 4px 2px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .day-number {
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 500;
  }

  .day-tasks {
    gap: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .task-dot {
    width: 4px;
    height: 4px;
  }

  /* 手机端隐藏头像列表 */
  .avatar-list {
    display: none !important;
  }

  .completer-avatar {
    display: none !important;
  }

  .day-completers {
    display: none !important;
  }

  /* 任务数量样式优化 */
  .task-count {
    font-size: 10px;
    color: var(--accent-primary);
    background: var(--accent-secondary);
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 2px;
    white-space: nowrap;
    font-weight: 500;
  }

  .task-count.rest-day {
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    padding: 2px 4px;
  }

  /* 任务模态框 */
  .task-modal-overlay {
    padding: 16px;
    align-items: flex-end;
  }

  .task-modal {
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes modalSlideUp {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .task-modal-header {
    padding: 16px;
  }

  .task-modal-title {
    font-size: 16px;
  }

  .task-modal-body {
    padding: 16px;
    max-height: calc(85vh - 120px);
  }

  .task-modal-footer {
    padding: 12px 16px;
  }

  /* 登录模态框 */
  .login-modal-overlay {
    padding: 16px;
    align-items: flex-end;
  }

  .login-modal {
    width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 20px;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .login-modal-header {
    margin-bottom: 20px;
  }

  .login-modal-header h3 {
    font-size: 18px;
  }

  .login-form-group {
    gap: 6px;
  }

  .login-form-group label {
    font-size: 13px;
  }

  .login-input {
    padding: 12px 14px;
    font-size: 16px; /* 防止 iOS 缩放 */
  }

  .login-submit-btn {
    padding: 14px;
    font-size: 15px;
    margin-top: 12px;
  }

  /* 提醒模态框 */
  .reminder-modal-overlay {
    padding: 16px;
    align-items: flex-end;
  }

  .reminder-modal {
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .reminder-modal-header {
    padding: 16px 20px;
  }

  .reminder-modal-body {
    padding: 20px;
  }

  .reminder-modal-footer {
    padding: 12px 20px;
  }

  /* 确认对话框 */
  .confirm-dialog-overlay {
    padding: 16px;
    align-items: flex-end;
  }

  .confirm-dialog {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Toast 提示 */
  .toast-container {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 80px;
    transform: none;
  }

  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
    padding: 12px 16px;
  }

  /* 导出下拉菜单 */
  .export-dropdown {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 80px;
    width: auto;
    border-radius: var(--radius-lg);
  }

  .export-months {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 卡片样式调整 */
  .card {
    border-radius: var(--radius-md);
  }

  /* 底部安全区域（适配 iPhone X+） */
  .task-modal,
  .login-modal,
  .reminder-modal,
  .confirm-dialog {
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
}

/* 超小屏幕适配（iPhone SE 等） */
@media (max-width: 375px) {
  .header-actions {
    gap: 6px;
  }

  .header-btn {
    padding: 5px 8px;
    font-size: 11px;
  }

  .month-btn {
    padding: 6px 8px;
    font-size: 12px;
    min-width: 50px;
  }

  .day-cell {
    min-height: 50px;
  }

  .completion-content .large {
    font-size: 32px;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .task-modal-overlay,
  .login-modal-overlay,
  .reminder-modal-overlay {
    align-items: center;
    padding: 20px;
  }

  .task-modal,
  .login-modal,
  .reminder-modal {
    max-height: 90vh;
    border-radius: var(--radius-lg);
    animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes modalPopIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .header-btn:active,
  .month-btn:active,
  .task-submit-btn:active,
  .login-submit-btn:active {
    opacity: 0.7;
    transform: scale(0.98);
  }

  .day-cell:active {
    background: var(--accent-secondary);
  }
}

/* 暗黑模式适配 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  /* 手机端暗黑模式额外优化 */
  .header {
    background: rgba(28, 28, 30, 0.95);
  }
}