/* FILENAME: styles/layout.css */

#app-container {
    transition: opacity 0.3s ease-out;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    /* مهم جداً: نسمح بارتفاع تلقائي ولا نملأ الشاشة بالقوة إلا عند الضرورة */
    min-height: auto;
    height: auto;
}

/* Navbar */
nav {
    position: fixed;
    width: 100%;
    z-index: 50;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 254, 251, 0.8);
    border-bottom: 1px solid var(--color-border);
}

.dark nav {
    background-color: rgba(29, 28, 28, 0.8);
    border-bottom-color: var(--color-border);
}

/* Footer */
footer {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    /* تأكيد عدم وجود مسافات إضافية */
    margin-top: 0;
    padding-top: 0;
}

.dark footer {
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border-top-color: var(--color-border);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

.dark ::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* ========================================== */
/* ✅ إصلاح نهائي لمسافة الفوتر ومشاكل الارتفاع في صفحة Events */
/* ========================================== */

/* عندما تكون الصفحة الحالية هي Events */
#app-container:has(.events-page) {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
}

/* إزالة أي هوامش أو حواف سفلية */
.events-page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
}

.events-page > div:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ضمان أن الحاوية الرمادية للصور لا تضيف مساحة غير ضرورية */
.events-page .relative.bg-slate-50,
.events-page .relative.dark\:bg-dark-bg {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden; /* يمنع Canvas من إضافة Scrollbar أفقي زائد */
}