/* ============================================================================
   دليل مستخدم نظام إدارة مركز الصيانة
   ============================================================================
   الأولوية هنا الوضوح قبل الزخرفة: الموظف بيفتح الدليل وهو واقف قدام عربية وعنده سؤال
   محدد — فالمقال لازم يتقرا بسرعة، واللقطة لازم تبان كبيرة، والتنقل لازم يبان كله من أول
   نظرة من غير ما حد يدوّر.

   الألوان مأخوذة من النظام نفسه عشان الدليل يحس إنه جزء منه مش موقع تاني.
   ============================================================================ */

:root {
  --navy: #14163d;
  --navy-soft: #3d4173;
  --accent: #ed1c24;
  --accent-soft: #fbe2e3;
  --info: #1c75bc;
  --info-soft: #e2eef8;
  --ok: #1f8a4c;
  --ok-soft: #e6f4ec;
  --warn: #b8791b;
  --warn-soft: #faf0dd;

  --bg: #f4f3ef;
  --surface: #fff;
  --surface-alt: #faf9f5;
  --border: rgba(20, 22, 61, 0.12);
  --divider: rgba(20, 22, 61, 0.07);

  --text: #14163d;
  --text-2: #4b5060;
  --text-3: #6b7280;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --sidebar-w: 300px;
  --header-h: 60px;

  --font: 'Segoe UI', Tahoma, 'Cairo', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- الشريط العلوي ---------- */
.hc-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 2px solid var(--accent);
}

.hc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.02rem;
  color: #fff;
  white-space: nowrap;
}

.hc-brand:hover { text-decoration: none; }

.hc-brand-mark {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--accent);
  display: grid; place-items: center;
  font-size: 15px;
}

.hc-brand small {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  line-height: 1.2;
}

/* ---------- الأقسام الرئيسية في الشريط العلوي ----------
   القايمة بتفتح بالـhover والـfocus مع بعض — الفتح بالـhover لوحده بيقفل القسم في وش
   أي حد بيتنقّل بالكيبورد. */
.hc-topnav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
}

.hc-top-item { position: relative; display: flex; align-items: center; }

.hc-top-link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.hc-top-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }

/* القسم الحالي بلون كامل + شريط أحمر تحته — إشارتين مش لون بس. */
.hc-top-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 -3px var(--accent);
}

.hc-caret { font-size: 0.6rem; opacity: 0.65; }

.hc-top-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 16px 44px rgba(20, 22, 61, 0.24);
  padding: 8px;
  display: none;
  z-index: 45;
  max-height: 78vh;
  overflow-y: auto;
}

.hc-top-item:hover .hc-top-menu,
.hc-top-item:focus-within .hc-top-menu { display: block; }

.hc-top-menu-group + .hc-top-menu-group { margin-top: 10px; }

.hc-top-menu-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-3);
  padding: 0 10px 5px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 3px;
}

.hc-top-menu a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 0.87rem;
}

.hc-top-menu a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

/* ---------- البحث ---------- */
.hc-search {
  position: relative;
  flex: 1;
  max-width: 520px;
}

.hc-search input {
  width: 100%;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: 0 38px 0 12px;
  font-family: inherit;
  font-size: 0.9rem;
}

.hc-search input::placeholder { color: rgba(255,255,255,0.55); }

.hc-search input:focus {
  outline: none;
  background: #fff;
  color: var(--text);
  border-color: var(--accent);
}

.hc-search input:focus::placeholder { color: var(--text-3); }

.hc-search-icon {
  position: absolute;
  inset-inline-end: 12px;
  top: 9px;
  opacity: 0.6;
  pointer-events: none;
  font-size: 15px;
}

.hc-results {
  position: absolute;
  top: 46px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px rgba(20,22,61,0.22);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
}

.hc-results.open { display: block; }

.hc-result {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
}

.hc-result:last-child { border-bottom: none; }
.hc-result:hover { background: var(--surface-alt); text-decoration: none; }

.hc-result-title { font-weight: 700; font-size: 0.92rem; }
.hc-result-cat { font-size: 0.76rem; color: var(--text-3); }

.hc-results-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 0.88rem; }

/* ---------- التخطيط ---------- */
.hc-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
  align-items: start;
}

/* ---------- الشريط الجانبي ---------- */
.hc-sidebar {
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 22px 16px 60px;
  border-inline-start: 1px solid var(--border);
  background: var(--surface-alt);
}

.hc-nav-group + .hc-nav-group { margin-top: 22px; }

.hc-nav-title {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-3);
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 5px;
}

.hc-nav a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hc-nav a:hover { background: rgba(20,22,61,0.05); color: var(--text); text-decoration: none; }

.hc-nav a.active {
  background: var(--accent-soft);
  color: #c8161e;
  font-weight: 700;
  box-shadow: inset 3px 0 var(--accent);
}

