:root{
  --paper:#EEF0F2; --panel:#FFFFFF; --ink:#14181D; --ink-2:#4A545E; --ink-3:#7C8791;
  --line:#CBD1D6; --line-soft:#E1E5E8; --zebra:#F4F5F7;
  --oxide:#B23C22; --oxide-soft:#FBEDE9;
  --forest:#1C6B57; --forest-soft:#E8F2EF;
  --hazard:#E0A012; --hazard-ink:#221A05; --hazard-soft:#FBF1DC;
  --steel:#5B6672;
  --violet:#6B4FBF; --violet-soft:#EFEAFB;
  --azure:#1D6FB8; --azure-soft:#E8F1FB;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111519; --panel:#181D22; --ink:#E8ECEF; --ink-2:#A3AEB8; --ink-3:#77828C;
    --line:#2C343B; --line-soft:#232A30; --zebra:#1E252B;
    --oxide:#E8664A; --oxide-soft:#2A1A16;
    --forest:#4FBF9F; --forest-soft:#12241F;
    --hazard:#F0B738; --hazard-ink:#1A1405; --hazard-soft:#2A2107;
    --steel:#8C98A4;
    --violet:#A78BFA; --violet-soft:#241C36;
    --azure:#5AA9E6; --azure-soft:#0F2333;
  }
}
/* اختيار المظهر يدوياً من "إعدادات النظام" — يتجاوز إعداد الجهاز التلقائي أعلاه.
   الأولوية بالتحديد (specificity) تكفي وحدها لضمان الكسب، بلا حاجة لـ!important */
:root[data-theme="light"]{
  --paper:#EEF0F2; --panel:#FFFFFF; --ink:#14181D; --ink-2:#4A545E; --ink-3:#7C8791;
  --line:#CBD1D6; --line-soft:#E1E5E8; --zebra:#F4F5F7;
  --oxide:#B23C22; --oxide-soft:#FBEDE9;
  --forest:#1C6B57; --forest-soft:#E8F2EF;
  --hazard:#E0A012; --hazard-ink:#221A05; --hazard-soft:#FBF1DC;
  --steel:#5B6672;
  --violet:#6B4FBF; --violet-soft:#EFEAFB;
  --azure:#1D6FB8; --azure-soft:#E8F1FB;
}
:root[data-theme="dark"]{
  --paper:#111519; --panel:#181D22; --ink:#E8ECEF; --ink-2:#A3AEB8; --ink-3:#77828C;
  --line:#2C343B; --line-soft:#232A30; --zebra:#1E252B;
  --oxide:#E8664A; --oxide-soft:#2A1A16;
  --forest:#4FBF9F; --forest-soft:#12241F;
  --hazard:#F0B738; --hazard-ink:#1A1405; --hazard-soft:#2A2107;
  --steel:#8C98A4;
  --violet:#A78BFA; --violet-soft:#241C36;
  --azure:#5AA9E6; --azure-soft:#0F2333;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;unicode-bidi:isolate}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
h2,h3{letter-spacing:-.02em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- الهيكل ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 14px 90px}
.topbar{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line)}
.bottom-actions-sticky{position:sticky;bottom:0;z-index:30;background:var(--panel);box-shadow:0 -2px 8px rgba(0,0,0,.06)}
.row-wrap{display:flex;align-items:stretch;width:100%}
.row-wrap.has-check{gap:0}
.row-wrap .row-check{width:auto;flex:none;align-self:center;margin:0 10px 0 0;accent-color:var(--oxide)}
.row-wrap .row{flex:1;min-width:0;width:auto}
.bulk-del-bar{position:sticky;top:52px;z-index:35;background:var(--oxide-soft);border:1px solid var(--oxide);border-radius:4px;
  padding:8px 12px;margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--oxide)}
.bulk-del-bar[hidden]{display:none}
.select-all-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);cursor:pointer;user-select:none}
.bulk-del-bar form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-brand{max-width:1180px;margin:0 auto;padding:8px 14px 5px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;border-bottom:1px solid var(--line-soft)}
.topbar-logo{width:34px;height:34px;flex:none;border-radius:3px;object-fit:contain;background:var(--paper);border:1px solid var(--line-soft);margin-inline-start:auto}
.topbar-in{max-width:1180px;margin:0 auto;padding:7px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--paper)}
.brand{min-width:0;flex:1 1 auto}
.mark{width:34px;height:34px;flex:none;border-radius:3px;background:var(--ink);margin-inline-start:auto;
  display:grid;place-items:center;color:var(--paper);font-weight:700;font-size:15px}
.brand h1{margin:0;font-size:13.5px;font-weight:600;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;line-height:1.3}
.brand span{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);line-height:1.3}
/* ساعة رقمية صغيرة بالشريط العلوي — لمسة احترافية، تُخفى بالشاشات الضيقة كي لا تزاحم الاسم */
.live-clock{flex:none;font-size:12.5px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
  direction:ltr;background:var(--line-soft);border-radius:4px;padding:5px 9px;margin-inline-end:8px;letter-spacing:.02em}
@media(max-width:640px){.live-clock{display:none}}

