:root{
  --primary:#19A974;
  --primary2:#0E7A56;
  --bg:#f6f8f9;
  --surface:#ffffff;
  --text:#0B0F14;
  --muted: rgba(11,15,20,0.65);
  --border: rgba(0,0,0,0.08);
  --shadow: 0 8px 30px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  text-align: right;
}

a{color:inherit;text-decoration:none}
.container{width:min(1240px, calc(100% - 40px)); margin: 0 auto;}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(25,169,116,0.12); color: var(--primary2);
  font-weight: 800; font-size: 12px;
}
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.h1{font-size: 28px; margin:0}
.h2{font-size: 18px; margin:0}
.muted{color: var(--muted); line-height: 1.9}
.small{font-size: 12px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 12px;
  font-weight: 800;
  border:1px solid transparent;
  cursor:pointer;
}
.btnPrimary{background: var(--primary); color:#fff}
.btnOutline{background: #fff; border-color: rgba(25,169,116,0.35); color: var(--primary2)}
.btnGhost{background: transparent; border-color: var(--border); color: var(--text)}
.btn:active{transform: translateY(1px);}

.table{width:100%; border-collapse: collapse}
.table th, .table td{padding: 10px 10px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: right;}
.table th{color: rgba(11,15,20,0.75); font-weight:900; background: rgba(25,169,116,0.05);}

.kpiGrid{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;}
.grid2{display:grid; grid-template-columns: 1.4fr 1fr; gap: 12px;}
@media (max-width: 1000px){
  .kpiGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .grid2{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
  .kpiGrid{grid-template-columns: 1fr;}
}

.layout{display:grid; grid-template-columns: 280px 1fr; min-height: 100vh;}
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .sidebar{position: sticky; top: 0; z-index: 50;}
}
.sidebar{
  background: #fff;
  border-left: 1px solid var(--border);
  padding: 14px;
}
.topbar{
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
.main{padding: 18px 0 28px;}

.hr{height:1px;background:var(--border); margin: 12px 0;}

.navTitle{font-size: 12px; color: var(--muted); font-weight: 900; margin: 10px 0;}
.navItem{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 10px; border-radius: 12px;
  border:1px solid transparent;
  margin-bottom: 6px;
}
.navItem:hover{background: rgba(25,169,116,0.07);}
.navActive{background: rgba(25,169,116,0.12); border-color: rgba(25,169,116,0.2);}

.logo{
  display:flex; align-items:center; gap:10px;
}
.logoMark{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight: 900;
}
.footerNote{margin-top: 14px}