/* ---------- المحتوى ---------- */
.hc-main { padding: 30px 40px 90px; max-width: 1080px; }

.hc-crumbs {
  font-size: 0.82rem;
  color: var(--text-3);
  margin-bottom: 14px;
}

.hc-crumbs span { margin: 0 6px; opacity: 0.5; }

.hc-article h1 {
  font-size: 1.85rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.3;
}

.hc-lede {
  font-size: 1.02rem;
  color: var(--text-2);
  margin: 0 0 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.hc-article h2 {
  font-size: 1.28rem;
  font-weight: 800;
  margin: 38px 0 12px;
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--accent);
  line-height: 1.4;
}

.hc-article h3 { font-size: 1.05rem; font-weight: 700; margin: 26px 0 8px; }

.hc-article p { margin: 0 0 14px; }

.hc-article ul, .hc-article ol { margin: 0 0 16px; padding-inline-start: 24px; }
.hc-article li { margin-bottom: 7px; }

.hc-article code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.88em;
  font-family: 'Consolas', monospace;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ---------- الخطوات المرقّمة ---------- */
.hc-steps { counter-reset: step; margin: 22px 0; }

.hc-step {
  counter-increment: step;
  position: relative;
  padding-inline-start: 50px;
  padding-bottom: 26px;
  border-inline-start: 2px solid var(--border);
  margin-inline-start: 16px;
}

.hc-step:last-child { border-inline-start-color: transparent; padding-bottom: 4px; }

.hc-step::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: -17px;
  top: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 0.92rem;
}

.hc-step h3 { margin: 3px 0 8px; font-size: 1.02rem; }

/* ---------- اللقطات ---------- */
figure.hc-shot { margin: 18px 0 22px; }

figure.hc-shot img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 20px rgba(20,22,61,0.1);
  cursor: zoom-in;
  display: block;
  background: #fff;
}

figure.hc-shot figcaption {
  font-size: 0.84rem;
  color: var(--text-3);
  margin-top: 8px;
  text-align: center;
}

/* الفيديو بياخد نفس إطار اللقطة عشان الاتنين يقرأوا كنفس النوع من المحتوى.
   الخلفية سودا لأن الفيديو أبعاده مش بالظبط زي الحاوية دايمًا، فالحواف تبان مقصودة. */
figure.hc-video video {
  width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #000;
  box-shadow: 0 4px 20px rgba(20, 22, 61, 0.1);
}

/* الفيديو مالوش معنى على الورق — بيتشال ويتساب مكانه سطر بيقول إنه موجود على الموقع. */
@media print {
  figure.hc-video video { display: none; }
  figure.hc-video figcaption::after { content: ' (متاح على الموقع)'; }
}

/* التكبير: اللقطة بتتفتح بعرض الشاشة عشان النص الصغير فيها يتقرا */
.hc-zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20,22,61,0.93);
  display: none;
  place-items: center;
  padding: 26px;
  cursor: zoom-out;
}

.hc-zoom.open { display: grid; }
.hc-zoom img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); }

/* ---------- الملاحظات ---------- */
.hc-note {
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 20px 0;
  border-inline-start: 4px solid;
  font-size: 0.94rem;
}

.hc-note strong { display: block; margin-bottom: 4px; }

.hc-note-info { background: var(--info-soft); border-color: var(--info); }
.hc-note-warn { background: var(--warn-soft); border-color: var(--warn); }
.hc-note-ok { background: var(--ok-soft); border-color: var(--ok); }
.hc-note-danger { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- الجداول ---------- */
.hc-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.9rem;
  border: 1px solid var(--navy);
}

.hc-article th, .hc-article td {
  border: 1px solid var(--navy);
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}

.hc-article th { background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap; }
.hc-article tbody tr:nth-child(even) { background: var(--surface-alt); }

/* ---------- الصفحة الرئيسية ---------- */
.hc-hero {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  margin-bottom: 30px;
}

.hc-hero h1 { font-size: 2rem; margin: 0 0 10px; font-weight: 800; }
.hc-hero p { font-size: 1.04rem; color: var(--text-2); margin: 0; max-width: 62ch; }

.hc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0 34px;
}

.hc-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  color: var(--text);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.hc-card:hover {
  text-decoration: none;
  border-color: var(--navy-soft);
  box-shadow: 0 6px 22px rgba(20,22,61,0.1);
}

.hc-card-icon { font-size: 1.5rem; margin-bottom: 8px; display: block; }
.hc-card h3 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 800; }
.hc-card p { margin: 0; font-size: 0.86rem; color: var(--text-3); line-height: 1.6; }

