/* Pro layer: extends assets.css without breaking existing layout */
:root{
  --pro-bg: #0b1220;
  --pro-card: rgba(255,255,255,.06);
  --pro-border: rgba(255,255,255,.12);
  --pro-text: rgba(255,255,255,.92);
  --pro-muted: rgba(255,255,255,.72);
  --pro-accent: #66e0a3;
}

/* global safety: prevent horizontal overflow */
*{ box-sizing: border-box; }
html, body{ max-width:100%; overflow-x:hidden; }

/* ---------- Topbar ---------- */
.pro-topbar{
  position: sticky; top:0; z-index:50;
  /* خففنا الشفافية لتقليل "بقع" الداكن */
  background: rgba(10,15,26,.94);
  border-bottom: 1px solid var(--pro-border);
  /* backdrop-filter يسبب artefacts على بعض أجهزة أندرويد */
  backdrop-filter: none;
}
@supports (backdrop-filter: blur(10px)){
  .pro-topbar{
    /* نفعّله فقط عند الدعم الحقيقي */
    backdrop-filter: blur(10px);
    background: rgba(10,15,26,.86);
  }
}

.pro-topbar .inner{
  max-width: 1100px; margin:0 auto;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding: 10px 14px;
  flex-wrap: wrap; /* حتى لا يطلع شيء خارج الشاشة */
}

.pro-brand{display:flex; align-items:center; gap:10px; cursor:pointer;}
.pro-badge{
  width:36px; height:36px; border-radius:12px;
  background: rgba(102,224,163,.14);
  border: 1px solid rgba(102,224,163,.35);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color: var(--pro-text);
  flex: 0 0 auto;
}
.pro-title{font-weight:900; color:var(--pro-text); line-height:1;}
.pro-sub{font-size:12px; color:var(--pro-muted); margin-top:2px;}

.pro-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.pro-actions .btn, .pro-actions button, .pro-actions select{
  height:38px;
  max-width: 100%;
}

.pro-actions select{
  background: rgba(255,255,255,.06);
  border:1px solid var(--pro-border);
  color: var(--pro-text);
  padding: 0 10px;
  border-radius: 12px;
  outline: none;
  /* يمنع اتساع dropdown بشكل مزعج */
  min-width: 140px;
}
.pro-actions option{color:#111;}

/* ---------- Kbar / Search ---------- */
.pro-kbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 10px;
  width: 100%;
}
.pro-kbar .btn.secondary{
  background: rgba(255,255,255,.06);
  border:1px solid var(--pro-border);
  color: var(--pro-text);
}
.pro-kbar .btn.secondary:hover{background: rgba(255,255,255,.10);}

.pro-search{
  /* كان min-width يسبب مشاكل بالموبايل */
  min-width: 0;
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--pro-border);
  color: var(--pro-text);
  padding: 10px 12px;
  border-radius: 12px;
}

/* ---------- Loader ---------- */
.pro-loader{
  position: fixed; inset:0; z-index: 9999;
  display:none; align-items:center; justify-content:center;
  background: rgba(10,15,26,.55);
  backdrop-filter: none;
}
@supports (backdrop-filter: blur(6px)){
  .pro-loader{ backdrop-filter: blur(6px); }
}
.pro-spinner{
  width:64px; height:64px; border-radius:50%;
  border: 7px solid rgba(255,255,255,.2);
  border-top-color: var(--pro-accent);
  animation: prospin 1s linear infinite;
}
@keyframes prospin { to { transform: rotate(360deg); } }

/* ---------- Improve pre blocks in view ---------- */
.textblock{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

/* ---------- Responsive utilities ---------- */
@media (max-width: 640px){
  .pro-topbar .inner{
    gap:10px;
  }
  .pro-actions{
    width:100%;
    justify-content:space-between;
  }
  .pro-actions select{
    width:100%;
  }
  .pro-search{
    max-width: 100%;
  }
}

/* ---------- Tables: stop overflow on mobile ---------- */
.table{
  width:100%;
  border-collapse: collapse;
}
.table td, .table th{
  vertical-align: top;
}

/* هذا يحل 80% حتى بدون wrapper */
@media (max-width: 760px){
  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}