/*
 * ثيم التطبيق: كل الألوان والمقاسات هنا كمتغيرات، ولا ألوان مباشرة في الصفحات.
 */

:root {
    --app-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;

    --app-primary: #1f5f8b;
    --app-primary-rgb: 31, 95, 139;
    --app-primary-hover: #184c70;
    --app-primary-soft: #e6eff6;

    --app-bg: #f3f5f8;
    --app-surface: #ffffff;
    --app-text: #1d2733;
    --app-muted: #677483;
    --app-border: #dde2e8;
    --app-month-alt: #edf2f7;

    --app-success: #1e7d4f;
    --app-danger: #b3261e;
    --app-warning: #9a6700;

    --app-sidebar-bg: #15293b;
    --app-sidebar-text: #b9c7d4;
    --app-sidebar-muted: #7d8fa1;
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --app-sidebar-active-bg: rgba(255, 255, 255, 0.12);
    --app-sidebar-active-text: #ffffff;
    --app-sidebar-width: 250px;

    --app-topbar-height: 56px;
    --app-radius: 10px;

    /* ربط متغيرات Bootstrap بالثيم */
    --bs-body-font-family: var(--app-font);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-secondary-color: var(--app-muted);
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-border-radius: var(--app-radius);
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font);
}

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-primary-rgb), 0.15);
}

.card {
    background: var(--app-surface);
    border-color: var(--app-border);
    border-radius: var(--app-radius);
}

.form-card {
    max-width: 560px;
}

.text-muted-app {
    color: var(--app-muted) !important;
}

.num {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* خلايا الأرقام في الجداول: بداية الصف العربي (نهاية الاتجاه ltr) لتحاذي عنوان العمود وتصطف الكسور */
.table-app td.num {
    text-align: end;
}

/* ===== الشريط العلوي ===== */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--app-topbar-height);
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    padding-inline: 1rem;
}

.app-brand {
    color: var(--app-text);
    font-weight: 600;
    text-decoration: none;
}

.app-brand:hover {
    color: var(--app-primary);
}

/* ===== الهيكل ===== */
.app-shell {
    display: flex;
    min-height: calc(100vh - var(--app-topbar-height));
}

.app-main {
    flex: 1;
    min-width: 0;
    position: relative;
}

.page-title {
    font-weight: 600;
}

/* ===== القائمة الجانبية ===== */
.app-sidebar {
    --bs-offcanvas-width: var(--app-sidebar-width);
    --bs-offcanvas-bg: var(--app-sidebar-bg);
    --bs-offcanvas-color: var(--app-sidebar-text);
    background: var(--app-sidebar-bg);
    color: var(--app-sidebar-text);
}

@media (min-width: 992px) {
    /* Bootstrap يجعل خلفية offcanvas-lg شفافة على الشاشات الكبيرة */
    .app-sidebar.offcanvas-lg {
        background-color: var(--app-sidebar-bg) !important;
    }

    .app-sidebar {
        width: var(--app-sidebar-width);
        flex-shrink: 0;
        position: sticky;
        top: var(--app-topbar-height);
        height: calc(100vh - var(--app-topbar-height));
        overflow-y: auto;
    }
}

/* على الجوال: القائمة بارتفاع الشاشة، والروابط تتمرر داخلها إذا طالت */
@media (max-width: 991.98px) {
    .app-sidebar .app-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

.app-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--app-sidebar-hover-bg);
}

.app-sidebar .btn-close {
    filter: invert(1);
}

.app-nav {
    padding: 0.75rem;
    width: 100%;
}

.app-nav-section {
    color: var(--app-sidebar-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1rem 0.75rem 0.4rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--app-sidebar-text);
    text-decoration: none;
    margin-bottom: 2px;
}

.app-nav-link:hover {
    background: var(--app-sidebar-hover-bg);
    color: var(--app-sidebar-active-text);
}

.app-nav-link.active {
    background: var(--app-sidebar-active-bg);
    color: var(--app-sidebar-active-text);
    font-weight: 500;
}

.app-nav-link .bi {
    font-size: 1.05rem;
}

/* ===== صفحات الدخول ===== */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.brand-mark {
    width: 52px;
    height: 52px;
    margin-inline: auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 1.5rem;
}

/* ===== الجداول ===== */
.table-app {
    --bs-table-bg: var(--app-surface);
    margin-bottom: 0;
}

