/* ==========================================================================
   بوابة العميل — نظامٌ بصريّ واحد.

   ما كان قبله: ٢٥٠ عنصرًا بأنماطٍ سطرية، وثلاث نقاط كسرٍ فيها ٢٨ `!important`
   تُبطل تلك الأنماط. أي أن المرونة أُضيفت بعد البناء لا فيه — فكل عرضٍ جديد
   يحتاج نقطة كسرٍ جديدة، وكل تعديلٍ يحتاج أن يغلب ما قبله.

   وهنا تُبنى فيه: الشبكات تتدفّق بـ`auto-fit`+`minmax` فتُعيد ترتيب نفسها عند
   أي عرضٍ بلا نقطة كسر، والمقاسات بـ`clamp()` فتكبر مع الشاشة لا قفزًا.
   ولذلك لا استعلام وسائطٍ هنا إلا لتفضيلات المستخدم وللانتقال إلى عمودين،
   ولا `!important` إلا في تقليل الحركة — وهي موضعه الصحيح الوحيد: تفضيلٌ
   صحّيّ يجب أن يغلب كل ما بعده.

   والخطّان موجودان في المشروع سلفًا: Noto Sans Arabic للواجهة، وNoto Naskh
   للعناوين — فيصير للصفحة صوتان لا خطٌّ واحد بأوزانٍ مختلفة.

   نطاقه `.pc` وحده حتى لا يمسّ بقية الشاشات التي تشترك في app.css.
   ========================================================================== */

.pc {
  /* ── الأرض والحبر: رماديٌّ مائلٌ إلى كحل العلامة لا رماديٌّ محايد ── */
  --pc-ground: #f4f7fc;
  --pc-surface: #ffffff;
  --pc-surface-2: #f7f9fd;
  --pc-ink: #0a1526;
  --pc-ink-2: #33445c;
  --pc-muted: #5e7085;
  --pc-line: #e2e9f4;
  --pc-line-soft: #eef2f9;

  --pc-navy: #152a63;
  --pc-navy-deep: #07111f;
  --pc-gold: #c2a24e;

  --pc-ok: #12805c;      --pc-ok-bg: #e8f7f1;
  --pc-warn: #b25e09;    --pc-warn-bg: #fdf3e6;
  --pc-bad: #d92d20;     --pc-bad-bg: #fdecea;
  --pc-info: #1d4ed8;    --pc-info-bg: #eaf0fe;

  /* ── مقياسٌ واحد للفراغ: كل حشوةٍ وفجوةٍ منه، فلا أرقام متناثرة ── */
  --pc-1: 4px;  --pc-2: 8px;  --pc-3: 12px; --pc-4: 16px;
  --pc-5: 22px; --pc-6: 30px; --pc-7: 42px; --pc-8: 60px;

  /* الحشوة الجانبية تكبر مع الشاشة: ١٦ في الجوال و٣٢ في المكتب بلا قفزة */
  --pc-pad: clamp(16px, 4vw, 32px);
  --pc-r: 14px;          /* نصف قطرٍ واحد للبطاقات */
  --pc-r-lg: 20px;
  --pc-shadow: 0 1px 2px rgba(10, 21, 38, .04), 0 8px 24px -12px rgba(10, 21, 38, .12);
  --pc-shadow-lg: 0 24px 60px -28px rgba(10, 21, 38, .35);

  --pc-sans: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --pc-display: "Noto Naskh Arabic", "Noto Sans Arabic", serif;

  background: var(--pc-ground);
  color: var(--pc-ink);
  font-family: var(--pc-sans);
}

/* ================= التخطيط ================= */

/* الحاوية: عرضٌ أقصى مع حشوةٍ مرنة — لا عرض ثابت ولا نقطة كسر */
.pc-wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--pc-pad); }

/*
 * الشبكة المتدفّقة — أهمّ سطرٍ في الملف.
 *
 * `auto-fit` + `minmax(min(100%, Npx), 1fr)` تضع من الأعمدة ما يسع العرض
 * وتُنزل الباقي سطرًا: ثلاثةٌ في المكتب، اثنان في اللوحي، واحدٌ في الجوال —
 * كلّه بلا استعلام وسائط. و`min(100%, N)` تمنع الفيض حين يضيق العرض عن N.
 */
