/* ============================================
   ارتقاء — أنماط مشتركة للصفحات الفرعية
   ============================================ */

:root {
    --purple:#7c3aed; --purple-light:#a78bfa; --purple-dark:#5b21b6;
    --gold:#d4af37; --gold-light:#f4d160;
    --black:#000; --black-card:#0f0f0f; --black-soft:#1a1a1a;
    --white:#fff;
    --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563;
    --success:#22c55e; --warning:#eab308; --danger:#ef4444; --info:#3b82f6;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Tajawal',sans-serif;
    background:radial-gradient(ellipse at top, #150a26 0%, var(--black) 65%);
    color:var(--white); min-height:100vh;
    padding-bottom:3rem;
}

/* ── شريط علوي ────────────────────────── */
.page-topbar {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.3rem 2rem; max-width:1400px; margin:0 auto;
    border-bottom:1px solid rgba(124,58,237,0.1);
}

/* داخل iframe: أخفِ الـ topbar (موجود في dashboard) لتجنّب التكرار */
html.in-iframe .page-topbar,
body.in-iframe .page-topbar { display:none !important; }
html.in-iframe { padding-top:0; }
body.in-iframe { padding-top:0; }
body.in-iframe .page-header { margin-top:1rem; }
.page-logo {
    display:flex; align-items:center; gap:0.5rem;
    font-size:1.5rem; font-weight:900;
    background:linear-gradient(135deg, var(--gold), var(--purple-light));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.page-logo i { color:var(--gold); }
.back-btn {
    display:inline-flex; align-items:center; gap:0.4rem;
    padding:0.55rem 1.1rem;
    background:var(--black-card);
    border:1px solid rgba(124,58,237,0.3);
    color:var(--white); border-radius:8px;
    text-decoration:none; font-size:0.88rem;
    transition:all 0.2s;
}
.back-btn:hover { border-color:var(--purple); background:rgba(124,58,237,0.1); }

/* ── رأس الصفحة ────────────────────────── */
.page-header {
    max-width:1400px; margin:2rem auto;
    padding:0 2rem;
}
.page-title-group {
    display:flex; align-items:center; gap:1rem;
    margin-bottom:0.6rem;
}
.page-icon {
    width:54px; height:54px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem;
    background:linear-gradient(135deg, var(--purple), var(--purple-dark));
    color:var(--white);
    box-shadow:0 8px 24px rgba(124,58,237,0.3);
}
.page-icon.gold {
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:var(--black);
    box-shadow:0 8px 24px rgba(212,175,55,0.3);
}
.page-title {
    font-size:1.9rem; font-weight:800;
    color:var(--white);
}
.page-subtitle {
    color:var(--gray-400); font-size:0.95rem;
    margin-right:70px;
    line-height:1.6;
}

/* ── المحتوى الرئيسي ────────────────────── */
.page-content {
    max-width:1400px; margin:0 auto;
    padding:0 2rem;
}

/* ── البطاقات ──────────────────────────── */
.card {
    background:var(--black-card);
    border:1px solid rgba(124,58,237,0.15);
    border-radius:14px;
    padding:1.5rem;
    transition:border-color 0.2s;
}
.card:hover { border-color:rgba(124,58,237,0.3); }
.card-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.2rem; padding-bottom:0.9rem;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.card-header h2, .card-header h3 {
    font-size:1.05rem; color:var(--white);
    display:flex; align-items:center; gap:0.55rem;
}
.card-header i { color:var(--gold); }

/* ── شبكة بطاقات الإحصائيات ───────────── */
.stats-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1rem; margin-bottom:2rem;
}
.stat-card {
    background:var(--black-card);
    border:1px solid rgba(124,58,237,0.15);
    border-radius:12px; padding:1.2rem;
    position:relative; overflow:hidden;
}
.stat-card::before {
    content:''; position:absolute; top:0; right:0;
    width:100px; height:100px;
    background:radial-gradient(circle, rgba(124,58,237,0.15), transparent);
    opacity:0.5;
}
.stat-icon {
    width:42px; height:42px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; margin-bottom:0.7rem;
    background:rgba(124,58,237,0.15); color:var(--purple-light);
}
.stat-icon.gold { background:rgba(212,175,55,0.15); color:var(--gold); }
.stat-icon.green { background:rgba(34,197,94,0.15); color:var(--success); }
.stat-icon.red { background:rgba(239,68,68,0.15); color:var(--danger); }
.stat-icon.blue { background:rgba(59,130,246,0.15); color:var(--info); }
.stat-value {
    font-size:1.8rem; font-weight:800; color:var(--white);
    line-height:1.1;
}
.stat-label {
    color:var(--gray-500); font-size:0.82rem;
    margin-top:0.25rem;
}
.stat-trend {
    font-size:0.72rem; margin-top:0.4rem;
    display:inline-flex; align-items:center; gap:0.2rem;
}
.stat-trend.up { color:var(--success); }
.stat-trend.down { color:var(--danger); }

/* ── أزرار ────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.7rem 1.4rem;
    border:none; border-radius:10px;
    font-family:inherit; font-size:0.9rem; font-weight:600;
    cursor:pointer; transition:all 0.2s;
    text-decoration:none;
}
.btn-primary {
    background:linear-gradient(135deg, var(--purple), var(--purple-dark));
    color:var(--white);
}
.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(124,58,237,0.35);
}
.btn-gold {
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:var(--black);
}
.btn-gold:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(212,175,55,0.35);
}
.btn-outline {
    background:transparent; color:var(--white);
    border:1px solid rgba(124,58,237,0.4);
}
.btn-outline:hover { background:rgba(124,58,237,0.1); border-color:var(--purple); }
.btn-sm { padding:0.45rem 0.9rem; font-size:0.8rem; }

/* ── شارات ────────────────────────────── */
.badge {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.2rem 0.6rem;
    border-radius:99px;
    font-size:0.72rem; font-weight:600;
}
.badge-purple { background:rgba(124,58,237,0.15); color:var(--purple-light); }
.badge-gold { background:rgba(212,175,55,0.15); color:var(--gold); }
.badge-green { background:rgba(34,197,94,0.15); color:var(--success); }
.badge-red { background:rgba(239,68,68,0.15); color:var(--danger); }
.badge-new {
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:var(--black); font-weight:700;
}

/* ── شريط تقدّم ───────────────────────── */
.progress-bar {
    height:6px; background:rgba(255,255,255,0.06);
    border-radius:99px; overflow:hidden;
}
.progress-fill {
    height:100%; background:linear-gradient(90deg, var(--purple), var(--gold));
    border-radius:99px;
    transition:width 0.5s ease;
}

/* ── حالة فارغة ───────────────────────── */
.empty-state {
    text-align:center; padding:4rem 2rem;
    color:var(--gray-500);
}
.empty-state i {
    font-size:3.5rem; color:rgba(124,58,237,0.3);
    margin-bottom:1rem;
}
.empty-state h3 {
    color:var(--gray-400); margin-bottom:0.5rem;
    font-size:1.1rem;
}
.empty-state p { font-size:0.88rem; max-width:380px; margin:0 auto; }

/* ── حالة قفل (الميزات المدفوعة) ─────────────── */
.locked-overlay {
    position:relative;
}
.locked-overlay::after {
    content:''; position:absolute; inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
    border-radius:inherit; z-index:1;
}
.lock-badge {
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:0.6rem;
}
.lock-badge i { font-size:1.8rem; color:var(--gold); }
.lock-badge-text { color:var(--white); font-weight:700; font-size:0.95rem; }
.lock-badge-sub { color:var(--gray-400); font-size:0.78rem; }

/* ── responsive ───────────────────────── */
@media (max-width: 768px) {
    .page-topbar, .page-header, .page-content { padding:1rem; }
    .page-title { font-size:1.4rem; }
    .page-subtitle { margin-right:0; margin-top:0.4rem; }
    .page-title-group { flex-wrap:wrap; }
    .page-icon { width:44px; height:44px; font-size:1.2rem; }
}