/* ---------- الباقات ----------
   الباقة الوسطانية بس هي اللي متعلّمة. تمييز أكتر من واحدة معناه مفيش تمييز، والعميل
   بيقف قدام أربع بطاقات كلها بتصرخ عليه فمش بيقرا ولا واحدة. */
.hc-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 26px 0 34px;
  align-items: stretch;
}

.hc-plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 20px;
  position: relative;
}

.hc-plan-featured {
  border: 2px solid var(--accent);
  box-shadow: 0 8px 30px rgba(237, 28, 36, 0.12);
}

.hc-plan-badge {
  position: absolute;
  top: -11px;
  inset-inline-start: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
}

.hc-plan-name { font-size: 1.12rem; font-weight: 800; margin-bottom: 4px; }

.hc-plan-for {
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.5;
  min-height: 2.6em;
  margin-bottom: 14px;
}

/* كل خيار سعر سطر مستقل بحدّه — مش مكدّسين في جملة واحدة. صاحب المركز بيقارن الشهري
   بالسنوي بالمرة الواحدة، والمقارنة دي لازم تبان بنظرة مش بقراءة. */
.hc-plan-rates {
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.hc-rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--divider);
}

.hc-rate:last-child { border-bottom: none; }

.hc-rate > span {
  font-size: 0.82rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hc-rate b {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}

.hc-rate small { font-size: 0.76rem; color: var(--text-3); }

/* التوفير بلون النجاح — رقم محسوب من الأسعار نفسها، مش ملصق دعائي. */
.hc-rate em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 999px;
  padding: 1px 7px;
}

/* الشراء مرة واحدة بيتعلّم بخلفية هادية — هو أكبر رقم في الكارت، والتمييز بيمنع إن العين
   تقرا الرقم الكبير على إنه السعر الشهري. */
.hc-rate-once { background: var(--surface-alt); }

.hc-rate-custom b { font-size: 1.05rem; }

.hc-plan ul { margin: 0; padding-inline-start: 18px; font-size: 0.88rem; }
.hc-plan li { margin-bottom: 6px; color: var(--text-2); }

/* ---------- دعوة للتواصل ---------- */
.hc-cta {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin: 34px 0 10px;
}

.hc-cta h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.hc-cta p { color: rgba(255, 255, 255, 0.82); margin: 0 0 16px; font-size: 0.94rem; }
.hc-cta a { color: #fff; text-decoration: underline; }

.hc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hc-cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  font-size: 0.94rem;
}

.hc-cta-btn:hover { background: #c8161e; }

.hc-cta-btn-2 {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

.hc-cta-btn-2:hover { background: rgba(255, 255, 255, 0.1); }

@media print {
  .hc-cta-actions { display: none; }
  .hc-plan-featured { box-shadow: none; }
}

/* ---------- السابق / التالي ---------- */
.hc-pager {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.hc-pager a {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text);
}

.hc-pager a:hover { border-color: var(--navy-soft); text-decoration: none; }
.hc-pager span { display: block; font-size: 0.76rem; color: var(--text-3); margin-bottom: 2px; }
.hc-pager strong { font-size: 0.94rem; }
.hc-pager .next { text-align: end; }

/* ---------- زر القائمة على الموبايل ---------- */
.hc-burger {
  display: none;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}

/* ---------- الاستجابة ---------- */
@media (max-width: 1000px) {
  .hc-layout { grid-template-columns: 1fr; }

  .hc-sidebar {
    position: fixed;
    top: var(--header-h);
    inset-inline-end: 0;
    width: 290px;
    height: calc(100vh - var(--header-h));
    max-height: none;
    transform: translateX(-100%);
    transition: transform 0.2s;
    z-index: 35;
    box-shadow: -8px 0 30px rgba(20,22,61,0.18);
  }

  [dir='rtl'] .hc-sidebar { transform: translateX(100%); }
  .hc-sidebar.open { transform: translateX(0) !important; }

  .hc-burger { display: block; }
  .hc-main { padding: 22px 18px 70px; }
  .hc-brand small { display: none; }

  /* الأقسام الرئيسية بتختفي من الشريط على الموبايل — مساحة الشريط بتكفي البراند والبحث
     بس. التنقّل بيبقى من زرار القائمة، واللي بيفتح الشريط الجانبي بمجموعات القسم. */
  .hc-topnav { display: none; }
  .hc-hero { padding: 24px 20px; }
  .hc-hero h1 { font-size: 1.5rem; }
}

/* ---------- الطباعة ---------- */
@media print {
  .hc-header, .hc-sidebar, .hc-pager, .hc-zoom { display: none !important; }
  .hc-layout { display: block; }
  .hc-main { padding: 0; max-width: none; }
  figure.hc-shot img { box-shadow: none; page-break-inside: avoid; }
  .hc-step { page-break-inside: avoid; }
  body { background: #fff; font-size: 12pt; }
}