.top-actions{margin-inline-start:auto;display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.topbar-in>.top-actions:only-child{margin-inline-start:0}
.top-actions .btn{padding:6px 9px;font-size:12px;gap:4px}
.top-actions .live{font-size:11px}
.btn-logout{margin-inline-start:auto;border-color:var(--oxide);color:var(--oxide);font-weight:600}
.archive-filter-btn.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav-break{flex-basis:100%;width:0;height:0;margin:0;padding:0}
.nav-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
/* شريط تنقّل بمظهر "ريبون" احترافي — أزرار مرتفعة قليلاً بحدود ناعمة، مع فاصل بين مجموعتَي الأدوات */
.nav-row .btn.ghost{background:var(--panel);border-color:var(--line-soft);box-shadow:0 1px 2px rgba(20,24,29,.05);
  transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease}
.nav-row .btn.ghost:hover{background:var(--panel);border-color:var(--steel);box-shadow:0 3px 8px rgba(20,24,29,.1);transform:translateY(-1px)}
.nav-sep{flex:none;align-self:stretch;width:1px;min-height:22px;background:var(--line);margin:0 3px}
@media(max-width:899px){.nav-sep{display:none}}
/* سطر رفيع منفصل لِـ"رجوع" و"الشاشة الرئيسية" أسفل الشريط الرئيسي — لا يشارك في نفس صفّ الأزرار
   كي لا يضيّق مساحة القائمة الرئيسية على الشاشات الضيقة (كان يسبب عرض كل زر بسطر مستقل) */
.topbar-backrow{max-width:1180px;margin:0 auto;padding:2px 14px 8px;display:flex;align-items:center;gap:8px;
  border-top:1px dashed var(--line-soft)}
.topbar-backrow .btn{color:var(--ink-3);background:transparent;border-color:transparent}
.topbar-backrow .btn:hover{background:var(--line-soft);color:var(--ink)}
.topbar-backrow .btn.btn-logout{color:var(--oxide);border-color:var(--oxide)}
.topbar-backrow .btn.btn-logout:hover{background:var(--oxide-soft);color:var(--oxide)}
/* نسخة "مدمجة" من صفّ رجوع/الشاشة الرئيسية — تُستخدم بالشاشات ذات الشريط البسيط (تعديل سند/فاتورة)
   حيث تشارك نفس صفّ الشريط مع زر "خروج" بدل أن تكون بصفّ مستقل أسفله: خروج يبتعد تلقائياً للطرف
   المقابل بفضل margin-inline-start:auto على top-actions، فتبقى كل الأزرار بسطر واحد بلا تكديس */
.topbar-backrow.inline{max-width:none;margin:0;padding:0;border-top:none;flex:none}
/* عنصر إضافي (مثل زر "خروج") بنفس صفّ رجوع/الشاشة الرئيسية، لكن بالطرف المقابل تماماً */
.topbar-backrow-trailing{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.live{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
#live-status{gap:6px;order:-1}
.dot{width:6px;height:6px;border-radius:50%;background:var(--forest)}
.viewer-inline{color:var(--hazard);font-weight:600}
.viewer-role{color:var(--ink-3);font-weight:400}
.sp{margin-inline-start:auto}
.mini{font-size:12.5px;color:var(--ink-3);white-space:nowrap}

/* ---------- عناصر التحكم ---------- */
.dd{position:relative;display:inline-block}
.dd > summary{list-style:none;cursor:pointer}
.dd > summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;inset-inline-end:0;top:calc(100% + 4px);background:var(--panel);
  border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 16px rgba(20,24,29,.14);
  min-width:170px;z-index:50;overflow:hidden}
.dd-menu a{display:block;padding:9px 13px;font-size:13px;color:var(--ink)}
.dd-menu a:hover{background:var(--line-soft)}
.dd-sub{border-top:1px solid var(--line-soft)}
.dd-sub > summary{display:block;padding:9px 13px;font-size:13px;color:var(--ink);list-style:none}
.dd-sub > summary::-webkit-details-marker{display:none}
.dd-sub > summary:hover{background:var(--line-soft)}
.dd-sub .dd-menu{position:static;box-shadow:none;border:none;border-radius:0;background:var(--line-soft);min-width:0}
.dd-sub .dd-menu a{padding-inline-start:26px;font-size:12.5px}
/* نسخة مركزية من القائمة المنسدلة — لصفحات معقّدة قد تسبّب تراكب/تجاوز حدود الشاشة
   للقائمة العادية؛ تظهر بوضوح في منتصف الشاشة فوق طبقة معتمة */
.dd-center-backdrop{position:fixed;inset:0;background:rgba(15,18,22,.45);z-index:300}
.dd-center-menu{position:fixed!important;inset-inline:auto!important;top:50%!important;left:50%!important;
  transform:translate(-50%,-50%);z-index:301;min-width:230px;border-radius:8px;
  box-shadow:0 14px 44px rgba(0,0,0,.4)}
.dd-center-menu a{padding:14px 16px;font-size:15px;text-align:center}
.dd-center-menu .dd-sub > summary{padding:14px 16px;font-size:15px;text-align:center}
@media print{.dd{display:none!important}}
[id^="quote-"],[id^="entry-"]{scroll-margin-top:130px}
.hl-target{animation:hl-flash 2.2s ease-out}
@keyframes hl-flash{0%{background:var(--hazard-ink,#FBF6EA);background:rgba(224,160,18,.28)}100%{background:transparent}}

.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);
  padding:8px 13px;border-radius:3px;font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--steel)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.row:focus-visible,.crow:focus-visible{
  outline:2px solid var(--hazard);outline-offset:2px}
.btn.primary{background:var(--hazard);border-color:var(--hazard);color:var(--hazard-ink);font-weight:600}
.btn.pay-cta{background:var(--forest);border-color:var(--forest);color:#fff;font-weight:700;
  padding:9px 18px;font-size:14px;box-shadow:0 2px 8px rgba(28,107,87,.28)}
.btn.pay-cta:hover{filter:brightness(1.08)}
.btn.quote-cta{background:var(--panel);border:1.5px solid var(--ink);color:var(--ink);font-weight:700;
  padding:9px 18px;font-size:14px}
.btn.quote-cta:hover{background:var(--line-soft)}
.cta-stack{display:inline-flex;flex-direction:column;gap:8px;margin-inline-start:auto}
.cta-stack .btn{width:100%;text-align:center}
.bank-qr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bank-qr-text{flex:1;min-width:160px}
.qr-pay-box{flex:none;text-align:center;width:76px}
.qr-pay-img{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;padding:4px}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--line-soft)}
.btn.danger{color:var(--oxide)}
.btn.alert{background:var(--oxide);border-color:var(--oxide);color:#fff;font-weight:600;animation:hsb-pulse 2s ease-in-out infinite}
.btn.alert:hover{filter:brightness(1.08)}
.bell-count{display:inline-block;background:#fff;color:var(--oxide);font-size:10.5px;font-weight:800;
  min-width:16px;height:16px;line-height:16px;border-radius:999px;padding:0 3px;margin-inline-start:4px;
  vertical-align:middle}
@keyframes hsb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(178,60,34,.45)}50%{box-shadow:0 0 0 5px rgba(178,60,34,0)}}
.alert-banner{background:var(--oxide-soft);border:1px solid var(--oxide);color:var(--oxide);
  padding:10px 14px;border-radius:4px;font-size:13.5px;font-weight:600;margin-bottom:14px}

/* ---------- جرس الإشعارات (مركز إشعارات بأسلوب Moodle) — للإدارة والزبون معاً ---------- */
.notif-bell-btn{position:relative}
.bell-badge{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--oxide);color:#fff;
  font-size:10px;font-weight:800;min-width:16px;height:16px;line-height:16px;border-radius:999px;
  padding:0 3px;text-align:center;box-shadow:0 0 0 2px var(--panel)}
