/* =====================
   التجاوب مع الجوال (RTL)
===================== */

/* زر القائمة (الهامبرغر) — يظهر على الجوال فقط */
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--gray-2);
  background: white;
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

/* طبقة تعتيم خلف السايدبار المفتوح */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.45);
  z-index: 99;
}

/* ===== أجهزة لوحية ===== */
@media (max-width: 1024px) {
  .grid-3   { grid-template-columns: 1fr 1fr; }
  .kpi-4    { grid-template-columns: repeat(2, 1fr); }
}

/* ===== جوال ===== */
@media (max-width: 768px) {
  /* السايدبار يصير off-canvas من اليمين */
  .sidebar {
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.2);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }

  .main { margin-right: 0; }
  .menu-toggle { display: inline-flex; }

  .content { padding: 14px; }
  .topbar  { padding: 10px 14px; }
  .topbar-title { font-size: 15px; }

  /* كل الشبكات عمود واحد */
  .grid-2, .grid-3, .grid-3-1 { grid-template-columns: 1fr; }
  .kpi-4, .kpi-3 { grid-template-columns: repeat(2, 1fr); }

  /* الجداول تمرّر أفقياً بدل ما تنكسر */
  .card { overflow-x: auto; }
  .table { min-width: 560px; }

  /* أزرار CTA في التوبار تنضغط */
  #topbar-cta { font-size: 12px; padding: 8px 10px; }
}

/* ===== شاشات صغيرة جداً ===== */
@media (max-width: 420px) {
  .kpi-4, .kpi-3 { grid-template-columns: 1fr; }
  .login-box { padding: 24px 18px; }
  .role-cards { gap: 8px; }
}