/* ============================================================
   حصن — Glass Design System  (العمق والزجاج / Glassmorphism)
   ------------------------------------------------------------
   نظام التصميم الموثّق (Design Tokens) — المصدر الوحيد للحقيقة:
   • الألوان: --bg-deep-1/2, --bg-top, --primary, --primary-bright, --mint, --teal, --gold, --danger
   • النص (سلّم تباين WCAG): --ink (96%) رئيسي · --ink-2 (82%) ثانوي · --ink-3 (66%) خافت · --ink-4 (46%) أدنى
   • الزجاج: --glass-fill, --glass-border, --glass-border-bright, --glass-blur
   • الأنصاف الأقطار: --r-card, --r-pill · الحركة: --ease
   • الطباعة: خط IBM Plex Sans Arabic / Tajawal للعناوين · أرقام en-US بفواصل
   • الوصولية: :focus-visible مرئي · prefers-reduced-motion مُحترَم · أحجام لمس ≥34px
   استخدم هذه المتغيّرات دائماً بدل القيم الصريحة لضمان الاتساق.
   ============================================================ */

:root{
  /* ---- Brand palette ---- */
  --bg-deep-1:#082A38;
  --bg-deep-2:#0A3D45;
  --bg-top:#0E5C53;
  --primary:#0E8A6E;
  --primary-bright:#19C6A0;
  --teal:#15B8C2;
  --teal-deep:#0E7C8A;
  --mint:#7CF0C8;
  --warn:#F5B14C;
  --neg:#F06B6B;

  /* ---- Glass surface (tunable via Tweaks) ---- */
  --glass-fill: rgba(255,255,255,0.07);
  --glass-fill-2: rgba(255,255,255,0.10);
  /* أسطح معتمة للعمود المثبَّت في الجداول (لا يصلح --glass-fill الشفاف: المحتوى يظهر خلفه) */
  --sticky-col: #0c2731;
  --sticky-col-alt: #102c36;
  --sticky-col-hover: #143a41;
  --sticky-col-head: #12604f;
  --glass-border: rgba(255,255,255,0.16);
  --glass-border-bright: rgba(255,255,255,0.26);
  --glass-blur: 18px;
  --glass-shadow: 0 14px 40px rgba(0,0,0,0.30);
  --glow-strength: 0.55;

  /* ---- Text ---- (تباين محسّن لمطابقة WCAG AA) */
  --ink: rgba(255,255,255,0.96);
  --ink-2: rgba(255,255,255,0.82);
  --ink-3: rgba(255,255,255,0.66);
  --ink-4: rgba(255,255,255,0.46);

  /* ---- Radii ---- */
  --r-card: 20px;
  --r-card-sm: 16px;
  --r-btn: 12px;
  --r-pill: 999px;

  /* ---- Spacing scale (4px) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:56px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--font);
  color:var(--ink);
  direction:rtl;
  background:var(--bg-deep-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  overflow-x:hidden;
}

/* en-US numerals for figures even within Arabic text */
.num{ font-feature-settings:"tnum" 1; direction:ltr; unicode-bidi:embed; display:inline-block; }

/* ---- Ambient deep gradient background + soft glow ---- */
/* ⛔ B-173 — الزينة تُقصّ **عند حاويتها** لا عند الجذر.
   `.orb` مثبَّت بـ`right:-80px` فيمدّ منطقة تمرير الجذر ⇒ يُزاح `body` 74px
   وتخرج الأشرطة الملاصقة، و`position:fixed; inset:0` يتمدّد إلى `scrollWidth`
   المنتفخ فتنشأ حلقة تحجيم.
   ⚠️ **ولا يُعالَج بـ`html{overflow-x:hidden}`** — ذلك **إخفاء** يُعمي كل قياس
      فيض لاحق على الجذر (صنف B-114/B-116: الغياب يُقرأ نجاحاً). القصّ عند
      الحاوية يُزيل البذرة فتنفكّ الحلقة، ويبقى قياس الفيض صادقاً. */
.app-bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% -10%, rgba(25,198,160,calc(var(--glow-strength)*0.42)) 0%, rgba(25,198,160,0) 45%),
    radial-gradient(90% 70% at 12% 8%, rgba(21,184,194,calc(var(--glow-strength)*0.30)) 0%, rgba(21,184,194,0) 50%),
    linear-gradient(160deg, var(--bg-top) 0%, var(--bg-deep-2) 42%, var(--bg-deep-1) 100%);
}
.app-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.5; mix-blend-mode:overlay;
}
/* floating orbs for depth */
/* ⛔ `absolute` داخل `.app-bg` المقصوصة — لا `fixed`: العنصر المثبَّت لا
   تقصّه حاويةٌ بلا containing block، ويظلّ يمدّ تمرير الجذر.
   (و`transform` **يساهم في منطقة التمرير** أيضاً — مقيس: بقي 440.) */
.orb{ position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); pointer-events:none;
  opacity:calc(var(--glow-strength)*0.9); }
.orb.a{ width:420px;height:420px; top:-120px; right:-80px;
  background:radial-gradient(circle, rgba(25,198,160,.55), transparent 70%); }
.orb.b{ width:380px;height:380px; bottom:-140px; left:-100px;
  background:radial-gradient(circle, rgba(21,184,194,.40), transparent 70%); }

/* ============================================================
   Glass primitives
   ============================================================ */
.glass{
  position:relative;
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--glass-shadow);
}
/* inset highlight on top edge for the glassy feel */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 32%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; opacity:.9;
}
.glass-2{ background:var(--glass-fill-2); border-color:var(--glass-border-bright); }

