:root {
    --sidebar-width: 250px;
    /* الهوية البصرية: نيلي/بنفسجي */
    --brand: #4f46e5;
    --brand-2: #7c3aed;
    --brand-light: #a5b4fc;
    --primary: #6366f1;
    --sidebar-hover: rgba(255, 255, 255, .08);
}

* { font-family: 'Cairo', sans-serif; }

body {
    background: #f1f5f9;
    margin: 0;
}

/* التخطيط العام */
.app-wrapper { display: flex; min-height: 100vh; }

.app-main {
    flex: 1;
    margin-right: var(--sidebar-width);
    transition: margin 0.2s ease;
    min-width: 0;
}
body.sidebar-collapsed .app-main { margin-right: 0; }

/* الشريط الجانبي — تدرّج نيلي بنفسجي (الهوية) */
.app-sidebar {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--sidebar-width);
    background: linear-gradient(185deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    color: #e2e8f0;
    overflow-y: auto;
    transition: transform 0.2s ease;
    z-index: 1030;
}
body.sidebar-collapsed .app-sidebar { transform: translateX(100%); }

.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.sidebar-logo { height: 42px; width: auto; max-width: 100%; }

/* اهتزاز الجرس (رنين) طوال الجلسة — يتحرّك جسم الجرس فقط */
.logo-bell {
    transform-box: fill-box;
    transform-origin: 50% 8%;
    animation: bellRing 2.4s ease-in-out infinite;
}
@keyframes bellRing {
    0%, 55%, 100% { transform: rotate(0deg); }
    5%  { transform: rotate(13deg); }
    12% { transform: rotate(-11deg); }
    19% { transform: rotate(8deg); }
    26% { transform: rotate(-6deg); }
    33% { transform: rotate(4deg); }
    40% { transform: rotate(-2deg); }
    47% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .logo-bell { animation: none; } }

/* شبكة: عنوان القسم بعرض كامل + بلاطتان بجانب بعض */
.sidebar-nav { padding: 10px 8px 24px; display: flex; flex-wrap: wrap; gap: 7px; }

.nav-section {
    width: 100%;
    padding: 14px 10px 2px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--brand-light);
    opacity: .85;
}

/* البلاطات: أيقونة كبيرة فوق + نص صغير تحت */
.sidebar-nav .nav-link {
    flex: 1 1 calc(50% - 4px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px;
    padding: 14px 6px;
    color: #cbd5e1; text-decoration: none;
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
    transition: background .15s, transform .1s;
}
.sidebar-nav .nav-link span { font-size: .72rem; line-height: 1.25; }
.sidebar-nav .nav-link i { font-size: 1.75rem; width: auto; }
.sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateY(-1px); }
.sidebar-nav .nav-link.active {
    background: rgba(129, 140, 248, .22);
    color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--brand-light);
}

/* رابط «لوحة التحكم» يبقى عريضاً أفقياً كما هو */
.sidebar-nav .nav-link.nav-wide {
    flex: 0 0 100%;
    flex-direction: row; justify-content: flex-start; text-align: right;
    gap: 11px; padding: 11px 16px; border-radius: 10px;
}
.sidebar-nav .nav-link.nav-wide span { font-size: .95rem; }
.sidebar-nav .nav-link.nav-wide i { font-size: 1.2rem; width: 22px; text-align: center; }

