/* Tablet */
@media (max-width: 1024px) {
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }

  .sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: var(--statusbar-height);
    left: 0;
    z-index: 200;
    transform: translateX(-100%);
    width: 220px;
    transition: transform var(--transition-md);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open {
    transform: translateX(0);
  }

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

  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
  .card-grid-2 {
    grid-template-columns: 1fr;
  }
  .card-grid-3 {
    grid-template-columns: 1fr;
  }
  .split-pane {
    grid-template-columns: 1fr;
  }

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

  .header-token-expiry {
    display: none;
  }
  .header-version {
    display: none;
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .table-search {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  .login-card {
    padding: var(--space-lg);
  }
  .header-title {
    font-size: var(--font-size-sm);
  }
  .modal-box {
    max-height: 100vh;
    border-radius: 0;
  }
}