.pc-grid { display: grid; gap: var(--pc-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pc-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pc-grid--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.pc-stack { display: grid; gap: var(--pc-3); }
.pc-stack--lg { gap: var(--pc-5); }
.pc-row { display: flex; align-items: center; gap: var(--pc-3); flex-wrap: wrap; }
.pc-row--between { justify-content: space-between; }
.pc-spacer { flex: 1 1 auto; }

/* ================= الطباعة ================= */
.pc-h1 {
  margin: 0; font-family: var(--pc-display); font-weight: 700;
  font-size: clamp(24px, 1.2rem + 2.2vw, 38px); line-height: 1.35;
  color: var(--pc-ink); text-wrap: balance;
}
.pc-h2 {
  margin: 0; font-family: var(--pc-display); font-weight: 700;
  font-size: clamp(17px, 1rem + .5vw, 21px); line-height: 1.4; color: var(--pc-ink);
}
.pc-h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--pc-ink); line-height: 1.5; }
.pc-lede { margin: 0; color: var(--pc-ink-2); font-size: clamp(14px, .85rem + .2vw, 15.5px); line-height: 1.85; max-width: 62ch; }
.pc-sub { margin: 0; color: var(--pc-muted); font-size: 12.5px; font-weight: 700; line-height: 1.7; }
.pc-num { font-size: clamp(22px, 1.1rem + 1vw, 28px); font-weight: 900; line-height: 1.2;
          font-variant-numeric: tabular-nums; color: var(--pc-ink); }
/* الحرف اللاتيني والرقم داخل نصٍّ عربي: يُعزل اتجاهه فلا ينقلب ترتيبه */
.pc-ltr { direction: ltr; unicode-bidi: isolate; }

/* ================= الأسطح ================= */
.pc-card {
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: var(--pc-r); box-shadow: var(--pc-shadow);
  padding: var(--pc-4); display: grid; gap: var(--pc-3); min-width: 0;
}
.pc-card--flush { padding: 0; overflow: hidden; gap: 0; }
.pc-card--quiet { background: var(--pc-surface-2); box-shadow: none; }
.pc-card__head {
  padding: var(--pc-4); border-bottom: 1px solid var(--pc-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--pc-3); flex-wrap: wrap;
}
.pc-card__body { padding: var(--pc-4); display: grid; gap: var(--pc-3); }

/*
 * الرقم الواحد: كان كلٌّ منها بطاقةً بارتفاع ١٨٠ بكسل لتقول «لا طلبات مفتوحة»،
 * فتُطيل الصفحة بلا أن تزيد معنى. صارت صفًّا مضغوطًا: العنوان فالرقم فالشرح.
 */
.pc-stat { background: var(--pc-surface); border: 1px solid var(--pc-line); border-radius: var(--pc-r);
           padding: var(--pc-3) var(--pc-4); display: grid; gap: 2px; align-content: center; min-width: 0; }
.pc-stat__label { font-size: 11.5px; font-weight: 800; color: var(--pc-muted); }
.pc-stat__note { font-size: 11.5px; font-weight: 700; color: var(--pc-muted); }
/* جملةٌ في موضع الرقم: أصغر وتلتفّ متّزنةً بدل أن تفيض */
.pc-num--sm { font-size: clamp(15px, .8rem + .5vw, 18px); line-height: 1.45; text-wrap: balance; }
.pc-stat--ok .pc-num { color: var(--pc-ok); }
.pc-stat--warn .pc-num { color: var(--pc-warn); }
.pc-stat--bad .pc-num { color: var(--pc-bad); }

/* صفٌّ في قائمة: يلتفّ عند الضيق بدل أن يفيض */
.pc-item { display: flex; gap: var(--pc-3); align-items: center; flex-wrap: wrap;
           padding: var(--pc-3) var(--pc-4); border-top: 1px solid var(--pc-line-soft); min-width: 0; }
.pc-item:first-child { border-top: 0; }
.pc-item__main { min-width: min(100%, 200px); flex: 1 1 auto; display: grid; gap: 2px; }
.pc-item__end { flex: 0 0 auto; margin-inline-start: auto; }

/* رأسٌ ملوَّن للعمودين: «ما لكم» أخضر و«ما عليكم» كهرمانيّ أو رماديّ متى خلا */
.pc-card__head--ok   { background: var(--pc-ok-bg); }
.pc-card__head--ok   .pc-h2 { color: var(--pc-ok); }
.pc-card__head--warn { background: var(--pc-warn-bg); }
.pc-card__head--warn .pc-h2 { color: var(--pc-warn); }
.pc-card__head--mute { background: var(--pc-surface-2); }
.pc-card__head--mute .pc-h2 { color: var(--pc-muted); }

