/* ================================================================
   صفحة الحساب — المجلات الثقافية السعودية
   تلوين PatternFly 5 بمتغيّرات الهوية؛ نفس الخطوط والسلّم الطباعي في الموقعين
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');

:root{
  --sj-green:#123B34; --sj-gold:#B08A4A; --sj-ivory:#F5F1E8; --sj-ink:#202624;
  --sj-green-soft:#1f5047; --sj-green-tint:#e6ece7; --sj-gold-text:#846839;
  --sj-card:#fffdf8; --sj-line:#ddd4c3; --sj-line-soft:#e7e1d5; --sj-muted:#58615b;
  --sj-ui:'Inter','Noto Kufi Arabic',system-ui,sans-serif;

  /* PatternFly 5 */
  --pf-v5-global--FontFamily--text:var(--sj-ui);
  --pf-v5-global--FontFamily--heading:var(--sj-ui);
  --pf-v5-global--FontFamily--sans-serif:var(--sj-ui);
  --pf-v5-global--primary-color--100:var(--sj-green);
  --pf-v5-global--primary-color--200:var(--sj-green-soft);
  --pf-v5-global--primary-color--dark-100:var(--sj-green);
  --pf-v5-global--link--Color:var(--sj-green-soft);
  --pf-v5-global--link--Color--hover:var(--sj-gold-text);
  --pf-v5-global--active-color--100:var(--sj-green);
  --pf-v5-global--Color--100:var(--sj-ink);
  --pf-v5-global--Color--200:var(--sj-muted);
  --pf-v5-global--BorderColor--100:var(--sj-line);
  --pf-v5-global--BorderColor--300:var(--sj-line-soft);
  --pf-v5-global--BackgroundColor--100:var(--sj-card);
  --pf-v5-global--BackgroundColor--200:var(--sj-ivory);
  --pf-v5-global--BorderRadius--sm:8px;
  --pf-v5-global--FontSize--xs:13px;
  --pf-v5-global--FontSize--sm:14px;
  --pf-v5-global--FontSize--md:16px;
  --pf-v5-global--FontSize--lg:18px;
  --pf-v5-global--FontSize--xl:22px;
  --pf-v5-global--FontSize--2xl:28px;
}
body{font-family:var(--sj-ui) !important;background:var(--sj-ivory) !important;color:var(--sj-ink)}

