/* ========================================== */
/* Elite Tech Official Theme (Compact UI) */
/* ========================================== */
:root {
    --elite-background: #F5F7FA;
    --elite-card: #FFFFFF;
    --elite-text: #2D3436;
    --elite-accent: #2B0B98;
    --elite-cyan: #00bcd4;
    --elite-orange: #ff9800;
    --elite-placeholder: #8395A7;
    --elite-border: #DFE4EA;
}

/* ========================================== */
/* 1. الإعدادات العامة والخطوط */
/* ========================================== */
html, body {
    background-color: var(--elite-background) !important;
    color: var(--elite-text) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px !important; /* خط مدمج ومناسب للوحة التحكم */
    margin: 0;
    padding: 0;
}

/* ========================================== */
/* 2. الشريط العلوي وعناصر القائمة */
/* ========================================== */
.top-row {
    background-color: var(--elite-card) !important;
    border-bottom: 1px solid var(--elite-border);
    height: 50px !important;
}

.nav-link {
    color: var(--elite-text) !important;
    font-weight: 500;
    font-size: 13px !important;
    padding: 8px 15px !important;
    border-radius: 6px;
    margin: 2px 8px;
}

    .nav-link:hover, .nav-link.active {
        background-color: #f0f2f5 !important;
        color: var(--elite-accent) !important;
    }

/* ========================================== */
/* 3. الأزرار (Compact Buttons) */
/* ========================================== */
.btn-primary {
    background-color: var(--elite-orange) !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 6px;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: bold;
}

    .btn-primary:hover {
        filter: brightness(0.9);
        transform: scale(1.02);
        transition: all 0.2s ease-in-out;
    }

/* أزرار الحذف والتعديل في الجداول */
.btn-sm {
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.5;
    border-radius: 4px;
}

.action-btn {
    margin: 0 2px !important;
}

/* ========================================== */
/* 4. الجداول (Compact Tables) */
/* ========================================== */
.table {
    color: var(--elite-text) !important;
    border-color: var(--elite-border) !important;
    background-color: transparent !important;
    font-size: 13px !important;
}

    .table th {
        color: var(--elite-accent) !important;
        background-color: var(--elite-card) !important;
        border-bottom: 2px solid var(--elite-border) !important;
        padding: 10px !important;
    }

    .table td {
        background-color: var(--elite-card) !important;
        border-bottom: 1px solid var(--elite-border) !important;
        padding: 4px 8px !important;
        vertical-align: middle;
    }

.table-hover > tbody > tr:hover > * {
    background-color: #F1F2F6 !important;
    color: var(--elite-accent) !important;
}

/* منع الأزرار من النزول تحت بعضها */
.actions-cell {
    white-space: nowrap !important;
    width: 1%;
}

/* ========================================== */
/* 5. القائمة الجانبية (انزلاق من اليسار) */
/* ========================================== */
.sidebar {
    width: 250px;
    background: var(--elite-card) !important;
    border-right: 1px solid var(--elite-border);
    position: fixed;
    top: 0;
    bottom: 0;
    left: -260px; /* مخفية خارج الشاشة من اليسار */
    z-index: 1050;
    transition: left 0.3s ease-in-out; /* حركة ناعمة */
    overflow-y: auto;
}

    /* عند فتح القائمة تظهر من اليسار لليمين */
    .sidebar.open {
        left: 0;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

/* ========================================== */
/* 6. التجاوب (Media Queries) */
/* ========================================== */

/* في الجوال: إخفاء القائمة الافتراضية لتنظيف الشاشة */
@media (max-width: 767.98px) {
    .collapse {
        display: none;
    }
}

/* في الديسكتوب: تثبيت القائمة بجانب المحتوى */
@media (min-width: 768px) {
    .page {
        display: flex;
        flex-direction: row;
    }

    .sidebar {
        position: sticky;
        left: 0;
        z-index: 1;
        transition: none; /* إيقاف حركة الانزلاق لأنها ثابتة */
        box-shadow: none;
    }

    .collapse {
        display: block; /* إظهار عناصر القائمة دائماً */
    }
}