/* ==========================================================================
   مرصدك — صفحات الفرص المهنية
   /jobs · /jobs/{slug} · /jobs/{slug}/apply
   خصائص منطقية فقط (RTL أولاً). كل الألوان من tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) شريط الفلاتر
   -------------------------------------------------------------------------- */

.jobs-filters{
  margin-block-end:var(--sp-4);
  align-items:flex-end;
  row-gap:var(--sp-4);
}

.jobs-filters .filter-bar__group{
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-1);
  flex:1 1 150px;
  min-inline-size:140px;
}

.jobs-filters .filter-bar__label{
  padding-inline-start:var(--sp-1);
  white-space:nowrap;
}

.jobs-filters .select,
.jobs-filters .input{
  block-size:var(--field-h-sm);
  font-size:var(--fs-sm);
}

/* على الجوال يجب ألّا ينزل حجم خط أي حقل عن 16px، وإلا كبّر iOS Safari
   الصفحة تلقائياً عند التركيز وكسر التخطيط. (RESP-08) */
@media (max-width:768px){
  .jobs-filters .select,
  .jobs-filters .input{
    block-size:var(--field-h);
    font-size:16px;
  }
}

.jobs-filters .input-group{inline-size:100%}

.jobs-filters__actions{
  flex-direction:row !important;
  align-items:center;
  gap:var(--sp-2);
  flex:0 0 auto;
}

.jobs-types{margin-block-end:var(--sp-4)}

.jobs-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-block-end:var(--sp-5);
  padding-block-end:var(--sp-3);
  border-block-end:1px solid var(--line);
}

/* --------------------------------------------------------------------------
   2) بطاقة الفرصة
   -------------------------------------------------------------------------- */

.jobs-grid{margin-block-end:var(--sp-6)}

.job-card .card__body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.job-card__head{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  min-inline-size:0;
}

.job-card__logo{
  flex:0 0 auto;
  inline-size:48px;
  block-size:48px;
  border-radius:var(--r-md);
  object-fit:contain;
  background:var(--violet-50);
  border:1px solid var(--line);
  padding:6px;
}

.job-card__logo--text{
  display:grid;
  place-items:center;
  padding:0;
  background-image:var(--grad-brand);
  border-color:transparent;
  color:var(--white);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  line-height:1;
}

.job-card__head-main{min-inline-size:0}

.job-card .card__title{
  margin:0 0 var(--sp-1);
  font-size:var(--fs-md);
}

.job-card__org{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  min-inline-size:0;
}

.job-card__org svg{flex:0 0 auto;color:var(--violet-500)}

.job-card__verified{display:inline-flex;color:var(--ok)}

.job-card__badges{row-gap:var(--sp-2)}

.job-card__salary{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);
  background:var(--ok-soft);
  color:var(--ok-ink);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
}

.job-card__salary svg{flex:0 0 auto}

.job-card__salary.is-hidden-salary{
  background:var(--cream-200);
  color:var(--ink-soft);
  font-weight:var(--fw-regular);
}

.job-card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}

.job-card__deadline{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--ink-soft);
  min-inline-size:0;
}

.job-card__deadline svg{flex:0 0 auto}

.job-card__deadline--urgent{color:var(--danger-ink)}
.job-card__deadline--urgent svg{color:var(--danger)}
.job-card__deadline--closed{color:var(--muted);text-decoration:line-through}

.job-card--compact .card__title{font-size:var(--fs-base)}

/* --------------------------------------------------------------------------
   3) دعوة أسفل القائمة
   -------------------------------------------------------------------------- */

.jobs-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  padding:var(--sp-6);
  border-radius:var(--r-xl);
  background-image:var(--grad-soft);
  border:1px solid var(--violet-100);
}

.jobs-cta__title{
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  color:var(--navy-800);
  margin:0 0 var(--sp-2);
}

