/* =========================================================
   AmFmPlus – Clean Layout CSS (LTR/RTL aware, Responsive)
   جایگزین کامل فایل فعلی
   ========================================================= */

/* ------------ Vars ------------ */
:root {
    --header-h: 56px;
    --sidebar-w: 260px;
    --sidebar-bg: #f8f9fa;
}

/* ------------ Base ------------ */
html {
    font-size: 14px;
    height: 100%;
}

@media (min-width:768px) {
    html {
        font-size: 16px;
    }
}

body {
    min-height: 100%;
    margin: 0;
    background: #f5f7fb;
    color: #111827;
}

/* Focus ring (Bootstrap harmony) */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #258cfb;
}

/* ------------ Layers (z-index) ------------ */
/* ترتیب: Dropdown(3000) > Offcanvas(1300) > Topbar(1200) > Sidebar(1020) > Main(1) */
.dropdown-menu {
    z-index: 3000;
}

.app-topbar {
    z-index: 1200;
}

.offcanvas {
    z-index: 1300;
}

.app-sidebar {
    z-index: 1020;
}

.app-main {
    z-index: 1;
    position: relative;
}

/* ------------ Topbar ------------ */
.app-topbar {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    overflow: visible; /* برای باز شدن منوها */
}

    /* نشان/نام‌های بلند در هدر */
    .app-topbar .badge {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ------------ Sidebar (desktop default: fixed) ------------ */
.app-sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-inline-start: 1px solid rgba(0,0,0,.08);
}

/* جای‌گذاری منطقی نسبت به جهت صفحه */
[dir="ltr"] .app-sidebar {
    left: auto;
    right: 0;
}

[dir="rtl"] .app-sidebar {
    left: 0;
    right: auto;
    border-inline-start: none;
    border-inline-end: 1px solid rgba(0,0,0,.08);
}

/* لینک‌های سایدبار */
.app-sidebar .nav-link {
    color: #4b5563;
    border-radius: .5rem;
    padding: .45rem .7rem;
    margin: .15rem .5rem;
}

    .app-sidebar .nav-link:hover {
        background: #f1f5f9;
        color: #0d6efd;
    }

    .app-sidebar .nav-link.active {
        background: #e9f2ff;
        color: #0b5ed7;
        font-weight: 600;
        box-shadow: inset 0 0 0 1px rgba(13,110,253,.15);
    }

/* ------------ Main ------------ */
.app-main {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    padding: .75rem;
}

/* رزرو فضای سایدبار در دسکتاپ */
@media (min-width:992px) {
    [dir="ltr"] .app-main {
        margin-right: var(--sidebar-w);
        margin-left: 0;
    }

    [dir="rtl"] .app-main {
        margin-left: var(--sidebar-w);
        margin-right: 0;
    }
}

/* ظرف داخلی برای وسط‌چینی و محدودیت عرض */
.app-main .main-inner {
    max-width: 1200px;
    width: 100%;
    margin-inline: auto; /* وسط‌چین نسبت به جهت */
}

/* ------------ Footer ------------ */
.app-footer {
    margin-top: auto;
    background: #fff;
    border-top: 1px solid #e9ecef;
}

/* ------------ Nav & Accordion polishes ------------ */
.nav-pills .nav-link {
    padding-block: .6rem;
}

.accordion-button {
    background: #fff;
    font-weight: 600;
    padding: .6rem .9rem;
    white-space: normal; /* اجازه‌ی رَپ در موبایل */
}

    .accordion-button:not(.collapsed) {
        background: #f8fafc;
        color: #0b5ed7;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
    }

/* هدینگ‌ها در LTR خرد نشوند؛ در RTL طبیعی بمانند */
[dir="ltr"] .app-main h1,
[dir="ltr"] .app-main h2,
[dir="ltr"] .app-main h3,
[dir="ltr"] .app-main .display-1,
[dir="ltr"] .app-main .display-2,
[dir="ltr"] .app-main .display-3,
[dir="ltr"] .app-main .display-4,
[dir="ltr"] .app-main .display-5,
[dir="ltr"] .app-main .display-6 {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* اگر جایی writing-mode عمودی داده شده بود، خنثی‌اش کن */
.app-main *[style*="writing-mode"],
.app-main .vertical-text {
    writing-mode: horizontal-tb !important;
}

/* ------------ Mobile & Tablet (≤991.98px) ------------ */
/* در موبایل سایدبار به صورت اسلایدی/آف‌کانوس */
@media (max-width:991.98px) {
    .app-sidebar {
        top: var(--header-h);
        width: min(88vw, 320px);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
    }

    [dir="rtl"] .app-sidebar {
        transform: translateX(100%);
    }

    /* زمانی که کلاس show اضافه شود، سایدبار دیده می‌شود */
    .app-sidebar.show {
        transform: translateX(0);
    }

    /* محتوا تمام عرض شود */
    .app-main {
        margin: 0 !important;
        padding: .75rem .9rem;
    }
}

/* ------------ RTL dropdown fix (بدون bootstrap-rtl) ------------ */
[dir="rtl"] .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}