/* رسالةُ خلوٍّ داخل بطاقةٍ بلا حشوة */
.pc-empty { padding: var(--pc-5) var(--pc-4); font-size: 13px; color: var(--pc-muted); font-weight: 700; }

/* رمزٌ يتصدّر الصفّ — حجمه من مقياس النصّ لا رقمٌ مفرد */
.pc-item__ic { font-size: 17px; line-height: 1.4; flex: 0 0 auto; }

/*
 * التنبيه: كانت ألوانه تُحقن في `style` من جدول TONES في المعالج، فلونُ
 * الحالة يعيش في JavaScript ولا يُغيَّر إلا فيه. صار الصنف يحمل النبرة
 * واللون في الورقة — حيث تعيش بقيّة الألوان.
 */
.pc-notif { display: flex; gap: var(--pc-3); align-items: flex-start;
            border-radius: var(--pc-r); padding: 13px 15px; border: 1px solid transparent; }
.pc-notif__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
                flex: 0 0 auto; font-size: 15px; }
.pc-notif__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pc-notif__main strong { font-size: 13.5px; font-weight: 900; color: var(--pc-ink); }
.pc-notif__main span { font-size: 12.3px; color: var(--pc-ink-2); line-height: 1.7; }
.pc-notif--info { background: var(--pc-info-bg); border-color: rgba(29, 78, 216, .18); }
.pc-notif--info .pc-notif__ic { background: rgba(29, 78, 216, .12); }
.pc-notif--ok   { background: var(--pc-ok-bg);   border-color: rgba(18, 128, 92, .22); }
.pc-notif--ok   .pc-notif__ic { background: rgba(18, 128, 92, .12); }
.pc-notif--warn { background: var(--pc-warn-bg); border-color: rgba(178, 94, 9, .22); }
.pc-notif--warn .pc-notif__ic { background: rgba(178, 94, 9, .12); }
.pc-notif--bad  { background: var(--pc-bad-bg);  border-color: rgba(217, 45, 32, .22); }
.pc-notif--bad  .pc-notif__ic { background: rgba(217, 45, 32, .12); }

/* حقلٌ صغير في بطاقة العقد: تسميةٌ فوق قيمة */
.pc-field { background: var(--pc-surface-2); border-radius: 10px; padding: 9px 11px; display: grid; gap: 2px; min-width: 0; }
.pc-field small { font-size: 11px; color: var(--pc-muted); font-weight: 800; }
.pc-field strong { font-size: 13px; font-weight: 800; color: var(--pc-ink); }

/* تنبيهٌ داخل بطاقة — نبرته من الصنف لا من ألوانٍ تُحقن */
.pc-note { border-radius: 10px; padding: 8px 12px; font-size: 12.3px; font-weight: 800; line-height: 1.6; border: 1px solid transparent; }
.pc-note--warn { background: var(--pc-warn-bg); border-color: rgba(178, 94, 9, .3); color: var(--pc-warn); }
.pc-note--bad  { background: var(--pc-bad-bg);  border-color: rgba(217, 45, 32, .3); color: var(--pc-bad); }
.pc-note--ok   { background: var(--pc-ok-bg);   border-color: rgba(18, 128, 92, .35); color: var(--pc-ok);
                 display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 12.5px; }

/* ================= العناصر الصغيرة ================= */
.pc-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
  background: var(--pc-surface-2); color: var(--pc-ink-2); border: 1px solid var(--pc-line);
}
.pc-chip--ok   { background: var(--pc-ok-bg);   color: var(--pc-ok);   border-color: transparent; }
.pc-chip--warn { background: var(--pc-warn-bg); color: var(--pc-warn); border-color: transparent; }
.pc-chip--bad  { background: var(--pc-bad-bg);  color: var(--pc-bad);  border-color: transparent; }
.pc-chip--info { background: var(--pc-info-bg); color: var(--pc-info); border-color: transparent; }
.pc-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }

