/* admin.css — حرفي من الخطة قسم 8: خلفية #F2F1EE، sidebar #121417، نشط شريط volt يمين */
body.admin { background: var(--admin-bg); }

.alayout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
/* الشريط الجانبي (كمبيوتر): ثابت بمكانه بارتفاع الشاشة وتمرير داخلي — التفاصيل بآخر الملف («القائمة الجانبية على الكمبيوتر») */
.aside { background: var(--chrome); color: var(--on-chrome-2); padding-block: 16px; position: -webkit-sticky; position: sticky; top: 0; align-self: start; min-height: 100vh; }
.aside .brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; border-bottom: var(--bw-1) solid var(--chrome-hover); margin-bottom: 16px; }
.aside .brand img { width: 32px; height: 32px; border-radius: 50%; background: #0B0B0D; object-fit: contain; flex-shrink: 0; }
.aside .brand b { font-family: var(--font-head); font-size: 15px; color: var(--on-chrome); line-height: 1.3; }
.aside .brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--ink-3); }
.aside-x { display: none; }
/* شريط الموبايل العلوي — مخفي على الشاشات الكبيرة */
.atop { display: none; }
.aside nav .grp { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); padding: 14px 16px 6px; }
/* فاصل شعري بين المجموعات (المبيعات/الكتالوج/المالية/الإدارة) */
.aside nav .grp-fold { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: start; min-height: 40px; }
.aside nav .grp-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.aside nav .grp-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.aside nav .grp-fold:hover { color: var(--on-chrome); }
.aside nav > div + div { margin-top: 8px; border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--on-chrome-2) 16%, transparent); }
.aside nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; color: var(--on-chrome-2);
  position: relative; border-inline-end: 3px solid transparent;
}
.aside nav a .mi { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.aside nav a:hover { background: var(--chrome-soft); }
.aside nav a:hover .mi { opacity: 1; }
/* النشط: شريط volt جهة النهاية (PLAN §8) + نص volt بوزن أثقل + أيقونة كاملة الوضوح */
.aside nav a.on { background: var(--chrome-soft); background: color-mix(in srgb, var(--volt) 14%, var(--chrome-soft)); border-inline-end-color: var(--volt); color: var(--volt); font-weight: 700; }
.aside nav a { transition: background-color .18s ease, color .18s ease; }
.aside nav a:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.aside nav a.on .mi { opacity: 1; }
.aside nav a .bdg { margin-inline-start: auto; background: var(--deal); color: var(--on-deal); border-radius: var(--radius-pill); font-size: 11px; padding: 1px 8px; }
/* أيقونات أزرار اللوحة من الـsprite نفسه (تناسق مع القائمة الجانبية) */
.btn .mi { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.aside .who { padding: 16px; border-top: var(--bw-1) solid var(--chrome-hover); margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.aside .who b { color: var(--on-chrome-2); display: block; }
.bellw { position: relative; padding: 0 12px 12px; }
.bell { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--chrome-soft); color: var(--on-chrome-2); border: var(--bw-1) solid var(--chrome-hover); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; position: relative; }
.bell .bdg { margin-inline-start: auto; background: var(--deal); color: var(--on-deal); border-radius: var(--radius-pill); font-size: 11px; padding: 1px 8px; }
.notif-panel { position: fixed; top: 64px; inset-inline-start: 252px; width: 380px; max-height: 70vh; overflow-y: auto; background: var(--white); color: var(--text); border: var(--bw-2) solid var(--edge); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); z-index: 950; }
.np-h { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: var(--bw-2) solid var(--edge); font-size: 13px; }
.np-h span { color: var(--ink-3); }
.np-item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: var(--bw-1) solid var(--line); font-size: 13px; }
.np-item:hover { background: var(--paper); }
.np-item.fresh { border-inline-start: 3px solid var(--volt); }
.np-item .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.np-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.np-t b { font-weight: 700; }
.np-t span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-when { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.amain { padding: 24px 32px; }
.ahead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.ahead h1 { font-size: 28px; }
.ahead > div { flex-wrap: wrap; }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi { min-width: 0; background: var(--white); border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; }
.kpi .lb { font-size: 13px; color: var(--ink-2); }
.kpi .v { font-family: var(--font-head); font-weight: 800; font-size: 28px; line-height: 1.3; }
.kpi .hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
a.kpi:hover { border-color: var(--edge); }

.panel { background: var(--white); border: var(--bw-1) solid var(--line); border-radius: var(--radius-lg); margin-bottom: 24px; }
/* اللوحة الجانبية تستعمل نفس رأس اللوحة — بلا هذا السطر يرث h2 حجم ٢٨px فيزاحم الأزرار */
:is(.panel, .side-panel) .ph { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: var(--bw-2) solid var(--edge); gap: 12px; flex-wrap: wrap; }
:is(.panel, .side-panel) .ph h2 { font-size: 18px; }
.panel .pb { padding: 16px; }

.filters-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filters-row input, .filters-row select { border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px; background: var(--paper); }

/* لوحة تفاصيل جانبية */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.side-panel { background: var(--white); border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); position: sticky; top: 16px; }
.pay-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); margin-block: 12px; }
.pay-compare > div { padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
.pay-compare > div:first-child { border-inline-end: var(--bw-1) solid var(--line); background: var(--paper); }
.pay-compare .hd { font-weight: 700; font-size: 12px; color: var(--ink-2); border-bottom: var(--bw-1) solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }
.pay-note { background: var(--paper); border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; }
.match-ok { color: var(--stock-ok); font-weight: 700; }
.match-no { color: var(--deal); font-weight: 700; }

/* بطاقة دفعة داخل تفاصيل الطلب */
.pay-card { border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.pay-card .pc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.pay-card .pc-rows > div { display: flex; justify-content: space-between; gap: 10px; padding-block: 2px; border-bottom: var(--bw-1) dashed var(--line); }
.pay-card .pc-rows > div > span:first-child { color: var(--ink-3); flex-shrink: 0; }
.pay-card .pc-receipt { margin-top: 8px; }
.pay-card .pc-receipt img { max-width: 100%; max-height: 260px; display: block; margin-inline: auto; border: var(--bw-1) solid var(--line); background: var(--img-bg); }

/* مخططات SVG */
.chart-wrap { overflow-x: auto; }
/* على الموبايل ينكمش المخطط بدل ما يجبر تمريراً أفقياً ويبان مقطوعاً */
.chart-svg { min-width: min(600px, 100%); }
.chart-empty { padding: 28px 8px; text-align: center; color: var(--ink-3); font-size: 14px; }
.bar-tip { visibility: hidden; }
.bar:hover .bar-tip { visibility: visible; }

/* اختيار ثيم الهوية */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.theme-card { text-align: start; background: var(--white); border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; }
.theme-card.on { border-color: var(--edge); border-width: var(--bw-2); padding: 9px; }
.theme-card b { display: block; font-size: 14px; margin-block: 6px 2px; }
.theme-card .nt { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.theme-card .sw { display: flex; gap: 4px; }
.theme-card .sw i { width: 28px; height: 20px; border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); }

/* معرض صور المنتجات المرفوعة (الخطة 27) — خلايا قابلة للسحب لإعادة الترتيب */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.img-cell { position: relative; border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 8px; background: var(--surface); color: var(--text); display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.img-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--img-bg); }
.img-cell .ord { position: absolute; top: 4px; inset-inline-start: 4px; background: var(--ink); color: var(--on-ink); font-size: 11px; padding: 1px 7px; border-radius: var(--radius-pill); }

/* معرض حزم الستايل — ستة مربّعات لون + اسم بخط الحزمة ومستطيل بنصف قطرها (الفرق يُرى قبل الضغط) */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pack-card { display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 12px;
  border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.pack-card.on { border-color: var(--edge); border-width: var(--bw-2); }
.pack-card .sw { display: flex; gap: 0; }
.pack-card .sw i { width: 26px; height: 20px; display: block; border: var(--bw-1) solid var(--line); }
.pack-card .shape-demo { width: 56px; height: 18px; display: block; }
.pack-card .nt { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.pack-card .warn { font-size: 12px; color: var(--deal); font-weight: 700; }

/* نافذة المعاينة الحيّة للقوالب — iframe للمتجر الحقيقي بعرض اللوحة نفسه (بلا تصغير كاذب) */
.prev-shell { border: var(--bw-1) solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.prev-shell iframe { display: block; border: 0; width: 100%; height: 620px; }
.prev-shell.mob { width: 390px; max-width: 100%; margin-inline: auto; }
.prev-shell.mob iframe { height: 680px; }

/* == لوحة المراسلة == */
.thread-row {
  display: block; width: 100%; text-align: start; background: var(--white); border: 0;
  border-bottom: var(--bw-1) solid var(--line); border-inline-end: 3px solid transparent; padding: 12px 16px;
}
.thread-row:hover { background: var(--paper); }
.thread-row.on { background: var(--paper); border-inline-end-color: var(--edge); }
.thread-row.un b { font-weight: 800; }
.tr-h { display: flex; align-items: center; gap: 8px; }
.tr-h b { font-family: var(--font-head); font-size: 15px; }
.tr-bdg { background: var(--deal); color: var(--on-deal); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; padding: 1px 8px; }
.tr-time { margin-inline-start: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tr-p { display: block; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-m { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.amsg-log { padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 52vh; background: var(--paper); }
.amsg-log .cmsg { max-width: 88%; border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--white); }
.amsg-log .cmsg.customer { align-self: flex-start; }
.amsg-log .cmsg.staff { align-self: flex-end; background: var(--volt); border-color: var(--edge); }
.amsg-log .cmsg.system { align-self: center; background: transparent; border: 0; }
.amsg-log .cmsg p { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.amsg-log .cmeta { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.amsg-log .cmsg.staff .cmeta { color: #6B5F2E; }
.chat-send { display: flex; gap: 8px; align-items: flex-end; }
.chat-send textarea { flex: 1; border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px; resize: none; }
.chat-send .btn { flex-shrink: 0; }

/* == المساعد الذكي ==
   يعيد استعمال فقاعات .cmsg نفسها (رسالة الموظف بالأصفر ورد المساعد بالأبيض) ويضيف
   بطاقتين: أداة نُفّذت (شفافية) وطلب تأكيد كتابة (بوابة بشرية إلزامية). */
.ai-log { padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 56vh; background: var(--paper); }
.ai-log > div { display: flex; flex-direction: column; gap: 8px; }
.ai-log .cmsg { max-width: 82%; border: var(--bw-1) solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--white); }
.ai-log .cmsg.staff { align-self: flex-start; background: var(--volt); border-color: var(--edge); }
.ai-log .cmsg.customer { align-self: flex-end; }
.ai-log .cmsg p { margin: 0; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-log .cmeta { display: block; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.ai-hello { font-size: 14px; color: var(--ink-2); }

.ai-tool {
  align-self: flex-end; display: flex; gap: 8px; align-items: baseline; max-width: 82%;
  background: var(--white); border: var(--bw-1) dashed var(--line); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px;
}
.ai-tool .ai-tick { color: var(--stock-ok); font-weight: 700; }
.ai-tool.bad .ai-tick { color: var(--deal); }
.ai-tool code { color: var(--ink-3); font-size: 11px; overflow-wrap: anywhere; }
.ai-tool em { color: var(--ink-3); font-style: normal; }

.ai-confirm {
  align-self: stretch; background: var(--warn-bg); border: var(--bw-2) solid var(--stock-low); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.ai-confirm p { font-size: 15px; }
.ai-busy { align-self: center; font-size: 13px; color: var(--ink-3); }

.range-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.range-btns button { border: var(--bw-1) solid var(--line); background: var(--white); padding: 6px 14px; font-size: 13px; border-radius: var(--radius-sm); }
.range-btns button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* صفوف نماذج بالصفحات (كانت inline grid ثابتة) */
.form-4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cat-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; align-items: center; }
.zone-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.zone-row input { width: 100%; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.row-wrap > input { flex: 1 1 140px; }

.t-cards tr.hl, .t-cards tr.hl td { background: var(--warn-bg); transition: background .4s; }

/* مودال اللوحة المشترك — عام (البند ٢، يعيد استعماله البند ٣) */
.amodal-wrap { position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center; padding: 16px; }
.amodal-bg   { position: absolute; inset: 0; background: var(--ink); opacity: .55; }
.amodal      { position: relative; width: 460px; max-width: 100%; background: var(--white); color: var(--text);
               border: var(--bw-2) solid var(--edge); border-radius: var(--radius-sm); box-shadow: var(--shadow-3); padding: 18px; }

.st-chip { border: var(--bw-1) solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
           color: var(--text-2); font-size: 12px; padding: 2px 10px; }
.st-chip.closed { border-color: var(--deal); color: var(--deal); }

.login-wrap { background: var(--admin-bg); }

@media (max-width: 960px) {
  .alayout { grid-template-columns: minmax(0, 1fr); align-content: start; }

  /* شريط علوي ثابت: القائمة + الاسم + الإشعارات — المحتوى بيبلّش من أول الشاشة */
  .atop {
    display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 900;
    height: 56px; padding-inline: 4px 6px; background: var(--chrome); color: var(--on-chrome-2);
    border-bottom: var(--bw-1) solid var(--chrome-hover);
  }
  .atop-btn {
    position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0;
    background: none; border: 0; border-radius: var(--radius-sm); color: inherit;
  }
  .atop-btn:active { background: var(--chrome-soft); }
  .atop-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .atop-btn .bdg { position: absolute; top: 6px; inset-inline-end: 4px; min-width: 18px; background: var(--deal); color: var(--on-deal); border-radius: var(--radius-pill); font-size: 11px; line-height: 18px; padding-inline: 5px; text-align: center; }
  .atop-dot { position: absolute; top: 12px; inset-inline-end: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--deal); box-shadow: 0 0 0 2px var(--chrome); }
  .atop-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: var(--on-chrome); }
  .atop-brand img { width: 32px; height: 32px; border-radius: 50%; background: #0B0B0D; object-fit: contain; flex-shrink: 0; }
  .atop-brand b { font-family: var(--font-head); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* القائمة: درج ينزلق من جهة البداية (يمين بالعربي) فوق ستارة معتمة */
  .ascrim { position: fixed; inset: 0; z-index: 990; background: rgb(0 0 0 / .5); }
  .aside {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1000;
    width: min(300px, 86vw); height: 100dvh; padding-block: 0 16px; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    box-shadow: -12px 0 40px rgb(0 0 0 / .35);
  }
  [dir="ltr"] .aside { transform: translateX(-100%); }
  .aside.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .aside .brand { position: sticky; top: 0; z-index: 1; background: var(--chrome); padding: 12px 8px 12px 16px; margin-bottom: 4px; min-height: 56px; }
  .aside-x { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-start: auto; background: none; border: 0; border-radius: var(--radius-sm); color: var(--on-chrome-2); }
  .aside-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .aside .bellw { display: none; }
  .aside nav a { min-height: 48px; padding-block: 12px; font-size: 15px; }
  .aside nav .grp { padding-top: 16px; }
  .aside .who .btn { min-height: 44px; }

  .notif-panel { inset-inline: 8px; top: 60px; width: auto; max-height: calc(100dvh - 76px); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .side-panel { position: static; }
  .form-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amain { padding: 16px; }
  /* حقول الفلترة واللمس: ٤٤px على الأقل وخط ١٦px (بلا تكبير iOS التلقائي) */
  .filters-row { width: 100%; }
  .filters-row input, .filters-row select { min-height: 44px; font-size: 16px; flex: 1 1 140px; min-width: 0; }
  .ahead { margin-bottom: 16px; }
}
@media (max-width: 640px) {
  .ahead h1 { font-size: 24px; }
  .kpis { gap: 8px; }
  .kpi { padding: 12px; }
  .kpi .v { font-size: 22px; overflow-wrap: anywhere; }
  .form-4col { grid-template-columns: minmax(0, 1fr); }
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-row > b { grid-column: 1 / -1; }
  .zone-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .zone-row > b { grid-column: 1 / -1; }
}

/* ── سعر الصرف (/admin/fx) ── */
.fx-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fx-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.fx-l { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.fx-v { display: flex; gap: 22px; }
.fx-v span { display: flex; flex-direction: column; }
.fx-v small { font-size: 12px; color: var(--ink-3); }
.fx-v b { font-size: 30px; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.fx-at, .fx-empty { font-size: 13px; color: var(--ink-3); }
.fx-rule { margin-top: 14px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.fx-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.fx-form .fx-note { grid-column: span 2; }
@media (max-width: 560px) { .fx-form .fx-note { grid-column: auto; } }
.fx-warn { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--deal); color: var(--deal); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fx-help { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ── المالية: المحافظ، الشحن، الكوبونات ── */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; }
.kpi .k { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.kpi .v { font-size: 24px; font-variant-numeric: tabular-nums; text-align: start; }
.kpi .s { font-size: 12.5px; color: var(--ink-3); }
.lnk { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.today { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; font-size: 13px; }
.chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.search { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.res { display: grid; margin-top: 8px; }
.res-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; text-align: start; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
.res-row:hover { background: var(--stripe); }
.adj { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.adj select, .adj input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.adj input[placeholder^="السبب"] { flex: 1 1 240px; }
.fx-form .chk { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gen { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 10px; }
.codes { margin: 0; padding: 10px; background: var(--stripe); border-radius: var(--radius-sm); font-size: 13px; direction: ltr; text-align: left; max-height: 240px; overflow: auto; }
.found { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
@media (max-width: 640px) { .res-row { grid-template-columns: 1fr 1fr; } }

/* لوحة بعمود وحيد (قائمة بلا لوحة تفاصيل) تاخد العرض كامل بدل ما تتضغط بعمود فاضي */
.split > :only-child { grid-column: 1 / -1; }
/* أرقام الطلبات والحالات ما بتنكسر على أكتر من سطر */
body.admin :is(td, .t-cards td) :is(.badge, bdi) { white-space: nowrap; }
.pay-st { background: var(--surface); display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); border: var(--bw-1) solid var(--line); white-space: nowrap; }
.pay-st.submitted { border-color: var(--stock-low); color: var(--stock-low); }
.pay-st.confirmed { border-color: var(--stock-ok); color: var(--stock-ok); }
.pay-st.rejected { border-color: var(--deal); color: var(--deal); }
@media (min-width: 961px) and (max-width: 1280px) {
  .amain { padding: 20px 24px; }
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
}
/* بطاقات الأرقام على الموبايل: بطاقتين بالسطر بدل وحدة بكل العرض */
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; }
  .kpi .v { font-size: 22px; overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   اللوحة بهوية المتجر (المرجع: store.css — «ALANWAR DNA» + مكوّنات الصفحة المرجعية).
   ما في ألوان جديدة: كل قيمة توكِن من الحزمة (/api/brand.css) أو منقولة حرفياً من المتجر.
   الخطوط: عناوين Cairo ثقيلة + نص IBM Plex · زوايا 12/20/28 · أزرار كبسولية ذهبية بتوهّج ناعم ·
   حقول 50px بإطار شعرة يذهب عند التركيز · لوحات بخط شعرة وزوايا 20 · الذهب للتركيز والنشط والمرور فقط.
   ══════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Cairo'; font-weight: 800; font-display: swap; src: url(/fonts/cairo-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 900; font-display: swap; src: url(/fonts/cairo-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-weight: 800; font-display: swap; src: url(/fonts/cairo-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Cairo'; font-weight: 900; font-display: swap; src: url(/fonts/cairo-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; }

body.admin {
  --font-display: 'Cairo', var(--font-head);
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --l: var(--text); --gold: var(--volt);
  --gold-ink: color-mix(in srgb, var(--volt) 55%, var(--text));
  --gold-glow: 0 14px 34px -16px color-mix(in srgb, var(--volt) 80%, transparent);
  --glow: color-mix(in srgb, var(--volt) 22%, transparent);
  --hair: 1px solid var(--line);
  /* سطح الشريط الجانبي = هيدر المتجر: نهاراً لون الصفحة مغمّق بطبقة ظل، ليلاً لون الصفحة نفسه */
  --nav-shade: linear-gradient(rgba(20, 16, 8, .15), rgba(20, 16, 8, .15));
  background: var(--paper);
}
html[data-mode="dark"] body.admin { --nav-shade: none; }
html:has(body.admin) { background: var(--paper); }
body.admin ::selection { background: var(--volt); color: var(--on-volt); }
body.admin :focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; box-shadow: none; }

/* ── الخطوط: نفس سلّم المتجر ── */
body.admin :is(h1, h2) { font-family: var(--font-display); font-weight: 900; letter-spacing: -.005em; text-wrap: balance; }
body.admin :is(h3, h4) { font-family: var(--font-display); font-weight: 800; }
body.admin .ahead h1 { font-size: 30px; line-height: 1.25; }
body.admin :is(.panel, .side-panel) .ph h2 { font-size: 18px; font-weight: 800; }

/* ── الأزرار: نسخة أزرار المتجر (ذهبي صلب بتوهّج، شبح بخط شعرة، خطر بخط أحمر) ── */
body.admin .btn { border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--volt); color: var(--on-volt);
  font-family: var(--font-display); font-weight: 800; min-height: 48px; box-shadow: var(--gold-glow); letter-spacing: .01em;
  transition: background-color .2s var(--ease-out), border-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s; }
body.admin .btn:hover { background: var(--volt); background: color-mix(in srgb, var(--volt) 86%, #FFFFFF); }
body.admin .btn:active { transform: translateY(1px); }
body.admin .btn-volt { background: var(--volt); color: var(--on-volt); }
body.admin .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 22%, transparent); box-shadow: none; }
body.admin .btn-ghost:hover { background: transparent; border-color: var(--volt); color: var(--gold-ink); }
body.admin .btn-danger { background: transparent; color: var(--deal); border-color: var(--deal); border-color: color-mix(in srgb, var(--deal) 55%, transparent); box-shadow: none; }
body.admin .btn-danger:hover { background: transparent; background: color-mix(in srgb, var(--deal) 8%, transparent); border-color: var(--deal); }
body.admin .btn-sm { min-height: 40px; padding: 6px 16px; font-size: 14px; }
body.admin .btn:disabled, body.admin .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
@media (pointer: coarse) { body.admin .btn:not(.btn-sm) { min-height: 52px; } }

/* ── ص92: زر «رجوع» الموحّد لكل اللوحة — ثانوي هادئ (بلا تعبئة ولا ذهب) حتى لا يلتبس بالحفظ أو الخطر.
   السهم أولاً بالترميز ⇒ على يمين النص في RTL ويشير لليمين (اتجاه الرجوع)، ويُقلب تلقائياً في LTR.
   .a-back = سهم + نص قصير يسمّي الوجهة · .a-back--icon = دائرة سهم فقط (مع aria-label).
   الإظهار/الإخفاء حسب الشاشة يبقى لصنف الصفحة المرافق (pv-back، cx-back، mc2-back، sx-back…). ── */
.a-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; box-sizing: border-box;
  height: 40px; padding: 0 16px; padding-inline-start: 10px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-pill, 999px);
  background: transparent; color: var(--text-2); font: 700 14px/1 var(--font-head); letter-spacing: 0; white-space: nowrap;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, color .18s, background-color .18s, transform .18s var(--ease-out, ease-out); }
.a-back:hover { color: var(--text); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 32%, var(--line)); background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); }
.a-back:active { transform: scale(.97); }
.a-back:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.a-back svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .a-back svg, html.ltr .a-back svg { transform: scaleX(-1); }
.a-back--icon { width: 40px; padding: 0; }
@media (prefers-reduced-motion: reduce) { .a-back { transition: none; } .a-back:active { transform: none; } }

/* ── الحقول: ٥٠px بالنماذج، ٤٤px بشرائط الفلترة والصفوف — نفس إطار المتجر وحلقة التركيز ── */
body.admin :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select, textarea) {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); color: var(--text);
  padding-inline: 14px; min-height: 44px; transition: border-color .2s, box-shadow .2s; }
body.admin textarea { padding-block: 10px; }
body.admin :is(input, select, textarea):focus { border-color: var(--volt); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 16%, transparent); outline: none; }
body.admin .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { min-height: 50px; }
body.admin .field label { font-weight: 600; font-size: 14px; color: var(--text-2); }
body.admin input::placeholder, body.admin textarea::placeholder { color: var(--text-3); }
body.admin input[type=file] { color: var(--text-2); font-size: 14px; }
body.admin input[type=file]::file-selector-button { border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); font: 700 13px var(--font-display); padding: 8px 16px; margin-inline-end: 12px; cursor: pointer; }
body.admin input[type=file]::file-selector-button:hover { border-color: var(--volt); color: var(--gold-ink); }
body.admin :is(input[type=checkbox], input[type=radio]) { accent-color: var(--volt); width: 18px; height: 18px; }
body.admin .filters-row :is(input, select) { background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }

/* ── الأسطح: لوحات وبطاقات المتجر — خط شعرة، زوايا ٢٠، الذهب للمرور ── */
body.admin .panel, body.admin .side-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
body.admin .side-panel { overflow: visible; }
body.admin :is(.panel, .side-panel) .ph { border-bottom: 1px solid var(--line); padding: 14px 18px; }
body.admin .panel .pb { padding: 18px; }
body.admin .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s; }
body.admin .kpi :is(.lb, .k) { color: var(--text-3); font-size: 13px; font-weight: 600; }
body.admin .kpi .v { font-family: var(--font-display); font-weight: 900; line-height: 1.25; }
body.admin .kpi :is(.hint, .s) { color: var(--text-3); }
body.admin a.kpi:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
body.admin :is(.fx-card, .theme-card, .pack-card, .img-cell, .gen, .pay-card, .pay-compare, .prev-shell) { border-color: var(--line); border-radius: var(--r-sm); }
body.admin .fx-card, body.admin .prev-shell { border-radius: var(--r-md); }
body.admin :is(.theme-card, .pack-card).on { border: 1px solid var(--volt); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 16%, transparent); padding: 10px; }
body.admin .pack-card.on { padding: 12px; }
body.admin .pay-note { border-color: var(--line); border-radius: var(--r-sm); background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
body.admin .pay-compare > div:first-child { background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
body.admin :is(.codes, .amsg-log, .ai-log) { background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); }

/* ── الجداول: نمط جداول المتجر — رؤوس خافتة وخطوط شعرة بلا تخطيط، ومرور خفيف ── */
body.admin table { background: transparent; }
body.admin th { color: var(--text-3); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line); padding: 12px 14px; }
body.admin td { border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 12px 14px; }
body.admin tr:nth-child(even) td { background: transparent; }
body.admin tbody tr { transition: background-color .15s; }
body.admin tbody tr:hover td { background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); }
body.admin .t-cards tr.hl td { background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); }
@media (max-width: 640px) {
  body.admin .t-cards tr { border-bottom: 1px solid var(--line); }
  body.admin .t-cards tr:nth-child(even) { background: transparent; }
}

/* ── شارات ورقائق: كبسولات المتجر ── */
body.admin :is(.chip, .st-chip, .pay-st) { border-radius: var(--radius-pill); }
body.admin .st-chip { background: transparent; border-color: var(--line); }
body.admin .range-btns { gap: 6px; }
body.admin .range-btns button { border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: transparent; color: var(--text-2);
  border-radius: var(--radius-pill); min-height: 40px; padding: 6px 16px; font: 700 13.5px var(--font-display); transition: border-color .2s, color .2s, background-color .2s; }
body.admin .range-btns button:hover { border-color: var(--volt); color: var(--text); }
body.admin .range-btns button.on { background: var(--volt); color: var(--on-volt); border-color: transparent; box-shadow: var(--gold-glow); }

/* ── التنقّل: الشريط الجانبي = هيدر المتجر (لون الصفحة، خط شعرة، الذهب للنشط) ── */
body.admin .aside { background-color: var(--paper); background-image: var(--nav-shade); color: var(--text);
  border-inline-start: 1px solid var(--line);
  border-inline-start: 1px solid color-mix(in srgb, var(--text) 10%, transparent); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body.admin .aside .brand { border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
body.admin .aside .brand b { color: var(--text); font-family: var(--font-display); font-weight: 900; font-size: 16px; }
body.admin .aside .brand small { color: var(--text-3); font-family: var(--font-body); font-weight: 500; }
body.admin .aside nav .grp { color: var(--text-3); letter-spacing: .06em; }
body.admin .aside nav a { color: var(--text-2); margin-inline: 8px; padding-inline: 12px; border-radius: var(--r-sm); border-inline-end: 0;
  transition: background-color .2s, color .2s; }
body.admin .aside nav a .mi { stroke-width: 1.8; opacity: .85; }
body.admin .aside nav a:hover { background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
body.admin .aside nav a.on { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); color: var(--gold-ink); font-weight: 700; }
body.admin .aside nav a.on .mi { color: var(--volt); opacity: 1; }
body.admin .aside .who { border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-3); }
body.admin .aside .who b { color: var(--text); }
body.admin .bell { background: transparent; color: var(--text); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: var(--r-sm); min-height: 44px; }
body.admin .bell:hover { border-color: var(--volt); }
body.admin .notif-panel { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); background: var(--surface); overflow-x: hidden; }
body.admin .np-h { border-bottom: 1px solid var(--line); }
body.admin .np-item:hover { background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
body.admin .np-item.fresh { border-inline-start: 0; background: transparent; background: color-mix(in srgb, var(--volt) 7%, transparent); }
/* إشعار: أيقونة بدائرة · عنوان وسطر · الوقت فوق نقطة خضرا (غير مقروء) متل واتساب */
body.admin .np-h { align-items: center; padding: 12px 16px; }
body.admin .np-h b { font-size: 15px; }
/* ص92: زر الإغلاق في طرف رأس «يحتاج انتباهك» — نفس زر الجرس (.nt-x في base.css) */
body.admin .np-h:has(.nt-x) { justify-content: flex-start; padding-block: 8px; padding-inline-end: 8px; }
body.admin .np-h:has(.nt-x) b { margin-inline-end: auto; }
body.admin .np-h:has(.nt-x) span { font-size: 12.5px; }
.np-all { border: 0; background: none; padding: 4px 0; color: var(--gold-ink); font: 700 12.5px var(--font-body); cursor: pointer; }
.np-all:hover { text-decoration: underline; text-underline-offset: 3px; }
body.admin .np-item { align-items: flex-start; gap: 12px; padding: 12px 16px; }
.np-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
body.admin .np-item.fresh .np-ic { color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
body.admin .np-t b { font-size: 14px; line-height: 1.45; }
body.admin .np-item:not(.fresh) .np-t b { font-weight: 600; color: var(--text-2); }
.np-end { display: grid; justify-items: end; gap: 6px; flex-shrink: 0; padding-top: 2px; }
body.admin .np-item.fresh .np-when { color: #1DAA61; font-weight: 700; }
.np-dot { width: 10px; height: 10px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, #25D366 18%, transparent); }
@media (max-width: 960px) {
  body.admin .atop { background-color: var(--paper); background-image: var(--nav-shade); color: var(--text);
    border-bottom: 1px solid var(--line);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
  body.admin .atop-brand { color: var(--text); }
  body.admin .atop-brand b { font-family: var(--font-display); font-weight: 900; }
  body.admin .atop-btn:active { background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
  body.admin .atop-dot { box-shadow: 0 0 0 2px var(--paper); }
  body.admin .aside { background-color: var(--paper); border-inline-start: 0; box-shadow: -12px 0 40px rgba(0, 0, 0, .35); }
  body.admin .aside .brand { background-color: var(--paper); background-image: var(--nav-shade); }
  body.admin .aside-x { color: var(--text); }
  body.admin .ascrim { background: rgba(0, 0, 0, .6); }
}

/* ── نوافذ وتنبيهات ── */
body.admin .amodal { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 22px; }
body.admin .amodal-bg { background: #000; opacity: .6; }
body.admin .ai-confirm { border-radius: var(--r-sm); }
body.admin :is(.amsg-log, .ai-log) .cmsg { border-radius: var(--r-sm); border-color: var(--line); }
body.admin .chat-send textarea { border-radius: var(--r-sm); }
body.admin .thread-row { background: transparent; border-inline-end: 0; transition: background-color .15s; }
body.admin .thread-row:hover { background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
body.admin .thread-row.on { background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); }
body.admin .img-cell .ord { background: var(--volt); color: var(--on-volt); }
body.admin #toast .t { border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); }
/* زر داخل التنبيه («تراجع»، «أرسلها من واتسابك») لازم ينكبس — الحاوية pointer-events:none */
body.admin #toast .t:has(.t-act) { padding: 8px; padding-inline-start: 20px; pointer-events: auto; }
body.admin #toast .t-act { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--volt); color: var(--on-volt); font: 700 13.5px var(--font-head); text-decoration: none; cursor: pointer; white-space: nowrap; }
body.admin #toast .t-act:focus-visible { outline: 2px solid var(--on-ink, #fff); outline-offset: 2px; }
body.admin a:not(.btn):not(.kpi):not(.np-item):not(.ah-logo) { text-underline-offset: 3px; }

/* ── صفحة الدخول: نفس صندوق دخول المتجر (إطار ذهبي، ظل، أرضية ضوء) ── */
body.admin .login-wrap { background: radial-gradient(60% 50% at 50% 0%, transparent, transparent 70%), var(--paper); background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--volt) 12%, transparent), transparent 70%), var(--paper); }
body.admin .login-box { border: 1px solid var(--volt); border: 1px solid color-mix(in srgb, var(--volt) 55%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); background: var(--surface); text-align: start; }
body.admin .login-box :is(h1, h2) { text-align: center; }
body.admin .login-box > p, body.admin .login-box p[data-brand-full] { text-align: center; }
body.admin .login-box .logo { height: 104px; width: 104px; object-fit: contain; border-radius: 50%; background: #0B0B0D; }
/* الصف المختار بجداول المراجعة (الدفعات): تعبئة ذهبية خفيفة متل البند النشط بالقائمة */
body.admin tbody tr.sel td, body.admin tbody tr.sel:hover td { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
/* شعار الحصان بالوضع الليلي: دائرة سودا متل المتجر — القاعدة القديمة (لوحة بيضا للشعار الكتابي) بتنطبق بس على شعار مرفوع من الإعدادات */
html[data-mode="dark"] body.admin :is(.aside .brand img, .atop-brand img, .login-box .logo[src*="brand-logo-512"]) { background: #0B0B0D; padding: 1px; border-radius: 50%; }
html[data-mode="dark"] body.admin .aside { box-shadow: none; }
@media (max-width: 960px) { html[data-mode="dark"] body.admin .aside { box-shadow: -12px 0 40px rgba(0, 0, 0, .35); } }
/* جداول البطاقات على الموبايل: البطاقة كلها وحدة — بلا خطوط ولا تعبئة لكل خانة، والمختارة متلوّنة كاملة */
@media (max-width: 640px) {
  body.admin .t-cards td, body.admin .t-cards tbody tr:hover td, body.admin .t-cards tbody tr.sel td { border: 0; padding: 0; background: none; }
  body.admin .t-cards tbody tr.sel { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
}

/* ── ربط رقم واتساب (الإعدادات) ── */
.wa-link { display: flex; flex-direction: column; gap: 14px; }
.wa-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.wa-state > i { flex-shrink: 0; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--ink-3); }
.wa-state.on > i { background: var(--stock-ok); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--stock-ok) 20%, transparent); }
.wa-state.wait > i { background: var(--volt); animation: wa-blink 1.2s ease-in-out infinite; }
.wa-state > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* ص87: كتابة رقم البوابة مرة واحدة إذا أخفته البوابة */
.wa-num { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 45%, var(--line)); border-radius: var(--radius-sm); background: var(--surface); background: color-mix(in srgb, var(--volt) 7%, var(--surface)); }
.wa-num label { display: flex; flex-direction: column; gap: 3px; } .wa-num small { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.wa-num-row { display: flex; gap: 8px; flex-wrap: wrap; } .wa-num-row input { flex: 1 1 160px; min-width: 0; max-width: 240px; min-height: 44px; }
.wa-num-row .btn { min-height: 44px; }
.wa-state b { font-size: 15px; }
.wa-state small { font-size: 13px; color: var(--text-2); }
.wa-out { color: var(--deal); flex-shrink: 0; }
.wa-err { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--deal); }
.wa-linkbox { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.wa-linkbox .seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.wa-linkbox .seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-2); font: 700 13.5px var(--font-head); cursor: pointer; }
.wa-linkbox .seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.wa-qr, .wa-code { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.wa-qr img { width: 240px; height: 240px; padding: 8px; background: #FFFFFF; border-radius: 12px; border: 1px solid var(--line); }
.wa-code b { font: 800 34px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; padding: 14px 18px; border-radius: 12px; background: var(--surface); background: color-mix(in srgb, var(--volt) 12%, var(--surface)); border: 1px solid var(--volt); }
.wa-qr ol, .wa-code ol { margin: 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.9; color: var(--text-2); }
.wa-switch { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wa-switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--volt); flex-shrink: 0; }
.wa-switch span { display: flex; flex-direction: column; gap: 3px; }
.wa-switch small { font-size: 13px; color: var(--text-2); }
/* «تفعيل البوابة»: مفتاح رئيسي بارز — كل شي تحتو بيظهر بس وهو شغّال */
.wa-master { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s; }
.wa-master.on { border-color: var(--line); border-color: color-mix(in srgb, var(--stock-ok) 45%, var(--line)); background: var(--surface); background: color-mix(in srgb, var(--stock-ok) 6%, var(--surface)); }
.wa-master > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-master b { font-size: 16px; }
.wa-master small { font-size: 13px; color: var(--text-2); line-height: 1.6; }
body.admin input.wa-toggle { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 50px; height: 28px; margin: 0; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 22%, transparent); cursor: pointer; transition: background .2s; }
body.admin input.wa-toggle::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start .2s; }
body.admin input.wa-toggle:checked { background: var(--stock-ok); }
body.admin input.wa-toggle:checked::after { inset-inline-start: 25px; }
.wa-toggle:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.wa-step { font-size: 15px; }
.wa-note { font-size: 13px; color: var(--text-2); }
.wa-switch.dim { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .wa-toggle, .wa-toggle::after, .wa-master { transition: none; } }
@keyframes wa-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wa-state.wait > i { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   الطلبات (ao): ملخّص ← بحث وفلاتر ← جدول/بطاقات ← تفاصيل بمراجعة دفع بارزة.
   الألوان دلالية بس: أخضر = مؤكد/مكتمل، برتقالي = بانتظار/مراجعة، أحمر = مرفوض/ملغي، ذهبي = إجراء عليك.
   ══════════════════════════════════════════════════════════════════════════════ */
.ao { --ao-card: var(--surface); --ao-b: 1px solid var(--line); --ao-sh: 0 1px 2px rgba(20, 16, 8, .04), 0 10px 26px -18px rgba(20, 16, 8, .28); }
html[data-mode="dark"] .ao { --ao-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -18px rgba(0, 0, 0, .7); }
.ao bdi, .ao .ao-money, .ao .ao-mono { font-variant-numeric: tabular-nums; }
.ao-muted { color: var(--ink-3); font-size: 13px; margin: 0; }
.c-ok { color: var(--ok); } .c-bad { color: var(--deal); }

/* شارات الحالة: نص دائماً + لون (مو لون لحالو) */
.ob { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent; }
.ob::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ob.t-ok { color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.ob.t-warn { color: var(--warn); background: transparent; background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.ob.t-bad { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 11%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 28%, transparent); }
.ob.t-gold { color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--volt) 40%, transparent); }
.ob.t-info { color: var(--text); background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 14%, transparent); }
.ob.t-mute { color: var(--ink-3); background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); }
.ob.t-mute::before { opacity: .5; }
.ob-lg { font-size: 14px; padding: 6px 12px; }

/* رأس الصفحة */
.ao-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ao-head h1 { font-size: 30px; line-height: 1.2; margin: 0; }
.ao-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.ao-paylink { gap: 8px; }

/* الملخّص */
.ao-kpis { margin-bottom: 16px; }
.ao-kpis-row, .ao-kpis-sk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ao-kpis-sk i { height: 96px; border-radius: 18px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); animation: ao-pulse 1.2s ease-in-out infinite alternate; }
.ao-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 14px 16px; text-align: start; cursor: pointer;
  background: var(--ao-card); border: var(--ao-b); border-radius: 18px; box-shadow: var(--ao-sh); color: var(--text); font: inherit; transition: border-color .2s, transform .2s; }
.ao-kpi:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, transparent); }
.ao-kpi.on { border-color: var(--volt); box-shadow: 0 0 0 3px transparent, var(--ao-sh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 16%, transparent), var(--ao-sh); }
.ao-kpi span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ao-kpi b { font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: 1.2; }
.ao-kpi small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ao-kpi::after { content: ''; position: absolute; top: 16px; inset-inline-end: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); opacity: .5; }
.ao-kpi.t-warn::after { background: var(--warn); opacity: 1; }
.ao-kpi.t-info::after { background: var(--volt); opacity: 1; }
.ao-kpi.t-ok::after { background: var(--ok); opacity: 1; }
.ao-kpi.t-hot::after { background: var(--warn); opacity: 1; box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
.ao-kpi.t-hot:not(.zero) { background: var(--ao-card); background: color-mix(in srgb, var(--warn) 7%, var(--ao-card)); border-color: var(--line); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.ao-kpi.t-hot:not(.zero) b { color: var(--warn); }
.ao-kpi.zero::after { opacity: .35; box-shadow: none; background: var(--ink-3); }

/* البحث والفلاتر */
.ao-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 14px; margin-bottom: 12px;
  background: var(--ao-card); border: var(--ao-b); border-radius: 18px; box-shadow: var(--ao-sh); }
.ao-search { position: relative; display: block; grid-column: 1 / -1; }
.ao-search svg { position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ao-search input { width: 100%; height: 50px; padding-inline: 46px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 15px; }
.ao-search input:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 16%, transparent); }
.ao-fsel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ao-fsel label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ao-fsel label span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ao-fsel select, .ao-rej select, .ao-rej input, .ao-f input, .ao-f select { height: 44px; width: 100%; min-width: 0; padding-inline: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 14px; }
.ao-fbtns { display: flex; gap: 8px; }
.ao-fbtns .btn { min-height: 44px; }
.ao-ftoggle { display: none; gap: 6px; min-height: 44px; }
.ao-ftoggle i { font-style: normal; display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--volt); color: var(--on-volt); font-size: 12px; font-weight: 800; }