/* اهتزاز + نبض بصري خفيف طالما فيه إشعارات غير مقروءة — يتوقف فور فتح لوحة الإشعارات */
.notif-bell:not([open]) .notif-bell-btn.bell-ring{animation:bell-swing 2.2s ease-in-out infinite}
@keyframes bell-swing{
  0%,92%,100%{transform:rotate(0)}
  94%{transform:rotate(13deg)}
  95.5%{transform:rotate(-10deg)}
  97%{transform:rotate(6deg)}
  98.5%{transform:rotate(0)}
}
.notif-bell:not([open]) .notif-bell-btn.bell-ring .bell-badge{animation:bell-badge-pulse 2s ease-in-out infinite}
@keyframes bell-badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(178,60,34,.5),0 0 0 2px var(--panel)}
  50%{box-shadow:0 0 0 4px rgba(178,60,34,0),0 0 0 2px var(--panel)}
}

/* ---------- شريط "☰ الأوامر" أسفل شريط الأدوات العلوي: يجمع الروابط الثانوية بقائمة تنسدل
   مكانها (inline)، بدل أن تشغل مساحة دائمة بالشريط الثابت ---------- */
/* شريط الأوامر الجديد بنسخة الهاتف فقط — اللابتوب/الشاشة الواسعة يبقى بالتصميم القديم كاملاً
   (نفس نقطة الفصل المستخدمة أصلاً بباقي الشريط: 899px/900px).
   ملاحظة مهمة: يوجد قاعدة قديمة أسفل هذا الملف ‎.nav-row{display:contents}‎ داخل
   @media(min-width:900px) تنطبق على أي عنصر بكلاس nav-row (الاثنين معاً)، وبما إنها بنفس
   درجة التخصيص (specificity) لقواعد كلاس مفرد هون، وتأتي لاحقاً بالملف، كانت "تكسب" وتُظهر
   الشريطين مع بعض بعرض اللابتوب. الحل: استخدام مُحدِّدات مركّبة (.nav-row.nav-x) لرفع درجة
   التخصيص فتضمن الفوز دائماً بصرف النظر عن ترتيبها بالملف. */
.nav-row.nav-desktop-only{display:none!important}
@media(min-width:900px){
  .nav-row.nav-mobile-only{display:none!important}
  .cmd-row.nav-mobile-only{display:none!important}
  .nav-row.nav-desktop-only{display:flex!important}
}
.cmd-row{width:100%}
.cmd-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,#F0B23A,var(--hazard));color:#3A2A05;border:none;border-radius:9px;
  padding:9px 14px;font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 3px 10px rgba(224,160,18,.3);transition:transform .15s,box-shadow .15s}
.cmd-btn:hover{box-shadow:0 5px 13px rgba(224,160,18,.38);transform:translateY(-1px)}
.cmd-btn .count{background:rgba(0,0,0,.16);color:#3A2A05;min-width:20px;height:20px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800}
.cmd-btn .chev{margin-inline-start:2px;transition:transform .25s ease;font-size:11px}
.cmd-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.cmd-panel{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s cubic-bezier(.2,.8,.3,1),opacity .22s ease,margin-top .3s cubic-bezier(.2,.8,.3,1)}
.cmd-panel.open{max-height:420px;opacity:1;margin-top:8px}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:640px){.cmd-grid{grid-template-columns:repeat(3,1fr)}}
.cmd-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--zebra);border:1px solid var(--line-soft);border-radius:11px;padding:16px 8px;
  text-decoration:none;color:var(--ink);font-size:12.5px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(8px);transition:background .15s,box-shadow .15s}
.cmd-panel.open .cmd-item{animation:cmd-item-in .32s ease forwards}
.cmd-item:nth-child(1){animation-delay:.03s}
.cmd-item:nth-child(2){animation-delay:.06s}
.cmd-item:nth-child(3){animation-delay:.09s}
.cmd-item:nth-child(4){animation-delay:.12s}
.cmd-item:nth-child(5){animation-delay:.15s}
.cmd-item:nth-child(6){animation-delay:.18s}
@keyframes cmd-item-in{to{opacity:1;transform:translateY(0)}}
.cmd-item:hover{background:var(--line-soft);box-shadow:0 3px 9px rgba(20,24,29,.08)}
.cmd-item .ic{font-size:26px;line-height:1}