/* الشريط العلوي */
.app-navbar {
    display: flex; align-items: center; gap: 15px;
    background: #fff;
    padding: 10px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border-top: 3px solid var(--brand);
    position: sticky; top: 0; z-index: 1020;
}
.app-navbar .sidebar-toggle { font-size: 1.3rem; color: var(--brand); padding: 0; }
.app-navbar .navbar-title { font-weight: 600; color: #334155; }
.app-navbar .navbar-user { margin-right: auto; }

/* البطاقات والجداول */
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.07); border-radius: .6rem; }
.card-header { background: #fff; border-bottom: 1px solid #eef2f7; font-weight: 600; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.page-header h4 { margin: 0; font-weight: 700; color: #1e293b; border-right: 4px solid var(--brand); padding-right: 10px; }
.table thead th { background: #f8fafc; font-weight: 600; font-size: .88rem; color: #475569; white-space: nowrap; }
.table td { vertical-align: middle; font-size: .9rem; }

/* بطاقات إحصائية ملوّنة بالهوية */
.stat-card {
    transition: transform .15s, box-shadow .15s, filter .15s;
    border-right: 4px solid transparent;
    overflow: hidden;
}
.stat-card .stat-label { color: #64748b; }
.stat-card .stat-ico { box-shadow: 0 .35rem .8rem rgba(0,0,0,.14); }
.stat-clickable { cursor: pointer; }
.stat-clickable:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(79, 70, 229, .18) !important; }

/* تعبئة كل بطاقة بلونها المناسب (تدرّج خفيف + حدّ جانبي) */
.stat-primary   { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border-right-color: #6366f1; }
.stat-success   { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-right-color: #10b981; }
.stat-info      { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); border-right-color: #06b6d4; }
.stat-warning   { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-right-color: #f59e0b; }
.stat-secondary { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-right-color: #64748b; }
.stat-dark      { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border-right-color: #334155; }
.stat-danger    { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-right-color: #ef4444; }

/* زر ترويجي بريميوم: اطلب متجرك الإلكتروني */
.store-cta {
    position: relative; align-items: center; gap: 10px; line-height: 1.15;
    padding: 6px 16px 6px 14px; border-radius: 12px; text-decoration: none;
    overflow: hidden; isolation: isolate;
    background: linear-gradient(135deg, #7a5c00 0%, #d4a017 22%, #ffe27a 50%, #d4a017 78%, #7a5c00 100%);
    background-size: 200% 100%;
    color: #3a2c00;
    border: 1px solid #ffcf3f;
    box-shadow: 0 3px 12px rgba(212,160,23,.5), inset 0 1px 0 rgba(255,255,255,.55);
    animation: storeShift 5s ease-in-out infinite, storeFloat 3.2s ease-in-out infinite;
    transition: transform .18s ease, box-shadow .18s ease;
}
.store-cta:hover {
    transform: translateY(-2px) scale(1.02); color: #3a2c00;
    box-shadow: 0 8px 22px rgba(212,160,23,.7), inset 0 1px 0 rgba(255,255,255,.6);
}
/* وميض ينساب فوق الزر */
.store-cta::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
    left: -60%; z-index: 1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-18deg);
    animation: storeShine 3.2s ease-in-out infinite;
}
.store-cta > * { position: relative; z-index: 2; }

.store-cta-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; font-size: 1rem;
    background: rgba(255,255,255,.35); color: #6b4e00;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.store-cta-text { display: flex; flex-direction: column; align-items: flex-start; }
.store-cta-title { font-weight: 800; font-size: .82rem; letter-spacing: .2px; }
.store-cta-title .bi-stars { color: #fff8dc; filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); }
.store-cta-sub { font-size: .66rem; font-weight: 700; color: #5c4600; }

.store-cta-badge {
    position: absolute; top: -7px; left: -6px; z-index: 3;
    background: #dc2626; color: #fff; font-size: .58rem; font-weight: 800;
    padding: 1px 7px; border-radius: 20px; letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(220,38,38,.5);
    animation: storePulse 1.6s ease-in-out infinite;
}

@keyframes storeShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes storeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes storeShine { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes storePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
    .store-cta, .store-cta::before, .store-cta-badge { animation: none; }
}

/* زر الربح الذهبي (بلا اسم) — شاشة البيع، للمدير فقط */
.profit-dot {
    width: 42px; height: 22px; padding: 0;
    vertical-align: middle;
    border-radius: 999px; border: 1px solid #e0b400;   /* بيضاوي */
    background: linear-gradient(135deg, #b8860b 0%, #ffe27a 50%, #d4a017 100%);
    box-shadow: 0 1px 6px rgba(212, 160, 23, .5), inset 0 1px 0 rgba(255,255,255,.6);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.profit-dot:hover { transform: scale(1.1); box-shadow: 0 3px 12px rgba(212, 160, 23, .75); }
.profit-dot:active { transform: scale(.96); }

/* أزرار الهوية */
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: #4338ca; border-color: #4338ca; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }
a { color: var(--brand); }

/* صفحة الدخول */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: linear-gradient(135deg, #1e1b4b, #4f46e5 70%, #7c3aed);
}
.login-card { width: 100%; max-width: 400px; }

/* شجرة الحسابات */
.tree-node { padding: 6px 0; }
.tree-children { padding-right: 24px; border-right: 1px dashed #cbd5e1; margin-right: 8px; }
.tree-toggle { cursor: pointer; width: 20px; display: inline-block; text-align: center; color: #64748b; }
.account-badge { font-size: .7rem; }

/* ===================== التجاوب (الجوال والأجهزة اللوحية) ===================== */

/* أجهزة لوحية وأصغر: القائمة الجانبية تصبح طبقة عائمة فوق المحتوى */
@media (max-width: 991.98px) {
    /* المحتوى يأخذ كامل العرض؛ القائمة الجانبية تنزلق فوقه */
    .app-main { margin-right: 0 !important; }
    .app-sidebar { box-shadow: -6px 0 28px rgba(0,0,0,.35); }

    /* خلفية معتمة خلف القائمة عند فتحها */
    body:not(.sidebar-collapsed) .sidebar-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(15, 23, 42, .5); z-index: 1025;
    }

    /* شريط علوي مرن يلتفّ عند ضيق الشاشة */
    .app-navbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    .app-navbar .navbar-user { margin-right: auto; }

    /* عناوين ورؤوس الصفحات تلتفّ بدل أن تُقصّ */
    .page-header { flex-wrap: wrap; gap: .5rem; }
    .page-header h4 { font-size: 1.15rem; }
}

/* الهواتف: تقليل الحشو وتكبير مناطق اللمس */
@media (max-width: 575.98px) {
    .app-content .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .card-body { padding: .85rem; }
    .app-navbar .btn { padding: .35rem .55rem; }
    .table td, .table thead th { font-size: .82rem; }

    /* الأزرار الممتدّة داخل النماذج تملأ العرض لسهولة اللمس */
    .modal-footer .btn { flex: 1 1 auto; }
}

.sidebar-backdrop { display: none; }