.ao-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 10px; font-size: 13px; color: var(--ink-3); }
.ao-live { display: inline-flex; align-items: center; gap: 6px; }
.ao-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* الحالات: تحميل/فاضي/خطأ */
.ao-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; background: var(--ao-card); border: 1px dashed var(--line); border-radius: 18px; }
.ao-state b { font-size: 17px; } .ao-state p { margin: 0 0 6px; color: var(--ink-3); font-size: 14px; }
.ao-err { border-style: solid; border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 40%, transparent); background: var(--ao-card); background: color-mix(in srgb, var(--deal) 5%, var(--ao-card)); }
.ao-err .btn { gap: 6px; }
.ao-sk { display: flex; flex-direction: column; gap: 8px; }
.ao-sk-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr 1fr 1fr; gap: 14px; padding: 18px 16px; background: var(--ao-card); border: var(--ao-b); border-radius: 14px; }
.ao-sk-row i { height: 14px; border-radius: 7px; background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); animation: ao-pulse 1.2s ease-in-out infinite alternate; }
@keyframes ao-pulse { to { opacity: .45; } }

/* الجدول */
.ao-tablew { background: var(--ao-card); border: var(--ao-b); border-radius: 18px; box-shadow: var(--ao-sh); overflow: hidden; }
.ao-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ao-table th { padding: 12px 14px; text-align: start; font-size: 12px; font-weight: 800; color: var(--ink-3); background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ao-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ao-table tbody tr { cursor: pointer; transition: background-color .15s; }
.ao-table tbody tr:hover { background: transparent; background: color-mix(in srgb, var(--volt) 6%, transparent); }
.ao-table tbody tr:last-child td { border-bottom: 0; }
.ao-table tr.hot td:first-child { box-shadow: inset -3px 0 0 var(--volt); }
[dir="ltr"] .ao-table tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--volt); }
.ao-no { display: block; font-weight: 800; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.ao-table td small { display: block; font-size: 12px; color: var(--ink-3); }
/* خلية التاريخ تبقى خلية جدول (كانت display:block فتطلع من تخطيط الجدول: خطوط الصفوف مزاحة والجدول أعرض) */
.ao-dt { font-size: 12px; color: var(--ink-3); }
.ao-cust { display: block; font-weight: 700; } .ao-ph { display: block; font-size: 12px; color: var(--ink-3); }
.ao-money { font-weight: 800; white-space: nowrap; }
.ao-next { font-size: 13px; color: var(--ink-3); }
.ao-next.mine { color: var(--gold-ink); font-weight: 800; }
.ao-next.mine::before { content: '● '; color: var(--volt); }

/* بطاقات الموبايل */
.ao-cards { display: none; flex-direction: column; gap: 10px; }
.ao-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px; text-align: start; cursor: pointer; font: inherit; color: var(--text);
  background: var(--ao-card); border: var(--ao-b); border-radius: 16px; box-shadow: var(--ao-sh); }
.ao-card.hot { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); }
.ao-card-top, .ao-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ao-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ao-card-cust { font-size: 14px; color: var(--ink-2); }
.ao-card-foot small { font-size: 12px; color: var(--ink-3); }
.ao-more { display: flex; justify-content: center; margin-top: 14px; }
.ao-more .btn { min-height: 44px; min-width: 200px; }

/* ── التفاصيل ── */
.ao-dtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ao-dtop .btn { gap: 6px; min-height: 44px; }
.ao-hero { display: grid; gap: 14px; padding: 18px 20px; margin-bottom: 16px; background: var(--ao-card); border: var(--ao-b); border-radius: 20px; box-shadow: var(--ao-sh); }
.ao-hero-id h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.ao-hero-id small { color: var(--ink-3); font-size: 13px; }
.ao-hero-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ao-hero-st > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); min-width: 0; }
.ao-hero-st span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ao-hero-total { font-family: var(--font-display); font-size: 24px; font-weight: 900; white-space: nowrap; }
.ao-todo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 14px; border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 14px; }
.ao-todo span { color: var(--ink-3); font-weight: 700; }
.ao-todo b { font-size: 16px; }
.ao-todo small { flex-basis: 100%; color: var(--ink-3); font-size: 12.5px; }
.ao-todo.mine { background: var(--ao-card); background: color-mix(in srgb, var(--volt) 14%, var(--ao-card)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 45%, transparent); }
.ao-todo.mine b { color: var(--gold-ink); }

.ao-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ao-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ao-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.ao-sec { padding: 16px 18px; background: var(--ao-card); border: var(--ao-b); border-radius: 18px; box-shadow: var(--ao-sh); min-width: 0; }
.ao-sec > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ao-sec h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.ao-sec h3 { margin: 14px 0 8px; font-size: 14px; }

.ao-kv { display: grid; gap: 0; margin: 0; }
.ao-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.ao-kv > div:last-child { border-bottom: 0; }
.ao-kv dt { color: var(--ink-3); flex-shrink: 0; } .ao-kv dd { margin: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.ao-kv a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ao-mono { font-weight: 800; letter-spacing: .02em; }
.ao-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); font-size: 14px; }

/* مراجعة الدفع */
.ao-review { border: 1.5px solid var(--warn); border: 1.5px solid color-mix(in srgb, var(--warn) 55%, transparent); background: var(--ao-card); background: color-mix(in srgb, var(--warn) 4%, var(--ao-card)); }
.ao-review h2 svg { color: var(--warn); }
.ao-rv { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
.ao-rv-rc { display: flex; flex-direction: column; gap: 8px; }
.ao-rc-img { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--gold-ink); font-size: 13px; font-weight: 700; text-align: center; }
.ao-rc-img img { width: 100%; max-height: 380px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--img-bg, #fff); }
.ao-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ao-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.ao-checks i { font-style: normal; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 900; }
.ao-checks li.ok i { background: transparent; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.ao-checks li.no i { background: transparent; background: color-mix(in srgb, var(--deal) 16%, transparent); color: var(--deal); }
.ao-checks li.no span { color: var(--deal); font-weight: 700; }
.ao-checks li.na i { background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--ink-3); }
.ao-rv-act { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ao-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ao-chk input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ok); flex-shrink: 0; }
.ao-rv-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ao-rv-btns .btn { min-height: 46px; min-width: 150px; }
.btn.ao-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ao-ok:disabled { opacity: .45; }
.btn.ao-bad { background: var(--deal); border-color: var(--deal); color: #fff; }
.ao-no-btn { color: var(--deal); }
.ao-link { font-size: 13px; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.ao-rej { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; padding: 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--deal) 6%, transparent); }
.ao-rej label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); min-width: 0; }
.ao-rej .btn { min-height: 44px; }

/* المنتجات والمالية */
.ao-items { list-style: none; margin: 0; padding: 0; }
.ao-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ao-it-n { display: flex; flex-direction: column; min-width: 0; } .ao-it-n small { color: var(--ink-3); font-size: 12px; text-align: end; align-self: flex-start; }
.ao-it-q { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ao-sum { margin: 10px 0 0; display: grid; }
.ao-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.ao-sum dt { color: var(--ink-3); } .ao-sum dd { margin: 0; text-align: end; }
.ao-sum .tot { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--text); font-family: var(--font-display); font-size: 19px; font-weight: 900; }
.ao-sum .tot dt { color: var(--text); }

/* سجل الدفعات */
.ao-pay { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; font-size: 13.5px; }
.ao-pay-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ao-pay-r { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); }
.ao-pay-a { display: flex; gap: 16px; margin-top: 8px; }
.ao-pay-a a { color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* السجل الزمني */
.ao-tl { list-style: none; margin: 0; padding: 0; }
.ao-tl li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.ao-tl li:not(:last-child)::before { content: ''; position: absolute; top: 14px; bottom: 0; inset-inline-start: 6px; width: 2px; background: var(--line); }
.ao-tl i { position: relative; z-index: 1; flex-shrink: 0; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 3px solid var(--ao-card); background: var(--ink-3); box-shadow: 0 0 0 1px var(--line); }
.ao-tl li.t-ok i { background: var(--ok); } .ao-tl li.t-warn i { background: var(--warn); } .ao-tl li.t-bad i { background: var(--deal); }
.ao-tl li.t-gold i, .ao-tl li.t-info i { background: var(--volt); }
.ao-tl div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.ao-tl small { color: var(--ink-3); font-size: 12px; } .ao-tl p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }

/* الإجراءات */
.ao-actions { display: flex; flex-direction: column; gap: 10px; }
.ao-actions header { margin-bottom: 2px; }
.ao-wide { width: 100%; min-height: 48px; justify-content: center; }
.ao-act { display: flex; flex-direction: column; gap: 8px; }
.ao-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ao-cancel { padding-top: 10px; border-top: 1px solid var(--line); }
.ao-mini .ao-sum { margin: 0; }

/* ── التجاوب ── */
@media (max-width: 1120px) { .ao-kpis-row, .ao-kpis-sk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .ao-rv { grid-template-columns: minmax(0, 1fr) 220px; } }
@media (max-width: 1100px) {
  .ao-tablew { display: none !important; }
  .ao-cards { display: flex; }
  .ao-grid { grid-template-columns: minmax(0, 1fr); }
  .ao-side { position: static; order: -1; }
  .ao-fsel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ao-head h1 { font-size: 24px; }
  .ao-kpis-row, .ao-kpis-sk { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; padding-bottom: 2px; }
  .ao-kpis-row::-webkit-scrollbar { display: none; }
  .ao-kpi, .ao-kpis-sk i { flex: 0 0 158px; }
  .ao-kpi b { font-size: 26px; }
  .ao-filters { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .ao-search { grid-column: 1; }
  .ao-ftoggle { display: inline-flex; }
  .ao-fsel { display: none; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .ao-fsel.open { display: grid; }
  .ao-fbtns { grid-column: 1 / -1; display: none; }
  .ao-fsel.open + .ao-fbtns { display: flex; }
  .ao-fbtns .btn { flex: 1; }
  .ao-sk-row { grid-template-columns: 1fr 1fr; }
  .ao-hero { padding: 14px; }
  .ao-hero-st { grid-template-columns: 1fr 1fr; }
  .ao-hero-st > div:last-child { grid-column: 1 / -1; }
  .ao-rv { grid-template-columns: minmax(0, 1fr); }
  .ao-rv-rc { order: -1; }
  .ao-rv-btns .btn { flex: 1 1 140px; }
  .ao-rej { grid-template-columns: minmax(0, 1fr); }
  .ao-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .ao-it-q { grid-column: 1; grid-row: 2; }
  .ao-items li > .ao-money { grid-row: 1 / span 2; grid-column: 2; }
  .ao-sec { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ao-kpis-sk i, .ao-sk-row i { animation: none; } }
/* البحث: الحشوة لازم تغلب قاعدة حقول اللوحة العامة (body.admin :is(input…)) */
body.admin .ao-search input { height: 50px; padding-inline: 46px 16px !important; border-radius: 14px; font-size: 15px; }
.ao-next { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   لوحة القيادة (db) — مركز تحكّم هادئ: «يحتاج انتباهك» ← لوحة أرقام مسطّرة واحدة ← عمود عمل رئيسي
   (المبيعات/المخزون/الأكثر مبيعاً) وعمود جانبي للمعلّق (شام كاش/المحفظة/النشاطات) ← آخر الطلبات بعرض كامل.
   قياس واحد للأسطح: زوايا --radius-lg، خط شعرة، ظل خفيف جداً. الذهب للإجراء الأساسي والنشط بس؛
   الأحمر/البرتقالي/الأخضر دلالي ودايماً مع نص. على الموبايل الأعمدة بتنحل (display:contents) وبيترتّب حسب الأولوية.
   ══════════════════════════════════════════════════════════════════════════════ */
.db { --db-card: var(--surface); --db-b: 1px solid var(--line); --db-r: var(--radius-lg, 20px); --db-pad: 18px;
  --db-sh: 0 1px 2px rgba(20, 16, 8, .04), 0 8px 24px -20px rgba(20, 16, 8, .28); }
html[data-mode="dark"] .db { --db-sh: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -20px rgba(0, 0, 0, .7); }
.db bdi, .db .db-money, .db-k > b, .db-per b, .db-sum b, .db-split b { font-variant-numeric: tabular-nums; }
.db .mi { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.db em { font-style: normal; }
.db .up { color: var(--ok); } .db .down { color: var(--deal); }

/* ── الرأس ── */
.db-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.db-hi h1 { margin: 0; font-size: 26px; line-height: 1.25; }
.db-hi p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; }
.db-date { color: var(--ink-2); font-weight: 600; }
.db-date::before { content: ''; display: inline-block; width: 3px; height: 3px; margin-inline-end: 10px; vertical-align: middle; border-radius: 50%; background: currentColor; opacity: .5; }
.db-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok); }
.db-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.db-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.db-acts .btn { gap: 6px; min-height: 40px; white-space: nowrap; }
.db-acts .mi { width: 16px; height: 16px; stroke-width: 2.2; }

.db-muted, .db-empty { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.db-empty { padding: 10px 0; }
.db-fatal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; border-radius: var(--db-r);
  background: var(--db-card);
  background: color-mix(in srgb, var(--deal) 5%, var(--db-card)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 35%, transparent); }
.db-fatal p { margin: 0 0 6px; color: var(--ink-3); }
/* حالة «تمام» مضغوطة: سطر واحد بدل صندوق فاضي */
.db-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.db-ok .mi { width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); stroke-width: 2.6; }

/* ── يحتاج انتباهك: لوحة واحدة، صفوف بفواصل شعرية ── */
.db-attn { margin-bottom: 16px; padding: 14px var(--db-pad) 6px; background: var(--db-card); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 45%, var(--line)); border-radius: var(--db-r); box-shadow: var(--db-sh); }
.db-attn.calm { border-color: var(--line); padding-bottom: 12px; }
.db-attn > header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.db-attn h2 { margin: 0; font-size: 18px; }
.db-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--text); color: var(--paper); font-size: 12.5px; font-weight: 800; }
.db-attn-list { list-style: none; margin: 0; padding: 0; }
.db-a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.db-a:first-child { border-top: 0; }
.db-a-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.db-a-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-a-t b { font-size: 15px; font-weight: 700; line-height: 1.45; }
.db-a-n { font-variant-numeric: tabular-nums; }
.db-a-t small { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.db-a .btn { min-height: 40px; white-space: nowrap; }
.db-a.lv-high .db-a-i { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); }
.db-a.lv-high .db-a-n { color: var(--deal); }
.db-a.lv-mid .db-a-i { color: var(--warn); background: transparent; background: color-mix(in srgb, var(--warn) 13%, transparent); }
.db-a.lv-mid .db-a-n { color: var(--warn); }
.db-a.lv-low .db-a-i { color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); }

/* ── الأرقام: إطار واحد مقسوم بخطوط، مش ٨ صناديق ── */
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; background: var(--db-card); border: var(--db-b); border-radius: var(--db-r); box-shadow: var(--db-sh); overflow: hidden; }
.db-kpis:empty { display: none; }
.db-k { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; color: var(--text); text-decoration: none;
  border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); margin-inline-start: -1px; margin-top: -1px; transition: background-color .18s ease; }
a.db-k:hover { background: transparent; background: color-mix(in srgb, var(--volt) 6%, transparent); }
a.db-k:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.db-k-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.db-k-t .mi { width: 17px; height: 17px; color: var(--ink-3); }
.db-k > b { font-family: var(--font-head); font-size: 24px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-k > small { font-size: 12px; color: var(--ink-3); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-k.tn-bad > b { color: var(--deal); } .db-k.tn-bad .db-k-t .mi { color: var(--deal); }
.db-k.tn-warn > b { color: var(--warn); } .db-k.tn-warn .db-k-t .mi { color: var(--warn); }
.db-k.sk i { display: block; height: 11px; width: 55%; border-radius: 6px; background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); animation: ao-pulse 1.2s ease-in-out infinite alternate; }
.db-k.sk i:nth-child(2) { height: 24px; width: 75%; margin-top: 4px; }
.db-k.sk i:nth-child(3) { width: 40%; }

/* ── الشبكة: عمود رئيسي + جانبي، والطلبات بعرض كامل تحتهم ── */
.db-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.db-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.db-orders { grid-column: 1 / -1; }
.db-sec { padding: 16px var(--db-pad); background: var(--db-card); border: var(--db-b); border-radius: var(--db-r); box-shadow: var(--db-sh); min-width: 0; }
.db-sec > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.db-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16.5px; }
.db-sec h2 small { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-3); }
.db-more { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 700; color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--volt); border-bottom: 1px solid color-mix(in srgb, var(--volt) 55%, transparent); line-height: 1.2; }
.db-more:hover { border-bottom-color: var(--volt); }
.db-err { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; font-size: 14px;
  background: transparent;
  background: color-mix(in srgb, var(--deal) 6%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 30%, transparent); color: var(--deal); }
.db-sk { display: grid; gap: 8px; }
.db-sk i { height: 36px; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); animation: ao-pulse 1.2s ease-in-out infinite alternate; }
.db-wide { width: 100%; min-height: 44px; justify-content: center; margin-top: 12px; }
.db-cur { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; color: var(--ink-2); border: 1px solid var(--line); }

/* صفوف موحّدة (دفعات/شحن/مخزون/نشاطات) */
.db-rows, .db-feed { list-style: none; margin: 0; padding: 0; }
.db-rows li a, .db-feed li a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; margin-inline: -4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; border-radius: 8px; transition: background-color .18s ease; }
.db-rows li:first-child a, .db-feed li:first-child a { border-top: 0; }
.db-rows li a:hover, .db-feed li a:hover { background: transparent; background: color-mix(in srgb, var(--volt) 6%, transparent); }
.db-rows li a:focus-visible, .db-feed li a:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.db-l-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.db-l-m b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-l-m small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-l-s { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.db-when { font-size: 12px; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.db-subh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 14px 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.db-subh small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* ملخّص المعلّق: رقم كبير + وصف + مبلغ */
.db-sum { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.db-sum > b { font-family: var(--font-head); font-size: 32px; font-weight: 800; line-height: 1; }
.db-sum > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); }
.db-sum strong { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.db-sum.tn-bad > b { color: var(--deal); }

/* المبيعات */
.db-per { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 16px; border-block: 1px solid var(--line); }
.db-per > div { padding: 12px 14px; min-width: 0; border-inline-start: 1px solid var(--line); }
.db-per > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.db-per dt { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.db-per dd { margin: 2px 0 0; display: flex; flex-direction: column; gap: 1px; }
.db-per b { font-family: var(--font-head); font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-per small { font-size: 12px; color: var(--ink-3); }
.db-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.db-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.db-seg button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 12.5px var(--font-head); cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.db-seg button.on { background: var(--db-card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.db-seg button:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; }
.db-chart { position: relative; padding-top: 18px; }
.db-max { position: absolute; top: 0; inset-inline-end: 0; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* الزمن بيمشي باتجاه القراءة: الأقدم يمين واليوم يسار (RTL) */
.db-bars { display: flex; align-items: flex-end; gap: 3px; height: 132px; border-bottom: 1px solid var(--line);
  background: linear-gradient(to top, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px));
  background: linear-gradient(to top, transparent calc(50% - .5px), color-mix(in srgb, var(--line) 60%, transparent) 50%, transparent calc(50% + .5px)); }
.db-chart.r7 .db-bars { gap: 10px; }
.db-bar { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0; border: 0; background: none; cursor: default; min-width: 0; }
.db-bar i { display: block; width: 100%; max-width: 28px; border-radius: 4px 4px 0 0; background: var(--volt); background: color-mix(in srgb, var(--volt) 75%, transparent); transition: background-color .15s ease; }
.db-bar:last-child i { background: var(--volt); }
.db-bar:hover i, .db-bar:focus-visible i { background: var(--gold-ink); }
.db-bar:focus-visible { outline: none; }
.db-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.db-tip { position: absolute; top: 4px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 10px;
  background: var(--text); color: var(--paper); font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.db-tip small { opacity: .75; }

/* المخزون */
.db-split { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.db-split a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0 12px; color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600; }
.db-split a + a { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
.db-split a:first-child { padding-inline-end: 16px; }
.db-split b { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--text); }
.db-split a.tn-bad b { color: var(--deal); } .db-split a.tn-warn b { color: var(--warn); }
.db-split a:hover span { color: var(--gold-ink); }
.db-rows img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: var(--img-bg, #fff); border: 1px solid var(--line); flex-shrink: 0; }
.db-qty { font-size: 12.5px; font-weight: 800; white-space: nowrap; padding: 3px 10px; border-radius: 999px; }
.db-qty.out { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 10%, transparent); }
.db-qty.low { color: var(--warn); background: transparent; background: color-mix(in srgb, var(--warn) 10%, transparent); }

/* النشاطات */
.db-f-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); flex-shrink: 0; }
.db-f-i .mi { width: 16px; height: 16px; }
.db-feed .db-l-m b { font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* الأكثر مبيعاً */
.db-top { list-style: none; margin: 0; padding: 0; }
.db-top li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.db-top li:first-child { border-top: 0; }
.db-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 12.5px; font-weight: 800; flex-shrink: 0; }
.db-top .db-money { font-size: 14px; }

/* آخر الطلبات */
.db-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.db-table th { padding: 8px 12px; text-align: start; font-size: 12px; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.db-table th:first-child, .db-table td:first-child { padding-inline-start: 0; }
.db-table th:last-child, .db-table td:last-child { padding-inline-end: 0; text-align: end; }
.db-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.db-table tbody tr { transition: background-color .18s ease; }
.db-table tbody tr:hover { background: transparent; background: color-mix(in srgb, var(--volt) 4%, transparent); }
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table .btn, .db-table td:nth-child(4) { white-space: nowrap; }
.db-table .btn { min-height: 36px; }
.db-cust { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-no { font-weight: 700; white-space: nowrap; font-size: 13.5px; }
.db-money { white-space: nowrap; }
.db-dt { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.db-cards { display: none; list-style: none; margin: 0; padding: 0; }
.db-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 4px; margin-inline: -4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; border-radius: 8px; }
.db-cards li:first-child .db-card { border-top: 0; }
.db-card:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.db-card-r { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.db-card-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.db-card-act { margin-inline-start: auto; font-size: 13px; font-weight: 800; color: var(--gold-ink); }
.db-card.hot .db-no::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px; border-radius: 50%; background: var(--volt); vertical-align: middle; }

/* ── الاستجابة ── */
@media (max-width: 1440px) {
  .db-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .db-table { display: none; }
  .db-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .db-cards li:nth-child(2) .db-card { border-top: 0; }
}
/* ≤1100: الأعمدة بتنحل، وكل قسم بياخد ترتيبه حسب الأولوية (المعلّق قبل الاتجاهات) */
@media (max-width: 1100px) {
  .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-col { display: contents; }
  .db-pay { order: 1; } .db-wal { order: 2; } .db-stock { order: 3; grid-column: 1 / -1; }
  .db-sales { order: 4; grid-column: 1 / -1; } .db-orders { order: 5; } .db-act { order: 6; } .db-top-s { order: 7; }
}
@media (max-width: 760px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-k:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .db-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .db-stock, .db-sales { grid-column: auto; }
  .db-cards { grid-template-columns: minmax(0, 1fr); }
  .db-cards li:nth-child(2) .db-card { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .db { --db-pad: 14px; --db-r: 16px; }
  .db-head { margin-bottom: 14px; gap: 10px; }
  .db-hi h1 { font-size: 21px; }
  .db-hi p { font-size: 12.5px; }
  .db-acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
  .db-acts .btn { min-height: 44px; padding-inline: 10px; justify-content: center; font-size: 13px; }
  .db-acts .btn:nth-child(3) { display: none; }
  .db-ico span { display: none; }
  .db-attn { padding: 12px var(--db-pad) 4px; margin-bottom: 12px; }
  .db-a { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; }
  .db-a-i { width: 36px; height: 36px; border-radius: 10px; }
  .db-a-t b { font-size: 14px; } .db-a-t small { font-size: 12px; }
  .db-a .btn { min-height: 44px; padding: 0 12px; font-size: 13px; }
  .db-kpis { margin-bottom: 12px; }
  .db-k { padding: 12px; gap: 2px; }
  .db-k > b { font-size: 19px; }
  .db-k > small { font-size: 11.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .db-per { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .db-per > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .db-per dd { align-items: flex-end; text-align: end; }
  .db-per b { font-size: 17px; }
  .db-bars { height: 104px; gap: 2px; }
  .db-cards li:nth-child(n + 7) { display: none; }
  .db-a .btn { padding: 0 12px; }
}
@media (max-width: 340px) { .db-a { grid-template-columns: 36px minmax(0, 1fr); } .db-a .btn { grid-column: 2; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .db-sk i, .db-k.sk i { animation: none; } .db * { transition: none !important; } }

/* ══ المخزون (inv): نفس لغة صفحة الطلبات — ملخّص قابل للكبس، فلاتر، صفوف تتحوّل بطاقات ══ */
.inv-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.inv-s { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; cursor: pointer; text-align: start; font: inherit; color: var(--text);
  background: var(--ao-card); border: var(--ao-b); box-shadow: var(--ao-sh); }
.inv-s span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.inv-s b { font-family: var(--font-display); font-size: 26px; font-weight: 900; line-height: 1.2; }
.inv-s small { font-size: 12px; color: var(--ink-3); }
.inv-s.on { border-color: var(--volt); box-shadow: 0 0 0 3px transparent, var(--ao-sh); box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 16%, transparent), var(--ao-sh); }
.inv-s.t-ok b { color: var(--ok); } .inv-s.t-warn b { color: var(--warn); } .inv-s.t-bad b { color: var(--deal); }
.inv-fsel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-list { background: var(--ao-card); border: var(--ao-b); border-radius: 18px; box-shadow: var(--ao-sh); overflow: hidden; }
.inv-th, .inv-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 1fr 1.2fr 1.2fr 1.6fr; gap: 12px; align-items: center; padding: 12px 16px; }
.inv-th { font-size: 12px; font-weight: 800; color: var(--ink-3); background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); border-bottom: 1px solid var(--line); }
.inv-row { border-bottom: 1px solid var(--line); }
.inv-row:last-child { border-bottom: 0; }
.inv-row.t-bad { box-shadow: inset -3px 0 0 var(--deal); } .inv-row.t-warn { box-shadow: inset -3px 0 0 var(--warn); }
.inv-p { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-p img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--img-bg, #fff); }
.inv-p > span { display: flex; flex-direction: column; min-width: 0; }
.inv-p b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inv-p small { font-size: 12px; color: var(--ink-3); }
.inv-q { display: flex; flex-direction: column; }
.inv-q b { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; align-self: flex-start; }
.inv-q small, .inv-wait { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.inv-dt { font-size: 12.5px; color: var(--ink-3); }
.inv-act { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-act .btn { min-height: 38px; }
.inv-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 14px; border-radius: 14px;
  background: transparent;
  background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid var(--line); }
.inv-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); min-width: 0; }
.inv-panel input, .inv-panel select { height: 44px; width: 100%; padding-inline: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 15px; }
.inv-seg { grid-column: 1 / -1; display: inline-flex; justify-self: start; padding: 3px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.inv-seg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 13px var(--font-head); cursor: pointer; }
.inv-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.inv-note { grid-column: span 1; }
.inv-prev { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-2); }
.inv-prev b.bad { color: var(--deal); }
.inv-err { grid-column: 1 / -1; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--deal); }
.inv-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.inv-btns .btn { min-height: 44px; }
.inv-hist { display: block; }
.inv-hist ul { list-style: none; margin: 0; padding: 0; }
.inv-hist li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.inv-hist li:last-child { border-bottom: 0; }
.inv-hist li > b { min-width: 52px; font-variant-numeric: tabular-nums; }
.inv-hist li > b.in { color: var(--ok); } .inv-hist li > b.out { color: var(--deal); }
.inv-hist li span { display: flex; flex-direction: column; }
.inv-hist small { font-size: 12px; color: var(--ink-3); }
@media (max-width: 1100px) {
  .inv-th { display: none; }
  .inv-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px; }
  .inv-p { grid-column: 1 / -1; }
  .inv-q { flex-direction: row; align-items: baseline; gap: 8px; }
  .inv-dt { grid-column: 1; }
  .inv-act { grid-column: 1 / -1; }
  .inv-act .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}
@media (max-width: 760px) {
  .inv-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-fsel { grid-template-columns: minmax(0, 1fr); }
  .inv-panel { grid-template-columns: minmax(0, 1fr); }
  .inv-row.t-bad, .inv-row.t-warn { box-shadow: inset -4px 0 0 var(--deal); }
  .inv-row.t-warn { box-shadow: inset -4px 0 0 var(--warn); }
}
/* الطلبات بين 1100 و1360: عمود «آخر تحديث» ثانوي ⇒ بيختفي، والإجراء بيلتفّ — بلا تمرير أفقي */
/* (كانت 1360: لابتوب 1366/1440 كان يقع فوقها فيصير الجدول أعرض من بطاقته) */
@media (max-width: 1500px) {
  .ao-table th:nth-child(8), .ao-table td:nth-child(8) { display: none; }
  .ao-table .ao-next { white-space: normal; }
  .ao-table th, .ao-table td { padding-inline: 10px; }
}

/* حزم الهوية: بطاقة = ألوان + اسم + وصف + حالة + زر تفعيل؛ المفعّلة بإطار ذهبي وشارة «مفعّلة حالياً» */
.pk-intro { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin: 0 0 12px; }
.pk-msg { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm, 10px); font-size: 13.5px; font-weight: 600; }
.pk-msg.ok { color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.pk-msg.err { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 8%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 35%, transparent); }
body.admin .pack-card { cursor: default; min-width: 0; }
body.admin .pack-card b { line-height: 1.4; overflow-wrap: normal; word-break: keep-all; }
body.admin .pack-card .nt { flex: 1; overflow-wrap: break-word; word-break: normal; }
body.admin .pack-card.viewing:not(.on) { border-style: dashed; border-color: var(--volt); }
.pk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.pk-foot .btn { min-height: 38px; }
.pk-act { flex: 1 1 auto; }
.pk-on { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 12%, transparent); }
@media (max-width: 480px) { .pack-grid { grid-template-columns: 1fr; } }
body.admin .theme-card:has(.pk-foot) { display: flex; flex-direction: column; cursor: default; min-width: 0; }
body.admin .theme-card:has(.pk-foot) .nt { flex: 1; }
body.admin .theme-card.viewing:not(.on) { border-style: dashed; border-color: var(--volt); }
@media (max-width: 480px) { .theme-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .theme-grid { grid-template-columns: 1fr; } }

/* قائمة اللوحة على الهاتف: «حساب المراجعة» وأزراره (الوضع/الخروج) كانت تنقص تحت شريط المتصفح/النظام.
   القائمة بطول الشاشة المرئية فعلاً (inset بدل 100dvh)، والحساب لاصق بأسفلها دائماً مع هامش النظام. */
@media (max-width: 960px) {
  /* align-self: stretch — «start» (تثبيت الكمبيوتر) كان يقصّر الدرج الثابت على ارتفاع محتواه فيوقف تمريره */
  .aside { height: auto; min-height: 0; top: 0; bottom: 0; align-self: stretch; display: flex; flex-direction: column; padding-bottom: 0; }
  .aside nav { flex: 1 0 auto; }
  body.admin .aside .who { position: sticky; bottom: 0; z-index: 1; margin-top: 12px;
    padding: 12px 16px max(14px, calc(env(safe-area-inset-bottom) + 10px));
    background-color: var(--paper); background-image: var(--nav-shade);
    box-shadow: 0 -10px 20px -14px rgb(0 0 0 / .35);
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  body.admin .aside .who > b, body.admin .aside .who > span { grid-column: 1 / -1; }
  body.admin .aside .who .btn { margin: 8px 0 0 !important; width: 100%; justify-content: center; }
}
.prev-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 10px 12px;
  border-radius: var(--r-sm, 10px); font-size: 13.5px; border: 1px dashed var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); }

/* ══════════ مركز الهوية (الإعدادات › الهوية والشكل) ══════════
   الترتيب: مفتاح الأزرار ← الحزمة الحالية ← هوية المتجر ← مكتبة الهوية ← الألوان فقط ← التخطيط.
   الحالي مميّز بسطح مختلف؛ البطاقات مدمجة؛ الذهب للإجراء الأساسي والحالة فقط. */
.st-head { margin-bottom: 8px; }
.st-head { align-items: center; }
.pv-tabs.st-tabs { margin: 4px 0 12px; }
.pv-tabs.st-tabs button { min-height: 38px; padding: 0 14px; font-size: 13.5px; flex-shrink: 0; }
@media (max-width: 640px) { .pv-tabs.st-tabs button { min-height: 36px; padding: 0 12px; font-size: 13px; } }

.idc { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-bottom: 96px; }
.idc .panel { margin-bottom: 0; }
.idc-legend { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-2);
  border: 1px dashed var(--line);
  border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); border-radius: var(--r-sm); }
