/* ==================================================================
   afaqalardh — الأنماط العامة (استمارة الاشتراك + لوحة الإدارة)
   ================================================================== */
:root{
  --page:#eef1f5; --surface:#ffffff; --ink:#0e1b2c; --ink-soft:#5a6b80;
  --line:#d7dee8; --line-strong:#b6c2d2; --brand:#0f6f6c; --brand-ink:#0b5654;
  --danger:#c0392b; --ok:#1e7a3c; --shade:#f6f8fb;
  --radius:10px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0b131e; --surface:#132031; --ink:#e8eef6; --ink-soft:#9bacc0;
    --line:#26374b; --line-strong:#3a5069; --shade:#0f1a28; --brand:#2fa19c;
    --brand-ink:#43bab4; --danger:#ff7b6b; --ok:#3fbe70;
  }
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  font-size:15px; line-height:1.65;
}
.wrap{max-width:960px;margin:0 auto;padding:24px 16px 64px}
.wrap.wide{max-width:1240px}
a{color:var(--brand)}

/* ---------- الشريط العلوي ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:14px}
.topbar strong{font-size:17px}
.topbar .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:17px}
.brand img{height:38px;width:auto}
/* الشعار الفاتح للوضع الليلي يأتي من <picture>، فلا حاجة لأي فلتر لوني */

/* شعار كبير في صفحات الدخول والاعتذار */
.logo-hero{display:block;margin:0 auto 16px;max-width:220px;width:70%}
.logo-hero img{width:100%;height:auto;display:block}
.btnlink{padding:10px 18px;border-radius:8px;border:1px solid var(--line-strong);
  text-decoration:none;color:var(--ink);display:inline-block;background:transparent;font-size:14px}
.btnlink:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- شريط الخطوات ---------- */
.stepbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 10px;margin-bottom:22px;overflow:hidden}
.steps{display:flex;list-style:none;margin:0;padding:0}
.step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center;
  position:relative;padding:0 4px;font-size:13px;color:var(--ink-soft);text-align:center;
  overflow-wrap:anywhere}
/* خط الوصل يمتد من مركز الخطوة نحو الخطوة السابقة — بخصائص منطقية تحترم RTL */
.step::before{content:"";position:absolute;top:11px;height:2px;background:var(--line);
  inset-inline-start:-50%;inset-inline-end:50%}
.step:first-child::before{display:none}
.step .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);
  background:var(--surface);z-index:1;display:grid;place-items:center;font-size:11px;font-weight:600}
.step.done{color:var(--brand)}
.step.done .dot{border-color:var(--brand);background:var(--brand);color:#fff}
.step.done::before{background:var(--brand)}
.step.now{color:var(--ink);font-weight:600}
.step.now .dot{border-color:var(--brand);box-shadow:0 0 0 4px rgba(15,111,108,.15)}
@media (max-width:620px){
  .stepbar{padding:16px 6px}
  .step{font-size:11px;line-height:1.4;padding:0 2px}
  .step .dot{width:20px;height:20px}
  .step::before{top:10px}
}

/* ---------- البطاقات والحقول ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card + .card{margin-top:18px}
h1{font-size:21px;margin:0 0 4px;font-weight:600}
h2{font-size:17px;margin:0 0 10px;font-weight:600}
.lede{margin:0 0 22px;color:var(--ink-soft);font-size:14px}
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-weight:600;font-size:15px;padding:0 0 12px;border-bottom:1px solid var(--line);width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:16px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.span2{grid-column:span 2}
@media (max-width:560px){.field.span2{grid-column:span 1}}
label{font-size:13px;color:var(--ink-soft)}
label .req{color:var(--danger);margin-inline-start:2px}
input,select,textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;width:100%;
}
textarea{resize:vertical;min-height:80px}
/* خيارات القوائم المنسدلة: لون صريح للخلفية والنص حتى لا يختفي النص في الوضع الليلي
   (المتصفح يرسم قائمة الخيارات بخلفية بيضاء إن لم تحدد) */
select option,select optgroup{background-color:var(--surface);color:var(--ink)}
input[type=file]{padding:8px;background:var(--shade);font-size:12px}
input[readonly]{background:var(--shade);color:var(--ink-soft)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--danger);background:rgba(192,57,43,.05)}
.hint{font-size:12px;color:var(--ink-soft)}
.err{font-size:12px;color:var(--danger);display:none}
.err.show{display:block}

