/* ════════════════════════════════════════════════════════════
   هوية كراسة بلس الجديدة — طبقة موحدة فوق كل الصفحات الداخلية
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root{
  --brand-ink:#16283a;
  --brand-muted:#5b6b7c;
  --logo-ink:#16283a;
  --logo-sub:#8aa0b8;
  /* قلب اللون الأساسي القديم (السليتي) إلى أزرق الهوية */
  --purple:#2f6fd8;
  --p2:#2456b0;
}

/* ═══ الخط: IBM Plex Sans Arabic في كل مكان ═══ */
body, button, input, select, textarea, h1, h2, h3, h4, h5, table, a, span, div, p, label{
  font-family:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif !important;
}

/* ═══ الخلفية: نفس تدرج اللاندنق بالضبط — على html والجسم شفاف
   (حتى تظهر طبقة الأورورا المتحركة brand-fx خلف المحتوى) ═══ */
html{
  background:
    radial-gradient(700px 480px at 6% -6%, rgba(92,225,230,.38), transparent 62%),
    radial-gradient(800px 560px at 104% 22%, rgba(167,139,250,.32), transparent 66%),
    radial-gradient(600px 460px at 45% 115%, rgba(106,141,255,.26), transparent 66%),
    linear-gradient(165deg,#f7f9fe 0%,#eef2fb 55%,#eaefff 100%) !important;
}
body{background:transparent !important;}
/* إخفاء طبقات الخلفية القديمة (ضباب أبيض/تعتيم/شكل عائم) حتى تتوحد كل الصفحات
   على نفس خلفية داشبورد العقود بالضبط */
body::before, body::after{display:none !important;}
.dim, .bg-shape{display:none !important;}

/* ═══ النافبار: زجاج فاتح ═══ */
.topbar{
  background:rgba(255,255,255,.62) !important;
  backdrop-filter:blur(22px) !important;-webkit-backdrop-filter:blur(22px) !important;
  border-bottom:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 10px 30px rgba(70,135,205,.12) !important;
}
.nav-pill{
  color:#45566b !important;
  border:1.5px solid rgba(22,40,58,.14) !important;
  background:rgba(255,255,255,.55) !important;
}
.nav-pill:hover{background:#fff !important;border-color:#5CE1E6 !important;}
/* أيقونات التصفح بتدرج الهوية (التعريف يُحقن من brand-fx.js) */
.nav-pill svg, .nav-pill svg *,
.ka-bell svg, .ka-bell svg *,
.kb-btn svg, .kb-btn svg *,
#searchWrap svg{stroke:url(#kaIconGrad) #3fa4ff !important;}
/* اسم الحساب بنفسجي + دائرة الحساب بتدرج الهوية — موحد بكل الصفحات */
#avatarName, #accountName, .account-name{color:#7a5cf0 !important;}
#avatarWrap{background:rgba(22,40,58,.05) !important;border-color:rgba(22,40,58,.14) !important;}
#avatarCircle, #resultsAvatarCircle, #accountAvatar, .account-avatar, .nav-avatar{
  background:linear-gradient(135deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;
  color:#fff !important;
}

/* ═══ جرس التنبيهات (alerts.js) على الفاتح ═══ */
.ka-bell{
  color:var(--brand-ink) !important;
  border:1.5px solid rgba(22,40,58,.14) !important;
  background:rgba(255,255,255,.55) !important;
}
.ka-bell:hover{background:#fff !important;}
.ka-badge{border-color:#fff !important;}
.ka-panel-head{background:linear-gradient(120deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;}

/* ═══ رصيدي (balance.js) على الفاتح ═══ */
.kb-btn{
  color:var(--brand-ink) !important;
  border:1.5px solid rgba(22,40,58,.14) !important;
  background:rgba(255,255,255,.55) !important;
}
.kb-btn:hover{background:#fff !important;}
.kb-btn.kb-floating{
  background:linear-gradient(120deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;
  color:#fff !important;border:none !important;
}
.kb-plan{background:linear-gradient(120deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;color:#fff !important;}
.kb-btn{color:#45566b !important;}
/* مودال رصيدي: من السليتي القديم إلى الهوية */
.kb-plan-row{background:linear-gradient(135deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;}
.kb-modal{border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,1), 0 30px 80px rgba(40,90,180,.35) !important;}
.kb-card{background:rgba(255,255,255,.85) !important;border:1px solid rgba(92,225,230,.3) !important;}
.kb-card-num{color:#2f6fd8 !important;}
.kb-bar{background:rgba(63,164,255,.12) !important;}
.kb-close{background:rgba(63,164,255,.12) !important;color:#2f6fd8 !important;}
.kb-foot a{color:#2f6fd8 !important;}
.kb-spinner{border-color:rgba(63,164,255,.2) !important;border-top-color:#3fa4ff !important;}

/* ═══ زر المساعدة والجولة الإرشادية (tour.js) ═══ */
.kp-help-fab{
  background:linear-gradient(120deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;
  box-shadow:0 10px 26px rgba(106,141,255,.45) !important;
}
.kp-tour-next{
  background:linear-gradient(180deg,#7ea0ff,#3fa4ff 45%,#7a5cf0) !important;
  color:#fff !important;border:none !important;
}
.kp-tour-step-num{background:linear-gradient(120deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;color:#fff !important;}
.kp-tour-overlay{background:rgba(30,50,90,.45) !important;}

/* ═══ مودال الخدمات (index): زجاج فاتح بدل الداكن ═══ */
.services-popup-overlay{
  background:rgba(20,40,75,.38) !important;
  backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important;
}
.service-card{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.82)) !important;
  border:1px solid rgba(255,255,255,1) !important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,1), 0 18px 40px rgba(40,90,180,.22) !important;
  color:var(--brand-ink) !important;
}
.service-name{color:var(--brand-ink) !important;}
.service-desc, .service-desc *{color:#45566b !important;}
.service-icon{
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(235,244,255,.85)) !important;
  color:#12b5d8 !important;
  border:1px solid rgba(255,255,255,1) !important;
  box-shadow:0 8px 18px rgba(70,135,205,.22), inset 0 1px 0 #fff !important;
}
.service-icon svg, .service-icon svg *{stroke:url(#kaIconGrad) #3fa4ff !important;}
.service-badge{
  background:rgba(92,225,230,.15) !important;
  color:#0e7490 !important;
  border:1px solid rgba(92,225,230,.45) !important;
}

/* ═══ عناوين ونصوص ═══ */
h2, h3{color:var(--brand-ink) !important;}
/* عناوين الصفحات: تدرج الهوية البنفسجي */
.page-title, .topbar-title, h1, #r_title{
  background:linear-gradient(110deg,#0ebac3,#3f7fe0 40%,#7a5cf0 85%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:#7a5cf0 !important;
  text-shadow:none !important;
}
.page-sub{color:var(--brand-muted) !important;}
.usage-chip{
  color:var(--brand-ink) !important;
  background:rgba(255,255,255,.6) !important;
  border:1px solid rgba(22,40,58,.12) !important;
}

/* ═══ الأزرار: تدرج الهوية الجيلي ═══ */
.btn-primary, .new-btn, .refresh-btn, .generate-btn, .submit-btn, .upload-btn, .plan-btn.solid, .btn-main, button[type="submit"]{
  background:linear-gradient(180deg,#7ea0ff,#3fa4ff 45%,#7a5cf0) !important;
  color:#fff !important; border:none !important;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7), inset 0 -4px 8px rgba(50,40,140,.3), 0 10px 26px rgba(106,141,255,.4) !important;
}
.btn-ghost{
  background:rgba(255,255,255,.62) !important;
  color:var(--brand-ink) !important;
  border:1px solid rgba(22,40,58,.15) !important;
}
.btn-ghost:hover{border-color:#5CE1E6 !important;background:#fff !important;}

/* ═══ باقة "الأكثر شيوعاً": تدرج الهوية الكامل ═══ */
.plan.featured{
  background:linear-gradient(150deg,#35e0d0,#3fa4ff 50%,#8b6bff) !important;
  box-shadow:0 24px 55px rgba(106,141,255,.4) !important;
}

/* ═══ التلوينات السليتية القديمة → سماوي الهوية ═══ */
.upload-zone, .instruction-step, .plan-quota, .threshold-value{
  background:rgba(92,225,230,.08) !important;
  border-color:rgba(92,225,230,.45) !important;
}

/* ═══ الحقول: زجاج موحد ═══ */
input:not([type=checkbox]):not([type=radio]), select, textarea{
  border:1.5px solid rgba(22,40,58,.12) !important;
  background:rgba(255,255,255,.85) !important;
  border-radius:12px !important;
  color:#16283a !important;
}
input:focus, select:focus, textarea:focus{
  border-color:#5CE1E6 !important;
  box-shadow:0 0 0 3px rgba(92,225,230,.2) !important;
  outline:none !important;
}

/* ═══ عناوين الحقول: رصاصي غامق بدون ظل ═══ */
label{color:#43536b !important;text-shadow:none !important;}

/* ═══ القوائم المنسدلة (Choices): على الهوية ═══ */
.choices__inner{
  border:1.5px solid rgba(22,40,58,.12) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:none !important;
}
.choices[data-type*="select-one"]::after{
  border-color:#3fa4ff transparent transparent transparent !important;
}
.choices.is-open .choices__inner, .choices.is-focused .choices__inner{
  border-color:#5CE1E6 !important;
  box-shadow:0 0 0 3px rgba(92,225,230,.2) !important;
}
.choices__list--dropdown, .choices__list[aria-expanded]{
  border:1px solid rgba(92,225,230,.45) !important;
  border-radius:12px !important;
  box-shadow:0 18px 40px rgba(70,135,205,.22) !important;
  overflow:hidden !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted{
  background:linear-gradient(120deg,rgba(53,224,208,.15),rgba(139,107,255,.15)) !important;
  color:var(--brand-ink) !important;
}

/* ═══ الكروت والمودالات: زجاج الهوية ═══ */
.modal, .card, .g-step, .auth-box, .box, .table-box, .stat-card,
.plan-card, .account-card, .faq-item, .cta-card,
.kpi, .filters, .table-card, .chart-card{
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,1), 0 18px 40px rgba(70,135,205,.16) !important;
}

/* ═══ صفحات الشروط/الخصوصية/الاسترداد: لمسات الهوية ═══ */
.highlight-box{background:rgba(92,225,230,.10) !important;border:1px solid rgba(92,225,230,.35) !important;}
.plan-card{background:rgba(255,255,255,.82) !important;border:1px solid rgba(92,225,230,.3) !important;}

/* ═══ الأسئلة الشائعة (الباقات): زجاج فاتح ونص مقروء ═══ */
.faq-item{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55)) !important;}
.faq-item .a, .faq-item p{color:var(--brand-muted) !important;}
.faq-item .q, .faq-item summary, .faq-item h4{color:var(--brand-ink) !important;}

/* ═══ حالات فارغة وإرشادية ═══ */
.empty h3, .empty > p, .g-tag{color:var(--brand-ink) !important;}
.empty p{color:var(--brand-muted) !important;}
.badge.brand, .g-tag{
  background:rgba(92,225,230,.14) !important;
  color:#0e7490 !important;
  border:1px solid rgba(92,225,230,.4) !important;
}

/* ═══ بحث العقود ═══ */
#searchInput{color:#16283a !important;background:rgba(255,255,255,.8) !important;border-color:rgba(22,40,58,.14) !important;}
#searchInput::placeholder{color:#8aa0b8 !important;}
#searchWrap svg{stroke:#8aa0b8 !important;}

/* ═══ الجوال: توب بار + جداول + عناوين — لكل الصفحات الداخلية ═══ */
@media(max-width:768px){
  html,body{overflow-x:hidden;max-width:100vw;}
  /* التوب بار: اللوقو ثابت والأزرار تنسحب أفقياً بدل ما تنعصر */
  .topbar-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 10px !important;gap:7px !important;}
  .topbar-inner::-webkit-scrollbar{display:none;}
  .topbar-inner > *{flex:0 0 auto;}
  .logoWrap{width:132px !important;min-width:132px !important;height:44px !important;flex:0 0 auto !important;}
  .nav-pill{font-size:12px !important;padding:7px 11px !important;white-space:nowrap;}
  .kb-btn{font-size:12px !important;padding:7px 12px !important;white-space:nowrap;}
  #avatarName{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar-title{font-size:14px !important;white-space:nowrap;}
  /* الجداول: سحب أفقي بدل الانعصار */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;max-width:100%;}
  /* الفلاتر والصفوف تلتف */
  .filters{flex-wrap:wrap !important;}
  .page-title{font-size:22px !important;}
}

/* ═══ سكرول بار ═══ */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8fd8f0,#9aa8f5);border-radius:6px;}
::-webkit-scrollbar-track{background:rgba(22,40,58,.05);}

footer{color:var(--brand-muted);}

/* ═══ نص أبيض داخل كل عنصر مختار أو بخلفية الهوية ═══ */
.scope-opt.active, .scope-opt.active *,
.band.sel, .imp-opt.sel .t,
.plan.featured, .plan.featured *,
.plan-btn.solid, .plan-btn.solid *{color:#fff !important;}
.plan-btn.solid:disabled{opacity:1 !important;filter:saturate(.55) brightness(1.05) !important;color:#fff !important;}
.scope-opt.active{background:linear-gradient(120deg,#35e0d0,#3fa4ff 55%,#8b6bff) !important;border:none !important;}

/* ═══ رؤوس الجداول: تدرج واحد متصل على الصف كامل (مو لكل خلية) ═══ */
thead tr{background:linear-gradient(120deg,#2bbFC9,#3f7fe0 55%,#7a5cf0) !important;}
thead th{background:transparent !important;color:#fff !important;}

/* ═══ تجميل داشبورد العقود ═══ */
.kpi-icon{
  background:linear-gradient(135deg,rgba(53,224,208,.18),rgba(139,107,255,.18)) !important;
  border:1px solid rgba(92,225,230,.35) !important;
}
.kpi-icon svg{stroke:#2f6fd8 !important;}
.kpi{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.chart-card h3, .table-card h3{
  background:linear-gradient(110deg,#0ebac3,#3f7fe0) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}