.lift{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.lift:hover{ transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(0,0,0,.36), 0 0 0 1px rgba(124,240,200,.10), 0 12px 40px rgba(25,198,160,calc(var(--glow-strength)*0.20));
  border-color:var(--glass-border-bright); }

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.h1{ font-size:clamp(26px,3.4vw,34px); font-weight:800; }
.h2{ font-size:clamp(19px,2.2vw,22px); font-weight:700; }
.h3{ font-size:16px; font-weight:700; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.10em; color:var(--mint);
  text-transform:uppercase; }
.muted{ color:var(--ink-2); }
.muted-3{ color:var(--ink-3); }
.label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
p{ margin:0; }

/* section heading with accent bar */
.sec-head{ display:flex; align-items:center; gap:var(--s3); margin:var(--s6) 0 var(--s4); }
.sec-head .bar{ width:4px; height:20px; border-radius:4px;
  background:linear-gradient(var(--mint), var(--primary-bright)); box-shadow:0 0 12px rgba(124,240,200,.5); }
.sec-head h2{ font-size:18px; font-weight:700; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--font); font-weight:700; font-size:14.5px; cursor:pointer;
  border-radius:var(--r-btn); padding:11px 18px; border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  color:#fff; white-space:nowrap; user-select:none; }
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background:linear-gradient(135deg, var(--primary-bright), var(--primary));
  box-shadow:0 10px 26px rgba(14,138,110,calc(var(--glow-strength)*0.7)), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(25,198,160,calc(var(--glow-strength)*0.8)), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-glass{ background:var(--glass-fill-2); border-color:var(--glass-border-bright);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.btn-glass:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink-2); }
.btn-ghost:hover{ color:#fff; background:rgba(255,255,255,.06); }
.btn-danger{ background:linear-gradient(135deg,#F58A8A,var(--neg));
  box-shadow:0 10px 26px rgba(240,107,107,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-block{ width:100%; }
.btn-lg{ padding:14px 24px; font-size:16px; }
.btn-sm{ padding:8px 14px; font-size:13px; }

/* pill / chip */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; color:var(--ink-2);
  background:var(--glass-fill); border:1px solid var(--glass-border);
  transition:.2s var(--ease); }
.chip:hover{ color:#fff; border-color:var(--glass-border-bright); }
.chip.active{ color:#04221c; background:linear-gradient(135deg,var(--mint),var(--primary-bright));
  border-color:transparent; box-shadow:0 6px 18px rgba(25,198,160,calc(var(--glow-strength)*0.5)); }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:var(--r-pill); }
.badge.ok{ color:var(--mint); background:rgba(124,240,200,.12); border:1px solid rgba(124,240,200,.25); }
.badge.warn{ color:var(--warn); background:rgba(245,177,76,.12); border:1px solid rgba(245,177,76,.25); }
.badge.neg{ color:#ff9b9b; background:rgba(240,107,107,.12); border:1px solid rgba(240,107,107,.28); }
.badge.teal{ color:#8fe6ee; background:rgba(21,184,194,.12); border:1px solid rgba(21,184,194,.28); }

/* ============================================================
   Form fields
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field > label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.field .req{ color:var(--mint); }
.input, .select, textarea.input{
  font-family:var(--font); font-size:14.5px; color:#fff;
  background:rgba(4,22,28,0.45); border:1px solid var(--glass-border);
  border-radius:var(--r-btn); padding:11px 14px; width:100%;
  transition:.2s var(--ease); outline:none;
}
.input::placeholder{ color:var(--ink-4); }
.input:focus, .select:focus, textarea.input:focus{
  border-color:rgba(25,198,160,.8);
  box-shadow:0 0 0 3px rgba(25,198,160,.22), 0 0 22px rgba(25,198,160,calc(var(--glow-strength)*0.4));
  background:rgba(4,22,28,0.6);
}
.select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%237CF0C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:left 12px center; padding-left:38px; }
.select option, .select optgroup{ color:#0b2a30; }
input[type="date"].input{ color-scheme:dark; }
input[type="date"].input::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.4); cursor:pointer; opacity:.7; }
textarea.input{ resize:vertical; min-height:84px; }

/* ============================================================
   Utility layout
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,28px); }
.grid{ display:grid; gap:var(--s4); }
.flex{ display:flex; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.center{ display:flex; align-items:center; justify-content:center; }
.col{ display:flex; flex-direction:column; }
/* .gap1 كان ناقصاً من السلّم رغم استخدامه في 20 موضعاً — فالتباعد كان صفراً فيها كلها */
.gap1{ gap:var(--s1);} .gap2{ gap:var(--s2);} .gap3{ gap:var(--s3);} .gap4{ gap:var(--s4);} .gap5{ gap:var(--s5);}
.wrap-flex{ flex-wrap:wrap; }
.hide{ display:none !important; }

/* divider */
.hr{ height:1px; background:linear-gradient(90deg, transparent, var(--glass-border), transparent); border:0; margin:var(--s4) 0; }

/* ============================================================
   Entrance animation (fade + slide up)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ animation:rise .5s var(--ease) both; }
  .reveal.d1{ animation-delay:.05s; } .reveal.d2{ animation-delay:.11s; }
  .reveal.d3{ animation-delay:.17s; } .reveal.d4{ animation-delay:.23s; }
  .reveal.d5{ animation-delay:.29s; } .reveal.d6{ animation-delay:.35s; }
}
@keyframes rise{ from{ transform:translateY(10px); opacity:.35; } to{ transform:none; opacity:1; } }

/* ============================================================
   Scrollbar
   ============================================================ */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:padding-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* icon helpers */
.ic{ width:22px; height:22px; flex:none; }
.ic-18{ width:18px; height:18px; } .ic-20{ width:20px; height:20px; } .ic-28{ width:28px; height:28px; }
svg{ stroke-linecap:round; stroke-linejoin:round; }