/* ============================================================
   شركة الساعي للاستقدام — نظام التصميم البصري (حزمة Claude Design)
   يُبنى فوق نفس بنية Jinja الحالية — لا تغيير على أي name/id/action.
   ============================================================ */

:root {
  /* الحقن لكل مكتب — راجع base.html: <body style="--office-primary: ..."> */
  --office-primary: #12294D;
  --office-primary-dark: #0B1E38;
  --office-primary-hover: #2A4470;
  --office-primary-soft: #E8ECF3;

  --gold: #C9962C;
  /* #A97C1E السابق كان 3.4:1 على gold-soft — دون AA. هذي الدرجة 4.86:1 */
  --gold-text: #8A6415;
  --gold-soft: #FBF3E2;
  --gold-border: #EEDCB4;

  --surface: #FFFFFF;
  --bg: #F5F6F8;
  --bg-alt: #F0F2F6;
  --border: #E3E6EC;
  --border-strong: #D5D9E1;
  --text: #0B1E38;
  --text-muted: #5C6675;

  --ok-bg:#E8F5EE; --ok-fg:#166B41; --ok-bd:#CBE7D8;   /* متاحة */
  --hold-bg:#FDF3E0; --hold-fg:#8A5B00; --hold-bd:#F0DDB6; /* محجوزة */
  --proc-bg:#E9F1FB; --proc-fg:#1B5A9B; --proc-bd:#C8DBF2; /* تحت الإجراء */
  --off-bg:#F0F1F3; --off-fg:#575F6B; --off-bd:#DEE0E5;  /* غير متاحة */
  --danger-bg:#FDECEA; --danger-fg:#B3261E; --danger-bd:#F3C9C4;
  /* أخضر واتساب أغمق من الرسمي لرفع التباين مع النص الأبيض إلى 4.9:1 */
  --wa: #0F7A6E; --wa-hover: #0C6A5F;

  /* درجات مشتقّة من لون المكتب — تعمل مع أي لون بلا قيم مكتوبة يدويًا.
     كل واحدة لها احتياطي ثابت قبلها لمتصفح لا يدعم color-mix (Safari < 16.2). */
  --tint-6: #F4F6F9;   --tint-6: color-mix(in srgb, var(--office-primary) 6%, #fff);
  --tint-8: #F0F3F7;   --tint-8: color-mix(in srgb, var(--office-primary) 8%, #fff);
  --tint-14: #E2E7EF;  --tint-14: color-mix(in srgb, var(--office-primary) 14%, #fff);
  --tint-22: #D2DAE6;  --tint-22: color-mix(in srgb, var(--office-primary) 22%, #fff);
  --shade-82: #0F2240; --shade-82: color-mix(in srgb, var(--office-primary) 82%, #000);
  --shade-80: #0E2039; --shade-80: color-mix(in srgb, var(--office-primary) 80%, #000);

  --r-lg: 18px;
  --shadow-card: 0 1px 2px rgba(11,30,56,.04), 0 10px 26px -18px rgba(11,30,56,.25);
  --shadow-card-hover: 0 3px 6px rgba(11,30,56,.06), 0 20px 36px -18px rgba(11,30,56,.34);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --r-sm:6px; --r-md:10px; --r-pill:999px;
  --shadow:0 1px 2px rgba(11,30,56,.06);
  --shadow-hover:0 2px 8px rgba(11,30,56,.09);
  --control-h:42px;
}

.catalog-body {
  margin: 0;
  font-family:'Tajawal',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.75;
}

.catalog-container { max-width: 1360px; margin: 0 auto; padding: var(--sp-8) var(--sp-10) 3rem; }

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--shadow);
}
.card + .card { margin-top: var(--sp-5); }

.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; }
.form-grid.form-grid-2 { grid-template-columns: repeat(2,1fr); }
.form-grid.form-grid-3 { grid-template-columns: repeat(3,1fr); }
.form-grid .form-field.full { grid-column: 1 / -1; }
.form-grid label { display:block; font-size:12.5px; font-weight:700;
  color:var(--text-muted); margin-bottom:var(--sp-2); }
.form-grid input, .form-grid select, .form-grid textarea,
.input {
  width:100%; height:var(--control-h); box-sizing:border-box;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:0 12px; font-family:inherit; font-size:14px;
  background:var(--surface); color:var(--text);
}
textarea.input { height: auto; padding: 10px 12px; }
.form-grid input:focus, .form-grid select:focus, .input:focus {
  outline:none; border-color:var(--office-primary);
  box-shadow:0 0 0 3px rgba(18,41,77,.10);
}
.field-error { display:block; color:var(--danger-fg); font-size:.78rem; margin-top:.3rem; }

.btn { height:var(--control-h); padding:0 20px; border-radius:var(--r-sm);
  border:1px solid transparent; font-family:inherit; font-size:14px;
  font-weight:700; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; gap:.4rem; text-decoration:none; }
