/* ================================================================
   FILE: Dashboard/style.css
   ================================================================ */
/* BUCY AI X - DASHBOARD STYLE (RED NEON THEME)                    */
/* ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
    --bg-primary: #0a0006;
    --bg-secondary: #1c0a14;
    --neon-green: #ff0040;   /* ✅ الأحمر النيون الأساسي (اسم المتغير باقي زي ما هو عشان مايكسرش حاجة) */
    --neon-purple: #6c00a8;  /* ✅ بوربل غامق ثانوي */
    --text-primary: #f2e9ec;
    --text-secondary: #8a7580;
    --border-color: rgba(255, 0, 64, 0.12);
    --shadow: 0 0 30px rgba(255, 0, 64, 0.08);
}

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

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Poppins', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    display: flex;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
    width: 240px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 20px 0;
    position: fixed;
    top: 0;
    right: 0;   /* ✅ الصفحة RTL، فالقائمة الجانبية لازم تتثبت يمين مش شمال */
    left: auto;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    transition: transform .3s ease;
}

.sidebar-close-btn{
    display:none;position:absolute;top:14px;left:14px;background:rgba(255,255,255,.06);
    border:1px solid var(--border-color);color:var(--text-primary);width:32px;height:32px;
    border-radius:50%;cursor:pointer;font-size:1rem;align-items:center;justify-content:center;
}
@media (max-width: 768px){
    .sidebar-close-btn{ display:flex; }
}

