/*
|--------------------------------------------------------------------------
| app/web/css/app.css
|--------------------------------------------------------------------------
| تنسيقات الواجهة القديمة فقط.
|
| مهم:
| تم حصر القواعد العامة خارج body.hzn-mobile-layout حتى لا تتعارض
| مع التخطيط الموحد الجديد وبطاقاته وأزراره وحاوياته.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| إعادة الضبط العامة الآمنة
|--------------------------------------------------------------------------
*/

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/*
|--------------------------------------------------------------------------
| الواجهة القديمة
|--------------------------------------------------------------------------
| جميع القواعد التالية تعمل فقط عندما لا يكون التخطيط الجديد مستخدمًا.
|--------------------------------------------------------------------------
*/

body:not(.hzn-mobile-layout) {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #1e1e2e;
    color: #ffffff;
    direction: rtl;
}

body:not(.hzn-mobile-layout) .container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 20px;
}

body:not(.hzn-mobile-layout) .card {
    margin: 15px 0;
    padding: 20px;
    border: 0;
    border-radius: 16px;
    background-color: #2a2a3a;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
}

body:not(.hzn-mobile-layout) .btn {
    margin-inline: 5px;
    padding: 10px 25px;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

body:not(.hzn-mobile-layout) .btn-primary {
    background-color: #00b4d8;
    color: #ffffff;
}

body:not(.hzn-mobile-layout) .btn-success {
    background-color: #4caf50;
    color: #ffffff;
}

body:not(.hzn-mobile-layout) .btn-danger {
    background-color: #f44336;
    color: #ffffff;
}

body:not(.hzn-mobile-layout) .table {
    width: 100%;
    border-collapse: collapse;
    color: inherit;
}

body:not(.hzn-mobile-layout) .table th,
body:not(.hzn-mobile-layout) .table td {
    padding: 12px;
    border-bottom: 1px solid #444444;
    text-align: right;
}

body:not(.hzn-mobile-layout) .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #444444;
    border-radius: 8px;
    background-color: #2a2a3a;
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| توسيط محتوى الصفحة القديمة
|--------------------------------------------------------------------------
*/

body:not(.hzn-mobile-layout) .content {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.hzn-mobile-layout) .content .card {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

body:not(.hzn-mobile-layout) .card-body {
    padding: 40px;
}

body:not(.hzn-mobile-layout) .display-4 {
    margin-bottom: 20px;
    font-size: 2.5rem;
}

body:not(.hzn-mobile-layout) .lead {
    margin-bottom: 20px;
    color: #cccccc;
    font-size: 1.2rem;
}

body:not(.hzn-mobile-layout) .mt-4 {
    margin-top: 20px;
}

body:not(.hzn-mobile-layout) .mx-2 {
    margin-inline: 8px;
}

body:not(.hzn-mobile-layout) .list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.hzn-mobile-layout) .list-unstyled li {
    padding-block: 5px;
}

body:not(.hzn-mobile-layout) .text-center {
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| التخطيط الموحد الجديد
|--------------------------------------------------------------------------
| نترك تصميم البطاقات والحاويات والأزرار لملفات:
| - app-web-overrides.css
| - app-mobile-layout.css
| - ملفات CSS الخاصة بكل View
|--------------------------------------------------------------------------
*/

body.hzn-mobile-layout {
    margin: 0;
    min-width: 0;
    overflow-x: hidden;
    direction: rtl;
}

body.hzn-mobile-layout .hzn-mobile-content,
body.hzn-mobile-layout .hzn-app-page,
body.hzn-mobile-layout main {
    min-width: 0;
    max-width: 100%;
}

/*
 * منع أي محتوى طويل من توسيع الصفحة أفقيًا.
 */
body.hzn-mobile-layout img,
body.hzn-mobile-layout video,
body.hzn-mobile-layout canvas,
body.hzn-mobile-layout svg {
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| استجابة الواجهة القديمة
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    body:not(.hzn-mobile-layout) .container {
        padding: 14px;
    }

    body:not(.hzn-mobile-layout) .card {
        padding: 16px;
    }

    body:not(.hzn-mobile-layout) .card-body {
        padding: 24px 18px;
    }

    body:not(.hzn-mobile-layout) .display-4 {
        font-size: 2rem;
    }
}