/* تمييز الأشهر بالتناوب في الكشوفات: شهر فاتح وشهر أغمق قليلًا */
.table-app .row-month-alt {
    --bs-table-bg: var(--app-month-alt);
}

/* الخدمات: الفاتورة أحمر، المدفوع أخضر */
.util-billed,
.util-billed::placeholder {
    color: var(--app-danger);
}
.util-paid,
.util-paid::placeholder {
    color: var(--app-success);
}
.util-billed::placeholder,
.util-paid::placeholder {
    opacity: 0.45;
}

/* السطر المفتوح من نتائج البحث (رابط ينتهي بـ #tx-رقم) */
.table-app tr:target {
    --bs-table-bg: var(--app-primary-soft);
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
    scroll-margin-top: calc(var(--app-topbar-height) + 16px);
}

/* تمييز السطور بالتناوب (الفهرس): سطر فاتح وسطر أغمق، مع بقاء سطور العناوين والمجاميع والتنبيه على لونها */
.table-app.table-zebra > tbody > tr:nth-child(even):not(.table-light):not(.table-danger) {
    --bs-table-bg: var(--app-month-alt);
}

/* خط فاصل بين الأعمدة (الفهرس) لكثرة الأرقام */
.table-app.table-zebra > :not(caption) > tr > :not(:last-child) {
    border-inline-end: 1px solid var(--app-border);
}

.table-app th {
    color: var(--app-muted);
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}

.badge-soft-success {
    background: color-mix(in srgb, var(--app-success) 12%, transparent);
    color: var(--app-success);
}

.badge-soft-danger {
    background: color-mix(in srgb, var(--app-danger) 12%, transparent);
    color: var(--app-danger);
}

.badge-soft-warning {
    background: color-mix(in srgb, #b7791f 14%, transparent);
    color: #975a16;
}

.shift-grid input.form-control-sm {
    min-width: 110px;
}

.badge-soft-primary {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.audit-values {
    font-size: 0.8rem;
    color: var(--app-muted);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sql-preview {
    direction: ltr;
    text-align: start;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.8rem;
    white-space: pre-wrap;
    margin: 0.5rem 0 0;
}

/* صورة الفاتورة: تنبيه أثناء التصغير والرفع، والصورة في النافذة */
.receipt-busy {
    position: fixed;
    bottom: 1rem;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 1080;
    background: var(--app-sidebar-bg);
    color: var(--app-sidebar-active-text);
    border-radius: var(--app-radius);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.receipt-full {
    max-height: 75vh;
}

.receipt-thumb {
    max-width: 160px;
    max-height: 160px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
}

/* تمييز عمود الرصيد المتوفر: خلفية أزرق فاتح + border يساري + نص أخضر */
.highlight-balance {
    background-color: color-mix(in srgb, var(--app-primary) 8%, transparent);
    border-inline-start: 3px solid var(--app-primary);
    padding-inline-start: calc(var(--bs-table-padding-x) - 2px);
    color: var(--app-success) !important;
    font-weight: 600;
}

/* ألوان أعمدة جدول الحسابات */
.col-income,
.col-transfer-in {
    color: var(--app-success) !important;
}

.col-expense,
.col-transfer-out {
    color: var(--app-danger) !important;
}

/* مجموع المصاريف (أحمر بدل أخضر) */
.expense-total {
    color: var(--app-danger) !important;
    font-weight: 600;
}

/* الحاسبة السريعة: عمود خلايا يطفو أعلى الصفحة */
.quick-calc-toggle {
    cursor: pointer;
}

.quick-calc {
    margin: 0.25rem 0.5rem 0.75rem;
    background: var(--app-sidebar-hover-bg);
    border-radius: var(--app-radius);
    color: var(--app-sidebar-active-text);
}

.quick-calc-cell {
    border-radius: 0;
    margin-top: -1px;
    text-align: end;
}

.quick-calc-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 2px solid var(--app-sidebar-text);
    font-weight: 700;
}

/* استيراد كشف البنك */
.bi-paste {
    font-family: monospace;
    font-size: 0.8rem;
    direction: ltr;
}

.bi-table td {
    vertical-align: top;
}

.bi-orig {
    font-size: 0.72rem;
    color: var(--app-muted);
    direction: ltr;
    text-align: start;
    word-break: break-all;
}

.bi-table tr.bi-done > td:not(.bi-undo) {
    opacity: 0.45;
}