/* ========== Variables ========== */
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f6faf7;       /* رمادي مخضر لطيف */
  --text:#111827;
  --muted:#6b7280;
  --brand:#349c52;         /* اللون الجديد */
  --brand-weak:#e2f3e7;    /* خلفيات خفيفة بنفس النغمة */
  --border:#e5e7eb;
}

/* ========== Base ========== */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family:'Segoe UI', Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.site-header + .container{ margin-top:20px }

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  /* نضيف relative لسلامة تموضع ::after عبر كل المتصفحات */
  position:sticky; top:0; z-index:50; 
  background:#fff; border-bottom:1px solid var(--border);
  padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px;
  background:radial-gradient(rgba(17,24,39,0.04) 1px, transparent 1px);
  background-size:8px 8px;
  box-shadow:0 6px 8px -6px rgba(0,0,0,.08);
}
.site-header .left{ display:flex; align-items:center; gap:12px }
.site-header .logo img{ height:100px; display:block }
.site-header .divider{ width:1px; height:28px; background:var(--border) }

/* ========== Navigation ========== */
.nav a{
  color:#6b7280; text-decoration:none; margin:0 6px;
  font-size:15px; font-weight:700; padding:8px 10px; border-radius:8px; transition:.15s;
}
.nav a:hover{ color:#374151 }
.nav a.active{ color:#111827; background:#f3f4f6 }

/* RTL tweak (مرة وحدة) */
[dir="rtl"] .nav a{ margin:0 4px }

/* ========== Right side / Buttons ========== */
.right{ display:flex; align-items:center; gap:10px }

.icon-btn{
  border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer;
}
.icon-btn:hover{ background:#f9fafb }

/* زر أساسي (موحّد) */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:10px;
  background:var(--brand); color:#fff;
  padding:12px 16px;
  cursor:pointer; transition:filter .15s ease, transform .15s ease;
  font-weight:700;
}
.btn:hover{ filter:brightness(1.03) }
.btn.ghost{
  background:#fff; color:#374151; border:1px solid var(--border)
}

.lang-switch{
  cursor:pointer; border:1px solid var(--border); padding:8px 10px; border-radius:8px;
  color:#374151; text-decoration:none; background:#fff
}

.avatar{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border) }

/* ========== Searchbar (تُستخدم فقط حيث تحتاجها) ========== */
.searchbar{ min-width:320px; max-width:520px; width:40vw }
.searchbar input{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none;
  background:#fff; color:var(--text);
}
.searchbar input:focus{
  box-shadow:0 0 0 3px rgba(52,156,82,.15); border-color:var(--brand)
}

/* ========== KPIs Cards ========== */
.kpis{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px
}
.card{
  background:linear-gradient(180deg,#fff, var(--brand-weak));
  border:1px solid var(--border); border-radius:14px; padding:18px;
  box-shadow:0 8px 20px rgba(52,156,82,.08);
}
.card .label{ color:var(--muted); font-size:13px; margin-bottom:8px }
.card .value{ font-size:30px; font-weight:800; color:#0f172a }
.card .value span{ font-size:14px; color:var(--muted); font-weight:600 }

/* ========== Panels / Grid ========== */
.grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px
}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.04)
}
.panel-title{ font-size:14px; color:var(--muted); margin-bottom:10px }
.panel .toolbar{
  display:flex; align-items:center; gap:8px; margin:-6px 0 8px 0
}
.segment{
  display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden
}
.segment button{
  padding:8px 10px; border:none; background:transparent; cursor:pointer; font-weight:700; color:#374151
}
.segment button.active{ background:var(--brand); color:#fff }
select.filter{
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#fff; color:#374151
}

canvas{ width:100% !important; height:260px !important }

/* ========== Responsive ========== */
@media (max-width:1024px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:720px){
  .kpis{ grid-template-columns:1fr }
  .grid{ grid-template-columns:1fr }
  canvas{ height:220px !important }.site-header{ isolation:isolate }
.site-header::after{ pointer-events:none }

}