.jobs-cta__desc{
  margin:0;
  color:var(--ink-soft);
  max-inline-size:52ch;
  line-height:var(--lh-body);
}

.jobs-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
}

/* --------------------------------------------------------------------------
   4) صفحة تفاصيل الفرصة
   -------------------------------------------------------------------------- */

.job-hero__main{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-5);
  margin-block-start:var(--sp-4);
}

.job-hero__logo{
  flex:0 0 auto;
  inline-size:72px;
  block-size:72px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.94);
  object-fit:contain;
  padding:8px;
}

.job-hero__logo--text{
  display:grid;
  place-items:center;
  padding:0;
  color:var(--navy-800);
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);
  line-height:1;
}

.job-hero__text{min-inline-size:0}
.job-hero__badges{margin-block-end:var(--sp-3)}
.job-hero__title{margin-block-end:var(--sp-2)}

.job-hero__org{
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  margin-block-end:var(--sp-3);
}

.job-section .panel__title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-md);
}

.job-section .panel__title svg{color:var(--violet-500)}

.job-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-3);
}

.job-list li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  line-height:var(--lh-body);
  color:var(--ink);
}

.job-list__mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  inline-size:24px;
  block-size:24px;
  margin-block-start:2px;
  border-radius:var(--r-pill);
}

.job-list--check .job-list__mark{background:var(--ok-soft);color:var(--ok-ink)}
.job-list--star .job-list__mark{background:var(--violet-100);color:var(--violet-600)}

.job-list--dot{gap:var(--sp-2)}

.job-list--dot li{
  position:relative;
  padding-inline-start:var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}

.job-list--dot li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.7em;
  inline-size:6px;
  block-size:6px;
  border-radius:var(--r-pill);
  background-image:var(--grad-violet);
}

/* نبذة الجهة */
.job-org__head{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-block-end:var(--sp-4);
}

.job-org__logo{
  flex:0 0 auto;
  inline-size:56px;
  block-size:56px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--violet-50);
  object-fit:contain;
  padding:6px;
}

.job-org__logo--text{
  display:grid;
  place-items:center;
  padding:0;
  background-image:var(--grad-brand);
  border-color:transparent;
  color:var(--white);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
}

.job-org__name{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin:0 0 var(--sp-1);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.job-org__verified{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--ok-ink);
  background:var(--ok-soft);
  padding:2px var(--sp-2);
  border-radius:var(--r-pill);
}

.job-org__meta{margin:0;font-size:var(--fs-sm);color:var(--muted)}

.job-org__about{
  margin:0;
  color:var(--ink-soft);
  line-height:var(--lh-body);
}

.job-share{padding-block-start:var(--sp-2)}

/* --------------------------------------------------------------------------
   5) بطاقة التقديم اللاصقة
   -------------------------------------------------------------------------- */

/* جسم البطاقة يجب أن يكون داكناً: كل محتواه مكتوب بالأبيض
   (‎--white ورgba(255,255,255,…)) بينما .panel__body الافتراضي أبيض،
   فكان النص كلّه أبيض على أبيض بتباين 1.00:1. (A11Y-02) */
.job-apply-card .panel__body{
  background-image:var(--grad-brand);
  color:var(--white);
}

.job-apply-card .panel__foot{
  background:rgba(7,12,38,.9);
  border-block-start-color:rgba(255,255,255,.14);
  color:var(--white);
}

.job-apply-card .panel__title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}

.job-apply-card__deadline{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  margin:0 0 var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

.job-apply-card__deadline-label{
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.92);
}

.job-apply-card__deadline-date{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  color:var(--white);
}

.job-apply-card__deadline-days{
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.88);
}

.job-apply-card__deadline.is-urgent{
  background:rgba(232,163,23,.22);
  border-color:rgba(232,163,23,.5);
}

.job-apply-card__deadline.is-closed{
  background:rgba(214,69,80,.2);
  border-color:rgba(214,69,80,.45);
}

