/* بوابة العميل AlFaris — عربية RTL · نظام التصميم (2026-09-23، طلب المالك: «اضف له بعض الالوان»)
   الهوية ثابتة: كحلي #0B1D3A وذهبي #C6A45C للإطار والشعار والأزرار الأساسية والتنقّل النشط.
   فوقها لوحة إبراز من ستة ألوان باستيل (نعناعي · خزامي · خوخي · بحري · وردي · رمادي أزرق)،
   لكل لون ثلاثة متغيرات: --c-NAME-bg تدرّج خلفية فاتح، --c-NAME-mid درجة وسطى للأعمدة والنقاط
   الثانوية، --c-NAME-fg درجة قوية للأيقونة والحلقة والرقم (تباين 4.5:1 فأكثر على أغمق طرف الخلفية).
   الأصناف tone-mint و tone-lavender … تضع --tone-bg و --tone-mid و --tone-fg فيقرؤها أي مكوّن.
   المكوّنات المشتركة (Pages/Shared): _PageHeader · _Kpi · _BarChart · _Donut — نماذجها في PortalUi.cs.
   الأصناف القديمة باقية بأسمائها: card field row toolbar btn table-wrap badge alert stat-row mono muted.
   تنبيه: لا تكتب في تعليق CSS تسلسل نجمة ثم مائلة (مثل اسم صنف بنجمة تتبعه مائلة) — يغلق التعليق
   مبكرًا فيبتلع أول قاعدة بعده. وقع فعلًا هنا وأسقط كتلة :root كلها. */
