/* /Components/Layout/MainLayout.razor.rz.scp.css */
@inherits LayoutView @inject SafaWeb.Services.UserSessionState UserState @inject NavigationManager Navigation <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base href="/" /> <link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="SafaWeb.styles.css" asp-append-version="true" /> @HeadContent </head> <body> @if (UserState.IsLoggedIn) {
    <div class="page">
    <!-- الشريط الجانبي -->
    <div class="sidebar"> <div class="sidebar-brand"> <h4 class="text-white text-center pt-3"> <i class="bi bi-building"></i> صفا </h4> <hr class="text-white-50" /> <div class="user-info text-center text-white-50 small"> <i class="bi bi-person-circle"></i> @UserState.UserName <br /> <span class="text-light">@UserState.BranchName</span> </div> <hr class="text-white-50" /> </div> <nav class="navbar navbar-dark flex-column"> <ul class="nav nav-pills flex-column w-100">
    <!-- المخزون -->
    <li class="nav-item px-2 mt-2"> <div class="text-uppercase text-white-50 small fw-bold mb-1 px-3">المخزون</div> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link text-white" href="/item-card"> <i class="bi bi-card-heading me-2"></i> الأصناف </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/item-card"> <i class="bi bi-calculator me-2"></i> القوالب والوحدات </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/item-card"> <i class="bi bi-collection me-2"></i> المجموعات </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/item-card"> <i class="bi bi-tags me-2"></i> الماركات </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/item-card"> <i class="bi bi-globe me-2"></i> بلد المنشأ </a> </li> </ul> </li>
    <!-- الأصول النقدية -->
    <li class="nav-item px-2 mt-3"> <div class="text-uppercase text-white-50 small fw-bold mb-1 px-3">الأصول النقدية</div> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link text-white" href="/cash-boxes"> <i class="bi bi-wallet2 me-2"></i> الصناديق </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/bank-card"> <i class="bi bi-bank me-2"></i> البنوك وعمليات البطاقات </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/installment-companies"> <i class="bi bi-building-check me-2"></i> شركات التقسيط </a> </li> </ul> </li>
    <!-- الإعدادات -->
    <li class="nav-item px-2 mt-3"> <div class="text-uppercase text-white-50 small fw-bold mb-1 px-3">الإعدادات</div> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link text-white" href="/users"> <i class="bi bi-people me-2"></i> المستخدمين والصلاحيات </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/branches"> <i class="bi bi-building me-2"></i> الفروع </a> </li> <li class="nav-item"> <a class="nav-link text-white" href="/backup"> <i class="bi bi-shield-lock me-2"></i> النسخ الاحتياطي </a> </li> </ul> </li>
    <!-- زر تسجيل الخروج -->
    <li class="nav-item px-2 mt-4"> <hr class="text-white-50" /> <button class="btn btn-outline-danger w-100" @onclick="Logout"> <i class="bi bi-box-arrow-right me-2"></i> تسجيل الخروج </button> </li> </ul> </nav> </div> <main> <div class="top-row px-4"> <div class="ms-auto d-flex align-items-center gap-3"> <span class="text-muted small"> <i class="bi bi-calendar3 me-1"></i> @DateTime.Now.ToString("dd/MM/yyyy") </span> <span class="badge bg-primary"> <i class="bi bi-building me-1"></i> @UserState.BranchName </span> </div> </div> <article class="content px-4"> @Body </article> </main> </div>
}

else[b-gujhd5ujvt] {
    <!-- عرض شاشة تسجيل الدخول -->
    <div class="login-container"> @Body </div>
}

<div id="blazor-error-ui" >
<environment include="Staging,Production" >
خطأ غير متوقع
</environment >
<environment include="Development" >
@* خطأ: @error *@
</environment >
<a href="" class="reload" > إعادة تحميل</a >
<a class="dismiss" > 🗙</a >
</div >

<script src="bootstrap/bootstrap.min.js" > </script >
</body >
</html >

@code[b-gujhd5ujvt] {
    private void Logout() {
        UserState .Logout();
        Navigation .NavigateTo("/", true);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-0jc401t46i] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-0jc401t46i] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-0jc401t46i] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-0jc401t46i] {
    font-size: 1.1rem;
}

.bi[b-0jc401t46i] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-0jc401t46i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-0jc401t46i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-0jc401t46i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-0jc401t46i] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-0jc401t46i] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-0jc401t46i] {
        padding-bottom: 1rem;
    }

    .nav-item[b-0jc401t46i]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-0jc401t46i]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-0jc401t46i]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-0jc401t46i] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-0jc401t46i] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-0jc401t46i] {
        display: none;
    }

    .nav-scrollable[b-0jc401t46i] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vtfqvytbao],
.components-reconnect-repeated-attempt-visible[b-vtfqvytbao],
.components-reconnect-failed-visible[b-vtfqvytbao],
.components-pause-visible[b-vtfqvytbao],
.components-resume-failed-visible[b-vtfqvytbao],
.components-rejoining-animation[b-vtfqvytbao] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-retrying[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-failed[b-vtfqvytbao],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vtfqvytbao] {
    display: block;
}


#components-reconnect-modal[b-vtfqvytbao] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vtfqvytbao 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vtfqvytbao 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vtfqvytbao 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vtfqvytbao]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vtfqvytbao 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vtfqvytbao {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vtfqvytbao {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vtfqvytbao {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vtfqvytbao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vtfqvytbao] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vtfqvytbao] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vtfqvytbao] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vtfqvytbao] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vtfqvytbao] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vtfqvytbao] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vtfqvytbao 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vtfqvytbao] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vtfqvytbao {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
