/**
 * ==========================================================================
 * ملف: system_styles.css
 * المسار: /modules/systems/system_styles.css
 * الوظيفة: أنماط الصفحات التفصيلية للأنظمة (ERP / Field / Health)
 * الإصدار: 2.0
 * تاريخ الإنشاء: 2026-02-23
 * تاريخ التحديث: 2026-04-22
 * الوصف: تصميم Navy + Gold — نفس هوية فجر ون مع ألوان ديناميكية لكل نظام
 * ==========================================================================
 * ملاحظة: --sys-color و --sys-color-light يتم تعيينهم ديناميكياً
 * من system_view.php حسب لون كل نظام
 * ==========================================================================
 */

/* ================================================================
   CSS VARIABLES
   ================================================================ */
:root{
  --navy:#1a2f3f;
  --navy-900:#0f1f2b;
  --navy-800:#152633;
  --navy-700:#22404f;
  --navy-600:#2f4e5f;
  --gold:#d4a853;
  --gold-soft:#e6c687;
  --gold-dim:#8a6d34;
  --ivory:#f5f1e8;
  --ivory-2:#ebe5d4;
  --paper:#fafaf7;
  --ink:#14222c;
  --muted:#5b6d78;
  --line:rgba(212,168,83,.22);
  --line-dark:rgba(245,241,232,.08);

  /* ديناميكي — يتعيّن من PHP */
  --sys-color:#1565c0;
  --sys-color-light:#e3f2fd;
}

/* ================================================================
   RESET + BASE
   ================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Tajawal",system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
ul{list-style:none;padding:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;direction:ltr;unicode-bidi:isolate}

/* ================================================================
   TOP BAR (شريط العودة)
   ================================================================ */
.sys-topbar{
  background:var(--navy);
  border-bottom:1px solid var(--line-dark);
  padding:0 40px;
  position:sticky;top:0;z-index:100;
}
.sys-topbar-inner{
  max-width:1280px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;
}
.sys-back-link{
  display:flex;align-items:center;gap:10px;
  color:rgba(245,241,232,.75);font-weight:500;font-size:14.5px;
  transition:color .18s;
}
.sys-back-link:hover{color:var(--gold-soft)}
.sys-back-link i{font-size:13px}
.sys-topbar-brand{
  display:flex;align-items:center;gap:12px;
}
.sys-topbar-brand-mark{
  width:36px;height:36px;border-radius:8px;
  background:radial-gradient(circle at 30% 30%,#22404f 0%,#0f1f2b 70%);
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(212,168,83,.28);
  font-weight:800;font-size:15px;color:var(--gold);
}
.sys-topbar-brand-text{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--gold-soft);letter-spacing:.12em;text-transform:uppercase;direction:ltr;
}
.sys-topbar-register{
  background:transparent;border:1px solid rgba(212,168,83,.5);
  color:var(--gold-soft);padding:8px 16px;border-radius:6px;
  font-family:inherit;font-size:13px;font-weight:500;
  transition:all .18s;display:inline-flex;align-items:center;gap:6px;
}
.sys-topbar-register:hover{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}

/* ================================================================
   HERO
   ================================================================ */
.sys-hero{
  background:var(--navy);color:var(--ivory);
  position:relative;overflow:hidden;
  padding:80px 40px 100px;text-align:center;
}
.sys-hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(212,168,83,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,168,83,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 75%);
  pointer-events:none;
}
.sys-hero::after{
  content:"";position:absolute;
  bottom:-200px;right:-150px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(212,168,83,.1) 0%,transparent 60%);
  pointer-events:none;
}
.sys-hero-content{
  max-width:780px;margin:0 auto;position:relative;z-index:1;
}
.sys-hero-icon{
  width:80px;height:80px;border-radius:18px;
  display:inline-grid;place-items:center;font-size:2rem;
  margin-bottom:28px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 32px -8px rgba(0,0,0,.3);
  color:var(--sys-color);
}
.sys-hero-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--gold);letter-spacing:.18em;text-transform:uppercase;
  direction:ltr;margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
}
.sys-hero-kicker::before{content:"";width:20px;height:1px;background:var(--gold)}
.sys-hero-kicker::after{content:"";width:20px;height:1px;background:var(--gold)}
.sys-hero-title{
  font-size:48px;font-weight:700;line-height:1.2;margin:0 0 16px;
  letter-spacing:-.01em;text-wrap:balance;
}
.sys-hero-tagline{
  font-size:20px;color:var(--gold-soft);font-weight:500;
  margin-bottom:20px;
}
.sys-hero-desc{
  font-size:17px;line-height:1.75;color:rgba(245,241,232,.7);
  font-weight:300;max-width:640px;margin:0 auto 36px;text-wrap:pretty;
}
.sys-hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--navy-900);
  padding:15px 36px;border-radius:8px;
  font-family:inherit;font-size:16px;font-weight:600;
  transition:all .2s;box-shadow:0 10px 30px -10px rgba(212,168,83,.45);
}
.sys-hero-cta:hover{transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(212,168,83,.6);background:var(--gold-soft)}
.sys-hero-cta i{font-size:14px}

