*{box-sizing:border-box;font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Noto Kufi Arabic',sans-serif}
html,body{margin:0;background:linear-gradient(180deg,#f7f7fb 0%,#f5f7ff 100%);color:#111}
.topbar{background:#2f2aa0;color:#fff;padding:16px 18px;box-shadow:0 4px 18px rgba(47,42,160,.18)}
.topbar h1{margin:0;font-size:22px;font-weight:800;letter-spacing:.2px}
.container{max-width:1250px;margin:22px auto;padding:0 16px}

/* بطاقات */
.card{background:#fff;border:1px solid #ebeef8;border-radius:16px;padding:12px 14px;box-shadow:0 6px 18px rgba(28,30,84,.06)}
.pill{background:#eef2ff;border:1px solid #c7d2fe;color:#2f2aa0;border-radius:999px;padding:2px 10px;font-size:12px;margin-inline-start:6px}

/* رفع ملف */
.uploader{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.file-label{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.file-label input{display:none}
.btn{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px 12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.btn.primary{background:#2f2aa0;border-color:#2f2aa0;color:#fff}
.btn.small{padding:4px 8px;border-radius:10px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px}

/* نصوص وملاحظات */
.note{color:#5b6076;font-size:12px;margin:8px 2px}
.warn{background:#fffaf2;border:1px solid #ffd59e;border-radius:12px;padding:10px 12px;margin:12px 0;line-height:1.7}
.hidden{display:none}

/* تبويبات */
.tabs{display:flex;gap:10px;margin:12px 0}
.tab-btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.tab-btn.active{background:#2f2aa0;color:#fff;border-color:#2f2aa0}
.tab{display:none}
.tab.active{display:block}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:14px;margin-top:10px}
.kpi{background:#fff;border:1px solid #ebeef8;border-radius:16px;padding:16px;text-align:center;box-shadow:0 6px 18px rgba(28,30,84,.06)}
.kpi .val{font-size:26px;font-weight:800;color:#2f2aa0}
.kpi .name{font-size:13px;opacity:.75}
.actions.compact{margin-top:12px;display:flex;gap:10px}

/* إعدادات الرسوم */
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:14px 0}
.control{display:flex;flex-direction:column;gap:6px}
.controls label{font-size:12px;color:#5b6076}
.controls input[type='text'], .controls input[type='number'], .controls select{
  border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff;min-width:150px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.03)
}
.controls.sticky{position:sticky;top:10px;z-index:5}

/* فلاتر الحالات */
.controls.tags{gap:8px;align-items:center;flex-wrap:wrap}
.tag{border:1px dashed #e5e7eb;background:#fff;border-radius:10px;padding:6px 10px;display:inline-flex;gap:6px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.tag.note{background:transparent;border:none;color:#666;box-shadow:none}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}

/* الرسوم */
.charts{display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:18px;margin:16px 0}
.chart-card h3{margin:6px 0 10px 0;font-size:15px}
.chart-card .hint{margin-top:8px;font-size:12px;color:#5b6076}
.chart-scroll{max-height:550px;overflow:auto;border:1px dashed #eef1f8;border-radius:12px;padding:8px;background:#fafbff}

/* رأس الشريط + ترقيمه */
.bar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bar-pager{display:flex;align-items:center;gap:6px}
.bar-pager .psel{display:flex;align-items:center;gap:6px}

/* الجداول */
.table-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.pager{display:flex;align-items:center;gap:8px}
.pager .psel{display:flex;align-items:center;gap:6px}
.table-wrap{background:#fff;border:1px solid #ebeef8;border-radius:16px;overflow:auto;box-shadow:0 6px 18px rgba(28,30,84,.06)}
.table-wrap.h-420{max-height:420px}
#summaryTable, #othersTable, #profileTable, #topTable, #bottomTable{width:100%;border-collapse:collapse}
#summaryTable thead th,#summaryTable tbody td,#othersTable thead th,#othersTable tbody td,#profileTable thead th,#profileTable tbody td,#topTable thead th,#topTable tbody td,#bottomTable thead th,#bottomTable tbody td{
  border-bottom:1px solid #eef1f8;padding:10px 12px;text-align:right;white-space:nowrap;font-size:13px
}
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* النوافذ المنبثقة */
.modal{position:fixed;inset:0;background:rgba(24,26,68,.45);display:flex;align-items:flex-start;justify-content:center;padding:30px}
.dialog{background:#fff;border-radius:16px;border:1px solid #ebeef8;max-width:980px;width:100%;padding:12px;box-shadow:0 16px 36px rgba(20,22,60,.25)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal.hidden{ display: none !important; }

.footer{text-align:center;margin:18px 0;color:#7a7e95;font-size:12px}

/* استجابة */
@media (max-width:1000px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}
  .charts{grid-template-columns:1fr}
  .rank-grid{grid-template-columns:1fr}
}