/* ===========================
   Bayie-CRM - Global Styles
   =========================== */

/* ألوان وثيم عام */
:root {
    --brand: #0d6efd;
    --surface: #ffffff;
    --body: #f5f7fb;
    --text: #1f2328;
    --muted: #6c757d;
    --border: rgba(0, 0, 0, .12);
    --input-bg: #fff;
    --input-text: #1f2328;
    --input-placeholder: #6c757d;
    /* تخطيط */
    --sidebar-width: 280px; /* عرض الشريط الجانبي على الكبير */
    --navbar-height: 56px; /* ارتفاع شريط التنقل (عدّل إذا تغيّر) */
}

/* ثيم داكن (يُفعّل بإضافة class="dark" على html) */
html.dark {
    --brand: #66a3ff;
    --surface: #1e2329;
    --body: #0f1216;
    --text: #e8edf2;
    --muted: #9aa4b2;
    --border: rgba(255, 255, 255, .15);
    --input-bg: #20262d;
    --input-text: #e8edf2;
    --input-placeholder: #9aa4b2;
}

/* الأساسيات */
html, body {
    height: 100%;
}

body {
    font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--body);
    color: var(--text);
    direction: rtl;
    text-align: right;
}

a {
    text-decoration: none;
}

.bg-surface {
    background: var(--surface) !important;
}

.bg-body {
    background: var(--body) !important;
}

/* عناصر أساسية */
.navbar, .offcanvas, .card, .list-group-item, .dropdown-menu, .table, .modal-content {
    background: var(--surface);
    color: var(--text);
}

.list-group-item {
    border: 0;
    border-bottom: 1px solid var(--border);
}

.card {
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 1rem;
    transition: transform .2s ease;
}

    .card:hover {
        transform: translateY(-2px);
    }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-outline-secondary {
    color: var(--text);
    border-color: var(--border);
}

.btn-outline-danger {
    border-color: var(--border);
}

.table {
    border-color: var(--border);
}

    .table thead th {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 2;
    }

    .table > :not(caption) > * > * {
        border-color: var(--border);
    }

/* شارات ناعمة */
.badge-soft {
    background: rgba(13,110,253,.12);
    color: var(--brand);
}

.badge-success-soft {
    background: rgba(25,135,84,.12);
    color: #198754;
}

.badge-warning-soft {
    background: rgba(255,193,7,.15);
    color: #b37b00;
}

.badge-danger-soft {
    background: rgba(220,53,69,.12);
    color: #dc3545;
}

/* حقول وإدخالات */
.form-control, .form-select, .form-check-input, .input-group-text, .btn {
    border-radius: .75rem;
}

.form-control, .form-select, .input-group-text {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--border);
}

    .form-control::placeholder {
        color: var(--input-placeholder);
    }

    .form-control:focus, .form-select:focus {
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
        border-color: var(--brand);
    }

.modal-content, .dropdown-menu {
    border: 1px solid var(--border);
}

.list-group-item-action:hover {
    background: rgba(13,110,253,.06);
}

/* ===========================
   جداول مرنة (stack إلى كروت)
   =========================== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* إجبار الجدول يكون أعرض من الحاوية لإظهار سكرول عند الحاجة */
.table-fixed-wide {
    min-width: 1200px;
}

/* قصّ النصوص الطويلة */
.truncate,
.table td.truncate, .table th.truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* تحت 768px: اخفِ الهيدر وحوّل الصفوف إلى "كروت" */
@media (max-width: 768px) {
    .table-stack-sm thead {
        display: none;
    }

    .table-stack-sm tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: .75rem;
        padding: .5rem .75rem;
        background: var(--surface);
    }

    .table-stack-sm tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border: 0;
        padding: .35rem .25rem;
        white-space: normal; /* أسماء وعناوين طويلة تلف */
        word-break: break-word; /* بريد/هاتف طويل ينكسر */
    }

        .table-stack-sm tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            color: var(--muted);
            margin-left: .75rem; /* RTL */
        }
}

/* ===========================
   الشريط الجانبي (Offcanvas)
   =========================== */

/* عرض الـoffcanvas الافتراضي (Bootstrap 5) */
#sidebar {
    --bs-offcanvas-width: var(--sidebar-width);
}

/* ≥ LG: ثبّت الشريط الجانبي بجانب المحتوى تحت النافبار */
@media (min-width: 992px) {
    #sidebar.offcanvas {
        position: fixed;
        top: var(--navbar-height);
        left: 0; /* لو تريده يمين: استبدل بـ right: 0; */
        width: var(--sidebar-width);
        height: calc(100vh - var(--navbar-height));
        transform: none !important;
        visibility: visible !important;
        display: block !important;
        z-index: 990; /* أقل من النافبار (عادة 1000) ليبقى تحته */
        border-inline-end: 1px solid var(--border);
        background: var(--surface);
    }

    /* مساحة تعويض للمحتوى بجانب الشريط */
    .sidebar-spacer {
        width: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width);
    }

    /* لا نريد تعتيم خلفية (Backdrop) على الكبير */
    .offcanvas-backdrop {
        display: none !important;
    }
}

/* تخطيط الصفحة: اجعل المحتوى يمتد تحت النافبار */
/* امتداد ارتفاع المحتوى تحت النافبار — مقيّد على حاوية التطبيق فقط */
.app-container {
    min-height: calc(100vh - var(--navbar-height));
}

/* تأكد أن صف التخطيط يتمدد طوليًا */
.row.flex-nowrap {
    align-items: stretch;
}

@media (max-width: 768px) {
    .table-stack-sm tbody tr {
        padding: .75rem 1rem;
    }

    .table-stack-sm tbody td {
        align-items: center;
        gap: .75rem;
    }
}