/* ============================================================
   نظام تقارير المندوبين — التنسيق العام
   RTL، موبايل أولاً، محسّن لسفاري iPhone
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --green:#1b8a4c; --green-d:#136138; --green-l:#e8f5ee;
  --orange:#e05c00; --orange-l:#fff4ee;
  --blue:#1a73e8;   --blue-l:#e8f0fe;
  --red:#c0392b;    --red-l:#fff0f0;
  --amber:#b06000;  --amber-l:#fff8e6;
  --ink:#1a1a2e; --muted:#6b7280; --line:#d0d7de;
  --bg:#f3f6f9; --card:#fff;
  --r:12px; --sh:0 2px 12px rgba(0,0,0,.08);
  --nav-h:56px;
}

html,body{
  background:var(--bg); color:var(--ink);
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;
  font-size:15px; line-height:1.6; min-height:100vh;
  -webkit-text-size-adjust:100%;
}
body{padding-top:var(--nav-h)}
body.no-nav{padding-top:0}

/* ── شريط علوي ─────────────────────────────────────────── */
.nav{
  position:fixed; top:0; right:0; left:0; height:var(--nav-h); z-index:200;
  background:linear-gradient(135deg,var(--green-d),var(--green));
  color:#fff; display:flex; align-items:center; gap:14px;
  padding:0 16px; box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.nav .brand{font-weight:700;font-size:15px;white-space:nowrap}
.nav .links{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav .links::-webkit-scrollbar{display:none}
.nav a{
  color:#fff;text-decoration:none;padding:6px 12px;border-radius:8px;
  font-size:14px;white-space:nowrap;opacity:.85;transition:.15s;
}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.18);opacity:1}
.nav .who{font-size:13px;opacity:.9;white-space:nowrap}
.nav .out{background:rgba(0,0,0,.2);border:none;color:#fff;padding:6px 12px;
  border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit}
.nav .out:hover{background:rgba(0,0,0,.32)}

/* ── تخطيط ────────────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:18px 14px 48px}
.wrap.narrow{max-width:700px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:18px;margin-bottom:16px;border:1px solid rgba(0,0,0,.06)}
.card>h2{font-size:15px;font-weight:700;color:var(--green);margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--green-l);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card>h2.o{color:var(--orange);border-color:var(--orange-l)}
.card>h2 .sp{margin-inline-start:auto;font-weight:400;font-size:13px;color:var(--muted)}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── حقول ─────────────────────────────────────────────── */
.f{margin-bottom:13px}
.f label{display:block;font-size:12px;font-weight:600;color:var(--muted);
  margin-bottom:5px;letter-spacing:.3px}
.f input,.f select,.f textarea{
  width:100%;border:1.5px solid var(--line);border-radius:8px;
  padding:11px 13px;font-size:16px;font-family:inherit;color:var(--ink);
  background:#fff;transition:border-color .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none;direction:rtl;
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(27,138,76,.12)}
.f textarea{resize:vertical;min-height:78px}
.f select{cursor:pointer}
.f .hint{font-size:11px;color:var(--muted);margin-top:4px}

/* ── أزرار ────────────────────────────────────────────── */
.btn{border:none;border-radius:9px;padding:11px 18px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;
  align-items:center;justify-content:center;gap:7px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-p{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;
  box-shadow:0 3px 12px rgba(27,138,76,.3)}
.btn-p:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 18px rgba(27,138,76,.38)}
.btn-o{background:var(--orange);color:#fff}
.btn-g{background:#eef1f5;color:var(--ink);border:1.5px solid var(--line)}
.btn-g:hover:not(:disabled){background:#e3e8ee}
.btn-d{background:var(--red-l);color:var(--red);border:1.5px solid #f5c6c6}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:7px}
.btn-big{width:100%;padding:17px;font-size:18px;border-radius:var(--r)}
.btn-add{width:100%;padding:12px;border:2px dashed var(--line);border-radius:10px;
  background:transparent;color:var(--muted);font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.15s}
.btn-add:hover{border-color:var(--green);color:var(--green);background:var(--green-l)}
.btn-add.o:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-l)}

/* ── مؤشرات ───────────────────────────────────────────── */
.kpi{background:var(--card);border-radius:var(--r);padding:16px;
  border:1px solid rgba(0,0,0,.06);box-shadow:var(--sh)}
.kpi .lab{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.kpi .val{font-size:26px;font-weight:700;color:var(--green);line-height:1.2}
.kpi .val.o{color:var(--orange)} .kpi .val.b{color:var(--blue)}
.kpi .sub{font-size:11px;color:var(--muted);margin-top:4px}

/* ── جداول ────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:9px;border:1px solid var(--line)}
table.t{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
table.t th{background:var(--green);color:#fff;padding:10px 12px;text-align:right;
  font-weight:600;white-space:nowrap;font-size:13px}
table.t td{padding:9px 12px;border-bottom:1px solid #eef1f5;vertical-align:top}
table.t tbody tr:nth-child(even){background:#fafbfc}
table.t tbody tr:hover{background:var(--green-l)}
table.t td.num{text-align:center;font-variant-numeric:tabular-nums}

/* ── شارات ────────────────────────────────────────────── */
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.tag.g{background:var(--green-l);color:var(--green-d)}
.tag.o{background:var(--orange-l);color:var(--orange)}
.tag.b{background:var(--blue-l);color:var(--blue)}
.tag.r{background:var(--red-l);color:var(--red)}
.tag.n{background:#eef1f5;color:var(--muted)}

/* ── تنبيهات ──────────────────────────────────────────── */
.msg{padding:12px 16px;border-radius:9px;font-size:14px;font-weight:600;margin:12px 0;display:none}
.msg.show{display:block}
.msg.ok{background:var(--green-l);color:var(--green-d);border:1.5px solid #a3d9b8}
.msg.err{background:var(--red-l);color:var(--red);border:1.5px solid #f5c6c6}
.msg.warn{background:var(--amber-l);color:var(--amber);border:1.5px solid #f0dca8}
.msg.info{background:var(--blue-l);color:#1557b0;border:1.5px solid #c5d8fb}

/* ── حالات ────────────────────────────────────────────── */
.empty{text-align:center;padding:36px 20px;color:var(--muted);font-size:14px}
.load{text-align:center;padding:28px;color:var(--muted);font-size:14px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);
  border-top-color:var(--green);border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:middle;margin-inline-end:7px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── نافذة ────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;
  display:none;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.modal .box{background:#fff;border-radius:var(--r);max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;padding:22px;box-shadow:0 12px 48px rgba(0,0,0,.3)}
.modal h3{font-size:16px;color:var(--green);margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--green-l)}
.modal .acts{display:flex;gap:9px;margin-top:16px}
.modal .acts .btn{flex:1}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:150px}
.mono{font-variant-numeric:tabular-nums}
.rtl-num{direction:ltr;display:inline-block;unicode-bidi:embed}