/* Universal Breadcrumb Styling - Based on CRM Dashboard Style */
/* This file ensures consistent breadcrumb appearance across all pages */

/* Ensure hero sections can contain absolutely positioned breadcrumbs */
.power-platform-hero-section,
.ai-agents-hero-section,
.automation-analytics-hero-section,
.training-support-hero-section,
.project-operations-hero-section,
.managed-services-hero-section,
.business-applications-hero-section,
.applications-hero-section,
.field-service-hero-section,
.erp-hero-section {
    position: relative !important;
}

/* Header Bar Wrapper */
.power-header-bar,
.ai-header-bar,
.automation-header-bar,
.training-header-bar,
.project-operations-header-bar,
.managed-header-bar,
.business-header-bar,
.applications-header-bar,
.field-service-header-bar,
.crm-header-bar,
.erp-header-bar {
    padding: 20px 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
}

/* Breadcrumb positioning within hero sections - Clean transparent style */
.power-header-bar,
.ai-header-bar,
.automation-header-bar,
.training-header-bar,
.project-operations-header-bar,
.managed-header-bar,
.business-header-bar,
.applications-header-bar,
.field-service-header-bar,
.erp-header-bar {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 100 !important;
    background: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 400px !important;
}

/* Dashboard Breadcrumb Navigation */
.dashboard-breadcrumb {
    margin: 0;
}

.dashboard-breadcrumb .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.dashboard-breadcrumb .breadcrumb-item {
    color: #ffffff;
}

.dashboard-breadcrumb .breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dashboard-breadcrumb .breadcrumb-item a:hover {
    color: #00BCF2;
}

.dashboard-breadcrumb .breadcrumb-item.active {
    color: #00BCF2;
    font-weight: 500;
}

.dashboard-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #ffffff;
    margin: 0 8px;
}

/* Dark Mode Support */
[data-theme="dark"] .dashboard-breadcrumb .breadcrumb-item {
    color: #ffffff !important;
}

[data-theme="dark"] .dashboard-breadcrumb .breadcrumb-item a {
    color: #ffffff !important;
}

[data-theme="dark"] .dashboard-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff !important;
}

[data-theme="dark"] .dashboard-breadcrumb .breadcrumb-item.active {
    color: #00BCF2 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .power-header-bar,
    .ai-header-bar,
    .automation-header-bar,
    .training-header-bar,
    .project-operations-header-bar,
    .managed-header-bar,
    .business-header-bar,
    .applications-header-bar,
    .field-service-header-bar,
    .crm-header-bar,
    .erp-header-bar {
        padding: 15px 20px 0;
    }
    
    .dashboard-breadcrumb .breadcrumb {
        font-size: 0.8rem;
    }
    
    /* Breadcrumb adjustments for mobile */
    .power-header-bar,
    .ai-header-bar,
    .automation-header-bar,
    .training-header-bar,
    .project-operations-header-bar,
    .managed-header-bar,
    .business-header-bar,
    .applications-header-bar,
    .field-service-header-bar,
    .erp-header-bar {
        top: 15px !important;
        left: 15px !important;
        padding: 0 !important;
        max-width: 300px !important;
    }
}

@media (max-width: 576px) {
    .power-header-bar,
    .ai-header-bar,
    .automation-header-bar,
    .training-header-bar,
    .project-operations-header-bar,
    .managed-header-bar,
    .business-header-bar,
    .applications-header-bar,
    .field-service-header-bar,
    .crm-header-bar,
    .erp-header-bar {
        padding: 10px 15px 0;
    }
    
    /* Breadcrumb adjustments for small mobile */
    .power-header-bar,
    .ai-header-bar,
    .automation-header-bar,
    .training-header-bar,
    .project-operations-header-bar,
    .managed-header-bar,
    .business-header-bar,
    .applications-header-bar,
    .field-service-header-bar,
    .erp-header-bar {
        top: 10px !important;
        left: 10px !important;
        padding: 0 !important;
        max-width: 250px !important;
    }
    
    .dashboard-breadcrumb .breadcrumb {
        font-size: 0.75rem !important;
    }
}