.idc-legend li { display: flex; align-items: center; gap: 6px; }
.idc-legend b { color: var(--text); }
.lg-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); flex-shrink: 0; }
.lg-ic.gold { background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--gold-ink); }
.idc .btn svg { flex-shrink: 0; }
.idc .btn { gap: 6px; min-height: 44px; }
.idc .btn-sm { min-height: 40px; }

/* الحزمة الحالية: سطح مميّز بإطار ذهبي، مصغّر المتجر جنب الاسم */
.idc-current { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--volt); border: 1px solid color-mix(in srgb, var(--volt) 55%, transparent);
  background: linear-gradient(135deg, var(--white), var(--white) 70%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--volt) 10%, var(--white)), var(--white) 70%); }
.cur-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--gold-ink); }
.cur-name { margin: 2px 0 6px; font-size: 19px !important; line-height: 1.3; }
.cur-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cur-meta .st-chip b { color: var(--text); }
.cur-acc { display: inline-flex; align-items: center; gap: 6px; }
.cur-acc i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); }
.cur-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.idc-current .pk-msg { margin: 8px 0 0; }

/* مصغّر المتجر (بطاقة المكتبة والحالي): أرضية + بطاقتين + زر بلون العلامة وبزوايا الحزمة */
.mini, .cur-mini { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--m-paper); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.mini i, .cur-mini i { position: absolute; top: 14%; width: 38%; height: 52%; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: min(var(--m-r), 8px); }
.mini i:first-child, .cur-mini i:first-child { inset-inline-start: 8%; }
.mini i:nth-child(2), .cur-mini i:nth-child(2) { inset-inline-end: 8%; }
.mini b, .cur-mini b { position: absolute; bottom: 11%; inset-inline: 22%; height: 14%; background: var(--m-volt); border-radius: min(var(--m-rs), 6px); }
.mini b::after, .cur-mini b::after { content: ''; position: absolute; top: -175%; inset-inline: -10%; height: 2px; background: var(--m-text); opacity: .7; }

/* هوية المتجر */
.idc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.idc-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.idc-form .fl, .idc .fl { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.idc-form .fl small, .idc .fl small { font-weight: 500; color: var(--text-3); }
.idc-logo { grid-column: 1 / -1; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.logo-box { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; flex-shrink: 0; }
.logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.logo-box small { font-size: 10.5px; color: #555; text-align: center; padding: 4px; }
.hint { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.btn.danger { color: var(--deal); }
.ph-sub { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: var(--text-2); line-height: 1.6; }
.idc-note { margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); }

/* مكتبة الهوية */
.lib-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 12px; }
.lib-filter::-webkit-scrollbar { display: none; }
.lib-filter button { flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: 600 13px var(--font-body); cursor: pointer; }
.lib-filter button.on { background: var(--text); color: var(--paper); border-color: var(--text); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lib-card, .col-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "mini txt" "act act"; gap: 10px 12px; padding: 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--white); }
.lib-card .mini { grid-area: mini; }
.lib-txt { grid-area: txt; min-width: 0; }
.lib-card h3, .col-card h3 { margin: 0 0 2px; font-size: 15.5px; line-height: 1.4; }
.lib-card p, .col-card p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lib-tags span { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.lib-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.lib-act .btn { flex: 1 1 auto; }
.lib-act .pk-on { flex: 1 1 100%; justify-content: center; }
.lib-card.on, .col-card.on { border-color: var(--volt); background: var(--white); background: color-mix(in srgb, var(--volt) 7%, var(--white)); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 16%, transparent); }

/* الألوان فقط */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.col-card { grid-template-columns: 1fr; grid-template-areas: none; }
.col-card .lib-act { grid-area: auto; }
.col-card .sw { display: flex; }
.col-card .sw i { flex: 1; height: 22px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.col-card .sw i:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.col-card .sw i:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.acc-box { margin-top: 18px; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.acc-box h3 { margin: 0 0 4px; font-size: 16px; }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.acc-pick { width: 52px; height: 44px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.acc-hex { width: 130px; min-height: 44px; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.acc-demo { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #111; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* أقسام قابلة للطي */

/* التخطيط */
.lay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.lay-card { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: start; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--white); color: var(--text); cursor: pointer; font: inherit; }
.lay-card b { font-size: 14px; } .lay-card small { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.lay-card.on { border-color: var(--volt); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 16%, transparent); }
.lay-card.on::before { content: '✓'; position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--volt); color: var(--on-volt); font-size: 12px; font-weight: 900; }
.lay-tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.lay-mini { display: grid; gap: 3px; height: 54px; padding: 5px; border-radius: 8px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); margin-bottom: 4px; }
.lay-mini i { background: transparent; background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 2px; }
/* ص87: خياران فقط — رسم مصغّر لشاشة هاتف: «شبكة» ٢×٢ بطاقات، «أفقي» صفوف (صورة | أسطر) */
.lay-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.lay-two .lay-mini { height: 104px; gap: 5px; padding: 7px; }
.lay-mini i { position: relative; background: var(--white); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 5px; overflow: hidden; }
.lay-mini i::before, .lay-mini i::after { content: ''; position: absolute; border-radius: 2px; background: transparent; background: color-mix(in srgb, var(--text) 20%, transparent); }
.lm-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lm-grid i::before { inset: 4px 4px 42% 4px; }
.lm-grid i::after { inset-inline: 5px 35%; bottom: 7px; height: 4px; background: var(--volt); background: color-mix(in srgb, var(--volt) 55%, transparent); }
.lm-list { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
.lm-list i:nth-child(4) { display: none; }
.lm-list i::before { inset-block: 3px; inset-inline-start: 3px; width: 32%; }
.lm-list i::after { inset-inline-start: calc(32% + 9px); inset-inline-end: 20%; top: 38%; height: 4px; background: var(--volt); background: color-mix(in srgb, var(--volt) 55%, transparent); }
.lay-card.on .lay-mini { background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); }
.lay-two .lay-card.on::before { top: -8px; inset-inline-end: -8px; box-shadow: 0 0 0 3px var(--white); }
.lay-hint { margin: 12px 0; font-size: 13px; color: var(--text-2); line-height: 1.7; }

/* شريط الحفظ: لاصق تحت، يظهر بس عند وجود تغييرات */
.savebar { position: fixed; z-index: 950; inset-inline: 12px; bottom: calc(var(--abar, 0px) + max(12px, env(safe-area-inset-bottom))); max-width: 760px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--text); color: var(--paper); box-shadow: var(--shadow-3); }
.savebar span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.savebar small { font-size: 12px; opacity: .8; }
.savebar > div { display: flex; gap: 8px; }
.savebar .btn-ghost { color: var(--paper); border-color: var(--line); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
@media (min-width: 961px) { .savebar { inset-inline-start: calc(260px + 24px); } }

/* نافذة المعاينة */
.pv-wrap { z-index: 1100; padding: 12px; }
.pv-dlg { position: relative; display: flex; flex-direction: column; width: min(1100px, 100%); max-height: calc(100dvh - 24px); background: var(--white); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); overflow: hidden; }
.pv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.pv-top h2 { margin: 0; font-size: 18px !important; }
.pv-note { margin: 4px 0 0; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.pv-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }
.pv-x { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; }
.pv-tools { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 16px 10px; }
.pv-tools .range-btns button { min-height: 36px; }
.pv-shell { flex: 1; min-height: 0; margin: 0 16px; overflow: auto; }
.pv-shell iframe { height: 100%; min-height: 420px; }
.pv-shell.mob { width: 390px; max-width: 100%; }
.pv-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cf-dlg h2 { margin: 0 0 8px; font-size: 20px !important; }
.cf-dlg p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.8; color: var(--text-2); }
.cf-dlg p small { color: var(--text-3); }
.cf-btns { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 640px) {
  .idc-current { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .cur-actions { grid-column: 1 / -1; justify-content: stretch; }
  .cur-actions .btn { flex: 1 1 auto; }
  .idc-form { grid-template-columns: 1fr; }
  .lib-grid, .col-grid { grid-template-columns: 1fr; }
  .lay-grid { grid-template-columns: 1fr 1fr; }
  .pv-wrap { padding: 0; }
  .pv-dlg { max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .pv-shell { margin: 0 8px; }
  .pv-shell iframe { min-height: 0; }
  .pv-foot .btn { flex: 1; }
  .cf-btns .btn { flex: 1; }
  .savebar { inset-inline: 8px; }
  .savebar > div { width: 100%; } .savebar > div .btn { flex: 1; }
}
/* أزرار مركز الهوية ونوافذه: سطر واحد وحشوة معقولة (الحشوة العامة 26px كانت تكسر «تأكيد التفعيل» لسطرين) */
:is(.idc, .pv-foot, .cf-btns, .savebar) .btn { white-space: nowrap; padding: 0 16px; min-height: 44px; font-size: 14.5px; line-height: 1.2; }
:is(.idc, .savebar) .btn-sm { min-height: 40px; padding: 0 12px; font-size: 13.5px; }

/* ══ «يحتاج انتباهك» — زر جنب الإشعارات (الموبايل بالشريط العلوي، الكمبيوتر بالقائمة) + لوحته ══ */
.bellw { display: grid; gap: 8px; }
.bell .bdg.calm, .atop-btn .bdg.calm { background: transparent; background: color-mix(in srgb, var(--on-chrome-2) 30%, transparent); color: var(--on-chrome); }
body.admin .bell .bdg.calm { background: transparent; background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.attn-panel .at-item { align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.attn-panel .at-i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; color: var(--ink-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.attn-panel .lv-high .at-i, .attn-panel .lv-high .at-n { color: var(--deal); }
.attn-panel .lv-high .at-i { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); }
.attn-panel .lv-mid .at-i, .attn-panel .lv-mid .at-n { color: var(--warn); }
.attn-panel .lv-mid .at-i { background: transparent; background: color-mix(in srgb, var(--warn) 13%, transparent); }
.attn-panel .lv-low .at-i { color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); }
.attn-panel .np-t b { font-size: 14px; line-height: 1.45; }
.attn-panel .np-t > span { white-space: normal; font-size: 12.5px; color: var(--ink-3); }
.attn-panel .at-n { font-variant-numeric: tabular-nums; }
.attn-panel .at-cta { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; border: 1px solid var(--line); }
.attn-panel .lv-high .at-cta { background: var(--volt); border-color: var(--volt); color: var(--on-volt, #111); }
.attn-panel .at-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.attn-panel .at-ok .mi { width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); stroke-width: 2.6; }
.attn-panel .at-part { color: var(--deal); }


/* ══ دفعات شام كاش (pv): تبويبات · قائمة مختصرة · مراجعة (صفحة كاملة عالموبايل) بشريط قرار ثابت ══ */
.pv-tabs { display: flex; gap: 6px; margin: -8px 0 16px; overflow-x: auto; scrollbar-width: none; }
.pv-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font: 700 14px var(--font-head); white-space: nowrap; cursor: pointer; }
.pv-tabs button.on { background: var(--text); border-color: var(--text); color: var(--paper); }
.pv-tabs b { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--deal); color: var(--on-deal, #fff); font-size: 12px; line-height: 22px; text-align: center; }
.pv-tabs button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

.pv-list { overflow: hidden; }
.pv-rows { list-style: none; margin: 0; padding: 0; }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); text-align: start; font: inherit; cursor: pointer; transition: background-color .15s; }
.pv-rows li:last-child .pv-row { border-bottom: 0; }
.pv-row:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.pv-row.sel { background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); box-shadow: inset -3px 0 0 var(--volt); }
.pv-row:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.pv-r-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-r-m b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-variant-numeric: tabular-nums; }
.pv-r-m em { font-style: normal; font-size: 12px; font-weight: 700; }
.pv-r-m em.ok { color: var(--ok); } .pv-r-m em.no { color: var(--deal); }
.pv-r-m small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-r-s { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.pv-r-s small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.pv-empty { display: flex; align-items: center; gap: 10px; padding: 20px 16px; font-weight: 600; color: var(--ink-2); }
.pv-empty .mi { width: 22px; height: 22px; padding: 3px; border-radius: 50%; color: var(--ok); background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); stroke-width: 2.6; stroke: currentColor; fill: none; }

.pv-review { padding: 0; overflow: clip; }
.pv-review > * { margin-inline: 16px; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block: 14px 10px; }
.pv-back { display: none; }
.pv-amount { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid; }
.pv-amount.ok { border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: transparent; background: color-mix(in srgb, var(--ok) 7%, transparent); }
.pv-amount.no { border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 45%, transparent); background: transparent; background: color-mix(in srgb, var(--deal) 7%, transparent); }
.pv-amount span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pv-amount b { font-family: var(--font-head); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pv-amount p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; font-weight: 700; }
.pv-amount.ok p { color: var(--ok); } .pv-amount.no p { color: var(--deal); }
/* ⚠ غير مقروء / مطابق مع ملاحظة (receipt-check.paymentVerdict) */
.pv-amount.warn { border-color: var(--warn); background: var(--warn-bg); }
.pv-amount.warn p { color: var(--warn); }
.pv-r-m em.warn { color: var(--warn); }
.pv-flags { grid-column: 1 / -1; margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--ink-2, var(--ink-3)); }
.pv-rescan { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-rescan small { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.pv-ack { color: var(--warn); font-weight: 700; }
.pv-facts { margin-block: 10px 4px; }
.pv-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pv-facts > div:last-child { border-bottom: 0; }
.pv-facts dt { flex-shrink: 0; font-size: 12.5px; color: var(--ink-3); }
.pv-facts dd { margin: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pv-facts a { color: var(--gold-ink); font-weight: 700; text-decoration: none; }
.pv-ph { font-size: 12.5px; color: var(--ink-3); }
.pv-copy { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 12.5px var(--font-head); cursor: pointer; }
.pv-copy:hover { border-color: var(--volt); }
.pv-scan { margin: 6px 0; font-size: 12.5px; color: var(--ink-3); }
.pv-receipt { margin-block: 10px; }
.pv-img { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; cursor: zoom-in; }
.pv-img img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.pv-img span { position: absolute; bottom: 8px; inset-inline-start: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; font-weight: 600; }
.pv-state { margin-block: 10px 16px; }
/* شريط القرار: ثابت تحت الشاشة وهي عم تتطلّع بالوصل */
.pv-bar { position: sticky; bottom: var(--abar, 0px); z-index: 3; margin: 12px 0 0 !important; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--surface);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .35); }
.pv-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pv-check input { width: 20px; height: 20px; flex-shrink: 0; }
.pv-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 6px; }
.pv-btns .btn { min-height: 48px; justify-content: center; }
.pv-btns .pv-rej { color: var(--deal); padding-inline: 22px; }
.pv-reject { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.pv-zoom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .9); cursor: zoom-out; }
.pv-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.pv-zx { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer; }
/* مراجعة الدفعة (كمبيوتر): لوحة لاصقة بتمرير داخلي. `body.admin .side-panel { overflow: visible }` كان غالب ⇒
   المحتوى كان يطلع برّا اللوحة ويطوّل الصفحة أكتر من التخطيط (والشريط الجانبي يبان مقطوع تحت) */
@media (min-width: 961px) { body.admin .pv-review { max-height: calc(100vh - 32px); overflow-x: hidden; overflow-y: auto; } }
/* الموبايل: يا القائمة يا المراجعة — مش الاتنين فوق بعض */
@media (max-width: 960px) {
  .pv-wrap.detail .pv-list { display: none; }
  .pv-wrap:not(.detail) .pv-review { display: none !important; }
  .pv-wrap.detail { display: block; }
  .pv-back { display: inline-flex; }
  .pv-review { border-radius: 16px; }
}
@media (max-width: 960px) { .amain:has(.pv-wrap.detail) .pv-tabs { display: none; } }
@media (max-width: 640px) { .pv-tabs { gap: 4px; } .pv-tabs button { padding: 0 11px; font-size: 13px; gap: 6px; } }
@media (min-width: 961px) { .split.pv-wrap { grid-template-columns: minmax(0, 1fr) minmax(380px, 1.1fr); } }