:root {
  --navy: #0B1D3A; --navy-2: #122A52; --navy-3: #1B3766; --gold: #C6A45C; --gold-dark: #A8873B; --gold-light: #E7CF97;
  --ink: #1a2333; --ink-2: #3a4659; --muted: #5a6577; --bg: #f3f6fa; --card: #ffffff; --border: #e1e7ef; --border-2: #d3dbe6;
  --green: #1d9d5f; --yellow: #b77f00; --red: #cc3344;
  --nav-w: 236px;
  --radius: 16px; --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .16);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 36px -16px rgba(16, 24, 40, .28);
  --focus: 0 0 0 3px rgba(198, 164, 92, .35);

  /* شريط العنوان: أخضر مزرق فاتح يسارًا ⇐ أزرق مخضر عميق يمينًا حيث يبدأ النص العربي */
  --band: linear-gradient(250deg, #0A4F63 0%, #0B6E78 48%, #13A39F 100%);

  /* ── لوحة الإبراز ── */
  --c-mint-bg: linear-gradient(145deg, #F0FBF6 0%, #D2F0E2 100%);     --c-mint-mid: #93D6B8;     --c-mint-fg: #0E7050;
  --c-lavender-bg: linear-gradient(145deg, #F5F2FE 0%, #DFD6FA 100%); --c-lavender-mid: #BBAAF2; --c-lavender-fg: #5B3CC4;
  --c-peach-bg: linear-gradient(145deg, #FFF7EE 0%, #FFE0C4 100%);    --c-peach-mid: #F6BC8C;    --c-peach-fg: #9A4706;
  --c-sea-bg: linear-gradient(145deg, #EFF6FD 0%, #D0E4F7 100%);      --c-sea-mid: #97C0E8;      --c-sea-fg: #1B64A3;
  --c-rose-bg: linear-gradient(145deg, #FEF3F5 0%, #F9D6DC 100%);     --c-rose-mid: #EFA3B1;     --c-rose-fg: #B02E48;
  --c-slate-bg: linear-gradient(145deg, #F6F8FB 0%, #DFE4EC 100%);    --c-slate-mid: #AEB9C9;    --c-slate-fg: #475569;
}
.tone-mint     { --tone-bg: var(--c-mint-bg);     --tone-mid: var(--c-mint-mid);     --tone-fg: var(--c-mint-fg); }
.tone-lavender { --tone-bg: var(--c-lavender-bg); --tone-mid: var(--c-lavender-mid); --tone-fg: var(--c-lavender-fg); }
.tone-peach    { --tone-bg: var(--c-peach-bg);    --tone-mid: var(--c-peach-mid);    --tone-fg: var(--c-peach-fg); }
.tone-sea      { --tone-bg: var(--c-sea-bg);      --tone-mid: var(--c-sea-mid);      --tone-fg: var(--c-sea-fg); }
.tone-rose     { --tone-bg: var(--c-rose-bg);     --tone-mid: var(--c-rose-mid);     --tone-fg: var(--c-rose-fg); }
.tone-slate    { --tone-bg: var(--c-slate-bg);    --tone-mid: var(--c-slate-mid);    --tone-fg: var(--c-slate-fg); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Segoe UI", Tahoma, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; }
a { color: var(--c-sea-fg); }
a:hover { color: var(--navy); }

/* ── الهيكل ───────────────────────────────────────────────────────────── */
.p-shell { display: flex; min-height: 100vh; align-items: stretch; }
.p-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-content { flex: 1; padding: 22px clamp(14px, 3vw, 30px) 44px; max-width: 1240px; width: 100%; }

/* ── التنقّل الجانبي ──────────────────────────────────────────────────── */
.p-side { width: var(--nav-w); flex: 0 0 var(--nav-w); color: #d9e0ec;
  background: linear-gradient(180deg, #0B1D3A 0%, #0E2446 60%, #112B52 100%);
  display: flex; flex-direction: column; box-shadow: inset -1px 0 0 #ffffff0d; }
.p-brand { display: flex; align-items: center; gap: 10px; color: var(--gold); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; padding: 18px 16px 14px; border-bottom: 1px solid #ffffff12; margin-bottom: 8px; }
.p-brand:hover { color: var(--gold-light); }
.p-logo { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, #E2C47F, #B8934A); color: var(--navy); font-size: 1.15rem; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(198, 164, 92, .7); }
.p-brand-txt { min-width: 0; }
.p-brand small { display: block; color: #9fb0c9; font-weight: 400; font-size: .78rem; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-nav { display: flex; flex-direction: column; padding: 4px 10px 18px; gap: 3px; overflow-y: auto; }
.p-nav a { display: flex; align-items: center; gap: 10px; color: #d9e0ec; text-decoration: none;
  font-size: .94rem; padding: 9px 12px; border-radius: 11px; white-space: nowrap; transition: background .15s, color .15s; }
.p-nav a:hover { background: #ffffff14; color: #fff; }
.p-nav a.is-active { background: linear-gradient(135deg, #E2C47F 0%, #C6A45C 100%); color: var(--navy); font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(198, 164, 92, .8); }
.p-nav a .ico { font-size: 1rem; width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 8px;
  background: #ffffff10; flex: 0 0 auto; }
.p-nav a.is-active .ico { background: #0b1d3a1a; }
.p-nav a .soon { margin-inline-start: auto; font-size: .68rem; background: #ffffff20; color: #cfd9e8;
  border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.p-nav a.is-active .soon { background: #00000018; color: var(--navy); }
.p-nav a:focus-visible, .btn:focus-visible, .band-chip:focus-visible, a.kpi:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── الشريط العلوي ────────────────────────────────────────────────────── */
.p-top { background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px -8px rgba(16, 24, 40, .25);
  display: flex; align-items: center; gap: 14px; padding: 10px clamp(14px, 3vw, 30px); flex-wrap: wrap; }
.p-tenant { font-weight: 700; color: var(--navy); border-inline-start: 3px solid var(--gold); padding-inline-start: 10px; line-height: 1.35; }
.p-tenant small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.p-top form.p-shop { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.p-top form.p-logout { display: flex; align-items: center; gap: 10px; }
.p-user { background: var(--c-sea-bg); border: 1px solid #c9dcf0; border-radius: 999px; padding: 3px 14px;
  font-size: .84rem; color: var(--navy); font-weight: 600; }

/* ── العناوين والبطاقات ───────────────────────────────────────────────── */
h1 { color: var(--navy); font-size: 1.4rem; margin-bottom: 18px; line-height: 1.35; }
.p-content > h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; margin-top: 8px;
  background: linear-gradient(90deg, var(--gold), #13A39F); }
h2 { color: var(--navy); font-size: 1.06rem; margin: 22px 0 12px; }
.p-content > h2, .section-title { display: flex; align-items: center; gap: 8px; }
.p-content > h2::before, .section-title::before { content: ""; width: 4px; height: 1.05em; border-radius: 4px;
  background: linear-gradient(180deg, var(--gold), #13A39F); flex: 0 0 auto; }
h3 { color: var(--navy); font-size: 1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  margin-bottom: 18px; box-shadow: var(--shadow); }
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }
.card.narrow { max-width: 440px; margin-inline: auto; margin-top: 7vh; box-shadow: var(--shadow-lg); border-top: 4px solid var(--gold); }

/* صفحة الدخول (بلا جلسة): خلفية بنفس تدرّج شريط العنوان */
body.p-auth { background: linear-gradient(160deg, #0A4F63 0%, #0B1D3A 55%, #0B1D3A 100%) fixed; min-height: 100vh; }
body.p-auth .card.narrow h1 { color: var(--navy); }

/* ── شريط العنوان المتدرّج (_PageHeader) ─────────────────────────────── */
.page-band { position: relative; overflow: hidden; background: var(--band); color: #fff; border-radius: 20px;
  padding: 22px 26px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 24px; box-shadow: 0 16px 34px -18px rgba(10, 79, 99, .75); }
.page-band::before, .page-band::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%); }
.page-band::before { width: 260px; height: 260px; inset-inline-end: -60px; top: -120px; }
.page-band::after { width: 180px; height: 180px; inset-inline-end: 22%; bottom: -110px; }
.page-band > * { position: relative; z-index: 1; }
.page-band-text { min-width: 0; }
.page-band h1 { color: #fff; margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-band h1::after { display: none; }
.band-ico { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 13px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); font-size: 1.2rem; }
.band-sub { color: #d7efee; font-size: .9rem; margin-top: 4px; }
.band-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.band-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #eaf7f6;
  font-size: .84rem; text-decoration: none; white-space: nowrap; backdrop-filter: blur(2px); }
.band-chip strong { color: #fff; font-weight: 700; unicode-bidi: isolate; }
a.band-chip:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* ── بطاقات المؤشرات (_Kpi) ──────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-bottom: 16px; }
/* بلا صنف tone ⇒ رمادي أزرق؛ القيم الافتراضية داخل var() لا على العنصر كي لا تغلب صنف اللون */
.kpi { background: var(--tone-bg, var(--c-slate-bg)); border: 1px solid rgba(255, 255, 255, .7); outline: 1px solid rgba(16, 24, 40, .05);
  border-radius: var(--radius); padding: 14px 14px 12px; box-shadow: var(--shadow); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; min-width: 0; }
a.kpi { transition: transform .15s, box-shadow .15s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--ink); }
.kpi-head { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kpi-lbl { font-weight: 700; font-size: .86rem; color: var(--ink-2); text-align: start; line-height: 1.3; }
.kpi-ico { order: 2; flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 6px -2px rgba(16, 24, 40, .18); font-size: 1rem; }
.kpi-ring { position: relative; width: 88px; height: 88px; margin: 2px 0 8px; }
.kpi-ring svg { width: 100%; height: 100%; display: block; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 4.4; }
.ring-arc { fill: none; stroke: var(--tone-fg, var(--c-slate-fg)); stroke-width: 4.4; stroke-linecap: round; }
.ring-txt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.02rem;
  color: var(--tone-fg, var(--c-slate-fg)); }
.ring-txt.is-long { font-size: .84rem; letter-spacing: -.02em; }
.kpi-val { font-size: 1.28rem; font-weight: 800; color: var(--tone-fg, var(--c-slate-fg)); line-height: 1.25; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { font-size: .8rem; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.kpi-sub2 { font-size: .76rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* شرائح صغيرة (مفتاح/أرقام ثانوية) */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 20px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .82rem;
  background: var(--tone-bg, #eef1f5); color: var(--tone-fg, var(--ink-2)); border: 1px solid rgba(16, 24, 40, .06); white-space: nowrap; }
.pill strong { color: var(--ink); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.pill-help { background: #fff; color: var(--muted); white-space: normal; }

/* ── الرسوم (_BarChart و _Donut) ─────────────────────────────────────── */
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow); min-width: 0; margin-bottom: 16px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-head .muted { font-size: .8rem; }
.chart-empty { color: var(--muted); padding: 28px 0; text-align: center; font-size: .92rem; }
.bar-chart { width: 100%; height: auto; display: block; overflow: visible; }
.bar-chart .grid { stroke: #e3e8f0; stroke-width: 1; stroke-dasharray: 3 4; }
.bar-chart .axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.bar-chart .val { fill: var(--tone-fg, var(--c-sea-fg)); font-size: 12px; font-weight: 700; font-family: inherit; }
.bar-chart .bar path { fill: var(--tone-mid, var(--c-sea-mid)); transition: fill .15s; }
.bar-chart .bar.is-hl path, .bar-chart .bar:hover path { fill: var(--tone-fg, var(--c-sea-fg)); }
.bar-chart .hit { fill: transparent; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tone-fg, var(--c-slate-fg)); flex: 0 0 auto; }
.dot-soft { background: var(--tone-mid, var(--c-slate-mid)); }

.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; }
.donut { position: relative; width: 168px; height: 168px; flex: 0 0 auto; }
.donut svg { width: 100%; height: 100%; display: block; }
.donut-track { fill: none; stroke: #eef1f6; stroke-width: 5.2; }
.donut-seg { fill: none; stroke: var(--tone-fg); stroke-width: 5.2; transition: stroke-width .15s; }
.donut-seg:hover { stroke-width: 6.2; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; }
.donut-center strong { color: var(--navy); font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.donut-center span { color: var(--muted); font-size: .74rem; }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.donut-legend li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; font-size: .86rem; }
.donut-legend .lg-lbl { font-weight: 600; min-width: 0; }
.donut-legend .lg-lbl small { display: block; font-weight: 400; font-size: .74rem; }
.donut-legend .lg-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.donut-legend .lg-pct { grid-column: 2 / 4; justify-self: start; font-size: .74rem; color: var(--tone-fg); font-weight: 700;
  background: var(--tone-bg); border-radius: 999px; padding: 0 8px; }

/* ── النماذج ──────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .92rem; color: var(--ink-2); }
input:not([type]), input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], input[type=email], input[type=tel],
select, textarea {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .95rem; background: #fff; color: inherit; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #b9c4d4; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--focus); }
input[type=checkbox], input[type=radio] { accent-color: var(--navy); width: 1.05em; height: 1.05em; vertical-align: middle; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 160px; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-sm); }
.toolbar label { margin: 0; }
/* داخل بطاقة: شريط أزرار عادي لا صندوق داخل صندوق */
.card .toolbar { background: none; border: 0; box-shadow: none; padding: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; cursor: pointer;
  padding: 9px 22px; border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; font-weight: 600;
  text-decoration: none; line-height: 1.4; transition: background .15s, box-shadow .15s, transform .1s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, #16335F 0%, #0B1D3A 100%); color: var(--gold-light);
  box-shadow: 0 6px 14px -8px rgba(11, 29, 58, .8); }
.btn-primary:hover { background: linear-gradient(135deg, #1B3B6D 0%, #122A52 100%); color: #fff; }
.btn-gold { background: linear-gradient(135deg, #E2C47F 0%, #C6A45C 100%); color: var(--navy); box-shadow: 0 6px 14px -8px rgba(168, 135, 59, .9); }
.btn-gold:hover { background: linear-gradient(135deg, #E9CF93 0%, #CFAE67 100%); color: var(--navy); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--border-2); }
.btn-ghost:hover { background: #f4f7fb; border-color: var(--navy); color: var(--navy); }
.btn-sm { padding: 4px 12px; font-size: .85rem; border-radius: 8px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── الجداول ──────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: #fff; }
th { background: var(--navy); color: #fff; font-size: .85rem; font-weight: 600; padding: 10px 12px; text-align: right;
  white-space: nowrap; }
thead th { position: sticky; top: 0; z-index: 1; border-bottom: 3px solid var(--gold); }
/* جدول مفتاح/قيمة (th داخل الجسم): رأس سطر فاتح لا شريط كحلي في كل سطر */
tbody th { background: #f2f5f9; color: var(--navy); border-bottom: 1px solid var(--border); width: 1%; }
td { padding: 9px 12px; border-bottom: 1px solid #edf1f6; font-size: .92rem; vertical-align: top; }
tbody tr:nth-child(even) td { background: #f8fafd; }
tbody tr:hover td { background: #eef7f6; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: #fff;
  box-shadow: var(--shadow); margin-bottom: 18px; -webkit-overflow-scrolling: touch; }
.card .table-wrap { box-shadow: none; }
.card > table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: table; }

/* ── الشارات والتنبيهات ───────────────────────────────────────────────── */
.badge { display: inline-block; border-radius: 999px; padding: 2px 11px; font-size: .78rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent; vertical-align: middle; }
.badge-green, .badge-yellow, .badge-red, .badge-gray { display: inline-block; border-radius: 999px; padding: 2px 11px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge-green { background: #e1f6eb; color: #0f6b43; border-color: #c2ead4; }
.badge-yellow { background: #fdf1d3; color: #7d5600; border-color: #f3dca0; }
.badge-red { background: #fde4e8; color: #9d2335; border-color: #f5c1ca; }
.badge-gray { background: #eef1f5; color: var(--ink-2); border-color: #dde3eb; }

.alert, .alert-info, .alert-ok, .alert-error, .alert-warn { border-radius: 12px; padding: 11px 16px; margin-bottom: 16px; font-size: .93rem;
  border: 1px solid transparent; border-inline-start-width: 4px; }
.alert-error { background: #fdecef; color: #8d1f2d; border-color: #f3bcc6; border-inline-start-color: #cc3344; }
.alert-ok { background: #e8f7ef; color: #14603c; border-color: #bfe8d2; border-inline-start-color: #1d9d5f; }
.alert-info { background: #edf4fc; color: #1f3f77; border-color: #c9dcf2; border-inline-start-color: #1B64A3; }
.alert-warn { background: #fdf5e0; color: #6d4c05; border-color: #f0dca6; border-inline-start-color: #d99a06; }

.muted { color: var(--muted); font-size: .88rem; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; direction: ltr; display: inline-block; }
/* ‏.mono يُوضع كثيرًا على <td> مباشرة، و inline-block يُخرج الخلية من تخطيط الجدول
   فتهبط الأعمدة الأخيرة سطرًا ثانيًا حين يلتف نص خلية أخرى. الخلية تبقى خلية. */
td.mono, th.mono { display: table-cell; }

/* ── مؤشرات التقارير (stat-row) — تتلوّن تلقائيًا بلوحة الإبراز في كل الصفحات ── */
/* شبكة لا flex: العنصر الأخير في سطر ناقص لا يتمدّد على عرض السطر كله (auto-fill) */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--tone-bg, var(--c-slate-bg)); border: 1px solid rgba(255, 255, 255, .7); outline: 1px solid rgba(16, 24, 40, .05);
  border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); min-width: 0; position: relative; }
.stat .num { font-size: 1.36rem; font-weight: 800; color: var(--tone-fg, var(--c-slate-fg)); line-height: 1.25; overflow-wrap: anywhere; }
.stat .lbl { color: var(--ink-2); font-size: .84rem; font-weight: 600; }
.stat-row > .stat:nth-child(6n+1) { --tone-bg: var(--c-mint-bg); --tone-fg: var(--c-mint-fg); }
.stat-row > .stat:nth-child(6n+2) { --tone-bg: var(--c-lavender-bg); --tone-fg: var(--c-lavender-fg); }
.stat-row > .stat:nth-child(6n+3) { --tone-bg: var(--c-peach-bg); --tone-fg: var(--c-peach-fg); }
.stat-row > .stat:nth-child(6n+4) { --tone-bg: var(--c-sea-bg); --tone-fg: var(--c-sea-fg); }
.stat-row > .stat:nth-child(6n+5) { --tone-bg: var(--c-rose-bg); --tone-fg: var(--c-rose-fg); }
.stat-row > .stat:nth-child(6n+6) { --tone-bg: var(--c-slate-bg); --tone-fg: var(--c-slate-fg); }

/* ── بطاقات المحلات ───────────────────────────────────────────────────── */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.shop-card { background: var(--card); border: 1px solid var(--border); border-inline-start: 5px solid var(--green);
  border-radius: 14px; padding: 14px 16px; display: block; color: inherit; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s; }
a.shop-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: inherit; }
.shop-card.is-late { border-inline-start-color: var(--yellow); background: linear-gradient(145deg, #fff 60%, #FFF7E6 100%); }
.shop-card.is-broken { border-inline-start-color: var(--red); background: linear-gradient(145deg, #fff 60%, #FEF0F2 100%); }
.shop-card .nm { font-weight: 700; color: var(--navy); }
.shop-card .lag { font-size: 1.25rem; font-weight: 800; margin-top: 4px; color: var(--c-mint-fg); }
.shop-card.is-late .lag { color: #8a5d00; }
.shop-card.is-broken .lag { color: var(--c-rose-fg); }
.shop-card .hint { font-size: .8rem; color: var(--muted); }

/* ── الجوال ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 860px) {
  .p-shell { flex-direction: column; }
  .p-side { width: auto; flex: none; }
  .p-brand { padding: 10px 14px 8px; margin-bottom: 4px; }
  .p-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; font-size: 1rem; }
  .p-nav { flex-direction: row; overflow-x: auto; padding: 4px 10px 10px; gap: 6px; scrollbar-width: thin; }
  .p-nav a { padding: 6px 12px; font-size: .88rem; }
  .p-nav a .ico { width: 1.5em; height: 1.5em; background: none; }
  .p-nav a .soon { display: none; }
  .p-top { gap: 10px; }
  .p-top form.p-shop { margin-inline-start: 0; width: 100%; }
  .p-content { padding-bottom: 28px; }
  .card.narrow { margin-top: 4vh; }
  .page-band { padding: 18px 18px; border-radius: 16px; }
  .page-band h1 { font-size: 1.28rem; }
}

/* == P5 و P6: الأصناف والطلبات وفواتير الشراء == */
.btn-danger { background: #fde4e8; color: #8d1f2d; border: 1px solid #f3bcc6; }
.btn-danger:hover { background: #f9ccd5; color: #8d1f2d; }
.inline-form { display: inline-block; margin: 0; }

details.raw { margin: 12px 0; }
details.raw > summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
pre.raw-json { white-space: pre-wrap; word-break: break-all; background: #f8f9fc; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; margin-top: 8px; font-size: .82rem; direction: ltr; text-align: left; }

td .btn-sm { margin: 1px 0; }
ul { margin-inline-start: 18px; }

/* الجوال الضيق (375 بكسل): حقل واحد في السطر كي لا ينضغط أي مدخل */
@media (max-width: 480px) {
  .row .field { min-width: 100%; }
  .card { padding: 14px; }
  .toolbar { gap: 8px; padding: 10px; }
  .table-wrap td:first-child { min-width: 8.5em; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 10px 10px; }
  .kpi-ring { width: 74px; height: 74px; }
  .ring-txt { font-size: .92rem; }
  .kpi-val { font-size: 1.1rem; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 10px 12px; }
  .stat .num { font-size: 1.15rem; }
  .band-chip { font-size: .8rem; padding: 5px 10px; }
  .page-band { padding: 16px 14px; }
  /* نص SVG يتقلّص مع العرض — نكبّره بوحدات الرسم كي يبقى مقروءًا على 375 */
  .bar-chart .axis { font-size: 16px; }
  .bar-chart .val { font-size: 17px; }
  .chart-card { padding: 14px 12px; }
  .donut { width: 150px; height: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   == سهولة المالك (2026-09-24): شبكة الأسعار · فاتورة الشراء السريعة · الموردون · سجل التعديلات ==
   قسم مُلحق فقط — لا يعدّل قاعدة أعلاه. السكربتات في wwwroot/js تضيف السلوك، والصفحات تعمل بدونها.
   ═══════════════════════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ow-list { margin: 6px 22px 0; }
.ow-list li { margin: 2px 0; }
.pg-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.pg-inline input { width: auto; }

/* ── النوافذ (dialog أصلي: بلا سكربت تظهر من الخادم بـopen، ومع السكربت showModal) ── */
dialog.p-dialog { border: 0; padding: 0; border-radius: 18px; width: min(680px, calc(100vw - 24px)); max-height: 92vh;
  overflow: auto; box-shadow: 0 30px 60px -20px rgba(11, 29, 58, .55); color: var(--ink); background: var(--card); }
dialog.p-dialog[open] { position: fixed; inset: 0; margin: auto; z-index: 60; }
dialog.p-dialog::backdrop { background: rgba(11, 29, 58, .45); backdrop-filter: blur(2px); }
.p-dialog-body { padding: 20px 22px 14px; border-top: 5px solid var(--gold); }
.p-dialog-body h2 { margin: 0 0 14px; }
.p-dialog-body .toolbar { margin: 4px 0 0; }

/* ── شبكة الأسعار ───────────────────────────────────────────────────────── */
.pg-bulk { padding: 12px 16px; margin-bottom: 12px; background: var(--c-lavender-bg); border-color: #ddd3f7; }
.pg-bulk-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 8px; color: var(--c-lavender-fg); }
.pg-bulk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg-bulk-row select, .pg-bulk-row input[type=text] { width: auto; min-width: 0; padding: 6px 10px; font-size: .9rem; }
.pg-bulk-help { margin-top: 6px; font-size: .8rem; }
.pg-wrap { overflow: visible; }
.pg-table td { vertical-align: middle; }
.pg-table th.pg-sel, .pg-table td.pg-sel { width: 36px; text-align: center; }
.pg-th-hint { font-weight: 400; opacity: .8; font-size: .78rem; }
.pg-row.is-selected td { background: #f3effe !important; }
.pg-row.is-focus td { background: #fff8e6 !important; }
.pg-item { min-width: 190px; }
.pg-name { display: block; font-weight: 700; color: var(--navy); }
.pg-meta { display: block; font-size: .78rem; color: var(--muted); }
.pg-meta .mono { display: inline; }
.pg-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pg-badges a.badge { text-decoration: none; }
.pg-prices { min-width: 220px; }
.pg-prices { display: table-cell; }
.pg-cell { display: inline-grid; grid-template-columns: auto; gap: 2px; margin: 3px 0 3px 12px; vertical-align: top; min-width: 112px; position: relative; }
.pg-unit { margin: 0; font-size: .76rem; font-weight: 600; color: var(--muted); }
.pg-input { width: 112px; padding: 6px 10px; font-size: 1rem; font-weight: 700; text-align: left; font-variant-numeric: tabular-nums;
  border-radius: 9px; background: #fbfcfe; }
.pg-input:focus { background: #fff; }
.pg-cell.is-dirty .pg-input { background: #fff7e0; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(198, 164, 92, .22); }
.pg-cell.is-bad .pg-input { background: #fdecef; border-color: var(--red); }
.pg-cell.has-mark .pg-input { border-style: dashed; border-color: #d9a62b; }
.pg-ro { font-weight: 700; font-size: 1rem; }
.pg-mark { font-size: .7rem; padding: 1px 8px; text-decoration: none; white-space: normal; line-height: 1.35; max-width: 150px; }
.pg-was { font-size: .72rem; color: var(--muted); }
.pg-was .mono { text-decoration: line-through; }
.pg-delta { font-size: .72rem; color: var(--c-peach-fg); font-weight: 700; min-height: 0; }
.pg-cell.is-bad .pg-delta { color: var(--red); }
.pg-act { white-space: nowrap; width: 1%; }
.pg-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; padding: 10px 16px; margin-top: -8px; border-radius: 14px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 -8px 24px -18px rgba(16, 24, 40, .5); }
.pg-savebar.is-active { background: linear-gradient(135deg, #0B1D3A 0%, #16335F 100%); color: #fff; border-color: transparent;
  box-shadow: 0 -10px 30px -12px rgba(11, 29, 58, .7); }
.pg-savebar.is-active .pg-count { color: var(--gold-light); font-weight: 700; }
.pg-savebar.is-active .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.pg-count { color: var(--muted); font-size: .9rem; }
.pg-actions { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.pg-keys { margin-top: 10px; font-size: .8rem; }

/* ── فاتورة الشراء السريعة ─────────────────────────────────────────────── */
.pe-card { border-top: 4px solid var(--gold); }
.pe-card h3 { margin: 14px 0 8px; }
.pe-hint { margin: -6px 0 10px; font-size: .8rem; }
.ta { position: relative; }
.ta-box { display: flex; gap: 8px; align-items: center; }
.ta-box .ta-input { flex: 1; }
.ta-list { position: absolute; inset-inline: 0; top: 100%; z-index: 30; list-style: none; margin: 4px 0 0; padding: 4px;
  background: #fff; border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; }
.ta-list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .92rem; }
.ta-list li.is-active, .ta-list li:hover { background: #eef7f6; }
.ta-list li.is-disabled { opacity: .6; }
.ta-list small { font-size: .78rem; }
.ta-side { margin-inline-start: auto; font-size: .8rem; color: var(--c-rose-fg); }
.pe-chosen { margin-top: 6px; font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pe-entry { background: var(--c-sea-bg); border: 1px solid #cfe0f3; border-radius: 14px; padding: 12px 14px 4px; margin: 6px 0 12px; }
.pe-entry-row { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(80px, .8fr) minmax(110px, 1fr) minmax(120px, 1.1fr) auto; gap: 10px; align-items: end; }
.pe-entry-row .field { margin-bottom: 8px; min-width: 0; }
.pe-entry input.is-bad, .pe-lines input.is-bad { border-color: var(--red); background: #fdecef; }
.pe-picked { font-size: .82rem; margin-bottom: 8px; min-height: 1.2em; }
.pe-lines td { vertical-align: middle; }
.pe-lines input, .pe-lines select { padding: 5px 8px; font-size: .92rem; }
.pe-lines .js-l-qty { width: 80px; }
.pe-lines .js-l-cost { width: 110px; }
.pe-lines tr.is-new td { animation: pe-flash 1.2s ease-out; }
@keyframes pe-flash { from { background: #fff3cf; } to { background: transparent; } }
.pe-l-name { font-weight: 600; }
.pe-empty { padding: 14px; text-align: center; }
.pe-lines-wrap { margin-bottom: 12px; }
.pe-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pe-total { background: var(--tone-bg); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid rgba(16, 24, 40, .05); }
.pe-total span { font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.pe-total strong { font-size: 1.35rem; color: var(--tone-fg); font-variant-numeric: tabular-nums; unicode-bidi: isolate; text-align: start; }
.pe-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  justify-content: space-between; background: #fff; border-top: 1px solid var(--border); padding: 12px 0 2px; margin-top: 6px; }
.pe-note { flex: 1 1 320px; font-size: .8rem; }
.pe-save { min-width: 160px; }
.pe-pick { background: #f8f9fc; }
.pe-restored { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qs-more { margin: 4px 0 10px; }
.qs-more > summary { cursor: pointer; color: var(--c-sea-fg); font-size: .88rem; margin-bottom: 8px; }

/* ── الموردون ─────────────────────────────────────────────────────────── */
details.quick-form { padding: 14px 18px; }
details.quick-form > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
details.quick-form > summary::-webkit-details-marker { display: none; }
details.quick-form[open] > summary { margin-bottom: 14px; }
.quick-form-body .toolbar { margin: 0; }
.bal { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-owed { color: var(--c-rose-fg); }
.bal-due { color: var(--c-mint-fg); }

/* ── سجل التعديلات ────────────────────────────────────────────────────── */
details.how-card > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
details.how-card[open] > summary { margin-bottom: 10px; }
details.how-card ul { margin: 8px 22px 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border-2);
  color: var(--navy); text-decoration: none; font-size: .88rem; font-weight: 600; }
.tab:hover { border-color: var(--navy); color: var(--navy); }
.tab.is-active { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }
.tab-n { background: var(--gold); color: var(--navy); border-radius: 999px; padding: 0 7px; font-size: .75rem; }
.tab-kind { margin-inline-start: auto; }
.tab-kind select { width: auto; padding: 6px 10px; font-size: .88rem; }
.req-detail { border-top: 4px solid var(--gold); scroll-margin-top: 12px; }
.req-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.req-head h2 { margin: 0; }
.req-facts, .req-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.req-facts > div, .req-fields > div { background: #f6f8fb; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.req-facts span, .req-fields span { display: block; font-size: .76rem; color: var(--muted); font-weight: 600; }
.req-facts strong, .req-fields strong { display: block; overflow-wrap: anywhere; font-size: .93rem; }
.req-id { font-size: .76rem !important; font-weight: 400; }
.req-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.req-item { background: #fff; border: 1px solid var(--border); border-inline-start: 5px solid var(--c-slate-mid); border-radius: 14px; box-shadow: var(--shadow-sm); }
.req-item.st-0 { border-inline-start-color: #e0b03a; }
.req-item.st-1 { border-inline-start-color: var(--c-sea-mid); }
.req-item.st-2 { border-inline-start-color: var(--green); }
.req-item.st-3, .req-item.st-4 { border-inline-start-color: var(--red); }
.req-item.is-selected { outline: 2px solid var(--gold); }
.req-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: inherit; text-decoration: none; }
.req-link:hover { background: #f7fafc; border-radius: 14px; color: inherit; }
.req-ico { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: var(--c-sea-bg); font-size: 1.05rem; }
.req-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.req-title { font-weight: 700; color: var(--navy); }
.req-sum { font-weight: 600; color: var(--ink-2); margin-inline-start: 6px; }
.req-sub { font-size: .8rem; }
.req-fail { font-size: .8rem; color: #8d1f2d; }
.req-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.req-short { font-size: .72rem; color: var(--muted); }

/* ── الجوال (375 بكسل) ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pe-entry-row { grid-template-columns: 1fr 1fr; }
  .pe-entry-row .pe-item { grid-column: 1 / -1; }
  .pe-entry-row .pe-add { grid-column: 1 / -1; }
  .pe-entry-row .pe-add label { display: none; }
  .pe-entry-row .pe-add .btn { width: 100%; }
}
@media (max-width: 640px) {
  /* شبكة الأسعار ⇐ بطاقات: الصنف فوق، وخانات الوحدات تحته */
  .pg-table thead { display: none; }
  .pg-table, .pg-table tbody { display: block; }
  .pg-table tr.pg-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .pg-table tr.pg-row td { display: block; padding: 0; border: 0; background: none !important; }
  .pg-table td.pg-sel { grid-row: 1 / span 2; padding-top: 2px; }
  .pg-table td.pg-prices, .pg-table td.pg-shop, .pg-table td.pg-act { grid-column: 2; min-width: 0; }
  .pg-table td.pg-act .btn { width: 100%; }
  .pg-cell { margin: 4px 0 4px 10px; min-width: 0; }
  .pg-input { width: 120px; }
  .pg-item { min-width: 0; }
  .pg-savebar { margin-top: 0; }
  .pg-actions { width: 100%; }
  .pg-actions .btn { flex: 1; }
  /* جداول «stack-sm» والأسطر ⇐ بطاقات بتسمية كل خانة */
  table.stack-sm thead, .pe-lines thead { display: none; }
  table.stack-sm, table.stack-sm tbody, .pe-lines, .pe-lines tbody { display: block; }
  table.stack-sm tr, .pe-lines tr { display: block; padding: 8px 12px; border-bottom: 1px solid var(--border); }
  table.stack-sm td, .pe-lines td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 0; padding: 3px 0; background: none !important; text-align: start; }
  table.stack-sm td[data-label]::before, .pe-lines td[data-label]::before { content: attr(data-label); color: var(--muted);
    font-size: .78rem; font-weight: 600; font-family: "Segoe UI", Tahoma, sans-serif; direction: rtl; }
  table.stack-sm td.mono, .pe-lines td.mono { direction: rtl; }
  .pe-lines td:last-child { justify-content: flex-end; }
  .pe-totals { grid-template-columns: 1fr; gap: 6px; }
  .pe-total { flex-direction: row; justify-content: space-between; align-items: center; }
  .pe-total strong { font-size: 1.15rem; }
  .pe-save { width: 100%; }
  .ta-box { flex-wrap: wrap; }
  .ta-box .btn { width: 100%; }
  .tab-kind { margin-inline-start: 0; width: 100%; }
  .tab-kind select { width: 100%; }
  .req-link { flex-wrap: wrap; }
  .req-state { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-inline-start: 48px; }
  .req-short { display: none; }
  dialog.p-dialog { width: calc(100vw - 16px); }
  .p-dialog-body { padding: 16px 14px 12px; }
}
/* شريط الحفظ يظهر مع السكربت حين يوجد تعديل فقط؛ بلا سكربت يبقى ظاهرًا دائمًا بزره */
.pg-form.js-grid .pg-savebar:not(.is-active) { display: none; }
@media (max-width: 640px) {
  .pg-table td.pg-act { width: auto; }
  .pg-table td.pg-prices { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .pg-table .pg-cell { margin: 2px 0; }
}
/* خانة السعر بعرض ثابت — قاعدة input[type=text] العامة أعلى تحديدًا من الصنف وحده */
.pg-table input.pg-input { width: 112px; }
.pe-lines input.js-l-qty { width: 80px; }
.pe-lines input.js-l-cost { width: 110px; }
.pe-lines select.js-l-unit { width: auto; }
.pe-card h2.section-title { margin-top: 0; }
@media (max-width: 640px) {
  /* شريط الحفظ الثابت على الجوال: الزر وحده — الشرح طويل ويغطي الإدخال */
  .pe-savebar .pe-note { display: none; }
  .pe-savebar { padding-top: 8px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   == التقارير (feat/report-pages): صفحة «التقارير» وصفحات Pages/Portal/Reports ==
   كل ما يلي خاص بصفحات التقارير ولا يعدّل صنفًا قبله. الأسماء مسبوقة بـ rpt- أو hub- أو stmt- أو vat-
   ما عدا seg و preset و rank- و hbar و is-neg (مكوّنات صغيرة داخل التقارير).
   ══════════════════════════════════════════════════════════════════════════ */

/* رابط الرجوع أعلى التقرير */
.rpt-back { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; text-decoration: none;
  color: var(--c-sea-fg); margin-bottom: 10px; }
.rpt-back:hover { color: var(--navy); text-decoration: underline; }

/* شريط الفلاتر: حقول مسمّاة بعرض محدود بدل 100% */
.rpt-filters { align-items: flex-end; }
.rpt-field { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); font-weight: 600; margin: 0; }
.rpt-field input, .rpt-field select { min-width: 150px; width: auto; padding: 6px 10px; font-size: .9rem; }
.rpt-filters .btn { align-self: flex-end; }

/* شرائح المدى الجاهز */
.rpt-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.preset { display: inline-block; padding: 4px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none;
  background: #fff; color: var(--ink-2); border: 1px solid var(--border-2); white-space: nowrap; transition: background .15s, color .15s; }
.preset:hover { background: var(--c-sea-bg); color: var(--c-sea-fg); border-color: #c9dcf0; }
.preset.is-active { background: linear-gradient(135deg, #0B6E78 0%, #0A4F63 100%); color: #fff; border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(10, 79, 99, .8); }

/* مفتاح التبديل (البُعد · نوع الطرف · الترتيب) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm); margin: 0 0 16px; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px; font-size: .88rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.seg-btn:hover { background: #f2f5f9; color: var(--navy); }
.seg-btn.is-active { background: linear-gradient(135deg, #E2C47F 0%, #C6A45C 100%); color: var(--navy);
  box-shadow: 0 4px 12px -6px rgba(168, 135, 59, .9); }
.seg-row { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; }
.seg-row .seg-lbl { font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: 16px; }

/* الجداول: رأس بمجموعات أعمدة، وصف مجموع، وأرقام سالبة */
.rpt-table tr.th-group th { background: var(--navy-3); border-bottom: 1px solid #ffffff22; text-align: center; font-size: .8rem; }
.rpt-table tr.th-group th.g-sales { background: #1B5E8C; }
.rpt-table tr.th-group th.g-profit { background: #4B3A9C; }
.rpt-table tr.th-group th.g-pay { background: #0E6B55; }
.rpt-table tr.th-group th[rowspan] { vertical-align: middle; text-align: right; background: var(--navy); border-bottom: 3px solid var(--gold); }
.rpt-table tfoot td, .rpt-table tr.total-row td { background: #FBF6EA; border-top: 2px solid var(--gold); font-weight: 800; color: var(--navy); }
.rpt-table .day-cell, .rpt-table td.mono { white-space: nowrap; }
.rpt-table .day-cell small { font-size: .74rem; }
td.is-neg, .is-neg { color: var(--red); }
.miss { color: #b77f00; font-weight: 800; cursor: help; }
.rpt-table td.name-cell { min-width: 12em; }
.rpt-more { font-size: .84rem; color: var(--muted); margin: -10px 0 18px; }

/* قسم محل (حين يُعرض أكثر من محل) */
.shop-title { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 1.12rem; margin: 22px 0 12px;
  padding-top: 12px; border-top: 1px dashed var(--border-2); }

/* بطاقتان جنبًا إلى جنب (الأفضل/الأسوأ · الموردون/الأصناف) */
.rpt-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rpt-two > * { min-width: 0; }
.rank-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 10px;
  box-shadow: var(--shadow); margin-bottom: 16px; border-top: 4px solid var(--tone-fg, var(--c-slate-fg)); }
.rank-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid #edf1f6; font-size: .9rem; }
.rank-list li:last-child { border-bottom: 0; }
.rank-list .rk { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; font-weight: 800;
  background: var(--tone-bg, var(--c-slate-bg)); color: var(--tone-fg, var(--c-slate-fg)); }
.rank-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rank-list .vl { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--tone-fg, var(--ink)); unicode-bidi: isolate; direction: ltr; }
.rank-list .sub { grid-column: 2 / 4; font-size: .76rem; color: var(--muted); }
.rank-empty { color: var(--muted); font-size: .88rem; padding: 10px 0; }

/* شريط أفقي صغير داخل خلية (حصة من الأعلى) */
.hbar { display: inline-block; width: 70px; height: 7px; border-radius: 999px; background: #edf1f6; vertical-align: middle;
  margin-inline-start: 6px; overflow: hidden; }
.hbar > i { display: block; height: 100%; border-radius: 999px; background: var(--tone-fg, var(--c-sea-fg)); }

/* قائمة الدخل: تخطيط قائمة مالية حقيقية */
table.stmt td, table.stmt th { vertical-align: middle; }
table.stmt tr.stmt-section td { background: #eef3f9; color: var(--navy); font-weight: 800; font-size: .95rem; border-top: 1px solid var(--border-2); padding-top: 11px; }
table.stmt tr.stmt-line td:first-child { padding-inline-start: 28px; }
table.stmt tr.stmt-line .acc { color: var(--muted); font-size: .8rem; margin-inline-end: 8px; font-family: Consolas, "Cascadia Mono", monospace; }
table.stmt tr.stmt-sub td { font-weight: 800; border-top: 1px solid var(--border-2); background: #fafbfd; }
table.stmt tr.stmt-key td { background: #EFEAFD; color: var(--c-lavender-fg); font-weight: 800; font-size: 1rem;
  border-top: 2px solid var(--c-lavender-mid); }
table.stmt tr.stmt-net td { font-weight: 900; font-size: 1.08rem; border-top: 3px double var(--navy); }
table.stmt tr.stmt-net.is-profit td { background: #E2F5EB; color: var(--c-mint-fg); }
table.stmt tr.stmt-net.is-loss td { background: #FBE6EA; color: var(--c-rose-fg); }
table.stmt td.amt { text-align: left; direction: ltr; font-family: Consolas, "Cascadia Mono", monospace; white-space: nowrap; }
table.stmt th.amt { text-align: left; }
table.stmt .ratio { font-size: .76rem; color: var(--muted); font-weight: 600; margin-inline-start: 6px; }
table.stmt tbody tr:nth-child(even) td { background: inherit; }
table.stmt tbody tr.stmt-line:nth-child(even) td { background: #fbfcfe; }
table.stmt tbody tr:hover td { background: inherit; }

/* الإقرار الضريبي */
table.vat tr.vat-head td { background: #eef3f9; color: var(--navy); font-weight: 800; }
table.vat tr.vat-sub td { font-weight: 800; border-top: 1px solid var(--border-2); background: #fafbfd; }
table.vat tr.vat-net td { font-weight: 900; font-size: 1.06rem; border-top: 3px double var(--navy); background: #FFEEDD; color: var(--c-peach-fg); }
table.vat tr.vat-net.is-refund td { background: #E2F5EB; color: var(--c-mint-fg); }
table.vat td.amt { text-align: left; direction: ltr; font-family: Consolas, "Cascadia Mono", monospace; white-space: nowrap; }
table.vat th.amt { text-align: left; }
.vat-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.vat-checks li { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-sm);
  border-inline-start: 4px solid var(--green); font-size: .88rem; }
.vat-checks li.is-alert { border-inline-start-color: var(--red); background: #fffafb; }
.vat-checks li strong { display: block; color: var(--navy); }

/* «عن هذا التقرير» */
.rpt-about { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: 8px 0 14px;
  box-shadow: var(--shadow-sm); border-inline-start: 4px solid #13A39F; }
.rpt-about h3 { font-size: .95rem; margin-bottom: 8px; }
.rpt-about ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rpt-about li { display: flex; gap: 8px; font-size: .86rem; color: var(--ink-2); line-height: 1.55; }
.rpt-about .n-ico { flex: 0 0 1.3em; text-align: center; }
.rpt-about li.n-approx { color: #6d4c05; }
.rpt-sync { margin-top: 6px; }
.conf-list { margin: 6px 0 0; padding-inline-start: 18px; font-size: .88rem; }

/* شرح مبرز داخل الصفحة (لماذا لا مجموع للإقرار · الفرق عن الرصيد المخزَّن) */
.rpt-explain { background: var(--c-sea-bg); border: 1px solid #c9dcf0; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
  color: #1f3f77; font-size: .9rem; }
.rpt-explain strong { color: var(--navy); }

/* ── صفحة «التقارير» ── */
.hub-section { margin-bottom: 22px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hub-card { position: relative; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink);
  background: var(--tone-bg, var(--c-slate-bg)); border: 1px solid rgba(255, 255, 255, .7); outline: 1px solid rgba(16, 24, 40, .05);
  border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; min-width: 0; }
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--ink); }
.hub-card:focus-visible { outline: none; box-shadow: var(--focus); }
.hub-ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem;
  background: #fff; box-shadow: 0 3px 8px -3px rgba(16, 24, 40, .22); }
.hub-txt { min-width: 0; flex: 1; padding-inline-end: 14px; }
.hub-txt h3 { color: var(--tone-fg, var(--navy)); font-size: 1rem; margin-bottom: 3px; }
.hub-txt p { color: var(--ink-2); font-size: .84rem; line-height: 1.5; }
.hub-go { position: absolute; inset-inline-end: 14px; bottom: 10px; color: var(--tone-fg, var(--navy)); font-weight: 800; opacity: .55; }
.hub-card:hover .hub-go { opacity: 1; }
.hub-tag { display: inline-block; margin-top: 6px; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 1px 9px;
  background: rgba(255, 255, 255, .75); color: var(--tone-fg, var(--ink-2)); }

@media (max-width: 860px) {
  .rpt-presets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
}
@media (max-width: 480px) {
  .rpt-field { flex: 1 1 calc(50% - 8px); }
  .rpt-field input, .rpt-field select { min-width: 0; width: 100%; }
  .rpt-filters .btn { flex: 1 1 auto; }
  .hub-grid { grid-template-columns: minmax(0, 1fr); }
  .rpt-two { grid-template-columns: minmax(0, 1fr); }
  table.stmt tr.stmt-line td:first-child { padding-inline-start: 14px; }
}
/* == نهاية قسم التقارير == */