.sidebar-logo {
    text-align: center;
    padding: 20px 20px 30px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo .icon {
    font-size: 2.5rem;
}

.sidebar-logo h1 {
    color: var(--neon-purple);
    font-size: 1.4rem;
}

.sidebar-logo h1 span {
    color: #fff;
}

.sidebar-logo p {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.sidebar-menu {
    padding: 15px 0;
}

.sidebar-menu .menu-item {
    padding: 12px 25px;
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.sidebar-menu .menu-item:hover {
    background: rgba(155, 89, 182, 0.05);
    color: #fff;
}

.sidebar-menu .menu-item.active {
    color: var(--neon-purple);
    border-left-color: var(--neon-purple);
    background: rgba(155, 89, 182, 0.05);
}

.sidebar-menu .menu-item .icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.sidebar-footer .logout-btn {
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.15);
    color: #ff6b6b;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-footer .logout-btn:hover {
    background: rgba(255, 0, 0, 0.15);
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content {
    margin-right: 240px;
    margin-left: 0;
    padding: 30px;
    flex: 1;
    min-height: 100vh;
}

/* ================================================================
   HEADER
   ================================================================ */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.header h2 {
    font-weight: 600;
}

.header h2 span {
    color: var(--neon-purple);
}

.header .user-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.header .user-info .name {
    color: var(--neon-purple);
    font-weight: 600;
}

/* ================================================================
   STATS CARDS
   ================================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--neon-green);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.stat-card .icon {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.stat-card .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.stat-card .label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ================================================================
   SYSTEM INFO
   ================================================================ */
.system-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.system-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
}

.system-card .label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.system-card .value {
    color: #fff;
    font-size: 1rem;
    margin-top: 4px;
    font-weight: 600;
}

.system-card .progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.system-card .progress-bar .fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.fill.good { background: var(--neon-green); }
.fill.warning { background: #ffd700; }
.fill.danger { background: #ff6b6b; }

/* ================================================================
   TABLE
   ================================================================ */
.section-title {
    color: #fff;
    font-size: 1rem;
    margin: 25px 0 12px;
}

.table-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container th {
    padding: 12px 16px;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.table-container td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
}

.table-container tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-badge.online {
    background: rgba(0, 255, 136, 0.1);
    color: var(--neon-green);
}

.status-badge.offline {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--neon-purple);
    color: #fff;
}

.btn-primary:hover {
    background: #8E44AD;
    transform: translateY(-2px);
}

.btn-danger {
    background: rgba(255, 0, 0, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.btn-danger:hover {
    background: rgba(255, 0, 0, 0.25);
}

.btn-success {
    background: rgba(0, 255, 136, 0.15);
    color: var(--neon-green);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.btn-success:hover {
    background: rgba(0, 255, 136, 0.25);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(100%);
        width: 260px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-right: 0;
        margin-left: 0;
        padding: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hamburger {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .system-grid {
        grid-template-columns: 1fr;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.hamburger:hover {
    color: var(--neon-purple);
}
/* ================================================================
   HOME HERO — يطابق تصميم الصفحة الرئيسية المرجعية (بانر + بروفايل + سوشيال)
   ================================================================ */
.home-topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 4px;margin-bottom:16px;
}
.home-topbar .brand{
    display:flex;align-items:center;gap:10px;font-size:1.35rem;font-weight:800;letter-spacing:1px;
}
.home-topbar .brand .b1{color:#fff}
.home-topbar .brand .b2{
    background:linear-gradient(135deg, var(--neon-green), #00c8ff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-icon-btn{
    width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:#12121a;border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;
}
.home-logout{
    display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;
    background:rgba(255,59,48,.12);border:1px solid rgba(255,59,48,.35);color:#ff5c52;
    font-size:.78rem;font-weight:700;cursor:pointer;
}

/* ✅ admin-only sections: مخفية افتراضيًا لحد ما JS يتحقق من الدور (يمنع وميض المحتوى الحساس) */
.admin-only{ display:none; }

.home-banner{
    position:relative;border-radius:20px;overflow:hidden;min-height:210px;
    margin-bottom:18px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,0,64,.14), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(155,89,182,.20), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(0,120,255,.18), transparent 45%),
        linear-gradient(160deg, #0d0d14 0%, #15111c 60%, #0a0a10 100%);
    border:1px solid var(--border-color);
}
/* ✅ الكاروسيل — شكل مجلة بيتقلب بين صور، سحب باللمس + نقاط تنقل */
.home-banner .banner-track{
    display:flex;width:100%;height:210px;
}
.home-banner .banner-slide{
    position:relative;flex:0 0 100%;width:100%;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
}
.home-banner .banner-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.85));
}
.home-banner .banner-dots{
    position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
    display:flex;gap:6px;z-index:2;
}
.home-banner .b-dot{
    width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:.25s;
}
.home-banner .b-dot.active{width:20px;border-radius:5px;background:var(--neon-green);box-shadow:0 0 8px var(--neon-green);}

.banner-more-btn{
    margin-top:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    color:#fff;font-size:.72rem;font-weight:600;padding:6px 14px;border-radius:20px;cursor:pointer;
    font-family:inherit;backdrop-filter:blur(4px);width:fit-content;
}
.banner-modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;z-index:998;padding:20px;
}
.banner-modal-overlay.show{display:flex;}
.banner-modal{
    background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;
    max-width:420px;width:100%;padding:24px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.6);
}
.banner-modal-close{
    position:absolute;top:14px;left:14px;background:rgba(255,255,255,.08);border:none;color:#fff;
    width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.85rem;
}
.banner-modal-img{width:100%;border-radius:14px;margin-bottom:16px;object-fit:cover;max-height:200px;}
.banner-modal h3{margin-bottom:8px;font-size:1.1rem;}
.banner-modal p{color:var(--text-secondary);font-size:.85rem;line-height:1.6;margin-bottom:16px;}
.banner-modal-link{
    display:inline-block;background:linear-gradient(135deg,var(--neon-green),#5a0512);color:#fff;
    padding:10px 20px;border-radius:20px;text-decoration:none;font-size:.85rem;font-weight:700;
}

/* ✅ سلوت إعلان بستايل الداشبورد الغامق (نفس منطق الأنواع بتاعة public.css) */
.ad-container .ad-slot{
    display:flex;gap:12px;align-items:center;background:var(--bg-secondary);
    border:1px solid var(--border-color);border-radius:14px;padding:14px;
    text-decoration:none;color:var(--text-primary);position:relative;overflow:hidden;
}
.ad-container .ad-slot:hover{border-color:var(--neon-green);}
.ad-container .ad-slot img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.ad-container .ad-slot-title{font-weight:700;font-size:.85rem;margin-bottom:4px;}
.ad-container .ad-slot-desc{font-size:.75rem;color:var(--text-secondary);}
.ad-container .ad-slot-badge{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.08);color:var(--text-secondary);font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:10px;}
.home-banner .banner-connect{
    position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:6px;
    background:rgba(255,0,64,.14);border:1px solid var(--neon-green);color:var(--neon-green);
    padding:6px 14px;border-radius:20px;font-size:.75rem;font-weight:700;
    box-shadow:0 0 14px rgba(255,0,64,.25);text-decoration:none;
}
.home-banner .banner-connect .dot{width:7px;height:7px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 8px var(--neon-green)}
.home-banner .banner-title{position:relative;z-index:1}
.home-banner .banner-title h1{
    font-size:2.4rem;font-weight:900;letter-spacing:2px;line-height:1;
    background:linear-gradient(90deg,#fff 30%, var(--neon-green) 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-banner .banner-title .ver{font-size:1.1rem;color:#fff;letter-spacing:3px;margin-top:6px;opacity:.9}
.home-banner .banner-title .creator{font-size:.72rem;color:var(--text-secondary);letter-spacing:2px;margin-top:2px}

.home-profile{
    display:flex;align-items:center;gap:14px;
    background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;
    padding:16px;margin-bottom:16px;position:relative;
}
.home-profile .avatar{
    width:56px;height:56px;border-radius:14px;object-fit:cover;border:2px solid var(--neon-purple);
    position:relative;flex-shrink:0;
}
.home-profile .avatar-dot{
    position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
    background:var(--neon-green);border:2px solid var(--bg-secondary);
}
.home-profile .info h3{font-size:1.05rem;margin-bottom:6px}
.home-profile .badges{display:flex;gap:6px;flex-wrap:wrap}
.badge-pill{
    font-size:.68rem;padding:4px 10px;border-radius:20px;font-weight:700;
    background:rgba(155,89,182,.12);color:var(--neon-purple);border:1px solid rgba(155,89,182,.35);
}
.badge-pill.expire{background:rgba(255,59,48,.10);color:#ff6b60;border-color:rgba(255,59,48,.3)}
.home-profile .meta{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:12px;margin-top:12px;border-top:1px solid var(--border-color);
    font-size:.75rem;color:var(--text-secondary);grid-column:1/-1;
}
.home-profile{flex-wrap:wrap}
.home-profile .meta .live{color:var(--neon-green);display:flex;align-items:center;gap:5px}

.social-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.social-pill{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px;border-radius:14px;text-decoration:none;font-weight:700;font-size:.85rem;
    border:1px solid var(--border-color);transition:.2s;
}
.social-pill:hover{transform:translateY(-2px)}
.social-pill.telegram{background:rgba(0,150,255,.10);color:#4fc3ff;border-color:rgba(0,150,255,.3)}
.social-pill.discord{background:rgba(114,137,218,.12);color:#8ea1f0;border-color:rgba(114,137,218,.35)}
.social-pill.youtube{background:rgba(255,0,0,.10);color:#ff5c5c;border-color:rgba(255,0,0,.3)}
.social-pill.whatsapp{background:rgba(37,211,102,.10);color:#4be08a;border-color:rgba(37,211,102,.3)}

.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.feature-card{
    background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;
    padding:16px;position:relative;text-decoration:none;color:var(--text-primary);display:block;
}
.feature-card .tag{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:12px;display:inline-flex;align-items:center;gap:4px;margin-bottom:14px}
.feature-card .tag.online{background:rgba(155,89,182,.12);color:var(--neon-purple)}
.feature-card .tag.premium{background:rgba(255,0,64,.12);color:var(--neon-green)}
.feature-card .fc-icon{
    width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:#1c1c28;margin-bottom:12px;font-size:1.2rem;
}
.feature-card h4{font-size:1rem;margin-bottom:4px}
.feature-card p{font-size:.72rem;color:var(--text-secondary)}

.info-feed{
    background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;
    padding:16px;margin-bottom:90px;
}
.info-feed .ih{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:.85rem}
.info-feed .ih a{color:var(--text-secondary);text-decoration:none;font-size:.72rem}
.info-item{display:flex;gap:10px;padding:8px 0;font-size:.78rem;border-top:1px solid var(--border-color)}
.info-item:first-of-type{border-top:none}
.info-item .idot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.info-item .itime{margin-inline-start:auto;color:#555;font-size:.68rem;white-space:nowrap}

.home-fab{
    position:fixed;bottom:80px;inset-inline-end:20px;width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg, #00c8ff, var(--neon-purple));
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;
    box-shadow:0 6px 22px rgba(0,180,255,.4);text-decoration:none;z-index:900;
}
.bottom-nav{
    position:fixed;bottom:0;left:0;right:0;background:#0c0c12;border-top:1px solid var(--border-color);
    display:flex;justify-content:space-around;padding:10px 0 14px;z-index:900;
}
.bottom-nav a{
    display:flex;flex-direction:column;align-items:center;gap:3px;color:#555;text-decoration:none;font-size:.62rem;font-weight:700;
}
.bottom-nav a.active{color:var(--neon-green)}
@media (min-width:900px){ .bottom-nav{display:none} .home-fab{display:none} }

/* ================================================================
   BIG LOGO IN BANNER (بالشكل اللي طلبه اليوزر: كبير + تحت + strong shadow)
   ================================================================ */
.banner-logo-big{
    max-width:78%;
    width:340px;
    height:auto;
    margin-top:8px;
    filter:
        drop-shadow(0 10px 22px rgba(0,0,0,.75))
        drop-shadow(0 0 34px rgba(255,0,64,.35))
        drop-shadow(0 0 60px rgba(155,89,182,.25));
}
@media (max-width:480px){ .banner-logo-big{ width:250px; } }

/* ================================================================
   لغة (AR/EN) — زرار تبديل في الـ topbar
   ================================================================ */
.lang-switch{display:flex;gap:4px;background:#111;border:1px solid var(--border-color);border-radius:10px;padding:3px;margin-inline-end:6px}
.lang-btn{background:transparent;border:none;color:var(--text-secondary);padding:6px 10px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:700}
.lang-btn.active{background:var(--neon-purple);color:#fff}

/* ================================================================
   أيقونات السوشيال الحقيقية (بدل الإيموجي) + تيك توك
   ================================================================ */
.social-row{grid-template-columns:repeat(2,1fr)}
.social-pill{gap:10px}
.social-icon{width:20px;height:20px;border-radius:5px;flex-shrink:0}
.social-pill.tiktok{background:rgba(255,255,255,.06);color:#eee;border-color:rgba(255,255,255,.18);grid-column:span 2}
.social-pill{transition:transform .18s ease, box-shadow .18s ease}
.social-pill:hover{box-shadow:0 8px 20px rgba(0,0,0,.35)}
.social-pill:active{transform:scale(.97)}