/* ============================================
   Responsive - 响应式适配样式
   断点：768px（移动端/桌面端分界）
   ============================================ */

/* 桌面端默认样式（>=768px） */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* 移动端样式（<768px） */
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block;
  }

  .main-content {
    padding: var(--spacing-mobile) 0;
  }

  .header {
    padding: 0 var(--spacing-mobile);
  }

  .stats-panel {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-component);
    margin-bottom: var(--spacing-card-gap);
  }

  .stat-card-value {
    font-size: 22px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar .select-wrapper {
    min-width: 100%;
  }

  .filter-bar .search-input-wrapper {
    min-width: 100%;
  }

  .filter-bar .filter-actions {
    margin-left: 0;
    width: 100%;
  }

  .filter-bar .filter-actions .btn {
    flex: 1;
  }

  .kanban-container {
    flex-direction: column;
    overflow-x: hidden;
  }

  .kanban-column {
    min-width: 100%;
    max-width: 100%;
  }

  .project-form .form-row {
    grid-template-columns: 1fr;
  }

  .project-form .form-row-3 {
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    align-items: flex-end;
  }

  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }

  .modal-header {
    padding: var(--spacing-mobile);
  }

  .modal-body {
    padding: var(--spacing-mobile);
  }

  .modal-footer {
    padding: var(--spacing-mobile);
  }

  .login-card {
    padding: 32px 24px;
    box-shadow: none;
    background: transparent;
  }

  .login-page {
    background: var(--color-bg-card);
  }

  .dimension-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .dimension-tab {
    white-space: nowrap;
  }

  .new-customer-fields {
    grid-template-columns: 1fr;
  }

  .customer-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-tight);
  }

  .employee-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component);
  }

  .employee-card-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-component);
    margin-bottom: var(--spacing-card-gap);
    padding-left: var(--spacing-mobile);
    padding-right: var(--spacing-mobile);
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1;
  }

  .search-bar {
    padding-left: var(--spacing-mobile);
    padding-right: var(--spacing-mobile);
  }

  .filter-bar {
    padding-left: var(--spacing-mobile);
    padding-right: var(--spacing-mobile);
  }

  .role-filter {
    padding-left: var(--spacing-mobile);
    padding-right: var(--spacing-mobile);
  }

  .dimension-tabs {
    padding-left: var(--spacing-mobile);
    padding-right: var(--spacing-mobile);
  }

  .data-stats-grid {
    gap: var(--spacing-component);
  }

  .confirm-dialog {
    margin: var(--spacing-mobile);
  }

  .customer-card-actions {
    margin-top: var(--spacing-tight);
  }
}

/* 平板端适配（768px - 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  .kanban-column {
    min-width: 240px;
    max-width: 240px;
  }

  .stats-panel {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-component);
  }

  .filter-bar {
    gap: var(--spacing-tight);
  }

  .filter-bar .select-wrapper {
    min-width: 110px;
  }
}

/* 中等 PC 屏幕适配（1025px - 1439px） */
@media (min-width: 1025px) and (max-width: 1439px) {
  .main-content {
    padding: var(--spacing-page) 40px;
  }

  .header {
    padding: 0 40px;
  }
}

/* 大屏适配（>=1440px） */
@media (min-width: 1440px) {
  .main-content {
    padding: var(--spacing-page) 48px;
  }

  .header {
    padding: 0 48px;
  }

  .kanban-column {
    min-width: 300px;
    max-width: 300px;
  }
}

/* PC 端卡片 Grid 布局（768px 以上） */
@media (min-width: 768px) {
  .customer-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-card-gap);
  }

  .employee-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-component);
  }
}

/* 宽屏 Grid 三列（1200px 以上） */
@media (min-width: 1200px) {
  .customer-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .employee-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 暗色模式支持（可选） */
@media (prefers-color-scheme: dark) {
  /* 暂不支持暗色模式，保持亮色 */
}