/* =========================================
   Lion Platform – Components Styles
   Safe (RTL/LTR friendly) + stable
   ========================================= */

/* ---------- Topbar (Language + About) ---------- */
/* ---------- Topbar layout (corner pinning) ---------- */
.lion-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* يخلي طرفين */
    gap: 12px;
    flex-wrap: nowrap;
}

.lion-topbar-start,
.lion-topbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* LTR: language left, About right (طبيعي) */
.page[dir="ltr"] .lion-topbar-start {
    justify-content: flex-start;
}

.page[dir="ltr"] .lion-topbar-end {
    justify-content: flex-end;
}

/* RTL: language right, About left */
.page[dir="rtl"] .lion-topbar-start {
    justify-content: flex-end;
}

.page[dir="rtl"] .lion-topbar-end {
    justify-content: flex-start;
}

.lion-about {
    text-decoration: none;
    opacity: .85;
}


.page[dir="rtl"] .lion-about {
    margin-left: 0;
    margin-right: auto;
}

/* ---------- Brand ---------- */
.lion-brand-link {
    font-weight: 900 !important;
    font-size: 1.35rem !important;
    line-height: 1.1;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ---------- NavMenu ---------- */
.lion-navlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .6rem .75rem;
    border-radius: .25rem;
    margin: .15rem 0;
}

.lion-ico {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
    opacity: .95;
}

.lion-txt {
    line-height: 1.2;
}

.lion-navlink:hover {
    background: rgb(255,0, 55, 0);
}

a.nav-link.lion-navlink.active,
a.nav-link.lion-navlink[aria-current="page"],
.nav-link.lion-navlink.active {
    background: rgba(255,0,10,.14);
}

/* ---------- Language Switcher ---------- */
.lion-lang {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lion-lang-btn {
    border: 1px solid rgba(0,0,0,.15);
    background: transparent;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
}
/* ---------- Sidebar base (stable) ---------- */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--lion-sidebar-width, 250px);
    overflow-y: auto;
}

/* LTR */
.page[dir="ltr"] .sidebar {
    left: 0;
}

/* RTL */
.page[dir="rtl"] .sidebar {
    right: 0;
}
/* ---------- Main content offset ---------- */
main {
    min-height: 100vh;
}

/* LTR */
.page[dir="ltr"] main {
    margin-left: var(--lion-sidebar-width, 250px);
}

/* RTL */
.page[dir="rtl"] main {
    margin-right: var(--lion-sidebar-width, 250px);
}
/* ---------- Sidebar colors ---------- */
.sidebar {
    background: var(--lion-sidebar-bg);
    color: var(--lion-sidebar-fg);
}

    /* Brand */
    .sidebar .navbar,
    .sidebar .top-row {
        background: var(--lion-sidebar-bg) !important;
    }

    .sidebar .navbar-brand,
    .sidebar .navbar-brand:visited {
        color: var(--lion-sidebar-fg) !important;
    }

    /* Nav links */
    .sidebar .nav-link,
    .sidebar .nav-link:visited {
        color: rgba(255,255,255,.92);
    }

        .sidebar .nav-link:hover {
            color: #fff;
        }

/* ---------- Topbar colors ---------- */
.lion-topbar {
    background: var(--lion-topbar-bg);
    border-bottom: 1px solid var(--lion-topbar-border);
}

/* About link */
.lion-about {
    color: var(--lion-link);
}
/* Nav active/hover clarity */
.lion-navlink:hover {
    background: rgba(255,255,255,.10);
}

a.nav-link.lion-navlink.active,
a.nav-link.lion-navlink[aria-current="page"],
.nav-link.lion-navlink.active {
    background: rgba(255,255,255,.18);
}
/* ---------- Topbar stability ---------- */
.lion-topbar {
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--lion-topbar-bg);
    border-bottom: 1px solid var(--lion-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; /* يبقى فوق */
    top: 0;
    z-index: 20;
}

/* Ensure blocks don't collapse */
.lion-topbar-start,
.lion-topbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* RTL/LTR corner pinning */
.page[dir="rtl"] .lion-topbar-start {
    justify-content: flex-end;
}

.page[dir="rtl"] .lion-topbar-end {
    justify-content: flex-start;
}

.page[dir="ltr"] .lion-topbar-start {
    justify-content: flex-start;
}

.page[dir="ltr"] .lion-topbar-end {
    justify-content: flex-end;
}