/* ══ قائمة «⋯» مشتركة: الإجراءات النادرة/الخطرة بدل صف أزرار طويل ══ */
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; min-width: 40px; justify-content: center; font-size: 18px; line-height: 1; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-pop { position: absolute; z-index: 60; top: calc(100% + 6px); inset-inline-end: 0; min-width: 200px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-3, 0 18px 40px rgba(0,0,0,.25)); display: grid; gap: 2px; }
.more-pop > button, .more-pop > a { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 14px var(--font-body); text-align: start; text-decoration: none; cursor: pointer; white-space: nowrap; }
.more-pop > button:hover, .more-pop > a:hover { background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.more-pop .danger { color: var(--deal); }
/* القائمة المفتوحة ما بتنقص: اللوحة الحاوية بتسمح بالظهور خارجها، والصف المفتوح فوق جيرانه */
body.admin :is(.panel, .side-panel, .t-cards, .pb, .inv-list, .ao-tablew, .pv-list):has(.more-menu[open]) { overflow: visible; }
body.admin :is(li, tr, .cr-row, .pr-row, .inv-row):has(.more-menu[open]) { position: relative; z-index: 70; }
.more-menu.up > .more-pop { top: auto; bottom: calc(100% + 6px); }
.more-pop > [disabled] { opacity: .45; cursor: not-allowed; }
/* ص87: القائمة المشتركة — حاوية ثابتة في body (انظر bindMoreMenus في shell.js) */
.mm-host { position: fixed; inset: 0 auto auto 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; z-index: 950; }
.mm-host > summary { display: none; }
.mm-host > .more-pop { position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top left; transition: opacity .12s ease-out, transform .14s cubic-bezier(.22, 1, .36, 1); }
.mm-host > .more-pop.mm-up { transform: translateY(4px) scale(.97); transform-origin: bottom left; }
.mm-host > .more-pop.mm-in { opacity: 1; transform: none; }
details.more-menu.mm-open > summary { background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .mm-host > .more-pop { transition: none; transform: none; } }

/* ══ الزبائن: تفاصيل ══ */
.cu-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cu-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cu-card { padding: 16px; }
.cu-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cu-id h1 { margin: 0; font-size: 24px; }
.cu-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 16px; font-weight: 700; }
.cu-contact bdi { margin-inline-end: 6px; }
.cu-wa { color: var(--ok); }
.cu-meta { margin: 8px 0 0; color: var(--ink-3); font-size: 14px; }
.cu-otp { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.cu-otp p { margin: 4px 0; color: var(--ink-2); }
.cu-empty { padding: 14px 16px; margin: 0; color: var(--ink-3); }
.cu-orders { list-style: none; margin: 0; padding: 0; }
.cu-orders a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.cu-orders li:last-child a { border-bottom: 0; }
.cu-orders a:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.cu-orders a > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.cu-orders small { font-size: 12px; color: var(--ink-3); }
.cu-o-s { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* زر رفع ملف عربي (بدل «Choose File / No file chosen» تبع المتصفح) */
.up-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; align-self: flex-start; }
.up-btn.off { opacity: .55; cursor: not-allowed; }
.up-btn:focus-within { outline: 2px solid var(--volt); outline-offset: 2px; }
.pv-review .tp-credit { margin-bottom: 4px; } .pv-review .tp-credit input { max-width: 200px; }
/* تبويبات حالة الطلبات */
.ao-tabs { margin: 0 0 14px; padding-bottom: 2px; }
.pv-tabs em { font-style: normal; min-width: 22px; padding: 0 7px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 12px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.pv-tabs em.hot { background: var(--deal); color: var(--on-deal, #fff); }
.pv-tabs button.on em:not(.hot) { background: transparent; background: color-mix(in srgb, var(--paper) 25%, transparent); }
.ao-reach { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .ao-wa { color: var(--ok); }
/* رسائل الزبائن: ردود جاهزة + محادثة بصفحة كاملة عالموبايل */
.ms-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; padding-bottom: 2px; }
.ms-quick button { flex-shrink: 0; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 12.5px var(--font-body); cursor: pointer; white-space: nowrap; }
.ms-quick button:hover { border-color: var(--volt); color: var(--text); }
.ms-wrap:not(:has(.thread-row)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
  .ms-wrap.detail > .panel { display: none; }
  .ms-wrap:not(.detail) .ms-chat { display: none !important; }
}
/* المخزون: + / − سريع جنب الكمية */
.inv-step { display: inline-flex; align-items: center; gap: 4px; }
.inv-step button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 18px var(--font-head); line-height: 1; cursor: pointer; }
.inv-step button:hover:not(:disabled) { border-color: var(--volt); }
.inv-step button:disabled { opacity: .4; cursor: not-allowed; }
.inv-step b { min-width: 32px; text-align: center; }
/* تعديل المنتج: أقسام بتنطوى + زر حفظ ثابت عالموبايل */
@media (max-width: 960px) {
  .pe-save { position: sticky; bottom: var(--abar, 0px); z-index: 5; box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .35); }
  .pe-save > div { padding: 10px 16px max(10px, env(safe-area-inset-bottom)) !important; display: flex; gap: 8px; }
  .pe-save .btn { margin-top: 0 !important; }
}
.of-empty { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; font-size: 13.5px; color: var(--ink-3); }
.wl-legacy { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.aside .who .who-shop { display: block; margin-top: 6px; font-size: 13px; color: var(--volt); text-decoration: none; } .aside .who .who-shop:hover { text-decoration: underline; }
/* التقارير: الأكثر مبيعاً كقائمة بشريط نسبي */
.an-top { list-style: none; margin: 0; padding: 0; }
.an-top li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.an-top li:last-child { border-bottom: 0; }
.an-r { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 12.5px; font-weight: 800; flex-shrink: 0; }
.an-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.an-m b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-m i { display: block; height: 6px; border-radius: 3px; background: var(--volt); }
.an-v { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.an-v b { font-size: 14px; } .an-v small { font-size: 12px; color: var(--ink-3); }
.as-off { color: var(--ink-2); } .as-off b { color: var(--text); }
.cp-prog { display: inline-block; vertical-align: middle; width: 60px; height: 6px; border-radius: 3px; background: transparent; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .cp-prog i { display: block; height: 100%; background: var(--ok); }
.st-off { opacity: .65; }
/* أجهزة الدخول: مجمّعة حسب الشخص */
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-g { border-bottom: 1px solid var(--line); }
.ss-g:last-child { border-bottom: 0; }
.ss-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.ss-h:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.ss-n { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-n bdi { font-size: 12.5px; color: var(--ink-3); }
.ss-c { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ss-b { padding: 0 16px 12px; }
.ss-d { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.ss-d > span:first-child { flex: 1; display: flex; flex-direction: column; } .ss-d small { font-size: 12px; color: var(--ink-3); }
.ss-all { margin-top: 8px; color: var(--deal); }
.au-row { cursor: pointer; } .au-row:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }

/* ══ بحث + فلاتر بشكل موحّد: حقل بحث أنحف (42) وزر فلاتر مربّع صغير بأيقونة وعدد الفلاتر الفعّالة.
   عالموبايل باقي الفلاتر بتظهر بس لما تكبس الزر. ══ */
.ff-btn, body.admin .ao-ftoggle.ff-btn { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ff-btn:hover { border-color: var(--volt); }
.ff-btn[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--paper); }
.ff-btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.ff-btn i { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--volt); color: var(--on-volt, #111); font: 800 11px/18px var(--font-head); font-style: normal; text-align: center; }
.ff-q { position: relative; display: block; flex: 1 1 220px; min-width: 0; }
.ff-q svg { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
body.admin .ff-q input { width: 100%; height: 44px; min-height: 44px; padding-inline: 38px 12px !important; border-radius: 12px; font-size: 14px; }
/* فلاتر الطلبات/المخزون: بلا البطاقة الكبيرة حوالين البحث */
.ao-filters { padding: 0; background: none; border: 0; box-shadow: none; margin-bottom: 14px; }
body.admin .ao-search input { height: 44px; min-height: 44px; padding-inline: 38px 12px !important; border-radius: 12px; font-size: 14px; }
.ao-search svg { inset-inline-start: 12px; }
@media (min-width: 761px) { body.admin .ao-ftoggle.ff-btn { display: none; } }
@media (max-width: 760px) {
  .ao-filters { gap: 8px; }
  .ao-fsel.open { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
}
/* صفحات filters-row: الزر بيبيّن عالشاشات الصغيرة بس، والباقي مطوي لحتى ينكبس */
.filters-row.ff { align-items: center; }
.filters-row.ff > .ff-btn { display: none; }
@media (max-width: 960px) {
  .filters-row.ff { flex-wrap: wrap; }
  .filters-row.ff > .ff-btn { display: inline-grid; }
  .filters-row.ff > :not(.ff-q):not(.ff-btn) { display: none; }
  .filters-row.ff.open > :not(.ff-q):not(.ff-btn) { display: flex; flex: 1 1 100%; }
  .filters-row.ff.open > select, .filters-row.ff.open > input { display: block; }
  .filters-row.ff > .ff-q { flex: 1 1 0; }
}
body.admin .filters-row input[type=checkbox] { flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; }

/* بلا شريط تمرير أفقي ظاهر بكل اللوحة (التبويبات، الردود الجاهزة، الجداول العريضة…) — السحب بالإصبع بيضل شغّال.
   scrollbar-width لفايرفوكس/كروم الحديث، و::-webkit-scrollbar لمتصفحات أندرويد الأقدم. الأشرطة العمودية ما بتتأثر. */
body.admin :is(.pv-tabs, .ms-quick, .lib-filter, .ao-kpis-row, .ao-kpis-sk, .chart-wrap, .range-btns, .pb, .panel) { scrollbar-width: none; }
body.admin ::-webkit-scrollbar:horizontal { display: none; height: 0; }
body.admin :is(.pv-tabs, .ms-quick, .lib-filter, .ao-kpis-row, .range-btns)::-webkit-scrollbar { display: none; height: 0; }
/* هوية المتجر: الحقول ما تطلع برّا البطاقة (عنصر الشبكة كان بياخد عرض الحقل الطبيعي) */
.idc-form > * { min-width: 0; }
body.admin .idc-form .field :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }

/* ══ قسم بينطوى — نمط واحد بكل الأدمن: <details class="fold"> + <summary> ══
   الترويسة كلها بتنكبس · السهم دايماً بآخرها (لتحت = مسكّر، لفوق = مفتوح) · «fold-cur» حالة مختصرة بتبيّن وهو مسكّر.
   كل الأقسام مسكّرة افتراضياً. */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after, .pe-chev { content: ''; display: block; flex-shrink: 0; width: 20px; height: 20px; margin-inline-start: 2px;
  background: var(--ink-2); -webkit-mask: var(--chev) center / 20px no-repeat; mask: var(--chev) center / 20px no-repeat; transition: transform .2s; }
details.fold[open] > summary::after, .ss-g.open .pe-chev { transform: rotate(180deg); }
details.fold > summary:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
details.fold > summary:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
details.fold:not([open]) > summary { border-bottom: 0; }
details.fold > summary .fold-t { flex: 1; min-width: 0; }
details.fold > summary h2 { margin: 0; flex: 1; min-width: 0; }
details.fold > summary .fold-t h2 { flex: none; }
.fold-cur { flex-shrink: 1; min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.fold-cur.hot { background: transparent; background: color-mix(in srgb, var(--volt) 22%, transparent); color: var(--gold-ink); }
@media (max-width: 600px) { details.fold > summary .ph-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { details.fold > summary::after, .pe-chev { transition: none; } }
.pb.fold-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 4px; }
.pb.fold-bar:empty { display: none; }
/* الرئيسية: نفس نمط الطي */
.db-kf { margin-bottom: 16px; }
.db-kf > summary.db-kh { margin: 0; padding: 10px 12px; border-radius: var(--db-r); background: var(--db-card); border: var(--db-b); box-shadow: var(--db-sh); }
.db-kf[open] > summary.db-kh { margin-bottom: 8px; background: none; border-color: transparent; box-shadow: none; padding-inline: 4px; }
.db-kf .db-kpis { margin-bottom: 0; }
.db-sec.fold { padding: 0; }
.db-sec.fold > summary { padding: 14px var(--db-pad); border-radius: var(--db-r); }
.db-sec.fold > summary h2 { font-size: 16.5px; }
.db-sec.fold > :not(summary) { margin-inline: var(--db-pad); }
.db-sec.fold > :last-child { margin-bottom: 16px; }
.db-more-in { display: flex; width: fit-content; margin: -4px 0 10px auto; }
.db-kh h2 { margin: 0; font-size: 16.5px; }
@media (max-width: 600px) { .db-sec.fold > summary h2 small { display: none; } }
/* الزبائن: بحث بعرض كامل، جدول عالشاشات العريضة، قائمة مضغوطة عالموبايل */
.cu-search { width: 100%; } .cu-search .ff-q { width: 100%; max-width: 420px; }
.cu-list { display: none; list-style: none; margin: 0; padding: 0; }
.cu-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cu-list li:first-child .cu-li { border-top: 0; }
.cu-li:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.cu-av { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--gold-ink); font-weight: 800; }
.cu-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cu-m b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-m bdi { font-size: 13px; color: var(--ink-2); text-align: end; align-self: flex-start; }
.cu-m small { font-size: 12px; color: var(--ink-3); }
.cu-st { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--ink-2); }
.cu-st.s-verified { background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.cu-st.s-banned { background: transparent; background: color-mix(in srgb, var(--deal) 14%, transparent); color: var(--deal); }
.cu-empty { margin: 0; padding: 16px; font-size: 14px; color: var(--ink-3); }
.cu-table { width: 100%; }
.cu-table tbody tr:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
@media (max-width: 760px) { .cu-table { display: none; } .cu-list { display: block; } }
/* المنتجات: جدول عالشاشات العريضة، قائمة مضغوطة عالموبايل (السطر كله بيفتح التعديل) */
.pr-table { width: 100%; }
.pr-list { display: none; list-style: none; margin: 0; padding: 0; }
.pr-list li { display: flex; align-items: center; gap: 4px; padding-inline-end: 8px; border-top: 1px solid var(--line); }
.pr-list li:first-child { border-top: 0; }
.pr-li { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.pr-li:hover { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); }
.pr-li img { flex-shrink: 0; width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: var(--white); }
.pr-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-m > b { font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-m > small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.pr-price { font-size: 14px; }
.pr-pill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--ink-2); }
.pr-pill.s-ok { background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pr-pill.s-low { background: transparent; background: color-mix(in srgb, var(--volt) 22%, transparent); color: var(--gold-ink); }
.pr-pill.s-out { background: transparent; background: color-mix(in srgb, var(--deal) 14%, transparent); color: var(--deal); }
@media (max-width: 760px) { .pr-table { display: none; } .pr-list { display: block; } }
.pr-list .more-menu > summary { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
/* المخزون: سطر مضغوط عالموبايل — المنتج و«⋯» فوق، الحالة والكمية (± ) تحت؛ «جرد» جوّا «⋯» */
.inv-units { margin: 0; font-size: 13px; color: var(--ink-3); align-self: center; white-space: nowrap; }
.more-pop .inv-m-adj { display: none; }
@media (max-width: 760px) {
  .inv-units { grid-column: 1 / -1; }
  .inv-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p act" "s q"; gap: 6px 10px; padding: 12px 14px; }
  .inv-p { grid-area: p; grid-column: auto; gap: 10px; }
  .inv-p img { width: 44px; height: 44px; }
  .inv-act { grid-area: act; grid-column: auto; align-self: start; flex-wrap: nowrap; }
  .inv-act .inv-adj-b { display: none !important; }
  .inv-act .more-menu > summary { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; flex: none; }
  .more-pop .inv-m-adj { display: flex; }
  .inv-s8 { grid-area: s; align-self: center; }
  .inv-q { grid-area: q; flex-direction: column; align-items: flex-end; gap: 0; }
  .inv-q b { font-size: 18px; }
  .inv-q small { font-size: 11px; }
  .inv-step button { width: 32px; height: 32px; font-size: 16px; }
  .inv-dt { display: none; }
}
/* زر الترويسة بكل الصفحات: نفس حجم «إضافة زبون» (مو زر ضخم) */
body.admin .ahead .btn { min-height: 40px; padding: 0 16px; font-size: 14px; gap: 6px; }
@media (max-width: 760px) {
  /* بطاقات الأرقام (أرصدة، تقارير): عمودين مضغوطين بدل بطاقات طويلة */
  body.admin .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.admin .kpi { padding: 10px 12px; }
  body.admin .kpi .v { font-size: 20px; }
  body.admin .kpi .s { font-size: 11.5px; }
}
/* جداول «rw»: عالموبايل كل صف سطر مضغوط — الاسم و«⋯» فوق، والتفاصيل الصغيرة بسطر تحته (بدل بطاقة طويلة) */
.m-only { display: none !important; }
@media (max-width: 760px) {
  .m-only { display: revert !important; }
  .more-pop > .m-only { display: flex !important; }
  .d-only, .d-only-c { display: none !important; }
  body.admin .t-cards.rw tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; }
  body.admin .t-cards.rw td.rw-main { flex: 1 1 0; min-width: 0; order: 0; grid-column: auto; font-size: 15px; }
  body.admin .t-cards.rw td.rw-main small { font-size: 12px; color: var(--ink-3); font-weight: 400; }
  body.admin .t-cards.rw td.rw-act { order: 1; flex: none; grid-column: auto; }
  body.admin .t-cards.rw td.rw-act .more-menu > summary { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
  body.admin .t-cards.rw td.rw-meta { order: 2; font-size: 12.5px; }
  body.admin .t-cards.rw td.rw-meta::before { font-size: 11.5px; }
  body.admin .t-cards.rw tr::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
  body.admin .t-cards.rw .rw-sel { min-height: 34px; height: 34px; padding: 0 8px; font-size: 13px; width: auto; }
}
@media (max-width: 760px) {
  body.admin .t-cards.rw td.rw-wide { flex-basis: 100%; color: var(--ink-2); line-height: 1.6; }
  body.admin .t-cards.rw td.rw-wide::before { display: none; }
}
.rw-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* أسفل القائمة الجانبية: بلا اسم الحساب — ٣ أزرار متساوية (تسوّق كزبون · الوضع · خروج) */
body.admin .aside .who { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
body.admin .aside .who-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent);
  color: var(--text-2); font: 700 12px var(--font-body); text-decoration: none; text-align: center; cursor: pointer; line-height: 1.3; }
body.admin .aside .who-b .mi { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.admin .aside .who-b:hover { border-color: var(--volt); color: var(--text); }
body.admin .aside .who-b:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; }
body.admin .aside .who-b.out:hover { border-color: var(--deal); color: var(--deal); }
@media (max-width: 960px) { body.admin .aside .who { grid-template-columns: none; gap: 6px; padding-inline: 12px; } }
.rw-tap { cursor: pointer; } .rw-tap:hover b { text-decoration: underline; text-decoration-color: var(--volt); }
@media (max-width: 760px) {
  body.admin .t-cards.rw td.rw-main .rw-sub { display: block !important; margin-top: 2px; font-size: 12px; color: var(--ink-3); font-weight: 400; }
  body.admin .t-cards.rw td.rw-chk { display: inline-flex; align-items: center; gap: 6px; }
  body.admin .t-cards.rw td.rw-chk input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; }
}
#attr-form { scroll-margin-top: 84px; }
/* رأس الطلب عالموبايل: الحالة والدفع والإجمالي أسطر (التسمية يمين، القيمة يسار) بدل عمودين ضيقين بتطلع منهم الشارات */
@media (max-width: 760px) {
  .ao-hero-st { grid-template-columns: 1fr; gap: 0; border-radius: 14px; overflow: hidden; background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); }
  .ao-hero-st > div, .ao-hero-st > div:last-child { grid-column: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 0; background: none; }
  .ao-hero-st > div + div { border-top: 1px solid var(--line); }
  .ao-hero-st .ob-lg { font-size: 13px; padding: 4px 10px; white-space: normal; text-align: center; max-width: 64%; }
  .ao-hero-total { font-size: 20px; }
  .ao-hero-id h1 { font-size: 22px; }
}
.ao-hero-id small { display: block; }
.ao-hero-up { margin-top: 2px; font-size: 12px !important; }
.ao-hero-m { font-size: 14px; font-weight: 700; }
.ao-hero-st { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* عالموبايل قسم «مراجعة الدفع» بيجي مباشرة تحت — زر القفز إله زيادة */
@media (max-width: 960px) { .ao-rv-link { display: none !important; } .ao-actions.is-cancelled { display: none; } }
@media (max-width: 960px) { .ao-hero-st { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ao-hero-st { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  body.admin .t-cards.rw td.rw-time::before { display: none; }
  body.admin .t-cards.rw td.rw-time { font-size: 11.5px !important; color: var(--ink-3) !important; }
  body.admin .t-cards.rw td.rw-main b { font-weight: 700; }
}
.of-master { display: flex; align-items: center; gap: 12px; margin: -8px 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.of-master span { display: flex; flex-direction: column; gap: 2px; }
.of-master b { font-size: 14px; }
.of-master small { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.of-master.off { border-color: var(--deal); border-color: color-mix(in srgb, var(--deal) 50%, transparent); }
.of-master.off b { color: var(--deal); }
@media (max-width: 760px) { body.admin .t-cards.rw td.rw-main::before { display: none !important; } }
/* ══ السائقون والشحن ══ */
.cr-intro { margin: -12px 0 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.7; }
.cr-form { display: grid; gap: 12px; }
.cr-kind { display: inline-flex; justify-self: start; padding: 3px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.cr-kind button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 13px var(--font-head); cursor: pointer; }
.cr-kind button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cr-err { margin: 0; color: var(--deal); font-size: 13.5px; font-weight: 700; }
.cr-btns { display: flex; gap: 8px; }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cr-row:first-child { border-top: 0; }
.cr-row.off { opacity: .7; }
.cr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cr-av { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); color: var(--gold-ink); }
.cr-av.company { border-radius: 12px; }
.cr-av .mi { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cr-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-t b { font-size: 15px; }
.cr-t small { font-size: 12.5px; color: var(--ink-3); }
.cr-cnt { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--gold-ink); }
.cr-acts { display: flex; gap: 6px; align-items: center; }
.cr-orders { flex-basis: 100%; display: grid; gap: 6px; padding: 8px 0 2px 0; padding-inline-start: 50px; }
.cr-meta { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.cr-o { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); text-decoration: none; font-size: 13px; }
.cr-o:hover { background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); }
.cr-o bdi { font-weight: 700; }
.cr-o .ob { margin-inline-start: auto; }
@media (max-width: 760px) { .cr-acts { flex-basis: 100%; padding-inline-start: 50px; } .cr-orders { padding-inline-start: 0; } }
/* تفاصيل الطلب: الأقسام بتنطوى بنفس النمط (السهم بآخر الترويسة) */
.ao-sec.fold > summary.ao-sh { margin: -16px -18px 0; padding: 14px 18px; border-radius: 18px; }
.ao-sec.fold[open] > summary.ao-sh { margin-bottom: 12px; }
.ao-sec.fold > summary.ao-sh h2 { flex: 1; }
@media (max-width: 760px) { .ao-sec.fold > summary.ao-sh { margin: -14px -14px 0; padding: 12px 14px; } }
.ao-ship { display: grid; gap: 10px; margin-top: 10px; }
.ao-ship-link { font-size: 12.5px; color: var(--gold-ink); text-decoration: none; }
/* كل حقول الأدمن: الحقل ما بيطلع أعرض من بطاقته، وعنوانه (label أو span) بنفس الحجم الصغير */
body.admin .field { min-width: 0; }
body.admin .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }
body.admin .field > span:first-child { font-weight: 600; font-size: 14px; color: var(--text-2); }
body.admin .field > span:first-child small { font-weight: 400; color: var(--ink-3); }
body.admin :is(.cr-form, .ao-ship, .fx-form) > * { min-width: 0; }
.ao-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ao-chk input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--volt); }
.ao-chk span { display: flex; flex-direction: column; gap: 2px; }
.ao-chk small { font-weight: 400; font-size: 12px; color: var(--ink-3); }
body.admin .cr-form .field, body.admin .ao-ship .ao-f { margin-bottom: 0; }
/* تنبيه قبل الشحن: واتساب المتجر غير جاهز ⇒ لن تصل الرسالة للسائق تلقائياً */
.ao-wa-warn { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size: 13.5px; line-height: 1.6; }
.ao-wa-warn a { display: inline-block; margin-inline-start: 4px; font-weight: 600; color: inherit; text-underline-offset: 3px; }
/* إعدادات › إشعارات الحالات: أيقونة صغيرة لكل حالة + ⓘ يفتح شرح متى تُرسل وماذا تحمل */
.nt-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
.nt-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; }
.nt-main { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 36px; cursor: pointer; }
.nt-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  color: var(--text-2); background: transparent; background: color-mix(in srgb, currentColor 12%, transparent); }
.nt-ic .mi { width: 13px; height: 13px; }
.nt-ic.t-ok { color: var(--ok); } .nt-ic.t-warn { color: var(--warn); } .nt-ic.t-bad { color: var(--deal); }
.nt-q { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.nt-q .mi { width: 16px; height: 16px; }
.nt-q:hover, .nt-q[aria-expanded="true"] { color: var(--text); background: transparent; background: color-mix(in srgb, currentColor 8%, transparent); }
.nt-help { grid-column: 1 / -1; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.65; color: var(--text-2);
  background: transparent;
  background: color-mix(in srgb, var(--text) 4%, transparent); }
.nt-help b { color: var(--text); font-weight: 600; }
.nt-ic .mi, .nt-q .mi { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* الإشعارات متوقفة: الخيارات باهتة وغير قابلة للتعديل، لكن شرح ⓘ يبقى مقروءاً */
.nt-off .nt-main, .nt-off > .field { opacity: .5; pointer-events: none; }
/* شارات الطلبات: أيقونة الحالة بدل النقطة */
.ob.ob-ic { gap: 5px; }
.ob.ob-ic::before { display: none; }
.ob.ob-ic > .mi { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ob-lg.ob-ic > .mi { width: 15px; height: 15px; }
.ob.t-mute.ob-ic > .mi { opacity: .7; }
.ao-tabs .ao-tab-ic { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.ao-tabs button.on .ao-tab-ic { opacity: 1; }
/* التقارير › المبيعات اليومية: ملخص فوق المخطط + مخطط بعرض حقيقي + تلميح عند اللمس */
.an-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.an-sum div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); min-width: 0; }
.an-sum span { font-size: 12px; color: var(--ink-3); }
.an-sum b { font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.an-chart { position: relative; touch-action: pan-y; }
.an-chart svg { display: block; overflow: visible; }
.an-chart .chart-hits rect { cursor: pointer; }
.an-tip { position: absolute; top: -6px; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 11px; border-radius: 10px; background: var(--text); color: var(--paper); font-size: 12.5px; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / .35); }
.an-tip b { font-size: 12px; font-weight: 600; opacity: .8; }
.an-tip span { font-weight: 700; font-size: 14px; }
.an-tip small { font-size: 11.5px; opacity: .8; }
/* الأكثر مبيعاً: الاسم على سطرين بدل قصّه، والشريط فوق مسار باهت ليُقرأ كنسبة */
.an-m b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; }
.an-m .an-track { height: 6px; border-radius: 3px; background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); overflow: hidden; }
.an-m .an-track i { height: 100%; border-radius: 3px; }
@media (max-width: 420px) { .an-sum b { font-size: 13.5px; } .an-sum div { padding: 8px 10px; } }
/* تفاصيل الطلب › الخطوة التالية: مسار المراحل + سطر شرح + زر رئيسي واحد + إلغاء هادئ */
.ao-steps { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.ao-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); text-align: center; }
/* الخط الواصل بين المراحل (RTL: من مركز المرحلة لمركز التالية على يسارها) */
.ao-steps li:not(:last-child)::after { content: ''; position: absolute; top: 15px; inset-inline-start: calc(50% + 18px); inset-inline-end: calc(-50% + 18px); height: 2px; border-radius: 2px; background: var(--line); }
.ao-steps li.done:not(:last-child)::after { background: var(--ok); }
.ao-steps i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--ao-card, var(--surface)); color: var(--ink-3); }
.ao-steps .mi { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ao-steps li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.ao-steps li.done { color: var(--text); }
.ao-steps li.cur i { border-color: var(--volt); color: var(--gold-ink); background: var(--ao-card, var(--surface)); background: color-mix(in srgb, var(--volt) 16%, var(--ao-card, var(--surface))); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 18%, transparent); }
.ao-steps li.cur { color: var(--text); font-weight: 700; }
.ao-next { white-space: normal; overflow-wrap: anywhere; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 13.5px; line-height: 1.65; color: var(--text-2, var(--ink-3)); }
.ao-go, .ao-rv-link { gap: 8px; }
.ao-go .mi, .ao-rv-link .mi, .ao-rv-btns .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ao-back { align-self: center; background: none; border: 0; cursor: pointer; padding: 4px 8px; }
.ao-cancel { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.ao-cancel-btn { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none;
  color: var(--deal); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ao-cancel-btn:hover { background: transparent; background: color-mix(in srgb, var(--deal) 8%, transparent); }
.ao-cancel-btn .mi { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
/* زرّان متجاوران بعرض متساوٍ (تأكيد/رفض، تأكيد الإلغاء/تراجع) */
.ao-pair { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ao-pair .btn { min-height: 46px; min-width: 0; justify-content: center; gap: 6px; }
.ao-rv-btns.ao-pair .btn { min-width: 0; }
.ao-hint { font-size: 12.5px; color: var(--ink-3); margin-top: -4px; }
.ao-rv-act > .ao-link { align-self: flex-start; }
/* على الموبايل قسم «الخطوة التالية» تحت الرأس مباشرة ⇒ لا داعي لتكرار «الإجراء المطلوب» */
@media (max-width: 1100px) { .ao-todo.ao-todo-d { display: none; } }
body.admin .btn.ao-ok { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: none; }
body.admin .btn.ao-bad { background: var(--deal); border-color: var(--deal); color: #fff; box-shadow: none; }
body.admin .btn.ao-ok:disabled { opacity: .4; }
/* بوابة واتساب: أزرار صغيرة داخل البطاقة بدل أزرار كبيرة في عنوانها (العناوين كلها: عنوان + حالة + سهم) */
.mini-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface, transparent); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mini-btn:hover { border-color: var(--text); }
.mini-btn:disabled { opacity: .5; cursor: default; }
.mini-btn .mi { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-btn.is-bad { color: var(--deal); border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 35%, transparent); }
.wa-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.wa-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wa-check-t { margin: 0; flex: 1; min-width: 180px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
/* ===== إعدادات › ربط رقم واتساب المتجر: مسار واحد (زر ← رمز بمؤقت ← خطوات) ===== */
.wl { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.wl-head { display: flex; flex-direction: column; gap: 3px; }
.wl-head b { font-size: 16px; }
.wl-head small { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.wl-start { display: flex; flex-direction: column; gap: 12px; }
.wl-field { display: flex; flex-direction: column; gap: 6px; }
.wl-field label { font-size: 13px; font-weight: 700; }
.wl-field input { max-width: 260px; }
.wl-go { align-self: stretch; justify-content: center; gap: 8px; min-height: 50px; }
.wl-go .mi, .wl-tip .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wl-tip { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.65; color: var(--text-2);
  background: transparent;
  background: color-mix(in srgb, var(--volt) 9%, transparent); }
.wl-tip .mi { color: var(--gold-ink, var(--text)); margin-top: 2px; }

.wl-live { display: grid; gap: 16px; }
.wl-code { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wl-code img { display: block; width: min(232px, 72vw); height: auto; aspect-ratio: 1; padding: 10px; background: #FFFFFF; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 26px -14px rgb(0 0 0 / .35); image-rendering: pixelated; }
.wl-code b { font: 800 32px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; padding: 14px 18px; border-radius: 12px;
  background: var(--surface);
  background: color-mix(in srgb, var(--volt) 12%, var(--surface)); border: 1px solid var(--volt); }
/* مؤقت: شريط يتناقص + الوقت المتبقي */
.wl-timer { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(232px, 72vw); font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wl-timer i { display: block; width: 100%; height: 4px; border-radius: 2px; background: transparent; background: color-mix(in srgb, var(--text) 10%, transparent); position: relative; overflow: hidden; }
.wl-timer i::after { content: ''; position: absolute; inset: 0; transform-origin: right; transform: scaleX(var(--p, 1)); background: var(--stock-ok); transition: transform 1s linear; }
.wl-timer.low { color: var(--deal); }
.wl-timer.low i::after { background: var(--deal); }

.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wl-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; }
.wl-steps li > i { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; font-style: normal; font-size: 12.5px; font-weight: 800;
  background: var(--text); color: var(--paper); }
.wl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.wl-wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.wl-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); animation: wa-blink 1.2s ease-in-out infinite; }
.wl-alt { align-self: flex-start; padding: 2px 0; border: 0; background: none; color: var(--gold-ink, var(--text)); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 720px) {
  .wl-live { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 24px; }
  .wl-foot { grid-column: 1 / -1; }
  .wl-go { align-self: flex-start; padding-inline: 26px; }
}
@media (prefers-reduced-motion: reduce) { .wl-wait i { animation: none; } .wl-timer i::after { transition: none; } }

/* إعدادات واتساب › خطوات فصل الرقم من الهاتف (البوابة القديمة) */
.wu { margin-top: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 30%, transparent); background: var(--surface); background: color-mix(in srgb, var(--deal) 5%, var(--surface)); }
.wu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wu-head b { font: 700 15px var(--font-head); }
.wu-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.7; color: var(--text); }
.wu-steps li::marker { font-weight: 700; color: var(--deal); }
.wu-wait { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.wu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); }
@media (prefers-reduced-motion: no-preference) { .wu-dot { animation: wu-pulse 1.4s ease-in-out infinite; } }
@keyframes wu-pulse { 50% { opacity: .25; } }
.wu-note { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* ===== رسائل الزبائن › المحادثة (2026-10-05): ترويسة واضحة، فواصل أيام، إشعارات مميّزة، رد ثابت بالأسفل ===== */
.ms-chat { min-width: 0; }
.mc { display: flex; flex-direction: column; min-height: 0; }
.mc-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--text-2); }
.mc-empty b { font: 700 16px var(--font-head); color: var(--text); }
.mc-empty p { margin: 0; font-size: 14px; }
.mc-empty-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: transparent; background: color-mix(in srgb, var(--volt) 13%, transparent); color: var(--text); }
/* الترويسة */
.mc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mc-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.mc-ic:hover { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 8%, var(--surface)); }
.mc-ic:focus-visible, .mc-go:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.mc-back { border-color: transparent; background: none; }
html[dir="ltr"] .mc-back svg { transform: scaleX(-1); }
.mc-wa { color: var(--ok); }
.mc-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); }
.mc-who { min-width: 0; flex: 1; }
.mc-who h2 { margin: 0; font: 700 17px/1.35 var(--font-head); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.mc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mc-kind { padding: 1px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.mc-acts { display: flex; gap: 6px; }
/* حالة المحادثة */
.mc-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.mc-state-t { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.mc-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.mc-state.closed { background: transparent; background: color-mix(in srgb, var(--deal) 6%, transparent); }
.mc-state.closed .dot { background: var(--deal); }
/* السجل */
.mc-log { display: flex; flex-direction: column; gap: 6px; padding: 14px; overflow-y: auto; height: clamp(320px, calc(100vh - 430px), 640px); background: var(--surface); background: color-mix(in srgb, var(--text) 3%, var(--surface)); overscroll-behavior: contain; }
.mc-item { display: flex; flex-direction: column; }
.mc-day { align-self: stretch; display: flex; justify-content: center; margin: 10px 0 6px; }
.mc-day span { padding: 3px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 12px var(--font-head); color: var(--text-2); }
.mc-bub { max-width: min(78%, 520px); padding: 9px 13px 7px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.mc-item.customer .mc-bub { align-self: flex-start; border-start-start-radius: 4px; }
.mc-item.staff .mc-bub { align-self: flex-end; border-start-end-radius: 4px; background: var(--surface); background: color-mix(in srgb, var(--volt) 20%, var(--surface)); border-color: var(--line); border-color: color-mix(in srgb, var(--volt) 40%, transparent); }
.mc-bub p, .mc-note p { margin: 0; font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.mc-meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); text-align: end; font-variant-numeric: tabular-nums; }
/* الإشعار التلقائي: بطاقة بعرض السجل */
.mc-note { align-self: center; width: min(100%, 560px); margin: 4px 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line); border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); background: var(--surface); }
.mc-note-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; color: var(--text-2); }
.mc-note-h b { font: 700 12.5px var(--font-head); }
.mc-note-h time { margin-inline-start: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mc-note-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: transparent; background: color-mix(in srgb, var(--volt) 15%, transparent); color: var(--text); }
.mc-note p { font-size: 14px; color: var(--text-2); }
.mc-note .mc-wa { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; font: 600 12px var(--font-head); }
.mc-note .mc-wa.ok { background: var(--st-delivered-bg); color: var(--st-delivered-tx); }
.mc-note .mc-wa.off { background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.mc-none { margin: auto; color: var(--text-3); font-size: 14px; }
/* الرد */
.mc-compose { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.mc-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); }
.mc-compose .ms-quick { margin-bottom: 8px; }
.mc-send { align-items: flex-end; gap: 8px; }
.mc-send textarea { min-height: 46px; max-height: 132px; padding: 11px 14px; border-radius: 22px; font-size: 15px; line-height: 1.5; background: var(--paper); }
.mc-send textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 22%, transparent); }
.mc-go { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); cursor: pointer; transition: opacity .15s, transform .15s; }
html[dir="rtl"] .mc-go svg { transform: scaleX(-1); }
.mc-go:disabled { opacity: .4; cursor: not-allowed; }
.mc-go:not(:disabled):active { transform: scale(.95); }
@media (max-width: 960px) {
  /* المحادثة بصفحة كاملة: السجل يملأ الشاشة والرد ثابت أسفلها */
  .ms-wrap.detail .ms-chat { border-radius: 16px; }
  .mc-log { height: calc(100dvh - 330px); min-height: 280px; }
  .mc-compose { position: sticky; bottom: var(--abar, 0px); z-index: 5; border-radius: 0 0 16px 16px; }
  .mc-bub { max-width: 86%; }
}
@media (max-width: 960px) {
  /* داخل المحادثة على الموبايل: عنوان الصفحة وتبويبات التصفية بتنخفى لتاخد المحادثة الشاشة */
  .amain:has(.ms-wrap.detail) :is(.ahead, .pv-tabs) { display: none; }
  .mc-log { height: calc(100dvh - 300px); }
}

/* الطلبات › التراجع عن آخر خطوة: زر هادئ تحت مسار المراحل، ونموذج سبب واضح */
.ao-undo { margin: 4px 0 10px; }
.ao-undo-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--text); text-align: start; cursor: pointer; transition: border-color .18s, background-color .18s; }
.ao-undo-btn:hover { border-color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--surface); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.ao-undo-btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.ao-undo-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: transparent; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.ao-undo-t { display: grid; gap: 1px; min-width: 0; }
.ao-undo-t b { font: 700 14px/1.4 var(--font-head); }
.ao-undo-t small { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ao-undo-form { display: grid; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--warn, var(--volt)) 45%, transparent); background: var(--surface); background: color-mix(in srgb, var(--warn, var(--volt)) 7%, var(--surface)); }
.ao-undo-form > b { font: 700 14.5px var(--font-head); }
.ao-undo-form > p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.ao-undo-pay { margin: 4px 0 10px; font-size: 13px; color: var(--text-2); }
.ao-undo-pay a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ===== جداول اللوحة على المكتب (2026-10-05): لا قص، لا انكسار للتواريخ والشارات والأزرار، أرقام جدولية =====
   على اللابتوب كان جدول الطلبات أعرض من بطاقته (overflow:hidden) فيُقص عمود الأزرار، والتاريخ ينكسر سطرين. */
@media (min-width: 961px) {
  body.admin table { font-variant-numeric: tabular-nums; }
  body.admin th { white-space: nowrap; }
  body.admin td :is(.badge, .ob, .btn, .chip, .pay-st, .st-chip, .tr-bdg),
  body.admin td:has(> .btn, > .more-menu),
  body.admin :is(td, td *)[x-text*="dateDam("], body.admin :is(td, td *)[x-text*="dt("],
  body.admin :is(td, td *)[x-text*="fmt("], body.admin :is(td, td *)[x-text*="syp("],
  body.admin td.ao-dt, body.admin td bdi { white-space: nowrap; }
  /* الجدول الأعرض من بطاقته يتمرّر أفقياً داخلها بدل القص (والقائمة ⋯ المفتوحة تبقى ظاهرة) */
  body.admin :is(.ao-tablew, .panel, .pb, .inv-list, .side-panel):has(> table):not(:has(.more-menu[open])) { overflow-x: auto; }
}
@media (min-width: 961px) and (max-width: 1500px) {
  body.admin :is(th, td), .ao-table :is(th, td) { padding-inline: 10px; }
}

/* التنقل بين صفحات اللوحة: القائمة الجانبية ثابتة بمكانها (اسم انتقال خاص بلا حركة) والمحتوى وحده يتبدّل بتلاشٍ قصير.
   تحسين تدريجي: متصفح بلا دعم ⇒ تنقّل عادي (والقائمة أصلاً بترتسم فوراً من الذاكرة — shell.js). */
@view-transition { navigation: auto; }
@media (min-width: 961px) { body.admin .aside { view-transition-name: admin-nav; } }
::view-transition-group(admin-nav), ::view-transition-old(admin-nav), ::view-transition-new(admin-nav) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
.idc-sec .acc-box { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.idc-sec .acc-box h3 small { font-weight: 500; color: var(--text-3); font-size: 12.5px; }
.idc-legacy { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
/* أزرار داخل خلية: الحاوية مرنة لا الخلية (td بـdisplay:flex بتطلع من تخطيط الجدول وتزيح خطوط الصفوف) */
.td-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* لقطة القائمة: ظاهرة بس قبل ما تجهز القائمة الحيّة (x-cloak بينشال لما يقلع Alpine) */
.aside:has(> nav.nav-live:not([x-cloak])) > .nav-snap { display: none; }
.nav-snap:empty { display: none; }

/* الطلبات › تعذّر التسليم (من لوحة السائق) */
.ao-issue { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 35%, transparent);
  background: var(--surface);
  background: color-mix(in srgb, var(--deal) 7%, var(--surface)); font-size: 13.5px; line-height: 1.6; }
.ao-issue b { color: var(--deal); font: 700 14px var(--font-head); }
.ao-issue small { color: var(--text-2); font-size: 12.5px; }
.ao-issue-tag { margin-inline-start: 6px; font-size: 11.5px; }
.ao-issue-f { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  background: var(--surface);
  background: color-mix(in srgb, var(--deal) 7%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--deal) 30%, transparent); }
.ao-issue-f .mini-btn { margin-inline-start: auto; }