.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--pc-line); background: var(--pc-surface); color: var(--pc-ink);
  border-radius: 11px; padding: 10px 18px; font: 800 13.5px/1.2 var(--pc-sans);
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
  min-height: 42px;   /* هدفُ لمسٍ لا يقلّ عن ٤٢ — الجوال هو الأصل هنا */
}
.pc-btn:hover { background: var(--pc-surface-2); border-color: #cfd9ea; }
.pc-btn:active { transform: translateY(1px); }
.pc-btn--primary {
  background: linear-gradient(180deg, #23407f, var(--pc-navy)); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(21, 42, 99, .8);
}
.pc-btn--primary:hover { background: linear-gradient(180deg, #2a4a8e, #1a3172); border-color: transparent; }
.pc-btn--gold { background: var(--pc-gold); color: #1b1405; border-color: transparent; }
.pc-btn--wide { width: 100%; }
.pc-btn--sm { padding: 7px 13px; min-height: 34px; font-size: 12.5px; }

/* شريط تقدّم: نسبةٌ تُرى بلا قراءة رقم */
.pc-bar { height: 7px; border-radius: 999px; background: var(--pc-line-soft); overflow: hidden; }
.pc-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--pc-ok); }
.pc-bar--warn > i { background: var(--pc-warn); }
.pc-bar--bad > i { background: var(--pc-bad); }

/* ================= الترويسة والصدر ================= */
.pc-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--pc-surface) 88%, transparent);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--pc-line);
}
.pc-head__in { display: flex; align-items: center; gap: var(--pc-3); min-height: 66px; }
.pc-head__mark { width: 38px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; }
.pc-head__mark img { width: 100%; height: 100%; object-fit: contain; }
.pc-head__id { display: grid; line-height: 1.25; min-width: 0; }
.pc-head__id strong { font-size: 15px; font-weight: 900; color: var(--pc-ink); white-space: nowrap; }
.pc-head__id small { font-size: 11px; font-weight: 800; color: var(--pc-gold);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
 * الصدر داكن قصدًا.
 *
 * الصفحة تجلس على تدرّج العلامة الكحليّ، وكان الصدر شفّافًا فيقع حبرٌ داكن
 * على أرضٍ داكنة — لا يُقرأ. والحلّ ليس طمس التدرّج بل استعماله: صدرٌ داكن
 * يحمل الترحيب، ثم مساحة عملٍ فاتحة تحته. فيصير الانتقال بينهما هو ما يفصل
 * «من أنت» عن «ما لديك».
 */
.pc-hero {
  position: relative; margin-inline: calc(var(--pc-pad) * -1); padding: var(--pc-6) var(--pc-pad) var(--pc-5);
  display: grid; gap: var(--pc-2);
  background: linear-gradient(160deg, #0e2350 0%, #10254f 55%, #0b1a3c 100%);
  border-radius: 0 0 var(--pc-r-lg) var(--pc-r-lg);
  color: #eaf0fb;
}
.pc-hero .pc-h1 { color: #fff; }
.pc-hero .pc-lede { color: #b9c8e2; }
.pc-eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start;
              color: var(--pc-gold); font-size: 12.5px; font-weight: 800; }
.pc-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #37c991;
                box-shadow: 0 0 0 5px rgba(55, 201, 145, .18); flex: 0 0 auto; }


.pc-main { padding-block: var(--pc-4) var(--pc-8); display: grid; gap: var(--pc-5); }
.pc-sec { display: grid; gap: var(--pc-3); }

/* ================= القائمة الجانبية =================
 *
 * الصفحة كانت عمودًا واحدًا طوله ٣٨٨٥ بكسل لعميلٍ له عقدٌ واحد: كل شيءٍ
 * مكدَّس، فمن يريد زياراته يمرّ على كل شيءٍ قبلها. والقائمة تجعلها أقسامًا
 * يُنتقل بينها بضغطة.
 *
 * وفي الجوال لا تصير درجًا مخفيًّا خلف زرّ — بل شريطَ أقسامٍ أفقيًّا ملتصقًا
 * بالأعلى: العميل يرى أقسامه كلها بلا أن يفتح شيئًا. والتحوّل بالحاوية لا
 * بنقطة كسر: `grid-template-columns` واحدة تتبدّل عند سعة العمود.
 */
.pc-shell { display: grid; gap: var(--pc-5); align-items: start; padding-block: var(--pc-4) var(--pc-8); }
@supports (grid-template-columns: subgrid) {
  .pc-shell { grid-template-columns: 1fr; }
}
/* عمودان متى اتّسع العرض لقائمةٍ ٢٣٦ ومحتوًى ٤٢٠ على الأقل */
@media (min-width: 880px) {
  .pc-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .pc-nav { position: sticky; top: 82px; }
  .pc-nav__list { flex-direction: column; overflow: visible; padding: 0; margin: 0; }
  .pc-nav__btn { width: 100%; justify-content: flex-start; }
}

.pc-nav { min-width: 0; }
.pc-nav__list {
  display: flex; gap: 6px; list-style: none; margin: 0;
  /* في الجوال: شريطٌ أفقيّ يُمرَّر — وحوافه تتنفّس مع حشوة الصفحة */
  overflow-x: auto; scrollbar-width: none; padding: 2px calc(var(--pc-pad) * 0) 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.pc-nav__list::-webkit-scrollbar { display: none; }
.pc-nav__btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  border: 1px solid var(--pc-line); background: var(--pc-surface); color: var(--pc-ink-2);
  border-radius: 11px; padding: 9px 13px; font: 800 13px/1.4 var(--pc-sans);
  cursor: pointer; min-height: 42px; scroll-snap-align: start;
  transition: background .15s, color .15s, border-color .15s;
}
.pc-nav__btn:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-nav__btn[aria-current="page"] {
  background: var(--pc-navy); border-color: var(--pc-navy); color: #fff;
}
.pc-nav__btn[aria-current="page"] .pc-nav__ic { color: var(--pc-gold); }
.pc-nav__ic { width: 18px; height: 18px; flex: 0 0 auto; color: #8b9ab5; display: grid; place-items: center; }
.pc-nav__ic svg { width: 18px; height: 18px; }
/* عدّادٌ يُقال متى كان فيه ما يُفعل — والصفر لا يُعرض */
.pc-nav__n {
  margin-inline-start: auto; background: var(--pc-bad); color: #fff; border-radius: 999px;
  min-width: 20px; padding: 1px 6px; font-size: 11px; font-weight: 900; text-align: center;
}
.pc-nav__btn[aria-current="page"] .pc-nav__n { background: var(--pc-gold); color: #1b1405; }

/* الأقسام: يُعرض واحدٌ ويُخفى الباقي — والمخفيّ يخرج من شجرة الوصول أيضًا */
.pc-panel[hidden] { display: none; }
.pc-panel { display: grid; gap: var(--pc-5); }

/* ================= الوصول ================= */
.pc :where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pc-navy); outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .pc *, .pc *::before, .pc *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* التباين العالي: الحدود تُرى، فلا تُقرأ البطاقات كتلةً واحدة */
@media (prefers-contrast: more) {
  .pc { --pc-line: #91a2bb; --pc-muted: #3d4d63; }
}

/* ================= جرس التنبيهات =================
 * التنبيهات كانت بطاقاتٍ في صدر المحتوى تُزاحم ما جاء العميل من أجله في كل
 * زيارة — وفيها «زيارتكم القادمة» وهي رقمٌ ثابت في «نظرة عامة» أصلًا، فتُقال
 * مرتين في شاشةٍ واحدة. صارت خلف جرسٍ في الترويسة: تُطلب عند الحاجة.
 */
.pc-bell-wrap { position: relative; flex: 0 0 auto; }
.pc-bell {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--pc-line); background: var(--pc-surface); color: var(--pc-ink-2);
  display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s;
}
.pc-bell:hover { background: var(--pc-surface-2); color: var(--pc-ink); }
.pc-bell svg { width: 19px; height: 19px; }
.pc-bell--alert { color: var(--pc-warn); border-color: rgba(178, 94, 9, .35); }
.pc-bell__n {
  position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; padding: 0 5px;
  height: 18px; border-radius: 999px; background: var(--pc-bad); color: #fff;
  font-size: 11px; font-weight: 900; line-height: 18px; text-align: center;
}
.pc-bell__n[hidden] { display: none; }

/* اللوح: عرضه من عرض الشاشة فلا يفيض في الجوال، ويُمرَّر إن طال */
.pc-bell-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  width: min(340px, calc(100vw - 2 * var(--pc-pad)));
  max-height: min(70vh, 460px); overflow-y: auto;
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: var(--pc-r); box-shadow: var(--pc-shadow-lg);
  padding: var(--pc-3); display: grid; gap: var(--pc-2);
}
.pc-bell-pop[hidden] { display: none; }
.pc-bell-pop__head { font-size: 12px; font-weight: 900; color: var(--pc-muted); padding: 2px 4px 0; }
.pc-bell-pop #p-notifs { display: grid; gap: var(--pc-2); }