.job-apply-card__info{margin-block-end:var(--sp-4)}

.job-apply-card__info li{border-color:rgba(255,255,255,.14)}
.job-apply-card__info .info-list__icon{background:rgba(255,255,255,.14);color:var(--white)}
.job-apply-card__info .info-list__label{color:rgba(255,255,255,.9)}
.job-apply-card__info .info-list__value{color:var(--white)}

.job-apply-card__note{
  margin:var(--sp-3) 0 0;
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  color:rgba(255,255,255,.92);
}

.job-apply-card__actions{
  display:flex;
  gap:var(--sp-2);
  margin-block-start:var(--sp-4);
  padding-block-start:var(--sp-4);
  border-block-start:1px solid rgba(255,255,255,.16);
}

.job-apply-card__actions .btn{flex:1 1 0;min-inline-size:0}

.job-tips .panel__title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-base);
}

.job-tips .panel__title svg{color:var(--violet-500)}

/* --------------------------------------------------------------------------
   6) نموذج التقديم
   -------------------------------------------------------------------------- */

.job-apply-form{overflow:visible}

.job-apply-form__head{
  padding-block-end:var(--sp-4);
  border-block-end:1px solid var(--line);
}

.job-apply-form__title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0 0 var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  color:var(--navy-800);
}

.job-apply-form__title svg{color:var(--violet-500)}

.job-apply-form__desc{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}

.job-apply-form__drop{min-block-size:150px}

.job-apply-form__drop .file-drop__title{font-size:var(--fs-base)}

.job-apply-form__consent{
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  background:var(--violet-50);
  border:1px solid var(--violet-100);
}

.job-apply-form__consent p{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--ink-soft);
}

.job-apply-form__consent svg{flex:0 0 auto;color:var(--violet-600);margin-block-start:3px}

.job-apply-form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}

.job-apply-form__limit{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-xs);
  color:var(--muted);
}

.job-apply-form__limit svg{flex:0 0 auto}

/* --------------------------------------------------------------------------
   7) الاستجابة
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .jobs-filters__actions{inline-size:100%;justify-content:flex-start}
}

@media (max-width:768px){
  .jobs-filters .filter-bar__group{flex:1 1 100%}
  .job-hero__main{gap:var(--sp-4)}
  .job-hero__logo{inline-size:56px;block-size:56px}
  .jobs-cta{padding:var(--sp-5)}
  .jobs-cta__actions .btn{flex:1 1 100%}
}

@media (max-width:560px){
  .job-card__foot{flex-direction:column;align-items:flex-start}
  .job-card__foot .btn{inline-size:100%}
  .job-apply-card__actions{flex-direction:column}
  .job-apply-form__actions .btn{inline-size:100%}
  .job-hero__main{flex-direction:column}
}

/* --------------------------------------------------------------------------
   8) الطباعة
   -------------------------------------------------------------------------- */

@media print{
  .jobs-filters,
  .jobs-types,
  .jobs-cta,
  .job-share,
  .job-apply-card__actions,
  .pagination{display:none !important}

  .job-apply-card{background:none !important;color:var(--ink) !important;border:1px solid var(--line)}
}

/* ---------------------------------------------------------------------
   طيّ فلاتر الفرص على الجوال (RESP-06)
   البحث يبقى ظاهراً، والقوائم المنسدلة خلف زر «خيارات التصفية».
   مشروط بـ html.js-ready: بدون جافاسكربت تبقى كل الفلاتر ظاهرة وقابلة للاستخدام.
   --------------------------------------------------------------------- */
.jobs-filters__toggle{display:none}

@media (max-width:768px){
  html.js-ready .jobs-filters__toggle{
    display:inline-flex;
    justify-content:center;
    gap:var(--sp-2);
  }
  html.js-ready .jobs-filters:not(.is-expanded) > .filter-bar__group{display:none}
  .jobs-filters__toggle[aria-expanded="true"]{background:var(--violet-100)}
}