@php $isRtl = in_array(app()->getLocale(), ['ar']); @endphp

{{-- Google Fonts: Cairo + Tajawal for Arabic, Inter for English --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

{{-- Bootstrap 4 — single LTR build; RTL handled via dir="rtl" + custom overrides
     in this file. The third-party bootstrap-rtl adds its own margin/padding
     defaults that conflict with the sidebar pinning and create visible gaps. --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

{{-- Font Awesome --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

{{-- AdminLTE 3 --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2.0/dist/css/adminlte.min.css">

{{-- DataTables --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.min.css">

{{-- Select2 --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.min.css">

{{-- Toastr --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

{{-- SweetAlert 2 --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
    :root {
        --ofp-primary: #2c3e50;
        --ofp-secondary: #18bc9c;
        --ofp-accent:    #c0392b;
    }

    /* === Reset: zero out user-agent margins so a fixed sidebar can really touch
       the screen edge. AdminLTE relies on `.wrapper` to be edge-to-edge too. === */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        font-family: @if($isRtl) 'Cairo', 'Tajawal', sans-serif; @else 'Inter', system-ui, sans-serif; @endif
    }
    html, body { width: 100%; min-height: 100vh; }
    .wrapper { margin: 0 !important; padding: 0 !important; min-height: 100vh; width: 100%; position: relative; }

    @if($isRtl)
        /* === Sidebar pinned to RIGHT, fixed full-height ===
           Use `position: fixed; right: 0` — this is relative to the VIEWPORT,
           so no parent margin/padding can ever push it off the screen edge. === */
        html, body { overflow-x: hidden; }
        body, .main-sidebar, .main-header, .content-wrapper, .main-footer { direction: rtl; text-align: right; }

        .main-sidebar,
        body.sidebar-mini .main-sidebar,
        body.layout-fixed .main-sidebar {
            right: 0 !important;
            left: auto !important;
            position: fixed !important;
            top: 0 !important;
            bottom: 0 !important;
            height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            z-index: 1038;
            width: 250px;
        }
        body.sidebar-collapse .main-sidebar { width: 4.6rem; }

        /* Inside the sidebar: every container goes edge-to-edge.
           CRITICAL: <ul> has a 40px user-agent `padding-inline-start` which in RTL
           becomes padding-RIGHT on the .nav element — this is what was pushing the
           whole menu away from the sidebar's right edge. We zero it out explicitly. */
        .main-sidebar > *,
        .sidebar { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
        .sidebar { padding-bottom: 0; }
        .main-sidebar ul,
        .main-sidebar .nav,
        .main-sidebar .nav-sidebar,
        .nav-sidebar.nav-pills,
        .nav-sidebar.flex-column {
            padding-inline-start: 0 !important;
            padding-inline-end:   0 !important;
            padding-right: 0 !important;
            padding-left:  0 !important;
            margin: 0 !important;
            list-style: none;
        }
        .nav-sidebar > .nav-item { margin: 0 !important; }

        /* === Content wrapper / header / footer: get pushed by sidebar width === */
        .main-header,
        .content-wrapper,
        .main-footer {
            margin-left: 0 !important;
            transition: margin-right .3s ease-in-out;
        }
        body:not(.sidebar-collapse):not(.sidebar-mini-md) .main-header,
        body:not(.sidebar-collapse):not(.sidebar-mini-md) .content-wrapper,
        body:not(.sidebar-collapse):not(.sidebar-mini-md) .main-footer {
            margin-right: 250px !important;
        }
        body.sidebar-collapse .main-header,
        body.sidebar-collapse .content-wrapper,
        body.sidebar-collapse .main-footer {
            margin-right: 4.6rem !important;
        }
        @media (max-width: 991.98px) {
            body:not(.sidebar-open) .main-header,
            body:not(.sidebar-open) .content-wrapper,
            body:not(.sidebar-open) .main-footer { margin-right: 0 !important; }
            .main-sidebar { transform: translateX(250px); }
            body.sidebar-open .main-sidebar { transform: translateX(0); }
        }

        .content-wrapper { min-height: calc(100vh - 100px); width: auto; }
        .content-wrapper > .content,
        .content-wrapper > .content-header { width: 100%; }

        /* === Sidebar internals: icon + text glued together on the RIGHT ===
           We deliberately AVOID flexbox here because RTL flex behavior conflicts
           with AdminLTE defaults and ends up spreading items apart. Instead we
           use inline-block + text-align:right which naturally packs everything
           against the right edge of the link in RTL. */
        .main-sidebar, .main-sidebar * { direction: rtl; }

        .nav-sidebar .nav-link {
            display: block !important;
            position: relative;
            text-align: right !important;
            padding: .65rem 1rem;
            white-space: nowrap;
        }
        .nav-sidebar .nav-link .nav-icon {
            display: inline-block;
            width: 1.6rem;
            text-align: center;
            font-size: 1.1rem;
            margin: 0 0 0 .5rem !important;   /* small gap to the LEFT (next to text) */
            float: none;
            vertical-align: middle;
        }
        .nav-sidebar .nav-link p {
            display: inline-block;
            margin: 0 !important;
            vertical-align: middle;
        }
        .nav-sidebar .menu-open > .nav-treeview,
        .nav-sidebar .menu-is-opening > .nav-treeview { padding-right: 0; padding-left: 0; }
        /* Treeview sub-items: indent away from the right edge */
        .nav-sidebar .nav-treeview .nav-link { padding-right: 2.5rem; padding-left: 2rem; }
        .nav-sidebar .nav-treeview .nav-icon { font-size: .55rem; opacity: .7; }

        /* Caret arrow on tree-toggle items: pinned to the LEFT */
        .nav-sidebar .nav-link > p > .right,
        .nav-sidebar .nav-link > .right {
            position: absolute !important;
            left: 1rem !important;
            right: auto !important;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
        }
        .nav-sidebar .menu-open > .nav-link > p > .right,
        .nav-sidebar .menu-is-opening > .nav-link > p > .right { transform: translateY(-50%) rotate(-90deg); }
        [class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active { background-color: var(--ofp-secondary); }

        /* Section headers ("المبيعات", "CRM"…) flush right */
        .nav-sidebar .nav-header { text-align: right !important; padding: 1rem; }

        /* User panel: avatar right, name to its left */
        .user-panel { padding: .8rem 1rem; }
        .user-panel .image,
        .user-panel .info { display: inline-block; vertical-align: middle; float: none; }
        .user-panel .image { padding: 0 0 0 .6rem; }
        .user-panel .info { padding: 0; }

        /* Brand link: logo right, name to its left */
        .brand-link {
            display: block !important;
            text-align: right !important;
            padding: .8125rem 1rem !important;
            white-space: nowrap;
        }
        .brand-link .brand-image,
        .brand-link .brand-text {
            display: inline-block !important;
            vertical-align: middle;
            float: none !important;
        }
        .brand-link .brand-image { margin: 0 0 0 .5rem !important; }

        /* === Breadcrumb / utilities === */
        .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: .5rem; padding-right: 0; }
        .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }
        .input-group > .form-control:not(:last-child) { border-radius: 0 .25rem .25rem 0; }
        .input-group > .form-control:not(:first-child) { border-radius: .25rem 0 0 .25rem; }
        .float-right { float: left !important; }
        .float-left  { float: right !important; }
        .text-right  { text-align: left !important; }
        .text-left   { text-align: right !important; }
        .ml-auto, .mx-auto { margin-left: 0 !important; margin-right: auto !important; }

        /* === Navbar buttons stay on the left/right correctly === */
        .navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; }
        .main-header .nav-link { padding: .5rem 1rem; }

        /* === Cards / dashboard small-boxes look right in RTL === */
        .small-box .icon { left: 10px; right: auto; }
        .info-box-icon { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;
                         border-top-left-radius: 0; border-bottom-left-radius: 0; }
    @endif

    .brand-link .brand-image { line-height: .8; max-height: 33px; opacity: .8; }
    .brand-link .brand-text  { font-weight: 700; }

    .login-box { width: 420px; }
    .login-logo a { font-weight: 700; color: var(--ofp-primary); }

    .small-box { border-radius: .5rem; }

    .toast-top-left, .toast-top-right { top: 70px; }

    .table thead th { background: #f4f6f9; font-weight: 600; }

    @if($isRtl)
        /* === Final guard against any residual right-edge gap.
           Loaded LAST so it wins specificity wars with everything above. === */
        body.sidebar-mini .main-sidebar,
        body.layout-fixed .main-sidebar,
        body .main-sidebar { right: 0 !important; left: auto !important; margin: 0 !important; }
        body { padding-right: 0 !important; margin-right: 0 !important; }
    @endif
</style>

@stack('styles')