/**
 * responsive.css
 * ------------------------------------------------------
 * Penyesuaian tampilan untuk berbagai ukuran layar.
 * Breakpoint:
 *   Desktop : > 1024px
 *   Tablet  : 769px - 1024px  (sidebar auto-collapsed)
 *   Mobile  : <= 768px        (sidebar menjadi drawer)
 * Diletakkan terakhir agar dapat menimpa (override)
 * style dari file CSS sebelumnya.
 * ------------------------------------------------------
 */

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .app-layout:not(.is-force-expanded) {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }

  .app-layout:not(.is-force-expanded) .sidebar__brand-text,
  .app-layout:not(.is-force-expanded) .sidebar__section-label,
  .app-layout:not(.is-force-expanded) .sidebar__link-text,
  .app-layout:not(.is-force-expanded) .sidebar__footer {
    display: none;
  }

  .app-layout:not(.is-force-expanded) .sidebar__link {
    justify-content: center;
    padding: 10px;
  }

  .app-layout:not(.is-force-expanded) .sidebar__brand {
    justify-content: center;
    padding: 0;
  }

  .navbar__search {
    width: 200px;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "navbar"
      "content";
  }

  .app-sidebar {
    position: fixed;
    height: 100vh;
  }

  .app-content {
    padding: var(--space-md);
  }

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

  .modal {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 0 var(--space-md);
  }

  .navbar__title {
    font-size: var(--font-size-body);
  }

  .card {
    padding: var(--space-md);
  }

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