/* السائقون › لوحة السائق داخل صف السائق */
.cr-portal { margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); background: color-mix(in srgb, var(--text) 2.5%, var(--surface)); display: grid; gap: 10px; }
.cr-portal-h { display: flex; align-items: center; gap: 12px; }
.cr-portal-h > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cr-portal-h b { font: 700 14.5px var(--font-head); }
.cr-portal-h small { font-size: 12.5px; color: var(--text-2); }
.cr-portal-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: transparent; background: color-mix(in srgb, var(--volt) 15%, transparent); color: var(--text); }
.cr-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.cr-switch input { width: 18px; height: 18px; accent-color: var(--volt); }
.cr-portal-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-link { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--volt); border: 1px dashed color-mix(in srgb, var(--volt) 50%, transparent); }
.cr-link p { margin: 0; font-size: 13px; color: var(--text-2); }
.cr-link-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cr-link-row input { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 12.5px; }
.cr-cnt.bad { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
/* مستحقات السائقين (أجرة التوصيل ← دفعات شام كاش) */
.cr-cnt.money { background: transparent; background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.cr-owed { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); }
.cr-owed > div { display: grid; gap: 2px; min-width: 0; }
.cr-owed b { font: 800 16px var(--font-head); }
.cr-owed small { font-size: 12.5px; color: var(--text-2); }
.cr-owed-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
:is(.cr-portal-ic, .cr-owed-ic) .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-money { margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); background: color-mix(in srgb, var(--text) 2.5%, var(--surface)); display: grid; gap: 12px; }
.cr-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.cr-sums div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.cr-sums span { font-size: 12px; color: var(--text-2); }
.cr-sums b { font: 800 15px var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-sums .due { border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--surface); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.cr-sums .due b { color: var(--ok); }
.cr-sums .due.zero { border-color: var(--line); background: var(--surface); }
.cr-sums .due.zero b { color: var(--text); }
.cr-pay { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cr-pay > * { min-width: 0; }
.cp-step { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cp-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); font: 800 12px var(--font-head); flex: none; }
.cp-to { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cp-to img { width: 148px; height: 148px; border-radius: 12px; background: #fff; border: 1px solid var(--line); padding: 4px; flex: none; }
.cp-to dl { margin: 0; display: grid; gap: 8px; flex: 1; min-width: 200px; }
.cp-to dl div { display: grid; gap: 2px; }
.cp-to dt { font-size: 12px; color: var(--text-3); }
.cp-to dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.cp-miss { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); font-size: 13px; }
.cp-file { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 14px; border: 1.5px dashed var(--line); border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: center; }
.cp-file:hover { border-color: var(--volt); }
.cp-file.busy { opacity: .7; cursor: progress; }
.cp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cp-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.cp-form > * { min-width: 0; }
.cp-form .wide, .cp-read { grid-column: 1 / -1; }
.cp-read { margin: 0; font-size: 12.5px; color: var(--text-2); }
body.admin .cp-form .field { margin-bottom: 0; }
.cr-stmt .t a { font-size: 12px; }
.cr-stmt summary { cursor: pointer; font-weight: 700; font-size: 13.5px; padding: 4px 0; }
.cr-stmt ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.cr-stmt li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.cr-stmt .d { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cr-stmt .t { min-width: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.cr-stmt .a { white-space: nowrap; color: var(--ok); }
.cr-stmt li.neg .a { color: var(--text); }
.cr-stmt li.void { opacity: .55; }
.cr-stmt li.void .a { text-decoration: line-through; }
@media (max-width: 640px) {
  .cr-sums b { font-size: 13.5px; }
  .cp-form { grid-template-columns: minmax(0, 1fr); }
  .cp-to img { width: 120px; height: 120px; }
  .cr-stmt li { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-stmt .d { grid-column: 1 / -1; }
}

/* ══ صفحة السائقين (2026-10-05): قائمة + تفاصيل السائق المختار، والتعديل في نفس البطاقة ══ */
.cx .ahead { align-items: flex-end; }
.cx .ahead .ph-sub { max-width: 64ch; }
.cx-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -8px 0 18px; font-size: 13.5px; color: var(--text-2); }
.cx-facts b { color: var(--text); font: 800 15px var(--font-head); font-variant-numeric: tabular-nums; margin-inline-end: 3px; }
.cx-facts .bad b { color: var(--deal); }
.cx-facts .ok b { color: var(--ok); }
.cx-grid { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
body.admin .cx-list { position: sticky; top: 16px; margin: 0; padding: 8px; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.cx-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cx-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av t" "av tags"; align-items: center; column-gap: 12px; row-gap: 4px;
  padding: 10px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: start; cursor: pointer; transition: background .15s; }
.cx-item:hover { background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.cx-item.on { background: var(--surface); background: color-mix(in srgb, var(--volt) 14%, var(--surface)); box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 45%, transparent); }
.cx-item:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.cx-item.off { opacity: .72; }
.cx-av { grid-area: av; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface);
  background: color-mix(in srgb, var(--volt) 18%, var(--surface)); color: var(--text); font: 800 17px var(--font-head); }
.cx-av.company { border-radius: 12px; }
.cx-item.off .cx-av { background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); }
.cx-av.lg { width: 60px; height: 60px; font-size: 24px; }
.cx-t { grid-area: t; display: grid; min-width: 0; }
.cx-t b { font: 700 15px var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-t small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; }
.cx-tags:empty, .cx-tags:not(:has(.ob:not([style*="none"]))) { display: none; }
.cx-tags .ob { font-size: 11.5px; padding: 2px 8px; }
.cx-off { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.cx-off > summary { cursor: pointer; padding: 10px; font: 700 13px var(--font-head); color: var(--text-2); list-style-position: inside; }
.cx-none { margin: 12px; font-size: 13.5px; color: var(--text-3); }
.cx-skel { display: grid; gap: 8px; padding: 6px; }
.cx-skel i { height: 54px; border-radius: 12px; background: linear-gradient(90deg, transparent, transparent, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent), color-mix(in srgb, var(--text) 9%, transparent), color-mix(in srgb, var(--text) 5%, transparent)); background-size: 200% 100%; animation: cx-sk 1.2s ease-in-out infinite; }
@keyframes cx-sk { to { background-position: -200% 0; } }
.cx-empty, .cx-pick { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.cx-empty b, .cx-pick b { font: 700 16px var(--font-head); }
.cx-empty p, .cx-pick p { margin: 0 0 6px; font-size: 13.5px; color: var(--text-3); max-width: 34ch; }
.cx-empty.sm { padding: 24px 12px; }
.cx-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: transparent; background: color-mix(in srgb, var(--volt) 15%, transparent); color: var(--text); margin-bottom: 4px; }
.cx-empty-ic .mi { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.admin .cx-pick { margin: 0; min-height: 320px; align-content: center; }

.cx-detail { min-width: 0; }
.cx-pane { display: grid; gap: 14px; }
/* ص92: الشكل من .a-back؛ هنا الظهور فقط (الهاتف/اللوحي حيث القائمة والتفاصيل لا يظهران معاً) */
.cx-back { display: none; justify-self: start; }
body.admin .cx-card { margin: 0; padding: 20px; overflow: visible; }
.cx-card.editing { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, var(--line)); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 12%, transparent); }
.cx-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cx-id { flex: 1; min-width: 180px; display: grid; gap: 4px; }
.cx-id h2 { margin: 0; font: 800 22px var(--font-head); line-height: 1.3; overflow-wrap: anywhere; }
.cx-id p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.cx-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-info { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; }
.cx-info div { display: grid; gap: 2px; min-width: 0; }
.cx-info .wide { grid-column: 1 / -1; }
.cx-info dt { font-size: 12px; color: var(--text-3); }
.cx-info dd { margin: 0; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.cx-form { display: grid; gap: 14px; }
.cx-form h2 { margin: 0; font: 800 19px var(--font-head); }
.cx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cx-fields > * { min-width: 0; }
.cx-fields .wide { grid-column: 1 / -1; }
body.admin .cx-fields .field { margin-bottom: 0; }
.cx-fields .field small { font-weight: 400; color: var(--text-3); }

body.admin .pv-tabs.cx-tabs { margin: 0; }
.cx-tabs .cx-owed { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ok); }
.cx-tabs button.on .cx-owed { color: inherit; opacity: .85; }
body.admin .cx-sec { margin: 0; padding: 16px; display: grid; gap: 8px; }
body.admin .cx-sec.cr-portal, body.admin .cx-sec.cr-money { border-radius: var(--r-md); background: var(--surface); }
.cx-money { display: grid; gap: 12px; }
.cx-sc { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }

@media (max-width: 1099px) {
  .cx-grid { grid-template-columns: minmax(0, 1fr); }
  /* ص53: على الموبايل القائمة جزء من الصفحة — لا حاوية تمرير ولا overscroll contain
     (كانت السحبة اللي بتبلّش فوق القائمة ما بتنتقل للصفحة على الموبايل الحقيقي ⇒ الصفحة «ما بتنزل») */
  body.admin .cx-list { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; }
  .cx.cx-on .cx-list, .cx.cx-on .cx-facts { display: none; }
  .cx:not(.cx-on) .cx-detail { display: none; }
  .cx-back { display: inline-flex; }
}
@media (max-width: 640px) {
  .cx-fields { grid-template-columns: minmax(0, 1fr); }
  body.admin .cx-card { padding: 16px; }
  .cx-acts { width: 100%; }
  .cx-acts .btn { flex: 1; justify-content: center; }
  .cx-acts .more-menu { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .cx-skel i { animation: none; } }
body.admin 
/* صفحة السائقين — تصحيحات الموبايل (2026-10-05): مسافة التبويبات، صف أزرار واحد، وألوان مباشرة
   (متصفحات أقدم بلا color-mix كانت تُسقط دائرة الحرف وتظليل السائق المختار) */
.cx-body { display: grid; gap: 12px; }
.cx-av { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--volt); }
.cx-item.off .cx-av { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cx-item.on { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--volt); }
.cx-card.editing { border-color: var(--volt); }
@media (max-width: 1099px) {
  .cx.cx-on .ahead .ph-sub { display: none; }
  .cx.cx-on .ahead { margin-bottom: 12px; }
}
@media (max-width: 640px) {
  .cx-head { gap: 12px; }
  .cx-id { min-width: 0; }
  .cx-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 46px; gap: 6px; width: 100%; }
  body.admin .cx-acts .btn { min-width: 0; padding: 6px 8px; justify-content: center; }
  body.admin .cx-acts .more-menu > summary { width: 46px; padding: 0; justify-content: center; }
  .cx-acts .more-pop { inset-inline-end: 0; inset-inline-start: auto; }
  body.admin .pv-tabs.cx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  body.admin .pv-tabs.cx-tabs button { justify-content: center; padding: 0 6px; min-width: 0; font-size: 13.5px; }
  .cx-tabs .cx-owed { display: none; }
  .cr-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-sums .due { grid-column: 1 / -1; order: -1; }
  .cr-sums .due b { font-size: 20px; }
  .cx-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
}

/* نموذج السائق: حساب شام كاش من صورة QR (يُقرأ على الجهاز) */
.cx-sc-field { display: grid; gap: 6px; }
.cx-sc-row { display: flex; gap: 8px; align-items: stretch; }
.cx-sc-row input { flex: 1; min-width: 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .02em; }
.cx-sc-row input[aria-invalid="true"] { border-color: var(--deal); }
body.admin .cx-sc-btn { position: relative; flex: none; min-height: 50px; gap: 6px; cursor: pointer; }
.cx-sc-btn .mi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-sc-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cx-sc-btn.busy { opacity: .7; cursor: progress; }
.cx-sc-btn:focus-within { outline: 2px solid var(--volt); outline-offset: 2px; }
.cx-sc-bad { margin: 0; font-size: 12.5px; color: var(--deal); }
.cx-sc-ok { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.cx-sc-ok img { width: 96px; height: 96px; flex: none; border-radius: 8px; background: #fff; padding: 3px; border: 1px solid var(--line); }
.cx-sc-ok > div { display: grid; gap: 2px; min-width: 0; }
.cx-sc-ok b { font-size: 13px; color: var(--ok); }
.cx-sc-ok code { font: 700 14px/1.6 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.cx-sc-ok small { font-size: 12px; color: var(--text-3); }
@media (max-width: 640px) { .cx-sc-row { flex-wrap: wrap; } body.admin .cx-sc-btn { width: 100%; justify-content: center; } }

/* بحث السائقين: نفس نمط بحث الإدارة (.ff-q) — الحقل نفسه هو الإطار، والأيقونة داخله */
.cx-q { margin: 4px 4px 8px; flex: none; }
/* هيكل التحميل بألوان مباشرة (بلا color-mix — كان يختفي على متصفحات أقدم فتبدو القائمة فارغة) */
.cx-skel i { background: var(--paper); background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); background-size: 200% 100%; box-shadow: inset 0 0 0 1px var(--line); }
html[data-mode="dark"] .cx-skel i { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }

/* نموذج المنتج: إنشاء تصنيف/ماركة في نفس المكان */
.pe-pick { position: relative; }
.pe-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-add { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 10px; border: 1px dashed var(--volt); border-radius: 999px; background: none; color: var(--text); font: 700 12.5px var(--font-head); cursor: pointer; }
.pe-add:hover { background: var(--paper); }
.pe-add:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.pe-add .mi { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pe-new { display: grid; gap: 10px; margin-top: 8px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--volt); background: var(--paper); }
.pe-new-f { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pe-new-f small { font-weight: 400; color: var(--text-3); }
body.admin .pe-new-f input { min-height: 46px; background: var(--surface); }
.pe-new-a { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-dup { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); font-size: 13px; }
.pe-use { border: 0; background: none; padding: 0; color: var(--text); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pe-err { margin: 0; color: var(--deal); font-size: 13px; font-weight: 700; }
.pe-hint { color: var(--text-3); font-size: 12px; line-height: 1.6; }

/* دفعات السائق: معاينة الإشعار وتحذيرات القراءة (2026-10-06) */
.cp-prev { display: block; max-width: 100%; max-height: 260px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cp-warn { margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--warn); font-weight: 600; }
.cp-diff { padding: 10px 12px; border: 1px solid var(--deal); border-radius: 10px; background: var(--err-bg, #FDECEC); }
.cp-diff p { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--deal); }

/* ══ تتبع الكباتن (/admin/tracking) ══ */
.trk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin-bottom: 14px; }
.trk-f { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.trk-f select { min-height: 40px; min-width: 180px; }
.trk-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--radius-pill); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.trk-seg button { min-height: 36px; padding: 0 13px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-2); font: 700 13px var(--font-head); cursor: pointer; }
.trk-seg button.on { background: var(--surface, var(--white)); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.trk-custom { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.trk-custom label { display: grid; gap: 2px; font-size: 12px; color: var(--text-2); }
.trk-custom input { min-height: 38px; }
.trk-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.trk-dot { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 rgba(22, 163, 74, .6); animation: trkPulse 1.6s infinite; }
@keyframes trkPulse { to { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }
.trk-upd { color: var(--text-3); font-size: 12px; margin-inline-start: auto; }
.trk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.trk-mapw { position: relative; overflow: hidden; margin: 0; }
.trk-map { height: calc(100vh - 230px); min-height: 460px; background: #e8e4dc; }
.trk-empty { position: absolute; inset: auto 16px 52px; z-index: 500; padding: 12px 14px; border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: 13.5px; }
.trk-empty p { margin: 4px 0 0; color: var(--text-2); line-height: 1.7; }
.trk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--line); }
.trk-legend i { display: inline-block; vertical-align: middle; margin-inline-end: 5px; }
.trk-legend .lg-line { width: 18px; height: 4px; border-radius: 2px; background: #2563EB; }
.trk-legend .lg-gold { width: 18px; height: 6px; border-radius: 3px; background: #C9A227; opacity: .7; }
.trk-legend .lg-home { width: 12px; height: 12px; border-radius: 3px; background: #111; }
.trk-legend .lg-ok, .trk-legend .lg-bad { width: 11px; height: 11px; border-radius: 50%; background: #16A34A; }
.trk-legend .lg-bad { background: #DC2626; }
.trk-side { display: grid; gap: 14px; }
.trk-sec { margin: 0; padding: 12px; }
.trk-sec h2 { font-size: 15px; margin: 0 0 8px; }
.trk-sec h2 small { color: var(--text-3); font-weight: 600; }
.trk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 38vh; overflow-y: auto; }
.trk-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.trk-row:hover { background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); }
.trk-row.on { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); }
.trk-sw { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; }
.trk-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.trk-t b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-t small { font-size: 12px; color: var(--text-3); }
.trk-t .trk-warn { color: var(--deal); }
.trk-t .trk-mute { font-style: italic; }
.trk-n { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.trk-open { display: inline-block; margin: 0 10px 6px; font-size: 12px; color: var(--gold-ink, #8a6d1d); }
.trk-none { margin: 0; font-size: 13px; color: var(--text-3); }
.trk-cap span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 800 15px var(--font-head); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.trk-cap.veh span svg { width: 20px; height: 20px; }
.trk-sw.veh { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; }
.trk-sw.veh svg { width: 16px; height: 16px; }
.trk-cap.stale span { filter: grayscale(.7); opacity: .75; }
.trk-home span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px 8px 8px 0; transform: rotate(-45deg); background: #111; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.trk-home span::after { content: ''; }
.trk-home span { color: #fff; font-size: 0; }
.trk-home span::before { content: '⌂'; transform: rotate(45deg); font-size: 17px; line-height: 1; }
/* فني الصيانة: شارة مفتاح على دائرته · زيارة الصيانة: نفس دبوس الزبون بإطار ذهبي ورمز مفتاح */
.trk-cap.tech { position: relative; }
.trk-cap.tech em { position: absolute; inset-block-end: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #111; border: 2px solid #fff; font-style: normal; line-height: 1; }
.trk-job span { background: #111; border-color: #C9A227; }
.trk-job span::before { content: none; }
.trk-job span svg { width: 15px; height: 15px; color: #C9A227; transform: rotate(45deg); }
.trk-cap.tech em svg { width: 10px; height: 10px; color: #fff; }
.trk-legend .lg-job { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #111; border: 2px solid #C9A227; vertical-align: -2px; }
.trk-role { margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); font: 600 11px var(--font-head); font-style: normal; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content { direction: rtl; text-align: right; font-size: 13px; line-height: 1.7; }
@media (max-width: 1100px) {
  .trk-grid { grid-template-columns: minmax(0, 1fr); }
  .trk-map { height: 60vh; min-height: 360px; }
  .trk-upd { margin-inline-start: 0; }
}
/* إثبات التسليم بسجل الطلب */
.ao-ph { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ao-ph img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ao-maplink { display: inline-block; margin-top: 4px; font-size: 12.5px; }
.ao-trk { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; margin-bottom: 12px; border: 1px dashed var(--volt); border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--gold-ink, #8a6d1d); background: transparent; background: color-mix(in srgb, var(--volt) 7%, transparent); }
.ao-inv { border-color: var(--line); border-color: color-mix(in srgb, var(--text) 30%, transparent); color: var(--text); background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }

/* ===== الكفالات والفواتير (/admin/warranties) + الصيانة (/admin/maintenance) ===== */
.ff { display: grid; gap: 4px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-2); position: relative; }
.ff > input, .ff > select { width: 100%; min-height: 42px; padding: 8px 10px; border: var(--bw-1) solid var(--line); border-radius: 10px; background: var(--paper); color: var(--text); font: 500 14px var(--font-body); }
.ff > input:focus, .ff > select:focus { outline: 2px solid var(--volt); outline-offset: 1px; }
.wr-new .pb { display: grid; gap: 14px; }
.wr-nh, .mt-dh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wr-nh h2, .mt-dh h2 { font-size: 18px; }
.wr-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wr-items { display: grid; gap: 10px; justify-items: start; }
.wr-item { width: 100%; display: grid; gap: 10px; padding: 12px; border: var(--bw-1) solid var(--line); border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 2%, transparent); }
.wr-ir1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.wr-ir2 { display: grid; grid-template-columns: 90px 140px 160px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.wr-hint { font-size: 12px; color: var(--ink-3); align-self: center; }
.wr-sug { position: absolute; top: 100%; inset-inline: 0; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--white); border: var(--bw-1) solid var(--line); border-radius: 10px; box-shadow: var(--shadow-1); max-height: 280px; overflow-y: auto; }
.wr-sug button { display: block; width: 100%; text-align: start; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: 500 13.5px var(--font-body); color: var(--text); cursor: pointer; }
.wr-sug button:hover { background: var(--paper); }
.wr-sug small { color: var(--ink-3); }
.wr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: var(--bw-1) solid var(--line); }
.wr-foot b { font-family: var(--font-head); font-size: 18px; }
.wr-warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text); font-size: 13.5px; }
.wr-err { margin: 8px 0 0; color: var(--deal); font-weight: 700; font-size: 13.5px; }
.wr-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.wr-tabs > button, .wr-tabset > button { min-height: 42px; padding: 0 16px; border: var(--bw-1) solid var(--line); border-radius: var(--radius-pill); background: var(--white); color: var(--text-2); font: 700 14px var(--font-head); cursor: pointer; }
.wr-tabs > button.on, .wr-tabset > button.on { background: var(--text); color: var(--white); border-color: var(--text); }
.wr-tabs > button small { font-weight: 500; opacity: .8; }
.wr-seg, .mt-seg, .mt-yn { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--radius-pill); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
:is(.wr-seg, .mt-seg, .mt-yn) button { min-height: 36px; padding: 0 13px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-2); font: 700 13px var(--font-head); cursor: pointer; }
:is(.wr-seg, .mt-seg, .mt-yn) button.on { background: var(--white); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mt-seg small { font-weight: 500; color: var(--ink-3); }
.wr-none { padding: 24px 16px; margin: 0; text-align: center; color: var(--ink-3); }
.wr-table { overflow-x: auto; }
.wr-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wr-table th { text-align: start; padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); border-bottom: var(--bw-2) solid var(--edge); white-space: nowrap; }
.wr-table td { padding: 10px 12px; border-bottom: var(--bw-1) solid var(--line); vertical-align: top; }
.wr-table td small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.wr-table tr.expired td, .wr-table tr.void td { opacity: .6; }
.wr-st { font-weight: 700; }
.wr-st.active { color: var(--ok); } .wr-st.expired { color: var(--deal); }
.wr-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wr-void { color: var(--deal); font-weight: 700; font-size: 12.5px; }
.wr-x { color: var(--deal); }

.mt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.mt-grid.has { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.mt-list { padding: 6px; display: grid; gap: 4px; }
.mt-row { display: grid; gap: 3px; width: 100%; text-align: start; padding: 10px 12px; border: var(--bw-1) solid transparent; border-radius: 12px; background: none; font: inherit; color: var(--text); cursor: pointer; }
.mt-row:hover { background: var(--paper); }
.mt-row.on { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); }
.mt-row.late { border-inline-start: 3px solid var(--deal); }
.mt-r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-r2 { font-weight: 700; font-size: 14px; }
.mt-r3 { font-size: 12.5px; color: var(--ink-3); }
.mt-detail .pb { display: grid; gap: 4px; }
.mt-dh > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-sec { padding: 12px 0; border-top: var(--bw-1) solid var(--line); display: grid; gap: 8px; }
.mt-sec h3 { font-size: 14px; color: var(--ink-3); }
.mt-sec p { margin: 0; line-height: 1.7; }
.mt-prod { font-weight: 700; font-size: 15px; }
.mt-desc { white-space: pre-wrap; }
.mt-muted { color: var(--ink-3); font-size: 13.5px; }
.mt-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-ph { display: grid; gap: 4px; width: 120px; text-decoration: none; color: var(--ink-3); font-size: 12px; text-align: center; }
.mt-ph img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: var(--bw-1) solid var(--line); background: var(--paper); }
.mt-links, .mt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-act { background: transparent; background: color-mix(in srgb, var(--volt) 5%, transparent); border-radius: 12px; padding: 12px; border: var(--bw-1) solid var(--line); border: var(--bw-1) solid color-mix(in srgb, var(--volt) 30%, transparent); margin-block: 6px; justify-items: start; }
.mt-act .ff, .mt-act .wr-grid3 { width: 100%; }
.mt-rj, .mt-done { display: grid; gap: 8px; width: 100%; }
.mt-rj .btn, .mt-done .btn { justify-self: start; }
.mt-cap { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; font-weight: 700; background: var(--white); }
.mt-cap img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.mt-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mt-ev li { padding-inline-start: 14px; border-inline-start: 2px solid var(--line); }
.mt-ev small { color: var(--ink-3); }
.mt-ev p { font-size: 13px; color: var(--text-2); }
.mt-cancel { justify-self: start; color: var(--deal); margin-top: 6px; }
@media (max-width: 900px) {
  .mt-grid.has { grid-template-columns: minmax(0, 1fr); }
  .mt-grid.has .mt-list { display: none; }
  .wr-grid3, .wr-ir1 { grid-template-columns: minmax(0, 1fr); }
  .wr-ir2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mt-seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mt-seg button { white-space: nowrap; flex-shrink: 0; }
  .mt-bar > * { flex: 1 1 100%; }
}
/* حظر الـIP — بلوحة «أجهزة الدخول» */
.ipb { display: grid; gap: 12px; }
.ipb-note { margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.ipb-none { margin: 0; padding: 12px; text-align: center; color: var(--ok); font-weight: 700; }
.bdg-n { display: inline-block; min-width: 18px; margin-inline-start: 4px; padding: 0 5px; border-radius: 999px; background: var(--deal); color: var(--on-deal); font-size: 11px; line-height: 18px; }

/* ===== القانوني والامتثال (/admin/legal) + الشكاوى (/admin/disputes) + ميثاق الموظفين ===== */
.ds-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-ev li { padding: 10px 12px; border-radius: 12px; background: var(--paper); max-width: 92%; }
.ds-ev li.staff { justify-self: end; background: transparent; background: color-mix(in srgb, var(--volt) 12%, transparent); }
.ds-ev li.internal { background: repeating-linear-gradient(45deg, transparent 0 8px, transparent 8px 16px); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--warn) 10%, transparent) 0 8px, transparent 8px 16px); border: 1px dashed var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent); }
.ds-ev li.system { justify-self: center; background: none; font-size: 12.5px; }
.ds-ev p { margin: 4px 0; white-space: pre-wrap; line-height: 1.7; }
.ds-ev small { color: var(--ink-3); font-size: 11.5px; }
.ds-who { font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.dsp-att { display: flex; flex-wrap: wrap; gap: 8px; } .dsp-att a { font-size: 13px; }
.dsp-drop { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.slg-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.slg-box { width: min(720px, 100%); max-height: 90vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; padding: 20px; border-radius: 18px; background: var(--white); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.slg-box h2 { margin: 0; font-size: 20px; } .slg-p { margin: 0; color: var(--text-2); line-height: 1.7; font-size: 14px; }
.slg-body { overflow: auto; padding: 12px 14px; border: var(--bw-1) solid var(--line); border-radius: 12px; line-height: 1.9; font-size: 14px; }
.slg-body h3 { font-size: 15.5px; margin: 14px 0 4px; } .slg-body ul { padding-inline-start: 20px; margin: 4px 0 8px; }
.slg-body blockquote { margin: 0 0 10px; padding: 8px 12px; border-inline-start: 4px solid var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 8%, transparent); border-radius: 8px; }
.slg-btns { display: flex; gap: 8px; }
@media print { body.admin .aside, body.admin .atop, .lgx-nav, .lgx-head, .lgx-case-res .lgx-btns, .wr-tabs, .ahead, .mt-btns { display: none !important; } .alayout { display: block; } .amain { padding: 0; } }

/* ══ شريط التنقّل السفلي للوحة (موبايل) — 2026-10-07 ══
   أهم ٤ وجهات حسب الصلاحيات + «المزيد» (القائمة الكاملة). --abar = ارتفاعه ⇒ أي شريط لاصق/ثابت تحت بيرفع فوقه. */
.abar { display: none; }
@media (max-width: 960px) {
  body.admin { --abar: calc(62px + env(safe-area-inset-bottom)); padding-bottom: var(--abar); }
  .abar { position: fixed; inset-inline: 0; bottom: 0; z-index: 940; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: var(--abar); padding: 4px 4px env(safe-area-inset-bottom); background: var(--chrome); border-top: var(--bw-1) solid var(--chrome-hover);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .5); }
  .abar a, .abar button { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; padding: 4px 2px; border: 0; border-radius: 12px; background: none;
    color: var(--on-chrome-2); font: 700 11.5px var(--font-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .abar a > span:last-child, .abar button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abar .abar-i { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px; transition: background-color .2s; }
  .abar .mi { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .abar a.on { color: var(--volt); }
  .abar a.on .abar-i { background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
  .abar a:active .abar-i, .abar button:active .abar-i { background: var(--chrome-soft); }
  .abar a:focus-visible, .abar button:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
  .abar .bdg { position: absolute; top: -4px; inset-inline-end: -2px; min-width: 18px; padding-inline: 5px; border-radius: 999px; background: var(--deal); color: var(--on-deal); font-size: 10.5px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--chrome); }
  .abar-dot { position: absolute; top: 0; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--deal); box-shadow: 0 0 0 2px var(--chrome); }
  /* زر القائمة العلوي صار مكرر مع «المزيد» تحت ⇒ مخفي (الإشعارات و«يحتاج انتباهك» باقيين فوق) */
  .atop > .atop-btn:first-child { display: none; }
  .atop-brand { padding-inline-start: 12px; }
  .notif-panel { max-height: calc(100dvh - 56px - var(--abar) - 16px); }
}
@media print { .abar { display: none !important; } }

/* ══ الرئيسية كلوحة عمل (2026-10-07): «يحتاج تدخلك الآن» ← «مسار الطلبات» ← الإحصائيات ══ */
.db-now { margin-bottom: 16px; padding: 16px var(--db-pad, 18px); background: var(--db-card, var(--white)); border: var(--db-b, 1px solid var(--line)); border-radius: var(--db-r, 18px); box-shadow: var(--db-sh, none); }
.db-now-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.db-now-h h2 { font-size: 18px; margin: 0; }
.db-now-c { padding: 3px 12px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); font-size: 12.5px; font-weight: 800; }
.db-now-c.hot { background: transparent; background: color-mix(in srgb, var(--deal) 14%, transparent); color: var(--deal); }
.db-allok { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--ok) 10%, transparent); font-size: 14.5px; }
.db-allok .mi { width: 22px; height: 22px; flex-shrink: 0; color: var(--ok); stroke: currentColor; fill: none; stroke-width: 2.4; }
.db-acts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.db-act { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: var(--bw-1) solid var(--line); background: var(--white);
  color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s, transform .2s; }
.db-act:hover { border-color: var(--edge); background: var(--paper); }
.db-act-i { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.db-act-i .mi { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.db-act-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.db-act-t b { font-size: 14.5px; line-height: 1.45; }
.db-act-t small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.db-act-n { font-family: var(--font-head); font-size: 16px; }
.db-act-cta { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: var(--bw-1) solid var(--line); font-size: 13px; font-weight: 800; white-space: nowrap; }
.db-act.lv-high { border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 35%, var(--line)); }
.db-act.lv-high .db-act-i { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); }
.db-act.lv-high .db-act-n { color: var(--deal); }
.db-act.lv-mid .db-act-i { color: var(--warn); background: transparent; background: color-mix(in srgb, var(--warn) 13%, transparent); }
.db-act.lv-mid .db-act-n { color: var(--warn); }
/* أول بند = الإجراء الرئيسي بالصفحة ⇒ زرّه ممتلئ (CTA وحيد واضح) */
.db-act.first .db-act-cta { background: var(--volt); border-color: var(--volt); color: var(--on-volt, #111); }
.db-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.db-fl { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--white); border: var(--bw-1) solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s; }
.db-fl:hover { border-color: var(--edge); }
.db-fl-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.db-fl-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-fl-h .mi { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.db-fl > b { font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.2; }
.db-fl > small { min-height: 1.3em; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-fl.mine { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); background: var(--white); background: color-mix(in srgb, var(--volt) 7%, var(--white)); }
.db-fl.mine .db-fl-h { color: var(--gold-ink, var(--text)); }
.db-fl.mine > small { color: var(--deal); font-weight: 700; }
.db-fl.zero > b { color: var(--ink-3); }
@media (max-width: 960px) {
  .db-flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; margin-inline: -4px; padding-inline: 4px; }
  .db-flow::-webkit-scrollbar { display: none; }
  .db-fl { scroll-snap-align: start; }
  .db-now { padding: 14px; }
  .db-act { gap: 10px; padding: 10px; }
  .db-act-i { width: 36px; height: 36px; }
}
@media (min-width: 1200px) { .db-acts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.db-acts-more { display: block; width: 100%; margin-top: 8px; min-height: 42px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--ink-2); font: 700 13.5px var(--font-body); cursor: pointer; }
.db-acts-more:hover { border-color: var(--edge); color: var(--text); }
@media (max-width: 520px) {
  .db-act { min-height: 0; padding: 9px 10px; gap: 10px; align-items: center; }
  .db-act-i { width: 34px; height: 34px; border-radius: 10px; }
  .db-act-t b { font-size: 13.5px; }
  .db-act-t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  .db-act-cta { min-height: 32px; padding: 0 10px; font-size: 12px; }
}

/* ══ السائقون: «بحاجة لتدخّلك» بأعلى الصفحة ══ */
.cxq { padding: 14px 16px; margin-bottom: 16px; border-color: var(--line); border-color: color-mix(in srgb, var(--volt) 45%, var(--line)); }
.cxq-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cxq-h h2 { font-size: 17px; margin: 0; }
.cxq-h span { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.cxq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.cxq-it { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px; border-radius: 12px; border: var(--bw-1) solid var(--line); background: var(--paper); color: var(--text); text-decoration: none; }
.cxq-it:hover { border-color: var(--edge); }
.cxq-ic { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--warn); background: transparent; background: color-mix(in srgb, var(--warn) 13%, transparent); }
.cxq-ic .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.cxq-it.bad .cxq-ic { color: var(--deal); background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); }
.cxq-it.bad { border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 35%, var(--line)); }
.cxq-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cxq-t b { font-size: 14px; } .cxq-t small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxq-cta { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; background: var(--volt); color: var(--on-volt, #111); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.cxq-it.bad .cxq-cta { background: none; border: var(--bw-1) solid var(--deal); color: var(--deal); }
@media (max-width: 520px) { .cxq-it { flex-wrap: wrap; } .cxq-t { flex-basis: calc(100% - 50px); } .cxq-cta { margin-inline-start: 48px; } }

/* ══ المنتجات: شرائح المخزون ══ */
.pr-stock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.pr-st { display: grid; gap: 2px; justify-items: start; min-width: 0; padding: 12px 14px; border-radius: 14px; border: var(--bw-1) solid var(--line); background: var(--white); color: var(--text); text-align: start; cursor: pointer; font: inherit; transition: border-color .2s; }
.pr-st:hover { border-color: var(--edge); }
.pr-st b { font-family: var(--font-head); font-size: 24px; font-weight: 800; line-height: 1.2; }
.pr-st span { font-size: 13px; font-weight: 700; }
.pr-st small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pr-st.out b { color: var(--deal); } .pr-st.low b { color: var(--warn); }
.pr-st.on { border-color: var(--volt); box-shadow: 0 0 0 2px transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--volt) 30%, transparent); }
.pr-st:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
@media (max-width: 560px) { .pr-stock { gap: 6px; } .pr-st { padding: 10px; } .pr-st b { font-size: 20px; } .pr-st small { display: none; } }

/* ══ التقارير: أرقام المالك مع الفرق عن الفترة السابقة ══ */
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.an-k { display: grid; gap: 4px; min-width: 0; padding: 16px 18px; border-radius: 16px; border: var(--bw-1) solid var(--line); background: var(--white); }
.an-k-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; font-weight: 800; }
.an-k-l small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.an-k > b { font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.an-k > em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.an-k.ok > b { color: var(--ok); } .an-k.warn > b { color: var(--warn); }
.an-k .up, .an-sub .up { color: var(--ok); } .an-k .down, .an-sub .down { color: var(--deal); } .an-k .flat { color: var(--ink-3); }
.an-note { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); }
.an-more { margin-bottom: 16px; }
.an-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.an-more > summary::-webkit-details-marker { display: none; }
.an-more > summary h2 { font-size: 16px; margin: 0; }
.an-sub { padding: 0 16px 16px; margin: 0; }
@media (max-width: 900px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .an-k > b { font-size: clamp(16px, 4.6vw, 21px); white-space: normal; overflow-wrap: anywhere; } .an-k { padding: 12px; } .an-k-l small { flex-basis: 100%; } }
.db-tech { margin-bottom: 8px; }

/* ── حوار التأكيد الموحّد (ask.js — SAFE-01) ── */
.ask-lock, .ask-lock body { overflow: hidden; }
.ask-wrap { z-index: 1200; }
body.admin .ask { width: 440px; display: grid; gap: 12px; }
.ask-h { font-size: 18px; line-height: 1.4; margin: 0; }
.ask-d { display: grid; gap: 8px; font-size: 14px; color: var(--text-2); line-height: 1.7; }
.ask-d p { margin: 0; }
.ask-t { padding: 8px 12px; border-radius: var(--r-sm, 8px); background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); overflow-wrap: anywhere; }
.ask-k { color: var(--text-2); }
.ask-danger .ask-e { color: var(--deal); }
.ask-f { display: grid; gap: 6px; margin: 0; }
.ask-f input, .ask-f textarea { width: 100%; }
.ask-err { margin: 0; color: var(--deal); font-size: 13px; font-weight: 600; }
.ask-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.ask-btns .btn { min-width: 108px; min-height: 44px; }
body.admin .btn.btn-danger-solid { background: var(--deal); color: var(--on-deal, #fff); border-color: var(--deal); }
body.admin .btn.btn-danger-solid:hover { background: var(--deal); background: color-mix(in srgb, var(--deal) 88%, #000); }
@media (max-width: 520px) { .ask-btns .btn { flex: 1; } }
/* ص92: حوار «تجهيز الطلب» (orders.html) — نفس هيكل حوار التأكيد */
.pd-form { display: grid; gap: 12px; }
.pd-form select { width: 100%; min-height: 44px; }
.pd-state { margin: 0; font-size: 14px; color: var(--text-2); }
.pd-empty { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size: 14px; line-height: 1.7; }
.pd-empty p { margin: 0; color: var(--text-2); }

/* ── حقول التاريخ والوقت بالـRTL (CORE-02): الأجزاء ما بتنقلب (يوم/شهر/سنة بترتيبها) ── */
body.admin input[type="date"], body.admin input[type="datetime-local"], body.admin input[type="time"], body.admin input[type="month"] {
  direction: ltr; text-align: right; unicode-bidi: plaintext; }
/* أي مبلغ أو رقم تقني بيضل بترتيبه (عملة قبل/بعد الرقم ما بتنقلب) */
.num-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* الموظفون (SAFE-03): التعطيل مفصول بصرياً عن كلمة المرور */
.st-sep { display: inline-block; width: 1px; height: 22px; background: var(--line); margin-inline: 6px; vertical-align: middle; }
.st-me { font-size: 12px; color: var(--text-2); padding: 4px 10px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); }
.more-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* شريط الفلاتر داخل رأس اللوحة بياخد العرض كامل (كان بيتكدّس عمودياً بنص العرض) */
:is(.panel, .side-panel) .ph > .filters-row { flex: 1 1 100%; }
.ff-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ff-date input { min-width: 150px; }

/* ترقيم صفحات موحّد (SYS-03/AUDIT-02/CUST-01/STOCK-01): «1–30 من 504» + أرقام + حجم الصفحة */
.pg { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.pg-nums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pg-n { min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.pg-n:hover { background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.pg-n.on { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
.pg-gap { padding: 0 4px; color: var(--text-3, var(--text-2)); }
.pg-size { display: inline-flex; align-items: center; gap: 6px; }
.pg-size select { min-height: 36px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
@media (max-width: 640px) { .pg { justify-content: center; } .pg-info { flex: 1 1 100%; text-align: center; } }

/* حالة فارغة موحّدة (SYS-04): عنوان + شرح + إجراء — تفرّق بين «ما في بيانات» و«ما في نتائج» و«فشل التحميل» */
.es { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--text-2); font-size: 14px; }
.es > b { color: var(--text); font-size: 15px; }
.es > .btn { margin-top: 6px; }
.es.es-err > b { color: var(--deal); }
/* وسم «يُطبَّق فوراً» للمفاتيح اللي ما بتمرّ على شريط الحفظ (SET-01) */
.now-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-style: normal;
  background: transparent;
  background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--text); vertical-align: middle; }

/* ترويسة الطلب (ORD-03): الرقم لحاله فوق، والبيانات الوصفية سطر مرتّب تحته */
.ao-hero-id { display: grid; gap: 4px; }
.ao-hero-k { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.ao-hero-id h1 { margin: 0 0 6px; }
.ao-hero-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.ao-hero-meta li { display: inline-flex; gap: 6px; align-items: baseline; }
.ao-hero-meta span { color: var(--ink-3); }
.ao-hero-meta b { font-weight: 600; color: var(--text); }
/* شريط «الإجراء» لما ما في شي بإيدك (ORD-02): نص ثانوي صغير، مش زر معطّل */
.ao-todo.ao-todo-quiet { background: transparent; padding: 0; border: 0; font-size: 13px; }
.ao-todo.ao-todo-quiet b { font-size: 13px; font-weight: 600; color: var(--text-2); }

/* دفعات شام كاش (PAY-01/02): عدّاد القراءة الآلية فوق القائمة */
.pv-readbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pv-rf { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.pv-rf b { color: var(--text); font-size: 14px; }
.pv-rf.ok b { color: var(--ok); } .pv-rf.warn b { color: var(--warn, #c98a00); color: color-mix(in srgb, var(--warn, #c98a00) 65%, var(--text)); }
.pv-rf.on { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); color: var(--text); }
.pv-okic { width: 16px; height: 16px; color: var(--ok); vertical-align: -3px; margin-inline-start: 6px; }
/* السائقون (SHIP-01/03): فلتر الحالة التشغيلية تحت البحث */
.cx-stf { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 10px; }
.cx-stf button { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.cx-stf button b { color: var(--text); }
.cx-stf button.on { border-color: var(--volt); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); color: var(--text); }
/* التتبع (TRACK-01): أزرار الحالات الفارغة + شريط «التحديث متوقف» */
.trk-empty .btn { margin-top: 8px; }
.trk-empty.es-err b { color: var(--deal); }
.trk-paused { position: absolute; inset: 12px 12px auto; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); font-size: 13px; color: var(--text-2); }
/* الزبائن (CUST-01/02/03): فلتر المحافظة + العدد + رؤوس أعمدة قابلة للفرز */
.cu-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cu-gov select { min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.cu-count { font-size: 13px; color: var(--text-2); margin-inline-start: auto; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.th-sort i { font-style: normal; font-size: 10px; opacity: .45; }
.th-sort.on i { opacity: 1; color: var(--gold-ink, var(--text)); }
.th-sort:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 4px; }

/* النماذج (PROD-02): نجمة للحقول المطلوبة، وخطأ تحت الحقل نفسه */
body.admin .field:has(> input:required, > select:required, > textarea:required, > .pe-pick-row select:required) > label::after,
body.admin .field:has(> input:required, > select:required, > textarea:required) > .pe-lbl > label::after { content: ' *'; color: var(--deal); font-weight: 700; }
.f-err { display: block; margin-top: 4px; color: var(--deal); font-size: 12.5px; font-weight: 600; }
body.admin [aria-invalid="true"] { border-color: var(--deal) !important; box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--deal) 18%, transparent); }

/* ── القائمة الجانبية على الكمبيوتر (≥961px): ثابتة بمكانها طول التصفح ──
   sticky ضمن عمود الشبكة (240px) بارتفاع الشاشة كامل ⇒ ما بتتحرك مع تمرير الصفحة، والمحتوى ما بيدخل تحتها
   (العمود محجوز إلها، فلا margin إضافي ولا Layout Shift). إذا القائمة أطول من الشاشة ⇒ التمرير جوّاها بس.
   ما في أب فيه transform/overflow بيعطّل sticky (html/body عليهم overflow-x: clip — ما بيعمل حاوية تمرير).
   الموبايل/التابلت (≤960px) درج fixed منفصل — ما بيتأثر. */
@media (min-width: 961px) {
  .aside { position: -webkit-sticky; position: sticky; top: 0 !important; align-self: start;
    height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-color: color-mix(in srgb, var(--on-chrome-2) 30%, transparent) transparent; }
  .aside::-webkit-scrollbar { width: 6px; }
  .aside::-webkit-scrollbar-thumb { background: transparent; background: color-mix(in srgb, var(--on-chrome-2) 30%, transparent); border-radius: 6px; }
}
/* المنتجات (PROD-03/04): شرح عمود «بانتظار التوفّر» + عدد النتائج */
.th-help { text-decoration: none; cursor: help; border-bottom: 1px dotted currentColor; }
.th-help i { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-inline-start: 3px; border-radius: 50%; font-size: 10px; font-style: normal; background: transparent; background: color-mix(in srgb, var(--text) 10%, transparent); }
.pr-count { color: var(--text-2); font-size: 14px; white-space: nowrap; }
/* الأقسام (CAT-01/02/03): الاسم العربي جنب المعرّف + نسخ */
.cat-slug { white-space: nowrap; }
.cat-slug-ar { display: block; font-size: 12px; color: var(--text-2); font-family: inherit; }
.cat-slug code { font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.cat-copy { margin-inline-start: 6px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px; cursor: pointer; }
/* الكفالات (WAR-01/02): العدد شارة مستقلة عن اسم التبويب، و«فاتورة جديدة» الإجراء الأبرز */
.tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: transparent; background: color-mix(in srgb, var(--volt) 22%, transparent); color: var(--text); }
.wr-tabset { display: inline-flex; gap: 6px; }
/* ص92 (البند ١٠): نوعا شارات واضحان ومتّسقان مع شارات القائمة الجانبية —
   للعلم (.is-info): لون النص نفسه بشفافية ⇒ مقروء على التبويب النشط (داكن) وغير النشط؛
   يحتاج إجراءً (.is-act): لون الشارات العاجلة (--deal) كبقية شارات اللوحة، وقابل للنقر (يفتح المسودات) */
.tab-n.is-info { background: transparent; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; font-variant-numeric: tabular-nums; }
.tab-n.is-act { background: var(--deal); color: var(--on-deal); font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
  box-shadow: 0 3px 8px -4px var(--deal);
  box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--deal) 80%, transparent); }
.wr-tabset > button.on .tab-n.is-act { box-shadow: 0 0 0 2px var(--white); box-shadow: 0 0 0 2px color-mix(in srgb, var(--white) 70%, transparent); }
.wr-seg .seg-n { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 999px;
  background: var(--deal); color: var(--on-deal); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.admin .btn.wr-new { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding-inline: 18px; font-size: 15px; box-shadow: var(--shadow-2); }
body.admin .btn.wr-new small { font-size: 11.5px; font-weight: 500; opacity: .8; }
/* الصيانة (MAINT-01/02) */
.mt-more select { min-height: 38px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; }
.mt-newf { margin-bottom: 14px; }
.ahead .mt-new-b { order: 2; }
/* العروض (OFFER-01): الانتهاء ظاهر على البطاقة */
.of-end { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); }
.of-end.perm { background: transparent; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.of-end.soon { background: transparent; background: color-mix(in srgb, var(--warn, #c98a00) 20%, transparent); color: var(--text); }
.of-end.over { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
/* شحن الرصيد (TOPUP-01): العملة واضحة بالقائمة والتفاصيل + سعر الصرف المعتمد للمرجع */
.cur-tag { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.cur-ctx { grid-column: 1 / -1; display: grid; gap: 2px; margin: 0 0 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.cur-ctx b { color: var(--text); font-size: 13px; }
.an-exp { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* المساعد (AI-01/02/03) */
.ai-hint { margin: 6px 2px 0; font-size: 12px; color: var(--text-2); }
.ai-cl { list-style: none; margin: 0; padding: 6px; display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.ai-cl li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; }
.ai-cl li.on { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
.ai-co { flex: 1; min-width: 0; display: grid; text-align: start; padding: 6px 4px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.ai-co b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ai-co small { color: var(--text-2); font-size: 12px; }
/* المواصفات (ATTR-01): أعمدة مجمّعة — بلا تمرير أفقي */
.sp-sub { display: block; font-size: 12px; color: var(--text-2); }
.sp-key { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); padding: 0 5px; border-radius: 5px; }
.sp-flags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sp-flags label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; cursor: pointer; }
/* الصلاحيات (ROLE-01): معاينة قبل الحفظ */
.rl-pv { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); }
.rl-pv h3 { margin: 0 0 6px; font-size: 15px; }
.rl-delta { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--gold-ink, var(--text)); }
.rl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.rl-cols ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; color: var(--text-2); }
.rl-cols li.ok { color: var(--text); }
.rl-cols li.ok::marker { content: '✓ '; color: var(--ok); }

/* ── الوصول (A11Y-02): حلقة تركيز ظاهرة لكل عنصر تفاعلي عند التنقل بلوحة المفاتيح ── */
body.admin :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
body.admin :is(input, select, textarea):focus-visible { outline-offset: 0; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--paper); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* ── بحث سريع للتنقل (NAV-01) ── */
.cmd-wrap { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.cmd-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.cmd { position: relative; width: 560px; max-width: 100%; max-height: 76vh; display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow-3); overflow: hidden; }
.cmd-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cmd-in svg, .cmd-open svg, .atop-cmd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
body.admin .cmd-in input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; font: inherit; font-size: 16px; padding: 6px 0; color: inherit; outline: none; }
.cmd kbd, .cmd-open kbd { font: 600 11px/1 var(--font-body); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.cmd-list { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.cmd-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.cmd-list a .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .75; }
.cmd-list a b { font-weight: 600; font-size: 14.5px; }
.cmd-list a small { margin-inline-start: auto; color: var(--text-2); font-size: 12px; }
.cmd-list a.on { background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
.cmd-none { padding: 14px; color: var(--text-2); font-size: 14px; }
.cmd-help { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.cmd-open { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 0 12px 10px; min-height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--on-chrome-2) 25%, transparent); background: transparent; color: var(--on-chrome-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.cmd-open span { flex: 1; text-align: start; }
@media (max-width: 960px) { .cmd-open { display: none; } .cmd-wrap { padding-top: 12px; } }
@media (min-width: 961px) { .atop-cmd { display: none; } }
/* زر «بحث سريع» بالشريط الجانبي: نفس ألوان روابط القائمة (التباين ≥ 4.5) */
body.admin .cmd-open { color: var(--text-2); border-color: var(--line); background: var(--surface); background: color-mix(in srgb, var(--surface) 70%, transparent); }
body.admin .cmd-open:hover { color: var(--text); border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, var(--line)); }
/* شريط التبويبات القابل للتمرير: عنصر sr-only جوّاته كان بيطلع برّا الحاوية وبيعمل تمرير أفقي للصفحة بالموبايل */
.mt-seg, .wr-seg { position: relative; }
/* مناطق الشحن: رؤوس أعمدة + تفعيل/تعطيل */
.zone-head { font-size: 12px; color: var(--text-2); font-weight: 700; margin-bottom: 4px; }
.zone-row.off > b { color: var(--text-2); text-decoration: line-through; }
.zone-on input { width: 22px; height: 22px; }
@media (max-width: 960px) { .zone-head { display: none; } }
.pw-row { display: flex; gap: 6px; align-items: center; } .pw-row input { flex: 1; min-width: 0; }
/* «بحاجة لتدخّلك» بالسائقين: الإجراء من نفس السطر (شحن مع كابتن / إعادة المحاولة / اتصال) */
li.cxq-it { flex-wrap: wrap; }
.cxq-it > .cxq-t { flex: 1 1 220px; min-width: 0; color: inherit; text-decoration: none; }
.cxq-it > .cxq-t:hover b { text-decoration: underline; }
.cxq-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-inline-start: auto; }
.cxq-acts select { min-height: 36px; max-width: 220px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
@media (max-width: 640px) { .cxq-acts { width: 100%; } .cxq-acts select { flex: 1; max-width: none; } }
/* بطاقة الزبون: الطلبات والمصروف والرصيد بنظرة */
.cu-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0 0; }
.cu-stats > div { padding: 8px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.cu-stats dt { font-size: 12px; color: var(--text-2); }
.cu-stats dd { margin: 2px 0 0; font-weight: 700; }
/* شريط الفلاتر على الكمبيوتر: صف أفقي (كان كل فلتر بعرض كامل فوق بعض ويدفع الجدول لتحت) */
@media (min-width: 961px) {
  .filters-row.ff { flex-wrap: wrap; align-items: center; }
  .filters-row.ff > .ff-q { flex: 1 1 260px; }
  .filters-row.ff > select, .filters-row.ff > input, .filters-row.ff > .ff-date, .filters-row.ff > .btn { flex: 0 1 auto; width: auto; min-width: 0; max-width: 240px; }
  .filters-row.ff > select { min-width: 150px; }
}
.ai-retry { margin: 6px 2px 0; }
/* الصلاحيات: ملخص لاصق + نقل الكل لدور */
.rl-sticky { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 8px 12px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 45%, var(--line)); box-shadow: var(--shadow-2); font-size: 13px; font-weight: 600; }
@media (max-width: 960px) { .rl-sticky { top: 64px; } }
.rl-move { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 12px; }
.rl-move label { display: grid; gap: 4px; font-size: 13px; }
.rl-move select { min-height: 38px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }

/* رسالة تجربة / رموز التحقق / تلغرام */
.tg-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tg-row input { flex: 1 1 180px; min-width: 0; }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cd-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.cd-row small { grid-column: 2; color: var(--text-2); }
.cd-code { grid-row: span 2; font-size: 20px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.tga { margin-top: 16px; padding-top: 14px; border-top: var(--bw-1) solid var(--line); display: grid; gap: 10px; }
.tga-h { font-size: 14px; }
.tga-s { font-size: 12.5px; color: var(--text-2); margin: 0; }
.tga-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: var(--bw-1) solid var(--line); border-radius: 10px; font-size: 13px; }
.tga-row small { color: var(--text-2); margin-inline-start: 6px; }
.tga-man summary { cursor: pointer; font-size: 13px; color: var(--gold-ink, inherit); }
.tga-man > * + * { margin-top: 8px; }
.tga-kinds { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.tga-kinds label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.tga-acts { display: inline-flex; align-items: center; gap: 10px; }
.tga-bk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.tga-bkbox { display: grid; gap: 8px; padding: 10px 12px; border: var(--bw-1) dashed var(--line); border-radius: 12px; }
@media (max-width: 520px) { .tga-row { flex-wrap: wrap; } }

/* رمز الدفع (ملاحظة حوالة شام كاش) */
.pc-chip { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: var(--gold-soft, rgba(176,138,62,.14)); color: var(--gold-ink, inherit); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; direction: ltr; }
.pc-big { font-size: 18px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.pc-hint { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.cu-pc { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }

/* ── ألوان المنتج بنموذج المنتج (2026-10-09) ── */
.clr-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.clr-hint b { color: var(--text); }
.clr-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.clr-pre { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding-inline: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); font: 600 13px/1 var(--font-head); cursor: pointer; transition: border-color .15s, background-color .15s; }
.clr-pre i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.clr-pre:hover:not(:disabled) { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 8%, var(--surface)); }
.clr-pre:disabled { opacity: .4; cursor: default; }
.clr-pre:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.clr-pre-custom { padding-inline: 14px; border-style: dashed; color: var(--text-2); }
.clr-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.clr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'pick name def av acts';
  align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.clr-row > .clr-pick { grid-area: pick; } .clr-row > .clr-name { grid-area: name; } .clr-row > .clr-def { grid-area: def; }
.clr-row > .clr-av { grid-area: av; } .clr-row > .clr-acts { grid-area: acts; }
@media (max-width: 640px) {
  .clr-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'pick name name' 'av def acts'; row-gap: 8px; }
  .clr-row > .clr-def { justify-self: start; }
}
.clr-row.na .clr-pick, .clr-row.na .clr-name { opacity: .55; }
.clr-pick { position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1px transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.clr-pick:focus-within { outline: 2px solid var(--volt); outline-offset: 2px; }
.clr-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.clr-row .clr-name { width: 100%; min-width: 0; }
.clr-def { padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); }
.clr-av { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: var(--text-2); }
.clr-acts { display: inline-flex; gap: 4px; justify-self: end; }
/* صورة بانتظار «إنشاء المنتج» (2026-10-09) */
.img-cell.pend img { opacity: .85; }
.pend-tag { align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); }

/* الصيانة: زيارة فني السجل (لوحة /tech) — ثلاث محطات + آخر تعذّر */
.mt-visit { display: grid; gap: 10px; }
.mt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mt-steps li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm, 12px); border: 1px solid var(--line); background: var(--surface); }
.mt-steps li b { font: 700 13px var(--font-head); color: var(--text-3); }
.mt-steps li small { font-size: 12px; color: var(--text-3); }
.mt-steps li.on { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); background: var(--surface); background: color-mix(in srgb, var(--volt) 12%, var(--surface)); }
.mt-steps li.on b { color: var(--gold-ink); }
.mt-issue { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm, 12px); background: var(--err-bg); color: var(--err-tx); font-size: 13.5px; line-height: 1.7; }

/* تفاصيل الطلب: قسم «التجهيز» (لوحة /prep) */
.ao-prep { display: grid; gap: 10px; margin: 4px 0 12px; padding: 12px; border-radius: var(--radius-sm, 12px); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 40%, var(--line)); background: var(--surface); background: color-mix(in srgb, var(--volt) 5%, var(--surface)); }
.ao-prep h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 14px var(--font-head); }
.ao-prep h3 .mi { width: 18px; height: 18px; }
.ap-cur { display: grid; gap: 8px; }
.ap-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.ap-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ap-steps li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.ap-steps li b { font: 700 12.5px var(--font-head); color: var(--ink-3); }
.ap-steps li small { font-size: 11.5px; color: var(--ink-3); }
.ap-steps li.on { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, transparent); }
.ap-steps li.on b { color: var(--gold-ink); }
.ap-line { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.ap-issue { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--err-bg); color: var(--err-tx); font-size: 13px; line-height: 1.6; }
.ap-photo { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.ap-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-send, .ap-cancel { display: grid; gap: 8px; }

/* تفاصيل الطلب: صورة الموقع من الزبون */
.ao-locph { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; }
.ao-locph img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--line); }

/* ══ ص46: الهيكل الداكن (--chrome) جوّا الإدارة بيتبع الوضع النهاري — الشريط السفلي وأي سطح «هيكل» بيصير ورق دافي فاتح ══ */
html:not([data-mode="dark"]) body.admin {
  --chrome: #FBF8F2; --on-chrome: var(--text); --on-chrome-2: var(--text-2); --on-chrome-3: var(--text-3);
  --chrome-hover: color-mix(in srgb, var(--text) 10%, #FBF8F2); --chrome-soft: color-mix(in srgb, var(--text) 5%, #FBF8F2);
}
html:not([data-mode="dark"]) body.admin .abar { box-shadow: 0 -10px 26px -18px rgba(70, 52, 20, .35); border-top-color: var(--line); border-top-color: color-mix(in srgb, var(--text) 10%, transparent); }
html:not([data-mode="dark"]) body.admin .abar a.on { color: var(--gold-ink); }

/* ══ ص46: مقاسات أزرار أهدأ بكل الإدارة — كانت ٥٢px وخط عرض كبير ⇒ ٤٤px وخط ١٥، والمجموعات صف متوازن ══ */
body.admin .btn { min-height: 44px; padding: 0 20px; font-size: 15px; line-height: 1.25; font-weight: 700; gap: 8px; }
body.admin .btn-sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
@media (pointer: coarse) { body.admin .btn:not(.btn-sm) { min-height: 46px; } body.admin .btn-sm { min-height: 40px; } }
body.admin .btn .mi { width: 17px; height: 17px; }
/* مجموعات الأزرار بالتفاصيل (صيانة، شكاوى، قرارات…): صف بيلتف، وعلى الموبايل الأزرار بتتقاسم العرض بدل ما تتكدّس بأحجام مختلفة */
body.admin :is(.mt-btns, .ao-rv-btns, .cf-btns, .inv-btns) { gap: 8px; align-items: center; }
@media (max-width: 640px) {
  body.admin :is(.mt-btns, .ao-rv-btns, .cf-btns) > .btn { flex: 1 1 auto; min-width: 0; padding-inline: 14px; white-space: nowrap; }
}
/* رابط صغير بدل صندوق «بحاجة لتدخّلك» بصفحات السائقين/التجهيز */
.cxq-link { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: var(--surface);
  background: color-mix(in srgb, var(--volt) 9%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 30%, transparent); font-size: 14px; }
.cxq-link .mi { width: 18px; height: 18px; color: var(--gold-ink); flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.cxq-link span { flex: 1; min-width: 0; } .cxq-link b { font-weight: 800; }
.cxq-link em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--gold-ink); white-space: nowrap; }
.cxq-link em::after { content: ' ←'; } html.ltr .cxq-link em::after { content: ' →'; }

/* ══ ص46: «يحتاج انتباهك/تدخلك» — كان العنوان مقصوص («ولم يُ…») وزر الإجراء فوقه، والسطر الثاني مقطوع ⇒
   العنوان والسطر بيلتفّوا، والزر بعموده تحت مركز السطر الأول ══ */
.attn-panel .at-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; }
.attn-panel .np-t b, .attn-panel .np-t b span { white-space: normal; overflow: visible; text-overflow: clip; }
.attn-panel .np-t > span { overflow: visible; text-overflow: clip; }
.attn-panel .at-cta { align-self: center; }
.attn-panel .at-n { font-weight: 800; }
@media (max-width: 520px) {
  .db-act { align-items: flex-start; }
  .db-act-t small { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  .db-act-cta { align-self: center; }
}
/* ص46: أرقام الطلبات/التذاكر ما بتنكسر لسطرين (MT-261010-\nSVB4) — والحالة بتنزل تحتها إذا ضاق المكان */
body.admin :is(.mt-r1 b, .mt-head h2, .ao-no, .cx-no, [dir="ltr"].no) { white-space: nowrap; }
body.admin .mt-r1 { flex-wrap: wrap; row-gap: 4px; }

/* ══ ص47: تبويبتين بصفحات السائقين/التجهيز/الفنيين — الأشخاص | الطلبات اللي بدها تدخّل ══ */
.cx-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 16px; background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--line); }
.cx-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--text-2);
  font: 700 14px/1.3 var(--font-body); cursor: pointer; text-align: center; transition: background-color .2s, color .2s, box-shadow .2s; }
.cx-tabs button .mi { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.cx-tabs button:hover { color: var(--text); }
.cx-tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 6px 16px -10px rgba(40, 30, 10, .45); }
.cx-tabs button.on .mi { color: var(--gold-ink); }
.cx-tabs button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.cx-tabs b { min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: transparent;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-2); font-variant-numeric: tabular-nums; }
.cx-tabs b.hot { background: var(--deal); color: var(--on-deal, #fff); }
@media (max-width: 420px) { .cx-tabs button { font-size: 13px; gap: 6px; padding-inline: 6px; } .cx-tabs button .mi { display: none; } }
.cxq-empty { margin-bottom: 16px; }
.cx-tabs button span { white-space: nowrap; }

/* ══ ص49: صفحة المنتج (إضافة/تعديل) من جديد — بطاقات نظيفة، الأساسيات بس، معاينة حيّة للبطاقة، وألوان كدوائر ══ */
.pe2 { --pe-r: 18px; }
.pe2-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.pe2-head h1 { margin: 0; font: 900 clamp(24px, 3vw, 32px)/1.2 var(--font-display); }
.pe2-head p { margin: 2px 0 0; font-size: 14px; color: var(--text-3); }
.pe2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pe2-main { display: grid; gap: 14px; min-width: 0; }
.pe2-card { padding: 18px 20px; border-radius: var(--pe-r); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 16, 8, .04); }
.pe2-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pe2-ch h2 { margin: 0; font: 800 17px var(--font-head); display: flex; align-items: center; gap: 8px; }
.pe2-cnt { min-width: 26px; height: 24px; padding-inline: 8px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.pe2-req { font-style: normal; color: var(--deal); }
.pe2-opt { font-size: 12px; font-weight: 500; color: var(--text-3); }
.pe2-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.pe2 .field { margin-bottom: 14px; } .pe2 .field:last-child { margin-bottom: 0; }
.pe2 .field > label, .pe2 .pe-lbl label { font-weight: 700; font-size: 13.5px; }
.pe2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pe2-three { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0 12px; }
/* الصور */
.pe2-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pe2-img, .pe2-add { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.pe2-img { border: 1px solid var(--line); background: #fff; cursor: grab; }
.pe2-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pe2-img.main { border: 2px solid var(--volt); }
.pe2-main-tag { position: absolute; bottom: 6px; inset-inline-start: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--volt); color: var(--on-volt, #111); }
.pe2-img.ext .pe2-main-tag { background: var(--text); background: color-mix(in srgb, var(--text) 70%, transparent); color: #fff; }
.pe2-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(20, 18, 14, .62); color: #fff; opacity: .9; }
.pe2-x svg, .pe2-cx svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pe2-x:hover { background: var(--deal); }
.pe2-add { display: grid; place-content: center; justify-items: center; gap: 4px; cursor: pointer; text-align: center; color: var(--gold-ink);
  border: 1.5px dashed var(--volt);
  border: 1.5px dashed color-mix(in srgb, var(--volt) 60%, var(--line)); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); transition: background-color .2s, border-color .2s; }
.pe2-add:hover { background: var(--surface); background: color-mix(in srgb, var(--volt) 12%, var(--surface)); border-color: var(--volt); }
.pe2-add svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pe2-add b { font-size: 13.5px; } .pe2-add small { font-size: 11.5px; color: var(--text-3); }
.pe2-add.off { opacity: .5; pointer-events: none; }
/* السعر */
.pe2-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.pe2-seg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 700 13px var(--font-body); cursor: pointer; white-space: nowrap; }
.pe2-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 3px 10px -6px rgba(40, 30, 10, .5); }
.pe2-money { position: relative; }
.pe2-money input { padding-inline-end: 44px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pe2-money span { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; color: var(--text-3); pointer-events: none; }
.pe2-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pe2-step input { border: 0 !important; text-align: center; font-size: 17px; font-weight: 700; min-height: 44px; box-shadow: none !important; background: none; padding: 0; -moz-appearance: textfield; }
.pe2-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pe2-step button { height: 100%; min-height: 44px; border: 0; background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font-size: 20px; cursor: pointer; }
.pe2-step button:hover { background: transparent; background: color-mix(in srgb, var(--volt) 14%, transparent); }
.pe2-preview { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; background: transparent; background: color-mix(in srgb, var(--ok) 7%, transparent); color: var(--text-2); }
.pe2-preview > span:first-child { color: var(--text-3); margin-inline-end: 4px; }
/* الألوان */
.pe2-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 10px 6px; margin-top: 12px; }
.pe2-swb { display: grid; justify-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--text-2); font: 600 12.5px var(--font-body); }
.pe2-swb i { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 2px 6px -3px rgba(0, 0, 0, .35); transition: transform .2s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s; }
.pe2-swb i svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); transition: opacity .15s; }
.pe2-swb:hover i { transform: scale(1.06); }
.pe2-swb.on i { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--volt); }
.pe2-swb.on i svg { opacity: 1; }
.pe2-swb.on { color: var(--text); font-weight: 800; }
.pe2-swb:disabled { opacity: .4; cursor: not-allowed; }
.pe2-swb:focus-visible { outline: none; } .pe2-swb:focus-visible i { outline: 2px solid var(--volt); outline-offset: 5px; }
.pe2-swc i { background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1.5px var(--line); border: 1.5px dashed var(--line); border: 1.5px dashed color-mix(in srgb, var(--text) 30%, transparent); }
.pe2-swc i svg { opacity: 1; stroke: var(--text-2); stroke-width: 2.2; filter: none; }
.pe2-custom { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 12px; padding: 10px; border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.pe2-cdot { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); overflow: hidden; }
.pe2-cdot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pe2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pe2-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
html:not(.ltr) .pe2-chip { padding: 4px 10px 4px 6px; }
.pe2-chip i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex-shrink: 0; }
.pe2-chip b { font-weight: 700; }
.pe2-chip small { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: transparent; background: color-mix(in srgb, var(--volt) 20%, transparent); color: var(--gold-ink); }
.pe2-chip.def { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, var(--line)); }
.pe2-chip.na { opacity: .75; } .pe2-chip.na b { text-decoration: line-through; color: var(--text-3); }
.pe2-cbtn { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: 700 12px var(--font-body); color: var(--text-3); cursor: pointer; }
.pe2-cbtn:hover { color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); }
.pe2-cbtn.warn { color: var(--deal); }
.pe2-cx { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); cursor: pointer; flex-shrink: 0; }
.pe2-cx:hover { background: transparent; background: color-mix(in srgb, var(--deal) 14%, transparent); color: var(--deal); }
/* تفاصيل إضافية */
.pe2-more { padding: 0; }
.pe2-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.pe2-more > summary::-webkit-details-marker { display: none; }
.pe2-more > summary span { display: grid; gap: 2px; } .pe2-more > summary b { font: 800 16px var(--font-head); } .pe2-more > summary small { font-size: 12.5px; color: var(--text-3); }
.pe2-more > summary svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--text-3); stroke-width: 2.2; stroke-linecap: round; transition: transform .25s; }
.pe2-more[open] > summary svg { transform: rotate(180deg); }
.pe2-more-b { padding: 4px 20px 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.pe2-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 14px; cursor: pointer; }
.pe2-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pe2-sub h3 { margin: 0; font: 800 14.5px var(--font-head); }
.pe2-spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.pe2-spec-adv { grid-column: 1 / -1; margin-top: -2px; }
.pe2-spec-adv summary { font-size: 12px; color: var(--text-3); cursor: pointer; width: max-content; }
.pe2-spec-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.pe2-spec-opts select, .pe2-spec-opts input { width: auto; min-width: 120px; }
.pe2-alt { grid-template-columns: 44px minmax(0, 1fr); }
.pe2-alt img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
/* الملخّص الجانبي */
.pe2-side { position: sticky; top: 16px; display: grid; gap: 12px; }
.pe2-prev { display: grid; gap: 4px; padding: 12px; border-radius: var(--pe-r); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -28px rgba(40, 30, 10, .5); }
.pe2-pimg { position: relative; aspect-ratio: 1; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pe2-pimg img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.pe2-pimg span { font-size: 13px; color: #9a958b; }
.pe2-pimg em { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; font: 800 12px var(--font-body); font-style: normal; background: var(--deal); color: #fff; direction: ltr; }
.pe2-prev > small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.pe2-prev > b { font: 700 15px/1.5 var(--font-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pe2-pprice { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.pe2-pprice span { font: 800 18px var(--font-display); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.pe2-pprice s { font-size: 13px; color: var(--text-3); }
.pe2-pdots { display: flex; gap: 6px; margin-top: 4px; }
.pe2-pdots i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.pe2-pdots i.na { opacity: .35; }
.pe2-stock { justify-self: start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: transparent; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.pe2-stock.out { background: transparent; background: color-mix(in srgb, var(--deal) 10%, transparent); color: var(--deal); }
.pe2-pub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--pe-r); background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.pe2-actions { display: grid; gap: 8px; }
.pe2-actions .btn { width: 100%; }
body.admin .pe2-save { min-height: 50px; font-size: 16px; }
@media (max-width: 960px) {
  .pe2-grid { grid-template-columns: minmax(0, 1fr); }
  .pe2-side { position: static; }
  .pe2-prev { display: none; }
  /* الحفظ: شريط ثابت فوق شريط اللوحة السفلي */
  .pe2-actions { position: fixed; inset-inline: 0; bottom: var(--abar, 0px); z-index: 930; display: flex; gap: 8px; padding: 10px 14px; background: var(--surface); background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(40, 30, 10, .5); }
  .pe2-actions .btn { flex: 1; width: auto; }
  .pe2 { padding-bottom: 90px; }
}
@media (max-width: 560px) {
  .pe2-card { padding: 16px 14px; }
  .pe2-two { grid-template-columns: minmax(0, 1fr); }
  .pe2-three { grid-template-columns: 1fr 1fr; }
  .pe2-three > .field:first-child { grid-column: 1 / -1; }
  .pe2-imgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe2-ch { flex-wrap: wrap; }
}
.pe2-money input { padding-right: 46px !important; padding-left: 12px !important; }
.pe2-money span { right: 14px; left: auto; inset-inline-end: auto; }
.pe2 .field.pe-pick { margin-bottom: 14px; }
/* ══ ص50: عرض أو إعلان من صفحة المنتج ══ */
.pe2-offadd { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--volt);
  border: 1.5px dashed color-mix(in srgb, var(--volt) 55%, var(--line)); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); color: var(--gold-ink); font: 700 14.5px var(--font-body); }
.pe2-offadd:hover { background: var(--surface); background: color-mix(in srgb, var(--volt) 12%, var(--surface)); border-color: var(--volt); }
.pe2-offadd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pe2-offs { display: grid; gap: 8px; margin-bottom: 12px; }
.pe2-off { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pe2-off-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 15%, transparent); flex-shrink: 0; }
.pe2-off-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pe2-off-t { display: grid; gap: 2px; min-width: 0; } .pe2-off-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pe2-off-t small { font-size: 12px; color: var(--text-3); }
.pe2-off-st { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.pe2-off.live .pe2-off-st { background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pe2-off.soon .pe2-off-st { background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--gold-ink); }
.pe2-off.over, .pe2-off.off { opacity: .7; }
.pe2-offf { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid var(--line); }
.pe2-otypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pe2-otype { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: start; padding: 10px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.pe2-otype .pe2-off-ic { grid-row: 1 / 3; }
.pe2-otype b { font-size: 14px; } .pe2-otype small { font-size: 12px; line-height: 1.5; color: var(--text-3); }
.pe2-otype.on { border-color: var(--volt); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 18%, transparent); }
.pe2-otype.on .pe2-off-ic { background: var(--gold-metal); color: #111; }
.pe2-dur { display: flex; flex-wrap: wrap; gap: 6px; }
.pe2-dur button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: 700 13px var(--font-body); cursor: pointer; }
.pe2-dur button.on { border-color: var(--volt); background: var(--surface); background: color-mix(in srgb, var(--volt) 14%, var(--surface)); color: var(--text); }
.pe2-osub { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.pe2-oacts { display: flex; gap: 8px; }
@media (max-width: 560px) { .pe2-otypes { grid-template-columns: minmax(0, 1fr); } .pe2-off { grid-template-columns: 38px minmax(0, 1fr) auto; } .pe2-off .pe2-cbtn { grid-column: 2 / -1; justify-self: start; } }

/* ══ ص51: تبويبات الإدارة — «المصباح الذهبي» (شكل فقط، بلا أي تغيير وظيفي) ══
   ١) إطار ذهبي مضيء بينزلق من التبويب السابق للنشط  ٢) أيقونات ببلاطات، النشطة معدن ذهبي
   ٣) ضو ناعم بيلحق المؤشر فوق القائمة  ٤) عناوين المجموعات بنقطة ذهبية وخط متلاشي
   ٥) شارات بتنبض  ٦) شريط الموبايل: كبسولة ذهبية منزلقة + رفعة للأيقونة  ٧) دخول متتابع للعناصر بالدرج */
body.admin { --gm: linear-gradient(135deg, #8A6A2B 0%, #E9CF86 36%, #B08A3E 58%, #F3E1A6 80%, #A7823A 100%); }
body.admin .aside nav.nav-live { position: relative; isolation: isolate; }
/* الضو اللاحق للمؤشر */
body.admin .aside nav.nav-live::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(180px circle at var(--sx, 50%) var(--sy, 0), transparent, transparent 70%);
  background: radial-gradient(180px circle at var(--sx, 50%) var(--sy, 0), color-mix(in srgb, var(--volt) 13%, transparent), transparent 70%); }
body.admin .aside nav.nav-live.spot-on::before { opacity: 1; }
/* المصباح */
body.admin .nv-lamp { position: absolute; top: 0; inset-inline: 8px; z-index: -1; opacity: 0; pointer-events: none; border-radius: 12px;
  background: linear-gradient(90deg, transparent, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--volt) 6%, transparent), color-mix(in srgb, var(--volt) 20%, transparent));
  box-shadow: inset 0 0 0 1px transparent, 0 8px 22px -12px var(--volt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 38%, transparent), 0 8px 22px -12px color-mix(in srgb, var(--volt) 70%, transparent);
  transition: transform .55s cubic-bezier(.22, 1.2, .36, 1), height .4s cubic-bezier(.22, 1, .36, 1), opacity .25s; }
/* شريط ضوئي جهة البداية + لمعة بتمرّ فوق المصباح مرة عند الوصول */
body.admin .nv-lamp::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--gm);
  box-shadow: 0 0 10px 1px var(--volt);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--volt) 75%, transparent); }
body.admin .nv-lamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 241, 200, .35) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0;
  animation: nvShine 1.6s .5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes nvShine { to { background-position: -130% 0; } }
