/* Responsive Breakpoints */

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

/* Mobile */
@media (max-width: 768px) {
  :root {
    --content-padding: 16px;
    --header-height: 56px;
  }

  .app-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    transform: translateX(-100%);
    z-index: 200;
    padding: var(--space-sm);
  }
  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

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

  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }

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

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .search-box { flex: 1; }
  .filter-group { flex-wrap: wrap; }

  .page-header h2 { font-size: var(--font-size-xl); }

  .data-table th,
  .data-table td { padding: 8px 12px; font-size: var(--font-size-sm); }

  .modal { width: 95%; margin: var(--space-md); }

  .steps { flex-direction: column; align-items: flex-start; }
  .step-line { width: 2px; min-height: 20px; flex: 0; }

  .desc-list { grid-template-columns: 1fr; }

  .tabs { overflow-x: auto; white-space: nowrap; }

  .dynamic-item .item-fields {
    flex-wrap: wrap;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .btn { padding: 4px 12px; font-size: var(--font-size-sm); }
  .btn-lg { height: 38px; padding: 6px 16px; }
  .stat-card { padding: var(--space-md); }
  .stat-card .stat-value { font-size: var(--font-size-xl); }
}