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

html { font-size: 13px; }

:root {
    --bg-body: #f8fafc;
    --sidebar-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --border: #e2e8f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif !important; }

body { background: var(--bg-body); color: var(--text-main); display: flex; min-height: 100vh; font-size: 1rem; }

body.dark-mode { 
    --bg-body: #0f172a; --sidebar-bg: #1e293b; --text-main: #f8fafc; 
    --text-muted: #94a3b8; --card-bg: #1e293b; --border: #334155; 
}

body.dark-mode .card, body.dark-mode .login-box { background: var(--card-bg) !important; color: white; border-color: var(--border); }
body.dark-mode input, body.dark-mode select { background: #0f172a; color: white; border-color: #334155; }

.login-container { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; direction: rtl; }
.login-box { background: var(--card-bg); padding: 2rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); text-align: right; border: 1px solid var(--border); width: 100%; max-width: 400px; }
.login-box h2 { font-size: 1.4rem; margin-bottom: 0.5rem; text-align: center; }
.login-box p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; text-align: center; }

#mainApp { display: flex; width: 100%; }
.sidebar { width: 200px; background: var(--sidebar-bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; }
.sidebar-logo { padding: 0.8rem; border-bottom: 1px solid var(--border); text-align: center; }
.sidebar-logo img { max-width: 70px; margin-bottom: 0.4rem; }
.sidebar-logo p { font-size: 0.75rem; color: var(--text-muted); }

.sidebar-nav { flex: 1; padding: 0.8rem 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; overflow-y: auto; }
.sidebar-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; transition: 0.2s; }
.sidebar-link:hover, .sidebar-link.active { background: var(--bg-body); color: #3b82f6; }
.sidebar-footer {
    padding: 10px 0.8rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px; /* المسافة بين الأزرار */
    position: relative;
    z-index: 100; /* باش يبقاو فوق أي حاجة */
    background: var(--sidebar-bg); /* باش ما يبانش شفاف */
}
.main-content { flex: 1; margin-right: 200px; padding: 1.2rem; }
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.top-bar h1 { font-size: 1.3rem; }
.page { display: none; } .page.active { display: block; }
.card { background: var(--card-bg); padding: 1rem; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 1rem; }
.card h2 { font-size: 1rem; margin-bottom: 0.8rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.stat-card { padding: 1rem; border-radius: 10px; color: white; text-align: center; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.stat-green { background: #10b981; } .stat-blue { background: #3b82f6; } .stat-orange { background: #f59e0b; } .stat-purple { background: #8b5cf6; }
.stat-card h3 { font-size: 0.75rem; margin-bottom: 0.3rem; font-weight: 600; }
.stat-card p { font-size: 1.2rem; font-weight: bold; }

.charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; align-content: start; }
.chart-box { background: var(--card-bg); padding: 0.8rem; border-radius: 8px; border: 1px solid var(--border); height: 300px; position: relative; display: flex; flex-direction: column; }
.chart-box canvas { flex: 1; max-height: 100%; width: 100% !important; height: 100% !important; }
.chart-box h4 { font-size: 0.85rem; margin-bottom: 0.5rem; text-align: center; font-weight: 600; }

.form-grid { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 0.2rem; min-width: 150px; }
.form-group.full-width { width: 100%; }
.form-group label { font-size: 0.75rem; font-weight: 600; margin-bottom: 2px; }
input, select { padding: 0.4rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; background: #fff; color: #000; width: 100%; }
input:focus, select:focus { outline: none; border-color: #3b82f6; }

.btn-primary { background: #3b82f6; color: white; padding: 0.4rem 0.8rem; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8rem; transition: 0.2s; white-space: nowrap; }
.btn-primary:hover { background: #2563eb; }
.btn-secondary { background: #e2e8f0; color: #333; padding: 0.4rem 0.8rem; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8rem; transition: 0.2s; }
.btn-secondary:hover { background: #cbd5e1; }
.btn-danger { background: #ef4444; color: white; padding: 0.4rem 0.8rem; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }
.icon-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; }

.table-container { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; text-align: right; direction: rtl; }
.table th, .table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.8rem; text-align: right; vertical-align: middle; }
.table th { background: var(--bg-body); font-weight: bold; font-size: 0.75rem; }
.table td:last-child { text-align: right; display: flex; justify-content: flex-start; gap: 0.3rem; align-items: center; }
.table td:last-child button { margin: 0; padding: 4px 6px; border-radius: 4px; border: none; cursor: pointer; font-size: 0.8rem; }

.filters { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.8rem; direction: rtl; }
.filters label { font-size: 0.75rem; font-weight: bold; }

.toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 12px 24px; border-radius: 8px; color: white; font-weight: 600;
    z-index: 99999; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    direction: rtl;
}
@keyframes slideUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadeOut { to { opacity: 0; transform: translate(-50%, 20px); } }

/* --- زر سد القائمة (كيبان غير فـ التيليفون) --- */
.close-sidebar {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #ef4444;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1002;
}

/* ============== RESPONSIVE DESIGN (للتيليفون) ============== */
@media (max-width: 768px) {
    .sidebar {
        width: 250px;
        position: fixed;
        top: 0;
        right: -250px;
        bottom: 0;
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        background: var(--sidebar-bg); /* <--- هاد السطر هو اللي كايعطي الخلفية */
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        overflow-y: auto; /* باش تقدر تسكرولي فـ القائمة */
    }
    
    .sidebar.active {
        right: 0;
    }
    
    /* باش نضمنو أن الخلفية كاتبان فـ الدارك مود */
    body.dark-mode .sidebar {
        background: #1e293b !important;
    }
    
    body:not(.dark-mode) .sidebar {
        background: #ffffff !important;
    }
    
    .close-sidebar {
        display: block;
    }
    
    .main-content {
        margin-right: 0 !important;
        padding: 10px;
    }
    
    .menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1001;
        background: #3b82f6;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    html {
        font-size: 12px;
    }
    
    .card {
        padding: 10px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .charts-grid {
        grid-template-columns: 1fr !important;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .table {
        min-width: 600px;
    }
}

@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}/* ============== RESPONSIVE DESIGN (للتيليفون) ============== */
@media (max-width: 768px) {
    .sidebar {
        width: 250px;
        position: fixed;
        top: 0;
        right: -250px;
        bottom: 0;
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        background: var(--sidebar-bg) !important;
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        overflow-y: auto;
    }
    
    .sidebar.active {
        right: 0;
    }
    
    body.dark-mode .sidebar {
        background: #1e293b !important;
    }
    
    body:not(.dark-mode) .sidebar {
        background: #ffffff !important;
    }
    
    .close-sidebar {
        display: block;
    }
    
    .main-content {
        margin-right: 0 !important;
        padding: 10px;
    }
    
    .menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 1001;
        background: #3b82f6;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    html {
        font-size: 12px;
    }
    
    .card {
        padding: 10px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .charts-grid {
        grid-template-columns: 1fr !important;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .table {
        min-width: 600px;
    }
}
/* باش نصلحو القائمة ديال المنتجات باش ماتخرجش على الكارت */
select {
    position: relative;
    z-index: 10;
}

.card {
    position: relative;
    z-index: 1;
}
/* باش نصلحو القائمة ديال المنتجات باش ماتخرجش على الفورم */
select {
    max-height: 150px; /* كنحددو الطول ديال القائمة */
    overflow-y: auto;  /* كنخليو شريط التمرير يبان إلا كانت عناصر بزاف */
}

/* إلا كانت القائمة ديال المنتجات كتخرج على الكارت، هاد الكود كيصلح الـ z-index ديالها */
.card {
    position: relative;
    z-index: 1;
}

select {
    position: relative;
    z-index: 10;
}
/* باش نضمنو أن الأزرار ديالنا فوق زر Netlify */
.sidebar-footer {
    position: relative;
    z-index: 9999 !important; /* رقم عالي بزاف باش يغلب Netlify */
}

/* باش نخبيو زر Netlify نهائياً (أضمن حل) */
iframe[name="netlify-badge"],
#netlify-badge,
.netlify-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}