:root{
  --bg:#F9FAFB; --card:#ffffff; --muted:#6b7280; --primary:#0B63E5;
  --border:#e5e7eb; --ok:#10b981; --err:#ef4444;
  --text:#111827; --focus:#a7c5ff;
  --sidebar-w:260px;
}

/* Reset / Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui, Segoe UI, Arial}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Forms */
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;
  outline:none;transition:border-color .15s, box-shadow .15s
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus)
}
label{display:block;margin:6px 0 4px;font-weight:600;color:#0f172a}

button.btn{
  background:var(--primary);color:#fff;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;
  transition:background .2s, transform .05s
}
button.btn:hover{background:#094ec0}
button.btn:active{transform:translateY(1px)}
button.btn:disabled{opacity:.6;cursor:not-allowed}

button.btn-outline{
  background:#fff;color:var(--primary);border:1px solid var(--primary);border-radius:12px;padding:10px 14px;cursor:pointer;
  transition:background .2s
}
button.btn-outline:hover{background:#f3f4f6}

/* Alerts */
.alert{
  border:1px solid var(--border);border-left-width:4px;padding:10px 12px;border-radius:10px;margin:10px 0
}
.alert-ok{border-left-color:var(--ok);background:#ecfdf5;color:#065f46}
.alert-error{
  border-left-color:var(--err);
  background:#fef2f2;
  color:#991b1b;
  font-weight:500
}

/* Badges */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}

/* Muted */
.muted{color:var(--muted)}

/* ===== Layout ===== */
.layout{display:flex;min-height:100vh}

/* Sidebar: ثابت (sticky) */
.sidebar{
  width:var(--sidebar-w);
  background:var(--primary);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;           /* لواجهة LTR */
  height:100vh;
}
.sidebar .brand{
  display:flex;gap:10px;align-items:center;padding:14px 12px;border-bottom:1px solid #ffffff33
}
.sidebar .menu{
  display:flex;flex-direction:column;gap:6px;
  padding:10px;
  flex:1;                             /* تملأ المساحة العمودية */
}
.sidebar .menu a{
  color:#fff;padding:10px 12px;border-radius:12px;display:block
}
.sidebar .menu a.active,.sidebar .menu a:hover{background:#ffffff22}

/* زر الخروج ثابت أسفل العمود */
.sidebar .logout{margin-top:auto;padding:10px}
.sidebar .logout a{
  display:block;color:#fff;padding:10px 12px;border-radius:12px;text-decoration:none
}
.sidebar .logout a:hover{background:#ffffff22}

/* Content: يراعي مساحة السايدبار */
.content{
  flex:1;display:flex;flex-direction:column;
  margin-left:var(--sidebar-w);        /* لواجهة LTR */
}
.top{
  height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#fff
}
main{padding:14px}

/* Cards / Rows */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.card .row > *{min-width:220px;flex:1}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{max-width:420px;width:100%;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lang-switch a{
  color:var(--primary);text-decoration:none;padding:4px 8px;border-radius:8px;border:1px solid var(--primary)
}
.lang-switch a.active{background:var(--primary);color:#fff}

/* Tables */
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:start}
.table th{background:#f3f4f6}

/* ===== RTL Support ===== */
[dir="rtl"] .sidebar{
  left:auto; right:0;                  /* السايدبار يمين */
  border-left:1px solid #ffffff33; border-right:none;
}
[dir="rtl"] .content{
  margin-left:0;                       /* ألغي مسافة اليسار */
  margin-right:var(--sidebar-w);       /* وحط مسافة يمين */
}
[dir="rtl"] .top{flex-direction:row-reverse}
[dir="rtl"] .table th,[dir="rtl"] .table td{text-align:start}

/* ===== Responsive ===== */
@media (max-width:1024px){
  :root{ --sidebar-w:220px; }
}
@media (max-width:768px){
  .layout{flex-direction:column}
  /* في الموبايل: نخلي السايدبار مش fixed لتسهيل التصفح */
  .sidebar{
    position:static;
    width:100%;
    height:auto;
    flex-direction:row;
    align-items:center;
  }
  .sidebar .menu{flex-direction:row;flex-wrap:wrap}
  .sidebar .logout{margin-left:auto;margin-top:0;padding:10px}
  [dir="rtl"] .sidebar .logout{margin-left:0;margin-right:auto}
  .content{margin:0}                  /* بدون إزاحة */
  .top{height:auto;padding:8px;gap:8px}
  main{padding:10px}
}