@media (max-width: 1200px) {
  :root {
    --sidebar-width: 200px;
  }
  
  .sidebar {
    width: var(--sidebar-width);
  }
  
  .header {
    left: var(--sidebar-width);
  }
  
  .content {
    margin-left: var(--sidebar-width);
  }
  
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .form-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 992px) {
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 64px;
  }
  
  .sidebar {
    width: var(--sidebar-width);
  }
  
  .sidebar-menu {
    padding: 0 var(--spacing-xs);
  }
  
  .menu-group-title {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  
  .menu-text {
    opacity: 0;
    width: 0;
    margin: 0;
  }
  
  .menu-arrow {
    opacity: 0;
    width: 0;
    margin: 0;
  }
  
  .sidebar-logo-text {
    opacity: 0;
    width: 0;
    margin: 0;
  }
  
  .sidebar-toggle-text {
    opacity: 0;
    width: 0;
    margin: 0;
  }
  
  .header {
    left: var(--sidebar-width);
  }
  
  .content {
    margin-left: var(--sidebar-width);
    padding: var(--spacing-md);
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  
  .page-header-right {
    width: 100%;
    justify-content: flex-start;
  }
  
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .card-grid-2,
  .card-grid-3,
  .card-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .form-row-2,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
  
  .form-item-inline {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .form-item-inline .form-label {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .stat-card {
    padding: var(--spacing-md);
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .stat-value {
    font-size: var(--font-size-2xl);
  }
  
  .table-pagination {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .pagination-controls {
    width: 100%;
    justify-content: center;
  }
  
  .header-search {
    width: 180px;
  }
  
  .header-breadcrumb {
    display: none;
  }
  
  .header-title {
    font-size: var(--font-size-md);
  }
  
  .btn-group {
    flex-wrap: wrap;
  }
  
  .btn-group .btn {
    flex: 1;
    min-width: 80px;
  }
}

@media (max-width: 576px) {
  .content {
    padding: var(--spacing-sm);
  }
  
  .card-container {
    padding: var(--spacing-md);
  }
  
  .page-title {
    font-size: var(--font-size-xl);
  }
  
  .data-table {
    font-size: var(--font-size-xs);
  }
  
  .data-table th,
  .data-table td {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .stat-icon {
    margin-bottom: var(--spacing-xs);
  }
  
  .header {
    padding: 0 var(--spacing-md);
  }
  
  .header-search {
    display: none;
  }
  
  .header-action {
    padding: var(--spacing-xs);
  }
  
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
  
  .btn-lg {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .page-actions {
    flex-wrap: wrap;
  }
  
  .page-actions .btn {
    flex: 1;
    min-width: 80px;
  }
  
  .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .card-footer-right {
    width: 100%;
    justify-content: flex-start;
  }
  
  .tag {
    font-size: 11px;
    padding: 2px 8px;
  }
  
  .pagination-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 var(--spacing-xs);
  }
}

@media (min-width: 1400px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  
  .form-row {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (min-width: 1600px) {
  .content {
    max-width: 1400px;
    margin-left: calc(var(--sidebar-width) + (100% - 1400px) / 2);
  }
  
  .sidebar.collapsed ~ .content {
    margin-left: calc(var(--sidebar-collapsed-width) + (100% - 1400px) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (print) {
  .sidebar,
  .header,
  .page-actions,
  .pagination {
    display: none !important;
  }
  
  .content {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .card-container {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
  }
  
  .data-table {
    box-shadow: none !important;
  }
}