:root{
  --brand:#6366f1;
  --brand-dark:#4f46e5;
  --sidebar-bg:#0f172a;
  --sidebar-muted:#94a3b8;
  --page-bg:#f1f5f9;
  --card-border:#e9edf2;
}

*{ font-family:'Segoe UI',Tahoma,'Cairo',sans-serif; }
body{ background:var(--page-bg); margin:0; }

/* ===== التخطيط ===== */
.layout{ display:flex; flex-direction:row-reverse; min-height:100vh; }
.content{ flex:1; display:flex; flex-direction:column; min-width:0; order:1; }

/* ===== السايدبار (يمين) ===== */
.sidebar{
  width:240px; background:var(--sidebar-bg); color:var(--sidebar-muted);
  padding:18px 14px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh; order:2;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 18px; }
.sidebar .brand .logo{
  width:34px; height:34px; border-radius:9px; background:var(--brand);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;
}
.sidebar .brand span{ color:#fff; font-size:15px; font-weight:600; }
.sidebar .nav-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:9px; color:var(--sidebar-muted); font-size:14px; text-decoration:none;
  transition:background .15s,color .15s;
}
.sidebar .nav-link i{ font-size:18px; width:20px; text-align:center; }
.sidebar .nav-link:hover{ background:#1e293b; color:#fff; }
.sidebar .nav-link.active{ background:var(--brand); color:#fff; }
.sidebar .spacer{ margin-top:auto; }

/* ===== الهيدر ===== */
.topbar{
  background:#fff; border-bottom:1px solid var(--card-border);
  padding:13px 24px; display:flex; align-items:center; justify-content:space-between;
}
.topbar .title{ font-size:16px; font-weight:600; color:#1e293b; }
.topbar .subtitle{ font-size:12px; color:#94a3b8; }
.topbar .user{ display:flex; align-items:center; gap:9px; }
.avatar{
  width:36px; height:36px; border-radius:50%; background:#e0e7ff; color:#4338ca;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
}

/* ===== المحتوى ===== */
.page{ padding:22px 24px; }

/* ===== الكروت ===== */
.stat-card{
  background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:16px;
}
.stat-card .label{ font-size:13px; color:#94a3b8; }
.stat-card .value{ font-size:24px; font-weight:700; color:#1e293b; margin-top:6px; }
.stat-card .delta{ font-size:12px; margin-top:2px; }
.stat-icon{ font-size:18px; }

.card-box{
  background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:18px;
}
.card-box .card-title{ font-size:14px; font-weight:600; color:#1e293b; margin-bottom:14px; }

/* ===== أزرار العلامة ===== */
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }

/* ===== شارات الحالة ===== */
.badge-soft-success{ background:#dcfce7; color:#15803d; }
.badge-soft-warning{ background:#fef3c7; color:#b45309; }
.badge-soft-danger{ background:#fee2e2; color:#b91c1c; }
.badge-soft-secondary{ background:#e2e8f0; color:#475569; }

/* ===== الموبايل ===== */
.menu-toggle{ display:none; background:none; border:none; font-size:22px; color:#1e293b; }
@media (max-width: 768px){
  .sidebar{ position:fixed; right:0; top:0; z-index:1050; transform:translateX(100%); transition:transform .25s; }
  .sidebar.open{ transform:translateX(0); }
  .menu-toggle{ display:block; }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; }
  .sidebar-backdrop.show{ display:block; }
}