/* =====================================================================
   02-components.css
   منصة زمام الجيزة — عناصر واجهة مشتركة (النماذج + هيكل لوحة الإدارة)
   ===================================================================== */

/* ============ شريط انقطاع الاتصال (منقول من زمام — كان مفقوداً تماماً في النسخة الموحَّدة) ============ */
.offline-banner {
    display: none;
    background: var(--warning-light);
    color: var(--warning);
    font-weight: 800;
    font-size: 0.78rem;
    text-align: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 99;
}
.offline-banner.show { display: block; }

/* ============ تبويبات داخلية داخل صفحة (مثل الإعدادات) ============ */
.section-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    background: var(--bg-subtle);
    padding: 5px;
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.section-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;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.section-tab:hover { color: var(--text-main); }
.section-tab.active { background: var(--bg-card); color: var(--nile-dark); box-shadow: var(--shadow-1); }
.section-tab-content { display: none; animation: fadeIn 0.3s ease; }
.section-tab-content.active { display: block; }

/* ============ لوحة استيراد Excel (مطوية افتراضياً) ============ */
.excel-import-panel { display: none; padding: 14px; background: var(--bg-subtle); border-radius: var(--radius-md); }
.excel-import-panel.open { display: block; }

/* ============ نظام الأيقونات SVG (بدل الإيموجي) ============ */
.zicon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ============ زرار الإضافة العائم (FAB) ============
   بدل نموذج الإضافة اللي كان ملازم نص الصفحة العلوي دايماً — الإضافة
   عملية غير يومية، فمالهاش داعي تاخد نص الشاشة بشكل ثابت. الزرار ده
   بيفتح `.form-dialog` (تفاصيل تحت) وقت الحاجة بس. */
.fab-add-btn {
    position: fixed;
    left: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--nile-dark);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-pop);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 150;
    transition: var(--transition);
}
.fab-add-btn:hover { background: var(--nile-light); transform: scale(1.05); }
.fab-add-btn:active { transform: scale(0.94); }
@media (max-width: 900px) {
    .fab-add-btn { bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom)); left: 16px; }
}

/* ============ ديالوج النماذج (إضافة/تعديل) ============
   منبثق أكبر من مودال التأكيد العادي، بيحمل نموذج كامل. Bottom-sheet
   على الموبايل (ينزلق من تحت، أسهل باليد الوحدة)، ومنتصف الشاشة على
   الديسكتوب. */
.form-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 27, 0.5);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 16px;
}
.form-dialog-overlay.open { display: flex; animation: overlayFadeIn 0.18s ease; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
.form-dialog {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-pop);
    animation: dialogIn 0.25s var(--ease-out);
}
@keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.form-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.form-dialog-head h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.form-dialog-close { background: var(--bg-subtle); border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
.form-dialog-close:hover { background: var(--danger-light); color: var(--danger); }
.form-dialog-body { padding: 20px; overflow-y: auto; }
.form-dialog-foot { padding: 14px 20px; border-top: 1px solid var(--border-light); display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 640px) {
    .form-dialog-overlay { align-items: flex-end; padding: 0; }
    .form-dialog { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: sheetIn 0.28s var(--ease-out); }
    @keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ---- حقول الإدخال (بنفس درس زمام 1.7.1: لازم لون نص صريح دايماً) ---- */
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 44px;
    background: var(--bg-card);
    color: var(--text-main);
}
.form-input::placeholder { color: var(--text-muted); opacity: 1; }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-main);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-card) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---- هيكل لوحة الإدارة: Sidebar (ديسكتوب) + Topbar + Bottom-nav (موبايل) ----
   نفس تخطيط سُقيا الأصلي (Sidebar ثابت + Topbar علوي)، لكن بألوان
   ومتغيرات زمام. #admin-shell موجود في كل صفحة إدارة، وتُملأ محتوياته
   من renderAdminShell() في js/shared.js. */
#admin-shell { display: contents; }

.sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-card);
    border-inline-end: 1px solid var(--border);
    padding: 20px 14px;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.25s var(--ease-out), background 0.25s ease;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; border-bottom: 1px solid var(--border-light); margin-bottom: 12px; }
