@using Biskilog_Accounting.Client.Elements
@using Biskilog_Accounting.Shared.Interfaces;

@inherits LayoutComponentBase
@inject NavigationManager m_navigationManager
@inject HttpClient m_http
@inject ITokenService m_tokenService
@inject IProduct m_productRepo
@inject DialogService m_dialogService
@inject ISalesInterface m_salesService
@inject ICompanyInfo m_companyInfo
@inject IUser m_userService
@inject ICustomer m_customerService
@inject ISearchService m_searchSearch

<RadzenDialog />
<RadzenContextMenu />
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
        <!-- Menu -->
        <Sidebar OnClickCallback=@(() => Click("sidebar")) />
        <!-- / Menu -->
        <!-- Body Layout container -->
        <div style="width: 100vh;display: flex;flex: 1 1 auto;flex-direction: column;flex-wrap: nowrap;">
            <div class="layout-page">
                <Headbar/>
                <!-- Content wrapper -->
                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y" @onclick=@(() => Click("body"))>
                        <!-- Content -->
                        @Body
                        <!-- / Content -->
                    </div>
                </div>
                <!-- Content wrapper -->
            </div>
            <!-- / Layout page -->
            <Footer OnClickCallback=@(() => Click("footer")) />
        </div>
    </div>
</div>
<!-- / Layout wrapper -->

<style>
    .rz-datatable-thead th, .rz-grid-table thead th {
        background-color: #e0e0e0;
    }

    .rz-data-row:hover {
        cursor: pointer;
        color: white !important;
    }

    .rz-steps .rz-state-highlight .rz-steps-title {
        background-color: #0a0a38 !important;
        color: white !important;
    }

    .rz-steps .rz-state-highlight .rz-steps-number {
        background-color: #0a0a38 !important;
        color: white !important;
    }

    .rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
        color: #ffffff !important;
    }

    .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
        background-color: #0a0a38 !important;
    }

    .rz-dialog-titlebar {
        padding: 10px !important;
        background-image: linear-gradient(to bottom right,rgb(10,10,56,1.16),rgb(20, 158, 132,1.16)) !important;
        color: white !important;
    }

    .rz-dialog-title {
        font-weight: var(--rz-dialog-title-font-weight);
        letter-spacing: var(--rz-dialog-title-letter-spacing);
        color: #ffffff !important
    }

    .rz-dialog-titlebar-close .rzi-times {
        font-size: var(--rz-dialog-close-font-size);
        color: #ffffff !important;
        vertical-align: var(--rz-dialog-close-vertical-align);
    }

    .rz-dialog-side-content {
        flex: 0 1 auto;
         padding: 1px !important;
        overflow: auto;
    }
</style>