<style>
    /* Sidebar Logo Area */
    .layout-menu .app-brand {
        background: transparent;
        margin: 0 !important;
        margin-bottom: 1.2rem !important;
        padding: 0.8rem 1rem !important;
        height: 90px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
    }

    .layout-menu .app-brand-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 170px;
        height: 100%;
        overflow: hidden;
    }

    .layout-menu .app-brand-link img {
        display: block;
        width: 100%;
        max-width: 160px;
        height: auto;
        max-height: 70px;
        object-fit: contain;
    }

    .layout-menu .layout-menu-toggle {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    /* Optional: better icon alignment */
    .menu-inner .menu-icon {
        width: 22px;
        min-width: 22px;
        text-align: center;
    }
</style>

<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">

    <div class="app-brand demo">
        <a href="{{ route('dashboard') }}" class="app-brand-link">
            <img 
                src="{{ asset('assets/img/logo.png') }}" 
                alt="Cattle Farm Management System Logo"
            />
        </a>

        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
            <i class="ti menu-toggle-icon d-none d-xl-block ti-sm align-middle"></i>
            <i class="icon-base ti tabler-x d-block d-xl-none"></i>
        </a>
    </div>

    <div class="menu-inner-shadow"></div>

    <ul class="menu-inner">

        <li class="menu-item {{ menuActive('dashboard') }}">
            <a href="{{ route('dashboard') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-smart-home"></i>
                <div data-i18n="Dashboard">Dashboard</div>
            </a>
        </li>

        @can('view permissions') 
            <li class="menu-item {{ menuActive('permissions.index') }}">
                <a href="{{ route('permissions.index') }}" class="menu-link">
                    <i class="menu-icon ti tabler-shield"></i>
                    <div data-i18n="Permissions">Permissions</div>
                </a>
            </li>
        @endcan

        @can('view users')
            <li class="menu-item {{ menuActive('users.index') }}">
                <a href="{{ route('users.index') }}" class="menu-link">
                    <i class="menu-icon fas fa-users" style="font-size:14px;"></i>
                    <div data-i18n="Users">Users</div>
                </a>
            </li>
        @endcan

        @can('view cattle categories')
            <li class="menu-item {{ menuActive('cattle-categories.*') }}">
                <a href="{{ route('cattle-categories.index') }}" class="menu-link">
                    <i class="menu-icon fas fa-layer-group" style="font-size:14px;"></i>
                    <div data-i18n="Cattle Name">Cattle Name</div>
                </a>
            </li>
        @endcan

        @can('view animals')
            <li class="menu-item {{ menuActive('animals.*') }}">
                <a href="{{ route('animals.index') }}" class="menu-link">
                    <i class="menu-icon fas fa-cow" style="font-size:14px;"></i>
                    <div data-i18n="Animals Name">Animals Name</div>
                </a>
            </li>
        @endcan

        @can('view expense categories')
            <li class="menu-item {{ menuActive('expense-categories.*') }}">
                <a href="{{ route('expense-categories.index') }}" class="menu-link">
                    <i class="menu-icon fas fa-tags" style="font-size:14px;"></i>
                    <div data-i18n="Expense Categories">Expense Categories</div>
                </a>
            </li>
        @endcan

        @can('view expenses')
            <li class="menu-item {{ menuActive('expenses.*') }}">
                <a href="{{ route('expenses.index') }}" class="menu-link">
                    <i class="menu-icon fas fa-money-bill-wave" style="font-size:14px;"></i>
                    <div data-i18n="Expenses">Expenses</div>
                </a>
            </li>
        @endcan

        @can('view contact messages')
            <li class="menu-item {{ menuActive('contact-messages.*') }}">
                <a href="{{ route('contact-messages.index') }}" class="menu-link">
                    <i class="menu-icon fas fa-envelope" style="font-size:14px;"></i>
                    <div data-i18n="Contact Messages">Contact Messages</div>
                </a>
            </li>
        @endcan

        @can('view audit-logs')
            <li class="menu-item {{ menuActive('audit-logs.index') }}">
                <a href="{{ route('audit-logs.index') }}" class="menu-link">
                    <i class="menu-icon icon-base ti tabler-file-search"></i>
                    <div data-i18n="Audit Logs">Audit Logs</div>
                </a>
            </li>
        @endcan

    </ul>
</aside>