/* ================================================================
   SECTIONS
   ================================================================ */
.sys-section{padding:100px 40px}
.sys-section-alt{background:linear-gradient(180deg,var(--paper) 0%,#f3efe3 100%);border-top:1px solid var(--ivory-2);border-bottom:1px solid var(--ivory-2)}
.sys-container{max-width:1280px;margin:0 auto}

.sys-section-header{margin-bottom:64px;max-width:700px}
.sys-section-header.center{text-align:center;margin-inline:auto}
.sys-section-header h2{
  font-size:38px;font-weight:700;line-height:1.25;margin:0 0 14px;
  color:var(--ink);letter-spacing:-.01em;text-wrap:balance;
}
.sys-section-header h2 i{color:var(--sys-color);margin-left:12px;font-size:32px}
.sys-section-header p{
  font-size:17px;line-height:1.7;color:var(--muted);font-weight:300;
}
.sys-section-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--gold-dim);letter-spacing:.16em;text-transform:uppercase;
  direction:ltr;text-align:right;margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
}
.sys-section-kicker::before{content:"";width:20px;height:1px;background:var(--gold-dim)}

/* ================================================================
   FEATURES GRID
   ================================================================ */
.sys-features-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.sys-feature-card{
  background:#fff;border:1px solid #e8e3d4;border-radius:14px;
  padding:32px 26px;position:relative;overflow:hidden;
  transition:all .25s ease;
}
.sys-feature-card:hover{
  border-color:var(--sys-color);transform:translateY(-3px);
  box-shadow:0 16px 36px -16px rgba(26,47,63,.18);
}
.sys-feature-card::before{
  content:"";position:absolute;top:0;right:0;width:100%;height:3px;
  background:linear-gradient(270deg,var(--sys-color) 0%,transparent 100%);
  opacity:0;transition:opacity .25s;
}
.sys-feature-card:hover::before{opacity:1}

.sys-feature-icon{
  width:50px;height:50px;border-radius:12px;
  display:grid;place-items:center;font-size:1.2rem;margin-bottom:20px;
  background:var(--sys-color-light);color:var(--sys-color);
  transition:all .25s;
}
.sys-feature-card:hover .sys-feature-icon{
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-700) 100%);
  color:var(--gold);box-shadow:0 6px 18px -6px rgba(26,47,63,.35),inset 0 0 0 1px rgba(212,168,83,.15);
}
.sys-feature-card h3{
  font-size:17px;font-weight:600;color:var(--ink);margin:0 0 8px;
}
.sys-feature-card p{
  font-size:13.5px;line-height:1.7;color:var(--muted);margin:0;font-weight:400;
}

/* ================================================================
   SECTORS
   ================================================================ */
.sys-sectors-grid{
  display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
}
.sys-sector-item{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid #e8e3d4;border-radius:12px;
  padding:20px 28px;font-size:15px;font-weight:600;color:var(--ink);
  transition:all .25s;
}
.sys-sector-item:hover{
  border-color:var(--sys-color);transform:translateY(-2px);
  box-shadow:0 12px 28px -12px rgba(26,47,63,.15);
}
.sys-sector-icon{
  width:46px;height:46px;border-radius:11px;
  display:grid;place-items:center;font-size:1.2rem;
  background:var(--sys-color-light);color:var(--sys-color);
  transition:all .25s;
}
.sys-sector-item:hover .sys-sector-icon{
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-700) 100%);
  color:var(--gold);
}

/* ================================================================
   PRICING
   ================================================================ */
