/* ===========================
   GEO Explore — Global Contrast & Layout Overrides
   ضع هذا الملف بعد أي CSS موجود لديك
   =========================== */

/* 1) ألوان وضبط متغيرات */
:root{
  --bg-1:#0b0f19;
  --bg-2:#121a2f;
  --bg-3:#0e1426;

  --fg:#f7f9ff;
  --fg-strong:#ffffff;
  --muted:#c7d1e7;            /* أفتح من قبل—أوضح على الخلفيات الداكنة */
  --muted-2:#a9b2c9;

  --line:#2a3a5f;

  --brand-1:#1ea0ff;
  --brand-2:#6b4dff;
  --brand-3:#00d2ff;

  --ok:#35d399; --warn:#ffd166; --bad:#ff6b6b;

  --card:#1a233d;             /* خلفية بطاقات أفتح لرفع التباين */
  --card-2:#162034;
  --card-3:#121a30;

  --radius:14px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --wrap:1180px;

  --focus:#9bc7ff;
}

/* 2) أساسيات الطباعة */
html,body{height:100%}
body{
  margin:0; background:var(--bg-1); color:var(--fg);
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.85; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* أحجام خط متناسقة */
h1,h2,h3,h4{margin:0 0 .4em; color:var(--fg-strong); letter-spacing:.1px}
h1{font-size:clamp(28px,4.8vw,46px); line-height:1.25}
h2{font-size:clamp(22px,3.2vw,30px)}
h3{font-size:clamp(18px,2.2vw,22px)}
h4{font-size:clamp(16px,1.8vw,18px)}
p,li{font-size:clamp(14px,1.4vw,16px)}
small,.small{font-size:.92em; color:var(--muted)}

/* 3) روابط وأزرار موحّدة */
a{color:#bfe0ff; text-decoration:none}
a:hover{opacity:.92}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:10px 16px; border-radius:10px; border:1px solid var(--line);
  background:#0f172a; color:#fff; font-weight:800; cursor:pointer; transition:.2s;
}
.btn:hover{border-color:#5e86ff}
.btn.primary{border:none; background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#081321; box-shadow:var(--shadow)}
.btn.ghost{background:#121b33}
.btn.light{background:#eaf3ff; color:#0b0f19; border-color:#cfe1ff}
.btn.icon{padding:8px 10px; border-radius:8px}

/* 4) أغلفة عامة */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.section{padding:28px 0 42px}

/* 5) ترويسة موحّدة لكل الصفحات (Header + رجوع) */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(12,18,34,.92), rgba(12,18,34,.72));
  border-bottom:1px solid #ffffff18;
}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.brand .dot{width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--brand-1),var(--brand-2))}
.brand .name{font-size:1.2rem; background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.nav{display:flex; gap:14px}
.nav a{color:var(--muted); font-weight:700}
.nav a:hover{color:var(--fg)}
.backline{display:flex; gap:10px; align-items:center; margin:12px 0 0}
.backline .back{display:inline-flex; align-items:center; gap:.5rem; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#101a33; color:#fff; font-weight:800}

/* 6) بطاقات/بلوكات موحّدة */
.card,.panel,.block{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid #ffffff16; border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow);
}
.card h3,.panel h3,.block h3{color:#fff}
.muted{color:var(--muted)}
.rule{width:64px; height:2px; background:linear-gradient(90deg,var(--brand-1),transparent); margin:10px 0 14px}

/* شبكة عامة للبطاقات */
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

/* 7) تفاصيل/أكورديون */
details.unit{
  background:#111a33; border:1px solid #ffffff18; border-radius:12px; overflow:hidden;
}
details.unit summary{
  list-style:none; cursor:pointer; padding:12px 14px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  color:#eaf0ff; background:#0f172a; border-bottom:1px solid #ffffff10;
}
details.unit[open]{border-color:#6fa0ff55}
details.unit .body{padding:12px 14px}
.stage{font-size:.85rem; padding:3px 8px; border:1px solid #2a3d66; border-radius:999px; color:#b7c9f0; background:#111b33}

/* 8) شارات وشرائح */
.chip,.pill,.tag{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid #203055; background:#0f172a; color:#e2ecff; font-size:.92rem; font-weight:700;
}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* 9) صناديق البحث والحقول */
.search{display:flex; align-items:center; gap:8px; background:#0f172a; border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.search input,.field{
  all:unset; flex:1; color:#fff; font-size:1rem;
}
input[type="text"],input[type="search"],textarea,select{
  background:#0f172a; border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:#fff;
}
input::placeholder,textarea::placeholder{color:#8fa4cc}

/* 10) جداول */
table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid #ffffff16; border-radius:12px; overflow:hidden}
th,td{padding:10px 12px; border-bottom:1px solid #ffffff14}
th{background:#0f162a; color:#eaf2ff; text-align:right}
tr:hover td{background:#121b33}
tbody tr:last-child td{border-bottom:none}

/* 11) تضمين الفيديو (مكانك تحط روابط يوتيوب لاحقًا) */
.video-wrap{
  width:100%; aspect-ratio:16/9; background:#0b0f19; border:1px solid #1d2a4a;
  border-radius:12px; overflow:hidden; position:relative;
}
.video-wrap iframe{width:100%; height:100%; border:0; display:block; background:#000}

/* 12) صناديق “البلوك” الخاصة بصفحة التدريب/التوظيف — وضوح أعلى */
.jobs .block{
  background:linear-gradient(180deg,#1b2542,#15203a);
  border:1px solid rgba(255,255,255,.16);
  display:flex; gap:16px; align-items:center; justify-content:space-between;
}
.jobs .block h3{margin:0; font-size:1.15rem; color:#fff}
.jobs .block p{margin:0; color:#d6e2ff}
.jobs .block .btn{white-space:nowrap}

/* 13) تبويبات */
.tabs{display:inline-flex; gap:8px; padding:6px; background:#0f172a; border:1px solid var(--line); border-radius:999px}
.tabs button{all:unset; padding:8px 12px; border-radius:999px; cursor:pointer; color:#cfe3ff; font-weight:800}
.tabs button.active{background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#0a0e18}

/* 14) بطاقات مصغّرة داخل بطاقات أكبر (كروت داخليّة) */
.card .card,
.panel .card{
  background:#121a30; border:1px solid #203153; border-radius:12px; padding:12px;
  box-shadow:none;
}

/* 15) فواصل ومساحات ومساطر */
.hr{height:1px; background:#ffffff16; margin:10px 0 14px; border:none}
.space-xs{height:6px} .space-s{height:12px} .space-m{height:20px} .space-l{height:32px}

/* 16) تحسينات وصول وتركيز */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:8px;
}

/* 17) تحسين خرائط Leaflet إن وجدت */
#map, .map, #leafletMap{
  width:100%; height:360px; border-radius:12px; border:1px solid #1d2a4a; overflow:hidden;
}
.leaflet-control-layers{
  background:#0f172a !important; color:#eaf0ff; border:1px solid #24314d !important; border-radius:10px !important;
}

/* 18) بطاقات تحليل صغيرة أكثر وضوحًا (لما تكون كثيرة) */
.mini-cards{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .mini-cards{grid-template-columns:1fr} }
.mini-card{
  background:#131c32; border:1px solid #233159; border-radius:12px; padding:12px;
}
.mini-card h4{margin:0 0 6px; color:#fff}
.mini-card p{margin:0; color:#d2dcf5}

/* 19) بطاقات أفقية للخلاصات */
.h-card{
  display:flex; gap:14px; align-items:flex-start;
  background:#131c30; border:1px solid #233259; border-radius:12px; padding:12px;
}
.h-card .thumb{width:72px; height:72px; border-radius:10px; background:#0b0f19; flex:0 0 72px}
.h-card .meta{flex:1}
.h-card .meta h4{margin:0 0 4px}
.h-card .meta p{margin:0; color:#cfd8ef}

/* 20) هوامش محتوى أسفل الهيدر الثابت */
.page{padding-top:18px}
.site-header + .hero,
.site-header + .page{padding-top:12px}

/* 21) توحيد الفوتر */
.footer{
  border-top:1px solid #ffffff18; padding:20px 0; margin-top:20px;
  color:var(--muted); text-align:center
}

/* 22) بطاقات “متدرجة” لإبراز أقسام */
.gradient-card{
  background:
    radial-gradient(700px 420px at 80% -10%, #6b4dff22, transparent 60%),
    radial-gradient(420px 320px at 5% 110%, #1ea0ff18, transparent 60%),
    linear-gradient(180deg,#121b34,#121a30);
  border:1px solid #ffffff20; border-radius:16px; padding:16px; box-shadow:var(--shadow)
}

/* 23) تحسين القوائم */
ul.compact{margin:0; padding-inline-start:18px}
ul.compact li{margin:.25em 0}

/* 24) تحسين كتل “التحذير/المعلومة” */
.note{background:#0f1a2f; border:1px solid #29406c; color:#d6e6ff; border-radius:10px; padding:12px}
.note.ok{border-color:#2d7a5f; color:#d7fff1; background:#0e1f1a}
.note.warn{border-color:#7a6a2d; color:#fff7d7; background:#1f1a0e}

/* 25) بطاقات “روابط سريعة” */
.quick-links{display:grid; gap:10px; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .quick-links{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .quick-links{grid-template-columns:1fr} }
.quick-links a{
  display:flex; align-items:center; justify-content:center;
  background:#121c33; border:1px solid #22345e; color:#dfe9ff;
  border-radius:12px; padding:12px; font-weight:800;
}
.quick-links a:hover{border-color:#5f84ff}

/* 26) بطاقات “روابط بملف” (تحميل PDF/ZIP) */
.file-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#121c34; border:1px solid #22345e; border-radius:12px; padding:14px;
}
.file-card .meta{display:grid; gap:4px}
.file-card .title{font-weight:800; color:#fff}
.file-card .desc{color:#cfe0ff}

/* 27) تحسين شريط تبويب أعلى صفحات التحليل */
.analysis-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px
}
.analysis-tabs .tab{
  all:unset; cursor:pointer; padding:8px 12px; border-radius:999px;
  background:#0f172a; color:#cfe0ff; border:1px solid var(--line); font-weight:800;
}
.analysis-tabs .tab.active{background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#0a0f18}

/* 28) بطاقات “خطوات” أو “وصفة سريعة” */
.steps{display:grid; gap:10px}
.step{
  background:#101a31; border:1px solid #22345e; border-radius:12px; padding:12px;
}
.step b{color:#fff}
pre, code{
  font-family:ui-monospace,Consolas,Menlo,monospace;
  background:#0e152a; border:1px solid #20345e; color:#e8edff;
  padding:10px; border-radius:10px; display:block; overflow:auto;
}

/* 29) بطاقات “إحصاءات صغيرة” */
.kpis{display:grid; gap:10px; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .kpis{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .kpis{grid-template-columns:1fr} }
.kpi{
  background:#121d35; border:1px solid #23345a; border-radius:12px; padding:14px; text-align:center
}
.kpi b{font-size:1.25rem; color:#fff}

/* 30) تحسين بطاقات “التحليل” داخل الأعمدة الضيقة */
.analysis-card{
  background:#121c33; border:1px solid #233459; border-radius:14px; padding:12px
}
.analysis-card h4{margin:0 0 6px}
.analysis-card .meta{color:#cfdaf3}

/* 31) تحسين عناصر القوائم الجانبية إن وجدت */
.sidebar{display:grid; gap:10px}
.sidebar .item{
  background:#0f172a; border:1px solid #22345e; border-radius:10px; padding:10px;
  color:#dfe7ff; font-weight:700;
}
.sidebar .item.active{border-color:#6e92ff; background:#101d3a}

/* 32) تلميحات صغيرة أعلى البطاقات */
.hint{color:#cfe0ff; font-size:.98rem}

/* 33) دعم RTL/LTR تلقائي للعناوين الثانوية لو تغيّر اتجاه الصفحة */
[dir="ltr"] th, [dir="ltr"] td{ text-align:left }

/* 34) تصغير البلوكات الكثيرة (عندما تشكين أن الصفحة طويلة) */
.compact-cards .card,
.compact-cards .panel,
.compact-cards .block{ padding:12px }
.compact-cards h3{ font-size:1rem }

/* 35) تصاميم بسيطة للـheader العائد للرئيسية الموحد */
.header-simple{
  background:linear-gradient(180deg, rgba(12,18,34,.92), rgba(12,18,34,.76));
  border-bottom:1px solid #ffffff18;
}
.header-simple .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.header-simple .left{display:flex; align-items:center; gap:10px}
.header-simple .right{display:flex; align-items:center; gap:10px}

/* 36) تصغير المسافات على الشاشات الصغيرة */
@media (max-width:520px){
  .wrap{padding:0 14px}
  .btn{padding:9px 12px}
  .card,.panel,.block{padding:12px}
  .video-wrap{border-radius:10px}
}

/* انتهى */