/* =====================================================================
   04-public-layout.css
   منقولة من layout.css الأصلية في زمام — تخص الواجهة العامة (index.html)
   فقط: الشريط العلوي (Navbar)، البانر الترحيبي (Hero)، والحاوية
   الرئيسية. صفحات الإدارة لها هيكلها الخاص (Sidebar/Topbar) في
   02-components.css، فلا تكرار بينهما.
   ===================================================================== */

.navbar {
    background: var(--surface-translucent);
    backdrop-filter: blur(12px);
    padding: 10px 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-light);
    gap: 8px;
    flex-wrap: nowrap;
}
.nav-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; font-weight: 900; font-size: 1rem; white-space: nowrap; color: var(--heading); }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; overflow: hidden; }
.nav-brand-text #navbar-app-name { overflow: hidden; text-overflow: ellipsis; }
.nav-brand-subtitle { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-footer { display: flex; justify-content: center; padding: 18px 16px 90px; }
.footer-credit-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nile-light, #1b6e64), var(--nile-dark, #0f4c46));
    color: #fff;
    opacity: 0.82;
    box-shadow: 0 2px 8px rgba(15, 76, 70, 0.25);
    letter-spacing: 0.2px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-credit-badge:hover { opacity: 1; transform: translateY(-1px); }
@media (min-width: 769px) { .site-footer { padding-bottom: 24px; } }
#nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-btn {
    background: var(--nile-dark);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(15,76,70,0.15);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    text-decoration: none;
}
.nav-btn:hover { background: var(--nile-light); }
.nav-btn:active { transform: scale(0.96); }

.theme-fab-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-main); font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    flex-shrink: 0; transition: var(--transition); box-shadow: var(--shadow-1);
}
.theme-fab-btn:hover { background: var(--nile-surface); }
.theme-fab-btn:active { transform: scale(0.92); }

.container { max-width: 1400px; margin: 16px auto; padding: 0 10px; }
@media (max-width: 900px) {
    /* آخر عنصر في أي صفحة عامة (فورم البلاغ، لوحة حالة الترع...) كان
       بيتغطى بالشريط السفلي الثابت لأن .container مالوش أي حشو سفلي
       يقابله. */
    .container { padding-bottom: calc(24px + var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
    /* زر واتساب العائم كان بارتفاع ثابت 22px من أسفل الشاشة بغض النظر
       عن وجود الشريط السفلي فوقه — بيتراكب معاه فعلياً (لقطة شاشة
       فعلية أكّدت المشكلة)، فبنرفعه فوق الشريط بالظبط على الموبايل. */
    .whatsapp-fab { bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom)); }
}
.view-section { display: none; animation: fadeIn 0.35s ease; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero-banner { text-align: center; margin-bottom: 24px; }
.hero-banner.compact { margin-bottom: 16px; }
.hero-banner h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; }
.hero-banner p { color: var(--text-muted); font-size: 0.9rem; max-width: 700px; margin: 0 auto; padding: 0 8px; }

/* ============ تبويبات الواجهة العامة (منذ 0.9.6) ============
   بدل الصفحة الطويلة القديمة اللي كل حاجة فيها مرصوصة فوق بعض (فورم
   البلاغ + الأخبار + لوحتي الترع/المساقي كلهم في اسكرول واحد طويل) —
   الآن كل قسم في تبويب مستقل، فالمنتفع يشوف حاجة واحدة واضحة في المرة
   بدل ما يتوه في اسكرول طويل يدور فيه. شريط علوي أفقي على الديسكتوب،
   وشريط سفلي بنفس نمط لوحة الإدارة بالظبط على الموبايل (اتساق كامل بين
   واجهة المزارع وواجهة الموظف). */
.public-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    background: var(--bg-subtle);
    padding: 5px;
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.public-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    min-height: 44px;
}
.public-tab:hover { color: var(--text-main); }
.public-tab.active { background: var(--bg-card); color: var(--nile-dark); box-shadow: var(--shadow-1); }
.public-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    margin-inline-start: 4px;
}
.public-tab-content { display: none; animation: fadeIn 0.3s ease; }
.public-tab-content.active { display: block; }

@media (max-width: 900px) {
    .public-tabs { display: none; }
    body { padding-bottom: calc(var(--bottom-nav-h) + 16px); }
}