/*
 * ================================================================
 * BRIDGE JOBS — MASTER THEME v4.0
 * Gradient: #16345F → #222548 → #3b234d (right to left)
 * ================================================================
 */

/* ================================================================
 * 1. BRAND TOKENS
 * ================================================================ */
:root {
  /* Gradient palette */
  --g-right:   #16345F;
  --g-mid:     #222548;
  --g-left:    #3b234d;

  /* Core gradient */
  --grad:      linear-gradient(to left, #16345F, #222548, #3b234d);
  --grad-r:    linear-gradient(to right, #16345F, #222548, #3b234d);

  /* Status */
  --success:   #00A870;
  --warning:   #F4A100;
  --danger:    #EF4444;
  --accent:    #60CDFF;

  /* Text */
  --ink:       #0A2540;
  --muted:     #425466;
  --muted-2:   #697386;

  /* Surfaces */
  --bg:        #F6F9FC;
  --white:     #ffffff;
  --line:      #E3E8EE;
  --line-2:    #EEF1F6;

  /* Icon */
  --icon-bg:   linear-gradient(to left, #16345F, #3b234d);
  --icon-c:    #ffffff;

  /* Shadows */
  --sh-sm:  0 2px 5px -1px rgba(22,52,95,.08), 0 1px 3px -1px rgba(0,0,0,.04);
  --sh-md:  0 8px 24px -6px rgba(22,52,95,.12), 0 3px 8px -3px rgba(0,0,0,.06);
  --sh-lg:  0 24px 48px -12px rgba(22,52,95,.18);

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  18px;

  /* Ease */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Legacy aliases */
  --primary:      var(--g-right);
  --gradient-1:   var(--grad);
  --gradient-2:   var(--grad);
  --shadow-sm:    var(--sh-sm);
  --shadow-md:    var(--sh-md);
  --shadow-lg:    var(--sh-lg);
  --p:  var(--ink);
  --a:  var(--accent);
  --b:  var(--line);
  --w:  var(--white);
  --m:  var(--muted);
  --bg-soft: var(--bg);
  --bg-tint: var(--bg);
  --radius:  var(--r-lg);

  /* ---- متغيرات كانت تُعرّف داخل :root الصفحات قبل التوحيد ----
   * غيابها بعد توحيد الثيم هو سبب التمدد بكامل الصفحة وفقدان الحواف والظلال.
   * القيم مستعادة من النسخة العاملة ومعدّلة لتطابق الهوية الكحلية. */
  --max:           1200px;   /* أقصى عرض للمحتوى — غيابه = تمدد الصفحة بالكامل */
  --radius-lg:     22px;
  --radius-xl:     30px;
  --shadow-xl:     0 50px 100px -20px rgba(15,18,50,.20);
  --shadow-glow:   0 10px 40px -8px rgba(22,52,95,.35);
  --gradient-mesh: radial-gradient(at 15% 15%, rgba(22,52,95,.16) 0, transparent 50%),
                   radial-gradient(at 85% 20%, rgba(59,35,77,.12) 0, transparent 50%),
                   radial-gradient(at 50% 90%, rgba(96,205,255,.10) 0, transparent 50%);
  --amber:         #F59E0B;
  --bg-2:          #F3F5FC;
  --ink-2:         #1F2340;
  --primary-soft:  #E9EFF7;
  --navy:          var(--g-right);
  --navy-light:    #2E5288;
  --a2:            var(--accent);
  --accent2:       var(--accent);
  --text-muted:    var(--muted);
}

/* ================================================================
 * 2. BASE
 * ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  direction: rtl;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ================================================================
 * 3. ICON SYSTEM
 * All icon containers use --icon-bg automatically
 * ================================================================ */
.icon-box, .ki, .sbav,
.fc-icon, .stat-icon, .feature-icon,
.value-icon, .job-icon, .dash-icon,
.faq-icon, .step-icon, .type-icon,
.check-icon, .logo-icon, .nav-icon {
  background:      var(--icon-bg) !important;
  color:           var(--icon-c) !important;
  border:          none !important;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.icon-box *, .ki *, .sbav *,
.fc-icon *, .stat-icon *, .feature-icon *,
.value-icon *, .job-icon *, .dash-icon *,
.faq-icon *, .step-icon *, .type-icon *,
.check-icon *, .logo-icon * {
  stroke: var(--icon-c) !important;
  color:  var(--icon-c) !important;
  fill:   none !important;
}
/* Inline gradient icons */
[style*="16345F"] *, [style*="222548"] *, [style*="3b234d"] * {
  stroke: #ffffff !important;
  fill:   none !important;
}
/* ----------------------------------------------------------------
 * تباين: أي عنصر خلفيته متدرّج داكن (hex أو متغيّر) → لون النص أبيض.
 * يوضع على الحاوية فيتوارث للأبناء بلا لون صريح، ولا يكسر الوسوم
 * الملوّنة (tags/badges) لأنها تحدّد لونها بنفسها. يعالج مشكلة
 * "نص داكن على خلفية داكنة".
 * ---------------------------------------------------------------- */
/* الحاويات ذات الخلفية الداكنة فقط (استهداف الخلفية تحديداً، لا الحدود) */
[style*="16345F"], [style*="222548"], [style*="3b234d"],
[style*="var(--g-right),var(--g-mid"],
[style*="135deg,var(--navy"],
[style*="background:var(--navy"],  [style*="background: var(--navy"],
[style*="background:var(--grad"],  [style*="background: var(--grad"] {
  color: #ffffff !important;
}
/* النصوص الفرعية داخل تلك الحاويات (عدا الوسوم/الشارات/الأيقونات لتحتفظ بألوانها) */
[style*="16345F"] :is(h1,h2,h3,h4,h5,h6,p,span,b,strong,small,label,td,li,a):not([class*="tag"]):not([class*="tg"]):not([class*="badge"]):not(.icon-box):not(.icon-box *),
[style*="var(--g-right),var(--g-mid"] :is(h1,h2,h3,h4,h5,h6,p,span,b,strong,small,label,td,li,a):not([class*="tag"]):not([class*="tg"]):not([class*="badge"]):not(.icon-box):not(.icon-box *),
[style*="135deg,var(--navy"] :is(h1,h2,h3,h4,h5,h6,p,span,b,strong,small,label,td,li,a):not([class*="tag"]):not([class*="tg"]):not([class*="badge"]):not(.icon-box):not(.icon-box *),
[style*="background:var(--navy"] :is(h1,h2,h3,h4,h5,h6,p,span,b,strong,small,label,td,li,a):not([class*="tag"]):not([class*="tg"]):not([class*="badge"]):not(.icon-box):not(.icon-box *) {
  color: #ffffff !important;
}
/* Status overrides */
.icon-success { background: var(--success) !important; }
.icon-danger  { background: var(--danger)  !important; }
.icon-warning { background: var(--warning) !important; }

/* ----------------------------------------------------------------
 * ICON SIZING (restored من التصميم الأصلي)
 * الأيقونات تستخدم <svg><use href="#..."/></svg> بلا أبعاد.
 * بدون هذه القواعد يرجع الـ SVG لحجمه الافتراضي 300×150 فيتضخّم.
 * صناديق الأيقونات: عرض/ارتفاع ثابت + حواف. الـ SVG بداخلها بحجمه.
 * ---------------------------------------------------------------- */
/* حاويات الأيقونات (المربعات ذات الخلفية المتدرجة) */
.feature-icon, .stat-icon { width: 52px; height: 52px; border-radius: 14px; }
.value-icon               { width: 44px; height: 44px; border-radius: 12px; }
.fc-icon, .check-icon     { width: 40px; height: 40px; border-radius: 11px; }
.job-icon                 { width: 36px; height: 36px; border-radius: 10px; }
.faq-icon                 { width: 28px; height: 28px; border-radius: 8px;  }

/* أبعاد الـ SVG داخل كل نوع أيقونة */
.feature-icon svg, .stat-icon svg { width: 24px; height: 24px; }
.value-icon svg                   { width: 22px; height: 22px; }
.fc-icon svg, .check-icon svg     { width: 20px; height: 20px; }
.job-icon svg                     { width: 18px; height: 18px; }
.faq-icon svg                     { width: 12px; height: 12px; }

/* أيقونات مضمّنة بجانب نص (ليست صناديق) */
.sb-item svg   { width: 16px; height: 16px; flex-shrink: 0; }
.logo-item svg { width: 22px; height: 22px; flex-shrink: 0; }

/* شبكة أمان: أي SVG داخل صندوق أيقونة لا يتجاوز حجم الصندوق أبداً */
.icon-box svg, .ki svg, .sbav svg,
.dash-icon svg, .nav-icon svg, .type-icon svg,
.step-icon svg, .logo-icon svg {
  max-width: 100%; max-height: 100%;
}

/* ================================================================
 * 4. GRID PATTERN (SVG background helper)
 * Use on any dark gradient container
 * ================================================================ */
.grid-bg {
  position: relative;
  overflow: hidden;
}
.grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M 36 0 L 0 0 0 36' fill='none' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}
.grid-bg > * { position: relative; z-index: 2; }

/* ================================================================
 * 5. SIDEBAR
 * ================================================================ */
.sb {
  /* التخطيط الأساسي للشريط الجانبي — كان محذوفاً بعد التوحيد فانهار موضع القائمة.
   * العرض 220px ليطابق .mn{margin-right:220px} في dashboard.php */
  width: 220px;
  min-width: 220px;
  position: fixed;
  top: 0; bottom: 0; right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--grad) !important;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .28s ease;
}
.sb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M 32 0 L 0 0 0 32' fill='none' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.07'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.sb > * { position: relative; z-index: 1; }

.sn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s var(--ease);
  text-decoration: none;
}
.sn svg { stroke: currentColor; width: 16px; height: 16px; flex-shrink: 0; }
.sn:hover { background: rgba(255,255,255,.1); color: #fff; }
.sn:hover svg { stroke: #ffffff !important; }
.sn.act {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12);
}
.sn.act svg { stroke: #ffffff !important; }

/* ================================================================
 * 6. TOPBAR
 * ================================================================ */
.tb {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ================================================================
 * 7. CARDS
 * ================================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--sh-sm);
}
.ch {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sh-sm);
}

/* Welcome / profile header card */
.profile-header {
  background: var(--grad);
  border-radius: var(--r-xl);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.profile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M 36 0 L 0 0 0 36' fill='none' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.07'/%3E%3C/svg%3E");
  pointer-events: none;
}
.profile-header > * { position: relative; }
.profile-header h1,
.profile-header h2,
.profile-header h3 { color: #ffffff; }
.profile-header p,
.profile-header span { color: rgba(255,255,255,.65); }

/* ================================================================
 * 8. BUTTONS
 * ================================================================ */
.btn {
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: all .18s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.bg, .bd, .btn-primary, .form-submit, .submit-btn, .fsub {
  background: var(--grad) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px -3px rgba(22,52,95,.3);
}
.bg svg, .bd svg, .btn-primary svg,
.form-submit svg, .submit-btn svg { stroke: #ffffff !important; }
.bg:hover, .bd:hover { opacity: .9; }
.bh { background: var(--grad); color: #fff; border: none; }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

/* ================================================================
 * 9. TAGS / BADGES
 * ================================================================ */
.tag  { padding: 3px 9px; border-radius: 100px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.tg   { background: rgba(0,168,112,.1);  color: #00A870; }
.tgr  { background: rgba(239,68,68,.1);  color: #EF4444; }
.tr   { background: rgba(239,68,68,.1);  color: #EF4444; }
.to   { background: rgba(96,205,255,.12); color: #006B85; }
.tb2  { background: rgba(34,37,72,.08);  color: var(--g-mid); }
.tp   { background: rgba(59,35,77,.1);   color: var(--g-left); }

/* ================================================================
 * 10. FORMS
 * ================================================================ */
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  transition: border-color .18s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--g-mid);
  box-shadow: 0 0 0 3px rgba(34,37,72,.08);
}

/* ================================================================
 * 11. STATUS
 * ================================================================ */
.badge-ok  { background: rgba(0,168,112,.1);  color: #00A870; border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.badge-err { background: rgba(239,68,68,.1);  color: #EF4444; border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.badge-wrn { background: rgba(244,161,0,.12); color: #F4A100; border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 700; }

/* ================================================================
 * 12. PROGRESS BARS
 * ================================================================ */
.pb-track { height: 4px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.pb-fill  { height: 100%; background: var(--grad-r); border-radius: 99px; transition: width .5s var(--ease); }

/* ================================================================
 * 13. BOTTOM NAV (mobile)
 * ================================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 8px 0;
  z-index: 200;
}
.bna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 4px;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  transition: color .18s;
}
.bna svg { stroke: currentColor; width: 20px; height: 20px; }
.bna.act { color: var(--g-right); }
.bna.act svg { stroke: var(--g-right) !important; }

/* ================================================================
 * 14. TEXT UTILITIES
 * ================================================================ */
.text-white  { color: #ffffff !important; }
.text-muted  { color: var(--muted) !important; }
.text-ink    { color: var(--ink) !important; }
.text-ok     { color: var(--success) !important; }
.text-err    { color: var(--danger) !important; }

/* ================================================================
 * 15. RESPONSIVE
 * ================================================================ */
@media(max-width:768px) {
  .mn  { margin-right: 0 !important; }
  .sb  { display: none !important; }
  .bottom-nav { display: flex; }
  .ct  { padding: 12px !important; padding-bottom: 76px !important; }

  /* منع التمرير الأفقي وتجاوز العناصر لعرض الشاشة (أهم سبب لعدم توافق الجوال) */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, iframe, table, pre { max-width: 100%; height: auto; }

  /* تحويل كل الشبكات إلى عمود واحد على الجوال */
  .mgrid, .grid, .fgrid, .bgrid, .sgrid, .jcgrid,
  .features-grid, .values-grid, .testimonials-grid, .stats-grid,
  .jobs-grid, .jobs-list, .notif-list, .region-list,
  .foot-grid, .cv-form-grid, .steps-grid, .specs-grid,
  .kpi-grid, .specializations-grid, .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* تقليل هوامش الحاويات الرئيسية */
  .container, .wrap, .wrapper, .page, .content, main > section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* صفوف الأزرار في الواجهة تتكدّس عمودياً بدل الخروج عن الشاشة */
  .hero-cta, .btn-row, .cta-row, .actions { flex-wrap: wrap; }
}

/* هواتف صغيرة */
@media(max-width:480px) {
  h1 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.25; }
  h2 { font-size: clamp(20px, 6vw, 28px) !important; }
  .btn, .bg, .bd, .btn-primary { width: 100%; justify-content: center; }
  .hero-cta .btn, .hero-cta .bg, .hero-cta .bd { width: 100%; }
}