/* ---------- خيارات ---------- */
.choice{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.choice label{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  border-radius:8px;padding:9px 14px;cursor:pointer;color:var(--ink);font-size:14px}
.choice input{width:auto;accent-color:var(--brand)}
.choice label:has(input:checked){border-color:var(--brand);background:rgba(15,111,108,.08)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}
.plan{border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px;cursor:pointer;
  display:block;position:relative}
.plan input{position:absolute;opacity:0;width:0}
.plan:has(input:checked){border-color:var(--brand);border-width:2px;padding:15px;background:rgba(15,111,108,.07)}
.plan .pn{font-weight:600;font-size:16px}
.plan .pp{font-size:20px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.plan .ps{font-size:12px;color:var(--ink-soft)}

/* ---------- نافذة «يرجى تفعيل الموقع» ---------- */
.loc-dialog{border:0;border-radius:14px;padding:26px 24px 20px;max-width:440px;width:calc(100% - 32px);
  background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center}
.loc-dialog::backdrop{background:rgba(10,20,32,.55)}
.loc-dialog .loc-ic{font-size:40px;line-height:1;margin-bottom:8px}
.loc-dialog h2{font-size:18px;margin:0 0 10px}
.loc-dialog p{margin:0 0 10px;font-size:14px;color:var(--ink-soft)}
.loc-dialog ul{text-align:right;margin:6px 0 12px;padding-inline-start:20px;font-size:14px}
.loc-dialog li{margin:6px 0}
.loc-dialog .loc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.spin.spin-dark{border-color:rgba(0,0,0,.18);border-top-color:var(--brand)}

/* ---------- الخريطة ---------- */
#map{height:320px;border:1px solid var(--line-strong);border-radius:var(--radius);margin-top:14px;z-index:0}
.maphint{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--ink-soft);margin-top:8px}
.coords{font-variant-numeric:tabular-nums;direction:ltr}
.maphint .hint-warn{color:#8a6100;font-weight:600}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .maphint .hint-warn{color:#f0c060} }
.leaflet-container{font-family:inherit}

/* ---------- المراجعة ---------- */
.review{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.review h3{margin:0;padding:10px 14px;background:var(--shade);font-size:14px;font-weight:600;
  border-bottom:1px solid var(--line)}
.review dl{margin:0;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.review dt{color:var(--ink-soft)}
.review dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;
  padding:14px;border-radius:var(--radius);background:var(--brand);color:#fff;font-weight:600}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px}
.agree input{width:auto;margin-top:4px;accent-color:var(--brand)}

/* ---------- الأزرار ---------- */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
button{font:inherit;font-size:15px;border-radius:8px;padding:11px 26px;cursor:pointer;border:1px solid transparent}
button[disabled]{opacity:.6;cursor:not-allowed}
.primary{background:var(--brand);color:#fff}
.primary:hover:not([disabled]){background:var(--brand-ink)}
.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.ghost:hover{border-color:var(--brand);color:var(--brand)}
.danger{background:var(--danger);color:#fff}
.link{background:none;border:0;color:var(--ink-soft);padding:11px 8px;text-decoration:underline}
.gps{margin-top:8px}
.small{font-size:13px;padding:8px 14px}

.summary-err{display:none;margin-top:16px;border-inline-start:3px solid var(--danger);
  background:rgba(192,57,43,.07);padding:10px 14px;border-radius:6px;font-size:14px;color:var(--danger)}
.summary-err.show{display:block}
.notice{margin-top:14px;border-inline-start:3px solid var(--brand);background:rgba(15,111,108,.08);
  padding:10px 14px;border-radius:6px;font-size:14px}
.notice.bad{border-color:var(--danger);background:rgba(192,57,43,.07);color:var(--danger)}

.done-box{text-align:center;padding:30px 10px}
.done-box .tick{width:54px;height:54px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:26px;margin:0 auto 14px}
.refcode{display:inline-block;font-size:22px;font-weight:700;letter-spacing:.06em;direction:ltr;
  background:var(--shade);border:1px dashed var(--line-strong);border-radius:8px;padding:8px 20px;margin:8px 0}

/* ---------- الشارات ---------- */
.badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.b-pending{background:#fdf0d5;color:#8a6100}
.b-progress{background:#dceafb;color:#14528f}
.b-completed{background:#dcf2e3;color:#14602f}
.b-rejected{background:#fbdedb;color:#8f1f14}
.b-cancelled{background:#e7e9ee;color:#4a5566}
.b-postponed{background:#ece4fb;color:#5a3a9c}
.b-mine{background:#ece4fb;color:#5a3a9c}   /* مهمتي على الخريطة */

/* ---------- طلباتي المحفوظة في المتصفح ---------- */
.saved-req{margin-bottom:20px}
.saved-title{font-size:15px;font-weight:600;color:var(--ink-soft);margin:0 0 10px}
.req-card{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--brand);
  border-radius:var(--radius);padding:15px 17px}
.req-card + .req-card{margin-top:10px}
.req-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.req-code{font-weight:700;font-size:17px;direction:ltr;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.req-meta{font-size:13px;color:var(--ink-soft);margin-top:3px}

.prog{display:flex;margin-top:18px}
.prog-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;
  position:relative;padding:0 4px;font-size:12px;color:var(--ink-soft);text-align:center}
.prog-step::before{content:"";position:absolute;top:8px;height:2px;background:var(--line);
  inset-inline-start:-50%;inset-inline-end:50%}
.prog-step:first-child::before{display:none}
.prog-step .d{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);
  background:var(--surface);z-index:1}
.prog-step.on{color:var(--brand);font-weight:600}
.prog-step.on .d{background:var(--brand);border-color:var(--brand)}
.prog-step.on::before{background:var(--brand)}

.req-terminal{margin-top:14px;font-size:14px;color:var(--danger);
  background:rgba(192,57,43,.07);border-radius:8px;padding:9px 13px}
.req-postponed{margin-top:14px;font-size:14px;color:#5a3a9c;background:rgba(90,58,156,.08);
  border-radius:8px;padding:9px 13px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .req-postponed{color:#c9b3ff;background:rgba(160,120,255,.12)} }
.req-note{margin-top:12px;font-size:13px;color:var(--ink-soft)}
.req-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}

/* ---------- تتبع الطلب ---------- */
.track-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
.track-row .field{flex:1;min-width:180px}
.timeline{list-style:none;margin:18px 0 0;padding:0 18px 0 0;border-inline-start:2px solid var(--line)}
.timeline li{position:relative;padding:0 18px 16px 0;font-size:14px}
.timeline li::before{content:"";position:absolute;right:-9px;top:6px;width:10px;height:10px;
  border-radius:50%;background:var(--brand)}
.timeline small{display:block;color:var(--ink-soft);font-size:12px}

/* ---------- الجداول (لوحة الإدارة) ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
thead th{background:var(--shade);text-align:right;font-weight:600;padding:11px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink-soft);font-size:13px}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--shade)}
td.ltr{direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:34px 16px;text-align:center;color:var(--ink-soft)}

/* ---------- عمود الإجراءات في قائمة الطلبات ---------- */
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.row-actions .btnlink{padding:7px 14px;font-size:13px;white-space:nowrap}
.quick-status{margin:0}
.quick-status select{padding:7px 10px;font-size:13px;min-width:120px;cursor:pointer}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .field{min-width:170px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .n{font-size:24px;font-weight:700;line-height:1.2}
.stat .l{font-size:13px;color:var(--ink-soft)}

.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 13px;border:1px solid var(--line-strong);border-radius:8px;
  text-decoration:none;color:var(--ink);font-size:14px}
.pager .on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager .off{opacity:.45;pointer-events:none}

/* ---------- تفاصيل الطلب ---------- */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.detail-grid{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;margin:0}
.kv dt{color:var(--ink-soft)}
.kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.files{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:14px}
.filecard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--shade)}
.filecard img{width:100%;height:130px;object-fit:cover;display:block}
.filecard .fmeta{padding:8px 10px;font-size:12px;color:var(--ink-soft)}
.filecard a{display:block;text-decoration:none}
.pdfbox{height:130px;display:grid;place-items:center;font-size:28px;color:var(--ink-soft)}

/* ---------- صفحة الدخول ---------- */
.login-wrap{max-width:400px;margin:8vh auto;padding:0 16px}
.login-wrap .card{padding:26px}
.login-wrap h1{text-align:center;margin-bottom:18px}

pre{background:var(--shade);border:1px solid var(--line);border-radius:8px;padding:14px;
  font-size:12px;text-align:left;direction:ltr;overflow:auto;max-height:280px}
[hidden]{display:none !important}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;margin-inline-end:8px;
  vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
@media print{.topbar,.actions,.filters,.pager,button{display:none!important}}

/* ---------- وضع الإدارة في الاستمارة ---------- */
.staff-banner{background:rgba(90,58,156,.08);border:1px solid rgba(90,58,156,.3);color:var(--ink);
  border-radius:var(--radius);padding:11px 15px;margin-bottom:16px;font-size:14px;
  display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.staff-banner a{margin-inline-start:auto}
.staff-field select{border-color:rgba(90,58,156,.55);border-width:1.5px;background-color:var(--surface)}
.btn-new{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-new:hover{background:var(--brand-ink);color:#fff}

/* ==================================================================
   دورة عمل المنصب — تبويبات المهام، بطاقات المهمة، المحادثة، الخريطة، الحسابات
   ================================================================== */

/* ---------- عداد الإشعارات وزر التنبيه ---------- */
.wf-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--danger);
  color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;
  vertical-align:1px;margin-inline-start:4px;font-variant-numeric:tabular-nums}
.btnlink.btn-alert{border-color:var(--danger);color:var(--danger)}

/* ---------- تبويبات صفحة المهام ---------- */
.wf-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.wf-tab{padding:10px 18px;border:1px solid var(--line-strong);border-radius:8px;text-decoration:none;
  color:var(--ink);background:var(--surface);font-size:14px}
.wf-tab:hover{border-color:var(--brand);color:var(--brand)}
.wf-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.wf-tab.on .wf-count{background:rgba(255,255,255,.25)}

/* ---------- بطاقة مهمة ---------- */
.task-card + .task-card{margin-top:14px}
.task-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.task-code{font-weight:700;font-size:16px;direction:ltr;display:inline-block;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;text-decoration:none;color:var(--brand)}
.mine-task{border-inline-start:3px solid var(--brand)}
.task-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.inline-form{display:flex;gap:6px;align-items:center;margin:0;flex-wrap:wrap}
.inline-form input[type=text],.inline-form input:not([type]){width:auto}

/* صندوق «إعادة الطلب إلى القائمة» — ظاهر لا رابط باهت */
.release-box{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:18px;padding:14px 16px;border-radius:var(--radius);
  border:1px dashed var(--line-strong);background:var(--shade)}
.release-box form{margin:0}
.release-box .hint{margin-top:3px}

/* أزرار بطاقة «مهمتي الحالية» */
.mine-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:150px}
.mine-actions form{margin:0}
.mine-actions .btnlink,.mine-actions button{width:100%;text-align:center}

/* تقرير التنصيب الوارد من المنصب */
.report-box{margin-top:14px;background:var(--shade);border:1px dashed var(--line-strong);
  border-radius:var(--radius);padding:12px 15px}
.report-box .kv{font-size:14px}

/* ---------- قائمة الطلبات المتاحة للمنصب ---------- */
.pool-item{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:12px}
.pool-item:hover{border-color:var(--line-strong)}
.pool-main{min-width:0;flex:1 1 240px}
.pool-side{display:flex;flex-direction:column;gap:7px;align-items:stretch;
  flex:0 1 170px;min-width:150px}
.pool-side .btnlink,.pool-side button{text-align:center}

/* ---------- المحادثة ---------- */
.chat{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-height:340px;overflow-y:auto;
  padding-inline-end:4px}
.msg{max-width:85%;border-radius:12px;padding:9px 13px;font-size:14px;border:1px solid var(--line)}
.msg.mine{align-self:flex-start;background:rgba(15,111,108,.08);border-color:rgba(15,111,108,.3)}
.msg.theirs{align-self:flex-end;background:var(--shade)}
.msg-meta{font-size:11px;color:var(--ink-soft);margin-bottom:3px}
.msg-body{overflow-wrap:anywhere;white-space:pre-line}

/* ---------- نقاط الخريطة ---------- */
.pin{display:block;width:22px;height:22px;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pin-available{background:#f2c014;border:2px solid #8a6100}
/* مهمتي: بنفسجي مميز عن الأصفر (متاح) والأخضر (منجز) والأزرق (موقعي) */
.pin-mine{background:#7b3fe4;border:3px solid #fff;box-shadow:0 0 0 3px #4b1fa8}
.pin-done{background:#2ea24f;border:2px solid #14602f}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--ink-soft)}
.map-legend i{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:-1px;
  margin-inline-end:5px}
.map-legend .dot-available{background:#f2c014;border:2px solid #8a6100}
.map-legend .dot-mine{background:#7b3fe4;border:2px solid #4b1fa8}
.map-legend .dot-done{background:#2ea24f;border:2px solid #14602f}

/* نافذة النقطة */
.kv dd.coords{text-align:right}
.pin-popup{font-size:13px;min-width:210px}
.pin-code{font-weight:700;direction:ltr;font-size:15px;margin-bottom:4px}
.pin-name{font-weight:600;margin-top:7px}
.pin-line{color:#5a6b80;margin-top:3px;overflow-wrap:anywhere}
.pin-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.pin-actions .btnlink,.pin-actions button{padding:6px 12px;font-size:12px}
.leaflet-popup-content{margin:12px 14px}

/* ---------- بطاقة أقرب زبون ---------- */
.near-card{margin-top:18px}
.near-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:14px}
.n-dist{font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--brand);flex:0 0 auto;min-width:110px}
.near-info{flex:1;min-width:220px}
.near-info>div{margin-bottom:4px}

/* ---------- جدول إدارة الحسابات ---------- */
.acct-table td{vertical-align:middle}
.acct-table input,.acct-table select{padding:7px 10px;font-size:13px;min-width:120px}
.acct-table td .row-actions{gap:6px}
.acct-table tbody tr.row-off{background:var(--shade);color:var(--ink-soft)}
.acct-table tbody tr.row-off:hover{background:var(--shade)}
details summary::-webkit-details-marker{color:var(--ink-soft)}

/* ---------- سطر الإحداثيات مع زر النسخ ---------- */
.gps-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gps-line .coords{font-variant-numeric:tabular-nums;direction:ltr;overflow-wrap:anywhere}
.copy-btn{font-size:11px;padding:3px 9px;border-radius:6px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;line-height:1.6}
.copy-btn:hover{border-color:var(--brand);color:var(--brand)}
.copy-btn.copied{border-color:var(--ok);color:var(--ok)}

/* ---------- شريط الموقع الحي ---------- */
.live-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px;
  padding:9px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--shade);font-size:13px;color:var(--ink-soft)}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);flex:0 0 10px}
.live-dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(30,122,60,.6);animation:pulse 1.8s infinite}
.live-dot.wait{background:#f2c014}
.live-dot.off{background:var(--danger)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(30,122,60,0)}100%{box-shadow:0 0 0 0 rgba(30,122,60,0)}}
.map-legend .dot-me{background:#1668d6;border:2px solid #fff;box-shadow:0 0 0 1px #1668d6}
.map-legend .dot-dest{background:#2b7de9;border:2px solid #1b4f8f;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg)}
/* المسافة المتبقية داخل شريط الموقع الحي */
.live-bar strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- مرفقات المحادثة ---------- */
.msg-file{display:block;margin:2px 0 6px;text-decoration:none}
.msg-file img{max-width:100%;max-height:220px;border-radius:8px;display:block;
  border:1px solid var(--line)}
.msg-doc{display:inline-block;padding:7px 12px;border-radius:8px;background:var(--surface);
  border:1px solid var(--line-strong);font-size:13px;color:var(--ink)}
.msg-file:hover img{filter:brightness(1.04)}

/* المسافة داخل نافذة نقطة الخريطة */
.pin-dist{font-weight:600;color:var(--ink)}
.pin-popup .gps-line{gap:5px}
.pin-popup .copy-btn{padding:2px 7px}

/* ==================================================================
   نوافذ التأكيد والتنبيه (بديل confirm/alert الأصليين) — assets/js/modal.js
   ================================================================== */
.app-modal{
  border:0; border-radius:14px; padding:26px 24px 20px; max-width:420px;
  width:calc(100% - 32px); background:var(--surface); color:var(--ink);
  box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center;
  font-family:inherit; font-size:15px; line-height:1.65;
}
.app-modal::backdrop{background:rgba(10,20,32,.55)}
.app-modal .am-ic{font-size:38px;line-height:1;margin-bottom:8px}
.app-modal .am-title{font-size:18px;margin:0 0 10px;font-weight:600}
/* pre-line: الرسالة تكتب بـ textContent (لا HTML) فيبقى \n هو الوسيلة
   الوحيدة لتقسيمها فقرات، وبدون هذه القاعدة تنهار الأسطر إلى فقرة واحدة */
.app-modal .am-body{margin:0 0 6px;font-size:15px;color:var(--ink-soft);
  overflow-wrap:anywhere;white-space:pre-line;text-align:center}
.app-modal .am-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.app-modal .am-actions button{min-width:120px}
@media (max-width:420px){
  .app-modal .am-actions button{flex:1 1 100%}
}
/* حركة ظهور خفيفة */
.app-modal[open]{animation:amIn .16s ease-out}
@keyframes amIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- استمارة التعديل: إخفاء الحقول الاختيارية الفارغة ---------- */
.edit-lean .opt-empty{display:none !important}


/* ==================================================================
   الهاتف والأجهزة الضيقة — بوابة المنصب ولوحة الإدارة
   الهدف: لا فيضان أفقي، ولا عمود نص بعرض كلمتين.
   ================================================================== */
@media (max-width:640px){

  .wrap{padding:16px 12px 48px}

  /* الشريط العلوي: الاسم سطر، والأزرار صف كامل تحته */
  .topbar{align-items:flex-start}
  .topbar .tools{width:100%}
  .topbar .tools .btnlink,
  .topbar .tools button{padding:8px 12px;font-size:13px}
  .brand{font-size:15px;gap:8px}
  .brand img{height:30px}

  /* رأس أي بطاقة: عمود بدل صفين متزاحمين */
  .task-head{flex-direction:column;align-items:stretch;gap:10px}
  .task-head .tools{justify-content:flex-start;flex-wrap:wrap}

  /* صندوق إعادة الطلب وبطاقة مهمتي على الهاتف */
  .release-box{flex-direction:column;align-items:stretch;gap:10px}
  .release-box button{width:100%}
  .mine-actions{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;width:100%;min-width:0;gap:8px}
  .mine-actions > *{flex:1 1 140px}

  /* بطاقة الطلب المتاح: البيانات فوق والأزرار صف تحتها */
  .pool-item{flex-direction:column;gap:12px;padding:14px}
  .pool-main{flex:1 1 auto;width:100%}
  /* flex-basis في عمود يصير ارتفاعا — نعيده إلى auto وإلا شدت الأزرار */
  .pool-side{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-content:flex-start;
    width:100%;min-width:0;gap:8px}
  .pool-side > *{flex:1 1 130px}
  .pool-side .inline-form{flex:1 1 130px}
  .pool-side .inline-form button{width:100%}

  /* قوائم «مفتاح: قيمة» تصير سطرين بدل عمودين ضيقين */
  .kv{grid-template-columns:1fr;gap:0}
  .kv dt{margin-top:10px;font-size:12px}
  .kv dd{margin:2px 0 0}

  /* الأرقام الطويلة لا توسع الصفحة */
  .coords{overflow-wrap:anywhere}

  /* أزرار النماذج تملأ العرض لسهولة اللمس */
  .actions{gap:8px}
  .actions .primary,
  .actions .ghost,
  .actions .danger,
  .actions .btnlink{flex:1 1 100%;text-align:center}

  /* شريط الموقع الحي ومفتاح ألوان الخريطة */
  .live-bar{gap:6px;padding:8px 10px;font-size:12px}
  .map-legend{gap:10px;font-size:12px}

  /* بطاقة أقرب زبون */
  .near-wrap{gap:12px}
  .n-dist{font-size:26px;min-width:0}

  /* المحادثة: فقاعات أعرض على الشاشة الصغيرة */
  .msg{max-width:95%}

  /* تبويبات صفحة المهام */
  .wf-tabs{gap:6px}
  .wf-tab{padding:8px 12px;font-size:13px;flex:1 1 auto;text-align:center}

  /* صفوف الإجراءات في الجداول */
  .row-actions{flex-wrap:wrap;gap:6px}
}

/* شاشات صغيرة جدا */
@media (max-width:380px){
  .pool-side > *{flex:1 1 100%}
  .filters .field{min-width:100%}
}

/* ==================================================================
   الإشعارات — الجرس، اللوحة المنسدلة، والتنبيه العائم
   assets/js/notify.js + includes/views/notify_bell.php
   ================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.notif{position:relative}
/* الجرس أيقونة SVG ترث لون الزر — أنماط الحجم تأتي من .btnlink.ico */
.notif-bell{transform-origin:50% 10%}
/* نبضة هادئة ما دام هناك غير مقروء */
.notif-btn.has-new{border-color:var(--danger);color:var(--danger)}
.notif-btn.has-new .notif-bell{animation:notif-ring 2.4s ease-in-out infinite}
@keyframes notif-ring{
  0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(14deg)}  80%{transform:rotate(-12deg)}
  84%{transform:rotate(9deg)}   88%{transform:rotate(-6deg)}  92%{transform:rotate(0)}
}
@media (prefers-reduced-motion: reduce){ .notif-btn.has-new .notif-bell{animation:none} }

/* ---------- اللوحة المنسدلة ---------- */
.notif-panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:340px;max-width:92vw;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(10,20,32,.18);z-index:60;overflow:hidden;text-align:start}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .notif-panel{box-shadow:0 14px 40px rgba(0,0,0,.5)}
}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--shade)}
.notif-head strong{font-size:15px}
.notif-head-tools{display:flex;gap:6px;align-items:center}
.notif-head-tools button{background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font-family:inherit;font-size:12px;padding:4px 6px;border-radius:6px}
.notif-head-tools button:hover{color:var(--brand);background:rgba(15,111,108,.09)}
.notif-mute{font-size:15px !important}

.notif-list{max-height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain}
.notif-empty{margin:0;padding:26px 14px;text-align:center;color:var(--ink-soft);font-size:13px}

.notif-item{display:flex;gap:10px;padding:11px 14px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);align-items:flex-start}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--shade)}
.notif-item.is-new{background:rgba(15,111,108,.07)}
.notif-item.is-new:hover{background:rgba(15,111,108,.12)}
.notif-ico{font-size:18px;line-height:1.3;flex:0 0 auto}
.notif-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.notif-text strong{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.notif-text span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.notif-text time{font-size:11px;color:var(--ink-soft);opacity:.8}

.notif-foot{padding:11px 14px;border-top:1px solid var(--line);background:var(--shade)}
.notif-enable{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;font-family:inherit;font-size:13px;cursor:pointer}
.notif-enable:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.notif-hint{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
.notif-hint.bad{color:var(--danger)}
.notif-hint:empty{display:none}

/* ---------- تنبيه عائم عند وصول جديد واللوحة مفتوحة ---------- */
.notif-toast{position:fixed;inset-inline-end:16px;bottom:16px;z-index:80;
  display:flex;gap:10px;align-items:flex-start;max-width:min(360px,calc(100vw - 32px));
  padding:13px 15px;border-radius:12px;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 16px 44px rgba(10,20,32,.22);
  transform:translateY(20px);opacity:0;transition:transform .32s ease,opacity .32s ease}
.notif-toast.on{transform:translateY(0);opacity:1}
.notif-toast .notif-text strong{font-size:14px}
@media (prefers-reduced-motion: reduce){ .notif-toast{transition:none} }

/* ---------- الهاتف: اللوحة بعرض الشاشة ---------- */
@media (max-width:620px){
  .notif{position:static}
  /* ورقة سفلية: لا تتأثر بارتفاع الشريط العلوي حين تلتف أزراره */
  .notif-panel{position:fixed;inset-inline:8px;top:auto;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    width:auto;max-width:none;max-height:72vh}
  .notif-list{max-height:52vh}
  .notif-toast{inset-inline:12px;bottom:12px;max-width:none}
}

/* نص تلميح بلون التحذير — تستخدم في نتيجة الإشعار التجريبي */
.hint.bad{color:var(--danger)}

/* ==================================================================
   أزرار الشريط العلوي بالأيقونات — includes/icons.php
   ================================================================== */
.ic{display:block;flex:0 0 auto}

/* زر أيقونة: مربع متساوي الضلعين، والنص داخله مخفي بصريا لا محذوفا
   (يبقى لقارئ الشاشة، ويظهر تلميح title عند وقوف الفأرة) */
.btnlink.ico{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:42px;height:42px;padding:0;line-height:1;cursor:pointer;
  font-family:inherit;position:relative
}
.btnlink.ico:hover{border-color:var(--brand);color:var(--brand);background:rgba(15,111,108,.07)}
.btnlink.ico:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* زر «تسجيل طلب جديد» يبقى مميزا باللون ولو صار أيقونة */
.btnlink.btn-new.ico{background:var(--brand);border-color:var(--brand);color:#fff}
.btnlink.btn-new.ico:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}

/* العداد الأحمر يركب على زاوية الأيقونة بدل أن يزيح النص */
.btnlink.ico .wf-count{
  position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;
  padding:0 5px;font-size:11px;line-height:18px;border-radius:999px;
  background:var(--danger);color:#fff;text-align:center;
  box-shadow:0 0 0 2px var(--page)
}

/* الشريط صار أضيق: نقارب الأزرار ونسمح للاسم بالانكماش */
.topbar .tools{gap:6px}
.topbar .tools .hint{margin-inline-end:4px}

@media (max-width:620px){
  /* على الهاتف تصبح الأيقونات أصغر قليلا فيتسع الصف كله بلا التفاف */
  .topbar .tools .btnlink.ico{width:38px;height:38px}
  .topbar .tools{gap:5px}
}

/* ==================================================================
   خريطة الإدارة — كل الطلبات بكل مراحلها (admin/map.php)
   ================================================================== */

/* --------------------------------------------------------------
   لوحة ألوان المراحل السبع.
   الدرجات مأخوذة من شارات الحالة نفسها في اللوحة حتى لا يتعلم
   الموظف لونين للشيء الواحد: «جاري العمل» أزرق كشارة b-progress،
   و«بانتظار تم» بنفسجي كشارة b-postponed للمرحلة reported.
   والتدرج موزع على عجلة الألوان بفواصل واسعة:
     أحمر 8° · أصفر 47° · أخضر 140° · أزرق 212° · بنفسجي 262° · وردي 333°
   والرمادي بلا إشباع، فلا يشتبه اثنان ولو على شاشة صغيرة.
   -------------------------------------------------------------- */
.pin-pending{background:#8e9aa8;border:2px solid #4c5866}    /* بانتظار الموافقة */
.pin-postponed{background:#db2777;border:2px solid #8a1049}  /* مؤجل */
.pin-claimed{background:#2b7de9;border:2px solid #1b4f8f}    /* جاري العمل */
.pin-reported{background:#7b3fe4;border:2px solid #4b1fa8}   /* بانتظار «تم» */
.pin-rejected{background:#d64534;border:2px solid #8c2a1d}   /* مرفوض أو ملغي */
/* المتاح (أصفر) والمنجز (أخضر) معرفان أعلاه مع خريطة المنصب */

.map-legend .dot-pending{background:#8e9aa8;border:2px solid #4c5866}
.map-legend .dot-postponed{background:#db2777;border:2px solid #8a1049}
.map-legend .dot-claimed{background:#2b7de9;border:2px solid #1b4f8f}
.map-legend .dot-reported{background:#7b3fe4;border:2px solid #4b1fa8}
.map-legend .dot-rejected{background:#d64534;border:2px solid #8c2a1d}

/* شارات نافذة النقطة — بادئة mb- خاصة بالخريطة حتى لا تدهس
   شارات حالات الطلب العامة (b-pending وb-postponed وb-rejected) */
.mb-pending{background:#e7e9ee;color:#4a5566}
.mb-ready{background:#ffe3cc;color:#8a3407}
.mb-postponed{background:#fbdcea;color:#8a1049}
.mb-available{background:#fdf3d0;color:#6d5000}
.mb-claimed{background:#dbeafe;color:#1b4f8f}
.mb-reported{background:#ece4fb;color:#5a3a9c}
.mb-done{background:#d9f2e0;color:#14602f}
.mb-rejected{background:#fbe0dc;color:#8c2a1d}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mb-pending{background:rgba(142,154,168,.20);color:#c2cddb}
  :root:not([data-theme="light"]) .mb-ready{background:rgba(232,89,12,.22);color:#ffc078}
  :root:not([data-theme="light"]) .mb-postponed{background:rgba(219,39,119,.20);color:#ff8fc0}
  :root:not([data-theme="light"]) .mb-available{background:rgba(242,192,20,.16);color:#f0c060}
  :root:not([data-theme="light"]) .mb-claimed{background:rgba(43,125,233,.18);color:#8fc0ff}
  :root:not([data-theme="light"]) .mb-reported{background:rgba(123,63,228,.18);color:#c9b3ff}
  :root:not([data-theme="light"]) .mb-done{background:rgba(46,162,79,.18);color:#6fdc96}
  :root:not([data-theme="light"]) .mb-rejected{background:rgba(214,69,52,.18);color:#ff9d8f}
}

/* مفتاح الألوان يعمل أزرارا للفلترة */
.map-filter{flex-wrap:wrap}
.map-filter button{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 11px;border-radius:999px;font-family:inherit;font-size:12.5px;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);
  opacity:.45;transition:opacity .15s ease,border-color .15s ease
}
.map-filter button.on{opacity:1;border-color:var(--brand);color:var(--ink)}
.map-filter button:hover{border-color:var(--brand)}
.map-filter button b{font-weight:600;font-variant-numeric:tabular-nums}

/* اختيار الزون في ترويسة البطاقة */
.map-zone{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft)}
.map-zone select{
  padding:6px 10px;border-radius:8px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:13px
}

@media (max-width:620px){
  .map-filter button{font-size:11.5px;padding:4px 9px}
  .map-zone{width:100%}
  .map-zone select{flex:1 1 auto}
}

/* ==================================================================
   «متوفر الآن» — أسبقية التنصيب
   تؤشرها الإدارة، فتميز عند المنصب بلون متحرك في القائمة والخريطة.
   ================================================================== */
:root{ --ready:#e8590c; --ready-ink:#8a3407; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ready:#ff922b; --ready-ink:#ffc078; }
}

/* ---------- الشارة ---------- */
.badge.b-ready-now{
  background:var(--ready);color:#fff;font-weight:600;
  animation:ready-blink 1.6s ease-in-out infinite
}
@keyframes ready-blink{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* ---------- البطاقة في قائمة المنصب ولوحة الإدارة ---------- */
.pool-item.is-ready-now,
.task-card.is-ready-now{
  border-color:var(--ready);
  animation:ready-glow 2s ease-in-out infinite
}
@keyframes ready-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,89,12,.45) }
  50%    { box-shadow:0 0 0 6px rgba(232,89,12,0) }
}
/* شريط جانبي يلفت النظر حتى في القائمة الطويلة */
.pool-item.is-ready-now{position:relative;overflow:hidden}
.pool-item.is-ready-now::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--ready)
}

/* ---------- مفتاح «متوفر الآن» عند الإدارة ---------- */
.ready-toggle{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 13px;border-radius:999px;font-size:13px;
  border:1px solid var(--line-strong);color:var(--ink-soft);background:transparent
}
.ready-toggle:hover{border-color:var(--ready);color:var(--ready)}
.ready-toggle input{width:16px;height:16px;margin:0;accent-color:var(--ready);cursor:pointer}
.ready-toggle.on{border-color:var(--ready);color:var(--ready);background:rgba(232,89,12,.08);
  font-weight:600}

/* ---------- نقطة الخريطة ---------- */
.pin-ready{background:#e8590c;border:2px solid #8a3407;animation:pin-pulse 1.5s ease-out infinite}
.map-legend .dot-ready{background:#e8590c;border:2px solid #8a3407}
@keyframes pin-pulse{
  0%  { box-shadow:0 0 0 0 rgba(232,89,12,.65) }
  70% { box-shadow:0 0 0 12px rgba(232,89,12,0) }
  100%{ box-shadow:0 0 0 0 rgba(232,89,12,0) }
}

/* من يطلب تقليل الحركة يرى اللون والشريط بلا أي نبض */
@media (prefers-reduced-motion: reduce){
  .badge.b-ready-now,
  .pool-item.is-ready-now,
  .task-card.is-ready-now,
  .pin-ready{ animation:none }
  .pool-item.is-ready-now,
  .task-card.is-ready-now{ box-shadow:0 0 0 2px rgba(232,89,12,.35) }
}

/* ==================================================================
   «عطل في التقسيم» — الطلب يبقى ظاهرا مظللا، بلا هاتف ولا حجز
   عند المنصب: includes في installer/index.php (render_pool_card)
   عند الإدارة: admin/tasks.php تبويب «متاحة للمنصبين»
   ================================================================== */
:root{ --fault:#b42318; --fault-ink:#8a1c12; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --fault:#ff8a7a; --fault-ink:#ffb4a8; }
}

/* ---------- البطاقة: ظل خفيف فوقها + نبض هادئ ---------- */
.pool-item.is-fault,
.task-card.is-fault{
  position:relative;
  border-color:rgba(180,35,24,.40);
  background:linear-gradient(rgba(100,116,139,.12),rgba(100,116,139,.12)),var(--surface);
  animation:fault-glow 2.4s ease-in-out infinite
}
@keyframes fault-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(180,35,24,.28) }
  50%    { box-shadow:0 0 0 5px rgba(180,35,24,0) }
}
/* محتوى المعطوب باهت، والرسالة وحدها واضحة */
.pool-item.is-fault .pool-main > *:not(.fault-banner){opacity:.62}
.pool-item.is-fault .task-code{opacity:.8}

/* ---------- الرسالة: سطر واحد بنقطة حية ---------- */
.fault-banner{
  display:flex;align-items:center;gap:9px;margin-top:8px;
  font-size:13.5px;font-weight:600;color:var(--fault-ink)
}
.fault-dot{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--fault);
  animation:fault-pulse 1.4s ease-out infinite
}
.fault-text{animation:ready-blink 2s ease-in-out infinite}
@keyframes fault-pulse{
  0%  { box-shadow:0 0 0 0 rgba(180,35,24,.55) }
  70% { box-shadow:0 0 0 9px rgba(180,35,24,0) }
  100%{ box-shadow:0 0 0 0 rgba(180,35,24,0) }
}

/* ---------- شارة عند الإدارة ---------- */
.badge.b-fault{
  background:rgba(180,35,24,.12);color:var(--fault-ink);font-weight:600;
  animation:ready-blink 2s ease-in-out infinite
}

/* ---------- أزرار الإدارة ---------- */
.fault-toggle{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 13px;border-radius:999px;font-size:13px;font-family:inherit;
  border:1px solid var(--line-strong);color:var(--ink-soft);background:transparent
}
.fault-toggle:hover{border-color:var(--fault);color:var(--fault)}
.fault-toggle.fixed{border-color:var(--ok);color:var(--ok);font-weight:600}
.fault-toggle.fixed:hover{background:rgba(30,122,60,.08)}

/* ---------- نقطة خريطة الإدارة (المعطوب لا يظهر على خريطة المنصب) ---------- */
.pin-fault{background:#1f2937;border:2px solid #ef4444}
.map-legend .dot-fault{background:#1f2937;border:2px solid #ef4444}
.mb-fault{background:#fee2e2;color:#991b1b}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mb-fault{background:rgba(239,68,68,.20);color:#fca5a5}
}

/* من يطلب تقليل الحركة: اللون والظل يبقيان بلا أي نبض */
@media (prefers-reduced-motion: reduce){
  .pool-item.is-fault,
  .task-card.is-fault,
  .fault-dot,
  .fault-text,
  .badge.b-fault{ animation:none }
}

/* ==================================================================
   صور تقرير التنصيب — المصغرات والمعاينة (includes/views/report_photos.php)
   ================================================================== */
.rphotos{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.rphotos > a,
.rpick-item{
  position:relative;display:block;width:96px;height:96px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line-strong);background:var(--shade)
}
.rphotos img{width:100%;height:100%;object-fit:cover;display:block}
.rphotos > a:hover{border-color:var(--brand)}

/* زر إزالة صورة قبل الإرسال */
.rpick-del{
  position:absolute;top:3px;inset-inline-end:3px;width:24px;height:24px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(15,30,50,.72);color:#fff;font-size:17px;line-height:1;
  display:grid;place-items:center;padding:0
}
.rpick-del:hover{background:var(--danger)}

#photosNote.bad{color:var(--danger)}

@media (max-width:620px){
  .rphotos > a,.rpick-item{width:calc(33.333% - 6px);height:auto;aspect-ratio:1/1}
}

/* ==================================================================
   ملاحظات الطلب — الزر ومعاينة آخر ملاحظة والنافذة (assets/js/notes.js)
   ================================================================== */
:root{ --note:#b45309; --note-bg:rgba(180,83,9,.09); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --note:#fbbf24; --note-bg:rgba(251,191,36,.12); }
}

/* وجود ملاحظات يلون الزر فيلفت النظر قبل الاتصال */
.notes-btn.has-notes{border-color:var(--note);color:var(--note);font-weight:600;background:var(--note-bg)}

/* آخر ملاحظة تحت بيانات البطاقة */
.card-note{
  margin-top:8px;padding:6px 10px;border-inline-start:3px solid var(--note);
  background:var(--note-bg);border-radius:6px;font-size:12.5px;color:var(--ink);
  overflow-wrap:anywhere
}

/* ---------- النافذة (تعيد استعمال .app-modal) ---------- */
.notes-modal{max-width:520px;text-align:start}
.notes-modal .am-title{text-align:center}
.nm-list{max-height:min(42vh,340px);overflow-y:auto;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.nm-empty{margin:0;padding:14px 8px;text-align:center;color:var(--ink-soft);font-size:13.5px}
.nm-empty.bad{color:var(--danger)}
.nm-note{padding:9px 12px;border-radius:10px;background:var(--shade);border:1px solid var(--line)}
.nm-note.mine{background:var(--note-bg);border-color:transparent}
.nm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.nm-role{color:var(--ink-soft)}
.nm-head time{color:var(--ink-soft);margin-inline-start:auto;font-size:11.5px}
.nm-del{
  border:0;background:none;cursor:pointer;color:var(--ink-soft);font-size:19px;line-height:1;padding:0 4px
}
.nm-del:hover{color:var(--danger)}
.nm-body{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}

.nm-form textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;resize:vertical;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:14px
}
.nm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.nm-chip{
  padding:5px 11px;border-radius:999px;font-family:inherit;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft)
}
.nm-chip:hover{border-color:var(--brand);color:var(--brand)}
.nm-foot{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--ink-soft)}
.nm-msg.bad{color:var(--danger)}
.nm-ro{text-align:center;margin:0}

/* ---------- نافذة الملاحظة الإجبارية بعد الاتصال (assets/js/notes.js) ---------- */
.nm-intro{margin:0 0 12px;text-align:center;color:var(--note);font-weight:600;font-size:13.5px;line-height:1.7}
.notes-modal.forced{border:2px solid var(--note)}


/* ==================================================================
   الترويج — حافز المنصب (includes/workflow.php: wf_referral_*)
   منصب يسجل زبونا فيبقى طلبه له وحده مدة بعد موافقة الإدارة.
   ================================================================== */
:root{ --ref:#0d9488; --ref-ink:#ffffff; --ref-bg:rgba(13,148,136,.09); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ref:#2dd4bf; --ref-ink:#042f2c; --ref-bg:rgba(45,212,191,.12); }
}

.badge.b-referral{background:var(--ref);color:var(--ref-ink);font-weight:600}

/* بطاقة حصرية لي في قائمة المنصب */
.pool-item.is-referral{
  border-color:var(--ref);
  background:linear-gradient(var(--ref-bg),var(--ref-bg)),var(--surface)
}
.pool-item.is-referral::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--ref)
}
.pool-item.is-referral{position:relative;overflow:hidden}

/* شريط الاستمارة في وضع الترويج */
.promo-banner{border-color:var(--ref);background:var(--ref-bg)}


/* ==================================================================
   زر «إضافة زبون جديد» في بوابة المنصب — بارز عمدا ليجذب الانتباه
   ليلا ونهارا. تدرج تيل ← أخضر بحرف أبيض (تباين >٥:١)، وفي الوضع الليلي
   تدرج فاتح بحرف داكن حتى لا يغرق في الخلفية. نبضة هادئة تحيط به.
   ================================================================== */
:root{
  --add-from:#0f766e; --add-to:#15803d; --add-ink:#ffffff;
  --add-glow:rgba(21,128,61,.55); --add-glow-soft:rgba(21,128,61,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --add-from:#2dd4bf; --add-to:#4ade80; --add-ink:#032b27;
    --add-glow:rgba(74,222,128,.55); --add-glow-soft:rgba(74,222,128,.30);
  }
}

.btnlink.btn-add-customer{
  display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;
  background:linear-gradient(135deg,var(--add-from),var(--add-to));
  border:0;color:var(--add-ink);font-weight:700;font-size:14px;line-height:1;
  box-shadow:0 2px 10px var(--add-glow-soft);
  /* ظهور قافز مرة عند فتح الصفحة ثم نبضة دائمة هادئة */
  animation:add-pop .7s cubic-bezier(.2,.9,.3,1.4) 1,
            add-pulse 2.4s ease-out .8s infinite
}
.btnlink.btn-add-customer:hover{color:var(--add-ink);filter:brightness(1.08);border:0}
.btnlink.btn-add-customer:focus-visible{outline:3px solid var(--add-glow);outline-offset:3px}
.btnlink.btn-add-customer .ic{width:20px;height:20px;stroke-width:2.4}

@keyframes add-pop{
  0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.12);opacity:1} 100%{transform:scale(1)}
}
@keyframes add-pulse{
  0%  { box-shadow:0 2px 10px var(--add-glow-soft), 0 0 0 0 var(--add-glow) }
  70% { box-shadow:0 2px 10px var(--add-glow-soft), 0 0 0 14px rgba(0,0,0,0) }
  100%{ box-shadow:0 2px 10px var(--add-glow-soft), 0 0 0 0 rgba(0,0,0,0) }
}
@media (prefers-reduced-motion: reduce){
  .btnlink.btn-add-customer{animation:none;box-shadow:0 0 0 3px var(--add-glow-soft)}
}
@media (max-width:620px){
  .topbar .tools .btnlink.btn-add-customer{padding:0 14px;font-size:13px;min-height:40px}
}

/* ==================================================================
   البحث في قائمة الطلبات (assets/js/task-search.js)
   ================================================================== */
.task-search{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.task-search input{
  flex:1 1 260px;min-width:0;padding:11px 14px;border-radius:10px;font-family:inherit;font-size:15px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)
}
.task-search input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.task-search-count{white-space:nowrap}
.task-search-empty{text-align:center;color:var(--ink-soft);margin:14px 0;font-size:14px}
.search-hide{display:none !important}


/* ==================================================================
   العد التنازلي لحصرية الطلب الترويجي (assets/js/countdown.js)
   آخر ٣ ساعات برتقالي، وآخر ساعة أحمر نابض، وبعد الانتهاء رمادي.
   ================================================================== */
.cd{
  display:inline-block;direction:ltr;unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em
}
.cd.urgent{color:var(--ready)}
.cd.critical{color:var(--danger);animation:ready-blink 1s ease-in-out infinite}
.cd.done{color:var(--ink-soft);animation:none}

/* داخل الشارة الخضراء (حصري لك): اللون يرث، والتنبيه بخلفية حتى لا يضيع على التدرج */
.badge.b-referral .cd{color:inherit}
.badge.b-referral .cd.urgent{background:var(--ready);color:#fff;border-radius:6px;padding:0 6px}
.badge.b-referral .cd.critical{background:var(--danger);color:#fff;border-radius:6px;padding:0 6px}
.badge.b-referral .cd.done{background:none;color:inherit;opacity:.7}

@media (prefers-reduced-motion: reduce){ .cd.critical{animation:none} }



/* ==================================================================
   الطريق على الخريطة (assets/js/route.js)
   ================================================================== */
.route-info{font-weight:700;color:#0a8f4f}
.route-info.wait{color:var(--ink-soft);font-weight:400}
.route-info.fallback{color:var(--danger);font-weight:400}


/* صفة المروج في الحسابات */
.chk{display:flex;gap:6px;align-items:center;font-weight:500;cursor:pointer}
.chk input{width:auto}


/* ==================================================================
   صفحة المكافآت (admin/rewards.php)
   ================================================================== */
/* فلتر الشهر + CSV في صف واحد متراصّ (القائمة كانت تأخذ العرض كله فينزل الزر تحتها) */
.rw-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rw-tools .inline-form{flex-wrap:nowrap}
.rw-tools select{width:auto;min-width:150px}
.rw-csv{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:9px 14px}
.rw-csv .ic{width:16px;height:16px;flex:none}

/* اختيار الحسابات كاردات */
.acct-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:8px}
.acct-card{
  position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);
  transition:border-color .15s, box-shadow .15s, background .15s
}
.acct-card[hidden]{display:none}
.acct-card input{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:18px;height:18px;margin:0}
.acct-card:hover{border-color:var(--brand)}
.acct-card.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(15,111,108,.28);background:rgba(15,111,108,.07)}
.acct-card .ac-name{font-weight:700;font-size:15px;padding-inline-end:26px}
.acct-card .ac-user{font-size:12px;color:var(--ink-soft)}
.acct-card .ac-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.acct-card .ac-rate{font-size:13px;margin-top:4px}

/* بطاقات التقرير */
.rw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}
.rw-card{
  display:flex;flex-direction:column;gap:6px;padding:14px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);
  transition:border-color .15s, box-shadow .15s
}
.rw-card:hover{border-color:var(--brand)}
.rw-card.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(15,111,108,.28)}
.rw-card .rc-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rw-card .rc-name{font-weight:700;font-size:15px}
.rw-card .rc-user{font-size:12px;color:var(--ink-soft)}
.rw-card .rc-row{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.rw-card .rc-row span:first-child{color:var(--ink-soft)}
.rw-card .rc-net{border-top:1px solid var(--line);padding-top:6px;margin-top:2px;font-size:15px}
.rw-total{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;
  border:1px dashed var(--line-strong);border-radius:10px;font-size:14px
}
.acct-report{margin-top:8px;scroll-margin-top:12px}

.rw-balance{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:10px;background:rgba(15,111,108,.07);font-size:14px
}
.rw-balance .rb-rem{margin-inline-start:auto;font-size:16px}
.rw-balance.neg{background:rgba(220,38,38,.08);border-color:var(--danger)}
.rw-balance small{color:var(--danger)}


/* ==================================================================
   المكافآت: التابات والبوابة ونموذج الدفعة ونافذة الرمز
   ================================================================== */
.rw-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 12px}
.rw-tabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;max-width:100%;border-bottom:1px solid var(--line);
  scrollbar-width:none;-ms-overflow-style:none}
.rw-tabs::-webkit-scrollbar{display:none;width:0;height:0}
.rw-tab{
  padding:10px 18px;white-space:nowrap;text-decoration:none;color:var(--ink-soft);font-weight:600;
  border-bottom:3px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0;
  transition:color .15s, background .15s, border-color .15s
}
.rw-tab:hover{color:var(--brand);background:rgba(15,111,108,.06)}
.rw-tab.on{color:var(--brand);border-bottom-color:var(--brand);background:rgba(15,111,108,.08)}
.rw-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.rw-mode{display:flex;gap:8px;align-items:center;margin:0}

.rw-gate{max-width:440px;margin:56px auto 0}
.rw-gate h1{margin:0 0 6px;font-size:22px}
.rw-gate .actions{display:flex;gap:10px;flex-wrap:wrap}
.rw-locked{max-width:560px}
.rw-warn{
  margin:6px 0 0;padding:10px 14px;border:1px solid var(--danger);border-radius:10px;
  background:rgba(220,38,38,.07);font-size:14px
}
.rw-code-card{margin-top:16px}
.rw-code-card summary{cursor:pointer;font-weight:600}

/* نموذج التسديد: صف مرن */
.rw-pay{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,200px) minmax(180px,2fr);gap:12px;align-items:end}
.rw-pay .actions{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;margin:0}
@media (max-width:640px){ .rw-pay{grid-template-columns:1fr} }

/* نافذة رمز التأكيد */
.rw-code-dlg{text-align:start;max-width:380px}
.rw-code-dlg .am-title{margin:0 0 8px;font-size:18px}
.rw-code-dlg .am-body{margin-bottom:12px;font-size:14px;color:var(--ink-soft)}
.rw-code-dlg .rwc-form input{width:100%;margin-bottom:12px;letter-spacing:.2em;text-align:center}
.rw-code-dlg .am-actions{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap}
@media (prefers-reduced-motion: no-preference){
  .rw-code-dlg[open]{animation:rw-pop .18s cubic-bezier(.16,1,.3,1)}
  @keyframes rw-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
}
.rw-card:focus-visible,.acct-card:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.rw-card .rc-net strong,.rw-balance .rb-rem strong{font-variant-numeric:tabular-nums}

/* حظر المحاولات الخاطئة + خطأ الرمز داخل النافذة */
.rw-lock{margin-top:12px}
.rw-lock .cd{font-size:16px}
.rw-code-dlg .rwc-err{margin:-4px 0 12px;padding:8px 12px;border:1px solid var(--danger);border-radius:8px;
  background:rgba(220,38,38,.08);color:var(--danger);font-size:14px}
.rw-code-dlg .rwc-err[hidden]{display:none}
.rw-code-dlg input[aria-invalid="true"]{border-color:var(--danger)}
@media (prefers-reduced-motion: no-preference){
  .rw-code-dlg.shake{animation:rw-shake .35s cubic-bezier(.36,.07,.19,.97)}
  @keyframes rw-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
}

.acct-card .ac-done{font-size:12px;color:var(--ink-soft)}
.acct-card .ac-done strong{color:var(--ink);font-variant-numeric:tabular-nums}


/* ==================================================================
   جداول المنصب والمروج: بطاقات على الهاتف (≤ 640px) بدل جدول عريض يُمرَّر أفقياً
   (يُستثنى مدير النظام). كل td يحمل data-label باسم عموده، والعمود الأول عنوان البطاقة.
   ================================================================== */
@media (max-width:640px){
  .tablewrap.rwrap{border:0;overflow:visible;background:transparent;margin-top:12px}
  .rtable{min-width:0;max-width:100%}                        /* الجدول العام له min-width:820px */
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tbody tr:hover{background:var(--surface)}
  .rtable thead{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0                 /* مخفي بصرياً، مقروء للقارئات */
  }
  .rtable tr{
    margin:0 0 10px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;
    background:var(--surface);box-shadow:0 1px 2px rgba(15,30,50,.06)
  }
  .rtable td{
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    padding:7px 0;border:0;border-bottom:1px dashed var(--line);text-align:start;
    overflow-wrap:anywhere
  }
  .rtable td:last-child{border-bottom:0}
  .rtable td::before{
    content:attr(data-label);flex:0 0 auto;max-width:42%;
    font-size:12px;font-weight:500;color:var(--ink-soft);padding-top:2px
  }
  /* العمود الأول (رقم الطلب) عنوان البطاقة */
  .rtable td.rt-head{
    justify-content:flex-start;padding:2px 0 8px;font-size:15px;font-weight:700;
    border-bottom:1px solid var(--line);margin-bottom:2px
  }
  .rtable td.rt-head::before{display:none}
  /* قيم لاتينية/أرقام (ltr): الاتجاه ltr لقراءتها سليمة، وrow-reverse يبقي العنوان على اليمين كبقية البطاقة */
  .rtable td.ltr{direction:ltr;flex-direction:row-reverse}
  .rtable td.ltr::before{direction:rtl}
  .rtable td.rt-head.ltr{justify-content:flex-start}
}