/* Responsive adjustments for SFA Modern App */

@media (max-width: 968px) {
  :root {
    --sidebar-width: 240px;
  }
  
  .sidebar {
    transform: translateX(-100%);
  }
  
  body.rtl .sidebar {
    transform: translateX(100%);
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  body.rtl .sidebar.active {
    transform: translateX(0);
  }
  
  .main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .sidebar-toggle {
    display: block !important;
  }
  
  .app-header {
    padding: 0 16px;
  }
  
  .page-container {
    padding: 16px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .login-card {
    padding: 24px 16px;
  }
  
  .header-right .rep-profile {
    display: none;
  }
  
  .tx-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .invoice-summary-block {
    max-width: 100%;
  }
}