/* هوية Olspark — أبيض / أسود / أحمر — تصميم احترافي متجاوب */
:root {
    --brand-red: #c8202a;
    --brand-red-dark: #a3171f;
    --brand-black: #15171c;
    --brand-black-2: #20242c;
    --sidebar-w: 250px;
}

/* منع السكرول الأفقي على الـ html (مش body — عشان body ما يتحوّلش لـ scroll-container ويكسر السكرول الرأسي على الموبايل) */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { background: #eef1f5; color: #23272e; }
/* أي محتوى عريض (جداول/صور) ما يكسرش عرض الشاشة */
img, table { max-width: 100%; }

/* ====== الأزرار والألوان ====== */
.btn-primary { background-color: var(--brand-red); border-color: var(--brand-red); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--brand-red-dark) !important; border-color: var(--brand-red-dark) !important; }
.btn-outline-primary { color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline-primary:hover { background-color: var(--brand-red); border-color: var(--brand-red); color:#fff; }
.btn-success { background-color: var(--brand-red); border-color: var(--brand-red); }
.btn-success:hover { background-color: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.text-primary { color: var(--brand-red) !important; }
.bg-primary, .badge.bg-primary { background-color: var(--brand-red) !important; }
a { color: var(--brand-red-dark); }
.card.border-primary { border-color: var(--brand-red) !important; }
.page-link { color: var(--brand-red-dark); }
.page-item.active .page-link { background-color: var(--brand-red); border-color: var(--brand-red); }

/* ====== الهيكل: shell + sidebar + content ====== */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar { background: var(--brand-black) !important; color:#cfd3da; width: var(--sidebar-w); flex-shrink: 0; }
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto;
               transform: none !important; visibility: visible !important; }
    .sidebar .offcanvas-body { height: 100vh; }
}
.sidebar .brand { padding: 1.1rem .6rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .brand img { max-width: 155px; height: auto; }
.sidebar .nav-links { padding: .6rem .5rem; }
.sidebar a { color: #cfd3da; text-decoration: none; display: flex; align-items: center; gap: .6rem;
             padding: .62rem .85rem; border-radius: .55rem; margin-bottom: 2px; font-size: .95rem; transition: all .15s; }
.sidebar a:hover { background: var(--brand-black-2); color: #fff; }
.sidebar a.active { background: var(--brand-red); color: #fff; box-shadow: 0 2px 8px rgba(200,32,42,.35); }
.sidebar a .nav-ic { font-size: .5rem; opacity: .6; }
.sidebar a.active .nav-ic { opacity: 1; }
.offcanvas.offcanvas-lg, .sidebar.offcanvas-lg { --bs-offcanvas-width: var(--sidebar-w); background: var(--brand-black); }

.content { flex: 1 1 auto; padding: 1.5rem; min-width: 0; }
@media (max-width: 991.98px) {
    /* على الموبايل: نلغي الـ flex عشان الصفحة تسكرول طبيعي مع الـ document،
       والشريط الجانبي drawer منزلق فوق المحتوى (مش جزء من التخطيط) */
    .app-shell { display: block; min-height: 0; }
    .content { padding: 1rem .9rem; width: 100%; }
    .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; height: 100%;
               width: var(--sidebar-w); max-width: 85vw; z-index: 1046; overflow-y: auto;
               visibility: hidden; transform: translateX(-100%); transition: transform .3s ease; }
    .sidebar.show, .sidebar.showing { visibility: visible !important; transform: translateX(0) !important; }
    .sidebar .offcanvas-body { height: auto; min-height: 100%; }
}

/* ====== شريط علوي (موبايل / المستأجر / الدخول) ====== */
.brand-nav { background: var(--brand-black) !important; }
.brand-nav .navbar-brand img { height: 30px; }

/* ====== لمسات احترافية ====== */
.card { border: none; border-radius: .8rem; box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
.card .card-body { padding: 1.1rem 1.25rem; }
h3, h4 { font-weight: 700; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead.table-light th { font-size: .82rem; text-transform: none; color:#5b6472; font-weight: 600; }
.btn { border-radius: .5rem; }
.btn-sm { border-radius: .45rem; }
.badge { font-weight: 600; }

/* أزرار الإجراءات في الجداول تتلف بشكل مرتب على الموبايل */
@media (max-width: 991.98px) {
    td .btn, td form { margin-bottom: 2px; }
    .display-6 { font-size: 1.8rem; }
    /* رؤوس الصفحات (عنوان + زر) تتلف بدل ما تتداخل */
    .content .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
}