.notif-panel{width:min(94vw,380px);max-width:380px;padding:0;text-align:start}
.notif-panel-head{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.notif-panel-head h3{margin:0;font-size:14.5px;font-weight:700;flex:1}
.notif-panel-actions{display:flex;align-items:center;gap:2px}
.notif-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:5px;font-size:14px;color:var(--ink-2)}
.notif-icon-btn:hover{background:var(--line-soft)}
.notif-icon-btn:disabled{opacity:.35;cursor:default}
.notif-icon-btn:disabled:hover{background:none}
.notif-list{max-height:56vh;overflow-y:auto}
.notif-empty{padding:26px 14px;text-align:center;font-size:13px;color:var(--ink-3)}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--line-soft)}
.notif-item.unseen{background:var(--forest-soft)}
.notif-item.unseen:hover{background:var(--forest-soft);filter:brightness(0.97)}
.notif-ic{flex:none;font-size:17px;line-height:1.3;margin-top:1px}
.notif-body{flex:1;min-width:0}
.notif-msg{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;overflow-wrap:break-word}
.notif-item.unseen .notif-msg{font-weight:800}
.notif-time{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.notif-view{display:block;font-size:12px;color:var(--azure);font-weight:600;margin-top:4px}
.notif-panel-foot{padding:10px 14px;text-align:center;border-top:1px solid var(--line-soft)}
.notif-seeall{font-size:13px;font-weight:600;color:var(--azure)}
.notif-list-full{max-height:none}
.notif-list-full .notif-item{padding:12px 0}
.status-pending{color:var(--oxide);font-weight:600}
.row .mid em.status-approved,.crow em.status-approved{color:var(--forest)!important;font-weight:700}
.row .mid em.status-rejected,.crow em.status-rejected{color:var(--oxide)!important;font-weight:700}
.pending-frame{background:rgba(224,160,18,.07);border:1.5px dashed var(--hazard)!important;position:relative}
.pending-frame .panel-head h2{color:var(--hazard)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.xs{padding:5px 8px;font-size:11.5px;border-radius:4px}
.entry-type-row{display:flex;gap:5px;padding:0 14px 12px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-type-row .btn{flex:none;white-space:nowrap}
.btn.xs.receipt-cta{background:var(--forest);border-color:var(--forest);color:#fff;font-weight:700}
.btn.xs.receipt-cta:hover{filter:brightness(1.08)}
.btn.xs.invoice-cta{background:var(--hazard);border-color:var(--hazard);color:var(--hazard-ink);font-weight:700}
.btn.xs.invoice-cta:hover{filter:brightness(1.06)}

.field{display:block;margin-bottom:13px}
.field label,.field > .lbl{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=password],
input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:3px;
  background:var(--panel);font-size:14.5px}
input[dir=ltr]{text-align:start}
/* إزالة أسهم الترقيم من كل حقول الأرقام (المبلغ، الدفعة، الخصم، الكمية، السعر...) — تبقى ثابتة بدون أسهم تكبير/تصغير */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
textarea{resize:vertical;min-height:74px;line-height:1.55}
.hint{font-size:12px;color:var(--ink-3);margin-top:5px}
.hint a{text-decoration:underline}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
@media (min-width: 900px) {
  body{background:var(--paper)}
  .wrap{padding-top:22px;padding-bottom:60px}
  .panel{border-radius:8px;box-shadow:0 1px 3px rgba(20,24,29,.06);margin-bottom:16px!important}
  .panel-head{padding:14px 18px}
  .panel-head h2{font-size:15px}
  .row,.crow{transition:background .12s}
  .row:hover,.crow:hover{background:var(--paper)}
  .btn{cursor:pointer}
  .btn:not(.alert):hover{box-shadow:0 1px 4px rgba(20,24,29,.1)}
  .readout{border-radius:8px;box-shadow:0 1px 3px rgba(20,24,29,.06)}
  .topbar-brand,.topbar-in{padding-inline:22px}
  .nav-break{flex-basis:0;width:auto;height:auto}
  .nav-row{display:contents}
  .searchbar input[type=search]{flex:0 1 calc(50% - 3px)}
  .searchbar .rep-filter-select{flex:0 1 calc(50% - 3px)}
  .searchbar-break{flex-basis:100%;width:0;height:0;margin:0;padding:0}
  .searchbar input.range-num-input{flex:0 1 calc(25% - 4px);min-width:110px}
  .sheet{border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
  ::-webkit-scrollbar-thumb:hover{background:var(--steel)}
}
.err{color:var(--oxide);font-size:13.5px;font-weight:500;margin:9px 0;
  background:var(--oxide-soft);padding:9px 12px;border-radius:3px}
.date-warn{margin:6px 0 0;font-size:12.5px;padding:7px 10px}
.ok{color:var(--forest);font-size:13.5px;font-weight:500;margin:9px 0;
  background:var(--forest-soft);padding:9px 12px;border-radius:3px}

/* ---------- شاشة الرصيد ---------- */
.readout{background:var(--panel);border:1px solid var(--line);border-radius:3px;margin:16px 0;overflow:hidden}
.readout-body{padding:20px 18px 16px}
.readout .lbl{font-size:12.5px;color:var(--ink-3);margin:0 0 2px}
.readout .amt{font-size:clamp(34px,10vw,54px);line-height:1.02;font-weight:600;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.readout .amt small{font-size:.42em;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-inline-start:8px}
.readout .state{font-size:13.5px;margin-top:6px;font-weight:500}
.owed .amt,.owed .state{color:var(--oxide)}
.credit .amt,.credit .state{color:var(--forest)}
.settled .amt,.settled .state{color:var(--ink-2)}
.stripe{height:5px;background:repeating-linear-gradient(115deg,var(--hazard) 0 11px,transparent 11px 22px);opacity:.85}
.owed .stripe{background:repeating-linear-gradient(115deg,var(--oxide) 0 11px,transparent 11px 22px)}
.credit .stripe{background:repeating-linear-gradient(115deg,var(--forest) 0 11px,transparent 11px 22px)}
.readout-meta{display:flex;flex-wrap:wrap;border-top:1px solid var(--line-soft)}
.readout-meta div{flex:1 1 33%;padding:10px 18px;border-inline-start:1px solid var(--line-soft);min-width:110px}
.readout-meta div:first-child{border-inline-start:none}
.readout-meta b{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.readout-meta em{font-style:normal;font-size:11.5px;color:var(--ink-3)}

/* ---------- الكشف ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-head h2{margin:0;font-size:14px;font-weight:600}
.searchbar{display:flex;flex-wrap:wrap;gap:4px 5px;padding:11px 10px;border-bottom:1px solid var(--line-soft);align-items:center}
.searchbar input[type=date]{width:auto;flex:0 1 100px;min-width:0;background:var(--hazard-soft);
  border:1px solid var(--hazard);border-radius:4px;padding:5px 3px;font-size:11.5px}
/* حقل تاريخ مزدوج: نص ظاهر (يوم/شهر/سنة، قابل للكتابة) + input[type=date] حقيقي غير مرئي
   واقع فوقه تماماً — الضغط على النص الظاهر يفتح تقويم المتصفح الأصلي لاختيار التاريخ (app.js) */
.searchbar .date-dmy-wrap{position:relative;display:inline-flex;flex:0 1 100px;min-width:0}
.searchbar input.date-dmy{width:100%;background:var(--hazard-soft);
  border:1px solid var(--hazard);border-radius:4px;padding:5px 3px;font-size:11.5px;
  direction:ltr;text-align:center;cursor:pointer}
.date-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
.searchbar input[type=search]{flex:1}
.searchbar .mini{font-size:11px}
.searchbar .btn{padding:6px 9px;font-size:12px}
.searchbar input.range-num-input{width:auto;flex:1 1 0;min-width:0}
.sort-bar{display:flex;align-items:center;gap:6px;flex:1 1 100%;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:8px 12px;margin-top:2px}
.sort-bar .mini{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sort-bar select{flex:1;border:1px solid var(--line);border-radius:3px;padding:6px 8px;font-size:13px;background:var(--panel);color:var(--ink)}
.theme-picker{display:flex;gap:8px;flex-wrap:wrap}
.theme-opt{flex:1 1 140px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink-2);font-size:13.5px;cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.theme-opt:hover{border-color:var(--steel)}
.theme-opt.is-active{border-color:var(--hazard);background:var(--hazard-soft);color:var(--ink);font-weight:700}

.row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 8px;
  border-bottom:1px solid var(--line-soft);width:100%;text-align:start;transition:background .12s}
.row:last-of-type{border-bottom:none}
.row:hover{background:var(--line-soft)}
.bar{align-self:stretch;background:var(--steel);min-height:52px;flex:0 0 9px}
.row.debit .bar{background:var(--oxide)}
.row.credit .bar{background:var(--forest)}
.row .date{padding:13px 0;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;direction:ltr;text-align:start;flex:0 0 58px}
.row .row-chk{flex:0 0 auto;padding:13px 0 13px 6px;display:flex;align-items:center}
.row .row-chk input{width:auto;margin:0}
.row .mid{padding:13px 0;flex:1 1 150px;min-width:150px}
.row .mid b{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:normal;overflow-wrap:break-word;letter-spacing:-.01em;line-height:1.35}
.row .mid em{font-style:normal;font-size:12px;color:var(--ink-3);display:block;white-space:normal;overflow-wrap:break-word;line-height:1.35}
.row .right{padding:13px 14px;text-align:end;flex:0 0 auto;margin-inline-start:auto}
.row .val{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;direction:ltr;display:block}
.row .note-val{color:var(--ink-3);font-size:12.5px;font-weight:400}
.row .run{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;direction:ltr;display:block;text-align:end;margin-top:2px}
/* صفوف لم يفتحها المدير بعد (عروض/دفعات/ملاحظات) — بارزة بخط عريض حتى تُفتح فتعود لوضعها الطبيعي */
.row.unseen .mid b{font-weight:800}
.row.unseen .mid em{font-weight:700;color:var(--ink)}
.row.unseen .date{font-weight:700;color:var(--ink)}

/* كشف حساب على شكل مدين/دائن — مدين (فواتير) يمينًا، دائن (مقبوضات) يسارًا بشكل فعلي بصرف النظر عن اتجاه الصفحة */
.ledger{direction:ltr;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:170px}
.ledger .credit-col{color:var(--forest);font-weight:600;font-variant-numeric:tabular-nums;text-align:start;white-space:nowrap}
.ledger .debit-col{color:var(--oxide);font-weight:600;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}

.crow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);width:100%}
.crow:last-of-type{border-bottom:none}
.crow:hover{background:var(--line-soft)}
.crow b{display:block;font-size:14.5px;font-weight:500}
.crow em{font-style:normal;font-size:12px;color:var(--ink-3);direction:ltr;display:block;text-align:start}
.crow em.seen{font-size:10.5px;color:var(--ink-3);opacity:.85;direction:rtl;text-align:start}
.crow.unseen b{font-weight:800}
.crow.unseen em{font-weight:700;color:var(--ink)}
.bal{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.bal .sub{display:block;font-size:11px;font-weight:400;color:var(--ink-3)}
.bal.pos{color:var(--oxide)} .bal.neg{color:var(--forest)} .bal.zero{color:var(--ink-3)}

.empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
.empty b{display:block;color:var(--ink);font-size:15px;font-weight:500;margin-bottom:5px}

/* ---------- النوافذ ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,13,16,.55);z-index:60;
  display:flex;align-items:flex-end;justify-content:center}
.scrim[hidden]{display:none}
@media(min-width:700px){.scrim{align-items:center;padding:24px}}
.sheet{background:var(--panel);width:100%;max-width:620px;max-height:92vh;overflow:auto;
  border-radius:6px 6px 0 0;border:1px solid var(--line);animation:up .18s ease-out}
@media(min-width:700px){.sheet{border-radius:4px}}
@keyframes up{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line-soft);
  padding:13px 16px;display:flex;align-items:center;gap:10px;z-index:2}
.sheet-head h3{margin:0;font-size:15px;font-weight:600}
.sheet-body{padding:16px}
.sheet-foot{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line-soft);
  padding:12px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.gate{max-width:400px;margin:0 auto;padding:34px 0}
.gate h2{margin:0 0 12px;font-size:19px;font-weight:600}
.gate p{margin:0 0 18px;color:var(--ink-3);font-size:13.5px}

.dl{margin:0}
.dl div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.dl div:last-child{border-bottom:none}
.dl dt{flex:none;width:104px;color:var(--ink-3);font-size:12.5px;margin:0}
.dl dd{margin:0;flex:1;min-width:0;word-break:break-word}
.shot{width:100%;border:1px solid var(--line);border-radius:3px;display:block;margin-top:12px;background:var(--line-soft)}

/* ---------- ملخص احترافي موحَّد لفاتورة فيها خصم و/أو دفعة مرفقة (entry.php) — نفس التصميم
   بالشاشة وعند الطباعة، لأنه عنصر HTML واحد بلا قالب طباعة منفصل ---------- */
.invoice-summary{border:1px solid var(--line-soft);border-radius:10px;padding:2px 16px;margin:16px 0;background:var(--zebra)}
.is-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:13.5px;border-bottom:1px dashed var(--line-soft)}
.is-row:last-child{border-bottom:none}
.is-row .num{font-variant-numeric:tabular-nums;direction:ltr;white-space:nowrap;font-weight:inherit}
.is-muted{color:var(--ink-3)}
.is-strong{font-weight:700;color:var(--ink);border-bottom:2px solid var(--line-soft)!important}
.is-forest{color:var(--forest);font-weight:600}
.is-forest a{color:inherit;text-decoration:underline;font-weight:400;font-size:12px}
.is-final{font-weight:800;font-size:15.5px;padding:12px 0;border-bottom:none!important;border-top:2px solid var(--line-soft)}
.is-final.is-settled{color:var(--forest)}
.is-final.is-owed{color:var(--oxide)}
@media print{.invoice-summary{background:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

.items{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px;table-layout:fixed}
.items thead th{font-size:11.5px;color:var(--ink-3);font-weight:500;text-align:start;padding:6px 8px;border-bottom:1px solid var(--line)}
.items td{padding:7px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.items td.n{font-variant-numeric:tabular-nums;direction:ltr;text-align:end;white-space:nowrap}
.price-item-row.price-item-excluded td:first-child{text-decoration:line-through;color:var(--ink-3)}
.price-item-row.price-item-excluded{opacity:.6}
.price-item-remove{color:var(--oxide)}
.items tr:last-child td{border-bottom:none}
.items input{padding:6px 8px;font-size:13.5px;width:100%;min-width:0;box-sizing:border-box}
.items .i-del{width:100%;justify-content:center;border-left:1px solid var(--line-soft)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- جدول تفصيل أصناف الحركة بالكشف المفصّل: كمية/سعر بعمودين ثابتَي العرض، بعيدًا عن
   عمود مدين/دائن/الرصيد الرئيسي للحركة حتى لا يلتبس معه بصريًا — بلا أي تلوين (يبقى محايدًا،
   التلوين محصور بأرقام الحركة الرئيسية فقط). ---------- */
.items.stmt-items{table-layout:fixed}
.items.stmt-items col:first-child{width:auto}
.items.stmt-items col:nth-child(2){width:52px}
.items.stmt-items col:nth-child(3){width:76px}
.items.stmt-items td{color:inherit}
.items.stmt-items td:first-child{white-space:normal;word-break:break-word}
.items.stmt-items td.n:last-child{padding-right:38px}

/* جدول أصناف فاتورة البيع/الشراء الجديدة: عمود "الصنف" كان يتقاسم العرض بالتساوي تقريباً مع
   بقية الأعمدة رغم أنه الحقل الأهم (اسم الصنف + قائمة اختيار الصنف المحفوظ تحته)، فيضيق كثيراً
   على الجوال. هنا نترك المتصفح يحسب عرضه من محتواه الفعلي (بدل table-layout:fixed الافتراضي)
   ونُحكم عرض الأعمدة الرقمية الأخرى (كمية/سعر/إجمالي/حذف) لتبقى مضغوطة، فيتوفر له العرض الزائد. */
.items.items-wide-name{table-layout:auto}
.items.items-wide-name td:first-child{min-width:118px}

/* جدول "التقارير اليومية" (الملخص اليومي ونافذة تفصيل الحركات) — أعمدة كثيرة نسبياً على شاشة
   جوال ضيقة، فـtable-layout:fixed الافتراضي أعلاه كان يقسّم العرض بالتساوي بصرف النظر عن
   طول المحتوى (تاريخ 14/09/2026 مثلاً) فيتراكب النص مع العمود المجاور بدل أن يتّسع له. هنا
   نترك المتصفح يحسب عرض كل عمود حسب محتواه الفعلي (مع خط أصغر قليلاً وحشو أقل)، وغلاف
   .scrollx الموجود أصلاً يوفّر تمريراً أفقياً بدل أي تراكب لو ضاقت الشاشة أكثر من اللازم. */
.items.daily-report{table-layout:auto;font-size:12px;white-space:nowrap}
.items.daily-report th,.items.daily-report td{padding:6px 7px}
.items.daily-report td.n{white-space:nowrap}
.items.daily-report td:first-child,.items.daily-report th:first-child{white-space:nowrap}

/* ---------- طباعة صفحة "معاينة وطباعة الأصناف": حقول الكمية/السعر تُطبَع كنص مجرَّد بلا
   حدود صندوق الإدخال ولا أزرار +/-، حتى تبدو كجدول عادي بالنسخة المطبوعة رغم كونها إدخالات
   قابلة للتعديل أثناء المعاينة على الشاشة. ---------- */
@media print{
  .qty-step{display:none}
  .qty-stepper{justify-content:center}
  .items input.i-qty,.items input.i-price{border:none;background:transparent;padding:0;text-align:center;color:inherit;-webkit-appearance:none}
}

/* ---------- شريط "لديك بيانات غير مكتملة" (مسودّة حركة مالية) ---------- */
.draft-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 14px 10px;padding:9px 12px;border:1px solid var(--hazard);border-radius:4px;
  background:color-mix(in srgb, var(--hazard) 12%, transparent);font-size:13px}
.draft-actions{display:flex;gap:6px;flex:none}

/* ---------- صندوق "إرسال تفاصيل الحركة كاملة على أي رقم واتساب" (entry.php) ---------- */
.wa-any-send-box{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel);width:100%}
.wa-any-label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:8px}
.wa-any-row{display:flex;gap:8px;flex-wrap:wrap}
.wa-any-phone{flex:1;min-width:180px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;font-size:13.5px}

/* ---------- أزرار +/- بجانب حقل الكمية بجدول الأصناف: الزائد أعلى والناقص أسفل حقل الكمية
   (تصميم عمودي مندمج compact spinner) — أخفّ ضغطاً على عرض العمود من التصميم الأفقي، ويتّسع
   بارتياح على شاشة الهاتف دون التأثير على عرض بقية أعمدة الجدول (الصنف/سعر/إجمالي). ---------- */
.qty-stepper{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.qty-stepper .i-qty{width:100%;max-width:46px;min-width:0;text-align:center;padding:4px 2px;font-size:13px;font-weight:600}
.qty-step{width:100%;max-width:46px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;line-height:1;border-radius:4px;background:var(--panel-2,var(--paper));border:1px solid var(--line)}
.qty-step.qty-plus{color:var(--forest)}
.qty-step.qty-minus{color:var(--oxide)}
.qty-step:active{filter:brightness(.95)}
@media (max-width:520px){
  .qty-stepper .i-qty{max-width:40px;font-size:12.5px}
  .qty-step{max-width:40px;height:18px;font-size:12px}
}

/* ---------- شريط مسح باركود الصنف — يظهر فوق كل جدول أصناف قابل للتعديل ---------- */
.barcode-scan-row{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.barcode-scan-input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:3px;
  background:var(--panel);font-size:14.5px}
.row-flash td{animation:row-flash-kf .8s ease}
@keyframes row-flash-kf{0%{background:var(--forest-soft)}100%{background:transparent}}

.pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick label{border:1px solid var(--line);border-radius:3px;padding:14px 10px;text-align:center;
  cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-2);display:block}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label:has(input:checked){border-color:var(--ink);background:var(--line-soft);color:var(--ink)}

/* قائمة اختيار عنصر واحد من قائمة طويلة (زبون مثلاً) — صف واحد لكل عنصر بخط مضغوط، قابلة
   للبحث الفوري عبر data-live-search (نفس آلية قوائم البحث الأخرى بالنظام) */
.pick-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:3px;margin-top:2px}
.pick-row{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);cursor:pointer}
.pick-row:last-child{border-bottom:none}
.pick-row:hover{background:var(--paper)}
.pick-row input{flex:0 0 auto;margin:0}
.pick-row span{flex:1;min-width:0}
.pick-row:has(input:checked){background:var(--line-soft);color:var(--ink);font-weight:600}
.pick-group-label{padding:7px 12px;font-size:11.5px;font-weight:700;color:var(--ink-3);background:var(--paper);
  border-bottom:1px solid var(--line-soft)}

/* شرائط تبويب لتقسيم شاشة لعدة أقسام فرعية (مثال: الإعدادات) — روابط عادية (تعمل بلا JS)
   بمظهر أزرار تبويب أفقية قابلة للف عند ضيق الشاشة */
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.tab-btn{flex:1 1 auto;text-align:center;padding:13px 10px;font-size:13px;font-weight:600;color:var(--ink-2);
  text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.tab-btn:hover{color:var(--ink);background:var(--line-soft)}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:520px){.tab-btn{font-size:12px;padding:11px 6px}}

/* شاشة مسح الباركود المرسّاة أعلى الجوال (بدل نافذة منتصف الشاشة) — تُستخدم عند التعبئة من داخل
   فاتورة/عرض سعر كي تبقى الفاتورة وجدول أصنافها ظاهرَين ويمكن التمرير إليهما أسفل شريط الكاميرا
   مباشرة دون إغلاق المسح، فتظهر التعبئة فور كل قراءة (طلب: شاشة الباركود علوية والفاتورة أسفلها). */
@media screen and (max-width:899px){
  #barcode-modal.barcode-dock{align-items:flex-start;background:rgba(10,13,16,.12);pointer-events:none}
  #barcode-modal.barcode-dock .sheet{pointer-events:auto;width:100%;max-width:100%;
    border-radius:0 0 14px 14px;box-shadow:0 8px 22px rgba(10,13,16,.28);animation:none}
  #barcode-modal.barcode-dock #barcode-modal-video{max-height:30vh}
  /* الزر خارج بطاقة الكاميرا (.sheet) عمداً — لكن هذا يعني أنه يرث pointer-events:none من
     الحاوية الأب أعلاه فتصبح ضغطاته لا تصل له إطلاقاً رغم ظهوره بصرياً. أعده تفاعلياً صراحة. */
  #barcode-modal.barcode-dock .barcode-end-btn{pointer-events:auto}
}

.barcode-end-btn{transition:transform .1s ease,background .1s ease}
.barcode-end-btn:active{transform:scale(.94);background:var(--line-soft)}

.tag{display:inline-block;padding:2px 8px;border-radius:2px;font-size:11.5px;font-weight:500;border:1px solid var(--line)}
.tag.debit{color:var(--oxide);border-color:var(--oxide);background:var(--oxide-soft)}
.tag.credit{color:var(--forest);border-color:var(--forest);background:var(--forest-soft)}

.pinbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pinbox code{font-size:22px;font-weight:600;letter-spacing:.18em;font-variant-numeric:tabular-nums;
  direction:ltr;background:var(--line-soft);padding:7px 14px;border-radius:3px}
.linkbox{background:var(--line-soft);border-radius:3px;padding:10px 12px;font-size:12px;
  word-break:break-all;direction:ltr;text-align:start}

.toast{position:fixed;inset-inline:0;bottom:18px;display:flex;justify-content:center;z-index:90;pointer-events:none}
.toast span{background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:3px;font-size:13.5px}
.spin{width:30px;height:30px;margin:0 auto;border-radius:50%;
  border:3px solid var(--line-soft);border-top-color:var(--hazard);
  animation:hsb-spin .8s linear infinite}
@keyframes hsb-spin{to{transform:rotate(360deg)}}

/* اسم الزبون — أوضح وأكبر في رأس الكشف وصفحة القيد */
.cust-name{font-size:17px!important;font-weight:700!important;color:var(--ink)!important;letter-spacing:-.01em}
.readout .lbl.cust-name{
  font-size:14.5px!important;font-weight:700!important;color:var(--ink)!important;
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,#FBF6EA 0%,var(--panel) 65%);
  border:1px solid var(--hazard);border-radius:999px;
  padding:6px 16px;margin:0 0 10px;
  box-shadow:0 1px 3px rgba(224,160,18,.18)
}
.readout .lbl.cust-name::before{content:"==";font-size:12px;color:var(--hazard);font-weight:700}
.readout .lbl.cust-name::after{content:"==";font-size:12px;color:var(--hazard);font-weight:700}
dd.cust-name{font-size:15px;font-weight:700}

/* تذييل الكشف */
.site-foot{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:center;
  margin-top:22px;padding:14px 0;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-3);text-align:center}
.site-foot a{text-decoration:underline}

/* وقت آخر تحديث أسفل كلمة "محدَّث" (تصميم عمودي خاص بمؤشر حالة الزبون) */
#live-status .line1{display:flex;align-items:center;gap:5px}
#live-status .upd-time{color:var(--ink-3);font-size:10.5px;font-variant-numeric:tabular-nums;direction:ltr}

/* تفاصيل إضافية تظهر فقط عند الطباعة المفصّلة (الأصناف وتفاصيل الشيك لكل حركة) */
.print-detail{display:none}
@media print{
  body.print-detailed .print-detail{display:block}
}
.print-ledger-table{display:none}
@media print{
  .print-ledger-table{
    display:table;width:100%;border-collapse:collapse;font-size:11.5px;direction:rtl;margin-top:6px;
  }
  .print-ledger-table th,.print-ledger-table td{border:1px solid #ccc;padding:5px 7px;text-align:center}
  .print-ledger-table thead th{background:#f2f2f2;font-weight:700}
  /* عمود صندوق التحديد (.has-check) غير مطبوع أصلاً (noprint) لكنه يبقى موجوداً بالـDOM، فيُزاح
     ترقيم الأعمدة اللاحقة خانة واحدة — راعِ ذلك هنا كما في نسخة الشاشة أعلاه */
  .print-ledger-table:not(.has-check) td:nth-child(2){text-align:start}
  .print-ledger-table:not(.has-check) td:nth-child(3){color:#B23C22;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table:not(.has-check) td:nth-child(4){color:#1C6B57;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table:not(.has-check) td:nth-child(5){font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table.has-check td:nth-child(3){text-align:start}
  .print-ledger-table.has-check td:nth-child(4){color:#B23C22;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table.has-check td:nth-child(5){color:#1C6B57;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table.has-check td:nth-child(6){font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table tbody tr.alt{background:#f7f7f7}
  .print-detail-rows{display:none}
  body.print-detailed .print-ledger-table{display:none}
  body.print-detailed .print-detail-rows{display:block}
}

/* تمييز حركات كشف الحساب بخلفية رمادية فاتحة جداً بالتناوب — حركة بعد حركة لتسهيل تتبع الكشف بصرياً */
.print-detail-rows .row-wrap.alt,.print-detail-rows a.row.alt{background:var(--zebra)}
.print-detail-rows a.row.alt:hover{background:var(--line-soft)}
.print-detail-rows .row-wrap.alt .row:hover{background:var(--line-soft)}

@media screen{
  /* كشف الحساب على الشاشة — حاسوب وجوال معاً بحسب طلب المستخدم صراحة: نفس تنسيق كشف الطباعة PDF
     تماماً (تاريخ، بيان، مدين، دائن، رصيد) بعناوين أعمدة واضحة بدل بطاقات تكرّر كلمة "الرصيد" ونحوها
     أمام كل رقم رغم وجودها أصلاً بعنوان العمود — يشمل الإدارة وحساب الزبون معاً. */
  .print-detail-rows{display:none}
  .print-ledger-table{display:table;width:100%;border-collapse:collapse;font-size:13px}
  .print-ledger-table th,.print-ledger-table td{border:1px solid var(--line-soft);padding:9px 10px;text-align:center}
  .print-ledger-table thead th{background:var(--paper);font-weight:700;color:var(--ink-2)}
  /* عمود صندوق التحديد (تحديد متعدد للحذف بالإدارة فقط) اختياري وأول عمود لو وُجد — لذا تُزاح
     أعمدة التاريخ/البيان/مدين/دائن/الرصيد خانة واحدة في هذه الحالة (.has-check) */
  .print-ledger-table:not(.has-check) td:nth-child(2){text-align:start}
  .print-ledger-table:not(.has-check) td:nth-child(3){color:var(--oxide);font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table:not(.has-check) td:nth-child(4){color:var(--forest);font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table:not(.has-check) td:nth-child(5){font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table.has-check th:first-child,.print-ledger-table.has-check td:first-child{width:30px;padding:6px 2px}
  .print-ledger-table.has-check td:nth-child(3){text-align:start}
  .print-ledger-table.has-check td:nth-child(4){color:var(--oxide);font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table.has-check td:nth-child(5){color:var(--forest);font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table.has-check td:nth-child(6){font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
  .print-ledger-table .row-check{width:auto;accent-color:var(--oxide)}
  .print-ledger-table tbody tr.alt{background:var(--zebra)}
  .print-ledger-table tbody tr:hover{background:var(--line-soft)}
  .print-ledger-table tbody tr[data-row-href]{cursor:pointer}
}

@media screen and (max-width:899px){
  /* نفس الجدول على الجوال، بخط وحشو أضغط ليلائم الشاشة الضيقة (البيان يُطوى على أكثر من سطر
     بدل قصّه)، وداخل غلاف .scrollx (بالـHTML) كشبكة أمان لو ضاق العرض عن الأعمدة الخمسة معاً */
  .print-ledger-table{font-size:11.5px}
  .print-ledger-table th,.print-ledger-table td{padding:7px 5px}
}

.print-license{display:none}
@media print{
  .print-license{display:block;text-align:center;font-size:11px;color:#555;margin-top:16px;padding-top:8px;border-top:1px solid #ccc}
}

/* كشف أرصدة الزبائن — تصميم احترافي بجدول محاسبي حقيقي */
.balances-summary{border:none!important;background:transparent!important}
.statement-title{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:3px solid var(--hazard)}
.statement-title img{width:56px;height:56px;object-fit:contain;border-radius:6px;flex:none;margin-inline-start:auto}
.statement-title h2{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--ink);line-height:1.4}
.statement-title p{margin:0 0 8px;font-size:12.5px;color:var(--ink-3);line-height:1.7}
.statement-title p.printed-by{margin-bottom:0}
.balances-table{width:100%;border-collapse:collapse;font-size:13px}
.balances-table thead th{background:var(--ink);color:#fff;font-weight:700;padding:10px 8px;text-align:center;font-size:12px}
.balances-table td{padding:9px 8px;border-bottom:1px solid var(--line-soft);text-align:center}
.balances-table td:nth-child(2){text-align:start;font-weight:600}
.balances-table tbody tr:nth-child(even){background:var(--paper)}
.balances-table td.amt{font-variant-numeric:tabular-nums;direction:ltr;font-weight:600;white-space:nowrap}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700}
.pill-debit{background:var(--oxide-soft);color:var(--oxide)}
.pill-credit{background:var(--forest-soft);color:var(--forest)}
.pill-zero{background:var(--line-soft);color:var(--ink-3)}
.balances-table tfoot td{border-top:2px solid var(--ink);border-bottom:none;font-weight:700;padding:10px 8px;text-align:end}
.balances-table tfoot td:first-child{text-align:start}
.balances-table tfoot tr.net td{border-top:1px solid var(--line);font-size:14.5px;color:var(--ink)}
@media print{
  .balances-table thead th{background:#2a2f36!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .balances-table tbody tr:nth-child(even){background:#f7f7f7!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* صفحة طباعة الإدارة (admin.php?p=print/print_all) مختلفة: "طباعة الأرصدة" تعرض سطراً
   مختصراً لكل زبون فقط (الاسم والرصيد وتاريخ آخر حركة)، و"طباعة مفصّلة" تستبدلها بكشف
   كامل بكل الحركات — كلاهما يظهران معاً على الشاشة للمراجعة، وتُختار إحداهما فقط عند الطباعة */
@media print{
  body.print-detailed .balances-summary{display:none}
  .full-detail-block{display:none}
  body.print-detailed .full-detail-block{display:block}
}

/* ---------- تأثير ضغط سينمائي (ripple) على كل الأزرار ---------- */
.btn{position:relative;overflow:hidden}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);
  animation:btn-ripple .55s ease-out;background:currentColor;opacity:.22;pointer-events:none}
@keyframes btn-ripple{to{transform:scale(2.6);opacity:0}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- تنسيق أوسع للشاشات الكبيرة: عرض أضيق يشبه صفحة مستند، مع لمسة أكثر عناية ---------- */
@media(min-width:860px){
  .wrap{max-width:760px;padding-top:26px}
  .topbar-in{max-width:760px}
  .panel,.readout{border-radius:8px;box-shadow:0 1px 2px rgba(20,24,29,.04),0 8px 24px -16px rgba(20,24,29,.18)}
  .readout{margin:22px 0 26px}
  .readout .amt{font-size:clamp(34px,5vw,50px)}
  .panel + .panel{margin-top:18px}
  .gate .panel{border-radius:10px}
  .btn{border-radius:5px}
  .sheet{border-radius:10px}
}
@media(min-width:860px) and (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) body{background:linear-gradient(180deg,#F4F5F7 0%,var(--paper) 320px)}
}
@media(min-width:860px){
  :root[data-theme="light"] body{background:linear-gradient(180deg,#F4F5F7 0%,var(--paper) 320px)}
}

@media print{
  .topbar,.sheet-foot,.noprint,.btn,.searchbar,.scrim{display:none!important}
  body{background:#fff;color:#000}
  .panel,.readout{border-color:#999}
  .wrap{padding:0}
  .ledger{min-width:0}
}
.print-letterhead{display:none}
@media print{
  .print-letterhead{
    display:flex;align-items:center;gap:16px;
    padding:0 0 16px;margin-bottom:18px;border-bottom:3px solid #E0A012;
  }
  .print-letterhead img{width:64px;height:64px;object-fit:contain;border-radius:6px;flex:none}
  .print-letterhead-text{flex:1;min-width:0}
  .print-letterhead-text h1{margin:0 0 8px;font-size:19px;font-weight:700;color:#14181D}
  .print-letterhead-text p{margin:0 0 6px;font-size:12px;color:#555;line-height:1.6}
  .print-letterhead-meta{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    font-size:10.5px;color:#777;direction:ltr;white-space:nowrap}
}