@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --zx-bg:#06070F;
  --zx-bg-2:#0A0C1E;
  --zx-surface:#0D1029;
  --zx-line:rgba(140,148,214,0.14);
  --zx-purple:#6C5CE7;
  --zx-blue:#3B6FF0;
  --zx-blue-2:#4E8AFF;
  --zx-gold:#F5A623;
  --zx-gold-2:#FFC85C;
  --zx-text:#EDEFFA;
  --zx-muted:#8A8FB3;
  --zx-radius:16px;
  --zx-ease:cubic-bezier(.16,1,.3,1);
}

/* الخلفية العامة */
body{
  background:var(--zx-bg) !important;
  color:var(--zx-text) !important;
  font-family:'Cairo', sans-serif !important;
  position:relative;
}
body::before, body::after{
  content:"";
  position:fixed;
  width:600px; height:600px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.22;
  z-index:0;
  pointer-events:none;
  animation:zxFloat 14s ease-in-out infinite;
}
body::before{ background:var(--zx-purple); top:-200px; left:-150px; }
body::after{ background:var(--zx-gold); bottom:-200px; right:-150px; animation-delay:4s; }
@keyframes zxFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(40px,-30px) scale(1.1); }
}

/* عناوين متدرجة */
h1, h2, h3{
  font-family:'Space Grotesk', 'Cairo', sans-serif !important;
}

/* الكروت / البانلز — بدون تغيير المقاسات، بس شكل بصري */
.card, .panel, .box{
  background:rgba(13,16,41,.72) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--zx-line) !important;
  border-radius:var(--zx-radius) !important;
  box-shadow:0 0 30px rgba(108,92,231,.18);
  transition:box-shadow .35s var(--zx-ease), border-color .35s var(--zx-ease);
}
.card:hover, .panel:hover{
  border-color:var(--zx-gold) !important;
  box-shadow:0 0 24px rgba(245,166,35,.25);
}

/* الأزرار — لون وتوهج بس، من غير تغيير المقاس */
.btn-primary, .btn-success, button[type="submit"]{
  background:linear-gradient(120deg, var(--zx-purple) 0%, var(--zx-blue) 100%) !important;
  border:none !important;
  box-shadow:0 6px 22px rgba(59,111,240,.35) !important;
  transition:box-shadow .3s var(--zx-ease), filter .3s !important;
}
.btn-primary:hover, .btn-success:hover, button[type="submit"]:hover{
  box-shadow:0 8px 28px rgba(245,166,35,.4) !important;
  filter:brightness(1.08);
}

/* الحقول — بورد ملون عند التركيز بس */
input:focus, select:focus, textarea:focus{
  border-color:var(--zx-gold) !important;
  box-shadow:0 0 0 3px rgba(245,166,35,.15) !important;
}

/* الشريط الجانبي — تدرج خفيف */
.sidebar, .side-nav{
  background:linear-gradient(180deg, var(--zx-bg-2) 0%, var(--zx-bg) 100%) !important;
  border-color:var(--zx-line) !important;
}

/* Scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--zx-bg); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--zx-purple), var(--zx-blue));
  border-radius:10px;
}

.zx-hex-wrap{ position:relative; max-width:420px; margin:0 auto; }
.zx-hex-wrap svg{ width:100%; height:auto; overflow:visible; }
.zx-hex-outline{ fill:none; stroke:url(#zxHexGrad); stroke-width:2.4;
  filter:drop-shadow(0 0 18px rgba(108,92,231,.45)); }
.zx-hex-inner{ fill:none; stroke:rgba(140,148,214,.3); stroke-width:1; stroke-dasharray:3 6;
  animation:zxRotate 40s linear infinite; transform-origin:200px 200px; }
@keyframes zxRotate{ to{ transform:rotate(360deg); } }
.zx-node{ fill:var(--zx-bg); stroke-width:2.5; }
.zx-node.gold{ stroke:var(--zx-gold); filter:drop-shadow(0 0 8px var(--zx-gold)); }
.zx-node.blue{ stroke:var(--zx-blue-2); filter:drop-shadow(0 0 8px var(--zx-blue-2)); }
.zx-node.purple{ stroke:var(--zx-purple); filter:drop-shadow(0 0 8px var(--zx-purple)); }
.zx-pulse{ fill:none; stroke:var(--zx-gold-2); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:6 220; filter:drop-shadow(0 0 6px var(--zx-gold));
  animation:zxTravel 3.2s ease-in-out infinite; }
.zx-pulse.p2{ stroke:var(--zx-blue-2); animation-delay:1.05s; filter:drop-shadow(0 0 6px var(--zx-blue-2)); }
.zx-pulse.p3{ stroke:var(--zx-purple); animation-delay:2.1s; filter:drop-shadow(0 0 6px var(--zx-purple)); }
@keyframes zxTravel{
  0%{ stroke-dashoffset:226; }
  70%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:-40; }
}
.zx-center-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,166,35,.35), transparent 70%);
  filter:blur(10px); animation:zxPulseGlow 3.2s ease-in-out infinite;
}
@keyframes zxPulseGlow{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }
}

/* دخول ناعم للعناصر عند تحميل الصفحة */
.zx-fade{ opacity:0; animation:zxRise .8s var(--zx-ease) forwards; }
@keyframes zxRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