.sys-pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;
}
.sys-pricing-card{
  background:#fff;border:1.5px solid #e8e3d4;border-radius:16px;
  padding:40px 30px;text-align:center;position:relative;
  transition:all .3s;display:flex;flex-direction:column;
}
.sys-pricing-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -16px rgba(26,47,63,.16);
  border-color:var(--gold);
}
.sys-pricing-card.popular{
  border-color:var(--sys-color);border-width:2px;
  transform:scale(1.03);
  box-shadow:0 20px 48px -16px rgba(26,47,63,.2);
}
.sys-pricing-card.popular:hover{
  transform:scale(1.03) translateY(-4px);
}
.sys-popular-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--sys-color);color:#fff;
  padding:5px 22px;border-radius:100px;
  font-size:12px;font-weight:600;white-space:nowrap;
  letter-spacing:.02em;
}
.sys-plan-name{
  font-size:20px;font-weight:700;color:var(--ink);margin-bottom:18px;
}
.sys-plan-price{
  margin-bottom:28px;padding-bottom:24px;
  border-bottom:1px dashed var(--ivory-2);
}
.sys-price-amount{
  font-size:42px;font-weight:700;color:var(--sys-color);
  font-feature-settings:"tnum";
}
.sys-price-currency{
  font-size:14px;color:var(--muted);margin-right:4px;font-weight:500;
}
.sys-price-period{
  font-size:14px;color:var(--muted);font-weight:400;
}
.sys-plan-features{
  text-align:right;margin-bottom:28px;flex-grow:1;
  display:flex;flex-direction:column;gap:4px;
}
.sys-plan-features li{
  padding:8px 0;font-size:14px;color:var(--ink);
  display:flex;align-items:center;gap:10px;
}
.sys-plan-features li i{
  color:var(--sys-color);font-size:11px;flex-shrink:0;
}
.sys-plan-btn{
  display:block;padding:14px;border-radius:10px;
  font-family:inherit;font-weight:600;font-size:15px;
  border:1.5px solid #e0dcd2;color:var(--ink);
  background:#fff;transition:all .2s;margin-top:auto;
}
.sys-plan-btn:hover{border-color:var(--sys-color);color:var(--sys-color)}
.sys-plan-btn.primary{
  background:var(--sys-color);border-color:var(--sys-color);color:#fff;
}
.sys-plan-btn.primary:hover{opacity:.88;transform:translateY(-1px)}

.sys-pricing-note{
  text-align:center;margin-top:36px;padding:18px 24px;
  background:rgba(212,168,83,.08);border:1px solid rgba(212,168,83,.15);
  border-radius:10px;font-size:14px;color:var(--muted);line-height:1.7;
}
.sys-pricing-note i{color:var(--gold);margin-left:8px}

/* ================================================================
   CTA SECTION
   ================================================================ */
.sys-cta-section{
  background:var(--navy);color:var(--ivory);
  text-align:center;padding:96px 40px;
  position:relative;overflow:hidden;
}
.sys-cta-section::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(212,168,83,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,168,83,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 30%,transparent 80%);
}
.sys-cta-section .sys-container{position:relative;z-index:1}
.sys-cta-section h2{
  font-size:38px;font-weight:700;margin-bottom:16px;
  letter-spacing:-.01em;text-wrap:balance;
}
.sys-cta-section p{
  font-size:18px;color:rgba(245,241,232,.7);font-weight:300;
  line-height:1.7;margin-bottom:36px;max-width:560px;margin-inline:auto;
}
.sys-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--navy-900);
  padding:16px 40px;border-radius:8px;
  font-family:inherit;font-weight:600;font-size:17px;
  transition:all .2s;box-shadow:0 10px 30px -10px rgba(212,168,83,.45);
}
.sys-cta-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(212,168,83,.6);background:var(--gold-soft)}
.sys-cta-btn i{font-size:15px}

/* ================================================================
   FOOTER
   ================================================================ */
.sys-footer{
  background:var(--navy-900);color:rgba(245,241,232,.5);
  text-align:center;padding:28px 40px;font-size:13px;
  border-top:1px solid var(--line-dark);
}
.sys-footer strong{color:var(--gold-soft);font-weight:600}
.sys-footer a{color:inherit;transition:color .18s}
.sys-footer a:hover{color:var(--gold-soft)}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .sys-features-grid{grid-template-columns:repeat(2,1fr)}
  .sys-hero-title{font-size:38px}
  .sys-section-header h2{font-size:32px}
}
@media (max-width:768px){
  .sys-hero{padding:60px 24px 80px}
  .sys-hero-title{font-size:32px}
  .sys-section{padding:72px 24px}
  .sys-section-header h2{font-size:28px}
  .sys-features-grid{grid-template-columns:1fr}
  .sys-pricing-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .sys-pricing-card.popular{transform:none}
  .sys-pricing-card.popular:hover{transform:translateY(-4px)}
  .sys-sectors-grid{flex-direction:column;align-items:center}
  .sys-cta-section{padding:72px 24px}
  .sys-cta-section h2{font-size:30px}
  .sys-topbar{padding:0 24px}
}
@media (max-width:480px){
  .sys-hero-title{font-size:28px}
  .sys-hero-tagline{font-size:17px}
  .sys-hero-cta,.sys-cta-btn{padding:13px 28px;font-size:15px}
  .sys-price-amount{font-size:34px}
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.sys-anim{opacity:0;animation:fadeUp .5s ease forwards}
.sys-anim-d1{animation-delay:.1s}
.sys-anim-d2{animation-delay:.2s}
.sys-anim-d3{animation-delay:.3s}