/* 响应式设计样式 */

/* 超小屏幕 (手机, 小于576px) */
@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .main-content {
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  .sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
  }

  .sidebar .nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.5rem;
  }

  .sidebar .nav-link {
    min-width: 80px;
    text-align: center;
    margin-bottom: 0;
  }

  .stats-cards {
    grid-template-columns: 1fr !important;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  }

  .payment-methods {
    grid-template-columns: 1fr !important;
  }

  .search-filters {
    flex-direction: column !important;
  }

  .filter-item {
    min-width: 100% !important;
  }

  .sales-container {
    flex-direction: column !important;
    height: auto !important;
  }

  .sales-right-panel {
    width: 100% !important;
    max-height: none !important;
  }

  .purchase-form .row {
    flex-direction: column;
  }

  .purchase-form .col-md-6,
  .purchase-form .col-md-4,
  .purchase-form .col-md-3 {
    width: 100%;
    margin-bottom: 1rem;
  }

  .navbar-nav .dropdown-menu {
    position: absolute !important;
  }

  .table-responsive {
    font-size: 0.8rem;
  }

  .btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* 小屏幕 (平板, 576px及以上) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .sidebar .nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.5rem;
  }

  .sidebar .nav-link {
    min-width: 90px;
    text-align: center;
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .rankings-container {
    grid-template-columns: 1fr !important;
  }

  .trends-container {
    grid-template-columns: 1fr !important;
  }

  .payment-stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .supplier-stats {
    grid-template-columns: 1fr !important;
  }
}

/* 中等屏幕 (桌面, 768px及以上) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar {
    width: 200px !important;
  }

  .main-content {
    padding-left: 200px !important;
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }

  .payment-methods {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 大屏幕 (大桌面, 992px及以上) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sidebar {
    width: 220px !important;
  }

  .main-content {
    padding-left: 220px !important;
  }

  .stats-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .payment-stats-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .supplier-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 超大屏幕 (超大桌面, 1200px及以上) */
@media (min-width: 1200px) {
  .sidebar {
    width: 250px !important;
  }

  .main-content {
    padding-left: 250px !important;
  }

  .stats-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .payment-stats-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .supplier-stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 横屏手机 */
@media (orientation: landscape) and (max-height: 500px) {
  .login-container {
    min-height: 100vh;
    align-items: center;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .product-item {
    padding: 0.5rem !important;
  }

  .product-item .name {
    font-size: 0.75rem !important;
  }

  .product-item .price {
    font-size: 0.8rem !important;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 打印样式 */
@media print {
  .sidebar,
  .navbar,
  .btn,
  .form-control {
    display: none !important;
  }

  .main-content {
    padding-left: 0 !important;
    margin-top: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }

  table {
    page-break-inside: avoid;
  }
}