/* ============================================================
   نقابة المختبرات الطبية — نظام التصميم الموحد
   مظهر احترافي داكن مع لمسات زرقاء/فيروزية
   ============================================================ */

:root {
    --sy-bg:            #0f1620;
    --sy-bg-soft:       #151f2c;
    --sy-card:          #18222f;
    --sy-card-header:   #1c2836;
    --sy-border:        #24313f;
    --sy-text:          #e8edf3;
    --sy-text-muted:    #93a3b5;
    --sy-primary:       #2d9cdb;
    --sy-primary-hover: #56ccf2;
    --sy-success:       #27ae60;
    --sy-danger:        #eb5757;
    --sy-warning:       #f2c94c;
    --sy-info:          #56ccf2;
    --sy-radius:        14px;
    --sy-shadow:        0 10px 30px rgba(0, 0, 0, .35);
    --sy-shadow-sm:     0 4px 14px rgba(0, 0, 0, .25);
    --sy-gradient:      linear-gradient(135deg, #2d9cdb 0%, #56ccf2 100%);
    --sy-navbar:        linear-gradient(90deg, #101a26 0%, #17263a 100%);
}

body {
    font-family: 'Cairo', sans-serif !important;
    background-color: var(--sy-bg) !important;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(45, 156, 219, .10) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(86, 204, 242, .07) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--sy-text) !important;
    min-height: 100vh;
}

/* ---------- الشريط العلوي ---------- */
.navbar {
    background: var(--sy-navbar) !important;
    border-bottom: 1px solid var(--sy-border);
    box-shadow: var(--sy-shadow-sm);
    backdrop-filter: blur(6px);
}
.navbar .nav-link {
    color: var(--sy-text-muted) !important;
    font-weight: 600;
    border-radius: 8px;
    padding: .45rem .8rem !important;
    margin: 0 .1rem;
    transition: all .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff !important;
    background: rgba(45, 156, 219, .18);
}
.navbar-brand { font-weight: 700; }

/* ---------- البطاقات ---------- */
.card {
    background-color: var(--sy-card) !important;
    border: 1px solid var(--sy-border) !important;
    border-radius: var(--sy-radius) !important;
    box-shadow: var(--sy-shadow-sm);
    color: var(--sy-text);
}
.card-header {
    background-color: var(--sy-card-header) !important;
    border-bottom: 1px solid var(--sy-border) !important;
    border-radius: var(--sy-radius) var(--sy-radius) 0 0 !important;
    font-weight: 700;
}
.card-footer { border-top: 1px solid var(--sy-border) !important; }

.member-card:hover,
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--sy-shadow) !important;
    border-color: rgba(45, 156, 219, .55) !important;
}

/* ---------- النماذج والأزرار ---------- */
.form-control, .form-select {
    background-color: var(--sy-bg-soft) !important;
    border: 1px solid var(--sy-border) !important;
    color: var(--sy-text) !important;
    border-radius: 10px !important;
    padding: .6rem .9rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sy-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(45, 156, 219, .25) !important;
}
.form-control::placeholder { color: var(--sy-text-muted); }

.btn { border-radius: 10px; font-weight: 700; transition: all .2s ease; }
.btn-primary {
    background: var(--sy-gradient) !important;
    border: none !important;
    color: #08131d !important;
}
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 4px 16px rgba(45, 156, 219, .4); }

/* ---------- الجداول ---------- */
.table { --bs-table-bg: transparent; color: var(--sy-text); }
.table > :not(caption) > * > * { border-color: var(--sy-border); }
.table thead th {
    color: var(--sy-primary-hover);
    font-weight: 700;
    border-bottom: 2px solid var(--sy-border) !important;
}
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(45, 156, 219, .08); }

/* ---------- التنبيهات ---------- */
.alert { border-radius: var(--sy-radius); border-width: 1px; }
.alert-warning { background: rgba(242, 201, 76, .10) !important; }
.alert-info    { background: rgba(86, 204, 242, .10) !important; }
.alert-success { background: rgba(39, 174, 96, .10) !important; }
.alert-danger  { background: rgba(235, 87, 87, .12) !important; }

/* ---------- الشارات ---------- */
.badge { border-radius: 20px; padding: .4em .8em; font-weight: 700; }

/* ---------- ترقيم الصفحات ---------- */
.pagination .page-link {
    background-color: var(--sy-card) !important;
    border-color: var(--sy-border) !important;
    color: var(--sy-text) !important;
    border-radius: 8px !important;
    margin: 0 3px;
}
.pagination .page-item.active .page-link {
    background: var(--sy-gradient) !important;
    border-color: transparent !important;
    color: #08131d !important;
    font-weight: 700;
}

/* ============================================================
   صفحة تسجيل الدخول
   ============================================================ */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}
.login-card {
    background: var(--sy-card) !important;
    width: 100%;
    max-width: 430px;
    border-radius: 20px !important;
    overflow: hidden;
}
.login-card .brand-header {
    background: var(--sy-gradient);
    padding: 2rem 1rem 3.5rem;
    text-align: center;
    margin-bottom: -2.5rem;
    position: relative;
}
.login-card .brand-header img {
    height: 84px;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: var(--sy-shadow);
}
.login-card .card-body { padding: 3rem 2rem 1.5rem; }
.login-card .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--sy-border) !important;
    color: var(--sy-text-muted);
}
.login-card a { color: var(--sy-primary-hover); text-decoration: none; font-weight: 600; }
.login-card a:hover { text-decoration: underline; }
.form-check-input:checked { background-color: var(--sy-primary); border-color: var(--sy-primary); }

/* ---------- نصوص مساعدة ---------- */
.text-label { font-weight: 700; color: var(--sy-text-muted); }
.text-muted { color: var(--sy-text-muted) !important; }
hr { border-color: var(--sy-border); opacity: 1; }

/* ---------- حركات ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp .45s ease both; }
.member-card, .card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* ---------- شاشات صغيرة ---------- */
@media (max-width: 576px) {
    .login-card .card-body { padding: 2.5rem 1.25rem 1rem; }
    .member-card { margin-bottom: 0; }
}