:root {
  --mobile-nav-height: 68px;
}

@media (max-width: 1023px) {
  .mobile-bottom-nav,
  .mobile-nav-tab,
  .mobile-more-item,
  .mobile-more-close {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-bottom-nav * {
    pointer-events: auto;
  }

  body.mobile-more-open {
    overflow: hidden;
  }

  .main-content {
    padding: 14px 12px calc(var(--mobile-nav-height) + 20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Mobile bottom navigation: social-app style */
  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11000;
    height: auto;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-surface) 92%, #000 8%);
    box-shadow: 0 -8px 26px rgba(2, 6, 23, 0.18);
    backdrop-filter: blur(14px);
  }

  .mobile-nav-tab {
    position: relative;
    min-height: 56px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, color 0.2s ease, background 0.2s ease;
  }

  .mobile-nav-tab .material-icons {
    font-size: 22px;
  }

  .mobile-nav-tab.active {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-subtle) 78%, transparent);
  }

  .mobile-nav-tab.active::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent-color);
    transform: translateX(-50%);
  }

  .mobile-nav-tab:active {
    transform: scale(0.96);
  }

  /* More sheet visibility and behavior */
  .mobile-more-backdrop,
  .mobile-more-sheet {
    display: block !important;
  }

  .mobile-more-backdrop {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-more-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-more-sheet {
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 96%, #000 4%);
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    z-index: 11020;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -20px 40px rgba(2, 6, 23, 0.24);
  }

  .mobile-more-sheet::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    margin: 0 auto 10px;
    background: color-mix(in srgb, var(--text-tertiary) 60%, transparent);
  }

  .mobile-more-sheet.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-more-item {
    min-height: 66px;
    border-radius: 11px;
    font-size: 11px;
    padding: 8px 6px;
  }

  .mobile-more-item .material-icons {
    font-size: 18px;
  }

  /* Continue unfinished responsive work: secondary views */
  #settings-view .tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #settings-view .tab-button {
    width: 100%;
    justify-content: center;
  }

  #billing-view .billing-form-grid,
  #affiliation-view .billing-form-grid,
  #affiliation-view .affiliate-kpi-grid,
  #integrations-view .integrations-row-1,
  #integrations-view .integrations-layout,
  #integrations-view .saved-forms-grid,
  #senders-view .senders-grid,
  #senders-view .senders-analytics-grid,
  #mail-automation-view .fb-automations-grid,
  #mail-automation-view .fb-pipeline-cards {
    grid-template-columns: 1fr !important;
  }

  #integrations-view .saved-forms-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #integrations-view .saved-forms-toolbar-left,
  #integrations-view .saved-forms-toolbar-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #integrations-view .wizard-container,
  #integrations-view .saved-forms-section,
  #email-cleaner-view .cleaner-card,
  #email-cleaner-view .cleaner-pane,
  #email-cleaner-view .cleaner-stat,
  #mail-automation-view .fb-card,
  #mail-automation-view .fb-automation-card,
  #automations-view .automation-card-premium,
  #billing-view .billing-card,
  #affiliation-view .affiliate-card,
  #senders-view .sender-card,
  #senders-view .performance-card {
    border-radius: 12px !important;
  }

  /* Compact card sizing to fix "cards too big on mobile" */
  #campaigns-view .cmp-card {
    padding: 10px !important;
  }

  #dashboard-view .card,
  #dashboard-view .mini-panel,
  #statistics-view .stat-card-modern,
  #statistics-view .followup-stat-card,
  #team-view .performance-card,
  #senders-view .performance-card,
  #senders-view .sender-card,
  #billing-view .billing-plan-tile,
  #affiliation-view .affiliate-kpi,
  #automations-view .automation-card-premium,
  #mail-automation-view .fb-card,
  #mail-automation-view .fb-automation-card,
  #integrations-view .saved-form-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  #email-cleaner-view .cleaner-grid,
  #email-cleaner-view .cleaner-split,
  #email-cleaner-view .cleaner-header {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 10px !important;
  }

  #email-cleaner-view .cleaner-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #email-cleaner-view .cleaner-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  #email-cleaner-view .cleaner-header-actions .btn {
    flex: 1;
    justify-content: center;
  }

  #campaigns-view .cmp-card-name,
  #campaigns-view .cmp-stat-label,
  #statistics-view .stat-label-modern,
  #statistics-view .followup-stat-label,
  #team-view .card-footer,
  #senders-view .performance-card-label {
    font-size: 11px !important;
  }

  #campaigns-view .cmp-stat-val,
  #statistics-view .stat-value-modern,
  #statistics-view .followup-stat-value,
  #team-view .card-value,
  #senders-view .performance-card-value {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.1 !important;
  }

  #statistics-view .stat-card-modern,
  #statistics-view .followup-stat-card,
  #team-view .performance-card,
  #senders-view .performance-card,
  #dashboard-view .mini-panel {
    padding: 10px !important;
  }

  #senders-view .senders-container {
    padding: 12px !important;
  }

  #senders-view #senders-grid {
    gap: 10px !important;
  }
}

@media (max-width: 860px) {
  .contacts-table-modern tr,
  .premium-table tbody tr,
  .campaigns-table-content tbody tr {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .contacts-table-modern td,
  .premium-table td,
  .campaigns-table-content td {
    padding: 6px 0 !important;
    gap: 8px;
    font-size: 12px;
  }

  .contacts-table-modern td::before,
  .premium-table td::before,
  .campaigns-table-content td::before {
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  .mobile-nav-tab {
    min-height: 52px;
    font-size: 9px;
  }

  .mobile-nav-tab .material-icons {
    font-size: 20px;
  }

  .mobile-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settings-view .tabs-nav {
    grid-template-columns: 1fr;
  }

  #campaigns-view .cmp-card-top,
  #campaigns-view .cmp-card-content,
  #campaigns-view .cmp-card-stats {
    gap: 6px !important;
  }

  #dashboard-view .card,
  #statistics-view .stat-card-modern,
  #statistics-view .followup-stat-card,
  #team-view .performance-card,
  #senders-view .performance-card,
  #senders-view .sender-card,
  #billing-view .billing-plan-tile,
  #affiliation-view .affiliate-kpi,
  #automations-view .automation-card-premium,
  #mail-automation-view .fb-card,
  #mail-automation-view .fb-automation-card,
  #integrations-view .saved-form-card {
    padding: 8px !important;
  }

  #statistics-view .premium-section-header,
  #statistics-view .premium-section-actions,
  #campaigns-view .campaigns-toolbar,
  #team-view .view-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
}