/* ==========================================================================
   HIGH-CONTRAST ERP DESIGN SYSTEM (BOOTSTRAP COMPATIBLE)
   ========================================================================== */

:root {
    --erp-navy: #0b2545; /* Deep Navy Header */
    --erp-blue: #134074; /* Mid Blue Sidebar/Accent */
    --erp-bg: #f8fafc; /* Ultra-Light Workspace Background */
    --erp-card: #ffffff; /* Pure White Content Card */
    --text-main: #0f172a; /* Dark Charcoal (Almost Black) for perfect readability */
    --text-muted: #475569; /* Deep Slate for Form Labels */
    --border-color: #cbd5e1; /* Accessible Border Lines */
    /* Smooth transition tokens for a premium application feel */
    --erp-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Configuration Override */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--erp-bg) !important;
    color: var(--text-main) !important;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Master Layout Grid */
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* Deep Navy Header Bar */
.erp-header {
    height: 60px;
    background-color: var(--erp-navy) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15); /* Modernized sharper shadow */
    flex-shrink: 0;
}

.erp-brand {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Core Interface Body */
.erp-body {
    display: flex;
    flex: 1;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* Sidebar Framework */
.erp-sidebar {
    width: 250px;
    background-color: #ffffff !important;
    border-right: 1px solid var(--border-color);
    padding: 1.25rem 0.75rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .erp-sidebar .nav-link {
        color: var(--text-muted) !important;
        font-weight: 600;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.9rem;
        transition: var(--erp-transition);
    }

        .erp-sidebar .nav-link:hover {
            background-color: #f1f5f9 !important;
            color: var(--erp-blue) !important;
            transform: translateX(2px); /* Subtle modern motion hint */
        }

        .erp-sidebar .nav-link.active {
            background-color: var(--erp-blue) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 6px -1px rgba(19, 64, 116, 0.2);
        }

/* Main Form/Table Workspace Panel */
.erp-content {
    flex: 1;
    padding: 2rem; /* Enhanced breathing room */
    overflow-y: auto; /* Enables proper scrolling so the bottom panel doesn't hide */
    background-color: var(--erp-bg) !important;
}

/* 
   FIX: High-Specificity Scoped Card Targets 
   Overrides native Bootstrap .card rule variations completely
*/
body .card.erp-card,
body .erp-card {
    background-color: var(--erp-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important; /* Smoothed to premium dashboard scale */
    padding: 1.75rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: var(--erp-transition) !important;
}

    /* Scoped interactive feedback state overrides */
    body .card.erp-card:hover,
    body .erp-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
    }

/* Form Fields Optimization */
.erp-form-label {
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 0.5rem;
}

/* FIX: Scoped Input Elements */
body .form-control.erp-input,
body .erp-input {
    background-color: #ffffff !important;
    color: #000000 !important; /* Forces black text color inside text inputs */
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 0.65rem 0.85rem !important; /* Slightly larger targets */
    width: 100%;
    transition: var(--erp-transition);
}

    body .form-control.erp-input:focus,
    body .erp-input:focus {
        border-color: var(--erp-blue) !important;
        box-shadow: 0 0 0 3px rgba(19, 64, 116, 0.15) !important;
        outline: none;
    }

/* 
   FIX: High-Specificity Scoped Button Targets 
   Overrides native Bootstrap .btn rule hierarchies completely
*/
body .btn.btn-erp-primary,
body .btn-erp-primary {
    background-color: var(--erp-blue) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: 6px !important;
    transition: var(--erp-transition) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    body .btn.btn-erp-primary:hover,
    body .btn-erp-primary:hover {
        background-color: var(--erp-navy) !important;
        filter: brightness(105%) !important;
    }

/* Custom Scrollbar Configuration */
.erp-content::-webkit-scrollbar {
    width: 8px;
}

.erp-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .erp-content::-webkit-scrollbar-thumb:hover {
        background: #94a3b8; /* Darkens on hover for clear visibility */
    }

/* Custom Alignment Parameters for the Separated Component Audit Log Modals */
body .border-vendor {
    border-left-color: var(--erp-blue) !important;
}

body .border-customer {
    border-left-color: #D97706 !important;
}

body .bg-vendor {
    background-color: #E0F2FE !important;
}

body .text-vendor-dark {
    color: #0369A1 !important;
}

body .bg-customer {
    background-color: #FEF3C7 !important;
}

body .text-customer-dark {
    color: #B45309 !important;
}

body .text-warning-heading {
    color: #FBBF24 !important;
}

body .audit-timeline {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
/* ==========================================================================
   
    APPLICATION CORE SHELL STRUCTURE
   ========================================================================== */

/* Master Layout Framework Shell */
.erp-layout-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--erp-bg);
}

.erp-body-workspace {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    width: 100%;
}

.erp-content-canvas {
    flex: 1;
    overflow-y: auto;
    background-color: var(--erp-bg);
    width: 100%;
}

/* ==========================================================================
   UNIFIED HEADER & INTERACTIVE NAVIGATION TOP BAR
   ========================================================================== */
.erp-header-shell {
    background-color: var(--erp-navy) !important;
    min-height: 60px;
    height: 60px;
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    /* Force white readability exclusively on the top bar context links and elements */
    .erp-header-shell :not(.dropdown-menu):not(.dropdown-menu *) {
        color: #FFFFFF !important;
    }

    /* Secondary meta descriptions sub-links decoration */
    .erp-header-shell small,
    .erp-header-shell .text-white-50,
    .erp-header-shell .text-muted {
        color: #CBD5E1 !important;
        opacity: 0.95 !important;
    }

    /* Horizontal top bar link matrix navigation engines */
    .erp-header-shell nav .nav-link {
        color: #E2E8F0 !important;
        font-weight: 500;
        background-color: transparent !important;
        transition: var(--erp-transition);
    }

        /* Active navigation tracking state indicators */
        .erp-header-shell nav .nav-link-active,
        .erp-header-shell nav .nav-link[style*="background-color"] {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.15) !important;
        }

        /* Scoped interactive hover states targeting top bar links ONLY */
        .erp-header-shell nav .nav-link:hover,
        .erp-header-shell nav .link-hover-bright:hover {
            color: #FFFFFF !important;
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

/* Clean, isolated Administrative Action Button Class */
body .btn-vendor-login,
.btn-vendor-login {
    background-color: var(--erp-navy) !important;
    color:#ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    border: none !important;
    transition: opacity 0.2s ease !important;
}

    body .btn-vendor-login:hover,
    .btn-vendor-login:hover {
        opacity: 0.9 !important;
    }

body .btn-session-signout,
.btn-session-signout {
    font-size: 0.82rem !important;
    color: #FFFFFF !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    transition: var(--erp-transition) !important;
}

    body .btn-session-signout:hover,
    .btn-session-signout:hover {
        color: #FFFFFF !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }
/* ==========================================================================
   MULTI-LEVEL DROPDOWN NAVIGATION ENGINE (TOP BAR EXTENSION)
   ========================================================================== */
.btn-header-dropdown {
    font-size: 0.85rem;
    color: #FFFFFF !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    transition: var(--erp-transition);
}

    /* FIXED: Blocks Bootstrap from turning this button into a solid white box on hover */
    .btn-header-dropdown:hover,
    .btn-header-dropdown:focus,
    .btn-header-dropdown[aria-expanded="true"] {
        color: #FFFFFF !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
body .dropdown-submenu {
    position: relative;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

    body .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        margin-left: 0px;
        border-radius: 6px !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        display: none;
    }

    /* Smoothly display the child sub-menus on hover states */
    body .dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
    }

/* Ensure accessible readability matching your core theme variables */
body .dropdown-menu .dropdown-item {
    color: var(--text-main) !important;
    font-weight: 500;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
}

    body .dropdown-menu .dropdown-item:hover {
        background-color: #f1f5f9 !important;
        color: var(--erp-blue) !important;
    }

body .dropdown-header {
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body .dropdown-menu,
body .dropdown-submenu .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

    /* 2. Force text to deep dark charcoal for flawless high-contrast readability */
    body .dropdown-menu .dropdown-item,
    body .dropdown-submenu .dropdown-item {
        color: #0f172a !important;
        font-weight: 600 !important; /* Semi-bold for sharp enterprise definition */
        background-color: transparent !important;
    }

        /* 3. Manage active focus/hover states (Clean slate-gray accent background) */
        body .dropdown-menu .dropdown-item:hover,
        body .dropdown-submenu .dropdown-item:hover {
            background-color: #f1f5f9 !important; /* Soft light workspace hover tint */
            color: #134074 !important; /* Changes text to your mid-blue brand accent token */
        }

    /* 4. Force section title labels to use your slate-gray muted token */
    body .dropdown-menu .dropdown-header,
    body .dropdown-submenu .dropdown-header {
        color: #475569 !important;
        font-weight: 700 !important;
        background-color: transparent !important;
    }

/* 5. Clean up sub-menu arrow indicators to use deep slate color */
body .dropdown-item .bi-chevron-right {
    color: #64748b !important;
}

/* ==========================================================================
   PRINT MEDIA AND PROFORMA DOCUMENT ENHANCEMENTS
   ========================================================================== */
@media print {
    /* Hide top dark blue header, sidebar panel navigation, and control buttons */
    .no-print-container,
    .erp-header,
    .erp-sidebar,
    button,
    a {
        display: none !important;
    }

    /* Force main workspace container to fill full standard page scaling limits */
    .page,
    .erp-body,
    .erp-content,
    .print-area {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #ffffff !important;
        overflow: visible !important;
    }

    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .print-border-0 {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}