/* ---------- الترويسة: عاجي مع الشعار الأفقي ---------- */
.pf-v5-c-masthead{
  --pf-v5-c-masthead--BackgroundColor:var(--sj-ivory);
  --pf-v5-c-masthead--item-border-color--base:transparent;
  background:var(--sj-ivory) !important;color:var(--sj-ink);
  border-bottom:1px solid var(--sj-line);min-height:76px;
}
.pf-v5-c-masthead__toggle .pf-v5-c-button{color:var(--sj-green) !important}
.pf-v5-c-masthead__brand{display:inline-flex !important;align-items:center;gap:14px;text-decoration:none !important}
.pf-v5-c-masthead__brand img{width:44px !important;height:44px !important;max-height:none !important}
.pf-v5-c-masthead__brand::after{
  content:"المجلات الثقافية السعودية";
  font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;font-size:17px;color:var(--sj-green);
  padding-inline-start:14px;border-inline-start:1px solid var(--sj-line);line-height:2.6;white-space:nowrap;
}
/* زر المستخدم في الترويسة */
.pf-v5-c-masthead .pf-v5-c-menu-toggle{
  --pf-v5-c-menu-toggle--Color:var(--sj-ink);
  --pf-v5-c-menu-toggle--BackgroundColor:var(--sj-card);
  background:var(--sj-card) !important;color:var(--sj-ink) !important;
  border:1px solid var(--sj-line) !important;border-radius:8px !important;font-size:14px;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before,.pf-v5-c-masthead .pf-v5-c-menu-toggle::after{border:0 !important}
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover{border-color:var(--sj-green) !important;color:var(--sj-green) !important}
.pf-v5-c-masthead .pf-v5-c-avatar{border:2px solid var(--sj-line-soft)}

/* ---------- الشريط الجانبي ---------- */
.pf-v5-c-page__sidebar{
  --pf-v5-c-page__sidebar--BackgroundColor:var(--sj-card);
  background:var(--sj-card) !important;border-inline-end:1px solid var(--sj-line-soft);box-shadow:none !important;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav{
  --pf-v5-c-nav__link--Color:var(--sj-ink);
  --pf-v5-c-nav__link--hover--Color:var(--sj-green);
  --pf-v5-c-nav__link--m-current--Color:var(--sj-green);
  --pf-v5-c-nav__link--BackgroundColor:transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor:var(--sj-ivory);
  --pf-v5-c-nav__link--m-current--BackgroundColor:var(--sj-green-tint);
  --pf-v5-c-nav__link--before--BorderColor:transparent;
  --pf-v5-c-nav__link--after--BorderColor:var(--sj-gold);
  --pf-v5-c-nav__link--m-current--after--BorderColor:var(--sj-gold);
  --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate:-90deg;
  background:transparent !important;padding-top:12px;
}
.pf-v5-c-nav__link{
  color:var(--sj-ink) !important;background:transparent !important;font-size:15px;font-weight:500;
  border-radius:8px;margin:2px 10px;padding-block:10px !important;
}
.pf-v5-c-nav__link:hover{background:var(--sj-ivory) !important;color:var(--sj-green) !important}
.pf-v5-c-nav__link.pf-m-current,.pf-v5-c-nav__link.pf-m-current:hover{
  background:var(--sj-green-tint) !important;color:var(--sj-green) !important;font-weight:700;
}
.pf-v5-c-nav__link::before{border:0 !important}
.pf-v5-c-nav__link.pf-m-current::after{border-inline-start:3px solid var(--sj-gold) !important;border-radius:3px}
.pf-v5-c-nav__subnav .pf-v5-c-nav__link{font-size:14px;font-weight:400;padding-inline-start:28px !important}
.pf-v5-c-nav__toggle-icon{color:var(--sj-muted)}

/* ---------- المحتوى ---------- */
.pf-v5-c-page__main{background:var(--sj-ivory) !important}
.pf-v5-c-page__main-section,.pf-v5-c-page__main-section.pf-m-light{
  --pf-v5-c-page__main-section--BackgroundColor:transparent;background:transparent !important;
}
.pf-v5-c-page__main > .pf-v5-c-page__main-section:first-child{padding-bottom:4px}
.pf-v5-c-page__main > .pf-v5-c-page__main-section:first-child h1{
  font-size:28px !important;font-weight:700;color:var(--sj-green);line-height:1.6;
}
.pf-v5-c-page__main > .pf-v5-c-page__main-section:first-child .pf-v5-c-content p{color:var(--sj-muted);font-size:16px}
/* محتوى كل صفحة داخل بطاقة واحدة */
.pf-v5-c-page__main > .pf-v5-c-page__main-section + .pf-v5-c-page__main-section{
  background:var(--sj-card) !important;border:1px solid var(--sj-line-soft);border-radius:12px;
  margin:12px clamp(16px,2.5vw,32px) 40px;padding:clamp(20px,3vw,32px) !important;
}
.pf-v5-c-title{font-family:var(--sj-ui) !important;color:var(--sj-green)}
.pf-v5-c-title.pf-m-xl{font-size:18px !important;font-weight:700}
.pf-v5-c-title.pf-m-lg,.pf-v5-c-title.pf-m-md{font-size:16px !important;font-weight:700}
._sticky_1cdve_5,[class*="_sticky_"]{background:transparent !important}

/* الحقول */
.pf-v5-c-form__label-text{font-size:14px;font-weight:500;color:var(--sj-ink)}
.pf-v5-c-form__label-required{color:#9b2c1f}
.pf-v5-c-form-control{
  --pf-v5-c-form-control--BorderRadius:8px;
  --pf-v5-c-form-control--before--BorderColor:transparent;
  --pf-v5-c-form-control--after--BorderColor:transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor:transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor:transparent;
  background:#fff !important;border:1px solid var(--sj-line) !important;border-radius:8px !important;min-height:44px;
}
.pf-v5-c-form-control::before,.pf-v5-c-form-control::after{display:none !important}
.pf-v5-c-form-control:focus-within{border-color:var(--sj-green) !important;box-shadow:0 0 0 3px rgba(18,59,52,.14)}
.pf-v5-c-form-control.pf-m-readonly,.pf-v5-c-form-control:has(input[readonly]),.pf-v5-c-form-control.pf-m-disabled{background:var(--sj-ivory) !important;color:var(--sj-muted)}
.pf-v5-c-form-control > input,.pf-v5-c-form-control > select,.pf-v5-c-form-control > textarea{font-size:16px !important;font-family:var(--sj-ui) !important}
.pf-v5-c-menu-toggle:not(.pf-m-plain){border-radius:8px !important}
.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain){background:#fff !important;border:1px solid var(--sj-line) !important;min-height:44px}
.pf-v5-c-page__main .pf-v5-c-menu-toggle::before,.pf-v5-c-page__main .pf-v5-c-menu-toggle::after{border:0 !important}

/* الأزرار */
.pf-v5-c-button{font-family:var(--sj-ui) !important;font-size:15px;border-radius:8px !important}
.pf-v5-c-button.pf-m-primary{
  --pf-v5-c-button--m-primary--BackgroundColor:var(--sj-green);
  --pf-v5-c-button--m-primary--hover--BackgroundColor:var(--sj-green-soft);
  --pf-v5-c-button--m-primary--focus--BackgroundColor:var(--sj-green-soft);
  --pf-v5-c-button--m-primary--active--BackgroundColor:var(--sj-green-soft);
  background:var(--sj-green) !important;padding:10px 24px;font-weight:500;
}
.pf-v5-c-button.pf-m-primary:hover{background:var(--sj-green-soft) !important}
.pf-v5-c-button.pf-m-secondary{
  --pf-v5-c-button--m-secondary--Color:var(--sj-green);
  --pf-v5-c-button--after--BorderColor:var(--sj-line);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor:var(--sj-green);
  color:var(--sj-green) !important;background:var(--sj-card) !important;
}
.pf-v5-c-button.pf-m-link{color:var(--sj-green-soft) !important}
.pf-v5-c-button.pf-m-link:hover{color:var(--sj-gold-text) !important}
.pf-v5-c-button.pf-m-danger{border-radius:8px !important}

/* روابط الانتقال داخل الصفحة */
.pf-v5-c-jump-links{
  --pf-v5-c-jump-links__link--before--BorderColor:var(--sj-line-soft);
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor:var(--sj-gold);
  --pf-v5-c-jump-links__link-text--Color:var(--sj-muted);
  --pf-v5-c-jump-links__item--m-current__link-text--Color:var(--sj-green);
}
.pf-v5-c-jump-links__label{font-size:14px;color:var(--sj-muted)}

/* القوائم والبطاقات (الأمان، الأجهزة، التطبيقات) */
.pf-v5-c-data-list,.pf-v5-c-card{
  --pf-v5-c-data-list--BorderTopColor:var(--sj-line-soft);
  --pf-v5-c-data-list__item--BorderBottomColor:var(--sj-line-soft);
  --pf-v5-c-card--BackgroundColor:var(--sj-card);
  background:transparent;
}
.pf-v5-c-data-list__item{background:transparent !important}
.pf-v5-c-data-list__item.pf-m-expanded,.pf-v5-c-data-list__item:hover{background:var(--sj-ivory) !important}
.pf-v5-c-card{border:1px solid var(--sj-line-soft);border-radius:12px;box-shadow:none !important}
.pf-v5-c-label{--pf-v5-c-label--BackgroundColor:var(--sj-green-tint);--pf-v5-c-label__content--Color:var(--sj-green);font-size:13px}
.pf-v5-c-description-list__term{color:var(--sj-muted);font-size:14px}
.pf-v5-c-empty-state__icon{color:var(--sj-gold)}
.pf-v5-c-alert{border-radius:10px}
.pf-v5-c-alert.pf-m-success{--pf-v5-c-alert--BorderTopColor:var(--sj-green);--pf-v5-c-alert__icon--Color:var(--sj-green)}

/* القوائم المنسدلة */
.pf-v5-c-menu{border:1px solid var(--sj-line);border-radius:10px !important;background:var(--sj-card) !important;box-shadow:0 12px 30px -18px rgba(18,59,52,.35) !important}
.pf-v5-c-menu__item:hover{background:var(--sj-green-tint) !important;color:var(--sj-green)}

/* شاشة التحميل */
.keycloak__loading-container .pf-v5-c-spinner{--pf-v5-c-spinner--Color:var(--sj-green)}
#loading-text{font-family:var(--sj-ui);color:var(--sj-muted)}

/* الجوال */
@media (max-width:767px){
  .pf-v5-c-masthead__brand::after{font-size:14.5px}
  .pf-v5-c-masthead__brand img{width:36px !important;height:36px !important}
  .pf-v5-c-page__main > .pf-v5-c-page__main-section + .pf-v5-c-page__main-section{margin-inline:12px}
}
@media (max-width:420px){ .pf-v5-c-masthead__brand::after{display:none} }

/* بلا خطوط فاصلة حول المجموعات القابلة للطيّ في الشريط الجانبي */
.pf-v5-c-nav__item::before,.pf-v5-c-nav__item::after,.pf-v5-c-nav__subnav::before,.pf-v5-c-nav__subnav::after{border:0 !important;display:none !important}
.pf-v5-c-nav__item.pf-m-expandable{border:0 !important}