/* ════════════════════════════════════════════════════════════════
   09-mobile.css — Responsive + RTL improvements
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root { --sidebar-width: 280px; }

  .sidebar {
    position: fixed;
    inset-inline-start: -100%;
    top: 0; bottom: 0;
    z-index: 100;
    width: var(--sidebar-width);
    transition: inset-inline-start 0.35s var(--ease-out);
    box-shadow: none;
  }
  .sidebar.open {
    inset-inline-start: 0;
    box-shadow: var(--shadow-xl);
  }

  .layout { grid-template-columns: 1fr; }
  .menu-toggle { display: flex; }

  .topbar { padding: 12px 16px; }
  .topbar-subtitle { display: none; }
  .content { padding: 16px; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .stat-card { padding: 16px 14px; }
  .stat-card-value { font-size: 22px; }

  .form-grid { grid-template-columns: 1fr; }
  .stepper { padding: 10px 6px; }
  .step-label { font-size: 10px; }
}

@media (max-width: 560px) {
  .login-card { padding: 32px 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .card-header { flex-wrap: wrap; gap: 10px; }
  .card-actions { width: 100%; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .toast-container { left: 12px; right: 12px; max-width: none; }
  .toast { min-width: auto; }
  .modal-body { padding: 18px; }
  .radio-grid { grid-template-columns: 1fr; }
  .sync-indicator {
    bottom: 12px;
    left: 12px;
    font-size: 10px;
    padding: 6px 12px;
  }
}