/* ===== نظام إدارة مواقف السيارات - أنماط مخصصة ===== */

:root {
    --tajawal: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* مطابقة ألوان الشعار الأزرق (#00A6F9 / #0093F7 / #0086F4) */
    --brand: #0057b8;
    --brand-2: #0072e3;
}

body {
    font-family: var(--tajawal);
    background: #eaeef3;
    font-weight: 400;
}

/* الشريط العلوي — يتدرج بنفس ألوان الشعار */
.app-navbar {
    background: linear-gradient(90deg, #0072e3 0%, #0057b8 100%);
}
.app-navbar .navbar-brand {
    color: #fff !important;
    font-weight: 800;
    font-size: 1.15rem;
}

/* الشعار */
.brand-logo {
    width: 36px;
    height: 36px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}
.app-navbar .navbar-brand:hover .brand-logo {
    transform: scale(1.08);
}

/* نص الشريط الثانوي — أبيض كامل لضمان التباين على الخلفية الزرقاء */
.nav-meta {
    color: #fff;
}
.nav-meta .badge {
    font-weight: 500;
}

/* التبويبات */
.app-tabs .nav-link {
    font-weight: 700;
    color: #495057;
    padding: .65rem 1.4rem;
    border-radius: .5rem .5rem 0 0;
}
.app-tabs .nav-link.active {
    color: var(--brand);
    background: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    box-shadow: 0 -3px 0 var(--brand) inset;
}

/* بطاقات الإحصائيات */
.stat-card {
    border-radius: .85rem;
}
.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex: 0 0 auto;
}
.stat-value {
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--brand);
    font-family: var(--tajawal);
}
.stat-label {
    font-size: .8rem;
    color: #6c757d;
}

/* الجداول */
.table {
    --bs-table-hover-bg: #f7fafd;
    font-size: .92rem;
}
.table thead th {
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
    border-bottom-width: 1px !important;
}
.table td, .table th {
    vertical-align: middle;
    padding: .6rem .75rem;
}

/* أرقام ونصوص لاتينية/رقمية */
.font-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: .02em;
    direction: ltr;
    display: inline-block;
}

/* رقم الموقف */
.spot-num {
    display: inline-block;
    min-width: 46px;
    text-align: center;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: #eef3f8;
    border: 1px dashed var(--brand-2);
    color: var(--brand);
    font-weight: 800;
    font-size: .95rem;
    direction: ltr;
}

/* شارة كبار السن (بنفسجي) */
.text-bg-purple {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* شارة ذوي الإعاقة (أزرق الهوية) */
.text-bg-brand {
    background-color: var(--brand) !important;
    color: #fff !important;
}

/* النماذج */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 .2rem rgba(36, 85, 127, .15);
}
.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-2);
    border-color: var(--brand-2);
}

/* الأزرار داخل الجداول */
.table .btn-sm {
    padding: .2rem .45rem;
    margin: 0 .1rem;
}

/* أشرطة التبويب المتجاوبة على الشاشات الصغيرة */
@media (max-width: 576px) {
    .app-tabs .nav-link { padding: .5rem .8rem; font-size: .88rem; }
    .stat-value { font-size: 1.15rem; }
}

/* التنبيهات Toast — نص أبيض لضمان التباين على الخلفية الملوّنة */
.toast {
    color: #fff;
}
.toast .btn-close {
    filter: brightness(0) invert(1);
}

/* ==================== حركات وأنيميشن ==================== */
/* كل الحركات تُعطَّل لمن يفضّل تقليل الحركة (إتاحة وصول) */
@media (prefers-reduced-motion: no-preference) {

    /* دخول الشريط العلوي من الأعلى */
    .app-navbar {
        animation: nav-down .45s ease-out both;
    }
    @keyframes nav-down {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* بطاقات الإحصائيات تدخل تباعاً */
    #stats-row .stat-card {
        animation: fade-up .45s ease-out both;
    }
    #stats-row .col:nth-child(1) .stat-card { animation-delay: .05s; }
    #stats-row .col:nth-child(2) .stat-card { animation-delay: .12s; }
    #stats-row .col:nth-child(3) .stat-card { animation-delay: .19s; }
    #stats-row .col:nth-child(4) .stat-card { animation-delay: .26s; }

    /* محتوى التبويبات يدخل عند التبديل */
    .tab-content  { animation: fade-up .35s ease-out both; }
    .tab-pane.active { animation: fade-up .3s ease-out both; }

    @keyframes fade-up {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* صفوف الجداول تظهر بنعومة عند التحميل أو إعادة الرسم */
    #persons-table tbody tr,
    #spots-table tbody tr {
        animation: row-in .28s ease-out both;
    }
    @keyframes row-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* الشارات تظهر بقفزة خفيفة */
    .badge { animation: badge-pop .25s ease-out both; }
    @keyframes badge-pop {
        from { opacity: 0; transform: scale(.85); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* رفع ناعم للبطاقات عند التمرير */
    .card {
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 22px rgba(13, 44, 84, .10) !important;
    }

    /* الأزرار — ضغطة خفيفة */
    .btn {
        transition: transform .15s ease;
    }
    .btn:active { transform: scale(.96); }

    /* النوافذ المنبثقة — تكبير خفيف عند الظهور (قاعدة مستقلة عن Bootstrap) */
    .modal.show .modal-dialog { animation: modal-in .22s ease-out both; }
    @keyframes modal-in {
        from { opacity: 0; transform: scale(.96) translateY(6px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* التنبيهات Toast — تنزلق من الأعلى */
    .toast.show { animation: toast-in .25s ease-out both; }
    @keyframes toast-in {
        from { opacity: 0; transform: translateY(-14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* الشعار — دوران خفيف يضاف إلى التكبير الحالي */
    .app-navbar .navbar-brand:hover .brand-logo {
        transform: scale(1.08) rotate(-8deg);
    }
}