/* ==========================================================
   SolarPro Design System - Responsive / Media Queries
   Mobile-first approach
   ========================================================== */

/* ── Tablet: max 1024px ── */
@media (max-width: 1024px) {
  /* Sidebar collapsed by default on tablet */
  .sidebar {
    width: 72px;
  }

  .sidebar .sidebar-logo-text,
  .sidebar .sidebar-nav-item-label,
  .sidebar .sidebar-nav-item-badge,
  .sidebar .sidebar-nav-section-title {
    display: none;
  }

  .app-layout {
    grid-template-columns: 72px 1fr;
  }

  /* 2-col forms become 1-col */
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

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

  .main-content {
    padding: 24px;
  }

  /* Topbar search shrink */
  .topbar-search {
    width: 240px;
  }

  /* KPI grid to 2 cols */
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile: max 768px ── */
@media (max-width: 768px) {
  /* Sidebar hidden, show via overlay toggle */
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    z-index: 200;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar .sidebar-logo-text,
  .sidebar .sidebar-nav-item-label,
  .sidebar .sidebar-nav-item-badge,
  .sidebar .sidebar-nav-section-title {
    display: block;
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* Mobile menu button visible */
  .mobile-menu-btn {
    display: flex;
  }

  /* Main content */
  .main-content {
    padding: 16px;
    max-width: 100%;
  }

  /* Topbar */
  .topbar {
    padding: 0 16px;
  }

  .topbar-search {
    width: 180px;
  }

  .topbar-search-shortcut {
    display: none;
  }

  .topbar-user-name,
  .topbar-user-role {
    display: none;
  }

  /* Page header stacks */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-header-actions {
    width: 100%;
  }

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

  /* Tables horizontal scroll */
  .table-container {
    border-radius: var(--radius-md);
  }

  .table-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Form cols stack */
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

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

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  /* Modal full-width on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 85vh;
  }

  .modal-lg,
  .modal-sm {
    max-width: 100%;
  }

  /* Cards reduce padding */
  .card {
    padding: 16px;
  }

  .kpi-card {
    padding: 16px;
  }

  /* KPI grid to 1 col */
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }

  /* Dashboard charts stack */
  .dashboard-charts {
    grid-template-columns: 1fr;
  }

  /* Pipeline horizontal scroll */
  .pipeline-board {
    padding-bottom: 16px;
  }

  .pipeline-column {
    min-width: 260px;
  }

  /* Tabs scroll */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Toasts full-width */
  .toast-container {
    left: 16px;
    right: 16px;
  }

  .toast {
    min-width: auto;
    max-width: none;
  }

  /* Breadcrumb smaller */
  .breadcrumb {
    font-size: 11px;
  }
}

/* ── Small Mobile: max 480px ── */
@media (max-width: 480px) {
  .topbar-search {
    display: none;
  }

  .main-content {
    padding: 12px;
  }

  .page-title {
    font-size: 18px;
  }

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

  .btn-lg {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ── Ultra-wide: min 1440px ── */
@media (min-width: 1440px) {
  .main-content {
    max-width: 1600px;
    padding: 40px 48px;
  }

  .dashboard-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-charts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Extra-wide: min 1920px ── */
@media (min-width: 1920px) {
  .main-content {
    max-width: 1800px;
  }
}

/* ── Visibility Helpers ── */
.hide-mobile {
  display: block;
}

.hide-tablet {
  display: block;
}

.show-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile-only {
    display: block !important;
  }
}

@media (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* ── Print ── */
@media print {
  .sidebar,
  .topbar,
  .mobile-menu-btn,
  .sidebar-overlay {
    display: none !important;
  }

  .app-layout {
    display: block;
  }

  .main-content {
    padding: 0;
    max-width: 100%;
  }

  body {
    background: #fff;
    color: #000;
  }
}