.btn-primary { background:var(--office-primary); color:#fff; }
.btn-primary:hover { background:var(--office-primary-hover); color:#fff; text-decoration:none; }
.btn-secondary { background:var(--surface); color:var(--office-primary);
  border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--bg); text-decoration:none; }
.btn-accent, .btn-wa { background:var(--wa); color:#fff; }
.btn-accent:hover, .btn-wa:hover { background:var(--wa-hover); color:#fff; text-decoration:none; }
.btn-danger { background:var(--surface); color:var(--danger-fg);
  border-color:var(--danger-bd); }
.btn-danger:hover { background:var(--danger-bg); }
.btn[disabled] { background:var(--office-primary-soft);
  color:var(--text-muted); cursor:not-allowed; }
.btn-sm { height:30px; padding:0 10px; font-size:12.5px; }
.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.muted { color: var(--text-muted); }
.text-faint { color: var(--text-muted); }

.badge, .status-badge { display:inline-block; border-radius:var(--r-pill);
  padding:3px 12px; font-size:12.5px; font-weight:700; border:1px solid; }
.status-available { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd); }
.status-reserved  { background:var(--hold-bg); color:var(--hold-fg); border-color:var(--hold-bd); }
.status-in_process{ background:var(--proc-bg); color:var(--proc-fg); border-color:var(--proc-bd); }
.status-unavailable{ background:var(--off-bg); color:var(--off-fg); border-color:var(--off-bd); }
.service-badge, .badge-service { display:inline-flex; align-items:center; width:fit-content;
  border-radius:var(--r-sm); background:var(--gold-soft);
  color:var(--gold-text); border:1px solid var(--gold-border);
  padding:3px 10px; font-size:12.5px; font-weight:700; }

/* ===== تنبيهات موحّدة: بانر التجربة + الأخطاء + النجاح + flash ===== */
.alert { display:flex; gap:var(--sp-3); align-items:flex-start;
  border:1px solid; border-radius:8px; padding:12px 14px;
  font-size:13.5px; line-height:1.7; margin-bottom: var(--sp-4); }
.alert::before { content:""; width:8px; height:8px; border-radius:50%;
  margin-top:7px; flex:none; background:currentColor; }
.alert-info   { background:var(--proc-bg); border-color:var(--proc-bd);
  border-inline-start:3px solid var(--proc-fg); color:#123E70; }
.alert-warn   { background:var(--hold-bg); border-color:var(--hold-bd);
  border-inline-start:3px solid var(--hold-fg); color:#7A5209; }
.alert-danger { background:var(--danger-bg); border-color:var(--danger-bd);
  border-inline-start:3px solid var(--danger-fg); color:#8C1D18; }
.alert-success{ background:var(--ok-bg); border-color:var(--ok-bd);
  border-inline-start:3px solid var(--ok-fg); color:#14603B; }
.alert-gold   { background:var(--gold-soft); border-color:var(--gold-border);
  border-inline-start:3px solid var(--gold); color:#7A5209; }
.alert .flash-text { flex: 1; }
.alert .flash-close { background:none; border:none; cursor:pointer; color: inherit; opacity:.6; flex: none; }
.alert .flash-close:hover { opacity: 1; }

/* ===== الشريط العلوي للوحة الإدارة ===== */
.topbar { background:var(--office-primary-dark); min-height:56px;
  padding:var(--sp-2) var(--sp-8); display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-3) var(--sp-6); flex-wrap: wrap; color: #fff; }
.topbar a.catalog-brand, .topbar__brand { display:flex; align-items:center; gap:.6rem;
  color:#fff; text-decoration:none; font-weight:700; font-size:1.02rem; }
.topbar__logo { width:32px; height:32px; border-radius:var(--r-sm);
  background:#fff; overflow:hidden; flex:none; display:grid; place-items:center; }
.topbar__logo img { width:100%; height:100%; object-fit:contain; }
.topbar__logo i { color: var(--office-primary); font-size: 1.1rem; }
.catalog-nav-links { display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap; }
.catalog-nav-links a, .catalog-nav-links span.office-name {
  color:#C9D5E6; text-decoration:none; font-size:.86rem; display:inline-flex; align-items:center; gap:.3rem; }
.catalog-nav-links a:hover { color:#fff; text-decoration:underline; }

/* ===== لوحة الإدارة: إحصاءات ===== */
.stat-grid, .stat-row { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); margin-bottom: var(--sp-5); }
.stat, .stat-tile { background:var(--surface); border:1px solid var(--border);
  border-top:3px solid var(--office-primary); border-radius:var(--r-md);
  padding:14px 16px; box-shadow:var(--shadow); }
.stat__label, .stat-tile .label { font-size:12.5px; font-weight:700; color:var(--text-muted); }
.stat__value, .stat-tile .num { font-size:26px; font-weight:800; line-height:1.2; color: var(--text); }

/* جدول السير كشبكة CSS — ينهار لبطاقات على الجوال */
.catalog-table-wrap { overflow: visible; }
.rows { display:grid; grid-template-columns:1.6fr 1fr 1.2fr 170px 90px 1fr; }
.rows .row { display: contents; }
.rows__head { background:var(--bg); border-bottom:1px solid var(--border);
  font-size:12px; font-weight:700; color:var(--text-muted); }
.rows__cell { padding:8px 0; font-size:13.5px; align-self:center; }
.row-actions { display:flex; gap:6px; flex-direction:row-reverse; flex-wrap: wrap; }
.row-actions .btn { height:30px; padding:0 10px; font-size:12.5px; }
.row-actions form { display: inline; }

@keyframes saved-pulse {
  0%   { box-shadow:0 0 0 0 rgba(201,150,44,.55); }
  100% { box-shadow:0 0 0 6px rgba(201,150,44,0); }
}
.is-saved { animation:saved-pulse .6s ease-out; border-color:var(--gold); }

/* وضع القراءة فقط بعد انتهاء التجربة — الإعدادات وزر الخروج مستثنيان */
.readonly .btn:not(.btn-settings), .readonly select, .readonly .row-actions {
  opacity:.55; pointer-events:none;
}

/* ===== الرفع ===== */
.dropzone { border:2px dashed #C3CBD8; border-radius:var(--r-md);
  background:#FAFBFC; padding:36px var(--sp-6); text-align:center; }
.dropzone:hover, .dropzone:focus-within { border-color:var(--office-primary); background:#F7F9FC; }
.dropzone i { font-size: 2rem; color: var(--office-primary); }
.file-row { display:flex; align-items:center; gap:var(--sp-3);
  border:1px solid var(--border); border-radius:var(--sp-2); padding:9px 12px; margin-top: .5rem; }
.file-row--dupe { border-color:var(--gold-border); background:var(--gold-soft); }
.progress { height:6px; border-radius:var(--r-pill); background:var(--office-primary-soft); overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--office-primary); }
.spinner { display:inline-block; width:40px; height:40px; border-radius:50%;
  border:3px solid var(--office-primary-soft); border-top-color:var(--office-primary);
  animation:spin 1s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== المراجعة ===== */
.fieldset-title { display:flex; align-items:center; gap:var(--sp-3);
  font-size:15px; font-weight:700; margin:var(--sp-6) 0 var(--sp-4); color: var(--text); }
.fieldset-title:first-child { margin-top: 0; }
.fieldset-title::after { content:""; flex:1; height:1px; background:#F0F1F3; }
.sensitive { border:1px solid var(--danger-bd); border-radius:var(--r-md);
  background:#FFFBFB; padding:18px; margin-top: var(--sp-4); }
.sensitive__note { font-size:13px; font-weight:700; color:#8C1D18; margin: 0 0 var(--sp-3); }
.field--other { border:1px dashed var(--gold); border-radius:var(--r-sm);
  background:#FDFAF3; padding:6px 10px; }

/* ===== النشر ===== */
.consent, .consent-check { display:flex; gap:var(--sp-3); align-items:flex-start;
  border:2px solid var(--gold); background:#FDFAF3;
  border-radius:var(--sp-2); padding:var(--sp-4); margin-top: var(--sp-4); color: var(--text); font-size: .88rem; line-height: 1.6; }
.consent input[type="checkbox"], .consent-check input { width:20px; height:20px;
  margin:2px 0 0; flex:none; accent-color:var(--office-primary); }

/* ===== الإعدادات ===== */
.switch-row { display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); padding:14px 0; border-bottom:1px solid #F0F1F3; }
.switch-row:last-child { border-bottom:none; }
.switch-row label { margin: 0; font-size: .92rem; color: var(--text); font-weight: 500; }
.switch-wrap { position: relative; display: inline-flex; align-items: center; flex: none; }
.switch-wrap input[type="checkbox"] { position:absolute; opacity:0; width:46px; height:26px; margin:0; cursor:pointer; }
.switch { width:46px; height:26px; border-radius:var(--r-pill);
  background:var(--border-strong); position:relative; flex:none; transition: background .15s; }
.switch::after { content:""; position:absolute; top:3px; right:3px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  transition: inset-inline-start .15s ease, inset-inline-end .15s ease; }
.switch-wrap input:checked + .switch { background:var(--office-primary); }
.switch-wrap input:checked + .switch::after { right:auto; left:3px; }

/* ===== الكتالوج العام — واجهة العميل النهائي ===== */

/* رأس المكتب: شريط بلون المكتب يحمل الشعار والاسم وعناصر الثقة والإحصاء */
.office-hero {
  /* background-color منفصل عن background-image عمدًا: كتابة
     `background: linear-gradient(...)` بالمختصر تصفّر background-color،
     فيبقى النص الأبيض بلا خلفية صلبة لو فشل التدرّج (طباعة/دعم ناقص). */
  background-color: var(--office-primary);
  background-image: linear-gradient(180deg, var(--office-primary), var(--shade-80));
  color: #fff;
  margin: calc(var(--sp-8) * -1) calc(var(--sp-10) * -1) var(--sp-6);
  padding: var(--sp-8) var(--sp-10);
}
.office-hero-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.office-hero-id { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }

.office-logo-box {
  width: 88px; height: 88px; border-radius: var(--r-lg);
  background: #fff; overflow: hidden; flex: none;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
}
.office-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.office-logo-box i { color: var(--office-primary); font-size: 2.4rem; }
/* بديل الشعار: أول حرف من اسم المكتب — أفضل من مربع فارغ */
.office-logo-box .office-initial { font-size: 2.2rem; font-weight: 800; color: var(--office-primary); }

.office-hero h1 { margin: 0; font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1.2; }
.office-hero-tagline { font-size: 1rem; color: rgba(255,255,255,.86); margin: 6px 0 10px; }
.office-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.office-trust span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill); padding: 5px 11px;
}
.office-hero-stats { margin-inline-start: auto; display: flex; gap: 10px; }
.office-stat {
  width: 118px; padding: 14px 10px; text-align: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
}
/* أبيض وليس ذهبيًا عمدًا: لون الرأس يأتي من إعدادات كل مكتب، فأي درجة ذهبية
   ثابتة تفشل في التباين مع بعض الألوان. الأبيض مضمون فوق أي لون داكن. */
.office-stat b { display: block; font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; }
.office-stat span { display: block; font-size: .75rem; color: rgba(255,255,255,.82); margin-top: 6px; }

/* شريط التواصل — يبقى تحت الرأس، بخلفية فاتحة الآن بدل الكحلي المكرر */
.contact-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px var(--sp-5); display: flex; flex-wrap: wrap;
  gap: 6px var(--sp-6); align-items: center; color: var(--text-muted);
  font-size: 12.5px; margin-bottom: var(--sp-5);
}
.contact-bar b, .contact-bar strong { color: var(--text); font-weight: 700; }
.contact-bar a { color: var(--text); font-weight: 700; }
.contact-bar i { color: var(--office-primary); }
.office-hours, .office-contact-channels { display: flex; flex-wrap: wrap; gap: 6px var(--sp-5); align-items: center; }

/* شرائح سريعة لأكثر الجنسيات/المهن */
.quick-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.quick-chips a {
  font-size: .82rem; font-weight: 600; color: var(--office-primary);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 8px 16px; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.quick-chips a:hover { background: var(--tint-6); border-color: var(--office-primary); transform: translateY(-1px); text-decoration: none; }
.quick-chips a.is-active { background: var(--office-primary); color: #fff; border-color: var(--office-primary); }
.quick-chips .chip-sep { width: 1px; background: var(--border-strong); margin: 0 4px; }

.public-filters { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem;
  margin-bottom:1.6rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:1rem; }
.public-filters .filter-search { grid-column: span 2; }
.filter-actions { display:flex; align-items:flex-end; gap:.5rem; }
.filter-actions .btn { flex:1; }

.results-toolbar { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; color:var(--text-muted); font-size:.88rem; margin:0 0 .8rem; }
.results-toolbar strong { color:var(--text); font-size: 1rem; font-weight: 800; }

/* ---------- بطاقة المرشّحة ----------
   عمود هوية ملوّن على اليمين، ثم الاسم والمهنة والحقائق، وتذييل التكلفة.
   البطاقة كلها وسم <a> واحد — لا روابط ولا أزرار بداخلها. */
/* min(330px,100%) يمنع تجاوز العرض على الشاشات الأضيق من 330px، ويعطي
   عمودًا واحدًا على الجوال وعمودين على اللوحي وثلاثة على سطح المكتب تلقائيًا. */
.candidate-grid { display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); }
.candidate-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* style.css يعرّف .candidate-card بنفس التخصيص لأداة الاستخراج المستقلة
     (flex-direction: column وpadding وgap). لا نعدّله هناك حتى لا تنكسر تلك
     الأداة، فنصرّح بالقيم الثلاث هنا بدل الاعتماد على ترتيب الملفات فقط. */
  flex-direction: row; padding: 0; gap: 0;
}
.candidate-card:hover,
.candidate-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--tint-22);
  text-decoration: none;
}
.candidate-id-col {
  width: 106px; flex: none; padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--tint-8); border-inline-end: 1px solid var(--tint-14);
}
.candidate-photo-frame {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: #EEF1F4;
}
.candidate-photo-frame > img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center top;
}
.candidate-photo-frame.photo-mode-cover > img {
  object-fit: cover; object-position: center 15%;
}
.candidate-photo-frame > img[hidden] { display: none; }
.candidate-thumb { width: 78px; border-radius: 12px; border: 1px solid var(--border); }
/* بديل الصورة: الحرف الأول بخلفية مشتقة من لون المكتب — الحالة الافتراضية
   لأغلب المكاتب لأن عرض الصور مطفأ عندها */
.candidate-initial {
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.9rem; font-weight: 800;
  color: var(--shade-82); background: #fff; border: 2px solid var(--tint-22);
}
.candidate-body { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.candidate-card-head { display: flex; align-items: center; gap: 8px; }
.candidate-card .name { font-weight: 800; font-size: 1.2rem; color: var(--text); line-height: 1.25; }
.candidate-card-head .service-badge { margin-inline-start: auto; flex: none; }
.candidate-role { color: var(--text-muted); font-size: .88rem; font-weight: 500; margin-top: -5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.candidate-facts span {
  font-size: .78rem; font-weight: 500; color: var(--office-primary);
  background: var(--tint-6); border: 1px solid var(--tint-14);
  border-radius: 7px; padding: 4px 9px;
}
.candidate-card .skills { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* التكلفة أبرز رقم بالبطاقة — أول ما يسأل عنه العميل */
.candidate-price {
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border);
  display: flex; align-items: flex-end; gap: 8px;
}
.candidate-price small { display: block; font-size: .72rem; color: var(--gold-text); font-weight: 700; }
.candidate-price b { display: block; font-size: 1.32rem; font-weight: 800; line-height: 1.15; color: var(--text); }
.candidate-price .go { margin-inline-start: auto; font-size: .82rem; font-weight: 700; color: var(--office-primary); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.match-score { align-self:start; background:var(--gold-soft); border:1px solid var(--gold-border);
  color:var(--gold-text); border-radius:999px; padding:.18rem .55rem; font-size:.72rem; font-weight:700; }

.pagination { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1.5rem; color:var(--text-muted); font-size:.88rem; }

.empty-state { text-align:center; padding:56px var(--sp-6); color: var(--text-muted); }
.empty-state.is-search {
  background: var(--bg-alt); border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* > i وليس i: المحدّد بالنسل كان يطال أيقونة الزر أيضًا فتُرسم
   بحجم 44.8px داخل زر ارتفاعه 42px وتفيض خارجه. */
.empty-state.is-search > i { font-size: 2.4rem; color: var(--tint-22); }
.empty-state.is-search strong { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.empty-state.is-search p { max-width: 46ch; margin: 0; }

/* مكتب جديد قبل أول نشر — حالة ترحيب لا حالة خطأ: خلفية مصمتة وإطار كامل
   بدل الإطار المتقطّع الذي يوحي بأن شيئًا ناقصًا أو معطّلًا. */
.empty-state.is-coming-soon {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 64px var(--sp-6);
}
.empty-state.is-coming-soon > i { font-size: 2.8rem; color: var(--office-primary); }
.empty-state.is-coming-soon strong { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.empty-state.is-coming-soon p { max-width: 48ch; margin: 0; }
.empty-state.is-coming-soon .btn-row { margin-top: 6px; justify-content: center; flex-wrap: wrap; }

.candidate-detail-card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:1.4rem; max-width:480px; }
.candidate-detail-card .row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.95rem; }
.candidate-detail-card .row:last-child { border-bottom:none; }

/* ===== صفحة السيرة العامة (ورقة CV) ===== */
.cv-sheet {
  max-width: 900px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card);
}
/* شريط علوي رفيع بتدرّج من لون المكتب إلى الذهبي — لمسة هوية بلا ضجيج */
.cv-accent { height: 8px; background: linear-gradient(90deg, var(--office-primary), var(--gold)); }

.cv-head { padding: var(--sp-6) var(--sp-8); display: flex; gap: var(--sp-6); align-items: flex-start; border-bottom: 1px solid var(--border); }
.cv-portrait-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.cv-portrait { width: 132px; border-radius: 16px; border: 1px solid var(--border); }
.cv-initial {
  width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 3.2rem; font-weight: 800;
  color: var(--shade-82); background: var(--tint-8); border: 3px solid var(--tint-22);
}
.cv-eyebrow { color: var(--text-muted); font-size: .72rem; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* معاينة المراجعة تستخدم نفس الإطار والقواعد اللذين يراهما الزائر العام. */
.candidate-photo-review {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start; gap: var(--sp-5);
}
.candidate-photo-review__controls { min-width: 0; }
.candidate-photo-review__preview { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.review-photo-frame { width: min(220px, 100%); border: 1px solid var(--border); border-radius: 16px; }
.candidate-photo-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px;
  color: var(--text-muted); font-size: .82rem; text-align: center;
}
.candidate-photo-placeholder[hidden] { display: none; }
.candidate-photo-placeholder i { font-size: 2rem; }
.photo-mode-options { border: 0; padding: 0; margin: var(--sp-4) 0 0; }
.photo-mode-options legend { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.photo-mode-option { display: inline-flex !important; align-items: center; gap: 7px; margin-inline-end: var(--sp-4); cursor: pointer; }
.photo-mode-option input { width: auto !important; height: auto !important; margin: 0; accent-color: var(--office-primary); }

.cv-identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cv-identity-top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.cv-identity h1 { margin: 0 0 3px; color: var(--text); font-size: 2rem; font-weight: 800; line-height: 1.15; }
.cv-identity h1 + p { color: var(--text-muted); margin: 0; font-size: 1.05rem; }
.cv-identity-top .status-badge { margin-inline-start: auto; flex: none; font-size: .85rem; padding: 7px 15px; }
.cv-badges { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

/* كتلة التكلفة — أبرز عنصر بالصفحة بعد الاسم */
.cv-price {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 14px 18px; border-radius: 14px;
  background: var(--gold-soft); border: 1px solid var(--gold-border);
}
.cv-price small { display: block; font-size: .74rem; color: var(--gold-text); font-weight: 700; }
.cv-price b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: var(--text); }
.cv-price .cv-salary { margin-inline-start: auto; text-align: end; }
.cv-price .cv-salary small { color: var(--text-muted); font-weight: 600; }
.cv-price .cv-salary b { font-size: 1.05rem; font-weight: 700; }

.cv-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.cv-facts div { padding: 16px 20px; border-inline-start: 1px solid var(--border); }
.cv-facts div:last-child { border-inline-start: none; }
.cv-facts span, .cv-facts strong { display: block; }
.cv-facts span { color: var(--text-muted); font-size: .76rem; }
.cv-facts strong { color: var(--text); margin-top: .25rem; font-size: 1.05rem; font-weight: 700; }

.cv-section { padding: var(--sp-5) var(--sp-8); }
.cv-section h2 { display: flex; align-items: center; gap: .45rem; color: var(--text); font-size: 1rem; font-weight: 800; margin: 0 0 .7rem; }
.cv-section h2 i { color: var(--gold); }
.cv-section p { color: var(--text-muted); margin: 0; line-height: 1.8; overflow-wrap: anywhere; }
/* المهارات كشرائح بدل سطر نصي طويل */
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chips span {
  font-size: .86rem; color: var(--office-primary);
  background: var(--tint-6); border: 1px solid var(--tint-14);
  border-radius: 9px; padding: 6px 13px;
}
.cv-footer { border-top: 1px solid var(--border); color: var(--text-muted); padding: .85rem var(--sp-8); font-size: .78rem; }

.btn-wa-lg { height: 60px; font-size: 1.12rem; border-radius: 14px; flex: 1; box-shadow: 0 10px 24px -14px rgba(15,122,110,.9); }
.public-cv-actions { max-width: 900px; margin-inline: auto; }

/* ===== الكتالوج المتوقف — بلا شريط علوي ولا تذييل ===== */
.no-chrome .topbar { display: none; }
.no-chrome .catalog-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--sp-5); }
.paused-page { max-width:480px; margin:0 auto; text-align:center; padding:2rem 1.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); }
.paused-logo { width:96px; height:96px; object-fit:contain; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-sm); margin:0 auto 1.2rem; padding: 8px; display:block; }
.paused-page h1 { margin:0 0 .6rem; font-size:1.3rem; color:var(--office-primary); }
.paused-message { color:var(--text-muted); margin-bottom:1.4rem; line-height:1.7; }

.match-notice { display:flex; gap:.75rem; align-items:center; margin: 0 0 var(--sp-5); }
.match-notice i { font-size:1.45rem; }
.match-notice strong, .match-notice span { display:block; }
.match-notice span { font-size:.85rem; margin-top:.12rem; }

.disclaimer-note, .legal-note { font-size:.82rem; color:var(--text-muted); margin-top:1.2rem; line-height: 1.7; }

[dir="ltr"], .ltr-value { direction: ltr; unicode-bidi: isolate; }

/* ===== جوال ===== */
@media (max-width: 768px) {
  .catalog-container { padding: var(--sp-5) var(--sp-4) 5rem; }
  .form-grid, .form-grid.form-grid-2, .form-grid.form-grid-3 { grid-template-columns: 1fr; }
  .btn, .form-grid input, .form-grid select, .input { height: 44px; }
  .empty-state { padding: var(--sp-10) var(--sp-5); }
  .topbar { min-height: 52px; padding: 10px 14px; }
  .catalog-nav-links { gap: 6px var(--sp-3); font-size: .8rem; }
  .stat-grid, .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-grid > :last-child:nth-child(odd), .stat-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  .rows { display: block; }
  .rows__head { display: none; }
  .rows .row { display: block; border:1px solid var(--border); border-radius:var(--r-md);
    background:var(--surface); padding:var(--sp-3); margin-bottom:10px; }
  .rows .row .rows__cell:empty { display: none; }
  .rows__cell { padding: 4px 0; }
  .row-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); margin-top: var(--sp-2); }
  .row-actions .btn { height:40px; font-size:13px; width: 100%; }

  .public-filters { grid-template-columns: 1fr 1fr; }
  .public-filters .filter-search, .filter-actions { grid-column: 1 / -1; }
  /* لا نفرض عمودًا واحدًا هنا: الشبكة نفسها تتكيّف، وفرضه كان يهدر
     عرض اللوحي عند 768px ببطاقة واحدة ممتدة في الصف. */
  .candidate-grid { gap: .7rem; }
  .contact-bar { flex-wrap: nowrap; overflow-x: auto; gap: 0 14px; }

  /* رأس المكتب على الجوال */
  .office-hero { margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-5); padding: var(--sp-5) var(--sp-4); }
  .office-hero-inner { gap: var(--sp-4); }
  .office-hero-id { gap: var(--sp-4); }
  .office-logo-box { width: 64px; height: 64px; border-radius: 16px; }
  .office-logo-box i, .office-logo-box .office-initial { font-size: 1.8rem; }
  .office-hero h1 { font-size: 1.5rem; }
  .office-hero-tagline { font-size: .9rem; }
  .office-hero-stats { margin-inline-start: 0; width: 100%; gap: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; overflow: hidden; }
  .office-stat { width: auto; background: none; border: none; border-inline-start: 1px solid rgba(255,255,255,.16); padding: 10px 8px; }
  .office-stat:last-child { border-inline-start: none; }
  .office-stat b { font-size: 1.3rem; }

  /* شرائح قابلة للتمرير الأفقي داخل حاويتها فقط */
  .quick-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .quick-chips a { white-space: nowrap; flex: none; }
  .quick-chips .chip-sep { display: none; }

  .candidate-id-col { width: 96px; padding: 14px 10px; }
  .candidate-initial, .candidate-thumb { width: 70px; }
  .candidate-initial { height: 70px; font-size: 1.7rem; }
  .candidate-card .name { font-size: 1.1rem; }

  /* صفحة السيرة على الجوال: عمود واحد ورأس ممركز */
  .cv-head { flex-direction: column; align-items: center; text-align: center; padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  .cv-initial, .cv-portrait { width: 108px; }
  .cv-initial { height: 108px; font-size: 2.6rem; }
  .candidate-photo-review { grid-template-columns: 1fr; }
  .cv-identity-top { flex-direction: column; align-items: center; gap: 8px; }
  .cv-identity-top .status-badge { margin-inline-start: 0; }
  .cv-identity h1 { font-size: 1.6rem; }
  .cv-badges { justify-content: center; }
  .cv-price { justify-content: center; text-align: start; }
  .cv-facts { grid-template-columns: 1fr 1fr; }
  .cv-facts div:nth-child(2n) { border-inline-start: none; }
  .cv-facts div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .cv-section { padding: var(--sp-4); }
  .cv-footer { padding: .85rem var(--sp-4); }

  /* زر واتساب كشريط ثابت أسفل الشاشة — الهدف الأساسي بالصفحة */
  .public-cv-actions {
    position: sticky; bottom: 0; z-index: 30;
    margin: var(--sp-4) calc(var(--sp-4) * -1) 0;
    padding: 12px var(--sp-4) calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(245,246,248,.94); border-top: 1px solid var(--border);
    backdrop-filter: blur(6px);
  }
  .public-cv-actions .btn { width: 100%; }
  .btn-wa-lg { height: 56px; }

  .paused-logo { width: 84px; height: 84px; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; }
  .topbar, .public-cv-actions, .public-disclaimer, .flash-list, .contact-bar,
  .office-hero-stats, .whatsapp-fab { display: none !important; }
  .catalog-container { max-width: none; padding: 0; margin: 0; }
  .cv-sheet { max-width: none; width: 100%; border: 1px solid #d8e0e7; box-shadow: none; break-inside: avoid; }
  .cv-accent, .cv-price { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.office-external-link { flex: none; }

/* ===== سبب التقارب على بطاقة الاقتراح ===== */
.match-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--gold-text);
  background: var(--gold-soft);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-sm);
  padding: 6px 9px;
}
.match-reason i { flex: none; margin-top: 3px; }
.match-score { background: var(--gold-soft); border-color: var(--gold-border); color: var(--gold-text); }

/* ===== دعوة وإرسال طلب المواصفات ===== */
.request-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--r);
}
.request-cta strong { display: block; color: var(--office-primary); }
.request-cta span { font-size: .88rem; color: var(--text-muted); }

.request-panel {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  scroll-margin-top: 80px;
}
.request-panel h2 { margin-bottom: .3rem; }

.request-done {
  max-width: 620px;
  margin: 2rem auto;
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.request-done > i { font-size: 3rem; color: var(--ok-fg); }
.request-done h1 { margin: .6rem 0 .3rem; font-size: 1.4rem; }
.request-ref {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--sp-5) 0;
  padding: 12px 28px;
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
}
.request-ref span { font-size: .78rem; color: var(--text-muted); }
.request-ref strong { font-size: 1.3rem; letter-spacing: .06em; color: var(--office-primary); }

.request-summary { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin: 0 0 var(--sp-5); text-align: start; }
.request-summary > div { background: var(--surface); padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; }
.request-summary dt { font-size: .82rem; color: var(--text-muted); margin: 0; }
.request-summary dd { margin: 0; font-size: .92rem; font-weight: 500; }

/* ===== زر واتساب ثابت ===== */
.whatsapp-fab {
  position: fixed;
  inset-inline-end: 18px;
  inset-block-end: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 4px 14px rgba(11, 30, 56, .22);
  text-decoration: none;
}
.whatsapp-fab:hover { background: var(--wa-hover); color: #fff; text-decoration: none; }
.whatsapp-fab i { font-size: 1.25rem; }

/* ===== تنبيه حداثة التوفر ===== */
.availability-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--sp-4);
  padding: 10px 13px;
  border-radius: var(--r-sm);
  font-size: .85rem;
  line-height: 1.7;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.availability-note.is-stale { background: var(--hold-bg); border-color: var(--hold-bd); color: var(--hold-fg); }
.availability-note i { flex: none; margin-top: 4px; }

/* ===== طلبات العملاء بلوحة المكتب ===== */
.rows-requests { grid-template-columns: 130px 1.2fr 1.4fr 130px 1fr 110px; }
.req-status { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; border: 1px solid; }
.req-new { background: var(--proc-bg); color: var(--proc-fg); border-color: var(--proc-bd); }
.req-contacted { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-border); }
.req-following_up { background: var(--hold-bg); color: var(--hold-fg); border-color: var(--hold-bd); }
.req-contracted { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.req-closed { background: var(--off-bg); color: var(--off-fg); border-color: var(--off-bd); }

/* ===== التحليلات ===== */
.period-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.rank-list li:last-child { border-bottom: none; }
.rank-list b { color: var(--office-primary); }

/* ===== صفحة سياسة الخصوصية العامة ===== */
.policy-doc { max-width: 74ch; margin: 0 auto; padding: var(--sp-5) 0 var(--sp-10); }
.policy-doc h1 { font-size: 1.6rem; }
.policy-doc h2 { font-size: 1.05rem; margin-top: var(--sp-6); }
.policy-doc p { color: var(--text-muted); line-height: 1.9; }

@media (max-width: 900px) {
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .rows-requests { grid-template-columns: minmax(0, 1fr); }
  .office-external-link { margin-inline-start: 0; }
  .request-cta { flex-direction: column; align-items: stretch; }
  .request-cta .btn { width: 100%; }
  .whatsapp-fab span { display: none; }
  .whatsapp-fab { padding: 14px; inset-inline-end: 14px; inset-block-end: 14px; }
  .stat-grid[style] { grid-template-columns: 1fr 1fr !important; }
}

@media print {
  .whatsapp-fab, .request-panel, .request-cta { display: none !important; }
}

/* ============================================================
   طبقة إتاحة وصقل — مراجعة 2026-08-18
   ============================================================ */

/* رابط التخطّي: مخفي حتى يصله التركيز بلوحة المفاتيح */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px;
  z-index: 100; background: var(--surface); color: var(--text);
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 2px solid var(--office-primary); font-weight: 700;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-2); }
/* main يستقبل التركيز برمجيًا بعد التخطّي، وحلقته غير مفيدة بصريًا */
.catalog-container:focus { outline: none; }

/* حلقة تركيز موحّدة وواضحة على كل عنصر تفاعلي.
   :focus-visible وحدها: مستخدم الفأرة لا يرى الحلقة، ومستخدم لوحة
   المفاتيح يراها دائمًا. الإزاحة تفصلها عن حدود العنصر فتبقى مقروءة
   فوق الأزرار المملوءة والفاتحة معًا. */
.btn:focus-visible,
.quick-chips a:focus-visible,
.candidate-card:focus-visible,
.whatsapp-fab:focus-visible,
.topbar__brand:focus-visible,
.catalog-nav-links a:focus-visible,
.office-external-link:focus-visible,
.skip-link:focus-visible,
.flash-close:focus-visible,
a:focus-visible {
  outline: 3px solid var(--office-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* الأزرار المملوءة بلون المكتب: حلقة بلون المكتب فوقها تختفي.
   حلقة بيضاء داخلية تفصلها عن الزر فتبقى مرئية على أي لون مكتب. */
.btn-primary:focus-visible,
.btn-wa:focus-visible,
.btn-accent:focus-visible,
.whatsapp-fab:focus-visible {
  outline-color: var(--shade-82);
  box-shadow: 0 0 0 2px #fff;
}
/* الحقول: نبقي box-shadow كمؤشّر بصري، ونضيف حدًّا شفافًا يظهر
   في وضع الألوان القسرية (Windows High Contrast) حيث تُلغى الظلال. */
.form-grid input:focus-visible, .form-grid select:focus-visible,
.input:focus-visible, textarea:focus-visible {
  outline: 2px solid transparent; outline-offset: 1px;
}
@media (forced-colors: active) {
  .btn:focus-visible, a:focus-visible, .input:focus-visible { outline: 3px solid Highlight; }
}

/* روابط داخل نص الفقرات: اللون وحده لا يكفي كدلالة، والتسطير هو
   الدلالة الوحيدة الصامدة مع أي لون مكتب. currentColor يضمن أن
   الرابط يرث تباين النص المحيط بدل لون ثابت قد يسقط دون AA. */
.disclaimer-note a, .privacy-note a, .availability-note a, .cv-footer a {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}
.disclaimer-note a:hover, .privacy-note a:hover {
  text-decoration-thickness: 2px;
}

/* مساحات اللمس: WCAG 2.5.8 يطلب 24×24 كحد أدنى.
   الرقعة تتمدّد بعنصر زائف فيبقى الشكل المرئي كما هو. */
/* المربّع نفسه 20px بصريًا، لكن هدف النقر هو <label> المحيط بالكامل
   (قِيس: 316×104) لأن النص جزء منه — أي فوق حد 24×24 بمراحل.
   لا نضيف عنصرًا زائفًا على <input>: دعمه غير موثوق عبر المتصفحات. */
.consent-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.contact-bar a { position: relative; padding-block: 4px; }
.contact-bar a::after {
  content: ""; position: absolute; inset-inline: 0; top: 50%;
  height: 24px; transform: translateY(-50%);
}

/* التحويم على شاشات اللمس يعلق بعد النقر — نحصره في أجهزة المؤشّر */
@media (hover: none) {
  .candidate-card:hover { transform: none; box-shadow: var(--shadow-card); }
}

/* احترام تفضيل تقليل الحركة: التحوّلات والانتقالات تُلغى،
   ويبقى تغيّر اللون كدلالة ثابتة على الحالة. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .candidate-card:hover, .candidate-card:focus-visible { transform: none; }
}

/* أدوات صغيرة تحلّ محل الأنماط السطرية */
.auth-card { max-width: 400px; margin: 3rem auto; }
.auth-title { font-size: 1.35rem; margin: 0 0 var(--sp-5); text-align: center; }
.btn-block { width: 100%; }
/* حقل بمحتوى لاتيني داخل صفحة RTL: الاتجاه ltr مع بقاء
   المحاذاة على حافة البداية حتى لا يقفز المؤشّر بصريًا */
.ltr-field { direction: ltr; text-align: right; }

/* زر واتساب العائم: على الشاشات العريضة كان يستقر فوق حقول النموذج
   (قِيس: يغطّي select[name=service_type] عند 1440) — عنصر ثابت يحجب
   عنصرًا تفاعليًا عيب استخدام لا تفصيل بصري. والصفحة تعرض أصلًا نفس
   الدعوة داخل شريط التواصل وبطاقة الحالة الفارغة، فتكراره على سطح
   المكتب بلا فائدة. يبقى على الجوال حيث يكون النمط مفيدًا فعلًا. */
@media (min-width: 900px) {
  .whatsapp-fab { display: none; }
}
/* على الجوال: مساحة سفلية تضمن أن آخر عنصر تفاعلي لا يبقى تحت الزر */
@media (max-width: 899px) {
  .catalog-container { padding-bottom: 96px; }
}

/* طول السطر: النص كان يمتد ~190 حرفًا عند 1440 — العين تفقد بداية
   السطر التالي. الحد الأقصى يبقي القراءة ضمن نطاق مريح. */
/* margin-inline:auto ضروري مع max-width: بدونه يلتصق النص بحافة البداية
   (يمين في RTL) بينما الأيقونة والزر يبقيان ممركزين — محاذاة مكسورة. */
.disclaimer-note, .legal-note { max-width: 78ch; }
.empty-state p, .empty-state.is-coming-soon p { max-width: 52ch; margin-inline: auto; }

/* أرضية حجم النص: 11.52px كان دون الحد المقروء للنص الثانوي */
.candidate-price small { font-size: 12px; }
/* وصف نموذج الطلب: فقرة تعليمات تُقرأ سطرًا كاملًا، لا تُمسح كعنوان */
.request-panel > p.muted { max-width: 72ch; }

/* عناوين الصفحات: كل صفحة تحتاج h1 واحدًا يصف غرضها — بنية التنقّل
   الأساسية لقارئ الشاشة، وكانت غائبة عن كل صفحات اللوحة. */
.page-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 var(--sp-5); }
.section-title { font-size: 1.08rem; font-weight: 800; margin: 0 0 1.2rem; }
.section-title-tight { margin-bottom: .5rem; }
.page-narrow { max-width: 980px; margin-inline: auto; }
.card-narrow { max-width: 760px; margin-inline: auto; }
.select-inline { width: auto; height: 32px; padding: .3rem .5rem; font-size: .82rem; }

/* عنصر تنقّل معطّل: يُعرض كنص لا كرابط، فلا يدخل ترتيب التبويب */
.nav-disabled { display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.55); font-size: .95rem; cursor: default; }
/* i.empty-state__icon وليس .empty-state__icon وحده: قاعدة style.css
   `.empty-state i` تخصيصها (0,1,1) يفوق الصنف (0,1,0) فتتجاهله. */
.empty-state i.empty-state__icon { font-size: 2.2rem; color: var(--text-muted); display: block; }
/* عنوان داخل ترويسة مرنة: الهوامش تأتي من الحاوية لا من العنوان */
.page-title-flush { margin: 0; }

/* أزرار الحالة الفارغة: عند الالتفاف على الشاشات الضيقة كانت تتفاوت
   عرضًا (210px مقابل 229px) فتبدو الحوافّ مبعثرة. عرض موحّد يجعل
   الكومة مستقيمة، وحدّ أقصى يمنعها من التمدّد على الشاشات العريضة. */
.empty-state .btn-row { gap: var(--sp-3); }
@media (max-width: 560px) {
  .empty-state .btn-row { flex-direction: column; align-items: stretch; }
  .empty-state .btn-row .btn { width: 100%; }
}

/* style.css يعرّف `.empty-state i { font-size:3rem; display:block;
   margin-bottom:.6rem }` لأداة الاستخراج، وهو محدّد بالنسل فيطال أيقونة
   الزر داخل الحالة الفارغة: تُرسم بـ48px داخل زر ارتفاعه 42px، فتفيض
   وتزيح النص. لا نعدّل style.css حتى لا تنكسر تلك الأداة، فنعيد ضبط
   أيقونة الزر هنا صراحةً. */
.empty-state .btn i {
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  color: inherit;
  line-height: 1;
}

/* منطقة الإجراءات الخطرة: مطويّة افتراضيًا فلا يقع الحذف بضغطة عابرة */
.danger-zone { border: 1px solid var(--danger-bd); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); background: var(--danger-bg); }
.danger-zone > summary { cursor: pointer; font-weight: 700; color: var(--danger-fg); }
.danger-zone > summary:focus-visible { outline: 3px solid var(--danger-fg); outline-offset: 2px; }
.danger-zone p { margin: var(--sp-3) 0; }
.request-privacy-note { max-width: 72ch; }

/* ===== اعتماد صورة المرشّحة وأداة القص ===== */
.photo-approval__hint { max-width: 72ch; }

.photo-candidates { margin-bottom: var(--sp-4); }
.photo-candidates__label { display:block; font-size:12.5px; font-weight:700;
  color: var(--text-muted); margin-bottom: var(--sp-2); }
.photo-candidates__strip { display:flex; gap: var(--sp-2); flex-wrap:wrap; }
.photo-candidate { display:flex; flex-direction:column; gap:7px; align-items:stretch;
  background: var(--surface); border:1px solid var(--border-strong);
  border-radius: var(--r-sm); padding:8px; cursor:pointer;
  font-family:inherit; width:148px; text-align:start; }
.photo-candidate[aria-pressed="true"] { border-color: var(--office-primary);
  background: var(--tint-8); box-shadow: 0 0 0 2px var(--tint-22); }
.photo-candidate:focus-visible { outline:3px solid var(--office-primary); outline-offset:2px; }
.photo-candidate__thumb { display:block; width:100%; aspect-ratio:3 / 4;
  object-fit:contain; object-position:center top; border-radius:6px;
  background:var(--bg-alt); }
.photo-candidate__meta { display:flex; flex-direction:column; gap:2px; }
.photo-candidate__type { font-weight:700; font-size:13px; color: var(--text); }
.photo-candidate__conf { font-size:12px; color: var(--text-muted); }

/* مسرح القص: الصفحة خلفية، والمستطيل فوقها بإحداثيات نسبية */
.crop-stage { position:relative; display:inline-block; max-width:100%;
  border:1px solid var(--border); border-radius: var(--r-sm); overflow:hidden;
  background: var(--bg-alt); touch-action:none; direction:ltr; }
.crop-stage__page { display:block; max-width:100%; height:auto; user-select:none; }
.crop-box { position:absolute; border:2px solid #fff; cursor:move;
  box-shadow: 0 0 0 2px var(--office-primary), 0 0 0 9999px rgba(11,30,56,.42);
  touch-action:none; }
.crop-box:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.crop-box__handle { position:absolute; right:-9px; bottom:-9px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  border:2px solid var(--office-primary); cursor:nwse-resize; }
.crop-help { margin-top: var(--sp-2); font-size:12.5px; }

@media (max-width: 560px) {
  .crop-box__handle { width:26px; height:26px; }   /* هدف لمس أكبر على الجوال */
  .photo-candidates__strip { flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 7px;
    scroll-snap-type:x proximity; }
  .photo-candidate { flex:0 0 132px; width:132px; scroll-snap-align:start; }
}

/* ============================================================
   الرحمة — طبقة الهوية العامة المعزولة. حذف data-office يعيد القيم القديمة.
   ============================================================ */
[data-office="al-rahma"] {
  --surface:var(--office-surface,#FEFEFE);
  --bg:var(--office-canvas,#FAF8F4);
  --bg-alt:#F4F1EC;
  --border:var(--office-border,#E7E1D5);
  --border-strong:#D9D2C4;
  --text:#121110;
  --text-muted:#5C564E;
  --gold:var(--office-primary-strong,#D79D3C);
  --gold-text:#7A5410;
  --gold-soft:var(--office-primary-tint,#FBF6EC);
  --gold-border:var(--office-primary-soft,#E3BF78);
  --office-primary-dark:#121110;
  --office-primary-hover:#ECAE47;
  --tint-6:#FBF6EC;
  --tint-8:#FBF6EC;
  --tint-14:#EFE1C4;
  --tint-22:#E3BF78;
  --shade-82:#7A5410;
  --shadow-card:0 1px 2px rgba(60,45,20,.06);
  --shadow-card-hover:0 10px 32px rgba(60,45,20,.10);
  --r-lg:var(--office-radius,16px);
  --r-md:12px;
  --r-sm:8px;
  --control-h:46px;
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  background:var(--office-canvas,#FAF8F4);
  color:#121110;
  font-size:16px;
}
[data-office="al-rahma"] h1,
[data-office="al-rahma"] h2,
[data-office="al-rahma"] h3,
[data-office="al-rahma"] .name { font-family:'Noto Kufi Arabic',sans-serif; }
[data-office="al-rahma"] .topbar {
  min-height:72px; padding:8px 48px; background:#fff; color:#121110;
  border-bottom:1px solid #EFEBE2;
}
[data-office="al-rahma"] .topbar a.topbar__brand { color:#121110; }
[data-office="al-rahma"] .topbar__logo { width:44px; height:44px; border:1px solid #E3BF78; border-radius:12px; }
[data-office="al-rahma"] .catalog-nav-links a,
[data-office="al-rahma"] .catalog-nav-links span.office-name { color:#5C564E; }
[data-office="al-rahma"] .catalog-container { max-width:1440px; padding:48px 48px 88px; }
[data-office="al-rahma"] .office-hero {
  margin:-48px -48px 24px; padding:56px 48px 48px; color:#121110;
  background:#fff; border-bottom:1px solid #EFEBE2;
}
[data-office="al-rahma"] .office-hero-inner { max-width:1344px; }
[data-office="al-rahma"] .office-logo-box {
  width:168px; height:132px; border-radius:16px; box-shadow:none;
  border:1px solid #EFE1C4; background:#fff;
}
[data-office="al-rahma"] .office-hero h1 { color:#121110; font-size:44px; line-height:1.25; }
[data-office="al-rahma"] .office-hero-tagline { color:#5C564E; font-size:17px; }
[data-office="al-rahma"] .office-trust span {
  color:#5C564E; background:#FBF6EC; border-color:#EFE1C4;
}
[data-office="al-rahma"] .office-hero-stats {
  gap:1px; overflow:hidden; border:1px solid #EFE1C4; border-radius:16px;
  background:#EFE1C4;
}
[data-office="al-rahma"] .office-stat { width:128px; border:0; border-radius:0; background:#FBF6EC; }
[data-office="al-rahma"] .office-stat b { color:#121110; }
[data-office="al-rahma"] .office-stat span { color:#5C564E; }
[data-office="al-rahma"] .contact-bar {
  margin-inline:-48px; padding:18px 48px; color:#F3EFE7; background:#121110;
  border:0; border-radius:0;
}
[data-office="al-rahma"] .contact-bar b,
[data-office="al-rahma"] .contact-bar strong,
[data-office="al-rahma"] .contact-bar a { color:#F3EFE7; }
[data-office="al-rahma"] .contact-bar i { color:#E3BF78; }
[data-office="al-rahma"] .quick-chips { margin:24px 0; gap:8px; }
[data-office="al-rahma"] .quick-chips a { min-height:44px; padding:0 16px; border-color:#D9D2C4; }
[data-office="al-rahma"] .quick-chips a.is-active { background:#BA882D; border-color:#BA882D; color:#fff; }
[data-office="al-rahma"] .quick-chips .chip-sep { background:#BA882D; margin-inline:8px; }
[data-office="al-rahma"] .public-filters {
  gap:16px; padding:24px; border-radius:16px; border-color:#E7E1D5;
  box-shadow:0 1px 2px rgba(60,45,20,.06);
}
[data-office="al-rahma"] .public-filters[data-simple-filters] { grid-template-columns:repeat(3,minmax(0,1fr)); }
[data-office="al-rahma"] .public-filters label { font-size:14px; font-weight:500; color:#5C564E; }
[data-office="al-rahma"] .input { border-radius:12px; }
[data-office="al-rahma"] .input:focus,
[data-office="al-rahma"] .btn:focus-visible,
[data-office="al-rahma"] a:focus-visible { outline:3px solid #121110; outline-offset:2px; box-shadow:none; }
[data-office="al-rahma"] .btn { min-height:48px; border-radius:12px; }
[data-office="al-rahma"] .btn-primary { background:#D79D3C; color:#0E0E0E; }
[data-office="al-rahma"] .btn-primary:hover { background:#ECAE47; color:#0E0E0E; }
[data-office="al-rahma"] .btn-primary:active { background:#C08D2C; }
[data-office="al-rahma"] .btn-secondary { color:#121110; border:1.5px solid #BA882D; background:#fff; }
[data-office="al-rahma"] .btn-secondary:hover { background:#FBF6EC; }
[data-office="al-rahma"] .candidate-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
[data-office="al-rahma"] .candidate-card { flex-direction:column; border-radius:16px; }
[data-office="al-rahma"] .candidate-id-col {
  position:relative; width:auto; min-height:220px; padding:20px; justify-content:center;
  background:#FBF6EC; border:0; border-bottom:1px solid #EFE1C4;
}
[data-office="al-rahma"] .candidate-thumb { width:min(230px,100%); height:190px; border-radius:12px; }
[data-office="al-rahma"] .candidate-initial { width:88px; height:88px; color:#7A5410; background:#FBF6EC; border-color:#E3BF78; font-size:34px; }
[data-office="al-rahma"] .candidate-id-col .status-badge { position:absolute; inset-block-start:16px; inset-inline-end:16px; background:rgba(255,255,255,.94); }
[data-office="al-rahma"] .candidate-body { padding:20px; gap:12px; }
[data-office="al-rahma"] .candidate-card .name { font-size:20px; font-weight:600; white-space:normal; }
[data-office="al-rahma"] .candidate-role,
[data-office="al-rahma"] .candidate-card .skills { white-space:normal; }
[data-office="al-rahma"] .candidate-facts span { color:#121110; background:#FAF8F4; border-color:#E7E1D5; }
[data-office="al-rahma"] .service-badge { color:#7A5410; background:#FBF6EC; border-color:#E3BF78; }
[data-office="al-rahma"] .candidate-price { border-color:#E7E1D5; }
[data-office="al-rahma"] .candidate-price .go { color:#96691C; }
[data-office="al-rahma"] .empty-state.is-coming-soon { border-color:#E7E1D5; border-radius:24px; }
[data-office="al-rahma"] .empty-state.is-coming-soon > i { color:#96691C; }
[data-office="al-rahma"] .request-cta,
[data-office="al-rahma"] .request-panel { border-radius:20px; }
[data-office="al-rahma"] .request-cta { color:#F3EFE7; background:#121110; border:0; padding:24px; }
[data-office="al-rahma"] .request-cta strong { color:#F3EFE7; }
[data-office="al-rahma"] .whatsapp-fab { background:#121110; color:#F3EFE7; }

@media (max-width:1279px) {
  [data-office="al-rahma"] .candidate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-office="al-rahma"] .office-logo-box { width:120px; height:96px; }
}
@media (max-width:768px) {
  [data-office="al-rahma"] { --control-h:48px; }
  [data-office="al-rahma"] .topbar { min-height:64px; padding:8px 16px; }
  [data-office="al-rahma"] .catalog-container { padding:24px 16px 88px; }
  [data-office="al-rahma"] .office-hero { margin:-24px -16px 20px; padding:32px 16px; }
  [data-office="al-rahma"] .office-logo-box { width:72px; height:72px; }
  [data-office="al-rahma"] .office-hero h1 { font-size:30px; }
  [data-office="al-rahma"] .office-hero-stats { grid-template-columns:repeat(3,1fr); }
  [data-office="al-rahma"] .office-stat { width:auto; }
  [data-office="al-rahma"] .contact-bar { margin-inline:-16px; padding:16px; }
  [data-office="al-rahma"] .public-filters[data-simple-filters] { grid-template-columns:1fr 1fr; padding:16px; }
  [data-office="al-rahma"] .public-filters[data-simple-filters] .filter-actions { grid-column:1/-1; }
  [data-office="al-rahma"] .candidate-grid { grid-template-columns:1fr; }
  [data-office="al-rahma"] .candidate-id-col { min-height:200px; }
  [data-office="al-rahma"] .btn { min-height:52px; }
}
@media (prefers-reduced-motion:reduce) {
  [data-office="al-rahma"] *,
  [data-office="al-rahma"] *::before,
  [data-office="al-rahma"] *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* أعلام الجنسيات: صورة SVG بدل حرف الإيموجي حتى تظهر على ويندوز أيضًا.
   الأعلام نسبها مختلفة (إثيوبيا 2:1، نيبال طولي)، فيُثبّت الارتفاع ويُترك
   العرض تلقائيًا حتى لا يتشوّه أي علم. */
.flag-label { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.flag-icon { width:auto; height:1.15em; max-width:2em; border-radius:2px; vertical-align:-0.15em; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.candidate-facts .flag-icon, .candidate-card .flag-icon { height:1.25em; }

/* أزرار التصفية السريعة: أكبر وأوضح — كثير من عملاء المكاتب كبار سن —
   محتواها موسّط، وتلتف لسطر جديد بدل أن يُقصّ آخر زر خارج الشاشة. */
.quick-chips { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.quick-chips a {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 20px; font-size:1.04rem; font-weight:600; text-align:center;
}
.quick-chips .flag-label { gap:10px; }
.quick-chips .flag-icon { height:1.4em; max-width:2.3em; border-radius:3px; }
@media (max-width:768px) {
  .quick-chips { gap:8px; }
  .quick-chips a { min-height:48px; font-size:1rem; padding:0 16px; }
  .quick-chips .flag-icon { height:1.35em; }
}


/* الاشتراك والدفع */
.billing-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0}.billing-hero h1{margin:5px 0}.billing-hero p{margin:0;color:var(--muted,#667085)}.eyebrow{color:var(--office-primary);font-weight:800;font-size:.82rem}.billing-status{min-width:150px;padding:14px 18px;border-radius:14px;background:#f2f4f7}.billing-status span,.billing-summary span{display:block;color:#667085;font-size:.8rem}.billing-status strong{font-size:1.2rem}.billing-status--active{background:#ecfdf3;color:#027a48}.billing-status--past_due{background:#fef3f2;color:#b42318}.billing-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:0;overflow:hidden}.billing-summary>div{padding:18px;background:#fff;border-inline-start:1px solid #eaecf0}.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.plan-card{position:relative;background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:24px}.plan-card--current{border:2px solid var(--office-primary)}.plan-badge{position:absolute;top:14px;left:14px;padding:4px 9px;border-radius:99px;background:#eef4ff;color:#3538cd;font-size:.72rem;font-weight:800}.plan-card h2{margin:0 0 8px}.plan-card>p{color:#667085}.plan-price{display:flex;align-items:baseline;gap:7px;margin:22px 0}.plan-price strong{font-size:2rem}.plan-card ul{list-style:none;padding:0;margin:20px 0}.plan-card li{display:flex;gap:8px;margin:9px 0}.plan-card li i{color:#039855}.plan-card .btn{width:100%}.checkout-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;max-width:1050px;margin:36px auto}.checkout-order dl div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #eaecf0}.checkout-order dd{margin:0;font-weight:800}.checkout-total{font-size:1.1rem}.consent-check{display:flex;align-items:flex-start;gap:10px;line-height:1.7;padding:14px;background:#f9fafb;border-radius:12px}.consent-check input{margin-top:7px}.consent-note{display:flex;gap:9px;color:#475467;margin:16px 0}.consent-note i{font-size:1.4rem;color:#039855}.btn-block{width:100%}.btn[disabled]{opacity:.55;cursor:not-allowed}
@media(max-width:800px){.billing-summary{grid-template-columns:1fr 1fr}.plan-grid{grid-template-columns:1fr}.checkout-layout{grid-template-columns:1fr}.billing-hero{align-items:flex-start;flex-direction:column}.billing-status{width:100%}}
@media(max-width:430px){.billing-summary{grid-template-columns:1fr}.checkout-layout{margin:18px auto}.plan-card{padding:18px}}
.plan-active-note{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;color:#027a48;font-weight:800}.subscription-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0}.subscription-actions h2,.office-payment-history h2{margin-top:0}.subscription-actions p{margin-bottom:0;color:#667085}.office-payment-history{margin-top:20px}.payment-history-wrap{overflow-x:auto}.office-payment-history table{width:100%;border-collapse:collapse;min-width:560px}.office-payment-history th,.office-payment-history td{text-align:start;padding:12px;border-bottom:1px solid #eaecf0}.office-payment-pill{display:inline-flex;padding:4px 9px;border-radius:99px;font-size:.75rem;font-weight:800}.office-payment-paid{background:#ecfdf3;color:#027a48}.office-payment-failed{background:#fef3f2;color:#b42318}.office-payment-pending{background:#fffaeb;color:#b54708}.office-payment-refunded,.office-payment-voided{background:#f2f4f7;color:#475467}
@media(max-width:600px){.subscription-actions{align-items:stretch;flex-direction:column}.subscription-actions form,.subscription-actions .btn{width:100%}}