/**
 * 手机端极简黑白风格（参考 App Store Today：浅灰底、大圆角白卡片、柔和阴影）
 * 需在 mobile.css 之后加载；仅 max-width: 768px 生效
 */

/* 桌面端不参与布局：子元素仍直接排在 .content 下 */
.mobile-sheet {
  display: contents;
}

@media (max-width: 768px) {
  body {
    background: #f2f2f7 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body.admin-theme-minimal {
    background: #f2f2f7 !important;
  }

  .main-content {
    background: transparent !important;
  }

  /* —— 顶栏：菜单 + 品牌 + 退出 —— */
  .mobile-header {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 10px;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 10px 16px 14px !important;
  }

  .mobile-menu-btn {
    color: #000000 !important;
    flex-shrink: 0;
  }

  .mobile-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
  }

  .mobile-header-title {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #000000 !important;
    line-height: 1.08 !important;
  }

  /* 顶栏品牌区：与极简主题一致 */
  .mobile-header-brand {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-header-brand__mark {
    color: #000000 !important;
    background: transparent !important;
  }

  .mobile-header-brand__name {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-header-brand__logo {
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* 仅管理端等仍输出 .mobile-header-date 时生效；员工端已不渲染该元素 */
  .mobile-header-date {
    flex-shrink: 0;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #8e8e93 !important;
    padding-right: 2px;
  }

  .mobile-header-actions {
    flex-shrink: 0;
    padding-top: 0 !important;
  }

  .mobile-logout-btn {
    color: #000000 !important;
  }

  /* —— 侧栏抽屉 —— */
  .mobile-nav-overlay {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }

  .mobile-nav-content {
    background: #ffffff !important;
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 22px 22px 0 !important;
    overflow: hidden;
  }

  .mobile-nav-header {
    background: #ffffff !important;
    border-bottom: none !important;
    padding: 20px 16px !important;
  }

  .mobile-nav-user {
    color: #000000 !important;
    font-weight: 600 !important;
  }

  .mobile-nav-user i {
    color: #8e8e93 !important;
  }

  .mobile-nav-close {
    color: #8e8e93 !important;
  }

  .mobile-nav-item {
    color: #000000 !important;
    padding: 14px 20px !important;
  }

  .mobile-nav-item i {
    color: #636366 !important;
  }

  .mobile-nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #000000 !important;
    text-decoration: none !important;
  }

  .mobile-nav-item.active {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #000000 !important;
    font-weight: 600 !important;
  }

  .mobile-nav-item.active i {
    color: #000000 !important;
  }

  /* —— 主内容区 —— */
  .content {
    background: #f2f2f7 !important;
    padding: 6px 16px 92px !important;
  }

  /* 管理后台无底部 Tab，减少留白 */
  body.admin-theme-minimal .content {
    padding-bottom: 28px !important;
  }

  /* —— 合并容器：一页一块大白卡片，内部分区用分割线 —— */
  .mobile-sheet {
    display: block;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 16px;
  }

  .mobile-sheet > .card,
  .mobile-sheet > .dashboard-trend-card.card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
  }

  .mobile-sheet > .card:last-child,
  .mobile-sheet > .dashboard-trend-card.card:last-child {
    border-bottom: none !important;
  }

  .mobile-sheet .card-header {
    padding: 16px 16px 8px !important;
    border-radius: 0 !important;
  }

  .mobile-sheet .card-body {
    padding: 12px 16px 18px !important;
  }

  .mobile-sheet .mt-20 {
    margin-top: 0 !important;
  }

  /* 仪表盘：7 张 KPI 同一行，窄屏横向滑动 */
  .mobile-sheet--dashboard > .dashboard-stat-grid--kpi {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(92px, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    border-bottom: none !important;
  }

  .mobile-sheet--dashboard > .dashboard-stat-grid--kpi .card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: none !important;
    min-width: 0 !important;
  }

  .mobile-sheet--dashboard > .dashboard-stat-grid--kpi .card-body {
    padding: 12px 10px !important;
    overflow-x: visible !important;
  }

  .mobile-sheet--dashboard > .dashboard-trend-card .card-header {
    padding-top: 18px !important;
  }

  /* 首页三块统计合并 */
  .mobile-sheet--home-stats .row {
    display: block !important;
    margin: 0 !important;
  }

  .mobile-sheet--home-stats .row > div {
    padding: 0 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12);
  }

  .mobile-sheet--home-stats .row > div:last-child {
    border-bottom: none;
  }

  .mobile-sheet--home-stats .card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .mobile-sheet--home-stats .card-body {
    padding: 16px !important;
  }

  .mobile-sheet--home-stats .card-body [style*="font-size: 40px"] {
    font-size: 28px !important;
    color: #8e8e93 !important;
  }

  /* 个人页：三块合成一区 */
  .mobile-sheet.mobile-sheet--profile > .profile-user-card,
  .mobile-sheet.mobile-sheet--profile > .profile-stats-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
  }

  .mobile-sheet.mobile-sheet--profile > .profile-settings-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
  }

  /* 列表：行间分割，不再每张浮动卡片 */
  .mobile-sheet .mobile-expense-list .expense-card,
  .mobile-sheet .mobile-date-list .date-stat-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid rgba(60, 60, 67, 0.1) !important;
    margin-bottom: 0 !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mobile-sheet .mobile-expense-list .expense-card:first-child,
  .mobile-sheet .mobile-date-list .date-stat-card:first-child {
    border-top: none !important;
  }

  .mobile-sheet .filter-tabs {
    border: none !important;
    box-shadow: none !important;
    background: #f2f2f7 !important;
    margin-bottom: 12px !important;
  }

  .mobile-sheet .card,
  .content .mobile-sheet .card {
    box-shadow: none !important;
  }

  .card,
  .content .card {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    margin-bottom: 14px !important;
  }

  .card-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 18px 18px 0 !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .mobile-sheet .card-header {
    border-radius: 0 !important;
  }

  .card-body {
    padding: 16px 18px 18px !important;
  }

  .card-title {
    color: #000000 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  .dashboard-stat-kpi__label,
  .dashboard-stat-kpi__meta {
    color: #8e8e93 !important;
  }

  .dashboard-stat-kpi__value {
    color: #000000 !important;
  }

  .dashboard-stat-kpi__value--accent {
    color: #000000 !important;
  }

  .dashboard-stat-kpi__value--danger {
    color: #3a3a3c !important;
  }


  /* —— 按钮 —— */
  .btn-primary {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
  }

  .btn-primary:hover,
  .btn-primary:focus {
    background: #3a3a3c !important;
    border-color: #3a3a3c !important;
    color: #ffffff !important;
  }

  .btn-secondary,
  .btn-default {
    background: #e5e5ea !important;
    color: #000000 !important;
    border-color: transparent !important;
  }

  /* —— 底部 Tab —— */
  .mobile-bottom-nav {
    border-top: 0.5px solid rgba(60, 60, 67, 0.2) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
  }

  .nav-item {
    color: #8e8e93 !important;
  }

  .nav-item.active {
    color: #000000 !important;
    background: transparent !important;
    font-weight: 600 !important;
  }

  .fab {
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
  }

  .fab:hover {
    background: #3a3a3c !important;
    color: #ffffff !important;
  }

  /* —— 报表 / 筛选 —— */
  .report-header {
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
  }

  .report-header p {
    color: #8e8e93 !important;
    opacity: 1 !important;
  }

  .period-selector {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .period-tabs {
    background: #e5e5ea !important;
  }

  .period-tab {
    color: #636366 !important;
  }

  .period-tab.active {
    background: #000000 !important;
    color: #ffffff !important;
  }

  .period-tab:hover {
    color: #000000 !important;
    text-decoration: none !important;
  }

  .period-tab.active:hover {
    color: #ffffff !important;
  }

  .filter-tabs {
    border: none !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05) !important;
  }

  .filter-tab {
    color: #8e8e93 !important;
  }

  .filter-tab.active {
    background: #000000 !important;
    color: #ffffff !important;
  }

  .filter-tab:hover {
    color: #000000 !important;
    text-decoration: none !important;
  }

  .filter-tab.active:hover {
    color: #ffffff !important;
  }

  /* —— 统计与列表卡片 —— */
  .stats-card,
  .stats-overview .stats-card {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .stats-card .stats-number {
    color: #000000 !important;
  }

  .stats-card .stats-label {
    color: #8e8e93 !important;
  }

  .expense-card {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .expense-card-amount {
    color: #000000 !important;
  }

  .expense-card-title {
    color: #000000 !important;
  }

  .date-stat-card {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .date-stat-header {
    border-bottom-color: rgba(60, 60, 67, 0.1) !important;
  }

  .date-stat-value {
    color: #000000 !important;
  }

  .date-stat-label {
    color: #8e8e93 !important;
  }

  /* —— 个人页 —— */
  .profile-user-card,
  .profile-stats-card,
  .profile-settings-card,
  .password-form {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .profile-avatar {
    background: #e5e5ea !important;
  }

  .profile-avatar i {
    color: #636366 !important;
  }

  .profile-name {
    color: #000000 !important;
  }

  .profile-role {
    color: #8e8e93 !important;
  }

  .profile-stat-number {
    color: #000000 !important;
  }

  .profile-stat-label {
    color: #8e8e93 !important;
  }

  .profile-stats-card--triple {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .profile-stats-card--triple .profile-stat-item {
    min-width: 0 !important;
  }

  .profile-stats-card--triple .profile-stat-item:not(:last-child) {
    border-right: 1px solid rgba(60, 60, 67, 0.12) !important;
  }

  .profile-stats-card--triple .profile-stat-number {
    font-size: 16px !important;
  }

  .profile-stats-card--triple .profile-stat-label {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .profile-stats-card--triple .profile-stat-number.profile-stat-number--income {
    color: #1f7a3a !important;
  }

  .profile-stats-card--triple .profile-stat-number.profile-stat-number--expense {
    color: #c62828 !important;
  }

  .profile-stats-card--triple .profile-stat-number.profile-stat-number--balance {
    color: #000000 !important;
  }

  .profile-stats-card--triple .profile-stat-number.profile-stat-number--negative {
    color: #c62828 !important;
  }

  .profile-setting-item {
    border-bottom-color: rgba(60, 60, 67, 0.12) !important;
  }

  .profile-setting-item a i:first-child {
    color: #636366 !important;
  }

  .profile-setting-item a {
    color: #000000 !important;
  }

  .profile-setting-item a:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }

  /* —— 记账详情 —— */
  .expense-detail-section-title {
    color: #000000 !important;
  }

  .expense-detail-label i {
    color: #8e8e93 !important;
  }

  .expense-amount {
    color: #000000 !important;
  }

  .expense-attachment {
    background: #f2f2f7 !important;
    color: #000000 !important;
    border-radius: 12px !important;
  }

  .expense-attachment:hover {
    background: #e5e5ea !important;
    color: #000000 !important;
  }

  /* —— 状态徽标：灰阶 —— */
  .status-badge.pending {
    background: #f2f2f7 !important;
    color: #636366 !important;
    border: 1px solid #d1d1d6 !important;
  }

  .status-badge.approved {
    background: #e5e5ea !important;
    color: #000000 !important;
    border: 1px solid #c7c7cc !important;
  }

  .status-badge.rejected {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }

  /* —— 图表 / 表格容器 —— */
  .chart-container,
  .data-table {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .chart-container h3,
  .data-table h3 {
    border-bottom: none !important;
    color: #000000 !important;
  }

  .table th {
    background: #f2f2f7 !important;
    color: #000000 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
  }

  .table td {
    border-bottom-color: rgba(60, 60, 67, 0.08) !important;
  }

  /* —— 表单焦点 —— */
  .form-control:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
  }

  .password-form h3 {
    color: #000000 !important;
  }

  .password-form .btn-primary,
  .mobile-password-modal-body .btn-primary {
    background: #000000 !important;
    border: none !important;
    color: #ffffff !important;
  }

  .mobile-password-modal-header {
    background: #f2f2f7 !important;
    color: #000000 !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
  }

  .mobile-password-modal-header .close-btn {
    color: #000000 !important;
  }

  .mobile-password-modal-content {
    border-radius: 22px !important;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.18) !important;
  }

  /* —— 提示 —— */
  .alert-success {
    background: #f2f2f7 !important;
    color: #000000 !important;
    border: 1px solid #d1d1d6 !important;
    border-radius: 14px !important;
  }

  .alert-danger {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 14px !important;
  }

  .alert-info {
    background: #f2f2f7 !important;
    color: #000000 !important;
    border: 1px solid #c7c7cc !important;
    border-radius: 14px !important;
  }

  /* —— 模态框 —— */
  .modal-header {
    border-bottom-color: rgba(60, 60, 67, 0.12) !important;
  }

  .modal-footer {
    border-top-color: rgba(60, 60, 67, 0.12) !important;
  }

  .modal-content {
    border-radius: 22px !important;
  }

  /* —— 后台顶栏用户菜单（窄屏仍可能出现） —— */
  .header-user-dropdown a {
    color: #000000 !important;
  }
}

/* 登录页（未引入 mobile.css 时仅用本文件 + style.css） */
@media (max-width: 768px) {
  body:has(.login-container) {
    background: #f2f2f7 !important;
    align-items: flex-start !important;
    padding: 48px 16px 32px !important;
    box-sizing: border-box !important;
  }

  body:has(.login-container) .login-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #000000 !important;
  }

  body:has(.login-container) .login-subtitle {
    color: #8e8e93 !important;
    font-size: 15px !important;
  }

  body:has(.login-container) .login-form {
    border-radius: 22px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08) !important;
    padding: 28px 22px !important;
  }

  body:has(.login-container) .btn-primary {
    background: #000000 !important;
    border-color: #000000 !important;
    border-radius: 14px !important;
  }

  body:has(.login-container) .login-footer,
  body:has(.login-container) .login-footer a {
    color: #636366 !important;
  }

  body:has(.login-container) .login-footer a {
    font-weight: 600 !important;
    color: #000000 !important;
  }
}