.sb-brand-text h2 { font-size: 1.05rem; margin: 0; }
.sb-brand-text span { font-size: 0.7rem; color: var(--text-muted); }
.sb-version { color: var(--clay); font-style: normal; }
.sb-section { font-size: 0.68rem; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; color: var(--text-main); margin-bottom: 2px; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
/* ---- شارة أيقونة السايد بار الملوَّنة ----
   كل قسم بلون مميَّز ودلالي خاص بيه (تواصل=أزرق، مياه=تركواز/طيني،
   منشآت=بني/أزرق عميق، عام=بنفسجي/كهرماني، إدارة=أخضر) — بدل الأيقونة
   الرمادية الموحَّدة، عشان القائمة تُقرأ بصرياً من أول نظرة. */
.nav-item-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-light); color: var(--accent-color); transition: var(--transition); }
.nav-item-icon svg { width: 16px; height: 16px; }
.nav-item.active .nav-item-icon { background: rgba(255,255,255,0.22); color: #fff; }
.nav-item:hover { background: var(--nile-surface); transform: translateX(-2px); }
.nav-item.active { background: var(--nile-dark); color: #fff; }
.ni-dashboard { --accent-color: var(--nile-dark); --accent-light: var(--nile-surface); }
.ni-tickets { --accent-color: var(--info); --accent-light: var(--info-light); }
.ni-masaqi { --accent-color: var(--nile-light); --accent-light: var(--nile-surface); }
.ni-canals { --accent-color: var(--clay); --accent-light: var(--clay-light); }
.ni-drains { --accent-color: #3d7a8c; --accent-light: #e9f3f5; }
.ni-members { --accent-color: var(--gold); --accent-light: var(--clay-light); }
.ni-bridges { --accent-color: #8a5a3c; --accent-light: #f5ede6; }
.ni-wells { --accent-color: #2c6e8f; --accent-light: #e7f1f5; }
.ni-map { --accent-color: #6b4c9a; --accent-light: #f1ecf7; }
.ni-news { --accent-color: var(--warning); --accent-light: var(--warning-light); }
.ni-settings { --accent-color: var(--success); --accent-light: var(--success-light); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--topbar-h);
    background: var(--surface-translucent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    margin-inline-start: var(--sidebar-w);
}
.tb-user { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.tb-actions { display: flex; gap: 8px; }
.tb-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
.tb-btn:hover { background: var(--nile-surface); border-color: var(--nile-light); }
.tb-btn:active { transform: scale(0.92); }

.mobile-bottom-nav { display: none; }

/* المحتوى الرئيسي لكل صفحة (خارج #admin-shell) يبدأ بعد الشريط الجانبي */
.admin-main { margin-inline-start: var(--sidebar-w); padding: 24px; min-height: calc(100vh - var(--topbar-h)); }

@media (max-width: 900px) {
    .sidebar { display: none; }
    .topbar, .admin-main { margin-inline-start: 0; }
    .admin-main { padding-bottom: calc(24px + var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; inset-inline: 0;
        height: var(--bottom-nav-h);
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 90;
        overflow-x: auto;
    }
    .mbn-item { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); padding: 6px 10px 0; border: none; background: none; cursor: pointer; }
    .mbn-item-icon { font-size: 1.05rem; color: var(--accent-color, currentColor); transition: transform 0.2s ease; }
    .mbn-item-icon svg { width: 19px; height: 19px; display: block; }
    .mbn-item.active { color: var(--nile-dark); }
    .mbn-item.active .mbn-item-icon { transform: translateY(-2px) scale(1.08); }
}

/* ============ لوحة "المزيد" — bottom sheet لعناصر التنقّل الإضافية على الموبايل ============
   الشريط السفلي بيسع 4 عناصر أساسية بس + زرار "المزيد" خامس، بدل
   الدُرج الجانبي (اللي كان بيفضل ظاهراً لحظة التنقّل بين الصفحات —
   كل صفحة بتحمّل HTML/CSS من الصفر، وشكله الافتراضي قبل ما CSS
   الموبايل يتطبَّق بالكامل كان بيبان مفتوح لحظياً، وده بالظبط اللي كان
   بيتحسّ إنه "لاج" وقفل مش شغال). لوحة "المزيد" بناخد نفس شكل
   bottom-sheet المستخدَم أصلاً في ديالوجات الفورم، فمفيش نمط بصري
   جديد غريب عن التطبيق. */
.more-sheet-overlay {
    position: fixed; inset: 0; background: rgba(15, 30, 27, 0.5);
    backdrop-filter: blur(2px); display: none; align-items: flex-end;
    justify-content: center; z-index: 300;
}
.more-sheet-overlay.open { display: flex; animation: overlayFadeIn 0.18s ease; }
.more-sheet {
    background: var(--bg-card); width: 100%; max-height: 78vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-pop); animation: sheetIn 0.28s var(--ease-out);
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
}
.more-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 14px; }
.more-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.more-sheet-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text-main); font-size: 0.72rem; font-weight: 700; text-align: center; }
.more-sheet-item .nav-item-icon { width: 46px; height: 46px; border-radius: 14px; }
.more-sheet-item .nav-item-icon svg { width: 22px; height: 22px; }

/* ============ جرس الإشعارات (منقول من زمام) ============ */
.notif-bell-wrap { position: relative; display: none; flex-shrink: 0; }
.notif-bell-wrap.show { display: block; }
.bell-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;
    position: relative; transition: var(--transition); box-shadow: var(--shadow-1);
}
.bell-btn:hover { background: var(--nile-surface); }
.bell-btn:active { transform: scale(0.92); }
.notif-badge {
    position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 10px; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 800;
    align-items: center; justify-content: center; border: 2px solid var(--bg-body);
}
.notif-panel {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; width: min(340px, 88vw);
    max-height: 70vh; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-pop); z-index: 200; overflow: hidden; flex-direction: column;
}
.notif-panel.open { display: flex; }
.notif-panel-head {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    font-weight: 800; font-size: 0.85rem; color: var(--heading); border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.notif-clear-all-btn { background: none; border: none; color: var(--danger); font-size: 0.72rem; font-weight: 700; cursor: pointer; padding: 4px 6px; }
.notif-panel-list { overflow-y: auto; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
.notif-item:last-child { border-bottom: none; }
.notif-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-text { font-size: 0.8rem; font-weight: 700; color: var(--text-main); line-height: 1.4; }
.notif-item-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; }
.notif-item-dismiss { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.notif-item-dismiss:hover { color: var(--danger); }

.login-card-animated { animation: loginCardIn 0.4s var(--ease-out); }
@keyframes loginCardIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
#login-submit { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
#login-submit:hover { background: var(--nile-light) !important; box-shadow: 0 4px 14px rgba(15,76,70,0.28); }
#login-submit:active { transform: scale(0.98); }