/* _content/AutoReports/Components/Layout/AdminNav.razor.rz.scp.css */
/* ============================================
   ADMIN NAVIGATION BAR - STYLESHEET
   Majesty Oil Mills Auto Reports System
   ============================================ */

/* ============================================
   ADMIN NAV CONTAINER
   ============================================ */
.admin-nav[b-sv4qosfq2p] {
    background: var(--mar-bg-primary, #ffffff);
    border-bottom: 2px solid var(--mar-border-light, #e4e6eb);
    box-shadow: var(--mar-shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--mar-z-sticky, 1020);
    transition: all var(--mar-transition-base, 200ms);
}

/* ============================================
   ADMIN NAV HEADER
   ============================================ */
.admin-nav-header[b-sv4qosfq2p] {
    display: flex;
    align-items: center;
    gap: var(--mar-space-md, 1rem);
    padding: var(--mar-space-lg, 1.5rem) var(--mar-space-xl, 2rem);
    background: linear-gradient(135deg, var(--mar-primary, #2c3e50) 0%, var(--mar-primary-light, #34495e) 100%);
    color: var(--mar-white, #ffffff);
    font-size: var(--mar-font-size-lg, 1.125rem);
    font-weight: var(--mar-font-weight-bold, 700);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .admin-nav-header i[b-sv4qosfq2p] {
        font-size: var(--mar-font-size-xl, 1.25rem);
        color: var(--mar-accent-light, #5dade2);
    }

/* ============================================
   ADMIN NAV ITEMS
   ============================================ */
.admin-nav-items[b-sv4qosfq2p] {
    display: flex;
    gap: var(--mar-space-xs, 0.25rem);
    padding: var(--mar-space-sm, 0.5rem) var(--mar-space-xl, 2rem);
    overflow-x: auto;
    overflow-y: hidden;
}

    .admin-nav-items[b-sv4qosfq2p]::-webkit-scrollbar {
        height: 4px;
    }

    .admin-nav-items[b-sv4qosfq2p]::-webkit-scrollbar-track {
        background: var(--mar-bg-secondary, #f8f9fa);
    }

    .admin-nav-items[b-sv4qosfq2p]::-webkit-scrollbar-thumb {
        background: var(--mar-border-color, #dcdee3);
        border-radius: 2px;
    }

        .admin-nav-items[b-sv4qosfq2p]::-webkit-scrollbar-thumb:hover {
            background: var(--mar-gray-400, #bdc1c9);
        }

/* ============================================
   ADMIN NAV ITEM
   ============================================ */
.admin-nav-item[b-sv4qosfq2p] {
    display: flex;
    align-items: center;
    gap: var(--mar-space-sm, 0.5rem);
    padding: var(--mar-space-md, 1rem) var(--mar-space-lg, 1.5rem);
    color: var(--mar-text-secondary, #606770);
    text-decoration: none;
    font-size: var(--mar-font-size-base, 1rem);
    font-weight: var(--mar-font-weight-medium, 500);
    border-radius: var(--mar-radius-md, 0.5rem);
    transition: all var(--mar-transition-fast, 150ms);
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

    .admin-nav-item i[b-sv4qosfq2p] {
        font-size: var(--mar-font-size-lg, 1.125rem);
        transition: all var(--mar-transition-fast, 150ms);
    }

    .admin-nav-item span[b-sv4qosfq2p] {
        transition: all var(--mar-transition-fast, 150ms);
    }

    .admin-nav-item:hover[b-sv4qosfq2p] {
        background: var(--mar-bg-tertiary, #f0f2f5);
        color: var(--mar-accent, #3498db);
    }

        .admin-nav-item:hover i[b-sv4qosfq2p] {
            color: var(--mar-accent, #3498db);
            transform: scale(1.1);
        }

    .admin-nav-item.active[b-sv4qosfq2p] {
        background: linear-gradient(135deg, var(--mar-accent, #3498db) 0%, var(--mar-accent-dark, #2980b9) 100%);
        color: var(--mar-white, #ffffff);
        font-weight: var(--mar-font-weight-semibold, 600);
        box-shadow: var(--mar-shadow-md);
    }

        .admin-nav-item.active i[b-sv4qosfq2p] {
            color: var(--mar-white, #ffffff);
        }

        .admin-nav-item.active[b-sv4qosfq2p]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 3px;
            background: var(--mar-white, #ffffff);
            border-radius: 3px 3px 0 0;
        }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets */
@media (max-width: 1024px) {
    .admin-nav-header[b-sv4qosfq2p] {
        padding: var(--mar-space-md, 1rem) var(--mar-space-lg, 1.5rem);
        font-size: var(--mar-font-size-base, 1rem);
    }

    .admin-nav-items[b-sv4qosfq2p] {
        padding: var(--mar-space-sm, 0.5rem) var(--mar-space-lg, 1.5rem);
    }

    .admin-nav-item[b-sv4qosfq2p] {
        padding: var(--mar-space-sm, 0.5rem) var(--mar-space-md, 1rem);
        font-size: var(--mar-font-size-sm, 0.875rem);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .admin-nav-header[b-sv4qosfq2p] {
        padding: var(--mar-space-sm, 0.5rem) var(--mar-space-md, 1rem);
        font-size: var(--mar-font-size-sm, 0.875rem);
    }

        .admin-nav-header i[b-sv4qosfq2p] {
            font-size: var(--mar-font-size-lg, 1.125rem);
        }

    .admin-nav-items[b-sv4qosfq2p] {
        padding: var(--mar-space-xs, 0.25rem) var(--mar-space-md, 1rem);
        gap: 0;
    }

    .admin-nav-item[b-sv4qosfq2p] {
        padding: var(--mar-space-sm, 0.5rem) var(--mar-space-md, 1rem);
    }

        .admin-nav-item span[b-sv4qosfq2p] {
            display: none;
        }

        .admin-nav-item i[b-sv4qosfq2p] {
            font-size: var(--mar-font-size-xl, 1.25rem);
        }

        .admin-nav-item.active[b-sv4qosfq2p]::after {
            width: 60%;
        }
}

/* Small Mobile */
@media (max-width: 480px) {
    .admin-nav-header span[b-sv4qosfq2p] {
        font-size: var(--mar-font-size-xs, 0.75rem);
    }

    .admin-nav-item[b-sv4qosfq2p] {
        padding: var(--mar-space-sm, 0.5rem);
        min-width: 48px;
        justify-content: center;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.admin-nav-item:focus-visible[b-sv4qosfq2p] {
    outline: 3px solid var(--mar-accent, #3498db);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .admin-nav-item[b-sv4qosfq2p],
    .admin-nav-item i[b-sv4qosfq2p],
    .admin-nav-item span[b-sv4qosfq2p],
    .admin-nav[b-sv4qosfq2p] {
        transition: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .admin-nav[b-sv4qosfq2p] {
        border-bottom: 3px solid var(--mar-text-primary, #1c1e21);
    }

    .admin-nav-item[b-sv4qosfq2p] {
        border: 1px solid transparent;
    }

        .admin-nav-item:hover[b-sv4qosfq2p] {
            border-color: var(--mar-accent, #3498db);
        }

        .admin-nav-item.active[b-sv4qosfq2p] {
            border: 2px solid var(--mar-white, #ffffff);
        }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .admin-nav[b-sv4qosfq2p] {
        display: none !important;
    }
}
/* _content/AutoReports/Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================
   MAIN LAYOUT STYLES
   ============================================ */
/*
.app-container {
    display: flex;
    min-height: 100vh;
    background-color: var(--mar-bg-secondary, #f8f9fa);
}*/

.app-content[b-9fjm78tf8m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: 280px;
    transition: margin-left var(--mar-transition-base, 200ms);
}

.nav-sidebar.collapsed ~ .app-content[b-9fjm78tf8m] {
    margin-left: 80px;
}

.app-main[b-9fjm78tf8m] {
    flex: 1;
    padding: 0;
}

#blazor-error-ui[b-9fjm78tf8m] {
    background: #ffebee;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #c62828;
    font-weight: 500;
}

    #blazor-error-ui .dismiss[b-9fjm78tf8m] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        font-size: 1.5rem;
    }

    #blazor-error-ui .reload[b-9fjm78tf8m] {
        color: #c62828;
        text-decoration: underline;
        font-weight: 600;
    }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .app-content[b-9fjm78tf8m] {
        margin-left: 0;
    }

    .nav-sidebar.collapsed ~ .app-content[b-9fjm78tf8m] {
        margin-left: 0;
    }
}
/* _content/AutoReports/Components/Layout/NavMenu.razor.rz.scp.css */