/* لما المصباح شغّال: خلفية النشط شفافة (المصباح هو الخلفية) */
body.admin .aside nav.nav-live.lamped a.on { background: transparent; }
body.admin .aside nav a { gap: 12px; padding-block: 7px; transition: background-color .2s, color .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
body.admin .aside nav a:hover { transform: translateX(-3px); }
[dir="ltr"] body.admin .aside nav a:hover { transform: translateX(3px); }
/* بلاطة الأيقونة */
body.admin .nv-ic { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; position: relative;
  background: transparent;
  background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  transition: background .3s, box-shadow .3s, transform .35s cubic-bezier(.22, 1.4, .36, 1), color .3s; }
body.admin .nv-ic .mi { width: 17px; height: 17px; }
body.admin .aside nav a:hover .nv-ic { transform: translateY(-1px) rotate(-6deg) scale(1.06); color: var(--volt);
  box-shadow: inset 0 0 0 1px transparent, 0 6px 14px -8px var(--volt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 45%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--volt) 80%, transparent); }
body.admin .aside nav a.on .nv-ic { background: var(--gm); box-shadow: 0 6px 16px -6px var(--volt), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--volt) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18); }
body.admin .aside nav a.on .nv-ic .mi { color: #2A1F0A; stroke: #2A1F0A; stroke-width: 2.1; opacity: 1; }
body.admin .aside nav a.on .nv-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 1px solid var(--volt); border: 1px solid color-mix(in srgb, var(--volt) 55%, transparent);
  animation: nvRing 2.4s .9s ease-out both; opacity: 0; }
