/**
 * BlackBooks — Header v4 (سطر المعلومات: لون التصميم + تدرج + لوحة اسم سوداء)
 * المصدر: --bb-design من session business.theme_color على .bb-main-header
 * Revert: BB_HEADER_V4=false + php artisan config:clear → يُحمّل bb-header-rail-legacy.css
 */

.bb-hdr-v4.bb-header-rail,
body.bb-hdr-v4 .bb-hdr-v4.bb-header-rail {
  --bb-d: var(--bb-design, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-bottom: 1px solid color-mix(in srgb, var(--bb-d) 28%, #0f172a) !important;
  background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--bb-d) 55%, #020617 45%) 0%,
      var(--bb-d) 42%,
      color-mix(in srgb, var(--bb-d) 48%, #020617 52%) 100%
    ),
    radial-gradient(120% 90% at 50% -15%, rgba(255, 255, 255, 0.22) 0%, transparent 55%) !important;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--bb-d) 18%, rgba(0, 0, 0, 0.25)) !important;
}

.bb-hdr-v4.bb-header-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%);
  opacity: 0.85;
}

.bb-hdr-v4.bb-header-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

.bb-hdr-v4--light.bb-header-rail::after {
  background: rgba(15, 23, 42, 0.28);
}

.bb-hdr-v4 .bb-header-rail__pad,
.bb-hdr-v4.bb-header-rail .bb-header-rail__pad {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* سطر المعلومات فوق #bb-main-horizontal-nav (1021)؛ أقل من modal (≈1050) حتى لا تغطي النوافذ */
.bb-main-header.bb-header-rail {
  z-index: 1030 !important;
  position: relative !important;
}

/* المنسدلات داخل سطر المعلومات: فوق باقي مكوّنات الهيدر وتحت المودال */
.bb-main-header .tw-dw-menu,
.bb-main-header .tw-dw-dropdown-content,
.bb-main-header .dropdown-menu,
.bb-main-header ul.dropdown-menu,
.bb-main-header .dropdown.open > .dropdown-menu,
.bb-main-header .dropdown.open .dropdown-menu,
.bb-main-header .notifications-menu .dropdown-menu,
.bb-main-header .notifications-menu > .dropdown-menu,
.bb-main-header li.dropdown .dropdown-menu,
.bb-main-header details[open] > ul[role="menu"],
.bb-main-header details ul[role="menu"],
.bb-main-header details[open] ul,
.bb-main-header .header-primary-plus ul[role="menu"] {
  z-index: 1040 !important;
}

/* حشوة الرأس: −25% ارتفاع */
.bb-hdr-v4__bar-pad {
  padding-top: 0.26rem !important;
  padding-bottom: 0.26rem !important;
}

/* صف ثلاثي: الأعمدة الجانبية متساوية لضمان تمركز الاسم فعليًا */
.bb-hdr-v4__toprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.65rem;
  min-height: clamp(59px, 6.75vh, 69px);
  padding: 0.15rem 0;
  width: 100%;
  box-sizing: border-box;
}

