/* ===== MOBILE FIXES FOR SPECIFIC PAGES ===== */

/* ===== HOME PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Update home page breakpoints */
  .home-quicknav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .home-quicknav button {
    padding: 12px 6px !important;
    font-size: 10px !important;
  }

  /* Improve metrics grid */
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .production-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Better spacing for small screens */
  #page-home .page-header {
    margin-bottom: 12px !important;
  }

  /* Improve dashboard cards */
  .dashboard-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Better chart container */
  .chart-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  .home-quicknav {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

/* ===== SALES PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Improve sales button layout */
  #sales-tab-overview > div:first-child {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #sales-tab-overview button {
    flex: none !important;
    min-width: auto !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  /* Better sales tabs */
  .sales-tabs {
    gap: 4px !important;
    margin-bottom: 12px !important;
  }

  .sales-tab {
    padding: 10px 14px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Improve chart area */
  .sales-chart-container {
    padding: 8px 0 !important;
    overflow-x: auto !important;
  }

  /* Better metrics cards */
  .sales-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .sales-metric-card {
    padding: 12px 8px !important;
    text-align: center !important;
  }

  /* Improve daily report modal on mobile */
  .daily-report-modal .modal-content {
    margin: 4px !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 480px) {
  .sales-metrics {
    grid-template-columns: 1fr !important;
  }

  .sales-tab {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}

/* ===== GENERAL TABLE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Make all tables responsive */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -8px !important;
    padding: 0 8px !important;
  }

  table {
    min-width: 600px !important;
    font-size: 12px !important;
  }

  table th,
  table td {
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }

  /* Better modal behavior on mobile */
  .modal-dialog {
    margin: 4px !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100vh - 8px) !important;
  }

  .modal-content {
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
  }

  /* Improve form layouts */
  .form-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

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

  /* Better button groups */
  .btn-group {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .btn-group .btn {
    width: 100% !important;
  }
}

/* ===== CHART IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  .chart-container {
    position: relative !important;
    height: 250px !important;
    overflow: hidden !important;
  }

  .chart-container canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Chart button controls */
  .chart-controls {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
  }

  .chart-btn {
    flex: 1 !important;
    min-width: 80px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}

/* ===== FIXES FOR OVERFLOW ISSUES ===== */
@media (max-width: 1023px) {
  /* Prevent any horizontal overflow */
  .page {
    overflow-x: hidden !important;
  }

  /* Better spacing for page content */
  .page-content {
    padding: 0 8px !important;
  }

  /* Fix card margins */
  .card,
  .settings-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Better list items */
  .list-item {
    padding: 12px 8px !important;
    margin-bottom: 6px !important;
  }

  /* Improve action buttons */
  .action-buttons {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .action-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===== SETTINGS PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Team settings mobile layout - wrap to multiple rows */
  .settings-team-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 16px 12px !important;
    align-items: flex-start !important;
  }

  /* First row: Avatar + Info (take full width) */
  .settings-team-row > div:first-of-type {
    flex-shrink: 0 !important;
    margin-right: 8px !important;
  }

  .settings-team-info {
    flex: 1 !important;
    min-width: 200px !important;
    margin-bottom: 8px !important;
  }

  /* Second row: Role badge and Telegram ID */
  .settings-team-row > span {
    font-size: 12px !important;
    padding: 4px 8px !important;
    margin-right: 8px !important;
  }

  .settings-team-tg {
    font-size: 12px !important;
    margin-right: auto !important;
  }

  /* Third row: Action buttons (full width on new line) */
  .settings-team-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    margin-top: 8px !important;
    order: 10 !important;
  }

  .settings-team-actions button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Make role button wider for better touch */
  .settings-team-actions button[data-role-modal] {
    min-width: 70px !important;
    padding: 10px 14px !important;
  }

  /* Improve typography for mobile */
  .settings-team-info > div:first-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }

  .settings-team-info > div:last-child {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
  }

  /* Distribution cards mobile layout */
  .sp-dist-card {
    margin-bottom: 16px !important;
    padding: 12px !important;
  }

  .sp-dist-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .sp-dist-card > div:first-child > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    font-size: 11px !important;
  }

  .sp-dist-card > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sp-dist-card label {
    margin-bottom: 8px !important;
  }

  .sp-dist-card input[type="range"] {
    width: 100% !important;
  }

  .sp-dist-card input[type="number"] {
    font-size: 16px !important;
    padding: 10px !important;
  }

  /* Settings card spacing */
  .settings-card {
    margin-bottom: 16px !important;
  }

  /* Settings header on mobile */
  .settings-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .settings-card > div:first-child button {
    align-self: flex-start !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - stack everything vertically */
  .settings-team-row {
    flex-direction: column !important;
  }

  .settings-team-row > div:first-of-type {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .settings-team-info {
    margin-bottom: 8px !important;
    min-width: auto !important;
  }

  .settings-team-actions {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .settings-team-actions button {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  .settings-team-actions button svg {
    flex-shrink: 0 !important;
  }

  /* Stack role and telegram ID */
  .settings-team-row > span,
  .settings-team-tg {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 4px !important;
  }

  /* Distribution stats on very small screens */
  .sp-dist-card > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* ===== TEXT AND TYPOGRAPHY ===== */
@media (max-width: 1023px) {
  /* Better text sizing for mobile */
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
  h5 { font-size: 14px !important; }

  /* Improve line height for readability */
  p, div, span {
    line-height: 1.4 !important;
  }

  /* Better link styling on mobile */
  a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}