.zx-auth-page{
  min-height:80vh;
  display:flex;
  align-items:center;
  padding:60px 4vw;
}
.zx-auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.zx-auth-visual{ text-align:center; }
.zx-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--zx-gold-2, #FFC85C);
  background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.25);
  padding:6px 14px; border-radius:100px; margin-bottom:20px;
}
.zx-dot{
  width:6px;height:6px;border-radius:50%;background:var(--zx-gold, #F5A623);
  box-shadow:0 0 8px var(--zx-gold, #F5A623);
  animation:zxBlink 1.8s ease-in-out infinite;
}
@keyframes zxBlink{0%,100%{opacity:1;}50%{opacity:.3;}}

.zx-auth-title{
  font-family:'Space Grotesk', 'Cairo', sans-serif !important;
  font-weight:700; font-size:clamp(24px,2.6vw,34px); line-height:1.25;
  color:var(--zx-text, #EDEFFA); margin-bottom:14px;
}
.zx-grad-text{
  background:linear-gradient(100deg, #FFC85C, #F5A623 40%, #6C5CE7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.zx-auth-sub{ color:var(--zx-muted, #8A8FB3); font-size:15px; margin-bottom:30px; }

/* الفورم نفسه — نفس كلاسات Bootstrap الأصلية، بس ملبوسة تصميم زيركس */
.zx-well.well{
  background:rgba(13,16,41,.72) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--zx-line, rgba(140,148,214,.14)) !important;
  border-radius:18px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 30px rgba(108,92,231,.15);
  padding:34px 30px;
}
.zx-well .control-label{ color:var(--zx-muted, #8A8FB3); font-weight:600; font-size:13.5px; }
.zx-well .form-control{
  background:rgba(10,12,30,.7) !important;
  border:1px solid var(--zx-line, rgba(140,148,214,.14)) !important;
  color:var(--zx-text, #EDEFFA) !important;
  border-radius:11px !important;
  padding:11px 14px !important;
  height:auto !important;
  box-shadow:none !important;
}
.zx-well .form-control:focus{
  border-color:var(--zx-gold, #F5A623) !important;
  box-shadow:0 0 0 3px rgba(245,166,35,.15) !important;
}
.zx-well .forgot-password{ color:#8B7CF6; font-size:13px; }
.zx-well .btn-primary{
  background:linear-gradient(120deg, #6C5CE7 0%, #3B6FF0 100%) !important;
  border:none !important;
  box-shadow:0 6px 22px rgba(59,111,240,.35) !important;
  border-radius:11px !important;
  padding:10px 24px !important;
  font-weight:700 !important;
}
.zx-well .btn-primary:hover{ filter:brightness(1.08); box-shadow:0 8px 28px rgba(245,166,35,.4) !important; }
.zx-well .pull-right-middle{ color:var(--zx-muted, #8A8FB3); font-size:13.5px; }
.zx-well .pull-right-middle a{ color:#FFC85C; font-weight:700; }

@media (max-width: 900px){
  .zx-auth-grid{ grid-template-columns:1fr; gap:30px; }
  .zx-auth-visual{ order:-1; }
  .zx-hex-wrap{ max-width:260px; margin:0 auto; }
}

.navbar-default{
  background:rgba(13,16,41,.75) !important;
  border:none !important;
  border-bottom:1px solid rgba(140,148,214,.14) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  margin-bottom:0 !important;
}

/* اسم الموقع / اللوجو في الـ navbar */
.navbar-default .navbar-brand{
  color:#EDEFFA !important;
  font-family:'Space Grotesk','Cairo',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:1px;
}
.navbar-default .navbar-brand:hover{
  color:#F5A623 !important;
}

/* روابط القائمة (طلب جديد / الخدمات / الطلبات...) */
.navbar-default .navbar-nav > li > a{
  color:#9AA0C3 !important;
  font-weight:700 !important;
  font-size:14px;
  transition:color .25s ease, background .25s ease;
  border-radius:8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
  color:#EDEFFA !important;
  background:rgba(108,92,231,.15) !important;
}

/* التاب النشط دلوقتي (اللي إنت واقف فيه) */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
  color:#fff !important;
  background:linear-gradient(120deg, #6C5CE7 0%, #3B6FF0 100%) !important;
  box-shadow:0 4px 16px rgba(59,111,240,.35);
}

/* قوائم الدروب-داون في الـ navbar (لو فيه) */
.navbar-default .dropdown-menu{
  background:#0D1029 !important;
  border:1px solid rgba(140,148,214,.14) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.navbar-default .dropdown-menu > li > a{
  color:#9AA0C3 !important;
}
.navbar-default .dropdown-menu > li > a:hover{
  background:rgba(108,92,231,.15) !important;
  color:#fff !important;
}

/* زرار الرصيد (EGP 0) — بادج مميز بالدهبي */
.navbar-default .badge,
.navbar-default .label{
  background:linear-gradient(120deg, #F5A623, #FFC85C) !important;
  color:#1a1a1a !important;
  font-weight:800 !important;
  border-radius:100px !important;
  padding:5px 12px !important;
}

/* زرار الهامبرجر (الموبايل) */
.navbar-default .navbar-toggle{
  border-color:rgba(140,148,214,.25) !important;
}
.navbar-default .navbar-toggle .icon-bar{
  background:#F5A623 !important;
}
.navbar-default .navbar-toggle:hover{
  background:rgba(108,92,231,.15) !important;
}

/* تسجيل الخروج / الحساب */
.navbar-default .navbar-nav > li > a[href*="logout"],
.navbar-default .navbar-nav > li > a[href*="signout"]{
  color:#F87171 !important;
}
/* =========================================================
   ZYREX — باس شامل لباقي مكونات Bootstrap 3
   ضيف الكود ده كمان في آخر style.css
   ========================================================= */

/* ===== الجداول (الطلبات، السجلات) ===== */
.table{
  background:transparent !important;
  color:#EDEFFA !important;
  border-collapse:separate !important;
  border-spacing:0 6px !important;
}
.table thead th{
  color:#F5A623 !important;
  border:none !important;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:12px 14px !important;
}
.table tbody tr{
  background:rgba(13,16,41,.65) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.table tbody tr:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(108,92,231,.2);
}
.table td, .table th{
  border-top:none !important;
  border-bottom:1px solid rgba(140,148,214,.08) !important;
  padding:12px 14px !important;
  color:#EDEFFA !important;
  vertical-align:middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd){
  background:rgba(13,16,41,.5) !important;
}
.table-hover > tbody > tr:hover{
  background:rgba(108,92,231,.12) !important;
}

/* ===== لوحات/بانلز (Panel) ===== */
.panel{
  background:rgba(13,16,41,.72) !important;
  border:1px solid rgba(140,148,214,.14) !important;
  border-radius:16px !important;
  box-shadow:0 0 24px rgba(108,92,231,.15);
  overflow:hidden;
}
.panel-heading{
  background:rgba(108,92,231,.1) !important;
  border-bottom:1px solid rgba(140,148,214,.14) !important;
  color:#EDEFFA !important;
}
.panel-body{ color:#EDEFFA !important; }
.panel-default > .panel-heading{ color:#F5A623 !important; }

/* ===== تابات الفلترة (الكل / قيد الانتظار / مكتمل...) ===== */
.nav-tabs, .nav-pills{ border-bottom:none !important; }
.nav-tabs > li > a, .nav-pills > li > a{
  color:#9AA0C3 !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  font-weight:700; font-size:13.5px;
  transition:all .25s ease;
  margin-left:4px;
}
.nav-tabs > li > a:hover, .nav-pills > li > a:hover{
  background:rgba(108,92,231,.12) !important;
  color:#EDEFFA !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover{
  background:linear-gradient(120deg, #6C5CE7 0%, #3B6FF0 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 4px 14px rgba(59,111,240,.35);
}

/* ===== قوائم منسدلة عادية Bootstrap ===== */
.dropdown-menu{
  background:#0D1029 !important;
  border:1px solid rgba(140,148,214,.14) !important;
  border-radius:12px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.4) !important;
  padding:6px !important;
}
.dropdown-menu > li > a{
  color:#B7BBDD !important;
  border-radius:8px !important;
  padding:8px 12px !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  background:rgba(108,92,231,.18) !important;
  color:#fff !important;
}
.dropdown-menu .divider{ background:rgba(140,148,214,.12) !important; }

/* ===== Select2 (قوائم البحث/الاختيار بالأيقونات) ===== */
.select2-container--default .select2-selection--single{
  background:rgba(10,12,30,.7) !important;
  border:1px solid rgba(140,148,214,.14) !important;
  border-radius:11px !important;
  height:44px !important;
  display:flex; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#EDEFFA !important;
  line-height:44px !important;
}
.select2-dropdown{
  background:#0D1029 !important;
  border:1px solid rgba(140,148,214,.14) !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.45) !important;
}
.select2-search--dropdown .select2-search__field{
  background:rgba(10,12,30,.7) !important;
  border:1px solid rgba(140,148,214,.14) !important;
  color:#EDEFFA !important;
  border-radius:8px !important;
}
.select2-results__option{
  color:#B7BBDD !important;
  padding:9px 14px !important;
}
.select2-results__option--highlighted[aria-selected]{
  background:linear-gradient(120deg, #6C5CE7, #3B6FF0) !important;
  color:#fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  filter:invert(1);
}

/* ===== تنبيهات (Alerts) ===== */
.alert{
  border-radius:12px !important;
  border:1px solid transparent !important;
  backdrop-filter:blur(8px);
}
.alert-success{ background:rgba(34,197,94,.12) !important; color:#4ADE80 !important; border-color:rgba(34,197,94,.3) !important; }
.alert-danger{ background:rgba(239,68,68,.12) !important; color:#F87171 !important; border-color:rgba(239,68,68,.3) !important; }
.alert-warning{ background:rgba(245,166,35,.12) !important; color:#F5A623 !important; border-color:rgba(245,166,35,.3) !important; }
.alert-info{ background:rgba(59,111,240,.12) !important; color:#4E8AFF !important; border-color:rgba(59,111,240,.3) !important; }
.alert .close{ color:inherit !important; opacity:.7 !important; text-shadow:none !important; }

/* ===== ترقيم الصفحات (Pagination) ===== */
.pagination > li > a, .pagination > li > span{
  background:rgba(13,16,41,.72) !important;
  border:1px solid rgba(140,148,214,.14) !important;
  color:#B7BBDD !important;
  margin:0 3px;
  border-radius:8px !important;
}
.pagination > li > a:hover{
  background:rgba(108,92,231,.18) !important;
  color:#fff !important;
}
.pagination > .active > a, .pagination > .active > span{
  background:linear-gradient(120deg, #6C5CE7, #3B6FF0) !important;
  border:none !important;
  color:#fff !important;
}

/* ===== أزرار عامة (غطاء شامل، أي زرار Bootstrap) ===== */
.btn-default{
  background:rgba(13,16,41,.72) !important;
  border:1px solid rgba(140,148,214,.2) !important;
  color:#EDEFFA !important;
  border-radius:10px !important;
  transition:all .25s ease;
}
.btn-default:hover{
  border-color:#F5A623 !important;
  color:#F5A623 !important;
}
.btn-info{
  background:linear-gradient(120deg,#3B6FF0,#4E8AFF) !important;
  border:none !important; color:#fff !important; border-radius:10px !important;
}
.btn-warning{
  background:linear-gradient(120deg,#F5A623,#FFC85C) !important;
  border:none !important; color:#1a1a1a !important; border-radius:10px !important; font-weight:700 !important;
}
.btn-danger{
  background:linear-gradient(120deg,#EF4444,#F87171) !important;
  border:none !important; color:#fff !important; border-radius:10px !important;
}

/* ===== عناوين الصفحة العامة ===== */
h1, h2, h3, h4, .page-header{
  color:#EDEFFA !important;
  border-color:rgba(140,148,214,.14) !important;
}

/* ===== خلفية الصفحة العامة تحت أي محتوى فاضي (تفادي أبيض فاضح) ===== */
.container, .container-fluid, body > div{
  background:transparent !important;
}

/* أي عنصر فيه فورم جواه مباشرة — يتلون دارك تلقائي */
div:has(> form),
div:has(> .form-group),
div:has(> .form-horizontal),
.row:has(> .form-group),
form{
  background:rgba(13,16,41,.72) !important;
  border-radius:16px !important;
}

/* أي حاوية بيضا فيها حقول إدخال جواها (حتى لو متعمقة شوية) */
div:has(> .form-group > label),
div:has(> div > .form-group){
  background:rgba(13,16,41,.6) !important;
}

/* ===== تقوية عامة على كل التسميات والنصوص الوصفية ===== */
label, .control-label, .help-block, small, .text-muted{
  color:#B7BBDD !important;
  opacity:1 !important;
}

/* ===== تقوية عامة على كل الحقول (input/select/textarea) ===== */
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea{
  background:rgba(10,12,30,.75) !important;
  border:1px solid rgba(140,148,214,.18) !important;
  color:#EDEFFA !important;
  opacity:1 !important;
}
input.form-control::placeholder,
textarea::placeholder{
  color:#5D6288 !important;
  opacity:1 !important;
}

/* ===== أي نص عادي جوه فورم أو كارت — نضمن وضوحه ===== */
form p, form span, form div, .well p, .well span,
.checkbox label, .radio label{
  color:#B7BBDD !important;
  opacity:1 !important;
}

/* ===== شيلان أي خلفية بيضا متبقية على مستوى الصفحة ===== */
body, html{
  background-color:#06070F !important;
}
.content, .content-wrapper, main, #content, #main-content{
  background:transparent !important;
}

/* ===== منع أي عنصر يفضل عالق بشفافية منخفضة (fallback أمان) ===== */
*{
  opacity:1 !important;
}