/* STARNUS BILLING - Responsive Breakpoints */

/* Desktop Extra Large (>= 1440px) */
@media (min-width: 1440px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop & Laptop (1024px - 1439px) */
@media (max-width: 1200px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    --sidebar-width: 250px;
  }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
  }

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

  .sidebar-backdrop.show {
    display: block;
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .header-center {
    max-width: 280px;
    margin: 0 0.75rem;
  }

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

  .dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile Devices (<= 767px) */
@media (max-width: 767px) {
  .app-header {
    padding: 0 1rem;
  }

  .header-center {
    display: none; /* Can be opened via search button if needed */
  }

  .user-info-text {
    display: none;
  }

  .content-body {
    padding: 1rem;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-actions-group {
    width: 100%;
    justify-content: flex-start;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-toolbar-left,
  .table-toolbar-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .table-search {
    max-width: none;
    width: 100%;
  }

  .pagination-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .modal {
    max-height: 95vh;
    border-radius: var(--radius-lg);
  }

  .modal-body {
    padding: 1rem;
  }

  .app-footer {
    flex-direction: column;
    height: auto;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    text-align: center;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* Ultra Small Screens (<= 360px) */
@media (max-width: 360px) {
  .kpi-value {
    font-size: 1.35rem;
  }

  .btn {
    font-size: 0.78rem;
    padding: 0.4rem 0.65rem;
  }

  .brand-title {
    font-size: 0.9rem;
  }
}