/* =====================================================================
   PORTFOLIO TOP-BAR — شريط حالة الملف العلوي (/portfolio/*)
   هوية cmp النحاسية، زجاجي هادئ، RTL. بلا تغيير منطق.
   ===================================================================== */
.ph-topbar {
  --ptb-brand: #D46E2A;
  --ptb-brand-rgb: 212, 110, 42;
  --ptb-brand-hover: #B85B21;
  --ptb-ink: #2b3a4a;
  --ptb-ink-2: #6b7a89;
  --ptb-ease: cubic-bezier(.4, 0, .2, 1);

  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  padding: .7rem 1rem; margin-bottom: 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #FAFCFE);
  border: 1px solid rgba(34, 48, 63, .09);
  box-shadow: 0 8px 22px rgba(34, 48, 63, .05);
}

.ph-topbar-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.ph-tb-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700;
}
.ph-tb-pill.is-ok     { background: rgba(40, 167, 69, .1);  color: #1e7e34; border: 1px solid rgba(40, 167, 69, .22); }
.ph-tb-pill.is-warn   { background: rgba(255, 171, 0, .12); color: #b26a00; border: 1px solid rgba(255, 171, 0, .28); }
.ph-tb-pill.is-danger { background: rgba(220, 53, 69, .1);  color: #c02636; border: 1px solid rgba(220, 53, 69, .24); }

.ph-tb-renew {
  font-size: .84rem; font-weight: 700; text-decoration: none;
  color: var(--ptb-brand-hover);
  border-bottom: 1.5px dashed rgba(var(--ptb-brand-rgb), .5);
  transition: color .2s ease, border-color .2s ease;
}
.ph-tb-renew:hover { color: var(--ptb-brand); border-color: var(--ptb-brand); }

.ph-topbar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.ph-tb-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border-radius: 10px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  color: #fff !important;
  background: linear-gradient(135deg, #E8A05F, var(--ptb-brand) 55%, var(--ptb-brand-hover));
  box-shadow: 0 6px 14px rgba(var(--ptb-brand-rgb), .28);
  transition: transform .2s var(--ptb-ease), box-shadow .2s ease;
}
.ph-tb-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(var(--ptb-brand-rgb), .4); color: #fff !important; }
.ph-tb-btn i { font-size: 1.05rem; }

.ph-tb-btn.is-ghost {
  background: #fff; color: var(--ptb-brand-hover) !important;
  border: 1.5px solid rgba(var(--ptb-brand-rgb), .35); box-shadow: none;
}
.ph-tb-btn.is-ghost:hover {
  background: rgba(var(--ptb-brand-rgb), .08);
  border-color: var(--ptb-brand); color: var(--ptb-brand-hover) !important;
}

@media (max-width: 575.98px) {
  .ph-topbar { justify-content: center; text-align: center; }
  .ph-tb-btn span { display: none; }
  .ph-tb-btn { padding: .5rem .7rem; }
}

/* =====================================================================
   الوضع الداكن — الشريط لا يحمّل premium-theme فتوكناته محلية والقلب هنا.
   الأبيض فوق تدرّج الهوية (.ph-tb-btn) يبقى أبيض عمداً.
   ===================================================================== */
html.dark-style .ph-topbar {
  --ptb-ink:   #E6E8EC;
  --ptb-ink-2: #9AA0AB;

  background: linear-gradient(180deg, #1C1F26, #17191F);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .40);
  color: var(--ptb-ink);
}

/* الحبوب الدلالية: نصّها في الفاتح داكن على تظليل شفّاف */
html.dark-style .ph-tb-pill.is-ok     { background: rgba(40, 167, 69, .18);  color: #6EE7A8; border-color: rgba(40, 167, 69, .35); }
html.dark-style .ph-tb-pill.is-warn   { background: rgba(255, 171, 0, .18);  color: #FBBF24; border-color: rgba(255, 171, 0, .35); }
html.dark-style .ph-tb-pill.is-danger { background: rgba(220, 53, 69, .18);  color: #F87171; border-color: rgba(220, 53, 69, .35); }

/* رابط التجديد والزر الشبحي كانا محسوبين على خلفية بيضاء */
html.dark-style .ph-tb-renew { color: var(--ptb-brand-light, #E8A05F); }
html.dark-style .ph-tb-renew:hover { color: #F0A874; border-color: #F0A874; }
html.dark-style .ph-tb-btn.is-ghost {
  background: rgba(255, 255, 255, .05);
  color: #F0A874 !important;
  border-color: rgba(var(--ptb-brand-rgb), .45);
}
html.dark-style .ph-tb-btn.is-ghost:hover {
  background: rgba(var(--ptb-brand-rgb), .18);
  border-color: #F0A874; color: #F0A874 !important;
}

/* ═ تثبيت شريط التنقّل الرئيسي على الجوال — صفحات /portfolio/* ═
   نفس معالجة صفحات المعلم والعينات (teacher-home.css): تخطيط
   layout-navbar-full يمرّر الشريط مع المحتوى فيختفي على الجوال.
   sticky يبقيه أعلى الشاشة ويبقى في التدفق فلا يغطي أول المحتوى. */
@media (max-width: 991.98px){
  .layout-wrapper.layout-navbar-full #layout-navbar{
    position: sticky;
    top: 0;
    z-index: 1080;
  }
  /* core.css يفرض overflow:hidden على الغلاف (لأجل قائمة offcanvas)
     وhidden يعطّل sticky — clip يقصّ بصريًا بنفس الشكل دون كسره.
     التخصيص أعلى من قاعدة core (عنصر + ٣ أصناف مقابل صنفين). */
  html.layout-menu-fixed-offcanvas .layout-wrapper.layout-navbar-full{
    overflow: clip;
  }
}