@keyframes nvRing { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
/* عناوين المجموعات: نقطة ذهبية + خط شعري متلاشي */
body.admin .aside nav .grp:not(.grp-fold) { display: flex; align-items: center; gap: 8px; }
body.admin .aside nav .grp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--gm); box-shadow: 0 0 6px var(--volt); box-shadow: 0 0 6px color-mix(in srgb, var(--volt) 70%, transparent); }
body.admin .aside nav .grp:not(.grp-fold)::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, transparent, transparent); background: linear-gradient(to left, color-mix(in srgb, var(--volt) 30%, transparent), transparent); }
[dir="ltr"] body.admin .aside nav .grp:not(.grp-fold)::after { background: linear-gradient(to right, transparent, transparent); background: linear-gradient(to right, color-mix(in srgb, var(--volt) 30%, transparent), transparent); }
body.admin .aside nav .grp-fold { gap: 8px; justify-content: flex-start; }
body.admin .aside nav .grp-fold > svg { margin-inline-start: auto; }
body.admin .aside nav > div + div { border-top: 0; }
/* شارات بتنبض بهدوء */
body.admin .aside nav a .bdg { position: relative; font-weight: 800; box-shadow: 0 4px 10px -4px var(--deal); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--deal) 80%, transparent); }
body.admin .aside nav a .bdg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--deal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--deal) 60%, transparent); animation: nvPulse 2.4s ease-out infinite; }
@keyframes nvPulse { 0% { box-shadow: 0 0 0 0 var(--deal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--deal) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
/* لقطة القائمة (قبل جاهزية Alpine): بدون مصباح، والنشط بخلفيته الثابتة */
body.admin .nav-snap .nv-lamp { display: none; }
/* درج الموبايل: دخول متتابع للعناصر لما ينفتح */
@media (max-width: 960px) {
  body.admin .aside.open nav.nav-live > div { animation: nvIn .45s cubic-bezier(.22, 1, .36, 1) both; }
  body.admin .aside.open nav.nav-live > div:nth-of-type(2) { animation-delay: .04s; }
  body.admin .aside.open nav.nav-live > div:nth-of-type(3) { animation-delay: .08s; }
  body.admin .aside.open nav.nav-live > div:nth-of-type(4) { animation-delay: .12s; }
  body.admin .aside.open nav.nav-live > div:nth-of-type(5) { animation-delay: .16s; }
  body.admin .aside.open nav.nav-live > div:nth-of-type(n+6) { animation-delay: .2s; }
  body.admin .aside nav a:hover { transform: none; }
}
@keyframes nvIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ── شريط الموبايل: كبسولة ذهبية منزلقة ── */
@media (max-width: 960px) {
  body.admin .abar { isolation: isolate; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 86%, transparent); }
  body.admin .abar::before { content: ""; position: absolute; top: 0; inset-inline: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--volt), transparent);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--volt) 65%, transparent), transparent); }
  body.admin .abar-lamp { position: absolute; top: 0; left: 0; width: 60px; height: 34px; border-radius: 999px; z-index: -1; opacity: 0; pointer-events: none;
    background: var(--gm); box-shadow: 0 8px 20px -8px var(--volt), inset 0 1px 0 rgba(255, 255, 255, .5); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--volt) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: transform .55s cubic-bezier(.22, 1.25, .36, 1), opacity .25s; }
  body.admin .abar.lamped a.on .abar-i { background: transparent; }
  body.admin .abar.lamped a.on .abar-i .mi { stroke: #2A1F0A; stroke-width: 2.2; }
  body.admin .abar .abar-i { height: 34px; width: 60px; transition: transform .35s cubic-bezier(.22, 1.4, .36, 1), background-color .2s; }
  body.admin .abar a.on .abar-i { transform: translateY(-3px); }
  body.admin .abar a.on > span:last-child { color: var(--gold-ink); font-weight: 800; }
  html[data-mode="dark"] body.admin .abar a.on > span:last-child { color: var(--volt); }
  body.admin .abar a:active .abar-i, body.admin .abar button:active .abar-i { transform: scale(.9); }
  body.admin .abar.lamped a.on .bdg { box-shadow: 0 0 0 2px #E9CF86; }
}
@media (prefers-reduced-motion: reduce) {
  body.admin .nv-lamp, body.admin .abar-lamp, body.admin .nv-ic, body.admin .aside nav a, body.admin .abar .abar-i { transition: none !important; }
  body.admin .nv-lamp::after, body.admin .aside nav a.on .nv-ic::after, body.admin .aside nav a .bdg::after, body.admin .aside.open nav.nav-live > div { animation: none !important; }
  body.admin .aside nav a:hover, body.admin .aside nav a:hover .nv-ic { transform: none; }
}

/* ══ ص52: «نشط/مستحقات» بصفحات السائقين/التجهيز/الفنيين — كانت لازقة بالتبويبات (هامش سالب + تبويبات بلا هامش) ⇒ بطاقات أرقام مرتّبة ══ */
body.admin .cx-tabs:not(.pv-tabs) { margin: 0 0 14px; }
body.admin .cx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 0 0 16px; font-size: 12.5px; color: var(--text-3); }
body.admin .cx-facts > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 16px -14px rgba(40, 30, 10, .5); position: relative; overflow: hidden; }
body.admin .cx-facts > span::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--volt); }
body.admin .cx-facts > span.ok::before { background: var(--ok); } body.admin .cx-facts > span.bad::before { background: var(--deal); }
body.admin .cx-facts b { margin: 0; font: 800 19px/1.25 var(--font-head); color: var(--text); white-space: nowrap; }
body.admin .cx-facts .ok { background: var(--surface); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
body.admin .cx-facts .bad { background: var(--surface); background: color-mix(in srgb, var(--deal) 7%, var(--surface)); }

/* ══ ص52: عدّاد القراءة الآلية بالدفعات — ٣ خانات متساوية بسطر واحد (كانت حبوب بتلف لسطرين) ══ */
body.admin .pv-readbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; }
body.admin .pv-rf { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 54px; padding: 6px 4px; border-radius: 12px; text-align: center; line-height: 1.3; }
body.admin .pv-rf b { font: 800 18px/1.2 var(--font-head); }
body.admin .pv-rf span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.admin .pv-rf.on { box-shadow: 0 6px 16px -10px var(--volt); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--volt) 80%, transparent); }

/* ══ ص57: تفاصيل الطلب — شريط مضغوط + ملخّص واحد (المبلغ، الحالتين، الإجراء، المراحل، التواصل) ══ */
.ao-detail { --od-r: 16px; }
.od-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.od-title { flex: 1; min-width: 0; margin: 0; font: 800 20px/1.3 var(--font-display); }
.od-ib { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--ao-card); color: var(--text); font: 700 14px var(--font-body); cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .12s; }
.od-ib:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 55%, var(--line)); background: var(--ao-card); background: color-mix(in srgb, var(--volt) 7%, var(--ao-card)); }
.od-ib:active { transform: scale(.96); }
.od-ib:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.od-ib:disabled { opacity: .55; cursor: default; }
.od-ib svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.od-ib svg circle { fill: currentColor; stroke: none; }
.od-spin { animation: odSpin .8s linear infinite; }
@keyframes odSpin { to { transform: rotate(-360deg); } }
.od-more { position: relative; }
.od-menu { position: absolute; z-index: 60; top: calc(100% + 6px); inset-inline-end: 0; min-width: 236px; padding: 6px; border-radius: 14px; background: var(--ao-card); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -16px rgba(20, 16, 8, .45); display: grid; }
.od-menu a, .od-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text);
  font: 600 14px var(--font-body); text-align: start; text-decoration: none; cursor: pointer; }
.od-menu a:hover, .od-menu button:hover, .od-menu a:focus-visible, .od-menu button:focus-visible { background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); outline: none; }
.od-menu .mi { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; color: var(--text-3); }
.od-menu .od-danger { color: var(--deal); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.od-menu .od-danger .mi { color: var(--deal); }

/* الملخّص */
.od-sum { display: grid; gap: 14px; padding: 16px 18px; margin-bottom: 16px; border-radius: 20px; background: var(--ao-card); border: var(--ao-b); box-shadow: var(--ao-sh); }
.od-sum-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.od-id { display: grid; gap: 2px; min-width: 0; flex: 1; }
.od-no { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--text); cursor: pointer;
  font: 800 19px/1.2 var(--font-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; justify-self: start; }
.od-no svg { width: 17px; height: 17px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.od-no:hover svg { stroke: var(--gold-ink); }
.od-no .od-ok { stroke: var(--ok); }
.od-no:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 8px; }
.od-date { font-size: 13px; color: var(--text-3); }
.od-total { display: grid; justify-items: end; text-align: end; }
.od-total b { font: 900 26px/1.15 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.od-total small { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.od-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.od-chip { display: inline-flex; align-items: center; gap: 8px; }
.od-chip > small { font-size: 12px; font-weight: 700; color: var(--text-3); }
.od-chip .ob { font-size: 13px; }
.od-todo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.od-todo > .mi { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2; color: var(--text-3); }
.od-todo > div { display: grid; gap: 2px; min-width: 0; }
.od-todo b { font-size: 15px; }
.od-todo small { font-size: 12.5px; color: var(--text-3); }
.od-todo.mine { background: var(--ao-card); background: color-mix(in srgb, var(--volt) 13%, var(--ao-card)); box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 42%, transparent); }
.od-todo.mine > .mi { color: var(--gold-ink); }
.od-todo.mine b { color: var(--gold-ink); }
/* ص87: سطر الفاتورة بملخّص الطلب */
.od-inv { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; padding-inline-start: 12px; border-radius: 12px; border: 1px dashed var(--line); border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent); }
.od-inv.done { border-style: solid; border-color: var(--line); }
.od-inv > .mi { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; color: var(--gold-ink); }
.od-inv > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.od-inv b { font-size: 14.5px; }
.od-inv small { font-size: 12.5px; color: var(--text-3); }
body.admin .od-inv-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding-inline: 16px; text-decoration: none; }
body.admin .od-inv-go .mi { width: 18px; height: 18px; }
/* المراحل */
.od-steps { --n: 4; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.od-steps li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); text-align: center; }
.od-steps li + li::before { content: ""; position: absolute; top: 15px; inset-inline-end: calc(50% + 17px); width: calc(100% - 34px); height: 2px; border-radius: 2px; background: var(--line); }
.od-steps li.done::before, .od-steps li.cur::before { background: var(--ok); }
.od-steps li.cur::before { background: linear-gradient(to left, var(--volt), var(--ok)); }
[dir="ltr"] .od-steps li.cur::before { background: linear-gradient(to right, var(--ok), var(--volt)); }
.od-steps i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--ao-card); color: var(--text-3); }
.od-steps i .mi { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.od-steps li.done { color: var(--text-2); }
.od-steps li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.od-steps li.cur { color: var(--text); font-weight: 800; }
.od-steps li.cur i { background: var(--ao-card); background: color-mix(in srgb, var(--volt) 18%, var(--ao-card)); border-color: var(--volt); color: var(--gold-ink); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 16%, transparent); }
.od-cancelled { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; color: var(--deal); font-weight: 700; font-size: 14px;
  background: transparent;
  background: color-mix(in srgb, var(--deal) 8%, transparent); }
.od-cancelled .mi { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.od-cancelled > span { display: grid; gap: 2px; }
.od-cancelled small { color: var(--text-2); font-weight: 500; font-size: 12.5px; }
/* التواصل */
.od-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.od-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.od-person > div { display: grid; min-width: 0; flex: 1; }
.od-person b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-person small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-av { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; font: 800 15px var(--font-head);
  background: var(--ao-card);
  background: color-mix(in srgb, var(--volt) 16%, var(--ao-card)); color: var(--gold-ink); box-shadow: inset 0 0 0 1.5px var(--volt); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--volt) 50%, transparent); }
