/* =========================================================
   WhatsApp Rides Admin — style.css
   RTL-first, responsive, collapsible sidebar + mobile off-canvas
   ========================================================= */
:root{
  --bg:#f6f8fb; --fg:#0f172a; --muted:#6b7280;
  --card:#ffffff; --line:#e5e7eb;
  --primary:#0ea5e9; --primary-ink:#075985;
  --danger:#ef4444; --success:#10b981; --warning:#f59e0b;
  --radius:16px; --shadow:0 12px 30px rgba(2,6,23,.07);
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html[dir="rtl"]{ direction:rtl; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }




.content{ margin-inline-start:280px; min-height:100%; display:flex; flex-direction:column; }
.topbar{
  height:64px; position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-5); z-index:20;
}
.wrap{ padding:var(--space-5); width:min(1100px,100%); }
.page-title{ margin:0 0 var(--space-3); }

/* ===== Cards & Stats ===== */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:var(--space-4); margin:var(--space-4) 0;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.card .title{ font-weight:800; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin:var(--space-3) 0 var(--space-4); }
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-4); box-shadow:var(--shadow); text-align:center;
}
.stat b{ font-size:28px; line-height:1; }
.stat span{ margin-top:var(--space-1); color:var(--muted); font-size:13px; display:block; }

/* ===== Buttons ===== */
.btn{
  --pad-y:10px; --pad-x:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--pad-y) var(--pad-x); border-radius:12px; border:1px solid transparent;
  background:#111827; color:#fff; cursor:pointer; transition:.15s; text-align:center;
}
.btn:hover{ filter:brightness(1.02); transform:translateY(-1px); }
.btn.primary{ background:var(--primary); } .btn.primary:hover{ background:#0284c7; }
.btn.outline{ background:#fff; color:var(--primary-ink); border-color:#bae6fd; }
.btn.ghost{ background:#fff; color:#111827; border-color:var(--line); }
.btn.danger{ background:var(--danger); }
.btn.small{ padding:6px 10px; font-size:12px; border-radius:10px; }
.btn.icon{ padding:8px; background:#fff; border:1px solid var(--line); border-radius:12px; }

/* ===== Forms & Tables ===== */
label{ display:flex; flex-direction:column; gap:8px; font-size:14px; }
input[type="text"],input[type="tel"],input[type="date"],input[type="number"],input[type="password"],input[type="search"],select,textarea{
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; outline:0; transition:border-color .15s, box-shadow .15s;
}
textarea{ min-height:110px; resize:vertical; }
input:focus,select:focus,textarea:focus{ border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35); }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th,.table td{ padding:12px 10px; border-bottom:1px solid var(--line); text-align:start; vertical-align:middle; }
.table thead th{ font-size:13px; color:var(--muted); background:#fafafa; }
.table tbody tr:hover{ background:#f9fafb; }

/* ===== Activity ===== */
.activity .item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.activity .item:last-child{ border-bottom:0; }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; background:#94a3b8; }
.dot.blue{ background:var(--primary); }



/* زر الهامبرغر */
.btn.icon.hamburger{
  width:40px; height:40px; border:1px solid var(--line); border-radius:12px; background:#fff; position:relative;
}
.btn.icon.hamburger span,
.btn.icon.hamburger::before,
.btn.icon.hamburger::after{
  content:""; position:absolute; inset-inline:9px; height:2px; background:#111827; border-radius:2px; transition:.2s;
}
.btn.icon.hamburger span{ top:50%; transform:translateY(-50%); }
.btn.icon.hamburger::before{ top:11px; }
.btn.icon.hamburger::after{ bottom:11px; }



/* ===== Alerts & Utils ===== */
.alert{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.alert.success{ border-color:#bbf7d0; background:#f0fdf4; }
.alert.danger{ border-color:#fecaca; background:#fef2f2; }
.muted{ color:#6b7280; }
.spacer{ flex:1 1 auto; }
.pos{ color:#166534; } .neg{ color:#b91c1c; }