.bb-hdr-v4__side--left {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.bb-hdr-v4__side--right {
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* عمود الاسم: لا يفرض عرضًا ضيقًا على اللوحة (كان min(100%,calc…)) يُرجّع العرض ~330px */
.bb-hdr-v4__name-slot {
  justify-self: center;
  align-self: center;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.bb-hdr-v4__name-slot .header-app-name-row {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.bb-hdr-v4__name-slot .header-app-name-link {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.bb-hdr-v4__impersonation {
  padding-top: 0.375rem !important;
}

/* أزرار زجاجية — نص وأيقونات بيضاء */
.bb-hdr-v4 .bb-hdr-surface {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bb-hdr-v4 .bb-hdr-surface:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: color-mix(in srgb, var(--bb-d) 35%, rgba(255, 255, 255, 0.75)) !important;
  transform: translateY(-1px);
}

.bb-hdr-v4 .bb-hdr-surface svg,
.bb-hdr-v4 .bb-hdr-surface .svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.bb-hdr-v4 a.bb-hdr-surface,
.bb-hdr-v4 a.bb-hdr-surface:hover,
.bb-hdr-v4 a.bb-hdr-surface:focus {
  color: #ffffff !important;
}

.bb-hdr-v4 .bb-hdr-surface:hover svg {
  color: #ffffff !important;
}

.bb-hdr-v4 .bb-hdr-surface summary {
  list-style: none;
  color: #ffffff !important;
}

.bb-hdr-v4 .bb-hdr-surface summary::-webkit-details-marker {
  display: none;
}

/* موبايل: <details> يحتاج هدف لمس واضح — بدونها قد يُغلق القائمة أو لا تُفتح (عقدة نص + click doc) */
@media (max-width: 991px) {
  .bb-main-header details.tw-dw-dropdown > summary,
  .bb-main-header .header-primary-plus > summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
  }
}

/* أزرار السطر: تقليص ارتفاعي ~25% فوق/تحت (يتجاوز tw-py) */
.bb-hdr-v4 .bb-hdr-surface,
.bb-hdr-v4 a.bb-hdr-surface {
  padding-top: 0.28rem !important;
  padding-bottom: 0.28rem !important;
}

/* نقطة بيع — أوسع قليلًا */
.bb-hdr-v4 .bb-hdr-btn-pos {
  min-width: 4.9rem;
  font-weight: 600 !important;
  padding-left: 0.68rem !important;
  padding-right: 0.68rem !important;
  border-color: color-mix(in srgb, var(--bb-d) 30%, rgba(255, 255, 255, 0.45)) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.bb-hdr-v4 .bb-hdr-btn-pos:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: color-mix(in srgb, var(--bb-d) 20%, #ffffff) !important;
}

.bb-hdr-v4 .bb-hdr-btn-pos svg {
  color: #ffffff !important;
}

/* كبسولة الموبايل build */
.bb-hdr-v4 .bb-hdr-badge {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* إشعارات: زر الجرس فقط (لا تُلون روابط داخل القائمة المنسدلة) */
.bb-hdr-v4 .notifications-menu > a.load_notifications,
.bb-hdr-v4 .notifications-menu > a.dropdown-toggle {
  color: #ffffff !important;
}
.bb-hdr-v4 .notifications-menu > a .tw-size-5 {
  color: inherit !important;
  stroke: currentColor !important;
}

.bb-hdr-v4 .notifications-menu .label.label-warning {
  background: color-mix(in srgb, #fff 20%, #f59e0b) !important;
  color: #0f172a !important;
  border: none;
}

/* ميتا يمين */
.bb-hdr-v4__meta {
  min-width: 0;
}

/* شارة نسخة */
.bb-hdr-v4__ver-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 66px;
  min-height: 29px;
  padding: 0.2rem 0.45rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #ffffff !important;
  line-height: 1.1;
  text-align: center;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-sizing: border-box;
}

.bb-hdr-v4__ver-ico {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  opacity: 0.9;
  color: inherit;
}

.bb-hdr-v4__ver-text {
  color: #ffffff !important;
}

/* بطاقة الاشتراك */
.bb-hdr-v4__sub-card {
  min-width: min(100%, 190px);
  max-width: 22rem;
  min-height: 33px;
  padding: 0.3rem 0.55rem 0.34rem;
  color: #ffffff !important;
  text-align: center;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 0.65rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.bb-hdr-v4__sub-card-inner {
  font-size: 0.78rem;
  color: #ffffff !important;
}

@media (min-width: 1024px) {
  .bb-hdr-v4__sub-card-inner {
    font-size: 0.86rem;
  }
}

.bb-hdr-v4__sub-card strong,
.bb-hdr-v4__sub-card .bb-hdr-v4__sub-card-inner strong,
.bb-hdr-v4__sub-card-inner strong {
  color: #ffffff !important;
  font-size: 1.05em;
  font-weight: 800;
}

.bb-hdr-v4__sub-late {
  display: block;
  margin-top: 0.11rem;
  color: #fecaca !important;
  font-size: 0.72em;
  font-weight: 600;
}

.bb-hdr-v4__sub-card--urgent {
  border-color: #fecaca !important;
  background: color-mix(in srgb, #ef4444 32%, rgba(0, 0, 0, 0.28)) !important;
}

.bb-hdr-v4__sub-card--ended {
  border-color: #fecaca !important;
  background: color-mix(in srgb, #b91c1c 35%, rgba(0, 0, 0, 0.28)) !important;
}

/* لوحة الاسم السوداء — عرض إجباري (لا min(100%,…) ولا fit-content): تتوسّط عبر عمود grid + flex أعلى */
.bb-hdr-v4__brand-plate {
  position: relative;
  display: flex !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* ممنوع الاعتماد على 100% من حاوية ضيقة */
  width: clamp(520px, 42vw, 720px) !important;
  min-width: min(520px, calc(100vw - 1rem)) !important;
  max-width: min(720px, calc(100vw - 1rem)) !important;
  min-height: 65px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.68rem 1.25rem 0.75rem;
  background: linear-gradient(165deg, #111827 0%, #020617 55%, #0b1220 100%) !important;
  border: 2px solid var(--bb-d) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 100%, 0.7rem 100%);
  isolation: isolate;
  border-radius: 2px;
}

@media (min-width: 992px) {
  .bb-hdr-v4__brand-plate {
    width: clamp(600px, 42vw, 720px) !important;
    min-width: 600px !important;
    max-width: 720px !important;
  }
}

/* لمعة تمر ببطء */
.bb-hdr-v4__brand-plate::before {
  content: "";
  position: absolute;
  inset: -35% -45%;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.12) 50%, transparent 66%);
  animation: bb-hdr-v4-plate-sheen 8.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 1;
}

@keyframes bb-hdr-v4-plate-sheen {
  0%,
  100% {
    transform: translateX(-10%) translateY(0) rotate(0.001deg);
    opacity: 0.2;
  }
  50% {
    transform: translateX(12%) translateY(0) rotate(0.001deg);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-hdr-v4__brand-plate::before {
    animation: none;
    opacity: 0.2;
  }
}

.bb-hdr-v4__brand-plate::after {
  content: "";
  position: absolute;
  left: 0.56rem;
  right: 0.56rem;
  bottom: 0.41rem;
  height: 2px;
  background: var(--bb-d);
  border-radius: 2px;
  opacity: 0.95;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 12px color-mix(in srgb, var(--bb-d) 55%, transparent);
}

.bb-hdr-v4__brand-plate .pos-app-name {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  filter: none !important;
  max-width: 100%;
  overflow: visible;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  box-sizing: border-box;
}

.bb-hdr-v4__brand-plate .pos-app-name-black,
.bb-hdr-v4__brand-plate .pos-app-name-books,
.bb-hdr-v4__brand-plate .pos-app-name-erp {
  color: #ffffff !important;
}

/* إخفاء بقايا «اشتراك» بأسلوب السطر القديم */
.bb-hdr-v4 .bb-hdr-sub {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* موبايل: بدون overflow-x:auto على العمود — وترتيب عمودي حتى لا تتكدس 3 أعمدة فوق بعض (الديسكتوب ≥992 دون تغيير) */
@media (max-width: 991px) {
  .bb-hdr-v4__toprow {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 0.45rem !important;
    column-gap: 0 !important;
    min-height: 0 !important;
    /* إلغاء شبكة الأعمدة الثلاث التي تفرض تداخل الشعار مع الأزرار */
    grid-template-columns: unset !important;
  }
  /* الشعار أولاً بعرض الصف */
  .bb-hdr-v4__name-slot {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
  /* الهامبرغر + نقطة بيع + بقية الأدوات صفًا ثانيًا */
  .bb-hdr-v4__side--left {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    overflow: visible;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    padding-bottom: 2px;
    row-gap: 0.35rem;
    column-gap: 0.45rem;
  }
  /* العمود الأيمن بدون محتوى (موبايل يخفي الميتا من الـ Blade): إخفاء الحاوية حتى لا يبقى فراغ — :empty يفشل مع مسافات */
  .bb-hdr-v4__side--right:not(:has(*)) {
    display: none !important;
  }
  .bb-hdr-v4__side--right:has(*) {
    order: 3 !important;
    width: 100% !important;
    overflow: visible;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: flex-end;
    row-gap: 0.35rem;
  }
  /* اللوحة كانت min 520px فتخرق العمود الوسطي في الشبكة */
  .bb-hdr-v4__brand-plate {
    width: 100% !important;
    max-width: min(720px, calc(100vw - 1.5rem)) !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .bb-hdr-v4__side--left .header-secondary-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem 0.5rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .bb-hdr-v4__sub-card {
    min-width: 140px;
  }
  /* شارة رقم التحديث — إطار أوضح وهدف لمس أنسب (كبسولة الموبايل + اللوحة إن ظهرت) */
  .bb-hdr-v4 .js-bb-changelog-trigger.bb-hdr-badge {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.8125rem !important;
    min-height: 2.25rem;
    min-width: 3.5rem;
    line-height: 1.2;
    box-sizing: border-box;
  }
  .bb-hdr-v4 .bb-hdr-v4__ver-plate,
  .bb-hdr-v4__ver-plate {
    min-width: 5rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
  }
  .bb-hdr-v4__name-slot .pos-app-name {
    font-size: clamp(0.66rem, 1.6vw, 0.84rem) !important;
    letter-spacing: 0.04em !important;
  }
}

/* فقط شاشات الهاتف الضيّقة: تقليص عرض اللوحة — لا يلتغى clamp(600px,42vw,720px) على اللابتوب/التابلت */
@media (max-width: 640px) {
  .bb-hdr-v4__brand-plate {
    width: min(calc(100vw - 0.75rem), 720px) !important;
    min-width: 0 !important;
    max-width: min(720px, calc(100vw - 0.75rem)) !important;
    min-height: 48px;
    padding: 0.5rem 0.6rem 0.55rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.45rem) 100%, 0.45rem 100%);
  }
}

@media (max-width: 600px) {
  .bb-hdr-v4__sub-card-inner {
    font-size: 0.68rem;
  }
}

/* تراكب مع باقي الـ init */
@media (max-width: 991px) {
  .header-top-row {
    border-top: none !important;
  }
  /* شارة التحديث لما الهيدر ليس v4 (نفس المقاسات) */
  .bb-main-header:not(.bb-hdr-v4) .js-bb-changelog-trigger.bb-hdr-badge {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.8125rem !important;
    min-height: 2.25rem;
    min-width: 3.5rem;
    line-height: 1.2;
    box-sizing: border-box;
  }
}