.od-av2 { background: var(--ao-card); background: color-mix(in srgb, var(--text) 6%, var(--ao-card)); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.od-reach { display: flex; gap: 6px; flex-shrink: 0; }
.od-reach .od-ib { padding: 0; width: 44px; }
.od-wa { color: #128C4A; }
html[data-mode="dark"] .od-wa { color: #3DDC84; }
/* المنتجات */
.od-items { list-style: none; margin: 0; padding: 0; }
.od-items li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.od-items li:last-child { border-bottom: 0; }
.od-it-img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--img-bg, transparent); background: var(--img-bg, color-mix(in srgb, var(--text) 5%, transparent)); display: grid; place-items: center; }
.od-it-img img { width: 100%; height: 100%; object-fit: contain; }
.od-it-n { display: grid; gap: 3px; min-width: 0; }
.od-it-n > b { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.od-it-n small { font-size: 12.5px; color: var(--text-3); }
.od-it-n .clr-chip { justify-self: start; }
.od-it-p { display: grid; justify-items: end; gap: 2px; text-align: end; }
.od-it-p small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.od-items .od-empty { display: block; padding: 12px 0; color: var(--text-3); font-size: 14px; }
/* السجل: الأحدث فوق ومميّز */
.od-tl li.is-last i { box-shadow: 0 0 0 1px var(--line), 0 0 0 5px transparent; box-shadow: 0 0 0 1px var(--line), 0 0 0 5px color-mix(in srgb, var(--volt) 20%, transparent); }
.od-tl b { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.od-new { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); color: var(--gold-ink); }
/* بلا قسم إجراء ⇒ عمود واحد */
.ao-grid.od-noside { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .od-title { font-size: 17px; }
  .od-back span { display: none; }
  .a-back.od-back { width: 40px; padding: 0; }   /* ص92: على الهاتف سهم فقط (النص مخفي) */
  .od-sum { padding: 14px; gap: 12px; border-radius: 18px; }
  .od-total b { font-size: 22px; }
  .od-no { font-size: 17px; }
  .od-steps li { font-size: 11.5px; }
  .od-who { grid-template-columns: minmax(0, 1fr); }
  .od-items li { grid-template-columns: 48px minmax(0, 1fr); }
  .od-it-img { width: 48px; height: 48px; }
  .od-it-p { grid-column: 2; justify-items: start; text-align: start; grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
}
@media (prefers-reduced-motion: reduce) { .od-spin { animation: none; } }

/* ══ ص58: صفحة المنتج — صور مصغّرة، أقسام مطوية، ورقة «قسم/ماركة جديدة»، أزرار نشر صريحة ══ */
.pe2-head { align-items: center; }
.pe2-state { margin-inline-start: auto; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.pe2-state.st-active { background: transparent; background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.pe2-state.st-draft { background: transparent; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); color: color-mix(in srgb, var(--warn) 70%, var(--text)); }
/* الصور: صف مصغّرات بدل شبكة كبيرة */
.pe2-imgs { grid-template-columns: repeat(auto-fill, 84px) !important; gap: 8px; }
.pe2-img, .pe2-add { width: 84px; height: 84px; border-radius: 12px; }
.pe2-add svg { width: 22px; height: 22px; }
.pe2-add b { font-size: 12.5px; }
.pe2-mk { position: absolute; bottom: 4px; inset-inline-start: 4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 16, 8, .62); color: #F3E1A6; backdrop-filter: blur(4px); }
.pe2-mk svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pe2-mk:hover, .pe2-mk:focus-visible { background: var(--volt); color: #2A1F0A; outline: none; }
/* أقسام مطوية (الألوان، العرض) */
.pe2-fold { padding: 0; }
.pe2-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; min-height: 60px; cursor: pointer; list-style: none; }
.pe2-fold > summary::-webkit-details-marker { display: none; }
.pe2-fold > summary:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; border-radius: var(--pe-r); }
.pe2-fs { display: grid; gap: 4px; min-width: 0; }
.pe2-fs > b { font: 800 16px var(--font-head); }
.pe2-fs > small { font-size: 12.5px; color: var(--text-3); }
.pe2-fchips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pe2-fchips i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.pe2-fchips i.na { opacity: .35; }
.pe2-fchips em { font-style: normal; font-size: 12px; color: var(--text-3); margin-inline-start: 2px; }
.pe2-fadd { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gold-ink);
  background: transparent;
  background: color-mix(in srgb, var(--volt) 12%, transparent); }
.pe2-fadd svg, .pe2-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; flex-shrink: 0; }
.pe2-chev { width: 20px; height: 20px; stroke: var(--text-3); transition: transform .25s; }
.pe2-fold[open] .pe2-chev { transform: rotate(180deg); }
.pe2-fold[open] .pe2-fadd { display: none; }
.pe2-fold-b { padding: 14px 20px 20px; border-top: 1px solid var(--line); }
/* تفاصيل إضافية: أقسام فرعية */
.pe2-subs { display: grid; gap: 10px; }
.pe2-subd { border: 1px solid var(--line); border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--text) 2%, transparent); }
.pe2-subd > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; min-height: 48px; cursor: pointer; font-weight: 800; font-size: 14.5px; }
.pe2-subd > summary small { font-weight: 500; font-size: 12px; color: var(--text-3); }
.pe2-subd[open] > summary { border-bottom: 1px solid var(--line); }
.pe2-subd > :not(summary) { margin-inline: 14px; }
.pe2-subd > :last-child { margin-bottom: 14px; }
.pe2-subd > summary + * { margin-top: 12px; }
/* ورقة «قسم/ماركة جديدة» */
.pe-new-t { font: 800 15px var(--font-head); }
.pe-sheet-bg { display: none; }
@media (max-width: 760px) {
  .pe-sheet-bg { display: block; position: fixed; inset: 0; z-index: 980; background: rgba(10, 8, 4, .45); }
  .pe-new { position: fixed; z-index: 990; inset-inline: 0; bottom: 0; margin: 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0;
    background: var(--surface); box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, .4); max-height: 85dvh; overflow: auto; animation: peSheet .28s cubic-bezier(.22, 1, .36, 1); }
  .pe-new::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: 2px; }
  .pe-new-a .btn { flex: 1; min-height: 46px; }
}
@keyframes peSheet { from { transform: translateY(40px); opacity: 0; } }
/* الأزرار */
.pe2-acts2 { display: grid; gap: 8px; }
.pe2-acts2 .btn { width: 100%; }
.pe2-dirty { margin: 0; font-size: 12.5px; color: var(--warn); color: color-mix(in srgb, var(--warn) 70%, var(--text)); text-align: center; }
.pe2-dirty::before { content: "● "; }
.pe2-link { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--gold-ink); text-underline-offset: 3px; }
.pe2 .f-err { display: block; margin-top: 4px; font-size: 12.5px; color: var(--deal); }
@media (max-width: 960px) {
  .pe2-actions { flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  .pe2-acts2 { display: flex; gap: 8px; }
  .pe2-acts2 .btn { flex: 1; min-height: 46px; }
  .pe2-acts2 .btn-ghost { flex: 0 1 40%; }
  .pe2-link { display: none; }
  .pe2 { padding-bottom: 120px; }
}
@media (max-width: 560px) { .pe2-fold > summary { padding: 12px 14px; } .pe2-fold-b { padding: 12px 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .pe-new { animation: none; } }
/* ص58: تبويبات «إدارة المنتجات» */
.cat-tabs { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.cat-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cat-tabs a .mi { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.cat-tabs a:hover { color: var(--text); }
.cat-tabs a.on { background: var(--surface); color: var(--text); box-shadow: 0 4px 12px -8px rgba(40, 30, 10, .5); }
.cat-tabs a.on .mi { color: var(--gold-ink); }
.cat-tabs a:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
@media (max-width: 560px) { .cat-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .cat-tabs a { padding: 0 6px; font-size: 13.5px; } }
/* ص58: نموذج القسم — خيارات متقدمة مطوية */
.cat-adv { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 14px; }
.cat-adv > summary { display: grid; gap: 2px; padding: 12px 14px; min-height: 48px; cursor: pointer; }
.cat-adv > summary b { font-size: 14.5px; } .cat-adv > summary small { font-size: 12px; color: var(--text-3); }
.cat-adv[open] > summary { border-bottom: 1px solid var(--line); }
.cat-adv-b { padding: 14px; }
.cat-adv-b > .field:last-of-type, .cat-adv-b > div:last-child { margin-bottom: 0; }
/* ص58: إحصائيات المخزون بقائمة المنتجات أقصر */
.pr-st { padding: 8px 12px; gap: 0; }
.pr-st b { font-size: 19px; }
.pr-st small { font-size: 11.5px; }
@media (max-width: 760px) { .pr-st small { display: none; } }
@media (max-width: 560px) { .pr-st { padding: 8px 10px; } .pr-st b { font-size: 17px; } .pr-st span { font-size: 12px; } }
/* ص58: البحث وزر الفلاتر بسطر واحد على الموبايل */
@media (max-width: 760px) { body.admin .filters-row.ff { width: 100%; grid-template-columns: minmax(0, 1fr) auto; } body.admin .filters-row.ff > .ff-q { min-width: 0; width: auto; }
  body.admin .filters-row.ff > :not(.ff-q):not(.ff-btn) { grid-column: 1 / -1; } }

/* ══ ص59: تبديل عملة عرض السعر بقائمة المنتجات (SYP | USD) — عرض بس ══ */
.cur-price { display: grid; justify-items: start; gap: 4px; }
.cur-price .cp-v, .cur-price .cp-old { display: grid; }
.cur-price .cp-v > *, .cur-price .cp-old > * { grid-area: 1 / 1; transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cur-price .cp-old { font-size: 12px; color: var(--ink-3); }
.cur-price[data-cur="SYP"] .cp-usd, .cur-price[data-cur="USD"] .cp-syp { opacity: 0; transform: translateY(6px); pointer-events: none; }
.cur-price[data-cur="USD"] .cp-usd, .cur-price[data-cur="SYP"] .cp-syp { opacity: 1; transform: none; }
.cur-tg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; width: 104px; }
.cur-tg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: none;
  color: var(--text-3); font: 800 11px/1 var(--font-body); letter-spacing: .04em; cursor: pointer; transition: color .25s; }
.cur-tg button[aria-pressed="true"] { color: #2A1F0A; }
.cur-tg button:disabled { opacity: .45; cursor: default; }
.cur-tg button:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; }
.cur-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; width: calc(50% - 2px); inset-inline-start: 2px; border-radius: 999px;
  background: linear-gradient(135deg, #B08A3E, #E9CF86 45%, #C9A24E); box-shadow: 0 3px 8px -3px var(--volt); box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--volt) 80%, transparent);
  transition: transform .35s cubic-bezier(.22, 1.2, .36, 1); }
/* RTL: SYP يمين (البداية) ⇒ USD = إزاحة لليسار */
.cur-price[data-cur="USD"] .cur-thumb { transform: translateX(-100%); }
[dir="ltr"] .cur-price[data-cur="USD"] .cur-thumb { transform: translateX(100%); }
.cur-orig { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
/* بالقائمة (موبايل): السعر والتبديل جنب بعض */
.cur-inline { display: inline-flex; align-items: center; gap: 8px; }
.cur-inline .cur-tg { width: 92px; }
.cur-inline .cur-tg button { min-height: 24px; font-size: 10.5px; padding: 0 6px; }
@media (max-width: 760px) { .cur-tg button { min-height: 30px; } .cur-inline .cur-tg button { min-height: 28px; } }
@media (prefers-reduced-motion: reduce) { .cur-thumb, .cur-price .cp-v > *, .cur-price .cp-old > * { transition: none; } }
/* ص59: الكمبيوتر — البحث والفلاتر بسطر واحد (كانت الفلاتر تحت بعض بعرض كامل) */
@media (min-width: 761px) {
  body.admin .filters-row.ff { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(auto-fit, minmax(150px, 190px)); gap: 8px; align-items: center; width: 100%; }
  body.admin .filters-row.ff > .ff-btn { display: none; }
  body.admin .filters-row.ff > select { width: 100%; margin: 0; }
}

/* ── طلبات الانضمام (ص60) — partials/join-requests.html ── */
.cxj-sub { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.cxj-empty { margin: 6px 0; padding: 18px; text-align: center; color: var(--ink-3); font-size: 14px; border: var(--bw-1) dashed var(--line); border-radius: 12px; }
.cxj-list { max-height: none; }
.cxj-it { align-items: flex-start; padding-block: 12px; }
.cxj-it .cxq-ic { color: var(--text); background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); }
.cxj-it .cxq-t small { white-space: normal; }
.cxj-note { color: var(--ink-2) !important; font-size: 13px !important; line-height: 1.6; }
.cxj-no { color: var(--deal); }
.cxj-hist { margin-top: 14px; }
.cxj-hist summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink-2); padding: 6px 0; }
.cxj-dec { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.cxj-dec li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 8px 10px; border-radius: 10px; background: var(--paper); font-size: 13.5px; }
.cxj-dec small { color: var(--ink-3); font-size: 12px; flex-basis: 100%; }
.cxj-st { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.cxj-st.approved { background: var(--st-delivered-bg); color: var(--st-delivered-tx); }
.cxj-st.rejected { background: var(--err-bg); color: var(--err-tx); }
@media (max-width: 720px) { .cxj-it { flex-wrap: wrap; } .cxj-it .cxq-acts { flex-basis: 100%; justify-content: flex-end; } }

/* ===== ص72: الكفالة بمحرّر المنتج — مدة + جهة بأزرار، أو كتابة حرة ===== */
.pe2-war .pe2-ch h2 .mi { width: 20px; height: 20px; color: var(--accent, var(--volt)); }
.pe2-war .pe2-wq { margin: 4px 0 8px; font: 700 14px var(--font-head); color: var(--text-2); }
.pe2-war .pe2-chips { margin: 0 0 14px; padding: 0; border: 0; }
.pe2-war .pe2-chip { min-height: 42px; font: 700 14px var(--font-body); color: var(--text); cursor: pointer; }
html .pe2-war .pe2-chip { padding: 0 16px; }
.pe2-war .pe2-chips .pe2-chip.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.pe2-war .pe2-chip:focus-visible { outline: 2px solid var(--accent, var(--volt)); outline-offset: 2px; }
.pe2-wother { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; }
.pe2-wother input { width: 90px; }
.pe2-wother small { color: var(--text-3); font-size: 13px; }
.pe2-wout { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pe2-wout p { margin: 0; font-size: 14px; line-height: 1.7; }
.pe2-wout span { color: var(--text-3); margin-inline-end: 4px; }
.pe2-wout small { display: block; color: var(--warn-ink, #8a4b00); font-size: 12.5px; }
.pe2-wout.warn { background: transparent; background: color-mix(in srgb, #d97706 12%, transparent); }
@media (max-width: 600px) { .pe2-war .pe2-ch { align-items: flex-start; } }
/* ص72: شرح الكفالة بثلاث خطوات */
.wr-how { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wr-how li { display: grid; align-content: start; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.wr-how b { font: 800 14px var(--font-head); }
.wr-how span { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.wr-how a { justify-self: start; margin-top: 4px; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .wr-how { grid-template-columns: minmax(0, 1fr); } }
.xc-how { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--volt) 10%, transparent); font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.pv-mx { background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
/* ص77: لوحة الإشعارات بشكل جرس الزبون — بس الموضع تبع اللوحة */
body.admin .notif-panel.nt-pop { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; overflow: hidden; border-radius: 18px; }
body.admin .notif-panel.nt-pop .nt-list { overflow-y: auto; }
body.admin .nt-ic .mi { width: 18px; height: 18px; }
/* ص78: حساب الاستلام بالمستحقات */
.sc-chip { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.sc-chip.ok { background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.sc-chip.miss { background: transparent; background: color-mix(in srgb, #d97706 14%, transparent); color: #9a5300; }
.sc-card { display: grid; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.sc-card.miss { border-style: dashed; border-color: #d97706; border-color: color-mix(in srgb, #d97706 55%, var(--line)); }
.sc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-h b { font: 800 15px var(--font-head); }
.sc-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-body img { width: 112px; height: 112px; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.sc-acc { display: grid; gap: 6px; min-width: 0; flex: 1; }
.sc-acc small { color: var(--text-3); font-size: 12.5px; }
.sc-code { font: 700 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; word-spacing: .2em; overflow-wrap: anywhere; }
.sc-acc .btn { justify-self: start; }
.sc-miss { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.sc-edit { display: grid; gap: 8px; }
.sc-up { justify-self: start; }
.sc-hint { font-size: 12.5px; color: var(--text-3); } .sc-hint.bad { color: var(--deal); }
.sc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-amt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.cp-amt span { color: var(--text-3); font-size: 13px; } .cp-amt b { font-size: 18px; }
.cp-amt small { flex-basis: 100%; color: var(--text-3); font-size: 12.5px; }

/* ===== ص87: المحادثة المفتوحة — شريط علوي نحيل، سجل بعرض كامل بلا إطارات متداخلة، فقاعات حتى ٨٠٪،
   إشعارات المتجر بطاقات وسطية مختصرة، فواصل أيام، وخانة رد لاصقة فوق شريط التنقّل السفلي.
   الهاتف (≤960): المحادثة طبقة ثابتة بين الشريط العلوي (56px) والشريط السفلي (--abar) ⇒ الصفحة لا تتمرّر، السجل وحده يتمرّر.
   الكمبيوتر: لوحتان، والمحادثة لوحة لاصقة بارتفاع الشاشة وسجل يتمرّر داخلها. ===== */
.ms-chat:has(.mc2) { display: flex; flex-direction: column; overflow: hidden; }
.mc2 { --mc2-bg: color-mix(in srgb, var(--text) 3%, var(--paper)); flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--mc2-bg); }

/* الشريط العلوي */
.mc2-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px 8px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.a-back.mc2-back { display: none; }   /* ص92: الشكل من .a-back--icon؛ يظهر على الهاتف فقط */
.mc2-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); background: color-mix(in srgb, var(--volt) 22%, var(--surface)); color: var(--text); font: 800 17px/1 var(--font-head); box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 45%, transparent); }
.mc2-av.guest { background: var(--surface); background: color-mix(in srgb, var(--text) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.mc2-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mc2-who h2 { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font: 800 16px/1.35 var(--font-head); }
.mc2-who h2 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc2-tag { flex: none; padding: 1px 8px; border-radius: 999px; font: 700 11.5px/1.6 var(--font-head); background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
.mc2-who small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mc2-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.mc2-ib { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--text); cursor: pointer; text-decoration: none; transition: background-color .15s; }
.mc2-ib:hover, .mc2-more.mm-open > summary.mc2-ib { background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); }
.mc2-ib:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; }
.mc2-ib.wa { color: #1DAA61; }
.mc2-more > summary.mc2-ib { min-width: 40px; padding: 0; font-size: 0; }
/* قائمة ⋯: رقم المحادثة ونوع المراسل كسطور معلومات، ثم إغلاق/إعادة فتح */
.mc2-pinfo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 0 12px; font-size: 13.5px; color: var(--text-2); }
.mc2-pinfo b { font: 700 14px var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }
.mc2-pinfo + button { margin-top: 4px; border-top: 1px solid var(--line) !important; border-radius: 0 0 8px 8px !important; }
.more-pop > button.mc2-pbtn { gap: 10px; }
.more-pop > button.mc2-pbtn.ok { color: var(--ok); }

/* السجل */
.mc2-log { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 12px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
/* محادثة قصيرة: الرسائل تبدأ من أسفل السجل قرب خانة الرد (كتطبيقات المراسلة) */
.mc2-log::before { content: ''; flex: 1 0 0; }
.mc2-item { display: flex; flex-direction: column; margin-top: 12px; }
.mc2-item.cont { margin-top: 3px; }
.mc2-day { align-self: center; margin: 14px 0 2px; }
.mc2-day span { display: block; padding: 4px 12px; border-radius: 999px; background: var(--surface); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 4px 10px -8px rgb(0 0 0 / .35); font: 600 12px/1.5 var(--font-head); color: var(--text-2); }
.mc2-item:has(> .mc2-day:not([style*="none"])) { margin-top: 0; }

/* فقاعات: الموظف جهة البداية (يمين بالعربي) والزبون جهة النهاية — كما اعتمدها المالك في ص79 */
.mc2-bub { position: relative; max-width: min(80%, 560px); padding: 8px 12px 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); box-shadow: 0 2px 6px -4px rgb(0 0 0 / .25); }
.mc2-item.customer .mc2-bub { align-self: flex-end; }
.mc2-item.me .mc2-bub { align-self: flex-start; background: var(--surface); background: color-mix(in srgb, var(--volt) 17%, var(--surface)); border-color: var(--line); border-color: color-mix(in srgb, var(--volt) 34%, transparent); }
.mc2-item.customer:not(.cont) .mc2-bub { border-start-end-radius: 6px; }
.mc2-item.me:not(.cont) .mc2-bub { border-start-start-radius: 6px; }
.mc2-bub p { margin: 0; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.mc2-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 1px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mc2-item.me .mc2-meta { color: var(--text); color: color-mix(in srgb, var(--text) 62%, transparent); }
.mc2-tick { display: inline-flex; color: inherit; }
.mc2-tick.read { color: #1DAA61; }
html[data-mode="dark"] .mc2-tick.read { color: #3DDC84; }

/* إشعارات المتجر: بطاقة وسطية مختصرة */
.mc2-sys { align-self: center; width: min(94%, 460px); padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 22%, var(--line)); box-shadow: 0 2px 8px -6px rgb(0 0 0 / .3); }
.mc2-sys-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--text-2); }
.mc2-sys-h img { width: 22px; height: 22px; border-radius: 50%; background: #0B0B0D; object-fit: cover; flex: none; }
.mc2-sys-h b { font: 700 12.5px var(--font-head); color: var(--text); }
.mc2-sys-h time { margin-inline-start: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mc2-sys p { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.mc2-wa { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.6 var(--font-body); }
.mc2-wa svg { flex: none; }
.mc2-wa.ok { background: transparent; background: color-mix(in srgb, #25D366 13%, transparent); color: #128C4A; }
html[data-mode="dark"] .mc2-wa.ok { color: #4ADE80; background: transparent; background: color-mix(in srgb, #25D366 16%, transparent); }
.mc2-wa.off { background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.mc2-none { margin: auto; padding: 24px; color: var(--text-3); font-size: 14px; text-align: center; }

/* خانة الرد */
.mc2-compose { flex: none; display: grid; gap: 8px; padding: 8px 10px 10px; background: var(--surface); border-top: 1px solid var(--line); }
.mc2-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); }
.mc2-hint.warn { color: var(--text); background: transparent; background: color-mix(in srgb, var(--deal) 9%, transparent); }
.mc2-hint button { padding: 0; border: 0; background: none; color: var(--deal); font: 700 12.5px var(--font-head); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mc2-quick { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -10px; padding-inline: 10px; }
.mc2-quick::-webkit-scrollbar { display: none; }
.mc2-ql { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.mc2-ql svg { color: var(--volt); }
.mc2-quick button { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 35%, var(--line)); background: var(--surface); background: color-mix(in srgb, var(--volt) 6%, var(--surface)); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; white-space: nowrap; transition: border-color .15s; }
.mc2-quick button:hover { border-color: var(--volt); }
.mc2-send { display: flex; align-items: flex-end; gap: 8px; }
.mc2-send textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 132px; padding: 11px 16px; border-radius: 23px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; resize: none; }
.mc2-send textarea::placeholder { color: var(--text-3); }
.mc2-send textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 20%, transparent); }
.mc2-go { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--volt); color: var(--on-volt); cursor: pointer; box-shadow: 0 6px 14px -8px var(--volt); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--volt) 80%, #000); transition: transform .12s, opacity .15s; }
html[dir="rtl"] .mc2-go svg { transform: scaleX(-1); }
.mc2-go:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.mc2-go:not(:disabled):active { transform: scale(.94); }
.mc2-go:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* الكمبيوتر: لوحة لاصقة بارتفاع الشاشة المتبقي، والسجل يتمرّر داخلها */
@media (min-width: 961px) {
  body.admin .ms-chat:has(.mc2) { height: calc(100dvh - 170px); min-height: 480px; top: 16px; overflow: hidden; }
  .mc2-bar { padding-inline: 16px 10px; }
  .mc2-log { padding-inline: 20px; }
  .mc2-compose { padding: 10px 16px 14px; }
  .mc2-quick { margin-inline: -16px; padding-inline: 16px; }
}
/* الهاتف: طبقة ثابتة بين الشريطين، بلا إطار ولا حواف */
@media (max-width: 960px) {
  .a-back.mc2-back { display: inline-flex; }
  body.admin .ms-wrap.detail .ms-chat { position: fixed; inset-inline: 0; top: 56px; bottom: var(--abar, 0px); z-index: 800; border: 0; border-radius: 0; box-shadow: none; background: var(--paper); }
  body.admin:has(.ms-wrap.detail) { overflow: hidden; }
  .mc2-bar { padding-inline: 4px 6px; gap: 8px; }
  .mc2-bar .mc2-back { margin-inline-end: -4px; }
}
@media (max-width: 380px) {
  .mc2-av { width: 36px; height: 36px; font-size: 15px; }
  .mc2-acts { gap: 0; }
  .mc2-ib { width: 38px; height: 38px; }
  .mc2-more > summary.mc2-ib { min-width: 38px; }
}
@media (prefers-reduced-motion: reduce) { .mc2-go, .mc2-ib { transition: none; } }

/* ===== ص80: طلب الصيانة المفتوح — أقل ازدحام: رأس مختصر، المشكلة بسطرين، «الخطوة الجاية» وحدة، والسجل مطوي ===== */
.mt2 { padding: 0; overflow: hidden; }
.mt2-head { display: grid; gap: 6px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); background: var(--surface); background: color-mix(in srgb, var(--volt) 4%, var(--surface)); }
.mt2-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt2-no { margin-inline-start: auto; font: 700 13px ui-monospace, monospace; color: var(--text-3); }
.mt2-prod { margin: 4px 0 0; font: 800 20px/1.35 var(--font-head); }
.mt2-cust { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.mt2-icons { display: flex; gap: 6px; }
.mt2-icons a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.mt2-icons a:hover { border-color: var(--volt); }
.mt2-icons a.wa { color: #1DAA61; }
.mt2-addr { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.7; }
.mt2-prob { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mt2-desc { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt2-desc.open { display: block; }
.mt2-more { margin-top: 4px; border: 0; background: none; padding: 0; color: var(--gold-ink); font: 700 13px var(--font-body); cursor: pointer; }
.mt2-ph { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.mt2-ph img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.mt2-next { margin: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 45%, var(--line)); background: var(--surface); box-shadow: 0 10px 24px -20px rgb(0 0 0 / .5); }
.mt2-nh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 16px var(--font-head); }
.mt2-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 22%, transparent); }
.mt2-war { margin: 0 0 12px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mt2-next .mt-sec { border: 0; padding: 0; margin: 0; background: none; }
.mt2-next .mt-act { margin-top: 4px; }
.mt2-next .wr-grid3 { grid-template-columns: 1.4fr 1fr 1fr; }
.mt2-note summary { cursor: pointer; font-size: 13.5px; color: var(--gold-ink); font-weight: 700; padding: 6px 0; list-style: none; }
.mt2-note summary::-webkit-details-marker { display: none; }
.mt2-note input { width: 100%; margin-top: 6px; }
.mt2-result { margin: 14px 18px; display: grid; gap: 4px; font-size: 14px; }
.mt2-result p { margin: 0; }
.mt2-fold { margin: 0 18px 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.mt2-fold summary { cursor: pointer; font: 700 14px var(--font-head); color: var(--text-2); padding: 6px 0; }
.mt2 .mt-cancel { margin: 0 18px 18px; }
@media (max-width: 600px) { .mt2-next .wr-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mt2-next .wr-grid3 > :first-child { grid-column: 1 / -1; } }
.mt2-edit { margin-bottom: 10px; }

/* ── ص95 (بند ٥): بطاقة الزيارة في تفاصيل طلب الصيانة ──
   رأس (عنوان الحالة + شارة الفاتورة) · صف الفني (حرف أول، الأجرة، الموعد، اتصال/خريطة) · مسار أفقي انطلق ← وصل ← تمّ · تلميح بسطر · روابط صغيرة */
.mt2-next .mi { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mt2-next.is-closed { border-color: var(--line); box-shadow: none; }
.mt2-vh { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mt2-vh .mt2-nh { margin: 0; font: 800 16.5px/1.4 var(--font-head); text-wrap: balance; }
.mt2-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent;
  background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text-2); font: 600 12.5px/1.3 var(--font-body); white-space: nowrap; text-decoration: none; }
.mt2-chip .mi { width: 14px; height: 14px; }
a.mt2-chip:hover { border-color: var(--volt); color: var(--text); }
.mt2-chip.t-ok { color: var(--ok); border-color: var(--line); border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: transparent; background: color-mix(in srgb, var(--ok) 9%, transparent); }
.mt2-chip.t-bad { color: var(--deal); border-color: var(--line); border-color: color-mix(in srgb, var(--deal) 30%, transparent); background: transparent; background: color-mix(in srgb, var(--deal) 9%, transparent); }
.mt2-chip.t-mute { color: var(--text-3); }
.mt2-chip-a { border: 0; background: none; padding: 0; margin-inline-start: 2px; color: var(--gold-ink); font: 700 12.5px var(--font-body); cursor: pointer; }
.mt2-visit { display: grid; gap: 12px; }
.mt2-next .mt-act + .mt2-visit { margin-top: 12px; }
/* صف الفني */
.mt2-tech { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
  background: var(--surface);
  background: color-mix(in srgb, var(--text) 3.5%, var(--surface)); border: 1px solid var(--line); }
.mt2-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--font-head);
  color: var(--gold-ink); background: var(--surface); background: color-mix(in srgb, var(--volt) 15%, var(--surface)); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 40%, transparent); }
.mt2-who { display: grid; gap: 5px; min-width: 0; }
.mt2-who > b { font: 700 15px/1.3 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt2-meta { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.mt2-fee { min-height: 24px; padding: 2px 9px; font: 700 12px/1.3 var(--font-head); font-variant-numeric: tabular-nums; color: var(--gold-ink);
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--volt) 35%, transparent); background: transparent; background: color-mix(in srgb, var(--volt) 9%, transparent); }
.mt2-due { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt2-due .mi { width: 13px; height: 13px; }
.mt2-due.late { color: var(--deal); }
.mt2-late { padding: 1px 8px; border-radius: 999px; font: 700 11.5px/1.5 var(--font-head); color: var(--on-deal, #fff); background: var(--deal); }
.mt2-tacts { display: flex; gap: 6px; }
.mt2-tacts a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  transition: border-color .2s var(--ease, ease), color .2s var(--ease, ease); }
.mt2-tacts a:hover { border-color: var(--volt); color: var(--gold-ink); }
.mt2-tacts .mi { width: 18px; height: 18px; stroke-width: 1.8; }
/* المسار الأفقي: عقدة لكل مرحلة وخط يصلها بالسابقة (اتجاه البداية — يعمل RTL وLTR) */
.mt2-track { list-style: none; margin: 0 auto; width: 100%; max-width: 560px; padding: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt2-track li { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.mt2-track li::before { content: ''; position: absolute; top: 13px; inset-inline-start: calc(-50% + 18px); inset-inline-end: calc(50% + 18px); height: 2px; border-radius: 2px; background: var(--line); }
.mt2-track li:first-of-type::before { display: none; }   /* أول عنصر بعد <template> لـAlpine */
.mt2-track li.done::before { background: var(--volt); }
.mt2-track li.cur::before { background: repeating-linear-gradient(90deg, var(--volt) 0 5px, transparent 5px 9px); }
.mt2-track i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--surface); margin-bottom: 3px; }
.mt2-track li.done i { background: var(--volt); border-color: var(--volt); color: var(--on-volt, #111); }
.mt2-track li.done i .mi { width: 15px; height: 15px; stroke-width: 2.6; }
.mt2-track li.cur i { border: 2px solid var(--volt); box-shadow: 0 0 0 5px transparent; box-shadow: 0 0 0 5px color-mix(in srgb, var(--volt) 16%, transparent); }
.mt2-track li.cur i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--volt); }
.mt2-track b { font: 700 13.5px/1.3 var(--font-head); color: var(--text-3); }
.mt2-track li.done b, .mt2-track li.cur b { color: var(--text); }
.mt2-track small { min-height: 1.4em; font-size: 11.5px; line-height: 1.4; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mt2-track li.cur small { color: var(--gold-ink); font-weight: 700; }
.mt2-next.is-closed .mt2-track li:not(.done) i { border-style: dashed; }
.mt2-hint { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--text-3); text-wrap: balance; }
/* روابط صغيرة أسفل البطاقة: التعديل (ذهبي) والإتمام اليدوي (خافت، المسار الاستثنائي) */
.mt2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--line); }
.mt2-link, .mt2-alt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 700 13px var(--font-body); }
.mt2-link { color: var(--gold-ink); }
.mt2-alt { margin-inline-start: auto; color: var(--text-3); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-decoration-color: color-mix(in srgb, var(--text-3) 45%, transparent); text-underline-offset: 4px; }
.mt2-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.mt2-alt:hover { color: var(--text); }
.mt2-link:focus-visible, .mt2-alt:focus-visible, .mt2-chip-a:focus-visible, .mt2-tacts a:focus-visible, a.mt2-chip:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 8px; }
.mt2-dn-h { margin: 0; font: 700 14px var(--font-head); }
.mt2-visit .mt-done { padding-top: 12px; border-top: 1px dashed var(--line); }
@media (max-width: 420px) {
  .mt2-next { margin: 12px 10px; padding: 14px 12px; }
  .mt2-tech { gap: 10px; padding: 10px; }
  .mt2-av { width: 40px; height: 40px; font-size: 16px; }
  .mt2-tacts a { width: 38px; height: 38px; }
}
/* ص85: حالة الفاتورة */
.inv-st { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); }
.inv-st.issued { background: transparent; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.inv-st.draft { background: transparent; background: color-mix(in srgb, #d97706 14%, transparent); color: #9a5300; }
.inv-st.voided, .inv-st.refunded { background: transparent; background: color-mix(in srgb, var(--deal) 12%, transparent); color: var(--deal); }
html[data-mode="dark"] .inv-st.draft { color: #fbbf24; }
/* ص87: قائمة الفواتير — سطر لكل فاتورة: الرقم والحالة والزبون والمبلغ + زر «طباعة» أساسي ظاهر، والنادر داخل «⋯» */
.wi-list { list-style: none; margin: 0; padding: 0; }
.wi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main amt acts"; align-items: center; gap: 6px 20px; padding: 14px 18px; border-bottom: var(--bw-1) solid var(--line); }
.wi:last-child { border-bottom: 0; }
.wi-main { grid-area: main; min-width: 0; display: grid; gap: 3px; }
.wi-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wi-no { font: 800 15px var(--font-head); letter-spacing: .01em; color: var(--text); }
.wi-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.wi-who b { font-weight: 700; }
.wi-who bdi { font-size: 13px; color: var(--text-2); }
.wi-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.wi-amt { grid-area: amt; font: 800 17px var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.wi-acts { grid-area: acts; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
body.admin .wi-print { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding-inline: 18px; font-size: 14.5px; text-decoration: none; }
body.admin .wi-print .mi { width: 18px; height: 18px; }
body.admin .wi-view { min-height: 42px; display: inline-flex; align-items: center; text-decoration: none; }
.wi .more-menu > summary { min-height: 42px; min-width: 42px; }
.wi.is-voided, .wi.is-refunded { background: transparent; background: color-mix(in srgb, var(--text) 3%, transparent); }
.wi.is-voided :is(.wi-no, .wi-amt), .wi.is-refunded :is(.wi-no, .wi-amt) { color: var(--ink-3); }
.wi.is-voided .wi-amt { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 760px) {
  .wi { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "amt acts"; gap: 12px 12px; padding: 14px; }
  .wi-amt { font-size: 18px; }
}
/* جدول الكفالات عالموبايل: كل كفالة سطر مضغوط بدل أعمدة ضيقة (التاريخ كان ينكسر لأربعة أسطر) */
@media (max-width: 760px) {
  .amain.wr .wr-table { overflow: visible; }
  .amain.wr .wr-table thead { display: none; }
  .amain.wr .wr-table :is(table, tbody) { display: block; }
  body.admin .amain.wr .wr-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border-bottom: var(--bw-1) solid var(--line); }
  .amain.wr .wr-table tr:last-child { border-bottom: 0; }
  body.admin .amain.wr .wr-table td { padding: 0; border: 0; min-width: 0; background: none; box-shadow: none; }
  body.admin .amain.wr .wr-table td:is(:nth-child(1), :nth-child(2), :nth-child(4), :nth-child(5)) { display: flex; flex-direction: column; align-items: flex-start; }
  body.admin .amain.wr .wr-table td:nth-child(4) { align-items: flex-end; }
  .amain.wr .wr-table td:nth-child(1) { grid-column: 1 / -1; }
  .amain.wr .wr-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .amain.wr .wr-table td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: end; white-space: nowrap; }
  .amain.wr .wr-table td:nth-child(5) { grid-column: 1; grid-row: 3; }
  .amain.wr .wr-table td:nth-child(3) { grid-column: 2; grid-row: 3; text-align: end; color: var(--text-2); font-size: 13px; }
}
/* نموذج الإصدار: الإجمالي واضح والزرّان متجاوران (الأساسي أعرض) */
.wr-foot .wr-total { display: grid; gap: 0; }
.wr-foot .wr-total small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.wr-foot .wr-total b { font: 800 22px var(--font-head); font-variant-numeric: tabular-nums; }
.wr-fbtns { display: flex; gap: 8px; flex-wrap: wrap; }
body.admin .wr-fbtns .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.admin .wr-fbtns .wr-go { padding-inline: 22px; }
@media (max-width: 600px) {
  .wr-foot { display: grid; gap: 12px; }
  .wr-fbtns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  body.admin .wr-fbtns .btn { width: 100%; padding-inline: 10px; }
}
/* ص83: مراجعة التقييمات */
.rva-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rva-it { padding: 14px 16px; display: grid; gap: 8px; } .rva-it.hidden { opacity: .7; }
.rva-it p { margin: 0; line-height: 1.8; white-space: pre-wrap; }
.rva-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rva-h small { color: var(--text-3); }
.rva-img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.rv-stars { --v: 0; --sz: 16px; display: inline-block; width: calc(var(--sz) * 5); height: var(--sz); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") 0 0 / var(--sz) var(--sz) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") 0 0 / var(--sz) var(--sz) repeat-x; background: linear-gradient(to left, var(--volt) calc(var(--v) / 5 * 100%), transparent 0); background: linear-gradient(to left, var(--volt) calc(var(--v) / 5 * 100%), color-mix(in srgb, var(--text) 18%, transparent) 0); }

/* ═══ ص87 (الطلبات): صفحة أهدأ — بطاقات أقصر، تلميح بسطر، تراجع كرابط صغير، التجهيز مطوي (نطاق .ao فقط) ═══ */
.ao .ao-card { gap: 7px; padding: 12px 14px; }
.ao .ao-card-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.ao .ao-card-mid .ao-card-cust { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao .ao-card-mid small { flex: none; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ao .ao-card-foot { align-items: center; flex-wrap: wrap; }
.ao .ao-card-foot .ao-next { padding: 4px 10px; font-size: 12.5px; line-height: 1.5; }
.ao .od-chips { gap: 6px; }
.ao .ao-actions > p.ao-next { padding: 0; margin: -2px 0 12px; background: none; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ao .ao-undo { margin: 2px 0 6px; }
.ao .ao-undo-btn { width: auto; min-height: 44px; padding: 4px 2px; gap: 8px; border: 0; background: none; color: var(--ink-3); }
.ao .ao-undo-btn:hover { background: none; color: var(--text); }
.ao .ao-undo-ic { width: 28px; height: 28px; }
.ao .ao-undo-ic svg { width: 15px; height: 15px; }
.ao .ao-undo-t b { font-weight: 600; font-size: 13.5px; line-height: 1.4; font-family: inherit; }
.ao .ao-undo-pay { margin: 0 0 6px; font-size: 13px; }
.ao .ao-undo-pay a { color: var(--ink-3); }
.ao .od-prep { display: block; padding: 0; gap: 0; margin: 8px 0 4px; border-color: var(--line); background: transparent; }
.ao .od-prep > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; cursor: pointer; border-radius: inherit; }
.ao .od-prep > summary::-webkit-details-marker { display: none; }
.ao .od-prep > summary:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.ao .od-prep > summary > .mi { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--ink-3); }
.ao .od-prep-t { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.ao .od-prep-t b { font: 700 14px var(--font-head); }
.ao .od-prep-t span { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.ao .od-prep > summary .ob { flex: none; font-size: 12px; }
.ao .od-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); transition: transform .2s ease; }
.ao .od-prep[open] .od-chev { transform: rotate(180deg); }
.ao .od-prep[open] > summary { border-bottom: 1px solid var(--line); border-end-start-radius: 0; border-end-end-radius: 0; }
.ao .od-prep > :not(summary) { margin: 12px; }
.ao .od-prep .ap-cur + .ap-send { margin-top: 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.ao .od-prep .ap-send > .ao-link { justify-self: start; }
.ao .od-more-kv { margin: 2px 0 12px; }
.ao .od-more-kv > summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.ao .od-more-kv > summary::-webkit-details-marker { display: none; }
.ao .od-more-kv > summary::after { content: '▾'; margin-inline-start: 6px; font-size: 11px; }
.ao .od-more-kv[open] > summary::after { content: '▴'; }
@media (prefers-reduced-motion: reduce) { .ao .od-chev { transition: none; } }

/* ═══ c101: قسم «الإجراء» هادئ — تلميح، زر أساسي واحد، وتراجع كرابط. التجهيز المنتهي صار معلومة (سطر «مين عمل شو» + قسم مطوي) ═══ */
.ao .ao-undo { margin: 0; }
.ao .ao-undo-btn { min-height: 44px; padding: 0 2px; gap: 6px; border-radius: 8px; color: var(--ink-3); }
.ao .ao-undo-ic { width: auto; height: auto; background: none; color: inherit; border-radius: 0; }
.ao .ao-undo-ic svg { width: 16px; height: 16px; }
.ao .ao-undo-t b { font-size: 13.5px; text-decoration: underline; text-decoration-color: transparent; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; }
.ao .ao-undo-btn:hover .ao-undo-t b { text-decoration-color: currentColor; }
.ao .ao-actions .od-prep { margin-top: 4px; }
/* سطر «مين عمل شو» بالملخّص */
.od-crew { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 12px; background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.od-crew li + li { border-top: 1px solid var(--line); }
.od-crew-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; line-height: 1.5; text-align: start; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
.od-crew-it:hover { background: transparent; background: color-mix(in srgb, var(--volt) 7%, transparent); }
.od-crew-it:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.od-crew-it > .mi { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--ink-3); }
.od-crew-it > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.od-crew-it b { font-weight: 700; color: var(--text); }
.od-crew-it small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.od-crew-go { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }
[dir="ltr"] .od-crew-go { transform: scaleX(-1); }
/* قسم «التجهيز» بالعمود الرئيسي (بعد ما يجهز) */
#od-prep-sec, #od-ship-sec { scroll-margin-top: 84px; }
.od-prep-body { padding-top: 4px; }
.ap-links button.ao-link { appearance: none; min-height: 44px; padding: 0 4px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--gold-ink); cursor: pointer; }
.ap-links button.ao-link:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .od-crew-it { transition: none; } }

/* ══ ص92 (c95): حالة التحميل الأولى للقوائم — هيكل بشكل الصف الحقيقي نفسه، وعدّادات لا تظهر فارغة ══
   القاعدة: الهيكل يستعمل أصناف الصف الحقيقي (.pv-row / .cx-item) فيأخذ ارتفاعه ومسافاته نفسها ⇒ لا قفزة عند وصول البيانات.
   الألوان بقيم مباشرة أولاً ثم color-mix (المتصفحات الأقدم كانت تُسقط color-mix فيختفي الهيكل). */
.a-sk { display: inline-block; vertical-align: middle; height: .72em; width: 8em; max-width: 100%; border-radius: 6px; position: relative; overflow: hidden;
  background: rgba(18, 18, 20, .08); background: transparent; background: color-mix(in srgb, var(--text) 9%, transparent); }
.a-sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: a-sk 1.5s cubic-bezier(.4, 0, .2, 1) infinite; }
[dir="rtl"] .a-sk::after { transform: translateX(100%); animation-name: a-sk-rtl; }
html[data-mode="dark"] .a-sk { background: rgba(245, 242, 233, .08); background: transparent; background: color-mix(in srgb, var(--text) 9%, transparent); }
html[data-mode="dark"] .a-sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); }
@keyframes a-sk { to { transform: translateX(100%); } }
@keyframes a-sk-rtl { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .a-sk::after { animation: none; display: none; } }

/* عدّاد التبويب لا يُرسم قبل أن يُعرف رقمه (قبل تشغيل Alpine كان يظهر دائرة فارغة حمراء/رمادية) */
:is(.pv-tabs, .cx-tabs) :is(b, em):empty { display: none; }

/* الدفعات وطلبات الشحن: صفوف الهيكل = .pv-row نفسه بلا تفاعل */
.pv-sk { display: block; }
.pv-sk .pv-row { cursor: default; pointer-events: none; }
.pv-sk .pv-r-m b { min-height: 26px; min-height: 1lh; }   /* b مرن (flex) ⇒ بلا سطر نصّي يأخذ ارتفاعه من محتواه؛ منثبّته بارتفاع سطر النص الحقيقي */
.pv-sk .pv-r-m b .a-sk { width: 7.5em; }
.pv-sk .pv-r-m b .a-sk + .a-sk { width: 4em; }
.pv-sk .pv-r-m small .a-sk { width: 13em; }
.pv-sk .pv-r-s small .a-sk { width: 4.5em; }
.pv-sk li:nth-child(2) .pv-r-m small .a-sk { width: 11em; }
.pv-sk li:nth-child(3) .pv-r-m b .a-sk:first-child { width: 6em; }
.pv-sk li:nth-child(4) .pv-r-m small .a-sk { width: 12em; }
.pv-sk .pv-readbar .a-sk { display: block; width: auto; height: auto; min-height: 54px; border-radius: 12px; }

/* فنيو الصيانة / السائقون / موظفو التجهيز: هيكل بشكل بند الشخص (صورة رمزية + اسم + وصف + وسم) */
.cx-sk { display: block; }
.cx-sk .cx-item { cursor: default; pointer-events: none; }
.cx-sk .cx-av { background: none; box-shadow: none; }
.cx-sk .cx-av .a-sk { width: 42px; height: 42px; border-radius: 50%; }
.cx-sk .cx-t b .a-sk { width: 7em; }
.cx-sk .cx-t small .a-sk { width: 14em; }
.cx-sk .cx-item .cx-tags { display: flex; }
.cx-sk .cx-stf .a-sk { width: 64px; height: 34px; border-radius: 999px; }
.cx-sk .cx-stf .a-sk + .a-sk { width: 80px; }
.cx-sk .cx-tags .a-sk { width: 4.5em; height: 20px; border-radius: 999px; }
.cx-sk li:nth-child(2) .cx-t b .a-sk { width: 5.5em; }
.cx-sk li:nth-child(3) .cx-t small .a-sk { width: 11em; }
.cx-sk .cx-q .a-sk { display: block; width: 100%; height: 44px; border-radius: 12px; }

/* ص104: وسيلة نقل السائق بتفاصيله */
.cx-veh { display: inline-flex; align-items: center; gap: 6px; }
.cx-veh svg { width: 20px; height: 20px; color: var(--text-2); }

/* ص104: «أنا لست روبوتاً» + رمز التحقق بخطوتين بصفحة دخول الإدارة */
.al-robot { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: border-color .15s; }
.al-robot:hover { border-color: var(--volt); border-color: color-mix(in srgb, var(--volt) 60%, var(--line)); }
.al-robot:focus-visible { outline: 3px solid var(--line); outline: 3px solid color-mix(in srgb, var(--volt) 45%, transparent); outline-offset: 2px; }
.al-box { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--ink-3); background: var(--surface); transition: background-color .2s, border-color .2s; }
.al-box svg { width: 18px; height: 18px; fill: none; stroke: var(--surface); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s .05s; }
.al-robot[data-s="busy"] .al-box { border-color: var(--volt); border-top-color: transparent; border-radius: 50%; animation: al-spin .8s linear infinite; }
.al-robot[data-s="ok"] .al-box { background: var(--ok); border-color: var(--ok); }
.al-robot[data-s="ok"] .al-box svg { stroke-dashoffset: 0; }
.al-rt { flex: 1; }
.al-shield { width: 22px; height: 22px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linejoin: round; }
@keyframes al-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .al-robot[data-s="busy"] .al-box { animation-duration: 2.4s; } }
.al-2 { text-align: center; font: 700 22px ui-monospace, monospace; letter-spacing: .2em; }